Merge branch 'incremental-function-return-types' into update-typescript-to-5.8

Author: snowystinger

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

@@ -11,7 +11,7 @@
  */
 
 import {Collection as ICollection, Key, Node} from '@react-types/shared';
-import {ReactNode} from 'react';
+import {ReactElement, ReactNode} from 'react';
 
 export type Mutable<T> = {
   -readonly[P in keyof T]: T[P]
@@ -34,7 +34,7 @@ export class CollectionNode<T> implements Node<T> {
   readonly firstChildKey: Key | null = null;
   readonly lastChildKey: Key | null = null;
   readonly props: any = {};
-  readonly render?: (node: Node<any>) => ReactNode;
+  readonly render?: (node: Node<any>) => ReactElement;
   readonly colSpan: number | null = null;
   readonly colIndex: number | null = null;
 

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

@@ -11,7 +11,7 @@
  */
 
 import {BaseCollection, CollectionNode, Mutable} from './BaseCollection';
-import {CSSProperties, ForwardedRef, ReactNode} from 'react';
+import {CSSProperties, ForwardedRef, ReactElement, ReactNode} from 'react';
 import {Node} from '@react-types/shared';
 
 // This Collection implementation is perhaps a little unusual. It works by rendering the React tree into a
@@ -38,6 +38,7 @@ export class BaseNode<T> {
   private _previousSibling: ElementNode<T> | null = null;
   private _nextSibling: ElementNode<T> | null = null;
   private _parentNode: BaseNode<T> | null = null;
+  private _minInvalidChildIndex: ElementNode<T> | null = null;
   ownerDocument: Document<T, any>;
 
   constructor(ownerDocument: Document<T, any>) {
@@ -101,6 +102,21 @@ export class BaseNode<T> {
     return this.parentNode?.isConnected || false;
   }
 
+  private invalidateChildIndices(child: ElementNode<T>): void {
+    if (this._minInvalidChildIndex == null || child.index < this._minInvalidChildIndex.index) {
+      this._minInvalidChildIndex = child;
+    }
+  }
+
+  updateChildIndices(): void {
+    let node = this._minInvalidChildIndex;
+    while (node) {
+      node.index = node.previousSibling ? node.previousSibling.index + 1 : 0;
+      node = node.nextSibling;
+    }
+    this._minInvalidChildIndex = null;
+  }
+
   appendChild(child: ElementNode<T>): void {
     this.ownerDocument.startTransaction();
     if (child.parentNode) {
@@ -158,11 +174,7 @@ export class BaseNode<T> {
     referenceNode.previousSibling = newNode;
     newNode.parentNode = referenceNode.parentNode;
 
-    let node: ElementNode<T> | null = referenceNode;
-    while (node) {
-      node.index++;
-      node = node.nextSibling;
-    }
+    this.invalidateChildIndices(referenceNode);
 
     if (newNode.hasSetProps) {
       this.ownerDocument.addNode(newNode);
@@ -178,13 +190,9 @@ export class BaseNode<T> {
     }
 
     this.ownerDocument.startTransaction();
-    let node = child.nextSibling;
-    while (node) {
-      node.index--;
-      node = node.nextSibling;
-    }
-
+    
     if (child.nextSibling) {
+      this.invalidateChildIndices(child.nextSibling);
       child.nextSibling.previousSibling = child.previousSibling;
     }
 
@@ -272,7 +280,7 @@ export class ElementNode<T> extends BaseNode<T> {
     }
   }
 
-  setProps<E extends Element>(obj: {[key: string]: any}, ref: ForwardedRef<E>, rendered?: ReactNode, render?: (node: Node<T>) => ReactNode): void {
+  setProps<E extends Element>(obj: {[key: string]: any}, ref: ForwardedRef<E>, rendered?: ReactNode, render?: (node: Node<T>) => ReactElement): void {
     let node = this.ownerDocument.getMutableNode(this);
     let {value, textValue, id, ...props} = obj;
     props.ref = ref;
@@ -330,6 +338,8 @@ export class Document<T, C extends BaseCollection<T> = BaseCollection<T>> extend
   private mutatedNodes: Set<ElementNode<T>> = new Set();
   private subscriptions: Set<() => void> = new Set();
   private transactionCount = 0;
+  private queuedRender = false;
+  private inSubscription = false;
 
   constructor(collection: C) {
     // @ts-ignore
@@ -412,10 +422,22 @@ export class Document<T, C extends BaseCollection<T> = BaseCollection<T>> extend
     }
 
     this.updateCollection();
+
+    // Reset queuedRender to false when getCollection is called during render.
+    if (!this.inSubscription) {
+      this.queuedRender = false;
+    }
+
     return this.collection;
   }
 
   updateCollection(): void {
+    // First, update the indices of dirty element children.
+    for (let element of this.dirtyNodes) {
+      element.updateChildIndices();
+    }
+
+    // Next, update dirty collection nodes.
     for (let element of this.dirtyNodes) {
       if (element instanceof ElementNode && element.isConnected) {
         element.updateNode();
@@ -424,6 +446,7 @@ export class Document<T, C extends BaseCollection<T> = BaseCollection<T>> extend
 
     this.dirtyNodes.clear();
 
+    // Finally, update the collection.
     if (this.mutatedNodes.size || this.collectionMutated) {
       let collection = this.getMutableCollection();
       for (let element of this.mutatedNodes) {
@@ -442,13 +465,21 @@ export class Document<T, C extends BaseCollection<T> = BaseCollection<T>> extend
   queueUpdate(): void {
     // Don't emit any updates if there is a transaction in progress.
     // queueUpdate should be called again after the transaction.
-    if (this.dirtyNodes.size === 0 || this.transactionCount > 0) {
+    if (this.dirtyNodes.size === 0 || this.transactionCount > 0 || this.queuedRender) {
       return;
     }
 
+    // Only trigger subscriptions once during an update, when the first item changes.
+    // React's useSyncExternalStore will call getCollection immediately, to check whether the snapshot changed.
+    // If so, React will queue a render to happen after the current commit to our fake DOM finishes.
+    // We track whether getCollection is called in a subscription, and once it is called during render,
+    // we reset queuedRender back to false.
+    this.queuedRender = true;
+    this.inSubscription = true;
     for (let fn of this.subscriptions) {
       fn();
     }
+    this.inSubscription = false;
   }
 
   subscribe(fn: () => void) {

packages/@react-aria/slider/stories/StoryMultiSlider.tsx

@@ -59,7 +59,7 @@ export function StoryMultiSlider(props: StoryMultiSliderProps) {
       <div ref={trackRef} className={styles.track} {...trackProps}>
         <div className={styles.rail} />
         {React.Children.map(children, ((child, index) =>
-          React.cloneElement(child as React.ReactNode, {
+          React.cloneElement(child as React.ReactElement, {
             __context: {
               sliderProps: props,
               state,

packages/@react-aria/table/src/TableKeyboardDelegate.ts

@@ -178,6 +178,13 @@ export class TableKeyboardDelegate<T> extends GridKeyboardDelegate<T, TableColle
         return null;
       }
 
+      if (item.textValue) {
+        let substring = item.textValue.slice(0, search.length);
+        if (this.collator.compare(substring, search) === 0) {
+          return item.key;
+        }
+      }
+
       // Check each of the row header cells in this row for a match
       for (let cell of getChildNodes(item, this.collection)) {
         let column = collection.columns[cell.index];

packages/@react-stately/toast/src/useToastState.ts

@@ -57,8 +57,8 @@ export interface ToastState<T> {
  * of actions, errors, or other events in an application.
  */
 export function useToastState<T>(props: ToastStateProps = {}): ToastState<T> {
-  let {maxVisibleToasts = 1} = props;
-  let queue = useMemo(() => new ToastQueue<T>({maxVisibleToasts}), [maxVisibleToasts]);
+  let {maxVisibleToasts = 1, wrapUpdate} = props;
+  let queue = useMemo(() => new ToastQueue<T>({maxVisibleToasts, wrapUpdate}), [maxVisibleToasts, wrapUpdate]);
   return useToastQueue(queue);
 }
 

packages/@react-stately/toast/test/useToastState.test.js

@@ -217,4 +217,28 @@ describe('useToastState', () => {
     expect(result.current.visibleToasts.length).toBe(1);
     expect(result.current.visibleToasts[0].content).toBe(newValue[0].content);
   });
+
+  it('should use provided wrapUpdate', () => {
+    let wrapUpdate = jest.fn(fn => fn());
+
+    let {result} = renderHook(() => useToastState({wrapUpdate}));
+    expect(result.current.visibleToasts).toStrictEqual([]);
+
+    act(() => {result.current.add(newValue[0].content, newValue[0].props);});
+    expect(result.current.visibleToasts[0].content).toBe(newValue[0].content);
+
+    expect(wrapUpdate).toHaveBeenCalledTimes(1);
+
+    act(() => {result.current.add('Second Toast');});
+    expect(result.current.visibleToasts.length).toBe(1);
+    expect(result.current.visibleToasts[0].content).toBe('Second Toast');
+
+    expect(wrapUpdate).toHaveBeenCalledTimes(2);
+
+    act(() => {result.current.close(result.current.visibleToasts[0].key);});
+    expect(result.current.visibleToasts.length).toBe(1);
+    expect(result.current.visibleToasts[0].content).toBe(newValue[0].content);
+
+    expect(wrapUpdate).toHaveBeenCalledTimes(3);
+  });
 });

packages/react-aria-components/package.json

@@ -45,6 +45,7 @@
     "@react-aria/focus": "^3.20.1",
     "@react-aria/interactions": "^3.24.1",
     "@react-aria/live-announcer": "^3.4.1",
+    "@react-aria/ssr": "^3.9.7",
     "@react-aria/toolbar": "3.0.0-beta.14",
     "@react-aria/utils": "^3.28.1",
     "@react-aria/virtualizer": "^4.1.3",

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

@@ -23,13 +23,14 @@ export const SeparatorContext = createContext<ContextValue<SeparatorProps, HTMLE
 export const Separator = /*#__PURE__*/ createLeafComponent('separator', function Separator(props: SeparatorProps, ref: ForwardedRef<HTMLElement>) {
   [props, ref] = useContextProps(props, ref, SeparatorContext);
 
-  let {elementType, orientation, style, className} = props;
+  let {elementType, orientation, style, className, slot, ...otherProps} = props;
   let Element = (elementType as ElementType) || 'hr';
   if (Element === 'hr' && orientation === 'vertical') {
     Element = 'div';
   }
 
   let {separatorProps} = useSeparator({
+    ...otherProps,
     elementType,
     orientation
   });
@@ -41,6 +42,6 @@ export const Separator = /*#__PURE__*/ createLeafComponent('separator', function
       style={style}
       className={className ?? 'react-aria-Separator'}
       ref={ref}
-      slot={props.slot || undefined} />
+      slot={slot || undefined} />
   );
 });

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

@@ -912,7 +912,7 @@ export interface TableBodyRenderProps {
   isDropTarget: boolean
 }
 
-export interface TableBodyProps<T> extends CollectionProps<T>, StyleRenderProps<TableBodyRenderProps> {
+export interface TableBodyProps<T> extends Omit<CollectionProps<T>, 'disabledKeys'>, StyleRenderProps<TableBodyRenderProps> {
   /** Provides content to display when there are no rows in the table. */
   renderEmptyState?: (props: TableBodyRenderProps) => ReactNode
 }

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

@@ -18,6 +18,7 @@ import {forwardRefType} from '@react-types/shared';
 import {QueuedToast, ToastQueue, ToastState, useToastQueue} from 'react-stately';
 import React, {createContext, ForwardedRef, forwardRef, HTMLAttributes, JSX, ReactElement, useContext} from 'react';
 import {TextContext} from './Text';
+import {useIsSSR} from '@react-aria/ssr';
 import {useObjectRef} from '@react-aria/utils';
 
 const ToastStateContext = createContext<ToastState<any> | null>(null);
@@ -41,13 +42,19 @@ export interface ToastRegionProps<T> extends AriaToastRegionProps, StyleRenderPr
   /** The queue of toasts to display. */
   queue: ToastQueue<T>,
   /** A function to render each toast. */
-  children: (renderProps: {toast: QueuedToast<T>}) => ReactElement
+  children: (renderProps: {toast: QueuedToast<T>}) => ReactElement,
+  /**
+   * The container element in which the toast region portal will be placed.
+   * @default document.body
+   */
+  portalContainer?: Element
 }
 
 /**
  * A ToastRegion displays one or more toast notifications.
  */
 export const ToastRegion = /*#__PURE__*/ (forwardRef as forwardRefType)(function ToastRegion<T>(props: ToastRegionProps<T>, ref: ForwardedRef<HTMLDivElement>): JSX.Element | null {
+  let isSSR = useIsSSR();
   let state = useToastQueue(props.queue);
   let objectRef = useObjectRef(ref);
   let {regionProps} = useToastRegion(props, state, objectRef);
@@ -64,6 +71,8 @@ export const ToastRegion = /*#__PURE__*/ (forwardRef as forwardRefType)(function
     }
   });
 
+  let {portalContainer = isSSR ? null : document.body} = props;
+
   let region = (
     <ToastStateContext.Provider value={state}>
       <div
@@ -77,8 +86,8 @@ export const ToastRegion = /*#__PURE__*/ (forwardRef as forwardRefType)(function
     </ToastStateContext.Provider>
   );
 
-  return state.visibleToasts.length > 0 && typeof document !== 'undefined'
-    ? createPortal(region, document.body)
+  return state.visibleToasts.length > 0 && portalContainer
+    ? createPortal(region, portalContainer)
     : null;
 });
 

packages/react-aria-components/stories/ComboBox.stories.tsx

@@ -10,9 +10,9 @@
  * governing permissions and limitations under the License.
  */
 
-import {Button, ComboBox, Input, Label, ListBox, Popover} from 'react-aria-components';
+import {Button, ComboBox, Input, Label, ListBox, ListLayout, Popover, useFilter, Virtualizer} from 'react-aria-components';
 import {MyListBoxItem} from './utils';
-import React from 'react';
+import React, {useMemo, useState} from 'react';
 import styles from '../example/index.css';
 import {useAsyncList} from 'react-stately';
 
@@ -207,3 +207,32 @@ export const ComboBoxImeExample = () => (
     </Popover>
   </ComboBox>
 );
+
+let manyItems = [...Array(10000)].map((_, i) => ({id: i, name: `Item ${i}`}));
+
+export const VirtualizedComboBox = () => {
+  const [searchTerm, setSearchTerm] = useState('');
+  const {contains} = useFilter({sensitivity: 'base'});
+  const filteredItems = useMemo(() => {
+    return manyItems.filter((item) => contains(item.name, searchTerm));
+  }, [searchTerm, contains]);
+
+  return (
+    <ComboBox items={filteredItems} inputValue={searchTerm} onInputChange={setSearchTerm}>
+      <Label style={{display: 'block'}}>Test</Label>
+      <div style={{display: 'flex'}}>
+        <Input />
+        <Button>
+          <span aria-hidden="true" style={{padding: '0 2px'}}>▼</span>
+        </Button>
+      </div>
+      <Popover>
+        <Virtualizer layout={ListLayout} layoutOptions={{rowHeight: 25}}>
+          <ListBox className={styles.menu}>
+            {(item: any) => <MyListBoxItem>{item.name}</MyListBoxItem>}
+          </ListBox>
+        </Virtualizer>
+      </Popover>
+    </ComboBox>
+  );
+};