@fluentui/react-tabster 9.6.5 → 9.7.1

package/CHANGELOG.json

@@ -2,7 +2,79 @@
   "name": "@fluentui/react-tabster",
   "entries": [
     {
-      "date": "Mon, 17 Apr 2023 17:50:13 GMT",
+      "date": "Thu, 18 May 2023 00:35:47 GMT",
+      "tag": "@fluentui/react-tabster_v9.7.1",
+      "version": "9.7.1",
+      "comments": {
+        "none": [
+          {
+            "author": "olfedias@microsoft.com",
+            "package": "@fluentui/react-tabster",
+            "commit": "06cd515eda59a3078bfe32f9cc7c1f281cd20208",
+            "comment": "chore: add test-ssr script to v9 packages"
+          }
+        ],
+        "patch": [
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-tabster",
+            "comment": "Bump @fluentui/react-utilities to v9.9.0",
+            "commit": "c496a1cf1ec82c08753df72c9061e84b77b7daeb"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Fri, 12 May 2023 20:27:53 GMT",
+      "tag": "@fluentui/react-tabster_v9.7.0",
+      "version": "9.7.0",
+      "comments": {
+        "none": [
+          {
+            "author": "martinhochel@microsoft.com",
+            "package": "@fluentui/react-tabster",
+            "commit": "dbda7fa69e3000aaf8dd4a061e254ebd35198b8e",
+            "comment": "fix: update npmignore files to fix npm8/node16 regression how npm publish works"
+          }
+        ],
+        "patch": [
+          {
+            "author": "olfedias@microsoft.com",
+            "package": "@fluentui/react-tabster",
+            "commit": "c28decb23d191a0daaaf6d5d1832429715102129",
+            "comment": "chore: exclude .swcrc from being published"
+          }
+        ],
+        "minor": [
+          {
+            "author": "sarah.higley@microsoft.com",
+            "package": "@fluentui/react-tabster",
+            "commit": "81b87f41557964f9c9f5601a3eec84434eb74f35",
+            "comment": "fix: move `outlineStyle: none` out of createCustomFocusIndicatorStyle and to createFocusOutlineStyle"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-tabster",
+            "comment": "Bump @fluentui/react-shared-contexts to v9.4.0",
+            "commit": "79c08ce5bbf6387b2b18ba4c3d2d5681e0177d4b"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-tabster",
+            "comment": "Bump @fluentui/react-theme to v9.1.8",
+            "commit": "79c08ce5bbf6387b2b18ba4c3d2d5681e0177d4b"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-tabster",
+            "comment": "Bump @fluentui/react-utilities to v9.8.1",
+            "commit": "79c08ce5bbf6387b2b18ba4c3d2d5681e0177d4b"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Mon, 17 Apr 2023 17:54:02 GMT",
       "tag": "@fluentui/react-tabster_v9.6.5",
       "version": "9.6.5",
       "comments": {

package/CHANGELOG.md

@@ -1,12 +1,37 @@
 # Change Log - @fluentui/react-tabster
 
-This log was last generated on Mon, 17 Apr 2023 17:50:13 GMT and should not be manually modified.
+This log was last generated on Thu, 18 May 2023 00:35:47 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.7.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-tabster_v9.7.1)
+
+Thu, 18 May 2023 00:35:47 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tabster_v9.7.0..@fluentui/react-tabster_v9.7.1)
+
+### Patches
+
+- Bump @fluentui/react-utilities to v9.9.0 ([PR #27834](https://github.com/microsoft/fluentui/pull/27834) by beachball)
+
+## [9.7.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-tabster_v9.7.0)
+
+Fri, 12 May 2023 20:27:53 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tabster_v9.6.5..@fluentui/react-tabster_v9.7.0)
+
+### Minor changes
+
+- fix: move `outlineStyle: none` out of createCustomFocusIndicatorStyle and to createFocusOutlineStyle ([PR #26089](https://github.com/microsoft/fluentui/pull/26089) by sarah.higley@microsoft.com)
+- Bump @fluentui/react-shared-contexts to v9.4.0 ([PR #27827](https://github.com/microsoft/fluentui/pull/27827) by beachball)
+- Bump @fluentui/react-theme to v9.1.8 ([PR #27827](https://github.com/microsoft/fluentui/pull/27827) by beachball)
+- Bump @fluentui/react-utilities to v9.8.1 ([PR #27827](https://github.com/microsoft/fluentui/pull/27827) by beachball)
+
+### Patches
+
+- chore: exclude .swcrc from being published ([PR #27740](https://github.com/microsoft/fluentui/pull/27740) by olfedias@microsoft.com)
+
 ## [9.6.5](https://github.com/microsoft/fluentui/tree/@fluentui/react-tabster_v9.6.5)
 
-Mon, 17 Apr 2023 17:50:13 GMT 
+Mon, 17 Apr 2023 17:54:02 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tabster_v9.6.4..@fluentui/react-tabster_v9.6.5)
 
 ### Patches

package/dist/index.d.ts

@@ -18,7 +18,7 @@ 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, enableOutline, }?: CreateCustomFocusIndicatorStyleOptions): TStyle extends GriffelStyle ? GriffelStyle : GriffelResetStyle;
+export declare function createCustomFocusIndicatorStyle<TStyle extends GriffelStyle | GriffelResetStyle>(style: TStyle, { selector }?: CreateCustomFocusIndicatorStyleOptions): TStyle extends GriffelStyle ? GriffelStyle : GriffelResetStyle;
 
 export declare interface CreateCustomFocusIndicatorStyleOptions {
     /**
@@ -29,7 +29,8 @@ export declare interface CreateCustomFocusIndicatorStyleOptions {
     selector?: 'focus' | 'focus-within';
     /**
      * Enables the browser default outline style
-     * @default false
+     * @deprecated The custom focus indicator no longer affects outline styles. Outline is overridden
+     * in the default focus indicator function, `createFocusOutlineStyle`.
      */
     enableOutline?: boolean;
 }
@@ -41,10 +42,14 @@ 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: ({ selector, style, }?: CreateFocusOutlineStyleOptions) => GriffelStyle;
+export declare const createFocusOutlineStyle: ({ enableOutline, selector, style, }?: CreateFocusOutlineStyleOptions) => GriffelStyle;
 
-export declare interface CreateFocusOutlineStyleOptions extends CreateCustomFocusIndicatorStyleOptions {
+export declare interface CreateFocusOutlineStyleOptions extends Omit<CreateCustomFocusIndicatorStyleOptions, 'enableOutline'> {
     style?: Partial<FocusOutlineStyleOptions>;
+    /**
+     * Enables the browser default outline style
+     */
+    enableOutline?: boolean;
 }
 
 export declare type FocusOutlineOffset = Record<'top' | 'bottom' | 'left' | 'right', string>;

package/lib/focus/createCustomFocusIndicatorStyle.js

@@ -7,16 +7,9 @@ import { defaultOptions, FOCUS_VISIBLE_ATTR, FOCUS_WITHIN_ATTR } from './constan
  * @param options - Configure the style of the focus outline
  */
 export function createCustomFocusIndicatorStyle(style, {
-  selector = defaultOptions.selector,
-  enableOutline = false
+  selector = defaultOptions.selector
 } = defaultOptions) {
   return {
-    ':focus': {
-      outlineStyle: enableOutline ? undefined : 'none'
-    },
-    ':focus-visible': {
-      outlineStyle: enableOutline ? undefined : 'none'
-    },
     ...(selector === 'focus' && {
       [`&[${FOCUS_VISIBLE_ATTR}]`]: style
     }),

package/lib/focus/createCustomFocusIndicatorStyle.js.map

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

package/lib/focus/createFocusOutlineStyle.js

@@ -46,15 +46,24 @@ const getFocusOutlineStyles = options => {
  * @returns focus outline styles object for @see makeStyles
  */
 export const createFocusOutlineStyle = ({
+  enableOutline = false,
   selector = defaultOptions.selector,
   style = defaultOptions.style
-} = defaultOptions) => createCustomFocusIndicatorStyle(getFocusOutlineStyles({
-  outlineColor: tokens.colorStrokeFocus2,
-  outlineRadius: tokens.borderRadiusMedium,
-  // FIXME: tokens.strokeWidthThick causes some weird bugs
-  outlineWidth: '2px',
-  ...style
-}), {
-  selector
+} = 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

package/lib/focus/createFocusOutlineStyle.js.map

@@ -1 +1 @@
-{"version":3,"names":["tokens","shorthands","createCustomFocusIndicatorStyle","defaultOptions","getFocusOutlineStyles","options","outlineRadius","outlineColor","outlineOffset","outlineWidth","outlineOffsetTop","top","outlineOffsetBottom","bottom","outlineOffsetLeft","left","outlineOffsetRight","right","borderColor","content","position","pointerEvents","zIndex","borderStyle","borderWidth","borderRadius","createFocusOutlineStyle","selector","style","colorStrokeFocus2","borderRadiusMedium"],"sources":["../../src/focus/createFocusOutlineStyle.ts"],"sourcesContent":["import { tokens } from '@fluentui/react-theme';\nimport { shorthands } from '@griffel/react';\nimport type { GriffelStyle } from '@griffel/react';\nimport {\n  createCustomFocusIndicatorStyle,\n  CreateCustomFocusIndicatorStyleOptions,\n} from './createCustomFocusIndicatorStyle';\nimport { defaultOptions } from './constants';\n\nexport type FocusOutlineOffset = Record<'top' | 'bottom' | 'left' | 'right', string>;\nexport type FocusOutlineStyleOptions = {\n  /**\n   * Only property not supported by the native CSS `outline`, if this is no longer needed\n   * we can just go native instead\n   */\n  outlineRadius: string;\n  outlineColor: string;\n  outlineWidth: string;\n  outlineOffset?: string | FocusOutlineOffset;\n};\nexport interface CreateFocusOutlineStyleOptions extends CreateCustomFocusIndicatorStyleOptions {\n  style?: Partial<FocusOutlineStyleOptions>;\n}\n\n/**\n * NOTE: the element with the focus outline needs to have `position: relative` so that the\n * pseudo element can be properly positioned.\n *\n * @param options - Configures the style of the focus outline\n * @returns focus outline styles object\n */\nconst getFocusOutlineStyles = (options: FocusOutlineStyleOptions): GriffelStyle => {\n  const { outlineRadius, outlineColor, outlineOffset, outlineWidth } = options;\n\n  const outlineOffsetTop = (outlineOffset as FocusOutlineOffset)?.top || outlineOffset;\n  const outlineOffsetBottom = (outlineOffset as FocusOutlineOffset)?.bottom || outlineOffset;\n  const outlineOffsetLeft = (outlineOffset as FocusOutlineOffset)?.left || outlineOffset;\n  const outlineOffsetRight = (outlineOffset as FocusOutlineOffset)?.right || outlineOffset;\n\n  return {\n    ...shorthands.borderColor('transparent'),\n    '::after': {\n      content: '\"\"',\n      position: 'absolute',\n      pointerEvents: 'none',\n      zIndex: 1,\n\n      ...shorthands.borderStyle('solid'),\n      ...shorthands.borderWidth(outlineWidth),\n      ...shorthands.borderRadius(outlineRadius),\n      ...shorthands.borderColor(outlineColor),\n\n      top: !outlineOffset ? `-${outlineWidth}` : `calc(0px - ${outlineWidth} - ${outlineOffsetTop})`,\n      bottom: !outlineOffset ? `-${outlineWidth}` : `calc(0px - ${outlineWidth} - ${outlineOffsetBottom})`,\n      left: !outlineOffset ? `-${outlineWidth}` : `calc(0px - ${outlineWidth} - ${outlineOffsetLeft})`,\n      right: !outlineOffset ? `-${outlineWidth}` : `calc(0px - ${outlineWidth} - ${outlineOffsetRight})`,\n    },\n  };\n};\n\n/**\n * NOTE: The element with the focus outline needs to have `position: relative` so that the\n * pseudo element can be properly positioned.\n *\n * @param options - Configure the style of the focus outline\n * @returns focus outline styles object for @see makeStyles\n */\nexport const createFocusOutlineStyle = ({\n  selector = defaultOptions.selector,\n  style = defaultOptions.style,\n}: CreateFocusOutlineStyleOptions = defaultOptions): GriffelStyle =>\n  createCustomFocusIndicatorStyle(\n    getFocusOutlineStyles({\n      outlineColor: tokens.colorStrokeFocus2,\n      outlineRadius: tokens.borderRadiusMedium,\n      // FIXME: tokens.strokeWidthThick causes some weird bugs\n      outlineWidth: '2px',\n      ...style,\n    }),\n    { selector },\n  );\n"],"mappings":"AAAA,SAASA,MAAM,QAAQ;AACvB,SAASC,UAAU,QAAQ;AAE3B,SACEC,+BAA+B,QAE1B;AACP,SAASC,cAAc,QAAQ;AAiB/B;;;;;;;AAOA,MAAMC,qBAAA,GAAyBC,OAAA,IAAoD;EACjF,MAAM;IAAEC,aAAA;IAAeC,YAAA;IAAcC,aAAA;IAAeC;EAAY,CAAE,GAAGJ,OAAA;EAErE,MAAMK,gBAAA,GAAmB,CAAAF,aAAC,aAAAA,aAAA,cAAD,SAAAA,aAAC,CAAsCG,GAAG,KAAIH,aAAA;EACvE,MAAMI,mBAAA,GAAsB,CAAAJ,aAAC,aAAAA,aAAA,cAAD,SAAAA,aAAC,CAAsCK,MAAM,KAAIL,aAAA;EAC7E,MAAMM,iBAAA,GAAoB,CAAAN,aAAC,aAAAA,aAAA,cAAD,SAAAA,aAAC,CAAsCO,IAAI,KAAIP,aAAA;EACzE,MAAMQ,kBAAA,GAAqB,CAAAR,aAAC,aAAAA,aAAA,cAAD,SAAAA,aAAC,CAAsCS,KAAK,KAAIT,aAAA;EAE3E,OAAO;IACL,GAAGP,UAAA,CAAWiB,WAAW,CAAC,cAAc;IACxC,WAAW;MACTC,OAAA,EAAS;MACTC,QAAA,EAAU;MACVC,aAAA,EAAe;MACfC,MAAA,EAAQ;MAER,GAAGrB,UAAA,CAAWsB,WAAW,CAAC,QAAQ;MAClC,GAAGtB,UAAA,CAAWuB,WAAW,CAACf,YAAA,CAAa;MACvC,GAAGR,UAAA,CAAWwB,YAAY,CAACnB,aAAA,CAAc;MACzC,GAAGL,UAAA,CAAWiB,WAAW,CAACX,YAAA,CAAa;MAEvCI,GAAA,EAAK,CAACH,aAAA,GAAiB,IAAGC,YAAa,EAAC,GAAI,cAAaA,YAAa,MAAKC,gBAAiB,GAAE;MAC9FG,MAAA,EAAQ,CAACL,aAAA,GAAiB,IAAGC,YAAa,EAAC,GAAI,cAAaA,YAAa,MAAKG,mBAAoB,GAAE;MACpGG,IAAA,EAAM,CAACP,aAAA,GAAiB,IAAGC,YAAa,EAAC,GAAI,cAAaA,YAAa,MAAKK,iBAAkB,GAAE;MAChGG,KAAA,EAAO,CAACT,aAAA,GAAiB,IAAGC,YAAa,EAAC,GAAI,cAAaA,YAAa,MAAKO,kBAAmB;IAClG;EACF;AACF;AAEA;;;;;;;AAOA,OAAO,MAAMU,uBAAA,GAA0BA,CAAC;EACtCC,QAAA,GAAWxB,cAAA,CAAewB,QAAQ;EAClCC,KAAA,GAAQzB,cAAA,CAAeyB;AAAK,CACG,GAAGzB,cAAc,KAChDD,+BAAA,CACEE,qBAAA,CAAsB;EACpBG,YAAA,EAAcP,MAAA,CAAO6B,iBAAiB;EACtCvB,aAAA,EAAeN,MAAA,CAAO8B,kBAAkB;EACxC;EACArB,YAAA,EAAc;EACd,GAAGmB;AACL,IACA;EAAED;AAAS"}
+{"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"}

package/lib-commonjs/focus/createCustomFocusIndicatorStyle.js

@@ -7,14 +7,8 @@ Object.defineProperty(exports, "createCustomFocusIndicatorStyle", {
     get: ()=>createCustomFocusIndicatorStyle
 });
 const _constants = require("./constants");
-function createCustomFocusIndicatorStyle(style, { selector =_constants.defaultOptions.selector , enableOutline =false  } = _constants.defaultOptions) {
+function createCustomFocusIndicatorStyle(style, { selector =_constants.defaultOptions.selector  } = _constants.defaultOptions) {
     return {
-        ':focus': {
-            outlineStyle: enableOutline ? undefined : 'none'
-        },
-        ':focus-visible': {
-            outlineStyle: enableOutline ? undefined : 'none'
-        },
         ...selector === 'focus' && {
             [`&[${_constants.FOCUS_VISIBLE_ATTR}]`]: style
         },

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

@@ -1 +1 @@
-{"version":3,"sources":["../../lib/focus/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 */\nexport function createCustomFocusIndicatorStyle(style, {\n  selector = defaultOptions.selector,\n  enableOutline = false\n} = defaultOptions) {\n  return {\n    ':focus': {\n      outlineStyle: enableOutline ? undefined : 'none'\n    },\n    ':focus-visible': {\n      outlineStyle: enableOutline ? undefined : 'none'\n    },\n    ...(selector === 'focus' && {\n      [`&[${FOCUS_VISIBLE_ATTR}]`]: style\n    }),\n    ...(selector === 'focus-within' && {\n      [`&[${FOCUS_WITHIN_ATTR}]:${selector}`]: style\n    })\n  };\n}\n//# sourceMappingURL=createCustomFocusIndicatorStyle.js.map"],"names":["createCustomFocusIndicatorStyle","style","selector","defaultOptions","enableOutline","outlineStyle","undefined","FOCUS_VISIBLE_ATTR","FOCUS_WITHIN_ATTR"],"mappings":";;;;+BAQgBA;;aAAAA;;2BARsD;AAQ/D,SAASA,gCAAgCC,KAAK,EAAE,EACrDC,UAAWC,yBAAc,CAACD,QAAQ,CAAA,EAClCE,eAAgB,KAAK,CAAA,EACtB,GAAGD,yBAAc,EAAE;IAClB,OAAO;QACL,UAAU;YACRE,cAAcD,gBAAgBE,YAAY,MAAM;QAClD;QACA,kBAAkB;YAChBD,cAAcD,gBAAgBE,YAAY,MAAM;QAClD;QACA,GAAIJ,aAAa,WAAW;YAC1B,CAAC,CAAC,EAAE,EAAEK,6BAAkB,CAAC,CAAC,CAAC,CAAC,EAAEN;QAChC,CAAC;QACD,GAAIC,aAAa,kBAAkB;YACjC,CAAC,CAAC,EAAE,EAAEM,4BAAiB,CAAC,EAAE,EAAEN,SAAS,CAAC,CAAC,EAAED;QAC3C,CAAC;IACH;AACF,EACA,2DAA2D"}
+{"version":3,"sources":["../../lib/focus/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 */\nexport function createCustomFocusIndicatorStyle(style, {\n  selector = defaultOptions.selector\n} = 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//# sourceMappingURL=createCustomFocusIndicatorStyle.js.map"],"names":["createCustomFocusIndicatorStyle","style","selector","defaultOptions","FOCUS_VISIBLE_ATTR","FOCUS_WITHIN_ATTR"],"mappings":";;;;+BAQgBA;;aAAAA;;2BARsD;AAQ/D,SAASA,gCAAgCC,KAAK,EAAE,EACrDC,UAAWC,yBAAc,CAACD,QAAQ,CAAA,EACnC,GAAGC,yBAAc,EAAE;IAClB,OAAO;QACL,GAAID,aAAa,WAAW;YAC1B,CAAC,CAAC,EAAE,EAAEE,6BAAkB,CAAC,CAAC,CAAC,CAAC,EAAEH;QAChC,CAAC;QACD,GAAIC,aAAa,kBAAkB;YACjC,CAAC,CAAC,EAAE,EAAEG,4BAAiB,CAAC,EAAE,EAAEH,SAAS,CAAC,CAAC,EAAED;QAC3C,CAAC;IACH;AACF,EACA,2DAA2D"}

package/lib-commonjs/focus/createFocusOutlineStyle.js

@@ -40,14 +40,22 @@ const _constants = require("./constants");
         }
     };
 };
-const createFocusOutlineStyle = ({ selector =_constants.defaultOptions.selector , style =_constants.defaultOptions.style  } = _constants.defaultOptions)=>(0, _createCustomFocusIndicatorStyle.createCustomFocusIndicatorStyle)(getFocusOutlineStyles({
-        outlineColor: _reactTheme.tokens.colorStrokeFocus2,
-        outlineRadius: _reactTheme.tokens.borderRadiusMedium,
-        // FIXME: tokens.strokeWidthThick causes some weird bugs
-        outlineWidth: '2px',
-        ...style
-    }), {
-        selector
+const createFocusOutlineStyle = ({ enableOutline =false , selector =_constants.defaultOptions.selector , style =_constants.defaultOptions.style  } = _constants.defaultOptions)=>({
+        ':focus': {
+            outlineStyle: enableOutline ? undefined : 'none'
+        },
+        ':focus-visible': {
+            outlineStyle: enableOutline ? undefined : 'none'
+        },
+        ...(0, _createCustomFocusIndicatorStyle.createCustomFocusIndicatorStyle)(getFocusOutlineStyles({
+            outlineColor: _reactTheme.tokens.colorStrokeFocus2,
+            outlineRadius: _reactTheme.tokens.borderRadiusMedium,
+            // FIXME: tokens.strokeWidthThick causes some weird bugs
+            outlineWidth: '2px',
+            ...style
+        }), {
+            selector
+        })
     }); //# sourceMappingURL=createFocusOutlineStyle.js.map
 
 //# sourceMappingURL=createFocusOutlineStyle.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../lib/focus/createFocusOutlineStyle.js"],"sourcesContent":["import { tokens } from '@fluentui/react-theme';\nimport { shorthands } from '@griffel/react';\nimport { createCustomFocusIndicatorStyle } from './createCustomFocusIndicatorStyle';\nimport { defaultOptions } from './constants';\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 => {\n  const {\n    outlineRadius,\n    outlineColor,\n    outlineOffset,\n    outlineWidth\n  } = options;\n  const outlineOffsetTop = (outlineOffset === null || outlineOffset === void 0 ? void 0 : outlineOffset.top) || outlineOffset;\n  const outlineOffsetBottom = (outlineOffset === null || outlineOffset === void 0 ? void 0 : outlineOffset.bottom) || outlineOffset;\n  const outlineOffsetLeft = (outlineOffset === null || outlineOffset === void 0 ? void 0 : outlineOffset.left) || outlineOffset;\n  const outlineOffsetRight = (outlineOffset === null || outlineOffset === void 0 ? void 0 : outlineOffset.right) || outlineOffset;\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: !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 * NOTE: The element with the focus outline needs to have `position: relative` so that the\n * pseudo element can be properly positioned.\n *\n * @param options - Configure the style of the focus outline\n * @returns focus outline styles object for @see makeStyles\n */\nexport const createFocusOutlineStyle = ({\n  selector = defaultOptions.selector,\n  style = defaultOptions.style\n} = defaultOptions) => 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//# sourceMappingURL=createFocusOutlineStyle.js.map"],"names":["createFocusOutlineStyle","getFocusOutlineStyles","options","outlineRadius","outlineColor","outlineOffset","outlineWidth","outlineOffsetTop","top","outlineOffsetBottom","bottom","outlineOffsetLeft","left","outlineOffsetRight","right","shorthands","borderColor","content","position","pointerEvents","zIndex","borderStyle","borderWidth","borderRadius","selector","defaultOptions","style","createCustomFocusIndicatorStyle","tokens","colorStrokeFocus2","borderRadiusMedium"],"mappings":";;;;+BA+CaA;;aAAAA;;4BA/CU;uBACI;iDACqB;2BACjB;AAC/B;;;;;;CAMC,GACD,MAAMC,wBAAwBC,CAAAA,UAAW;IACvC,MAAM,EACJC,cAAa,EACbC,aAAY,EACZC,cAAa,EACbC,aAAY,EACb,GAAGJ;IACJ,MAAMK,mBAAmB,AAACF,CAAAA,kBAAkB,IAAI,IAAIA,kBAAkB,KAAK,IAAI,KAAK,IAAIA,cAAcG,GAAG,AAAD,KAAMH;IAC9G,MAAMI,sBAAsB,AAACJ,CAAAA,kBAAkB,IAAI,IAAIA,kBAAkB,KAAK,IAAI,KAAK,IAAIA,cAAcK,MAAM,AAAD,KAAML;IACpH,MAAMM,oBAAoB,AAACN,CAAAA,kBAAkB,IAAI,IAAIA,kBAAkB,KAAK,IAAI,KAAK,IAAIA,cAAcO,IAAI,AAAD,KAAMP;IAChH,MAAMQ,qBAAqB,AAACR,CAAAA,kBAAkB,IAAI,IAAIA,kBAAkB,KAAK,IAAI,KAAK,IAAIA,cAAcS,KAAK,AAAD,KAAMT;IAClH,OAAO;QACL,GAAGU,iBAAU,CAACC,WAAW,CAAC,cAAc;QACxC,WAAW;YACTC,SAAS;YACTC,UAAU;YACVC,eAAe;YACfC,QAAQ;YACR,GAAGL,iBAAU,CAACM,WAAW,CAAC,QAAQ;YAClC,GAAGN,iBAAU,CAACO,WAAW,CAAChB,aAAa;YACvC,GAAGS,iBAAU,CAACQ,YAAY,CAACpB,cAAc;YACzC,GAAGY,iBAAU,CAACC,WAAW,CAACZ,aAAa;YACvCI,KAAK,CAACH,gBAAgB,CAAC,CAAC,EAAEC,aAAa,CAAC,GAAG,CAAC,WAAW,EAAEA,aAAa,GAAG,EAAEC,iBAAiB,CAAC,CAAC;YAC9FG,QAAQ,CAACL,gBAAgB,CAAC,CAAC,EAAEC,aAAa,CAAC,GAAG,CAAC,WAAW,EAAEA,aAAa,GAAG,EAAEG,oBAAoB,CAAC,CAAC;YACpGG,MAAM,CAACP,gBAAgB,CAAC,CAAC,EAAEC,aAAa,CAAC,GAAG,CAAC,WAAW,EAAEA,aAAa,GAAG,EAAEK,kBAAkB,CAAC,CAAC;YAChGG,OAAO,CAACT,gBAAgB,CAAC,CAAC,EAAEC,aAAa,CAAC,GAAG,CAAC,WAAW,EAAEA,aAAa,GAAG,EAAEO,mBAAmB,CAAC,CAAC;QACpG;IACF;AACF;AAQO,MAAMb,0BAA0B,CAAC,EACtCwB,UAAWC,yBAAc,CAACD,QAAQ,CAAA,EAClCE,OAAQD,yBAAc,CAACC,KAAK,CAAA,EAC7B,GAAGD,yBAAc,GAAKE,IAAAA,gEAA+B,EAAC1B,sBAAsB;QAC3EG,cAAcwB,kBAAM,CAACC,iBAAiB;QACtC1B,eAAeyB,kBAAM,CAACE,kBAAkB;QACxC,wDAAwD;QACxDxB,cAAc;QACd,GAAGoB,KAAK;IACV,IAAI;QACFF;IACF,IACA,mDAAmD"}
+{"version":3,"sources":["../../lib/focus/createFocusOutlineStyle.js"],"sourcesContent":["import { tokens } from '@fluentui/react-theme';\nimport { shorthands } from '@griffel/react';\nimport { createCustomFocusIndicatorStyle } from './createCustomFocusIndicatorStyle';\nimport { defaultOptions } from './constants';\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 => {\n  const {\n    outlineRadius,\n    outlineColor,\n    outlineOffset,\n    outlineWidth\n  } = options;\n  const outlineOffsetTop = (outlineOffset === null || outlineOffset === void 0 ? void 0 : outlineOffset.top) || outlineOffset;\n  const outlineOffsetBottom = (outlineOffset === null || outlineOffset === void 0 ? void 0 : outlineOffset.bottom) || outlineOffset;\n  const outlineOffsetLeft = (outlineOffset === null || outlineOffset === void 0 ? void 0 : outlineOffset.left) || outlineOffset;\n  const outlineOffsetRight = (outlineOffset === null || outlineOffset === void 0 ? void 0 : outlineOffset.right) || outlineOffset;\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: !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 * 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} = 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//# sourceMappingURL=createFocusOutlineStyle.js.map"],"names":["createFocusOutlineStyle","getFocusOutlineStyles","options","outlineRadius","outlineColor","outlineOffset","outlineWidth","outlineOffsetTop","top","outlineOffsetBottom","bottom","outlineOffsetLeft","left","outlineOffsetRight","right","shorthands","borderColor","content","position","pointerEvents","zIndex","borderStyle","borderWidth","borderRadius","enableOutline","selector","defaultOptions","style","outlineStyle","undefined","createCustomFocusIndicatorStyle","tokens","colorStrokeFocus2","borderRadiusMedium"],"mappings":";;;;+BA+CaA;;aAAAA;;4BA/CU;uBACI;iDACqB;2BACjB;AAC/B;;;;;;CAMC,GACD,MAAMC,wBAAwBC,CAAAA,UAAW;IACvC,MAAM,EACJC,cAAa,EACbC,aAAY,EACZC,cAAa,EACbC,aAAY,EACb,GAAGJ;IACJ,MAAMK,mBAAmB,AAACF,CAAAA,kBAAkB,IAAI,IAAIA,kBAAkB,KAAK,IAAI,KAAK,IAAIA,cAAcG,GAAG,AAAD,KAAMH;IAC9G,MAAMI,sBAAsB,AAACJ,CAAAA,kBAAkB,IAAI,IAAIA,kBAAkB,KAAK,IAAI,KAAK,IAAIA,cAAcK,MAAM,AAAD,KAAML;IACpH,MAAMM,oBAAoB,AAACN,CAAAA,kBAAkB,IAAI,IAAIA,kBAAkB,KAAK,IAAI,KAAK,IAAIA,cAAcO,IAAI,AAAD,KAAMP;IAChH,MAAMQ,qBAAqB,AAACR,CAAAA,kBAAkB,IAAI,IAAIA,kBAAkB,KAAK,IAAI,KAAK,IAAIA,cAAcS,KAAK,AAAD,KAAMT;IAClH,OAAO;QACL,GAAGU,iBAAU,CAACC,WAAW,CAAC,cAAc;QACxC,WAAW;YACTC,SAAS;YACTC,UAAU;YACVC,eAAe;YACfC,QAAQ;YACR,GAAGL,iBAAU,CAACM,WAAW,CAAC,QAAQ;YAClC,GAAGN,iBAAU,CAACO,WAAW,CAAChB,aAAa;YACvC,GAAGS,iBAAU,CAACQ,YAAY,CAACpB,cAAc;YACzC,GAAGY,iBAAU,CAACC,WAAW,CAACZ,aAAa;YACvCI,KAAK,CAACH,gBAAgB,CAAC,CAAC,EAAEC,aAAa,CAAC,GAAG,CAAC,WAAW,EAAEA,aAAa,GAAG,EAAEC,iBAAiB,CAAC,CAAC;YAC9FG,QAAQ,CAACL,gBAAgB,CAAC,CAAC,EAAEC,aAAa,CAAC,GAAG,CAAC,WAAW,EAAEA,aAAa,GAAG,EAAEG,oBAAoB,CAAC,CAAC;YACpGG,MAAM,CAACP,gBAAgB,CAAC,CAAC,EAAEC,aAAa,CAAC,GAAG,CAAC,WAAW,EAAEA,aAAa,GAAG,EAAEK,kBAAkB,CAAC,CAAC;YAChGG,OAAO,CAACT,gBAAgB,CAAC,CAAC,EAAEC,aAAa,CAAC,GAAG,CAAC,WAAW,EAAEA,aAAa,GAAG,EAAEO,mBAAmB,CAAC,CAAC;QACpG;IACF;AACF;AAQO,MAAMb,0BAA0B,CAAC,EACtCwB,eAAgB,KAAK,CAAA,EACrBC,UAAWC,yBAAc,CAACD,QAAQ,CAAA,EAClCE,OAAQD,yBAAc,CAACC,KAAK,CAAA,EAC7B,GAAGD,yBAAc,GAAM,CAAA;QACtB,UAAU;YACRE,cAAcJ,gBAAgBK,YAAY,MAAM;QAClD;QACA,kBAAkB;YAChBD,cAAcJ,gBAAgBK,YAAY,MAAM;QAClD;QACA,GAAGC,IAAAA,gEAA+B,EAAC7B,sBAAsB;YACvDG,cAAc2B,kBAAM,CAACC,iBAAiB;YACtC7B,eAAe4B,kBAAM,CAACE,kBAAkB;YACxC,wDAAwD;YACxD3B,cAAc;YACd,GAAGqB,KAAK;QACV,IAAI;YACFF;QACF,EAAE;IACJ,CAAA,GACA,mDAAmD"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-tabster",
-  "version": "9.6.5",
+  "version": "9.7.1",
   "description": "Utilities for focus management and facade for tabster",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -21,7 +21,8 @@
     "lint": "just-scripts lint",
     "test": "jest --passWithNoTests",
     "type-check": "tsc -b tsconfig.json",
-    "generate-api": "just-scripts generate-api"
+    "generate-api": "just-scripts generate-api",
+    "test-ssr": "test-ssr ./stories/**/*.stories.tsx"
   },
   "devDependencies": {
     "@fluentui/eslint-plugin": "*",
@@ -31,9 +32,9 @@
   },
   "dependencies": {
     "@griffel/react": "^1.5.2",
-    "@fluentui/react-shared-contexts": "^9.3.3",
-    "@fluentui/react-theme": "^9.1.7",
-    "@fluentui/react-utilities": "^9.8.0",
+    "@fluentui/react-shared-contexts": "^9.4.0",
+    "@fluentui/react-theme": "^9.1.8",
+    "@fluentui/react-utilities": "^9.9.0",
     "@swc/helpers": "^0.4.14",
     "keyborg": "^2.0.0",
     "tabster": "^4.1.1"

package/.swcrc

@@ -1,30 +0,0 @@
-{
-  "$schema": "https://json.schemastore.org/swcrc",
-  "exclude": [
-    "/testing",
-    "/**/*.cy.ts",
-    "/**/*.cy.tsx",
-    "/**/*.spec.ts",
-    "/**/*.spec.tsx",
-    "/**/*.test.ts",
-    "/**/*.test.tsx"
-  ],
-  "jsc": {
-    "parser": {
-      "syntax": "typescript",
-      "tsx": true,
-      "decorators": false,
-      "dynamicImport": false
-    },
-    "externalHelpers": true,
-    "transform": {
-      "react": {
-        "runtime": "classic",
-        "useSpread": true
-      }
-    },
-    "target": "es2019"
-  },
-  "minify": false,
-  "sourceMaps": true
-}