@fluentui/react-tabster 0.0.0-nightly-20230317-1454.1 → 0.0.0-nightly-20230322-0439.1

package/.swcrc

@@ -1,15 +1,5 @@
 {
   "$schema": "https://json.schemastore.org/swcrc",
-  "env": {
-    "targets": {
-      "chrome": "84",
-      "edge": "84",
-      "firefox": "75",
-      "opera": "73",
-      "safari": "14.1"
-    },
-    "bugfixes": true
-  },
   "exclude": [
     "/testing",
     "/**/*.cy.ts",
@@ -32,7 +22,8 @@
         "runtime": "classic",
         "useSpread": true
       }
-    }
+    },
+    "target": "es2019"
   },
   "minify": false,
   "sourceMaps": true

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": "Wed, 22 Mar 2023 04:46:53 GMT",
+      "tag": "@fluentui/react-tabster_v0.0.0-nightly-20230322-0439.1",
+      "version": "0.0.0-nightly-20230322-0439.1",
       "comments": {
         "prerelease": [
           {
@@ -16,20 +16,59 @@
           {
             "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-20230322-0439.1",
+            "commit": "49dde84493fc2c3e96abac5ce918169c9668ba66"
           },
           {
             "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-20230322-0439.1",
+            "commit": "49dde84493fc2c3e96abac5ce918169c9668ba66"
           },
           {
             "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-20230322-0439.1",
+            "commit": "49dde84493fc2c3e96abac5ce918169c9668ba66"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Tue, 21 Mar 2023 21:23:08 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"
           }
         ]
       }

package/CHANGELOG.md

@@ -1,20 +1,33 @@
 # 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 Wed, 22 Mar 2023 04:46:53 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-20230322-0439.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-tabster_v0.0.0-nightly-20230322-0439.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)
+Wed, 22 Mar 2023 04:46:53 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tabster_v9.6.1..@fluentui/react-tabster_v0.0.0-nightly-20230322-0439.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-20230322-0439.1 ([commit](https://github.com/microsoft/fluentui/commit/49dde84493fc2c3e96abac5ce918169c9668ba66) by beachball)
+- Bump @fluentui/react-theme to v0.0.0-nightly-20230322-0439.1 ([commit](https://github.com/microsoft/fluentui/commit/49dde84493fc2c3e96abac5ce918169c9668ba66) by beachball)
+- Bump @fluentui/react-utilities to v0.0.0-nightly-20230322-0439.1 ([commit](https://github.com/microsoft/fluentui/commit/49dde84493fc2c3e96abac5ce918169c9668ba66) by beachball)
+
+## [9.6.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-tabster_v9.6.1)
+
+Tue, 21 Mar 2023 21:23:08 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)
 

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/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/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.
@@ -16,18 +16,18 @@ const getFocusOutlineStyles = options => {
     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 = (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": {
+    ...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 +52,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","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,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":["../../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

@@ -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/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/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/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":["../../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

@@ -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,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?.focusable.findAll({
-    container,
-    acceptCondition
-  }) || [], [tabster]);
-  const findFirstFocusable = React.useCallback(container => tabster?.focusable.findFirst({
-    container
-  }), [tabster]);
-  const findLastFocusable = React.useCallback(container => 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/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":["../../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,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 = {}) {
   const contentValue = useFluent();
   const scopeRef = React.useRef(null);
-  const targetDocument = options.targetDocument ?? contentValue.targetDocument;
+  var _options_targetDocument;
+  const targetDocument = (_options_targetDocument = options.targetDocument) !== null && _options_targetDocument !== void 0 ? _options_targetDocument : 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","_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

@@ -1,6 +1,6 @@
-import * as React from "react";
-import { useFluent_unstable as useFluent } from "@fluentui/react-shared-contexts";
-import { applyFocusWithinPolyfill } from "../focus/focusWithinPolyfill";
+import * as React from 'react';
+import { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';
+import { applyFocusWithinPolyfill } from '../focus/focusWithinPolyfill';
 /**
  * A ponyfill that allows `:focus-within` to support visibility based on keyboard/mouse navigation
  * like `:focus-visible` https://github.com/WICG/focus-visible/issues/151
@@ -12,7 +12,7 @@ export function useFocusWithin() {
   } = useFluent();
   const elementRef = React.useRef(null);
   React.useEffect(() => {
-    if (targetDocument?.defaultView && elementRef.current) {
+    if ((targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.defaultView) && elementRef.current) {
       return applyFocusWithinPolyfill(elementRef.current, targetDocument.defaultView);
     }
   }, [elementRef, targetDocument]);

package/lib/hooks/useFocusWithin.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","useFluent_unstable","useFluent","applyFocusWithinPolyfill","useFocusWithin","targetDocument","elementRef","useRef","useEffect","defaultView","current"],"sources":["../../src/hooks/useFocusWithin.ts"],"sourcesContent":["import * as React from 'react';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport { applyFocusWithinPolyfill } from '../focus/focusWithinPolyfill';\n\n/**\n * A ponyfill that allows `:focus-within` to support visibility based on keyboard/mouse navigation\n * like `:focus-visible` https://github.com/WICG/focus-visible/issues/151\n * @returns ref to the element that uses `:focus-within` styles\n */\nexport function useFocusWithin<TElement extends HTMLElement = HTMLElement>() {\n  const { targetDocument } = useFluent();\n  const elementRef = React.useRef<TElement>(null);\n\n  React.useEffect(() => {\n    if (targetDocument?.defaultView && elementRef.current) {\n      return applyFocusWithinPolyfill(elementRef.current, targetDocument.defaultView);\n    }\n  }, [elementRef, targetDocument]);\n\n  return elementRef;\n}\n"],"mappings":"AAAA,YAAYA,KAAA,MAAW;AACvB,SAASC,kBAAA,IAAsBC,SAAS,QAAQ;AAChD,SAASC,wBAAwB,QAAQ;AAEzC;;;;;AAKA,OAAO,SAASC,eAAA,EAA6D;EAC3E,MAAM;IAAEC;EAAc,CAAE,GAAGH,SAAA;EAC3B,MAAMI,UAAA,GAAaN,KAAA,CAAMO,MAAM,CAAW,IAAI;EAE9CP,KAAA,CAAMQ,SAAS,CAAC,MAAM;IACpB,IAAIH,cAAA,EAAgBI,WAAA,IAAeH,UAAA,CAAWI,OAAO,EAAE;MACrD,OAAOP,wBAAA,CAAyBG,UAAA,CAAWI,OAAO,EAAEL,cAAA,CAAeI,WAAW;IAChF;EACF,GAAG,CAACH,UAAA,EAAYD,cAAA,CAAe;EAE/B,OAAOC,UAAA;AACT"}
+{"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"}