@fluentui/react-tabster 9.24.3 → 9.24.5

package/CHANGELOG.md

@@ -1,12 +1,31 @@
 # Change Log - @fluentui/react-tabster
 
-This log was last generated on Thu, 27 Mar 2025 21:08:38 GMT and should not be manually modified.
+This log was last generated on Wed, 16 Apr 2025 19:37:27 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.24.5](https://github.com/microsoft/fluentui/tree/@fluentui/react-tabster_v9.24.5)
+
+Wed, 16 Apr 2025 19:37:27 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tabster_v9.24.4..@fluentui/react-tabster_v9.24.5)
+
+### Patches
+
+- Bump @fluentui/react-utilities to v9.19.0 ([PR #34166](https://github.com/microsoft/fluentui/pull/34166) by beachball)
+
+## [9.24.4](https://github.com/microsoft/fluentui/tree/@fluentui/react-tabster_v9.24.4)
+
+Tue, 01 Apr 2025 15:08:01 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tabster_v9.24.3..@fluentui/react-tabster_v9.24.4)
+
+### Patches
+
+- fix: improve support for concurrent mode ([PR #34113](https://github.com/microsoft/fluentui/pull/34113) by olfedias@microsoft.com)
+- fix: don't pass `null` to `createKeyborg()` ([PR #34118](https://github.com/microsoft/fluentui/pull/34118) by olfedias@microsoft.com)
+
 ## [9.24.3](https://github.com/microsoft/fluentui/tree/@fluentui/react-tabster_v9.24.3)
 
-Thu, 27 Mar 2025 21:08:38 GMT 
+Thu, 27 Mar 2025 21:12:51 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tabster_v9.24.2..@fluentui/react-tabster_v9.24.3)
 
 ### Patches

package/dist/index.d.ts

@@ -1425,9 +1425,10 @@ export declare const useFocusFinders: () => {
 };
 
 /**
- *
  * @param name - The observed element to focus
- * @returns Function that will focus the
+ * @param options - Options for the focus observed
+ *
+ * @returns Function that will focus an element
  */
 export declare function useFocusObserved(name: string, options?: UseFocusObservedOptions): () => Types.ObservedElementAsyncRequest<boolean>;
 

package/lib/hooks/useActivateModal.js

@@ -5,8 +5,7 @@ import { useTabster } from './useTabster';
 /**
  * Returns a function that activates a modal by element from the modal or modal container.
  */ export function useActivateModal() {
-    const tabster = useTabster();
-    const modalizerAPI = tabster ? getModalizer(tabster) : undefined;
+    const modalizerRefAPI = useTabster(getModalizer);
     const [setActivateModalTimeout] = useTimeout();
     const activateModal = React.useCallback((elementFromModal)=>{
         // We call the actual activation function on the next tick, because with the typical use case,
@@ -14,10 +13,11 @@ import { useTabster } from './useTabster';
         // and on the current tick the element has just received the attributes, but Tabster has not
         // instantiated the Modalizer yet.
         setActivateModalTimeout(()=>{
-            modalizerAPI === null || modalizerAPI === void 0 ? void 0 : modalizerAPI.activate(elementFromModal);
+            var _modalizerRefAPI_current;
+            (_modalizerRefAPI_current = modalizerRefAPI.current) === null || _modalizerRefAPI_current === void 0 ? void 0 : _modalizerRefAPI_current.activate(elementFromModal);
         }, 0);
     }, [
-        modalizerAPI,
+        modalizerRefAPI,
         setActivateModalTimeout
     ]);
     return activateModal;

package/lib/hooks/useActivateModal.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/hooks/useActivateModal.ts"],"sourcesContent":["import * as React from 'react';\nimport { getModalizer } from 'tabster';\nimport { useTimeout } from '@fluentui/react-utilities';\nimport { useTabster } from './useTabster';\n\n/**\n * Returns a function that activates a modal by element from the modal or modal container.\n */\nexport function useActivateModal(): (elementFromModal: HTMLElement | undefined) => void {\n  const tabster = useTabster();\n  const modalizerAPI = tabster ? getModalizer(tabster) : undefined;\n  const [setActivateModalTimeout] = useTimeout();\n\n  const activateModal = React.useCallback(\n    (elementFromModal: HTMLElement | undefined) => {\n      // We call the actual activation function on the next tick, because with the typical use case,\n      // the hook will be called on the same tick when other Tabster attributes are being applied,\n      // and on the current tick the element has just received the attributes, but Tabster has not\n      // instantiated the Modalizer yet.\n      setActivateModalTimeout(() => {\n        modalizerAPI?.activate(elementFromModal);\n      }, 0);\n    },\n    [modalizerAPI, setActivateModalTimeout],\n  );\n\n  return activateModal;\n}\n"],"names":["React","getModalizer","useTimeout","useTabster","useActivateModal","tabster","modalizerAPI","undefined","setActivateModalTimeout","activateModal","useCallback","elementFromModal","activate"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,YAAY,QAAQ,UAAU;AACvC,SAASC,UAAU,QAAQ,4BAA4B;AACvD,SAASC,UAAU,QAAQ,eAAe;AAE1C;;CAEC,GACD,OAAO,SAASC;IACd,MAAMC,UAAUF;IAChB,MAAMG,eAAeD,UAAUJ,aAAaI,WAAWE;IACvD,MAAM,CAACC,wBAAwB,GAAGN;IAElC,MAAMO,gBAAgBT,MAAMU,WAAW,CACrC,CAACC;QACC,8FAA8F;QAC9F,4FAA4F;QAC5F,4FAA4F;QAC5F,kCAAkC;QAClCH,wBAAwB;YACtBF,yBAAAA,mCAAAA,aAAcM,QAAQ,CAACD;QACzB,GAAG;IACL,GACA;QAACL;QAAcE;KAAwB;IAGzC,OAAOC;AACT"}
+{"version":3,"sources":["../src/hooks/useActivateModal.ts"],"sourcesContent":["import * as React from 'react';\nimport { getModalizer } from 'tabster';\nimport { useTimeout } from '@fluentui/react-utilities';\nimport { useTabster } from './useTabster';\n\n/**\n * Returns a function that activates a modal by element from the modal or modal container.\n */\nexport function useActivateModal(): (elementFromModal: HTMLElement | undefined) => void {\n  const modalizerRefAPI = useTabster(getModalizer);\n\n  const [setActivateModalTimeout] = useTimeout();\n  const activateModal = React.useCallback(\n    (elementFromModal: HTMLElement | undefined) => {\n      // We call the actual activation function on the next tick, because with the typical use case,\n      // the hook will be called on the same tick when other Tabster attributes are being applied,\n      // and on the current tick the element has just received the attributes, but Tabster has not\n      // instantiated the Modalizer yet.\n      setActivateModalTimeout(() => {\n        modalizerRefAPI.current?.activate(elementFromModal);\n      }, 0);\n    },\n    [modalizerRefAPI, setActivateModalTimeout],\n  );\n\n  return activateModal;\n}\n"],"names":["React","getModalizer","useTimeout","useTabster","useActivateModal","modalizerRefAPI","setActivateModalTimeout","activateModal","useCallback","elementFromModal","current","activate"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,YAAY,QAAQ,UAAU;AACvC,SAASC,UAAU,QAAQ,4BAA4B;AACvD,SAASC,UAAU,QAAQ,eAAe;AAE1C;;CAEC,GACD,OAAO,SAASC;IACd,MAAMC,kBAAkBF,WAAWF;IAEnC,MAAM,CAACK,wBAAwB,GAAGJ;IAClC,MAAMK,gBAAgBP,MAAMQ,WAAW,CACrC,CAACC;QACC,8FAA8F;QAC9F,4FAA4F;QAC5F,4FAA4F;QAC5F,kCAAkC;QAClCH,wBAAwB;gBACtBD;aAAAA,2BAAAA,gBAAgBK,OAAO,cAAvBL,+CAAAA,yBAAyBM,QAAQ,CAACF;QACpC,GAAG;IACL,GACA;QAACJ;QAAiBC;KAAwB;IAG5C,OAAOC;AACT"}

package/lib/hooks/useArrowNavigationGroup.js

@@ -7,10 +7,7 @@ import { useTabster } from './useTabster';
  */ export const useArrowNavigationGroup = (options = {})=>{
     const { circular, axis, memorizeCurrent = true, tabbable, ignoreDefaultKeydown, // eslint-disable-next-line @typescript-eslint/naming-convention
     unstable_hasDefault } = options;
-    const tabster = useTabster();
-    if (tabster) {
-        getMover(tabster);
-    }
+    useTabster(getMover);
     return useTabsterAttributes({
         mover: {
             cyclic: !!circular,

package/lib/hooks/useArrowNavigationGroup.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/hooks/useArrowNavigationGroup.ts"],"sourcesContent":["import { Types, getMover, MoverDirections } from 'tabster';\nimport { useTabsterAttributes } from './useTabsterAttributes';\nimport { useTabster } from './useTabster';\n\nexport interface UseArrowNavigationGroupOptions {\n  /**\n   * Focus will navigate vertically, horizontally or in both directions (grid), defaults to horizontally\n   * @defaultValue vertical\n   */\n  axis?: 'vertical' | 'horizontal' | 'grid' | 'grid-linear' | 'both';\n  /**\n   * Focus will cycle to the first/last elements of the group without stopping\n   */\n  circular?: boolean;\n  /**\n   * Last focused element in the group will be remembered and focused (if still\n   * available) when tabbing from outside of the group\n   * @default true\n   */\n  memorizeCurrent?: boolean;\n  /**\n   * Allow tabbing within the arrow navigation group items.\n   */\n  tabbable?: boolean;\n  /**\n   * Tabster should ignore default handling of keydown events\n   */\n  ignoreDefaultKeydown?: Types.FocusableProps['ignoreKeydown'];\n  /**\n   * The default focusable item in the group will be an element with Focusable.isDefault property.\n   * Note that there is no way in \\@fluentui/react-tabster to set default focusable element,\n   * and this option is currently for internal testing purposes only.\n   */\n  // eslint-disable-next-line @typescript-eslint/naming-convention\n  unstable_hasDefault?: boolean;\n}\n\n/**\n * A hook that returns the necessary tabster attributes to support arrow key navigation\n * @param options - Options to configure keyboard navigation\n */\nexport const useArrowNavigationGroup = (options: UseArrowNavigationGroupOptions = {}): Types.TabsterDOMAttribute => {\n  const {\n    circular,\n    axis,\n    memorizeCurrent = true,\n    tabbable,\n    ignoreDefaultKeydown,\n    // eslint-disable-next-line @typescript-eslint/naming-convention\n    unstable_hasDefault,\n  } = options;\n  const tabster = useTabster();\n\n  if (tabster) {\n    getMover(tabster);\n  }\n\n  return useTabsterAttributes({\n    mover: {\n      cyclic: !!circular,\n      direction: axisToMoverDirection(axis ?? 'vertical'),\n      memorizeCurrent,\n      tabbable,\n      hasDefault: unstable_hasDefault,\n    },\n    ...(ignoreDefaultKeydown && {\n      focusable: {\n        ignoreKeydown: ignoreDefaultKeydown,\n      },\n    }),\n  });\n};\n\nfunction axisToMoverDirection(axis: UseArrowNavigationGroupOptions['axis']): Types.MoverDirection {\n  switch (axis) {\n    case 'horizontal':\n      return MoverDirections.Horizontal;\n    case 'grid':\n      return MoverDirections.Grid;\n    case 'grid-linear':\n      return MoverDirections.GridLinear;\n    case 'both':\n      return MoverDirections.Both;\n\n    case 'vertical':\n    default:\n      return MoverDirections.Vertical;\n  }\n}\n"],"names":["getMover","MoverDirections","useTabsterAttributes","useTabster","useArrowNavigationGroup","options","circular","axis","memorizeCurrent","tabbable","ignoreDefaultKeydown","unstable_hasDefault","tabster","mover","cyclic","direction","axisToMoverDirection","hasDefault","focusable","ignoreKeydown","Horizontal","Grid","GridLinear","Both","Vertical"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,SAAgBA,QAAQ,EAAEC,eAAe,QAAQ,UAAU;AAC3D,SAASC,oBAAoB,QAAQ,yBAAyB;AAC9D,SAASC,UAAU,QAAQ,eAAe;AAmC1C;;;CAGC,GACD,OAAO,MAAMC,0BAA0B,CAACC,UAA0C,CAAC,CAAC;IAClF,MAAM,EACJC,QAAQ,EACRC,IAAI,EACJC,kBAAkB,IAAI,EACtBC,QAAQ,EACRC,oBAAoB,EACpB,gEAAgE;IAChEC,mBAAmB,EACpB,GAAGN;IACJ,MAAMO,UAAUT;IAEhB,IAAIS,SAAS;QACXZ,SAASY;IACX;IAEA,OAAOV,qBAAqB;QAC1BW,OAAO;YACLC,QAAQ,CAAC,CAACR;YACVS,WAAWC,qBAAqBT,iBAAAA,kBAAAA,OAAQ;YACxCC;YACAC;YACAQ,YAAYN;QACd;QACA,GAAID,wBAAwB;YAC1BQ,WAAW;gBACTC,eAAeT;YACjB;QACF,CAAC;IACH;AACF,EAAE;AAEF,SAASM,qBAAqBT,IAA4C;IACxE,OAAQA;QACN,KAAK;YACH,OAAON,gBAAgBmB,UAAU;QACnC,KAAK;YACH,OAAOnB,gBAAgBoB,IAAI;QAC7B,KAAK;YACH,OAAOpB,gBAAgBqB,UAAU;QACnC,KAAK;YACH,OAAOrB,gBAAgBsB,IAAI;QAE7B,KAAK;QACL;YACE,OAAOtB,gBAAgBuB,QAAQ;IACnC;AACF"}
+{"version":3,"sources":["../src/hooks/useArrowNavigationGroup.ts"],"sourcesContent":["import { Types, getMover, MoverDirections } from 'tabster';\nimport { useTabsterAttributes } from './useTabsterAttributes';\nimport { useTabster } from './useTabster';\n\nexport interface UseArrowNavigationGroupOptions {\n  /**\n   * Focus will navigate vertically, horizontally or in both directions (grid), defaults to horizontally\n   * @defaultValue vertical\n   */\n  axis?: 'vertical' | 'horizontal' | 'grid' | 'grid-linear' | 'both';\n  /**\n   * Focus will cycle to the first/last elements of the group without stopping\n   */\n  circular?: boolean;\n  /**\n   * Last focused element in the group will be remembered and focused (if still\n   * available) when tabbing from outside of the group\n   * @default true\n   */\n  memorizeCurrent?: boolean;\n  /**\n   * Allow tabbing within the arrow navigation group items.\n   */\n  tabbable?: boolean;\n  /**\n   * Tabster should ignore default handling of keydown events\n   */\n  ignoreDefaultKeydown?: Types.FocusableProps['ignoreKeydown'];\n  /**\n   * The default focusable item in the group will be an element with Focusable.isDefault property.\n   * Note that there is no way in \\@fluentui/react-tabster to set default focusable element,\n   * and this option is currently for internal testing purposes only.\n   */\n  // eslint-disable-next-line @typescript-eslint/naming-convention\n  unstable_hasDefault?: boolean;\n}\n\n/**\n * A hook that returns the necessary tabster attributes to support arrow key navigation\n * @param options - Options to configure keyboard navigation\n */\nexport const useArrowNavigationGroup = (options: UseArrowNavigationGroupOptions = {}): Types.TabsterDOMAttribute => {\n  const {\n    circular,\n    axis,\n    memorizeCurrent = true,\n    tabbable,\n    ignoreDefaultKeydown,\n    // eslint-disable-next-line @typescript-eslint/naming-convention\n    unstable_hasDefault,\n  } = options;\n\n  useTabster(getMover);\n\n  return useTabsterAttributes({\n    mover: {\n      cyclic: !!circular,\n      direction: axisToMoverDirection(axis ?? 'vertical'),\n      memorizeCurrent,\n      tabbable,\n      hasDefault: unstable_hasDefault,\n    },\n    ...(ignoreDefaultKeydown && {\n      focusable: {\n        ignoreKeydown: ignoreDefaultKeydown,\n      },\n    }),\n  });\n};\n\nfunction axisToMoverDirection(axis: UseArrowNavigationGroupOptions['axis']): Types.MoverDirection {\n  switch (axis) {\n    case 'horizontal':\n      return MoverDirections.Horizontal;\n    case 'grid':\n      return MoverDirections.Grid;\n    case 'grid-linear':\n      return MoverDirections.GridLinear;\n    case 'both':\n      return MoverDirections.Both;\n\n    case 'vertical':\n    default:\n      return MoverDirections.Vertical;\n  }\n}\n"],"names":["getMover","MoverDirections","useTabsterAttributes","useTabster","useArrowNavigationGroup","options","circular","axis","memorizeCurrent","tabbable","ignoreDefaultKeydown","unstable_hasDefault","mover","cyclic","direction","axisToMoverDirection","hasDefault","focusable","ignoreKeydown","Horizontal","Grid","GridLinear","Both","Vertical"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,SAAgBA,QAAQ,EAAEC,eAAe,QAAQ,UAAU;AAC3D,SAASC,oBAAoB,QAAQ,yBAAyB;AAC9D,SAASC,UAAU,QAAQ,eAAe;AAmC1C;;;CAGC,GACD,OAAO,MAAMC,0BAA0B,CAACC,UAA0C,CAAC,CAAC;IAClF,MAAM,EACJC,QAAQ,EACRC,IAAI,EACJC,kBAAkB,IAAI,EACtBC,QAAQ,EACRC,oBAAoB,EACpB,gEAAgE;IAChEC,mBAAmB,EACpB,GAAGN;IAEJF,WAAWH;IAEX,OAAOE,qBAAqB;QAC1BU,OAAO;YACLC,QAAQ,CAAC,CAACP;YACVQ,WAAWC,qBAAqBR,iBAAAA,kBAAAA,OAAQ;YACxCC;YACAC;YACAO,YAAYL;QACd;QACA,GAAID,wBAAwB;YAC1BO,WAAW;gBACTC,eAAeR;YACjB;QACF,CAAC;IACH;AACF,EAAE;AAEF,SAASK,qBAAqBR,IAA4C;IACxE,OAAQA;QACN,KAAK;YACH,OAAON,gBAAgBkB,UAAU;QACnC,KAAK;YACH,OAAOlB,gBAAgBmB,IAAI;QAC7B,KAAK;YACH,OAAOnB,gBAAgBoB,UAAU;QACnC,KAAK;YACH,OAAOpB,gBAAgBqB,IAAI;QAE7B,KAAK;QACL;YACE,OAAOrB,gBAAgBsB,QAAQ;IACnC;AACF"}

package/lib/hooks/useFocusFinders.js

@@ -4,49 +4,58 @@ import { useTabster } from './useTabster';
 /**
  * Returns a set of helper functions that will traverse focusable elements in the context of a root DOM element
  */ export const useFocusFinders = ()=>{
-    const tabster = useTabster();
+    const tabsterRef = useTabster();
     const { targetDocument } = useFluent();
     // Narrow props for now and let need dictate additional props in the future
-    const findAllFocusable = React.useCallback((container, acceptCondition)=>(tabster === null || tabster === void 0 ? void 0 : tabster.focusable.findAll({
+    const findAllFocusable = React.useCallback((container, acceptCondition)=>{
+        var _tabsterRef_current;
+        return ((_tabsterRef_current = tabsterRef.current) === null || _tabsterRef_current === void 0 ? void 0 : _tabsterRef_current.focusable.findAll({
             container,
             acceptCondition
-        })) || [], [
-        tabster
+        })) || [];
+    }, [
+        tabsterRef
     ]);
-    const findFirstFocusable = React.useCallback((container)=>tabster === null || tabster === void 0 ? void 0 : tabster.focusable.findFirst({
+    const findFirstFocusable = React.useCallback((container)=>{
+        var _tabsterRef_current;
+        return (_tabsterRef_current = tabsterRef.current) === null || _tabsterRef_current === void 0 ? void 0 : _tabsterRef_current.focusable.findFirst({
             container
-        }), [
-        tabster
+        });
+    }, [
+        tabsterRef
     ]);
-    const findLastFocusable = React.useCallback((container)=>tabster === null || tabster === void 0 ? void 0 : tabster.focusable.findLast({
+    const findLastFocusable = React.useCallback((container)=>{
+        var _tabsterRef_current;
+        return (_tabsterRef_current = tabsterRef.current) === null || _tabsterRef_current === void 0 ? void 0 : _tabsterRef_current.focusable.findLast({
             container
-        }), [
-        tabster
+        });
+    }, [
+        tabsterRef
     ]);
     const findNextFocusable = React.useCallback((currentElement, options = {})=>{
-        if (!tabster || !targetDocument) {
+        if (!tabsterRef.current || !targetDocument) {
             return null;
         }
         const { container = targetDocument.body } = options;
-        return tabster.focusable.findNext({
+        return tabsterRef.current.focusable.findNext({
             currentElement,
             container
         });
     }, [
-        tabster,
+        tabsterRef,
         targetDocument
     ]);
     const findPrevFocusable = React.useCallback((currentElement, options = {})=>{
-        if (!tabster || !targetDocument) {
+        if (!tabsterRef.current || !targetDocument) {
             return null;
         }
         const { container = targetDocument.body } = options;
-        return tabster.focusable.findPrev({
+        return tabsterRef.current.focusable.findPrev({
             currentElement,
             container
         });
     }, [
-        tabster,
+        tabsterRef,
         targetDocument
     ]);
     return {

package/lib/hooks/useFocusFinders.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/hooks/useFocusFinders.ts"],"sourcesContent":["import * as React from 'react';\nimport { Types as TabsterTypes } from 'tabster';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport { useTabster } from './useTabster';\n\n/**\n * Returns a set of helper functions that will traverse focusable elements in the context of a root DOM element\n */\nexport const useFocusFinders = () => {\n  const tabster = useTabster();\n  const { targetDocument } = useFluent();\n\n  // Narrow props for now and let need dictate additional props in the future\n  const findAllFocusable = React.useCallback(\n    (container: HTMLElement, acceptCondition?: (el: HTMLElement) => boolean) =>\n      tabster?.focusable.findAll({ container, acceptCondition }) || [],\n    [tabster],\n  );\n\n  const findFirstFocusable = React.useCallback(\n    (container: HTMLElement) => tabster?.focusable.findFirst({ container }),\n    [tabster],\n  );\n\n  const findLastFocusable = React.useCallback(\n    (container: HTMLElement) => tabster?.focusable.findLast({ container }),\n    [tabster],\n  );\n\n  const findNextFocusable = React.useCallback(\n    (currentElement: HTMLElement, options: Pick<Partial<TabsterTypes.FindNextProps>, 'container'> = {}) => {\n      if (!tabster || !targetDocument) {\n        return null;\n      }\n\n      const { container = targetDocument.body } = options;\n\n      return tabster.focusable.findNext({ currentElement, container });\n    },\n    [tabster, targetDocument],\n  );\n\n  const findPrevFocusable = React.useCallback(\n    (currentElement: HTMLElement, options: Pick<Partial<TabsterTypes.FindNextProps>, 'container'> = {}) => {\n      if (!tabster || !targetDocument) {\n        return null;\n      }\n\n      const { container = targetDocument.body } = options;\n\n      return tabster.focusable.findPrev({ currentElement, container });\n    },\n    [tabster, targetDocument],\n  );\n\n  return {\n    findAllFocusable,\n    findFirstFocusable,\n    findLastFocusable,\n    findNextFocusable,\n    findPrevFocusable,\n  };\n};\n"],"names":["React","useFluent_unstable","useFluent","useTabster","useFocusFinders","tabster","targetDocument","findAllFocusable","useCallback","container","acceptCondition","focusable","findAll","findFirstFocusable","findFirst","findLastFocusable","findLast","findNextFocusable","currentElement","options","body","findNext","findPrevFocusable","findPrev"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,sBAAsBC,SAAS,QAAQ,kCAAkC;AAClF,SAASC,UAAU,QAAQ,eAAe;AAE1C;;CAEC,GACD,OAAO,MAAMC,kBAAkB;IAC7B,MAAMC,UAAUF;IAChB,MAAM,EAAEG,cAAc,EAAE,GAAGJ;IAE3B,2EAA2E;IAC3E,MAAMK,mBAAmBP,MAAMQ,WAAW,CACxC,CAACC,WAAwBC,kBACvBL,CAAAA,oBAAAA,8BAAAA,QAASM,SAAS,CAACC,OAAO,CAAC;YAAEH;YAAWC;QAAgB,OAAM,EAAE,EAClE;QAACL;KAAQ;IAGX,MAAMQ,qBAAqBb,MAAMQ,WAAW,CAC1C,CAACC,YAA2BJ,oBAAAA,8BAAAA,QAASM,SAAS,CAACG,SAAS,CAAC;YAAEL;QAAU,IACrE;QAACJ;KAAQ;IAGX,MAAMU,oBAAoBf,MAAMQ,WAAW,CACzC,CAACC,YAA2BJ,oBAAAA,8BAAAA,QAASM,SAAS,CAACK,QAAQ,CAAC;YAAEP;QAAU,IACpE;QAACJ;KAAQ;IAGX,MAAMY,oBAAoBjB,MAAMQ,WAAW,CACzC,CAACU,gBAA6BC,UAAkE,CAAC,CAAC;QAChG,IAAI,CAACd,WAAW,CAACC,gBAAgB;YAC/B,OAAO;QACT;QAEA,MAAM,EAAEG,YAAYH,eAAec,IAAI,EAAE,GAAGD;QAE5C,OAAOd,QAAQM,SAAS,CAACU,QAAQ,CAAC;YAAEH;YAAgBT;QAAU;IAChE,GACA;QAACJ;QAASC;KAAe;IAG3B,MAAMgB,oBAAoBtB,MAAMQ,WAAW,CACzC,CAACU,gBAA6BC,UAAkE,CAAC,CAAC;QAChG,IAAI,CAACd,WAAW,CAACC,gBAAgB;YAC/B,OAAO;QACT;QAEA,MAAM,EAAEG,YAAYH,eAAec,IAAI,EAAE,GAAGD;QAE5C,OAAOd,QAAQM,SAAS,CAACY,QAAQ,CAAC;YAAEL;YAAgBT;QAAU;IAChE,GACA;QAACJ;QAASC;KAAe;IAG3B,OAAO;QACLC;QACAM;QACAE;QACAE;QACAK;IACF;AACF,EAAE"}
+{"version":3,"sources":["../src/hooks/useFocusFinders.ts"],"sourcesContent":["import * as React from 'react';\nimport { Types as TabsterTypes } from 'tabster';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport { useTabster } from './useTabster';\n\n/**\n * Returns a set of helper functions that will traverse focusable elements in the context of a root DOM element\n */\nexport const useFocusFinders = () => {\n  const tabsterRef = useTabster();\n  const { targetDocument } = useFluent();\n\n  // Narrow props for now and let need dictate additional props in the future\n  const findAllFocusable = React.useCallback(\n    (container: HTMLElement, acceptCondition?: (el: HTMLElement) => boolean) =>\n      tabsterRef.current?.focusable.findAll({ container, acceptCondition }) || [],\n    [tabsterRef],\n  );\n\n  const findFirstFocusable = React.useCallback(\n    (container: HTMLElement) => tabsterRef.current?.focusable.findFirst({ container }),\n    [tabsterRef],\n  );\n\n  const findLastFocusable = React.useCallback(\n    (container: HTMLElement) => tabsterRef.current?.focusable.findLast({ container }),\n    [tabsterRef],\n  );\n\n  const findNextFocusable = React.useCallback(\n    (currentElement: HTMLElement, options: Pick<Partial<TabsterTypes.FindNextProps>, 'container'> = {}) => {\n      if (!tabsterRef.current || !targetDocument) {\n        return null;\n      }\n\n      const { container = targetDocument.body } = options;\n\n      return tabsterRef.current.focusable.findNext({ currentElement, container });\n    },\n    [tabsterRef, targetDocument],\n  );\n\n  const findPrevFocusable = React.useCallback(\n    (currentElement: HTMLElement, options: Pick<Partial<TabsterTypes.FindNextProps>, 'container'> = {}) => {\n      if (!tabsterRef.current || !targetDocument) {\n        return null;\n      }\n\n      const { container = targetDocument.body } = options;\n\n      return tabsterRef.current.focusable.findPrev({ currentElement, container });\n    },\n    [tabsterRef, targetDocument],\n  );\n\n  return {\n    findAllFocusable,\n    findFirstFocusable,\n    findLastFocusable,\n    findNextFocusable,\n    findPrevFocusable,\n  };\n};\n"],"names":["React","useFluent_unstable","useFluent","useTabster","useFocusFinders","tabsterRef","targetDocument","findAllFocusable","useCallback","container","acceptCondition","current","focusable","findAll","findFirstFocusable","findFirst","findLastFocusable","findLast","findNextFocusable","currentElement","options","body","findNext","findPrevFocusable","findPrev"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,sBAAsBC,SAAS,QAAQ,kCAAkC;AAClF,SAASC,UAAU,QAAQ,eAAe;AAE1C;;CAEC,GACD,OAAO,MAAMC,kBAAkB;IAC7B,MAAMC,aAAaF;IACnB,MAAM,EAAEG,cAAc,EAAE,GAAGJ;IAE3B,2EAA2E;IAC3E,MAAMK,mBAAmBP,MAAMQ,WAAW,CACxC,CAACC,WAAwBC;YACvBL;eAAAA,EAAAA,sBAAAA,WAAWM,OAAO,cAAlBN,0CAAAA,oBAAoBO,SAAS,CAACC,OAAO,CAAC;YAAEJ;YAAWC;QAAgB,OAAM,EAAE;OAC7E;QAACL;KAAW;IAGd,MAAMS,qBAAqBd,MAAMQ,WAAW,CAC1C,CAACC;YAA2BJ;gBAAAA,sBAAAA,WAAWM,OAAO,cAAlBN,0CAAAA,oBAAoBO,SAAS,CAACG,SAAS,CAAC;YAAEN;QAAU;OAChF;QAACJ;KAAW;IAGd,MAAMW,oBAAoBhB,MAAMQ,WAAW,CACzC,CAACC;YAA2BJ;gBAAAA,sBAAAA,WAAWM,OAAO,cAAlBN,0CAAAA,oBAAoBO,SAAS,CAACK,QAAQ,CAAC;YAAER;QAAU;OAC/E;QAACJ;KAAW;IAGd,MAAMa,oBAAoBlB,MAAMQ,WAAW,CACzC,CAACW,gBAA6BC,UAAkE,CAAC,CAAC;QAChG,IAAI,CAACf,WAAWM,OAAO,IAAI,CAACL,gBAAgB;YAC1C,OAAO;QACT;QAEA,MAAM,EAAEG,YAAYH,eAAee,IAAI,EAAE,GAAGD;QAE5C,OAAOf,WAAWM,OAAO,CAACC,SAAS,CAACU,QAAQ,CAAC;YAAEH;YAAgBV;QAAU;IAC3E,GACA;QAACJ;QAAYC;KAAe;IAG9B,MAAMiB,oBAAoBvB,MAAMQ,WAAW,CACzC,CAACW,gBAA6BC,UAAkE,CAAC,CAAC;QAChG,IAAI,CAACf,WAAWM,OAAO,IAAI,CAACL,gBAAgB;YAC1C,OAAO;QACT;QAEA,MAAM,EAAEG,YAAYH,eAAee,IAAI,EAAE,GAAGD;QAE5C,OAAOf,WAAWM,OAAO,CAACC,SAAS,CAACY,QAAQ,CAAC;YAAEL;YAAgBV;QAAU;IAC3E,GACA;QAACJ;QAAYC;KAAe;IAG9B,OAAO;QACLC;QACAO;QACAE;QACAE;QACAK;IACF;AACF,EAAE"}

package/lib/hooks/useFocusObserved.js

@@ -2,23 +2,24 @@ import * as React from 'react';
 import { getObservedElement } from 'tabster';
 import { useTabster } from './useTabster';
 /**
- *
  * @param name - The observed element to focus
- * @returns Function that will focus the
+ * @param options - Options for the focus observed
+ *
+ * @returns Function that will focus an element
  */ export function useFocusObserved(name, options = {}) {
     const { timeout = 1000 } = options;
-    const tabster = useTabster();
-    const observedAPI = tabster ? getObservedElement(tabster) : null;
+    const observedAPIRef = useTabster(getObservedElement);
     return React.useCallback(()=>{
-        if (observedAPI) {
-            return observedAPI.requestFocus(name, timeout);
+        const observerAPI = observedAPIRef.current;
+        if (observerAPI) {
+            return observerAPI.requestFocus(name, timeout);
         }
         return {
             result: Promise.resolve(false),
             cancel: ()=>null
         };
     }, [
-        observedAPI,
+        observedAPIRef,
         name,
         timeout
     ]);

package/lib/hooks/useFocusObserved.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/hooks/useFocusObserved.ts"],"sourcesContent":["import * as React from 'react';\nimport { getObservedElement, Types as TabsterTypes } from 'tabster';\nimport { useTabster } from './useTabster';\n\ninterface UseFocusObservedOptions {\n  /**\n   * After timeout the focus attempt fails\n   */\n  timeout?: number;\n}\n\n/**\n *\n * @param name - The observed element to focus\n * @returns Function that will focus the\n */\nexport function useFocusObserved(\n  name: string,\n  options: UseFocusObservedOptions = {},\n): () => TabsterTypes.ObservedElementAsyncRequest<boolean> {\n  const { timeout = 1000 } = options;\n  const tabster = useTabster();\n\n  const observedAPI = tabster ? getObservedElement(tabster) : null;\n\n  return React.useCallback(() => {\n    if (observedAPI) {\n      return observedAPI.requestFocus(name, timeout);\n    }\n\n    return { result: Promise.resolve(false), cancel: () => null };\n  }, [observedAPI, name, timeout]);\n}\n"],"names":["React","getObservedElement","useTabster","useFocusObserved","name","options","timeout","tabster","observedAPI","useCallback","requestFocus","result","Promise","resolve","cancel"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,kBAAkB,QAA+B,UAAU;AACpE,SAASC,UAAU,QAAQ,eAAe;AAS1C;;;;CAIC,GACD,OAAO,SAASC,iBACdC,IAAY,EACZC,UAAmC,CAAC,CAAC;IAErC,MAAM,EAAEC,UAAU,IAAI,EAAE,GAAGD;IAC3B,MAAME,UAAUL;IAEhB,MAAMM,cAAcD,UAAUN,mBAAmBM,WAAW;IAE5D,OAAOP,MAAMS,WAAW,CAAC;QACvB,IAAID,aAAa;YACf,OAAOA,YAAYE,YAAY,CAACN,MAAME;QACxC;QAEA,OAAO;YAAEK,QAAQC,QAAQC,OAAO,CAAC;YAAQC,QAAQ,IAAM;QAAK;IAC9D,GAAG;QAACN;QAAaJ;QAAME;KAAQ;AACjC"}
+{"version":3,"sources":["../src/hooks/useFocusObserved.ts"],"sourcesContent":["import * as React from 'react';\nimport { getObservedElement, Types as TabsterTypes } from 'tabster';\nimport { useTabster } from './useTabster';\n\ninterface UseFocusObservedOptions {\n  /**\n   * After timeout the focus attempt fails\n   */\n  timeout?: number;\n}\n\n/**\n * @param name - The observed element to focus\n * @param options - Options for the focus observed\n *\n * @returns Function that will focus an element\n */\nexport function useFocusObserved(\n  name: string,\n  options: UseFocusObservedOptions = {},\n): () => TabsterTypes.ObservedElementAsyncRequest<boolean> {\n  const { timeout = 1000 } = options;\n  const observedAPIRef = useTabster(getObservedElement);\n\n  return React.useCallback(() => {\n    const observerAPI = observedAPIRef.current;\n\n    if (observerAPI) {\n      return observerAPI.requestFocus(name, timeout);\n    }\n\n    return {\n      result: Promise.resolve(false),\n      cancel: () => null,\n    };\n  }, [observedAPIRef, name, timeout]);\n}\n"],"names":["React","getObservedElement","useTabster","useFocusObserved","name","options","timeout","observedAPIRef","useCallback","observerAPI","current","requestFocus","result","Promise","resolve","cancel"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,kBAAkB,QAA+B,UAAU;AACpE,SAASC,UAAU,QAAQ,eAAe;AAS1C;;;;;CAKC,GACD,OAAO,SAASC,iBACdC,IAAY,EACZC,UAAmC,CAAC,CAAC;IAErC,MAAM,EAAEC,UAAU,IAAI,EAAE,GAAGD;IAC3B,MAAME,iBAAiBL,WAAWD;IAElC,OAAOD,MAAMQ,WAAW,CAAC;QACvB,MAAMC,cAAcF,eAAeG,OAAO;QAE1C,IAAID,aAAa;YACf,OAAOA,YAAYE,YAAY,CAACP,MAAME;QACxC;QAEA,OAAO;YACLM,QAAQC,QAAQC,OAAO,CAAC;YACxBC,QAAQ,IAAM;QAChB;IACF,GAAG;QAACR;QAAgBH;QAAME;KAAQ;AACpC"}

package/lib/hooks/useFocusableGroup.js

@@ -5,10 +5,7 @@ import { useTabster } from './useTabster';
  * A hook that returns the necessary tabster attributes to support groupping.
  * @param options - Options to configure keyboard navigation
  */ export const useFocusableGroup = (options)=>{
-    const tabster = useTabster();
-    if (tabster) {
-        getGroupper(tabster);
-    }
+    useTabster(getGroupper);
     return useTabsterAttributes({
         groupper: {
             tabbability: getTabbability(options === null || options === void 0 ? void 0 : options.tabBehavior)

package/lib/hooks/useFocusableGroup.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/hooks/useFocusableGroup.ts"],"sourcesContent":["import { Types, getGroupper, GroupperTabbabilities } from 'tabster';\nimport { useTabsterAttributes } from './useTabsterAttributes';\nimport { useTabster } from './useTabster';\n\nexport interface UseFocusableGroupOptions {\n  /**\n   * Behavior for the Tab key.\n   */\n  tabBehavior?: 'unlimited' | 'limited' | 'limited-trap-focus';\n\n  /**\n   * Tabster can ignore default handling of keydown events\n   */\n  ignoreDefaultKeydown?: Types.FocusableProps['ignoreKeydown'];\n}\n\n/**\n * A hook that returns the necessary tabster attributes to support groupping.\n * @param options - Options to configure keyboard navigation\n */\nexport const useFocusableGroup = (options?: UseFocusableGroupOptions): Types.TabsterDOMAttribute => {\n  const tabster = useTabster();\n\n  if (tabster) {\n    getGroupper(tabster);\n  }\n\n  return useTabsterAttributes({\n    groupper: {\n      tabbability: getTabbability(options?.tabBehavior),\n    },\n    focusable: {\n      ignoreKeydown: options?.ignoreDefaultKeydown,\n    },\n  });\n};\n\nconst getTabbability = (\n  tabBehavior?: UseFocusableGroupOptions['tabBehavior'],\n): Types.GroupperTabbability | undefined => {\n  switch (tabBehavior) {\n    case 'unlimited':\n      return GroupperTabbabilities.Unlimited;\n    case 'limited':\n      return GroupperTabbabilities.Limited;\n    case 'limited-trap-focus':\n      return GroupperTabbabilities.LimitedTrapFocus;\n    default:\n      return undefined;\n  }\n};\n"],"names":["getGroupper","GroupperTabbabilities","useTabsterAttributes","useTabster","useFocusableGroup","options","tabster","groupper","tabbability","getTabbability","tabBehavior","focusable","ignoreKeydown","ignoreDefaultKeydown","Unlimited","Limited","LimitedTrapFocus","undefined"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,SAAgBA,WAAW,EAAEC,qBAAqB,QAAQ,UAAU;AACpE,SAASC,oBAAoB,QAAQ,yBAAyB;AAC9D,SAASC,UAAU,QAAQ,eAAe;AAc1C;;;CAGC,GACD,OAAO,MAAMC,oBAAoB,CAACC;IAChC,MAAMC,UAAUH;IAEhB,IAAIG,SAAS;QACXN,YAAYM;IACd;IAEA,OAAOJ,qBAAqB;QAC1BK,UAAU;YACRC,aAAaC,eAAeJ,oBAAAA,8BAAAA,QAASK,WAAW;QAClD;QACAC,WAAW;YACTC,aAAa,EAAEP,oBAAAA,8BAAAA,QAASQ,oBAAoB;QAC9C;IACF;AACF,EAAE;AAEF,MAAMJ,iBAAiB,CACrBC;IAEA,OAAQA;QACN,KAAK;YACH,OAAOT,sBAAsBa,SAAS;QACxC,KAAK;YACH,OAAOb,sBAAsBc,OAAO;QACtC,KAAK;YACH,OAAOd,sBAAsBe,gBAAgB;QAC/C;YACE,OAAOC;IACX;AACF"}
+{"version":3,"sources":["../src/hooks/useFocusableGroup.ts"],"sourcesContent":["import { Types, getGroupper, GroupperTabbabilities } from 'tabster';\nimport { useTabsterAttributes } from './useTabsterAttributes';\nimport { useTabster } from './useTabster';\n\nexport interface UseFocusableGroupOptions {\n  /**\n   * Behavior for the Tab key.\n   */\n  tabBehavior?: 'unlimited' | 'limited' | 'limited-trap-focus';\n\n  /**\n   * Tabster can ignore default handling of keydown events\n   */\n  ignoreDefaultKeydown?: Types.FocusableProps['ignoreKeydown'];\n}\n\n/**\n * A hook that returns the necessary tabster attributes to support groupping.\n * @param options - Options to configure keyboard navigation\n */\nexport const useFocusableGroup = (options?: UseFocusableGroupOptions): Types.TabsterDOMAttribute => {\n  useTabster(getGroupper);\n\n  return useTabsterAttributes({\n    groupper: {\n      tabbability: getTabbability(options?.tabBehavior),\n    },\n    focusable: {\n      ignoreKeydown: options?.ignoreDefaultKeydown,\n    },\n  });\n};\n\nconst getTabbability = (\n  tabBehavior?: UseFocusableGroupOptions['tabBehavior'],\n): Types.GroupperTabbability | undefined => {\n  switch (tabBehavior) {\n    case 'unlimited':\n      return GroupperTabbabilities.Unlimited;\n    case 'limited':\n      return GroupperTabbabilities.Limited;\n    case 'limited-trap-focus':\n      return GroupperTabbabilities.LimitedTrapFocus;\n    default:\n      return undefined;\n  }\n};\n"],"names":["getGroupper","GroupperTabbabilities","useTabsterAttributes","useTabster","useFocusableGroup","options","groupper","tabbability","getTabbability","tabBehavior","focusable","ignoreKeydown","ignoreDefaultKeydown","Unlimited","Limited","LimitedTrapFocus","undefined"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,SAAgBA,WAAW,EAAEC,qBAAqB,QAAQ,UAAU;AACpE,SAASC,oBAAoB,QAAQ,yBAAyB;AAC9D,SAASC,UAAU,QAAQ,eAAe;AAc1C;;;CAGC,GACD,OAAO,MAAMC,oBAAoB,CAACC;IAChCF,WAAWH;IAEX,OAAOE,qBAAqB;QAC1BI,UAAU;YACRC,aAAaC,eAAeH,oBAAAA,8BAAAA,QAASI,WAAW;QAClD;QACAC,WAAW;YACTC,aAAa,EAAEN,oBAAAA,8BAAAA,QAASO,oBAAoB;QAC9C;IACF;AACF,EAAE;AAEF,MAAMJ,iBAAiB,CACrBC;IAEA,OAAQA;QACN,KAAK;YACH,OAAOR,sBAAsBY,SAAS;QACxC,KAAK;YACH,OAAOZ,sBAAsBa,OAAO;QACtC,KAAK;YACH,OAAOb,sBAAsBc,gBAAgB;QAC/C;YACE,OAAOC;IACX;AACF"}

package/lib/hooks/useFocusedElementChange.js

@@ -1,17 +1,25 @@
-import { useTabster } from './useTabster';
+import { disposeTabster } from 'tabster';
 import * as React from 'react';
+import { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';
+import { useEventCallback } from '@fluentui/react-utilities';
+import { createTabsterWithConfig } from './useTabster';
 /**
  * Subscribes to the tabster focused element. Calls the callback when the focused element changes.
  * @param callback - Callback to subscribe to the focused element.
  */ export function useFocusedElementChange(callback) {
-    const tabster = useTabster();
+    const { targetDocument } = useFluent();
+    const listener = useEventCallback(callback);
     React.useEffect(()=>{
+        const tabster = createTabsterWithConfig(targetDocument);
         if (tabster) {
-            tabster.focusedElement.subscribe(callback);
-            return ()=>tabster.focusedElement.unsubscribe(callback);
+            tabster.focusedElement.subscribe(listener);
+            return ()=>{
+                tabster.focusedElement.unsubscribe(listener);
+                disposeTabster(tabster);
+            };
         }
     }, [
-        tabster,
-        callback
+        listener,
+        targetDocument
     ]);
 }

package/lib/hooks/useFocusedElementChange.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/hooks/useFocusedElementChange.ts"],"sourcesContent":["import type { Types as TabsterTypes } from 'tabster';\n\nimport { useTabster } from './useTabster';\nimport * as React from 'react';\n\n/**\n * Subscribes to the tabster focused element. Calls the callback when the focused element changes.\n * @param callback - Callback to subscribe to the focused element.\n */\nexport function useFocusedElementChange(\n  callback: TabsterTypes.SubscribableCallback<HTMLElement | undefined, TabsterTypes.FocusedElementDetail>,\n) {\n  const tabster = useTabster();\n  React.useEffect(() => {\n    if (tabster) {\n      tabster.focusedElement.subscribe(callback);\n      return () => tabster.focusedElement.unsubscribe(callback);\n    }\n  }, [tabster, callback]);\n}\n"],"names":["useTabster","React","useFocusedElementChange","callback","tabster","useEffect","focusedElement","subscribe","unsubscribe"],"rangeMappings":";;;;;;;;;;;;;;;;","mappings":"AAEA,SAASA,UAAU,QAAQ,eAAe;AAC1C,YAAYC,WAAW,QAAQ;AAE/B;;;CAGC,GACD,OAAO,SAASC,wBACdC,QAAuG;IAEvG,MAAMC,UAAUJ;IAChBC,MAAMI,SAAS,CAAC;QACd,IAAID,SAAS;YACXA,QAAQE,cAAc,CAACC,SAAS,CAACJ;YACjC,OAAO,IAAMC,QAAQE,cAAc,CAACE,WAAW,CAACL;QAClD;IACF,GAAG;QAACC;QAASD;KAAS;AACxB"}
+{"version":3,"sources":["../src/hooks/useFocusedElementChange.ts"],"sourcesContent":["import { type Types as TabsterTypes, disposeTabster } from 'tabster';\nimport * as React from 'react';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport { useEventCallback } from '@fluentui/react-utilities';\n\nimport { createTabsterWithConfig } from './useTabster';\n\n/**\n * Subscribes to the tabster focused element. Calls the callback when the focused element changes.\n * @param callback - Callback to subscribe to the focused element.\n */\nexport function useFocusedElementChange(\n  callback: TabsterTypes.SubscribableCallback<HTMLElement | undefined, TabsterTypes.FocusedElementDetail>,\n) {\n  const { targetDocument } = useFluent();\n  const listener = useEventCallback(callback);\n\n  React.useEffect(() => {\n    const tabster = createTabsterWithConfig(targetDocument);\n\n    if (tabster) {\n      tabster.focusedElement.subscribe(listener);\n\n      return () => {\n        tabster.focusedElement.unsubscribe(listener);\n        disposeTabster(tabster);\n      };\n    }\n  }, [listener, targetDocument]);\n}\n"],"names":["disposeTabster","React","useFluent_unstable","useFluent","useEventCallback","createTabsterWithConfig","useFocusedElementChange","callback","targetDocument","listener","useEffect","tabster","focusedElement","subscribe","unsubscribe"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,SAAqCA,cAAc,QAAQ,UAAU;AACrE,YAAYC,WAAW,QAAQ;AAC/B,SAASC,sBAAsBC,SAAS,QAAQ,kCAAkC;AAClF,SAASC,gBAAgB,QAAQ,4BAA4B;AAE7D,SAASC,uBAAuB,QAAQ,eAAe;AAEvD;;;CAGC,GACD,OAAO,SAASC,wBACdC,QAAuG;IAEvG,MAAM,EAAEC,cAAc,EAAE,GAAGL;IAC3B,MAAMM,WAAWL,iBAAiBG;IAElCN,MAAMS,SAAS,CAAC;QACd,MAAMC,UAAUN,wBAAwBG;QAExC,IAAIG,SAAS;YACXA,QAAQC,cAAc,CAACC,SAAS,CAACJ;YAEjC,OAAO;gBACLE,QAAQC,cAAc,CAACE,WAAW,CAACL;gBACnCT,eAAeW;YACjB;QACF;IACF,GAAG;QAACF;QAAUD;KAAe;AAC/B"}

package/lib/hooks/useKeyborgRef.js

@@ -9,8 +9,9 @@ import { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts
     const { targetDocument } = useFluent();
     const keyborgRef = React.useRef(null);
     React.useEffect(()=>{
-        if (targetDocument) {
-            const keyborg = createKeyborg(targetDocument.defaultView);
+        const targetWindow = targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.defaultView;
+        if (targetWindow) {
+            const keyborg = createKeyborg(targetWindow);
             keyborgRef.current = keyborg;
             return ()=>{
                 disposeKeyborg(keyborg);

package/lib/hooks/useKeyborgRef.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/hooks/useKeyborgRef.ts"],"sourcesContent":["import * as React from 'react';\nimport { createKeyborg, disposeKeyborg, type Keyborg } from 'keyborg';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\n\n/**\n * @internal\n * Instantiates [keyborg](https://github.com/microsoft/keyborg)\n * @returns - keyborg instance\n */\nexport function useKeyborgRef() {\n  const { targetDocument } = useFluent();\n  const keyborgRef = React.useRef<Keyborg | null>(null);\n\n  React.useEffect(() => {\n    if (targetDocument) {\n      const keyborg = createKeyborg(targetDocument.defaultView!);\n      keyborgRef.current = keyborg;\n\n      return () => {\n        disposeKeyborg(keyborg);\n        keyborgRef.current = null;\n      };\n    }\n  }, [targetDocument]);\n\n  return keyborgRef;\n}\n"],"names":["React","createKeyborg","disposeKeyborg","useFluent_unstable","useFluent","useKeyborgRef","targetDocument","keyborgRef","useRef","useEffect","keyborg","defaultView","current"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,aAAa,EAAEC,cAAc,QAAsB,UAAU;AACtE,SAASC,sBAAsBC,SAAS,QAAQ,kCAAkC;AAElF;;;;CAIC,GACD,OAAO,SAASC;IACd,MAAM,EAAEC,cAAc,EAAE,GAAGF;IAC3B,MAAMG,aAAaP,MAAMQ,MAAM,CAAiB;IAEhDR,MAAMS,SAAS,CAAC;QACd,IAAIH,gBAAgB;YAClB,MAAMI,UAAUT,cAAcK,eAAeK,WAAW;YACxDJ,WAAWK,OAAO,GAAGF;YAErB,OAAO;gBACLR,eAAeQ;gBACfH,WAAWK,OAAO,GAAG;YACvB;QACF;IACF,GAAG;QAACN;KAAe;IAEnB,OAAOC;AACT"}
+{"version":3,"sources":["../src/hooks/useKeyborgRef.ts"],"sourcesContent":["import * as React from 'react';\nimport { createKeyborg, disposeKeyborg, type Keyborg } from 'keyborg';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\n\n/**\n * @internal\n * Instantiates [keyborg](https://github.com/microsoft/keyborg)\n * @returns - keyborg instance\n */\nexport function useKeyborgRef() {\n  const { targetDocument } = useFluent();\n  const keyborgRef = React.useRef<Keyborg | null>(null);\n\n  React.useEffect(() => {\n    const targetWindow = targetDocument?.defaultView;\n\n    if (targetWindow) {\n      const keyborg = createKeyborg(targetWindow);\n      keyborgRef.current = keyborg;\n\n      return () => {\n        disposeKeyborg(keyborg);\n        keyborgRef.current = null;\n      };\n    }\n  }, [targetDocument]);\n\n  return keyborgRef;\n}\n"],"names":["React","createKeyborg","disposeKeyborg","useFluent_unstable","useFluent","useKeyborgRef","targetDocument","keyborgRef","useRef","useEffect","targetWindow","defaultView","keyborg","current"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,aAAa,EAAEC,cAAc,QAAsB,UAAU;AACtE,SAASC,sBAAsBC,SAAS,QAAQ,kCAAkC;AAElF;;;;CAIC,GACD,OAAO,SAASC;IACd,MAAM,EAAEC,cAAc,EAAE,GAAGF;IAC3B,MAAMG,aAAaP,MAAMQ,MAAM,CAAiB;IAEhDR,MAAMS,SAAS,CAAC;QACd,MAAMC,eAAeJ,2BAAAA,qCAAAA,eAAgBK,WAAW;QAEhD,IAAID,cAAc;YAChB,MAAME,UAAUX,cAAcS;YAC9BH,WAAWM,OAAO,GAAGD;YAErB,OAAO;gBACLV,eAAeU;gBACfL,WAAWM,OAAO,GAAG;YACvB;QACF;IACF,GAAG;QAACP;KAAe;IAEnB,OAAOC;AACT"}

package/lib/hooks/useModalAttributes.js

@@ -16,6 +16,10 @@ const DangerousNeverHiddenPropObject = {
 const tabsterAccessibleCheck = (element)=>{
     return element.hasAttribute(DangerousNeverHiddenAttribute);
 };
+function initTabsterModules(tabster) {
+    getModalizer(tabster, undefined, tabsterAccessibleCheck);
+    getRestorer(tabster);
+}
 /**
  * Applies modal dialog behaviour through DOM attributes
  * Modal element will focus trap and hide other content on the page
@@ -24,12 +28,8 @@ const tabsterAccessibleCheck = (element)=>{
  * @returns DOM attributes to apply to the modal element and its trigger
  */ export const useModalAttributes = (options = {})=>{
     const { trapFocus, alwaysFocusable, legacyTrapFocus } = options;
-    const tabster = useTabster();
     // Initializes the modalizer and restorer APIs
-    if (tabster) {
-        getModalizer(tabster, undefined, tabsterAccessibleCheck);
-        getRestorer(tabster);
-    }
+    useTabster(initTabsterModules);
     const id = useId('modal-', options.id);
     const modalAttributes = useTabsterAttributes({
         restorer: {

package/lib/hooks/useModalAttributes.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/hooks/useModalAttributes.ts"],"sourcesContent":["import { useId } from '@fluentui/react-utilities';\nimport { useTabsterAttributes } from './useTabsterAttributes';\nimport { getModalizer, getRestorer, Types as TabsterTypes, RestorerTypes } from 'tabster';\nimport { useTabster } from './useTabster';\n\nconst DangerousNeverHiddenAttribute = 'data-tabster-never-hide';\nconst DangerousNeverHiddenPropObject = { [DangerousNeverHiddenAttribute]: '' };\n\nexport interface UseModalAttributesOptions {\n  /**\n   * Traps focus inside the elements the attributes are applied.\n   * it forbids users to tab out of the focus trap into the actual browser.\n   */\n  trapFocus?: boolean;\n\n  /**\n   * Traps focus inside the elements the attributes are applied.\n   * This prop enables traditional force-focus behavior to match previous versions of Fluent.\n   * Without this, users can tab out of the focus trap and into the browser chrome.\n   * This matches the behavior of the native <dialog> element and inert.\n   * We recommend setting this to true based on user feedback and consistency.\n   */\n  legacyTrapFocus?: boolean;\n\n  /**\n   * Always reachabled in Tab order\n   */\n  alwaysFocusable?: boolean;\n\n  /**\n   * Id to use for the modalizer. An id will be generated if not provided.\n   */\n  id?: string;\n}\n\n/**\n * !!DANGEROUS!! Designates an element that will not be hidden even when outside an open modal.\n * Only works for top-level elements; should be used with extreme care.\n * @returns Attribute to apply to the target element that should never receive aria-hidden\n */\nexport function useDangerousNeverHidden_unstable(): { [key: string]: string } {\n  return DangerousNeverHiddenPropObject;\n}\n\nconst tabsterAccessibleCheck: TabsterTypes.ModalizerElementAccessibleCheck = element => {\n  return element.hasAttribute(DangerousNeverHiddenAttribute);\n};\n\n/**\n * Applies modal dialog behaviour through DOM attributes\n * Modal element will focus trap and hide other content on the page\n * The trigger element will be focused if focus is lost after the modal element is removed\n *\n * @returns DOM attributes to apply to the modal element and its trigger\n */\nexport const useModalAttributes = (\n  options: UseModalAttributesOptions = {},\n): { modalAttributes: TabsterTypes.TabsterDOMAttribute; triggerAttributes: TabsterTypes.TabsterDOMAttribute } => {\n  const { trapFocus, alwaysFocusable, legacyTrapFocus } = options;\n  const tabster = useTabster();\n  // Initializes the modalizer and restorer APIs\n  if (tabster) {\n    getModalizer(tabster, undefined, tabsterAccessibleCheck);\n    getRestorer(tabster);\n  }\n\n  const id = useId('modal-', options.id);\n  const modalAttributes = useTabsterAttributes({\n    restorer: { type: RestorerTypes.Source },\n    ...(trapFocus && {\n      modalizer: {\n        id,\n        isOthersAccessible: !trapFocus,\n        isAlwaysAccessible: alwaysFocusable,\n        isTrapped: legacyTrapFocus && trapFocus,\n      },\n    }),\n  });\n\n  const triggerAttributes = useTabsterAttributes({\n    restorer: { type: RestorerTypes.Target },\n  });\n\n  return { modalAttributes, triggerAttributes };\n};\n"],"names":["useId","useTabsterAttributes","getModalizer","getRestorer","RestorerTypes","useTabster","DangerousNeverHiddenAttribute","DangerousNeverHiddenPropObject","useDangerousNeverHidden_unstable","tabsterAccessibleCheck","element","hasAttribute","useModalAttributes","options","trapFocus","alwaysFocusable","legacyTrapFocus","tabster","undefined","id","modalAttributes","restorer","type","Source","modalizer","isOthersAccessible","isAlwaysAccessible","isTrapped","triggerAttributes","Target"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,SAASA,KAAK,QAAQ,4BAA4B;AAClD,SAASC,oBAAoB,QAAQ,yBAAyB;AAC9D,SAASC,YAAY,EAAEC,WAAW,EAAyBC,aAAa,QAAQ,UAAU;AAC1F,SAASC,UAAU,QAAQ,eAAe;AAE1C,MAAMC,gCAAgC;AACtC,MAAMC,iCAAiC;IAAE,CAACD,8BAA8B,EAAE;AAAG;AA6B7E;;;;CAIC,GACD,OAAO,SAASE;IACd,OAAOD;AACT;AAEA,MAAME,yBAAuEC,CAAAA;IAC3E,OAAOA,QAAQC,YAAY,CAACL;AAC9B;AAEA;;;;;;CAMC,GACD,OAAO,MAAMM,qBAAqB,CAChCC,UAAqC,CAAC,CAAC;IAEvC,MAAM,EAAEC,SAAS,EAAEC,eAAe,EAAEC,eAAe,EAAE,GAAGH;IACxD,MAAMI,UAAUZ;IAChB,8CAA8C;IAC9C,IAAIY,SAAS;QACXf,aAAae,SAASC,WAAWT;QACjCN,YAAYc;IACd;IAEA,MAAME,KAAKnB,MAAM,UAAUa,QAAQM,EAAE;IACrC,MAAMC,kBAAkBnB,qBAAqB;QAC3CoB,UAAU;YAAEC,MAAMlB,cAAcmB,MAAM;QAAC;QACvC,GAAIT,aAAa;YACfU,WAAW;gBACTL;gBACAM,oBAAoB,CAACX;gBACrBY,oBAAoBX;gBACpBY,WAAWX,mBAAmBF;YAChC;QACF,CAAC;IACH;IAEA,MAAMc,oBAAoB3B,qBAAqB;QAC7CoB,UAAU;YAAEC,MAAMlB,cAAcyB,MAAM;QAAC;IACzC;IAEA,OAAO;QAAET;QAAiBQ;IAAkB;AAC9C,EAAE"}
+{"version":3,"sources":["../src/hooks/useModalAttributes.ts"],"sourcesContent":["import { useId } from '@fluentui/react-utilities';\nimport { useTabsterAttributes } from './useTabsterAttributes';\nimport { getModalizer, getRestorer, Types as TabsterTypes, RestorerTypes } from 'tabster';\nimport { useTabster } from './useTabster';\n\nconst DangerousNeverHiddenAttribute = 'data-tabster-never-hide';\nconst DangerousNeverHiddenPropObject = { [DangerousNeverHiddenAttribute]: '' };\n\nexport interface UseModalAttributesOptions {\n  /**\n   * Traps focus inside the elements the attributes are applied.\n   * it forbids users to tab out of the focus trap into the actual browser.\n   */\n  trapFocus?: boolean;\n\n  /**\n   * Traps focus inside the elements the attributes are applied.\n   * This prop enables traditional force-focus behavior to match previous versions of Fluent.\n   * Without this, users can tab out of the focus trap and into the browser chrome.\n   * This matches the behavior of the native <dialog> element and inert.\n   * We recommend setting this to true based on user feedback and consistency.\n   */\n  legacyTrapFocus?: boolean;\n\n  /**\n   * Always reachabled in Tab order\n   */\n  alwaysFocusable?: boolean;\n\n  /**\n   * Id to use for the modalizer. An id will be generated if not provided.\n   */\n  id?: string;\n}\n\n/**\n * !!DANGEROUS!! Designates an element that will not be hidden even when outside an open modal.\n * Only works for top-level elements; should be used with extreme care.\n * @returns Attribute to apply to the target element that should never receive aria-hidden\n */\nexport function useDangerousNeverHidden_unstable(): { [key: string]: string } {\n  return DangerousNeverHiddenPropObject;\n}\n\nconst tabsterAccessibleCheck: TabsterTypes.ModalizerElementAccessibleCheck = element => {\n  return element.hasAttribute(DangerousNeverHiddenAttribute);\n};\n\nfunction initTabsterModules(tabster: TabsterTypes.TabsterCore) {\n  getModalizer(tabster, undefined, tabsterAccessibleCheck);\n  getRestorer(tabster);\n}\n\n/**\n * Applies modal dialog behaviour through DOM attributes\n * Modal element will focus trap and hide other content on the page\n * The trigger element will be focused if focus is lost after the modal element is removed\n *\n * @returns DOM attributes to apply to the modal element and its trigger\n */\nexport const useModalAttributes = (\n  options: UseModalAttributesOptions = {},\n): { modalAttributes: TabsterTypes.TabsterDOMAttribute; triggerAttributes: TabsterTypes.TabsterDOMAttribute } => {\n  const { trapFocus, alwaysFocusable, legacyTrapFocus } = options;\n\n  // Initializes the modalizer and restorer APIs\n  useTabster(initTabsterModules);\n\n  const id = useId('modal-', options.id);\n  const modalAttributes = useTabsterAttributes({\n    restorer: { type: RestorerTypes.Source },\n    ...(trapFocus && {\n      modalizer: {\n        id,\n        isOthersAccessible: !trapFocus,\n        isAlwaysAccessible: alwaysFocusable,\n        isTrapped: legacyTrapFocus && trapFocus,\n      },\n    }),\n  });\n\n  const triggerAttributes = useTabsterAttributes({\n    restorer: { type: RestorerTypes.Target },\n  });\n\n  return { modalAttributes, triggerAttributes };\n};\n"],"names":["useId","useTabsterAttributes","getModalizer","getRestorer","RestorerTypes","useTabster","DangerousNeverHiddenAttribute","DangerousNeverHiddenPropObject","useDangerousNeverHidden_unstable","tabsterAccessibleCheck","element","hasAttribute","initTabsterModules","tabster","undefined","useModalAttributes","options","trapFocus","alwaysFocusable","legacyTrapFocus","id","modalAttributes","restorer","type","Source","modalizer","isOthersAccessible","isAlwaysAccessible","isTrapped","triggerAttributes","Target"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,SAASA,KAAK,QAAQ,4BAA4B;AAClD,SAASC,oBAAoB,QAAQ,yBAAyB;AAC9D,SAASC,YAAY,EAAEC,WAAW,EAAyBC,aAAa,QAAQ,UAAU;AAC1F,SAASC,UAAU,QAAQ,eAAe;AAE1C,MAAMC,gCAAgC;AACtC,MAAMC,iCAAiC;IAAE,CAACD,8BAA8B,EAAE;AAAG;AA6B7E;;;;CAIC,GACD,OAAO,SAASE;IACd,OAAOD;AACT;AAEA,MAAME,yBAAuEC,CAAAA;IAC3E,OAAOA,QAAQC,YAAY,CAACL;AAC9B;AAEA,SAASM,mBAAmBC,OAAiC;IAC3DX,aAAaW,SAASC,WAAWL;IACjCN,YAAYU;AACd;AAEA;;;;;;CAMC,GACD,OAAO,MAAME,qBAAqB,CAChCC,UAAqC,CAAC,CAAC;IAEvC,MAAM,EAAEC,SAAS,EAAEC,eAAe,EAAEC,eAAe,EAAE,GAAGH;IAExD,8CAA8C;IAC9CX,WAAWO;IAEX,MAAMQ,KAAKpB,MAAM,UAAUgB,QAAQI,EAAE;IACrC,MAAMC,kBAAkBpB,qBAAqB;QAC3CqB,UAAU;YAAEC,MAAMnB,cAAcoB,MAAM;QAAC;QACvC,GAAIP,aAAa;YACfQ,WAAW;gBACTL;gBACAM,oBAAoB,CAACT;gBACrBU,oBAAoBT;gBACpBU,WAAWT,mBAAmBF;YAChC;QACF,CAAC;IACH;IAEA,MAAMY,oBAAoB5B,qBAAqB;QAC7CqB,UAAU;YAAEC,MAAMnB,cAAc0B,MAAM;QAAC;IACzC;IAEA,OAAO;QAAET;QAAiBQ;IAAkB;AAC9C,EAAE"}

package/lib/hooks/useObservedElement.js

@@ -1,11 +1,8 @@
-import { useTabster } from './useTabster';
 import { getObservedElement } from 'tabster';
+import { useTabster } from './useTabster';
 import { useTabsterAttributes } from './useTabsterAttributes';
 export function useObservedElement(name) {
-    const tabster = useTabster();
-    if (tabster) {
-        getObservedElement(tabster);
-    }
+    useTabster(getObservedElement);
     return useTabsterAttributes({
         observed: {
             names: Array.isArray(name) ? name : [

package/lib/hooks/useObservedElement.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/hooks/useObservedElement.ts"],"sourcesContent":["import { useTabster } from './useTabster';\nimport { getObservedElement, Types as TabsterTypes } from 'tabster';\nimport { useTabsterAttributes } from './useTabsterAttributes';\n\nexport function useObservedElement(name: string | string[]): TabsterTypes.TabsterDOMAttribute {\n  const tabster = useTabster();\n  if (tabster) {\n    getObservedElement(tabster);\n  }\n\n  return useTabsterAttributes({ observed: { names: Array.isArray(name) ? name : [name] } });\n}\n"],"names":["useTabster","getObservedElement","useTabsterAttributes","useObservedElement","name","tabster","observed","names","Array","isArray"],"rangeMappings":";;;;;;;;;;;;;;;","mappings":"AAAA,SAASA,UAAU,QAAQ,eAAe;AAC1C,SAASC,kBAAkB,QAA+B,UAAU;AACpE,SAASC,oBAAoB,QAAQ,yBAAyB;AAE9D,OAAO,SAASC,mBAAmBC,IAAuB;IACxD,MAAMC,UAAUL;IAChB,IAAIK,SAAS;QACXJ,mBAAmBI;IACrB;IAEA,OAAOH,qBAAqB;QAAEI,UAAU;YAAEC,OAAOC,MAAMC,OAAO,CAACL,QAAQA,OAAO;gBAACA;aAAK;QAAC;IAAE;AACzF"}
+{"version":3,"sources":["../src/hooks/useObservedElement.ts"],"sourcesContent":["import { getObservedElement, Types as TabsterTypes } from 'tabster';\n\nimport { useTabster } from './useTabster';\nimport { useTabsterAttributes } from './useTabsterAttributes';\n\nexport function useObservedElement(name: string | string[]): TabsterTypes.TabsterDOMAttribute {\n  useTabster(getObservedElement);\n\n  return useTabsterAttributes({ observed: { names: Array.isArray(name) ? name : [name] } });\n}\n"],"names":["getObservedElement","useTabster","useTabsterAttributes","useObservedElement","name","observed","names","Array","isArray"],"rangeMappings":";;;;;;;;;;;;","mappings":"AAAA,SAASA,kBAAkB,QAA+B,UAAU;AAEpE,SAASC,UAAU,QAAQ,eAAe;AAC1C,SAASC,oBAAoB,QAAQ,yBAAyB;AAE9D,OAAO,SAASC,mBAAmBC,IAAuB;IACxDH,WAAWD;IAEX,OAAOE,qBAAqB;QAAEG,UAAU;YAAEC,OAAOC,MAAMC,OAAO,CAACJ,QAAQA,OAAO;gBAACA;aAAK;QAAC;IAAE;AACzF"}

package/lib/hooks/useRestoreFocus.js

@@ -4,11 +4,8 @@ import { useTabster } from './useTabster';
  * Focus will be restored to the most recent target element when it is lost from a source
  * @returns Attribute to apply to the target element where focus is restored
  */ export function useRestoreFocusTarget() {
-    const tabster = useTabster();
     // Initializes the restorer API
-    if (tabster) {
-        getRestorer(tabster);
-    }
+    useTabster(getRestorer);
     return getTabsterAttribute({
         restorer: {
             type: RestorerTypes.Target
@@ -19,11 +16,8 @@ import { useTabster } from './useTabster';
  * Focus will be restored to the most recent target element when it is lost from a source
  * @returns Attribute to apply to the element that might lose focus
  */ export function useRestoreFocusSource() {
-    const tabster = useTabster();
     // Initializes the restorer API
-    if (tabster) {
-        getRestorer(tabster);
-    }
+    useTabster(getRestorer);
     return getTabsterAttribute({
         restorer: {
             type: RestorerTypes.Source

package/lib/hooks/useRestoreFocus.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/hooks/useRestoreFocus.ts"],"sourcesContent":["import { getRestorer, getTabsterAttribute, Types as TabsterTypes, RestorerTypes } from 'tabster';\nimport { useTabster } from './useTabster';\n\n/**\n * Focus will be restored to the most recent target element when it is lost from a source\n * @returns Attribute to apply to the target element where focus is restored\n */\nexport function useRestoreFocusTarget(): TabsterTypes.TabsterDOMAttribute {\n  const tabster = useTabster();\n  // Initializes the restorer API\n  if (tabster) {\n    getRestorer(tabster);\n  }\n\n  return getTabsterAttribute({ restorer: { type: RestorerTypes.Target } });\n}\n\n/**\n * Focus will be restored to the most recent target element when it is lost from a source\n * @returns Attribute to apply to the element that might lose focus\n */\nexport function useRestoreFocusSource(): TabsterTypes.TabsterDOMAttribute {\n  const tabster = useTabster();\n  // Initializes the restorer API\n  if (tabster) {\n    getRestorer(tabster);\n  }\n\n  return getTabsterAttribute({ restorer: { type: RestorerTypes.Source } });\n}\n"],"names":["getRestorer","getTabsterAttribute","RestorerTypes","useTabster","useRestoreFocusTarget","tabster","restorer","type","Target","useRestoreFocusSource","Source"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,SAASA,WAAW,EAAEC,mBAAmB,EAAyBC,aAAa,QAAQ,UAAU;AACjG,SAASC,UAAU,QAAQ,eAAe;AAE1C;;;CAGC,GACD,OAAO,SAASC;IACd,MAAMC,UAAUF;IAChB,+BAA+B;IAC/B,IAAIE,SAAS;QACXL,YAAYK;IACd;IAEA,OAAOJ,oBAAoB;QAAEK,UAAU;YAAEC,MAAML,cAAcM,MAAM;QAAC;IAAE;AACxE;AAEA;;;CAGC,GACD,OAAO,SAASC;IACd,MAAMJ,UAAUF;IAChB,+BAA+B;IAC/B,IAAIE,SAAS;QACXL,YAAYK;IACd;IAEA,OAAOJ,oBAAoB;QAAEK,UAAU;YAAEC,MAAML,cAAcQ,MAAM;QAAC;IAAE;AACxE"}
+{"version":3,"sources":["../src/hooks/useRestoreFocus.ts"],"sourcesContent":["import { getRestorer, getTabsterAttribute, Types as TabsterTypes, RestorerTypes } from 'tabster';\nimport { useTabster } from './useTabster';\n\n/**\n * Focus will be restored to the most recent target element when it is lost from a source\n * @returns Attribute to apply to the target element where focus is restored\n */\nexport function useRestoreFocusTarget(): TabsterTypes.TabsterDOMAttribute {\n  // Initializes the restorer API\n  useTabster(getRestorer);\n\n  return getTabsterAttribute({ restorer: { type: RestorerTypes.Target } });\n}\n\n/**\n * Focus will be restored to the most recent target element when it is lost from a source\n * @returns Attribute to apply to the element that might lose focus\n */\nexport function useRestoreFocusSource(): TabsterTypes.TabsterDOMAttribute {\n  // Initializes the restorer API\n  useTabster(getRestorer);\n\n  return getTabsterAttribute({ restorer: { type: RestorerTypes.Source } });\n}\n"],"names":["getRestorer","getTabsterAttribute","RestorerTypes","useTabster","useRestoreFocusTarget","restorer","type","Target","useRestoreFocusSource","Source"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,SAASA,WAAW,EAAEC,mBAAmB,EAAyBC,aAAa,QAAQ,UAAU;AACjG,SAASC,UAAU,QAAQ,eAAe;AAE1C;;;CAGC,GACD,OAAO,SAASC;IACd,+BAA+B;IAC/BD,WAAWH;IAEX,OAAOC,oBAAoB;QAAEI,UAAU;YAAEC,MAAMJ,cAAcK,MAAM;QAAC;IAAE;AACxE;AAEA;;;CAGC,GACD,OAAO,SAASC;IACd,+BAA+B;IAC/BL,WAAWH;IAEX,OAAOC,oBAAoB;QAAEI,UAAU;YAAEC,MAAMJ,cAAcO,MAAM;QAAC;IAAE;AACxE"}

package/lib/hooks/useTabster.js

@@ -1,21 +1,19 @@
 import * as React from 'react';
-import { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';
 import { createTabster, disposeTabster } from 'tabster';
-import { useIsomorphicLayoutEffect, getParent } from '@fluentui/react-utilities';
+import { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';
+import { getParent, usePrevious } from '@fluentui/react-utilities';
+const DEFAULT_FACTORY = (tabster)=>{
+    return tabster;
+};
 /**
- * Tries to get a tabster instance on the current window or creates a new one
- * Since Tabster is single instance only, feel free to call this hook to ensure Tabster exists if necessary
+ * Creates a tabster instance with the provided configuration
  *
  * @internal
- * @returns Tabster core instance
- */ export const useTabster = ()=>{
-    const { targetDocument } = useFluent();
+ * @param targetDocument
+ */ export function createTabsterWithConfig(targetDocument) {
     const defaultView = (targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.defaultView) || undefined;
     const shadowDOMAPI = defaultView === null || defaultView === void 0 ? void 0 : defaultView.__tabsterShadowDOMAPI;
-    const tabster = React.useMemo(()=>{
-        if (!defaultView) {
-            return null;
-        }
+    if (defaultView) {
         return createTabster(defaultView, {
             autoRoot: {},
             controlTab: false,
@@ -26,18 +24,33 @@ import { useIsomorphicLayoutEffect, getParent } from '@fluentui/react-utilities'
             },
             DOMAPI: shadowDOMAPI
         });
-    }, [
-        defaultView,
-        shadowDOMAPI
-    ]);
-    useIsomorphicLayoutEffect(()=>{
-        return ()=>{
-            if (tabster) {
+    }
+}
+export function useTabster(factory = DEFAULT_FACTORY) {
+    const { targetDocument } = useFluent();
+    const factoryResultRef = React.useRef(null);
+    React.useEffect(()=>{
+        const tabster = createTabsterWithConfig(targetDocument);
+        if (tabster) {
+            factoryResultRef.current = factory(tabster);
+            return ()=>{
                 disposeTabster(tabster);
-            }
-        };
+                factoryResultRef.current = null;
+            };
+        }
     }, [
-        tabster
+        targetDocument,
+        factory
     ]);
-    return tabster;
-};
+    if (process.env.NODE_ENV !== 'production') {
+        // eslint-disable-next-line
+        const previousFactory = usePrevious(factory);
+        if (previousFactory !== null && previousFactory !== factory) {
+            throw new Error([
+                '@fluentui/react-tabster: ',
+                'The factory function passed to useTabster has changed. This should not ever happen.'
+            ].join('\n'));
+        }
+    }
+    return factoryResultRef;
+}

package/lib/hooks/useTabster.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/hooks/useTabster.ts"],"sourcesContent":["import * as React from 'react';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport { createTabster, disposeTabster, Types as TabsterTypes } from 'tabster';\nimport { useIsomorphicLayoutEffect, getParent } from '@fluentui/react-utilities';\n\ninterface WindowWithTabsterShadowDOMAPI extends Window {\n  __tabsterShadowDOMAPI?: TabsterTypes.DOMAPI;\n}\n\n/**\n * Tries to get a tabster instance on the current window or creates a new one\n * Since Tabster is single instance only, feel free to call this hook to ensure Tabster exists if necessary\n *\n * @internal\n * @returns Tabster core instance\n */\nexport const useTabster = (): TabsterTypes.TabsterCore | null => {\n  const { targetDocument } = useFluent();\n\n  const defaultView = targetDocument?.defaultView || undefined;\n\n  const shadowDOMAPI = (defaultView as WindowWithTabsterShadowDOMAPI | undefined)?.__tabsterShadowDOMAPI;\n\n  const tabster = React.useMemo(() => {\n    if (!defaultView) {\n      return null;\n    }\n\n    return createTabster(defaultView, {\n      autoRoot: {},\n      controlTab: false,\n      getParent,\n      checkUncontrolledTrappingFocus: element =>\n        !!element.firstElementChild?.hasAttribute('data-is-focus-trap-zone-bumper'),\n      DOMAPI: shadowDOMAPI,\n    });\n  }, [defaultView, shadowDOMAPI]);\n\n  useIsomorphicLayoutEffect(() => {\n    return () => {\n      if (tabster) {\n        disposeTabster(tabster);\n      }\n    };\n  }, [tabster]);\n\n  return tabster;\n};\n"],"names":["React","useFluent_unstable","useFluent","createTabster","disposeTabster","useIsomorphicLayoutEffect","getParent","useTabster","targetDocument","defaultView","undefined","shadowDOMAPI","__tabsterShadowDOMAPI","tabster","useMemo","autoRoot","controlTab","checkUncontrolledTrappingFocus","element","firstElementChild","hasAttribute","DOMAPI"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,sBAAsBC,SAAS,QAAQ,kCAAkC;AAClF,SAASC,aAAa,EAAEC,cAAc,QAA+B,UAAU;AAC/E,SAASC,yBAAyB,EAAEC,SAAS,QAAQ,4BAA4B;AAMjF;;;;;;CAMC,GACD,OAAO,MAAMC,aAAa;IACxB,MAAM,EAAEC,cAAc,EAAE,GAAGN;IAE3B,MAAMO,cAAcD,CAAAA,2BAAAA,qCAAAA,eAAgBC,WAAW,KAAIC;IAEnD,MAAMC,eAAgBF,wBAAAA,kCAAD,AAACA,YAA2DG,qBAAqB;IAEtG,MAAMC,UAAUb,MAAMc,OAAO,CAAC;QAC5B,IAAI,CAACL,aAAa;YAChB,OAAO;QACT;QAEA,OAAON,cAAcM,aAAa;YAChCM,UAAU,CAAC;YACXC,YAAY;YACZV;YACAW,gCAAgCC,CAAAA;oBAC5BA;uBAAF,CAAC,GAACA,6BAAAA,QAAQC,iBAAiB,cAAzBD,iDAAAA,2BAA2BE,YAAY,CAAC;;YAC5CC,QAAQV;QACV;IACF,GAAG;QAACF;QAAaE;KAAa;IAE9BN,0BAA0B;QACxB,OAAO;YACL,IAAIQ,SAAS;gBACXT,eAAeS;YACjB;QACF;IACF,GAAG;QAACA;KAAQ;IAEZ,OAAOA;AACT,EAAE"}
+{"version":3,"sources":["../src/hooks/useTabster.ts"],"sourcesContent":["import * as React from 'react';\nimport { createTabster, disposeTabster, Types as TabsterTypes } from 'tabster';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport { getParent, usePrevious } from '@fluentui/react-utilities';\n\ninterface WindowWithTabsterShadowDOMAPI extends Window {\n  __tabsterShadowDOMAPI?: TabsterTypes.DOMAPI;\n}\n\ntype UseTabsterFactory<FactoryResult> = (tabster: TabsterTypes.TabsterCore) => FactoryResult;\n\nconst DEFAULT_FACTORY: UseTabsterFactory<TabsterTypes.TabsterCore> = tabster => {\n  return tabster;\n};\n\n/**\n * Creates a tabster instance with the provided configuration\n *\n * @internal\n * @param targetDocument\n */\nexport function createTabsterWithConfig(targetDocument: Document | undefined): TabsterTypes.TabsterCore | undefined {\n  const defaultView = targetDocument?.defaultView || undefined;\n  const shadowDOMAPI = (defaultView as WindowWithTabsterShadowDOMAPI | undefined)?.__tabsterShadowDOMAPI;\n\n  if (defaultView) {\n    return createTabster(defaultView, {\n      autoRoot: {},\n      controlTab: false,\n      getParent,\n      checkUncontrolledTrappingFocus: element =>\n        !!element.firstElementChild?.hasAttribute('data-is-focus-trap-zone-bumper'),\n      DOMAPI: shadowDOMAPI,\n    });\n  }\n}\n\n/**\n * Tries to get a tabster instance on the current window or creates a new one\n * Since Tabster is single instance only, feel free to call this hook to ensure Tabster exists if necessary\n *\n * @internal\n * @returns Tabster a ref to core instance or a factory result\n */\nexport function useTabster(): React.RefObject<TabsterTypes.TabsterCore | null>;\nexport function useTabster<FactoryResult>(\n  factory: UseTabsterFactory<FactoryResult>,\n): React.RefObject<FactoryResult | null>;\n\nexport function useTabster<FactoryResult>(factory = DEFAULT_FACTORY) {\n  const { targetDocument } = useFluent();\n  const factoryResultRef = React.useRef<FactoryResult | null>(null);\n\n  React.useEffect(() => {\n    const tabster = createTabsterWithConfig(targetDocument);\n\n    if (tabster) {\n      factoryResultRef.current = factory(tabster) as FactoryResult;\n\n      return () => {\n        disposeTabster(tabster);\n        factoryResultRef.current = null;\n      };\n    }\n  }, [targetDocument, factory]);\n\n  if (process.env.NODE_ENV !== 'production') {\n    // eslint-disable-next-line\n    const previousFactory = usePrevious(factory);\n\n    if (previousFactory !== null && previousFactory !== factory) {\n      throw new Error(\n        [\n          '@fluentui/react-tabster: ',\n          'The factory function passed to useTabster has changed. This should not ever happen.',\n        ].join('\\n'),\n      );\n    }\n  }\n\n  return factoryResultRef;\n}\n"],"names":["React","createTabster","disposeTabster","useFluent_unstable","useFluent","getParent","usePrevious","DEFAULT_FACTORY","tabster","createTabsterWithConfig","targetDocument","defaultView","undefined","shadowDOMAPI","__tabsterShadowDOMAPI","autoRoot","controlTab","checkUncontrolledTrappingFocus","element","firstElementChild","hasAttribute","DOMAPI","useTabster","factory","factoryResultRef","useRef","useEffect","current","process","env","NODE_ENV","previousFactory","Error","join"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,aAAa,EAAEC,cAAc,QAA+B,UAAU;AAC/E,SAASC,sBAAsBC,SAAS,QAAQ,kCAAkC;AAClF,SAASC,SAAS,EAAEC,WAAW,QAAQ,4BAA4B;AAQnE,MAAMC,kBAA+DC,CAAAA;IACnE,OAAOA;AACT;AAEA;;;;;CAKC,GACD,OAAO,SAASC,wBAAwBC,cAAoC;IAC1E,MAAMC,cAAcD,CAAAA,2BAAAA,qCAAAA,eAAgBC,WAAW,KAAIC;IACnD,MAAMC,eAAgBF,wBAAAA,kCAAD,AAACA,YAA2DG,qBAAqB;IAEtG,IAAIH,aAAa;QACf,OAAOV,cAAcU,aAAa;YAChCI,UAAU,CAAC;YACXC,YAAY;YACZX;YACAY,gCAAgCC,CAAAA;oBAC5BA;uBAAF,CAAC,GAACA,6BAAAA,QAAQC,iBAAiB,cAAzBD,iDAAAA,2BAA2BE,YAAY,CAAC;;YAC5CC,QAAQR;QACV;IACF;AACF;AAcA,OAAO,SAASS,WAA0BC,UAAUhB,eAAe;IACjE,MAAM,EAAEG,cAAc,EAAE,GAAGN;IAC3B,MAAMoB,mBAAmBxB,MAAMyB,MAAM,CAAuB;IAE5DzB,MAAM0B,SAAS,CAAC;QACd,MAAMlB,UAAUC,wBAAwBC;QAExC,IAAIF,SAAS;YACXgB,iBAAiBG,OAAO,GAAGJ,QAAQf;YAEnC,OAAO;gBACLN,eAAeM;gBACfgB,iBAAiBG,OAAO,GAAG;YAC7B;QACF;IACF,GAAG;QAACjB;QAAgBa;KAAQ;IAE5B,IAAIK,QAAQC,GAAG,CAACC,QAAQ,KAAK,cAAc;QACzC,2BAA2B;QAC3B,MAAMC,kBAAkBzB,YAAYiB;QAEpC,IAAIQ,oBAAoB,QAAQA,oBAAoBR,SAAS;YAC3D,MAAM,IAAIS,MACR;gBACE;gBACA;aACD,CAACC,IAAI,CAAC;QAEX;IACF;IAEA,OAAOT;AACT"}

package/lib/index.js

@@ -7,9 +7,7 @@ export { KEYBORG_FOCUSIN } from 'keyborg';
 // we are putting a snapshot of Tabster.Types@6.0.1 and marking the entire export as deprecated.
 // eslint-disable-next-line @typescript-eslint/naming-convention
 import * as TabsterTypes6_0_1_DoNotUse from './tabster-types-6.0.1-do-not-use';
-export { /** @deprecated (Do not use! Exposed by mistake and will be removed in the next major version.)  */ TabsterTypes6_0_1_DoNotUse as TabsterTypes, /** @deprecated Use element.dispatchEvent(new GroupperMoveFocusEvent({ action: GroupperMoveFocusActions.Escape })) */ // eslint-disable-next-line @typescript-eslint/no-deprecated
-dispatchGroupperMoveFocusEvent, /** @deprecated Use element.dispatchEvent(new MoverMoveFocusEvent({ key: MoverKeys.ArrowDown })) */ // eslint-disable-next-line @typescript-eslint/no-deprecated
-dispatchMoverMoveFocusEvent };
+export { /** @deprecated (Do not use! Exposed by mistake and will be removed in the next major version.)  */ TabsterTypes6_0_1_DoNotUse as TabsterTypes, /** @deprecated Use element.dispatchEvent(new GroupperMoveFocusEvent({ action: GroupperMoveFocusActions.Escape })) */ dispatchGroupperMoveFocusEvent, /** @deprecated Use element.dispatchEvent(new MoverMoveFocusEvent({ key: MoverKeys.ArrowDown })) */ dispatchMoverMoveFocusEvent };
 /**
  * For all exports below, we don't do wildcard exports to keep Tabster API flexible. We export only required
  * parts when they are needed.