react-aria-components 1.0.0-rc.0 → 1.0.0

package/src/Switch.tsx

@@ -10,10 +10,10 @@
  * governing permissions and limitations under the License.
  */
 
-import {AriaSwitchProps, HoverEvents, mergeProps, useFocusRing, useHover, usePress, useSwitch, VisuallyHidden} from 'react-aria';
+import {AriaSwitchProps, HoverEvents, mergeProps, useFocusRing, useHover, useSwitch, VisuallyHidden} from 'react-aria';
 import {ContextValue, forwardRefType, removeDataAttributes, RenderProps, SlotProps, useContextProps, useRenderProps} from './utils';
 import {filterDOMProps} from '@react-aria/utils';
-import React, {createContext, ForwardedRef, forwardRef, useState} from 'react';
+import React, {createContext, ForwardedRef, forwardRef, useRef} from 'react';
 import {ToggleState, useToggleState} from 'react-stately';
 
 export interface SwitchProps extends Omit<AriaSwitchProps, 'children'>, HoverEvents, RenderProps<SwitchRenderProps>, SlotProps {}
@@ -60,49 +60,31 @@ export interface SwitchRenderProps {
   state: ToggleState
 }
 
-export const SwitchContext = createContext<ContextValue<SwitchProps, HTMLInputElement>>(null);
+export const SwitchContext = createContext<ContextValue<SwitchProps, HTMLLabelElement>>(null);
 
