update types and class node structure

Author: LFDanLu

packages/@react-aria/collections/src/BaseCollection.ts

@@ -233,7 +233,7 @@ export class BaseCollection<T> implements ICollection<Node<T>> {
     this.frozen = !isSSR;
   }
 
-  UNSTABLE_filter(filterFn: (textValue: string) => boolean): BaseCollection<T> {
+  filter(filterFn: (textValue: string) => boolean): BaseCollection<T> {
     let newCollection = new BaseCollection<T>();
     let [firstKey, lastKey] = filterChildren(this, newCollection, this.firstKey, filterFn);
     newCollection.firstKey = firstKey;

packages/@react-aria/collections/src/CollectionBuilder.tsx

@@ -10,12 +10,12 @@
  * governing permissions and limitations under the License.
  */
 
-import {BaseCollection} from './BaseCollection';
+import {BaseCollection, CollectionNode} from './BaseCollection';
 import {BaseNode, Document, ElementNode} from './Document';
 import {CachedChildrenOptions, useCachedChildren} from './useCachedChildren';
 import {createPortal} from 'react-dom';
 import {FocusableContext} from '@react-aria/interactions';
-import {forwardRefType, Node} from '@react-types/shared';
+import {forwardRefType, Key, Node} from '@react-types/shared';
 import {Hidden} from './Hidden';
 import React, {createContext, ForwardedRef, forwardRef, JSX, ReactElement, ReactNode, useCallback, useContext, useMemo, useRef, useState} from 'react';
 import {useIsSSR} from '@react-aria/ssr';
@@ -127,24 +127,29 @@ function useCollectionDocument<T extends object, C extends BaseCollection<T>>(cr
 
 const SSRContext = createContext<BaseNode<any> | null>(null);
 
-// TODO: make this any for now, but should be a node class
-function useSSRCollectionNode<T extends Element>(Type: any, props: object, ref: ForwardedRef<T>, rendered?: any, children?: ReactNode, render?: (node: Node<T>) => ReactElement) {
-// function useSSRCollectionNode<T extends Element>(Type: string, props: object, ref: ForwardedRef<T>, rendered?: any, children?: ReactNode, render?: (node: Node<T>) => ReactElement) {
+export type CollectionNodeClass<T> = {
+  new (key: Key): CollectionNode<T>,
+  readonly type: string
+};
+
+// TODO: discuss the former Type arg, renamed to CollectionNodeClass
+function useSSRCollectionNode<T extends Element>(CollectionNodeClass: CollectionNodeClass<T>, props: object, ref: ForwardedRef<T>, rendered?: any, children?: ReactNode, render?: (node: Node<any>) => ReactElement) {
   // During SSR, portals are not supported, so the collection children will be wrapped in an SSRContext.
   // Since SSR occurs only once, we assume that the elements are rendered in order and never re-render.
   // Therefore we can create elements in our collection document during render so that they are in the
   // collection by the time we need to use the collection to render to the real DOM.
   // After hydration, we switch to client rendering using the portal.
   let itemRef = useCallback((element: ElementNode<any> | null) => {
-    // TODO: now we get the proper node class aka TreeNode
-    element?.setProps(props, ref, rendered, render, Type);
-  }, [props, ref, rendered, render, Type]);
+    // TODO: check setProps api
+    element?.setProps(props, ref, rendered, render, CollectionNodeClass);
+  }, [props, ref, rendered, render, CollectionNodeClass]);
   let parentNode = useContext(SSRContext);
   if (parentNode) {
     // Guard against double rendering in strict mode.
     let element = parentNode.ownerDocument.nodesByProps.get(props);
     if (!element) {
-      element = parentNode.ownerDocument.createElement(Type);
+      // TODO: check this, maybe should just pass the CollectionNodeClass as a whole?
+      element = parentNode.ownerDocument.createElement(CollectionNodeClass.type);
       element.setProps(props, ref, rendered, render);
       parentNode.appendChild(element);
       parentNode.ownerDocument.updateCollection();
@@ -156,15 +161,16 @@ function useSSRCollectionNode<T extends Element>(Type: any, props: object, ref:
       : null;
   }
 
+  // console.log('type', CollectionNodeClass, CollectionNodeClass.type)
   // @ts-ignore
-  // TODO: make div for now, may not actually matter
-  return <div ref={itemRef}>{children}</div>;
+  // TODO: could just make this a div perhaps, but keep it in line with how it used to work
+  return <CollectionNodeClass.type ref={itemRef}>{children}</CollectionNodeClass.type>;
 }
 
-// TODO: changed all of these to be any, but should be node class type
-export function createLeafComponent<T extends object, P extends object, E extends Element>(type: any, render: (props: P, ref: ForwardedRef<E>) => ReactElement | null): (props: P & React.RefAttributes<T>) => ReactElement | null;
-export function createLeafComponent<T extends object, P extends object, E extends Element>(type: any, render: (props: P, ref: ForwardedRef<E>, node: Node<T>) => ReactElement | null): (props: P & React.RefAttributes<T>) => ReactElement | null;
-export function createLeafComponent<P extends object, E extends Element>(type: any, render: (props: P, ref: ForwardedRef<E>, node?: any) => ReactElement | null): (props: P & React.RefAttributes<any>) => ReactElement | null {
+// TODO: check the signature of the CollectionNodeClass here and other places (aka useSSRCollectionNode and branchCompoennt). If I use the generic it complains. Perhaps it should be unknown? Or maybe the definitions in Listbox and stuff shouldn't use a generic?
+export function createLeafComponent<T extends object, P extends object, E extends Element>(CollectionNodeClass: CollectionNodeClass<any>, render: (props: P, ref: ForwardedRef<E>) => ReactElement | null): (props: P & React.RefAttributes<T>) => ReactElement | null;
+export function createLeafComponent<T extends object, P extends object, E extends Element>(CollectionNodeClass: CollectionNodeClass<any>, render: (props: P, ref: ForwardedRef<E>, node: Node<T>) => ReactElement | null): (props: P & React.RefAttributes<T>) => ReactElement | null;
+export function createLeafComponent<P extends object, E extends Element>(CollectionNodeClass: CollectionNodeClass<any>, render: (props: P, ref: ForwardedRef<E>, node?: any) => ReactElement | null): (props: P & React.RefAttributes<any>) => ReactElement | null {
   let Component = ({node}) => render(node.props, node.props.ref, node);
   let Result = (forwardRef as forwardRefType)((props: P, ref: ForwardedRef<E>) => {
     let focusableProps = useContext(FocusableContext);
@@ -177,7 +183,7 @@ export function createLeafComponent<P extends object, E extends Element>(type: a
     }
 
     return useSSRCollectionNode(
-      type,
+      CollectionNodeClass,
       props,
       ref,
       'children' in props ? props.children : null,
@@ -195,12 +201,12 @@ export function createLeafComponent<P extends object, E extends Element>(type: a
   return Result;
 }
 
-// TODO: changed all of these to be any, but should be node class type
-export function createBranchComponent<T extends object, P extends {children?: any}, E extends Element>(type: any, render: (props: P, ref: ForwardedRef<E>, node: Node<T>) => ReactElement | null, useChildren: (props: P) => ReactNode = useCollectionChildren): (props: P & React.RefAttributes<E>) => ReactElement | null {
+// TODO: check the signature of this too
+export function createBranchComponent<T extends object, P extends {children?: any}, E extends Element>(CollectionNodeClass: CollectionNodeClass<any>, render: (props: P, ref: ForwardedRef<E>, node: Node<T>) => ReactElement | null, useChildren: (props: P) => ReactNode = useCollectionChildren): (props: P & React.RefAttributes<E>) => ReactElement | null {
   let Component = ({node}) => render(node.props, node.props.ref, node);
   let Result = (forwardRef as forwardRefType)((props: P, ref: ForwardedRef<E>) => {
     let children = useChildren(props);
-    return useSSRCollectionNode(type, props, ref, null, children, node => <Component node={node} />) ?? <></>;
+    return useSSRCollectionNode(CollectionNodeClass, props, ref, null, children, node => <Component node={node} />) ?? <></>;
   });
   // @ts-ignore
   Result.displayName = render.name;

packages/@react-aria/collections/src/Document.ts

@@ -11,6 +11,7 @@
  */
 
 import {BaseCollection, CollectionNode, Mutable} from './BaseCollection';
+import {CollectionNodeClass} from './CollectionBuilder';
 import {CSSProperties, ForwardedRef, ReactElement, ReactNode} from 'react';
 import {Node} from '@react-types/shared';
 
@@ -267,10 +268,6 @@ export class ElementNode<T> extends BaseNode<T> {
   constructor(type: string, ownerDocument: Document<T, any>) {
     super(ownerDocument);
     this.node = null;
-    // TODO: move this line to setProps
-    // if ()
-    // TODO: this is called by Document, seems like we need it?
-    // this.node = new CollectionNode(type, `react-aria-${++ownerDocument.nodeId}`);
   }
 
   get index(): number {
@@ -327,22 +324,20 @@ export class ElementNode<T> extends BaseNode<T> {
     }
   }
 
-  setProps<E extends Element>(obj: {[key: string]: any}, ref: ForwardedRef<E>, rendered?: ReactNode, render?: (node: Node<T>) => ReactElement, type?: any): void {
+  // TODO
+  setProps<E extends Element>(obj: {[key: string]: any}, ref: ForwardedRef<E>, rendered?: ReactNode, render?: (node: Node<T>) => ReactElement, CollectionNodeClass?: CollectionNodeClass<any>): void {
     let node = this.getMutableNode();
     let {value, textValue, id, ...props} = obj;
 
 
-    // if called for first time, aka this.node is undef, call
-    // this.node = new CollectionNode(type, `react-aria-${++ownerDocument.nodeId}`); but make new TreeNode instead of COllectionNode
+    // TODO: Flow here is that if this called for first time, aka this.node is undef, call
+    // this.node = new CollectionNode(type, `react-aria-${++ownerDocument.nodeId}`); but make new TreeNode/MenuNode/etc instead of CollectionNode
     // Caveat is this assumes we don't need a node before setProps is called on it
-    // TODO: will get rid of type function check here when we migrate everything to use the class
-    if (node == null && typeof type === 'function') {
-      node = new type(`react-aria-${++this.ownerDocument.nodeId}`);
+    if (node == null && CollectionNodeClass) {
+      node = new CollectionNodeClass(`react-aria-${++this.ownerDocument.nodeId}`);
       this.node = node;
-      // node.key = id;
-      // console.log('making node', node.type, node)
     }
-    // console.log('setting props', props, node, node.props)
+
     props.ref = ref;
     node.props = props;
     node.rendered = rendered;
@@ -353,7 +348,6 @@ export class ElementNode<T> extends BaseNode<T> {
       // TODO: still need to use this.hasSetProps so this can run twice (?) instead of setting node.key above
       // If we set node.key = id and change this to if (this.node), setting refs fails. If we just check (this.node here), it will fail if the user provides an id
       if (this.hasSetProps) {
-      // if (this.node) {
         throw new Error('Cannot change the id of an item');
       }
       node.key = id;

packages/@react-aria/collections/test/CollectionBuilder.test.js

@@ -3,8 +3,10 @@ import React from 'react';
 import {render} from '@testing-library/react';
 
 class ItemNode extends CollectionNode {
+  static type = 'item';
+
   constructor(key) {
-    super('item', key);
+    super(ItemNode.type, key);
   }
 }
 

packages/@react-stately/list/src/useListState.ts

@@ -73,8 +73,8 @@ 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> {
-  let collection = useMemo(() => filter ? state.collection.UNSTABLE_filter!(filter) : state.collection, [state.collection, filter]);
+export function UNSTABLE_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 {

packages/@react-types/shared/src/collections.d.ts

@@ -183,7 +183,7 @@ export interface Collection<T> extends Iterable<T> {
   getTextValue?(key: Key): string,
 
   /** Filters the collection using the given function. */
-  UNSTABLE_filter?(filterFn: (nodeValue: string) => boolean): Collection<T>
+  filter?(filterFn: (nodeValue: string) => boolean): Collection<T>
 }
 
 export interface Node<T> {

packages/react-aria-components/src/Breadcrumbs.tsx

@@ -75,8 +75,10 @@ export interface BreadcrumbProps extends RenderProps<BreadcrumbRenderProps>, Glo
 
 // TODO: perhaps this should be reuse ItemNode, for now just have it separate
 class BreadcrumbNode extends CollectionNode<any> {
+  static readonly type = 'item';
+
   constructor(key: Key) {
-    super('item', key);
+    super(BreadcrumbNode.type, key);
   }
 }
 

packages/react-aria-components/src/GridList.tsx

@@ -279,10 +279,13 @@ export interface GridListItemProps<T = object> extends RenderProps<GridListItemR
   onAction?: () => void
 }
 
+// TODO: add filter funct to this
 class GridListNode extends CollectionNode<any> {
+  static readonly type = 'item';
   constructor(key: Key) {
-    super('item', key);
+    super(GridListNode.type, key);
   }
+
 }
 
 /**
@@ -519,14 +522,17 @@ export interface GridListLoadMoreItemProps extends Omit<LoadMoreSentinelProps, '
   isLoading?: boolean
 }
 
-// TODO: can probably reuse ListBox's loaderNode
-class GridLoaderNode extends CollectionNode<any> {
+// TODO: can probably reuse ListBox's loaderNode, but might keep separate
+// add filter logic
+class GridListLoaderNode extends CollectionNode<any> {
+  static readonly type = 'loader';
+
   constructor(key: Key) {
-    super('loader', key);
+    super(GridListLoaderNode.type, key);
   }
 }
 
-export const GridListLoadMoreItem = createLeafComponent(GridLoaderNode, function GridListLoadingIndicator(props: GridListLoadMoreItemProps, ref: ForwardedRef<HTMLDivElement>, item: Node<object>) {
+export const GridListLoadMoreItem = createLeafComponent(GridListLoaderNode, function GridListLoadingIndicator(props: GridListLoadMoreItemProps, ref: ForwardedRef<HTMLDivElement>, item: Node<object>) {
   let state = useContext(ListStateContext)!;
   let {isVirtualized} = useContext(CollectionRendererContext);
   let {isLoading, onLoadMore, scrollOffset, ...otherProps} = props;

packages/react-aria-components/src/Header.tsx

@@ -18,8 +18,10 @@ import React, {createContext, ForwardedRef, HTMLAttributes} from 'react';
 export const HeaderContext = createContext<ContextValue<HTMLAttributes<HTMLElement>, HTMLElement>>({});
 
 class HeaderNode extends CollectionNode<any> {
+  static readonly type = 'header';
+
   constructor(key: Key) {
-    super('header', key);
+    super(HeaderNode.type, key);
   }
 
   filter(): CollectionNode<any> {

packages/react-aria-components/src/ListBox.tsx

@@ -306,11 +306,12 @@ function ListBoxSectionInner<T extends object>(props: ListBoxSectionProps<T>, re
 }
 
 
-// todo make a class here
+// TODO: reuse
+export class ListBoxSectionNode<T> extends CollectionNode<T> {
+  static readonly type = 'section';
 
-class SectionNode<T> extends CollectionNode<T> {
   constructor(key: Key) {
-    super('section', key);
+    super(ListBoxSectionNode.type, key);
   }
 
   filter(collection: BaseCollection<T>, newCollection: BaseCollection<T>, filterFn: (textValue: string) => boolean): CollectionNode<T> | null {
@@ -331,7 +332,7 @@ class SectionNode<T> extends CollectionNode<T> {
 /**
  * A ListBoxSection represents a section within a ListBox.
  */
-export const ListBoxSection = /*#__PURE__*/ createBranchComponent(SectionNode, ListBoxSectionInner);
+export const ListBoxSection = /*#__PURE__*/ createBranchComponent(ListBoxSectionNode, ListBoxSectionInner);
 
 export interface ListBoxItemRenderProps extends ItemRenderProps {}
 
@@ -353,12 +354,12 @@ export interface ListBoxItemProps<T = object> extends RenderProps<ListBoxItemRen
   onAction?: () => void
 }
 
+// TODO: reusue
+class ListBoxItemNode<T> extends CollectionNode<T> {
+  static readonly type = 'item';
 
-// TODO create item type here
-
-class ItemNode<T> extends CollectionNode<T> {
   constructor(key: Key) {
-    super('item', key);
+    super(ListBoxItemNode.type, key);
   }
 
   filter(_, __, filterFn: (textValue: string) => boolean): CollectionNode<T> | null {
@@ -373,7 +374,7 @@ class ItemNode<T> extends CollectionNode<T> {
 /**
  * A ListBoxItem represents an individual option in a ListBox.
  */
-export const ListBoxItem = /*#__PURE__*/ createLeafComponent(ItemNode, function ListBoxItem<T extends object>(props: ListBoxItemProps<T>, forwardedRef: ForwardedRef<HTMLDivElement>, item: Node<T>) {
+export const ListBoxItem = /*#__PURE__*/ createLeafComponent(ListBoxItemNode, function ListBoxItem<T extends object>(props: ListBoxItemProps<T>, forwardedRef: ForwardedRef<HTMLDivElement>, item: Node<T>) {
   let ref = useObjectRef<any>(forwardedRef);
   let state = useContext(ListStateContext)!;
   let {dragAndDropHooks, dragState, dropState} = useContext(DragAndDropContext)!;
@@ -511,9 +512,11 @@ function ListBoxDropIndicator(props: ListBoxDropIndicatorProps, ref: ForwardedRe
 }
 
 // TODO: can reuse this most likely
-class LoaderNode extends CollectionNode<any> {
+class ListBoxLoaderNode extends CollectionNode<any> {
+  static readonly type = 'loader';
+
   constructor(key: Key) {
-    super('loader', key);
+    super(ListBoxLoaderNode.type, key);
   }
 
   filter(): CollectionNode<any> | null {
@@ -534,7 +537,7 @@ export interface ListBoxLoadMoreItemProps extends Omit<LoadMoreSentinelProps, 'c
   isLoading?: boolean
 }
 
-export const ListBoxLoadMoreItem = createLeafComponent(LoaderNode, function ListBoxLoadingIndicator(props: ListBoxLoadMoreItemProps, ref: ForwardedRef<HTMLDivElement>, item: Node<object>) {
+export const ListBoxLoadMoreItem = createLeafComponent(ListBoxLoaderNode, function ListBoxLoadingIndicator(props: ListBoxLoadMoreItemProps, ref: ForwardedRef<HTMLDivElement>, item: Node<object>) {
   let state = useContext(ListStateContext)!;
   let {isLoading, onLoadMore, scrollOffset, ...otherProps} = props;