@fluentui/react-tabster - npm Package Compare versions

Comparing version 9.0.0-alpha.53 to 9.0.0-alpha.54

CHANGELOG.json

@@ -5,3 +5,18 @@ {
     {
-      "date": "Tue, 24 Aug 2021 07:32:28 GMT",
+      "date": "Tue, 31 Aug 2021 07:34:22 GMT",
+      "tag": "@fluentui/react-tabster_v9.0.0-alpha.54",
+      "version": "9.0.0-alpha.54",
+      "comments": {
+        "prerelease": [
+          {
+            "comment": "Upgrading tabster.",
+            "author": "[e-mail]",
+            "commit": "4a7f81f3d92f128a672717eda660af3ba50ee71b",
+            "package": "@fluentui/react-tabster"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Tue, 24 Aug 2021 07:34:48 GMT",
       "tag": "@fluentui/react-tabster_v9.0.0-alpha.53",
@@ -8,0 +23,0 @@ "version": "9.0.0-alpha.53",

CHANGELOG.md

 # Change Log - @fluentui/react-tabster
 
-This log was last generated on Tue, 24 Aug 2021 07:32:28 GMT and should not be manually modified.
+This log was last generated on Tue, 31 Aug 2021 07:34:22 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.0.0-alpha.54](https://github.com/microsoft/fluentui/tree/@fluentui/react-tabster_v9.0.0-alpha.54)
+
+Tue, 31 Aug 2021 07:34:22 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tabster_v9.0.0-alpha.53..@fluentui/react-tabster_v9.0.0-alpha.54)
+
+### Changes
+
+- Upgrading tabster. ([PR #19534](https://github.com/microsoft/fluentui/pull/19534) by [e-mail])
+
 ## [9.0.0-alpha.53](https://github.com/microsoft/fluentui/tree/@fluentui/react-tabster_v9.0.0-alpha.53)
 
-Tue, 24 Aug 2021 07:32:28 GMT 
+Tue, 24 Aug 2021 07:34:48 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tabster_v9.0.0-alpha.52..@fluentui/react-tabster_v9.0.0-alpha.53)
@@ -11,0 +20,0 @@

dist/react-tabster.d.ts

@@ -28,2 +28,7 @@ import type { MakeStylesStyleRule } from '@fluentui/make-styles';
     circular?: boolean;
+    /**
+     * Last focused element in the group will be remembered and focused (if still
+     * available) when tabbing from outside of the group
+     */
+    memorizeCurrent?: boolean;
 }
@@ -35,7 +40,7 @@
 export declare const useFocusFinders: () => {
-    findAllFocusable: (root: HTMLElement, matcher: (el: HTMLElement) => boolean) => HTMLElement[];
-    findFirstFocusable: (root: HTMLElement) => HTMLElement | null | undefined;
-    findLastFocusable: (root: HTMLElement) => HTMLElement | null | undefined;
-    findNextFocusable: (current: HTMLElement) => HTMLElement | null | undefined;
-    findPrevFocusable: (current: HTMLElement) => HTMLElement | null | undefined;
+    findAllFocusable: (container: HTMLElement, acceptCondition: (el: HTMLElement) => boolean) => HTMLElement[];
+    findFirstFocusable: (container: HTMLElement) => HTMLElement | null | undefined;
+    findLastFocusable: (container: HTMLElement) => HTMLElement | null | undefined;
+    findNextFocusable: (currentElement: HTMLElement) => HTMLElement | null | undefined;
+    findPrevFocusable: (currentElement: HTMLElement) => HTMLElement | null | undefined;
 };
@@ -42,0 +47,0 @@

lib-amd/hooks/useArrowNavigationGroup.d.ts

@@ -12,2 +12,7 @@ import { Types } from 'tabster';
     circular?: boolean;
+    /**
+     * Last focused element in the group will be remembered and focused (if still
+     * available) when tabbing from outside of the group
+     */
+    memorizeCurrent?: boolean;
 }
@@ -14,0 +19,0 @@ /**

lib-amd/hooks/useArrowNavigationGroup.js

@@ -1,2 +0,2 @@
-define(["require", "exports", "tabster", "./useTabsterAttributes"], function (require, exports, tabster_1, useTabsterAttributes_1) {
+define(["require", "exports", "tabster", "./useTabsterAttributes", "./useTabster"], function (require, exports, tabster_1, useTabsterAttributes_1, useTabster_1) {
     "use strict";
@@ -11,9 +11,11 @@ Object.defineProperty(exports, "__esModule", { value: true });
         var _a;
+        var tabster = useTabster_1.useTabster();
+        if (tabster) {
+            tabster_1.getMover(tabster);
+        }
         return useTabsterAttributes_1.useTabsterAttributes({
-            focusable: {
-                mover: {
-                    axis: axisToMoverAxis((_a = options === null || options === void 0 ? void 0 : options.axis) !== null && _a !== void 0 ? _a : 'vertical'),
-                    navigationType: tabster_1.Types.MoverKeys.Arrows,
-                    cyclic: !!(options === null || options === void 0 ? void 0 : options.circular),
-                },
+            mover: {
+                cyclic: !!(options === null || options === void 0 ? void 0 : options.circular),
+                direction: axisToMoverDirection((_a = options === null || options === void 0 ? void 0 : options.axis) !== null && _a !== void 0 ? _a : 'vertical'),
+                memorizeCurrent: options === null || options === void 0 ? void 0 : options.memorizeCurrent,
             },
@@ -23,9 +25,9 @@ });
     exports.useArrowNavigationGroup = useArrowNavigationGroup;
-    function axisToMoverAxis(axis) {
+    function axisToMoverDirection(axis) {
         switch (axis) {
             case 'horizontal':
-                return tabster_1.Types.MoverAxis.Horizontal;
+                return tabster_1.Types.MoverDirections.Horizontal;
             case 'vertical':
             default:
-                return tabster_1.Types.MoverAxis.Vertical;
+                return tabster_1.Types.MoverDirections.Vertical;
         }
@@ -32,0 +34,0 @@ }

lib-amd/hooks/useFocusFinders.d.ts

@@ -5,7 +5,7 @@ /**
 export declare const useFocusFinders: () => {
-    findAllFocusable: (root: HTMLElement, matcher: (el: HTMLElement) => boolean) => HTMLElement[];
-    findFirstFocusable: (root: HTMLElement) => HTMLElement | null | undefined;
-    findLastFocusable: (root: HTMLElement) => HTMLElement | null | undefined;
-    findNextFocusable: (current: HTMLElement) => HTMLElement | null | undefined;
-    findPrevFocusable: (current: HTMLElement) => HTMLElement | null | undefined;
+    findAllFocusable: (container: HTMLElement, acceptCondition: (el: HTMLElement) => boolean) => HTMLElement[];
+    findFirstFocusable: (container: HTMLElement) => HTMLElement | null | undefined;
+    findLastFocusable: (container: HTMLElement) => HTMLElement | null | undefined;
+    findNextFocusable: (currentElement: HTMLElement) => HTMLElement | null | undefined;
+    findPrevFocusable: (currentElement: HTMLElement) => HTMLElement | null | undefined;
 };

lib-amd/hooks/useFocusFinders.js

@@ -11,11 +11,11 @@ define(["require", "exports", "react", "./useTabster"], function (require, exports, React, useTabster_1) {
         // Narrow props for now and let need dictate additional props in the future
-        var findAllFocusable = React.useCallback(function (root, matcher) { return (tabster === null || tabster === void 0 ? void 0 : tabster.focusable.findAll(root, matcher)) || []; }, [tabster]);
-        var findFirstFocusable = React.useCallback(function (root) { return tabster === null || tabster === void 0 ? void 0 : tabster.focusable.findFirst(root); }, [tabster]);
-        var findLastFocusable = React.useCallback(function (root) { return tabster === null || tabster === void 0 ? void 0 : tabster.focusable.findLast(root); }, [tabster]);
-        var findNextFocusable = React.useCallback(function (current) { return tabster === null || tabster === void 0 ? void 0 : tabster.focusable.findNext(current); }, [
+        var findAllFocusable = React.useCallback(function (container, acceptCondition) {
+            return (tabster === null || tabster === void 0 ? void 0 : tabster.focusable.findAll({ container: container, acceptCondition: acceptCondition })) || [];
+        }, [tabster]);
+        var findFirstFocusable = React.useCallback(function (container) { return tabster === null || tabster === void 0 ? void 0 : tabster.focusable.findFirst({ container: container }); }, [tabster]);
+        var findLastFocusable = React.useCallback(function (container) { return tabster === null || tabster === void 0 ? void 0 : tabster.focusable.findLast({ container: container }); }, [
             tabster,
         ]);
-        var findPrevFocusable = React.useCallback(function (current) { return tabster === null || tabster === void 0 ? void 0 : tabster.focusable.findPrev(current); }, [
-            tabster,
-        ]);
+        var findNextFocusable = React.useCallback(function (currentElement) { return tabster === null || tabster === void 0 ? void 0 : tabster.focusable.findNext({ currentElement: currentElement }); }, [tabster]);
+        var findPrevFocusable = React.useCallback(function (currentElement) { return tabster === null || tabster === void 0 ? void 0 : tabster.focusable.findPrev({ currentElement: currentElement }); }, [tabster]);
         return {
@@ -22,0 +22,0 @@ findAllFocusable: findAllFocusable,

lib-amd/hooks/useTabsterAttributes.js

@@ -12,3 +12,3 @@ define(["require", "exports", "tabster", "./useTabster"], function (require, exports, tabster_1, useTabster_1) {
         useTabster_1.useTabster();
-        return tabster_1.getTabsterAttribute(props, false);
+        return tabster_1.getTabsterAttribute(props);
     };
@@ -15,0 +15,0 @@ exports.useTabsterAttributes = useTabsterAttributes;

lib-commonjs/hooks/useArrowNavigationGroup.d.ts

@@ -12,2 +12,7 @@ import { Types } from 'tabster';
     circular?: boolean;
+    /**
+     * Last focused element in the group will be remembered and focused (if still
+     * available) when tabbing from outside of the group
+     */
+    memorizeCurrent?: boolean;
 }
@@ -14,0 +19,0 @@ /**

lib-commonjs/hooks/useArrowNavigationGroup.js

@@ -11,2 +11,4 @@ "use strict";
 var useTabsterAttributes_1 = /*#__PURE__*/require("./useTabsterAttributes");
+
+var useTabster_1 = /*#__PURE__*/require("./useTabster");
 /**
@@ -21,9 +23,13 @@ * A hook that returns the necessary tabster attributes to support arrow key navigation
 
+  var tabster = useTabster_1.useTabster();
+
+  if (tabster) {
+    tabster_1.getMover(tabster);
+  }
+
   return useTabsterAttributes_1.useTabsterAttributes({
-    focusable: {
-      mover: {
-        axis: axisToMoverAxis((_a = options === null || options === void 0 ? void 0 : options.axis) !== null && _a !== void 0 ? _a : 'vertical'),
-        navigationType: tabster_1.Types.MoverKeys.Arrows,
-        cyclic: !!(options === null || options === void 0 ? void 0 : options.circular)
-      }
+    mover: {
+      cyclic: !!(options === null || options === void 0 ? void 0 : options.circular),
+      direction: axisToMoverDirection((_a = options === null || options === void 0 ? void 0 : options.axis) !== null && _a !== void 0 ? _a : 'vertical'),
+      memorizeCurrent: options === null || options === void 0 ? void 0 : options.memorizeCurrent
     }
@@ -35,12 +41,12 @@ });
 
-function axisToMoverAxis(axis) {
+function axisToMoverDirection(axis) {
   switch (axis) {
     case 'horizontal':
-      return tabster_1.Types.MoverAxis.Horizontal;
+      return tabster_1.Types.MoverDirections.Horizontal;
 
     case 'vertical':
     default:
-      return tabster_1.Types.MoverAxis.Vertical;
+      return tabster_1.Types.MoverDirections.Vertical;
   }
 }
 //# sourceMappingURL=useArrowNavigationGroup.js.map

lib-commonjs/hooks/useFocusFinders.d.ts

@@ -5,7 +5,7 @@ /**
 export declare const useFocusFinders: () => {
-    findAllFocusable: (root: HTMLElement, matcher: (el: HTMLElement) => boolean) => HTMLElement[];
-    findFirstFocusable: (root: HTMLElement) => HTMLElement | null | undefined;
-    findLastFocusable: (root: HTMLElement) => HTMLElement | null | undefined;
-    findNextFocusable: (current: HTMLElement) => HTMLElement | null | undefined;
-    findPrevFocusable: (current: HTMLElement) => HTMLElement | null | undefined;
+    findAllFocusable: (container: HTMLElement, acceptCondition: (el: HTMLElement) => boolean) => HTMLElement[];
+    findFirstFocusable: (container: HTMLElement) => HTMLElement | null | undefined;
+    findLastFocusable: (container: HTMLElement) => HTMLElement | null | undefined;
+    findNextFocusable: (currentElement: HTMLElement) => HTMLElement | null | undefined;
+    findPrevFocusable: (currentElement: HTMLElement) => HTMLElement | null | undefined;
 };

lib-commonjs/hooks/useFocusFinders.js

@@ -19,16 +19,27 @@ "use strict";
 
-  var findAllFocusable = React.useCallback(function (root, matcher) {
-    return (tabster === null || tabster === void 0 ? void 0 : tabster.focusable.findAll(root, matcher)) || [];
+  var findAllFocusable = React.useCallback(function (container, acceptCondition) {
+    return (tabster === null || tabster === void 0 ? void 0 : tabster.focusable.findAll({
+      container: container,
+      acceptCondition: acceptCondition
+    })) || [];
   }, [tabster]);
-  var findFirstFocusable = React.useCallback(function (root) {
-    return tabster === null || tabster === void 0 ? void 0 : tabster.focusable.findFirst(root);
+  var findFirstFocusable = React.useCallback(function (container) {
+    return tabster === null || tabster === void 0 ? void 0 : tabster.focusable.findFirst({
+      container: container
+    });
   }, [tabster]);
-  var findLastFocusable = React.useCallback(function (root) {
-    return tabster === null || tabster === void 0 ? void 0 : tabster.focusable.findLast(root);
+  var findLastFocusable = React.useCallback(function (container) {
+    return tabster === null || tabster === void 0 ? void 0 : tabster.focusable.findLast({
+      container: container
+    });
   }, [tabster]);
-  var findNextFocusable = React.useCallback(function (current) {
-    return tabster === null || tabster === void 0 ? void 0 : tabster.focusable.findNext(current);
+  var findNextFocusable = React.useCallback(function (currentElement) {
+    return tabster === null || tabster === void 0 ? void 0 : tabster.focusable.findNext({
+      currentElement: currentElement
+    });
   }, [tabster]);
-  var findPrevFocusable = React.useCallback(function (current) {
-    return tabster === null || tabster === void 0 ? void 0 : tabster.focusable.findPrev(current);
+  var findPrevFocusable = React.useCallback(function (currentElement) {
+    return tabster === null || tabster === void 0 ? void 0 : tabster.focusable.findPrev({
+      currentElement: currentElement
+    });
   }, [tabster]);
@@ -35,0 +46,0 @@ return {

lib-commonjs/hooks/useTabsterAttributes.js

@@ -20,3 +20,3 @@ "use strict";
   useTabster_1.useTabster();
-  return tabster_1.getTabsterAttribute(props, false);
+  return tabster_1.getTabsterAttribute(props);
 };
@@ -23,0 +23,0 @@

lib/hooks/useArrowNavigationGroup.d.ts

@@ -12,2 +12,7 @@ import { Types } from 'tabster';
     circular?: boolean;
+    /**
+     * Last focused element in the group will be remembered and focused (if still
+     * available) when tabbing from outside of the group
+     */
+    memorizeCurrent?: boolean;
 }
@@ -14,0 +19,0 @@ /**

lib/hooks/useArrowNavigationGroup.js

@@ -1,3 +0,4 @@
-import { Types } from 'tabster';
+import { Types, getMover } from 'tabster';
 import { useTabsterAttributes } from './useTabsterAttributes';
+import { useTabster } from './useTabster';
 /**
@@ -11,9 +12,13 @@ * A hook that returns the necessary tabster attributes to support arrow key navigation
 
+  var tabster = useTabster();
+
+  if (tabster) {
+    getMover(tabster);
+  }
+
   return useTabsterAttributes({
-    focusable: {
-      mover: {
-        axis: axisToMoverAxis((_a = options === null || options === void 0 ? void 0 : options.axis) !== null && _a !== void 0 ? _a : 'vertical'),
-        navigationType: Types.MoverKeys.Arrows,
-        cyclic: !!(options === null || options === void 0 ? void 0 : options.circular)
-      }
+    mover: {
+      cyclic: !!(options === null || options === void 0 ? void 0 : options.circular),
+      direction: axisToMoverDirection((_a = options === null || options === void 0 ? void 0 : options.axis) !== null && _a !== void 0 ? _a : 'vertical'),
+      memorizeCurrent: options === null || options === void 0 ? void 0 : options.memorizeCurrent
     }
@@ -23,12 +28,12 @@ });
 
-function axisToMoverAxis(axis) {
+function axisToMoverDirection(axis) {
   switch (axis) {
     case 'horizontal':
-      return Types.MoverAxis.Horizontal;
+      return Types.MoverDirections.Horizontal;
 
     case 'vertical':
     default:
-      return Types.MoverAxis.Vertical;
+      return Types.MoverDirections.Vertical;
   }
 }
 //# sourceMappingURL=useArrowNavigationGroup.js.map

lib/hooks/useFocusFinders.d.ts

@@ -5,7 +5,7 @@ /**
 export declare const useFocusFinders: () => {
-    findAllFocusable: (root: HTMLElement, matcher: (el: HTMLElement) => boolean) => HTMLElement[];
-    findFirstFocusable: (root: HTMLElement) => HTMLElement | null | undefined;
-    findLastFocusable: (root: HTMLElement) => HTMLElement | null | undefined;
-    findNextFocusable: (current: HTMLElement) => HTMLElement | null | undefined;
-    findPrevFocusable: (current: HTMLElement) => HTMLElement | null | undefined;
+    findAllFocusable: (container: HTMLElement, acceptCondition: (el: HTMLElement) => boolean) => HTMLElement[];
+    findFirstFocusable: (container: HTMLElement) => HTMLElement | null | undefined;
+    findLastFocusable: (container: HTMLElement) => HTMLElement | null | undefined;
+    findNextFocusable: (currentElement: HTMLElement) => HTMLElement | null | undefined;
+    findPrevFocusable: (currentElement: HTMLElement) => HTMLElement | null | undefined;
 };

lib/hooks/useFocusFinders.js

@@ -10,16 +10,27 @@ import * as React from 'react';
 
-  var findAllFocusable = React.useCallback(function (root, matcher) {
-    return (tabster === null || tabster === void 0 ? void 0 : tabster.focusable.findAll(root, matcher)) || [];
+  var findAllFocusable = React.useCallback(function (container, acceptCondition) {
+    return (tabster === null || tabster === void 0 ? void 0 : tabster.focusable.findAll({
+      container: container,
+      acceptCondition: acceptCondition
+    })) || [];
   }, [tabster]);
-  var findFirstFocusable = React.useCallback(function (root) {
-    return tabster === null || tabster === void 0 ? void 0 : tabster.focusable.findFirst(root);
+  var findFirstFocusable = React.useCallback(function (container) {
+    return tabster === null || tabster === void 0 ? void 0 : tabster.focusable.findFirst({
+      container: container
+    });
   }, [tabster]);
-  var findLastFocusable = React.useCallback(function (root) {
-    return tabster === null || tabster === void 0 ? void 0 : tabster.focusable.findLast(root);
+  var findLastFocusable = React.useCallback(function (container) {
+    return tabster === null || tabster === void 0 ? void 0 : tabster.focusable.findLast({
+      container: container
+    });
   }, [tabster]);
-  var findNextFocusable = React.useCallback(function (current) {
-    return tabster === null || tabster === void 0 ? void 0 : tabster.focusable.findNext(current);
+  var findNextFocusable = React.useCallback(function (currentElement) {
+    return tabster === null || tabster === void 0 ? void 0 : tabster.focusable.findNext({
+      currentElement: currentElement
+    });
   }, [tabster]);
-  var findPrevFocusable = React.useCallback(function (current) {
-    return tabster === null || tabster === void 0 ? void 0 : tabster.focusable.findPrev(current);
+  var findPrevFocusable = React.useCallback(function (currentElement) {
+    return tabster === null || tabster === void 0 ? void 0 : tabster.focusable.findPrev({
+      currentElement: currentElement
+    });
   }, [tabster]);
@@ -26,0 +37,0 @@ return {

lib/hooks/useTabsterAttributes.js

@@ -11,4 +11,4 @@ import { getTabsterAttribute } from 'tabster';
   useTabster();
-  return getTabsterAttribute(props, false);
+  return getTabsterAttribute(props);
 };
 //# sourceMappingURL=useTabsterAttributes.js.map

package.json

 {
   "name": "@fluentui/react-tabster",
-  "version": "9.0.0-alpha.53",
+  "version": "9.0.0-alpha.54",
   "description": "Utilities for focus management and facade for tabster",
@@ -38,7 +38,7 @@ "main": "lib-commonjs/index.js",
     "@fluentui/make-styles": "^9.0.0-alpha.31",
-    "@fluentui/react-make-styles": "^9.0.0-alpha.59",
-    "keyborg": "^0.7.1",
+    "@fluentui/react-make-styles": "^9.0.0-alpha.60",
     "@fluentui/react-shared-contexts": "^9.0.0-alpha.23",
-    "@fluentui/react-utilities": "^9.0.0-alpha.41",
-    "tabster": "^0.7.4",
+    "@fluentui/react-utilities": "^9.0.0-alpha.42",
+    "keyborg": "^1.0.0",
+    "tabster": "^1.0.0",
     "tslib": "^2.1.0"
@@ -45,0 +45,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

Improved metrics

Total package byte prevSize

164823

increased by3.1%

Lines of code

2297

increased by2.91%

Dependency changes

• + Addedkeyborg@1.2.1(transitive)

• + Addedtabster@1.5.4(transitive)

• - Removedkeyborg@0.7.1(transitive)

• - Removedtabster@0.7.4(transitive)

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

• Updated@fluentui/react-utilities@^9.0.0-alpha.42

• Updatedkeyborg@^1.0.0

• Updatedtabster@^1.0.0