react-roving-tabindex - npm Package Compare versions

Comparing version 2.0.0-beta.2 to 2.0.0-beta.3

CHANGELOG.md

@@ -5,4 +5,9 @@ # Changelog
 
-This release is a complete rewrite to support a roving tabindex in a grid and a more flexible system for configuring keyboard navigation. It has three breaking changes compared to v1. Please see the project README file for the migration details.
+This release is a complete rewrite to support a roving tabindex in a grid and a more flexible system for configuring keyboard navigation. There are breaking changes compared to v1. Please see the project README file for the migration details.
 
+Other notable changes:
+
+- Removed array-find-index ponyfill dependency.
+- Removed lodash.uniqueid dependency.
+
 ## 1.0.0
@@ -9,0 +14,0 @@

dist/index.es.js

@@ -445,4 +445,13 @@ import React, { createContext, useReducer, useEffect, useMemo, useRef, useContext, useCallback, useLayoutEffect } from 'react';
  * the shape of the grid can change dynamically.
- * @returns {HookResponse} A tuple of values to be applied by the containing
+ * @returns A tuple of values to be applied by the containing
  * component for the roving tabindex to work correctly.
+ * Response index 0: The tabIndex value to apply to the tab stop
+ * element.
+ * Response index 1: Whether or not focus() should be invoked on the
+ * tab stop element.
+ * Response index 2: The onKeyDown callback to apply to the tab
+ * stop element. If the key press is relevant to the hook then
+ * event.preventDefault() will be invoked on the event.
+ * Response index 3: The onClick callback to apply to the tab
+ * stop element.
  */
