@react-stately/list - npm Package Compare versions

Comparing version 3.0.0-nightly-a626c2596-240926 to 3.0.0-nightly-a792c1ad5-250222

dist/main.js

@@ -11,2 +11,3 @@ var $5450691d3629f6ea$exports = require("./useListState.main.js");
 $parcel$export(module.exports, "useListState", () => $5450691d3629f6ea$exports.useListState);
+$parcel$export(module.exports, "useFilteredListState", () => $5450691d3629f6ea$exports.useFilteredListState);
 $parcel$export(module.exports, "useSingleSelectListState", () => $b9e99587a092d199$exports.useSingleSelectListState);
@@ -13,0 +14,0 @@ $parcel$export(module.exports, "ListCollection", () => $c9aa5a224613c979$exports.ListCollection);

dist/module.js

@@ -1,2 +0,2 @@
-import {useListState as $e72dd72e1c76a225$export$2f645645f7bca764} from "./useListState.module.js";
+import {useFilteredListState as $e72dd72e1c76a225$export$41ee42896aa2f375, useListState as $e72dd72e1c76a225$export$2f645645f7bca764} from "./useListState.module.js";
 import {useSingleSelectListState as $a0d645289fe9b86b$export$e7f05e985daf4b5f} from "./useSingleSelectListState.module.js";
@@ -20,3 +20,3 @@ import {ListCollection as $a02d57049d202695$export$d085fb9e920b5ca7} from "./ListCollection.module.js";
 
-export {$e72dd72e1c76a225$export$2f645645f7bca764 as useListState, $a0d645289fe9b86b$export$e7f05e985daf4b5f as useSingleSelectListState, $a02d57049d202695$export$d085fb9e920b5ca7 as ListCollection};
+export {$e72dd72e1c76a225$export$2f645645f7bca764 as useListState, $e72dd72e1c76a225$export$41ee42896aa2f375 as useFilteredListState, $a0d645289fe9b86b$export$e7f05e985daf4b5f as useSingleSelectListState, $a02d57049d202695$export$d085fb9e920b5ca7 as ListCollection};
 //# sourceMappingURL=module.js.map

dist/types.d.ts

@@ -8,8 +8,8 @@ import { Collection, Key, Node, CollectionStateBase, LayoutDelegate, SingleSelection } from "@react-types/shared";
     getKeys(): IterableIterator<Key>;
-    getKeyBefore(key: Key): Key;
-    getKeyAfter(key: Key): Key;
-    getFirstKey(): Key;
-    getLastKey(): Key;
-    getItem(key: Key): Node<T>;
-    at(idx: number): Node<T>;
+    getKeyBefore(key: Key): Key | null;
+    getKeyAfter(key: Key): Key | null;
+    getFirstKey(): Key | null;
+    getLastKey(): Key | null;
+    getItem(key: Key): Node<T> | null;
+    at(idx: number): Node<T> | null;
     getChildren(key: Key): Iterable<Node<T>>;
@@ -41,2 +41,6 @@ }
 export function useListState<T extends object>(props: ListProps<T>): ListState<T>;
