@fluentui/react-tabster 9.13.3 → 9.13.4

package/CHANGELOG.json

@@ -2,7 +2,28 @@
   "name": "@fluentui/react-tabster",
   "entries": [
     {
-      "date": "Wed, 04 Oct 2023 08:41:55 GMT",
+      "date": "Thu, 05 Oct 2023 15:17:59 GMT",
+      "tag": "@fluentui/react-tabster_v9.13.4",
+      "version": "9.13.4",
+      "comments": {
+        "patch": [
+          {
+            "author": "bernardo.sunderhus@gmail.com",
+            "package": "@fluentui/react-tabster",
+            "commit": "face7fef2060504eb2c5f27c9c7b1de1ff6cab76",
+            "comment": "chore: adds comments on createCustomFocusIndicatorStyle to explain that the default outline style is not removed"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-tabster",
+            "comment": "Bump @fluentui/react-utilities to v9.14.1",
+            "commit": "690590449dc3d65cd40b2b06a990fd920180919d"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Wed, 04 Oct 2023 08:45:47 GMT",
       "tag": "@fluentui/react-tabster_v9.13.3",
       "version": "9.13.3",
       "comments": {

package/CHANGELOG.md

@@ -1,12 +1,22 @@
 # Change Log - @fluentui/react-tabster
 
-This log was last generated on Wed, 04 Oct 2023 08:41:55 GMT and should not be manually modified.
+This log was last generated on Thu, 05 Oct 2023 15:17:59 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.13.4](https://github.com/microsoft/fluentui/tree/@fluentui/react-tabster_v9.13.4)
+
+Thu, 05 Oct 2023 15:17:59 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tabster_v9.13.3..@fluentui/react-tabster_v9.13.4)
+
+### Patches
+
+- chore: adds comments on createCustomFocusIndicatorStyle to explain that the default outline style is not removed ([PR #29336](https://github.com/microsoft/fluentui/pull/29336) by bernardo.sunderhus@gmail.com)
+- Bump @fluentui/react-utilities to v9.14.1 ([PR #29412](https://github.com/microsoft/fluentui/pull/29412) by beachball)
+
 ## [9.13.3](https://github.com/microsoft/fluentui/tree/@fluentui/react-tabster_v9.13.3)
 
-Wed, 04 Oct 2023 08:41:55 GMT 
+Wed, 04 Oct 2023 08:45:47 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tabster_v9.13.2..@fluentui/react-tabster_v9.13.3)
 
 ### Patches

package/dist/index.d.ts

@@ -15,6 +15,29 @@ export declare function applyFocusVisiblePolyfill(scope: HTMLElement, targetWind
  * Creates a style for @see makeStyles that includes the necessary selectors for focus.
  * Should be used only when @see createFocusOutlineStyle does not fit requirements
  *
+ * If you're using `createCustomFocusIndicatorStyle` instead of `createFocusOutlineStyle`
+ * keep in mind that the default outline style is not going to be removed
+ * (as it is in `createFocusOutlineStyle`),
+ * and is your responsibility to manually remove it from your styles.
+ *
+ * @example
+ * ```ts
+ * // Link styles
+ * const useStyles = makeStyles({
+ focusIndicator: createCustomFocusIndicatorStyle({
+ textDecorationColor: tokens.colorStrokeFocus2,
+ textDecorationLine: 'underline',
+ textDecorationStyle: 'double',
+ outlineStyle: 'none',
+ }),
+ // Common styles.
+ root: {
+ // ❗️ DO NOT FORGET TO REMOVE THE DEFAULT OUTLINE STYLE
+ ':focus-visible': {
+ outlineStyle: 'none',
+ },
+ * ```
+ *
  * @param style - styling applied on focus, defaults to @see getDefaultFocusOutlineStyles
  * @param options - Configure the style of the focus outline
  */

package/lib/focus/createCustomFocusIndicatorStyle.js

@@ -3,6 +3,29 @@ 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
  *
+ * If you're using `createCustomFocusIndicatorStyle` instead of `createFocusOutlineStyle`
+ * keep in mind that the default outline style is not going to be removed
+ * (as it is in `createFocusOutlineStyle`),
+ * and is your responsibility to manually remove it from your styles.
+ *
+ * @example
+ * ```ts
+ * // Link styles
+ * const useStyles = makeStyles({
+  focusIndicator: createCustomFocusIndicatorStyle({
+    textDecorationColor: tokens.colorStrokeFocus2,
+    textDecorationLine: 'underline',
+    textDecorationStyle: 'double',
+    outlineStyle: 'none',
+  }),
+  // Common styles.
+  root: {
+    // ❗️ DO NOT FORGET TO REMOVE THE DEFAULT OUTLINE STYLE
+    ':focus-visible': {
+      outlineStyle: 'none',
+    },
+ * ```
+ *
  * @param style - styling applied on focus, defaults to @see getDefaultFocusOutlineStyles
  * @param options - Configure the style of the focus outline
  */ export function createCustomFocusIndicatorStyle(style, { selector: selectorType = defaultOptions.selector, customizeSelector = defaultOptions.customizeSelector } = defaultOptions) {

package/lib/focus/createCustomFocusIndicatorStyle.js.map

@@ -1 +1 @@
-{"version":3,"sources":["createCustomFocusIndicatorStyle.ts"],"sourcesContent":["import { defaultOptions, FOCUS_VISIBLE_ATTR, FOCUS_WITHIN_ATTR } from './constants';\nimport { makeResetStyles } from '@griffel/react';\nimport type { GriffelStyle } from '@griffel/react';\n\n// TODO: Use the type directly from @griffel/react\n// https://github.com/microsoft/griffel/pull/278\ntype GriffelResetStyle = Parameters<typeof makeResetStyles>[0];\n\nexport interface CreateCustomFocusIndicatorStyleOptions {\n  /**\n   * Control if the indicator appears when the corresponding element is focused,\n   * or any child is focused within the corresponding element.\n   * @default 'focus'\n   * @alias selectorType\n   */\n  selector?: 'focus' | 'focus-within';\n  /**\n   * Customizes the selector provided based on the selector type.\n   */\n  customizeSelector?: (selector: string) => string;\n  /**\n   * Enables the browser default outline style\n   * @deprecated The custom focus indicator no longer affects outline styles. Outline is overridden\n   * in the default focus indicator function, `createFocusOutlineStyle`.\n   */\n  enableOutline?: boolean;\n}\n\n/**\n * Creates a style for @see makeStyles that includes the necessary selectors for focus.\n * Should be used only when @see createFocusOutlineStyle does not fit requirements\n *\n * @param style - styling applied on focus, defaults to @see getDefaultFocusOutlineStyles\n * @param options - Configure the style of the focus outline\n */\nexport function createCustomFocusIndicatorStyle<TStyle extends GriffelStyle | GriffelResetStyle>(\n  style: TStyle,\n  {\n    selector: selectorType = defaultOptions.selector,\n    customizeSelector = defaultOptions.customizeSelector,\n  }: CreateCustomFocusIndicatorStyleOptions = defaultOptions,\n): TStyle extends GriffelStyle ? GriffelStyle : GriffelResetStyle {\n  return { [customizeSelector(createBaseSelector(selectorType))]: style };\n}\n\nfunction createBaseSelector(selectorType: 'focus' | 'focus-within'): string {\n  switch (selectorType) {\n    case 'focus':\n      return `&[${FOCUS_VISIBLE_ATTR}]`;\n    case 'focus-within':\n      return `&[${FOCUS_WITHIN_ATTR}]:focus-within`;\n  }\n}\n"],"names":["defaultOptions","FOCUS_VISIBLE_ATTR","FOCUS_WITHIN_ATTR","createCustomFocusIndicatorStyle","style","selector","selectorType","customizeSelector","createBaseSelector"],"mappings":"AAAA,SAASA,cAAc,EAAEC,kBAAkB,EAAEC,iBAAiB,QAAQ,cAAc;AA4BpF;;;;;;CAMC,GACD,OAAO,SAASC,gCACdC,KAAa,EACb,EACEC,UAAUC,eAAeN,eAAeK,QAAQ,EAChDE,oBAAoBP,eAAeO,iBAAiB,EACb,GAAGP,cAAc;IAE1D,OAAO;QAAE,CAACO,kBAAkBC,mBAAmBF,eAAe,EAAEF;IAAM;AACxE;AAEA,SAASI,mBAAmBF,YAAsC;IAChE,OAAQA;QACN,KAAK;YACH,OAAO,CAAC,EAAE,EAAEL,mBAAmB,CAAC,CAAC;QACnC,KAAK;YACH,OAAO,CAAC,EAAE,EAAEC,kBAAkB,cAAc,CAAC;IACjD;AACF"}
+{"version":3,"sources":["createCustomFocusIndicatorStyle.ts"],"sourcesContent":["import { defaultOptions, FOCUS_VISIBLE_ATTR, FOCUS_WITHIN_ATTR } from './constants';\nimport { makeResetStyles } from '@griffel/react';\nimport type { GriffelStyle } from '@griffel/react';\n\n// TODO: Use the type directly from @griffel/react\n// https://github.com/microsoft/griffel/pull/278\ntype GriffelResetStyle = Parameters<typeof makeResetStyles>[0];\n\nexport interface CreateCustomFocusIndicatorStyleOptions {\n  /**\n   * Control if the indicator appears when the corresponding element is focused,\n   * or any child is focused within the corresponding element.\n   * @default 'focus'\n   * @alias selectorType\n   */\n  selector?: 'focus' | 'focus-within';\n  /**\n   * Customizes the selector provided based on the selector type.\n   */\n  customizeSelector?: (selector: string) => string;\n  /**\n   * Enables the browser default outline style\n   * @deprecated The custom focus indicator no longer affects outline styles. Outline is overridden\n   * in the default focus indicator function, `createFocusOutlineStyle`.\n   */\n  enableOutline?: boolean;\n}\n\n/**\n * Creates a style for @see makeStyles that includes the necessary selectors for focus.\n * Should be used only when @see createFocusOutlineStyle does not fit requirements\n *\n * If you're using `createCustomFocusIndicatorStyle` instead of `createFocusOutlineStyle`\n * keep in mind that the default outline style is not going to be removed\n * (as it is in `createFocusOutlineStyle`),\n * and is your responsibility to manually remove it from your styles.\n *\n * @example\n * ```ts\n * // Link styles\n * const useStyles = makeStyles({\n  focusIndicator: createCustomFocusIndicatorStyle({\n    textDecorationColor: tokens.colorStrokeFocus2,\n    textDecorationLine: 'underline',\n    textDecorationStyle: 'double',\n    outlineStyle: 'none',\n  }),\n  // Common styles.\n  root: {\n    // ❗️ DO NOT FORGET TO REMOVE THE DEFAULT OUTLINE STYLE\n    ':focus-visible': {\n      outlineStyle: 'none',\n    },\n * ```\n *\n * @param style - styling applied on focus, defaults to @see getDefaultFocusOutlineStyles\n * @param options - Configure the style of the focus outline\n */\nexport function createCustomFocusIndicatorStyle<TStyle extends GriffelStyle | GriffelResetStyle>(\n  style: TStyle,\n  {\n    selector: selectorType = defaultOptions.selector,\n    customizeSelector = defaultOptions.customizeSelector,\n  }: CreateCustomFocusIndicatorStyleOptions = defaultOptions,\n): TStyle extends GriffelStyle ? GriffelStyle : GriffelResetStyle {\n  return { [customizeSelector(createBaseSelector(selectorType))]: style };\n}\n\nfunction createBaseSelector(selectorType: 'focus' | 'focus-within'): string {\n  switch (selectorType) {\n    case 'focus':\n      return `&[${FOCUS_VISIBLE_ATTR}]`;\n    case 'focus-within':\n      return `&[${FOCUS_WITHIN_ATTR}]:focus-within`;\n  }\n}\n"],"names":["defaultOptions","FOCUS_VISIBLE_ATTR","FOCUS_WITHIN_ATTR","createCustomFocusIndicatorStyle","style","selector","selectorType","customizeSelector","createBaseSelector"],"mappings":"AAAA,SAASA,cAAc,EAAEC,kBAAkB,EAAEC,iBAAiB,QAAQ,cAAc;AA4BpF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6BC,GACD,OAAO,SAASC,gCACdC,KAAa,EACb,EACEC,UAAUC,eAAeN,eAAeK,QAAQ,EAChDE,oBAAoBP,eAAeO,iBAAiB,EACb,GAAGP,cAAc;IAE1D,OAAO;QAAE,CAACO,kBAAkBC,mBAAmBF,eAAe,EAAEF;IAAM;AACxE;AAEA,SAASI,mBAAmBF,YAAsC;IAChE,OAAQA;QACN,KAAK;YACH,OAAO,CAAC,EAAE,EAAEL,mBAAmB,CAAC,CAAC;QACnC,KAAK;YACH,OAAO,CAAC,EAAE,EAAEC,kBAAkB,cAAc,CAAC;IACjD;AACF"}

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

@@ -1 +1 @@
-{"version":3,"sources":["createCustomFocusIndicatorStyle.js"],"sourcesContent":["import { defaultOptions, FOCUS_VISIBLE_ATTR, FOCUS_WITHIN_ATTR } from './constants';\n/**\n * Creates a style for @see makeStyles that includes the necessary selectors for focus.\n * Should be used only when @see createFocusOutlineStyle does not fit requirements\n *\n * @param style - styling applied on focus, defaults to @see getDefaultFocusOutlineStyles\n * @param options - Configure the style of the focus outline\n */ export function createCustomFocusIndicatorStyle(style, { selector: selectorType = defaultOptions.selector, customizeSelector = defaultOptions.customizeSelector } = defaultOptions) {\n    return {\n        [customizeSelector(createBaseSelector(selectorType))]: style\n    };\n}\nfunction createBaseSelector(selectorType) {\n    switch(selectorType){\n        case 'focus':\n            return `&[${FOCUS_VISIBLE_ATTR}]`;\n        case 'focus-within':\n            return `&[${FOCUS_WITHIN_ATTR}]:focus-within`;\n    }\n}\n"],"names":["createCustomFocusIndicatorStyle","style","selector","selectorType","defaultOptions","customizeSelector","createBaseSelector","FOCUS_VISIBLE_ATTR","FOCUS_WITHIN_ATTR"],"mappings":";;;;+BAOoBA;;;eAAAA;;;2BAPkD;AAO3D,SAASA,gCAAgCC,KAAK,EAAE,EAAEC,UAAUC,eAAeC,yBAAc,CAACF,QAAQ,EAAEG,oBAAoBD,yBAAc,CAACC,iBAAiB,EAAE,GAAGD,yBAAc;IAClL,OAAO;QACH,CAACC,kBAAkBC,mBAAmBH,eAAe,EAAEF;IAC3D;AACJ;AACA,SAASK,mBAAmBH,YAAY;IACpC,OAAOA;QACH,KAAK;YACD,OAAO,CAAC,EAAE,EAAEI,6BAAkB,CAAC,CAAC,CAAC;QACrC,KAAK;YACD,OAAO,CAAC,EAAE,EAAEC,4BAAiB,CAAC,cAAc,CAAC;IACrD;AACJ"}
+{"version":3,"sources":["createCustomFocusIndicatorStyle.js"],"sourcesContent":["import { defaultOptions, FOCUS_VISIBLE_ATTR, FOCUS_WITHIN_ATTR } from './constants';\n/**\n * Creates a style for @see makeStyles that includes the necessary selectors for focus.\n * Should be used only when @see createFocusOutlineStyle does not fit requirements\n *\n * If you're using `createCustomFocusIndicatorStyle` instead of `createFocusOutlineStyle`\n * keep in mind that the default outline style is not going to be removed\n * (as it is in `createFocusOutlineStyle`),\n * and is your responsibility to manually remove it from your styles.\n *\n * @example\n * ```ts\n * // Link styles\n * const useStyles = makeStyles({\n  focusIndicator: createCustomFocusIndicatorStyle({\n    textDecorationColor: tokens.colorStrokeFocus2,\n    textDecorationLine: 'underline',\n    textDecorationStyle: 'double',\n    outlineStyle: 'none',\n  }),\n  // Common styles.\n  root: {\n    // ❗️ DO NOT FORGET TO REMOVE THE DEFAULT OUTLINE STYLE\n    ':focus-visible': {\n      outlineStyle: 'none',\n    },\n * ```\n *\n * @param style - styling applied on focus, defaults to @see getDefaultFocusOutlineStyles\n * @param options - Configure the style of the focus outline\n */ export function createCustomFocusIndicatorStyle(style, { selector: selectorType = defaultOptions.selector, customizeSelector = defaultOptions.customizeSelector } = defaultOptions) {\n    return {\n        [customizeSelector(createBaseSelector(selectorType))]: style\n    };\n}\nfunction createBaseSelector(selectorType) {\n    switch(selectorType){\n        case 'focus':\n            return `&[${FOCUS_VISIBLE_ATTR}]`;\n        case 'focus-within':\n            return `&[${FOCUS_WITHIN_ATTR}]:focus-within`;\n    }\n}\n"],"names":["createCustomFocusIndicatorStyle","style","selector","selectorType","defaultOptions","customizeSelector","createBaseSelector","FOCUS_VISIBLE_ATTR","FOCUS_WITHIN_ATTR"],"mappings":";;;;+BA8BoBA;;;eAAAA;;;2BA9BkD;AA8B3D,SAASA,gCAAgCC,KAAK,EAAE,EAAEC,UAAUC,eAAeC,yBAAc,CAACF,QAAQ,EAAEG,oBAAoBD,yBAAc,CAACC,iBAAiB,EAAE,GAAGD,yBAAc;IAClL,OAAO;QACH,CAACC,kBAAkBC,mBAAmBH,eAAe,EAAEF;IAC3D;AACJ;AACA,SAASK,mBAAmBH,YAAY;IACpC,OAAOA;QACH,KAAK;YACD,OAAO,CAAC,EAAE,EAAEI,6BAAkB,CAAC,CAAC,CAAC;QACrC,KAAK;YACD,OAAO,CAAC,EAAE,EAAEC,4BAAiB,CAAC,cAAc,CAAC;IACrD;AACJ"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-tabster",
-  "version": "9.13.3",
+  "version": "9.13.4",
   "description": "Utilities for focus management and facade for tabster",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -33,7 +33,7 @@
   "dependencies": {
     "@fluentui/react-shared-contexts": "^9.9.2",
     "@fluentui/react-theme": "^9.1.14",
-    "@fluentui/react-utilities": "^9.14.0",
+    "@fluentui/react-utilities": "^9.14.1",
     "@griffel/react": "^1.5.14",
     "@swc/helpers": "^0.5.1",
     "keyborg": "^2.0.0",