@@ -449,0 +458,0 @@ function useRovingTabIndex(domElementRef, disabled, options) {

dist/index.js

@@ -450,4 +450,13 @@ 'use strict';
  * the shape of the grid can change dynamically.
- * @returns {HookResponse} A tuple of values to be applied by the containing
+ * @returns A tuple of values to be applied by the containing
  * component for the roving tabindex to work correctly.
+ * Response index 0: The tabIndex value to apply to the tab stop
+ * element.
+ * Response index 1: Whether or not focus() should be invoked on the
+ * tab stop element.
+ * Response index 2: The onKeyDown callback to apply to the tab
+ * stop element. If the key press is relevant to the hook then
+ * event.preventDefault() will be invoked on the event.
+ * Response index 3: The onClick callback to apply to the tab
+ * stop element.
  */
@@ -454,0 +463,0 @@ function useRovingTabIndex(domElementRef, disabled, options) {

dist/use-roving-tabindex.d.ts

@@ -24,5 +24,14 @@ import { RefObject } from "react";
  * the shape of the grid can change dynamically.
- * @returns {HookResponse} A tuple of values to be applied by the containing
+ * @returns A tuple of values to be applied by the containing
  * component for the roving tabindex to work correctly.
+ * Response index 0: The tabIndex value to apply to the tab stop
+ * element.
+ * Response index 1: Whether or not focus() should be invoked on the
+ * tab stop element.
+ * Response index 2: The onKeyDown callback to apply to the tab
+ * stop element. If the key press is relevant to the hook then
+ * event.preventDefault() will be invoked on the event.
+ * Response index 3: The onClick callback to apply to the tab
+ * stop element.
  */
 export declare function useRovingTabIndex(domElementRef: RefObject<Element>, disabled: boolean, options?: HookOptions): HookResponse;

package.json

 {
   "name": "react-roving-tabindex",
-  "version": "2.0.0-beta.2",
+  "version": "2.0.0-beta.3",
   "description": "React implementation of a roving tabindex, now with grid support",
@@ -5,0 +5,0 @@ "author": "stevejay",

README.md

@@ -15,3 +15,3 @@ # react-roving-tabindex
 
-This pattern can also be used for a grid of items, as in [this calendar example](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/Grid_Role#Calendar_example) on the MDN website. The containing element for the grid should be given the `grid` role, and each grid item should given the `gridcell` role. ArrowLeft and ArrowRight are used to move focus between items in a row, while the ArrowUp and ArrowDown keys move between the rows. The Home and End keys (Fn+LeftArrow and Fn+RightArrow on macOS) move focus to a row's first and last items respectively. If the Control key is held while pressing the Home and End keys then focus is moved respectively to the very first and very last item in the grid.
+This pattern can also be used for a grid of items, as in [this calendar example](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/Grid_Role#Calendar_example) on the MDN website. Conventionally, the containing element for the grid should be given the `grid` role, and each grid item should given the `gridcell` role. ArrowLeft and ArrowRight are used to move focus between items in a row, while the ArrowUp and ArrowDown keys move between the rows. The Home and End keys (Fn+LeftArrow and Fn+RightArrow on macOS) move focus to a row's first and last items respectively. If the Control key is held while pressing the Home and End keys then focus is moved respectively to the very first and very last item in the grid.
 
@@ -189,3 +189,3 @@ ### Implementation considerations
 
-// Then use it...
+// ... then use it:
 const SomeComponent = () => (
@@ -208,5 +208,5 @@ <RovingTabIndexProvider keyConfig={GRID_KEY_CONFIG}>
 
-The `rowIndex` value should be the zero-based row index for the containing component in the grid it is in. Thus all items that represent the first row of grid items should have `{ rowIndex: 0 }` passed to the hook, the second row `{ rowIndex: 1 }`, and so on. If the shape of the grid can change dynamically then it is fine to update the rowIndex value. For example, the grid might initially has four items per row but be dynamically updated to have three items per row.
+The `rowIndex` value should be the zero-based row index for the containing component in the grid it is in. Thus all items that represent the first row of grid items should have `{ rowIndex: 0 }` passed to the hook, the second row `{ rowIndex: 1 }`, and so on. If the shape of the grid can change dynamically then it is fine to update the rowIndex value. For example, the grid might initially has four items per row but be dynamically updated to three items per row.
 
-Note that it is fine to create a new object for this third argument each time the containing component is rendered; it will not trigger a re-render. Also, if required you can combine the `rowIndex` with a custom `id` in the same options object.
+Note that it is fine to create a new object for this third argument each time the containing component is rendered; it will not trigger an unnecessary re-render. Also, if required you can combine the `rowIndex` with a custom `id` in the same options object.
 
@@ -246,3 +246,3 @@ ## Upgrading
 
-This configuration specifies the mapping between key press and focus movement, and it should be quite self-explanatory. The default mapping is likely what you want if you are migrating from version 1. If you do want to make changes, such as not supporting the ArrowLeft and ArrowRight keys then you can create and use a custom key configuration:
+This configuration specifies the mapping between key press and focus movement, and it should be quite self-explanatory. The default mapping is likely what you want if you are migrating from version 1. It is the equivalent of the setting `direction="both"`. If you do want to make changes, such as not supporting the ArrowLeft and ArrowRight keys then you can create and use a custom key configuration:
 
@@ -253,5 +253,5 @@ ```ts
 export const CUSTOM_KEY_CONFIG = {
-  ...DEFAULT_KEY_CONFIG,
-  [Key.ARROW_LEFT]: undefined, // or null
-  [Key.ARROW_RIGHT]: undefined // or null
+  ...DEFAULT_KEY_CONFIG, // Copy the default configuration.
+  [Key.ARROW_LEFT]: undefined, // Or use null.
+  [Key.ARROW_RIGHT]: undefined // Or use null.
 };
@@ -280,3 +280,3 @@
 
-Note that it is fine to create a new object for that third argument each time the containing component is rendered; that will not by itself trigger a re-render. As a reminder, the assigned ID will be captured on mounting of the containing component and cannot be changed during that component's lifetime.
+Note that it is fine to create a new object for that third argument each time the containing component is rendered; by itself that will not trigger a re-render. As a reminder, the assigned ID will be captured on mounting of the containing component and cannot be changed during that component's lifetime.
 
@@ -298,1 +298,5 @@ ### From version 0.x to version 1
 - The `@types/styled-components` package is currently downgraded to v4.1.8 because of [this issue](https://github.com/DefinitelyTyped/DefinitelyTyped/issues/33311). This only affects the Storybook build.
+
+## TODO
+
+- Own handling of click and keydown (integrating them with the hook's handlers).

No alert changes

Improved metrics

Total package byte prevSize

178219

increased by1.4%

Lines of code

1275

increased by2.16%

Number of lines in readme file

296

increased by1.37%

No dependency changes