@fluentui/react-tabster 9.1.3 → 9.2.0

package/CHANGELOG.json

@@ -2,7 +2,60 @@
   "name": "@fluentui/react-tabster",
   "entries": [
     {
-      "date": "Thu, 13 Oct 2022 10:59:39 GMT",
+      "date": "Thu, 20 Oct 2022 08:35:28 GMT",
+      "tag": "@fluentui/react-tabster_v9.2.0",
+      "version": "9.2.0",
+      "comments": {
+        "patch": [
+          {
+            "author": "mgodbolt@microsoft.com",
+            "package": "@fluentui/react-tabster",
+            "commit": "17096b3137d9d3e7c7443ddc3ce0738b2910a334",
+            "comment": "chore: Bump peer deps to support React 18"
+          },
+          {
+            "author": "olfedias@microsoft.com",
+            "package": "@fluentui/react-tabster",
+            "commit": "06865dada128321804646582f564ee86d835d174",
+            "comment": "chore: Update Griffel to latest version"
+          },
+          {
+            "author": "lingfangao@hotmail.com",
+            "package": "@fluentui/react-tabster",
+            "commit": "bd212e73e6a6e3c92495b793c6e682c24f27b6db",
+            "comment": "feat: Disabling default browser outline should be an option"
+          }
+        ],
+        "minor": [
+          {
+            "author": "lingfangao@hotmail.com",
+            "package": "@fluentui/react-tabster",
+            "commit": "433209a6b5e8adb7619d3658c1606ec8adb02745",
+            "comment": "feat: Bump tabster to 3.0.4"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-tabster",
+            "comment": "Bump @fluentui/react-shared-contexts to v9.0.2",
+            "commit": "be27026d83b8a019bcb945d0f42635ae76c00385"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-tabster",
+            "comment": "Bump @fluentui/react-theme to v9.1.1",
+            "commit": "be27026d83b8a019bcb945d0f42635ae76c00385"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-tabster",
+            "comment": "Bump @fluentui/react-utilities to v9.1.2",
+            "commit": "be27026d83b8a019bcb945d0f42635ae76c00385"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Thu, 13 Oct 2022 11:03:02 GMT",
       "tag": "@fluentui/react-tabster_v9.1.3",
       "version": "9.1.3",
       "comments": {

package/CHANGELOG.md

@@ -1,12 +1,30 @@
 # Change Log - @fluentui/react-tabster
 
-This log was last generated on Thu, 13 Oct 2022 10:59:39 GMT and should not be manually modified.
+This log was last generated on Thu, 20 Oct 2022 08:35:28 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.2.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-tabster_v9.2.0)
+
+Thu, 20 Oct 2022 08:35:28 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tabster_v9.1.3..@fluentui/react-tabster_v9.2.0)
+
+### Minor changes
+
+- feat: Bump tabster to 3.0.4 ([PR #25294](https://github.com/microsoft/fluentui/pull/25294) by lingfangao@hotmail.com)
+- Bump @fluentui/react-shared-contexts to v9.0.2 ([commit](https://github.com/microsoft/fluentui/commit/be27026d83b8a019bcb945d0f42635ae76c00385) by beachball)
+- Bump @fluentui/react-theme to v9.1.1 ([commit](https://github.com/microsoft/fluentui/commit/be27026d83b8a019bcb945d0f42635ae76c00385) by beachball)
+- Bump @fluentui/react-utilities to v9.1.2 ([commit](https://github.com/microsoft/fluentui/commit/be27026d83b8a019bcb945d0f42635ae76c00385) by beachball)
+
+### Patches
+
+- chore: Bump peer deps to support React 18 ([PR #24972](https://github.com/microsoft/fluentui/pull/24972) by mgodbolt@microsoft.com)
+- chore: Update Griffel to latest version ([PR #25212](https://github.com/microsoft/fluentui/pull/25212) by olfedias@microsoft.com)
+- feat: Disabling default browser outline should be an option ([PR #25202](https://github.com/microsoft/fluentui/pull/25202) by lingfangao@hotmail.com)
+
 ## [9.1.3](https://github.com/microsoft/fluentui/tree/@fluentui/react-tabster_v9.1.3)
 
-Thu, 13 Oct 2022 10:59:39 GMT 
+Thu, 13 Oct 2022 11:03:02 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tabster_v9.1.2..@fluentui/react-tabster_v9.1.3)
 
 ### Patches

package/dist/index.d.ts

@@ -17,10 +17,15 @@ export declare function applyFocusVisiblePolyfill(scope: HTMLElement, win: Windo
  * @param style - styling applied on focus, defaults to @see getDefaultFocusOutlineStyes
  * @param options - Configure the style of the focus outline
  */
-export declare const createCustomFocusIndicatorStyle: (style: GriffelStyle, { selector }?: CreateCustomFocusIndicatorStyleOptions) => GriffelStyle;
+export declare const createCustomFocusIndicatorStyle: (style: GriffelStyle, { selector, enableOutline, }?: CreateCustomFocusIndicatorStyleOptions) => GriffelStyle;
 
 export declare interface CreateCustomFocusIndicatorStyleOptions {
     selector?: 'focus' | 'focus-within';
+    /**
+     * Enables the browser default outline style
+     * @default false
+     */
+    enableOutline?: boolean;
 }
 
 /**

package/lib/focus/createCustomFocusIndicatorStyle.js

@@ -8,13 +8,14 @@ import { defaultOptions, FOCUS_VISIBLE_ATTR, FOCUS_WITHIN_ATTR } from './constan
  */
 
 export const createCustomFocusIndicatorStyle = (style, {
-  selector = defaultOptions.selector
+  selector = defaultOptions.selector,
+  enableOutline = false
 } = defaultOptions) => ({
   ':focus': {
-    outlineStyle: 'none'
+    outlineStyle: enableOutline ? undefined : 'none'
   },
   ':focus-visible': {
-    outlineStyle: 'none'
+    outlineStyle: enableOutline ? undefined : 'none'
   },
   ...(selector === 'focus' && {
     [`&[${FOCUS_VISIBLE_ATTR}]`]: style

package/lib/focus/createCustomFocusIndicatorStyle.js.map

@@ -1 +1 @@
-{"version":3,"sources":["focus/createCustomFocusIndicatorStyle.ts"],"names":[],"mappings":"AAAA,SAAS,cAAT,EAAyB,kBAAzB,EAA6C,iBAA7C,QAAsE,aAAtE;AAOA;;;;;;AAMG;;AACH,OAAO,MAAM,+BAA+B,GAAG,CAC7C,KAD6C,EAE7C;EAAE,QAAQ,GAAG,cAAc,CAAC;AAA5B,IAAiF,cAFpC,MAG3B;EAClB,UAAU;IACR,YAAY,EAAE;EADN,CADQ;EAIlB,kBAAkB;IAChB,YAAY,EAAE;EADE,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,CAH2B,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\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  { selector = defaultOptions.selector }: CreateCustomFocusIndicatorStyleOptions = defaultOptions,\n): GriffelStyle => ({\n  ':focus': {\n    outlineStyle: 'none',\n  },\n  ':focus-visible': {\n    outlineStyle: '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":["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/"}

package/lib-commonjs/focus/createCustomFocusIndicatorStyle.js

@@ -16,13 +16,14 @@ const constants_1 = /*#__PURE__*/require("./constants");
 
 
 const createCustomFocusIndicatorStyle = (style, {
-  selector = constants_1.defaultOptions.selector
+  selector = constants_1.defaultOptions.selector,
+  enableOutline = false
 } = constants_1.defaultOptions) => ({
   ':focus': {
-    outlineStyle: 'none'
+    outlineStyle: enableOutline ? undefined : 'none'
   },
   ':focus-visible': {
-    outlineStyle: 'none'
+    outlineStyle: enableOutline ? undefined : 'none'
   },
   ...(selector === 'focus' && {
     [`&[${constants_1.FOCUS_VISIBLE_ATTR}]`]: style

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

@@ -1 +1 @@
-{"version":3,"sources":["focus/createCustomFocusIndicatorStyle.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,WAAA,gBAAA,OAAA,CAAA,aAAA,CAAA;AAOA;;;;;;AAMG;;;AACI,MAAM,+BAA+B,GAAG,CAC7C,KAD6C,EAE7C;EAAE,QAAQ,GAAG,WAAA,CAAA,cAAA,CAAe;AAA5B,IAAiF,WAAA,CAAA,cAFpC,MAG3B;EAClB,UAAU;IACR,YAAY,EAAE;EADN,CADQ;EAIlB,kBAAkB;IAChB,YAAY,EAAE;EADE,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,CAH2B,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\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  { selector = defaultOptions.selector }: CreateCustomFocusIndicatorStyleOptions = defaultOptions,\n): GriffelStyle => ({\n  ':focus': {\n    outlineStyle: 'none',\n  },\n  ':focus-visible': {\n    outlineStyle: '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":["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/"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-tabster",
-  "version": "9.1.3",
+  "version": "9.2.0",
   "description": "Utilities for focus management and facade for tabster",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -31,19 +31,19 @@
     "@fluentui/scripts": "^1.0.0"
   },
   "dependencies": {
-    "@griffel/react": "^1.4.0",
-    "@fluentui/react-shared-contexts": "^9.0.1",
-    "@fluentui/react-theme": "^9.1.0",
-    "@fluentui/react-utilities": "^9.1.1",
+    "@griffel/react": "^1.4.1",
+    "@fluentui/react-shared-contexts": "^9.0.2",
+    "@fluentui/react-theme": "^9.1.1",
+    "@fluentui/react-utilities": "^9.1.2",
     "keyborg": "^1.2.1",
-    "tabster": "^2.1.2",
+    "tabster": "^3.0.4",
     "tslib": "^2.1.0"
   },
   "peerDependencies": {
-    "@types/react": ">=16.8.0 <18.0.0",
-    "@types/react-dom": ">=16.8.0 <18.0.0",
-    "react": ">=16.8.0 <18.0.0",
-    "react-dom": ">=16.8.0 <18.0.0"
+    "@types/react": ">=16.8.0 <19.0.0",
+    "@types/react-dom": ">=16.8.0 <19.0.0",
+    "react": ">=16.8.0 <19.0.0",
+    "react-dom": ">=16.8.0 <19.0.0"
   },
   "beachball": {
     "disallowedChangeTypes": [