@react-stately/grid - npm Package Compare versions

Comparing version 3.0.0-alpha.1 to 3.0.0-alpha.2

dist/main.js

@@ -19,7 +19,33 @@ var _babelRuntimeHelpersExtends = $parcel$interopDefault(require("@babel/runtime/helpers/extends"));
   let {
-    collection
+    collection,
+    focusMode
   } = props;
   let selectionState = useMultipleSelectionState(props);
-  let disabledKeys = useMemo(() => props.disabledKeys ? new Set(props.disabledKeys) : new Set(), [props.disabledKeys]); // Reset focused key if that item is deleted from the collection.
+  let disabledKeys = useMemo(() => props.disabledKeys ? new Set(props.disabledKeys) : new Set(), [props.disabledKeys]);
+  let setFocusedKey = selectionState.setFocusedKey;
 
+  selectionState.setFocusedKey = (key, child) => {
+    // If focusMode is cell and an item is focused, focus a child cell instead.
+    if (focusMode === 'cell' && key != null) {
+      let item = collection.getItem(key);
+
+      if ((item == null ? void 0 : item.type) === 'item') {
+        let children = [...item.childNodes];
+
+        if (child === 'last') {
+          var _children;
+
+          key = (_children = children[children.length - 1]) == null ? void 0 : _children.key;
+        } else {
+          var _children$;
+
+          key = (_children$ = children[0]) == null ? void 0 : _children$.key;
+        }
+      }
+    }
+
+    setFocusedKey(key, child);
+  }; // Reset focused key if that item is deleted from the collection.
+
+
   useEffect(() => {
@@ -26,0 +52,0 @@ if (selectionState.focusedKey != null && !collection.getItem(selectionState.focusedKey)) {

dist/module.js

@@ -6,7 +6,33 @@ import _babelRuntimeHelpersEsmExtends from "@babel/runtime/helpers/esm/extends";
   let {
-    collection
+    collection,
+    focusMode
   } = props;
   let selectionState = useMultipleSelectionState(props);
-  let disabledKeys = useMemo(() => props.disabledKeys ? new Set(props.disabledKeys) : new Set(), [props.disabledKeys]); // Reset focused key if that item is deleted from the collection.
+  let disabledKeys = useMemo(() => props.disabledKeys ? new Set(props.disabledKeys) : new Set(), [props.disabledKeys]);
+  let setFocusedKey = selectionState.setFocusedKey;
 
+  selectionState.setFocusedKey = (key, child) => {
+    // If focusMode is cell and an item is focused, focus a child cell instead.
+    if (focusMode === 'cell' && key != null) {
+      let item = collection.getItem(key);
+
+      if ((item == null ? void 0 : item.type) === 'item') {
+        let children = [...item.childNodes];
+
+        if (child === 'last') {
+          var _children;
+
+          key = (_children = children[children.length - 1]) == null ? void 0 : _children.key;
+        } else {
+          var _children$;
+
+          key = (_children$ = children[0]) == null ? void 0 : _children$.key;
+        }
+      }
+    }
+
+    setFocusedKey(key, child);
+  }; // Reset focused key if that item is deleted from the collection.
+
+
   useEffect(() => {
@@ -13,0 +39,0 @@ if (selectionState.focusedKey != null && !collection.getItem(selectionState.focusedKey)) {

dist/types.d.ts

@@ -13,2 +13,3 @@ import { GridCollection as _GridCollection1, GridNode, GridRow } from "@react-types/grid";
     disabledKeys?: Iterable<Key>;
+    focusMode?: 'row' | 'cell';
 }
@@ -15,0 +16,0 @@ export function useGridState<T extends object, C extends _GridCollection1<T>>(props: GridStateOptions<T, C>): GridState<T, C>;

package.json

 {
   "name": "@react-stately/grid",
-  "version": "3.0.0-alpha.1",
+  "version": "3.0.0-alpha.2",
   "description": "Spectrum UI components in React",
@@ -21,5 +21,5 @@ "license": "Apache-2.0",
     "@babel/runtime": "^7.6.2",
-    "@react-stately/selection": "^3.4.0",
+    "@react-stately/selection": "^3.5.0",
     "@react-types/grid": "3.0.0-alpha.0",
-    "@react-types/shared": "^3.5.0"
+    "@react-types/shared": "^3.6.0"
   },
@@ -32,3 +32,3 @@ "peerDependencies": {
   },
-  "gitHead": "bead0d5e0d5f4411430741d63d31e10dd5628dae"
+  "gitHead": "3aae08e7d8a75382bedcddac7c86107e40db9296"
 }

src/useGridState.ts

@@ -14,7 +14,8 @@ import {GridCollection} from '@react-types/grid';
   collection: C,
-  disabledKeys?: Iterable<Key>
+  disabledKeys?: Iterable<Key>,
+  focusMode?: 'row' | 'cell'
 }
 
 export function useGridState<T extends object, C extends GridCollection<T>>(props: GridStateOptions<T, C>): GridState<T, C> {
-  let {collection} = props;
+  let {collection, focusMode} = props;
   let selectionState = useMultipleSelectionState(props);
@@ -25,2 +26,20 @@ let disabledKeys = useMemo(() =>
 
+  let setFocusedKey = selectionState.setFocusedKey;
+  selectionState.setFocusedKey = (key, child) => {
+    // If focusMode is cell and an item is focused, focus a child cell instead.
+    if (focusMode === 'cell' && key != null) {
+      let item = collection.getItem(key);
+      if (item?.type === 'item') {
+        let children = [...item.childNodes];
+        if (child === 'last') {
+          key = children[children.length - 1]?.key;
+        } else {
+          key = children[0]?.key;
+        }
+      }
+    }
+
+    setFocusedKey(key, child);
+  };
+
   // Reset focused key if that item is deleted from the collection.
@@ -27,0 +46,0 @@ useEffect(() => {

No alert changes

Improved metrics

Total package byte prevSize

56937

9.16%

Lines of code

563

11.05%

Dependency changes

• Updated

  @react-stately/selection@^3.5.0

• Updated

  @react-types/shared@^3.6.0