@react-stately/collections 3.11.0 → 3.12.1

package/src/CollectionBuilder.ts

@@ -15,19 +15,23 @@ import {PartialNode} from './types';
 import React, {ReactElement} from 'react';
 
 interface CollectionBuilderState {
-  renderer?: (value: any) => ReactElement
+  renderer?: (value: any) => ReactElement | null
+}
+
+interface CollectReactElement<T> extends ReactElement {
+  getCollectionNode(props: any, context: any): Generator<PartialNode<T>, void, Node<T>[]>
 }
 
 export class CollectionBuilder<T extends object> {
   private context?: unknown;
   private cache: WeakMap<T, Node<T>> = new WeakMap();
 
-  build(props: CollectionBase<T>, context?: unknown) {
+  build(props: Partial<CollectionBase<T>>, context?: unknown) {
     this.context = context;
     return iterable(() => this.iterateCollection(props));
   }
 
-  private *iterateCollection(props: CollectionBase<T>): Generator<Node<T>> {
+  private *iterateCollection(props: Partial<CollectionBase<T>>): Generator<Node<T>> {
     let {children, items} = props;
 
     if (React.isValidElement<{children: CollectionElement<T>}>(children) && children.type === React.Fragment) {
@@ -40,15 +44,20 @@ export class CollectionBuilder<T extends object> {
         throw new Error('props.children was a function but props.items is missing');
       }
 
-      for (let item of props.items) {
+      let index = 0;
+      for (let item of items) {
         yield* this.getFullNode({
-          value: item
+          value: item,
+          index
         }, {renderer: children});
+        index++;
       }
     } else {
       let items: CollectionElement<T>[] = [];
       React.Children.forEach(children, child => {
-        items.push(child);
+        if (child) {
+          items.push(child);
+        }
       });
 
       let index = 0;
@@ -66,7 +75,7 @@ export class CollectionBuilder<T extends object> {
     }
   }
 
-  private getKey(item: CollectionElement<T>, partialNode: PartialNode<T>, state: CollectionBuilderState, parentKey?: Key): Key {
+  private getKey(item: NonNullable<CollectionElement<T>>, partialNode: PartialNode<T>, state: CollectionBuilderState, parentKey?: Key | null): Key {
     if (item.key != null) {
       return item.key;
     }
@@ -94,7 +103,7 @@ export class CollectionBuilder<T extends object> {
     };
   }
 
-  private *getFullNode(partialNode: PartialNode<T>, state: CollectionBuilderState, parentKey?: Key, parentNode?: Node<T>): Generator<Node<T>> {
+  private *getFullNode(partialNode: PartialNode<T> & {index: number}, state: CollectionBuilderState, parentKey?: Key | null, parentNode?: Node<T>): Generator<Node<T>> {
     if (React.isValidElement<{children: CollectionElement<T>}>(partialNode.element) && partialNode.element.type === React.Fragment) {
       let children: CollectionElement<T>[] = [];
 
@@ -102,7 +111,7 @@ export class CollectionBuilder<T extends object> {
         children.push(child);
       });
 
-      let index = partialNode.index;
+      let index = partialNode.index ?? 0;
 
       for (const child of children) {
         yield* this.getFullNode({
@@ -132,23 +141,23 @@ export class CollectionBuilder<T extends object> {
     // If there's an element with a getCollectionNode function on its type, then it's a supported component.
     // Call this function to get a partial node, and recursively build a full node from there.
     if (React.isValidElement(element)) {
-      let type = element.type as any;
+      let type = element.type as unknown as CollectReactElement<T>;
       if (typeof type !== 'function' && typeof type.getCollectionNode !== 'function') {
-        let name = typeof element.type === 'function' ? element.type.name : element.type;
+        let name = element.type;
         throw new Error(`Unknown element <${name}> in collection.`);
       }
 
       let childNodes = type.getCollectionNode(element.props, this.context) as Generator<PartialNode<T>, void, Node<T>[]>;
-      let index = partialNode.index;
+      let index = partialNode.index ?? 0;
       let result = childNodes.next();
       while (!result.done && result.value) {
         let childNode = result.value;
 
         partialNode.index = index;
 
-        let nodeKey = childNode.key;
-        if (!nodeKey) {
-          nodeKey = childNode.element ? null : this.getKey(element as CollectionElement<T>, partialNode, state, parentKey);
+        let nodeKey = childNode.key ?? null;
+        if (nodeKey == null) {
+          nodeKey = childNode.element ? null : this.getKey(element as NonNullable<CollectionElement<T>>, partialNode, state, parentKey);
         }
 
         let nodes = this.getFullNode({
@@ -161,7 +170,7 @@ export class CollectionBuilder<T extends object> {
         let children = [...nodes];
         for (let node of children) {
           // Cache the node based on its value
-          node.value = childNode.value || partialNode.value;
+          node.value = childNode.value ?? partialNode.value ?? null;
           if (node.value) {
             this.cache.set(node.value, node);
           }
@@ -169,7 +178,7 @@ export class CollectionBuilder<T extends object> {
           // The partial node may have specified a type for the child in order to specify a constraint.
           // Verify that the full node that was built recursively matches this type.
           if (partialNode.type && node.type !== partialNode.type) {
-            throw new Error(`Unsupported type <${capitalize(node.type)}> in <${capitalize(parentNode.type)}>. Only <${capitalize(partialNode.type)}> is supported.`);
+            throw new Error(`Unsupported type <${capitalize(node.type)}> in <${capitalize(parentNode?.type ?? 'unknown parent type')}>. Only <${capitalize(partialNode.type)}> is supported.`);
           }
 
           index++;
@@ -183,7 +192,7 @@ export class CollectionBuilder<T extends object> {
     }
 
     // Ignore invalid elements
-    if (partialNode.key == null) {
+    if (partialNode.key == null || partialNode.type == null) {
       return;
     }
 
@@ -194,17 +203,17 @@ export class CollectionBuilder<T extends object> {
       props: partialNode.props,
       key: partialNode.key,
       parentKey: parentNode ? parentNode.key : null,
-      value: partialNode.value,
+      value: partialNode.value ?? null,
       level: parentNode ? parentNode.level + 1 : 0,
       index: partialNode.index,
       rendered: partialNode.rendered,
-      textValue: partialNode.textValue,
+      textValue: partialNode.textValue ?? '',
       'aria-label': partialNode['aria-label'],
       wrapper: partialNode.wrapper,
       shouldInvalidate: partialNode.shouldInvalidate,
-      hasChildNodes: partialNode.hasChildNodes,
+      hasChildNodes: partialNode.hasChildNodes || false,
       childNodes: iterable(function *() {
-        if (!partialNode.hasChildNodes) {
+        if (!partialNode.hasChildNodes || !partialNode.childNodes) {
           return;
         }
 
@@ -219,8 +228,7 @@ export class CollectionBuilder<T extends object> {
             child.key = `${node.key}${child.key}`;
           }
 
-          child.index = index;
-          let nodes = builder.getFullNode(child, builder.getChildState(state, child), node.key, node);
+          let nodes = builder.getFullNode({...child, index}, builder.getChildState(state, child), node.key, node);
           for (let node of nodes) {
             index++;
             yield node;
@@ -235,8 +243,8 @@ export class CollectionBuilder<T extends object> {
 
 // Wraps an iterator function as an iterable object, and caches the results.
 function iterable<T>(iterator: () => IterableIterator<Node<T>>): Iterable<Node<T>> {
-  let cache = [];
-  let iterable = null;
+  let cache: Array<Node<T>> = [];
+  let iterable: null | IterableIterator<Node<T>> = null;
   return {
     *[Symbol.iterator]() {
       for (let item of cache) {
@@ -256,7 +264,7 @@ function iterable<T>(iterator: () => IterableIterator<Node<T>>): Iterable<Node<T
 }
 
 type Wrapper = (element: ReactElement) => ReactElement;
-function compose(outer: Wrapper | void, inner: Wrapper | void): Wrapper {
+function compose(outer: Wrapper | void, inner: Wrapper | void): Wrapper | undefined {
   if (outer && inner) {
     return (element) => outer(inner(element));
   }

package/src/Item.ts

@@ -14,7 +14,7 @@ import {ItemElement, ItemProps} from '@react-types/shared';
 import {PartialNode} from './types';
 import React, {JSX, ReactElement} from 'react';
 
-function Item<T>(props: ItemProps<T>): ReactElement { // eslint-disable-line @typescript-eslint/no-unused-vars
+function Item<T>(props: ItemProps<T>): ReactElement | null { // eslint-disable-line @typescript-eslint/no-unused-vars
   return null;
 }
 

package/src/Section.ts

@@ -14,7 +14,7 @@ import {PartialNode} from './types';
 import React, {JSX, ReactElement} from 'react';
 import {SectionProps} from '@react-types/shared';
 
-function Section<T>(props: SectionProps<T>): ReactElement { // eslint-disable-line @typescript-eslint/no-unused-vars
+function Section<T>(props: SectionProps<T>): ReactElement | null { // eslint-disable-line @typescript-eslint/no-unused-vars
   return null;
 }
 

package/src/getChildNodes.ts

@@ -42,7 +42,7 @@ export function getNthItem<T>(iterable: Iterable<T>, index: number): T | undefin
 }
 
 export function getLastItem<T>(iterable: Iterable<T>): T | undefined {
-  let lastItem = undefined;
+  let lastItem: T | undefined = undefined;
   for (let value of iterable) {
     lastItem = value;
   }
@@ -81,11 +81,14 @@ export function compareNodeOrder<T>(collection: Collection<Node<T>>, a: Node<T>,
 }
 
 function getAncestors<T>(collection: Collection<Node<T>>, node: Node<T>): Node<T>[] {
-  let parents = [];
+  let parents: Node<T>[] = [];
 
-  while (node?.parentKey != null) {
-    node = collection.getItem(node.parentKey);
-    parents.unshift(node);
+  let currNode: Node<T> | null = node;
+  while (currNode?.parentKey != null) {
+    currNode = collection.getItem(currNode.parentKey);
+    if (currNode) {
+      parents.unshift(currNode);
+    }
   }
 
   return parents;

package/src/getItemCount.ts

@@ -21,18 +21,19 @@ export function getItemCount<T>(collection: Collection<Node<T>>): number {
     return count;
   }
 
-  count = 0;
+  // TS isn't smart enough to know we've ensured count is a number, so use a new variable
+  let counter = 0;
   let countItems = (items: Iterable<Node<T>>) => {
     for (let item of items) {
       if (item.type === 'section') {
         countItems(getChildNodes(item, collection));
       } else {
-        count++;
+        counter++;
       }
     }
   };
 
   countItems(collection);
-  cache.set(collection, count);
-  return count;
+  cache.set(collection, counter);
+  return counter;
 }

package/src/types.ts

@@ -15,17 +15,17 @@ import {ReactElement, ReactNode} from 'react';
 
 export interface PartialNode<T> {
   type?: string,
-  key?: Key,
+  key?: Key | null,
   value?: T,
-  element?: ReactElement,
+  element?: ReactElement | null,
   wrapper?: (element: ReactElement) => ReactElement,
   rendered?: ReactNode,
   textValue?: string,
   'aria-label'?: string,
   index?: number,
-  renderer?: (item: T) => ReactElement,
+  renderer?: (item: T) => ReactElement | null,
   hasChildNodes?: boolean,
   childNodes?: () => IterableIterator<PartialNode<T>>,
   props?: any,
-  shouldInvalidate?: (context: unknown) => boolean
+  shouldInvalidate?: (context: any) => boolean
 }

package/src/useCollection.ts

@@ -15,7 +15,7 @@ import {CollectionBuilder} from './CollectionBuilder';
 import {ReactElement, useMemo} from 'react';
 
 interface CollectionOptions<T, C extends Collection<Node<T>>> extends Omit<CollectionStateBase<T, C>, 'children'> {
-  children?: ReactElement<any> | ReactElement<any>[] | ((item: T) => ReactElement<any>)
+  children?: ReactElement<any> | null | (ReactElement<any> | null)[] | ((item: T) => ReactElement<any> | null)
 }
 
 type CollectionFactory<T, C extends Collection<Node<T>>> = (node: Iterable<Node<T>>) => C;