@fluentui/react-tabster 0.0.0-nightly-20230316-0427.1 → 0.0.0-nightly-20230317-1454.1

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":["../../../../../../../../packages/react-components/react-tabster/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,SAAS;AACzC,SAASC,oBAAoB,QAAQ,wBAAwB;AAC7D,SAASC,UAAU,QAAQ,cAAc;AAkCzC;;;;AAIA,OAAO,MAAMC,uBAAuB,GAAGA,CAACC,OAAA,GAA0C,EAAE,KAA+B;EACjH,MAAM;IACJC,QAAQ;IACRC,IAAI;IACJC,eAAe;IACfC,QAAQ;IACRC,oBAAoB;IACpB;IACAC;EAAmB,CACpB,GAAGN,OAAO;EACX,MAAMO,OAAO,GAAGT,UAAU,EAAE;EAE5B,IAAIS,OAAO,EAAE;IACXX,QAAQ,CAACW,OAAO,CAAC;;EAGnB,OAAOV,oBAAoB,CAAC;IAC1BW,KAAK,EAAE;MACLC,MAAM,EAAE,CAAC,CAACR,QAAQ;MAClBS,SAAS,EAAEC,oBAAoB,CAACT,IAAI,aAAJA,IAAI,cAAJA,IAAI,GAAI,UAAU,CAAC;MACnDC,eAAe;MACfC,QAAQ;MACRQ,UAAU,EAAEN;KACb;IACD,IAAID,oBAAoB,IAAI;MAC1BQ,SAAS,EAAE;QACTC,aAAa,EAAET;;KAElB;GACF,CAAC;AACJ,CAAC;AAED,SAASM,oBAAoBA,CAACT,IAA4C;EACxE,QAAQA,IAAI;IACV,KAAK,YAAY;MACf,OAAOP,KAAK,CAACoB,eAAe,CAACC,UAAU;IACzC,KAAK,MAAM;MACT,OAAOrB,KAAK,CAACoB,eAAe,CAACE,IAAI;IACnC,KAAK,MAAM;MACT,OAAOtB,KAAK,CAACoB,eAAe,CAACG,IAAI;IAEnC,KAAK,UAAU;IACf;MACE,OAAOvB,KAAK,CAACoB,eAAe,CAACI,QAAQ;EAAC;AAE5C"}
+{"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,IAAQ;MACxCC,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"}

package/lib/hooks/useFocusFinders.js

@@ -1,6 +1,6 @@
-import * as React from 'react';
-import { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';
-import { useTabster } from './useTabster';
+import * as React from "react";
+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
  */
@@ -10,14 +10,14 @@ export const useFocusFinders = () => {
     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) => tabster?.focusable.findAll({
     container,
     acceptCondition
-  })) || [], [tabster]);
-  const findFirstFocusable = React.useCallback(container => tabster === null || tabster === void 0 ? void 0 : tabster.focusable.findFirst({
+  }) || [], [tabster]);
+  const findFirstFocusable = React.useCallback(container => tabster?.focusable.findFirst({
     container
   }), [tabster]);
