@fluentui/react-tabster 0.0.0-nightly-20230317-1454.1 → 0.0.0-nightly-20230321-0440.1

package/CHANGELOG.json

@@ -2,9 +2,9 @@
   "name": "@fluentui/react-tabster",
   "entries": [
     {
-      "date": "Fri, 17 Mar 2023 15:00:06 GMT",
-      "tag": "@fluentui/react-tabster_v0.0.0-nightly-20230317-1454.1",
-      "version": "0.0.0-nightly-20230317-1454.1",
+      "date": "Tue, 21 Mar 2023 04:49:45 GMT",
+      "tag": "@fluentui/react-tabster_v0.0.0-nightly-20230321-0440.1",
+      "version": "0.0.0-nightly-20230321-0440.1",
       "comments": {
         "prerelease": [
           {
@@ -16,20 +16,20 @@
           {
             "author": "beachball",
             "package": "@fluentui/react-tabster",
-            "comment": "Bump @fluentui/react-shared-contexts to v0.0.0-nightly-20230317-1454.1",
-            "commit": "636275472966fa37b1efc14ac2e70ad32bd39b86"
+            "comment": "Bump @fluentui/react-shared-contexts to v0.0.0-nightly-20230321-0440.1",
+            "commit": "e913db5700c77cb74564f4422c775d52ef302e91"
           },
           {
             "author": "beachball",
             "package": "@fluentui/react-tabster",
-            "comment": "Bump @fluentui/react-theme to v0.0.0-nightly-20230317-1454.1",
-            "commit": "636275472966fa37b1efc14ac2e70ad32bd39b86"
+            "comment": "Bump @fluentui/react-theme to v0.0.0-nightly-20230321-0440.1",
+            "commit": "e913db5700c77cb74564f4422c775d52ef302e91"
           },
           {
             "author": "beachball",
             "package": "@fluentui/react-tabster",
-            "comment": "Bump @fluentui/react-utilities to v0.0.0-nightly-20230317-1454.1",
-            "commit": "636275472966fa37b1efc14ac2e70ad32bd39b86"
+            "comment": "Bump @fluentui/react-utilities to v0.0.0-nightly-20230321-0440.1",
+            "commit": "e913db5700c77cb74564f4422c775d52ef302e91"
           }
         ]
       }

package/CHANGELOG.md

@@ -1,20 +1,20 @@
 # Change Log - @fluentui/react-tabster
 
-This log was last generated on Fri, 17 Mar 2023 15:00:06 GMT and should not be manually modified.
+This log was last generated on Tue, 21 Mar 2023 04:49:45 GMT and should not be manually modified.
 
 <!-- Start content -->
 
-## [0.0.0-nightly-20230317-1454.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-tabster_v0.0.0-nightly-20230317-1454.1)
+## [0.0.0-nightly-20230321-0440.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-tabster_v0.0.0-nightly-20230321-0440.1)
 
-Fri, 17 Mar 2023 15:00:06 GMT 
-[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tabster_v9.6.0..@fluentui/react-tabster_v0.0.0-nightly-20230317-1454.1)
+Tue, 21 Mar 2023 04:49:45 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tabster_v9.6.0..@fluentui/react-tabster_v0.0.0-nightly-20230321-0440.1)
 
 ### Changes
 
 - Release nightly v9 ([commit](https://github.com/microsoft/fluentui/commit/not available) by fluentui-internal@service.microsoft.com)
-- Bump @fluentui/react-shared-contexts to v0.0.0-nightly-20230317-1454.1 ([commit](https://github.com/microsoft/fluentui/commit/636275472966fa37b1efc14ac2e70ad32bd39b86) by beachball)
-- Bump @fluentui/react-theme to v0.0.0-nightly-20230317-1454.1 ([commit](https://github.com/microsoft/fluentui/commit/636275472966fa37b1efc14ac2e70ad32bd39b86) by beachball)
-- Bump @fluentui/react-utilities to v0.0.0-nightly-20230317-1454.1 ([commit](https://github.com/microsoft/fluentui/commit/636275472966fa37b1efc14ac2e70ad32bd39b86) by beachball)
+- Bump @fluentui/react-shared-contexts to v0.0.0-nightly-20230321-0440.1 ([commit](https://github.com/microsoft/fluentui/commit/e913db5700c77cb74564f4422c775d52ef302e91) by beachball)
+- Bump @fluentui/react-theme to v0.0.0-nightly-20230321-0440.1 ([commit](https://github.com/microsoft/fluentui/commit/e913db5700c77cb74564f4422c775d52ef302e91) by beachball)
+- Bump @fluentui/react-utilities to v0.0.0-nightly-20230321-0440.1 ([commit](https://github.com/microsoft/fluentui/commit/e913db5700c77cb74564f4422c775d52ef302e91) by beachball)
 
 ## [9.6.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-tabster_v9.6.0)
 

package/lib/focus/constants.js

@@ -1,15 +1,15 @@
-export const KEYBOARD_NAV_ATTRIBUTE = "data-keyboard-nav";
+export const KEYBOARD_NAV_ATTRIBUTE = 'data-keyboard-nav';
 export const KEYBOARD_NAV_SELECTOR = `:global([${KEYBOARD_NAV_ATTRIBUTE}])`;
 /**
  * @internal
  */
-export const FOCUS_VISIBLE_ATTR = "data-fui-focus-visible";
+export const FOCUS_VISIBLE_ATTR = 'data-fui-focus-visible';
 /**
  * @internal
  */
-export const FOCUS_WITHIN_ATTR = "data-fui-focus-within";
+export const FOCUS_WITHIN_ATTR = 'data-fui-focus-within';
 export const defaultOptions = {
   style: {},
-  selector: "focus"
+  selector: 'focus'
 };
 //# sourceMappingURL=constants.js.map

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/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"}
+{"version":3,"names":["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":"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"}

package/lib/focus/createCustomFocusIndicatorStyle.js

@@ -1,4 +1,4 @@
-import { defaultOptions, FOCUS_VISIBLE_ATTR, FOCUS_WITHIN_ATTR } from "./constants";
+import { defaultOptions, FOCUS_VISIBLE_ATTR, FOCUS_WITHIN_ATTR } from './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
@@ -11,16 +11,16 @@ export function createCustomFocusIndicatorStyle(style, {
   enableOutline = false
 } = defaultOptions) {
   return {
-    ":focus": {
-      outlineStyle: enableOutline ? undefined : "none"
+    ':focus': {
+      outlineStyle: enableOutline ? undefined : 'none'
     },
-    ":focus-visible": {
-      outlineStyle: enableOutline ? undefined : "none"
+    ':focus-visible': {
+      outlineStyle: enableOutline ? undefined : 'none'
     },
-    ...(selector === "focus" && {
+    ...(selector === 'focus' && {
       [`&[${FOCUS_VISIBLE_ATTR}]`]: style
     }),
-    ...(selector === "focus-within" && {
+    ...(selector === 'focus-within' && {
       [`&[${FOCUS_WITHIN_ATTR}]:${selector}`]: style
     })
   };

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/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"}
+{"version":3,"names":["defaultOptions","FOCUS_VISIBLE_ATTR","FOCUS_WITHIN_ATTR","createCustomFocusIndicatorStyle","style","selector","enableOutline","outlineStyle","undefined"],"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,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"}

package/lib/focus/createFocusOutlineStyle.js

@@ -1,7 +1,7 @@
-import { tokens } from "@fluentui/react-theme";
-import { shorthands } from "@griffel/react";
-import { createCustomFocusIndicatorStyle } from "./createCustomFocusIndicatorStyle";
-import { defaultOptions } from "./constants";
+import { tokens } from '@fluentui/react-theme';
+import { shorthands } from '@griffel/react';
+import { createCustomFocusIndicatorStyle } from './createCustomFocusIndicatorStyle';
+import { defaultOptions } from './constants';
 /**
  * NOTE: the element with the focus outline needs to have `position: relative` so that the
  * pseudo element can be properly positioned.
@@ -10,24 +10,25 @@ 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 = outlineOffset?.top || outlineOffset;
-  const outlineOffsetBottom = outlineOffset?.bottom || outlineOffset;
-  const outlineOffsetLeft = outlineOffset?.left || outlineOffset;
-  const outlineOffsetRight = outlineOffset?.right || outlineOffset;
+  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;
   return {
-    ...shorthands.borderColor("transparent"),
-    "::after": {
+    ...shorthands.borderColor('transparent'),
+    '::after': {
       content: '""',
-      position: "absolute",
-      pointerEvents: "none",
+      position: 'absolute',
+      pointerEvents: 'none',
       zIndex: 1,
-      ...shorthands.borderStyle("solid"),
+      ...shorthands.borderStyle('solid'),
       ...shorthands.borderWidth(outlineWidth),
       ...shorthands.borderRadius(outlineRadius),
       ...shorthands.borderColor(outlineColor),
@@ -52,7 +53,7 @@ export const createFocusOutlineStyle = ({
   outlineColor: tokens.colorStrokeFocus2,
   outlineRadius: tokens.borderRadiusMedium,
   // FIXME: tokens.strokeWidthThick causes some weird bugs
-  outlineWidth: "2px",
+  outlineWidth: '2px',
   ...style
 }), {
   selector

package/lib/focus/createFocusOutlineStyle.js.map

@@ -1 +1 @@
-{"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,GAAmBF,aAAC,EAAsCG,GAAA,IAAOH,aAAA;EACvE,MAAMI,mBAAA,GAAsBJ,aAAC,EAAsCK,MAAA,IAAUL,aAAA;EAC7E,MAAMM,iBAAA,GAAoBN,aAAC,EAAsCO,IAAA,IAAQP,aAAA;EACzE,MAAMQ,kBAAA,GAAqBR,aAAC,EAAsCS,KAAA,IAAST,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"}
+{"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":["../../../../../../../../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"}

package/lib/focus/focusVisiblePolyfill.js

@@ -1,6 +1,6 @@
-import { isHTMLElement } from "@fluentui/react-utilities";
-import { KEYBORG_FOCUSIN, createKeyborg, disposeKeyborg } from "keyborg";
-import { FOCUS_VISIBLE_ATTR } from "./constants";
+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
@@ -45,18 +45,18 @@ export function applyFocusVisiblePolyfill(scope, targetWindow) {
     }
   };
   scope.addEventListener(KEYBORG_FOCUSIN, keyborgListener);
-  scope.addEventListener("focusout", blurListener);
+  scope.addEventListener('focusout', blurListener);
   scope.focusVisible = true;
   // Return disposer
   return () => {
     scope.removeEventListener(KEYBORG_FOCUSIN, keyborgListener);
-    scope.removeEventListener("focusout", blurListener);
+    scope.removeEventListener('focusout', blurListener);
     delete scope.focusVisible;
     disposeKeyborg(keyborg);
   };
 }
 function applyFocusVisibleClass(el) {
-  el.setAttribute(FOCUS_VISIBLE_ATTR, "");
+  el.setAttribute(FOCUS_VISIBLE_ATTR, '');
 }
 function removeFocusVisibleClass(el) {
   el.removeAttribute(FOCUS_VISIBLE_ATTR);
@@ -68,6 +68,6 @@ function alreadyInScope(el) {
   if (el.focusVisible) {
     return true;
   }
-  return alreadyInScope(el?.parentElement);
+  return alreadyInScope(el === null || el === void 0 ? void 0 : el.parentElement);
 }
 //# sourceMappingURL=focusVisiblePolyfill.js.map

package/lib/focus/focusVisiblePolyfill.js.map

@@ -1 +1 @@
-{"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,EAAIG,aAAA;AAC5B"}
+{"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":["../../../../../../../../packages/react-components/react-tabster/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,2BAA2B;AACzD,SAASC,eAAe,EAAuBC,aAAa,EAAEC,cAAc,QAAQ,SAAS;AAE7F,SAASC,kBAAkB,QAAQ,aAAa;AAoBhD;;;;;AAKA,OAAM,SAAUC,yBAAyBA,CAACC,KAAkB,EAAEC,YAAoB;EAChF,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,YAAY,CAAC;EAE3C;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,IAAId,aAAa,CAACiB,CAAC,CAACC,MAAM,CAAC,IAAID,CAAC,CAACC,MAAM,EAAE;MAC7E;MACAR,KAAK,CAACC,OAAO,GAAGM,CAAC,CAACC,MAAM;MACxBC,sBAAsB,CAACT,KAAK,CAACC,OAAO,CAAC;;EAEzC,CAAC;EAED;EACA,MAAMS,YAAY,GAAIH,CAAa,IAAI;IACrC,IAAI,CAACA,CAAC,CAACI,aAAa,IAAKrB,aAAa,CAACiB,CAAC,CAACI,aAAa,CAAC,IAAI,CAACf,KAAK,CAACgB,QAAQ,CAACL,CAAC,CAACI,aAAa,CAAE,EAAE;MAC5F,IAAIX,KAAK,CAACC,OAAO,EAAE;QACjBI,uBAAuB,CAACL,KAAK,CAACC,OAAO,CAAC;QACtCD,KAAK,CAACC,OAAO,GAAGF,SAAS;;;EAG/B,CAAC;EAEDH,KAAK,CAACiB,gBAAgB,CAACtB,eAAe,EAAEe,eAAmC,CAAC;EAC5EV,KAAK,CAACiB,gBAAgB,CAAC,UAAU,EAAEH,YAAY,CAAC;EAC/Cd,KAA0C,CAACkB,YAAY,GAAG,IAAI;EAE/D;EACA,OAAO,MAAK;IACVlB,KAAK,CAACmB,mBAAmB,CAACxB,eAAe,EAAEe,eAAmC,CAAC;IAC/EV,KAAK,CAACmB,mBAAmB,CAAC,UAAU,EAAEL,YAAY,CAAC;IACnD,OAAQd,KAA0C,CAACkB,YAAY;IAC/DrB,cAAc,CAACS,OAAO,CAAC;EACzB,CAAC;AACH;AAEA,SAASO,sBAAsBA,CAACO,EAAe;EAC7CA,EAAE,CAACC,YAAY,CAACvB,kBAAkB,EAAE,EAAE,CAAC;AACzC;AAEA,SAASW,uBAAuBA,CAACW,EAAe;EAC9CA,EAAE,CAACE,eAAe,CAACxB,kBAAkB,CAAC;AACxC;AAEA,SAASI,cAAcA,CAACkB,EAAkC;EACxD,IAAI,CAACA,EAAE,EAAE;IACP,OAAO,KAAK;;EAGd,IAAKA,EAAuC,CAACF,YAAY,EAAE;IACzD,OAAO,IAAI;;EAGb,OAAOhB,cAAc,CAACkB,EAAE,aAAFA,EAAE,uBAAFA,EAAE,CAAEG,aAAa,CAAC;AAC1C"}

package/lib/focus/focusWithinPolyfill.js

@@ -1,5 +1,5 @@
-import { KEYBORG_FOCUSIN, createKeyborg, disposeKeyborg } from "keyborg";
-import { FOCUS_WITHIN_ATTR } from "./constants";
+import { KEYBORG_FOCUSIN, createKeyborg, disposeKeyborg } from 'keyborg';
+import { FOCUS_WITHIN_ATTR } from './constants';
 /**
  * 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
@@ -28,16 +28,16 @@ export function applyFocusWithinPolyfill(element, win) {
     }
   };
   element.addEventListener(KEYBORG_FOCUSIN, keyborgListener);
-  element.addEventListener("focusout", blurListener);
+  element.addEventListener('focusout', blurListener);
   // Return disposer
   return () => {
     element.removeEventListener(KEYBORG_FOCUSIN, keyborgListener);
-    element.removeEventListener("focusout", blurListener);
+    element.removeEventListener('focusout', blurListener);
     disposeKeyborg(keyborg);
   };
 }
 function applyFocusWithinClass(el) {
-  el.setAttribute(FOCUS_WITHIN_ATTR, "");
+  el.setAttribute(FOCUS_WITHIN_ATTR, '');
 }
 function removeFocusWithinClass(el) {
   el.removeAttribute(FOCUS_WITHIN_ATTR);
@@ -46,6 +46,6 @@ function isHTMLElement(target) {
   if (!target) {
     return false;
   }
-  return Boolean(target && typeof target === "object" && "classList" in target && "contains" in target);
+  return Boolean(target && typeof target === 'object' && 'classList' in target && 'contains' in target);
 }
 //# sourceMappingURL=focusWithinPolyfill.js.map

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/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"}
+{"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":["../../../../../../../../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"}

package/lib/focus/index.js

@@ -1,5 +1,5 @@
-export * from "./createCustomFocusIndicatorStyle";
-export * from "./createFocusOutlineStyle";
-export * from "./focusVisiblePolyfill";
-export * from "./focusWithinPolyfill";
+export * from './createCustomFocusIndicatorStyle';
+export * from './createFocusOutlineStyle';
+export * from './focusVisiblePolyfill';
+export * from './focusWithinPolyfill';
 //# sourceMappingURL=index.js.map

package/lib/focus/index.js.map

@@ -1 +1 @@
-{"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"}
+{"version":3,"file":"index.js","sourceRoot":"","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"]}

package/lib/hooks/index.js

@@ -1,9 +1,9 @@
-export * from "./useArrowNavigationGroup";
-export * from "./useFocusableGroup";
-export * from "./useFocusFinders";
-export * from "./useFocusVisible";
-export * from "./useFocusWithin";
-export * from "./useKeyboardNavAttribute";
-export * from "./useModalAttributes";
-export * from "./useTabsterAttributes";
+export * from './useArrowNavigationGroup';
+export * from './useFocusableGroup';
+export * from './useFocusFinders';
+export * from './useFocusVisible';
+export * from './useFocusWithin';
+export * from './useKeyboardNavAttribute';
+export * from './useModalAttributes';
+export * from './useTabsterAttributes';
 //# sourceMappingURL=index.js.map

package/lib/hooks/index.js.map

@@ -1 +1 @@
-{"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"}
+{"version":3,"file":"index.js","sourceRoot":"","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"]}

package/lib/hooks/useArrowNavigationGroup.js

@@ -1,6 +1,6 @@
-import { Types, getMover } from "tabster";
-import { useTabsterAttributes } from "./useTabsterAttributes";
-import { useTabster } from "./useTabster";
+import { Types, getMover } from 'tabster';
+import { useTabsterAttributes } from './useTabsterAttributes';
+import { useTabster } from './useTabster';
 /**
  * A hook that returns the necessary tabster attributes to support arrow key navigation
  * @param options - Options to configure keyboard navigation
@@ -22,7 +22,7 @@ export const useArrowNavigationGroup = (options = {}) => {
   return useTabsterAttributes({
     mover: {
       cyclic: !!circular,
-      direction: axisToMoverDirection(axis ?? "vertical"),
+      direction: axisToMoverDirection(axis !== null && axis !== void 0 ? axis : 'vertical'),
       memorizeCurrent,
       tabbable,
       hasDefault: unstable_hasDefault
@@ -36,13 +36,13 @@ export const useArrowNavigationGroup = (options = {}) => {
 };
 function axisToMoverDirection(axis) {
   switch (axis) {
-    case "horizontal":
+    case 'horizontal':
       return Types.MoverDirections.Horizontal;
-    case "grid":
+    case 'grid':
       return Types.MoverDirections.Grid;
-    case "both":
+    case 'both':
       return Types.MoverDirections.Both;
-    case "vertical":
+    case 'vertical':
     default:
       return Types.MoverDirections.Vertical;
   }

package/lib/hooks/useArrowNavigationGroup.js.map

@@ -1 +1 @@
-{"version":3,"names":["Types","getMover","useTabsterAttributes","useTabster","useArrowNavigationGroup","options","circular","axis","memorizeCurrent","tabbable","ignoreDefaultKeydown","unstable_hasDefault","tabster","mover","cyclic","direction","axisToMoverDirection","hasDefault","focusable","ignoreKeydown","MoverDirections","Horizontal","Grid","Both","Vertical"],"sources":["../../src/hooks/useArrowNavigationGroup.ts"],"sourcesContent":["import { Types, getMover } from 'tabster';\nimport { useTabsterAttributes } from './useTabsterAttributes';\nimport { useTabster } from './useTabster';\n\nexport interface UseArrowNavigationGroupOptions {\n  /**\n   * Focus will navigate vertically, horizontally or in both directions (grid), defaults to horizontally\n   * @defaultValue vertical\n   */\n  axis?: 'vertical' | 'horizontal' | 'grid' | 'both';\n  /**\n   * Focus will cycle to the first/last elements of the group without stopping\n   */\n  circular?: boolean;\n  /**\n   * Last focused element in the group will be remembered and focused (if still\n   * available) when tabbing from outside of the group\n   */\n  memorizeCurrent?: boolean;\n  /**\n   * Allow tabbing within the arrow navigation group items.\n   */\n  tabbable?: boolean;\n  /**\n   * Tabster should ignore default handling of keydown events\n   */\n  ignoreDefaultKeydown?: Types.FocusableProps['ignoreKeydown'];\n  /**\n   * The default focusable item in the group will be an element with Focusable.isDefault property.\n   * Note that there is no way in \\@fluentui/react-tabster to set default focusable element,\n   * and this option is currently for internal testing purposes only.\n   */\n  // eslint-disable-next-line @typescript-eslint/naming-convention\n  unstable_hasDefault?: boolean;\n}\n\n/**\n * A hook that returns the necessary tabster attributes to support arrow key navigation\n * @param options - Options to configure keyboard navigation\n */\nexport const useArrowNavigationGroup = (options: UseArrowNavigationGroupOptions = {}): Types.TabsterDOMAttribute => {\n  const {\n    circular,\n    axis,\n    memorizeCurrent,\n    tabbable,\n    ignoreDefaultKeydown,\n    // eslint-disable-next-line @typescript-eslint/naming-convention\n    unstable_hasDefault,\n  } = options;\n  const tabster = useTabster();\n\n  if (tabster) {\n    getMover(tabster);\n  }\n\n  return useTabsterAttributes({\n    mover: {\n      cyclic: !!circular,\n      direction: axisToMoverDirection(axis ?? 'vertical'),\n      memorizeCurrent,\n      tabbable,\n      hasDefault: unstable_hasDefault,\n    },\n    ...(ignoreDefaultKeydown && {\n      focusable: {\n        ignoreKeydown: ignoreDefaultKeydown,\n      },\n    }),\n  });\n};\n\nfunction axisToMoverDirection(axis: UseArrowNavigationGroupOptions['axis']): Types.MoverDirection {\n  switch (axis) {\n    case 'horizontal':\n      return Types.MoverDirections.Horizontal;\n    case 'grid':\n      return Types.MoverDirections.Grid;\n    case 'both':\n      return Types.MoverDirections.Both;\n\n    case 'vertical':\n    default:\n      return Types.MoverDirections.Vertical;\n  }\n}\n"],"mappings":"AAAA,SAASA,KAAK,EAAEC,QAAQ,QAAQ;AAChC,SAASC,oBAAoB,QAAQ;AACrC,SAASC,UAAU,QAAQ;AAkC3B;;;;AAIA,OAAO,MAAMC,uBAAA,GAA0BA,CAACC,OAAA,GAA0C,CAAC,CAAC,KAAgC;EAClH,MAAM;IACJC,QAAA;IACAC,IAAA;IACAC,eAAA;IACAC,QAAA;IACAC,oBAAA;IACA;IACAC;EAAmB,CACpB,GAAGN,OAAA;EACJ,MAAMO,OAAA,GAAUT,UAAA;EAEhB,IAAIS,OAAA,EAAS;IACXX,QAAA,CAASW,OAAA;EACX;EAEA,OAAOV,oBAAA,CAAqB;IAC1BW,KAAA,EAAO;MACLC,MAAA,EAAQ,CAAC,CAACR,QAAA;MACVS,SAAA,EAAWC,oBAAA,CAAqBT,IAAA,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"}
+{"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"}

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

package/lib/hooks/useFocusVisible.js

@@ -1,12 +1,13 @@
-import * as React from "react";
-import { useFluent_unstable as useFluent } from "@fluentui/react-shared-contexts";
-import { applyFocusVisiblePolyfill } from "../focus/focusVisiblePolyfill";
+import * as React from 'react';
+import { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';
+import { applyFocusVisiblePolyfill } from '../focus/focusVisiblePolyfill';
 export function useFocusVisible(options = {}) {
+  var _a;
   const contentValue = useFluent();
   const scopeRef = React.useRef(null);
-  const targetDocument = options.targetDocument ?? contentValue.targetDocument;
+  const targetDocument = (_a = options.targetDocument) !== null && _a !== void 0 ? _a : contentValue.targetDocument;
   React.useEffect(() => {
-    if (targetDocument?.defaultView && scopeRef.current) {
+    if ((targetDocument === null || targetDocument === void 0 ? void 0 : 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","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"}
+{"version":3,"names":["React","useFluent_unstable","useFluent","applyFocusVisiblePolyfill","useFocusVisible","options","contentValue","scopeRef","useRef","targetDocument","_a","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';\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,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,kBAAkB,IAAIC,SAAS,QAAQ,iCAAiC;AAEjF,SAASC,yBAAyB,QAAQ,+BAA+B;AAMzE,OAAM,SAAUC,eAAeA,CAA6CC,OAAA,GAAkC,EAAE;;EAC9G,MAAMC,YAAY,GAAGJ,SAAS,EAAE;EAChC,MAAMK,QAAQ,GAAGP,KAAK,CAACQ,MAAM,CAAW,IAAI,CAAC;EAE7C,MAAMC,cAAc,GAAG,CAAAC,EAAA,GAAAL,OAAO,CAACI,cAAc,cAAAC,EAAA,cAAAA,EAAA,GAAIJ,YAAY,CAACG,cAAc;EAE5ET,KAAK,CAACW,SAAS,CAAC,MAAK;IACnB,IAAI,CAAAF,cAAc,aAAdA,cAAc,uBAAdA,cAAc,CAAEG,WAAW,KAAIL,QAAQ,CAACM,OAAO,EAAE;MACnD,OAAOV,yBAAyB,CAACI,QAAQ,CAACM,OAAO,EAAEJ,cAAc,CAACG,WAAW,CAAC;;EAElF,CAAC,EAAE,CAACL,QAAQ,EAAEE,cAAc,CAAC,CAAC;EAE9B,OAAOF,QAAQ;AACjB"}