@fluentui/react-tabster - npm Package Compare versions

Comparing version 9.0.0-alpha.68 to 9.0.0-alpha.69

CHANGELOG.json

@@ -5,3 +5,18 @@ {
     {
-      "date": "Wed, 29 Sep 2021 08:05:12 GMT",
+      "date": "Fri, 01 Oct 2021 09:44:19 GMT",
+      "tag": "@fluentui/react-tabster_v9.0.0-alpha.69",
+      "version": "9.0.0-alpha.69",
+      "comments": {
+        "prerelease": [
+          {
+            "author": "[e-mail]",
+            "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",
@@ -8,0 +23,0 @@ "version": "9.0.0-alpha.68",

CHANGELOG.md

 # 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 Fri, 01 Oct 2021 09:44:19 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [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:19 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 [e-mail])
+
 ## [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)
@@ -11,0 +20,0 @@

dist/react-tabster.d.ts

@@ -0,1 +1,2 @@
+import type { MakeStyles } from '@fluentui/make-styles';
 import type { MakeStylesStyleRule } from '@fluentui/make-styles';
@@ -6,3 +7,9 @@ import type { RefObject } from 'react';
 
-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>;
 
@@ -14,2 +21,27 @@ export declare interface CreateFocusIndicatorStyleRuleOptions {
 /**
+ * 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
@@ -16,0 +48,0 @@ * @param options - Options to configure keyboard navigation

lib-commonjs/hooks/useFocusIndicatorStyle.d.ts

 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>;

lib-commonjs/hooks/useFocusIndicatorStyle.js

@@ -6,9 +6,44 @@ "use strict";
 });
-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 + ")"
+    }
   };
@@ -20,8 +55,41 @@ };
 };
+/**
+ * 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 createFocusIndicatorStyleRule = function (rule, options) {
-  if (rule === void 0) {
-    rule = defaultStyleRule;
+var createFocusOutlineStyle = function (theme, options) {
+  var _a;
+
+  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.alias.color.neutral.strokeFocus2,
+    outlineRadius: theme.global.borderRadius.medium,
+    // 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) {
@@ -42,3 +110,3 @@ options = defaultOptions;
 
-exports.createFocusIndicatorStyleRule = createFocusIndicatorStyleRule;
+exports.createCustomFocusIndicatorStyle = createCustomFocusIndicatorStyle;
 //# sourceMappingURL=useFocusIndicatorStyle.js.map

lib/hooks/useFocusIndicatorStyle.d.ts

 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>;

lib/hooks/useFocusIndicatorStyle.js

@@ -0,6 +1,39 @@
+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 + ")"
+    }
   };
@@ -12,7 +45,39 @@ };
 };
-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.alias.color.neutral.strokeFocus2,
+    outlineRadius: theme.global.borderRadius.medium,
+    // 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) {
@@ -19,0 +84,0 @@ options = defaultOptions;

package.json

 {
   "name": "@fluentui/react-tabster",
-  "version": "9.0.0-alpha.68",
+  "version": "9.0.0-alpha.69",
   "description": "Utilities for focus management and facade for tabster",
@@ -5,0 +5,0 @@ "main": "lib-commonjs/index.js",

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

147772

increased by10.49%

Lines of code

2480

increased by9.88%

No dependency changes