@react-stately/list - npm Package Compare versions

Comparing version 3.11.2 to 3.12.0

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, "UNSTABLE_useFilteredListState", () => $5450691d3629f6ea$exports.UNSTABLE_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 {UNSTABLE_useFilteredListState as $e72dd72e1c76a225$export$ba9d38c0f1bf2b36, 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$ba9d38c0f1bf2b36 as UNSTABLE_useFilteredListState, $a0d645289fe9b86b$export$e7f05e985daf4b5f as useSingleSelectListState, $a02d57049d202695$export$d085fb9e920b5ca7 as ListCollection};
 //# sourceMappingURL=module.js.map

dist/types.d.ts

@@ -40,2 +40,6 @@ import { Collection, Key, Node, CollectionStateBase, LayoutDelegate, SingleSelection } from "@react-types/shared";
 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 UNSTABLE_useFilteredListState<T extends object>(state: ListState<T>, filter: ((nodeValue: string) => boolean) | null | undefined): ListState<T>;
 export interface SingleSelectListProps<T> extends CollectionStateBase<T>, Omit<SingleSelection, 'disallowEmptySelection'> {
@@ -42,0 +46,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, "UNSTABLE_useFilteredListState", () => $5450691d3629f6ea$export$ba9d38c0f1bf2b36);
 /*
@@ -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$ba9d38c0f1bf2b36(state, filter) {
+    let collection = (0, $5RsKl$react.useMemo)(()=>filter ? state.collection.UNSTABLE_filter(filter) : state.collection, [
+        state.collection,
+        filter
+    ]);
+    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$ba9d38c0f1bf2b36(state, filter) {
+    let collection = (0, $d5vlZ$useMemo)(()=>filter ? state.collection.UNSTABLE_filter(filter) : state.collection, [
+        state.collection,
+        filter
+    ]);
+    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$ba9d38c0f1bf2b36 as UNSTABLE_useFilteredListState};
 //# sourceMappingURL=useListState.module.js.map

package.json

 {
   "name": "@react-stately/list",
-  "version": "3.11.2",
+  "version": "3.12.0",
   "description": "Spectrum UI components in React",
@@ -25,6 +25,6 @@ "license": "Apache-2.0",
   "dependencies": {
-    "@react-stately/collections": "^3.12.1",
-    "@react-stately/selection": "^3.19.0",
+    "@react-stately/collections": "^3.12.2",
+    "@react-stately/selection": "^3.20.0",
     "@react-stately/utils": "^3.10.5",
-    "@react-types/shared": "^3.27.0",
+    "@react-types/shared": "^3.28.0",
     "@swc/helpers": "^0.5.0"
@@ -38,3 +38,3 @@ },
   },
-  "gitHead": "09e7f44bebdc9d89122926b2b439a0a38a2814ea"
+  "gitHead": "4d3c72c94eea2d72eb3a0e7d56000c6ef7e39726"
 }

src/index.ts

@@ -15,4 +15,4 @@ /*
 export type {SingleSelectListProps, SingleSelectListState} from './useSingleSelectListState';
-export {useListState} from './useListState';
+export {useListState, UNSTABLE_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 UNSTABLE_useFilteredListState<T extends object>(state: ListState<T>, filter: ((nodeValue: string) => boolean) | null | undefined): ListState<T> {
+  let collection = useMemo(() => filter ? state.collection.UNSTABLE_filter!(filter) : state.collection, [state.collection, filter]);
+  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

107961

5.92%

Lines of code

1143

6.13%

Published versions last year

286

0.35%

Dependency changes

• Updated

  @react-stately/collections@^3.12.2

• Updated

  @react-stately/selection@^3.20.0

• Updated

  @react-types/shared@^3.28.0