@react-stately/list - npm Package Compare versions

Comparing version 3.0.0-nightly-326f48154-241216 to 3.0.0-nightly-341ae3f8a-250822

dist/ListCollection.main.js

@@ -22,3 +22,3 @@
     get size() {
-        return this.keyMap.size;
+        return this._size;
     }
@@ -70,2 +70,3 @@ getKeys() {
         let index = 0;
+        let size = 0;
         for (let [key, node] of this.keyMap){
@@ -80,2 +81,5 @@ if (last) {
             if (node.type === 'item') node.index = index++;
+            // Only count sections and items when determining size so that
+            // loaders and separators in RAC/S2 don't influence the emptyState determination
+            if (node.type === 'section' || node.type === 'item') size++;
             last = node;
@@ -86,2 +90,3 @@ // Set nextKey as undefined since this might be the last node
         }
+        this._size = size;
         var _last_key;
@@ -88,0 +93,0 @@ this.lastKey = (_last_key = last === null || last === void 0 ? void 0 : last.key) !== null && _last_key !== void 0 ? _last_key : null;

dist/ListCollection.module.js

@@ -16,3 +16,3 @@ /*
     get size() {
-        return this.keyMap.size;
+        return this._size;
     }
@@ -64,2 +64,3 @@ getKeys() {
         let index = 0;
+        let size = 0;
         for (let [key, node] of this.keyMap){
@@ -74,2 +75,5 @@ if (last) {
             if (node.type === 'item') node.index = index++;
+            // Only count sections and items when determining size so that
+            // loaders and separators in RAC/S2 don't influence the emptyState determination
+            if (node.type === 'section' || node.type === 'item') size++;
             last = node;
@@ -80,2 +84,3 @@ // Set nextKey as undefined since this might be the last node
         }
+        this._size = size;
         var _last_key;
@@ -82,0 +87,0 @@ this.lastKey = (_last_key = last === null || last === void 0 ? void 0 : last.key) !== null && _last_key !== void 0 ? _last_key : null;

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

@@ -5,3 +5,3 @@ import { Collection, Key, Node, CollectionStateBase, LayoutDelegate, SingleSelection } from "@react-types/shared";
     constructor(nodes: Iterable<Node<T>>);
-    [Symbol.iterator](): Generator<Node<T>, void, undefined>;
+    [Symbol.iterator](): IterableIterator<Node<T>>;
     get size(): number;
@@ -41,2 +41,6 @@ getKeys(): IterableIterator<Key>;
 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>, filterFn: ((nodeValue: string, node: Node<T>) => 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, "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, 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$ba9d38c0f1bf2b36(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$ba9d38c0f1bf2b36 as UNSTABLE_useFilteredListState};
 //# sourceMappingURL=useListState.module.js.map

package.json

 {
   "name": "@react-stately/list",
-  "version": "3.0.0-nightly-326f48154-241216",
+  "version": "3.0.0-nightly-341ae3f8a-250822",
   "description": "Spectrum UI components in React",
@@ -9,3 +9,7 @@ "license": "Apache-2.0",
   "exports": {
-    "types": "./dist/types.d.ts",
+    "source": "./src/index.ts",
+    "types": [
+      "./dist/types.d.ts",
+      "./src/index.ts"
+    ],
     "import": "./dist/import.mjs",
@@ -26,6 +30,6 @@ "require": "./dist/main.js"
   "dependencies": {
-    "@react-stately/collections": "3.0.0-nightly-326f48154-241216",
-    "@react-stately/selection": "3.0.0-nightly-326f48154-241216",
-    "@react-stately/utils": "3.0.0-nightly-326f48154-241216",
-    "@react-types/shared": "3.0.0-nightly-326f48154-241216",
+    "@react-stately/collections": "3.0.0-nightly-341ae3f8a-250822",
+    "@react-stately/selection": "3.0.0-nightly-341ae3f8a-250822",
+    "@react-stately/utils": "3.0.0-nightly-341ae3f8a-250822",
+    "@react-types/shared": "3.0.0-nightly-341ae3f8a-250822",
     "@swc/helpers": "^0.5.0"
@@ -32,0 +36,0 @@ },

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/ListCollection.ts

@@ -20,2 +20,3 @@ /*
   private lastKey: Key | null = null;
+  private _size: number;
 
@@ -41,2 +42,3 @@ constructor(nodes: Iterable<Node<T>>) {
     let index = 0;
+    let size = 0;
     for (let [key, node] of this.keyMap) {
@@ -55,2 +57,8 @@ if (last) {
 
+      // Only count sections and items when determining size so that
+      // loaders and separators in RAC/S2 don't influence the emptyState determination
+      if (node.type === 'section' || node.type === 'item') {
+        size++;
+      }
+
       last = node;
@@ -62,19 +70,19 @@
     }
-
+    this._size = size;
     this.lastKey = last?.key ?? null;
   }
 
-  *[Symbol.iterator]() {
+  *[Symbol.iterator](): IterableIterator<Node<T>> {
     yield* this.iterable;
   }
 
-  get size() {
-    return this.keyMap.size;
+  get size(): number {
+    return this._size;
   }
 
-  getKeys() {
+  getKeys(): IterableIterator<Key> {
     return this.keyMap.keys();
   }
 
-  getKeyBefore(key: Key) {
+  getKeyBefore(key: Key): Key | null {
     let node = this.keyMap.get(key);
@@ -84,3 +92,3 @@ return node ? node.prevKey ?? null : null;
 
-  getKeyAfter(key: Key) {
+  getKeyAfter(key: Key): Key | null {
     let node = this.keyMap.get(key);
@@ -90,15 +98,15 @@ return node ? node.nextKey ?? null : null;
 
-  getFirstKey() {
+  getFirstKey(): Key | null {
     return this.firstKey;
   }
 
-  getLastKey() {
+  getLastKey(): Key | null {
     return this.lastKey;
   }
 
-  getItem(key: Key) {
+  getItem(key: Key): Node<T> | null {
     return this.keyMap.get(key) ?? null;
   }
 
-  at(idx: number) {
+  at(idx: number): Node<T> | null {
     const keys = [...this.getKeys()];
@@ -105,0 +113,0 @@ return this.getItem(keys[idx]);

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>, filterFn: ((nodeValue: string, node: Node<T>) => 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]);
 }

New alerts

Unidentified License

License

(Experimental) Something that seems like a license was found, but its contents could not be matched with a known license.

Found 1 instance in 1 package

Fixed alerts

Unidentified License

License

(Experimental) Something that seems like a license was found, but its contents could not be matched with a known license.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

99472

9.73%

Lines of code

1166

8.26%

Dependency changes

• + Added

  @react-stately/collections@3.0.0-nightly-341ae3f8a-250822
  (transitive)

• + Added

  @react-stately/selection@3.0.0-nightly-341ae3f8a-250822
  (transitive)

• + Added

  @react-stately/utils@3.0.0-nightly-341ae3f8a-250822
  (transitive)

• + Added

  @react-types/shared@3.0.0-nightly-341ae3f8a-250822
  (transitive)

• - Removed

  @react-stately/collections@3.0.0-nightly-326f48154-241216
  (transitive)

• - Removed

  @react-stately/selection@3.0.0-nightly-326f48154-241216
  (transitive)

• - Removed

  @react-stately/utils@3.0.0-nightly-326f48154-241216
  (transitive)

• - Removed

  @react-types/shared@3.0.0-nightly-326f48154-241216
  (transitive)

• Updated

  @react-stately/collections@3.0.0-nightly-341ae3f8a-250822

• Updated

  @react-stately/selection@3.0.0-nightly-341ae3f8a-250822

• Updated

  @react-stately/utils@3.0.0-nightly-341ae3f8a-250822

• Updated

  @react-types/shared@3.0.0-nightly-341ae3f8a-250822