@fluentui/react-tabster 9.0.0-alpha.68 → 9.0.0-alpha.73

package/CHANGELOG.json

@@ -2,7 +2,103 @@
   "name": "@fluentui/react-tabster",
   "entries": [
     {
-      "date": "Wed, 29 Sep 2021 08:05:12 GMT",
+      "date": "Tue, 05 Oct 2021 12:47:00 GMT",
+      "tag": "@fluentui/react-tabster_v9.0.0-alpha.73",
+      "version": "9.0.0-alpha.73",
+      "comments": {
+        "prerelease": [
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-tabster",
+            "comment": "Bump @fluentui/make-styles to v9.0.0-alpha.35",
+            "commit": "c41b8f8996acd5b970d894fc910cc4d661f8e3cb"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-tabster",
+            "comment": "Bump @fluentui/react-make-styles to v9.0.0-alpha.78",
+            "commit": "c41b8f8996acd5b970d894fc910cc4d661f8e3cb"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Tue, 05 Oct 2021 09:28:07 GMT",
+      "tag": "@fluentui/react-tabster_v9.0.0-alpha.72",
+      "version": "9.0.0-alpha.72",
+      "comments": {
+        "prerelease": [
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-tabster",
+            "comment": "Bump @fluentui/react-make-styles to v9.0.0-alpha.77",
+            "commit": "3b16677a03035dcf03c1297268b85c6d4bd3f839"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-tabster",
+            "comment": "Bump @fluentui/react-utilities to v9.0.0-alpha.56",
+            "commit": "3b16677a03035dcf03c1297268b85c6d4bd3f839"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Fri, 01 Oct 2021 14:13:08 GMT",
+      "tag": "@fluentui/react-tabster_v9.0.0-alpha.71",
+      "version": "9.0.0-alpha.71",
+      "comments": {
+        "prerelease": [
+          {
+            "author": "lingfangao@hotmail.com",
+            "package": "@fluentui/react-tabster",
+            "comment": "Bump v9 prerelease versions to rerelease",
+            "commit": "4fa0856ad0353b787b8ae59229e6f64ef0719824"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-tabster",
+            "comment": "Bump @fluentui/make-styles to v9.0.0-alpha.34",
+            "commit": "4fa0856ad0353b787b8ae59229e6f64ef0719824"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-tabster",
+            "comment": "Bump @fluentui/react-make-styles to v9.0.0-alpha.76",
+            "commit": "4fa0856ad0353b787b8ae59229e6f64ef0719824"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-tabster",
+            "comment": "Bump @fluentui/react-shared-contexts to v9.0.0-alpha.28",
+            "commit": "4fa0856ad0353b787b8ae59229e6f64ef0719824"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-tabster",
+            "comment": "Bump @fluentui/react-utilities to v9.0.0-alpha.55",
+            "commit": "4fa0856ad0353b787b8ae59229e6f64ef0719824"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Fri, 01 Oct 2021 09:44:56 GMT",
+      "tag": "@fluentui/react-tabster_v9.0.0-alpha.69",
+      "version": "9.0.0-alpha.69",
+      "comments": {
+        "prerelease": [
+          {
+            "author": "lingfangao@hotmail.com",
+            "package": "@fluentui/react-tabster",
+            "comment": "chore(react-tabster): Update default focus ring styles",
+            "commit": "0ebd18ceaba3d032748f76da4ce06fcf8942c6c5"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Wed, 29 Sep 2021 08:06:11 GMT",
       "tag": "@fluentui/react-tabster_v9.0.0-alpha.68",
       "version": "9.0.0-alpha.68",
       "comments": {

package/CHANGELOG.md

@@ -1,12 +1,54 @@
 # Change Log - @fluentui/react-tabster
 
-This log was last generated on Wed, 29 Sep 2021 08:05:12 GMT and should not be manually modified.
+This log was last generated on Tue, 05 Oct 2021 12:47:00 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.0.0-alpha.73](https://github.com/microsoft/fluentui/tree/@fluentui/react-tabster_v9.0.0-alpha.73)
+
+Tue, 05 Oct 2021 12:47:00 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tabster_v9.0.0-alpha.72..@fluentui/react-tabster_v9.0.0-alpha.73)
+
+### Changes
+
+- Bump @fluentui/make-styles to v9.0.0-alpha.35 ([PR #20108](https://github.com/microsoft/fluentui/pull/20108) by beachball)
+- Bump @fluentui/react-make-styles to v9.0.0-alpha.78 ([PR #20108](https://github.com/microsoft/fluentui/pull/20108) by beachball)
+
+## [9.0.0-alpha.72](https://github.com/microsoft/fluentui/tree/@fluentui/react-tabster_v9.0.0-alpha.72)
+
+Tue, 05 Oct 2021 09:28:07 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tabster_v9.0.0-alpha.71..@fluentui/react-tabster_v9.0.0-alpha.72)
+
+### Changes
+
+- Bump @fluentui/react-make-styles to v9.0.0-alpha.77 ([PR #20081](https://github.com/microsoft/fluentui/pull/20081) by beachball)
+- Bump @fluentui/react-utilities to v9.0.0-alpha.56 ([PR #20081](https://github.com/microsoft/fluentui/pull/20081) by beachball)
+
+## [9.0.0-alpha.71](https://github.com/microsoft/fluentui/tree/@fluentui/react-tabster_v9.0.0-alpha.71)
+
+Fri, 01 Oct 2021 14:13:08 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tabster_v9.0.0-alpha.69..@fluentui/react-tabster_v9.0.0-alpha.71)
+
+### Changes
+
+- Bump v9 prerelease versions to rerelease ([PR #20069](https://github.com/microsoft/fluentui/pull/20069) by lingfangao@hotmail.com)
+- Bump @fluentui/make-styles to v9.0.0-alpha.34 ([PR #20069](https://github.com/microsoft/fluentui/pull/20069) by beachball)
+- Bump @fluentui/react-make-styles to v9.0.0-alpha.76 ([PR #20069](https://github.com/microsoft/fluentui/pull/20069) by beachball)
+- Bump @fluentui/react-shared-contexts to v9.0.0-alpha.28 ([PR #20069](https://github.com/microsoft/fluentui/pull/20069) by beachball)
+- Bump @fluentui/react-utilities to v9.0.0-alpha.55 ([PR #20069](https://github.com/microsoft/fluentui/pull/20069) by beachball)
+
+## [9.0.0-alpha.69](https://github.com/microsoft/fluentui/tree/@fluentui/react-tabster_v9.0.0-alpha.69)
+
+Fri, 01 Oct 2021 09:44:56 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tabster_v9.0.0-alpha.68..@fluentui/react-tabster_v9.0.0-alpha.69)
+
+### Changes
+
+- chore(react-tabster): Update default focus ring styles ([PR #19990](https://github.com/microsoft/fluentui/pull/19990) by lingfangao@hotmail.com)
+
 ## [9.0.0-alpha.68](https://github.com/microsoft/fluentui/tree/@fluentui/react-tabster_v9.0.0-alpha.68)
 
-Wed, 29 Sep 2021 08:05:12 GMT 
+Wed, 29 Sep 2021 08:06:11 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tabster_v9.0.0-alpha.67..@fluentui/react-tabster_v9.0.0-alpha.68)
 
 ### Changes

package/dist/react-tabster.d.ts

@@ -1,14 +1,46 @@
+import type { MakeStyles } from '@fluentui/make-styles';
 import type { MakeStylesStyleRule } from '@fluentui/make-styles';
 import type { RefObject } from 'react';
 import type { Theme } from '@fluentui/react-theme';
 import { Types } from 'tabster';
 
-export declare const createFocusIndicatorStyleRule: (rule?: MakeStylesStyleRule<Theme>, options?: CreateFocusIndicatorStyleRuleOptions) => MakeStylesStyleRule<Theme>;
+/**
+ * Creates a style rule for @see makeStyles that includes the necessary selectors for focus.
+ * Should be used only when @see createFocusOutlineStyle does not fit requirements
+ *
+ * @param rule - styling applied on focus, defaults to @see getDefaultFocusOutlineStyes
+ */
+export declare const createCustomFocusIndicatorStyle: (rule: MakeStylesStyleRule<Theme>, options?: CreateFocusIndicatorStyleRuleOptions) => MakeStylesStyleRule<Theme>;
 
 export declare interface CreateFocusIndicatorStyleRuleOptions {
     selector?: 'focus' | 'focus-within';
 }
 
+/**
+ * NOTE: The element with the focus outline needs to have `position: relative` so that the
+ * pseudo element can be properly positioned.
+ *
+ * @param theme - Theme used in @see makeStyles
+ * @param options - Configure the style of the focus outline
+ * @returns focus outline styles object for @see makeStyles
+ */
+export declare const createFocusOutlineStyle: (theme: Theme, options?: {
+    style: Partial<FocusOutlineStyleOptions>;
+} & CreateFocusIndicatorStyleRuleOptions) => MakeStyles;
+
+export declare type FocusOutlineOffset = Record<'top' | 'bottom' | 'left' | 'right', string>;
+
+export declare type FocusOutlineStyleOptions = {
+    /**
+     * Only property not supported by the native CSS `outline`, if this is no longer needed
+     * we can just go native instead
+     */
+    outlineRadius: string;
+    outlineColor: string;
+    outlineWidth: string;
+    outlineOffset?: string | FocusOutlineOffset;
+};
+
 /**
  * A hook that returns the necessary tabster attributes to support arrow key navigation
  * @param options - Options to configure keyboard navigation

package/lib/hooks/useFocusIndicatorStyle.d.ts

@@ -1,6 +1,34 @@
 import type { Theme } from '@fluentui/react-theme';
-import type { MakeStylesStyleRule } from '@fluentui/make-styles';
+import type { MakeStyles, MakeStylesStyleRule } from '@fluentui/make-styles';
+export declare type FocusOutlineOffset = Record<'top' | 'bottom' | 'left' | 'right', string>;
+export declare type FocusOutlineStyleOptions = {
+    /**
+     * Only property not supported by the native CSS `outline`, if this is no longer needed
+     * we can just go native instead
+     */
+    outlineRadius: string;
+    outlineColor: string;
+    outlineWidth: string;
+    outlineOffset?: string | FocusOutlineOffset;
+};
 export interface CreateFocusIndicatorStyleRuleOptions {
     selector?: 'focus' | 'focus-within';
 }
-export declare const createFocusIndicatorStyleRule: (rule?: MakeStylesStyleRule<Theme>, options?: CreateFocusIndicatorStyleRuleOptions) => MakeStylesStyleRule<Theme>;
+/**
+ * NOTE: The element with the focus outline needs to have `position: relative` so that the
+ * pseudo element can be properly positioned.
+ *
+ * @param theme - Theme used in @see makeStyles
+ * @param options - Configure the style of the focus outline
+ * @returns focus outline styles object for @see makeStyles
+ */
+export declare const createFocusOutlineStyle: (theme: Theme, options?: {
+    style: Partial<FocusOutlineStyleOptions>;
+} & CreateFocusIndicatorStyleRuleOptions) => MakeStyles;
+/**
+ * Creates a style rule for @see makeStyles that includes the necessary selectors for focus.
+ * Should be used only when @see createFocusOutlineStyle does not fit requirements
+ *
+ * @param rule - styling applied on focus, defaults to @see getDefaultFocusOutlineStyes
+ */
+export declare const createCustomFocusIndicatorStyle: (rule: MakeStylesStyleRule<Theme>, options?: CreateFocusIndicatorStyleRuleOptions) => MakeStylesStyleRule<Theme>;

package/lib/hooks/useFocusIndicatorStyle.js

@@ -1,19 +1,84 @@
+import { __assign } from "tslib";
 import { KEYBOARD_NAV_SELECTOR } from '../symbols';
+/**
+ * NOTE: the element with the focus outline needs to have `position: relative` so that the
+ * pseudo element can be properly positioned.
+ *
+ * @param options - Configures the style of the focus outline
+ * @returns focus outline styles object
+ */
 
-var defaultStyleRule = function (theme) {
+var getFocusOutlineStyles = function (options) {
+  var _a, _b, _c, _d;
+
+  var outlineRadius = options.outlineRadius,
+      outlineColor = options.outlineColor,
+      outlineOffset = options.outlineOffset,
+      outlineWidth = options.outlineWidth;
+  var outlineOffsetTop = ((_a = outlineOffset) === null || _a === void 0 ? void 0 : _a.top) || outlineOffset;
+  var outlineOffsetBottom = ((_b = outlineOffset) === null || _b === void 0 ? void 0 : _b.bottom) || outlineOffset;
+  var outlineOffsetLeft = ((_c = outlineOffset) === null || _c === void 0 ? void 0 : _c.left) || outlineOffset;
+  var outlineOffsetRight = ((_d = outlineOffset) === null || _d === void 0 ? void 0 : _d.right) || outlineOffset;
   return {
-    outline: "solid 1px " + theme.alias.color.neutral.neutralForeground1
+    borderColor: 'transparent',
+    ':after': {
+      content: '""',
+      position: 'absolute',
+      pointerEvents: 'none',
+      boxSizing: 'outline-box',
+      zIndex: 1,
+      borderStyle: 'solid',
+      borderWidth: outlineWidth,
+      borderRadius: outlineRadius,
+      borderColor: outlineColor,
+      top: !outlineOffset ? "-" + outlineWidth : "calc(0px - " + outlineWidth + " - " + outlineOffsetTop + ")",
+      bottom: !outlineOffset ? "-" + outlineWidth : "calc(0px - " + outlineWidth + " - " + outlineOffsetBottom + ")",
+      left: !outlineOffset ? "-" + outlineWidth : "calc(0px - " + outlineWidth + " - " + outlineOffsetLeft + ")",
+      right: !outlineOffset ? "-" + outlineWidth : "calc(0px - " + outlineWidth + " - " + outlineOffsetRight + ")"
+    }
   };
 };
 
 var defaultOptions = {
   selector: 'focus'
 };
-export var createFocusIndicatorStyleRule = function (rule, options) {
-  if (rule === void 0) {
-    rule = defaultStyleRule;
+/**
+ * NOTE: The element with the focus outline needs to have `position: relative` so that the
+ * pseudo element can be properly positioned.
+ *
+ * @param theme - Theme used in @see makeStyles
+ * @param options - Configure the style of the focus outline
+ * @returns focus outline styles object for @see makeStyles
+ */
+
+export var createFocusOutlineStyle = function (theme, options) {
+  var _a;
+
+  if (options === void 0) {
+    options = __assign({
+      style: {}
+    }, defaultOptions);
   }
 
+  return _a = {
+    ':focus-visible': {
+      outline: 'none'
+    }
+  }, _a[KEYBOARD_NAV_SELECTOR + " :" + (options.selector || defaultOptions.selector)] = getFocusOutlineStyles(__assign({
+    outlineColor: theme.colorStrokeFocus2,
+    outlineRadius: theme.borderRadiusMedium,
+    // FIXME: theme.global.strokeWidth.thick causes some weird bugs
+    outlineWidth: '2px'
+  }, options.style)), _a;
+};
+/**
+ * Creates a style rule for @see makeStyles that includes the necessary selectors for focus.
+ * Should be used only when @see createFocusOutlineStyle does not fit requirements
+ *
+ * @param rule - styling applied on focus, defaults to @see getDefaultFocusOutlineStyes
+ */
+
+export var createCustomFocusIndicatorStyle = function (rule, options) {
   if (options === void 0) {
     options = defaultOptions;
   }

package/lib/hooks/useFocusIndicatorStyle.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/hooks/useFocusIndicatorStyle.ts"],"names":[],"mappings":"AAEA,SAAS,qBAAT,QAAsC,YAAtC;;AAEA,IAAM,gBAAgB,GAAG,UAAC,KAAD,EAAa;AAAK,SAAC;AAC1C,IAAA,OAAO,EAAE,eAAa,KAAK,CAAC,KAAN,CAAY,KAAZ,CAAkB,OAAlB,CAA0B;AADN,GAAD;AAEzC,CAFF;;AAQA,IAAM,cAAc,GAAyC;AAC3D,EAAA,QAAQ,EAAE;AADiD,CAA7D;AAIA,OAAO,IAAM,6BAA6B,GAAG,UAC3C,IAD2C,EAE3C,OAF2C,EAEmB;AAD9D,MAAA,IAAA,KAAA,KAAA,CAAA,EAAA;AAAA,IAAA,IAAA,GAAA,gBAAA;AAAmD;;AACnD,MAAA,OAAA,KAAA,KAAA,CAAA,EAAA;AAAA,IAAA,OAAA,GAAA,cAAA;AAA8D;;AAC/B,SAAA,UAAA,KAAA,EAAK;;;AAAI,WAAA,EAAA,GAAA;AACxC,wBAAkB;AAChB,QAAA,OAAO,EAAE;AADO;AADsB,KAAA,EAIxC,EAAA,CAAI,qBAAqB,GAAA,IAArB,IAA0B,OAAO,CAAC,QAAR,IAAoB,cAAc,CAAC,QAA7D,CAAJ,CAAA,GACE,OAAO,IAAP,KAAgB,UAAhB,GAA6B,IAAI,CAAC,KAAD,CAAjC,GAA2C,IALL,EAMxC,EANwC;AAMxC,GAN+B;AAM/B,CATK","sourceRoot":""}
+{"version":3,"sources":["../../src/hooks/useFocusIndicatorStyle.ts"],"names":[],"mappings":"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","sourceRoot":""}

package/lib-commonjs/hooks/useFocusIndicatorStyle.d.ts

@@ -1,6 +1,34 @@
 import type { Theme } from '@fluentui/react-theme';
-import type { MakeStylesStyleRule } from '@fluentui/make-styles';
+import type { MakeStyles, MakeStylesStyleRule } from '@fluentui/make-styles';
+export declare type FocusOutlineOffset = Record<'top' | 'bottom' | 'left' | 'right', string>;
+export declare type FocusOutlineStyleOptions = {
+    /**
+     * Only property not supported by the native CSS `outline`, if this is no longer needed
+     * we can just go native instead
+     */
+    outlineRadius: string;
+    outlineColor: string;
+    outlineWidth: string;
+    outlineOffset?: string | FocusOutlineOffset;
+};
 export interface CreateFocusIndicatorStyleRuleOptions {
     selector?: 'focus' | 'focus-within';
 }
-export declare const createFocusIndicatorStyleRule: (rule?: MakeStylesStyleRule<Theme>, options?: CreateFocusIndicatorStyleRuleOptions) => MakeStylesStyleRule<Theme>;
+/**
+ * NOTE: The element with the focus outline needs to have `position: relative` so that the
+ * pseudo element can be properly positioned.
+ *
+ * @param theme - Theme used in @see makeStyles
+ * @param options - Configure the style of the focus outline
+ * @returns focus outline styles object for @see makeStyles
+ */
+export declare const createFocusOutlineStyle: (theme: Theme, options?: {
+    style: Partial<FocusOutlineStyleOptions>;
+} & CreateFocusIndicatorStyleRuleOptions) => MakeStyles;
+/**
+ * Creates a style rule for @see makeStyles that includes the necessary selectors for focus.
+ * Should be used only when @see createFocusOutlineStyle does not fit requirements
+ *
+ * @param rule - styling applied on focus, defaults to @see getDefaultFocusOutlineStyes
+ */
+export declare const createCustomFocusIndicatorStyle: (rule: MakeStylesStyleRule<Theme>, options?: CreateFocusIndicatorStyleRuleOptions) => MakeStylesStyleRule<Theme>;

package/lib-commonjs/hooks/useFocusIndicatorStyle.js

@@ -3,25 +3,93 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.createFocusIndicatorStyleRule = void 0;
+exports.createCustomFocusIndicatorStyle = exports.createFocusOutlineStyle = void 0;
+
+var tslib_1 = /*#__PURE__*/require("tslib");
 
 var symbols_1 = /*#__PURE__*/require("../symbols");
+/**
+ * NOTE: the element with the focus outline needs to have `position: relative` so that the
+ * pseudo element can be properly positioned.
+ *
+ * @param options - Configures the style of the focus outline
+ * @returns focus outline styles object
+ */
+
 
-var defaultStyleRule = function (theme) {
+var getFocusOutlineStyles = function (options) {
+  var _a, _b, _c, _d;
+
+  var outlineRadius = options.outlineRadius,
+      outlineColor = options.outlineColor,
+      outlineOffset = options.outlineOffset,
+      outlineWidth = options.outlineWidth;
+  var outlineOffsetTop = ((_a = outlineOffset) === null || _a === void 0 ? void 0 : _a.top) || outlineOffset;
+  var outlineOffsetBottom = ((_b = outlineOffset) === null || _b === void 0 ? void 0 : _b.bottom) || outlineOffset;
+  var outlineOffsetLeft = ((_c = outlineOffset) === null || _c === void 0 ? void 0 : _c.left) || outlineOffset;
+  var outlineOffsetRight = ((_d = outlineOffset) === null || _d === void 0 ? void 0 : _d.right) || outlineOffset;
   return {
-    outline: "solid 1px " + theme.alias.color.neutral.neutralForeground1
+    borderColor: 'transparent',
+    ':after': {
+      content: '""',
+      position: 'absolute',
+      pointerEvents: 'none',
+      boxSizing: 'outline-box',
+      zIndex: 1,
+      borderStyle: 'solid',
+      borderWidth: outlineWidth,
+      borderRadius: outlineRadius,
+      borderColor: outlineColor,
+      top: !outlineOffset ? "-" + outlineWidth : "calc(0px - " + outlineWidth + " - " + outlineOffsetTop + ")",
+      bottom: !outlineOffset ? "-" + outlineWidth : "calc(0px - " + outlineWidth + " - " + outlineOffsetBottom + ")",
+      left: !outlineOffset ? "-" + outlineWidth : "calc(0px - " + outlineWidth + " - " + outlineOffsetLeft + ")",
+      right: !outlineOffset ? "-" + outlineWidth : "calc(0px - " + outlineWidth + " - " + outlineOffsetRight + ")"
+    }
   };
 };
 
 var defaultOptions = {
   selector: 'focus'
 };
+/**
+ * NOTE: The element with the focus outline needs to have `position: relative` so that the
+ * pseudo element can be properly positioned.
+ *
+ * @param theme - Theme used in @see makeStyles
+ * @param options - Configure the style of the focus outline
+ * @returns focus outline styles object for @see makeStyles
+ */
+
+var createFocusOutlineStyle = function (theme, options) {
+  var _a;
 
-var createFocusIndicatorStyleRule = function (rule, options) {
-  if (rule === void 0) {
-    rule = defaultStyleRule;
+  if (options === void 0) {
+    options = tslib_1.__assign({
+      style: {}
+    }, defaultOptions);
   }
 
+  return _a = {
+    ':focus-visible': {
+      outline: 'none'
+    }
+  }, _a[symbols_1.KEYBOARD_NAV_SELECTOR + " :" + (options.selector || defaultOptions.selector)] = getFocusOutlineStyles(tslib_1.__assign({
+    outlineColor: theme.colorStrokeFocus2,
+    outlineRadius: theme.borderRadiusMedium,
+    // FIXME: theme.global.strokeWidth.thick causes some weird bugs
+    outlineWidth: '2px'
+  }, options.style)), _a;
+};
+
+exports.createFocusOutlineStyle = createFocusOutlineStyle;
+/**
+ * Creates a style rule for @see makeStyles that includes the necessary selectors for focus.
+ * Should be used only when @see createFocusOutlineStyle does not fit requirements
+ *
+ * @param rule - styling applied on focus, defaults to @see getDefaultFocusOutlineStyes
+ */
+
+var createCustomFocusIndicatorStyle = function (rule, options) {
   if (options === void 0) {
     options = defaultOptions;
   }
@@ -37,5 +105,5 @@ var createFocusIndicatorStyleRule = function (rule, options) {
   };
 };
 
-exports.createFocusIndicatorStyleRule = createFocusIndicatorStyleRule;
+exports.createCustomFocusIndicatorStyle = createCustomFocusIndicatorStyle;
 //# sourceMappingURL=useFocusIndicatorStyle.js.map

package/lib-commonjs/hooks/useFocusIndicatorStyle.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/hooks/useFocusIndicatorStyle.ts"],"names":[],"mappings":";;;;;;;AAEA,IAAA,SAAA,gBAAA,OAAA,CAAA,YAAA,CAAA;;AAEA,IAAM,gBAAgB,GAAG,UAAC,KAAD,EAAa;AAAK,SAAC;AAC1C,IAAA,OAAO,EAAE,eAAa,KAAK,CAAC,KAAN,CAAY,KAAZ,CAAkB,OAAlB,CAA0B;AADN,GAAD;AAEzC,CAFF;;AAQA,IAAM,cAAc,GAAyC;AAC3D,EAAA,QAAQ,EAAE;AADiD,CAA7D;;AAIO,IAAM,6BAA6B,GAAG,UAC3C,IAD2C,EAE3C,OAF2C,EAEmB;AAD9D,MAAA,IAAA,KAAA,KAAA,CAAA,EAAA;AAAA,IAAA,IAAA,GAAA,gBAAA;AAAmD;;AACnD,MAAA,OAAA,KAAA,KAAA,CAAA,EAAA;AAAA,IAAA,OAAA,GAAA,cAAA;AAA8D;;AAC/B,SAAA,UAAA,KAAA,EAAK;;;AAAI,WAAA,EAAA,GAAA;AACxC,wBAAkB;AAChB,QAAA,OAAO,EAAE;AADO;AADsB,KAAA,EAIxC,EAAA,CAAI,SAAA,CAAA,qBAAA,GAAqB,IAArB,IAA0B,OAAO,CAAC,QAAR,IAAoB,cAAc,CAAC,QAA7D,CAAJ,CAAA,GACE,OAAO,IAAP,KAAgB,UAAhB,GAA6B,IAAI,CAAC,KAAD,CAAjC,GAA2C,IALL,EAMxC,EANwC;AAMxC,GAN+B;AAM/B,CATK;;AAAM,OAAA,CAAA,6BAAA,GAA6B,6BAA7B","sourceRoot":""}
+{"version":3,"sources":["../../src/hooks/useFocusIndicatorStyle.ts"],"names":[],"mappings":"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","sourceRoot":""}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-tabster",
-  "version": "9.0.0-alpha.68",
+  "version": "9.0.0-alpha.73",
   "description": "Utilities for focus management and facade for tabster",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -34,10 +34,10 @@
     "react-test-renderer": "^16.3.0"
   },
   "dependencies": {
-    "@fluentui/make-styles": "9.0.0-alpha.32",
-    "@fluentui/react-make-styles": "9.0.0-alpha.74",
-    "@fluentui/react-shared-contexts": "9.0.0-alpha.26",
-    "@fluentui/react-utilities": "9.0.0-alpha.53",
+    "@fluentui/make-styles": "9.0.0-alpha.35",
+    "@fluentui/react-make-styles": "9.0.0-alpha.78",
+    "@fluentui/react-shared-contexts": "9.0.0-alpha.28",
+    "@fluentui/react-utilities": "9.0.0-alpha.56",
     "keyborg": "^1.0.0",
     "tabster": "^1.0.0",
     "tslib": "^2.1.0"