+/**
+ * Filters a collection using the provided filter function and returns a new ListState.
+ */
+export function useFilteredListState<T extends object>(state: ListState<T>, filterFn: ((nodeValue: string) => boolean) | null | undefined): ListState<T>;
 export interface SingleSelectListProps<T> extends CollectionStateBase<T>, Omit<SingleSelection, 'disallowEmptySelection'> {
@@ -43,0 +47,0 @@ /** Filter function to generate a filtered list of nodes. */

dist/useListState.main.js

@@ -12,2 +12,3 @@ var $c9aa5a224613c979$exports = require("./ListCollection.main.js");
 $parcel$export(module.exports, "useListState", () => $5450691d3629f6ea$export$2f645645f7bca764);
+$parcel$export(module.exports, "useFilteredListState", () => $5450691d3629f6ea$export$41ee42896aa2f375);
 /*
@@ -49,7 +50,28 @@ * Copyright 2020 Adobe. All rights reserved.
     ]);
+    $5450691d3629f6ea$var$useFocusedKeyReset(collection, selectionManager);
+    return {
+        collection: collection,
+        disabledKeys: disabledKeys,
+        selectionManager: selectionManager
+    };
+}
+function $5450691d3629f6ea$export$41ee42896aa2f375(state, filterFn) {
+    let collection = (0, $5RsKl$react.useMemo)(()=>filterFn ? state.collection.filter(filterFn) : state.collection, [
+        state.collection,
+        filterFn
+    ]);
+    let selectionManager = state.selectionManager.withCollection(collection);
+    $5450691d3629f6ea$var$useFocusedKeyReset(collection, selectionManager);
+    return {
+        collection: collection,
+        selectionManager: selectionManager,
+        disabledKeys: state.disabledKeys
+    };
+}
+function $5450691d3629f6ea$var$useFocusedKeyReset(collection, selectionManager) {
     // Reset focused key if that item is deleted from the collection.
     const cachedCollection = (0, $5RsKl$react.useRef)(null);
     (0, $5RsKl$react.useEffect)(()=>{
-        if (selectionState.focusedKey != null && !collection.getItem(selectionState.focusedKey) && cachedCollection.current) {
-            const startItem = cachedCollection.current.getItem(selectionState.focusedKey);
+        if (selectionManager.focusedKey != null && !collection.getItem(selectionManager.focusedKey) && cachedCollection.current) {
+            const startItem = cachedCollection.current.getItem(selectionManager.focusedKey);
             const cachedItemNodes = [
@@ -87,3 +109,3 @@ ...cachedCollection.current.getKeys()
             }
-            selectionState.setFocusedKey(newNode ? newNode.key : null);
+            selectionManager.setFocusedKey(newNode ? newNode.key : null);
         }
@@ -93,11 +115,4 @@ cachedCollection.current = collection;
         collection,
-        selectionManager,
-        selectionState,
-        selectionState.focusedKey
+        selectionManager
     ]);
-    return {
-        collection: collection,
-        disabledKeys: disabledKeys,
-        selectionManager: selectionManager
-    };
 }
@@ -104,0 +119,0 @@

dist/useListState.module.js

@@ -42,7 +42,28 @@ import {ListCollection as $a02d57049d202695$export$d085fb9e920b5ca7} from "./ListCollection.module.js";
     ]);
+    $e72dd72e1c76a225$var$useFocusedKeyReset(collection, selectionManager);
+    return {
+        collection: collection,
+        disabledKeys: disabledKeys,
+        selectionManager: selectionManager
+    };
+}
+function $e72dd72e1c76a225$export$41ee42896aa2f375(state, filterFn) {
+    let collection = (0, $d5vlZ$useMemo)(()=>filterFn ? state.collection.filter(filterFn) : state.collection, [
+        state.collection,
+        filterFn
+    ]);
+    let selectionManager = state.selectionManager.withCollection(collection);
+    $e72dd72e1c76a225$var$useFocusedKeyReset(collection, selectionManager);
+    return {
+        collection: collection,
+        selectionManager: selectionManager,
+        disabledKeys: state.disabledKeys
+    };
+}
+function $e72dd72e1c76a225$var$useFocusedKeyReset(collection, selectionManager) {
     // Reset focused key if that item is deleted from the collection.
     const cachedCollection = (0, $d5vlZ$useRef)(null);
     (0, $d5vlZ$useEffect)(()=>{
-        if (selectionState.focusedKey != null && !collection.getItem(selectionState.focusedKey) && cachedCollection.current) {
-            const startItem = cachedCollection.current.getItem(selectionState.focusedKey);
+        if (selectionManager.focusedKey != null && !collection.getItem(selectionManager.focusedKey) && cachedCollection.current) {
+            const startItem = cachedCollection.current.getItem(selectionManager.focusedKey);
             const cachedItemNodes = [
@@ -80,3 +101,3 @@ ...cachedCollection.current.getKeys()
             }
-            selectionState.setFocusedKey(newNode ? newNode.key : null);
+            selectionManager.setFocusedKey(newNode ? newNode.key : null);
         }
@@ -86,15 +107,8 @@ cachedCollection.current = collection;
         collection,
-        selectionManager,
-        selectionState,
-        selectionState.focusedKey
+        selectionManager
     ]);
-    return {
-        collection: collection,
-        disabledKeys: disabledKeys,
-        selectionManager: selectionManager
-    };
 }
 
 
-export {$e72dd72e1c76a225$export$2f645645f7bca764 as useListState};
+export {$e72dd72e1c76a225$export$2f645645f7bca764 as useListState, $e72dd72e1c76a225$export$41ee42896aa2f375 as useFilteredListState};
 //# sourceMappingURL=useListState.module.js.map

package.json

 {
   "name": "@react-stately/list",
-  "version": "3.0.0-nightly-a626c2596-240926",
+  "version": "3.0.0-nightly-a792c1ad5-250222",
   "description": "Spectrum UI components in React",
@@ -25,15 +25,14 @@ "license": "Apache-2.0",
   "dependencies": {
-    "@react-stately/collections": "^3.0.0-nightly-a626c2596-240926",
-    "@react-stately/selection": "^3.0.0-nightly-a626c2596-240926",
-    "@react-stately/utils": "^3.0.0-nightly-a626c2596-240926",
-    "@react-types/shared": "^3.0.0-nightly-a626c2596-240926",
+    "@react-stately/collections": "3.0.0-nightly-a792c1ad5-250222",
+    "@react-stately/selection": "3.0.0-nightly-a792c1ad5-250222",
+    "@react-stately/utils": "3.0.0-nightly-a792c1ad5-250222",
+    "@react-types/shared": "3.0.0-nightly-a792c1ad5-250222",
     "@swc/helpers": "^0.5.0"
   },
   "peerDependencies": {
-    "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0"
+    "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1"
   },
   "publishConfig": {
     "access": "public"
-  },
-  "stableVersion": "3.10.8"
+  }
 }

src/index.ts

@@ -15,4 +15,4 @@ /*
 export type {SingleSelectListProps, SingleSelectListState} from './useSingleSelectListState';
-export {useListState} from './useListState';
+export {useListState, useFilteredListState} from './useListState';
 export {useSingleSelectListState} from './useSingleSelectListState';
 export {ListCollection} from './ListCollection';

src/useListState.ts

@@ -64,7 +64,31 @@ /*
 
+  useFocusedKeyReset(collection, selectionManager);
+
+  return {
+    collection,
+    disabledKeys,
+    selectionManager
+  };
+}
+
+/**
+ * Filters a collection using the provided filter function and returns a new ListState.
+ */
+export function useFilteredListState<T extends object>(state: ListState<T>, filterFn: ((nodeValue: string) => boolean) | null | undefined): ListState<T> {
+  let collection = useMemo(() => filterFn ? state.collection.filter!(filterFn) : state.collection, [state.collection, filterFn]);
+  let selectionManager = state.selectionManager.withCollection(collection);
+  useFocusedKeyReset(collection, selectionManager);
+  return {
+    collection,
+    selectionManager,
+    disabledKeys: state.disabledKeys
+  };
+}
+
+function useFocusedKeyReset<T>(collection: Collection<Node<T>>, selectionManager: SelectionManager) {
   // Reset focused key if that item is deleted from the collection.
   const cachedCollection = useRef<Collection<Node<T>> | null>(null);
   useEffect(() => {
-    if (selectionState.focusedKey != null && !collection.getItem(selectionState.focusedKey) && cachedCollection.current) {
-      const startItem = cachedCollection.current.getItem(selectionState.focusedKey);
+    if (selectionManager.focusedKey != null && !collection.getItem(selectionManager.focusedKey) && cachedCollection.current) {
+      const startItem = cachedCollection.current.getItem(selectionManager.focusedKey);
       const cachedItemNodes = [...cachedCollection.current.getKeys()].map(
@@ -109,12 +133,6 @@ key => {
       }
-      selectionState.setFocusedKey(newNode ? newNode.key : null);
+      selectionManager.setFocusedKey(newNode ? newNode.key : null);
     }
     cachedCollection.current = collection;
-  }, [collection, selectionManager, selectionState, selectionState.focusedKey]);
-
-  return {
-    collection,
-    disabledKeys,
-    selectionManager
-  };
+  }, [collection, selectionManager]);
 }

No alert changes

Improved metrics

Total package byte prevSize

96527

increased by6.5%

Lines of code

1141

increased by5.94%

Dependency changes

• + Added@react-stately/collections@3.0.0-nightly-a792c1ad5-250222(transitive)

• + Added@react-stately/selection@3.0.0-nightly-a792c1ad5-250222(transitive)

• + Added@react-stately/utils@3.0.0-nightly-a792c1ad5-250222(transitive)

• + Added@react-types/shared@3.0.0-nightly-a792c1ad5-250222(transitive)

• - Removed@react-stately/collections@3.12.1(transitive)

• - Removed@react-stately/selection@3.19.0(transitive)

• - Removed@react-stately/utils@3.10.5(transitive)

• - Removed@react-types/shared@3.27.0(transitive)

• Updated@react-stately/collections@3.0.0-nightly-a792c1ad5-250222

• Updated@react-stately/selection@3.0.0-nightly-a792c1ad5-250222

• Updated@react-stately/utils@3.0.0-nightly-a792c1ad5-250222

• Updated@react-types/shared@3.0.0-nightly-a792c1ad5-250222