react-aria-components 1.0.0-alpha.2 → 1.0.0-alpha.4

package/src/Table.tsx

@@ -1,9 +1,9 @@
 import {AriaLabelingProps} from '@react-types/shared';
-import {BaseCollection, CollectionContext, CollectionProps, CollectionRendererContext, ItemRenderProps, NodeValue, useCachedChildren, useCollection, useCollectionChildren} from './Collection';
+import {BaseCollection, CollectionContext, CollectionProps, CollectionRendererContext, ItemRenderProps, NodeValue, useCachedChildren, useCollection, useCollectionChildren, useCollectionItemRef} from './Collection';
 import {buildHeaderRows} from '@react-stately/table';
 import {ButtonContext} from './Button';
 import {CheckboxContext} from './Checkbox';
-import {ContextValue, defaultSlot, Provider, RenderProps, SlotProps, StyleRenderProps, useContextProps, useRenderProps} from './utils';
+import {ContextValue, defaultSlot, forwardRefType, Provider, RenderProps, SlotProps, StyleProps, StyleRenderProps, useContextProps, useRenderProps} from './utils';
 import {DisabledBehavior, DraggableCollectionState, DroppableCollectionState, Node, SelectionBehavior, SelectionMode, SortDirection, TableState, useTableState} from 'react-stately';
 import {DragAndDropHooks, DropIndicator, DropIndicatorContext, DropIndicatorProps} from './useDragAndDrop';
 import {DraggableItemResult, DragPreviewRenderer, DropIndicatorAria, DroppableCollectionResult, FocusScope, ListKeyboardDelegate, mergeProps, useFocusRing, useHover, useTable, useTableCell, useTableColumnHeader, useTableHeaderRow, useTableRow, useTableRowGroup, useTableSelectAllCheckbox, useTableSelectionCheckbox, useVisuallyHidden} from 'react-aria';
