@fluentui/react-tabster 9.3.1 → 9.3.3

package/CHANGELOG.json

@@ -2,7 +2,73 @@
   "name": "@fluentui/react-tabster",
   "entries": [
     {
-      "date": "Thu, 17 Nov 2022 23:02:46 GMT",
+      "date": "Tue, 20 Dec 2022 14:55:56 GMT",
+      "tag": "@fluentui/react-tabster_v9.3.3",
+      "version": "9.3.3",
+      "comments": {
+        "patch": [
+          {
+            "author": "tristan.watanabe@gmail.com",
+            "package": "@fluentui/react-tabster",
+            "commit": "49c1f3477d8f69760616b9d1fa7e32b81b6ca18e",
+            "comment": "chore: Migrate to new package structure."
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-tabster",
+            "comment": "Bump @fluentui/react-shared-contexts to v9.1.3",
+            "commit": "e7530bc179fd0e303448083c76a4af41a0e15322"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-tabster",
+            "comment": "Bump @fluentui/react-theme to v9.1.4",
+            "commit": "e7530bc179fd0e303448083c76a4af41a0e15322"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-tabster",
+            "comment": "Bump @fluentui/react-utilities to v9.3.0",
+            "commit": "e7530bc179fd0e303448083c76a4af41a0e15322"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Mon, 05 Dec 2022 18:29:35 GMT",
+      "tag": "@fluentui/react-tabster_v9.3.2",
+      "version": "9.3.2",
+      "comments": {
+        "patch": [
+          {
+            "author": "lingfangao@hotmail.com",
+            "package": "@fluentui/react-tabster",
+            "commit": "6f450a1713c40d5429306ab1f6d76bc19e65c295",
+            "comment": "fix: focus-within attribute no longer the same as focus-visible"
+          },
+          {
+            "author": "olfedias@microsoft.com",
+            "package": "@fluentui/react-tabster",
+            "commit": "076ac58a921376c6ee488f10e610dc05095acbf3",
+            "comment": "fix: allow GriffelResetStyle to be passed to createCustomFocusIndicatorStyle"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-tabster",
+            "comment": "Bump @fluentui/react-shared-contexts to v9.1.2",
+            "commit": "4c29542a51bf068e171690cc8e59c14489883912"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-tabster",
+            "comment": "Bump @fluentui/react-theme to v9.1.3",
+            "commit": "4c29542a51bf068e171690cc8e59c14489883912"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Thu, 17 Nov 2022 23:05:49 GMT",
       "tag": "@fluentui/react-tabster_v9.3.1",
       "version": "9.3.1",
       "comments": {

package/CHANGELOG.md

@@ -1,12 +1,36 @@
 # Change Log - @fluentui/react-tabster
 
-This log was last generated on Thu, 17 Nov 2022 23:02:46 GMT and should not be manually modified.
+This log was last generated on Tue, 20 Dec 2022 14:55:56 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.3.3](https://github.com/microsoft/fluentui/tree/@fluentui/react-tabster_v9.3.3)
+
+Tue, 20 Dec 2022 14:55:56 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tabster_v9.3.2..@fluentui/react-tabster_v9.3.3)
+
+### Patches
+
+- chore: Migrate to new package structure. ([PR #25833](https://github.com/microsoft/fluentui/pull/25833) by tristan.watanabe@gmail.com)
+- Bump @fluentui/react-shared-contexts to v9.1.3 ([PR #26047](https://github.com/microsoft/fluentui/pull/26047) by beachball)
+- Bump @fluentui/react-theme to v9.1.4 ([PR #26047](https://github.com/microsoft/fluentui/pull/26047) by beachball)
+- Bump @fluentui/react-utilities to v9.3.0 ([PR #26047](https://github.com/microsoft/fluentui/pull/26047) by beachball)
+
+## [9.3.2](https://github.com/microsoft/fluentui/tree/@fluentui/react-tabster_v9.3.2)
+
+Mon, 05 Dec 2022 18:29:35 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tabster_v9.3.1..@fluentui/react-tabster_v9.3.2)
+
+### Patches
+
+- fix: focus-within attribute no longer the same as focus-visible ([PR #25790](https://github.com/microsoft/fluentui/pull/25790) by lingfangao@hotmail.com)
+- fix: allow GriffelResetStyle to be passed to createCustomFocusIndicatorStyle ([PR #25216](https://github.com/microsoft/fluentui/pull/25216) by olfedias@microsoft.com)
+- Bump @fluentui/react-shared-contexts to v9.1.2 ([PR #25798](https://github.com/microsoft/fluentui/pull/25798) by beachball)
+- Bump @fluentui/react-theme to v9.1.3 ([PR #25798](https://github.com/microsoft/fluentui/pull/25798) by beachball)
+
 ## [9.3.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-tabster_v9.3.1)
 
-Thu, 17 Nov 2022 23:02:46 GMT 
+Thu, 17 Nov 2022 23:05:49 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tabster_v9.3.0..@fluentui/react-tabster_v9.3.1)
 
 ### Patches

package/dist/index.d.ts

@@ -1,4 +1,5 @@
 import type { GriffelStyle } from '@griffel/react';
+import { makeResetStyles } from '@griffel/react';
 import * as React_2 from 'react';
 import type { RefObject } from 'react';
 import { Types } from 'tabster';
@@ -14,10 +15,10 @@ export declare function applyFocusVisiblePolyfill(scope: HTMLElement, win: Windo
  * Creates a style for @see makeStyles that includes the necessary selectors for focus.
  * Should be used only when @see createFocusOutlineStyle does not fit requirements
  *
- * @param style - styling applied on focus, defaults to @see getDefaultFocusOutlineStyes
+ * @param style - styling applied on focus, defaults to @see getDefaultFocusOutlineStyles
  * @param options - Configure the style of the focus outline
  */
-export declare const createCustomFocusIndicatorStyle: (style: GriffelStyle, { selector, enableOutline, }?: CreateCustomFocusIndicatorStyleOptions) => GriffelStyle;
+export declare function createCustomFocusIndicatorStyle<TStyle extends GriffelStyle | GriffelResetStyle>(style: TStyle, { selector, enableOutline, }?: CreateCustomFocusIndicatorStyleOptions): TStyle extends GriffelStyle ? GriffelStyle : GriffelResetStyle;
 
 export declare interface CreateCustomFocusIndicatorStyleOptions {
     selector?: 'focus' | 'focus-within';
@@ -54,6 +55,8 @@ export declare type FocusOutlineStyleOptions = {
     outlineOffset?: string | FocusOutlineOffset;
 };
 
+declare type GriffelResetStyle = Parameters<typeof makeResetStyles>[0];
+
 /**
  * A hook that returns the necessary tabster attributes to support arrow key navigation
  * @param options - Options to configure keyboard navigation

package/lib/focus/constants.js

@@ -9,7 +9,7 @@ export const FOCUS_VISIBLE_ATTR = 'data-fui-focus-visible';
  * @internal
  */
 
-export const FOCUS_WITHIN_ATTR = 'data-fui-focus-visible';
+export const FOCUS_WITHIN_ATTR = 'data-fui-focus-within';
 export const defaultOptions = {
   style: {},
   selector: 'focus'

package/lib/focus/constants.js.map

@@ -1 +1 @@
-{"version":3,"sources":["packages/react-components/react-tabster/src/focus/constants.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,sBAAsB,GAAG,mBAA/B;AACP,OAAO,MAAM,qBAAqB,GAAG,YAAY,sBAAsB,IAAhE;AAEP;;AAEG;;AACH,OAAO,MAAM,kBAAkB,GAAG,wBAA3B;AAEP;;AAEG;;AACH,OAAO,MAAM,iBAAiB,GAAG,wBAA1B;AACP,OAAO,MAAM,cAAc,GAAG;EAC5B,KAAK,EAAE,EADqB;EAE5B,QAAQ,EAAE;AAFkB,CAAvB","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-visible';\nexport const defaultOptions = {\n  style: {},\n  selector: 'focus',\n} as const;\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["packages/react-components/react-tabster/src/focus/constants.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,sBAAsB,GAAG,mBAA/B;AACP,OAAO,MAAM,qBAAqB,GAAG,YAAY,sBAAsB,IAAhE;AAEP;;AAEG;;AACH,OAAO,MAAM,kBAAkB,GAAG,wBAA3B;AAEP;;AAEG;;AACH,OAAO,MAAM,iBAAiB,GAAG,uBAA1B;AACP,OAAO,MAAM,cAAc,GAAG;EAC5B,KAAK,EAAE,EADqB;EAE5B,QAAQ,EAAE;AAFkB,CAAvB","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"],"sourceRoot":"../src/"}

package/lib/focus/createCustomFocusIndicatorStyle.js

@@ -3,25 +3,27 @@ import { defaultOptions, FOCUS_VISIBLE_ATTR, FOCUS_WITHIN_ATTR } from './constan
  * Creates a style for @see makeStyles that includes the necessary selectors for focus.
  * Should be used only when @see createFocusOutlineStyle does not fit requirements
  *
- * @param style - styling applied on focus, defaults to @see getDefaultFocusOutlineStyes
+ * @param style - styling applied on focus, defaults to @see getDefaultFocusOutlineStyles
  * @param options - Configure the style of the focus outline
  */
 
-export const createCustomFocusIndicatorStyle = (style, {
+export function createCustomFocusIndicatorStyle(style, {
   selector = defaultOptions.selector,
   enableOutline = false
-} = defaultOptions) => ({
-  ':focus': {
-    outlineStyle: enableOutline ? undefined : 'none'
-  },
-  ':focus-visible': {
-    outlineStyle: enableOutline ? undefined : 'none'
-  },
-  ...(selector === 'focus' && {
-    [`&[${FOCUS_VISIBLE_ATTR}]`]: style
-  }),
-  ...(selector === 'focus-within' && {
-    [`&[${FOCUS_WITHIN_ATTR}]:${selector}`]: style
-  })
-});
+} = defaultOptions) {
+  return {
+    ':focus': {
+      outlineStyle: enableOutline ? undefined : 'none'
+    },
+    ':focus-visible': {
+      outlineStyle: enableOutline ? undefined : 'none'
+    },
+    ...(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,"sources":["packages/react-components/react-tabster/src/focus/createCustomFocusIndicatorStyle.ts"],"names":[],"mappings":"AAAA,SAAS,cAAT,EAAyB,kBAAzB,EAA6C,iBAA7C,QAAsE,aAAtE;AAYA;;;;;;AAMG;;AACH,OAAO,MAAM,+BAA+B,GAAG,CAC7C,KAD6C,EAE7C;EACE,QAAQ,GAAG,cAAc,CAAC,QAD5B;EAEE,aAAa,GAAG;AAFlB,IAG4C,cALC,MAM3B;EAClB,UAAU;IACR,YAAY,EAAE,aAAa,GAAG,SAAH,GAAe;EADlC,CADQ;EAIlB,kBAAkB;IAChB,YAAY,EAAE,aAAa,GAAG,SAAH,GAAe;EAD1B,CAJA;EAQlB,IAAI,QAAQ,KAAK,OAAb,IAAwB;IAC1B,CAAC,KAAK,kBAAkB,GAAxB,GAA8B;EADJ,CAA5B,CARkB;EAWlB,IAAI,QAAQ,KAAK,cAAb,IAA+B;IACjC,CAAC,KAAK,iBAAiB,KAAK,QAAQ,EAApC,GAAyC;EADR,CAAnC;AAXkB,CAN2B,CAAxC","sourcesContent":["import { defaultOptions, FOCUS_VISIBLE_ATTR, FOCUS_WITHIN_ATTR } from './constants';\nimport type { GriffelStyle } from '@griffel/react';\n\nexport interface CreateCustomFocusIndicatorStyleOptions {\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 getDefaultFocusOutlineStyes\n * @param options - Configure the style of the focus outline\n */\nexport const createCustomFocusIndicatorStyle = (\n  style: GriffelStyle,\n  {\n    selector = defaultOptions.selector,\n    enableOutline = false,\n  }: CreateCustomFocusIndicatorStyleOptions = defaultOptions,\n): GriffelStyle => ({\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"],"sourceRoot":"../src/"}
+{"version":3,"sources":["packages/react-components/react-tabster/src/focus/createCustomFocusIndicatorStyle.ts"],"names":[],"mappings":"AAAA,SAAS,cAAT,EAAyB,kBAAzB,EAA6C,iBAA7C,QAAsE,aAAtE;AAiBA;;;;;;AAMG;;AACH,OAAM,SAAU,+BAAV,CACJ,KADI,EAEJ;EACE,QAAQ,GAAG,cAAc,CAAC,QAD5B;EAEE,aAAa,GAAG;AAFlB,IAG4C,cALxC,EAKsD;EAE1D,OAAO;IACL,UAAU;MACR,YAAY,EAAE,aAAa,GAAG,SAAH,GAAe;IADlC,CADL;IAIL,kBAAkB;MAChB,YAAY,EAAE,aAAa,GAAG,SAAH,GAAe;IAD1B,CAJb;IAQL,IAAI,QAAQ,KAAK,OAAb,IAAwB;MAC1B,CAAC,KAAK,kBAAkB,GAAxB,GAA8B;IADJ,CAA5B,CARK;IAWL,IAAI,QAAQ,KAAK,cAAb,IAA+B;MACjC,CAAC,KAAK,iBAAiB,KAAK,QAAQ,EAApC,GAAyC;IADR,CAAnC;EAXK,CAAP;AAeD","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  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"],"sourceRoot":"../src/"}

package/lib-amd/focus/constants.js

@@ -11,7 +11,7 @@ define(["require", "exports"], function (require, exports) {
     /**
      * @internal
      */
-    exports.FOCUS_WITHIN_ATTR = 'data-fui-focus-visible';
+    exports.FOCUS_WITHIN_ATTR = 'data-fui-focus-within';
     exports.defaultOptions = {
         style: {},
         selector: 'focus',

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

@@ -1 +1 @@
-{"version":3,"file":"constants.js","sourceRoot":"","sources":["../../../../../../../../packages/react-components/react-tabster/src/focus/constants.ts"],"names":[],"mappings":";;;;IAAa,QAAA,sBAAsB,GAAG,mBAA4B,CAAC;IACtD,QAAA,qBAAqB,GAAG,cAAY,8BAAsB,OAAa,CAAC;IAErF;;OAEG;IACU,QAAA,kBAAkB,GAAG,wBAAwB,CAAC;IAE3D;;OAEG;IACU,QAAA,iBAAiB,GAAG,wBAAwB,CAAC;IAC7C,QAAA,cAAc,GAAG;QAC5B,KAAK,EAAE,EAAE;QACT,QAAQ,EAAE,OAAO;KACT,CAAC","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-visible';\nexport const defaultOptions = {\n  style: {},\n  selector: 'focus',\n} as const;\n"]}
+{"version":3,"file":"constants.js","sourceRoot":"","sources":["../../../../../../../../packages/react-components/react-tabster/src/focus/constants.ts"],"names":[],"mappings":";;;;IAAa,QAAA,sBAAsB,GAAG,mBAA4B,CAAC;IACtD,QAAA,qBAAqB,GAAG,cAAY,8BAAsB,OAAa,CAAC;IAErF;;OAEG;IACU,QAAA,kBAAkB,GAAG,wBAAwB,CAAC;IAE3D;;OAEG;IACU,QAAA,iBAAiB,GAAG,uBAAuB,CAAC;IAC5C,QAAA,cAAc,GAAG;QAC5B,KAAK,EAAE,EAAE;QACT,QAAQ,EAAE,OAAO;KACT,CAAC","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"]}

package/lib-amd/focus/createCustomFocusIndicatorStyle.js

@@ -6,13 +6,13 @@ define(["require", "exports", "tslib", "./constants"], function (require, export
      * Creates a style for @see makeStyles that includes the necessary selectors for focus.
      * Should be used only when @see createFocusOutlineStyle does not fit requirements
      *
-     * @param style - styling applied on focus, defaults to @see getDefaultFocusOutlineStyes
+     * @param style - styling applied on focus, defaults to @see getDefaultFocusOutlineStyles
      * @param options - Configure the style of the focus outline
      */
-    var createCustomFocusIndicatorStyle = function (style, _a) {
+    function createCustomFocusIndicatorStyle(style, _a) {
         var _b, _c;
         var _d = _a === void 0 ? constants_1.defaultOptions : _a, _e = _d.selector, selector = _e === void 0 ? constants_1.defaultOptions.selector : _e, _f = _d.enableOutline, enableOutline = _f === void 0 ? false : _f;
-        return (tslib_1.__assign(tslib_1.__assign({ ':focus': {
+        return tslib_1.__assign(tslib_1.__assign({ ':focus': {
                 outlineStyle: enableOutline ? undefined : 'none',
             }, ':focus-visible': {
                 outlineStyle: enableOutline ? undefined : 'none',
@@ -20,8 +20,8 @@ define(["require", "exports", "tslib", "./constants"], function (require, export
             _b["&[" + constants_1.FOCUS_VISIBLE_ATTR + "]"] = style,
             _b))), (selector === 'focus-within' && (_c = {},
             _c["&[" + constants_1.FOCUS_WITHIN_ATTR + "]:" + selector] = style,
-            _c))));
-    };
+            _c)));
+    }
     exports.createCustomFocusIndicatorStyle = createCustomFocusIndicatorStyle;
 });
 //# sourceMappingURL=createCustomFocusIndicatorStyle.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"createCustomFocusIndicatorStyle.js","sourceRoot":"","sources":["../../../../../../../../packages/react-components/react-tabster/src/focus/createCustomFocusIndicatorStyle.ts"],"names":[],"mappings":";;;;IAYA;;;;;;OAMG;IACI,IAAM,+BAA+B,GAAG,UAC7C,KAAmB,EACnB,EAG0D;;YAH1D,qBAG4C,0BAAc,KAAA,EAFxD,gBAAkC,EAAlC,QAAQ,mBAAG,0BAAc,CAAC,QAAQ,KAAA,EAClC,qBAAqB,EAArB,aAAa,mBAAG,KAAK,KAAA;QAEN,OAAA,qCACjB,QAAQ,EAAE;gBACR,YAAY,EAAE,aAAa,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,MAAM;aACjD,EACD,gBAAgB,EAAE;gBAChB,YAAY,EAAE,aAAa,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,MAAM;aACjD,IAEE,CAAC,QAAQ,KAAK,OAAO;YACtB,GAAC,OAAK,8BAAkB,MAAG,IAAG,KAAK;eACpC,CAAC,GACC,CAAC,QAAQ,KAAK,cAAc;YAC7B,GAAC,OAAK,6BAAiB,UAAK,QAAU,IAAG,KAAK;eAC/C,CAAC,EACF;IAdiB,CAcjB,CAAC;IApBU,QAAA,+BAA+B,mCAoBzC","sourcesContent":["import { defaultOptions, FOCUS_VISIBLE_ATTR, FOCUS_WITHIN_ATTR } from './constants';\nimport type { GriffelStyle } from '@griffel/react';\n\nexport interface CreateCustomFocusIndicatorStyleOptions {\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 getDefaultFocusOutlineStyes\n * @param options - Configure the style of the focus outline\n */\nexport const createCustomFocusIndicatorStyle = (\n  style: GriffelStyle,\n  {\n    selector = defaultOptions.selector,\n    enableOutline = false,\n  }: CreateCustomFocusIndicatorStyleOptions = defaultOptions,\n): GriffelStyle => ({\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"]}
+{"version":3,"file":"createCustomFocusIndicatorStyle.js","sourceRoot":"","sources":["../../../../../../../../packages/react-components/react-tabster/src/focus/createCustomFocusIndicatorStyle.ts"],"names":[],"mappings":";;;;IAiBA;;;;;;OAMG;IACH,SAAgB,+BAA+B,CAC7C,KAAa,EACb,EAG0D;;YAH1D,qBAG4C,0BAAc,KAAA,EAFxD,gBAAkC,EAAlC,QAAQ,mBAAG,0BAAc,CAAC,QAAQ,KAAA,EAClC,qBAAqB,EAArB,aAAa,mBAAG,KAAK,KAAA;QAGvB,2CACE,QAAQ,EAAE;gBACR,YAAY,EAAE,aAAa,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,MAAM;aACjD,EACD,gBAAgB,EAAE;gBAChB,YAAY,EAAE,aAAa,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,MAAM;aACjD,IAEE,CAAC,QAAQ,KAAK,OAAO;YACtB,GAAC,OAAK,8BAAkB,MAAG,IAAG,KAAK;eACpC,CAAC,GACC,CAAC,QAAQ,KAAK,cAAc;YAC7B,GAAC,OAAK,6BAAiB,UAAK,QAAU,IAAG,KAAK;eAC/C,CAAC,EACF;IACJ,CAAC;IAtBD,0EAsBC","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  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"]}

package/lib-commonjs/focus/constants.js

@@ -15,7 +15,7 @@ exports.FOCUS_VISIBLE_ATTR = 'data-fui-focus-visible';
  * @internal
  */
 
-exports.FOCUS_WITHIN_ATTR = 'data-fui-focus-visible';
+exports.FOCUS_WITHIN_ATTR = 'data-fui-focus-within';
 exports.defaultOptions = {
   style: {},
   selector: 'focus'

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

@@ -1 +1 @@
-{"version":3,"sources":["packages/react-components/react-tabster/src/focus/constants.ts"],"names":[],"mappings":";;;;;;AAAa,OAAA,CAAA,sBAAA,GAAyB,mBAAzB;AACA,OAAA,CAAA,qBAAA,GAAwB,YAAY,OAAA,CAAA,sBAAsB,IAA1D;AAEb;;AAEG;;AACU,OAAA,CAAA,kBAAA,GAAqB,wBAArB;AAEb;;AAEG;;AACU,OAAA,CAAA,iBAAA,GAAoB,wBAApB;AACA,OAAA,CAAA,cAAA,GAAiB;EAC5B,KAAK,EAAE,EADqB;EAE5B,QAAQ,EAAE;AAFkB,CAAjB","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-visible';\nexport const defaultOptions = {\n  style: {},\n  selector: 'focus',\n} as const;\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["packages/react-components/react-tabster/src/focus/constants.ts"],"names":[],"mappings":";;;;;;AAAa,OAAA,CAAA,sBAAA,GAAyB,mBAAzB;AACA,OAAA,CAAA,qBAAA,GAAwB,YAAY,OAAA,CAAA,sBAAsB,IAA1D;AAEb;;AAEG;;AACU,OAAA,CAAA,kBAAA,GAAqB,wBAArB;AAEb;;AAEG;;AACU,OAAA,CAAA,iBAAA,GAAoB,uBAApB;AACA,OAAA,CAAA,cAAA,GAAiB;EAC5B,KAAK,EAAE,EADqB;EAE5B,QAAQ,EAAE;AAFkB,CAAjB","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"],"sourceRoot":"../src/"}

package/lib-commonjs/focus/createCustomFocusIndicatorStyle.js

@@ -10,28 +10,30 @@ const constants_1 = /*#__PURE__*/require("./constants");
  * Creates a style for @see makeStyles that includes the necessary selectors for focus.
  * Should be used only when @see createFocusOutlineStyle does not fit requirements
  *
- * @param style - styling applied on focus, defaults to @see getDefaultFocusOutlineStyes
+ * @param style - styling applied on focus, defaults to @see getDefaultFocusOutlineStyles
  * @param options - Configure the style of the focus outline
  */
 
 
-const createCustomFocusIndicatorStyle = (style, {
+function createCustomFocusIndicatorStyle(style, {
   selector = constants_1.defaultOptions.selector,
   enableOutline = false
-} = constants_1.defaultOptions) => ({
-  ':focus': {
-    outlineStyle: enableOutline ? undefined : 'none'
-  },
-  ':focus-visible': {
-    outlineStyle: enableOutline ? undefined : 'none'
-  },
-  ...(selector === 'focus' && {
-    [`&[${constants_1.FOCUS_VISIBLE_ATTR}]`]: style
-  }),
-  ...(selector === 'focus-within' && {
-    [`&[${constants_1.FOCUS_WITHIN_ATTR}]:${selector}`]: style
-  })
-});
+} = constants_1.defaultOptions) {
+  return {
+    ':focus': {
+      outlineStyle: enableOutline ? undefined : 'none'
+    },
+    ':focus-visible': {
+      outlineStyle: enableOutline ? undefined : 'none'
+    },
+    ...(selector === 'focus' && {
+      [`&[${constants_1.FOCUS_VISIBLE_ATTR}]`]: style
+    }),
+    ...(selector === 'focus-within' && {
+      [`&[${constants_1.FOCUS_WITHIN_ATTR}]:${selector}`]: style
+    })
+  };
+}
 
 exports.createCustomFocusIndicatorStyle = createCustomFocusIndicatorStyle;
 //# sourceMappingURL=createCustomFocusIndicatorStyle.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["packages/react-components/react-tabster/src/focus/createCustomFocusIndicatorStyle.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,WAAA,gBAAA,OAAA,CAAA,aAAA,CAAA;AAYA;;;;;;AAMG;;;AACI,MAAM,+BAA+B,GAAG,CAC7C,KAD6C,EAE7C;EACE,QAAQ,GAAG,WAAA,CAAA,cAAA,CAAe,QAD5B;EAEE,aAAa,GAAG;AAFlB,IAG4C,WAAA,CAAA,cALC,MAM3B;EAClB,UAAU;IACR,YAAY,EAAE,aAAa,GAAG,SAAH,GAAe;EADlC,CADQ;EAIlB,kBAAkB;IAChB,YAAY,EAAE,aAAa,GAAG,SAAH,GAAe;EAD1B,CAJA;EAQlB,IAAI,QAAQ,KAAK,OAAb,IAAwB;IAC1B,CAAC,KAAK,WAAA,CAAA,kBAAkB,GAAxB,GAA8B;EADJ,CAA5B,CARkB;EAWlB,IAAI,QAAQ,KAAK,cAAb,IAA+B;IACjC,CAAC,KAAK,WAAA,CAAA,iBAAiB,KAAK,QAAQ,EAApC,GAAyC;EADR,CAAnC;AAXkB,CAN2B,CAAxC;;AAAM,OAAA,CAAA,+BAAA,GAA+B,+BAA/B","sourcesContent":["import { defaultOptions, FOCUS_VISIBLE_ATTR, FOCUS_WITHIN_ATTR } from './constants';\nimport type { GriffelStyle } from '@griffel/react';\n\nexport interface CreateCustomFocusIndicatorStyleOptions {\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 getDefaultFocusOutlineStyes\n * @param options - Configure the style of the focus outline\n */\nexport const createCustomFocusIndicatorStyle = (\n  style: GriffelStyle,\n  {\n    selector = defaultOptions.selector,\n    enableOutline = false,\n  }: CreateCustomFocusIndicatorStyleOptions = defaultOptions,\n): GriffelStyle => ({\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"],"sourceRoot":"../src/"}
+{"version":3,"sources":["packages/react-components/react-tabster/src/focus/createCustomFocusIndicatorStyle.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,WAAA,gBAAA,OAAA,CAAA,aAAA,CAAA;AAiBA;;;;;;AAMG;;;AACH,SAAgB,+BAAhB,CACE,KADF,EAEE;EACE,QAAQ,GAAG,WAAA,CAAA,cAAA,CAAe,QAD5B;EAEE,aAAa,GAAG;AAFlB,IAG4C,WAAA,CAAA,cAL9C,EAK4D;EAE1D,OAAO;IACL,UAAU;MACR,YAAY,EAAE,aAAa,GAAG,SAAH,GAAe;IADlC,CADL;IAIL,kBAAkB;MAChB,YAAY,EAAE,aAAa,GAAG,SAAH,GAAe;IAD1B,CAJb;IAQL,IAAI,QAAQ,KAAK,OAAb,IAAwB;MAC1B,CAAC,KAAK,WAAA,CAAA,kBAAkB,GAAxB,GAA8B;IADJ,CAA5B,CARK;IAWL,IAAI,QAAQ,KAAK,cAAb,IAA+B;MACjC,CAAC,KAAK,WAAA,CAAA,iBAAiB,KAAK,QAAQ,EAApC,GAAyC;IADR,CAAnC;EAXK,CAAP;AAeD;;AAtBD,OAAA,CAAA,+BAAA,GAAA,+BAAA","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  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"],"sourceRoot":"../src/"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-tabster",
-  "version": "9.3.1",
+  "version": "9.3.3",
   "description": "Utilities for focus management and facade for tabster",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -19,9 +19,7 @@
     "e2e:local": "cypress open --component",
     "just": "just-scripts",
     "lint": "just-scripts lint",
-    "storybook": "start-storybook",
     "test": "jest --passWithNoTests",
-    "start": "yarn storybook",
     "type-check": "tsc -b tsconfig.json",
     "generate-api": "tsc -p ./tsconfig.lib.json --emitDeclarationOnly && just-scripts api-extractor"
   },
@@ -31,9 +29,9 @@
   },
   "dependencies": {
     "@griffel/react": "^1.4.2",
-    "@fluentui/react-shared-contexts": "^9.1.1",
-    "@fluentui/react-theme": "^9.1.2",
-    "@fluentui/react-utilities": "^9.2.2",
+    "@fluentui/react-shared-contexts": "^9.1.3",
+    "@fluentui/react-theme": "^9.1.4",
+    "@fluentui/react-utilities": "^9.3.0",
     "keyborg": "^1.2.1",
     "tabster": "^3.0.4",
     "tslib": "^2.1.0"