@fluentui/react-tabster - npm Package Compare versions

Comparing version 0.0.0-nightly39ce3cbcf120211206.1 to 0.0.0-nightly3bc051736320220112.1

CHANGELOG.md

 # Change Log - @fluentui/react-tabster
 
-This log was last generated on Mon, 06 Dec 2021 04:16:55 GMT and should not be manually modified.
+This log was last generated on Wed, 12 Jan 2022 04:19:45 GMT and should not be manually modified.
 
 <!-- Start content -->
 
-## [0.0.0-nightly39ce3cbcf120211206.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-tabster_v0.0.0-nightly39ce3cbcf120211206.1)
+## [0.0.0-nightly3bc051736320220112.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-tabster_v0.0.0-nightly3bc051736320220112.1)
 
-Mon, 06 Dec 2021 04:16:55 GMT 
-[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tabster_v9.0.0-beta.5..@fluentui/react-tabster_v0.0.0-nightly39ce3cbcf120211206.1)
+Wed, 12 Jan 2022 04:19:45 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tabster_v9.0.0-beta.5..@fluentui/react-tabster_v0.0.0-nightly3bc051736320220112.1)
 
 ### Changes
 
-- Release nightly v9 ([commit](https://github.com/microsoft/fluentui/commit/f5d813357240886d3e3a5215ab8304bf1034298f) by email not defined)
+- Release nightly v9 ([commit](https://github.com/microsoft/fluentui/commit/480c16821614e08014fbc10b62ebbf1964c0058d) by email not defined)
+- feat: Support `options` for `findNextFocusable` and `findPrevFocusable` focus finders ([PR #21095](https://github.com/microsoft/fluentui/pull/21095) by [e-mail])
+- chore: Bump tabster and keyborg versions ([PR #20889](https://github.com/microsoft/fluentui/pull/20889) by [e-mail])
 - use new types from makeStyles core ([PR #20786](https://github.com/microsoft/fluentui/pull/20786) by [e-mail])
+- react-tabster: Replacing use of functions in makeStyles with direct use of tokens. ([PR #21035](https://github.com/microsoft/fluentui/pull/21035) by [e-mail])
 - update styles to not use CSS shorthands ([PR #20842](https://github.com/microsoft/fluentui/pull/20842) by [e-mail])
-- Bump @fluentui/react-make-styles to v0.0.0-nightly39ce3cbcf120211206.1 ([commit](https://github.com/microsoft/fluentui/commit/f5d813357240886d3e3a5215ab8304bf1034298f) by beachball)
-- Bump @fluentui/react-shared-contexts to v0.0.0-nightly39ce3cbcf120211206.1 ([commit](https://github.com/microsoft/fluentui/commit/f5d813357240886d3e3a5215ab8304bf1034298f) by beachball)
-- Bump @fluentui/react-utilities to v0.0.0-nightly39ce3cbcf120211206.1 ([commit](https://github.com/microsoft/fluentui/commit/f5d813357240886d3e3a5215ab8304bf1034298f) by beachball)
-- Bump @fluentui/babel-make-styles to v0.0.0-nightly39ce3cbcf120211206.1 ([commit](https://github.com/microsoft/fluentui/commit/f5d813357240886d3e3a5215ab8304bf1034298f) by beachball)
+- Bump @fluentui/react-make-styles to v0.0.0-nightly3bc051736320220112.1 ([commit](https://github.com/microsoft/fluentui/commit/480c16821614e08014fbc10b62ebbf1964c0058d) by beachball)
+- Bump @fluentui/react-shared-contexts to v0.0.0-nightly3bc051736320220112.1 ([commit](https://github.com/microsoft/fluentui/commit/480c16821614e08014fbc10b62ebbf1964c0058d) by beachball)
+- Bump @fluentui/react-utilities to v0.0.0-nightly3bc051736320220112.1 ([commit](https://github.com/microsoft/fluentui/commit/480c16821614e08014fbc10b62ebbf1964c0058d) by beachball)
+- Bump @fluentui/babel-make-styles to v0.0.0-nightly3bc051736320220112.1 ([commit](https://github.com/microsoft/fluentui/commit/480c16821614e08014fbc10b62ebbf1964c0058d) by beachball)
 
@@ -22,0 +25,0 @@ ## [9.0.0-beta.5](https://github.com/microsoft/fluentui/tree/@fluentui/react-tabster_v9.0.0-beta.5)

dist/react-tabster.d.ts

 import type { MakeStylesStyle } from '@fluentui/react-make-styles';
-import type { MakeStylesStyleRule } from '@fluentui/react-make-styles';
 import type { RefObject } from 'react';
-import type { Theme } from '@fluentui/react-theme';
 import { Types } from 'tabster';
 
 /**
- * Creates a style rule for @see makeStyles that includes the necessary selectors for focus.
+ * Creates a style 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
+ * @param style - styling applied on focus, defaults to @see getDefaultFocusOutlineStyes
  */
-export declare const createCustomFocusIndicatorStyle: (rule: MakeStylesStyleRule<Theme>, options?: CreateFocusIndicatorStyleRuleOptions) => MakeStylesStyleRule<Theme>;
+export declare const createCustomFocusIndicatorStyle: (style: MakeStylesStyle, options?: CreateFocusIndicatorStyleRuleOptions) => MakeStylesStyle;
 
@@ -27,3 +25,3 @@ export declare interface CreateFocusIndicatorStyleRuleOptions {
  */
-export declare const createFocusOutlineStyle: (theme: Theme, options?: {
+export declare const createFocusOutlineStyle: (options?: {
     style: Partial<FocusOutlineStyleOptions>;
@@ -88,4 +86,4 @@ } & CreateFocusIndicatorStyleRuleOptions) => MakeStylesStyle;
     findLastFocusable: (container: HTMLElement) => HTMLElement | null | undefined;
-    findNextFocusable: (currentElement: HTMLElement) => HTMLElement | null | undefined;
-    findPrevFocusable: (currentElement: HTMLElement) => HTMLElement | null | undefined;
+    findNextFocusable: (currentElement: HTMLElement, options?: Pick<Types.FindNextProps, 'container'>) => HTMLElement | null | undefined;
+    findPrevFocusable: (currentElement: HTMLElement, options?: Pick<Types.FindNextProps, 'container'>) => HTMLElement | null | undefined;
 };
@@ -92,0 +90,0 @@

lib-commonjs/hooks/useFocusFinders.d.ts

@@ -0,1 +1,2 @@
+import { Types as TabsterTypes } from 'tabster';
 /**
@@ -8,4 +9,4 @@ * Returns a set of helper functions that will traverse focusable elements in the context of a root DOM element
     findLastFocusable: (container: HTMLElement) => HTMLElement | null | undefined;
-    findNextFocusable: (currentElement: HTMLElement) => HTMLElement | null | undefined;
-    findPrevFocusable: (currentElement: HTMLElement) => HTMLElement | null | undefined;
+    findNextFocusable: (currentElement: HTMLElement, options?: Pick<TabsterTypes.FindNextProps, 'container'>) => HTMLElement | null | undefined;
+    findPrevFocusable: (currentElement: HTMLElement, options?: Pick<TabsterTypes.FindNextProps, 'container'>) => HTMLElement | null | undefined;
 };

lib-commonjs/hooks/useFocusFinders.js

@@ -29,7 +29,9 @@ "use strict";
   }), [tabster]);
-  const findNextFocusable = React.useCallback(currentElement => tabster === null || tabster === void 0 ? void 0 : tabster.focusable.findNext({
-    currentElement
+  const findNextFocusable = React.useCallback((currentElement, options = {}) => tabster === null || tabster === void 0 ? void 0 : tabster.focusable.findNext({
+    currentElement,
+    ...options
   }), [tabster]);
-  const findPrevFocusable = React.useCallback(currentElement => tabster === null || tabster === void 0 ? void 0 : tabster.focusable.findPrev({
-    currentElement
+  const findPrevFocusable = React.useCallback((currentElement, options = {}) => tabster === null || tabster === void 0 ? void 0 : tabster.focusable.findPrev({
+    currentElement,
+    ...options
   }), [tabster]);
@@ -36,0 +38,0 @@ return {

lib-commonjs/hooks/useFocusIndicatorStyle.d.ts

@@ -1,3 +0,2 @@
-import type { Theme } from '@fluentui/react-theme';
-import type { MakeStylesStyle, MakeStylesStyleRule } from '@fluentui/react-make-styles';
+import type { MakeStylesStyle } from '@fluentui/react-make-styles';
 export declare type FocusOutlineOffset = Record<'top' | 'bottom' | 'left' | 'right', string>;
@@ -25,11 +24,11 @@ export declare type FocusOutlineStyleOptions = {
  */
-export declare const createFocusOutlineStyle: (theme: Theme, options?: {
+export declare const createFocusOutlineStyle: (options?: {
     style: Partial<FocusOutlineStyleOptions>;
 } & CreateFocusIndicatorStyleRuleOptions) => MakeStylesStyle;
 /**
- * Creates a style rule for @see makeStyles that includes the necessary selectors for focus.
+ * Creates a style 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
+ * @param style - styling applied on focus, defaults to @see getDefaultFocusOutlineStyes
  */
-export declare const createCustomFocusIndicatorStyle: (rule: MakeStylesStyleRule<Theme>, options?: CreateFocusIndicatorStyleRuleOptions) => MakeStylesStyleRule<Theme>;
+export declare const createCustomFocusIndicatorStyle: (style: MakeStylesStyle, options?: CreateFocusIndicatorStyleRuleOptions) => MakeStylesStyle;

lib-commonjs/hooks/useFocusIndicatorStyle.js

@@ -8,2 +8,4 @@ "use strict";
 
+const react_theme_1 = /*#__PURE__*/require("@fluentui/react-theme");
+
 const symbols_1 = /*#__PURE__*/require("../symbols");
@@ -64,3 +66,3 @@ /**
 
-const createFocusOutlineStyle = (theme, options = {
+const createFocusOutlineStyle = (options = {
   style: {},
@@ -73,5 +75,5 @@ ...defaultOptions
   [`${symbols_1.KEYBOARD_NAV_SELECTOR} :${options.selector || defaultOptions.selector}`]: getFocusOutlineStyles({
-    outlineColor: theme.colorStrokeFocus2,
-    outlineRadius: theme.borderRadiusMedium,
-    // FIXME: theme.global.strokeWidth.thick causes some weird bugs
+    outlineColor: react_theme_1.tokens.colorStrokeFocus2,
+    outlineRadius: react_theme_1.tokens.borderRadiusMedium,
+    // FIXME: tokens.strokeWidthThick causes some weird bugs
     outlineWidth: '2px',
@@ -84,13 +86,13 @@ ...options.style
 /**
- * Creates a style rule for @see makeStyles that includes the necessary selectors for focus.
+ * Creates a style 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
+ * @param style - styling applied on focus, defaults to @see getDefaultFocusOutlineStyes
  */
 
-const createCustomFocusIndicatorStyle = (rule, options = defaultOptions) => theme => ({
+const createCustomFocusIndicatorStyle = (style, options = defaultOptions) => ({
   ':focus-visible': {
     outlineStyle: 'none'
   },
-  [`${symbols_1.KEYBOARD_NAV_SELECTOR} :${options.selector || defaultOptions.selector}`]: typeof rule === 'function' ? rule(theme) : rule
+  [`${symbols_1.KEYBOARD_NAV_SELECTOR} :${options.selector || defaultOptions.selector}`]: style
 });
@@ -97,0 +99,0 @@

lib/hooks/useFocusFinders.d.ts

@@ -0,1 +1,2 @@
+import { Types as TabsterTypes } from 'tabster';
 /**
@@ -8,4 +9,4 @@ * Returns a set of helper functions that will traverse focusable elements in the context of a root DOM element
     findLastFocusable: (container: HTMLElement) => HTMLElement | null | undefined;
-    findNextFocusable: (currentElement: HTMLElement) => HTMLElement | null | undefined;
-    findPrevFocusable: (currentElement: HTMLElement) => HTMLElement | null | undefined;
+    findNextFocusable: (currentElement: HTMLElement, options?: Pick<TabsterTypes.FindNextProps, 'container'>) => HTMLElement | null | undefined;
+    findPrevFocusable: (currentElement: HTMLElement, options?: Pick<TabsterTypes.FindNextProps, 'container'>) => HTMLElement | null | undefined;
 };

lib/hooks/useFocusFinders.js

@@ -20,7 +20,9 @@ import * as React from 'react';
   }), [tabster]);
-  const findNextFocusable = React.useCallback(currentElement => tabster === null || tabster === void 0 ? void 0 : tabster.focusable.findNext({
-    currentElement
+  const findNextFocusable = React.useCallback((currentElement, options = {}) => tabster === null || tabster === void 0 ? void 0 : tabster.focusable.findNext({
+    currentElement,
+    ...options
   }), [tabster]);
-  const findPrevFocusable = React.useCallback(currentElement => tabster === null || tabster === void 0 ? void 0 : tabster.focusable.findPrev({
-    currentElement
+  const findPrevFocusable = React.useCallback((currentElement, options = {}) => tabster === null || tabster === void 0 ? void 0 : tabster.focusable.findPrev({
+    currentElement,
+    ...options
   }), [tabster]);
@@ -27,0 +29,0 @@ return {

lib/hooks/useFocusIndicatorStyle.d.ts

@@ -1,3 +0,2 @@
-import type { Theme } from '@fluentui/react-theme';
-import type { MakeStylesStyle, MakeStylesStyleRule } from '@fluentui/react-make-styles';
+import type { MakeStylesStyle } from '@fluentui/react-make-styles';
 export declare type FocusOutlineOffset = Record<'top' | 'bottom' | 'left' | 'right', string>;
@@ -25,11 +24,11 @@ export declare type FocusOutlineStyleOptions = {
  */
-export declare const createFocusOutlineStyle: (theme: Theme, options?: {
+export declare const createFocusOutlineStyle: (options?: {
     style: Partial<FocusOutlineStyleOptions>;
 } & CreateFocusIndicatorStyleRuleOptions) => MakeStylesStyle;
 /**
- * Creates a style rule for @see makeStyles that includes the necessary selectors for focus.
+ * Creates a style 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
+ * @param style - styling applied on focus, defaults to @see getDefaultFocusOutlineStyes
  */
-export declare const createCustomFocusIndicatorStyle: (rule: MakeStylesStyleRule<Theme>, options?: CreateFocusIndicatorStyleRuleOptions) => MakeStylesStyleRule<Theme>;
+export declare const createCustomFocusIndicatorStyle: (style: MakeStylesStyle, options?: CreateFocusIndicatorStyleRuleOptions) => MakeStylesStyle;

lib/hooks/useFocusIndicatorStyle.js

@@ -0,1 +1,2 @@
+import { tokens } from '@fluentui/react-theme';
 import { KEYBOARD_NAV_SELECTOR } from '../symbols';
@@ -55,3 +56,3 @@ /**
 
-export const createFocusOutlineStyle = (theme, options = {
+export const createFocusOutlineStyle = (options = {
   style: {},
@@ -64,5 +65,5 @@ ...defaultOptions
   [`${KEYBOARD_NAV_SELECTOR} :${options.selector || defaultOptions.selector}`]: getFocusOutlineStyles({
-    outlineColor: theme.colorStrokeFocus2,
-    outlineRadius: theme.borderRadiusMedium,
-    // FIXME: theme.global.strokeWidth.thick causes some weird bugs
+    outlineColor: tokens.colorStrokeFocus2,
+    outlineRadius: tokens.borderRadiusMedium,
+    // FIXME: tokens.strokeWidthThick causes some weird bugs
     outlineWidth: '2px',
@@ -73,14 +74,14 @@ ...options.style
 /**
- * Creates a style rule for @see makeStyles that includes the necessary selectors for focus.
+ * Creates a style 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
+ * @param style - styling applied on focus, defaults to @see getDefaultFocusOutlineStyes
  */
 
-export const createCustomFocusIndicatorStyle = (rule, options = defaultOptions) => theme => ({
+export const createCustomFocusIndicatorStyle = (style, options = defaultOptions) => ({
   ':focus-visible': {
     outlineStyle: 'none'
   },
-  [`${KEYBOARD_NAV_SELECTOR} :${options.selector || defaultOptions.selector}`]: typeof rule === 'function' ? rule(theme) : rule
+  [`${KEYBOARD_NAV_SELECTOR} :${options.selector || defaultOptions.selector}`]: style
 });
 //# sourceMappingURL=useFocusIndicatorStyle.js.map

package.json

 {
   "name": "@fluentui/react-tabster",
-  "version": "0.0.0-nightly39ce3cbcf120211206.1",
+  "version": "0.0.0-nightly3bc051736320220112.1",
   "description": "Utilities for focus management and facade for tabster",
@@ -36,10 +36,10 @@ "main": "lib-commonjs/index.js",
     "react-test-renderer": "^16.3.0",
-    "@fluentui/babel-make-styles": "0.0.0-nightly39ce3cbcf120211206.1"
+    "@fluentui/babel-make-styles": "0.0.0-nightly3bc051736320220112.1"
   },
   "dependencies": {
-    "@fluentui/react-make-styles": "0.0.0-nightly39ce3cbcf120211206.1",
-    "@fluentui/react-shared-contexts": "0.0.0-nightly39ce3cbcf120211206.1",
-    "@fluentui/react-utilities": "0.0.0-nightly39ce3cbcf120211206.1",
-    "keyborg": "^1.0.7",
-    "tabster": "^1.0.7",
+    "@fluentui/react-make-styles": "0.0.0-nightly3bc051736320220112.1",
+    "@fluentui/react-shared-contexts": "0.0.0-nightly3bc051736320220112.1",
+    "@fluentui/react-utilities": "0.0.0-nightly3bc051736320220112.1",
+    "keyborg": "^1.1.0-alpha.4",
+    "tabster": "^1.1.0-alpha.4",
     "tslib": "^2.1.0"
@@ -46,0 +46,0 @@ },

No alert changes

Improved metrics

Total package byte prevSize

172004

increased by1.13%

Lines of code

2906

increased by0.97%

Worsened metrics

Published versions last months

8

decreased by-11.11%

Published versions last two months

32

decreased by-3.03%

Published versions last year

269

decreased by-0.37%

Dependency changes

• + Added@fluentui/keyboard-keys@0.0.0-nightly3bc051736320220112.1(transitive)

• + Added@fluentui/make-styles@0.0.0-nightly3bc051736320220112.1(transitive)

• + Added@fluentui/react-make-styles@0.0.0-nightly3bc051736320220112.1(transitive)

• + Added@fluentui/react-shared-contexts@0.0.0-nightly3bc051736320220112.1(transitive)

• + Added@fluentui/react-theme@0.0.0-nightly3bc051736320220112.1(transitive)

• + Added@fluentui/react-utilities@0.0.0-nightly3bc051736320220112.1(transitive)

• - Removed@fluentui/keyboard-keys@0.0.0-nightly39ce3cbcf120211206.1(transitive)

• - Removed@fluentui/make-styles@0.0.0-nightly39ce3cbcf120211206.1(transitive)

• - Removed@fluentui/react-make-styles@0.0.0-nightly39ce3cbcf120211206.1(transitive)

• - Removed@fluentui/react-shared-contexts@0.0.0-nightly39ce3cbcf120211206.1(transitive)

• - Removed@fluentui/react-theme@0.0.0-nightly39ce3cbcf120211206.1(transitive)

• - Removed@fluentui/react-utilities@0.0.0-nightly39ce3cbcf120211206.1(transitive)

• - Removedinline-style-expand-shorthand@1.6.0(transitive)

• Updated@fluentui/react-make-styles@0.0.0-nightly3bc051736320220112.1

• Updated@fluentui/react-shared-contexts@0.0.0-nightly3bc051736320220112.1

• Updated@fluentui/react-utilities@0.0.0-nightly3bc051736320220112.1

• Updatedkeyborg@^1.1.0-alpha.4

• Updatedtabster@^1.1.0-alpha.4