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

package/.swcrc

@@ -0,0 +1,39 @@
+{
+  "$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",
+    "/**/*.cy.tsx",
+    "/**/*.spec.ts",
+    "/**/*.spec.tsx",
+    "/**/*.test.ts",
+    "/**/*.test.tsx"
+  ],
+  "jsc": {
+    "parser": {
+      "syntax": "typescript",
+      "tsx": true,
+      "decorators": false,
+      "dynamicImport": false
+    },
+    "externalHelpers": true,
+    "transform": {
+      "react": {
+        "runtime": "classic",
+        "useSpread": true
+      }
+    }
+  },
+  "minify": false,
+  "sourceMaps": true
+}

package/CHANGELOG.json

@@ -2,9 +2,9 @@
   "name": "@fluentui/react-tabster",
   "entries": [
     {
-      "date": "Thu, 16 Mar 2023 04:34:09 GMT",
-      "tag": "@fluentui/react-tabster_v0.0.0-nightly-20230316-0427.1",
-      "version": "0.0.0-nightly-20230316-0427.1",
+      "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",
       "comments": {
         "prerelease": [
           {
@@ -16,20 +16,41 @@
           {
             "author": "beachball",
             "package": "@fluentui/react-tabster",
-            "comment": "Bump @fluentui/react-shared-contexts to v0.0.0-nightly-20230316-0427.1",
-            "commit": "3738c812cde18d4b2446cb53b7f78fee5702707c"
+            "comment": "Bump @fluentui/react-shared-contexts to v0.0.0-nightly-20230317-1454.1",
+            "commit": "636275472966fa37b1efc14ac2e70ad32bd39b86"
           },
           {
             "author": "beachball",
             "package": "@fluentui/react-tabster",
-            "comment": "Bump @fluentui/react-theme to v0.0.0-nightly-20230316-0427.1",
-            "commit": "3738c812cde18d4b2446cb53b7f78fee5702707c"
+            "comment": "Bump @fluentui/react-theme to v0.0.0-nightly-20230317-1454.1",
+            "commit": "636275472966fa37b1efc14ac2e70ad32bd39b86"
           },
           {
             "author": "beachball",
             "package": "@fluentui/react-tabster",
-            "comment": "Bump @fluentui/react-utilities to v0.0.0-nightly-20230316-0427.1",
-            "commit": "3738c812cde18d4b2446cb53b7f78fee5702707c"
+            "comment": "Bump @fluentui/react-utilities to v0.0.0-nightly-20230317-1454.1",
+            "commit": "636275472966fa37b1efc14ac2e70ad32bd39b86"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Thu, 16 Mar 2023 14:36:58 GMT",
+      "tag": "@fluentui/react-tabster_v9.6.0",
+      "version": "9.6.0",
+      "comments": {
+        "minor": [
+          {
+            "author": "olfedias@microsoft.com",
+            "package": "@fluentui/react-tabster",
+            "commit": "fe1014bbcd770a7b38a3a9a09595e93297c2da26",
+            "comment": "feat: add options to useFocusVisible() hook"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-tabster",
+            "comment": "Bump @fluentui/react-utilities to v9.7.1",
+            "commit": "e7dcadf7cabae6bc6811ca04a630e7d850388f81"
           }
         ]
       }

package/CHANGELOG.md

@@ -1,20 +1,30 @@
 # Change Log - @fluentui/react-tabster
 
-This log was last generated on Thu, 16 Mar 2023 04:34:09 GMT and should not be manually modified.
+This log was last generated on Fri, 17 Mar 2023 15:00:06 GMT and should not be manually modified.
 
 <!-- Start content -->
 
-## [0.0.0-nightly-20230316-0427.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-tabster_v0.0.0-nightly-20230316-0427.1)
+## [0.0.0-nightly-20230317-1454.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-tabster_v0.0.0-nightly-20230317-1454.1)
 
-Thu, 16 Mar 2023 04:34:09 GMT 
-[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tabster_v9.5.7..@fluentui/react-tabster_v0.0.0-nightly-20230316-0427.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)
 
 ### 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-20230316-0427.1 ([commit](https://github.com/microsoft/fluentui/commit/3738c812cde18d4b2446cb53b7f78fee5702707c) by beachball)
-- Bump @fluentui/react-theme to v0.0.0-nightly-20230316-0427.1 ([commit](https://github.com/microsoft/fluentui/commit/3738c812cde18d4b2446cb53b7f78fee5702707c) by beachball)
-- Bump @fluentui/react-utilities to v0.0.0-nightly-20230316-0427.1 ([commit](https://github.com/microsoft/fluentui/commit/3738c812cde18d4b2446cb53b7f78fee5702707c) by beachball)
+- 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)
+
+## [9.6.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-tabster_v9.6.0)
+
+Thu, 16 Mar 2023 14:36:58 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tabster_v9.5.7..@fluentui/react-tabster_v9.6.0)
+
+### Minor changes
+
+- feat: add options to useFocusVisible() hook ([PR #27198](https://github.com/microsoft/fluentui/pull/27198) by olfedias@microsoft.com)
+- Bump @fluentui/react-utilities to v9.7.1 ([PR #27229](https://github.com/microsoft/fluentui/pull/27229) by beachball)
 
 ## [9.5.7](https://github.com/microsoft/fluentui/tree/@fluentui/react-tabster_v9.5.7)
 

package/dist/index.d.ts

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

package/lib/focus/constants.js

@@ -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":["../../../../../../../../packages/react-components/react-tabster/src/focus/constants.ts"],"sourcesContent":["export const KEYBOARD_NAV_ATTRIBUTE = 'data-keyboard-nav' as const;\nexport const KEYBOARD_NAV_SELECTOR = `:global([${KEYBOARD_NAV_ATTRIBUTE}])` as const;\n\n/**\n * @internal\n */\nexport const FOCUS_VISIBLE_ATTR = 'data-fui-focus-visible';\n\n/**\n * @internal\n */\nexport const FOCUS_WITHIN_ATTR = 'data-fui-focus-within';\nexport const defaultOptions = {\n  style: {},\n  selector: 'focus',\n} as const;\n"],"mappings":"AAAA,OAAO,MAAMA,sBAAsB,GAAG,mBAA4B;AAClE,OAAO,MAAMC,qBAAqB,GAAG,YAAYD,sBAAsB,IAAa;AAEpF;;;AAGA,OAAO,MAAME,kBAAkB,GAAG,wBAAwB;AAE1D;;;AAGA,OAAO,MAAMC,iBAAiB,GAAG,uBAAuB;AACxD,OAAO,MAAMC,cAAc,GAAG;EAC5BC,KAAK,EAAE,EAAE;EACTC,QAAQ,EAAE;CACF"}
+{"version":3,"names":["KEYBOARD_NAV_ATTRIBUTE","KEYBOARD_NAV_SELECTOR","FOCUS_VISIBLE_ATTR","FOCUS_WITHIN_ATTR","defaultOptions","style","selector"],"sources":["../../src/focus/constants.ts"],"sourcesContent":["export const KEYBOARD_NAV_ATTRIBUTE = 'data-keyboard-nav' as const;\nexport const KEYBOARD_NAV_SELECTOR = `:global([${KEYBOARD_NAV_ATTRIBUTE}])` as const;\n\n/**\n * @internal\n */\nexport const FOCUS_VISIBLE_ATTR = 'data-fui-focus-visible';\n\n/**\n * @internal\n */\nexport const FOCUS_WITHIN_ATTR = 'data-fui-focus-within';\nexport const defaultOptions = {\n  style: {},\n  selector: 'focus',\n} as const;\n"],"mappings":"AAAA,OAAO,MAAMA,sBAAA,GAAyB;AACtC,OAAO,MAAMC,qBAAA,GAAyB,YAAWD,sBAAuB,IAAG;AAE3E;;;AAGA,OAAO,MAAME,kBAAA,GAAqB;AAElC;;;AAGA,OAAO,MAAMC,iBAAA,GAAoB;AACjC,OAAO,MAAMC,cAAA,GAAiB;EAC5BC,KAAA,EAAO,CAAC;EACRC,QAAA,EAAU;AACZ"}

package/lib/focus/createCustomFocusIndicatorStyle.js

@@ -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":["../../../../../../../../packages/react-components/react-tabster/src/focus/createCustomFocusIndicatorStyle.ts"],"sourcesContent":["import { defaultOptions, FOCUS_VISIBLE_ATTR, FOCUS_WITHIN_ATTR } from './constants';\nimport { makeResetStyles } from '@griffel/react';\nimport type { GriffelStyle } from '@griffel/react';\n\n// TODO: Use the type directly from @griffel/react\n// https://github.com/microsoft/griffel/pull/278\ntype GriffelResetStyle = Parameters<typeof makeResetStyles>[0];\n\nexport interface CreateCustomFocusIndicatorStyleOptions {\n  /**\n   * Control if the indicator appears when the corresponding element is focused,\n   * or any child is focused within the corresponding element.\n   * @default 'focus'\n   */\n  selector?: 'focus' | 'focus-within';\n  /**\n   * Enables the browser default outline style\n   * @default false\n   */\n  enableOutline?: boolean;\n}\n\n/**\n * Creates a style for @see makeStyles that includes the necessary selectors for focus.\n * Should be used only when @see createFocusOutlineStyle does not fit requirements\n *\n * @param style - styling applied on focus, defaults to @see getDefaultFocusOutlineStyles\n * @param options - Configure the style of the focus outline\n */\nexport function createCustomFocusIndicatorStyle<TStyle extends GriffelStyle | GriffelResetStyle>(\n  style: TStyle,\n  {\n    selector = defaultOptions.selector,\n    enableOutline = false,\n  }: CreateCustomFocusIndicatorStyleOptions = defaultOptions,\n): TStyle extends GriffelStyle ? GriffelStyle : GriffelResetStyle {\n  return {\n    ':focus': {\n      outlineStyle: enableOutline ? undefined : 'none',\n    },\n    ':focus-visible': {\n      outlineStyle: enableOutline ? undefined : 'none',\n    },\n\n    ...(selector === 'focus' && {\n      [`&[${FOCUS_VISIBLE_ATTR}]`]: style,\n    }),\n    ...(selector === 'focus-within' && {\n      [`&[${FOCUS_WITHIN_ATTR}]:${selector}`]: style,\n    }),\n  };\n}\n"],"mappings":"AAAA,SAASA,cAAc,EAAEC,kBAAkB,EAAEC,iBAAiB,QAAQ,aAAa;AAsBnF;;;;;;;AAOA,OAAM,SAAUC,+BAA+BA,CAC7CC,KAAa,EACb;EACEC,QAAQ,GAAGL,cAAc,CAACK,QAAQ;EAClCC,aAAa,GAAG;AAAK,IACqBN,cAAc;EAE1D,OAAO;IACL,QAAQ,EAAE;MACRO,YAAY,EAAED,aAAa,GAAGE,SAAS,GAAG;KAC3C;IACD,gBAAgB,EAAE;MAChBD,YAAY,EAAED,aAAa,GAAGE,SAAS,GAAG;KAC3C;IAED,IAAIH,QAAQ,KAAK,OAAO,IAAI;MAC1B,CAAC,KAAKJ,kBAAkB,GAAG,GAAGG;KAC/B,CAAC;IACF,IAAIC,QAAQ,KAAK,cAAc,IAAI;MACjC,CAAC,KAAKH,iBAAiB,KAAKG,QAAQ,EAAE,GAAGD;KAC1C;GACF;AACH"}
+{"version":3,"names":["defaultOptions","FOCUS_VISIBLE_ATTR","FOCUS_WITHIN_ATTR","createCustomFocusIndicatorStyle","style","selector","enableOutline","outlineStyle","undefined"],"sources":["../../src/focus/createCustomFocusIndicatorStyle.ts"],"sourcesContent":["import { defaultOptions, FOCUS_VISIBLE_ATTR, FOCUS_WITHIN_ATTR } from './constants';\nimport { makeResetStyles } from '@griffel/react';\nimport type { GriffelStyle } from '@griffel/react';\n\n// TODO: Use the type directly from @griffel/react\n// https://github.com/microsoft/griffel/pull/278\ntype GriffelResetStyle = Parameters<typeof makeResetStyles>[0];\n\nexport interface CreateCustomFocusIndicatorStyleOptions {\n  /**\n   * Control if the indicator appears when the corresponding element is focused,\n   * or any child is focused within the corresponding element.\n   * @default 'focus'\n   */\n  selector?: 'focus' | 'focus-within';\n  /**\n   * Enables the browser default outline style\n   * @default false\n   */\n  enableOutline?: boolean;\n}\n\n/**\n * Creates a style for @see makeStyles that includes the necessary selectors for focus.\n * Should be used only when @see createFocusOutlineStyle does not fit requirements\n *\n * @param style - styling applied on focus, defaults to @see getDefaultFocusOutlineStyles\n * @param options - Configure the style of the focus outline\n */\nexport function createCustomFocusIndicatorStyle<TStyle extends GriffelStyle | GriffelResetStyle>(\n  style: TStyle,\n  {\n    selector = defaultOptions.selector,\n    enableOutline = false,\n  }: CreateCustomFocusIndicatorStyleOptions = defaultOptions,\n): TStyle extends GriffelStyle ? GriffelStyle : GriffelResetStyle {\n  return {\n    ':focus': {\n      outlineStyle: enableOutline ? undefined : 'none',\n    },\n    ':focus-visible': {\n      outlineStyle: enableOutline ? undefined : 'none',\n    },\n\n    ...(selector === 'focus' && {\n      [`&[${FOCUS_VISIBLE_ATTR}]`]: style,\n    }),\n    ...(selector === 'focus-within' && {\n      [`&[${FOCUS_WITHIN_ATTR}]:${selector}`]: style,\n    }),\n  };\n}\n"],"mappings":"AAAA,SAASA,cAAc,EAAEC,kBAAkB,EAAEC,iBAAiB,QAAQ;AAsBtE;;;;;;;AAOA,OAAO,SAASC,gCACdC,KAAa,EACb;EACEC,QAAA,GAAWL,cAAA,CAAeK,QAAQ;EAClCC,aAAA,GAAgB;AAAK,CACkB,GAAGN,cAAc,EACM;EAChE,OAAO;IACL,UAAU;MACRO,YAAA,EAAcD,aAAA,GAAgBE,SAAA,GAAY;IAC5C;IACA,kBAAkB;MAChBD,YAAA,EAAcD,aAAA,GAAgBE,SAAA,GAAY;IAC5C;IAEA,IAAIH,QAAA,KAAa,WAAW;MAC1B,CAAE,KAAIJ,kBAAmB,GAAE,GAAGG;IAChC,CAAC;IACD,IAAIC,QAAA,KAAa,kBAAkB;MACjC,CAAE,KAAIH,iBAAkB,KAAIG,QAAS,EAAC,GAAGD;IAC3C,CAAC;EACH;AACF"}

package/lib/focus/createFocusOutlineStyle.js

@@ -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,25 +10,24 @@ import { defaultOptions } from './constants';
  * @returns focus outline styles object
  */
 const getFocusOutlineStyles = options => {
-  var _a, _b, _c, _d;
   const {
     outlineRadius,
     outlineColor,
     outlineOffset,
     outlineWidth
   } = options;
-  const outlineOffsetTop = ((_a = outlineOffset) === null || _a === void 0 ? void 0 : _a.top) || outlineOffset;
-  const outlineOffsetBottom = ((_b = outlineOffset) === null || _b === void 0 ? void 0 : _b.bottom) || outlineOffset;
-  const outlineOffsetLeft = ((_c = outlineOffset) === null || _c === void 0 ? void 0 : _c.left) || outlineOffset;
-  const outlineOffsetRight = ((_d = outlineOffset) === null || _d === void 0 ? void 0 : _d.right) || outlineOffset;
+  const outlineOffsetTop = outlineOffset?.top || outlineOffset;
+  const outlineOffsetBottom = outlineOffset?.bottom || outlineOffset;
+  const outlineOffsetLeft = outlineOffset?.left || outlineOffset;
+  const outlineOffsetRight = 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),
@@ -53,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","_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"}
+{"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"}

package/lib/focus/focusVisiblePolyfill.js

@@ -1,11 +1,12 @@
-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
- * @param win - window
+ * @param targetWindow - window
  */
-export function applyFocusVisiblePolyfill(scope, win) {
+export function applyFocusVisiblePolyfill(scope, targetWindow) {
   if (alreadyInScope(scope)) {
     // Focus visible polyfill already applied at this scope
     return () => undefined;
@@ -13,7 +14,7 @@ export function applyFocusVisiblePolyfill(scope, win) {
   const state = {
     current: undefined
   };
-  const keyborg = createKeyborg(win);
+  const keyborg = createKeyborg(targetWindow);
   // When navigation mode changes remove the focus-visible selector
   keyborg.subscribe(isNavigatingWithKeyboard => {
     if (!isNavigatingWithKeyboard && state.current) {
@@ -44,28 +45,22 @@ export function applyFocusVisiblePolyfill(scope, win) {
     }
   };
   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);
 }
-function isHTMLElement(target) {
-  if (!target) {
-    return false;
-  }
-  return Boolean(target && typeof target === 'object' && 'classList' in target && 'contains' in target);
-}
 function alreadyInScope(el) {
   if (!el) {
     return false;
@@ -73,6 +68,6 @@ function alreadyInScope(el) {
   if (el.focusVisible) {
     return true;
   }
-  return alreadyInScope(el === null || el === void 0 ? void 0 : el.parentElement);
+  return alreadyInScope(el?.parentElement);
 }
 //# sourceMappingURL=focusVisiblePolyfill.js.map

package/lib/focus/focusVisiblePolyfill.js.map

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

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

package/lib/focus/index.js

@@ -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,"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"]}
+{"version":3,"names":[],"sources":["../../src/focus/index.ts"],"sourcesContent":["export * from './createCustomFocusIndicatorStyle';\nexport * from './createFocusOutlineStyle';\nexport * from './focusVisiblePolyfill';\nexport * from './focusWithinPolyfill';\n"],"mappings":"AAAA,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc"}

package/lib/hooks/index.js

@@ -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,"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"]}
+{"version":3,"names":[],"sources":["../../src/hooks/index.ts"],"sourcesContent":["export * from './useArrowNavigationGroup';\nexport * from './useFocusableGroup';\nexport * from './useFocusFinders';\nexport * from './useFocusVisible';\nexport * from './useFocusWithin';\nexport * from './useKeyboardNavAttribute';\nexport * from './useModalAttributes';\nexport * from './useTabsterAttributes';\n"],"mappings":"AAAA,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc"}

package/lib/hooks/useArrowNavigationGroup.js

@@ -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 !== null && axis !== void 0 ? axis : 'vertical'),
+      direction: axisToMoverDirection(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;
   }