Merge branch 'main' into rac-tree-docs

# Conflicts:
#	packages/@react-spectrum/s2/src/TreeView.tsx
#	packages/react-aria-components/stories/Tree.stories.tsx
#	packages/react-aria-components/test/Tree.test.tsx

Author: snowystinger

.storybook-s2/docs/Intro.jsx

@@ -202,7 +202,6 @@ import {ActionButton} from '@react-spectrum/s2';
           <li><Code>width</Code></li>
           <li><Code>minWidth</Code></li>
           <li><Code>maxWidth</Code></li>
-          <li><Code>flex</Code></li>
           <li><Code>flexGrow</Code></li>
           <li><Code>flexShrink</Code></li>
           <li><Code>flexBasis</Code></li>

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

@@ -35,6 +35,8 @@ export class CollectionNode<T> implements Node<T> {
   readonly lastChildKey: Key | null = null;
   readonly props: any = {};
   readonly render?: (node: Node<any>) => ReactElement;
+  readonly colSpan: number | null = null;
+  readonly colIndex: number | null = null;
 
   constructor(type: string, key: Key) {
     this.type = type;
@@ -61,6 +63,8 @@ export class CollectionNode<T> implements Node<T> {
     node.lastChildKey = this.lastChildKey;
     node.props = this.props;
     node.render = this.render;
+    node.colSpan = this.colSpan;
+    node.colIndex = this.colIndex;
     return node;
   }
 }

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

@@ -260,6 +260,16 @@ export class ElementNode<T> extends BaseNode<T> {
     node.hasChildNodes = !!this.firstChild;
     node.firstChildKey = this.firstChild?.node.key ?? null;
     node.lastChildKey = this.lastChild?.node.key ?? null;
+
+    // Update the colIndex of sibling nodes if this node has a colSpan.
+    if ((node.colSpan != null || node.colIndex != null) && this.nextSibling) {
+      // This queues the next sibling for update, which means this happens recursively.
+      let nextColIndex = (node.colIndex ?? node.index) + (node.colSpan ?? 1);
+      if (nextColIndex !== this.nextSibling.node.colIndex) {
+        let siblingNode = this.ownerDocument.getMutableNode(this.nextSibling);
+        siblingNode.colIndex = nextColIndex;
+      }
+    }
   }
 
   setProps<E extends Element>(obj: any, ref: ForwardedRef<E>, rendered?: any, render?: (node: Node<T>) => ReactElement) {
@@ -278,6 +288,10 @@ export class ElementNode<T> extends BaseNode<T> {
       node.key = id;
     }
 
+    if (props.colSpan != null) {
+      node.colSpan = props.colSpan;
+    }
+
     // If this is the first time props have been set, end the transaction started in the constructor
     // so this node can be emitted.
     if (!this.hasSetProps) {
@@ -418,8 +432,8 @@ export class Document<T, C extends BaseCollection<T> = BaseCollection<T>> extend
         }
       }
 
-      collection.commit(this.firstChild?.node.key ?? null, this.lastChild?.node.key ?? null, this.isSSR);
       this.mutatedNodes.clear();
+      collection.commit(this.firstChild?.node.key ?? null, this.lastChild?.node.key ?? null, this.isSSR);
     }
 
     this.collectionMutated = false;

packages/@react-aria/virtualizer/src/VirtualizerItem.tsx

@@ -88,6 +88,15 @@ export function layoutInfoToStyle(layoutInfo: LayoutInfo, dir: Direction, parent
     ...rectStyles
   };
 
+  if (layoutInfo.isSticky) {
+    if (style.top) {
+      style.marginTop = style.top;
+    }
+    if (style[xProperty]) {
+      style[dir === 'rtl' ? 'marginRight' : 'marginLeft'] = style[xProperty];
+    }
+  }
+
   cache.set(layoutInfo, style);
   return style;
 }

packages/@react-spectrum/listbox/src/ListBoxBase.tsx

@@ -54,7 +54,7 @@ export function useListBoxLayout<T>(): ListBoxLayout<T> {
     new ListBoxLayout<T>({
       estimatedRowHeight: scale === 'large' ? 48 : 32,
       estimatedHeadingHeight: scale === 'large' ? 33 : 26,
-      padding: scale === 'large' ? 5 : 4, // TODO: get from DNA
+      paddingY: scale === 'large' ? 5 : 4, // TODO: get from DNA
       placeholderHeight: scale === 'large' ? 48 : 32
     })
   , [scale]);

packages/@react-spectrum/listbox/src/ListBoxLayout.ts

@@ -8,18 +8,18 @@ interface ListBoxLayoutProps {
 
 interface ListBoxLayoutOptions extends ListLayoutOptions {
   placeholderHeight: number,
-  padding: number
+  paddingY: number
 }
 
 export class ListBoxLayout<T> extends ListLayout<T, ListBoxLayoutProps> {
   private isLoading: boolean = false;
   private placeholderHeight: number;
-  private padding: number;
+  private paddingY: number;
 
   constructor(opts: ListBoxLayoutOptions) {
     super(opts);
     this.placeholderHeight = opts.placeholderHeight;
-    this.padding = opts.padding;
+    this.paddingY = opts.paddingY;
   }
 
   update(invalidationContext: InvalidationContext<ListBoxLayoutProps>): void {
@@ -28,7 +28,7 @@ export class ListBoxLayout<T> extends ListLayout<T, ListBoxLayoutProps> {
   }
 
   protected buildCollection(): LayoutNode[] {
-    let nodes = super.buildCollection(this.padding);
+    let nodes = super.buildCollection(this.paddingY);
     let y = this.contentSize.height;
 
     if (this.isLoading) {
@@ -55,7 +55,7 @@ export class ListBoxLayout<T> extends ListLayout<T, ListBoxLayoutProps> {
       y = placeholder.rect.maxY;
     }
 
-    this.contentSize.height = y + this.padding;
+    this.contentSize.height = y + this.paddingY;
     return nodes;
   }