-function Switch(props: SwitchProps, ref: ForwardedRef<HTMLInputElement>) {
+function Switch(props: SwitchProps, ref: ForwardedRef<HTMLLabelElement>) {
   [props, ref] = useContextProps(props, ref, SwitchContext);
+  let inputRef = useRef<HTMLInputElement>(null);
   let state = useToggleState(props);
-  let {inputProps, isSelected, isDisabled, isReadOnly, isPressed: isPressedKeyboard} = useSwitch({
+  let {labelProps, inputProps, isSelected, isDisabled, isReadOnly, isPressed} = useSwitch({
     ...removeDataAttributes(props),
     // ReactNode type doesn't allow function children.
     children: typeof props.children === 'function' ? true : props.children
-  }, state, ref);
+  }, state, inputRef);
   let {isFocused, isFocusVisible, focusProps} = useFocusRing();
   let isInteractionDisabled = props.isDisabled || props.isReadOnly;
 
-  // Handle press state for full label. Keyboard press state is returned by useSwitch
-  // since it is handled on the <input> element itself.
-  let [isPressed, setPressed] = useState(false);
-  let {pressProps} = usePress({
-    isDisabled: isInteractionDisabled,
-    onPressStart(e) {
-      if (e.pointerType !== 'keyboard') {
-        setPressed(true);
-      }
-    },
-    onPressEnd(e) {
-      if (e.pointerType !== 'keyboard') {
-        setPressed(false);
-      }
-    }
-  });
-
   let {hoverProps, isHovered} = useHover({
     ...props,
     isDisabled: isInteractionDisabled
   });
 
-  let pressed = isInteractionDisabled ? false : (isPressed || isPressedKeyboard);
-
   let renderProps = useRenderProps({
     ...props,
     defaultClassName: 'react-aria-Switch',
     values: {
       isSelected,
-      isPressed: pressed,
+      isPressed,
       isHovered,
       isFocused,
       isFocusVisible,
@@ -117,17 +99,18 @@ function Switch(props: SwitchProps, ref: ForwardedRef<HTMLInputElement>) {
 
   return (
     <label
-      {...mergeProps(DOMProps, pressProps, hoverProps, renderProps)}
+      {...mergeProps(DOMProps, labelProps, hoverProps, renderProps)}
+      ref={ref}
       slot={props.slot || undefined}
       data-selected={isSelected || undefined}
-      data-pressed={pressed || undefined}
+      data-pressed={isPressed || undefined}
       data-hovered={isHovered || undefined}
       data-focused={isFocused || undefined}
       data-focus-visible={isFocusVisible || undefined}
       data-disabled={isDisabled || undefined}
       data-readonly={isReadOnly || undefined}>
       <VisuallyHidden elementType="span">
-        <input {...inputProps} {...focusProps} ref={ref} />
+        <input {...inputProps} {...focusProps} ref={inputRef} />
       </VisuallyHidden>
       {renderProps.children}
     </label>

package/src/Table.tsx

@@ -4,7 +4,7 @@ import {buildHeaderRows, TableColumnResizeState} from '@react-stately/table';
 import {ButtonContext} from './Button';
 import {CheckboxContext} from './Checkbox';
 import {ColumnSize, ColumnStaticSize, TableCollection as ITableCollection, TableProps as SharedTableProps} from '@react-types/table';
-import {ContextValue, defaultSlot, DOMProps, forwardRefType, Provider, RenderProps, SlotProps, StyleProps, StyleRenderProps, useContextProps, useRenderProps} from './utils';
+import {ContextValue, defaultSlot, DOMProps, forwardRefType, Provider, RenderProps, ScrollableProps, SlotProps, StyleProps, StyleRenderProps, useContextProps, useRenderProps} from './utils';
 import {DisabledBehavior, DraggableCollectionState, DroppableCollectionState, Node, SelectionBehavior, SelectionMode, SortDirection, TableState, useTableColumnResizeState, useTableState} from 'react-stately';
 import {DragAndDropContext, DragAndDropHooks, DropIndicator, DropIndicatorContext, DropIndicatorProps} from './useDragAndDrop';
 import {DraggableItemResult, DragPreviewRenderer, DropIndicatorAria, DroppableCollectionResult, FocusScope, ListKeyboardDelegate, mergeProps, useFocusRing, useHover, useLocale, useLocalizedStringFormatter, useTable, useTableCell, useTableColumnHeader, useTableColumnResize, useTableHeaderRow, useTableRow, useTableRowGroup, useTableSelectAllCheckbox, useTableSelectionCheckbox, useVisuallyHidden} from 'react-aria';
@@ -12,7 +12,7 @@ import {filterDOMProps, useLayoutEffect, useObjectRef, useResizeObserver} from '
 import {GridNode} from '@react-types/grid';
 // @ts-ignore
 import intlMessages from '../intl/*.json';
-import React, {createContext, ForwardedRef, forwardRef, ReactElement, ReactNode, RefObject, useCallback, useContext, useEffect, useMemo, useRef, useState} from 'react';
+import React, {createContext, ForwardedRef, forwardRef, JSX, ReactElement, ReactNode, RefObject, useCallback, useContext, useEffect, useMemo, useRef, useState} from 'react';
 import ReactDOM from 'react-dom';
 
 class TableCollection<T> extends BaseCollection<T> implements ITableCollection<T> {
@@ -190,7 +190,7 @@ interface ResizableTableContainerContextValue {
 
 const ResizableTableContainerContext = createContext<ResizableTableContainerContextValue | null>(null);
 
-export interface ResizableTableContainerProps extends DOMProps {
+export interface ResizableTableContainerProps extends DOMProps, ScrollableProps<HTMLDivElement> {
   /**
    * Handler that is called when a user starts a column resize.
    */
@@ -235,7 +235,8 @@ function ResizableTableContainer(props: ResizableTableContainerProps, ref: Forwa
       {...filterDOMProps(props as any)}
       ref={objectRef}
       className={props.className || 'react-aria-ResizableTableContainer'}
-      style={props.style}>
+      style={props.style}
+      onScroll={props.onScroll}>
       <ResizableTableContainerContext.Provider value={ctx}>
         {props.children}
       </ResizableTableContainerContext.Provider>
@@ -272,7 +273,7 @@ export interface TableRenderProps {
   state: TableState<unknown>
 }
 
-export interface TableProps extends Omit<SharedTableProps<any>, 'children'>, StyleRenderProps<TableRenderProps>, SlotProps, AriaLabelingProps {
+export interface TableProps extends Omit<SharedTableProps<any>, 'children'>, StyleRenderProps<TableRenderProps>, SlotProps, AriaLabelingProps, ScrollableProps<HTMLTableElement> {
   /** The elements that make up the table. Includes the TableHeader, TableBody, Columns, and Rows. */
   children?: ReactNode,
   /**
@@ -287,8 +288,6 @@ export interface TableProps extends Omit<SharedTableProps<any>, 'children'>, Sty
   disabledBehavior?: DisabledBehavior,
   /** Handler that is called when a user performs an action on the row. */
   onRowAction?: (key: Key) => void,
-  /** Handler that is called when a user performs an action on the cell. */
-  onCellAction?: (key: Key) => void,
   /** The drag and drop hooks returned by `useDragAndDrop` used to enable drag and drop behavior for the Table. */
   dragAndDropHooks?: DragAndDropHooks
 }
@@ -324,7 +323,7 @@ function Table(props: TableProps, ref: ForwardedRef<HTMLTableElement>) {
   let dropState: DroppableCollectionState | undefined = undefined;
   let droppableCollection: DroppableCollectionResult | undefined = undefined;
   let isRootDropTarget = false;
-  let dragPreview: React.JSX.Element | null = null;
+  let dragPreview: JSX.Element | null = null;
   let preview = useRef<DragPreviewRenderer>(null);
 
   if (isListDraggable && dragAndDropHooks) {
@@ -416,6 +415,7 @@ function Table(props: TableProps, ref: ForwardedRef<HTMLTableElement>) {
             style={style}
             ref={ref}
             slot={props.slot || undefined}
+            onScroll={props.onScroll}
             data-allows-dragging={isListDraggable || undefined}
             data-drop-target={isRootDropTarget || undefined}
             data-focused={isFocused || undefined}
@@ -461,13 +461,16 @@ 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)
+  children?: ReactNode | ((item: T) => ReactElement),
+  /** Values that should invalidate the column cache when using dynamic collections. */
+  dependencies?: any[]
 }
 
 function TableHeader<T extends object>(props: TableHeaderProps<T>, ref: ForwardedRef<HTMLTableSectionElement>) {
   let children = useCollectionChildren({
     children: props.children,
-    items: props.columns
+    items: props.columns,
+    dependencies: props.dependencies
   });
 
   let renderer = typeof props.children === 'function' ? props.children : null;
@@ -525,12 +528,9 @@ export interface ColumnRenderProps {
   startResize(): void
 }
 
-export interface ColumnProps<T = object> extends RenderProps<ColumnRenderProps> {
+export interface ColumnProps extends RenderProps<ColumnRenderProps> {
+  /** The unique id of the column. */
   id?: Key,
-  /** Rendered contents of the column if `children` contains child columns. */
-  title?: ReactNode,
-  /** A list of child columns used when dynamically rendering nested child columns. */
-  childColumns?: Iterable<T>,
   /** Whether the column allows sorting. */
   allowsSorting?: boolean,
   /** Whether a column is a [row header](https://www.w3.org/TR/wai-aria-1.1/#rowheader) and should be announced by assistive technology during row navigation. */
@@ -547,21 +547,8 @@ export interface ColumnProps<T = object> extends RenderProps<ColumnRenderProps>
   maxWidth?: ColumnStaticSize | null
 }
 
-function Column<T extends object>(props: ColumnProps<T>, ref: ForwardedRef<HTMLTableCellElement>): React.JSX.Element | null {
-  let render = useContext(CollectionRendererContext);
-  let childColumns: ReactNode | ((item: T) => ReactNode);
-  if (typeof render === 'function') {
-    childColumns = render;
-  } else if (typeof props.children !== 'function') {
-    childColumns = props.children;
-  }
-
-  let children = useCollectionChildren({
-    children: (props.title || props.childColumns) ? childColumns : null,
-    items: props.childColumns
-  });
-
-  return useSSRCollectionNode('column', props, ref, props.title ?? props.children, children);
+function Column(props: ColumnProps, ref: ForwardedRef<HTMLTableCellElement>): JSX.Element | null {
+  return useSSRCollectionNode('column', props, ref, props.children);
 }
 
 /**
@@ -588,7 +575,7 @@ export interface TableBodyProps<T> extends CollectionProps<T>, StyleRenderProps<
   renderEmptyState?: (props: TableBodyRenderProps) => ReactNode
 }
 
-function TableBody<T extends object>(props: TableBodyProps<T>, ref: ForwardedRef<HTMLTableSectionElement>): React.JSX.Element | null {
+function TableBody<T extends object>(props: TableBodyProps<T>, ref: ForwardedRef<HTMLTableSectionElement>): JSX.Element | null {
   let children = useCollectionChildren(props);
   return useSSRCollectionNode('tablebody', props, ref, null, children);
 }
@@ -602,23 +589,30 @@ export {_TableBody as TableBody};
 export interface RowRenderProps extends ItemRenderProps {}
 
 export interface RowProps<T> extends StyleRenderProps<RowRenderProps>, LinkDOMProps {
+  /** The unique id of the row. */
   id?: Key,
   /** A list of columns used when dynamically rendering cells. */
   columns?: Iterable<T>,
   /** The cells within the row. Supports static items or a function for dynamic rendering. */
   children?: ReactNode | ((item: T) => ReactElement),
+  /** The object value that this row represents. When using dynamic collections, this is set automatically. */
+  value?: T,
+  /** Values that should invalidate the cell cache when using dynamic collections. */
+  dependencies?: any[],
   /** A string representation of the row's contents, used for features like typeahead. */
   textValue?: string
 }
 
-function Row<T extends object>(props: RowProps<T>, ref: ForwardedRef<HTMLTableRowElement>): React.JSX.Element | null {
+function Row<T extends object>(props: RowProps<T>, ref: ForwardedRef<HTMLTableRowElement>): JSX.Element | null {
+  let dependencies = [props.value].concat(props.dependencies);
   let children = useCollectionChildren({
+    dependencies,
     children: props.children,
     items: props.columns,
     idScope: props.id
   });
 
-  let ctx = useMemo(() => ({idScope: props.id}), [props.id]);
+  let ctx = useMemo(() => ({idScope: props.id, dependencies}), [props.id, ...dependencies]);
 
   return useSSRCollectionNode('item', props, ref, null, (
     <CollectionContext.Provider value={ctx}>
@@ -657,12 +651,13 @@ export interface CellRenderProps {
 }
 
 export interface CellProps extends RenderProps<CellRenderProps> {
+  /** The unique id of the cell. */
   id?: Key,
   /** A string representation of the cell's contents, used for features like typeahead. */
   textValue?: string
 }
 
-function Cell(props: CellProps, ref: ForwardedRef<HTMLTableCellElement>): React.JSX.Element | null {
+function Cell(props: CellProps, ref: ForwardedRef<HTMLTableCellElement>): JSX.Element | null {
   return useSSRCollectionNode('cell', props, ref, props.children);
 }
 
@@ -804,7 +799,6 @@ function TableColumnHeader<T>({column}: {column: GridNode<T>}) {
     ref
   );
   let {isFocused, isFocusVisible, focusProps} = useFocusRing();
-  let {hoverProps, isHovered} = useHover({});
 
   let layoutState = useContext(TableColumnResizeStateContext);
   let isResizing = false;
@@ -818,7 +812,8 @@ function TableColumnHeader<T>({column}: {column: GridNode<T>}) {
     }
   }
 
-  let props: ColumnProps<unknown> = column.props;
+  let props: ColumnProps = column.props;
+  let {hoverProps, isHovered} = useHover({isDisabled: !props.allowsSorting});
   let renderProps = useRenderProps({
     ...props,
     id: undefined,
@@ -859,6 +854,7 @@ function TableColumnHeader<T>({column}: {column: GridNode<T>}) {
       style={style}
       colSpan={column.colspan}
       ref={ref}
+      data-hovered={isHovered || undefined}
       data-focused={isFocused || undefined}
       data-focus-visible={isFocusVisible || undefined}
       data-resizing={isResizing || undefined}
@@ -909,7 +905,7 @@ function ColumnResizer(props: ColumnResizerProps, ref: ForwardedRef<HTMLDivEleme
   if (!layoutState) {
     throw new Error('Wrap your <Table> in a <ResizableTableContainer> to enable column resizing');
   }
-  let stringFormatter = useLocalizedStringFormatter(intlMessages);
+  let stringFormatter = useLocalizedStringFormatter(intlMessages, 'react-aria-components');
 
   let {onResizeStart, onResize, onResizeEnd} = useContext(ResizableTableContainerContext)!;
   let {column, triggerRef} = useContext(ColumnResizerContext)!;
@@ -1222,6 +1218,7 @@ function TableDropIndicator(props: TableDropIndicatorProps, ref: ForwardedRef<HT
         colSpan={state.collection.columnCount}
         style={{padding: 0}}>
         <div {...visuallyHiddenProps} role="button" {...dropIndicatorProps} ref={buttonRef} />
+        {renderProps.children}
       </td>
     </tr>
   );

package/src/Tabs.tsx

@@ -16,7 +16,7 @@ import {Collection, Node, TabListState, useTabListState} from 'react-stately';
 import {CollectionDocumentContext, CollectionPortal, CollectionProps, useCollectionDocument, useSSRCollectionNode} from './Collection';
 import {ContextValue, createHideableComponent, forwardRefType, Hidden, Provider, RenderProps, SlotProps, StyleRenderProps, useContextProps, useRenderProps, useSlottedContext} from './utils';
 import {filterDOMProps, useObjectRef} from '@react-aria/utils';
-import React, {createContext, ForwardedRef, forwardRef, RefObject, useContext, useMemo} from 'react';
+import React, {createContext, ForwardedRef, forwardRef, JSX, RefObject, useContext, useMemo} from 'react';
 
 export interface TabsProps extends Omit<AriaTabListProps<any>, 'items' | 'children'>, RenderProps<TabsRenderProps>, SlotProps {}
 
@@ -43,6 +43,7 @@ export interface TabListRenderProps {
 }
 
 export interface TabProps extends RenderProps<TabRenderProps>, AriaLabelingProps, LinkDOMProps {
+  /** The unique id of the tab. */
   id?: Key
 }
 
@@ -191,7 +192,7 @@ function TabsInner({props, tabsRef: ref, collection}: TabsInnerProps) {
 const _Tabs = /*#__PURE__*/ (forwardRef as forwardRefType)(Tabs);
 export {_Tabs as Tabs};
 
-function TabList<T extends object>(props: TabListProps<T>, ref: ForwardedRef<HTMLDivElement>): React.JSX.Element {
+function TabList<T extends object>(props: TabListProps<T>, ref: ForwardedRef<HTMLDivElement>): JSX.Element {
   let document = useContext(CollectionDocumentContext);
   return document
     ? <CollectionPortal {...props} />
@@ -251,7 +252,7 @@ function TabListInner<T extends object>({props, forwardedRef: ref}: TabListInner
 const _TabList = /*#__PURE__*/ (forwardRef as forwardRefType)(TabList);
 export {_TabList as TabList};
 
-function Tab(props: TabProps, ref: ForwardedRef<HTMLDivElement>): React.JSX.Element | null {
+function Tab(props: TabProps, ref: ForwardedRef<HTMLDivElement>): JSX.Element | null {
   return useSSRCollectionNode('item', props, ref, props.children);
 }
 

package/src/TagGroup.tsx

@@ -19,7 +19,7 @@ import {Key, LinkDOMProps} from '@react-types/shared';
 import {LabelContext} from './Label';
 import {ListState, Node, useListState} from 'react-stately';
 import {ListStateContext} from './ListBox';
-import React, {createContext, ForwardedRef, forwardRef, ReactNode, useContext, useEffect, useRef} from 'react';
+import React, {createContext, ForwardedRef, forwardRef, JSX, ReactNode, useContext, useEffect, useRef} from 'react';
 import {TextContext} from './Text';
 
 export interface TagGroupProps extends Omit<AriaTagGroupProps<unknown>, 'children' | 'items' | 'label' | 'description' | 'errorMessage' | 'keyboardDelegate'>, DOMProps, SlotProps {}
@@ -196,7 +196,7 @@ export interface TagProps extends RenderProps<TagRenderProps>, LinkDOMProps {
   textValue?: string
 }
 
-function Tag(props: TagProps, ref: ForwardedRef<HTMLDivElement>): React.JSX.Element | null {
+function Tag(props: TagProps, ref: ForwardedRef<HTMLDivElement>): JSX.Element | null {
   return useSSRCollectionNode('item', props, ref, props.children);
 }
 

package/src/Tooltip.tsx

@@ -36,7 +36,12 @@ export interface TooltipProps extends PositionProps, OverlayTriggerProps, AriaLa
   /**
    * Whether the tooltip is currently performing an exit animation.
    */
-  isExiting?: boolean
+  isExiting?: boolean,
+  /**
+   * The container element in which the overlay portal will be placed. This may have unknown behavior depending on where it is portalled to.
+   * @default document.body
+   */
+  UNSTABLE_portalContainer?: Element
 }
 
 export interface TooltipRenderProps {
@@ -87,7 +92,7 @@ export function TooltipTrigger(props: TooltipTriggerComponentProps) {
   );
 }
 
-function Tooltip(props: TooltipProps, ref: ForwardedRef<HTMLDivElement>) {
+function Tooltip({UNSTABLE_portalContainer, ...props}: TooltipProps, ref: ForwardedRef<HTMLDivElement>) {
   [props, ref] = useContextProps(props, ref, TooltipContext);
   let contextState = useContext(TooltipTriggerStateContext);
   let localState = useTooltipTriggerState(props);
@@ -98,7 +103,7 @@ function Tooltip(props: TooltipProps, ref: ForwardedRef<HTMLDivElement>) {
   }
 
   return (
-    <OverlayContainer>
+    <OverlayContainer portalContainer={UNSTABLE_portalContainer}>
       <TooltipInner {...props} tooltipRef={ref} isExiting={isExiting} />
     </OverlayContainer>
   );
@@ -142,7 +147,7 @@ function TooltipInner(props: TooltipProps & {isExiting: boolean, tooltipRef: Ref
       {...tooltipProps}
       ref={props.tooltipRef}
       {...renderProps}
-      style={{...renderProps.style, ...overlayProps.style}}
+      style={{...overlayProps.style, ...renderProps.style}}
       data-placement={placement}
       data-entering={isEntering || undefined}
       data-exiting={props.isExiting || undefined}>

package/src/index.ts

@@ -15,6 +15,7 @@ export {Button, ButtonContext} from './Button';
 export {Calendar, CalendarGrid, CalendarGridHeader, CalendarGridBody, CalendarHeaderCell, CalendarCell, RangeCalendar, CalendarContext, RangeCalendarContext, CalendarStateContext, RangeCalendarStateContext} from './Calendar';
 export {Checkbox, CheckboxGroup, CheckboxGroupContext, CheckboxContext, CheckboxGroupStateContext} from './Checkbox';
 export {ComboBox, ComboBoxContext, ComboBoxStateContext} from './ComboBox';
+export {composeRenderProps, Provider, useContextProps, useSlottedContext} from './utils';
 export {DateField, DateInput, DateSegment, TimeField, DateFieldContext, TimeFieldContext, DateFieldStateContext, TimeFieldStateContext} from './DateField';
 export {DatePicker, DateRangePicker, DatePickerContext, DateRangePickerContext, DatePickerStateContext, DateRangePickerStateContext} from './DatePicker';
 export {DialogTrigger, Dialog, DialogContext, OverlayTriggerStateContext} from './Dialog';
@@ -39,7 +40,6 @@ export {NumberField, NumberFieldContext, NumberFieldStateContext} from './Number
 export {OverlayArrow} from './OverlayArrow';
 export {Popover, PopoverContext} from './Popover';
 export {ProgressBar, ProgressBarContext} from './ProgressBar';
-export {Provider, useContextProps, useSlottedContext} from './utils';
 export {RadioGroup, Radio, RadioGroupContext, RadioContext, RadioGroupStateContext} from './RadioGroup';
 export {SearchField, SearchFieldContext} from './SearchField';
 export {Select, SelectValue, SelectContext, SelectValueContext, SelectStateContext} from './Select';
@@ -56,7 +56,7 @@ export {ToggleButton, ToggleButtonContext} from './ToggleButton';
 export {Toolbar, ToolbarContext} from './Toolbar';
 export {TooltipTrigger, Tooltip, TooltipTriggerStateContext, TooltipContext} from './Tooltip';
 export {useDragAndDrop, DropIndicator, DropIndicatorContext, DragAndDropContext} from './useDragAndDrop';
-export {DIRECTORY_DRAG_TYPE, isDirectoryDropItem, isFileDropItem, isTextDropItem, SSRProvider, RouterProvider, I18nProvider} from 'react-aria';
+export {DIRECTORY_DRAG_TYPE, isDirectoryDropItem, isFileDropItem, isTextDropItem, SSRProvider, RouterProvider, I18nProvider, useLocale} from 'react-aria';
 export {FormValidationContext} from 'react-stately';
 
 export type {BreadcrumbsProps, BreadcrumbProps} from './Breadcrumbs';

package/src/useDragAndDrop.tsx

@@ -40,7 +40,7 @@ import {
   useDraggableCollectionState,
   useDroppableCollectionState
 } from 'react-stately';
-import React, {createContext, ForwardedRef, forwardRef, ReactNode, RefObject, useContext, useMemo} from 'react';
+import React, {createContext, ForwardedRef, forwardRef, JSX, ReactNode, RefObject, useContext, useMemo} from 'react';
 import {RenderProps} from './utils';
 
 interface DraggableCollectionStateOpts extends Omit<DraggableCollectionStateOptions, 'getItems'> {}
@@ -50,7 +50,7 @@ interface DragHooks {
   useDraggableCollection?: (props: DraggableCollectionOptions, state: DraggableCollectionState, ref: RefObject<HTMLElement>) => void,
   useDraggableItem?: (props: DraggableItemProps, state: DraggableCollectionState) => DraggableItemResult,
   DragPreview?: typeof DragPreview,
-  renderDragPreview?: (items: DragItem[]) => React.JSX.Element
+  renderDragPreview?: (items: DragItem[]) => JSX.Element
 }
 
 interface DropHooks {
@@ -58,7 +58,7 @@ interface DropHooks {
   useDroppableCollection?: (props: DroppableCollectionOptions, state: DroppableCollectionState, ref: RefObject<HTMLElement>) => DroppableCollectionResult,
   useDroppableItem?: (options: DroppableItemOptions, state: DroppableCollectionState, ref: RefObject<HTMLElement>) => DroppableItemResult,
   useDropIndicator?: (props: AriaDropIndicatorProps, state: DroppableCollectionState, ref: RefObject<HTMLElement>) => DropIndicatorAria,
-  renderDropIndicator?: (target: DropTarget) => React.JSX.Element,
+  renderDropIndicator?: (target: DropTarget) => JSX.Element,
   dropTargetDelegate?: DropTargetDelegate,
   ListDropTargetDelegate: typeof ListDropTargetDelegate
 }
@@ -80,13 +80,13 @@ export interface DragAndDropOptions extends Omit<DraggableCollectionProps, 'prev
    * A function that renders a drag preview, which is shown under the user's cursor while dragging.
    * By default, a copy of the dragged element is rendered.
    */
-  renderDragPreview?: (items: DragItem[]) => React.JSX.Element,
+  renderDragPreview?: (items: DragItem[]) => JSX.Element,
   /**
    * A function that renders a drop indicator element between two items in a collection.
    * This should render a `<DropIndicator>` element. If this function is not provided, a
    * default DropIndicator is provided.
    */
-  renderDropIndicator?: (target: DropTarget) => React.JSX.Element,
+  renderDropIndicator?: (target: DropTarget) => JSX.Element,
   /** A custom delegate object that provides drop targets for pointer coordinates within the collection. */
   dropTargetDelegate?: DropTargetDelegate
 }
@@ -160,7 +160,7 @@ interface DropIndicatorContextValue {
   render: (props: DropIndicatorProps, ref: ForwardedRef<HTMLElement>) => ReactNode
 }
 
-function DropIndicator(props: DropIndicatorProps, ref: ForwardedRef<HTMLElement>): React.JSX.Element {
+function DropIndicator(props: DropIndicatorProps, ref: ForwardedRef<HTMLElement>): JSX.Element {
   let {render} = useContext(DropIndicatorContext)!;
   return <>{render(props, ref)}</>;
 }

package/src/utils.tsx

@@ -12,7 +12,7 @@
 
 import {AriaLabelingProps, DOMProps as SharedDOMProps} from '@react-types/shared';
 import {mergeProps, mergeRefs, useLayoutEffect, useObjectRef} from '@react-aria/utils';
-import React, {Context, createContext, CSSProperties, ForwardedRef, ReactNode, RefCallback, RefObject, useCallback, useContext, useEffect, useMemo, useRef, useState} from 'react';
+import React, {Context, createContext, CSSProperties, ForwardedRef, JSX, ReactNode, RefCallback, RefObject, UIEvent, useCallback, useContext, useEffect, useMemo, useRef, useState} from 'react';
 import ReactDOM from 'react-dom';
 import {useIsSSR} from 'react-aria';
 
@@ -53,13 +53,13 @@ interface ProviderProps<A, B, C, D, E, F, G, H, I, J, K> {
   children: ReactNode
 }
 
-export function Provider<A, B, C, D, E, F, G, H, I, J, K>({values, children}: ProviderProps<A, B, C, D, E, F, G, H, I, J, K>): React.JSX.Element {
+export function Provider<A, B, C, D, E, F, G, H, I, J, K>({values, children}: ProviderProps<A, B, C, D, E, F, G, H, I, J, K>): JSX.Element {
   for (let [Context, value] of values) {
     // @ts-ignore
     children = <Context.Provider value={value}>{children}</Context.Provider>;
   }
 
-  return children as React.JSX.Element;
+  return children as JSX.Element;
 }
 
 export interface StyleProps {
@@ -74,6 +74,11 @@ export interface DOMProps extends StyleProps {
   children?: ReactNode
 }
 
+export interface ScrollableProps<T extends Element> {
+  /** Handler that is called when a user scrolls. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/Element/scroll_event). */
+  onScroll?: (e: UIEvent<T>) => void
+}
+
 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),
@@ -136,6 +141,18 @@ export function useRenderProps<T>(props: RenderPropsHookOptions<T>) {
   }, [className, style, children, defaultClassName, defaultChildren, values]);
 }
 
+/**
+ * A helper function that accepts a user-provided render prop value (either a static value or a function),
+ * and combines it with another value to create a final result.
+ */
+export function composeRenderProps<T, U, V extends T>(
+  // https://stackoverflow.com/questions/60898079/typescript-type-t-or-function-t-usage
+  value: T extends any ? (T | ((renderProps: U) => V)) : never,
+  wrap: (prevValue: T, renderProps: U) => V
+): (renderProps: U) => V {
+  return (renderProps) => wrap(typeof value === 'function' ? value(renderProps) : value, renderProps);
+}
+
 export type WithRef<T, E> = T & {ref?: ForwardedRef<E>};
 export interface SlotProps {
   /**