FocusScopeManager

Methods

activateScope

Ask AI

Source code

focusScopeManager.activateScope(scopeId, [focusSource])

Activates a focus scope by its ID.

Param	Type	Default	Description
scopeId	string		The ID of the scope to activate.
[focusSource]	'unknown' 'click' 'tab_from_above' 'tab_from_below'	’unknown’	optional Passed to the scope’s onActivate callback (same values as document htFocusSource).

deactivateScope

Ask AI

Source code

focusScopeManager.deactivateScope(scopeId)

Deactivates a scope by its ID.

Param	Type	Description
scopeId	string	The ID of the scope to deactivate.

getActiveScopeId

Ask AI

Source code

focusScopeManager.getActiveScopeId() ⇒ string | null

Returns the ID of the active scope.

Returns: string | null - The ID of the active scope.

isGridBodyCovered

Ask AI

Source code

focusScopeManager.isGridBodyCovered() ⇒ boolean

Whether any enabled scope currently covers the grid body.

Asked of every registered scope rather than only the active one: an overlay is on screen whether or not it holds the keyboard, and that is what puts the cells underneath out of reach. Shortcuts that act on cell content consult this through canAccessCellContent() in ../shortcuts/guards.ts.

registerScope

Ask AI

Source code

focusScopeManager.registerScope(scopeId, container, [options])

Registers a new focus scope.

Example
For regular element (inline scope)

hot.getFocusScopeManager().registerScope('myPluginName', containerElement, {
  shortcutsContextName: 'plugin:myPluginName',
  onActivate: (focusSource) => {
    // Focus the internal focusable element within the plugin UI element
  },
});

or for modal scope

hot.getFocusScopeManager().registerScope('myPluginName', containerElement, {
  shortcutsContextName: 'plugin:myPluginName',
  type: 'modal',
  runOnlyIf: () => isDialogOpened(),
  onActivate: (focusSource) => {
    // Focus the internal focusable element within the plugin UI element
  },
});

Param	Type	Default	Description
scopeId	string		Unique identifier for the scope.
container	HTMLElement		Container element for the scope.
[options]	object		optional Configuration options.
[options.shortcutsContextName]	string	”grid”	optional The name of the shortcuts context to switch to when the scope is activated.
[options.fallbackShortcutsContextName]	string		optional The name of a shortcuts context consulted for keys the scope’s own context does not define. Pass 'grid' for a scope that covers the grid without replacing it. It must differ from shortcutsContextName, which defaults to 'grid'.
[options.coversGridBody]	boolean	false	optional Whether the scope covers the grid body while it is showing, so the cells underneath are drawn but out of reach. Covering and inheriting are separate questions: a pagination bar may inherit without covering.
[options.type]	'modal' 'inline'	’inline’	optional The type of the scope: - modal: The scope is modal and blocks the rest of the grid from receiving focus. - inline: The scope is inline and allows the rest of the grid to receive focus in the order of the rendered elements in the DOM.
[options.runOnlyIf]	function		optional Whether the scope is enabled or not depends on the custom logic.
[options.contains]	function		optional Whether the target element is within the scope. If the option is not provided, the scope will be activated if the target element is within the container element.
[options.onActivate]	function		optional Callback function to be called when the scope is activated. The first argument is the source of the activation: - unknown: The scope is activated by an unknown source. - click: The scope is activated by a click event. - tab_from_above: The scope is activated by a tab key press. - tab_from_below: The scope is activated by a shift+tab key press.
[options.onDeactivate]	function		optional Callback function to be called when the scope is deactivated.

unregisterScope

Ask AI

Source code

focusScopeManager.unregisterScope(scopeId)

Unregisters a scope completely.

Param	Type	Description
scopeId	string	The scope to remove.