rough implementation for listbox

Author: LFDanLu

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

@@ -127,15 +127,18 @@ function useCollectionDocument<T extends object, C extends BaseCollection<T>>(cr
 
 const SSRContext = createContext<BaseNode<any> | null>(null);
 
-function useSSRCollectionNode<T extends Element>(Type: string, props: object, ref: ForwardedRef<T>, rendered?: any, children?: ReactNode, render?: (node: Node<T>) => ReactElement) {
+// 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) {
   // 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) => {
-    element?.setProps(props, ref, rendered, render);
-  }, [props, ref, rendered, render]);
+    // TODO: now we get the proper node class aka TreeNode
+    element?.setProps(props, ref, rendered, render, Type);
+  }, [props, ref, rendered, render, Type]);
   let parentNode = useContext(SSRContext);
   if (parentNode) {
     // Guard against double rendering in strict mode.
@@ -154,12 +157,14 @@ function useSSRCollectionNode<T extends Element>(Type: string, props: object, re
   }
 
   // @ts-ignore
-  return <Type ref={itemRef}>{children}</Type>;
+  // TODO: make div for now, may not actually matter
+  return <div ref={itemRef}>{children}</div>;
 }
 
-export function createLeafComponent<T extends object, P extends object, E extends Element>(type: string, 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: string, 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: string, render: (props: P, ref: ForwardedRef<E>, node?: any) => ReactElement | null): (props: P & React.RefAttributes<any>) => ReactElement | null {
+// 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 {
   let Component = ({node}) => render(node.props, node.props.ref, node);
   let Result = (forwardRef as forwardRefType)((props: P, ref: ForwardedRef<E>) => {
     let focusableProps = useContext(FocusableContext);
@@ -190,7 +195,8 @@ export function createLeafComponent<P extends object, E extends Element>(type: s
   return Result;
 }
 
-export function createBranchComponent<T extends object, P extends {children?: any}, E extends Element>(type: string, render: (props: P, ref: ForwardedRef<E>, node: Node<T>) => ReactElement | null, useChildren: (props: P) => ReactNode = useCollectionChildren): (props: P & React.RefAttributes<E>) => ReactElement | null {
+// 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 {
   let Component = ({node}) => render(node.props, node.props.ref, node);
   let Result = (forwardRef as forwardRefType)((props: P, ref: ForwardedRef<E>) => {
     let children = useChildren(props);

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

@@ -256,15 +256,21 @@ export class BaseNode<T> {
  */
 export class ElementNode<T> extends BaseNode<T> {
   nodeType = 8; // COMMENT_NODE (we'd use ELEMENT_NODE but React DevTools will fail to get its dimensions)
-  node: CollectionNode<T>;
+  // TODO: running with assumption that setProps will be called before any other calls to node are made so theoretically
+  // node will be defined
+  node: CollectionNode<T> | null;
   isMutated = true;
   private _index: number = 0;
   hasSetProps = false;
   isHidden = false;
 
   constructor(type: string, ownerDocument: Document<T, any>) {
     super(ownerDocument);
-    this.node = new CollectionNode(type, `react-aria-${++ownerDocument.nodeId}`);
+    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 {
@@ -278,7 +284,7 @@ export class ElementNode<T> extends BaseNode<T> {
 
   get level(): number {
     if (this.parentNode instanceof ElementNode) {
-      return this.parentNode.level + (this.node.type === 'item' ? 1 : 0);
+      return this.parentNode.level + (this.node?.type === 'item' ? 1 : 0);
     }
 
     return 0;
@@ -290,48 +296,64 @@ export class ElementNode<T> extends BaseNode<T> {
    */
   private getMutableNode(): Mutable<CollectionNode<T>> {
     if (!this.isMutated) {
-      this.node = this.node.clone();
+      this.node = this.node!.clone();
       this.isMutated = true;
     }
 
     this.ownerDocument.markDirty(this);
-    return this.node;
+    return this.node!;
   }
 
   updateNode(): void {
     let nextSibling = this.nextVisibleSibling;
     let node = this.getMutableNode();
     node.index = this.index;
     node.level = this.level;
-    node.parentKey = this.parentNode instanceof ElementNode ? this.parentNode.node.key : null;
-    node.prevKey = this.previousVisibleSibling?.node.key ?? null;
-    node.nextKey = nextSibling?.node.key ?? null;
+    node.parentKey = this.parentNode instanceof ElementNode ? this.parentNode.node!.key : null;
+    node.prevKey = this.previousVisibleSibling?.node!.key ?? null;
+    node.nextKey = nextSibling?.node!.key ?? null;
     node.hasChildNodes = !!this.firstChild;
-    node.firstChildKey = this.firstVisibleChild?.node.key ?? null;
-    node.lastChildKey = this.lastVisibleChild?.node.key ?? null;
+    node.firstChildKey = this.firstVisibleChild?.node!.key ?? null;
+    node.lastChildKey = this.lastVisibleChild?.node!.key ?? null;
 
     // Update the colIndex of sibling nodes if this node has a colSpan.
     if ((node.colSpan != null || node.colIndex != null) && nextSibling) {
       // This queues the next sibling for update, which means this happens recursively.
       let nextColIndex = (node.colIndex ?? node.index) + (node.colSpan ?? 1);
-      if (nextColIndex !== nextSibling.node.colIndex) {
+      if (nextColIndex !== nextSibling.node!.colIndex) {
         let siblingNode = nextSibling.getMutableNode();
         siblingNode.colIndex = nextColIndex;
       }
     }
   }
 
-  setProps<E extends Element>(obj: {[key: string]: any}, ref: ForwardedRef<E>, rendered?: ReactNode, render?: (node: Node<T>) => ReactElement): void {
+  setProps<E extends Element>(obj: {[key: string]: any}, ref: ForwardedRef<E>, rendered?: ReactNode, render?: (node: Node<T>) => ReactElement, type?: 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
+    // 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}`);
+      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;
     node.render = render;
     node.value = value;
     node.textValue = textValue || (typeof props.children === 'string' ? props.children : '') || obj['aria-label'] || '';
     if (id != null && id !== node.key) {
+      // 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;
@@ -341,6 +363,7 @@ export class ElementNode<T> extends BaseNode<T> {
       node.colSpan = props.colSpan;
     }
 
+    // TODO: still need this, see above comment
     this.hasSetProps = true;
     if (this.isConnected) {
       this.ownerDocument.queueUpdate();

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

@@ -10,13 +10,20 @@
  * governing permissions and limitations under the License.
  */
 
+import {CollectionNode, createLeafComponent} from '@react-aria/collections';
 import {ContextValue, useContextProps} from './utils';
-import {createLeafComponent} from '@react-aria/collections';
+import {Key} from '@react-types/shared';
 import React, {createContext, ForwardedRef, HTMLAttributes} from 'react';
 
 export const HeaderContext = createContext<ContextValue<HTMLAttributes<HTMLElement>, HTMLElement>>({});
 
-export const Header = /*#__PURE__*/ createLeafComponent('header', function Header(props: HTMLAttributes<HTMLElement>, ref: ForwardedRef<HTMLElement>) {
+class HeaderNode extends CollectionNode<any> {
+  constructor(key: Key) {
+    super('header', key);
+  }
+}
+
+export const Header = /*#__PURE__*/ createLeafComponent(HeaderNode, function Header(props: HTMLAttributes<HTMLElement>, ref: ForwardedRef<HTMLElement>) {
   [props, ref] = useContextProps(props, ref, HeaderContext);
   return (
     <header className="react-aria-Header" {...props} ref={ref}>

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

@@ -11,7 +11,7 @@
  */
 
 import {AriaListBoxOptions, AriaListBoxProps, DraggableItemResult, DragPreviewRenderer, DroppableCollectionResult, DroppableItemResult, FocusScope, ListKeyboardDelegate, mergeProps, useCollator, useFocusRing, useHover, useListBox, useListBoxSection, useLocale, useOption} from 'react-aria';
-import {Collection, CollectionBuilder, createBranchComponent, createLeafComponent} from '@react-aria/collections';
+import {Collection, CollectionBuilder, CollectionNode, createBranchComponent, createLeafComponent} from '@react-aria/collections';
 import {CollectionProps, CollectionRendererContext, ItemRenderProps, SectionContext, SectionProps} from './Collection';
 import {ContextValue, DEFAULT_SLOT, Provider, RenderProps, ScrollableProps, SlotProps, StyleProps, StyleRenderProps, useContextProps, useRenderProps, useSlot} from './utils';
 import {DragAndDropContext, DropIndicatorContext, DropIndicatorProps, useDndPersistedKeys, useRenderDropIndicator} from './DragAndDrop';
@@ -304,10 +304,19 @@ function ListBoxSectionInner<T extends object>(props: ListBoxSectionProps<T>, re
   );
 }
 
+
+// todo make a class here
+
+class SectionNode extends CollectionNode<any> {
+  constructor(key: Key) {
+    super('section', key);
+  }
+}
+
 /**
  * A ListBoxSection represents a section within a ListBox.
  */
-export const ListBoxSection = /*#__PURE__*/ createBranchComponent('section', ListBoxSectionInner);
+export const ListBoxSection = /*#__PURE__*/ createBranchComponent(SectionNode, ListBoxSectionInner);
 
 export interface ListBoxItemRenderProps extends ItemRenderProps {}
 
@@ -329,10 +338,19 @@ export interface ListBoxItemProps<T = object> extends RenderProps<ListBoxItemRen
   onAction?: () => void
 }
 
+
+// TODO create item type here
+
+class ItemNode extends CollectionNode<any> {
+  constructor(key: Key) {
+    super('item', key);
+  }
+}
+
 /**
  * A ListBoxItem represents an individual option in a ListBox.
  */
-export const ListBoxItem = /*#__PURE__*/ createLeafComponent('item', function ListBoxItem<T extends object>(props: ListBoxItemProps<T>, forwardedRef: ForwardedRef<HTMLDivElement>, item: Node<T>) {
+export const ListBoxItem = /*#__PURE__*/ createLeafComponent(ItemNode, 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)!;
@@ -466,6 +484,13 @@ function ListBoxDropIndicator(props: ListBoxDropIndicatorProps, ref: ForwardedRe
   );
 }
 
+// TODO: can reuse this most likely
+class LoaderNode extends CollectionNode<any> {
+  constructor(key: Key) {
+    super('loader', key);
+  }
+}
+
 const ListBoxDropIndicatorForwardRef = forwardRef(ListBoxDropIndicator);
 
 export interface ListBoxLoadingSentinelProps extends Omit<LoadMoreSentinelProps, 'collection'>, StyleProps {
@@ -479,7 +504,7 @@ export interface ListBoxLoadingSentinelProps extends Omit<LoadMoreSentinelProps,
   isLoading?: boolean
 }
 
-export const UNSTABLE_ListBoxLoadingSentinel = createLeafComponent('loader', function ListBoxLoadingIndicator<T extends object>(props: ListBoxLoadingSentinelProps, ref: ForwardedRef<HTMLDivElement>, item: Node<T>) {
+export const UNSTABLE_ListBoxLoadingSentinel = createLeafComponent(LoaderNode, function ListBoxLoadingIndicator<T extends object>(props: ListBoxLoadingSentinelProps, ref: ForwardedRef<HTMLDivElement>, item: Node<T>) {
   let state = useContext(ListStateContext)!;
   let {isVirtualized} = useContext(CollectionRendererContext);
   let {isLoading, onLoadMore, scrollOffset, ...otherProps} = props;

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

@@ -11,16 +11,23 @@
  */
 
 import {SeparatorProps as AriaSeparatorProps, useSeparator} from 'react-aria';
+import {CollectionNode, createLeafComponent} from '@react-aria/collections';
 import {ContextValue, SlotProps, StyleProps, useContextProps} from './utils';
-import {createLeafComponent} from '@react-aria/collections';
 import {filterDOMProps} from '@react-aria/utils';
+import {Key} from '@react-types/shared';
 import React, {createContext, ElementType, ForwardedRef} from 'react';
 
 export interface SeparatorProps extends AriaSeparatorProps, StyleProps, SlotProps {}
 
 export const SeparatorContext = createContext<ContextValue<SeparatorProps, HTMLElement>>({});
 
-export const Separator = /*#__PURE__*/ createLeafComponent('separator', function Separator(props: SeparatorProps, ref: ForwardedRef<HTMLElement>) {
+class SeparatorNode extends CollectionNode<any> {
+  constructor(key: Key) {
+    super('separator', key);
+  }
+}
+
+export const Separator = /*#__PURE__*/ createLeafComponent(SeparatorNode, function Separator(props: SeparatorProps, ref: ForwardedRef<HTMLElement>) {
   [props, ref] = useContextProps(props, ref, SeparatorContext);
 
   let {elementType, orientation, style, className, slot, ...otherProps} = props;