@fluentui/react-tabster 9.7.4 → 9.8.0

package/CHANGELOG.json

@@ -2,7 +2,83 @@
   "name": "@fluentui/react-tabster",
   "entries": [
     {
-      "date": "Thu, 25 May 2023 09:57:45 GMT",
+      "date": "Tue, 20 Jun 2023 12:34:48 GMT",
+      "tag": "@fluentui/react-tabster_v9.8.0",
+      "version": "9.8.0",
+      "comments": {
+        "patch": [
+          {
+            "author": "martinhochel@microsoft.com",
+            "package": "@fluentui/react-tabster",
+            "commit": "cf6b94ba6559236150bc1f1814b023607edaeb20",
+            "comment": "chore: migrate to ts 4.7 which wont emit undefined anymore for optional arguments"
+          }
+        ],
+        "minor": [
+          {
+            "author": "jukapsia@microsoft.com",
+            "package": "@fluentui/react-tabster",
+            "commit": "1a277b9c4d55bc1b7c65a73383425b1934ec1dad",
+            "comment": "useArrowNavigationGroup grid-linear axis"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-tabster",
+            "comment": "Bump @fluentui/react-shared-contexts to v9.5.1",
+            "commit": "81c9b35e0830297b2aca2cece2ae67b3899c4647"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-tabster",
+            "comment": "Bump @fluentui/react-theme to v9.1.9",
+            "commit": "81c9b35e0830297b2aca2cece2ae67b3899c4647"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-tabster",
+            "comment": "Bump @fluentui/react-utilities to v9.9.3",
+            "commit": "81c9b35e0830297b2aca2cece2ae67b3899c4647"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Wed, 31 May 2023 06:46:20 GMT",
+      "tag": "@fluentui/react-tabster_v9.7.5",
+      "version": "9.7.5",
+      "comments": {
+        "patch": [
+          {
+            "author": "seanmonahan@microsoft.com",
+            "package": "@fluentui/react-tabster",
+            "commit": "d640b972d7ac86bfb76ae6c6329f12cdd33b3b7c",
+            "comment": "chore: Update Griffel to v1.5.7."
+          },
+          {
+            "author": "marcosvmmoura@gmail.com",
+            "package": "@fluentui/react-tabster",
+            "commit": "d6b67f35176ab121fa3c3b7dbef32871d2f785e6",
+            "comment": "fix: createFocusOutlineStyle cannot work with CSS variables"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-tabster",
+            "comment": "Bump @fluentui/react-utilities to v9.9.2",
+            "commit": "17ca96c6b7f684f36a5c63e40e78b4986a86c713"
+          }
+        ],
+        "none": [
+          {
+            "author": "martinhochel@microsoft.com",
+            "package": "@fluentui/react-tabster",
+            "commit": "4b637ced41e430bf8d79c7fc67c103d5efdfd3a8",
+            "comment": "fix: tweak type errors exposed in ts 4.5"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Thu, 25 May 2023 10:00:48 GMT",
       "tag": "@fluentui/react-tabster_v9.7.4",
       "version": "9.7.4",
       "comments": {

package/CHANGELOG.md

@@ -1,12 +1,39 @@
 # Change Log - @fluentui/react-tabster
 
-This log was last generated on Thu, 25 May 2023 09:57:45 GMT and should not be manually modified.
+This log was last generated on Tue, 20 Jun 2023 12:34:48 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.8.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-tabster_v9.8.0)
+
+Tue, 20 Jun 2023 12:34:48 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tabster_v9.7.5..@fluentui/react-tabster_v9.8.0)
+
+### Minor changes
+
+- useArrowNavigationGroup grid-linear axis ([PR #28253](https://github.com/microsoft/fluentui/pull/28253) by jukapsia@microsoft.com)
+- Bump @fluentui/react-shared-contexts to v9.5.1 ([PR #28229](https://github.com/microsoft/fluentui/pull/28229) by beachball)
+- Bump @fluentui/react-theme to v9.1.9 ([PR #28229](https://github.com/microsoft/fluentui/pull/28229) by beachball)
+- Bump @fluentui/react-utilities to v9.9.3 ([PR #28229](https://github.com/microsoft/fluentui/pull/28229) by beachball)
+
+### Patches
+
+- chore: migrate to ts 4.7 which wont emit undefined anymore for optional arguments ([PR #28067](https://github.com/microsoft/fluentui/pull/28067) by martinhochel@microsoft.com)
+
+## [9.7.5](https://github.com/microsoft/fluentui/tree/@fluentui/react-tabster_v9.7.5)
+
+Wed, 31 May 2023 06:46:20 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tabster_v9.7.4..@fluentui/react-tabster_v9.7.5)
+
+### Patches
+
+- chore: Update Griffel to v1.5.7. ([PR #27925](https://github.com/microsoft/fluentui/pull/27925) by seanmonahan@microsoft.com)
+- fix: createFocusOutlineStyle cannot work with CSS variables ([PR #27966](https://github.com/microsoft/fluentui/pull/27966) by marcosvmmoura@gmail.com)
+- Bump @fluentui/react-utilities to v9.9.2 ([PR #28054](https://github.com/microsoft/fluentui/pull/28054) by beachball)
+
 ## [9.7.4](https://github.com/microsoft/fluentui/tree/@fluentui/react-tabster_v9.7.4)
 
-Thu, 25 May 2023 09:57:45 GMT 
+Thu, 25 May 2023 10:00:48 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tabster_v9.7.3..@fluentui/react-tabster_v9.7.4)
 
 ### Patches

package/dist/index.d.ts

@@ -78,7 +78,7 @@ export declare interface UseArrowNavigationGroupOptions {
      * Focus will navigate vertically, horizontally or in both directions (grid), defaults to horizontally
      * @defaultValue vertical
      */
-    axis?: 'vertical' | 'horizontal' | 'grid' | 'both';
+    axis?: 'vertical' | 'horizontal' | 'grid' | 'grid-linear' | 'both';
     /**
      * Focus will cycle to the first/last elements of the group without stopping
      */
@@ -108,7 +108,7 @@ export declare interface UseArrowNavigationGroupOptions {
  * A hook that returns the necessary tabster attributes to support groupping.
  * @param options - Options to configure keyboard navigation
  */
-export declare const useFocusableGroup: (options?: UseFocusableGroupOptions | undefined) => Types.TabsterDOMAttribute;
+export declare const useFocusableGroup: (options?: UseFocusableGroupOptions) => Types.TabsterDOMAttribute;
 
 export declare interface UseFocusableGroupOptions {
     /**
@@ -131,7 +131,7 @@ export declare const useFocusFinders: () => {
 export declare function useFocusVisible<TElement extends HTMLElement = HTMLElement>(options?: UseFocusVisibleOptions): React_2.RefObject<TElement>;
 
 declare type UseFocusVisibleOptions = {
-    targetDocument?: HTMLDocument;
+    targetDocument?: Document;
 };
 
 /**

package/lib/focus/constants.js

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

package/lib/focus/constants.js.map

@@ -1 +1 @@
-{"version":3,"names":["KEYBOARD_NAV_ATTRIBUTE","KEYBOARD_NAV_SELECTOR","FOCUS_VISIBLE_ATTR","FOCUS_WITHIN_ATTR","defaultOptions","style","selector"],"sources":["../../src/focus/constants.ts"],"sourcesContent":["export const KEYBOARD_NAV_ATTRIBUTE = 'data-keyboard-nav' as const;\nexport const KEYBOARD_NAV_SELECTOR = `:global([${KEYBOARD_NAV_ATTRIBUTE}])` as const;\n\n/**\n * @internal\n */\nexport const FOCUS_VISIBLE_ATTR = 'data-fui-focus-visible';\n\n/**\n * @internal\n */\nexport const FOCUS_WITHIN_ATTR = 'data-fui-focus-within';\nexport const defaultOptions = {\n  style: {},\n  selector: 'focus',\n} as const;\n"],"mappings":"AAAA,OAAO,MAAMA,sBAAA,GAAyB;AACtC,OAAO,MAAMC,qBAAA,GAAyB,YAAWD,sBAAuB,IAAG;AAE3E;;;AAGA,OAAO,MAAME,kBAAA,GAAqB;AAElC;;;AAGA,OAAO,MAAMC,iBAAA,GAAoB;AACjC,OAAO,MAAMC,cAAA,GAAiB;EAC5BC,KAAA,EAAO,CAAC;EACRC,QAAA,EAAU;AACZ"}
+{"version":3,"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"}

package/lib/focus/createCustomFocusIndicatorStyle.js

@@ -5,17 +5,13 @@ 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) {
-  return {
-    ...(selector === 'focus' && {
-      [`&[${FOCUS_VISIBLE_ATTR}]`]: style
-    }),
-    ...(selector === 'focus-within' && {
-      [`&[${FOCUS_WITHIN_ATTR}]:${selector}`]: style
-    })
-  };
+ */ export function createCustomFocusIndicatorStyle(style, { selector =defaultOptions.selector  } = defaultOptions) {
+    return {
+        ...selector === 'focus' && {
+            [`&[${FOCUS_VISIBLE_ATTR}]`]: style
+        },
+        ...selector === 'focus-within' && {
+            [`&[${FOCUS_WITHIN_ATTR}]:${selector}`]: style
+        }
+    };
 }
-//# sourceMappingURL=createCustomFocusIndicatorStyle.js.map

package/lib/focus/createCustomFocusIndicatorStyle.js.map

@@ -1 +1 @@
-{"version":3,"names":["defaultOptions","FOCUS_VISIBLE_ATTR","FOCUS_WITHIN_ATTR","createCustomFocusIndicatorStyle","style","selector"],"sources":["../../src/focus/createCustomFocusIndicatorStyle.ts"],"sourcesContent":["import { defaultOptions, FOCUS_VISIBLE_ATTR, FOCUS_WITHIN_ATTR } from './constants';\nimport { makeResetStyles } from '@griffel/react';\nimport type { GriffelStyle } from '@griffel/react';\n\n// TODO: Use the type directly from @griffel/react\n// https://github.com/microsoft/griffel/pull/278\ntype GriffelResetStyle = Parameters<typeof makeResetStyles>[0];\n\nexport interface CreateCustomFocusIndicatorStyleOptions {\n  /**\n   * Control if the indicator appears when the corresponding element is focused,\n   * or any child is focused within the corresponding element.\n   * @default 'focus'\n   */\n  selector?: 'focus' | 'focus-within';\n  /**\n   * Enables the browser default outline style\n   * @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"],"mappings":"AAAA,SAASA,cAAc,EAAEC,kBAAkB,EAAEC,iBAAiB,QAAQ;AAuBtE;;;;;;;AAOA,OAAO,SAASC,gCACdC,KAAa,EACb;EAAEC,QAAA,GAAWL,cAAA,CAAeK;AAAQ,CAA0C,GAAGL,cAAc,EAC/B;EAChE,OAAO;IACL,IAAIK,QAAA,KAAa,WAAW;MAC1B,CAAE,KAAIJ,kBAAmB,GAAE,GAAGG;IAChC,CAAC;IACD,IAAIC,QAAA,KAAa,kBAAkB;MACjC,CAAE,KAAIH,iBAAkB,KAAIG,QAAS,EAAC,GAAGD;IAC3C,CAAC;EACH;AACF"}
+{"version":3,"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,UAAWL,eAAeK,QAAQ,CAAA,EAA0C,GAAGL,cAAc,EAC/B;IAChE,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,CAAC"}

package/lib/focus/createFocusOutlineStyle.js

@@ -2,41 +2,44 @@ import { tokens } from '@fluentui/react-theme';
 import { shorthands } from '@griffel/react';
 import { createCustomFocusIndicatorStyle } from './createCustomFocusIndicatorStyle';
 import { defaultOptions } from './constants';
+/**
+ * Get the position of the focus outline
+ *
+ * @param options - Configures the style of the focus outline
+ * @param position - The position of the focus outline
+ * @returns CSS value for the position of the focus outline
+ */ function getOutlinePosition({ outlineWidth , outlineOffset  }, position) {
+    const offsetValue = (outlineOffset === null || outlineOffset === void 0 ? void 0 : outlineOffset[position]) || outlineOffset;
+    if (!outlineOffset) {
+        return `calc(${outlineWidth} * -1)`;
+    }
+    return `calc(0px - ${outlineWidth} - ${offsetValue})`;
+}
 /**
  * NOTE: the element with the focus outline needs to have `position: relative` so that the
  * pseudo element can be properly positioned.
  *
  * @param options - Configures the style of the focus outline
  * @returns focus outline styles object
- */
-const getFocusOutlineStyles = options => {
-  const {
-    outlineRadius,
-    outlineColor,
-    outlineOffset,
-    outlineWidth
-  } = options;
-  const outlineOffsetTop = (outlineOffset === null || outlineOffset === void 0 ? void 0 : outlineOffset.top) || outlineOffset;
-  const outlineOffsetBottom = (outlineOffset === null || outlineOffset === void 0 ? void 0 : outlineOffset.bottom) || outlineOffset;
-  const outlineOffsetLeft = (outlineOffset === null || outlineOffset === void 0 ? void 0 : outlineOffset.left) || outlineOffset;
-  const outlineOffsetRight = (outlineOffset === null || outlineOffset === void 0 ? void 0 : outlineOffset.right) || outlineOffset;
-  return {
-    ...shorthands.borderColor('transparent'),
-    '::after': {
-      content: '""',
-      position: 'absolute',
-      pointerEvents: 'none',
-      zIndex: 1,
-      ...shorthands.borderStyle('solid'),
-      ...shorthands.borderWidth(outlineWidth),
-      ...shorthands.borderRadius(outlineRadius),
-      ...shorthands.borderColor(outlineColor),
-      top: !outlineOffset ? `-${outlineWidth}` : `calc(0px - ${outlineWidth} - ${outlineOffsetTop})`,
-      bottom: !outlineOffset ? `-${outlineWidth}` : `calc(0px - ${outlineWidth} - ${outlineOffsetBottom})`,
-      left: !outlineOffset ? `-${outlineWidth}` : `calc(0px - ${outlineWidth} - ${outlineOffsetLeft})`,
-      right: !outlineOffset ? `-${outlineWidth}` : `calc(0px - ${outlineWidth} - ${outlineOffsetRight})`
-    }
-  };
+ */ const getFocusOutlineStyles = (options)=>{
+    const { outlineRadius , outlineColor , outlineWidth  } = options;
+    return {
+        ...shorthands.borderColor('transparent'),
+        '::after': {
+            content: '""',
+            position: 'absolute',
+            pointerEvents: 'none',
+            zIndex: 1,
+            ...shorthands.borderStyle('solid'),
+            ...shorthands.borderWidth(outlineWidth),
+            ...shorthands.borderRadius(outlineRadius),
+            ...shorthands.borderColor(outlineColor),
+            top: getOutlinePosition(options, 'top'),
+            right: getOutlinePosition(options, 'right'),
+            bottom: getOutlinePosition(options, 'bottom'),
+            left: getOutlinePosition(options, 'left')
+        }
+    };
 };
 /**
  * NOTE: The element with the focus outline needs to have `position: relative` so that the
@@ -44,26 +47,20 @@ const getFocusOutlineStyles = options => {
  *
  * @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) => ({
-  ':focus': {
-    outlineStyle: enableOutline ? undefined : 'none'
-  },
-  ':focus-visible': {
-    outlineStyle: enableOutline ? undefined : 'none'
-  },
-  ...createCustomFocusIndicatorStyle(getFocusOutlineStyles({
-    outlineColor: tokens.colorStrokeFocus2,
-    outlineRadius: tokens.borderRadiusMedium,
-    // FIXME: tokens.strokeWidthThick causes some weird bugs
-    outlineWidth: '2px',
-    ...style
-  }), {
-    selector
-  })
-});
-//# sourceMappingURL=createFocusOutlineStyle.js.map
+ */ export const createFocusOutlineStyle = ({ enableOutline =false , selector =defaultOptions.selector , style =defaultOptions.style  } = defaultOptions)=>({
+        ':focus': {
+            outlineStyle: enableOutline ? undefined : 'none'
+        },
+        ':focus-visible': {
+            outlineStyle: enableOutline ? undefined : 'none'
+        },
+        ...createCustomFocusIndicatorStyle(getFocusOutlineStyles({
+            outlineColor: tokens.colorStrokeFocus2,
+            outlineRadius: tokens.borderRadiusMedium,
+            // FIXME: tokens.strokeWidthThick causes some weird bugs
+            outlineWidth: '2px',
+            ...style
+        }), {
+            selector
+        })
+    });

package/lib/focus/createFocusOutlineStyle.js.map

@@ -1 +1 @@
-{"version":3,"names":["tokens","shorthands","createCustomFocusIndicatorStyle","defaultOptions","getFocusOutlineStyles","options","outlineRadius","outlineColor","outlineOffset","outlineWidth","outlineOffsetTop","top","outlineOffsetBottom","bottom","outlineOffsetLeft","left","outlineOffsetRight","right","borderColor","content","position","pointerEvents","zIndex","borderStyle","borderWidth","borderRadius","createFocusOutlineStyle","enableOutline","selector","style","outlineStyle","undefined","colorStrokeFocus2","borderRadiusMedium"],"sources":["../../src/focus/createFocusOutlineStyle.ts"],"sourcesContent":["import { tokens } from '@fluentui/react-theme';\nimport { shorthands } from '@griffel/react';\nimport type { GriffelStyle } from '@griffel/react';\nimport {\n  createCustomFocusIndicatorStyle,\n  CreateCustomFocusIndicatorStyleOptions,\n} from './createCustomFocusIndicatorStyle';\nimport { defaultOptions } from './constants';\n\nexport type FocusOutlineOffset = Record<'top' | 'bottom' | 'left' | 'right', string>;\nexport type FocusOutlineStyleOptions = {\n  /**\n   * Only property not supported by the native CSS `outline`, if this is no longer needed\n   * we can just go native instead\n   */\n  outlineRadius: string;\n  outlineColor: string;\n  outlineWidth: string;\n  outlineOffset?: string | FocusOutlineOffset;\n};\nexport interface CreateFocusOutlineStyleOptions extends Omit<CreateCustomFocusIndicatorStyleOptions, 'enableOutline'> {\n  style?: Partial<FocusOutlineStyleOptions>;\n\n  /**\n   * Enables the browser default outline style\n   */\n  enableOutline?: boolean;\n}\n\n/**\n * NOTE: the element with the focus outline needs to have `position: relative` so that the\n * pseudo element can be properly positioned.\n *\n * @param options - Configures the style of the focus outline\n * @returns focus outline styles object\n */\nconst getFocusOutlineStyles = (options: FocusOutlineStyleOptions): GriffelStyle => {\n  const { outlineRadius, outlineColor, outlineOffset, outlineWidth } = options;\n\n  const outlineOffsetTop = (outlineOffset as FocusOutlineOffset)?.top || outlineOffset;\n  const outlineOffsetBottom = (outlineOffset as FocusOutlineOffset)?.bottom || outlineOffset;\n  const outlineOffsetLeft = (outlineOffset as FocusOutlineOffset)?.left || outlineOffset;\n  const outlineOffsetRight = (outlineOffset as FocusOutlineOffset)?.right || outlineOffset;\n\n  return {\n    ...shorthands.borderColor('transparent'),\n    '::after': {\n      content: '\"\"',\n      position: 'absolute',\n      pointerEvents: 'none',\n      zIndex: 1,\n\n      ...shorthands.borderStyle('solid'),\n      ...shorthands.borderWidth(outlineWidth),\n      ...shorthands.borderRadius(outlineRadius),\n      ...shorthands.borderColor(outlineColor),\n\n      top: !outlineOffset ? `-${outlineWidth}` : `calc(0px - ${outlineWidth} - ${outlineOffsetTop})`,\n      bottom: !outlineOffset ? `-${outlineWidth}` : `calc(0px - ${outlineWidth} - ${outlineOffsetBottom})`,\n      left: !outlineOffset ? `-${outlineWidth}` : `calc(0px - ${outlineWidth} - ${outlineOffsetLeft})`,\n      right: !outlineOffset ? `-${outlineWidth}` : `calc(0px - ${outlineWidth} - ${outlineOffsetRight})`,\n    },\n  };\n};\n\n/**\n * NOTE: The element with the focus outline needs to have `position: relative` so that the\n * pseudo element can be properly positioned.\n *\n * @param options - Configure the style of the focus outline\n * @returns focus outline styles object for @see makeStyles\n */\nexport const createFocusOutlineStyle = ({\n  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"],"mappings":"AAAA,SAASA,MAAM,QAAQ;AACvB,SAASC,UAAU,QAAQ;AAE3B,SACEC,+BAA+B,QAE1B;AACP,SAASC,cAAc,QAAQ;AAsB/B;;;;;;;AAOA,MAAMC,qBAAA,GAAyBC,OAAA,IAAoD;EACjF,MAAM;IAAEC,aAAA;IAAeC,YAAA;IAAcC,aAAA;IAAeC;EAAY,CAAE,GAAGJ,OAAA;EAErE,MAAMK,gBAAA,GAAmB,CAAAF,aAAC,aAAAA,aAAA,cAAD,SAAAA,aAAC,CAAsCG,GAAG,KAAIH,aAAA;EACvE,MAAMI,mBAAA,GAAsB,CAAAJ,aAAC,aAAAA,aAAA,cAAD,SAAAA,aAAC,CAAsCK,MAAM,KAAIL,aAAA;EAC7E,MAAMM,iBAAA,GAAoB,CAAAN,aAAC,aAAAA,aAAA,cAAD,SAAAA,aAAC,CAAsCO,IAAI,KAAIP,aAAA;EACzE,MAAMQ,kBAAA,GAAqB,CAAAR,aAAC,aAAAA,aAAA,cAAD,SAAAA,aAAC,CAAsCS,KAAK,KAAIT,aAAA;EAE3E,OAAO;IACL,GAAGP,UAAA,CAAWiB,WAAW,CAAC,cAAc;IACxC,WAAW;MACTC,OAAA,EAAS;MACTC,QAAA,EAAU;MACVC,aAAA,EAAe;MACfC,MAAA,EAAQ;MAER,GAAGrB,UAAA,CAAWsB,WAAW,CAAC,QAAQ;MAClC,GAAGtB,UAAA,CAAWuB,WAAW,CAACf,YAAA,CAAa;MACvC,GAAGR,UAAA,CAAWwB,YAAY,CAACnB,aAAA,CAAc;MACzC,GAAGL,UAAA,CAAWiB,WAAW,CAACX,YAAA,CAAa;MAEvCI,GAAA,EAAK,CAACH,aAAA,GAAiB,IAAGC,YAAa,EAAC,GAAI,cAAaA,YAAa,MAAKC,gBAAiB,GAAE;MAC9FG,MAAA,EAAQ,CAACL,aAAA,GAAiB,IAAGC,YAAa,EAAC,GAAI,cAAaA,YAAa,MAAKG,mBAAoB,GAAE;MACpGG,IAAA,EAAM,CAACP,aAAA,GAAiB,IAAGC,YAAa,EAAC,GAAI,cAAaA,YAAa,MAAKK,iBAAkB,GAAE;MAChGG,KAAA,EAAO,CAACT,aAAA,GAAiB,IAAGC,YAAa,EAAC,GAAI,cAAaA,YAAa,MAAKO,kBAAmB;IAClG;EACF;AACF;AAEA;;;;;;;AAOA,OAAO,MAAMU,uBAAA,GAA0BA,CAAC;EACtCC,aAAA,GAAgB,KAAK;EACrBC,QAAA,GAAWzB,cAAA,CAAeyB,QAAQ;EAClCC,KAAA,GAAQ1B,cAAA,CAAe0B;AAAK,CACG,GAAG1B,cAAc,MAAoB;EACpE,UAAU;IACR2B,YAAA,EAAcH,aAAA,GAAgBI,SAAA,GAAY;EAC5C;EACA,kBAAkB;IAChBD,YAAA,EAAcH,aAAA,GAAgBI,SAAA,GAAY;EAC5C;EAEA,GAAG7B,+BAAA,CACDE,qBAAA,CAAsB;IACpBG,YAAA,EAAcP,MAAA,CAAOgC,iBAAiB;IACtC1B,aAAA,EAAeN,MAAA,CAAOiC,kBAAkB;IACxC;IACAxB,YAAA,EAAc;IACd,GAAGoB;EACL,IACA;IAAED;EAAS;AAEf"}
+{"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,aAAY,EAAEC,cAAa,EAA4B,EACzDC,QAA6C,EAC7C;IACA,MAAMC,cAAc,CAAA,AAACF,0BAAAA,2BAAD,KAAA,IAAA,AAACA,aAAsC,CAACC,SAAS,AAAD,KAAKD;IAEzE,IAAI,CAACA,eAAe;QAClB,OAAO,CAAC,KAAK,EAAED,aAAa,MAAM,CAAC;IACrC,CAAC;IAED,OAAO,CAAC,WAAW,EAAEA,aAAa,GAAG,EAAEG,YAAY,CAAC,CAAC;AACvD;AAEA;;;;;;CAMC,GACD,MAAMC,wBAAwB,CAACC,UAAoD;IACjF,MAAM,EAAEC,cAAa,EAAEC,aAAY,EAAEP,aAAY,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,eAAgB,KAAK,CAAA,EACrBC,UAAWvB,eAAeuB,QAAQ,CAAA,EAClCC,OAAQxB,eAAewB,KAAK,CAAA,EACG,GAAGxB,cAAc,GAAoB,CAAA;QACpE,UAAU;YACRyB,cAAcH,gBAAgBI,YAAY,MAAM;QAClD;QACA,kBAAkB;YAChBD,cAAcH,gBAAgBI,YAAY,MAAM;QAClD;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"}

package/lib/focus/focusVisiblePolyfill.js

@@ -5,69 +5,67 @@ import { FOCUS_VISIBLE_ATTR } from './constants';
  * @internal
  * @param scope - Applies the ponyfill to all DOM children
  * @param targetWindow - window
- */
-export function applyFocusVisiblePolyfill(scope, targetWindow) {
-  if (alreadyInScope(scope)) {
-    // Focus visible polyfill already applied at this scope
-    return () => undefined;
-  }
-  const state = {
-    current: undefined
-  };
-  const keyborg = createKeyborg(targetWindow);
-  // When navigation mode changes remove the focus-visible selector
-  keyborg.subscribe(isNavigatingWithKeyboard => {
-    if (!isNavigatingWithKeyboard && state.current) {
-      removeFocusVisibleClass(state.current);
-      state.current = undefined;
+ */ export function applyFocusVisiblePolyfill(scope, targetWindow) {
+    if (alreadyInScope(scope)) {
+        // Focus visible polyfill already applied at this scope
+        return ()=>undefined;
     }
-  });
-  // Keyborg's focusin event is delegated so it's only registered once on the window
-  // and contains metadata about the focus event
-  const keyborgListener = e => {
-    if (state.current) {
-      removeFocusVisibleClass(state.current);
-      state.current = undefined;
-    }
-    if (keyborg.isNavigatingWithKeyboard() && isHTMLElement(e.target) && e.target) {
-      // Griffel can't create chained global styles so use the parent element for now
-      state.current = e.target;
-      applyFocusVisibleClass(state.current);
-    }
-  };
-  // Make sure that when focus leaves the scope, the focus visible class is removed
-  const blurListener = e => {
-    if (!e.relatedTarget || isHTMLElement(e.relatedTarget) && !scope.contains(e.relatedTarget)) {
-      if (state.current) {
-        removeFocusVisibleClass(state.current);
-        state.current = undefined;
-      }
-    }
-  };
-  scope.addEventListener(KEYBORG_FOCUSIN, keyborgListener);
-  scope.addEventListener('focusout', blurListener);
-  scope.focusVisible = true;
-  // Return disposer
-  return () => {
-    scope.removeEventListener(KEYBORG_FOCUSIN, keyborgListener);
-    scope.removeEventListener('focusout', blurListener);
-    delete scope.focusVisible;
-    disposeKeyborg(keyborg);
-  };
+    const state = {
+        current: undefined
+    };
+    const keyborg = createKeyborg(targetWindow);
+    // When navigation mode changes remove the focus-visible selector
+    keyborg.subscribe((isNavigatingWithKeyboard)=>{
+        if (!isNavigatingWithKeyboard && state.current) {
+            removeFocusVisibleClass(state.current);
+            state.current = undefined;
+        }
+    });
+    // Keyborg's focusin event is delegated so it's only registered once on the window
+    // and contains metadata about the focus event
+    const keyborgListener = (e)=>{
+        if (state.current) {
+            removeFocusVisibleClass(state.current);
+            state.current = undefined;
+        }
+        if (keyborg.isNavigatingWithKeyboard() && isHTMLElement(e.target) && e.target) {
+            // Griffel can't create chained global styles so use the parent element for now
+            state.current = e.target;
+            applyFocusVisibleClass(state.current);
+        }
+    };
+    // Make sure that when focus leaves the scope, the focus visible class is removed
+    const blurListener = (e)=>{
+        if (!e.relatedTarget || isHTMLElement(e.relatedTarget) && !scope.contains(e.relatedTarget)) {
+            if (state.current) {
+                removeFocusVisibleClass(state.current);
+                state.current = undefined;
+            }
+        }
+    };
+    scope.addEventListener(KEYBORG_FOCUSIN, keyborgListener);
+    scope.addEventListener('focusout', blurListener);
+    scope.focusVisible = true;
+    // Return disposer
+    return ()=>{
+        scope.removeEventListener(KEYBORG_FOCUSIN, keyborgListener);
+        scope.removeEventListener('focusout', blurListener);
+        delete scope.focusVisible;
+        disposeKeyborg(keyborg);
+    };
 }
 function applyFocusVisibleClass(el) {
-  el.setAttribute(FOCUS_VISIBLE_ATTR, '');
+    el.setAttribute(FOCUS_VISIBLE_ATTR, '');
 }
 function removeFocusVisibleClass(el) {
-  el.removeAttribute(FOCUS_VISIBLE_ATTR);
+    el.removeAttribute(FOCUS_VISIBLE_ATTR);
 }
 function alreadyInScope(el) {
-  if (!el) {
-    return false;
-  }
-  if (el.focusVisible) {
-    return true;
-  }
-  return alreadyInScope(el === null || el === void 0 ? void 0 : el.parentElement);
+    if (!el) {
+        return false;
+    }
+    if (el.focusVisible) {
+        return true;
+    }
+    return alreadyInScope(el === null || el === void 0 ? void 0 : el.parentElement);
 }
-//# sourceMappingURL=focusVisiblePolyfill.js.map

package/lib/focus/focusVisiblePolyfill.js.map

@@ -1 +1 @@
-{"version":3,"names":["isHTMLElement","KEYBORG_FOCUSIN","createKeyborg","disposeKeyborg","FOCUS_VISIBLE_ATTR","applyFocusVisiblePolyfill","scope","targetWindow","alreadyInScope","undefined","state","current","keyborg","subscribe","isNavigatingWithKeyboard","removeFocusVisibleClass","keyborgListener","e","target","applyFocusVisibleClass","blurListener","relatedTarget","contains","addEventListener","focusVisible","removeEventListener","el","setAttribute","removeAttribute","parentElement"],"sources":["../../src/focus/focusVisiblePolyfill.ts"],"sourcesContent":["import { isHTMLElement } from '@fluentui/react-utilities';\nimport { KEYBORG_FOCUSIN, KeyborgFocusInEvent, createKeyborg, disposeKeyborg } from 'keyborg';\n\nimport { FOCUS_VISIBLE_ATTR } from './constants';\n\n/**\n * Because `addEventListener` type override falls back to 2nd definition (evt name is unknown string literal)\n * evt is being typed as a base class of MouseEvent -> `Event`.\n * This type is used to override `listener` calls to make TS happy\n */\ntype ListenerOverride = (evt: Event) => void;\n\ntype FocusVisibleState = {\n  /**\n   * Current element with focus visible in state\n   */\n  current: HTMLElement | undefined;\n};\n\ntype HTMLElementWithFocusVisibleScope = {\n  focusVisible: boolean | undefined;\n} & HTMLElement;\n\n/**\n * @internal\n * @param scope - Applies the ponyfill to all DOM children\n * @param targetWindow - window\n */\nexport function applyFocusVisiblePolyfill(scope: HTMLElement, targetWindow: Window): () => void {\n  if (alreadyInScope(scope)) {\n    // Focus visible polyfill already applied at this scope\n    return () => undefined;\n  }\n\n  const state: FocusVisibleState = {\n    current: undefined,\n  };\n\n  const keyborg = createKeyborg(targetWindow);\n\n  // When navigation mode changes remove the focus-visible selector\n  keyborg.subscribe(isNavigatingWithKeyboard => {\n    if (!isNavigatingWithKeyboard && state.current) {\n      removeFocusVisibleClass(state.current);\n      state.current = undefined;\n    }\n  });\n\n  // Keyborg's focusin event is delegated so it's only registered once on the window\n  // and contains metadata about the focus event\n  const keyborgListener = (e: KeyborgFocusInEvent) => {\n    if (state.current) {\n      removeFocusVisibleClass(state.current);\n      state.current = undefined;\n    }\n\n    if (keyborg.isNavigatingWithKeyboard() && isHTMLElement(e.target) && e.target) {\n      // Griffel can't create chained global styles so use the parent element for now\n      state.current = e.target;\n      applyFocusVisibleClass(state.current);\n    }\n  };\n\n  // Make sure that when focus leaves the scope, the focus visible class is removed\n  const blurListener = (e: FocusEvent) => {\n    if (!e.relatedTarget || (isHTMLElement(e.relatedTarget) && !scope.contains(e.relatedTarget))) {\n      if (state.current) {\n        removeFocusVisibleClass(state.current);\n        state.current = undefined;\n      }\n    }\n  };\n\n  scope.addEventListener(KEYBORG_FOCUSIN, keyborgListener as ListenerOverride);\n  scope.addEventListener('focusout', blurListener);\n  (scope as HTMLElementWithFocusVisibleScope).focusVisible = true;\n\n  // Return disposer\n  return () => {\n    scope.removeEventListener(KEYBORG_FOCUSIN, keyborgListener as ListenerOverride);\n    scope.removeEventListener('focusout', blurListener);\n    delete (scope as HTMLElementWithFocusVisibleScope).focusVisible;\n    disposeKeyborg(keyborg);\n  };\n}\n\nfunction applyFocusVisibleClass(el: HTMLElement) {\n  el.setAttribute(FOCUS_VISIBLE_ATTR, '');\n}\n\nfunction removeFocusVisibleClass(el: HTMLElement) {\n  el.removeAttribute(FOCUS_VISIBLE_ATTR);\n}\n\nfunction alreadyInScope(el: HTMLElement | null | undefined): boolean {\n  if (!el) {\n    return false;\n  }\n\n  if ((el as HTMLElementWithFocusVisibleScope).focusVisible) {\n    return true;\n  }\n\n  return alreadyInScope(el?.parentElement);\n}\n"],"mappings":"AAAA,SAASA,aAAa,QAAQ;AAC9B,SAASC,eAAe,EAAuBC,aAAa,EAAEC,cAAc,QAAQ;AAEpF,SAASC,kBAAkB,QAAQ;AAoBnC;;;;;AAKA,OAAO,SAASC,0BAA0BC,KAAkB,EAAEC,YAAoB,EAAc;EAC9F,IAAIC,cAAA,CAAeF,KAAA,GAAQ;IACzB;IACA,OAAO,MAAMG,SAAA;EACf;EAEA,MAAMC,KAAA,GAA2B;IAC/BC,OAAA,EAASF;EACX;EAEA,MAAMG,OAAA,GAAUV,aAAA,CAAcK,YAAA;EAE9B;EACAK,OAAA,CAAQC,SAAS,CAACC,wBAAA,IAA4B;IAC5C,IAAI,CAACA,wBAAA,IAA4BJ,KAAA,CAAMC,OAAO,EAAE;MAC9CI,uBAAA,CAAwBL,KAAA,CAAMC,OAAO;MACrCD,KAAA,CAAMC,OAAO,GAAGF,SAAA;IAClB;EACF;EAEA;EACA;EACA,MAAMO,eAAA,GAAmBC,CAAA,IAA2B;IAClD,IAAIP,KAAA,CAAMC,OAAO,EAAE;MACjBI,uBAAA,CAAwBL,KAAA,CAAMC,OAAO;MACrCD,KAAA,CAAMC,OAAO,GAAGF,SAAA;IAClB;IAEA,IAAIG,OAAA,CAAQE,wBAAwB,MAAMd,aAAA,CAAciB,CAAA,CAAEC,MAAM,KAAKD,CAAA,CAAEC,MAAM,EAAE;MAC7E;MACAR,KAAA,CAAMC,OAAO,GAAGM,CAAA,CAAEC,MAAM;MACxBC,sBAAA,CAAuBT,KAAA,CAAMC,OAAO;IACtC;EACF;EAEA;EACA,MAAMS,YAAA,GAAgBH,CAAA,IAAkB;IACtC,IAAI,CAACA,CAAA,CAAEI,aAAa,IAAKrB,aAAA,CAAciB,CAAA,CAAEI,aAAa,KAAK,CAACf,KAAA,CAAMgB,QAAQ,CAACL,CAAA,CAAEI,aAAa,GAAI;MAC5F,IAAIX,KAAA,CAAMC,OAAO,EAAE;QACjBI,uBAAA,CAAwBL,KAAA,CAAMC,OAAO;QACrCD,KAAA,CAAMC,OAAO,GAAGF,SAAA;MAClB;IACF;EACF;EAEAH,KAAA,CAAMiB,gBAAgB,CAACtB,eAAA,EAAiBe,eAAA;EACxCV,KAAA,CAAMiB,gBAAgB,CAAC,YAAYH,YAAA;EAClCd,KAAA,CAA2CkB,YAAY,GAAG,IAAI;EAE/D;EACA,OAAO,MAAM;IACXlB,KAAA,CAAMmB,mBAAmB,CAACxB,eAAA,EAAiBe,eAAA;IAC3CV,KAAA,CAAMmB,mBAAmB,CAAC,YAAYL,YAAA;IACtC,OAAOd,KAAC,CAA2CkB,YAAY;IAC/DrB,cAAA,CAAeS,OAAA;EACjB;AACF;AAEA,SAASO,uBAAuBO,EAAe,EAAE;EAC/CA,EAAA,CAAGC,YAAY,CAACvB,kBAAA,EAAoB;AACtC;AAEA,SAASW,wBAAwBW,EAAe,EAAE;EAChDA,EAAA,CAAGE,eAAe,CAACxB,kBAAA;AACrB;AAEA,SAASI,eAAekB,EAAkC,EAAW;EACnE,IAAI,CAACA,EAAA,EAAI;IACP,OAAO,KAAK;EACd;EAEA,IAAIA,EAAC,CAAwCF,YAAY,EAAE;IACzD,OAAO,IAAI;EACb;EAEA,OAAOhB,cAAA,CAAekB,EAAA,aAAAA,EAAA,uBAAAA,EAAA,CAAIG,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,EAAc;IAC9F,IAAIC,eAAeF,QAAQ;QACzB,uDAAuD;QACvD,OAAO,IAAMG;IACf,CAAC;IAED,MAAMC,QAA2B;QAC/BC,SAASF;IACX;IAEA,MAAMG,UAAUV,cAAcK;IAE9B,iEAAiE;IACjEK,QAAQC,SAAS,CAACC,CAAAA,2BAA4B;QAC5C,IAAI,CAACA,4BAA4BJ,MAAMC,OAAO,EAAE;YAC9CI,wBAAwBL,MAAMC,OAAO;YACrCD,MAAMC,OAAO,GAAGF;QAClB,CAAC;IACH;IAEA,kFAAkF;IAClF,8CAA8C;IAC9C,MAAMO,kBAAkB,CAACC,IAA2B;QAClD,IAAIP,MAAMC,OAAO,EAAE;YACjBI,wBAAwBL,MAAMC,OAAO;YACrCD,MAAMC,OAAO,GAAGF;QAClB,CAAC;QAED,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,CAAC;IACH;IAEA,iFAAiF;IACjF,MAAMS,eAAe,CAACH,IAAkB;QACtC,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,CAAC;QACH,CAAC;IACH;IAEAH,MAAMiB,gBAAgB,CAACtB,iBAAiBe;IACxCV,MAAMiB,gBAAgB,CAAC,YAAYH;IAClCd,MAA2CkB,YAAY,GAAG,IAAI;IAE/D,kBAAkB;IAClB,OAAO,IAAM;QACXlB,MAAMmB,mBAAmB,CAACxB,iBAAiBe;QAC3CV,MAAMmB,mBAAmB,CAAC,YAAYL;QACtC,OAAO,AAACd,MAA2CkB,YAAY;QAC/DrB,eAAeS;IACjB;AACF,CAAC;AAED,SAASO,uBAAuBO,EAAe,EAAE;IAC/CA,GAAGC,YAAY,CAACvB,oBAAoB;AACtC;AAEA,SAASW,wBAAwBW,EAAe,EAAE;IAChDA,GAAGE,eAAe,CAACxB;AACrB;AAEA,SAASI,eAAekB,EAAkC,EAAW;IACnE,IAAI,CAACA,IAAI;QACP,OAAO,KAAK;IACd,CAAC;IAED,IAAI,AAACA,GAAwCF,YAAY,EAAE;QACzD,OAAO,IAAI;IACb,CAAC;IAED,OAAOhB,eAAekB,eAAAA,gBAAAA,KAAAA,IAAAA,GAAIG,aAAa;AACzC"}