@fluentui/react-tabster - npm Package Compare versions

Comparing version 9.0.0-alpha.30 to 9.0.0-alpha.31

CHANGELOG.json

@@ -5,3 +5,32 @@ {
     {
-      "date": "Tue, 01 Jun 2021 07:31:34 GMT",
+      "date": "Thu, 03 Jun 2021 07:34:06 GMT",
+      "tag": "@fluentui/react-tabster_v9.0.0-alpha.31",
+      "version": "9.0.0-alpha.31",
+      "comments": {
+        "prerelease": [
+          {
+            "comment": "Updates focus indicator mechanism",
+            "author": "[e-mail]",
+            "commit": "6023d6aef577ca095b4618c1aea2638e613a7ebd",
+            "package": "@fluentui/react-tabster"
+          }
+        ],
+        "none": [
+          {
+            "comment": "Bump @fluentui/react-make-styles to v9.0.0-alpha.39",
+            "author": "[e-mail]",
+            "commit": "01f798f6ac6b7b0e4c968e34a0c3f0e692aa3d43",
+            "package": "@fluentui/react-tabster"
+          },
+          {
+            "comment": "Bump @fluentui/react-utilities to v9.0.0-alpha.26",
+            "author": "[e-mail]",
+            "commit": "01f798f6ac6b7b0e4c968e34a0c3f0e692aa3d43",
+            "package": "@fluentui/react-tabster"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Tue, 01 Jun 2021 07:31:58 GMT",
       "tag": "@fluentui/react-tabster_v9.0.0-alpha.30",
@@ -8,0 +37,0 @@ "version": "9.0.0-alpha.30",

CHANGELOG.md

 # Change Log - @fluentui/react-tabster
 
-This log was last generated on Tue, 01 Jun 2021 07:31:34 GMT and should not be manually modified.
+This log was last generated on Thu, 03 Jun 2021 07:34:06 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.0.0-alpha.31](https://github.com/microsoft/fluentui/tree/@fluentui/react-tabster_v9.0.0-alpha.31)
+
+Thu, 03 Jun 2021 07:34:06 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tabster_v9.0.0-alpha.30..@fluentui/react-tabster_v9.0.0-alpha.31)
+
+### Changes
+
+- Updates focus indicator mechanism ([PR #18417](https://github.com/microsoft/fluentui/pull/18417) by [e-mail])
+
 ## [9.0.0-alpha.30](https://github.com/microsoft/fluentui/tree/@fluentui/react-tabster_v9.0.0-alpha.30)
 
-Tue, 01 Jun 2021 07:31:34 GMT 
+Tue, 01 Jun 2021 07:31:58 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tabster_v9.0.0-alpha.29..@fluentui/react-tabster_v9.0.0-alpha.30)
@@ -11,0 +20,0 @@

dist/react-tabster.d.ts

@@ -1,7 +0,7 @@
-import { MakeStylesStyleRule } from '@fluentui/make-styles';
+import type { MakeStylesStyleRule } from '@fluentui/make-styles';
 import { RefObject } from 'react';
-import { Theme } from '@fluentui/react-theme';
+import type { Theme } from '@fluentui/react-theme';
 import { Types } from 'tabster';
 
-export declare const makeFocusIndicatorStyle: (rule: MakeStylesStyleRule<Theme>) => () => string;
+export declare const createFocusIndicatorStyleRule: (rule?: MakeStylesStyleRule<Theme>) => MakeStylesStyleRule<Theme>;
 
@@ -36,8 +36,2 @@ /**
 /**
- * Returns className for focus indicator if user is using keyboard navigation
- * otherwise returns an empty string
- */
-export declare const useFocusIndicatorStyle: () => string;
-
-/**
  * instantiates keyborg and add attribute to ensure focus indicator synced to keyborg logic
@@ -44,0 +38,0 @@ */

etc/react-tabster.api.md

@@ -7,9 +7,9 @@ ## API Report File for "@fluentui/react-tabster"
 
-import { MakeStylesStyleRule } from '@fluentui/make-styles';
+import type { MakeStylesStyleRule } from '@fluentui/make-styles';
 import { RefObject } from 'react';
-import { Theme } from '@fluentui/react-theme';
+import type { Theme } from '@fluentui/react-theme';
 import { Types } from 'tabster';
 
 // @public (undocumented)
-export const makeFocusIndicatorStyle: (rule: MakeStylesStyleRule<Theme>) => () => string;
+export const createFocusIndicatorStyleRule: (rule?: MakeStylesStyleRule<Theme>) => MakeStylesStyleRule<Theme>;
 
@@ -33,5 +33,2 @@ // @public
 // @public
-export const useFocusIndicatorStyle: () => string;
-
-// @public
 export function useKeyboardNavAttribute<E extends HTMLElement>(): RefObject<E>;
@@ -38,0 +35,0 @@

lib-amd/hooks/useFocusIndicatorStyle.d.ts

@@ -1,8 +0,3 @@
-import { Theme } from '@fluentui/react-theme';
-import { MakeStylesStyleRule } from '@fluentui/make-styles';
-export declare const makeFocusIndicatorStyle: (rule: MakeStylesStyleRule<Theme>) => () => string;
-/**
- * Returns className for focus indicator if user is using keyboard navigation
- * otherwise returns an empty string
- */
-export declare const useFocusIndicatorStyle: () => string;
+import type { Theme } from '@fluentui/react-theme';
+import type { MakeStylesStyleRule } from '@fluentui/make-styles';
+export declare const createFocusIndicatorStyleRule: (rule?: MakeStylesStyleRule<Theme>) => MakeStylesStyleRule<Theme>;

lib-amd/hooks/useFocusIndicatorStyle.js

@@ -1,29 +0,23 @@
-define(["require", "exports", "@fluentui/react-make-styles", "../symbols"], function (require, exports, react_make_styles_1, symbols_1) {
+define(["require", "exports", "../symbols"], function (require, exports, symbols_1) {
     "use strict";
     Object.defineProperty(exports, "__esModule", { value: true });
-    exports.useFocusIndicatorStyle = exports.makeFocusIndicatorStyle = void 0;
-    var makeFocusIndicatorStyle = function (rule) {
-        var useStyles = react_make_styles_1.makeStyles({
-            focus: function (theme) {
-                var _a;
-                return (_a = {
-                        ':focus-visible': {
-                            outline: 'none',
-                        }
-                    },
-                    _a[symbols_1.KEYBOARD_NAV_SELECTOR] = typeof rule === 'function' ? rule(theme) : rule,
-                    _a);
-            },
-        });
-        return function () { return useStyles().focus; };
+    exports.createFocusIndicatorStyleRule = void 0;
+    var defaultStyleRule = function (theme) { return ({
+        outline: "solid 1px " + theme.alias.color.neutral.neutralForeground1,
+    }); };
+    var createFocusIndicatorStyleRule = function (rule) {
+        if (rule === void 0) { rule = defaultStyleRule; }
+        return function (theme) {
+            var _a;
+            return (_a = {
+                    ':focus-visible': {
+                        outline: 'none',
+                    }
+                },
+                _a[symbols_1.KEYBOARD_NAV_SELECTOR] = typeof rule === 'function' ? rule(theme) : rule,
+                _a);
+        };
     };
-    exports.makeFocusIndicatorStyle = makeFocusIndicatorStyle;
-    /**
-     * Returns className for focus indicator if user is using keyboard navigation
-     * otherwise returns an empty string
-     */
-    exports.useFocusIndicatorStyle = exports.makeFocusIndicatorStyle(function (theme) { return ({
-        outline: "solid 1px " + theme.alias.color.neutral.neutralForeground1,
-    }); });
+    exports.createFocusIndicatorStyleRule = createFocusIndicatorStyleRule;
 });
 //# sourceMappingURL=useFocusIndicatorStyle.js.map

lib-commonjs/hooks/useFocusIndicatorStyle.d.ts

@@ -1,8 +0,3 @@
-import { Theme } from '@fluentui/react-theme';
-import { MakeStylesStyleRule } from '@fluentui/make-styles';
-export declare const makeFocusIndicatorStyle: (rule: MakeStylesStyleRule<Theme>) => () => string;
-/**
- * Returns className for focus indicator if user is using keyboard navigation
- * otherwise returns an empty string
- */
-export declare const useFocusIndicatorStyle: () => string;
+import type { Theme } from '@fluentui/react-theme';
+import type { MakeStylesStyleRule } from '@fluentui/make-styles';
+export declare const createFocusIndicatorStyleRule: (rule?: MakeStylesStyleRule<Theme>) => MakeStylesStyleRule<Theme>;

lib-commonjs/hooks/useFocusIndicatorStyle.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useFocusIndicatorStyle = exports.makeFocusIndicatorStyle = void 0;
-var react_make_styles_1 = require("@fluentui/react-make-styles");
+exports.createFocusIndicatorStyleRule = void 0;
 var symbols_1 = require("../symbols");
-var makeFocusIndicatorStyle = function (rule) {
-    var useStyles = react_make_styles_1.makeStyles({
-        focus: function (theme) {
-            var _a;
-            return (_a = {
-                    ':focus-visible': {
-                        outline: 'none',
-                    }
-                },
-                _a[symbols_1.KEYBOARD_NAV_SELECTOR] = typeof rule === 'function' ? rule(theme) : rule,
-                _a);
-        },
-    });
-    return function () { return useStyles().focus; };
+var defaultStyleRule = function (theme) { return ({
+    outline: "solid 1px " + theme.alias.color.neutral.neutralForeground1,
+}); };
+var createFocusIndicatorStyleRule = function (rule) {
+    if (rule === void 0) { rule = defaultStyleRule; }
+    return function (theme) {
+        var _a;
+        return (_a = {
+                ':focus-visible': {
+                    outline: 'none',
+                }
+            },
+            _a[symbols_1.KEYBOARD_NAV_SELECTOR] = typeof rule === 'function' ? rule(theme) : rule,
+            _a);
+    };
 };
-exports.makeFocusIndicatorStyle = makeFocusIndicatorStyle;
-/**
- * Returns className for focus indicator if user is using keyboard navigation
- * otherwise returns an empty string
- */
-exports.useFocusIndicatorStyle = exports.makeFocusIndicatorStyle(function (theme) { return ({
-    outline: "solid 1px " + theme.alias.color.neutral.neutralForeground1,
-}); });
+exports.createFocusIndicatorStyleRule = createFocusIndicatorStyleRule;
 //# sourceMappingURL=useFocusIndicatorStyle.js.map

lib/hooks/useFocusIndicatorStyle.d.ts

@@ -1,8 +0,3 @@
-import { Theme } from '@fluentui/react-theme';
-import { MakeStylesStyleRule } from '@fluentui/make-styles';
-export declare const makeFocusIndicatorStyle: (rule: MakeStylesStyleRule<Theme>) => () => string;
-/**
- * Returns className for focus indicator if user is using keyboard navigation
- * otherwise returns an empty string
- */
-export declare const useFocusIndicatorStyle: () => string;
+import type { Theme } from '@fluentui/react-theme';
+import type { MakeStylesStyleRule } from '@fluentui/make-styles';
+export declare const createFocusIndicatorStyleRule: (rule?: MakeStylesStyleRule<Theme>) => MakeStylesStyleRule<Theme>;

lib/hooks/useFocusIndicatorStyle.js

@@ -1,25 +0,18 @@
-import { makeStyles } from '@fluentui/react-make-styles';
 import { KEYBOARD_NAV_SELECTOR } from '../symbols';
-export var makeFocusIndicatorStyle = function (rule) {
-    var useStyles = makeStyles({
-        focus: function (theme) {
-            var _a;
-            return (_a = {
-                    ':focus-visible': {
-                        outline: 'none',
-                    }
-                },
-                _a[KEYBOARD_NAV_SELECTOR] = typeof rule === 'function' ? rule(theme) : rule,
-                _a);
-        },
-    });
-    return function () { return useStyles().focus; };
+var defaultStyleRule = function (theme) { return ({
+    outline: "solid 1px " + theme.alias.color.neutral.neutralForeground1,
+}); };
+export var createFocusIndicatorStyleRule = function (rule) {
+    if (rule === void 0) { rule = defaultStyleRule; }
+    return function (theme) {
+        var _a;
+        return (_a = {
+                ':focus-visible': {
+                    outline: 'none',
+                }
+            },
+            _a[KEYBOARD_NAV_SELECTOR] = typeof rule === 'function' ? rule(theme) : rule,
+            _a);
+    };
 };
-/**
- * Returns className for focus indicator if user is using keyboard navigation
- * otherwise returns an empty string
- */
-export var useFocusIndicatorStyle = makeFocusIndicatorStyle(function (theme) { return ({
-    outline: "solid 1px " + theme.alias.color.neutral.neutralForeground1,
-}); });
 //# sourceMappingURL=useFocusIndicatorStyle.js.map

package.json

 {
   "name": "@fluentui/react-tabster",
-  "version": "9.0.0-alpha.30",
+  "version": "9.0.0-alpha.31",
   "description": "Utilities for focus management and facade for tabster",
@@ -37,5 +37,5 @@ "main": "lib-commonjs/index.js",
     "@fluentui/make-styles": "^9.0.0-alpha.24",
-    "@fluentui/react-make-styles": "^9.0.0-alpha.38",
+    "@fluentui/react-make-styles": "^9.0.0-alpha.39",
     "keyborg": "^0.7.0-alpha.1",
-    "@fluentui/react-shared-contexts": "^9.0.0-alpha.12",
+    "@fluentui/react-shared-contexts": "^9.0.0-alpha.13",
     "@fluentui/react-utilities": "^9.0.0-alpha.26",
@@ -42,0 +42,0 @@ "tabster": "0.7.0",

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

Worsened metrics

Total package byte prevSize

130290

decreased by-1.02%

Lines of code

1683

decreased by-0.65%

Dependency changes

• Updated@fluentui/react-make-styles@^9.0.0-alpha.39

• Updated@fluentui/react-shared-contexts@^9.0.0-alpha.13