@fluentui/react-tabster 9.12.10 → 9.13.1

package/CHANGELOG.json

@@ -2,7 +2,102 @@
   "name": "@fluentui/react-tabster",
   "entries": [
     {
-      "date": "Wed, 20 Sep 2023 14:13:59 GMT",
+      "date": "Tue, 26 Sep 2023 17:44:18 GMT",
+      "tag": "@fluentui/react-tabster_v9.13.1",
+      "version": "9.13.1",
+      "comments": {
+        "patch": [
+          {
+            "author": "yuanboxue@microsoft.com",
+            "package": "@fluentui/react-tabster",
+            "commit": "05a23f6f5f331841c9ac9fb63764440c543f791d",
+            "comment": "chore: trigger manual version bump after broken release"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-tabster",
+            "comment": "Bump @fluentui/react-shared-contexts to v9.9.1",
+            "commit": "05a23f6f5f331841c9ac9fb63764440c543f791d"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-tabster",
+            "comment": "Bump @fluentui/react-theme to v9.1.14",
+            "commit": "05a23f6f5f331841c9ac9fb63764440c543f791d"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-tabster",
+            "comment": "Bump @fluentui/react-utilities to v9.13.5",
+            "commit": "05a23f6f5f331841c9ac9fb63764440c543f791d"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Tue, 26 Sep 2023 15:31:47 GMT",
+      "tag": "@fluentui/react-tabster_v9.13.0",
+      "version": "9.13.0",
+      "comments": {
+        "patch": [
+          {
+            "author": "martinhochel@microsoft.com",
+            "package": "@fluentui/react-tabster",
+            "commit": "e61473fa10195f6ebf2308205c1e72e91b711831",
+            "comment": "fix: bump swc core to mitigate transpilation memory leaks"
+          }
+        ],
+        "minor": [
+          {
+            "author": "bernardo.sunderhus@gmail.com",
+            "package": "@fluentui/react-tabster",
+            "commit": "ada4daa280405d7756261d2416c8986b056f86ca",
+            "comment": "feat: adds suffixes to selectors on focus creator methods"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-tabster",
+            "comment": "Bump @fluentui/react-shared-contexts to v9.9.0",
+            "commit": "e16520437e10cd824ac254dd797e32762b5de72d"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-tabster",
+            "comment": "Bump @fluentui/react-theme to v9.1.13",
+            "commit": "e16520437e10cd824ac254dd797e32762b5de72d"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-tabster",
+            "comment": "Bump @fluentui/react-utilities to v9.13.4",
+            "commit": "e16520437e10cd824ac254dd797e32762b5de72d"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Wed, 20 Sep 2023 17:47:44 GMT",
+      "tag": "@fluentui/react-tabster_v9.12.11",
+      "version": "9.12.11",
+      "comments": {
+        "patch": [
+          {
+            "author": "martinhochel@microsoft.com",
+            "package": "@fluentui/react-tabster",
+            "commit": "41d0ed0376ad79f1f5f5c4c7487515a1c6be35f0",
+            "comment": "chore: trigger manual version bump after broken release"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-tabster",
+            "comment": "Bump @fluentui/react-shared-contexts to v9.8.1",
+            "commit": "41d0ed0376ad79f1f5f5c4c7487515a1c6be35f0"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Wed, 20 Sep 2023 14:59:53 GMT",
       "tag": "@fluentui/react-tabster_v9.12.10",
       "version": "9.12.10",
       "comments": {

package/CHANGELOG.md

@@ -1,12 +1,50 @@
 # Change Log - @fluentui/react-tabster
 
-This log was last generated on Wed, 20 Sep 2023 14:13:59 GMT and should not be manually modified.
+This log was last generated on Tue, 26 Sep 2023 17:44:18 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.13.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-tabster_v9.13.1)
+
+Tue, 26 Sep 2023 17:44:18 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tabster_v9.13.0..@fluentui/react-tabster_v9.13.1)
+
+### Patches
+
+- chore: trigger manual version bump after broken release ([PR #29303](https://github.com/microsoft/fluentui/pull/29303) by yuanboxue@microsoft.com)
+- Bump @fluentui/react-shared-contexts to v9.9.1 ([PR #29303](https://github.com/microsoft/fluentui/pull/29303) by beachball)
+- Bump @fluentui/react-theme to v9.1.14 ([PR #29303](https://github.com/microsoft/fluentui/pull/29303) by beachball)
+- Bump @fluentui/react-utilities to v9.13.5 ([PR #29303](https://github.com/microsoft/fluentui/pull/29303) by beachball)
+
+## [9.13.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-tabster_v9.13.0)
+
+Tue, 26 Sep 2023 15:31:47 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tabster_v9.12.11..@fluentui/react-tabster_v9.13.0)
+
+### Minor changes
+
+- feat: adds suffixes to selectors on focus creator methods ([PR #29209](https://github.com/microsoft/fluentui/pull/29209) by bernardo.sunderhus@gmail.com)
+- Bump @fluentui/react-shared-contexts to v9.9.0 ([PR #29300](https://github.com/microsoft/fluentui/pull/29300) by beachball)
+- Bump @fluentui/react-theme to v9.1.13 ([PR #29300](https://github.com/microsoft/fluentui/pull/29300) by beachball)
+- Bump @fluentui/react-utilities to v9.13.4 ([PR #29300](https://github.com/microsoft/fluentui/pull/29300) by beachball)
+
+### Patches
+
+- fix: bump swc core to mitigate transpilation memory leaks ([PR #29253](https://github.com/microsoft/fluentui/pull/29253) by martinhochel@microsoft.com)
+
+## [9.12.11](https://github.com/microsoft/fluentui/tree/@fluentui/react-tabster_v9.12.11)
+
+Wed, 20 Sep 2023 17:47:44 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tabster_v9.12.10..@fluentui/react-tabster_v9.12.11)
+
+### Patches
+
+- chore: trigger manual version bump after broken release ([PR #29197](https://github.com/microsoft/fluentui/pull/29197) by martinhochel@microsoft.com)
+- Bump @fluentui/react-shared-contexts to v9.8.1 ([PR #29197](https://github.com/microsoft/fluentui/pull/29197) by beachball)
+
 ## [9.12.10](https://github.com/microsoft/fluentui/tree/@fluentui/react-tabster_v9.12.10)
 
-Wed, 20 Sep 2023 14:13:59 GMT 
+Wed, 20 Sep 2023 14:59:53 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tabster_v9.12.9..@fluentui/react-tabster_v9.12.10)
 
 ### Patches

package/dist/index.d.ts

@@ -18,15 +18,20 @@ export declare function applyFocusVisiblePolyfill(scope: HTMLElement, targetWind
  * @param style - styling applied on focus, defaults to @see getDefaultFocusOutlineStyles
  * @param options - Configure the style of the focus outline
  */
-export declare function createCustomFocusIndicatorStyle<TStyle extends GriffelStyle | GriffelResetStyle>(style: TStyle, { selector }?: CreateCustomFocusIndicatorStyleOptions): TStyle extends GriffelStyle ? GriffelStyle : GriffelResetStyle;
+export declare function createCustomFocusIndicatorStyle<TStyle extends GriffelStyle | GriffelResetStyle>(style: TStyle, { selector: selectorType, customizeSelector, }?: CreateCustomFocusIndicatorStyleOptions): TStyle extends GriffelStyle ? GriffelStyle : GriffelResetStyle;
 
 export declare interface CreateCustomFocusIndicatorStyleOptions {
     /**
      * Control if the indicator appears when the corresponding element is focused,
      * or any child is focused within the corresponding element.
      * @default 'focus'
+     * @alias selectorType
      */
     selector?: 'focus' | 'focus-within';
+    /**
+     * Customizes the selector provided based on the selector type.
+     */
+    customizeSelector?: (selector: string) => string;
     /**
      * Enables the browser default outline style
      * @deprecated The custom focus indicator no longer affects outline styles. Outline is overridden
@@ -42,7 +47,7 @@ export declare interface CreateCustomFocusIndicatorStyleOptions {
  * @param options - Configure the style of the focus outline
  * @returns focus outline styles object for @see makeStyles
  */
-export declare const createFocusOutlineStyle: ({ enableOutline, selector, style, }?: CreateFocusOutlineStyleOptions) => GriffelStyle;
+export declare const createFocusOutlineStyle: ({ enableOutline, selector, customizeSelector, style, }?: CreateFocusOutlineStyleOptions) => GriffelStyle;
 
 export declare interface CreateFocusOutlineStyleOptions extends Omit<CreateCustomFocusIndicatorStyleOptions, 'enableOutline'> {
     style?: Partial<FocusOutlineStyleOptions>;

package/lib/focus/constants.js

@@ -8,5 +8,6 @@ export const KEYBOARD_NAV_SELECTOR = `:global([${KEYBOARD_NAV_ATTRIBUTE}])`;
  */ export const FOCUS_WITHIN_ATTR = 'data-fui-focus-within';
 export const defaultOptions = {
     style: {},
-    selector: 'focus'
+    selector: 'focus',
+    customizeSelector: (selector)=>selector
 };

package/lib/focus/constants.js.map

@@ -1 +1 @@
-{"version":3,"sources":["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"],"names":["KEYBOARD_NAV_ATTRIBUTE","KEYBOARD_NAV_SELECTOR","FOCUS_VISIBLE_ATTR","FOCUS_WITHIN_ATTR","defaultOptions","style","selector"],"mappings":"AAAA,OAAO,MAAMA,yBAAyB,oBAA6B;AACnE,OAAO,MAAMC,wBAAwB,CAAC,SAAS,EAAED,uBAAuB,EAAE,CAAC,CAAU;AAErF;;CAEC,GACD,OAAO,MAAME,qBAAqB,yBAAyB;AAE3D;;CAEC,GACD,OAAO,MAAMC,oBAAoB,wBAAwB;AACzD,OAAO,MAAMC,iBAAiB;IAC5BC,OAAO,CAAC;IACRC,UAAU;AACZ,EAAW"}
+{"version":3,"sources":["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  customizeSelector: (selector: string) => selector,\n} as const;\n"],"names":["KEYBOARD_NAV_ATTRIBUTE","KEYBOARD_NAV_SELECTOR","FOCUS_VISIBLE_ATTR","FOCUS_WITHIN_ATTR","defaultOptions","style","selector","customizeSelector"],"mappings":"AAAA,OAAO,MAAMA,yBAAyB,oBAA6B;AACnE,OAAO,MAAMC,wBAAwB,CAAC,SAAS,EAAED,uBAAuB,EAAE,CAAC,CAAU;AAErF;;CAEC,GACD,OAAO,MAAME,qBAAqB,yBAAyB;AAE3D;;CAEC,GACD,OAAO,MAAMC,oBAAoB,wBAAwB;AACzD,OAAO,MAAMC,iBAAiB;IAC5BC,OAAO,CAAC;IACRC,UAAU;IACVC,mBAAmB,CAACD,WAAqBA;AAC3C,EAAW"}

package/lib/focus/createCustomFocusIndicatorStyle.js

@@ -5,13 +5,16 @@ import { defaultOptions, FOCUS_VISIBLE_ATTR, FOCUS_WITHIN_ATTR } from './constan
  *
  * @param style - styling applied on focus, defaults to @see getDefaultFocusOutlineStyles
  * @param options - Configure the style of the focus outline
- */ export function createCustomFocusIndicatorStyle(style, { selector = defaultOptions.selector } = defaultOptions) {
+ */ export function createCustomFocusIndicatorStyle(style, { selector: selectorType = defaultOptions.selector, customizeSelector = defaultOptions.customizeSelector } = defaultOptions) {
     return {
-        ...selector === 'focus' && {
-            [`&[${FOCUS_VISIBLE_ATTR}]`]: style
-        },
-        ...selector === 'focus-within' && {
-            [`&[${FOCUS_WITHIN_ATTR}]:${selector}`]: style
-        }
+        [customizeSelector(createBaseSelector(selectorType))]: style
     };
 }
+function createBaseSelector(selectorType) {
+    switch(selectorType){
+        case 'focus':
+            return `&[${FOCUS_VISIBLE_ATTR}]`;
+        case 'focus-within':
+            return `&[${FOCUS_WITHIN_ATTR}]:focus-within`;
+    }
+}

package/lib/focus/createCustomFocusIndicatorStyle.js.map

@@ -1 +1 @@
-{"version":3,"sources":["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   * @deprecated The custom focus indicator no longer affects outline styles. Outline is overridden\n   * in the default focus indicator function, `createFocusOutlineStyle`.\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  { selector = defaultOptions.selector }: CreateCustomFocusIndicatorStyleOptions = defaultOptions,\n): TStyle extends GriffelStyle ? GriffelStyle : GriffelResetStyle {\n  return {\n    ...(selector === 'focus' && {\n      [`&[${FOCUS_VISIBLE_ATTR}]`]: style,\n    }),\n    ...(selector === 'focus-within' && {\n      [`&[${FOCUS_WITHIN_ATTR}]:${selector}`]: style,\n    }),\n  };\n}\n"],"names":["defaultOptions","FOCUS_VISIBLE_ATTR","FOCUS_WITHIN_ATTR","createCustomFocusIndicatorStyle","style","selector"],"mappings":"AAAA,SAASA,cAAc,EAAEC,kBAAkB,EAAEC,iBAAiB,QAAQ,cAAc;AAuBpF;;;;;;CAMC,GACD,OAAO,SAASC,gCACdC,KAAa,EACb,EAAEC,WAAWL,eAAeK,QAAQ,EAA0C,GAAGL,cAAc;IAE/F,OAAO;QACL,GAAIK,aAAa,WAAW;YAC1B,CAAC,CAAC,EAAE,EAAEJ,mBAAmB,CAAC,CAAC,CAAC,EAAEG;QAChC,CAAC;QACD,GAAIC,aAAa,kBAAkB;YACjC,CAAC,CAAC,EAAE,EAAEH,kBAAkB,EAAE,EAAEG,SAAS,CAAC,CAAC,EAAED;QAC3C,CAAC;IACH;AACF"}
+{"version":3,"sources":["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   * @alias selectorType\n   */\n  selector?: 'focus' | 'focus-within';\n  /**\n   * Customizes the selector provided based on the selector type.\n   */\n  customizeSelector?: (selector: string) => string;\n  /**\n   * Enables the browser default outline style\n   * @deprecated The custom focus indicator no longer affects outline styles. Outline is overridden\n   * in the default focus indicator function, `createFocusOutlineStyle`.\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: selectorType = defaultOptions.selector,\n    customizeSelector = defaultOptions.customizeSelector,\n  }: CreateCustomFocusIndicatorStyleOptions = defaultOptions,\n): TStyle extends GriffelStyle ? GriffelStyle : GriffelResetStyle {\n  return { [customizeSelector(createBaseSelector(selectorType))]: style };\n}\n\nfunction createBaseSelector(selectorType: 'focus' | 'focus-within'): string {\n  switch (selectorType) {\n    case 'focus':\n      return `&[${FOCUS_VISIBLE_ATTR}]`;\n    case 'focus-within':\n      return `&[${FOCUS_WITHIN_ATTR}]:focus-within`;\n  }\n}\n"],"names":["defaultOptions","FOCUS_VISIBLE_ATTR","FOCUS_WITHIN_ATTR","createCustomFocusIndicatorStyle","style","selector","selectorType","customizeSelector","createBaseSelector"],"mappings":"AAAA,SAASA,cAAc,EAAEC,kBAAkB,EAAEC,iBAAiB,QAAQ,cAAc;AA4BpF;;;;;;CAMC,GACD,OAAO,SAASC,gCACdC,KAAa,EACb,EACEC,UAAUC,eAAeN,eAAeK,QAAQ,EAChDE,oBAAoBP,eAAeO,iBAAiB,EACb,GAAGP,cAAc;IAE1D,OAAO;QAAE,CAACO,kBAAkBC,mBAAmBF,eAAe,EAAEF;IAAM;AACxE;AAEA,SAASI,mBAAmBF,YAAsC;IAChE,OAAQA;QACN,KAAK;YACH,OAAO,CAAC,EAAE,EAAEL,mBAAmB,CAAC,CAAC;QACnC,KAAK;YACH,OAAO,CAAC,EAAE,EAAEC,kBAAkB,cAAc,CAAC;IACjD;AACF"}

package/lib/focus/createFocusOutlineStyle.js

@@ -9,8 +9,7 @@ import { defaultOptions } from './constants';
  * @param position - The position of the focus outline
  * @returns CSS value for the position of the focus outline
  */ function getOutlinePosition({ outlineWidth, outlineOffset }, position) {
-    var _outlineOffset;
-    const offsetValue = ((_outlineOffset = outlineOffset) === null || _outlineOffset === void 0 ? void 0 : _outlineOffset[position]) || outlineOffset;
+    const offsetValue = (outlineOffset === null || outlineOffset === void 0 ? void 0 : outlineOffset[position]) || outlineOffset;
     if (!outlineOffset) {
         return `calc(${outlineWidth} * -1)`;
     }
@@ -48,7 +47,7 @@ import { defaultOptions } from './constants';
  *
  * @param options - Configure the style of the focus outline
  * @returns focus outline styles object for @see makeStyles
- */ export const createFocusOutlineStyle = ({ enableOutline = false, selector = defaultOptions.selector, style = defaultOptions.style } = defaultOptions)=>({
+ */ export const createFocusOutlineStyle = ({ enableOutline = false, selector = defaultOptions.selector, customizeSelector, style = defaultOptions.style } = defaultOptions)=>({
         ':focus': {
             outlineStyle: enableOutline ? undefined : 'none'
         },
@@ -62,6 +61,7 @@ import { defaultOptions } from './constants';
             outlineWidth: '2px',
             ...style
         }), {
-            selector
+            selector,
+            customizeSelector
         })
     });

package/lib/focus/createFocusOutlineStyle.js.map

@@ -1 +1 @@
-{"version":3,"sources":["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 Omit<CreateCustomFocusIndicatorStyleOptions, 'enableOutline'> {\n  style?: Partial<FocusOutlineStyleOptions>;\n\n  /**\n   * Enables the browser default outline style\n   */\n  enableOutline?: boolean;\n}\n\n/**\n * Get the position of the focus outline\n *\n * @param options - Configures the style of the focus outline\n * @param position - The position of the focus outline\n * @returns CSS value for the position of the focus outline\n */\nfunction getOutlinePosition(\n  { outlineWidth, outlineOffset }: FocusOutlineStyleOptions,\n  position: 'top' | 'bottom' | 'left' | 'right',\n) {\n  const offsetValue = (outlineOffset as FocusOutlineOffset)?.[position] || outlineOffset;\n\n  if (!outlineOffset) {\n    return `calc(${outlineWidth} * -1)`;\n  }\n\n  return `calc(0px - ${outlineWidth} - ${offsetValue})`;\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, outlineWidth } = options;\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: getOutlinePosition(options, 'top'),\n      right: getOutlinePosition(options, 'right'),\n      bottom: getOutlinePosition(options, 'bottom'),\n      left: getOutlinePosition(options, 'left'),\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  enableOutline = false,\n  selector = defaultOptions.selector,\n  style = defaultOptions.style,\n}: CreateFocusOutlineStyleOptions = defaultOptions): GriffelStyle => ({\n  ':focus': {\n    outlineStyle: enableOutline ? undefined : 'none',\n  },\n  ':focus-visible': {\n    outlineStyle: enableOutline ? undefined : 'none',\n  },\n\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});\n"],"names":["tokens","shorthands","createCustomFocusIndicatorStyle","defaultOptions","getOutlinePosition","outlineWidth","outlineOffset","position","offsetValue","getFocusOutlineStyles","options","outlineRadius","outlineColor","borderColor","content","pointerEvents","zIndex","borderStyle","borderWidth","borderRadius","top","right","bottom","left","createFocusOutlineStyle","enableOutline","selector","style","outlineStyle","undefined","colorStrokeFocus2","borderRadiusMedium"],"mappings":"AAAA,SAASA,MAAM,QAAQ,wBAAwB;AAC/C,SAASC,UAAU,QAAQ,iBAAiB;AAE5C,SACEC,+BAA+B,QAE1B,oCAAoC;AAC3C,SAASC,cAAc,QAAQ,cAAc;AAsB7C;;;;;;CAMC,GACD,SAASC,mBACP,EAAEC,YAAY,EAAEC,aAAa,EAA4B,EACzDC,QAA6C;QAExBD;IAArB,MAAME,cAAc,EAACF,iBAAAA,2BAAAA,qCAAD,AAACA,cAAsC,CAACC,SAAS,KAAID;IAEzE,IAAI,CAACA,eAAe;QAClB,OAAO,CAAC,KAAK,EAAED,aAAa,MAAM,CAAC;IACrC;IAEA,OAAO,CAAC,WAAW,EAAEA,aAAa,GAAG,EAAEG,YAAY,CAAC,CAAC;AACvD;AAEA;;;;;;CAMC,GACD,MAAMC,wBAAwB,CAACC;IAC7B,MAAM,EAAEC,aAAa,EAAEC,YAAY,EAAEP,YAAY,EAAE,GAAGK;IAEtD,OAAO;QACL,GAAGT,WAAWY,WAAW,CAAC,cAAc;QACxC,WAAW;YACTC,SAAS;YACTP,UAAU;YACVQ,eAAe;YACfC,QAAQ;YAER,GAAGf,WAAWgB,WAAW,CAAC,QAAQ;YAClC,GAAGhB,WAAWiB,WAAW,CAACb,aAAa;YACvC,GAAGJ,WAAWkB,YAAY,CAACR,cAAc;YACzC,GAAGV,WAAWY,WAAW,CAACD,aAAa;YAEvCQ,KAAKhB,mBAAmBM,SAAS;YACjCW,OAAOjB,mBAAmBM,SAAS;YACnCY,QAAQlB,mBAAmBM,SAAS;YACpCa,MAAMnB,mBAAmBM,SAAS;QACpC;IACF;AACF;AAEA;;;;;;CAMC,GACD,OAAO,MAAMc,0BAA0B,CAAC,EACtCC,gBAAgB,KAAK,EACrBC,WAAWvB,eAAeuB,QAAQ,EAClCC,QAAQxB,eAAewB,KAAK,EACG,GAAGxB,cAAc,GAAoB,CAAA;QACpE,UAAU;YACRyB,cAAcH,gBAAgBI,YAAY;QAC5C;QACA,kBAAkB;YAChBD,cAAcH,gBAAgBI,YAAY;QAC5C;QAEA,GAAG3B,gCACDO,sBAAsB;YACpBG,cAAcZ,OAAO8B,iBAAiB;YACtCnB,eAAeX,OAAO+B,kBAAkB;YACxC,wDAAwD;YACxD1B,cAAc;YACd,GAAGsB,KAAK;QACV,IACA;YAAED;QAAS,EACZ;IACH,CAAA,EAAG"}
+{"version":3,"sources":["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 Omit<CreateCustomFocusIndicatorStyleOptions, 'enableOutline'> {\n  style?: Partial<FocusOutlineStyleOptions>;\n\n  /**\n   * Enables the browser default outline style\n   */\n  enableOutline?: boolean;\n}\n\n/**\n * Get the position of the focus outline\n *\n * @param options - Configures the style of the focus outline\n * @param position - The position of the focus outline\n * @returns CSS value for the position of the focus outline\n */\nfunction getOutlinePosition(\n  { outlineWidth, outlineOffset }: FocusOutlineStyleOptions,\n  position: 'top' | 'bottom' | 'left' | 'right',\n) {\n  const offsetValue = (outlineOffset as FocusOutlineOffset)?.[position] || outlineOffset;\n\n  if (!outlineOffset) {\n    return `calc(${outlineWidth} * -1)`;\n  }\n\n  return `calc(0px - ${outlineWidth} - ${offsetValue})`;\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, outlineWidth } = options;\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: getOutlinePosition(options, 'top'),\n      right: getOutlinePosition(options, 'right'),\n      bottom: getOutlinePosition(options, 'bottom'),\n      left: getOutlinePosition(options, 'left'),\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  enableOutline = false,\n  selector = defaultOptions.selector,\n  customizeSelector,\n  style = defaultOptions.style,\n}: CreateFocusOutlineStyleOptions = defaultOptions): GriffelStyle => ({\n  ':focus': {\n    outlineStyle: enableOutline ? undefined : 'none',\n  },\n  ':focus-visible': {\n    outlineStyle: enableOutline ? undefined : 'none',\n  },\n\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, customizeSelector },\n  ),\n});\n"],"names":["tokens","shorthands","createCustomFocusIndicatorStyle","defaultOptions","getOutlinePosition","outlineWidth","outlineOffset","position","offsetValue","getFocusOutlineStyles","options","outlineRadius","outlineColor","borderColor","content","pointerEvents","zIndex","borderStyle","borderWidth","borderRadius","top","right","bottom","left","createFocusOutlineStyle","enableOutline","selector","customizeSelector","style","outlineStyle","undefined","colorStrokeFocus2","borderRadiusMedium"],"mappings":"AAAA,SAASA,MAAM,QAAQ,wBAAwB;AAC/C,SAASC,UAAU,QAAQ,iBAAiB;AAE5C,SACEC,+BAA+B,QAE1B,oCAAoC;AAC3C,SAASC,cAAc,QAAQ,cAAc;AAsB7C;;;;;;CAMC,GACD,SAASC,mBACP,EAAEC,YAAY,EAAEC,aAAa,EAA4B,EACzDC,QAA6C;IAE7C,MAAMC,cAAc,CAACF,0BAAAA,oCAAD,AAACA,aAAsC,CAACC,SAAS,KAAID;IAEzE,IAAI,CAACA,eAAe;QAClB,OAAO,CAAC,KAAK,EAAED,aAAa,MAAM,CAAC;IACrC;IAEA,OAAO,CAAC,WAAW,EAAEA,aAAa,GAAG,EAAEG,YAAY,CAAC,CAAC;AACvD;AAEA;;;;;;CAMC,GACD,MAAMC,wBAAwB,CAACC;IAC7B,MAAM,EAAEC,aAAa,EAAEC,YAAY,EAAEP,YAAY,EAAE,GAAGK;IAEtD,OAAO;QACL,GAAGT,WAAWY,WAAW,CAAC,cAAc;QACxC,WAAW;YACTC,SAAS;YACTP,UAAU;YACVQ,eAAe;YACfC,QAAQ;YAER,GAAGf,WAAWgB,WAAW,CAAC,QAAQ;YAClC,GAAGhB,WAAWiB,WAAW,CAACb,aAAa;YACvC,GAAGJ,WAAWkB,YAAY,CAACR,cAAc;YACzC,GAAGV,WAAWY,WAAW,CAACD,aAAa;YAEvCQ,KAAKhB,mBAAmBM,SAAS;YACjCW,OAAOjB,mBAAmBM,SAAS;YACnCY,QAAQlB,mBAAmBM,SAAS;YACpCa,MAAMnB,mBAAmBM,SAAS;QACpC;IACF;AACF;AAEA;;;;;;CAMC,GACD,OAAO,MAAMc,0BAA0B,CAAC,EACtCC,gBAAgB,KAAK,EACrBC,WAAWvB,eAAeuB,QAAQ,EAClCC,iBAAiB,EACjBC,QAAQzB,eAAeyB,KAAK,EACG,GAAGzB,cAAc,GAAoB,CAAA;QACpE,UAAU;YACR0B,cAAcJ,gBAAgBK,YAAY;QAC5C;QACA,kBAAkB;YAChBD,cAAcJ,gBAAgBK,YAAY;QAC5C;QAEA,GAAG5B,gCACDO,sBAAsB;YACpBG,cAAcZ,OAAO+B,iBAAiB;YACtCpB,eAAeX,OAAOgC,kBAAkB;YACxC,wDAAwD;YACxD3B,cAAc;YACd,GAAGuB,KAAK;QACV,IACA;YAAEF;YAAUC;QAAkB,EAC/B;IACH,CAAA,EAAG"}

package/lib/focus/focusVisiblePolyfill.js

@@ -61,12 +61,11 @@ function removeFocusVisibleClass(el) {
     el.removeAttribute(FOCUS_VISIBLE_ATTR);
 }
 function alreadyInScope(el) {
-    var _el;
     if (!el) {
         return false;
     }
     if (el.focusVisible) {
         return true;
     }
-    return alreadyInScope((_el = el) === null || _el === void 0 ? void 0 : _el.parentElement);
+    return alreadyInScope(el === null || el === void 0 ? void 0 : el.parentElement);
 }

package/lib/focus/focusVisiblePolyfill.js.map

@@ -1 +1 @@
-{"version":3,"sources":["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"],"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"],"mappings":"AAAA,SAASA,aAAa,QAAQ,4BAA4B;AAC1D,SAASC,eAAe,EAAuBC,aAAa,EAAEC,cAAc,QAAQ,UAAU;AAE9F,SAASC,kBAAkB,QAAQ,cAAc;AAoBjD;;;;CAIC,GACD,OAAO,SAASC,0BAA0BC,KAAkB,EAAEC,YAAoB;IAChF,IAAIC,eAAeF,QAAQ;QACzB,uDAAuD;QACvD,OAAO,IAAMG;IACf;IAEA,MAAMC,QAA2B;QAC/BC,SAASF;IACX;IAEA,MAAMG,UAAUV,cAAcK;IAE9B,iEAAiE;IACjEK,QAAQC,SAAS,CAACC,CAAAA;QAChB,IAAI,CAACA,4BAA4BJ,MAAMC,OAAO,EAAE;YAC9CI,wBAAwBL,MAAMC,OAAO;YACrCD,MAAMC,OAAO,GAAGF;QAClB;IACF;IAEA,kFAAkF;IAClF,8CAA8C;IAC9C,MAAMO,kBAAkB,CAACC;QACvB,IAAIP,MAAMC,OAAO,EAAE;YACjBI,wBAAwBL,MAAMC,OAAO;YACrCD,MAAMC,OAAO,GAAGF;QAClB;QAEA,IAAIG,QAAQE,wBAAwB,MAAMd,cAAciB,EAAEC,MAAM,KAAKD,EAAEC,MAAM,EAAE;YAC7E,+EAA+E;YAC/ER,MAAMC,OAAO,GAAGM,EAAEC,MAAM;YACxBC,uBAAuBT,MAAMC,OAAO;QACtC;IACF;IAEA,iFAAiF;IACjF,MAAMS,eAAe,CAACH;QACpB,IAAI,CAACA,EAAEI,aAAa,IAAKrB,cAAciB,EAAEI,aAAa,KAAK,CAACf,MAAMgB,QAAQ,CAACL,EAAEI,aAAa,GAAI;YAC5F,IAAIX,MAAMC,OAAO,EAAE;gBACjBI,wBAAwBL,MAAMC,OAAO;gBACrCD,MAAMC,OAAO,GAAGF;YAClB;QACF;IACF;IAEAH,MAAMiB,gBAAgB,CAACtB,iBAAiBe;IACxCV,MAAMiB,gBAAgB,CAAC,YAAYH;IAClCd,MAA2CkB,YAAY,GAAG;IAE3D,kBAAkB;IAClB,OAAO;QACLlB,MAAMmB,mBAAmB,CAACxB,iBAAiBe;QAC3CV,MAAMmB,mBAAmB,CAAC,YAAYL;QACtC,OAAO,AAACd,MAA2CkB,YAAY;QAC/DrB,eAAeS;IACjB;AACF;AAEA,SAASO,uBAAuBO,EAAe;IAC7CA,GAAGC,YAAY,CAACvB,oBAAoB;AACtC;AAEA,SAASW,wBAAwBW,EAAe;IAC9CA,GAAGE,eAAe,CAACxB;AACrB;AAEA,SAASI,eAAekB,EAAkC;QASlCA;IARtB,IAAI,CAACA,IAAI;QACP,OAAO;IACT;IAEA,IAAI,AAACA,GAAwCF,YAAY,EAAE;QACzD,OAAO;IACT;IAEA,OAAOhB,gBAAekB,MAAAA,gBAAAA,0BAAAA,IAAIG,aAAa;AACzC"}
+{"version":3,"sources":["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"],"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"],"mappings":"AAAA,SAASA,aAAa,QAAQ,4BAA4B;AAC1D,SAASC,eAAe,EAAuBC,aAAa,EAAEC,cAAc,QAAQ,UAAU;AAE9F,SAASC,kBAAkB,QAAQ,cAAc;AAoBjD;;;;CAIC,GACD,OAAO,SAASC,0BAA0BC,KAAkB,EAAEC,YAAoB;IAChF,IAAIC,eAAeF,QAAQ;QACzB,uDAAuD;QACvD,OAAO,IAAMG;IACf;IAEA,MAAMC,QAA2B;QAC/BC,SAASF;IACX;IAEA,MAAMG,UAAUV,cAAcK;IAE9B,iEAAiE;IACjEK,QAAQC,SAAS,CAACC,CAAAA;QAChB,IAAI,CAACA,4BAA4BJ,MAAMC,OAAO,EAAE;YAC9CI,wBAAwBL,MAAMC,OAAO;YACrCD,MAAMC,OAAO,GAAGF;QAClB;IACF;IAEA,kFAAkF;IAClF,8CAA8C;IAC9C,MAAMO,kBAAkB,CAACC;QACvB,IAAIP,MAAMC,OAAO,EAAE;YACjBI,wBAAwBL,MAAMC,OAAO;YACrCD,MAAMC,OAAO,GAAGF;QAClB;QAEA,IAAIG,QAAQE,wBAAwB,MAAMd,cAAciB,EAAEC,MAAM,KAAKD,EAAEC,MAAM,EAAE;YAC7E,+EAA+E;YAC/ER,MAAMC,OAAO,GAAGM,EAAEC,MAAM;YACxBC,uBAAuBT,MAAMC,OAAO;QACtC;IACF;IAEA,iFAAiF;IACjF,MAAMS,eAAe,CAACH;QACpB,IAAI,CAACA,EAAEI,aAAa,IAAKrB,cAAciB,EAAEI,aAAa,KAAK,CAACf,MAAMgB,QAAQ,CAACL,EAAEI,aAAa,GAAI;YAC5F,IAAIX,MAAMC,OAAO,EAAE;gBACjBI,wBAAwBL,MAAMC,OAAO;gBACrCD,MAAMC,OAAO,GAAGF;YAClB;QACF;IACF;IAEAH,MAAMiB,gBAAgB,CAACtB,iBAAiBe;IACxCV,MAAMiB,gBAAgB,CAAC,YAAYH;IAClCd,MAA2CkB,YAAY,GAAG;IAE3D,kBAAkB;IAClB,OAAO;QACLlB,MAAMmB,mBAAmB,CAACxB,iBAAiBe;QAC3CV,MAAMmB,mBAAmB,CAAC,YAAYL;QACtC,OAAO,AAACd,MAA2CkB,YAAY;QAC/DrB,eAAeS;IACjB;AACF;AAEA,SAASO,uBAAuBO,EAAe;IAC7CA,GAAGC,YAAY,CAACvB,oBAAoB;AACtC;AAEA,SAASW,wBAAwBW,EAAe;IAC9CA,GAAGE,eAAe,CAACxB;AACrB;AAEA,SAASI,eAAekB,EAAkC;IACxD,IAAI,CAACA,IAAI;QACP,OAAO;IACT;IAEA,IAAI,AAACA,GAAwCF,YAAY,EAAE;QACzD,OAAO;IACT;IAEA,OAAOhB,eAAekB,eAAAA,yBAAAA,GAAIG,aAAa;AACzC"}

package/lib/hooks/useFocusFinders.js

@@ -7,29 +7,20 @@ import { useTabster } from './useTabster';
     const tabster = useTabster();
     const { targetDocument } = useFluent();
     // Narrow props for now and let need dictate additional props in the future
-    const findAllFocusable = React.useCallback((container, acceptCondition)=>{
-        var _tabster;
-        return ((_tabster = tabster) === null || _tabster === void 0 ? void 0 : _tabster.focusable.findAll({
+    const findAllFocusable = React.useCallback((container, acceptCondition)=>(tabster === null || tabster === void 0 ? void 0 : tabster.focusable.findAll({
             container,
             acceptCondition
-        })) || [];
-    }, [
+        })) || [], [
         tabster
     ]);
-    const findFirstFocusable = React.useCallback((container)=>{
-        var _tabster;
-        return (_tabster = tabster) === null || _tabster === void 0 ? void 0 : _tabster.focusable.findFirst({
+    const findFirstFocusable = React.useCallback((container)=>tabster === null || tabster === void 0 ? void 0 : tabster.focusable.findFirst({
             container
-        });
-    }, [
+        }), [
         tabster
     ]);
-    const findLastFocusable = React.useCallback((container)=>{
-        var _tabster;
-        return (_tabster = tabster) === null || _tabster === void 0 ? void 0 : _tabster.focusable.findLast({
+    const findLastFocusable = React.useCallback((container)=>tabster === null || tabster === void 0 ? void 0 : tabster.focusable.findLast({
             container
-        });
-    }, [
+        }), [
         tabster
     ]);
     const findNextFocusable = React.useCallback((currentElement, options = {})=>{

package/lib/hooks/useFocusFinders.js.map

@@ -1 +1 @@
-{"version":3,"sources":["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"],"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"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,sBAAsBC,SAAS,QAAQ,kCAAkC;AAClF,SAASC,UAAU,QAAQ,eAAe;AAE1C;;CAEC,GACD,OAAO,MAAMC,kBAAkB;IAC7B,MAAMC,UAAUF;IAChB,MAAM,EAAEG,cAAc,EAAE,GAAGJ;IAE3B,2EAA2E;IAC3E,MAAMK,mBAAmBP,MAAMQ,WAAW,CACxC,CAACC,WAAwBC;YACvBL;eAAAA,EAAAA,WAAAA,qBAAAA,+BAAAA,SAASM,SAAS,CAACC,OAAO,CAAC;YAAEH;YAAWC;QAAgB,OAAM,EAAE;OAClE;QAACL;KAAQ;IAGX,MAAMQ,qBAAqBb,MAAMQ,WAAW,CAC1C,CAACC;YAA2BJ;gBAAAA,WAAAA,qBAAAA,+BAAAA,SAASM,SAAS,CAACG,SAAS,CAAC;YAAEL;QAAU;OACrE;QAACJ;KAAQ;IAGX,MAAMU,oBAAoBf,MAAMQ,WAAW,CACzC,CAACC;YAA2BJ;gBAAAA,WAAAA,qBAAAA,+BAAAA,SAASM,SAAS,CAACK,QAAQ,CAAC;YAAEP;QAAU;OACpE;QAACJ;KAAQ;IAGX,MAAMY,oBAAoBjB,MAAMQ,WAAW,CACzC,CAACU,gBAA6BC,UAAkE,CAAC,CAAC;QAChG,IAAI,CAACd,WAAW,CAACC,gBAAgB;YAC/B,OAAO;QACT;QAEA,MAAM,EAAEG,YAAYH,eAAec,IAAI,EAAE,GAAGD;QAE5C,OAAOd,QAAQM,SAAS,CAACU,QAAQ,CAAC;YAAEH;YAAgBT;QAAU;IAChE,GACA;QAACJ;QAASC;KAAe;IAG3B,MAAMgB,oBAAoBtB,MAAMQ,WAAW,CACzC,CAACU,gBAA6BC,UAAkE,CAAC,CAAC;QAChG,IAAI,CAACd,WAAW,CAACC,gBAAgB;YAC/B,OAAO;QACT;QAEA,MAAM,EAAEG,YAAYH,eAAec,IAAI,EAAE,GAAGD;QAE5C,OAAOd,QAAQM,SAAS,CAACY,QAAQ,CAAC;YAAEL;YAAgBT;QAAU;IAChE,GACA;QAACJ;QAASC;KAAe;IAG3B,OAAO;QACLC;QACAM;QACAE;QACAE;QACAK;IACF;AACF,EAAE"}
+{"version":3,"sources":["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"],"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"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,sBAAsBC,SAAS,QAAQ,kCAAkC;AAClF,SAASC,UAAU,QAAQ,eAAe;AAE1C;;CAEC,GACD,OAAO,MAAMC,kBAAkB;IAC7B,MAAMC,UAAUF;IAChB,MAAM,EAAEG,cAAc,EAAE,GAAGJ;IAE3B,2EAA2E;IAC3E,MAAMK,mBAAmBP,MAAMQ,WAAW,CACxC,CAACC,WAAwBC,kBACvBL,CAAAA,oBAAAA,8BAAAA,QAASM,SAAS,CAACC,OAAO,CAAC;YAAEH;YAAWC;QAAgB,OAAM,EAAE,EAClE;QAACL;KAAQ;IAGX,MAAMQ,qBAAqBb,MAAMQ,WAAW,CAC1C,CAACC,YAA2BJ,oBAAAA,8BAAAA,QAASM,SAAS,CAACG,SAAS,CAAC;YAAEL;QAAU,IACrE;QAACJ;KAAQ;IAGX,MAAMU,oBAAoBf,MAAMQ,WAAW,CACzC,CAACC,YAA2BJ,oBAAAA,8BAAAA,QAASM,SAAS,CAACK,QAAQ,CAAC;YAAEP;QAAU,IACpE;QAACJ;KAAQ;IAGX,MAAMY,oBAAoBjB,MAAMQ,WAAW,CACzC,CAACU,gBAA6BC,UAAkE,CAAC,CAAC;QAChG,IAAI,CAACd,WAAW,CAACC,gBAAgB;YAC/B,OAAO;QACT;QAEA,MAAM,EAAEG,YAAYH,eAAec,IAAI,EAAE,GAAGD;QAE5C,OAAOd,QAAQM,SAAS,CAACU,QAAQ,CAAC;YAAEH;YAAgBT;QAAU;IAChE,GACA;QAACJ;QAASC;KAAe;IAG3B,MAAMgB,oBAAoBtB,MAAMQ,WAAW,CACzC,CAACU,gBAA6BC,UAAkE,CAAC,CAAC;QAChG,IAAI,CAACd,WAAW,CAACC,gBAAgB;YAC/B,OAAO;QACT;QAEA,MAAM,EAAEG,YAAYH,eAAec,IAAI,EAAE,GAAGD;QAE5C,OAAOd,QAAQM,SAAS,CAACY,QAAQ,CAAC;YAAEL;YAAgBT;QAAU;IAChE,GACA;QAACJ;QAASC;KAAe;IAG3B,OAAO;QACLC;QACAM;QACAE;QACAE;QACAK;IACF;AACF,EAAE"}

package/lib/hooks/useFocusVisible.js

@@ -7,8 +7,7 @@ export function useFocusVisible(options = {}) {
     var _options_targetDocument;
     const targetDocument = (_options_targetDocument = options.targetDocument) !== null && _options_targetDocument !== void 0 ? _options_targetDocument : contextValue.targetDocument;
     React.useEffect(()=>{
-        var _targetDocument;
-        if (((_targetDocument = targetDocument) === null || _targetDocument === void 0 ? void 0 : _targetDocument.defaultView) && scopeRef.current) {
+        if ((targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.defaultView) && scopeRef.current) {
             return applyFocusVisiblePolyfill(scopeRef.current, targetDocument.defaultView);
         }
     }, [

package/lib/hooks/useFocusVisible.js.map

@@ -1 +1 @@
-{"version":3,"sources":["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?: Document;\n};\n\nexport function useFocusVisible<TElement extends HTMLElement = HTMLElement>(options: UseFocusVisibleOptions = {}) {\n  const contextValue = useFluent();\n  const scopeRef = React.useRef<TElement>(null);\n\n  const targetDocument = options.targetDocument ?? contextValue.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"],"names":["React","useFluent_unstable","useFluent","applyFocusVisiblePolyfill","useFocusVisible","options","contextValue","scopeRef","useRef","targetDocument","useEffect","defaultView","current"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,sBAAsBC,SAAS,QAAQ,kCAAkC;AAElF,SAASC,yBAAyB,QAAQ,gCAAgC;AAM1E,OAAO,SAASC,gBAA4DC,UAAkC,CAAC,CAAC;IAC9G,MAAMC,eAAeJ;IACrB,MAAMK,WAAWP,MAAMQ,MAAM,CAAW;QAEjBH;IAAvB,MAAMI,iBAAiBJ,CAAAA,0BAAAA,QAAQI,cAAc,cAAtBJ,qCAAAA,0BAA0BC,aAAaG,cAAc;IAE5ET,MAAMU,SAAS,CAAC;YACVD;QAAJ,IAAIA,EAAAA,kBAAAA,4BAAAA,sCAAAA,gBAAgBE,WAAW,KAAIJ,SAASK,OAAO,EAAE;YACnD,OAAOT,0BAA0BI,SAASK,OAAO,EAAEH,eAAeE,WAAW;QAC/E;IACF,GAAG;QAACJ;QAAUE;KAAe;IAE7B,OAAOF;AACT"}
+{"version":3,"sources":["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?: Document;\n};\n\nexport function useFocusVisible<TElement extends HTMLElement = HTMLElement>(options: UseFocusVisibleOptions = {}) {\n  const contextValue = useFluent();\n  const scopeRef = React.useRef<TElement>(null);\n\n  const targetDocument = options.targetDocument ?? contextValue.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"],"names":["React","useFluent_unstable","useFluent","applyFocusVisiblePolyfill","useFocusVisible","options","contextValue","scopeRef","useRef","targetDocument","useEffect","defaultView","current"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,sBAAsBC,SAAS,QAAQ,kCAAkC;AAElF,SAASC,yBAAyB,QAAQ,gCAAgC;AAM1E,OAAO,SAASC,gBAA4DC,UAAkC,CAAC,CAAC;IAC9G,MAAMC,eAAeJ;IACrB,MAAMK,WAAWP,MAAMQ,MAAM,CAAW;QAEjBH;IAAvB,MAAMI,iBAAiBJ,CAAAA,0BAAAA,QAAQI,cAAc,cAAtBJ,qCAAAA,0BAA0BC,aAAaG,cAAc;IAE5ET,MAAMU,SAAS,CAAC;QACd,IAAID,CAAAA,2BAAAA,qCAAAA,eAAgBE,WAAW,KAAIJ,SAASK,OAAO,EAAE;YACnD,OAAOT,0BAA0BI,SAASK,OAAO,EAAEH,eAAeE,WAAW;QAC/E;IACF,GAAG;QAACJ;QAAUE;KAAe;IAE7B,OAAOF;AACT"}

package/lib/hooks/useFocusWithin.js

@@ -9,8 +9,7 @@ import { applyFocusWithinPolyfill } from '../focus/focusWithinPolyfill';
     const { targetDocument } = useFluent();
     const elementRef = React.useRef(null);
     React.useEffect(()=>{
-        var _targetDocument;
-        if (((_targetDocument = targetDocument) === null || _targetDocument === void 0 ? void 0 : _targetDocument.defaultView) && elementRef.current) {
+        if ((targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.defaultView) && elementRef.current) {
             return applyFocusWithinPolyfill(elementRef.current, targetDocument.defaultView);
         }
     }, [

package/lib/hooks/useFocusWithin.js.map

@@ -1 +1 @@
-{"version":3,"sources":["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"],"names":["React","useFluent_unstable","useFluent","applyFocusWithinPolyfill","useFocusWithin","targetDocument","elementRef","useRef","useEffect","defaultView","current"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,sBAAsBC,SAAS,QAAQ,kCAAkC;AAClF,SAASC,wBAAwB,QAAQ,+BAA+B;AAExE;;;;CAIC,GACD,OAAO,SAASC;IACd,MAAM,EAAEC,cAAc,EAAE,GAAGH;IAC3B,MAAMI,aAAaN,MAAMO,MAAM,CAAW;IAE1CP,MAAMQ,SAAS,CAAC;YACVH;QAAJ,IAAIA,EAAAA,kBAAAA,4BAAAA,sCAAAA,gBAAgBI,WAAW,KAAIH,WAAWI,OAAO,EAAE;YACrD,OAAOP,yBAAyBG,WAAWI,OAAO,EAAEL,eAAeI,WAAW;QAChF;IACF,GAAG;QAACH;QAAYD;KAAe;IAE/B,OAAOC;AACT"}
+{"version":3,"sources":["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"],"names":["React","useFluent_unstable","useFluent","applyFocusWithinPolyfill","useFocusWithin","targetDocument","elementRef","useRef","useEffect","defaultView","current"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,sBAAsBC,SAAS,QAAQ,kCAAkC;AAClF,SAASC,wBAAwB,QAAQ,+BAA+B;AAExE;;;;CAIC,GACD,OAAO,SAASC;IACd,MAAM,EAAEC,cAAc,EAAE,GAAGH;IAC3B,MAAMI,aAAaN,MAAMO,MAAM,CAAW;IAE1CP,MAAMQ,SAAS,CAAC;QACd,IAAIH,CAAAA,2BAAAA,qCAAAA,eAAgBI,WAAW,KAAIH,WAAWI,OAAO,EAAE;YACrD,OAAOP,yBAAyBG,WAAWI,OAAO,EAAEL,eAAeI,WAAW;QAChF;IACF,GAAG;QAACH;QAAYD;KAAe;IAE/B,OAAOC;AACT"}

package/lib/hooks/useFocusableGroup.js

@@ -5,17 +5,16 @@ import { useTabster } from './useTabster';
  * A hook that returns the necessary tabster attributes to support groupping.
  * @param options - Options to configure keyboard navigation
  */ export const useFocusableGroup = (options)=>{
-    var _options, _options1;
     const tabster = useTabster();
     if (tabster) {
         getGroupper(tabster);
     }
     return useTabsterAttributes({
         groupper: {
-            tabbability: getTabbability((_options = options) === null || _options === void 0 ? void 0 : _options.tabBehavior)
+            tabbability: getTabbability(options === null || options === void 0 ? void 0 : options.tabBehavior)
         },
         focusable: {
-            ignoreKeydown: (_options1 = options) === null || _options1 === void 0 ? void 0 : _options1.ignoreDefaultKeydown
+            ignoreKeydown: options === null || options === void 0 ? void 0 : options.ignoreDefaultKeydown
         }
     });
 };

package/lib/hooks/useFocusableGroup.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useFocusableGroup.ts"],"sourcesContent":["import { Types, getGroupper } from 'tabster';\nimport { useTabsterAttributes } from './useTabsterAttributes';\nimport { useTabster } from './useTabster';\n\nexport interface UseFocusableGroupOptions {\n  /**\n   * Behavior for the Tab key.\n   */\n  tabBehavior?: 'unlimited' | 'limited' | 'limited-trap-focus';\n\n  /**\n   * Tabster can ignore default handling of keydown events\n   */\n  ignoreDefaultKeydown?: Types.FocusableProps['ignoreKeydown'];\n}\n\n/**\n * A hook that returns the necessary tabster attributes to support groupping.\n * @param options - Options to configure keyboard navigation\n */\nexport const useFocusableGroup = (options?: UseFocusableGroupOptions): Types.TabsterDOMAttribute => {\n  const tabster = useTabster();\n\n  if (tabster) {\n    getGroupper(tabster);\n  }\n\n  return useTabsterAttributes({\n    groupper: {\n      tabbability: getTabbability(options?.tabBehavior),\n    },\n    focusable: {\n      ignoreKeydown: options?.ignoreDefaultKeydown,\n    },\n  });\n};\n\nconst getTabbability = (\n  tabBehavior?: UseFocusableGroupOptions['tabBehavior'],\n): Types.GroupperTabbability | undefined => {\n  switch (tabBehavior) {\n    case 'unlimited':\n      return Types.GroupperTabbabilities.Unlimited;\n    case 'limited':\n      return Types.GroupperTabbabilities.Limited;\n    case 'limited-trap-focus':\n      return Types.GroupperTabbabilities.LimitedTrapFocus;\n    default:\n      return undefined;\n  }\n};\n"],"names":["Types","getGroupper","useTabsterAttributes","useTabster","useFocusableGroup","options","tabster","groupper","tabbability","getTabbability","tabBehavior","focusable","ignoreKeydown","ignoreDefaultKeydown","GroupperTabbabilities","Unlimited","Limited","LimitedTrapFocus","undefined"],"mappings":"AAAA,SAASA,KAAK,EAAEC,WAAW,QAAQ,UAAU;AAC7C,SAASC,oBAAoB,QAAQ,yBAAyB;AAC9D,SAASC,UAAU,QAAQ,eAAe;AAc1C;;;CAGC,GACD,OAAO,MAAMC,oBAAoB,CAACC;QASAA,UAGbA;IAXnB,MAAMC,UAAUH;IAEhB,IAAIG,SAAS;QACXL,YAAYK;IACd;IAEA,OAAOJ,qBAAqB;QAC1BK,UAAU;YACRC,aAAaC,gBAAeJ,WAAAA,qBAAAA,+BAAAA,SAASK,WAAW;QAClD;QACAC,WAAW;YACTC,aAAa,GAAEP,YAAAA,qBAAAA,gCAAAA,UAASQ,oBAAoB;QAC9C;IACF;AACF,EAAE;AAEF,MAAMJ,iBAAiB,CACrBC;IAEA,OAAQA;QACN,KAAK;YACH,OAAOV,MAAMc,qBAAqB,CAACC,SAAS;QAC9C,KAAK;YACH,OAAOf,MAAMc,qBAAqB,CAACE,OAAO;QAC5C,KAAK;YACH,OAAOhB,MAAMc,qBAAqB,CAACG,gBAAgB;QACrD;YACE,OAAOC;IACX;AACF"}
+{"version":3,"sources":["useFocusableGroup.ts"],"sourcesContent":["import { Types, getGroupper } from 'tabster';\nimport { useTabsterAttributes } from './useTabsterAttributes';\nimport { useTabster } from './useTabster';\n\nexport interface UseFocusableGroupOptions {\n  /**\n   * Behavior for the Tab key.\n   */\n  tabBehavior?: 'unlimited' | 'limited' | 'limited-trap-focus';\n\n  /**\n   * Tabster can ignore default handling of keydown events\n   */\n  ignoreDefaultKeydown?: Types.FocusableProps['ignoreKeydown'];\n}\n\n/**\n * A hook that returns the necessary tabster attributes to support groupping.\n * @param options - Options to configure keyboard navigation\n */\nexport const useFocusableGroup = (options?: UseFocusableGroupOptions): Types.TabsterDOMAttribute => {\n  const tabster = useTabster();\n\n  if (tabster) {\n    getGroupper(tabster);\n  }\n\n  return useTabsterAttributes({\n    groupper: {\n      tabbability: getTabbability(options?.tabBehavior),\n    },\n    focusable: {\n      ignoreKeydown: options?.ignoreDefaultKeydown,\n    },\n  });\n};\n\nconst getTabbability = (\n  tabBehavior?: UseFocusableGroupOptions['tabBehavior'],\n): Types.GroupperTabbability | undefined => {\n  switch (tabBehavior) {\n    case 'unlimited':\n      return Types.GroupperTabbabilities.Unlimited;\n    case 'limited':\n      return Types.GroupperTabbabilities.Limited;\n    case 'limited-trap-focus':\n      return Types.GroupperTabbabilities.LimitedTrapFocus;\n    default:\n      return undefined;\n  }\n};\n"],"names":["Types","getGroupper","useTabsterAttributes","useTabster","useFocusableGroup","options","tabster","groupper","tabbability","getTabbability","tabBehavior","focusable","ignoreKeydown","ignoreDefaultKeydown","GroupperTabbabilities","Unlimited","Limited","LimitedTrapFocus","undefined"],"mappings":"AAAA,SAASA,KAAK,EAAEC,WAAW,QAAQ,UAAU;AAC7C,SAASC,oBAAoB,QAAQ,yBAAyB;AAC9D,SAASC,UAAU,QAAQ,eAAe;AAc1C;;;CAGC,GACD,OAAO,MAAMC,oBAAoB,CAACC;IAChC,MAAMC,UAAUH;IAEhB,IAAIG,SAAS;QACXL,YAAYK;IACd;IAEA,OAAOJ,qBAAqB;QAC1BK,UAAU;YACRC,aAAaC,eAAeJ,oBAAAA,8BAAAA,QAASK,WAAW;QAClD;QACAC,WAAW;YACTC,aAAa,EAAEP,oBAAAA,8BAAAA,QAASQ,oBAAoB;QAC9C;IACF;AACF,EAAE;AAEF,MAAMJ,iBAAiB,CACrBC;IAEA,OAAQA;QACN,KAAK;YACH,OAAOV,MAAMc,qBAAqB,CAACC,SAAS;QAC9C,KAAK;YACH,OAAOf,MAAMc,qBAAqB,CAACE,OAAO;QAC5C,KAAK;YACH,OAAOhB,MAAMc,qBAAqB,CAACG,gBAAgB;QACrD;YACE,OAAOC;IACX;AACF"}

package/lib/hooks/useTabster.js

@@ -9,9 +9,8 @@ import { useIsomorphicLayoutEffect } from '@fluentui/react-utilities';
  * @internal
  * @returns Tabster core instance
  */ export const useTabster = ()=>{
-    var _targetDocument;
     const { targetDocument } = useFluent();
-    const defaultView = ((_targetDocument = targetDocument) === null || _targetDocument === void 0 ? void 0 : _targetDocument.defaultView) || undefined;
+    const defaultView = (targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.defaultView) || undefined;
     const tabster = React.useMemo(()=>{
         if (!defaultView) {
             return null;

package/lib/hooks/useTabster.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useTabster.ts"],"sourcesContent":["import * as React from 'react';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport { createTabster, disposeTabster, Types as TabsterTypes } from 'tabster';\nimport { useIsomorphicLayoutEffect } from '@fluentui/react-utilities';\n\n/**\n * Tries to get a tabster instance on the current window or creates a new one\n * Since Tabster is single instance only, feel free to call this hook to ensure Tabster exists if necessary\n *\n * @internal\n * @returns Tabster core instance\n */\nexport const useTabster = (): TabsterTypes.TabsterCore | null => {\n  const { targetDocument } = useFluent();\n\n  const defaultView = targetDocument?.defaultView || undefined;\n  const tabster = React.useMemo(() => {\n    if (!defaultView) {\n      return null;\n    }\n\n    return createTabster(defaultView, { autoRoot: {}, controlTab: false });\n  }, [defaultView]);\n\n  useIsomorphicLayoutEffect(() => {\n    return () => {\n      if (tabster) {\n        disposeTabster(tabster);\n      }\n    };\n  }, [tabster]);\n\n  return tabster;\n};\n"],"names":["React","useFluent_unstable","useFluent","createTabster","disposeTabster","useIsomorphicLayoutEffect","useTabster","targetDocument","defaultView","undefined","tabster","useMemo","autoRoot","controlTab"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,sBAAsBC,SAAS,QAAQ,kCAAkC;AAClF,SAASC,aAAa,EAAEC,cAAc,QAA+B,UAAU;AAC/E,SAASC,yBAAyB,QAAQ,4BAA4B;AAEtE;;;;;;CAMC,GACD,OAAO,MAAMC,aAAa;QAGJC;IAFpB,MAAM,EAAEA,cAAc,EAAE,GAAGL;IAE3B,MAAMM,cAAcD,EAAAA,kBAAAA,4BAAAA,sCAAAA,gBAAgBC,WAAW,KAAIC;IACnD,MAAMC,UAAUV,MAAMW,OAAO,CAAC;QAC5B,IAAI,CAACH,aAAa;YAChB,OAAO;QACT;QAEA,OAAOL,cAAcK,aAAa;YAAEI,UAAU,CAAC;YAAGC,YAAY;QAAM;IACtE,GAAG;QAACL;KAAY;IAEhBH,0BAA0B;QACxB,OAAO;YACL,IAAIK,SAAS;gBACXN,eAAeM;YACjB;QACF;IACF,GAAG;QAACA;KAAQ;IAEZ,OAAOA;AACT,EAAE"}
+{"version":3,"sources":["useTabster.ts"],"sourcesContent":["import * as React from 'react';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport { createTabster, disposeTabster, Types as TabsterTypes } from 'tabster';\nimport { useIsomorphicLayoutEffect } from '@fluentui/react-utilities';\n\n/**\n * Tries to get a tabster instance on the current window or creates a new one\n * Since Tabster is single instance only, feel free to call this hook to ensure Tabster exists if necessary\n *\n * @internal\n * @returns Tabster core instance\n */\nexport const useTabster = (): TabsterTypes.TabsterCore | null => {\n  const { targetDocument } = useFluent();\n\n  const defaultView = targetDocument?.defaultView || undefined;\n  const tabster = React.useMemo(() => {\n    if (!defaultView) {\n      return null;\n    }\n\n    return createTabster(defaultView, { autoRoot: {}, controlTab: false });\n  }, [defaultView]);\n\n  useIsomorphicLayoutEffect(() => {\n    return () => {\n      if (tabster) {\n        disposeTabster(tabster);\n      }\n    };\n  }, [tabster]);\n\n  return tabster;\n};\n"],"names":["React","useFluent_unstable","useFluent","createTabster","disposeTabster","useIsomorphicLayoutEffect","useTabster","targetDocument","defaultView","undefined","tabster","useMemo","autoRoot","controlTab"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,sBAAsBC,SAAS,QAAQ,kCAAkC;AAClF,SAASC,aAAa,EAAEC,cAAc,QAA+B,UAAU;AAC/E,SAASC,yBAAyB,QAAQ,4BAA4B;AAEtE;;;;;;CAMC,GACD,OAAO,MAAMC,aAAa;IACxB,MAAM,EAAEC,cAAc,EAAE,GAAGL;IAE3B,MAAMM,cAAcD,CAAAA,2BAAAA,qCAAAA,eAAgBC,WAAW,KAAIC;IACnD,MAAMC,UAAUV,MAAMW,OAAO,CAAC;QAC5B,IAAI,CAACH,aAAa;YAChB,OAAO;QACT;QAEA,OAAOL,cAAcK,aAAa;YAAEI,UAAU,CAAC;YAAGC,YAAY;QAAM;IACtE,GAAG;QAACL;KAAY;IAEhBH,0BAA0B;QACxB,OAAO;YACL,IAAIK,SAAS;gBACXN,eAAeM;YACjB;QACF;IACF,GAAG;QAACA;KAAQ;IAEZ,OAAOA;AACT,EAAE"}

package/lib-commonjs/focus/constants.js

@@ -31,5 +31,6 @@ const FOCUS_VISIBLE_ATTR = 'data-fui-focus-visible';
 const FOCUS_WITHIN_ATTR = 'data-fui-focus-within';
 const defaultOptions = {
     style: {},
-    selector: 'focus'
+    selector: 'focus',
+    customizeSelector: (selector)=>selector
 };

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

@@ -1 +1 @@
-{"version":3,"sources":["constants.js"],"sourcesContent":["export const KEYBOARD_NAV_ATTRIBUTE = 'data-keyboard-nav';\nexport const KEYBOARD_NAV_SELECTOR = `:global([${KEYBOARD_NAV_ATTRIBUTE}])`;\n/**\n * @internal\n */ export const FOCUS_VISIBLE_ATTR = 'data-fui-focus-visible';\n/**\n * @internal\n */ export const FOCUS_WITHIN_ATTR = 'data-fui-focus-within';\nexport const defaultOptions = {\n    style: {},\n    selector: 'focus'\n};\n"],"names":["KEYBOARD_NAV_ATTRIBUTE","KEYBOARD_NAV_SELECTOR","FOCUS_VISIBLE_ATTR","FOCUS_WITHIN_ATTR","defaultOptions","style","selector"],"mappings":";;;;;;;;;;;IAAaA,sBAAsB;eAAtBA;;IACAC,qBAAqB;eAArBA;;IAGIC,kBAAkB;eAAlBA;;IAGAC,iBAAiB;eAAjBA;;IACJC,cAAc;eAAdA;;;AARN,MAAMJ,yBAAyB;AAC/B,MAAMC,wBAAwB,CAAC,SAAS,EAAED,uBAAuB,EAAE,CAAC;AAGhE,MAAME,qBAAqB;AAG3B,MAAMC,oBAAoB;AAC9B,MAAMC,iBAAiB;IAC1BC,OAAO,CAAC;IACRC,UAAU;AACd"}
+{"version":3,"sources":["constants.js"],"sourcesContent":["export const KEYBOARD_NAV_ATTRIBUTE = 'data-keyboard-nav';\nexport const KEYBOARD_NAV_SELECTOR = `:global([${KEYBOARD_NAV_ATTRIBUTE}])`;\n/**\n * @internal\n */ export const FOCUS_VISIBLE_ATTR = 'data-fui-focus-visible';\n/**\n * @internal\n */ export const FOCUS_WITHIN_ATTR = 'data-fui-focus-within';\nexport const defaultOptions = {\n    style: {},\n    selector: 'focus',\n    customizeSelector: (selector)=>selector\n};\n"],"names":["KEYBOARD_NAV_ATTRIBUTE","KEYBOARD_NAV_SELECTOR","FOCUS_VISIBLE_ATTR","FOCUS_WITHIN_ATTR","defaultOptions","style","selector","customizeSelector"],"mappings":";;;;;;;;;;;IAAaA,sBAAsB;eAAtBA;;IACAC,qBAAqB;eAArBA;;IAGIC,kBAAkB;eAAlBA;;IAGAC,iBAAiB;eAAjBA;;IACJC,cAAc;eAAdA;;;AARN,MAAMJ,yBAAyB;AAC/B,MAAMC,wBAAwB,CAAC,SAAS,EAAED,uBAAuB,EAAE,CAAC;AAGhE,MAAME,qBAAqB;AAG3B,MAAMC,oBAAoB;AAC9B,MAAMC,iBAAiB;IAC1BC,OAAO,CAAC;IACRC,UAAU;IACVC,mBAAmB,CAACD,WAAWA;AACnC"}

package/lib-commonjs/focus/createCustomFocusIndicatorStyle.js

@@ -9,13 +9,16 @@ Object.defineProperty(exports, "createCustomFocusIndicatorStyle", {
     }
 });
 const _constants = require("./constants");
-function createCustomFocusIndicatorStyle(style, { selector = _constants.defaultOptions.selector } = _constants.defaultOptions) {
+function createCustomFocusIndicatorStyle(style, { selector: selectorType = _constants.defaultOptions.selector, customizeSelector = _constants.defaultOptions.customizeSelector } = _constants.defaultOptions) {
     return {
-        ...selector === 'focus' && {
-            [`&[${_constants.FOCUS_VISIBLE_ATTR}]`]: style
-        },
-        ...selector === 'focus-within' && {
-            [`&[${_constants.FOCUS_WITHIN_ATTR}]:${selector}`]: style
-        }
+        [customizeSelector(createBaseSelector(selectorType))]: style
     };
 }
+function createBaseSelector(selectorType) {
+    switch(selectorType){
+        case 'focus':
+            return `&[${_constants.FOCUS_VISIBLE_ATTR}]`;
+        case 'focus-within':
+            return `&[${_constants.FOCUS_WITHIN_ATTR}]:focus-within`;
+    }
+}

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

@@ -1 +1 @@
-{"version":3,"sources":["createCustomFocusIndicatorStyle.js"],"sourcesContent":["import { defaultOptions, FOCUS_VISIBLE_ATTR, FOCUS_WITHIN_ATTR } from './constants';\n/**\n * Creates a style for @see makeStyles that includes the necessary selectors for focus.\n * Should be used only when @see createFocusOutlineStyle does not fit requirements\n *\n * @param style - styling applied on focus, defaults to @see getDefaultFocusOutlineStyles\n * @param options - Configure the style of the focus outline\n */ export function createCustomFocusIndicatorStyle(style, { selector = defaultOptions.selector } = defaultOptions) {\n    return {\n        ...selector === 'focus' && {\n            [`&[${FOCUS_VISIBLE_ATTR}]`]: style\n        },\n        ...selector === 'focus-within' && {\n            [`&[${FOCUS_WITHIN_ATTR}]:${selector}`]: style\n        }\n    };\n}\n"],"names":["createCustomFocusIndicatorStyle","style","selector","defaultOptions","FOCUS_VISIBLE_ATTR","FOCUS_WITHIN_ATTR"],"mappings":";;;;+BAOoBA;;;eAAAA;;;2BAPkD;AAO3D,SAASA,gCAAgCC,KAAK,EAAE,EAAEC,WAAWC,yBAAc,CAACD,QAAQ,EAAE,GAAGC,yBAAc;IAC9G,OAAO;QACH,GAAGD,aAAa,WAAW;YACvB,CAAC,CAAC,EAAE,EAAEE,6BAAkB,CAAC,CAAC,CAAC,CAAC,EAAEH;QAClC,CAAC;QACD,GAAGC,aAAa,kBAAkB;YAC9B,CAAC,CAAC,EAAE,EAAEG,4BAAiB,CAAC,EAAE,EAAEH,SAAS,CAAC,CAAC,EAAED;QAC7C,CAAC;IACL;AACJ"}
+{"version":3,"sources":["createCustomFocusIndicatorStyle.js"],"sourcesContent":["import { defaultOptions, FOCUS_VISIBLE_ATTR, FOCUS_WITHIN_ATTR } from './constants';\n/**\n * Creates a style for @see makeStyles that includes the necessary selectors for focus.\n * Should be used only when @see createFocusOutlineStyle does not fit requirements\n *\n * @param style - styling applied on focus, defaults to @see getDefaultFocusOutlineStyles\n * @param options - Configure the style of the focus outline\n */ export function createCustomFocusIndicatorStyle(style, { selector: selectorType = defaultOptions.selector, customizeSelector = defaultOptions.customizeSelector } = defaultOptions) {\n    return {\n        [customizeSelector(createBaseSelector(selectorType))]: style\n    };\n}\nfunction createBaseSelector(selectorType) {\n    switch(selectorType){\n        case 'focus':\n            return `&[${FOCUS_VISIBLE_ATTR}]`;\n        case 'focus-within':\n            return `&[${FOCUS_WITHIN_ATTR}]:focus-within`;\n    }\n}\n"],"names":["createCustomFocusIndicatorStyle","style","selector","selectorType","defaultOptions","customizeSelector","createBaseSelector","FOCUS_VISIBLE_ATTR","FOCUS_WITHIN_ATTR"],"mappings":";;;;+BAOoBA;;;eAAAA;;;2BAPkD;AAO3D,SAASA,gCAAgCC,KAAK,EAAE,EAAEC,UAAUC,eAAeC,yBAAc,CAACF,QAAQ,EAAEG,oBAAoBD,yBAAc,CAACC,iBAAiB,EAAE,GAAGD,yBAAc;IAClL,OAAO;QACH,CAACC,kBAAkBC,mBAAmBH,eAAe,EAAEF;IAC3D;AACJ;AACA,SAASK,mBAAmBH,YAAY;IACpC,OAAOA;QACH,KAAK;YACD,OAAO,CAAC,EAAE,EAAEI,6BAAkB,CAAC,CAAC,CAAC;QACrC,KAAK;YACD,OAAO,CAAC,EAAE,EAAEC,4BAAiB,CAAC,cAAc,CAAC;IACrD;AACJ"}

package/lib-commonjs/focus/createFocusOutlineStyle.js

@@ -19,8 +19,7 @@ const _constants = require("./constants");
  * @param position - The position of the focus outline
  * @returns CSS value for the position of the focus outline
  */ function getOutlinePosition({ outlineWidth, outlineOffset }, position) {
-    var _outlineOffset;
-    const offsetValue = ((_outlineOffset = outlineOffset) === null || _outlineOffset === void 0 ? void 0 : _outlineOffset[position]) || outlineOffset;
+    const offsetValue = (outlineOffset === null || outlineOffset === void 0 ? void 0 : outlineOffset[position]) || outlineOffset;
     if (!outlineOffset) {
         return `calc(${outlineWidth} * -1)`;
     }
@@ -52,7 +51,7 @@ const _constants = require("./constants");
         }
     };
 };
-const createFocusOutlineStyle = ({ enableOutline = false, selector = _constants.defaultOptions.selector, style = _constants.defaultOptions.style } = _constants.defaultOptions)=>({
+const createFocusOutlineStyle = ({ enableOutline = false, selector = _constants.defaultOptions.selector, customizeSelector, style = _constants.defaultOptions.style } = _constants.defaultOptions)=>({
         ':focus': {
             outlineStyle: enableOutline ? undefined : 'none'
         },
@@ -66,6 +65,7 @@ const createFocusOutlineStyle = ({ enableOutline = false, selector = _constants.
             outlineWidth: '2px',
             ...style
         }), {
-            selector
+            selector,
+            customizeSelector
         })
     });

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

@@ -1 +1 @@
-{"version":3,"sources":["createFocusOutlineStyle.js"],"sourcesContent":["import { tokens } from '@fluentui/react-theme';\nimport { shorthands } from '@griffel/react';\nimport { createCustomFocusIndicatorStyle } from './createCustomFocusIndicatorStyle';\nimport { defaultOptions } from './constants';\n/**\n * Get the position of the focus outline\n *\n * @param options - Configures the style of the focus outline\n * @param position - The position of the focus outline\n * @returns CSS value for the position of the focus outline\n */ function getOutlinePosition({ outlineWidth, outlineOffset }, position) {\n    var _outlineOffset;\n    const offsetValue = ((_outlineOffset = outlineOffset) === null || _outlineOffset === void 0 ? void 0 : _outlineOffset[position]) || outlineOffset;\n    if (!outlineOffset) {\n        return `calc(${outlineWidth} * -1)`;\n    }\n    return `calc(0px - ${outlineWidth} - ${offsetValue})`;\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 */ const getFocusOutlineStyles = (options)=>{\n    const { outlineRadius, outlineColor, outlineWidth } = options;\n    return {\n        ...shorthands.borderColor('transparent'),\n        '::after': {\n            content: '\"\"',\n            position: 'absolute',\n            pointerEvents: 'none',\n            zIndex: 1,\n            ...shorthands.borderStyle('solid'),\n            ...shorthands.borderWidth(outlineWidth),\n            ...shorthands.borderRadius(outlineRadius),\n            ...shorthands.borderColor(outlineColor),\n            top: getOutlinePosition(options, 'top'),\n            right: getOutlinePosition(options, 'right'),\n            bottom: getOutlinePosition(options, 'bottom'),\n            left: getOutlinePosition(options, 'left')\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 */ export const createFocusOutlineStyle = ({ enableOutline = false, selector = defaultOptions.selector, style = defaultOptions.style } = defaultOptions)=>({\n        ':focus': {\n            outlineStyle: enableOutline ? undefined : 'none'\n        },\n        ':focus-visible': {\n            outlineStyle: enableOutline ? undefined : 'none'\n        },\n        ...createCustomFocusIndicatorStyle(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    });\n"],"names":["createFocusOutlineStyle","getOutlinePosition","outlineWidth","outlineOffset","position","_outlineOffset","offsetValue","getFocusOutlineStyles","options","outlineRadius","outlineColor","shorthands","borderColor","content","pointerEvents","zIndex","borderStyle","borderWidth","borderRadius","top","right","bottom","left","enableOutline","selector","defaultOptions","style","outlineStyle","undefined","createCustomFocusIndicatorStyle","tokens","colorStrokeFocus2","borderRadiusMedium"],"mappings":";;;;+BAkDiBA;;;eAAAA;;;4BAlDM;uBACI;iDACqB;2BACjB;AAC/B;;;;;;CAMC,GAAG,SAASC,mBAAmB,EAAEC,YAAY,EAAEC,aAAa,EAAE,EAAEC,QAAQ;IACrE,IAAIC;IACJ,MAAMC,cAAc,AAAC,CAAA,AAACD,CAAAA,iBAAiBF,aAAY,MAAO,QAAQE,mBAAmB,KAAK,IAAI,KAAK,IAAIA,cAAc,CAACD,SAAS,AAAD,KAAMD;IACpI,IAAI,CAACA,eAAe;QAChB,OAAO,CAAC,KAAK,EAAED,aAAa,MAAM,CAAC;IACvC;IACA,OAAO,CAAC,WAAW,EAAEA,aAAa,GAAG,EAAEI,YAAY,CAAC,CAAC;AACzD;AACA;;;;;;CAMC,GAAG,MAAMC,wBAAwB,CAACC;IAC/B,MAAM,EAAEC,aAAa,EAAEC,YAAY,EAAER,YAAY,EAAE,GAAGM;IACtD,OAAO;QACH,GAAGG,iBAAU,CAACC,WAAW,CAAC,cAAc;QACxC,WAAW;YACPC,SAAS;YACTT,UAAU;YACVU,eAAe;YACfC,QAAQ;YACR,GAAGJ,iBAAU,CAACK,WAAW,CAAC,QAAQ;YAClC,GAAGL,iBAAU,CAACM,WAAW,CAACf,aAAa;YACvC,GAAGS,iBAAU,CAACO,YAAY,CAACT,cAAc;YACzC,GAAGE,iBAAU,CAACC,WAAW,CAACF,aAAa;YACvCS,KAAKlB,mBAAmBO,SAAS;YACjCY,OAAOnB,mBAAmBO,SAAS;YACnCa,QAAQpB,mBAAmBO,SAAS;YACpCc,MAAMrB,mBAAmBO,SAAS;QACtC;IACJ;AACJ;AAOW,MAAMR,0BAA0B,CAAC,EAAEuB,gBAAgB,KAAK,EAAEC,WAAWC,yBAAc,CAACD,QAAQ,EAAEE,QAAQD,yBAAc,CAACC,KAAK,EAAE,GAAGD,yBAAc,GAAI,CAAA;QACpJ,UAAU;YACNE,cAAcJ,gBAAgBK,YAAY;QAC9C;QACA,kBAAkB;YACdD,cAAcJ,gBAAgBK,YAAY;QAC9C;QACA,GAAGC,IAAAA,gEAA+B,EAACtB,sBAAsB;YACrDG,cAAcoB,kBAAM,CAACC,iBAAiB;YACtCtB,eAAeqB,kBAAM,CAACE,kBAAkB;YACxC,wDAAwD;YACxD9B,cAAc;YACd,GAAGwB,KAAK;QACZ,IAAI;YACAF;QACJ,EAAE;IACN,CAAA"}
+{"version":3,"sources":["createFocusOutlineStyle.js"],"sourcesContent":["import { tokens } from '@fluentui/react-theme';\nimport { shorthands } from '@griffel/react';\nimport { createCustomFocusIndicatorStyle } from './createCustomFocusIndicatorStyle';\nimport { defaultOptions } from './constants';\n/**\n * Get the position of the focus outline\n *\n * @param options - Configures the style of the focus outline\n * @param position - The position of the focus outline\n * @returns CSS value for the position of the focus outline\n */ function getOutlinePosition({ outlineWidth, outlineOffset }, position) {\n    const offsetValue = (outlineOffset === null || outlineOffset === void 0 ? void 0 : outlineOffset[position]) || outlineOffset;\n    if (!outlineOffset) {\n        return `calc(${outlineWidth} * -1)`;\n    }\n    return `calc(0px - ${outlineWidth} - ${offsetValue})`;\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 */ const getFocusOutlineStyles = (options)=>{\n    const { outlineRadius, outlineColor, outlineWidth } = options;\n    return {\n        ...shorthands.borderColor('transparent'),\n        '::after': {\n            content: '\"\"',\n            position: 'absolute',\n            pointerEvents: 'none',\n            zIndex: 1,\n            ...shorthands.borderStyle('solid'),\n            ...shorthands.borderWidth(outlineWidth),\n            ...shorthands.borderRadius(outlineRadius),\n            ...shorthands.borderColor(outlineColor),\n            top: getOutlinePosition(options, 'top'),\n            right: getOutlinePosition(options, 'right'),\n            bottom: getOutlinePosition(options, 'bottom'),\n            left: getOutlinePosition(options, 'left')\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 */ export const createFocusOutlineStyle = ({ enableOutline = false, selector = defaultOptions.selector, customizeSelector, style = defaultOptions.style } = defaultOptions)=>({\n        ':focus': {\n            outlineStyle: enableOutline ? undefined : 'none'\n        },\n        ':focus-visible': {\n            outlineStyle: enableOutline ? undefined : 'none'\n        },\n        ...createCustomFocusIndicatorStyle(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            customizeSelector\n        })\n    });\n"],"names":["createFocusOutlineStyle","getOutlinePosition","outlineWidth","outlineOffset","position","offsetValue","getFocusOutlineStyles","options","outlineRadius","outlineColor","shorthands","borderColor","content","pointerEvents","zIndex","borderStyle","borderWidth","borderRadius","top","right","bottom","left","enableOutline","selector","defaultOptions","customizeSelector","style","outlineStyle","undefined","createCustomFocusIndicatorStyle","tokens","colorStrokeFocus2","borderRadiusMedium"],"mappings":";;;;+BAiDiBA;;;eAAAA;;;4BAjDM;uBACI;iDACqB;2BACjB;AAC/B;;;;;;CAMC,GAAG,SAASC,mBAAmB,EAAEC,YAAY,EAAEC,aAAa,EAAE,EAAEC,QAAQ;IACrE,MAAMC,cAAc,AAACF,CAAAA,kBAAkB,QAAQA,kBAAkB,KAAK,IAAI,KAAK,IAAIA,aAAa,CAACC,SAAS,AAAD,KAAMD;IAC/G,IAAI,CAACA,eAAe;QAChB,OAAO,CAAC,KAAK,EAAED,aAAa,MAAM,CAAC;IACvC;IACA,OAAO,CAAC,WAAW,EAAEA,aAAa,GAAG,EAAEG,YAAY,CAAC,CAAC;AACzD;AACA;;;;;;CAMC,GAAG,MAAMC,wBAAwB,CAACC;IAC/B,MAAM,EAAEC,aAAa,EAAEC,YAAY,EAAEP,YAAY,EAAE,GAAGK;IACtD,OAAO;QACH,GAAGG,iBAAU,CAACC,WAAW,CAAC,cAAc;QACxC,WAAW;YACPC,SAAS;YACTR,UAAU;YACVS,eAAe;YACfC,QAAQ;YACR,GAAGJ,iBAAU,CAACK,WAAW,CAAC,QAAQ;YAClC,GAAGL,iBAAU,CAACM,WAAW,CAACd,aAAa;YACvC,GAAGQ,iBAAU,CAACO,YAAY,CAACT,cAAc;YACzC,GAAGE,iBAAU,CAACC,WAAW,CAACF,aAAa;YACvCS,KAAKjB,mBAAmBM,SAAS;YACjCY,OAAOlB,mBAAmBM,SAAS;YACnCa,QAAQnB,mBAAmBM,SAAS;YACpCc,MAAMpB,mBAAmBM,SAAS;QACtC;IACJ;AACJ;AAOW,MAAMP,0BAA0B,CAAC,EAAEsB,gBAAgB,KAAK,EAAEC,WAAWC,yBAAc,CAACD,QAAQ,EAAEE,iBAAiB,EAAEC,QAAQF,yBAAc,CAACE,KAAK,EAAE,GAAGF,yBAAc,GAAI,CAAA;QACvK,UAAU;YACNG,cAAcL,gBAAgBM,YAAY;QAC9C;QACA,kBAAkB;YACdD,cAAcL,gBAAgBM,YAAY;QAC9C;QACA,GAAGC,IAAAA,gEAA+B,EAACvB,sBAAsB;YACrDG,cAAcqB,kBAAM,CAACC,iBAAiB;YACtCvB,eAAesB,kBAAM,CAACE,kBAAkB;YACxC,wDAAwD;YACxD9B,cAAc;YACd,GAAGwB,KAAK;QACZ,IAAI;YACAH;YACAE;QACJ,EAAE;IACN,CAAA"}

package/lib-commonjs/focus/focusVisiblePolyfill.js

@@ -67,12 +67,11 @@ function removeFocusVisibleClass(el) {
     el.removeAttribute(_constants.FOCUS_VISIBLE_ATTR);
 }
 function alreadyInScope(el) {
-    var _el;
     if (!el) {
         return false;
     }
     if (el.focusVisible) {
         return true;
     }
-    return alreadyInScope((_el = el) === null || _el === void 0 ? void 0 : _el.parentElement);
+    return alreadyInScope(el === null || el === void 0 ? void 0 : el.parentElement);
 }

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

@@ -1 +1 @@
-{"version":3,"sources":["focusVisiblePolyfill.js"],"sourcesContent":["import { isHTMLElement } from '@fluentui/react-utilities';\nimport { KEYBORG_FOCUSIN, createKeyborg, disposeKeyborg } from 'keyborg';\nimport { FOCUS_VISIBLE_ATTR } from './constants';\n/**\n * @internal\n * @param scope - Applies the ponyfill to all DOM children\n * @param targetWindow - window\n */ export function applyFocusVisiblePolyfill(scope, targetWindow) {\n    if (alreadyInScope(scope)) {\n        // Focus visible polyfill already applied at this scope\n        return ()=>undefined;\n    }\n    const state = {\n        current: undefined\n    };\n    const keyborg = createKeyborg(targetWindow);\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    // 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)=>{\n        if (state.current) {\n            removeFocusVisibleClass(state.current);\n            state.current = undefined;\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    // Make sure that when focus leaves the scope, the focus visible class is removed\n    const blurListener = (e)=>{\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    scope.addEventListener(KEYBORG_FOCUSIN, keyborgListener);\n    scope.addEventListener('focusout', blurListener);\n    scope.focusVisible = true;\n    // Return disposer\n    return ()=>{\n        scope.removeEventListener(KEYBORG_FOCUSIN, keyborgListener);\n        scope.removeEventListener('focusout', blurListener);\n        delete scope.focusVisible;\n        disposeKeyborg(keyborg);\n    };\n}\nfunction applyFocusVisibleClass(el) {\n    el.setAttribute(FOCUS_VISIBLE_ATTR, '');\n}\nfunction removeFocusVisibleClass(el) {\n    el.removeAttribute(FOCUS_VISIBLE_ATTR);\n}\nfunction alreadyInScope(el) {\n    var _el;\n    if (!el) {\n        return false;\n    }\n    if (el.focusVisible) {\n        return true;\n    }\n    return alreadyInScope((_el = el) === null || _el === void 0 ? void 0 : _el.parentElement);\n}\n"],"names":["applyFocusVisiblePolyfill","scope","targetWindow","alreadyInScope","undefined","state","current","keyborg","createKeyborg","subscribe","isNavigatingWithKeyboard","removeFocusVisibleClass","keyborgListener","e","isHTMLElement","target","applyFocusVisibleClass","blurListener","relatedTarget","contains","addEventListener","KEYBORG_FOCUSIN","focusVisible","removeEventListener","disposeKeyborg","el","setAttribute","FOCUS_VISIBLE_ATTR","removeAttribute","_el","parentElement"],"mappings":";;;;+BAOoBA;;;eAAAA;;;gCAPU;yBACiC;2BAC5B;AAKxB,SAASA,0BAA0BC,KAAK,EAAEC,YAAY;IAC7D,IAAIC,eAAeF,QAAQ;QACvB,uDAAuD;QACvD,OAAO,IAAIG;IACf;IACA,MAAMC,QAAQ;QACVC,SAASF;IACb;IACA,MAAMG,UAAUC,IAAAA,sBAAa,EAACN;IAC9B,iEAAiE;IACjEK,QAAQE,SAAS,CAAC,CAACC;QACf,IAAI,CAACA,4BAA4BL,MAAMC,OAAO,EAAE;YAC5CK,wBAAwBN,MAAMC,OAAO;YACrCD,MAAMC,OAAO,GAAGF;QACpB;IACJ;IACA,kFAAkF;IAClF,8CAA8C;IAC9C,MAAMQ,kBAAkB,CAACC;QACrB,IAAIR,MAAMC,OAAO,EAAE;YACfK,wBAAwBN,MAAMC,OAAO;YACrCD,MAAMC,OAAO,GAAGF;QACpB;QACA,IAAIG,QAAQG,wBAAwB,MAAMI,IAAAA,6BAAa,EAACD,EAAEE,MAAM,KAAKF,EAAEE,MAAM,EAAE;YAC3E,+EAA+E;YAC/EV,MAAMC,OAAO,GAAGO,EAAEE,MAAM;YACxBC,uBAAuBX,MAAMC,OAAO;QACxC;IACJ;IACA,iFAAiF;IACjF,MAAMW,eAAe,CAACJ;QAClB,IAAI,CAACA,EAAEK,aAAa,IAAIJ,IAAAA,6BAAa,EAACD,EAAEK,aAAa,KAAK,CAACjB,MAAMkB,QAAQ,CAACN,EAAEK,aAAa,GAAG;YACxF,IAAIb,MAAMC,OAAO,EAAE;gBACfK,wBAAwBN,MAAMC,OAAO;gBACrCD,MAAMC,OAAO,GAAGF;YACpB;QACJ;IACJ;IACAH,MAAMmB,gBAAgB,CAACC,wBAAe,EAAET;IACxCX,MAAMmB,gBAAgB,CAAC,YAAYH;IACnChB,MAAMqB,YAAY,GAAG;IACrB,kBAAkB;IAClB,OAAO;QACHrB,MAAMsB,mBAAmB,CAACF,wBAAe,EAAET;QAC3CX,MAAMsB,mBAAmB,CAAC,YAAYN;QACtC,OAAOhB,MAAMqB,YAAY;QACzBE,IAAAA,uBAAc,EAACjB;IACnB;AACJ;AACA,SAASS,uBAAuBS,EAAE;IAC9BA,GAAGC,YAAY,CAACC,6BAAkB,EAAE;AACxC;AACA,SAAShB,wBAAwBc,EAAE;IAC/BA,GAAGG,eAAe,CAACD,6BAAkB;AACzC;AACA,SAASxB,eAAesB,EAAE;IACtB,IAAII;IACJ,IAAI,CAACJ,IAAI;QACL,OAAO;IACX;IACA,IAAIA,GAAGH,YAAY,EAAE;QACjB,OAAO;IACX;IACA,OAAOnB,eAAe,AAAC0B,CAAAA,MAAMJ,EAAC,MAAO,QAAQI,QAAQ,KAAK,IAAI,KAAK,IAAIA,IAAIC,aAAa;AAC5F"}
+{"version":3,"sources":["focusVisiblePolyfill.js"],"sourcesContent":["import { isHTMLElement } from '@fluentui/react-utilities';\nimport { KEYBORG_FOCUSIN, createKeyborg, disposeKeyborg } from 'keyborg';\nimport { FOCUS_VISIBLE_ATTR } from './constants';\n/**\n * @internal\n * @param scope - Applies the ponyfill to all DOM children\n * @param targetWindow - window\n */ export function applyFocusVisiblePolyfill(scope, targetWindow) {\n    if (alreadyInScope(scope)) {\n        // Focus visible polyfill already applied at this scope\n        return ()=>undefined;\n    }\n    const state = {\n        current: undefined\n    };\n    const keyborg = createKeyborg(targetWindow);\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    // 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)=>{\n        if (state.current) {\n            removeFocusVisibleClass(state.current);\n            state.current = undefined;\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    // Make sure that when focus leaves the scope, the focus visible class is removed\n    const blurListener = (e)=>{\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    scope.addEventListener(KEYBORG_FOCUSIN, keyborgListener);\n    scope.addEventListener('focusout', blurListener);\n    scope.focusVisible = true;\n    // Return disposer\n    return ()=>{\n        scope.removeEventListener(KEYBORG_FOCUSIN, keyborgListener);\n        scope.removeEventListener('focusout', blurListener);\n        delete scope.focusVisible;\n        disposeKeyborg(keyborg);\n    };\n}\nfunction applyFocusVisibleClass(el) {\n    el.setAttribute(FOCUS_VISIBLE_ATTR, '');\n}\nfunction removeFocusVisibleClass(el) {\n    el.removeAttribute(FOCUS_VISIBLE_ATTR);\n}\nfunction alreadyInScope(el) {\n    if (!el) {\n        return false;\n    }\n    if (el.focusVisible) {\n        return true;\n    }\n    return alreadyInScope(el === null || el === void 0 ? void 0 : el.parentElement);\n}\n"],"names":["applyFocusVisiblePolyfill","scope","targetWindow","alreadyInScope","undefined","state","current","keyborg","createKeyborg","subscribe","isNavigatingWithKeyboard","removeFocusVisibleClass","keyborgListener","e","isHTMLElement","target","applyFocusVisibleClass","blurListener","relatedTarget","contains","addEventListener","KEYBORG_FOCUSIN","focusVisible","removeEventListener","disposeKeyborg","el","setAttribute","FOCUS_VISIBLE_ATTR","removeAttribute","parentElement"],"mappings":";;;;+BAOoBA;;;eAAAA;;;gCAPU;yBACiC;2BAC5B;AAKxB,SAASA,0BAA0BC,KAAK,EAAEC,YAAY;IAC7D,IAAIC,eAAeF,QAAQ;QACvB,uDAAuD;QACvD,OAAO,IAAIG;IACf;IACA,MAAMC,QAAQ;QACVC,SAASF;IACb;IACA,MAAMG,UAAUC,IAAAA,sBAAa,EAACN;IAC9B,iEAAiE;IACjEK,QAAQE,SAAS,CAAC,CAACC;QACf,IAAI,CAACA,4BAA4BL,MAAMC,OAAO,EAAE;YAC5CK,wBAAwBN,MAAMC,OAAO;YACrCD,MAAMC,OAAO,GAAGF;QACpB;IACJ;IACA,kFAAkF;IAClF,8CAA8C;IAC9C,MAAMQ,kBAAkB,CAACC;QACrB,IAAIR,MAAMC,OAAO,EAAE;YACfK,wBAAwBN,MAAMC,OAAO;YACrCD,MAAMC,OAAO,GAAGF;QACpB;QACA,IAAIG,QAAQG,wBAAwB,MAAMI,IAAAA,6BAAa,EAACD,EAAEE,MAAM,KAAKF,EAAEE,MAAM,EAAE;YAC3E,+EAA+E;YAC/EV,MAAMC,OAAO,GAAGO,EAAEE,MAAM;YACxBC,uBAAuBX,MAAMC,OAAO;QACxC;IACJ;IACA,iFAAiF;IACjF,MAAMW,eAAe,CAACJ;QAClB,IAAI,CAACA,EAAEK,aAAa,IAAIJ,IAAAA,6BAAa,EAACD,EAAEK,aAAa,KAAK,CAACjB,MAAMkB,QAAQ,CAACN,EAAEK,aAAa,GAAG;YACxF,IAAIb,MAAMC,OAAO,EAAE;gBACfK,wBAAwBN,MAAMC,OAAO;gBACrCD,MAAMC,OAAO,GAAGF;YACpB;QACJ;IACJ;IACAH,MAAMmB,gBAAgB,CAACC,wBAAe,EAAET;IACxCX,MAAMmB,gBAAgB,CAAC,YAAYH;IACnChB,MAAMqB,YAAY,GAAG;IACrB,kBAAkB;IAClB,OAAO;QACHrB,MAAMsB,mBAAmB,CAACF,wBAAe,EAAET;QAC3CX,MAAMsB,mBAAmB,CAAC,YAAYN;QACtC,OAAOhB,MAAMqB,YAAY;QACzBE,IAAAA,uBAAc,EAACjB;IACnB;AACJ;AACA,SAASS,uBAAuBS,EAAE;IAC9BA,GAAGC,YAAY,CAACC,6BAAkB,EAAE;AACxC;AACA,SAAShB,wBAAwBc,EAAE;IAC/BA,GAAGG,eAAe,CAACD,6BAAkB;AACzC;AACA,SAASxB,eAAesB,EAAE;IACtB,IAAI,CAACA,IAAI;QACL,OAAO;IACX;IACA,IAAIA,GAAGH,YAAY,EAAE;QACjB,OAAO;IACX;IACA,OAAOnB,eAAesB,OAAO,QAAQA,OAAO,KAAK,IAAI,KAAK,IAAIA,GAAGI,aAAa;AAClF"}

package/lib-commonjs/hooks/useFocusFinders.js

@@ -16,29 +16,20 @@ const useFocusFinders = ()=>{
     const tabster = (0, _useTabster.useTabster)();
     const { targetDocument } = (0, _reactsharedcontexts.useFluent_unstable)();
     // Narrow props for now and let need dictate additional props in the future
-    const findAllFocusable = _react.useCallback((container, acceptCondition)=>{
-        var _tabster;
-        return ((_tabster = tabster) === null || _tabster === void 0 ? void 0 : _tabster.focusable.findAll({
+    const findAllFocusable = _react.useCallback((container, acceptCondition)=>(tabster === null || tabster === void 0 ? void 0 : tabster.focusable.findAll({
             container,
             acceptCondition
-        })) || [];
-    }, [
+        })) || [], [
         tabster
     ]);
-    const findFirstFocusable = _react.useCallback((container)=>{
-        var _tabster;
-        return (_tabster = tabster) === null || _tabster === void 0 ? void 0 : _tabster.focusable.findFirst({
+    const findFirstFocusable = _react.useCallback((container)=>tabster === null || tabster === void 0 ? void 0 : tabster.focusable.findFirst({
             container
-        });
-    }, [
+        }), [
         tabster
     ]);
-    const findLastFocusable = _react.useCallback((container)=>{
-        var _tabster;
-        return (_tabster = tabster) === null || _tabster === void 0 ? void 0 : _tabster.focusable.findLast({
+    const findLastFocusable = _react.useCallback((container)=>tabster === null || tabster === void 0 ? void 0 : tabster.focusable.findLast({
             container
-        });
-    }, [
+        }), [
         tabster
     ]);
     const findNextFocusable = _react.useCallback((currentElement, options = {})=>{

package/lib-commonjs/hooks/useFocusFinders.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useFocusFinders.js"],"sourcesContent":["import * as React from 'react';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport { useTabster } from './useTabster';\n/**\n * Returns a set of helper functions that will traverse focusable elements in the context of a root DOM element\n */ export const useFocusFinders = ()=>{\n    const tabster = useTabster();\n    const { targetDocument } = useFluent();\n    // Narrow props for now and let need dictate additional props in the future\n    const findAllFocusable = React.useCallback((container, acceptCondition)=>{\n        var _tabster;\n        return ((_tabster = tabster) === null || _tabster === void 0 ? void 0 : _tabster.focusable.findAll({\n            container,\n            acceptCondition\n        })) || [];\n    }, [\n        tabster\n    ]);\n    const findFirstFocusable = React.useCallback((container)=>{\n        var _tabster;\n        return (_tabster = tabster) === null || _tabster === void 0 ? void 0 : _tabster.focusable.findFirst({\n            container\n        });\n    }, [\n        tabster\n    ]);\n    const findLastFocusable = React.useCallback((container)=>{\n        var _tabster;\n        return (_tabster = tabster) === null || _tabster === void 0 ? void 0 : _tabster.focusable.findLast({\n            container\n        });\n    }, [\n        tabster\n    ]);\n    const findNextFocusable = React.useCallback((currentElement, options = {})=>{\n        if (!tabster || !targetDocument) {\n            return null;\n        }\n        const { container = targetDocument.body } = options;\n        return tabster.focusable.findNext({\n            currentElement,\n            container\n        });\n    }, [\n        tabster,\n        targetDocument\n    ]);\n    const findPrevFocusable = React.useCallback((currentElement, options = {})=>{\n        if (!tabster || !targetDocument) {\n            return null;\n        }\n        const { container = targetDocument.body } = options;\n        return tabster.focusable.findPrev({\n            currentElement,\n            container\n        });\n    }, [\n        tabster,\n        targetDocument\n    ]);\n    return {\n        findAllFocusable,\n        findFirstFocusable,\n        findLastFocusable,\n        findNextFocusable,\n        findPrevFocusable\n    };\n};\n"],"names":["useFocusFinders","tabster","useTabster","targetDocument","useFluent","findAllFocusable","React","useCallback","container","acceptCondition","_tabster","focusable","findAll","findFirstFocusable","findFirst","findLastFocusable","findLast","findNextFocusable","currentElement","options","body","findNext","findPrevFocusable","findPrev"],"mappings":";;;;+BAKiBA;;;eAAAA;;;;iEALM;qCACyB;4BACrB;AAGhB,MAAMA,kBAAkB;IAC/B,MAAMC,UAAUC,IAAAA,sBAAU;IAC1B,MAAM,EAAEC,cAAc,EAAE,GAAGC,IAAAA,uCAAS;IACpC,2EAA2E;IAC3E,MAAMC,mBAAmBC,OAAMC,WAAW,CAAC,CAACC,WAAWC;QACnD,IAAIC;QACJ,OAAO,AAAC,CAAA,AAACA,CAAAA,WAAWT,OAAM,MAAO,QAAQS,aAAa,KAAK,IAAI,KAAK,IAAIA,SAASC,SAAS,CAACC,OAAO,CAAC;YAC/FJ;YACAC;QACJ,EAAC,KAAM,EAAE;IACb,GAAG;QACCR;KACH;IACD,MAAMY,qBAAqBP,OAAMC,WAAW,CAAC,CAACC;QAC1C,IAAIE;QACJ,OAAO,AAACA,CAAAA,WAAWT,OAAM,MAAO,QAAQS,aAAa,KAAK,IAAI,KAAK,IAAIA,SAASC,SAAS,CAACG,SAAS,CAAC;YAChGN;QACJ;IACJ,GAAG;QACCP;KACH;IACD,MAAMc,oBAAoBT,OAAMC,WAAW,CAAC,CAACC;QACzC,IAAIE;QACJ,OAAO,AAACA,CAAAA,WAAWT,OAAM,MAAO,QAAQS,aAAa,KAAK,IAAI,KAAK,IAAIA,SAASC,SAAS,CAACK,QAAQ,CAAC;YAC/FR;QACJ;IACJ,GAAG;QACCP;KACH;IACD,MAAMgB,oBAAoBX,OAAMC,WAAW,CAAC,CAACW,gBAAgBC,UAAU,CAAC,CAAC;QACrE,IAAI,CAAClB,WAAW,CAACE,gBAAgB;YAC7B,OAAO;QACX;QACA,MAAM,EAAEK,YAAYL,eAAeiB,IAAI,EAAE,GAAGD;QAC5C,OAAOlB,QAAQU,SAAS,CAACU,QAAQ,CAAC;YAC9BH;YACAV;QACJ;IACJ,GAAG;QACCP;QACAE;KACH;IACD,MAAMmB,oBAAoBhB,OAAMC,WAAW,CAAC,CAACW,gBAAgBC,UAAU,CAAC,CAAC;QACrE,IAAI,CAAClB,WAAW,CAACE,gBAAgB;YAC7B,OAAO;QACX;QACA,MAAM,EAAEK,YAAYL,eAAeiB,IAAI,EAAE,GAAGD;QAC5C,OAAOlB,QAAQU,SAAS,CAACY,QAAQ,CAAC;YAC9BL;YACAV;QACJ;IACJ,GAAG;QACCP;QACAE;KACH;IACD,OAAO;QACHE;QACAQ;QACAE;QACAE;QACAK;IACJ;AACJ"}
+{"version":3,"sources":["useFocusFinders.js"],"sourcesContent":["import * as React from 'react';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport { useTabster } from './useTabster';\n/**\n * Returns a set of helper functions that will traverse focusable elements in the context of a root DOM element\n */ export const useFocusFinders = ()=>{\n    const tabster = useTabster();\n    const { targetDocument } = useFluent();\n    // Narrow props for now and let need dictate additional props in the future\n    const findAllFocusable = React.useCallback((container, acceptCondition)=>(tabster === null || tabster === void 0 ? void 0 : tabster.focusable.findAll({\n            container,\n            acceptCondition\n        })) || [], [\n        tabster\n    ]);\n    const findFirstFocusable = React.useCallback((container)=>tabster === null || tabster === void 0 ? void 0 : tabster.focusable.findFirst({\n            container\n        }), [\n        tabster\n    ]);\n    const findLastFocusable = React.useCallback((container)=>tabster === null || tabster === void 0 ? void 0 : tabster.focusable.findLast({\n            container\n        }), [\n        tabster\n    ]);\n    const findNextFocusable = React.useCallback((currentElement, options = {})=>{\n        if (!tabster || !targetDocument) {\n            return null;\n        }\n        const { container = targetDocument.body } = options;\n        return tabster.focusable.findNext({\n            currentElement,\n            container\n        });\n    }, [\n        tabster,\n        targetDocument\n    ]);\n    const findPrevFocusable = React.useCallback((currentElement, options = {})=>{\n        if (!tabster || !targetDocument) {\n            return null;\n        }\n        const { container = targetDocument.body } = options;\n        return tabster.focusable.findPrev({\n            currentElement,\n            container\n        });\n    }, [\n        tabster,\n        targetDocument\n    ]);\n    return {\n        findAllFocusable,\n        findFirstFocusable,\n        findLastFocusable,\n        findNextFocusable,\n        findPrevFocusable\n    };\n};\n"],"names":["useFocusFinders","tabster","useTabster","targetDocument","useFluent","findAllFocusable","React","useCallback","container","acceptCondition","focusable","findAll","findFirstFocusable","findFirst","findLastFocusable","findLast","findNextFocusable","currentElement","options","body","findNext","findPrevFocusable","findPrev"],"mappings":";;;;+BAKiBA;;;eAAAA;;;;iEALM;qCACyB;4BACrB;AAGhB,MAAMA,kBAAkB;IAC/B,MAAMC,UAAUC,IAAAA,sBAAU;IAC1B,MAAM,EAAEC,cAAc,EAAE,GAAGC,IAAAA,uCAAS;IACpC,2EAA2E;IAC3E,MAAMC,mBAAmBC,OAAMC,WAAW,CAAC,CAACC,WAAWC,kBAAkB,AAACR,CAAAA,YAAY,QAAQA,YAAY,KAAK,IAAI,KAAK,IAAIA,QAAQS,SAAS,CAACC,OAAO,CAAC;YAC9IH;YACAC;QACJ,EAAC,KAAM,EAAE,EAAE;QACXR;KACH;IACD,MAAMW,qBAAqBN,OAAMC,WAAW,CAAC,CAACC,YAAYP,YAAY,QAAQA,YAAY,KAAK,IAAI,KAAK,IAAIA,QAAQS,SAAS,CAACG,SAAS,CAAC;YAChIL;QACJ,IAAI;QACJP;KACH;IACD,MAAMa,oBAAoBR,OAAMC,WAAW,CAAC,CAACC,YAAYP,YAAY,QAAQA,YAAY,KAAK,IAAI,KAAK,IAAIA,QAAQS,SAAS,CAACK,QAAQ,CAAC;YAC9HP;QACJ,IAAI;QACJP;KACH;IACD,MAAMe,oBAAoBV,OAAMC,WAAW,CAAC,CAACU,gBAAgBC,UAAU,CAAC,CAAC;QACrE,IAAI,CAACjB,WAAW,CAACE,gBAAgB;YAC7B,OAAO;QACX;QACA,MAAM,EAAEK,YAAYL,eAAegB,IAAI,EAAE,GAAGD;QAC5C,OAAOjB,QAAQS,SAAS,CAACU,QAAQ,CAAC;YAC9BH;YACAT;QACJ;IACJ,GAAG;QACCP;QACAE;KACH;IACD,MAAMkB,oBAAoBf,OAAMC,WAAW,CAAC,CAACU,gBAAgBC,UAAU,CAAC,CAAC;QACrE,IAAI,CAACjB,WAAW,CAACE,gBAAgB;YAC7B,OAAO;QACX;QACA,MAAM,EAAEK,YAAYL,eAAegB,IAAI,EAAE,GAAGD;QAC5C,OAAOjB,QAAQS,SAAS,CAACY,QAAQ,CAAC;YAC9BL;YACAT;QACJ;IACJ,GAAG;QACCP;QACAE;KACH;IACD,OAAO;QACHE;QACAO;QACAE;QACAE;QACAK;IACJ;AACJ"}

package/lib-commonjs/hooks/useFocusVisible.js

@@ -18,8 +18,7 @@ function useFocusVisible(options = {}) {
     var _options_targetDocument;
     const targetDocument = (_options_targetDocument = options.targetDocument) !== null && _options_targetDocument !== void 0 ? _options_targetDocument : contextValue.targetDocument;
     _react.useEffect(()=>{
-        var _targetDocument;
-        if (((_targetDocument = targetDocument) === null || _targetDocument === void 0 ? void 0 : _targetDocument.defaultView) && scopeRef.current) {
+        if ((targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.defaultView) && scopeRef.current) {
             return (0, _focusVisiblePolyfill.applyFocusVisiblePolyfill)(scopeRef.current, targetDocument.defaultView);
         }
     }, [

package/lib-commonjs/hooks/useFocusVisible.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useFocusVisible.js"],"sourcesContent":["import * as React from 'react';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport { applyFocusVisiblePolyfill } from '../focus/focusVisiblePolyfill';\nexport function useFocusVisible(options = {}) {\n    const contextValue = useFluent();\n    const scopeRef = React.useRef(null);\n    var _options_targetDocument;\n    const targetDocument = (_options_targetDocument = options.targetDocument) !== null && _options_targetDocument !== void 0 ? _options_targetDocument : contextValue.targetDocument;\n    React.useEffect(()=>{\n        var _targetDocument;\n        if (((_targetDocument = targetDocument) === null || _targetDocument === void 0 ? void 0 : _targetDocument.defaultView) && scopeRef.current) {\n            return applyFocusVisiblePolyfill(scopeRef.current, targetDocument.defaultView);\n        }\n    }, [\n        scopeRef,\n        targetDocument\n    ]);\n    return scopeRef;\n}\n"],"names":["useFocusVisible","options","contextValue","useFluent","scopeRef","React","useRef","_options_targetDocument","targetDocument","useEffect","_targetDocument","defaultView","current","applyFocusVisiblePolyfill"],"mappings":";;;;+BAGgBA;;;eAAAA;;;;iEAHO;qCACyB;sCACN;AACnC,SAASA,gBAAgBC,UAAU,CAAC,CAAC;IACxC,MAAMC,eAAeC,IAAAA,uCAAS;IAC9B,MAAMC,WAAWC,OAAMC,MAAM,CAAC;IAC9B,IAAIC;IACJ,MAAMC,iBAAiB,AAACD,CAAAA,0BAA0BN,QAAQO,cAAc,AAAD,MAAO,QAAQD,4BAA4B,KAAK,IAAIA,0BAA0BL,aAAaM,cAAc;IAChLH,OAAMI,SAAS,CAAC;QACZ,IAAIC;QACJ,IAAI,AAAC,CAAA,AAACA,CAAAA,kBAAkBF,cAAa,MAAO,QAAQE,oBAAoB,KAAK,IAAI,KAAK,IAAIA,gBAAgBC,WAAW,AAAD,KAAMP,SAASQ,OAAO,EAAE;YACxI,OAAOC,IAAAA,+CAAyB,EAACT,SAASQ,OAAO,EAAEJ,eAAeG,WAAW;QACjF;IACJ,GAAG;QACCP;QACAI;KACH;IACD,OAAOJ;AACX"}
+{"version":3,"sources":["useFocusVisible.js"],"sourcesContent":["import * as React from 'react';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport { applyFocusVisiblePolyfill } from '../focus/focusVisiblePolyfill';\nexport function useFocusVisible(options = {}) {\n    const contextValue = useFluent();\n    const scopeRef = React.useRef(null);\n    var _options_targetDocument;\n    const targetDocument = (_options_targetDocument = options.targetDocument) !== null && _options_targetDocument !== void 0 ? _options_targetDocument : contextValue.targetDocument;\n    React.useEffect(()=>{\n        if ((targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.defaultView) && scopeRef.current) {\n            return applyFocusVisiblePolyfill(scopeRef.current, targetDocument.defaultView);\n        }\n    }, [\n        scopeRef,\n        targetDocument\n    ]);\n    return scopeRef;\n}\n"],"names":["useFocusVisible","options","contextValue","useFluent","scopeRef","React","useRef","_options_targetDocument","targetDocument","useEffect","defaultView","current","applyFocusVisiblePolyfill"],"mappings":";;;;+BAGgBA;;;eAAAA;;;;iEAHO;qCACyB;sCACN;AACnC,SAASA,gBAAgBC,UAAU,CAAC,CAAC;IACxC,MAAMC,eAAeC,IAAAA,uCAAS;IAC9B,MAAMC,WAAWC,OAAMC,MAAM,CAAC;IAC9B,IAAIC;IACJ,MAAMC,iBAAiB,AAACD,CAAAA,0BAA0BN,QAAQO,cAAc,AAAD,MAAO,QAAQD,4BAA4B,KAAK,IAAIA,0BAA0BL,aAAaM,cAAc;IAChLH,OAAMI,SAAS,CAAC;QACZ,IAAI,AAACD,CAAAA,mBAAmB,QAAQA,mBAAmB,KAAK,IAAI,KAAK,IAAIA,eAAeE,WAAW,AAAD,KAAMN,SAASO,OAAO,EAAE;YAClH,OAAOC,IAAAA,+CAAyB,EAACR,SAASO,OAAO,EAAEH,eAAeE,WAAW;QACjF;IACJ,GAAG;QACCN;QACAI;KACH;IACD,OAAOJ;AACX"}

package/lib-commonjs/hooks/useFocusWithin.js

@@ -16,8 +16,7 @@ function useFocusWithin() {
     const { targetDocument } = (0, _reactsharedcontexts.useFluent_unstable)();
     const elementRef = _react.useRef(null);
     _react.useEffect(()=>{
-        var _targetDocument;
-        if (((_targetDocument = targetDocument) === null || _targetDocument === void 0 ? void 0 : _targetDocument.defaultView) && elementRef.current) {
+        if ((targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.defaultView) && elementRef.current) {
             return (0, _focusWithinPolyfill.applyFocusWithinPolyfill)(elementRef.current, targetDocument.defaultView);
         }
     }, [

package/lib-commonjs/hooks/useFocusWithin.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useFocusWithin.js"],"sourcesContent":["import * as React from 'react';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport { applyFocusWithinPolyfill } from '../focus/focusWithinPolyfill';\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 */ export function useFocusWithin() {\n    const { targetDocument } = useFluent();\n    const elementRef = React.useRef(null);\n    React.useEffect(()=>{\n        var _targetDocument;\n        if (((_targetDocument = targetDocument) === null || _targetDocument === void 0 ? void 0 : _targetDocument.defaultView) && elementRef.current) {\n            return applyFocusWithinPolyfill(elementRef.current, targetDocument.defaultView);\n        }\n    }, [\n        elementRef,\n        targetDocument\n    ]);\n    return elementRef;\n}\n"],"names":["useFocusWithin","targetDocument","useFluent","elementRef","React","useRef","useEffect","_targetDocument","defaultView","current","applyFocusWithinPolyfill"],"mappings":";;;;+BAOoBA;;;eAAAA;;;;iEAPG;qCACyB;qCACP;AAK9B,SAASA;IAChB,MAAM,EAAEC,cAAc,EAAE,GAAGC,IAAAA,uCAAS;IACpC,MAAMC,aAAaC,OAAMC,MAAM,CAAC;IAChCD,OAAME,SAAS,CAAC;QACZ,IAAIC;QACJ,IAAI,AAAC,CAAA,AAACA,CAAAA,kBAAkBN,cAAa,MAAO,QAAQM,oBAAoB,KAAK,IAAI,KAAK,IAAIA,gBAAgBC,WAAW,AAAD,KAAML,WAAWM,OAAO,EAAE;YAC1I,OAAOC,IAAAA,6CAAwB,EAACP,WAAWM,OAAO,EAAER,eAAeO,WAAW;QAClF;IACJ,GAAG;QACCL;QACAF;KACH;IACD,OAAOE;AACX"}
+{"version":3,"sources":["useFocusWithin.js"],"sourcesContent":["import * as React from 'react';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport { applyFocusWithinPolyfill } from '../focus/focusWithinPolyfill';\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 */ export function useFocusWithin() {\n    const { targetDocument } = useFluent();\n    const elementRef = React.useRef(null);\n    React.useEffect(()=>{\n        if ((targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.defaultView) && elementRef.current) {\n            return applyFocusWithinPolyfill(elementRef.current, targetDocument.defaultView);\n        }\n    }, [\n        elementRef,\n        targetDocument\n    ]);\n    return elementRef;\n}\n"],"names":["useFocusWithin","targetDocument","useFluent","elementRef","React","useRef","useEffect","defaultView","current","applyFocusWithinPolyfill"],"mappings":";;;;+BAOoBA;;;eAAAA;;;;iEAPG;qCACyB;qCACP;AAK9B,SAASA;IAChB,MAAM,EAAEC,cAAc,EAAE,GAAGC,IAAAA,uCAAS;IACpC,MAAMC,aAAaC,OAAMC,MAAM,CAAC;IAChCD,OAAME,SAAS,CAAC;QACZ,IAAI,AAACL,CAAAA,mBAAmB,QAAQA,mBAAmB,KAAK,IAAI,KAAK,IAAIA,eAAeM,WAAW,AAAD,KAAMJ,WAAWK,OAAO,EAAE;YACpH,OAAOC,IAAAA,6CAAwB,EAACN,WAAWK,OAAO,EAAEP,eAAeM,WAAW;QAClF;IACJ,GAAG;QACCJ;QACAF;KACH;IACD,OAAOE;AACX"}

package/lib-commonjs/hooks/useFocusableGroup.js

@@ -12,17 +12,16 @@ const _tabster = require("tabster");
 const _useTabsterAttributes = require("./useTabsterAttributes");
 const _useTabster = require("./useTabster");
 const useFocusableGroup = (options)=>{
-    var _options, _options1;
     const tabster = (0, _useTabster.useTabster)();
     if (tabster) {
         (0, _tabster.getGroupper)(tabster);
     }
     return (0, _useTabsterAttributes.useTabsterAttributes)({
         groupper: {
-            tabbability: getTabbability((_options = options) === null || _options === void 0 ? void 0 : _options.tabBehavior)
+            tabbability: getTabbability(options === null || options === void 0 ? void 0 : options.tabBehavior)
         },
         focusable: {
-            ignoreKeydown: (_options1 = options) === null || _options1 === void 0 ? void 0 : _options1.ignoreDefaultKeydown
+            ignoreKeydown: options === null || options === void 0 ? void 0 : options.ignoreDefaultKeydown
         }
     });
 };

package/lib-commonjs/hooks/useFocusableGroup.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useFocusableGroup.js"],"sourcesContent":["import { Types, getGroupper } from 'tabster';\nimport { useTabsterAttributes } from './useTabsterAttributes';\nimport { useTabster } from './useTabster';\n/**\n * A hook that returns the necessary tabster attributes to support groupping.\n * @param options - Options to configure keyboard navigation\n */ export const useFocusableGroup = (options)=>{\n    var _options, _options1;\n    const tabster = useTabster();\n    if (tabster) {\n        getGroupper(tabster);\n    }\n    return useTabsterAttributes({\n        groupper: {\n            tabbability: getTabbability((_options = options) === null || _options === void 0 ? void 0 : _options.tabBehavior)\n        },\n        focusable: {\n            ignoreKeydown: (_options1 = options) === null || _options1 === void 0 ? void 0 : _options1.ignoreDefaultKeydown\n        }\n    });\n};\nconst getTabbability = (tabBehavior)=>{\n    switch(tabBehavior){\n        case 'unlimited':\n            return Types.GroupperTabbabilities.Unlimited;\n        case 'limited':\n            return Types.GroupperTabbabilities.Limited;\n        case 'limited-trap-focus':\n            return Types.GroupperTabbabilities.LimitedTrapFocus;\n        default:\n            return undefined;\n    }\n};\n"],"names":["useFocusableGroup","options","_options","_options1","tabster","useTabster","getGroupper","useTabsterAttributes","groupper","tabbability","getTabbability","tabBehavior","focusable","ignoreKeydown","ignoreDefaultKeydown","Types","GroupperTabbabilities","Unlimited","Limited","LimitedTrapFocus","undefined"],"mappings":";;;;+BAMiBA;;;eAAAA;;;yBANkB;sCACE;4BACV;AAIhB,MAAMA,oBAAoB,CAACC;IAClC,IAAIC,UAAUC;IACd,MAAMC,UAAUC,IAAAA,sBAAU;IAC1B,IAAID,SAAS;QACTE,IAAAA,oBAAW,EAACF;IAChB;IACA,OAAOG,IAAAA,0CAAoB,EAAC;QACxBC,UAAU;YACNC,aAAaC,eAAe,AAACR,CAAAA,WAAWD,OAAM,MAAO,QAAQC,aAAa,KAAK,IAAI,KAAK,IAAIA,SAASS,WAAW;QACpH;QACAC,WAAW;YACPC,eAAe,AAACV,CAAAA,YAAYF,OAAM,MAAO,QAAQE,cAAc,KAAK,IAAI,KAAK,IAAIA,UAAUW,oBAAoB;QACnH;IACJ;AACJ;AACA,MAAMJ,iBAAiB,CAACC;IACpB,OAAOA;QACH,KAAK;YACD,OAAOI,cAAK,CAACC,qBAAqB,CAACC,SAAS;QAChD,KAAK;YACD,OAAOF,cAAK,CAACC,qBAAqB,CAACE,OAAO;QAC9C,KAAK;YACD,OAAOH,cAAK,CAACC,qBAAqB,CAACG,gBAAgB;QACvD;YACI,OAAOC;IACf;AACJ"}
+{"version":3,"sources":["useFocusableGroup.js"],"sourcesContent":["import { Types, getGroupper } from 'tabster';\nimport { useTabsterAttributes } from './useTabsterAttributes';\nimport { useTabster } from './useTabster';\n/**\n * A hook that returns the necessary tabster attributes to support groupping.\n * @param options - Options to configure keyboard navigation\n */ export const useFocusableGroup = (options)=>{\n    const tabster = useTabster();\n    if (tabster) {\n        getGroupper(tabster);\n    }\n    return useTabsterAttributes({\n        groupper: {\n            tabbability: getTabbability(options === null || options === void 0 ? void 0 : options.tabBehavior)\n        },\n        focusable: {\n            ignoreKeydown: options === null || options === void 0 ? void 0 : options.ignoreDefaultKeydown\n        }\n    });\n};\nconst getTabbability = (tabBehavior)=>{\n    switch(tabBehavior){\n        case 'unlimited':\n            return Types.GroupperTabbabilities.Unlimited;\n        case 'limited':\n            return Types.GroupperTabbabilities.Limited;\n        case 'limited-trap-focus':\n            return Types.GroupperTabbabilities.LimitedTrapFocus;\n        default:\n            return undefined;\n    }\n};\n"],"names":["useFocusableGroup","options","tabster","useTabster","getGroupper","useTabsterAttributes","groupper","tabbability","getTabbability","tabBehavior","focusable","ignoreKeydown","ignoreDefaultKeydown","Types","GroupperTabbabilities","Unlimited","Limited","LimitedTrapFocus","undefined"],"mappings":";;;;+BAMiBA;;;eAAAA;;;yBANkB;sCACE;4BACV;AAIhB,MAAMA,oBAAoB,CAACC;IAClC,MAAMC,UAAUC,IAAAA,sBAAU;IAC1B,IAAID,SAAS;QACTE,IAAAA,oBAAW,EAACF;IAChB;IACA,OAAOG,IAAAA,0CAAoB,EAAC;QACxBC,UAAU;YACNC,aAAaC,eAAeP,YAAY,QAAQA,YAAY,KAAK,IAAI,KAAK,IAAIA,QAAQQ,WAAW;QACrG;QACAC,WAAW;YACPC,eAAeV,YAAY,QAAQA,YAAY,KAAK,IAAI,KAAK,IAAIA,QAAQW,oBAAoB;QACjG;IACJ;AACJ;AACA,MAAMJ,iBAAiB,CAACC;IACpB,OAAOA;QACH,KAAK;YACD,OAAOI,cAAK,CAACC,qBAAqB,CAACC,SAAS;QAChD,KAAK;YACD,OAAOF,cAAK,CAACC,qBAAqB,CAACE,OAAO;QAC9C,KAAK;YACD,OAAOH,cAAK,CAACC,qBAAqB,CAACG,gBAAgB;QACvD;YACI,OAAOC;IACf;AACJ"}

package/lib-commonjs/hooks/useTabster.js

@@ -14,9 +14,8 @@ const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
 const _tabster = require("tabster");
 const _reactutilities = require("@fluentui/react-utilities");
 const useTabster = ()=>{
-    var _targetDocument;
     const { targetDocument } = (0, _reactsharedcontexts.useFluent_unstable)();
-    const defaultView = ((_targetDocument = targetDocument) === null || _targetDocument === void 0 ? void 0 : _targetDocument.defaultView) || undefined;
+    const defaultView = (targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.defaultView) || undefined;
     const tabster = _react.useMemo(()=>{
         if (!defaultView) {
             return null;

package/lib-commonjs/hooks/useTabster.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useTabster.js"],"sourcesContent":["import * as React from 'react';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport { createTabster, disposeTabster } from 'tabster';\nimport { useIsomorphicLayoutEffect } from '@fluentui/react-utilities';\n/**\n * Tries to get a tabster instance on the current window or creates a new one\n * Since Tabster is single instance only, feel free to call this hook to ensure Tabster exists if necessary\n *\n * @internal\n * @returns Tabster core instance\n */ export const useTabster = ()=>{\n    var _targetDocument;\n    const { targetDocument } = useFluent();\n    const defaultView = ((_targetDocument = targetDocument) === null || _targetDocument === void 0 ? void 0 : _targetDocument.defaultView) || undefined;\n    const tabster = React.useMemo(()=>{\n        if (!defaultView) {\n            return null;\n        }\n        return createTabster(defaultView, {\n            autoRoot: {},\n            controlTab: false\n        });\n    }, [\n        defaultView\n    ]);\n    useIsomorphicLayoutEffect(()=>{\n        return ()=>{\n            if (tabster) {\n                disposeTabster(tabster);\n            }\n        };\n    }, [\n        tabster\n    ]);\n    return tabster;\n};\n"],"names":["useTabster","_targetDocument","targetDocument","useFluent","defaultView","undefined","tabster","React","useMemo","createTabster","autoRoot","controlTab","useIsomorphicLayoutEffect","disposeTabster"],"mappings":";;;;+BAUiBA;;;eAAAA;;;;iEAVM;qCACyB;yBACF;gCACJ;AAO/B,MAAMA,aAAa;IAC1B,IAAIC;IACJ,MAAM,EAAEC,cAAc,EAAE,GAAGC,IAAAA,uCAAS;IACpC,MAAMC,cAAc,AAAC,CAAA,AAACH,CAAAA,kBAAkBC,cAAa,MAAO,QAAQD,oBAAoB,KAAK,IAAI,KAAK,IAAIA,gBAAgBG,WAAW,AAAD,KAAMC;IAC1I,MAAMC,UAAUC,OAAMC,OAAO,CAAC;QAC1B,IAAI,CAACJ,aAAa;YACd,OAAO;QACX;QACA,OAAOK,IAAAA,sBAAa,EAACL,aAAa;YAC9BM,UAAU,CAAC;YACXC,YAAY;QAChB;IACJ,GAAG;QACCP;KACH;IACDQ,IAAAA,yCAAyB,EAAC;QACtB,OAAO;YACH,IAAIN,SAAS;gBACTO,IAAAA,uBAAc,EAACP;YACnB;QACJ;IACJ,GAAG;QACCA;KACH;IACD,OAAOA;AACX"}
+{"version":3,"sources":["useTabster.js"],"sourcesContent":["import * as React from 'react';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport { createTabster, disposeTabster } from 'tabster';\nimport { useIsomorphicLayoutEffect } from '@fluentui/react-utilities';\n/**\n * Tries to get a tabster instance on the current window or creates a new one\n * Since Tabster is single instance only, feel free to call this hook to ensure Tabster exists if necessary\n *\n * @internal\n * @returns Tabster core instance\n */ export const useTabster = ()=>{\n    const { targetDocument } = useFluent();\n    const defaultView = (targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.defaultView) || undefined;\n    const tabster = React.useMemo(()=>{\n        if (!defaultView) {\n            return null;\n        }\n        return createTabster(defaultView, {\n            autoRoot: {},\n            controlTab: false\n        });\n    }, [\n        defaultView\n    ]);\n    useIsomorphicLayoutEffect(()=>{\n        return ()=>{\n            if (tabster) {\n                disposeTabster(tabster);\n            }\n        };\n    }, [\n        tabster\n    ]);\n    return tabster;\n};\n"],"names":["useTabster","targetDocument","useFluent","defaultView","undefined","tabster","React","useMemo","createTabster","autoRoot","controlTab","useIsomorphicLayoutEffect","disposeTabster"],"mappings":";;;;+BAUiBA;;;eAAAA;;;;iEAVM;qCACyB;yBACF;gCACJ;AAO/B,MAAMA,aAAa;IAC1B,MAAM,EAAEC,cAAc,EAAE,GAAGC,IAAAA,uCAAS;IACpC,MAAMC,cAAc,AAACF,CAAAA,mBAAmB,QAAQA,mBAAmB,KAAK,IAAI,KAAK,IAAIA,eAAeE,WAAW,AAAD,KAAMC;IACpH,MAAMC,UAAUC,OAAMC,OAAO,CAAC;QAC1B,IAAI,CAACJ,aAAa;YACd,OAAO;QACX;QACA,OAAOK,IAAAA,sBAAa,EAACL,aAAa;YAC9BM,UAAU,CAAC;YACXC,YAAY;QAChB;IACJ,GAAG;QACCP;KACH;IACDQ,IAAAA,yCAAyB,EAAC;QACtB,OAAO;YACH,IAAIN,SAAS;gBACTO,IAAAA,uBAAc,EAACP;YACnB;QACJ;IACJ,GAAG;QACCA;KACH;IACD,OAAOA;AACX"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-tabster",
-  "version": "9.12.10",
+  "version": "9.13.1",
   "description": "Utilities for focus management and facade for tabster",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -31,9 +31,9 @@
     "@fluentui/scripts-tasks": "*"
   },
   "dependencies": {
-    "@fluentui/react-shared-contexts": "^9.8.0",
-    "@fluentui/react-theme": "^9.1.12",
-    "@fluentui/react-utilities": "^9.13.3",
+    "@fluentui/react-shared-contexts": "^9.9.1",
+    "@fluentui/react-theme": "^9.1.14",
+    "@fluentui/react-utilities": "^9.13.5",
     "@griffel/react": "^1.5.14",
     "@swc/helpers": "^0.5.1",
     "keyborg": "^2.0.0",