-  const findLastFocusable = React.useCallback(container => tabster === null || tabster === void 0 ? void 0 : tabster.focusable.findLast({
+  const findLastFocusable = React.useCallback(container => tabster?.focusable.findLast({
     container
   }), [tabster]);
   const findNextFocusable = React.useCallback((currentElement, options = {}) => {

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":["../../../../../../../../packages/react-components/react-tabster/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,OAAO,KAAKA,KAAK,MAAM,OAAO;AAE9B,SAASC,kBAAkB,IAAIC,SAAS,QAAQ,iCAAiC;AACjF,SAASC,UAAU,QAAQ,cAAc;AAEzC;;;AAGA,OAAO,MAAMC,eAAe,GAAGA,CAAA,KAAK;EAClC,MAAMC,OAAO,GAAGF,UAAU,EAAE;EAC5B,MAAM;IAAEG;EAAc,CAAE,GAAGJ,SAAS,EAAE;EAEtC;EACA,MAAMK,gBAAgB,GAAGP,KAAK,CAACQ,WAAW,CACxC,CAACC,SAAsB,EAAEC,eAA8C,KACrE,CAAAL,OAAO,aAAPA,OAAO,uBAAPA,OAAO,CAAEM,SAAS,CAACC,OAAO,CAAC;IAAEH,SAAS;IAAEC;EAAe,CAAE,CAAC,KAAI,EAAE,EAClE,CAACL,OAAO,CAAC,CACV;EAED,MAAMQ,kBAAkB,GAAGb,KAAK,CAACQ,WAAW,CACzCC,SAAsB,IAAKJ,OAAO,aAAPA,OAAO,uBAAPA,OAAO,CAAEM,SAAS,CAACG,SAAS,CAAC;IAAEL;EAAS,CAAE,CAAC,EACvE,CAACJ,OAAO,CAAC,CACV;EAED,MAAMU,iBAAiB,GAAGf,KAAK,CAACQ,WAAW,CACxCC,SAAsB,IAAKJ,OAAO,aAAPA,OAAO,uBAAPA,OAAO,CAAEM,SAAS,CAACK,QAAQ,CAAC;IAAEP;EAAS,CAAE,CAAC,EACtE,CAACJ,OAAO,CAAC,CACV;EAED,MAAMY,iBAAiB,GAAGjB,KAAK,CAACQ,WAAW,CACzC,CAACU,cAA2B,EAAEC,OAAA,GAAkE,EAAE,KAAI;IACpG,IAAI,CAACd,OAAO,IAAI,CAACC,cAAc,EAAE;MAC/B,OAAO,IAAI;;IAGb,MAAM;MAAEG,SAAS,GAAGH,cAAc,CAACc;IAAI,CAAE,GAAGD,OAAO;IAEnD,OAAOd,OAAO,CAACM,SAAS,CAACU,QAAQ,CAAC;MAAEH,cAAc;MAAET;IAAS,CAAE,CAAC;EAClE,CAAC,EACD,CAACJ,OAAO,EAAEC,cAAc,CAAC,CAC1B;EAED,MAAMgB,iBAAiB,GAAGtB,KAAK,CAACQ,WAAW,CACzC,CAACU,cAA2B,EAAEC,OAAA,GAAkE,EAAE,KAAI;IACpG,IAAI,CAACd,OAAO,IAAI,CAACC,cAAc,EAAE;MAC/B,OAAO,IAAI;;IAGb,MAAM;MAAEG,SAAS,GAAGH,cAAc,CAACc;IAAI,CAAE,GAAGD,OAAO;IAEnD,OAAOd,OAAO,CAACM,SAAS,CAACY,QAAQ,CAAC;MAAEL,cAAc;MAAET;IAAS,CAAE,CAAC;EAClE,CAAC,EACD,CAACJ,OAAO,EAAEC,cAAc,CAAC,CAC1B;EAED,OAAO;IACLC,gBAAgB;IAChBM,kBAAkB;IAClBE,iBAAiB;IACjBE,iBAAiB;IACjBK;GACD;AACH,CAAC"}
+{"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,KACvBL,OAAA,EAASM,SAAA,CAAUC,OAAO,CAAC;IAAEH,SAAA;IAAWC;EAAgB,MAAM,EAAE,EAClE,CAACL,OAAA,CAAQ;EAGX,MAAMQ,kBAAA,GAAqBb,KAAA,CAAMQ,WAAW,CACzCC,SAAA,IAA2BJ,OAAA,EAASM,SAAA,CAAUG,SAAS,CAAC;IAAEL;EAAU,IACrE,CAACJ,OAAA,CAAQ;EAGX,MAAMU,iBAAA,GAAoBf,KAAA,CAAMQ,WAAW,CACxCC,SAAA,IAA2BJ,OAAA,EAASM,SAAA,CAAUK,QAAQ,CAAC;IAAEP;EAAU,IACpE,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"}

package/lib/hooks/useFocusVisible.js

@@ -1,13 +1,12 @@
-import * as React from 'react';
-import { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';
-import { applyFocusVisiblePolyfill } from '../focus/focusVisiblePolyfill';
-export function useFocusVisible() {
-  const {
-    targetDocument
-  } = useFluent();
+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);
+  const targetDocument = options.targetDocument ?? contentValue.targetDocument;
   React.useEffect(() => {
-    if ((targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.defaultView) && scopeRef.current) {
+    if (targetDocument?.defaultView && scopeRef.current) {
       return applyFocusVisiblePolyfill(scopeRef.current, targetDocument.defaultView);
     }
   }, [scopeRef, targetDocument]);

package/lib/hooks/useFocusVisible.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","useFluent_unstable","useFluent","applyFocusVisiblePolyfill","useFocusVisible","targetDocument","scopeRef","useRef","useEffect","defaultView","current"],"sources":["../../../../../../../../packages/react-components/react-tabster/src/hooks/useFocusVisible.ts"],"sourcesContent":["import * as React from 'react';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport { applyFocusVisiblePolyfill } from '../focus/focusVisiblePolyfill';\n\nexport function useFocusVisible<TElement extends HTMLElement = HTMLElement>() {\n  const { targetDocument } = useFluent();\n  const scopeRef = React.useRef<TElement>(null);\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,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,kBAAkB,IAAIC,SAAS,QAAQ,iCAAiC;AACjF,SAASC,yBAAyB,QAAQ,+BAA+B;AAEzE,OAAM,SAAUC,eAAeA,CAAA;EAC7B,MAAM;IAAEC;EAAc,CAAE,GAAGH,SAAS,EAAE;EACtC,MAAMI,QAAQ,GAAGN,KAAK,CAACO,MAAM,CAAW,IAAI,CAAC;EAE7CP,KAAK,CAACQ,SAAS,CAAC,MAAK;IACnB,IAAI,CAAAH,cAAc,aAAdA,cAAc,uBAAdA,cAAc,CAAEI,WAAW,KAAIH,QAAQ,CAACI,OAAO,EAAE;MACnD,OAAOP,yBAAyB,CAACG,QAAQ,CAACI,OAAO,EAAEL,cAAc,CAACI,WAAW,CAAC;;EAElF,CAAC,EAAE,CAACH,QAAQ,EAAED,cAAc,CAAC,CAAC;EAE9B,OAAOC,QAAQ;AACjB"}
+{"version":3,"names":["React","useFluent_unstable","useFluent","applyFocusVisiblePolyfill","useFocusVisible","options","contentValue","scopeRef","useRef","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;EAE5C,MAAMC,cAAA,GAAiBJ,OAAA,CAAQI,cAAc,IAAIH,YAAA,CAAaG,cAAc;EAE5ET,KAAA,CAAMU,SAAS,CAAC,MAAM;IACpB,IAAID,cAAA,EAAgBE,WAAA,IAAeJ,QAAA,CAASK,OAAO,EAAE;MACnD,OAAOT,yBAAA,CAA0BI,QAAA,CAASK,OAAO,EAAEH,cAAA,CAAeE,WAAW;IAC/E;EACF,GAAG,CAACJ,QAAA,EAAUE,cAAA,CAAe;EAE7B,OAAOF,QAAA;AACT"}

package/lib/hooks/useFocusWithin.js

@@ -1,6 +1,6 @@
-import * as React from 'react';
-import { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';
-import { applyFocusWithinPolyfill } from '../focus/focusWithinPolyfill';
+import * as React from "react";
+import { useFluent_unstable as useFluent } from "@fluentui/react-shared-contexts";
+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
@@ -12,7 +12,7 @@ export function useFocusWithin() {
   } = useFluent();
   const elementRef = React.useRef(null);
   React.useEffect(() => {
-    if ((targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.defaultView) && elementRef.current) {
+    if (targetDocument?.defaultView && elementRef.current) {
       return applyFocusWithinPolyfill(elementRef.current, targetDocument.defaultView);
     }
   }, [elementRef, targetDocument]);

package/lib/hooks/useFocusWithin.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","useFluent_unstable","useFluent","applyFocusWithinPolyfill","useFocusWithin","targetDocument","elementRef","useRef","useEffect","defaultView","current"],"sources":["../../../../../../../../packages/react-components/react-tabster/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,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,kBAAkB,IAAIC,SAAS,QAAQ,iCAAiC;AACjF,SAASC,wBAAwB,QAAQ,8BAA8B;AAEvE;;;;;AAKA,OAAM,SAAUC,cAAcA,CAAA;EAC5B,MAAM;IAAEC;EAAc,CAAE,GAAGH,SAAS,EAAE;EACtC,MAAMI,UAAU,GAAGN,KAAK,CAACO,MAAM,CAAW,IAAI,CAAC;EAE/CP,KAAK,CAACQ,SAAS,CAAC,MAAK;IACnB,IAAI,CAAAH,cAAc,aAAdA,cAAc,uBAAdA,cAAc,CAAEI,WAAW,KAAIH,UAAU,CAACI,OAAO,EAAE;MACrD,OAAOP,wBAAwB,CAACG,UAAU,CAACI,OAAO,EAAEL,cAAc,CAACI,WAAW,CAAC;;EAEnF,CAAC,EAAE,CAACH,UAAU,EAAED,cAAc,CAAC,CAAC;EAEhC,OAAOC,UAAU;AACnB"}
+{"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,IAAIH,cAAA,EAAgBI,WAAA,IAAeH,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"}

package/lib/hooks/useFocusableGroup.js

@@ -1,6 +1,6 @@
-import { Types, getGroupper } from 'tabster';
-import { useTabsterAttributes } from './useTabsterAttributes';
-import { useTabster } from './useTabster';
+import { Types, getGroupper } from "tabster";
+import { useTabsterAttributes } from "./useTabsterAttributes";
+import { useTabster } from "./useTabster";
 /**
  * A hook that returns the necessary tabster attributes to support groupping.
  * @param options - Options to configure keyboard navigation
@@ -12,17 +12,17 @@ export const useFocusableGroup = options => {
   }
   return useTabsterAttributes({
     groupper: {
-      tabbability: getTabbability(options === null || options === void 0 ? void 0 : options.tabBehavior)
+      tabbability: getTabbability(options?.tabBehavior)
     }
   });
 };
 const getTabbability = tabBehavior => {
   switch (tabBehavior) {
-    case 'unlimited':
+    case "unlimited":
       return Types.GroupperTabbabilities.Unlimited;
-    case 'limited':
+    case "limited":
       return Types.GroupperTabbabilities.Limited;
-    case 'limited-trap-focus':
+    case "limited-trap-focus":
       return Types.GroupperTabbabilities.LimitedTrapFocus;
     default:
       return undefined;

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":["../../../../../../../../packages/react-components/react-tabster/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,SAAS;AAC5C,SAASC,oBAAoB,QAAQ,wBAAwB;AAC7D,SAASC,UAAU,QAAQ,cAAc;AASzC;;;;AAIA,OAAO,MAAMC,iBAAiB,GAAIC,OAAkC,IAA+B;EACjG,MAAMC,OAAO,GAAGH,UAAU,EAAE;EAE5B,IAAIG,OAAO,EAAE;IACXL,WAAW,CAACK,OAAO,CAAC;;EAGtB,OAAOJ,oBAAoB,CAAC;IAC1BK,QAAQ,EAAE;MACRC,WAAW,EAAEC,cAAc,CAACJ,OAAO,aAAPA,OAAO,uBAAPA,OAAO,CAAEK,WAAW;;GAEnD,CAAC;AACJ,CAAC;AAED,MAAMD,cAAc,GAClBC,WAAqD,IACZ;EACzC,QAAQA,WAAW;IACjB,KAAK,WAAW;MACd,OAAOV,KAAK,CAACW,qBAAqB,CAACC,SAAS;IAC9C,KAAK,SAAS;MACZ,OAAOZ,KAAK,CAACW,qBAAqB,CAACE,OAAO;IAC5C,KAAK,oBAAoB;MACvB,OAAOb,KAAK,CAACW,qBAAqB,CAACG,gBAAgB;IACrD;MACE,OAAOC,SAAS;EAAC;AAEvB,CAAC"}
+{"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,EAASK,WAAA;IACvC;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"}

package/lib/hooks/useKeyboardNavAttribute.js

@@ -1,7 +1,7 @@
-import { createKeyborg } from 'keyborg';
-import { useEffect, useMemo, useRef } from 'react';
-import { KEYBOARD_NAV_ATTRIBUTE } from '../focus/constants';
-import { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';
+import { createKeyborg } from "keyborg";
+import { useEffect, useMemo, useRef } from "react";
+import { KEYBOARD_NAV_ATTRIBUTE } from "../focus/constants";
+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
@@ -30,7 +30,7 @@ function setBooleanAttribute(elementRef, attribute, value) {
     return;
   }
   if (value) {
-    elementRef.current.setAttribute(attribute, '');
+    elementRef.current.setAttribute(attribute, "");
   } else {
     elementRef.current.removeAttribute(attribute);
   }

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":["../../../../../../../../packages/react-components/react-tabster/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,SAAS;AACvC,SAASC,SAAS,EAAEC,OAAO,EAAEC,MAAM,QAAQ,OAAO;AAClD,SAASC,sBAAsB,QAAQ,oBAAoB;AAC3D,SAASC,kBAAkB,IAAIC,SAAS,QAAQ,iCAAiC;AAIjF;;;;;AAKA,OAAM,SAAUC,uBAAuBA,CAAA;EACrC,MAAM;IAAEC;EAAc,CAAE,GAAGF,SAAS,EAAE;EACtC,MAAMG,OAAO,GAAGP,OAAO,CAAC,MAAMM,cAAc,IAAIR,aAAa,CAACQ,cAAc,CAACE,WAAY,CAAC,EAAE,CAACF,cAAc,CAAC,CAAC;EAC7G,MAAMG,GAAG,GAAGR,MAAM,CAAI,IAAI,CAAC;EAC3BF,SAAS,CAAC,MAAK;IACb,IAAIQ,OAAO,EAAE;MACXG,mBAAmB,CAACD,GAAG,EAAEP,sBAAsB,EAAEK,OAAO,CAACI,wBAAwB,EAAE,CAAC;MACpF,MAAMC,EAAE,GAAoBC,IAAI,IAAG;QACjCH,mBAAmB,CAACD,GAAG,EAAEP,sBAAsB,EAAEW,IAAI,CAAC;MACxD,CAAC;MACDN,OAAO,CAACO,SAAS,CAACF,EAAE,CAAC;MACrB,OAAO,MAAML,OAAO,CAACQ,WAAW,CAACH,EAAE,CAAC;;EAExC,CAAC,EAAE,CAACL,OAAO,CAAC,CAAC;EACb,OAAOE,GAAG;AACZ;AAEA,SAASC,mBAAmBA,CAACM,UAAkC,EAAEC,SAAiB,EAAEC,KAAc;EAChG,IAAI,CAACF,UAAU,CAACG,OAAO,EAAE;IACvB;;EAEF,IAAID,KAAK,EAAE;IACTF,UAAU,CAACG,OAAO,CAACC,YAAY,CAACH,SAAS,EAAE,EAAE,CAAC;GAC/C,MAAM;IACLD,UAAU,CAACG,OAAO,CAACE,eAAe,CAACJ,SAAS,CAAC;;AAEjD"}
+{"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"}

package/lib/hooks/useModalAttributes.js

@@ -1,7 +1,7 @@
-import { useId } from '@fluentui/react-utilities';
-import { useTabsterAttributes } from './useTabsterAttributes';
-import { getDeloser, getModalizer } from 'tabster';
-import { useTabster } from './useTabster';
+import { useId } from "@fluentui/react-utilities";
+import { useTabsterAttributes } from "./useTabsterAttributes";
+import { getDeloser, getModalizer } from "tabster";
+import { useTabster } from "./useTabster";
 /**
  * Applies modal dialog behaviour through DOM attributes
  * Modal element will focus trap and hide other content on the page
@@ -21,7 +21,7 @@ export const useModalAttributes = (options = {}) => {
     getModalizer(tabster);
     getDeloser(tabster);
   }
-  const id = useId('modal-', options.id);
+  const id = useId("modal-", options.id);
   const modalAttributes = useTabsterAttributes({
     deloser: {},
     modalizer: {

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":["../../../../../../../../packages/react-components/react-tabster/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,2BAA2B;AACjD,SAASC,oBAAoB,QAAQ,wBAAwB;AAC7D,SAASC,UAAU,EAAEC,YAAY,QAA+B,SAAS;AACzE,SAASC,UAAU,QAAQ,cAAc;AA8BzC;;;;;;;AAOA,OAAO,MAAMC,kBAAkB,GAAGA,CAChCC,OAAA,GAAqC,EAAE,KACuE;EAC9G,MAAM;IAAEC,SAAS;IAAEC,eAAe;IAAEC;EAAe,CAAE,GAAGH,OAAO;EAC/D,MAAMI,OAAO,GAAGN,UAAU,EAAE;EAC5B;EACA,IAAIM,OAAO,EAAE;IACXP,YAAY,CAACO,OAAO,CAAC;IACrBR,UAAU,CAACQ,OAAO,CAAC;;EAGrB,MAAMC,EAAE,GAAGX,KAAK,CAAC,QAAQ,EAAEM,OAAO,CAACK,EAAE,CAAC;EACtC,MAAMC,eAAe,GAAGX,oBAAoB,CAAC;IAC3CY,OAAO,EAAE,EAAE;IACXC,SAAS,EAAE;MACTH,EAAE;MACFI,kBAAkB,EAAE,CAACR,SAAS;MAC9BS,kBAAkB,EAAER,eAAe;MACnCS,SAAS,EAAER,eAAe,IAAIF;;GAEjC,CAAC;EAEF,MAAMW,iBAAiB,GAAGjB,oBAAoB,CAAC;IAC7CY,OAAO,EAAE;GACV,CAAC;EAEF,OAAO;IAAED,eAAe;IAAEM;EAAiB,CAAE;AAC/C,CAAC"}
+{"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"}

package/lib/hooks/useTabster.js

@@ -1,7 +1,7 @@
-import * as React from 'react';
-import { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';
-import { createTabster, disposeTabster } from 'tabster';
-import { useIsomorphicLayoutEffect } from '@fluentui/react-utilities';
+import * as React from "react";
+import { useFluent_unstable as useFluent } from "@fluentui/react-shared-contexts";
+import { createTabster, disposeTabster } from "tabster";
+import { useIsomorphicLayoutEffect } from "@fluentui/react-utilities";
 /**
  * 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
@@ -13,7 +13,7 @@ export const useTabster = () => {
   const {
     targetDocument
   } = useFluent();
-  const defaultView = (targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.defaultView) || undefined;
+  const defaultView = targetDocument?.defaultView || undefined;
   const tabster = React.useMemo(() => {
     if (!defaultView) {
       return null;

package/lib/hooks/useTabster.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","useFluent_unstable","useFluent","createTabster","disposeTabster","useIsomorphicLayoutEffect","useTabster","targetDocument","defaultView","undefined","tabster","useMemo","autoRoot","controlTab"],"sources":["../../../../../../../../packages/react-components/react-tabster/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 } from '@fluentui/react-utilities';\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  const tabster = React.useMemo(() => {\n    if (!defaultView) {\n      return null;\n    }\n\n    return createTabster(defaultView, { autoRoot: {}, controlTab: false });\n  }, [defaultView]);\n\n  useIsomorphicLayoutEffect(() => {\n    return () => {\n      if (tabster) {\n        disposeTabster(tabster);\n      }\n    };\n  }, [tabster]);\n\n  return tabster;\n};\n"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,kBAAkB,IAAIC,SAAS,QAAQ,iCAAiC;AACjF,SAASC,aAAa,EAAEC,cAAc,QAA+B,SAAS;AAC9E,SAASC,yBAAyB,QAAQ,2BAA2B;AAErE;;;;;;;AAOA,OAAO,MAAMC,UAAU,GAAGA,CAAA,KAAsC;EAC9D,MAAM;IAAEC;EAAc,CAAE,GAAGL,SAAS,EAAE;EAEtC,MAAMM,WAAW,GAAG,CAAAD,cAAc,aAAdA,cAAc,uBAAdA,cAAc,CAAEC,WAAW,KAAIC,SAAS;EAC5D,MAAMC,OAAO,GAAGV,KAAK,CAACW,OAAO,CAAC,MAAK;IACjC,IAAI,CAACH,WAAW,EAAE;MAChB,OAAO,IAAI;;IAGb,OAAOL,aAAa,CAACK,WAAW,EAAE;MAAEI,QAAQ,EAAE,EAAE;MAAEC,UAAU,EAAE;IAAK,CAAE,CAAC;EACxE,CAAC,EAAE,CAACL,WAAW,CAAC,CAAC;EAEjBH,yBAAyB,CAAC,MAAK;IAC7B,OAAO,MAAK;MACV,IAAIK,OAAO,EAAE;QACXN,cAAc,CAACM,OAAO,CAAC;;IAE3B,CAAC;EACH,CAAC,EAAE,CAACA,OAAO,CAAC,CAAC;EAEb,OAAOA,OAAO;AAChB,CAAC"}
+{"version":3,"names":["React","useFluent_unstable","useFluent","createTabster","disposeTabster","useIsomorphicLayoutEffect","useTabster","targetDocument","defaultView","undefined","tabster","useMemo","autoRoot","controlTab"],"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 } from '@fluentui/react-utilities';\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  const tabster = React.useMemo(() => {\n    if (!defaultView) {\n      return null;\n    }\n\n    return createTabster(defaultView, { autoRoot: {}, controlTab: false });\n  }, [defaultView]);\n\n  useIsomorphicLayoutEffect(() => {\n    return () => {\n      if (tabster) {\n        disposeTabster(tabster);\n      }\n    };\n  }, [tabster]);\n\n  return tabster;\n};\n"],"mappings":"AAAA,YAAYA,KAAA,MAAW;AACvB,SAASC,kBAAA,IAAsBC,SAAS,QAAQ;AAChD,SAASC,aAAa,EAAEC,cAAc,QAA+B;AACrE,SAASC,yBAAyB,QAAQ;AAE1C;;;;;;;AAOA,OAAO,MAAMC,UAAA,GAAaA,CAAA,KAAuC;EAC/D,MAAM;IAAEC;EAAc,CAAE,GAAGL,SAAA;EAE3B,MAAMM,WAAA,GAAcD,cAAA,EAAgBC,WAAA,IAAeC,SAAA;EACnD,MAAMC,OAAA,GAAUV,KAAA,CAAMW,OAAO,CAAC,MAAM;IAClC,IAAI,CAACH,WAAA,EAAa;MAChB,OAAO,IAAI;IACb;IAEA,OAAOL,aAAA,CAAcK,WAAA,EAAa;MAAEI,QAAA,EAAU,CAAC;MAAGC,UAAA,EAAY;IAAM;EACtE,GAAG,CAACL,WAAA,CAAY;EAEhBH,yBAAA,CAA0B,MAAM;IAC9B,OAAO,MAAM;MACX,IAAIK,OAAA,EAAS;QACXN,cAAA,CAAeM,OAAA;MACjB;IACF;EACF,GAAG,CAACA,OAAA,CAAQ;EAEZ,OAAOA,OAAA;AACT"}

package/lib/hooks/useTabsterAttributes.js

@@ -1,5 +1,5 @@
-import { getTabsterAttribute } from 'tabster';
-import { useTabster } from './useTabster';
+import { getTabsterAttribute } from "tabster";
+import { useTabster } from "./useTabster";
 /**
  * @internal
  * Hook that returns tabster attributes while ensuring tabster exists

package/lib/hooks/useTabsterAttributes.js.map

@@ -1 +1 @@
-{"version":3,"names":["getTabsterAttribute","useTabster","useTabsterAttributes","props"],"sources":["../../../../../../../../packages/react-components/react-tabster/src/hooks/useTabsterAttributes.ts"],"sourcesContent":["import { getTabsterAttribute, Types as TabsterTypes } from 'tabster';\nimport { useTabster } from './useTabster';\n\n/**\n * @internal\n * Hook that returns tabster attributes while ensuring tabster exists\n */\nexport const useTabsterAttributes = (props: TabsterTypes.TabsterAttributeProps): TabsterTypes.TabsterDOMAttribute => {\n  // A tabster instance is not necessary to generate tabster attributes\n  // but calling the hook will ensure that a tabster instance exists internally and avoids consumers doing the same\n  useTabster();\n\n  return getTabsterAttribute(props);\n};\n"],"mappings":"AAAA,SAASA,mBAAmB,QAA+B,SAAS;AACpE,SAASC,UAAU,QAAQ,cAAc;AAEzC;;;;AAIA,OAAO,MAAMC,oBAAoB,GAAIC,KAAyC,IAAsC;EAClH;EACA;EACAF,UAAU,EAAE;EAEZ,OAAOD,mBAAmB,CAACG,KAAK,CAAC;AACnC,CAAC"}
+{"version":3,"names":["getTabsterAttribute","useTabster","useTabsterAttributes","props"],"sources":["../../src/hooks/useTabsterAttributes.ts"],"sourcesContent":["import { getTabsterAttribute, Types as TabsterTypes } from 'tabster';\nimport { useTabster } from './useTabster';\n\n/**\n * @internal\n * Hook that returns tabster attributes while ensuring tabster exists\n */\nexport const useTabsterAttributes = (props: TabsterTypes.TabsterAttributeProps): TabsterTypes.TabsterDOMAttribute => {\n  // A tabster instance is not necessary to generate tabster attributes\n  // but calling the hook will ensure that a tabster instance exists internally and avoids consumers doing the same\n  useTabster();\n\n  return getTabsterAttribute(props);\n};\n"],"mappings":"AAAA,SAASA,mBAAmB,QAA+B;AAC3D,SAASC,UAAU,QAAQ;AAE3B;;;;AAIA,OAAO,MAAMC,oBAAA,GAAwBC,KAAA,IAAgF;EACnH;EACA;EACAF,UAAA;EAEA,OAAOD,mBAAA,CAAoBG,KAAA;AAC7B"}

package/lib/index.js

@@ -1,4 +1,4 @@
-export { useArrowNavigationGroup, useFocusableGroup, useFocusFinders, useFocusVisible, useFocusWithin, useKeyboardNavAttribute, useModalAttributes, useTabsterAttributes } from './hooks/index';
-export { createCustomFocusIndicatorStyle, createFocusOutlineStyle } from './focus/index';
-export { applyFocusVisiblePolyfill } from './focus/index';
+export { useArrowNavigationGroup, useFocusableGroup, useFocusFinders, useFocusVisible, useFocusWithin, useKeyboardNavAttribute, useModalAttributes, useTabsterAttributes } from "./hooks/index";
+export { createCustomFocusIndicatorStyle, createFocusOutlineStyle } from "./focus/index";
+export { applyFocusVisiblePolyfill } from "./focus/index";
 //# sourceMappingURL=index.js.map

package/lib/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["useArrowNavigationGroup","useFocusableGroup","useFocusFinders","useFocusVisible","useFocusWithin","useKeyboardNavAttribute","useModalAttributes","useTabsterAttributes","createCustomFocusIndicatorStyle","createFocusOutlineStyle","applyFocusVisiblePolyfill"],"sources":["../../../../../../../packages/react-components/react-tabster/src/index.ts"],"sourcesContent":["export {\n  useArrowNavigationGroup,\n  useFocusableGroup,\n  useFocusFinders,\n  useFocusVisible,\n  useFocusWithin,\n  useKeyboardNavAttribute,\n  useModalAttributes,\n  useTabsterAttributes,\n} from './hooks/index';\nexport type {\n  UseArrowNavigationGroupOptions,\n  UseFocusableGroupOptions,\n  UseModalAttributesOptions,\n} from './hooks/index';\n\nexport { createCustomFocusIndicatorStyle, createFocusOutlineStyle } from './focus/index';\n\nexport type {\n  CreateCustomFocusIndicatorStyleOptions,\n  CreateFocusOutlineStyleOptions,\n  FocusOutlineOffset,\n  FocusOutlineStyleOptions,\n} from './focus/index';\n\nexport { applyFocusVisiblePolyfill } from './focus/index';\n"],"mappings":"AAAA,SACEA,uBAAuB,EACvBC,iBAAiB,EACjBC,eAAe,EACfC,eAAe,EACfC,cAAc,EACdC,uBAAuB,EACvBC,kBAAkB,EAClBC,oBAAoB,QACf,eAAe;AAOtB,SAASC,+BAA+B,EAAEC,uBAAuB,QAAQ,eAAe;AASxF,SAASC,yBAAyB,QAAQ,eAAe"}
+{"version":3,"names":["useArrowNavigationGroup","useFocusableGroup","useFocusFinders","useFocusVisible","useFocusWithin","useKeyboardNavAttribute","useModalAttributes","useTabsterAttributes","createCustomFocusIndicatorStyle","createFocusOutlineStyle","applyFocusVisiblePolyfill"],"sources":["../src/index.ts"],"sourcesContent":["export {\n  useArrowNavigationGroup,\n  useFocusableGroup,\n  useFocusFinders,\n  useFocusVisible,\n  useFocusWithin,\n  useKeyboardNavAttribute,\n  useModalAttributes,\n  useTabsterAttributes,\n} from './hooks/index';\nexport type {\n  UseArrowNavigationGroupOptions,\n  UseFocusableGroupOptions,\n  UseModalAttributesOptions,\n} from './hooks/index';\n\nexport { createCustomFocusIndicatorStyle, createFocusOutlineStyle } from './focus/index';\n\nexport type {\n  CreateCustomFocusIndicatorStyleOptions,\n  CreateFocusOutlineStyleOptions,\n  FocusOutlineOffset,\n  FocusOutlineStyleOptions,\n} from './focus/index';\n\nexport { applyFocusVisiblePolyfill } from './focus/index';\n"],"mappings":"AAAA,SACEA,uBAAuB,EACvBC,iBAAiB,EACjBC,eAAe,EACfC,eAAe,EACfC,cAAc,EACdC,uBAAuB,EACvBC,kBAAkB,EAClBC,oBAAoB,QACf;AAOP,SAASC,+BAA+B,EAAEC,uBAAuB,QAAQ;AASzE,SAASC,yBAAyB,QAAQ"}

package/lib-commonjs/focus/constants.js

@@ -1,21 +1,27 @@
 "use strict";
-
 Object.defineProperty(exports, "__esModule", {
-  value: true
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    KEYBOARD_NAV_ATTRIBUTE: ()=>KEYBOARD_NAV_ATTRIBUTE,
+    KEYBOARD_NAV_SELECTOR: ()=>KEYBOARD_NAV_SELECTOR,
+    FOCUS_VISIBLE_ATTR: ()=>FOCUS_VISIBLE_ATTR,
+    FOCUS_WITHIN_ATTR: ()=>FOCUS_WITHIN_ATTR,
+    defaultOptions: ()=>defaultOptions
 });
-exports.defaultOptions = exports.FOCUS_WITHIN_ATTR = exports.FOCUS_VISIBLE_ATTR = exports.KEYBOARD_NAV_SELECTOR = exports.KEYBOARD_NAV_ATTRIBUTE = void 0;
-exports.KEYBOARD_NAV_ATTRIBUTE = 'data-keyboard-nav';
-exports.KEYBOARD_NAV_SELECTOR = `:global([${exports.KEYBOARD_NAV_ATTRIBUTE}])`;
-/**
- * @internal
- */
-exports.FOCUS_VISIBLE_ATTR = 'data-fui-focus-visible';
-/**
- * @internal
- */
-exports.FOCUS_WITHIN_ATTR = 'data-fui-focus-within';
-exports.defaultOptions = {
-  style: {},
-  selector: 'focus'
-};
+const KEYBOARD_NAV_ATTRIBUTE = "data-keyboard-nav";
+const KEYBOARD_NAV_SELECTOR = `:global([${KEYBOARD_NAV_ATTRIBUTE}])`;
+const FOCUS_VISIBLE_ATTR = "data-fui-focus-visible";
+const FOCUS_WITHIN_ATTR = "data-fui-focus-within";
+const defaultOptions = {
+    style: {},
+    selector: "focus"
+}; //# sourceMappingURL=constants.js.map
+
 //# sourceMappingURL=constants.js.map

package/lib-commonjs/focus/constants.js.map

@@ -1 +1 @@
-{"version":3,"names":["exports","KEYBOARD_NAV_ATTRIBUTE","KEYBOARD_NAV_SELECTOR","FOCUS_VISIBLE_ATTR","FOCUS_WITHIN_ATTR","defaultOptions","style","selector"],"sources":["../../../../../../../../packages/react-components/react-tabster/src/focus/constants.ts"],"sourcesContent":["export const KEYBOARD_NAV_ATTRIBUTE = 'data-keyboard-nav' as const;\nexport const KEYBOARD_NAV_SELECTOR = `:global([${KEYBOARD_NAV_ATTRIBUTE}])` as const;\n\n/**\n * @internal\n */\nexport const FOCUS_VISIBLE_ATTR = 'data-fui-focus-visible';\n\n/**\n * @internal\n */\nexport const FOCUS_WITHIN_ATTR = 'data-fui-focus-within';\nexport const defaultOptions = {\n  style: {},\n  selector: 'focus',\n} as const;\n"],"mappings":";;;;;;AAAaA,OAAA,CAAAC,sBAAsB,GAAG,mBAA4B;AACrDD,OAAA,CAAAE,qBAAqB,GAAG,YAAYF,OAAA,CAAAC,sBAAsB,IAAa;AAEpF;;;AAGaD,OAAA,CAAAG,kBAAkB,GAAG,wBAAwB;AAE1D;;;AAGaH,OAAA,CAAAI,iBAAiB,GAAG,uBAAuB;AAC3CJ,OAAA,CAAAK,cAAc,GAAG;EAC5BC,KAAK,EAAE,EAAE;EACTC,QAAQ,EAAE;CACF"}
+{"version":3,"sources":["../../lib/focus/constants.js"],"sourcesContent":["export const KEYBOARD_NAV_ATTRIBUTE = \"data-keyboard-nav\";\nexport const KEYBOARD_NAV_SELECTOR = `:global([${KEYBOARD_NAV_ATTRIBUTE}])`;\n/**\n * @internal\n */\nexport const FOCUS_VISIBLE_ATTR = \"data-fui-focus-visible\";\n/**\n * @internal\n */\nexport const FOCUS_WITHIN_ATTR = \"data-fui-focus-within\";\nexport const defaultOptions = {\n  style: {},\n  selector: \"focus\"\n};\n//# sourceMappingURL=constants.js.map"],"names":["KEYBOARD_NAV_ATTRIBUTE","KEYBOARD_NAV_SELECTOR","FOCUS_VISIBLE_ATTR","FOCUS_WITHIN_ATTR","defaultOptions","style","selector"],"mappings":";;;;;;;;;;;IAAaA,sBAAsB,MAAtBA;IACAC,qBAAqB,MAArBA;IAIAC,kBAAkB,MAAlBA;IAIAC,iBAAiB,MAAjBA;IACAC,cAAc,MAAdA;;AAVN,MAAMJ,yBAAyB;AAC/B,MAAMC,wBAAwB,CAAC,SAAS,EAAED,uBAAuB,EAAE,CAAC;AAIpE,MAAME,qBAAqB;AAI3B,MAAMC,oBAAoB;AAC1B,MAAMC,iBAAiB;IAC5BC,OAAO,CAAC;IACRC,UAAU;AACZ,GACA,qCAAqC"}

package/lib-commonjs/focus/createCustomFocusIndicatorStyle.js

@@ -1,35 +1,27 @@
 "use strict";
-
 Object.defineProperty(exports, "__esModule", {
-  value: true
+    value: true
+});
+Object.defineProperty(exports, "createCustomFocusIndicatorStyle", {
+    enumerable: true,
+    get: ()=>createCustomFocusIndicatorStyle
 });
-exports.createCustomFocusIndicatorStyle = void 0;
-const constants_1 = /*#__PURE__*/require("./constants");
-/**
- * Creates a style for @see makeStyles that includes the necessary selectors for focus.
- * Should be used only when @see createFocusOutlineStyle does not fit requirements
- *
- * @param style - styling applied on focus, defaults to @see getDefaultFocusOutlineStyles
- * @param options - Configure the style of the focus outline
- */
-function createCustomFocusIndicatorStyle(style, {
-  selector = constants_1.defaultOptions.selector,
-  enableOutline = false
-} = constants_1.defaultOptions) {
-  return {
-    ':focus': {
-      outlineStyle: enableOutline ? undefined : 'none'
-    },
-    ':focus-visible': {
-      outlineStyle: enableOutline ? undefined : 'none'
-    },
-    ...(selector === 'focus' && {
-      [`&[${constants_1.FOCUS_VISIBLE_ATTR}]`]: style
-    }),
-    ...(selector === 'focus-within' && {
-      [`&[${constants_1.FOCUS_WITHIN_ATTR}]:${selector}`]: style
-    })
-  };
-}
-exports.createCustomFocusIndicatorStyle = createCustomFocusIndicatorStyle;
+const _constants = require("./constants");
+function createCustomFocusIndicatorStyle(style, { selector =_constants.defaultOptions.selector , enableOutline =false  } = _constants.defaultOptions) {
+    return {
+        ":focus": {
+            outlineStyle: enableOutline ? undefined : "none"
+        },
+        ":focus-visible": {
+            outlineStyle: enableOutline ? undefined : "none"
+        },
+        ...selector === "focus" && {
+            [`&[${_constants.FOCUS_VISIBLE_ATTR}]`]: style
+        },
+        ...selector === "focus-within" && {
+            [`&[${_constants.FOCUS_WITHIN_ATTR}]:${selector}`]: style
+        }
+    };
+} //# sourceMappingURL=createCustomFocusIndicatorStyle.js.map
+
 //# sourceMappingURL=createCustomFocusIndicatorStyle.js.map

package/lib-commonjs/focus/createCustomFocusIndicatorStyle.js.map

@@ -1 +1 @@
-{"version":3,"names":["constants_1","require","createCustomFocusIndicatorStyle","style","selector","defaultOptions","enableOutline","outlineStyle","undefined","FOCUS_VISIBLE_ATTR","FOCUS_WITHIN_ATTR","exports"],"sources":["../../../../../../../../packages/react-components/react-tabster/src/focus/createCustomFocusIndicatorStyle.ts"],"sourcesContent":["import { defaultOptions, FOCUS_VISIBLE_ATTR, FOCUS_WITHIN_ATTR } from './constants';\nimport { makeResetStyles } from '@griffel/react';\nimport type { GriffelStyle } from '@griffel/react';\n\n// TODO: Use the type directly from @griffel/react\n// https://github.com/microsoft/griffel/pull/278\ntype GriffelResetStyle = Parameters<typeof makeResetStyles>[0];\n\nexport interface CreateCustomFocusIndicatorStyleOptions {\n  /**\n   * Control if the indicator appears when the corresponding element is focused,\n   * or any child is focused within the corresponding element.\n   * @default 'focus'\n   */\n  selector?: 'focus' | 'focus-within';\n  /**\n   * Enables the browser default outline style\n   * @default false\n   */\n  enableOutline?: boolean;\n}\n\n/**\n * Creates a style for @see makeStyles that includes the necessary selectors for focus.\n * Should be used only when @see createFocusOutlineStyle does not fit requirements\n *\n * @param style - styling applied on focus, defaults to @see getDefaultFocusOutlineStyles\n * @param options - Configure the style of the focus outline\n */\nexport function createCustomFocusIndicatorStyle<TStyle extends GriffelStyle | GriffelResetStyle>(\n  style: TStyle,\n  {\n    selector = defaultOptions.selector,\n    enableOutline = false,\n  }: CreateCustomFocusIndicatorStyleOptions = defaultOptions,\n): TStyle extends GriffelStyle ? GriffelStyle : GriffelResetStyle {\n  return {\n    ':focus': {\n      outlineStyle: enableOutline ? undefined : 'none',\n    },\n    ':focus-visible': {\n      outlineStyle: enableOutline ? undefined : 'none',\n    },\n\n    ...(selector === 'focus' && {\n      [`&[${FOCUS_VISIBLE_ATTR}]`]: style,\n    }),\n    ...(selector === 'focus-within' && {\n      [`&[${FOCUS_WITHIN_ATTR}]:${selector}`]: style,\n    }),\n  };\n}\n"],"mappings":";;;;;;AAAA,MAAAA,WAAA,gBAAAC,OAAA;AAsBA;;;;;;;AAOA,SAAgBC,+BAA+BA,CAC7CC,KAAa,EACb;EACEC,QAAQ,GAAGJ,WAAA,CAAAK,cAAc,CAACD,QAAQ;EAClCE,aAAa,GAAG;AAAK,IACqBN,WAAA,CAAAK,cAAc;EAE1D,OAAO;IACL,QAAQ,EAAE;MACRE,YAAY,EAAED,aAAa,GAAGE,SAAS,GAAG;KAC3C;IACD,gBAAgB,EAAE;MAChBD,YAAY,EAAED,aAAa,GAAGE,SAAS,GAAG;KAC3C;IAED,IAAIJ,QAAQ,KAAK,OAAO,IAAI;MAC1B,CAAC,KAAKJ,WAAA,CAAAS,kBAAkB,GAAG,GAAGN;KAC/B,CAAC;IACF,IAAIC,QAAQ,KAAK,cAAc,IAAI;MACjC,CAAC,KAAKJ,WAAA,CAAAU,iBAAiB,KAAKN,QAAQ,EAAE,GAAGD;KAC1C;GACF;AACH;AAtBAQ,OAAA,CAAAT,+BAAA,GAAAA,+BAAA"}
+{"version":3,"sources":["../../lib/focus/createCustomFocusIndicatorStyle.js"],"sourcesContent":["import { defaultOptions, FOCUS_VISIBLE_ATTR, FOCUS_WITHIN_ATTR } from \"./constants\";\n/**\n * Creates a style for @see makeStyles that includes the necessary selectors for focus.\n * Should be used only when @see createFocusOutlineStyle does not fit requirements\n *\n * @param style - styling applied on focus, defaults to @see getDefaultFocusOutlineStyles\n * @param options - Configure the style of the focus outline\n */\nexport function createCustomFocusIndicatorStyle(style, {\n  selector = defaultOptions.selector,\n  enableOutline = false\n} = defaultOptions) {\n  return {\n    \":focus\": {\n      outlineStyle: enableOutline ? undefined : \"none\"\n    },\n    \":focus-visible\": {\n      outlineStyle: enableOutline ? undefined : \"none\"\n    },\n    ...(selector === \"focus\" && {\n      [`&[${FOCUS_VISIBLE_ATTR}]`]: style\n    }),\n    ...(selector === \"focus-within\" && {\n      [`&[${FOCUS_WITHIN_ATTR}]:${selector}`]: style\n    })\n  };\n}\n//# sourceMappingURL=createCustomFocusIndicatorStyle.js.map"],"names":["createCustomFocusIndicatorStyle","style","selector","defaultOptions","enableOutline","outlineStyle","undefined","FOCUS_VISIBLE_ATTR","FOCUS_WITHIN_ATTR"],"mappings":";;;;+BAQgBA;;aAAAA;;2BARsD;AAQ/D,SAASA,gCAAgCC,KAAK,EAAE,EACrDC,UAAWC,yBAAc,CAACD,QAAQ,CAAA,EAClCE,eAAgB,KAAK,CAAA,EACtB,GAAGD,yBAAc,EAAE;IAClB,OAAO;QACL,UAAU;YACRE,cAAcD,gBAAgBE,YAAY,MAAM;QAClD;QACA,kBAAkB;YAChBD,cAAcD,gBAAgBE,YAAY,MAAM;QAClD;QACA,GAAIJ,aAAa,WAAW;YAC1B,CAAC,CAAC,EAAE,EAAEK,6BAAkB,CAAC,CAAC,CAAC,CAAC,EAAEN;QAChC,CAAC;QACD,GAAIC,aAAa,kBAAkB;YACjC,CAAC,CAAC,EAAE,EAAEM,4BAAiB,CAAC,EAAE,EAAEN,SAAS,CAAC,CAAC,EAAED;QAC3C,CAAC;IACH;AACF,EACA,2DAA2D"}