@fluentui/react-tabster 9.5.7 → 9.6.1

package/.swcrc

@@ -0,0 +1,30 @@
+{
+  "$schema": "https://json.schemastore.org/swcrc",
+  "exclude": [
+    "/testing",
+    "/**/*.cy.ts",
+    "/**/*.cy.tsx",
+    "/**/*.spec.ts",
+    "/**/*.spec.tsx",
+    "/**/*.test.ts",
+    "/**/*.test.tsx"
+  ],
+  "jsc": {
+    "parser": {
+      "syntax": "typescript",
+      "tsx": true,
+      "decorators": false,
+      "dynamicImport": false
+    },
+    "externalHelpers": true,
+    "transform": {
+      "react": {
+        "runtime": "classic",
+        "useSpread": true
+      }
+    },
+    "target": "es2019"
+  },
+  "minify": false,
+  "sourceMaps": true
+}

package/CHANGELOG.json

@@ -2,7 +2,67 @@
   "name": "@fluentui/react-tabster",
   "entries": [
     {
-      "date": "Wed, 15 Mar 2023 10:17:03 GMT",
+      "date": "Tue, 21 Mar 2023 21:18:21 GMT",
+      "tag": "@fluentui/react-tabster_v9.6.1",
+      "version": "9.6.1",
+      "comments": {
+        "patch": [
+          {
+            "author": "tristan.watanabe@gmail.com",
+            "package": "@fluentui/react-tabster",
+            "commit": "2fac1a139149bd13b76b1306207bc988dca9c72c",
+            "comment": "chore: migrate to swc transpilation approach."
+          },
+          {
+            "author": "tristan.watanabe@gmail.com",
+            "package": "@fluentui/react-tabster",
+            "commit": "ead1c6d4c2ac3f3596b62b8cbc07b0a03041f11f",
+            "comment": "fix: add node field to package.json exports map."
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-tabster",
+            "comment": "Bump @fluentui/react-shared-contexts to v9.3.2",
+            "commit": "b7a26f6263c80e3253c6b8338c33b73bae33e2b5"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-tabster",
+            "comment": "Bump @fluentui/react-theme to v9.1.7",
+            "commit": "b7a26f6263c80e3253c6b8338c33b73bae33e2b5"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-tabster",
+            "comment": "Bump @fluentui/react-utilities to v9.7.2",
+            "commit": "b7a26f6263c80e3253c6b8338c33b73bae33e2b5"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Thu, 16 Mar 2023 14:36:58 GMT",
+      "tag": "@fluentui/react-tabster_v9.6.0",
+      "version": "9.6.0",
+      "comments": {
+        "minor": [
+          {
+            "author": "olfedias@microsoft.com",
+            "package": "@fluentui/react-tabster",
+            "commit": "fe1014bbcd770a7b38a3a9a09595e93297c2da26",
+            "comment": "feat: add options to useFocusVisible() hook"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-tabster",
+            "comment": "Bump @fluentui/react-utilities to v9.7.1",
+            "commit": "e7dcadf7cabae6bc6811ca04a630e7d850388f81"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Wed, 15 Mar 2023 10:19:52 GMT",
       "tag": "@fluentui/react-tabster_v9.5.7",
       "version": "9.5.7",
       "comments": {

package/CHANGELOG.md

@@ -1,12 +1,35 @@
 # Change Log - @fluentui/react-tabster
 
-This log was last generated on Wed, 15 Mar 2023 10:17:03 GMT and should not be manually modified.
+This log was last generated on Tue, 21 Mar 2023 21:18:21 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.6.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-tabster_v9.6.1)
+
+Tue, 21 Mar 2023 21:18:21 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tabster_v9.6.0..@fluentui/react-tabster_v9.6.1)
+
+### Patches
+
+- chore: migrate to swc transpilation approach. ([PR #27250](https://github.com/microsoft/fluentui/pull/27250) by tristan.watanabe@gmail.com)
+- fix: add node field to package.json exports map. ([PR #27154](https://github.com/microsoft/fluentui/pull/27154) by tristan.watanabe@gmail.com)
+- Bump @fluentui/react-shared-contexts to v9.3.2 ([PR #27271](https://github.com/microsoft/fluentui/pull/27271) by beachball)
+- Bump @fluentui/react-theme to v9.1.7 ([PR #27271](https://github.com/microsoft/fluentui/pull/27271) by beachball)
+- Bump @fluentui/react-utilities to v9.7.2 ([PR #27271](https://github.com/microsoft/fluentui/pull/27271) by beachball)
+
+## [9.6.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-tabster_v9.6.0)
+
+Thu, 16 Mar 2023 14:36:58 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tabster_v9.5.7..@fluentui/react-tabster_v9.6.0)
+
+### Minor changes
+
+- feat: add options to useFocusVisible() hook ([PR #27198](https://github.com/microsoft/fluentui/pull/27198) by olfedias@microsoft.com)
+- Bump @fluentui/react-utilities to v9.7.1 ([PR #27229](https://github.com/microsoft/fluentui/pull/27229) by beachball)
+
 ## [9.5.7](https://github.com/microsoft/fluentui/tree/@fluentui/react-tabster_v9.5.7)
 
-Wed, 15 Mar 2023 10:17:03 GMT 
+Wed, 15 Mar 2023 10:19:52 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tabster_v9.5.6..@fluentui/react-tabster_v9.5.7)
 
 ### Patches

package/dist/index.d.ts

@@ -7,9 +7,9 @@ import { Types } from 'tabster';
 /**
  * @internal
  * @param scope - Applies the ponyfill to all DOM children
- * @param win - window
+ * @param targetWindow - window
  */
-export declare function applyFocusVisiblePolyfill(scope: HTMLElement, win: Window): () => void;
+export declare function applyFocusVisiblePolyfill(scope: HTMLElement, targetWindow: Window): () => void;
 
 /**
  * Creates a style for @see makeStyles that includes the necessary selectors for focus.
@@ -123,7 +123,11 @@ export declare const useFocusFinders: () => {
     findPrevFocusable: (currentElement: HTMLElement, options?: Pick<Partial<Types.FindNextProps>, 'container'>) => HTMLElement | null | undefined;
 };
 
-export declare function useFocusVisible<TElement extends HTMLElement = HTMLElement>(): React_2.RefObject<TElement>;
+export declare function useFocusVisible<TElement extends HTMLElement = HTMLElement>(options?: UseFocusVisibleOptions): React_2.RefObject<TElement>;
+
+declare type UseFocusVisibleOptions = {
+    targetDocument?: HTMLDocument;
+};
 
 /**
  * A ponyfill that allows `:focus-within` to support visibility based on keyboard/mouse navigation

package/lib/focus/constants.js.map

@@ -1 +1 @@
-{"version":3,"names":["KEYBOARD_NAV_ATTRIBUTE","KEYBOARD_NAV_SELECTOR","FOCUS_VISIBLE_ATTR","FOCUS_WITHIN_ATTR","defaultOptions","style","selector"],"sources":["../src/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":"AAAA,OAAO,MAAMA,sBAAsB,GAAG,mBAA4B;AAClE,OAAO,MAAMC,qBAAqB,GAAG,YAAYD,sBAAsB,IAAa;AAEpF;;;AAGA,OAAO,MAAME,kBAAkB,GAAG,wBAAwB;AAE1D;;;AAGA,OAAO,MAAMC,iBAAiB,GAAG,uBAAuB;AACxD,OAAO,MAAMC,cAAc,GAAG;EAC5BC,KAAK,EAAE,EAAE;EACTC,QAAQ,EAAE;CACF"}
+{"version":3,"names":["KEYBOARD_NAV_ATTRIBUTE","KEYBOARD_NAV_SELECTOR","FOCUS_VISIBLE_ATTR","FOCUS_WITHIN_ATTR","defaultOptions","style","selector"],"sources":["../../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":"AAAA,OAAO,MAAMA,sBAAA,GAAyB;AACtC,OAAO,MAAMC,qBAAA,GAAyB,YAAWD,sBAAuB,IAAG;AAE3E;;;AAGA,OAAO,MAAME,kBAAA,GAAqB;AAElC;;;AAGA,OAAO,MAAMC,iBAAA,GAAoB;AACjC,OAAO,MAAMC,cAAA,GAAiB;EAC5BC,KAAA,EAAO,CAAC;EACRC,QAAA,EAAU;AACZ"}

package/lib/focus/createCustomFocusIndicatorStyle.js.map

@@ -1 +1 @@
-{"version":3,"names":["defaultOptions","FOCUS_VISIBLE_ATTR","FOCUS_WITHIN_ATTR","createCustomFocusIndicatorStyle","style","selector","enableOutline","outlineStyle","undefined"],"sources":["../src/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,SAASA,cAAc,EAAEC,kBAAkB,EAAEC,iBAAiB,QAAQ,aAAa;AAsBnF;;;;;;;AAOA,OAAM,SAAUC,+BAA+BA,CAC7CC,KAAa,EACb;EACEC,QAAQ,GAAGL,cAAc,CAACK,QAAQ;EAClCC,aAAa,GAAG;AAAK,IACqBN,cAAc;EAE1D,OAAO;IACL,QAAQ,EAAE;MACRO,YAAY,EAAED,aAAa,GAAGE,SAAS,GAAG;KAC3C;IACD,gBAAgB,EAAE;MAChBD,YAAY,EAAED,aAAa,GAAGE,SAAS,GAAG;KAC3C;IAED,IAAIH,QAAQ,KAAK,OAAO,IAAI;MAC1B,CAAC,KAAKJ,kBAAkB,GAAG,GAAGG;KAC/B,CAAC;IACF,IAAIC,QAAQ,KAAK,cAAc,IAAI;MACjC,CAAC,KAAKH,iBAAiB,KAAKG,QAAQ,EAAE,GAAGD;KAC1C;GACF;AACH"}
+{"version":3,"names":["defaultOptions","FOCUS_VISIBLE_ATTR","FOCUS_WITHIN_ATTR","createCustomFocusIndicatorStyle","style","selector","enableOutline","outlineStyle","undefined"],"sources":["../../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,SAASA,cAAc,EAAEC,kBAAkB,EAAEC,iBAAiB,QAAQ;AAsBtE;;;;;;;AAOA,OAAO,SAASC,gCACdC,KAAa,EACb;EACEC,QAAA,GAAWL,cAAA,CAAeK,QAAQ;EAClCC,aAAA,GAAgB;AAAK,CACkB,GAAGN,cAAc,EACM;EAChE,OAAO;IACL,UAAU;MACRO,YAAA,EAAcD,aAAA,GAAgBE,SAAA,GAAY;IAC5C;IACA,kBAAkB;MAChBD,YAAA,EAAcD,aAAA,GAAgBE,SAAA,GAAY;IAC5C;IAEA,IAAIH,QAAA,KAAa,WAAW;MAC1B,CAAE,KAAIJ,kBAAmB,GAAE,GAAGG;IAChC,CAAC;IACD,IAAIC,QAAA,KAAa,kBAAkB;MACjC,CAAE,KAAIH,iBAAkB,KAAIG,QAAS,EAAC,GAAGD;IAC3C,CAAC;EACH;AACF"}

package/lib/focus/createFocusOutlineStyle.js

@@ -10,17 +10,16 @@ import { defaultOptions } from './constants';
  * @returns focus outline styles object
  */
 const getFocusOutlineStyles = options => {
-  var _a, _b, _c, _d;
   const {
     outlineRadius,
     outlineColor,
     outlineOffset,
     outlineWidth
   } = options;
-  const outlineOffsetTop = ((_a = outlineOffset) === null || _a === void 0 ? void 0 : _a.top) || outlineOffset;
-  const outlineOffsetBottom = ((_b = outlineOffset) === null || _b === void 0 ? void 0 : _b.bottom) || outlineOffset;
-  const outlineOffsetLeft = ((_c = outlineOffset) === null || _c === void 0 ? void 0 : _c.left) || outlineOffset;
-  const outlineOffsetRight = ((_d = outlineOffset) === null || _d === void 0 ? void 0 : _d.right) || outlineOffset;
+  const outlineOffsetTop = (outlineOffset === null || outlineOffset === void 0 ? void 0 : outlineOffset.top) || outlineOffset;
+  const outlineOffsetBottom = (outlineOffset === null || outlineOffset === void 0 ? void 0 : outlineOffset.bottom) || outlineOffset;
+  const outlineOffsetLeft = (outlineOffset === null || outlineOffset === void 0 ? void 0 : outlineOffset.left) || outlineOffset;
+  const outlineOffsetRight = (outlineOffset === null || outlineOffset === void 0 ? void 0 : outlineOffset.right) || outlineOffset;
   return {
     ...shorthands.borderColor('transparent'),
     '::after': {

package/lib/focus/createFocusOutlineStyle.js.map

@@ -1 +1 @@
-{"version":3,"names":["tokens","shorthands","createCustomFocusIndicatorStyle","defaultOptions","getFocusOutlineStyles","options","outlineRadius","outlineColor","outlineOffset","outlineWidth","outlineOffsetTop","_a","top","outlineOffsetBottom","_b","bottom","outlineOffsetLeft","_c","left","outlineOffsetRight","_d","right","borderColor","content","position","pointerEvents","zIndex","borderStyle","borderWidth","borderRadius","createFocusOutlineStyle","selector","style","colorStrokeFocus2","borderRadiusMedium"],"sources":["../src/packages/react-components/react-tabster/src/focus/createFocusOutlineStyle.ts"],"sourcesContent":["import { tokens } from '@fluentui/react-theme';\nimport { shorthands } from '@griffel/react';\nimport type { GriffelStyle } from '@griffel/react';\nimport {\n  createCustomFocusIndicatorStyle,\n  CreateCustomFocusIndicatorStyleOptions,\n} from './createCustomFocusIndicatorStyle';\nimport { defaultOptions } from './constants';\n\nexport type FocusOutlineOffset = Record<'top' | 'bottom' | 'left' | 'right', string>;\nexport type FocusOutlineStyleOptions = {\n  /**\n   * Only property not supported by the native CSS `outline`, if this is no longer needed\n   * we can just go native instead\n   */\n  outlineRadius: string;\n  outlineColor: string;\n  outlineWidth: string;\n  outlineOffset?: string | FocusOutlineOffset;\n};\nexport interface CreateFocusOutlineStyleOptions extends CreateCustomFocusIndicatorStyleOptions {\n  style?: Partial<FocusOutlineStyleOptions>;\n}\n\n/**\n * NOTE: the element with the focus outline needs to have `position: relative` so that the\n * pseudo element can be properly positioned.\n *\n * @param options - Configures the style of the focus outline\n * @returns focus outline styles object\n */\nconst getFocusOutlineStyles = (options: FocusOutlineStyleOptions): GriffelStyle => {\n  const { outlineRadius, outlineColor, outlineOffset, outlineWidth } = options;\n\n  const outlineOffsetTop = (outlineOffset as FocusOutlineOffset)?.top || outlineOffset;\n  const outlineOffsetBottom = (outlineOffset as FocusOutlineOffset)?.bottom || outlineOffset;\n  const outlineOffsetLeft = (outlineOffset as FocusOutlineOffset)?.left || outlineOffset;\n  const outlineOffsetRight = (outlineOffset as FocusOutlineOffset)?.right || outlineOffset;\n\n  return {\n    ...shorthands.borderColor('transparent'),\n    '::after': {\n      content: '\"\"',\n      position: 'absolute',\n      pointerEvents: 'none',\n      zIndex: 1,\n\n      ...shorthands.borderStyle('solid'),\n      ...shorthands.borderWidth(outlineWidth),\n      ...shorthands.borderRadius(outlineRadius),\n      ...shorthands.borderColor(outlineColor),\n\n      top: !outlineOffset ? `-${outlineWidth}` : `calc(0px - ${outlineWidth} - ${outlineOffsetTop})`,\n      bottom: !outlineOffset ? `-${outlineWidth}` : `calc(0px - ${outlineWidth} - ${outlineOffsetBottom})`,\n      left: !outlineOffset ? `-${outlineWidth}` : `calc(0px - ${outlineWidth} - ${outlineOffsetLeft})`,\n      right: !outlineOffset ? `-${outlineWidth}` : `calc(0px - ${outlineWidth} - ${outlineOffsetRight})`,\n    },\n  };\n};\n\n/**\n * NOTE: The element with the focus outline needs to have `position: relative` so that the\n * pseudo element can be properly positioned.\n *\n * @param options - Configure the style of the focus outline\n * @returns focus outline styles object for @see makeStyles\n */\nexport const createFocusOutlineStyle = ({\n  selector = defaultOptions.selector,\n  style = defaultOptions.style,\n}: CreateFocusOutlineStyleOptions = defaultOptions): GriffelStyle =>\n  createCustomFocusIndicatorStyle(\n    getFocusOutlineStyles({\n      outlineColor: tokens.colorStrokeFocus2,\n      outlineRadius: tokens.borderRadiusMedium,\n      // FIXME: tokens.strokeWidthThick causes some weird bugs\n      outlineWidth: '2px',\n      ...style,\n    }),\n    { selector },\n  );\n"],"mappings":"AAAA,SAASA,MAAM,QAAQ,uBAAuB;AAC9C,SAASC,UAAU,QAAQ,gBAAgB;AAE3C,SACEC,+BAA+B,QAE1B,mCAAmC;AAC1C,SAASC,cAAc,QAAQ,aAAa;AAiB5C;;;;;;;AAOA,MAAMC,qBAAqB,GAAIC,OAAiC,IAAkB;;EAChF,MAAM;IAAEC,aAAa;IAAEC,YAAY;IAAEC,aAAa;IAAEC;EAAY,CAAE,GAAGJ,OAAO;EAE5E,MAAMK,gBAAgB,GAAG,EAAAC,EAAA,GAACH,aAAoC,cAAAG,EAAA,uBAAAA,EAAA,CAAEC,GAAG,KAAIJ,aAAa;EACpF,MAAMK,mBAAmB,GAAG,EAAAC,EAAA,GAACN,aAAoC,cAAAM,EAAA,uBAAAA,EAAA,CAAEC,MAAM,KAAIP,aAAa;EAC1F,MAAMQ,iBAAiB,GAAG,EAAAC,EAAA,GAACT,aAAoC,cAAAS,EAAA,uBAAAA,EAAA,CAAEC,IAAI,KAAIV,aAAa;EACtF,MAAMW,kBAAkB,GAAG,EAAAC,EAAA,GAACZ,aAAoC,cAAAY,EAAA,uBAAAA,EAAA,CAAEC,KAAK,KAAIb,aAAa;EAExF,OAAO;IACL,GAAGP,UAAU,CAACqB,WAAW,CAAC,aAAa,CAAC;IACxC,SAAS,EAAE;MACTC,OAAO,EAAE,IAAI;MACbC,QAAQ,EAAE,UAAU;MACpBC,aAAa,EAAE,MAAM;MACrBC,MAAM,EAAE,CAAC;MAET,GAAGzB,UAAU,CAAC0B,WAAW,CAAC,OAAO,CAAC;MAClC,GAAG1B,UAAU,CAAC2B,WAAW,CAACnB,YAAY,CAAC;MACvC,GAAGR,UAAU,CAAC4B,YAAY,CAACvB,aAAa,CAAC;MACzC,GAAGL,UAAU,CAACqB,WAAW,CAACf,YAAY,CAAC;MAEvCK,GAAG,EAAE,CAACJ,aAAa,GAAG,IAAIC,YAAY,EAAE,GAAG,cAAcA,YAAY,MAAMC,gBAAgB,GAAG;MAC9FK,MAAM,EAAE,CAACP,aAAa,GAAG,IAAIC,YAAY,EAAE,GAAG,cAAcA,YAAY,MAAMI,mBAAmB,GAAG;MACpGK,IAAI,EAAE,CAACV,aAAa,GAAG,IAAIC,YAAY,EAAE,GAAG,cAAcA,YAAY,MAAMO,iBAAiB,GAAG;MAChGK,KAAK,EAAE,CAACb,aAAa,GAAG,IAAIC,YAAY,EAAE,GAAG,cAAcA,YAAY,MAAMU,kBAAkB;;GAElG;AACH,CAAC;AAED;;;;;;;AAOA,OAAO,MAAMW,uBAAuB,GAAGA,CAAC;EACtCC,QAAQ,GAAG5B,cAAc,CAAC4B,QAAQ;EAClCC,KAAK,GAAG7B,cAAc,CAAC6B;AAAK,IACM7B,cAAc,KAChDD,+BAA+B,CAC7BE,qBAAqB,CAAC;EACpBG,YAAY,EAAEP,MAAM,CAACiC,iBAAiB;EACtC3B,aAAa,EAAEN,MAAM,CAACkC,kBAAkB;EACxC;EACAzB,YAAY,EAAE,KAAK;EACnB,GAAGuB;CACJ,CAAC,EACF;EAAED;AAAQ,CAAE,CACb"}
+{"version":3,"names":["tokens","shorthands","createCustomFocusIndicatorStyle","defaultOptions","getFocusOutlineStyles","options","outlineRadius","outlineColor","outlineOffset","outlineWidth","outlineOffsetTop","top","outlineOffsetBottom","bottom","outlineOffsetLeft","left","outlineOffsetRight","right","borderColor","content","position","pointerEvents","zIndex","borderStyle","borderWidth","borderRadius","createFocusOutlineStyle","selector","style","colorStrokeFocus2","borderRadiusMedium"],"sources":["../../src/focus/createFocusOutlineStyle.ts"],"sourcesContent":["import { tokens } from '@fluentui/react-theme';\nimport { shorthands } from '@griffel/react';\nimport type { GriffelStyle } from '@griffel/react';\nimport {\n  createCustomFocusIndicatorStyle,\n  CreateCustomFocusIndicatorStyleOptions,\n} from './createCustomFocusIndicatorStyle';\nimport { defaultOptions } from './constants';\n\nexport type FocusOutlineOffset = Record<'top' | 'bottom' | 'left' | 'right', string>;\nexport type FocusOutlineStyleOptions = {\n  /**\n   * Only property not supported by the native CSS `outline`, if this is no longer needed\n   * we can just go native instead\n   */\n  outlineRadius: string;\n  outlineColor: string;\n  outlineWidth: string;\n  outlineOffset?: string | FocusOutlineOffset;\n};\nexport interface CreateFocusOutlineStyleOptions extends CreateCustomFocusIndicatorStyleOptions {\n  style?: Partial<FocusOutlineStyleOptions>;\n}\n\n/**\n * NOTE: the element with the focus outline needs to have `position: relative` so that the\n * pseudo element can be properly positioned.\n *\n * @param options - Configures the style of the focus outline\n * @returns focus outline styles object\n */\nconst getFocusOutlineStyles = (options: FocusOutlineStyleOptions): GriffelStyle => {\n  const { outlineRadius, outlineColor, outlineOffset, outlineWidth } = options;\n\n  const outlineOffsetTop = (outlineOffset as FocusOutlineOffset)?.top || outlineOffset;\n  const outlineOffsetBottom = (outlineOffset as FocusOutlineOffset)?.bottom || outlineOffset;\n  const outlineOffsetLeft = (outlineOffset as FocusOutlineOffset)?.left || outlineOffset;\n  const outlineOffsetRight = (outlineOffset as FocusOutlineOffset)?.right || outlineOffset;\n\n  return {\n    ...shorthands.borderColor('transparent'),\n    '::after': {\n      content: '\"\"',\n      position: 'absolute',\n      pointerEvents: 'none',\n      zIndex: 1,\n\n      ...shorthands.borderStyle('solid'),\n      ...shorthands.borderWidth(outlineWidth),\n      ...shorthands.borderRadius(outlineRadius),\n      ...shorthands.borderColor(outlineColor),\n\n      top: !outlineOffset ? `-${outlineWidth}` : `calc(0px - ${outlineWidth} - ${outlineOffsetTop})`,\n      bottom: !outlineOffset ? `-${outlineWidth}` : `calc(0px - ${outlineWidth} - ${outlineOffsetBottom})`,\n      left: !outlineOffset ? `-${outlineWidth}` : `calc(0px - ${outlineWidth} - ${outlineOffsetLeft})`,\n      right: !outlineOffset ? `-${outlineWidth}` : `calc(0px - ${outlineWidth} - ${outlineOffsetRight})`,\n    },\n  };\n};\n\n/**\n * NOTE: The element with the focus outline needs to have `position: relative` so that the\n * pseudo element can be properly positioned.\n *\n * @param options - Configure the style of the focus outline\n * @returns focus outline styles object for @see makeStyles\n */\nexport const createFocusOutlineStyle = ({\n  selector = defaultOptions.selector,\n  style = defaultOptions.style,\n}: CreateFocusOutlineStyleOptions = defaultOptions): GriffelStyle =>\n  createCustomFocusIndicatorStyle(\n    getFocusOutlineStyles({\n      outlineColor: tokens.colorStrokeFocus2,\n      outlineRadius: tokens.borderRadiusMedium,\n      // FIXME: tokens.strokeWidthThick causes some weird bugs\n      outlineWidth: '2px',\n      ...style,\n    }),\n    { selector },\n  );\n"],"mappings":"AAAA,SAASA,MAAM,QAAQ;AACvB,SAASC,UAAU,QAAQ;AAE3B,SACEC,+BAA+B,QAE1B;AACP,SAASC,cAAc,QAAQ;AAiB/B;;;;;;;AAOA,MAAMC,qBAAA,GAAyBC,OAAA,IAAoD;EACjF,MAAM;IAAEC,aAAA;IAAeC,YAAA;IAAcC,aAAA;IAAeC;EAAY,CAAE,GAAGJ,OAAA;EAErE,MAAMK,gBAAA,GAAmB,CAAAF,aAAC,aAAAA,aAAA,cAAD,SAAAA,aAAC,CAAsCG,GAAG,KAAIH,aAAA;EACvE,MAAMI,mBAAA,GAAsB,CAAAJ,aAAC,aAAAA,aAAA,cAAD,SAAAA,aAAC,CAAsCK,MAAM,KAAIL,aAAA;EAC7E,MAAMM,iBAAA,GAAoB,CAAAN,aAAC,aAAAA,aAAA,cAAD,SAAAA,aAAC,CAAsCO,IAAI,KAAIP,aAAA;EACzE,MAAMQ,kBAAA,GAAqB,CAAAR,aAAC,aAAAA,aAAA,cAAD,SAAAA,aAAC,CAAsCS,KAAK,KAAIT,aAAA;EAE3E,OAAO;IACL,GAAGP,UAAA,CAAWiB,WAAW,CAAC,cAAc;IACxC,WAAW;MACTC,OAAA,EAAS;MACTC,QAAA,EAAU;MACVC,aAAA,EAAe;MACfC,MAAA,EAAQ;MAER,GAAGrB,UAAA,CAAWsB,WAAW,CAAC,QAAQ;MAClC,GAAGtB,UAAA,CAAWuB,WAAW,CAACf,YAAA,CAAa;MACvC,GAAGR,UAAA,CAAWwB,YAAY,CAACnB,aAAA,CAAc;MACzC,GAAGL,UAAA,CAAWiB,WAAW,CAACX,YAAA,CAAa;MAEvCI,GAAA,EAAK,CAACH,aAAA,GAAiB,IAAGC,YAAa,EAAC,GAAI,cAAaA,YAAa,MAAKC,gBAAiB,GAAE;MAC9FG,MAAA,EAAQ,CAACL,aAAA,GAAiB,IAAGC,YAAa,EAAC,GAAI,cAAaA,YAAa,MAAKG,mBAAoB,GAAE;MACpGG,IAAA,EAAM,CAACP,aAAA,GAAiB,IAAGC,YAAa,EAAC,GAAI,cAAaA,YAAa,MAAKK,iBAAkB,GAAE;MAChGG,KAAA,EAAO,CAACT,aAAA,GAAiB,IAAGC,YAAa,EAAC,GAAI,cAAaA,YAAa,MAAKO,kBAAmB;IAClG;EACF;AACF;AAEA;;;;;;;AAOA,OAAO,MAAMU,uBAAA,GAA0BA,CAAC;EACtCC,QAAA,GAAWxB,cAAA,CAAewB,QAAQ;EAClCC,KAAA,GAAQzB,cAAA,CAAeyB;AAAK,CACG,GAAGzB,cAAc,KAChDD,+BAAA,CACEE,qBAAA,CAAsB;EACpBG,YAAA,EAAcP,MAAA,CAAO6B,iBAAiB;EACtCvB,aAAA,EAAeN,MAAA,CAAO8B,kBAAkB;EACxC;EACArB,YAAA,EAAc;EACd,GAAGmB;AACL,IACA;EAAED;AAAS"}

package/lib/focus/focusVisiblePolyfill.js

@@ -1,11 +1,12 @@
+import { isHTMLElement } from '@fluentui/react-utilities';
 import { KEYBORG_FOCUSIN, createKeyborg, disposeKeyborg } from 'keyborg';
 import { FOCUS_VISIBLE_ATTR } from './constants';
 /**
  * @internal
  * @param scope - Applies the ponyfill to all DOM children
- * @param win - window
+ * @param targetWindow - window
  */
-export function applyFocusVisiblePolyfill(scope, win) {
+export function applyFocusVisiblePolyfill(scope, targetWindow) {
   if (alreadyInScope(scope)) {
     // Focus visible polyfill already applied at this scope
     return () => undefined;
@@ -13,7 +14,7 @@ export function applyFocusVisiblePolyfill(scope, win) {
   const state = {
     current: undefined
   };
-  const keyborg = createKeyborg(win);
+  const keyborg = createKeyborg(targetWindow);
   // When navigation mode changes remove the focus-visible selector
   keyborg.subscribe(isNavigatingWithKeyboard => {
     if (!isNavigatingWithKeyboard && state.current) {
@@ -60,12 +61,6 @@ function applyFocusVisibleClass(el) {
 function removeFocusVisibleClass(el) {
   el.removeAttribute(FOCUS_VISIBLE_ATTR);
 }
-function isHTMLElement(target) {
-  if (!target) {
-    return false;
-  }
-  return Boolean(target && typeof target === 'object' && 'classList' in target && 'contains' in target);
-}
 function alreadyInScope(el) {
   if (!el) {
     return false;

package/lib/focus/focusVisiblePolyfill.js.map

@@ -1 +1 @@
-{"version":3,"names":["KEYBORG_FOCUSIN","createKeyborg","disposeKeyborg","FOCUS_VISIBLE_ATTR","applyFocusVisiblePolyfill","scope","win","alreadyInScope","undefined","state","current","keyborg","subscribe","isNavigatingWithKeyboard","removeFocusVisibleClass","keyborgListener","e","isHTMLElement","target","applyFocusVisibleClass","blurListener","relatedTarget","contains","addEventListener","focusVisible","removeEventListener","el","setAttribute","removeAttribute","Boolean","parentElement"],"sources":["../src/packages/react-components/react-tabster/src/focus/focusVisiblePolyfill.ts"],"sourcesContent":["import { KEYBORG_FOCUSIN, KeyborgFocusInEvent, createKeyborg, disposeKeyborg } from 'keyborg';\nimport { FOCUS_VISIBLE_ATTR } from './constants';\n\n/**\n * Because `addEventListener` type override falls back to 2nd definition (evt name is unknown string literal)\n * evt is being typed as a base class of MouseEvent -> `Event`.\n * This type is used to override `listener` calls to make TS happy\n */\ntype ListenerOverride = (evt: Event) => void;\n\ntype FocusVisibleState = {\n  /**\n   * Current element with focus visible in state\n   */\n  current: HTMLElement | undefined;\n};\n\ntype HTMLElementWithFocusVisibleScope = {\n  focusVisible: boolean | undefined;\n} & HTMLElement;\n\n/**\n * @internal\n * @param scope - Applies the ponyfill to all DOM children\n * @param win - window\n */\nexport function applyFocusVisiblePolyfill(scope: HTMLElement, win: Window): () => void {\n  if (alreadyInScope(scope)) {\n    // Focus visible polyfill already applied at this scope\n    return () => undefined;\n  }\n\n  const state: FocusVisibleState = {\n    current: undefined,\n  };\n\n  const keyborg = createKeyborg(win);\n\n  // When navigation mode changes remove the focus-visible selector\n  keyborg.subscribe(isNavigatingWithKeyboard => {\n    if (!isNavigatingWithKeyboard && state.current) {\n      removeFocusVisibleClass(state.current);\n      state.current = undefined;\n    }\n  });\n\n  // Keyborg's focusin event is delegated so it's only registered once on the window\n  // and contains metadata about the focus event\n  const keyborgListener = (e: KeyborgFocusInEvent) => {\n    if (state.current) {\n      removeFocusVisibleClass(state.current);\n      state.current = undefined;\n    }\n\n    if (keyborg.isNavigatingWithKeyboard() && isHTMLElement(e.target) && e.target) {\n      // Griffel can't create chained global styles so use the parent element for now\n      state.current = e.target;\n      applyFocusVisibleClass(state.current);\n    }\n  };\n\n  // Make sure that when focus leaves the scope, the focus visible class is removed\n  const blurListener = (e: FocusEvent) => {\n    if (!e.relatedTarget || (isHTMLElement(e.relatedTarget) && !scope.contains(e.relatedTarget))) {\n      if (state.current) {\n        removeFocusVisibleClass(state.current);\n        state.current = undefined;\n      }\n    }\n  };\n\n  scope.addEventListener(KEYBORG_FOCUSIN, keyborgListener as ListenerOverride);\n  scope.addEventListener('focusout', blurListener);\n  (scope as HTMLElementWithFocusVisibleScope).focusVisible = true;\n\n  // Return disposer\n  return () => {\n    scope.removeEventListener(KEYBORG_FOCUSIN, keyborgListener as ListenerOverride);\n    scope.removeEventListener('focusout', blurListener);\n    delete (scope as HTMLElementWithFocusVisibleScope).focusVisible;\n    disposeKeyborg(keyborg);\n  };\n}\n\nfunction applyFocusVisibleClass(el: HTMLElement) {\n  el.setAttribute(FOCUS_VISIBLE_ATTR, '');\n}\n\nfunction removeFocusVisibleClass(el: HTMLElement) {\n  el.removeAttribute(FOCUS_VISIBLE_ATTR);\n}\n\nfunction isHTMLElement(target: EventTarget | null): target is HTMLElement {\n  if (!target) {\n    return false;\n  }\n  return Boolean(target && typeof target === 'object' && 'classList' in target && 'contains' in target);\n}\n\nfunction alreadyInScope(el: HTMLElement | null | undefined): boolean {\n  if (!el) {\n    return false;\n  }\n\n  if ((el as HTMLElementWithFocusVisibleScope).focusVisible) {\n    return true;\n  }\n\n  return alreadyInScope(el?.parentElement);\n}\n"],"mappings":"AAAA,SAASA,eAAe,EAAuBC,aAAa,EAAEC,cAAc,QAAQ,SAAS;AAC7F,SAASC,kBAAkB,QAAQ,aAAa;AAoBhD;;;;;AAKA,OAAM,SAAUC,yBAAyBA,CAACC,KAAkB,EAAEC,GAAW;EACvE,IAAIC,cAAc,CAACF,KAAK,CAAC,EAAE;IACzB;IACA,OAAO,MAAMG,SAAS;;EAGxB,MAAMC,KAAK,GAAsB;IAC/BC,OAAO,EAAEF;GACV;EAED,MAAMG,OAAO,GAAGV,aAAa,CAACK,GAAG,CAAC;EAElC;EACAK,OAAO,CAACC,SAAS,CAACC,wBAAwB,IAAG;IAC3C,IAAI,CAACA,wBAAwB,IAAIJ,KAAK,CAACC,OAAO,EAAE;MAC9CI,uBAAuB,CAACL,KAAK,CAACC,OAAO,CAAC;MACtCD,KAAK,CAACC,OAAO,GAAGF,SAAS;;EAE7B,CAAC,CAAC;EAEF;EACA;EACA,MAAMO,eAAe,GAAIC,CAAsB,IAAI;IACjD,IAAIP,KAAK,CAACC,OAAO,EAAE;MACjBI,uBAAuB,CAACL,KAAK,CAACC,OAAO,CAAC;MACtCD,KAAK,CAACC,OAAO,GAAGF,SAAS;;IAG3B,IAAIG,OAAO,CAACE,wBAAwB,EAAE,IAAII,aAAa,CAACD,CAAC,CAACE,MAAM,CAAC,IAAIF,CAAC,CAACE,MAAM,EAAE;MAC7E;MACAT,KAAK,CAACC,OAAO,GAAGM,CAAC,CAACE,MAAM;MACxBC,sBAAsB,CAACV,KAAK,CAACC,OAAO,CAAC;;EAEzC,CAAC;EAED;EACA,MAAMU,YAAY,GAAIJ,CAAa,IAAI;IACrC,IAAI,CAACA,CAAC,CAACK,aAAa,IAAKJ,aAAa,CAACD,CAAC,CAACK,aAAa,CAAC,IAAI,CAAChB,KAAK,CAACiB,QAAQ,CAACN,CAAC,CAACK,aAAa,CAAE,EAAE;MAC5F,IAAIZ,KAAK,CAACC,OAAO,EAAE;QACjBI,uBAAuB,CAACL,KAAK,CAACC,OAAO,CAAC;QACtCD,KAAK,CAACC,OAAO,GAAGF,SAAS;;;EAG/B,CAAC;EAEDH,KAAK,CAACkB,gBAAgB,CAACvB,eAAe,EAAEe,eAAmC,CAAC;EAC5EV,KAAK,CAACkB,gBAAgB,CAAC,UAAU,EAAEH,YAAY,CAAC;EAC/Cf,KAA0C,CAACmB,YAAY,GAAG,IAAI;EAE/D;EACA,OAAO,MAAK;IACVnB,KAAK,CAACoB,mBAAmB,CAACzB,eAAe,EAAEe,eAAmC,CAAC;IAC/EV,KAAK,CAACoB,mBAAmB,CAAC,UAAU,EAAEL,YAAY,CAAC;IACnD,OAAQf,KAA0C,CAACmB,YAAY;IAC/DtB,cAAc,CAACS,OAAO,CAAC;EACzB,CAAC;AACH;AAEA,SAASQ,sBAAsBA,CAACO,EAAe;EAC7CA,EAAE,CAACC,YAAY,CAACxB,kBAAkB,EAAE,EAAE,CAAC;AACzC;AAEA,SAASW,uBAAuBA,CAACY,EAAe;EAC9CA,EAAE,CAACE,eAAe,CAACzB,kBAAkB,CAAC;AACxC;AAEA,SAASc,aAAaA,CAACC,MAA0B;EAC/C,IAAI,CAACA,MAAM,EAAE;IACX,OAAO,KAAK;;EAEd,OAAOW,OAAO,CAACX,MAAM,IAAI,OAAOA,MAAM,KAAK,QAAQ,IAAI,WAAW,IAAIA,MAAM,IAAI,UAAU,IAAIA,MAAM,CAAC;AACvG;AAEA,SAASX,cAAcA,CAACmB,EAAkC;EACxD,IAAI,CAACA,EAAE,EAAE;IACP,OAAO,KAAK;;EAGd,IAAKA,EAAuC,CAACF,YAAY,EAAE;IACzD,OAAO,IAAI;;EAGb,OAAOjB,cAAc,CAACmB,EAAE,aAAFA,EAAE,uBAAFA,EAAE,CAAEI,aAAa,CAAC;AAC1C"}
+{"version":3,"names":["isHTMLElement","KEYBORG_FOCUSIN","createKeyborg","disposeKeyborg","FOCUS_VISIBLE_ATTR","applyFocusVisiblePolyfill","scope","targetWindow","alreadyInScope","undefined","state","current","keyborg","subscribe","isNavigatingWithKeyboard","removeFocusVisibleClass","keyborgListener","e","target","applyFocusVisibleClass","blurListener","relatedTarget","contains","addEventListener","focusVisible","removeEventListener","el","setAttribute","removeAttribute","parentElement"],"sources":["../../src/focus/focusVisiblePolyfill.ts"],"sourcesContent":["import { isHTMLElement } from '@fluentui/react-utilities';\nimport { KEYBORG_FOCUSIN, KeyborgFocusInEvent, createKeyborg, disposeKeyborg } from 'keyborg';\n\nimport { FOCUS_VISIBLE_ATTR } from './constants';\n\n/**\n * Because `addEventListener` type override falls back to 2nd definition (evt name is unknown string literal)\n * evt is being typed as a base class of MouseEvent -> `Event`.\n * This type is used to override `listener` calls to make TS happy\n */\ntype ListenerOverride = (evt: Event) => void;\n\ntype FocusVisibleState = {\n  /**\n   * Current element with focus visible in state\n   */\n  current: HTMLElement | undefined;\n};\n\ntype HTMLElementWithFocusVisibleScope = {\n  focusVisible: boolean | undefined;\n} & HTMLElement;\n\n/**\n * @internal\n * @param scope - Applies the ponyfill to all DOM children\n * @param targetWindow - window\n */\nexport function applyFocusVisiblePolyfill(scope: HTMLElement, targetWindow: Window): () => void {\n  if (alreadyInScope(scope)) {\n    // Focus visible polyfill already applied at this scope\n    return () => undefined;\n  }\n\n  const state: FocusVisibleState = {\n    current: undefined,\n  };\n\n  const keyborg = createKeyborg(targetWindow);\n\n  // When navigation mode changes remove the focus-visible selector\n  keyborg.subscribe(isNavigatingWithKeyboard => {\n    if (!isNavigatingWithKeyboard && state.current) {\n      removeFocusVisibleClass(state.current);\n      state.current = undefined;\n    }\n  });\n\n  // Keyborg's focusin event is delegated so it's only registered once on the window\n  // and contains metadata about the focus event\n  const keyborgListener = (e: KeyborgFocusInEvent) => {\n    if (state.current) {\n      removeFocusVisibleClass(state.current);\n      state.current = undefined;\n    }\n\n    if (keyborg.isNavigatingWithKeyboard() && isHTMLElement(e.target) && e.target) {\n      // Griffel can't create chained global styles so use the parent element for now\n      state.current = e.target;\n      applyFocusVisibleClass(state.current);\n    }\n  };\n\n  // Make sure that when focus leaves the scope, the focus visible class is removed\n  const blurListener = (e: FocusEvent) => {\n    if (!e.relatedTarget || (isHTMLElement(e.relatedTarget) && !scope.contains(e.relatedTarget))) {\n      if (state.current) {\n        removeFocusVisibleClass(state.current);\n        state.current = undefined;\n      }\n    }\n  };\n\n  scope.addEventListener(KEYBORG_FOCUSIN, keyborgListener as ListenerOverride);\n  scope.addEventListener('focusout', blurListener);\n  (scope as HTMLElementWithFocusVisibleScope).focusVisible = true;\n\n  // Return disposer\n  return () => {\n    scope.removeEventListener(KEYBORG_FOCUSIN, keyborgListener as ListenerOverride);\n    scope.removeEventListener('focusout', blurListener);\n    delete (scope as HTMLElementWithFocusVisibleScope).focusVisible;\n    disposeKeyborg(keyborg);\n  };\n}\n\nfunction applyFocusVisibleClass(el: HTMLElement) {\n  el.setAttribute(FOCUS_VISIBLE_ATTR, '');\n}\n\nfunction removeFocusVisibleClass(el: HTMLElement) {\n  el.removeAttribute(FOCUS_VISIBLE_ATTR);\n}\n\nfunction alreadyInScope(el: HTMLElement | null | undefined): boolean {\n  if (!el) {\n    return false;\n  }\n\n  if ((el as HTMLElementWithFocusVisibleScope).focusVisible) {\n    return true;\n  }\n\n  return alreadyInScope(el?.parentElement);\n}\n"],"mappings":"AAAA,SAASA,aAAa,QAAQ;AAC9B,SAASC,eAAe,EAAuBC,aAAa,EAAEC,cAAc,QAAQ;AAEpF,SAASC,kBAAkB,QAAQ;AAoBnC;;;;;AAKA,OAAO,SAASC,0BAA0BC,KAAkB,EAAEC,YAAoB,EAAc;EAC9F,IAAIC,cAAA,CAAeF,KAAA,GAAQ;IACzB;IACA,OAAO,MAAMG,SAAA;EACf;EAEA,MAAMC,KAAA,GAA2B;IAC/BC,OAAA,EAASF;EACX;EAEA,MAAMG,OAAA,GAAUV,aAAA,CAAcK,YAAA;EAE9B;EACAK,OAAA,CAAQC,SAAS,CAACC,wBAAA,IAA4B;IAC5C,IAAI,CAACA,wBAAA,IAA4BJ,KAAA,CAAMC,OAAO,EAAE;MAC9CI,uBAAA,CAAwBL,KAAA,CAAMC,OAAO;MACrCD,KAAA,CAAMC,OAAO,GAAGF,SAAA;IAClB;EACF;EAEA;EACA;EACA,MAAMO,eAAA,GAAmBC,CAAA,IAA2B;IAClD,IAAIP,KAAA,CAAMC,OAAO,EAAE;MACjBI,uBAAA,CAAwBL,KAAA,CAAMC,OAAO;MACrCD,KAAA,CAAMC,OAAO,GAAGF,SAAA;IAClB;IAEA,IAAIG,OAAA,CAAQE,wBAAwB,MAAMd,aAAA,CAAciB,CAAA,CAAEC,MAAM,KAAKD,CAAA,CAAEC,MAAM,EAAE;MAC7E;MACAR,KAAA,CAAMC,OAAO,GAAGM,CAAA,CAAEC,MAAM;MACxBC,sBAAA,CAAuBT,KAAA,CAAMC,OAAO;IACtC;EACF;EAEA;EACA,MAAMS,YAAA,GAAgBH,CAAA,IAAkB;IACtC,IAAI,CAACA,CAAA,CAAEI,aAAa,IAAKrB,aAAA,CAAciB,CAAA,CAAEI,aAAa,KAAK,CAACf,KAAA,CAAMgB,QAAQ,CAACL,CAAA,CAAEI,aAAa,GAAI;MAC5F,IAAIX,KAAA,CAAMC,OAAO,EAAE;QACjBI,uBAAA,CAAwBL,KAAA,CAAMC,OAAO;QACrCD,KAAA,CAAMC,OAAO,GAAGF,SAAA;MAClB;IACF;EACF;EAEAH,KAAA,CAAMiB,gBAAgB,CAACtB,eAAA,EAAiBe,eAAA;EACxCV,KAAA,CAAMiB,gBAAgB,CAAC,YAAYH,YAAA;EAClCd,KAAA,CAA2CkB,YAAY,GAAG,IAAI;EAE/D;EACA,OAAO,MAAM;IACXlB,KAAA,CAAMmB,mBAAmB,CAACxB,eAAA,EAAiBe,eAAA;IAC3CV,KAAA,CAAMmB,mBAAmB,CAAC,YAAYL,YAAA;IACtC,OAAOd,KAAC,CAA2CkB,YAAY;IAC/DrB,cAAA,CAAeS,OAAA;EACjB;AACF;AAEA,SAASO,uBAAuBO,EAAe,EAAE;EAC/CA,EAAA,CAAGC,YAAY,CAACvB,kBAAA,EAAoB;AACtC;AAEA,SAASW,wBAAwBW,EAAe,EAAE;EAChDA,EAAA,CAAGE,eAAe,CAACxB,kBAAA;AACrB;AAEA,SAASI,eAAekB,EAAkC,EAAW;EACnE,IAAI,CAACA,EAAA,EAAI;IACP,OAAO,KAAK;EACd;EAEA,IAAIA,EAAC,CAAwCF,YAAY,EAAE;IACzD,OAAO,IAAI;EACb;EAEA,OAAOhB,cAAA,CAAekB,EAAA,aAAAA,EAAA,uBAAAA,EAAA,CAAIG,aAAa;AACzC"}

package/lib/focus/focusWithinPolyfill.js.map

@@ -1 +1 @@
-{"version":3,"names":["KEYBORG_FOCUSIN","createKeyborg","disposeKeyborg","FOCUS_WITHIN_ATTR","applyFocusWithinPolyfill","element","win","keyborg","subscribe","isNavigatingWithKeyboard","removeFocusWithinClass","keyborgListener","e","isHTMLElement","target","applyFocusWithinClass","blurListener","relatedTarget","contains","addEventListener","removeEventListener","el","setAttribute","removeAttribute","Boolean"],"sources":["../src/packages/react-components/react-tabster/src/focus/focusWithinPolyfill.ts"],"sourcesContent":["import { KEYBORG_FOCUSIN, KeyborgFocusInEvent, createKeyborg, disposeKeyborg } from 'keyborg';\nimport { FOCUS_WITHIN_ATTR } from './constants';\n\n/**\n * Because `addEventListener` type override falls back to 2nd definition (evt name is unknown string literal)\n * evt is being typed as a base class of MouseEvent -> `Event`.\n * This type is used to override `listener` calls to make TS happy\n */\ntype ListenerOverride = (evt: Event) => void;\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 applyFocusWithinPolyfill(element: HTMLElement, win: Window): () => void {\n  const keyborg = createKeyborg(win);\n\n  // When navigation mode changes to mouse, remove the focus-within selector\n  keyborg.subscribe(isNavigatingWithKeyboard => {\n    if (!isNavigatingWithKeyboard) {\n      removeFocusWithinClass(element);\n    }\n  });\n\n  // Keyborg's focusin event is delegated so it's only registered once on the window\n  // and contains metadata about the focus event\n  const keyborgListener = (e: KeyborgFocusInEvent) => {\n    if (keyborg.isNavigatingWithKeyboard() && isHTMLElement(e.target)) {\n      // Griffel can't create chained global styles so use the parent element for now\n      applyFocusWithinClass(element);\n    }\n  };\n\n  // Make sure that when focus leaves the scope, the focus within class is removed\n  const blurListener = (e: FocusEvent) => {\n    if (!e.relatedTarget || (isHTMLElement(e.relatedTarget) && !element.contains(e.relatedTarget))) {\n      removeFocusWithinClass(element);\n    }\n  };\n\n  element.addEventListener(KEYBORG_FOCUSIN, keyborgListener as ListenerOverride);\n  element.addEventListener('focusout', blurListener);\n\n  // Return disposer\n  return () => {\n    element.removeEventListener(KEYBORG_FOCUSIN, keyborgListener as ListenerOverride);\n    element.removeEventListener('focusout', blurListener);\n    disposeKeyborg(keyborg);\n  };\n}\n\nfunction applyFocusWithinClass(el: HTMLElement) {\n  el.setAttribute(FOCUS_WITHIN_ATTR, '');\n}\n\nfunction removeFocusWithinClass(el: HTMLElement) {\n  el.removeAttribute(FOCUS_WITHIN_ATTR);\n}\n\nfunction isHTMLElement(target: EventTarget | null): target is HTMLElement {\n  if (!target) {\n    return false;\n  }\n  return Boolean(target && typeof target === 'object' && 'classList' in target && 'contains' in target);\n}\n"],"mappings":"AAAA,SAASA,eAAe,EAAuBC,aAAa,EAAEC,cAAc,QAAQ,SAAS;AAC7F,SAASC,iBAAiB,QAAQ,aAAa;AAS/C;;;;;AAKA,OAAM,SAAUC,wBAAwBA,CAACC,OAAoB,EAAEC,GAAW;EACxE,MAAMC,OAAO,GAAGN,aAAa,CAACK,GAAG,CAAC;EAElC;EACAC,OAAO,CAACC,SAAS,CAACC,wBAAwB,IAAG;IAC3C,IAAI,CAACA,wBAAwB,EAAE;MAC7BC,sBAAsB,CAACL,OAAO,CAAC;;EAEnC,CAAC,CAAC;EAEF;EACA;EACA,MAAMM,eAAe,GAAIC,CAAsB,IAAI;IACjD,IAAIL,OAAO,CAACE,wBAAwB,EAAE,IAAII,aAAa,CAACD,CAAC,CAACE,MAAM,CAAC,EAAE;MACjE;MACAC,qBAAqB,CAACV,OAAO,CAAC;;EAElC,CAAC;EAED;EACA,MAAMW,YAAY,GAAIJ,CAAa,IAAI;IACrC,IAAI,CAACA,CAAC,CAACK,aAAa,IAAKJ,aAAa,CAACD,CAAC,CAACK,aAAa,CAAC,IAAI,CAACZ,OAAO,CAACa,QAAQ,CAACN,CAAC,CAACK,aAAa,CAAE,EAAE;MAC9FP,sBAAsB,CAACL,OAAO,CAAC;;EAEnC,CAAC;EAEDA,OAAO,CAACc,gBAAgB,CAACnB,eAAe,EAAEW,eAAmC,CAAC;EAC9EN,OAAO,CAACc,gBAAgB,CAAC,UAAU,EAAEH,YAAY,CAAC;EAElD;EACA,OAAO,MAAK;IACVX,OAAO,CAACe,mBAAmB,CAACpB,eAAe,EAAEW,eAAmC,CAAC;IACjFN,OAAO,CAACe,mBAAmB,CAAC,UAAU,EAAEJ,YAAY,CAAC;IACrDd,cAAc,CAACK,OAAO,CAAC;EACzB,CAAC;AACH;AAEA,SAASQ,qBAAqBA,CAACM,EAAe;EAC5CA,EAAE,CAACC,YAAY,CAACnB,iBAAiB,EAAE,EAAE,CAAC;AACxC;AAEA,SAASO,sBAAsBA,CAACW,EAAe;EAC7CA,EAAE,CAACE,eAAe,CAACpB,iBAAiB,CAAC;AACvC;AAEA,SAASU,aAAaA,CAACC,MAA0B;EAC/C,IAAI,CAACA,MAAM,EAAE;IACX,OAAO,KAAK;;EAEd,OAAOU,OAAO,CAACV,MAAM,IAAI,OAAOA,MAAM,KAAK,QAAQ,IAAI,WAAW,IAAIA,MAAM,IAAI,UAAU,IAAIA,MAAM,CAAC;AACvG"}
+{"version":3,"names":["KEYBORG_FOCUSIN","createKeyborg","disposeKeyborg","FOCUS_WITHIN_ATTR","applyFocusWithinPolyfill","element","win","keyborg","subscribe","isNavigatingWithKeyboard","removeFocusWithinClass","keyborgListener","e","isHTMLElement","target","applyFocusWithinClass","blurListener","relatedTarget","contains","addEventListener","removeEventListener","el","setAttribute","removeAttribute","Boolean"],"sources":["../../src/focus/focusWithinPolyfill.ts"],"sourcesContent":["import { KEYBORG_FOCUSIN, KeyborgFocusInEvent, createKeyborg, disposeKeyborg } from 'keyborg';\nimport { FOCUS_WITHIN_ATTR } from './constants';\n\n/**\n * Because `addEventListener` type override falls back to 2nd definition (evt name is unknown string literal)\n * evt is being typed as a base class of MouseEvent -> `Event`.\n * This type is used to override `listener` calls to make TS happy\n */\ntype ListenerOverride = (evt: Event) => void;\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 applyFocusWithinPolyfill(element: HTMLElement, win: Window): () => void {\n  const keyborg = createKeyborg(win);\n\n  // When navigation mode changes to mouse, remove the focus-within selector\n  keyborg.subscribe(isNavigatingWithKeyboard => {\n    if (!isNavigatingWithKeyboard) {\n      removeFocusWithinClass(element);\n    }\n  });\n\n  // Keyborg's focusin event is delegated so it's only registered once on the window\n  // and contains metadata about the focus event\n  const keyborgListener = (e: KeyborgFocusInEvent) => {\n    if (keyborg.isNavigatingWithKeyboard() && isHTMLElement(e.target)) {\n      // Griffel can't create chained global styles so use the parent element for now\n      applyFocusWithinClass(element);\n    }\n  };\n\n  // Make sure that when focus leaves the scope, the focus within class is removed\n  const blurListener = (e: FocusEvent) => {\n    if (!e.relatedTarget || (isHTMLElement(e.relatedTarget) && !element.contains(e.relatedTarget))) {\n      removeFocusWithinClass(element);\n    }\n  };\n\n  element.addEventListener(KEYBORG_FOCUSIN, keyborgListener as ListenerOverride);\n  element.addEventListener('focusout', blurListener);\n\n  // Return disposer\n  return () => {\n    element.removeEventListener(KEYBORG_FOCUSIN, keyborgListener as ListenerOverride);\n    element.removeEventListener('focusout', blurListener);\n    disposeKeyborg(keyborg);\n  };\n}\n\nfunction applyFocusWithinClass(el: HTMLElement) {\n  el.setAttribute(FOCUS_WITHIN_ATTR, '');\n}\n\nfunction removeFocusWithinClass(el: HTMLElement) {\n  el.removeAttribute(FOCUS_WITHIN_ATTR);\n}\n\nfunction isHTMLElement(target: EventTarget | null): target is HTMLElement {\n  if (!target) {\n    return false;\n  }\n  return Boolean(target && typeof target === 'object' && 'classList' in target && 'contains' in target);\n}\n"],"mappings":"AAAA,SAASA,eAAe,EAAuBC,aAAa,EAAEC,cAAc,QAAQ;AACpF,SAASC,iBAAiB,QAAQ;AASlC;;;;;AAKA,OAAO,SAASC,yBAAyBC,OAAoB,EAAEC,GAAW,EAAc;EACtF,MAAMC,OAAA,GAAUN,aAAA,CAAcK,GAAA;EAE9B;EACAC,OAAA,CAAQC,SAAS,CAACC,wBAAA,IAA4B;IAC5C,IAAI,CAACA,wBAAA,EAA0B;MAC7BC,sBAAA,CAAuBL,OAAA;IACzB;EACF;EAEA;EACA;EACA,MAAMM,eAAA,GAAmBC,CAAA,IAA2B;IAClD,IAAIL,OAAA,CAAQE,wBAAwB,MAAMI,aAAA,CAAcD,CAAA,CAAEE,MAAM,GAAG;MACjE;MACAC,qBAAA,CAAsBV,OAAA;IACxB;EACF;EAEA;EACA,MAAMW,YAAA,GAAgBJ,CAAA,IAAkB;IACtC,IAAI,CAACA,CAAA,CAAEK,aAAa,IAAKJ,aAAA,CAAcD,CAAA,CAAEK,aAAa,KAAK,CAACZ,OAAA,CAAQa,QAAQ,CAACN,CAAA,CAAEK,aAAa,GAAI;MAC9FP,sBAAA,CAAuBL,OAAA;IACzB;EACF;EAEAA,OAAA,CAAQc,gBAAgB,CAACnB,eAAA,EAAiBW,eAAA;EAC1CN,OAAA,CAAQc,gBAAgB,CAAC,YAAYH,YAAA;EAErC;EACA,OAAO,MAAM;IACXX,OAAA,CAAQe,mBAAmB,CAACpB,eAAA,EAAiBW,eAAA;IAC7CN,OAAA,CAAQe,mBAAmB,CAAC,YAAYJ,YAAA;IACxCd,cAAA,CAAeK,OAAA;EACjB;AACF;AAEA,SAASQ,sBAAsBM,EAAe,EAAE;EAC9CA,EAAA,CAAGC,YAAY,CAACnB,iBAAA,EAAmB;AACrC;AAEA,SAASO,uBAAuBW,EAAe,EAAE;EAC/CA,EAAA,CAAGE,eAAe,CAACpB,iBAAA;AACrB;AAEA,SAASU,cAAcC,MAA0B,EAAyB;EACxE,IAAI,CAACA,MAAA,EAAQ;IACX,OAAO,KAAK;EACd;EACA,OAAOU,OAAA,CAAQV,MAAA,IAAU,OAAOA,MAAA,KAAW,YAAY,eAAeA,MAAA,IAAU,cAAcA,MAAA;AAChG"}

package/lib/focus/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["packages/react-components/react-tabster/src/focus/index.ts"],"names":[],"mappings":"AAAA,cAAc,mCAAmC,CAAC;AAClD,cAAc,2BAA2B,CAAC;AAC1C,cAAc,wBAAwB,CAAC;AACvC,cAAc,uBAAuB,CAAC","sourcesContent":["export * from './createCustomFocusIndicatorStyle';\nexport * from './createFocusOutlineStyle';\nexport * from './focusVisiblePolyfill';\nexport * from './focusWithinPolyfill';\n"]}
+{"version":3,"names":[],"sources":["../../src/focus/index.ts"],"sourcesContent":["export * from './createCustomFocusIndicatorStyle';\nexport * from './createFocusOutlineStyle';\nexport * from './focusVisiblePolyfill';\nexport * from './focusWithinPolyfill';\n"],"mappings":"AAAA,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc"}

package/lib/hooks/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["packages/react-components/react-tabster/src/hooks/index.ts"],"names":[],"mappings":"AAAA,cAAc,2BAA2B,CAAC;AAC1C,cAAc,qBAAqB,CAAC;AACpC,cAAc,mBAAmB,CAAC;AAClC,cAAc,mBAAmB,CAAC;AAClC,cAAc,kBAAkB,CAAC;AACjC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,sBAAsB,CAAC;AACrC,cAAc,wBAAwB,CAAC","sourcesContent":["export * from './useArrowNavigationGroup';\nexport * from './useFocusableGroup';\nexport * from './useFocusFinders';\nexport * from './useFocusVisible';\nexport * from './useFocusWithin';\nexport * from './useKeyboardNavAttribute';\nexport * from './useModalAttributes';\nexport * from './useTabsterAttributes';\n"]}
+{"version":3,"names":[],"sources":["../../src/hooks/index.ts"],"sourcesContent":["export * from './useArrowNavigationGroup';\nexport * from './useFocusableGroup';\nexport * from './useFocusFinders';\nexport * from './useFocusVisible';\nexport * from './useFocusWithin';\nexport * from './useKeyboardNavAttribute';\nexport * from './useModalAttributes';\nexport * from './useTabsterAttributes';\n"],"mappings":"AAAA,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc"}

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/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,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"}

package/lib/hooks/useFocusFinders.js

@@ -10,16 +10,22 @@ 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({
-    container,
-    acceptCondition
-  })) || [], [tabster]);
-  const findFirstFocusable = React.useCallback(container => tabster === null || tabster === void 0 ? void 0 : tabster.focusable.findFirst({
-    container
-  }), [tabster]);
-  const findLastFocusable = React.useCallback(container => tabster === null || tabster === void 0 ? void 0 : tabster.focusable.findLast({
-    container
-  }), [tabster]);
+  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;

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/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;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"}

package/lib/hooks/useFocusVisible.js

@@ -1,11 +1,11 @@
 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();
+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);

package/lib/hooks/useFocusVisible.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","useFluent_unstable","useFluent","applyFocusVisiblePolyfill","useFocusVisible","targetDocument","scopeRef","useRef","useEffect","defaultView","current"],"sources":["../src/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","_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"}

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/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,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"}

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/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,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"}

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/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.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/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"}