@@ -316,7 +316,7 @@ function Table(props: TableProps, ref: ForwardedRef<HTMLTableElement>) {
       <Provider
         values={[
           [InternalTableContext, {state, dragAndDropHooks, dragState, dropState}],
-          [DropIndicatorContext, {render: TableDropIndicator}]
+          [DropIndicatorContext, {render: TableDropIndicatorWrapper}]
         ]}>
         <FocusScope>
           <table
@@ -368,17 +368,14 @@ export function useTableOptions(): TableOptionsContextValue {
   return useContext(TableOptionsContext)!;
 }
 
-export interface TableHeaderProps<T> {
+export interface TableHeaderProps<T> extends StyleProps {
   /** A list of table columns. */
   columns?: T[],
   /** A list of `Column(s)` or a function. If the latter, a list of columns must be provided using the `columns` prop. */
   children?: ReactNode | ((item: T) => ReactElement)
 }
 
-/**
- * A header within a `<Table>`, containing the table columns.
- */
-export function TableHeader<T extends object>(props: TableHeaderProps<T>) {
+function TableHeader<T extends object>(props: TableHeaderProps<T>, ref: ForwardedRef<HTMLTableSectionElement>) {
   let children = useCollectionChildren({
     children: props.children,
     items: props.columns
@@ -388,11 +385,17 @@ export function TableHeader<T extends object>(props: TableHeaderProps<T>) {
   return (
     <CollectionRendererContext.Provider value={renderer}>
       {/* @ts-ignore */}
-      <tableheader multiple={props}>{children}</tableheader>
+      <tableheader ref={useCollectionItemRef(props, ref)}>{children}</tableheader>
     </CollectionRendererContext.Provider>
   );
 }
 
+/**
+ * A header within a `<Table>`, containing the table columns.
+ */
+const _TableHeader = /*#__PURE__*/ (forwardRef as forwardRefType)(TableHeader);
+export {_TableHeader as TableHeader};
+
 export interface ColumnRenderProps {
   /**
    * Whether the item is currently focused.
@@ -430,10 +433,7 @@ export interface ColumnProps<T = object> extends RenderProps<ColumnRenderProps>
   textValue?: string
 }
 
-/**
- * A column within a `<Table>`.
- */
-export function Column<T extends object>(props: ColumnProps<T>): JSX.Element {
+function Column<T extends object>(props: ColumnProps<T>, ref: ForwardedRef<HTMLTableCellElement>): JSX.Element {
   let render = useContext(CollectionRendererContext);
   let childColumns = typeof render === 'function' ? render : props.children;
   let children = useCollectionChildren({
@@ -442,9 +442,15 @@ export function Column<T extends object>(props: ColumnProps<T>): JSX.Element {
   });
 
   // @ts-ignore
-  return <column multiple={{...props, rendered: props.title ?? props.children}}>{children}</column>;
+  return <column ref={useCollectionItemRef(props, ref, props.title ?? props.children)}>{children}</column>;
 }
 
+/**
+ * A column within a `<Table>`.
+ */
+const _Column = /*#__PURE__*/ (forwardRef as forwardRefType)(Column);
+export {_Column as Column};
+
 export interface TableBodyRenderProps {
   /**
    * Whether the table body has no rows and should display its empty state.
@@ -458,16 +464,19 @@ export interface TableBodyProps<T> extends CollectionProps<T>, StyleRenderProps<
   renderEmptyState?: () => ReactNode
 }
 
-/**
- * The body of a `<Table>`, containing the table rows.
- */
-export function TableBody<T extends object>(props: TableBodyProps<T>) {
+function TableBody<T extends object>(props: TableBodyProps<T>, ref: ForwardedRef<HTMLTableSectionElement>) {
   let children = useCollectionChildren(props);
 
   // @ts-ignore
-  return <tablebody multiple={props}>{children}</tablebody>;
+  return <tablebody ref={useCollectionItemRef(props, ref)}>{children}</tablebody>;
 }
 
+/**
+ * The body of a `<Table>`, containing the table rows.
+ */
+const _TableBody = /*#__PURE__*/ (forwardRef as forwardRefType)(TableBody);
+export {_TableBody as TableBody};
+
 export interface RowRenderProps extends ItemRenderProps {}
 
 export interface RowProps<T> extends RenderProps<RowRenderProps> {
@@ -480,10 +489,7 @@ export interface RowProps<T> extends RenderProps<RowRenderProps> {
   textValue?: string
 }
 
-/**
- * A row within a `<Table>`.
- */
-export function Row<T extends object>(props: RowProps<T>) {
+function Row<T extends object>(props: RowProps<T>, ref: ForwardedRef<HTMLTableRowElement>) {
   let children = useCollectionChildren({
     children: props.children,
     items: props.columns,
@@ -494,7 +500,7 @@ export function Row<T extends object>(props: RowProps<T>) {
 
   return (
     // @ts-ignore
-    <item multiple={props}>
+    <item ref={useCollectionItemRef(props, ref)}>
       <CollectionContext.Provider value={ctx}>
         {children}
       </CollectionContext.Provider>
@@ -503,6 +509,12 @@ export function Row<T extends object>(props: RowProps<T>) {
   );
 }
 
+/**
+ * A row within a `<Table>`.
+ */
+const _Row = /*#__PURE__*/ (forwardRef as forwardRefType)(Row);
+export {_Row as Row};
+
 export interface CellRenderProps {
   /**
    * Whether the cell is currently in a pressed state.
@@ -529,13 +541,16 @@ export interface CellProps extends RenderProps<CellRenderProps> {
   textValue?: string
 }
 
+function Cell(props: CellProps, ref: ForwardedRef<HTMLTableCellElement>): JSX.Element {
+  // @ts-ignore
+  return <cell ref={useCollectionItemRef(props, ref, props.children)} />;
+}
+
 /**
  * A cell within a table row.
  */
-export function Cell(props: CellProps): JSX.Element {
-  // @ts-ignore
-  return <cell multiple={{...props, rendered: props.children}} />;
-}
+const _Cell = forwardRef(Cell);
+export {_Cell as Cell};
 
 function TableHeaderRowGroup<T>({collection}: {collection: TableCollection<T>}) {
   let headerRows = useCachedChildren({
@@ -555,6 +570,7 @@ function TableHeaderRowGroup<T>({collection}: {collection: TableCollection<T>})
     <thead
       {...filterDOMProps(collection.head.props)}
       {...rowGroupProps}
+      ref={collection.head.props.ref}
       className={collection.head.props.className ?? 'react-aria-TableHeader'}
       style={collection.head.props.style}>
       {headerRows}
@@ -600,8 +616,9 @@ function TableBodyRowGroup<T>({collection, isDroppable}: {collection: TableColle
   let {rowGroupProps} = useTableRowGroup();
   return (
     <tbody
+      {...mergeProps(filterDOMProps(props as any), rowGroupProps)}
       {...renderProps}
-      {...rowGroupProps}
+      ref={collection.body.props.ref}
       data-empty={collection.size === 0 || undefined}>
       {isDroppable && <RootDropIndicator />}
       {bodyRows}
@@ -645,7 +662,7 @@ function TableHeaderRow<T>({item}: {item: GridNode<T>}) {
 }
 
 function TableColumnHeader<T>({column}: {column: GridNode<T>}) {
-  let ref = useRef<HTMLTableHeaderCellElement>(null);
+  let ref = useObjectRef<HTMLTableHeaderCellElement>(column.props.ref);
   let {state} = useContext(InternalTableContext)!;
   let {columnHeaderProps} = useTableColumnHeader(
     {node: column},
@@ -672,7 +689,7 @@ function TableColumnHeader<T>({column}: {column: GridNode<T>}) {
 
   return (
     <th
-      {...mergeProps(columnHeaderProps, focusProps)}
+      {...mergeProps(filterDOMProps(props as any), columnHeaderProps, focusProps)}
       {...renderProps}
       colSpan={column.colspan}
       ref={ref}
@@ -684,7 +701,7 @@ function TableColumnHeader<T>({column}: {column: GridNode<T>}) {
 }
 
 function TableRow<T>({item}: {item: GridNode<T>}) {
-  let ref = useRef<HTMLTableRowElement>(null);
+  let ref = useObjectRef<HTMLTableRowElement>(item.props.ref);
   let {state, dragAndDropHooks, dragState, dropState} = useContext(InternalTableContext)!;
   let {rowProps, ...states} = useTableRow(
     {
@@ -770,7 +787,7 @@ function TableRow<T>({item}: {item: GridNode<T>}) {
         </tr>
       )}
       <tr
-        {...mergeProps(rowProps, focusProps, hoverProps, draggableItem?.dragProps)}
+        {...mergeProps(filterDOMProps(props as any), rowProps, focusProps, hoverProps, draggableItem?.dragProps)}
         {...renderProps}
         ref={ref}
         data-hovered={isHovered || undefined}
@@ -810,7 +827,7 @@ function TableRow<T>({item}: {item: GridNode<T>}) {
 }
 
 function TableCell<T>({cell}: {cell: GridNode<T>}) {
-  let ref = useRef<HTMLTableCellElement>(null);
+  let ref = useObjectRef<HTMLTableCellElement>(cell.props.ref);
   let {state, dragState} = useContext(InternalTableContext)!;
 
   // @ts-ignore
@@ -836,20 +853,20 @@ function TableCell<T>({cell}: {cell: GridNode<T>}) {
 
   return (
     <td
-      {...mergeProps(gridCellProps, focusProps)}
+      {...mergeProps(filterDOMProps(props as any), gridCellProps, focusProps)}
       {...renderProps}
       ref={ref}
       data-focused={isFocused || undefined}
       data-focus-visible={isFocusVisible || undefined}
       data-pressed={isPressed || undefined}>
-      {cell.rendered}
+      {renderProps.children}
     </td>
   );
 }
 
-function TableDropIndicator(props: DropIndicatorProps, ref: ForwardedRef<HTMLElement>) {
+function TableDropIndicatorWrapper(props: DropIndicatorProps, ref: ForwardedRef<HTMLElement>) {
   ref = useObjectRef(ref);
-  let {state, dragAndDropHooks, dropState} = useContext(InternalTableContext)!;
+  let {dragAndDropHooks, dropState} = useContext(InternalTableContext)!;
   let buttonRef = useRef<HTMLDivElement>(null);
   let {dropIndicatorProps, isHidden, isDropTarget} = dragAndDropHooks!.useDropIndicator!(
     props,
@@ -857,15 +874,33 @@ function TableDropIndicator(props: DropIndicatorProps, ref: ForwardedRef<HTMLEle
     buttonRef
   );
 
-  let {visuallyHiddenProps} = useVisuallyHidden();
-
   if (isHidden) {
     return null;
   }
 
-  // eslint-disable-next-line react-hooks/rules-of-hooks
+  return (
+    <TableDropIndicatorForwardRef {...props} dropIndicatorProps={dropIndicatorProps} isDropTarget={isDropTarget} buttonRef={buttonRef} ref={ref} />
+  );
+}
+
+interface TableDropIndicatorProps extends DropIndicatorProps {
+  dropIndicatorProps: React.HTMLAttributes<HTMLElement>,
+  isDropTarget: boolean,
+  buttonRef: RefObject<HTMLDivElement>
+}
+
+function TableDropIndicator(props: TableDropIndicatorProps, ref: ForwardedRef<HTMLElement>) {
+  let {
+    dropIndicatorProps,
+    isDropTarget,
+    buttonRef,
+    ...otherProps
+  } = props;
+
+  let {state} = useContext(InternalTableContext)!;
+  let {visuallyHiddenProps} = useVisuallyHidden();
   let renderProps = useRenderProps({
-    ...props,
+    ...otherProps,
     defaultClassName: 'react-aria-DropIndicator',
     values: {
       isDropTarget
@@ -874,6 +909,7 @@ function TableDropIndicator(props: DropIndicatorProps, ref: ForwardedRef<HTMLEle
 
   return (
     <tr
+      {...filterDOMProps(props as any)}
       {...renderProps}
       role="row"
       ref={ref as RefObject<HTMLTableRowElement>}
@@ -888,6 +924,8 @@ function TableDropIndicator(props: DropIndicatorProps, ref: ForwardedRef<HTMLEle
   );
 }
 
+const TableDropIndicatorForwardRef = forwardRef(TableDropIndicator);
+
 function RootDropIndicator() {
   let {state, dragAndDropHooks, dropState} = useContext(InternalTableContext)!;
   let ref = useRef<HTMLDivElement>(null);

package/src/Tabs.tsx

@@ -14,9 +14,9 @@ import {AriaLabelingProps} from '@react-types/shared';
 import {AriaTabListProps, AriaTabPanelProps, mergeProps, Orientation, useFocusRing, useHover, useTab, useTabList, useTabPanel} from 'react-aria';
 import {CollectionProps, Item, useCollection} from './Collection';
 import {ContextValue, forwardRefType, RenderProps, SlotProps, StyleRenderProps, useContextProps, useRenderProps} from './utils';
+import {filterDOMProps, useObjectRef} from '@react-aria/utils';
 import {Node, TabListState, useTabListState} from 'react-stately';
-import React, {createContext, ForwardedRef, forwardRef, Key, useContext, useEffect, useState} from 'react';
-import {useObjectRef} from '@react-aria/utils';
+import React, {createContext, ForwardedRef, forwardRef, Key, useContext, useEffect, useMemo, useState} from 'react';
 
 export interface TabsProps extends RenderProps<TabsRenderProps>, SlotProps {
   /**
@@ -107,24 +107,24 @@ const InternalTabsContext = createContext<InternalTabsContextValue | null>(null)
 function Tabs(props: TabsProps, ref: ForwardedRef<HTMLDivElement>) {
   [props, ref] = useContextProps(props, ref, TabsContext);
   let {orientation = 'horizontal'} = props;
+  let values = useMemo(() => ({orientation}), [orientation]);
   let [state, setState] = useState<TabListState<unknown> | null>(null);
 
   let renderProps = useRenderProps({
     ...props,
     defaultClassName: 'react-aria-Tabs',
-    values: {
-      orientation
-    }
+    values
   });
 
   return (
     <div
+      {...filterDOMProps(props as any)}
       {...renderProps}
       ref={ref}
       slot={props.slot}
       data-orientation={orientation}>
       <InternalTabsContext.Provider value={{state, setState, orientation}}>
-        {props.children}
+        {renderProps.children}
       </InternalTabsContext.Provider>
     </div>
   );
@@ -166,9 +166,12 @@ function TabList<T extends object>(props: TabListProps<T>, ref: ForwardedRef<HTM
     }
   });
 
+  let DOMProps = filterDOMProps(props);
+  delete DOMProps.id;
+
   return (
     <>
-      <div {...tabListProps} ref={objectRef} {...renderProps}>
+      <div {...DOMProps} {...tabListProps} ref={objectRef} {...renderProps}>
         {[...state.collection].map((item) => (
           <TabInner
             key={item.key}
@@ -185,20 +188,23 @@ function TabList<T extends object>(props: TabListProps<T>, ref: ForwardedRef<HTM
  * A TabList is used within Tabs to group tabs that a user can switch between.
  * The ids of the items within the <TabList> must match up with a corresponding item inside the <TabPanels>.
  */
-const _TabList = (forwardRef as forwardRefType)(TabList);
+const _TabList = /*#__PURE__*/ (forwardRef as forwardRefType)(TabList);
 export {_TabList as TabList};
 
+function Tab(props: TabProps, ref: ForwardedRef<HTMLDivElement>) {
+  // @ts-ignore
+  return <Item {...props} ref={ref} />;
+}
+
 /**
  * A Tab provides a title for an individual item within a TabList.
  */
-export function Tab(props: TabProps): JSX.Element {
-  // @ts-ignore
-  return Item(props);
-}
+const _Tab = forwardRef(Tab);
+export {_Tab as Tab};
 
 function TabInner({item, state}: {item: Node<object>, state: TabListState<object>}) {
   let {key} = item;
-  let ref = React.useRef<HTMLDivElement>(null);
+  let ref = useObjectRef<HTMLDivElement>(item.props.ref);
   let {tabProps, isSelected, isDisabled, isPressed} = useTab({key}, state, ref);
   let {focusProps, isFocused, isFocusVisible} = useFocusRing();
   let {hoverProps, isHovered} = useHover({
@@ -219,9 +225,12 @@ function TabInner({item, state}: {item: Node<object>, state: TabListState<object
     }
   });
 
+  let DOMProps = filterDOMProps(item.props);
+  delete DOMProps.id;
+
   return (
     <div
-      {...mergeProps(tabProps, focusProps, hoverProps, renderProps)}
+      {...mergeProps(DOMProps, tabProps, focusProps, hoverProps, renderProps)}
       ref={ref}
       data-focus-visible={isFocusVisible || undefined}
       data-pressed={isPressed || undefined}
@@ -250,16 +259,19 @@ export function TabPanels<T extends object>(props: TabPanelsProps<T>) {
   );
 }
 
+function TabPanel(props: TabPanelProps, ref: ForwardedRef<HTMLDivElement>) {
+  return <Item {...props} ref={ref} />;
+}
+
 /**
  * A TabPanel provides the content for a tab.
  */
-export function TabPanel(props: TabPanelProps): JSX.Element {
-  return Item(props);
-}
+const _TabPanel = forwardRef(TabPanel);
+export {_TabPanel as TabPanel};
 
 function SelectedTabPanel({item}: {item: Node<object>}) {
   const {state} = useContext(InternalTabsContext)!;
-  let ref = React.useRef<HTMLDivElement>(null);
+  let ref = useObjectRef<HTMLDivElement>(item.props.ref);
   let {tabPanelProps} = useTabPanel(item.props, state!, ref);
   let {focusProps, isFocused, isFocusVisible} = useFocusRing();
 
@@ -273,9 +285,12 @@ function SelectedTabPanel({item}: {item: Node<object>}) {
     }
   });
 
+  let DOMProps = filterDOMProps(item.props);
+  delete DOMProps.id;
+
   return (
     <div
-      {...mergeProps(tabPanelProps, focusProps, renderProps)}
+      {...mergeProps(DOMProps, tabPanelProps, focusProps, renderProps)}
       ref={ref}
       data-focus-visible={isFocusVisible || undefined} />
   );

package/src/index.ts

@@ -55,7 +55,7 @@ export type {BreadcrumbsProps} from './Breadcrumbs';
 export type {ButtonProps, ButtonRenderProps} from './Button';
 export type {CalendarCellProps, CalendarProps, CalendarGridProps, CalendarGridHeaderProps, CalendarGridBodyProps, CalendarHeaderCellProps, CalendarCellRenderProps, RangeCalendarProps} from './Calendar';
 export type {CheckboxGroupProps, CheckboxGroupRenderProps, CheckboxRenderProps, CheckboxProps} from './Checkbox';
-export type {ComboBoxProps} from './ComboBox';
+export type {ComboBoxProps, ComboBoxRenderProps} from './ComboBox';
 export type {DateFieldProps, DateInputProps, DateInputRenderProps, DateSegmentProps, DateSegmentRenderProps, TimeFieldProps} from './DateField';
 export type {DatePickerProps, DateRangePickerProps} from './DatePicker';
 export type {DialogProps, DialogTriggerProps} from './Dialog';
@@ -77,7 +77,7 @@ export type {PopoverProps, PopoverRenderProps} from './Popover';
 export type {ProgressBarProps, ProgressBarRenderProps} from './ProgressBar';
 export type {RadioGroupProps, RadioGroupRenderProps, RadioProps, RadioRenderProps} from './RadioGroup';
 export type {SearchFieldProps, SearchFieldRenderProps} from './SearchField';
-export type {SelectProps, SelectValueProps, SelectValueRenderProps} from './Select';
+export type {SelectProps, SelectValueProps, SelectValueRenderProps, SelectRenderProps} from './Select';
 export type {SeparatorProps} from './Separator';
 export type {SliderOutputProps, SliderProps, SliderRenderProps, SliderThumbProps, SliderTrackProps, SliderThumbRenderProps} from './Slider';
 export type {SwitchProps, SwitchRenderProps} from './Switch';
@@ -87,7 +87,7 @@ export type {TextFieldProps} from './TextField';
 export type {TextProps} from './Text';
 export type {ToggleButtonProps, ToggleButtonRenderProps} from './ToggleButton';
 export type {TooltipProps, TooltipRenderProps, TooltipTriggerComponentProps} from './Tooltip';
-export type {DragAndDropHooks, DragAndDropOptions} from './useDragAndDrop';
+export type {DragAndDropHooks, DragAndDropOptions, DropIndicatorProps} from './useDragAndDrop';
 
 export type {DateValue, DateRange, TimeValue} from 'react-aria';
 export type {DirectoryDropItem, DraggableCollectionEndEvent, DraggableCollectionMoveEvent, DraggableCollectionStartEvent, DragPreviewRenderer, DragTypes, DropItem, DropOperation, DroppableCollectionDropEvent, DroppableCollectionEnterEvent, DroppableCollectionExitEvent, DroppableCollectionInsertDropEvent, DroppableCollectionMoveEvent, DroppableCollectionOnItemDropEvent, DroppableCollectionReorderEvent, DroppableCollectionRootDropEvent, DropPosition, DropTarget, FileDropItem, ItemDropTarget, RootDropTarget, TextDropItem} from 'react-aria';

package/src/utils.tsx

@@ -11,8 +11,9 @@
  */
 
 import {AriaLabelingProps, DOMProps as SharedDOMProps} from '@react-types/shared';
-import {filterDOMProps, mergeProps, mergeRefs, useLayoutEffect, useObjectRef} from '@react-aria/utils';
-import React, {createContext, CSSProperties, ReactNode, RefCallback, RefObject, useCallback, useContext, useEffect, useRef, useState} from 'react';
+import {mergeProps, mergeRefs, useLayoutEffect, useObjectRef} from '@react-aria/utils';
+import React, {createContext, CSSProperties, ReactNode, RefCallback, RefObject, useCallback, useContext, useEffect, useMemo, useRef, useState} from 'react';
+import ReactDOM from 'react-dom';
 
 // Override forwardRef types so generics work.
 declare function forwardRef<T, P = {}>(
@@ -59,7 +60,7 @@ export function Provider<A, B, C, D, E, F, G, H>({values, children}: ProviderPro
 export interface StyleProps {
   /** The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. */
   className?: string,
-  /** The inline [style](https://developer.mozilla.org/en-US/docs/Web/API/Element/style) for the element. */
+  /** The inline [style](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style) for the element. */
   style?: CSSProperties
 }
 
@@ -71,7 +72,7 @@ export interface DOMProps extends StyleProps {
 export interface StyleRenderProps<T> {
   /** The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. A function may be provided to compute the class based on component state. */
   className?: string | ((values: T) => string),
-  /** The inline [style](https://developer.mozilla.org/en-US/docs/Web/API/Element/style) for the element. A function may be provided to compute the style based on component state. */
+  /** The inline [style](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style) for the element. A function may be provided to compute the style based on component state. */
   style?: CSSProperties | ((values: T) => CSSProperties)
 }
 
@@ -86,28 +87,47 @@ interface RenderPropsHookOptions<T> extends RenderProps<T>, SharedDOMProps, Aria
   defaultClassName?: string
 }
 
-export function useRenderProps<T>({className, style, children, defaultClassName, defaultChildren, values, ...otherProps}: RenderPropsHookOptions<T>) {
-  if (typeof className === 'function') {
-    className = className(values);
-  }
+export function useRenderProps<T>(props: RenderPropsHookOptions<T>) {
+  let {
+    className,
+    style,
+    children,
+    defaultClassName,
+    defaultChildren,
+    values
+  } = props;
+
+  return useMemo(() => {
+    let computedClassName: string | undefined;
+    let computedStyle: React.CSSProperties | undefined;
+    let computedChildren: React.ReactNode | undefined;
+
+    if (typeof className === 'function') {
+      computedClassName = className(values);
+    } else {
+      computedClassName = className;
+    }
 
-  if (typeof style === 'function') {
-    style = style(values);
-  }
+    if (typeof style === 'function') {
+      computedStyle = style(values);
+    } else {
+      computedStyle = style;
+    }
 
-  if (typeof children === 'function') {
-    children = children(values);
-  } else if (children == null) {
-    children = defaultChildren;
-  }
+    if (typeof children === 'function') {
+      computedChildren = children(values);
+    } else if (children == null) {
+      computedChildren = defaultChildren;
+    } else {
+      computedChildren = children;
+    }
 
-  delete otherProps.id;
-  return {
-    ...filterDOMProps(otherProps),
-    className: className ?? defaultClassName,
-    style,
-    children
-  };
+    return {
+      className: computedClassName ?? defaultClassName,
+      style: computedStyle,
+      children: computedChildren
+    };
+  }, [className, style, children, defaultClassName, defaultChildren, values]);
 }
 
 export type WithRef<T, E> = T & {ref?: React.ForwardedRef<E>};
@@ -216,7 +236,7 @@ function useAnimation(ref: RefObject<HTMLElement>, isActive: boolean, onEnd: ()
         let onAnimationEnd = (e: AnimationEvent) => {
           if (e.target === ref.current) {
             element.removeEventListener('animationend', onAnimationEnd);
-            onEnd();
+            ReactDOM.flushSync(() => {onEnd();});
           }
         };