@fluentui/react-tabster 9.7.4 → 9.7.5

package/lib/hooks/useArrowNavigationGroup.js

@@ -4,47 +4,38 @@ import { useTabster } from './useTabster';
 /**
  * A hook that returns the necessary tabster attributes to support arrow key navigation
  * @param options - Options to configure keyboard navigation
- */
-export const useArrowNavigationGroup = (options = {}) => {
-  const {
-    circular,
-    axis,
-    memorizeCurrent,
-    tabbable,
-    ignoreDefaultKeydown,
-    // eslint-disable-next-line @typescript-eslint/naming-convention
-    unstable_hasDefault
-  } = options;
-  const tabster = useTabster();
-  if (tabster) {
-    getMover(tabster);
-  }
-  return useTabsterAttributes({
-    mover: {
-      cyclic: !!circular,
-      direction: axisToMoverDirection(axis !== null && axis !== void 0 ? axis : 'vertical'),
-      memorizeCurrent,
-      tabbable,
-      hasDefault: unstable_hasDefault
-    },
-    ...(ignoreDefaultKeydown && {
-      focusable: {
-        ignoreKeydown: ignoreDefaultKeydown
-      }
-    })
-  });
+ */ export const useArrowNavigationGroup = (options = {})=>{
+    const { circular , axis , memorizeCurrent , tabbable , ignoreDefaultKeydown , // eslint-disable-next-line @typescript-eslint/naming-convention
+    unstable_hasDefault  } = options;
+    const tabster = useTabster();
+    if (tabster) {
+        getMover(tabster);
+    }
+    return useTabsterAttributes({
+        mover: {
+            cyclic: !!circular,
+            direction: axisToMoverDirection(axis !== null && axis !== void 0 ? axis : 'vertical'),
+            memorizeCurrent,
+            tabbable,
+            hasDefault: unstable_hasDefault
+        },
+        ...ignoreDefaultKeydown && {
+            focusable: {
+                ignoreKeydown: ignoreDefaultKeydown
+            }
+        }
+    });
 };
 function axisToMoverDirection(axis) {
-  switch (axis) {
-    case 'horizontal':
-      return Types.MoverDirections.Horizontal;
-    case 'grid':
-      return Types.MoverDirections.Grid;
-    case 'both':
-      return Types.MoverDirections.Both;
-    case 'vertical':
-    default:
-      return Types.MoverDirections.Vertical;
-  }
+    switch(axis){
+        case 'horizontal':
+            return Types.MoverDirections.Horizontal;
+        case 'grid':
+            return Types.MoverDirections.Grid;
+        case 'both':
+            return Types.MoverDirections.Both;
+        case 'vertical':
+        default:
+            return Types.MoverDirections.Vertical;
+    }
 }
-//# sourceMappingURL=useArrowNavigationGroup.js.map

package/lib/hooks/useArrowNavigationGroup.js.map

@@ -1 +1 @@
-{"version":3,"names":["Types","getMover","useTabsterAttributes","useTabster","useArrowNavigationGroup","options","circular","axis","memorizeCurrent","tabbable","ignoreDefaultKeydown","unstable_hasDefault","tabster","mover","cyclic","direction","axisToMoverDirection","hasDefault","focusable","ignoreKeydown","MoverDirections","Horizontal","Grid","Both","Vertical"],"sources":["../../src/hooks/useArrowNavigationGroup.ts"],"sourcesContent":["import { Types, getMover } 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' | '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   */\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,\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 Types.MoverDirections.Horizontal;\n    case 'grid':\n      return Types.MoverDirections.Grid;\n    case 'both':\n      return Types.MoverDirections.Both;\n\n    case 'vertical':\n    default:\n      return Types.MoverDirections.Vertical;\n  }\n}\n"],"mappings":"AAAA,SAASA,KAAK,EAAEC,QAAQ,QAAQ;AAChC,SAASC,oBAAoB,QAAQ;AACrC,SAASC,UAAU,QAAQ;AAkC3B;;;;AAIA,OAAO,MAAMC,uBAAA,GAA0BA,CAACC,OAAA,GAA0C,CAAC,CAAC,KAAgC;EAClH,MAAM;IACJC,QAAA;IACAC,IAAA;IACAC,eAAA;IACAC,QAAA;IACAC,oBAAA;IACA;IACAC;EAAmB,CACpB,GAAGN,OAAA;EACJ,MAAMO,OAAA,GAAUT,UAAA;EAEhB,IAAIS,OAAA,EAAS;IACXX,QAAA,CAASW,OAAA;EACX;EAEA,OAAOV,oBAAA,CAAqB;IAC1BW,KAAA,EAAO;MACLC,MAAA,EAAQ,CAAC,CAACR,QAAA;MACVS,SAAA,EAAWC,oBAAA,CAAqBT,IAAA,aAAAA,IAAA,cAAAA,IAAA,GAAQ,UAAU;MAClDC,eAAA;MACAC,QAAA;MACAQ,UAAA,EAAYN;IACd;IACA,IAAID,oBAAA,IAAwB;MAC1BQ,SAAA,EAAW;QACTC,aAAA,EAAeT;MACjB;IACF,CAAC;EACH;AACF;AAEA,SAASM,qBAAqBT,IAA4C,EAAwB;EAChG,QAAQA,IAAA;IACN,KAAK;MACH,OAAOP,KAAA,CAAMoB,eAAe,CAACC,UAAU;IACzC,KAAK;MACH,OAAOrB,KAAA,CAAMoB,eAAe,CAACE,IAAI;IACnC,KAAK;MACH,OAAOtB,KAAA,CAAMoB,eAAe,CAACG,IAAI;IAEnC,KAAK;IACL;MACE,OAAOvB,KAAA,CAAMoB,eAAe,CAACI,QAAQ;EAAA;AAE3C"}
+{"version":3,"sources":["useArrowNavigationGroup.ts"],"sourcesContent":["import { Types, getMover } 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' | '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   */\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,\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 Types.MoverDirections.Horizontal;\n    case 'grid':\n      return Types.MoverDirections.Grid;\n    case 'both':\n      return Types.MoverDirections.Both;\n\n    case 'vertical':\n    default:\n      return Types.MoverDirections.Vertical;\n  }\n}\n"],"names":["Types","getMover","useTabsterAttributes","useTabster","useArrowNavigationGroup","options","circular","axis","memorizeCurrent","tabbable","ignoreDefaultKeydown","unstable_hasDefault","tabster","mover","cyclic","direction","axisToMoverDirection","hasDefault","focusable","ignoreKeydown","MoverDirections","Horizontal","Grid","Both","Vertical"],"mappings":"AAAA,SAASA,KAAK,EAAEC,QAAQ,QAAQ,UAAU;AAC1C,SAASC,oBAAoB,QAAQ,yBAAyB;AAC9D,SAASC,UAAU,QAAQ,eAAe;AAkC1C;;;CAGC,GACD,OAAO,MAAMC,0BAA0B,CAACC,UAA0C,CAAC,CAAC,GAAgC;IAClH,MAAM,EACJC,SAAQ,EACRC,KAAI,EACJC,gBAAe,EACfC,SAAQ,EACRC,qBAAoB,EACpB,gEAAgE;IAChEC,oBAAmB,EACpB,GAAGN;IACJ,MAAMO,UAAUT;IAEhB,IAAIS,SAAS;QACXX,SAASW;IACX,CAAC;IAED,OAAOV,qBAAqB;QAC1BW,OAAO;YACLC,QAAQ,CAAC,CAACR;YACVS,WAAWC,qBAAqBT,iBAAAA,kBAAAA,OAAQ,UAAU;YAClDC;YACAC;YACAQ,YAAYN;QACd;QACA,GAAID,wBAAwB;YAC1BQ,WAAW;gBACTC,eAAeT;YACjB;QACF,CAAC;IACH;AACF,EAAE;AAEF,SAASM,qBAAqBT,IAA4C,EAAwB;IAChG,OAAQA;QACN,KAAK;YACH,OAAOP,MAAMoB,eAAe,CAACC,UAAU;QACzC,KAAK;YACH,OAAOrB,MAAMoB,eAAe,CAACE,IAAI;QACnC,KAAK;YACH,OAAOtB,MAAMoB,eAAe,CAACG,IAAI;QAEnC,KAAK;QACL;YACE,OAAOvB,MAAMoB,eAAe,CAACI,QAAQ;IACzC;AACF"}

package/lib/hooks/useFocusFinders.js

@@ -3,59 +3,63 @@ import { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts
 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 {
-    targetDocument
-  } = useFluent();
-  // Narrow props for now and let need dictate additional props in the future
-  const findAllFocusable = React.useCallback((container, acceptCondition) => {
-    return (tabster === null || tabster === void 0 ? void 0 : tabster.focusable.findAll({
-      container,
-      acceptCondition
-    })) || [];
-  }, [tabster]);
-  const findFirstFocusable = React.useCallback(container => {
-    return tabster === null || tabster === void 0 ? void 0 : tabster.focusable.findFirst({
-      container
-    });
-  }, [tabster]);
-  const findLastFocusable = React.useCallback(container => {
-    return tabster === null || tabster === void 0 ? void 0 : tabster.focusable.findLast({
-      container
-    });
-  }, [tabster]);
-  const findNextFocusable = React.useCallback((currentElement, options = {}) => {
-    if (!tabster || !targetDocument) {
-      return null;
-    }
-    const {
-      container = targetDocument.body
-    } = options;
-    return tabster.focusable.findNext({
-      currentElement,
-      container
-    });
-  }, [tabster, targetDocument]);
-  const findPrevFocusable = React.useCallback((currentElement, options = {}) => {
-    if (!tabster || !targetDocument) {
-      return null;
-    }
-    const {
-      container = targetDocument.body
-    } = options;
-    return tabster.focusable.findPrev({
-      currentElement,
-      container
-    });
-  }, [tabster, targetDocument]);
-  return {
-    findAllFocusable,
-    findFirstFocusable,
-    findLastFocusable,
-    findNextFocusable,
-    findPrevFocusable
-  };
+ */ export const useFocusFinders = ()=>{
+    const tabster = useTabster();
+    const { targetDocument  } = useFluent();
+    // Narrow props for now and let need dictate additional props in the future
+    const findAllFocusable = React.useCallback((container, acceptCondition)=>{
+        return (tabster === null || tabster === void 0 ? void 0 : tabster.focusable.findAll({
+            container,
+            acceptCondition
+        })) || [];
+    }, [
+        tabster
+    ]);
+    const findFirstFocusable = React.useCallback((container)=>{
+        return tabster === null || tabster === void 0 ? void 0 : tabster.focusable.findFirst({
+            container
+        });
+    }, [
+        tabster
+    ]);
+    const findLastFocusable = React.useCallback((container)=>{
+        return tabster === null || tabster === void 0 ? void 0 : tabster.focusable.findLast({
+            container
+        });
+    }, [
+        tabster
+    ]);
+    const findNextFocusable = React.useCallback((currentElement, options = {})=>{
+        if (!tabster || !targetDocument) {
+            return null;
+        }
+        const { container =targetDocument.body  } = options;
+        return tabster.focusable.findNext({
+            currentElement,
+            container
+        });
+    }, [
+        tabster,
+        targetDocument
+    ]);
+    const findPrevFocusable = React.useCallback((currentElement, options = {})=>{
+        if (!tabster || !targetDocument) {
+            return null;
+        }
+        const { container =targetDocument.body  } = options;
+        return tabster.focusable.findPrev({
+            currentElement,
+            container
+        });
+    }, [
+        tabster,
+        targetDocument
+    ]);
+    return {
+        findAllFocusable,
+        findFirstFocusable,
+        findLastFocusable,
+        findNextFocusable,
+        findPrevFocusable
+    };
 };
-//# sourceMappingURL=useFocusFinders.js.map

package/lib/hooks/useFocusFinders.js.map

@@ -1 +1 @@
-{"version":3,"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"],"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"],"mappings":"AAAA,YAAYA,KAAA,MAAW;AAEvB,SAASC,kBAAA,IAAsBC,SAAS,QAAQ;AAChD,SAASC,UAAU,QAAQ;AAE3B;;;AAGA,OAAO,MAAMC,eAAA,GAAkBA,CAAA,KAAM;EACnC,MAAMC,OAAA,GAAUF,UAAA;EAChB,MAAM;IAAEG;EAAc,CAAE,GAAGJ,SAAA;EAE3B;EACA,MAAMK,gBAAA,GAAmBP,KAAA,CAAMQ,WAAW,CACxC,CAACC,SAAA,EAAwBC,eAAA;IACvB,QAAAL,OAAA,aAAAA,OAAA,uBAAAA,OAAA,CAASM,SAAS,CAACC,OAAO,CAAC;MAAEH,SAAA;MAAWC;IAAgB,EAAE,KAAI,EAAE;KAClE,CAACL,OAAA,CAAQ;EAGX,MAAMQ,kBAAA,GAAqBb,KAAA,CAAMQ,WAAW,CACzCC,SAAA;IAA2B,OAAAJ,OAAA,aAAAA,OAAA,uBAAAA,OAAA,CAASM,SAAS,CAACG,SAAS,CAAC;MAAEL;IAAU,EAAE;KACvE,CAACJ,OAAA,CAAQ;EAGX,MAAMU,iBAAA,GAAoBf,KAAA,CAAMQ,WAAW,CACxCC,SAAA;IAA2B,OAAAJ,OAAA,aAAAA,OAAA,uBAAAA,OAAA,CAASM,SAAS,CAACK,QAAQ,CAAC;MAAEP;IAAU,EAAE;KACtE,CAACJ,OAAA,CAAQ;EAGX,MAAMY,iBAAA,GAAoBjB,KAAA,CAAMQ,WAAW,CACzC,CAACU,cAAA,EAA6BC,OAAA,GAAkE,CAAC,CAAC,KAAK;IACrG,IAAI,CAACd,OAAA,IAAW,CAACC,cAAA,EAAgB;MAC/B,OAAO,IAAI;IACb;IAEA,MAAM;MAAEG,SAAA,GAAYH,cAAA,CAAec;IAAI,CAAE,GAAGD,OAAA;IAE5C,OAAOd,OAAA,CAAQM,SAAS,CAACU,QAAQ,CAAC;MAAEH,cAAA;MAAgBT;IAAU;EAChE,GACA,CAACJ,OAAA,EAASC,cAAA,CAAe;EAG3B,MAAMgB,iBAAA,GAAoBtB,KAAA,CAAMQ,WAAW,CACzC,CAACU,cAAA,EAA6BC,OAAA,GAAkE,CAAC,CAAC,KAAK;IACrG,IAAI,CAACd,OAAA,IAAW,CAACC,cAAA,EAAgB;MAC/B,OAAO,IAAI;IACb;IAEA,MAAM;MAAEG,SAAA,GAAYH,cAAA,CAAec;IAAI,CAAE,GAAGD,OAAA;IAE5C,OAAOd,OAAA,CAAQM,SAAS,CAACY,QAAQ,CAAC;MAAEL,cAAA;MAAgBT;IAAU;EAChE,GACA,CAACJ,OAAA,EAASC,cAAA,CAAe;EAG3B,OAAO;IACLC,gBAAA;IACAM,kBAAA;IACAE,iBAAA;IACAE,iBAAA;IACAK;EACF;AACF"}
+{"version":3,"sources":["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"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,sBAAsBC,SAAS,QAAQ,kCAAkC;AAClF,SAASC,UAAU,QAAQ,eAAe;AAE1C;;CAEC,GACD,OAAO,MAAMC,kBAAkB,IAAM;IACnC,MAAMC,UAAUF;IAChB,MAAM,EAAEG,eAAc,EAAE,GAAGJ;IAE3B,2EAA2E;IAC3E,MAAMK,mBAAmBP,MAAMQ,WAAW,CACxC,CAACC,WAAwBC;QACvBL,OAAAA,CAAAA,oBAAAA,qBAAAA,KAAAA,IAAAA,QAASM,SAAS,CAACC,OAAO,CAAC;YAAEH;YAAWC;QAAgB,EAAE,AAAD,KAAK,EAAE;OAClE;QAACL;KAAQ;IAGX,MAAMQ,qBAAqBb,MAAMQ,WAAW,CAC1C,CAACC;QAA2BJ,OAAAA,oBAAAA,qBAAAA,KAAAA,IAAAA,QAASM,SAAS,CAACG,SAAS,CAAC;YAAEL;QAAU,EAAE;OACvE;QAACJ;KAAQ;IAGX,MAAMU,oBAAoBf,MAAMQ,WAAW,CACzC,CAACC;QAA2BJ,OAAAA,oBAAAA,qBAAAA,KAAAA,IAAAA,QAASM,SAAS,CAACK,QAAQ,CAAC;YAAEP;QAAU,EAAE;OACtE;QAACJ;KAAQ;IAGX,MAAMY,oBAAoBjB,MAAMQ,WAAW,CACzC,CAACU,gBAA6BC,UAAkE,CAAC,CAAC,GAAK;QACrG,IAAI,CAACd,WAAW,CAACC,gBAAgB;YAC/B,OAAO,IAAI;QACb,CAAC;QAED,MAAM,EAAEG,WAAYH,eAAec,IAAI,CAAA,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,GAAK;QACrG,IAAI,CAACd,WAAW,CAACC,gBAAgB;YAC/B,OAAO,IAAI;QACb,CAAC;QAED,MAAM,EAAEG,WAAYH,eAAec,IAAI,CAAA,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"}

package/lib/hooks/useFocusVisible.js

@@ -2,15 +2,17 @@ import * as React from 'react';
 import { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';
 import { applyFocusVisiblePolyfill } from '../focus/focusVisiblePolyfill';
 export function useFocusVisible(options = {}) {
-  const contentValue = useFluent();
-  const scopeRef = React.useRef(null);
-  var _options_targetDocument;
-  const targetDocument = (_options_targetDocument = options.targetDocument) !== null && _options_targetDocument !== void 0 ? _options_targetDocument : contentValue.targetDocument;
-  React.useEffect(() => {
-    if ((targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.defaultView) && scopeRef.current) {
-      return applyFocusVisiblePolyfill(scopeRef.current, targetDocument.defaultView);
-    }
-  }, [scopeRef, targetDocument]);
-  return scopeRef;
+    const contentValue = useFluent();
+    const scopeRef = React.useRef(null);
+    var _options_targetDocument;
+    const targetDocument = (_options_targetDocument = options.targetDocument) !== null && _options_targetDocument !== void 0 ? _options_targetDocument : contentValue.targetDocument;
+    React.useEffect(()=>{
+        if ((targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.defaultView) && scopeRef.current) {
+            return applyFocusVisiblePolyfill(scopeRef.current, targetDocument.defaultView);
+        }
+    }, [
+        scopeRef,
+        targetDocument
+    ]);
+    return scopeRef;
 }
-//# sourceMappingURL=useFocusVisible.js.map

package/lib/hooks/useFocusVisible.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","useFluent_unstable","useFluent","applyFocusVisiblePolyfill","useFocusVisible","options","contentValue","scopeRef","useRef","_options_targetDocument","targetDocument","useEffect","defaultView","current"],"sources":["../../src/hooks/useFocusVisible.ts"],"sourcesContent":["import * as React from 'react';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\n\nimport { applyFocusVisiblePolyfill } from '../focus/focusVisiblePolyfill';\n\ntype UseFocusVisibleOptions = {\n  targetDocument?: HTMLDocument;\n};\n\nexport function useFocusVisible<TElement extends HTMLElement = HTMLElement>(options: UseFocusVisibleOptions = {}) {\n  const contentValue = useFluent();\n  const scopeRef = React.useRef<TElement>(null);\n\n  const targetDocument = options.targetDocument ?? contentValue.targetDocument;\n\n  React.useEffect(() => {\n    if (targetDocument?.defaultView && scopeRef.current) {\n      return applyFocusVisiblePolyfill(scopeRef.current, targetDocument.defaultView);\n    }\n  }, [scopeRef, targetDocument]);\n\n  return scopeRef;\n}\n"],"mappings":"AAAA,YAAYA,KAAA,MAAW;AACvB,SAASC,kBAAA,IAAsBC,SAAS,QAAQ;AAEhD,SAASC,yBAAyB,QAAQ;AAM1C,OAAO,SAASC,gBAA4DC,OAAA,GAAkC,CAAC,CAAC,EAAE;EAChH,MAAMC,YAAA,GAAeJ,SAAA;EACrB,MAAMK,QAAA,GAAWP,KAAA,CAAMQ,MAAM,CAAW,IAAI;MAErBC,uBAAA;EAAvB,MAAMC,cAAA,GAAiB,CAAAD,uBAAA,GAAAJ,OAAA,CAAQK,cAAc,cAAtBD,uBAAA,cAAAA,uBAAA,GAA0BH,YAAA,CAAaI,cAAc;EAE5EV,KAAA,CAAMW,SAAS,CAAC,MAAM;IACpB,IAAI,CAAAD,cAAA,aAAAA,cAAA,uBAAAA,cAAA,CAAgBE,WAAW,KAAIL,QAAA,CAASM,OAAO,EAAE;MACnD,OAAOV,yBAAA,CAA0BI,QAAA,CAASM,OAAO,EAAEH,cAAA,CAAeE,WAAW;IAC/E;EACF,GAAG,CAACL,QAAA,EAAUG,cAAA,CAAe;EAE7B,OAAOH,QAAA;AACT"}
+{"version":3,"sources":["useFocusVisible.ts"],"sourcesContent":["import * as React from 'react';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\n\nimport { applyFocusVisiblePolyfill } from '../focus/focusVisiblePolyfill';\n\ntype UseFocusVisibleOptions = {\n  targetDocument?: Document;\n};\n\nexport function useFocusVisible<TElement extends HTMLElement = HTMLElement>(options: UseFocusVisibleOptions = {}) {\n  const contentValue = useFluent();\n  const scopeRef = React.useRef<TElement>(null);\n\n  const targetDocument = options.targetDocument ?? contentValue.targetDocument;\n\n  React.useEffect(() => {\n    if (targetDocument?.defaultView && scopeRef.current) {\n      return applyFocusVisiblePolyfill(scopeRef.current, targetDocument.defaultView);\n    }\n  }, [scopeRef, targetDocument]);\n\n  return scopeRef;\n}\n"],"names":["React","useFluent_unstable","useFluent","applyFocusVisiblePolyfill","useFocusVisible","options","contentValue","scopeRef","useRef","targetDocument","useEffect","defaultView","current"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,sBAAsBC,SAAS,QAAQ,kCAAkC;AAElF,SAASC,yBAAyB,QAAQ,gCAAgC;AAM1E,OAAO,SAASC,gBAA4DC,UAAkC,CAAC,CAAC,EAAE;IAChH,MAAMC,eAAeJ;IACrB,MAAMK,WAAWP,MAAMQ,MAAM,CAAW,IAAI;QAErBH;IAAvB,MAAMI,iBAAiBJ,CAAAA,0BAAAA,QAAQI,cAAc,cAAtBJ,qCAAAA,0BAA0BC,aAAaG,cAAc;IAE5ET,MAAMU,SAAS,CAAC,IAAM;QACpB,IAAID,CAAAA,2BAAAA,4BAAAA,KAAAA,IAAAA,eAAgBE,WAAW,AAAD,KAAKJ,SAASK,OAAO,EAAE;YACnD,OAAOT,0BAA0BI,SAASK,OAAO,EAAEH,eAAeE,WAAW;QAC/E,CAAC;IACH,GAAG;QAACJ;QAAUE;KAAe;IAE7B,OAAOF;AACT,CAAC"}

package/lib/hooks/useFocusWithin.js

@@ -5,17 +5,16 @@ import { applyFocusWithinPolyfill } from '../focus/focusWithinPolyfill';
  * A ponyfill that allows `:focus-within` to support visibility based on keyboard/mouse navigation
  * like `:focus-visible` https://github.com/WICG/focus-visible/issues/151
  * @returns ref to the element that uses `:focus-within` styles
- */
-export function useFocusWithin() {
-  const {
-    targetDocument
-  } = useFluent();
-  const elementRef = React.useRef(null);
-  React.useEffect(() => {
-    if ((targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.defaultView) && elementRef.current) {
-      return applyFocusWithinPolyfill(elementRef.current, targetDocument.defaultView);
-    }
-  }, [elementRef, targetDocument]);
-  return elementRef;
+ */ export function useFocusWithin() {
+    const { targetDocument  } = useFluent();
+    const elementRef = React.useRef(null);
+    React.useEffect(()=>{
+        if ((targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.defaultView) && elementRef.current) {
+            return applyFocusWithinPolyfill(elementRef.current, targetDocument.defaultView);
+        }
+    }, [
+        elementRef,
+        targetDocument
+    ]);
+    return elementRef;
 }
-//# sourceMappingURL=useFocusWithin.js.map

package/lib/hooks/useFocusWithin.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","useFluent_unstable","useFluent","applyFocusWithinPolyfill","useFocusWithin","targetDocument","elementRef","useRef","useEffect","defaultView","current"],"sources":["../../src/hooks/useFocusWithin.ts"],"sourcesContent":["import * as React from 'react';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport { applyFocusWithinPolyfill } from '../focus/focusWithinPolyfill';\n\n/**\n * A ponyfill that allows `:focus-within` to support visibility based on keyboard/mouse navigation\n * like `:focus-visible` https://github.com/WICG/focus-visible/issues/151\n * @returns ref to the element that uses `:focus-within` styles\n */\nexport function useFocusWithin<TElement extends HTMLElement = HTMLElement>() {\n  const { targetDocument } = useFluent();\n  const elementRef = React.useRef<TElement>(null);\n\n  React.useEffect(() => {\n    if (targetDocument?.defaultView && elementRef.current) {\n      return applyFocusWithinPolyfill(elementRef.current, targetDocument.defaultView);\n    }\n  }, [elementRef, targetDocument]);\n\n  return elementRef;\n}\n"],"mappings":"AAAA,YAAYA,KAAA,MAAW;AACvB,SAASC,kBAAA,IAAsBC,SAAS,QAAQ;AAChD,SAASC,wBAAwB,QAAQ;AAEzC;;;;;AAKA,OAAO,SAASC,eAAA,EAA6D;EAC3E,MAAM;IAAEC;EAAc,CAAE,GAAGH,SAAA;EAC3B,MAAMI,UAAA,GAAaN,KAAA,CAAMO,MAAM,CAAW,IAAI;EAE9CP,KAAA,CAAMQ,SAAS,CAAC,MAAM;IACpB,IAAI,CAAAH,cAAA,aAAAA,cAAA,uBAAAA,cAAA,CAAgBI,WAAW,KAAIH,UAAA,CAAWI,OAAO,EAAE;MACrD,OAAOP,wBAAA,CAAyBG,UAAA,CAAWI,OAAO,EAAEL,cAAA,CAAeI,WAAW;IAChF;EACF,GAAG,CAACH,UAAA,EAAYD,cAAA,CAAe;EAE/B,OAAOC,UAAA;AACT"}
+{"version":3,"sources":["useFocusWithin.ts"],"sourcesContent":["import * as React from 'react';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport { applyFocusWithinPolyfill } from '../focus/focusWithinPolyfill';\n\n/**\n * A ponyfill that allows `:focus-within` to support visibility based on keyboard/mouse navigation\n * like `:focus-visible` https://github.com/WICG/focus-visible/issues/151\n * @returns ref to the element that uses `:focus-within` styles\n */\nexport function useFocusWithin<TElement extends HTMLElement = HTMLElement>() {\n  const { targetDocument } = useFluent();\n  const elementRef = React.useRef<TElement>(null);\n\n  React.useEffect(() => {\n    if (targetDocument?.defaultView && elementRef.current) {\n      return applyFocusWithinPolyfill(elementRef.current, targetDocument.defaultView);\n    }\n  }, [elementRef, targetDocument]);\n\n  return elementRef;\n}\n"],"names":["React","useFluent_unstable","useFluent","applyFocusWithinPolyfill","useFocusWithin","targetDocument","elementRef","useRef","useEffect","defaultView","current"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,sBAAsBC,SAAS,QAAQ,kCAAkC;AAClF,SAASC,wBAAwB,QAAQ,+BAA+B;AAExE;;;;CAIC,GACD,OAAO,SAASC,iBAA6D;IAC3E,MAAM,EAAEC,eAAc,EAAE,GAAGH;IAC3B,MAAMI,aAAaN,MAAMO,MAAM,CAAW,IAAI;IAE9CP,MAAMQ,SAAS,CAAC,IAAM;QACpB,IAAIH,CAAAA,2BAAAA,4BAAAA,KAAAA,IAAAA,eAAgBI,WAAW,AAAD,KAAKH,WAAWI,OAAO,EAAE;YACrD,OAAOP,yBAAyBG,WAAWI,OAAO,EAAEL,eAAeI,WAAW;QAChF,CAAC;IACH,GAAG;QAACH;QAAYD;KAAe;IAE/B,OAAOC;AACT,CAAC"}

package/lib/hooks/useFocusableGroup.js

@@ -4,28 +4,26 @@ 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);
-  }
-  return useTabsterAttributes({
-    groupper: {
-      tabbability: getTabbability(options === null || options === void 0 ? void 0 : options.tabBehavior)
+ */ export const useFocusableGroup = (options)=>{
+    const tabster = useTabster();
+    if (tabster) {
+        getGroupper(tabster);
     }
-  });
+    return useTabsterAttributes({
+        groupper: {
+            tabbability: getTabbability(options === null || options === void 0 ? void 0 : options.tabBehavior)
+        }
+    });
 };
-const getTabbability = tabBehavior => {
-  switch (tabBehavior) {
-    case 'unlimited':
-      return Types.GroupperTabbabilities.Unlimited;
-    case 'limited':
-      return Types.GroupperTabbabilities.Limited;
-    case 'limited-trap-focus':
-      return Types.GroupperTabbabilities.LimitedTrapFocus;
-    default:
-      return undefined;
-  }
+const getTabbability = (tabBehavior)=>{
+    switch(tabBehavior){
+        case 'unlimited':
+            return Types.GroupperTabbabilities.Unlimited;
+        case 'limited':
+            return Types.GroupperTabbabilities.Limited;
+        case 'limited-trap-focus':
+            return Types.GroupperTabbabilities.LimitedTrapFocus;
+        default:
+            return undefined;
+    }
 };
-//# sourceMappingURL=useFocusableGroup.js.map

package/lib/hooks/useFocusableGroup.js.map

@@ -1 +1 @@
-{"version":3,"names":["Types","getGroupper","useTabsterAttributes","useTabster","useFocusableGroup","options","tabster","groupper","tabbability","getTabbability","tabBehavior","GroupperTabbabilities","Unlimited","Limited","LimitedTrapFocus","undefined"],"sources":["../../src/hooks/useFocusableGroup.ts"],"sourcesContent":["import { Types, getGroupper } 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/**\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  });\n};\n\nconst getTabbability = (\n  tabBehavior?: UseFocusableGroupOptions['tabBehavior'],\n): Types.GroupperTabbability | undefined => {\n  switch (tabBehavior) {\n    case 'unlimited':\n      return Types.GroupperTabbabilities.Unlimited;\n    case 'limited':\n      return Types.GroupperTabbabilities.Limited;\n    case 'limited-trap-focus':\n      return Types.GroupperTabbabilities.LimitedTrapFocus;\n    default:\n      return undefined;\n  }\n};\n"],"mappings":"AAAA,SAASA,KAAK,EAAEC,WAAW,QAAQ;AACnC,SAASC,oBAAoB,QAAQ;AACrC,SAASC,UAAU,QAAQ;AAS3B;;;;AAIA,OAAO,MAAMC,iBAAA,GAAqBC,OAAA,IAAkE;EAClG,MAAMC,OAAA,GAAUH,UAAA;EAEhB,IAAIG,OAAA,EAAS;IACXL,WAAA,CAAYK,OAAA;EACd;EAEA,OAAOJ,oBAAA,CAAqB;IAC1BK,QAAA,EAAU;MACRC,WAAA,EAAaC,cAAA,CAAeJ,OAAA,aAAAA,OAAA,uBAAAA,OAAA,CAASK,WAAW;IAClD;EACF;AACF;AAEA,MAAMD,cAAA,GACJC,WAAA,IAC0C;EAC1C,QAAQA,WAAA;IACN,KAAK;MACH,OAAOV,KAAA,CAAMW,qBAAqB,CAACC,SAAS;IAC9C,KAAK;MACH,OAAOZ,KAAA,CAAMW,qBAAqB,CAACE,OAAO;IAC5C,KAAK;MACH,OAAOb,KAAA,CAAMW,qBAAqB,CAACG,gBAAgB;IACrD;MACE,OAAOC,SAAA;EAAA;AAEb"}
+{"version":3,"sources":["useFocusableGroup.ts"],"sourcesContent":["import { Types, getGroupper } 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/**\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  });\n};\n\nconst getTabbability = (\n  tabBehavior?: UseFocusableGroupOptions['tabBehavior'],\n): Types.GroupperTabbability | undefined => {\n  switch (tabBehavior) {\n    case 'unlimited':\n      return Types.GroupperTabbabilities.Unlimited;\n    case 'limited':\n      return Types.GroupperTabbabilities.Limited;\n    case 'limited-trap-focus':\n      return Types.GroupperTabbabilities.LimitedTrapFocus;\n    default:\n      return undefined;\n  }\n};\n"],"names":["Types","getGroupper","useTabsterAttributes","useTabster","useFocusableGroup","options","tabster","groupper","tabbability","getTabbability","tabBehavior","GroupperTabbabilities","Unlimited","Limited","LimitedTrapFocus","undefined"],"mappings":"AAAA,SAASA,KAAK,EAAEC,WAAW,QAAQ,UAAU;AAC7C,SAASC,oBAAoB,QAAQ,yBAAyB;AAC9D,SAASC,UAAU,QAAQ,eAAe;AAS1C;;;CAGC,GACD,OAAO,MAAMC,oBAAoB,CAACC,UAAkE;IAClG,MAAMC,UAAUH;IAEhB,IAAIG,SAAS;QACXL,YAAYK;IACd,CAAC;IAED,OAAOJ,qBAAqB;QAC1BK,UAAU;YACRC,aAAaC,eAAeJ,oBAAAA,qBAAAA,KAAAA,IAAAA,QAASK,WAAW;QAClD;IACF;AACF,EAAE;AAEF,MAAMD,iBAAiB,CACrBC,cAC0C;IAC1C,OAAQA;QACN,KAAK;YACH,OAAOV,MAAMW,qBAAqB,CAACC,SAAS;QAC9C,KAAK;YACH,OAAOZ,MAAMW,qBAAqB,CAACE,OAAO;QAC5C,KAAK;YACH,OAAOb,MAAMW,qBAAqB,CAACG,gBAAgB;QACrD;YACE,OAAOC;IACX;AACF"}

package/lib/hooks/useKeyboardNavAttribute.js

@@ -6,33 +6,33 @@ import { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts
  * Instantiates [keyborg](https://github.com/microsoft/keyborg) and adds `data-keyboard-nav`
  * attribute to a referenced element to ensure keyboard navigation awareness
  * synced to keyborg logic without having to cause a re-render on react tree.
- */
-export function useKeyboardNavAttribute() {
-  const {
-    targetDocument
-  } = useFluent();
-  const keyborg = useMemo(() => targetDocument && createKeyborg(targetDocument.defaultView), [targetDocument]);
-  const ref = useRef(null);
-  useEffect(() => {
-    if (keyborg) {
-      setBooleanAttribute(ref, KEYBOARD_NAV_ATTRIBUTE, keyborg.isNavigatingWithKeyboard());
-      const cb = next => {
-        setBooleanAttribute(ref, KEYBOARD_NAV_ATTRIBUTE, next);
-      };
-      keyborg.subscribe(cb);
-      return () => keyborg.unsubscribe(cb);
-    }
-  }, [keyborg]);
-  return ref;
+ */ export function useKeyboardNavAttribute() {
+    const { targetDocument  } = useFluent();
+    const keyborg = useMemo(()=>targetDocument && createKeyborg(targetDocument.defaultView), [
+        targetDocument
+    ]);
+    const ref = useRef(null);
+    useEffect(()=>{
+        if (keyborg) {
+            setBooleanAttribute(ref, KEYBOARD_NAV_ATTRIBUTE, keyborg.isNavigatingWithKeyboard());
+            const cb = (next)=>{
+                setBooleanAttribute(ref, KEYBOARD_NAV_ATTRIBUTE, next);
+            };
+            keyborg.subscribe(cb);
+            return ()=>keyborg.unsubscribe(cb);
+        }
+    }, [
+        keyborg
+    ]);
+    return ref;
 }
 function setBooleanAttribute(elementRef, attribute, value) {
-  if (!elementRef.current) {
-    return;
-  }
-  if (value) {
-    elementRef.current.setAttribute(attribute, '');
-  } else {
-    elementRef.current.removeAttribute(attribute);
-  }
+    if (!elementRef.current) {
+        return;
+    }
+    if (value) {
+        elementRef.current.setAttribute(attribute, '');
+    } else {
+        elementRef.current.removeAttribute(attribute);
+    }
 }
-//# sourceMappingURL=useKeyboardNavAttribute.js.map

package/lib/hooks/useKeyboardNavAttribute.js.map

@@ -1 +1 @@
-{"version":3,"names":["createKeyborg","useEffect","useMemo","useRef","KEYBOARD_NAV_ATTRIBUTE","useFluent_unstable","useFluent","useKeyboardNavAttribute","targetDocument","keyborg","defaultView","ref","setBooleanAttribute","isNavigatingWithKeyboard","cb","next","subscribe","unsubscribe","elementRef","attribute","value","current","setAttribute","removeAttribute"],"sources":["../../src/hooks/useKeyboardNavAttribute.ts"],"sourcesContent":["import { createKeyborg } from 'keyborg';\nimport { useEffect, useMemo, useRef } from 'react';\nimport { KEYBOARD_NAV_ATTRIBUTE } from '../focus/constants';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport type { KeyborgCallback } from 'keyborg';\nimport type { RefObject } from 'react';\n\n/**\n * Instantiates [keyborg](https://github.com/microsoft/keyborg) and adds `data-keyboard-nav`\n * attribute to a referenced element to ensure keyboard navigation awareness\n * synced to keyborg logic without having to cause a re-render on react tree.\n */\nexport function useKeyboardNavAttribute<E extends HTMLElement>() {\n  const { targetDocument } = useFluent();\n  const keyborg = useMemo(() => targetDocument && createKeyborg(targetDocument.defaultView!), [targetDocument]);\n  const ref = useRef<E>(null);\n  useEffect(() => {\n    if (keyborg) {\n      setBooleanAttribute(ref, KEYBOARD_NAV_ATTRIBUTE, keyborg.isNavigatingWithKeyboard());\n      const cb: KeyborgCallback = next => {\n        setBooleanAttribute(ref, KEYBOARD_NAV_ATTRIBUTE, next);\n      };\n      keyborg.subscribe(cb);\n      return () => keyborg.unsubscribe(cb);\n    }\n  }, [keyborg]);\n  return ref;\n}\n\nfunction setBooleanAttribute(elementRef: RefObject<HTMLElement>, attribute: string, value: boolean) {\n  if (!elementRef.current) {\n    return;\n  }\n  if (value) {\n    elementRef.current.setAttribute(attribute, '');\n  } else {\n    elementRef.current.removeAttribute(attribute);\n  }\n}\n"],"mappings":"AAAA,SAASA,aAAa,QAAQ;AAC9B,SAASC,SAAS,EAAEC,OAAO,EAAEC,MAAM,QAAQ;AAC3C,SAASC,sBAAsB,QAAQ;AACvC,SAASC,kBAAA,IAAsBC,SAAS,QAAQ;AAIhD;;;;;AAKA,OAAO,SAASC,wBAAA,EAAiD;EAC/D,MAAM;IAAEC;EAAc,CAAE,GAAGF,SAAA;EAC3B,MAAMG,OAAA,GAAUP,OAAA,CAAQ,MAAMM,cAAA,IAAkBR,aAAA,CAAcQ,cAAA,CAAeE,WAAW,GAAI,CAACF,cAAA,CAAe;EAC5G,MAAMG,GAAA,GAAMR,MAAA,CAAU,IAAI;EAC1BF,SAAA,CAAU,MAAM;IACd,IAAIQ,OAAA,EAAS;MACXG,mBAAA,CAAoBD,GAAA,EAAKP,sBAAA,EAAwBK,OAAA,CAAQI,wBAAwB;MACjF,MAAMC,EAAA,GAAsBC,IAAA,IAAQ;QAClCH,mBAAA,CAAoBD,GAAA,EAAKP,sBAAA,EAAwBW,IAAA;MACnD;MACAN,OAAA,CAAQO,SAAS,CAACF,EAAA;MAClB,OAAO,MAAML,OAAA,CAAQQ,WAAW,CAACH,EAAA;IACnC;EACF,GAAG,CAACL,OAAA,CAAQ;EACZ,OAAOE,GAAA;AACT;AAEA,SAASC,oBAAoBM,UAAkC,EAAEC,SAAiB,EAAEC,KAAc,EAAE;EAClG,IAAI,CAACF,UAAA,CAAWG,OAAO,EAAE;IACvB;EACF;EACA,IAAID,KAAA,EAAO;IACTF,UAAA,CAAWG,OAAO,CAACC,YAAY,CAACH,SAAA,EAAW;EAC7C,OAAO;IACLD,UAAA,CAAWG,OAAO,CAACE,eAAe,CAACJ,SAAA;EACrC;AACF"}
+{"version":3,"sources":["useKeyboardNavAttribute.ts"],"sourcesContent":["import { createKeyborg } from 'keyborg';\nimport { useEffect, useMemo, useRef } from 'react';\nimport { KEYBOARD_NAV_ATTRIBUTE } from '../focus/constants';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport type { KeyborgCallback } from 'keyborg';\nimport type { RefObject } from 'react';\n\n/**\n * Instantiates [keyborg](https://github.com/microsoft/keyborg) and adds `data-keyboard-nav`\n * attribute to a referenced element to ensure keyboard navigation awareness\n * synced to keyborg logic without having to cause a re-render on react tree.\n */\nexport function useKeyboardNavAttribute<E extends HTMLElement>() {\n  const { targetDocument } = useFluent();\n  const keyborg = useMemo(() => targetDocument && createKeyborg(targetDocument.defaultView!), [targetDocument]);\n  const ref = useRef<E>(null);\n  useEffect(() => {\n    if (keyborg) {\n      setBooleanAttribute(ref, KEYBOARD_NAV_ATTRIBUTE, keyborg.isNavigatingWithKeyboard());\n      const cb: KeyborgCallback = next => {\n        setBooleanAttribute(ref, KEYBOARD_NAV_ATTRIBUTE, next);\n      };\n      keyborg.subscribe(cb);\n      return () => keyborg.unsubscribe(cb);\n    }\n  }, [keyborg]);\n  return ref;\n}\n\nfunction setBooleanAttribute(elementRef: RefObject<HTMLElement>, attribute: string, value: boolean) {\n  if (!elementRef.current) {\n    return;\n  }\n  if (value) {\n    elementRef.current.setAttribute(attribute, '');\n  } else {\n    elementRef.current.removeAttribute(attribute);\n  }\n}\n"],"names":["createKeyborg","useEffect","useMemo","useRef","KEYBOARD_NAV_ATTRIBUTE","useFluent_unstable","useFluent","useKeyboardNavAttribute","targetDocument","keyborg","defaultView","ref","setBooleanAttribute","isNavigatingWithKeyboard","cb","next","subscribe","unsubscribe","elementRef","attribute","value","current","setAttribute","removeAttribute"],"mappings":"AAAA,SAASA,aAAa,QAAQ,UAAU;AACxC,SAASC,SAAS,EAAEC,OAAO,EAAEC,MAAM,QAAQ,QAAQ;AACnD,SAASC,sBAAsB,QAAQ,qBAAqB;AAC5D,SAASC,sBAAsBC,SAAS,QAAQ,kCAAkC;AAIlF;;;;CAIC,GACD,OAAO,SAASC,0BAAiD;IAC/D,MAAM,EAAEC,eAAc,EAAE,GAAGF;IAC3B,MAAMG,UAAUP,QAAQ,IAAMM,kBAAkBR,cAAcQ,eAAeE,WAAW,GAAI;QAACF;KAAe;IAC5G,MAAMG,MAAMR,OAAU,IAAI;IAC1BF,UAAU,IAAM;QACd,IAAIQ,SAAS;YACXG,oBAAoBD,KAAKP,wBAAwBK,QAAQI,wBAAwB;YACjF,MAAMC,KAAsBC,CAAAA,OAAQ;gBAClCH,oBAAoBD,KAAKP,wBAAwBW;YACnD;YACAN,QAAQO,SAAS,CAACF;YAClB,OAAO,IAAML,QAAQQ,WAAW,CAACH;QACnC,CAAC;IACH,GAAG;QAACL;KAAQ;IACZ,OAAOE;AACT,CAAC;AAED,SAASC,oBAAoBM,UAAkC,EAAEC,SAAiB,EAAEC,KAAc,EAAE;IAClG,IAAI,CAACF,WAAWG,OAAO,EAAE;QACvB;IACF,CAAC;IACD,IAAID,OAAO;QACTF,WAAWG,OAAO,CAACC,YAAY,CAACH,WAAW;IAC7C,OAAO;QACLD,WAAWG,OAAO,CAACE,eAAe,CAACJ;IACrC,CAAC;AACH"}

package/lib/hooks/useModalAttributes.js

@@ -8,35 +8,29 @@ import { useTabster } from './useTabster';
  * The trigger element will be focused if focus is lost after the modal element is removed
  *
  * @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 deloser APIs
-  if (tabster) {
-    getModalizer(tabster);
-    getDeloser(tabster);
-  }
-  const id = useId('modal-', options.id);
-  const modalAttributes = useTabsterAttributes({
-    deloser: {},
-    modalizer: {
-      id,
-      isOthersAccessible: !trapFocus,
-      isAlwaysAccessible: alwaysFocusable,
-      isTrapped: legacyTrapFocus && trapFocus
+ */ export const useModalAttributes = (options = {})=>{
+    const { trapFocus , alwaysFocusable , legacyTrapFocus  } = options;
+    const tabster = useTabster();
+    // Initializes the modalizer and deloser APIs
+    if (tabster) {
+        getModalizer(tabster);
+        getDeloser(tabster);
     }
-  });
-  const triggerAttributes = useTabsterAttributes({
-    deloser: {}
-  });
-  return {
-    modalAttributes,
-    triggerAttributes
-  };
+    const id = useId('modal-', options.id);
+    const modalAttributes = useTabsterAttributes({
+        deloser: {},
+        modalizer: {
+            id,
+            isOthersAccessible: !trapFocus,
+            isAlwaysAccessible: alwaysFocusable,
+            isTrapped: legacyTrapFocus && trapFocus
+        }
+    });
+    const triggerAttributes = useTabsterAttributes({
+        deloser: {}
+    });
+    return {
+        modalAttributes,
+        triggerAttributes
+    };
 };
-//# sourceMappingURL=useModalAttributes.js.map

package/lib/hooks/useModalAttributes.js.map

@@ -1 +1 @@
-{"version":3,"names":["useId","useTabsterAttributes","getDeloser","getModalizer","useTabster","useModalAttributes","options","trapFocus","alwaysFocusable","legacyTrapFocus","tabster","id","modalAttributes","deloser","modalizer","isOthersAccessible","isAlwaysAccessible","isTrapped","triggerAttributes"],"sources":["../../src/hooks/useModalAttributes.ts"],"sourcesContent":["import { useId } from '@fluentui/react-utilities';\nimport { useTabsterAttributes } from './useTabsterAttributes';\nimport { getDeloser, getModalizer, Types as TabsterTypes } from 'tabster';\nimport { useTabster } from './useTabster';\n\nexport interface UseModalAttributesOptions {\n  /**\n   * Traps focus inside the elements the attributes are applied.\n   * Prefer this to `legacyTrapFocus`\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 legacy behavior to match previous versions of Fluent and is not\n   * recommended for general use.\n   * Enabling `legacyTrapFocus` prevents users from tabbing out of the focus trap and into\n   * the actual browser. Prefer using `trapFocus` instead of this prop.\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 * 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 deloser APIs\n  if (tabster) {\n    getModalizer(tabster);\n    getDeloser(tabster);\n  }\n\n  const id = useId('modal-', options.id);\n  const modalAttributes = useTabsterAttributes({\n    deloser: {},\n    modalizer: {\n      id,\n      isOthersAccessible: !trapFocus,\n      isAlwaysAccessible: alwaysFocusable,\n      isTrapped: legacyTrapFocus && trapFocus,\n    },\n  });\n\n  const triggerAttributes = useTabsterAttributes({\n    deloser: {},\n  });\n\n  return { modalAttributes, triggerAttributes };\n};\n"],"mappings":"AAAA,SAASA,KAAK,QAAQ;AACtB,SAASC,oBAAoB,QAAQ;AACrC,SAASC,UAAU,EAAEC,YAAY,QAA+B;AAChE,SAASC,UAAU,QAAQ;AA8B3B;;;;;;;AAOA,OAAO,MAAMC,kBAAA,GAAqBA,CAChCC,OAAA,GAAqC,CAAC,CAAC,KACwE;EAC/G,MAAM;IAAEC,SAAA;IAAWC,eAAA;IAAiBC;EAAe,CAAE,GAAGH,OAAA;EACxD,MAAMI,OAAA,GAAUN,UAAA;EAChB;EACA,IAAIM,OAAA,EAAS;IACXP,YAAA,CAAaO,OAAA;IACbR,UAAA,CAAWQ,OAAA;EACb;EAEA,MAAMC,EAAA,GAAKX,KAAA,CAAM,UAAUM,OAAA,CAAQK,EAAE;EACrC,MAAMC,eAAA,GAAkBX,oBAAA,CAAqB;IAC3CY,OAAA,EAAS,CAAC;IACVC,SAAA,EAAW;MACTH,EAAA;MACAI,kBAAA,EAAoB,CAACR,SAAA;MACrBS,kBAAA,EAAoBR,eAAA;MACpBS,SAAA,EAAWR,eAAA,IAAmBF;IAChC;EACF;EAEA,MAAMW,iBAAA,GAAoBjB,oBAAA,CAAqB;IAC7CY,OAAA,EAAS,CAAC;EACZ;EAEA,OAAO;IAAED,eAAA;IAAiBM;EAAkB;AAC9C"}
+{"version":3,"sources":["useModalAttributes.ts"],"sourcesContent":["import { useId } from '@fluentui/react-utilities';\nimport { useTabsterAttributes } from './useTabsterAttributes';\nimport { getDeloser, getModalizer, Types as TabsterTypes } from 'tabster';\nimport { useTabster } from './useTabster';\n\nexport interface UseModalAttributesOptions {\n  /**\n   * Traps focus inside the elements the attributes are applied.\n   * Prefer this to `legacyTrapFocus`\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 legacy behavior to match previous versions of Fluent and is not\n   * recommended for general use.\n   * Enabling `legacyTrapFocus` prevents users from tabbing out of the focus trap and into\n   * the actual browser. Prefer using `trapFocus` instead of this prop.\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 * 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 deloser APIs\n  if (tabster) {\n    getModalizer(tabster);\n    getDeloser(tabster);\n  }\n\n  const id = useId('modal-', options.id);\n  const modalAttributes = useTabsterAttributes({\n    deloser: {},\n    modalizer: {\n      id,\n      isOthersAccessible: !trapFocus,\n      isAlwaysAccessible: alwaysFocusable,\n      isTrapped: legacyTrapFocus && trapFocus,\n    },\n  });\n\n  const triggerAttributes = useTabsterAttributes({\n    deloser: {},\n  });\n\n  return { modalAttributes, triggerAttributes };\n};\n"],"names":["useId","useTabsterAttributes","getDeloser","getModalizer","useTabster","useModalAttributes","options","trapFocus","alwaysFocusable","legacyTrapFocus","tabster","id","modalAttributes","deloser","modalizer","isOthersAccessible","isAlwaysAccessible","isTrapped","triggerAttributes"],"mappings":"AAAA,SAASA,KAAK,QAAQ,4BAA4B;AAClD,SAASC,oBAAoB,QAAQ,yBAAyB;AAC9D,SAASC,UAAU,EAAEC,YAAY,QAA+B,UAAU;AAC1E,SAASC,UAAU,QAAQ,eAAe;AA8B1C;;;;;;CAMC,GACD,OAAO,MAAMC,qBAAqB,CAChCC,UAAqC,CAAC,CAAC,GACwE;IAC/G,MAAM,EAAEC,UAAS,EAAEC,gBAAe,EAAEC,gBAAe,EAAE,GAAGH;IACxD,MAAMI,UAAUN;IAChB,6CAA6C;IAC7C,IAAIM,SAAS;QACXP,aAAaO;QACbR,WAAWQ;IACb,CAAC;IAED,MAAMC,KAAKX,MAAM,UAAUM,QAAQK,EAAE;IACrC,MAAMC,kBAAkBX,qBAAqB;QAC3CY,SAAS,CAAC;QACVC,WAAW;YACTH;YACAI,oBAAoB,CAACR;YACrBS,oBAAoBR;YACpBS,WAAWR,mBAAmBF;QAChC;IACF;IAEA,MAAMW,oBAAoBjB,qBAAqB;QAC7CY,SAAS,CAAC;IACZ;IAEA,OAAO;QAAED;QAAiBM;IAAkB;AAC9C,EAAE"}