react-aria-components 1.5.0 → 1.6.0

package/src/NumberField.tsx

@@ -46,7 +46,10 @@ export interface NumberFieldProps extends Omit<AriaNumberFieldProps, 'label' | '
 export const NumberFieldContext = createContext<ContextValue<NumberFieldProps, HTMLDivElement>>(null);
 export const NumberFieldStateContext = createContext<NumberFieldState | null>(null);
 
-function NumberField(props: NumberFieldProps, ref: ForwardedRef<HTMLDivElement>) {
+/**
+ * A number field allows a user to enter a number, and increment or decrement the value using stepper buttons.
+ */
+export const NumberField = /*#__PURE__*/ (forwardRef as forwardRefType)(function NumberField(props: NumberFieldProps, ref: ForwardedRef<HTMLDivElement>) {
   [props, ref] = useContextProps(props, ref, NumberFieldContext);
   let {validationBehavior: formValidationBehavior} = useSlottedContext(FormContext) || {};
   let validationBehavior = props.validationBehavior ?? formValidationBehavior ?? 'native';
@@ -118,10 +121,4 @@ function NumberField(props: NumberFieldProps, ref: ForwardedRef<HTMLDivElement>)
       {props.name && <input type="hidden" name={props.name} value={isNaN(state.numberValue) ? '' : state.numberValue} />}
     </Provider>
   );
-}
-
-/**
- * A number field allows a user to enter a number, and increment or decrement the value using stepper buttons.
- */
-const _NumberField = /*#__PURE__*/ (forwardRef as forwardRefType)(NumberField);
-export {_NumberField as NumberField};
+});

package/src/OverlayArrow.tsx

@@ -33,7 +33,11 @@ export interface OverlayArrowRenderProps {
   placement: PlacementAxis | null
 }
 
-function OverlayArrow(props: OverlayArrowProps, ref: ForwardedRef<HTMLDivElement>) {
+/**
+ * An OverlayArrow renders a custom arrow element relative to an overlay element
+ * such as a popover or tooltip such that it aligns with a trigger element.
+ */
+export const OverlayArrow = /*#__PURE__*/ (forwardRef as forwardRefType)(function OverlayArrow(props: OverlayArrowProps, ref: ForwardedRef<HTMLDivElement>) {
   [props, ref] = useContextProps(props, ref, OverlayArrowContext);
   let placement = (props as OverlayArrowContextValue).placement;
   let style: CSSProperties = {
@@ -68,11 +72,4 @@ function OverlayArrow(props: OverlayArrowProps, ref: ForwardedRef<HTMLDivElement
       ref={ref}
       data-placement={placement} />
   );
-}
-
-/**
- * An OverlayArrow renders a custom arrow element relative to an overlay element
- * such as a popover or tooltip such that it aligns with a trigger element.
- */
-const _OverlayArrow = /*#__PURE__*/ (forwardRef as forwardRefType)(OverlayArrow);
-export {_OverlayArrow as OverlayArrow};
+});

package/src/Popover.tsx

@@ -11,8 +11,8 @@
  */
 
 import {AriaPopoverProps, DismissButton, Overlay, PlacementAxis, PositionProps, usePopover} from 'react-aria';
-import {ContextValue, RenderProps, SlotProps, useContextProps, useEnterAnimation, useExitAnimation, useRenderProps} from './utils';
-import {filterDOMProps, mergeProps, useLayoutEffect} from '@react-aria/utils';
+import {ContextValue, RenderProps, SlotProps, useContextProps, useRenderProps} from './utils';
+import {filterDOMProps, mergeProps, useEnterAnimation, useExitAnimation, useLayoutEffect} from '@react-aria/utils';
 import {forwardRefType, RefObject} from '@react-types/shared';
 import {OverlayArrowContext} from './OverlayArrow';
 import {OverlayTriggerProps, OverlayTriggerState, useOverlayTriggerState} from 'react-stately';
@@ -80,7 +80,10 @@ export interface PopoverRenderProps {
 
 export const PopoverContext = createContext<ContextValue<PopoverProps, HTMLElement>>(null);
 
-function Popover(props: PopoverProps, ref: ForwardedRef<HTMLElement>) {
+/**
+ * A popover is an overlay element positioned relative to a trigger.
+ */
+export const Popover = /*#__PURE__*/ (forwardRef as forwardRefType)(function Popover(props: PopoverProps, ref: ForwardedRef<HTMLElement>) {
   [props, ref] = useContextProps(props, ref, PopoverContext);
   let contextState = useContext(OverlayTriggerStateContext);
   let localState = useOverlayTriggerState(props);
@@ -116,13 +119,7 @@ function Popover(props: PopoverProps, ref: ForwardedRef<HTMLElement>) {
       popoverRef={ref}
       isExiting={isExiting} />
   );
-}
-
-/**
- * A popover is an overlay element positioned relative to a trigger.
- */
-const _Popover = /*#__PURE__*/ (forwardRef as forwardRefType)(Popover);
-export {_Popover as Popover};
+});
 
 interface PopoverInnerProps extends AriaPopoverProps, RenderProps<PopoverRenderProps>, SlotProps {
   state: OverlayTriggerState,

package/src/ProgressBar.tsx

@@ -37,7 +37,11 @@ export interface ProgressBarRenderProps {
 
 export const ProgressBarContext = createContext<ContextValue<ProgressBarProps, HTMLDivElement>>(null);
 
-function ProgressBar(props: ProgressBarProps, ref: ForwardedRef<HTMLDivElement>) {
+/**
+ * Progress bars show either determinate or indeterminate progress of an operation
+ * over time.
+ */
+export const ProgressBar = forwardRef(function ProgressBar(props: ProgressBarProps, ref: ForwardedRef<HTMLDivElement>) {
   [props, ref] = useContextProps(props, ref, ProgressBarContext);
   let {
     value = 0,
@@ -73,11 +77,4 @@ function ProgressBar(props: ProgressBarProps, ref: ForwardedRef<HTMLDivElement>)
       </LabelContext.Provider>
     </div>
   );
-}
-
-/**
- * Progress bars show either determinate or indeterminate progress of an operation
- * over time.
- */
-const _ProgressBar = forwardRef(ProgressBar);
-export {_ProgressBar as ProgressBar};
+});

package/src/RadioGroup.tsx

@@ -113,7 +113,10 @@ export const RadioGroupContext = createContext<ContextValue<RadioGroupProps, HTM
 export const RadioContext = createContext<ContextValue<Partial<RadioProps>, HTMLLabelElement>>(null);
 export const RadioGroupStateContext = createContext<RadioGroupState | null>(null);
 
-function RadioGroup(props: RadioGroupProps, ref: ForwardedRef<HTMLDivElement>) {
+/**
+ * A radio group allows a user to select a single item from a list of mutually exclusive options.
+ */
+export const RadioGroup = /*#__PURE__*/ (forwardRef as forwardRefType)(function RadioGroup(props: RadioGroupProps, ref: ForwardedRef<HTMLDivElement>) {
   [props, ref] = useContextProps(props, ref, RadioGroupContext);
   let {validationBehavior: formValidationBehavior} = useSlottedContext(FormContext) || {};
   let validationBehavior = props.validationBehavior ?? formValidationBehavior ?? 'native';
@@ -169,9 +172,12 @@ function RadioGroup(props: RadioGroupProps, ref: ForwardedRef<HTMLDivElement>) {
       </Provider>
     </div>
   );
-}
+});
 
-function Radio(props: RadioProps, ref: ForwardedRef<HTMLLabelElement>) {
+/**
+ * A radio represents an individual option within a radio group.
+ */
+export const Radio = /*#__PURE__*/ (forwardRef as forwardRefType)(function Radio(props: RadioProps, ref: ForwardedRef<HTMLLabelElement>) {
   let {
     inputRef: userProvidedInputRef = null,
     ...otherProps
@@ -230,16 +236,4 @@ function Radio(props: RadioProps, ref: ForwardedRef<HTMLLabelElement>) {
       {renderProps.children}
     </label>
   );
-}
-
-/**
- * A radio group allows a user to select a single item from a list of mutually exclusive options.
- */
-const _RadioGroup = /*#__PURE__*/ (forwardRef as forwardRefType)(RadioGroup);
-
-/**
- * A radio represents an individual option within a radio group.
- */
-const _Radio = /*#__PURE__*/ (forwardRef as forwardRefType)(Radio);
-
-export {_RadioGroup as RadioGroup, _Radio as Radio};
+});

package/src/SearchField.tsx

@@ -14,7 +14,7 @@ import {AriaSearchFieldProps, useSearchField} from 'react-aria';
 import {ButtonContext} from './Button';
 import {ContextValue, Provider, RACValidation, removeDataAttributes, RenderProps, SlotProps, useContextProps, useRenderProps, useSlot, useSlottedContext} from './utils';
 import {FieldErrorContext} from './FieldError';
-import {filterDOMProps} from '@react-aria/utils';
+import {filterDOMProps, mergeProps} from '@react-aria/utils';
 import {FormContext} from './Form';
 import {forwardRefType} from '@react-types/shared';
 import {GroupContext} from './Group';
@@ -50,11 +50,15 @@ export interface SearchFieldProps extends Omit<AriaSearchFieldProps, 'label' | '
 
 export const SearchFieldContext = createContext<ContextValue<SearchFieldProps, HTMLDivElement>>(null);
 
-function SearchField(props: SearchFieldProps, ref: ForwardedRef<HTMLDivElement>) {
+/**
+ * A search field allows a user to enter and clear a search query.
+ */
+export const SearchField = /*#__PURE__*/ (forwardRef as forwardRefType)(function SearchField(props: SearchFieldProps, ref: ForwardedRef<HTMLDivElement>) {
   [props, ref] = useContextProps(props, ref, SearchFieldContext);
   let {validationBehavior: formValidationBehavior} = useSlottedContext(FormContext) || {};
   let validationBehavior = props.validationBehavior ?? formValidationBehavior ?? 'native';
   let inputRef = useRef<HTMLInputElement>(null);
+  let [inputContextProps, mergedInputRef] = useContextProps({}, inputRef, InputContext);
   let [labelRef, label] = useSlot();
   let state = useSearchFieldState({
     ...props,
@@ -65,7 +69,7 @@ function SearchField(props: SearchFieldProps, ref: ForwardedRef<HTMLDivElement>)
     ...removeDataAttributes(props),
     label,
     validationBehavior
-  }, state, inputRef);
+  }, state, mergedInputRef);
 
   let renderProps = useRenderProps({
     ...props,
@@ -93,7 +97,7 @@ function SearchField(props: SearchFieldProps, ref: ForwardedRef<HTMLDivElement>)
       <Provider
         values={[
           [LabelContext, {...labelProps, ref: labelRef}],
-          [InputContext, {...inputProps, ref: inputRef}],
+          [InputContext, {...mergeProps(inputProps, inputContextProps), ref: mergedInputRef}],
           [ButtonContext, clearButtonProps],
           [TextContext, {
             slots: {
@@ -108,10 +112,4 @@ function SearchField(props: SearchFieldProps, ref: ForwardedRef<HTMLDivElement>)
       </Provider>
     </div>
   );
-}
-
-/**
- * A search field allows a user to enter and clear a search query.
- */
-const _SearchField = /*#__PURE__*/ (forwardRef as forwardRefType)(SearchField);
-export {_SearchField as SearchField};
+});

package/src/Select.tsx

@@ -67,7 +67,10 @@ export interface SelectProps<T extends object = {}> extends Omit<AriaSelectProps
 export const SelectContext = createContext<ContextValue<SelectProps<any>, HTMLDivElement>>(null);
 export const SelectStateContext = createContext<SelectState<unknown> | null>(null);
 
-function Select<T extends object = {}>(props: SelectProps<T>, ref: ForwardedRef<HTMLDivElement>) {
+/**
+ * A select displays a collapsible list of options and allows a user to select one of them.
+ */
+export const Select = /*#__PURE__*/ (forwardRef as forwardRefType)(function Select<T extends object = {}>(props: SelectProps<T>, ref: ForwardedRef<HTMLDivElement>) {
   [props, ref] = useContextProps(props, ref, SelectContext);
   let {children, isDisabled = false, isInvalid = false, isRequired = false} = props;
   let content = useMemo(() => (
@@ -89,7 +92,7 @@ function Select<T extends object = {}>(props: SelectProps<T>, ref: ForwardedRef<
       {collection => <SelectInner props={props} collection={collection} selectRef={ref} />}
     </CollectionBuilder>
   );
-}
+});
 
 interface SelectInnerProps<T extends object> {
   props: SelectProps<T>,
@@ -199,6 +202,7 @@ function SelectInner<T extends object>({props, selectRef: ref, collection}: Sele
         data-invalid={validation.isInvalid || undefined}
         data-required={props.isRequired || undefined} />
       <HiddenSelect
+        autoComplete={props.autoComplete}
         state={state}
         triggerRef={buttonRef}
         label={label}
@@ -208,12 +212,6 @@ function SelectInner<T extends object>({props, selectRef: ref, collection}: Sele
   );
 }
 
-/**
- * A select displays a collapsible list of options and allows a user to select one of them.
- */
-const _Select = /*#__PURE__*/ (forwardRef as forwardRefType)(Select);
-export {_Select as Select};
-
 export interface SelectValueRenderProps<T> {
   /**
    * Whether the value is a placeholder.
@@ -230,7 +228,11 @@ export interface SelectValueProps<T extends object> extends Omit<HTMLAttributes<
 
 export const SelectValueContext = createContext<ContextValue<SelectValueProps<any>, HTMLSpanElement>>(null);
 
-function SelectValue<T extends object>(props: SelectValueProps<T>, ref: ForwardedRef<HTMLSpanElement>) {
+/**
+ * SelectValue renders the current value of a Select, or a placeholder if no value is selected.
+ * It is usually placed within the button element.
+ */
+export const SelectValue = /*#__PURE__*/ (forwardRef as forwardRefType)(function SelectValue<T extends object>(props: SelectValueProps<T>, ref: ForwardedRef<HTMLSpanElement>) {
   [props, ref] = useContextProps(props, ref, SelectValueContext);
   let state = useContext(SelectStateContext)!;
   let {placeholder} = useSlottedContext(SelectContext)!;
@@ -276,11 +278,4 @@ function SelectValue<T extends object>(props: SelectValueProps<T>, ref: Forwarde
       </TextContext.Provider>
     </span>
   );
-}
-
-/**
- * SelectValue renders the current value of a Select, or a placeholder if no value is selected.
- * It is usually placed within the button element.
- */
-const _SelectValue = /*#__PURE__*/ (forwardRef as forwardRefType)(SelectValue);
-export {_SelectValue as SelectValue};
+});

package/src/Slider.tsx

@@ -47,7 +47,10 @@ export interface SliderRenderProps {
   state: SliderState
 }
 
-function Slider<T extends number | number[]>(props: SliderProps<T>, ref: ForwardedRef<HTMLDivElement>) {
+/**
+ * A slider allows a user to select one or more values within a range.
+ */
+export const Slider = /*#__PURE__*/ (forwardRef as forwardRefType)(function Slider<T extends number | number[]>(props: SliderProps<T>, ref: ForwardedRef<HTMLDivElement>) {
   [props, ref] = useContextProps(props, ref, SliderContext);
   let trackRef = useRef<HTMLDivElement>(null);
   let numberFormatter = useNumberFormatter(props.formatOptions);
@@ -91,18 +94,15 @@ function Slider<T extends number | number[]>(props: SliderProps<T>, ref: Forward
         data-disabled={state.isDisabled || undefined} />
     </Provider>
   );
-}
-
-/**
- * A slider allows a user to select one or more values within a range.
- */
-const _Slider = /*#__PURE__*/ (forwardRef as forwardRefType)(Slider);
-export {_Slider as Slider};
+});
 
 export interface SliderOutputProps extends RenderProps<SliderRenderProps> {}
 interface SliderOutputContextValue extends Omit<OutputHTMLAttributes<HTMLOutputElement>, 'children' | 'className' | 'style'>, SliderOutputProps {}
 
-function SliderOutput(props: SliderOutputProps, ref: ForwardedRef<HTMLOutputElement>) {
+/**
+ * A slider output displays the current value of a slider as text.
+ */
+export const SliderOutput = /*#__PURE__*/ (forwardRef as forwardRefType)(function SliderOutput(props: SliderOutputProps, ref: ForwardedRef<HTMLOutputElement>) {
   [props, ref] = useContextProps(props, ref, SliderOutputContext);
   let {children, style, className, ...otherProps} = props;
   let state = useContext(SliderStateContext)!;
@@ -127,13 +127,7 @@ function SliderOutput(props: SliderOutputProps, ref: ForwardedRef<HTMLOutputElem
       data-orientation={state.orientation || undefined}
       data-disabled={state.isDisabled || undefined} />
   );
-}
-
-/**
- * A slider output displays the current value of a slider as text.
- */
-const _SliderOutput = /*#__PURE__*/ (forwardRef as forwardRefType)(SliderOutput);
-export {_SliderOutput as SliderOutput};
+});
 
 export interface SliderTrackRenderProps extends SliderRenderProps {
   /**
@@ -146,7 +140,10 @@ export interface SliderTrackRenderProps extends SliderRenderProps {
 export interface SliderTrackProps extends HoverEvents, RenderProps<SliderTrackRenderProps> {}
 interface SliderTrackContextValue extends Omit<HTMLAttributes<HTMLElement>, 'children' | 'className' | 'style'>, SliderTrackProps {}
 
-function SliderTrack(props: SliderTrackProps, ref: ForwardedRef<HTMLDivElement>) {
+/**
+ * A slider track is a container for one or more slider thumbs.
+ */
+export const SliderTrack = /*#__PURE__*/ (forwardRef as forwardRefType)(function SliderTrack(props: SliderTrackProps, ref: ForwardedRef<HTMLDivElement>) {
   [props, ref] = useContextProps(props, ref, SliderTrackContext);
   let state = useContext(SliderStateContext)!;
   let {onHoverStart, onHoverEnd, onHoverChange, ...otherProps} = props;
@@ -171,13 +168,7 @@ function SliderTrack(props: SliderTrackProps, ref: ForwardedRef<HTMLDivElement>)
       data-orientation={state.orientation || undefined}
       data-disabled={state.isDisabled || undefined} />
   );
-}
-
-/**
- * A slider track is a container for one or more slider thumbs.
- */
-const _SliderTrack = /*#__PURE__*/ (forwardRef as forwardRefType)(SliderTrack);
-export {_SliderTrack as SliderTrack};
+});
 
 export interface SliderThumbRenderProps {
   /**
@@ -218,7 +209,10 @@ export interface SliderThumbProps extends Omit<AriaSliderThumbProps, 'label' | '
   inputRef?: RefObject<HTMLInputElement | null>
 }
 
-function SliderThumb(props: SliderThumbProps, ref: ForwardedRef<HTMLDivElement>) {
+/**
+ * A slider thumb represents an individual value that the user can adjust within a slider track.
+ */
+export const SliderThumb = /*#__PURE__*/ (forwardRef as forwardRefType)(function SliderThumb(props: SliderThumbProps, ref: ForwardedRef<HTMLDivElement>) {
   let {
     inputRef: userInputRef = null
   } = props;
@@ -277,10 +271,4 @@ function SliderThumb(props: SliderThumbProps, ref: ForwardedRef<HTMLDivElement>)
       </Provider>
     </div>
   );
-}
-
-/**
- * A slider thumb represents an individual value that the user can adjust within a slider track.
- */
-const _SliderThumb = /*#__PURE__*/ (forwardRef as forwardRefType)(SliderThumb);
-export {_SliderThumb as SliderThumb};
+});

package/src/Switch.tsx

@@ -68,7 +68,10 @@ export interface SwitchRenderProps {
 
 export const SwitchContext = createContext<ContextValue<SwitchProps, HTMLLabelElement>>(null);
 
-function Switch(props: SwitchProps, ref: ForwardedRef<HTMLLabelElement>) {
+/**
+ * A switch allows a user to turn a setting on or off.
+ */
+export const Switch = /*#__PURE__*/ (forwardRef as forwardRefType)(function Switch(props: SwitchProps, ref: ForwardedRef<HTMLLabelElement>) {
   let {
     inputRef: userProvidedInputRef = null,
     ...otherProps
@@ -125,10 +128,4 @@ function Switch(props: SwitchProps, ref: ForwardedRef<HTMLLabelElement>) {
       {renderProps.children}
     </label>
   );
-}
-
-/**
- * A switch allows a user to turn a setting on or off.
- */
-const _Switch = /*#__PURE__*/ (forwardRef as forwardRefType)(Switch);
-export {_Switch as Switch};
+});

package/src/Table.tsx

@@ -214,7 +214,7 @@ export interface ResizableTableContainerProps extends DOMProps, ScrollableProps<
   onResizeEnd?: (widths: Map<Key, ColumnSize>) => void
 }
 
-function ResizableTableContainer(props: ResizableTableContainerProps, ref: ForwardedRef<HTMLDivElement>) {
+export const ResizableTableContainer = forwardRef(function ResizableTableContainer(props: ResizableTableContainerProps, ref: ForwardedRef<HTMLDivElement>) {
   let containerRef = useObjectRef(ref);
   let tableRef = useRef<HTMLTableElement>(null);
   let scrollRef = useRef<HTMLElement | null>(null);
@@ -267,10 +267,7 @@ function ResizableTableContainer(props: ResizableTableContainerProps, ref: Forwa
       </ResizableTableContainerContext.Provider>
     </div>
   );
-}
-
-const _ResizableTableContainer = forwardRef(ResizableTableContainer);
-export {_ResizableTableContainer as ResizableTableContainer};
+});
 
 export const TableContext = createContext<ContextValue<TableProps, HTMLTableElement>>(null);
 export const TableStateContext = createContext<TableState<any> | null>(null);
@@ -317,7 +314,11 @@ export interface TableProps extends Omit<SharedTableProps<any>, 'children'>, Sty
   dragAndDropHooks?: DragAndDropHooks
 }
 
-function Table(props: TableProps, ref: ForwardedRef<HTMLTableElement>) {
+/**
+ * A table displays data in rows and columns and enables a user to navigate its contents via directional navigation keys,
+ * and optionally supports row selection and sorting.
+ */
+export const Table = forwardRef(function Table(props: TableProps, ref: ForwardedRef<HTMLTableElement>) {
   [props, ref] = useContextProps(props, ref, TableContext);
 
   // Separate selection state so we have access to it from collection components via useTableOptions.
@@ -342,7 +343,7 @@ function Table(props: TableProps, ref: ForwardedRef<HTMLTableElement>) {
       {collection => <TableInner props={props} forwardedRef={ref} selectionState={selectionState} collection={collection} />}
     </CollectionBuilder>
   );
-}
+});
 
 interface TableInnerProps {
   props: TableProps,
@@ -490,13 +491,6 @@ function TableInner({props, forwardedRef: ref, selectionState, collection}: Tabl
   );
 }
 
-/**
- * A table displays data in rows and columns and enables a user to navigate its contents via directional navigation keys,
- * and optionally supports row selection and sorting.
- */
-const _Table = forwardRef(Table);
-export {_Table as Table};
-
 function useElementType<E extends keyof JSX.IntrinsicElements>(element: E): E | 'div' {
   let {isVirtualized} = useContext(CollectionRendererContext);
   return isVirtualized ? 'div' : element;
@@ -802,7 +796,7 @@ interface ColumnResizerContextValue {
 
 const ColumnResizerContext = createContext<ColumnResizerContextValue | null>(null);
 
-function ColumnResizer(props: ColumnResizerProps, ref: ForwardedRef<HTMLDivElement>) {
+export const ColumnResizer = forwardRef(function ColumnResizer(props: ColumnResizerProps, ref: ForwardedRef<HTMLDivElement>) {
   let layoutState = useContext(TableColumnResizeStateContext);
   if (!layoutState) {
     throw new Error('Wrap your <Table> in a <ResizableTableContainer> to enable column resizing');
@@ -891,10 +885,7 @@ function ColumnResizer(props: ColumnResizerProps, ref: ForwardedRef<HTMLDivEleme
       {isResizing && isMouseDown && ReactDOM.createPortal(<div style={{position: 'fixed', top: 0, left: 0, bottom: 0, right: 0, cursor}} />, document.body)}
     </div>
   );
-}
-
-const _ColumnResizer = forwardRef(ColumnResizer);
-export {_ColumnResizer as ColumnResizer};
+});
 
 export interface TableBodyRenderProps {
   /**

package/src/Tabs.tsx

@@ -13,7 +13,7 @@
 import {AriaLabelingProps, forwardRefType, HoverEvents, Key, LinkDOMProps, RefObject} from '@react-types/shared';
 import {AriaTabListProps, AriaTabPanelProps, mergeProps, Orientation, useFocusRing, useHover, useTab, useTabList, useTabPanel} from 'react-aria';
 import {Collection, CollectionBuilder, createHideableComponent, createLeafComponent} from '@react-aria/collections';
-import {CollectionProps, CollectionRendererContext, usePersistedKeys} from './Collection';
+import {CollectionProps, CollectionRendererContext, DefaultCollectionRenderer, usePersistedKeys} from './Collection';
 import {ContextValue, Provider, RenderProps, SlotProps, StyleRenderProps, useContextProps, useRenderProps, useSlottedContext} from './utils';
 import {filterDOMProps, useObjectRef} from '@react-aria/utils';
 import {Collection as ICollection, Node, TabListState, useTabListState} from 'react-stately';
@@ -118,7 +118,10 @@ export interface TabPanelRenderProps {
 export const TabsContext = createContext<ContextValue<TabsProps, HTMLDivElement>>(null);
 export const TabListStateContext = createContext<TabListState<object> | null>(null);
 
-function Tabs(props: TabsProps, ref: ForwardedRef<HTMLDivElement>) {
+/**
+ * Tabs organize content into multiple sections and allow users to navigate between them.
+ */
+export const Tabs = /*#__PURE__*/ (forwardRef as forwardRefType)(function Tabs(props: TabsProps, ref: ForwardedRef<HTMLDivElement>) {
   [props, ref] = useContextProps(props, ref, TabsContext);
   let {children, orientation = 'horizontal'} = props;
   children = useMemo(() => (
@@ -132,7 +135,7 @@ function Tabs(props: TabsProps, ref: ForwardedRef<HTMLDivElement>) {
       {collection => <TabsInner props={props} collection={collection} tabsRef={ref} />}
     </CollectionBuilder>
   );
-}
+});
 
 interface TabsInnerProps {
   props: TabsProps,
@@ -182,17 +185,15 @@ function TabsInner({props, tabsRef: ref, collection}: TabsInnerProps) {
 }
 
 /**
- * Tabs organize content into multiple sections and allow users to navigate between them.
+ * 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 _Tabs = /*#__PURE__*/ (forwardRef as forwardRefType)(Tabs);
-export {_Tabs as Tabs};
-
-function TabList<T extends object>(props: TabListProps<T>, ref: ForwardedRef<HTMLDivElement>): JSX.Element {
+export const TabList = /*#__PURE__*/ (forwardRef as forwardRefType)(function TabList<T extends object>(props: TabListProps<T>, ref: ForwardedRef<HTMLDivElement>): JSX.Element {
   let state = useContext(TabListStateContext);
   return state
     ? <TabListInner props={props} forwardedRef={ref} />
     : <Collection {...props} />;
-}
+});
 
 interface TabListInnerProps<T> {
   props: TabListProps<T>,
@@ -236,13 +237,6 @@ function TabListInner<T extends object>({props, forwardedRef: ref}: TabListInner
   );
 }
 
-/**
- * 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 = /*#__PURE__*/ (forwardRef as forwardRefType)(TabList);
-export {_TabList as TabList};
-
 /**
  * A Tab provides a title for an individual item within a TabList.
  */
@@ -287,7 +281,10 @@ export const Tab = /*#__PURE__*/ createLeafComponent('item', (props: TabProps, f
   );
 });
 
-function TabPanel(props: TabPanelProps, forwardedRef: ForwardedRef<HTMLDivElement>) {
+/**
+ * A TabPanel provides the content for a tab.
+ */
+export const TabPanel = /*#__PURE__*/ createHideableComponent(function TabPanel(props: TabPanelProps, forwardedRef: ForwardedRef<HTMLDivElement>) {
   const state = useContext(TabListStateContext)!;
   let ref = useObjectRef<HTMLDivElement>(forwardedRef);
   let {tabPanelProps} = useTabPanel(props, state, ref);
@@ -330,14 +327,10 @@ function TabPanel(props: TabPanelProps, forwardedRef: ForwardedRef<HTMLDivElemen
           [TabsContext, null],
           [TabListStateContext, null]
         ]}>
-        {renderProps.children}
+        <CollectionRendererContext.Provider value={DefaultCollectionRenderer}>
+          {renderProps.children}
+        </CollectionRendererContext.Provider>
       </Provider>
     </div>
   );
-}
-
-/**
- * A TabPanel provides the content for a tab.
- */
-const _TabPanel = /*#__PURE__*/ createHideableComponent(TabPanel);
-export {_TabPanel as TabPanel};
+});

package/src/TagGroup.tsx

@@ -55,14 +55,17 @@ export interface TagListProps<T> extends Omit<CollectionProps<T>, 'disabledKeys'
 export const TagGroupContext = createContext<ContextValue<TagGroupProps, HTMLDivElement>>(null);
 export const TagListContext = createContext<ContextValue<TagListProps<any>, HTMLDivElement>>(null);
 
-function TagGroup(props: TagGroupProps, ref: ForwardedRef<HTMLDivElement>) {
+/**
+ * A tag group is a focusable list of labels, categories, keywords, filters, or other items, with support for keyboard navigation, selection, and removal.
+ */
+export const TagGroup = /*#__PURE__*/ (forwardRef as forwardRefType)(function TagGroup(props: TagGroupProps, ref: ForwardedRef<HTMLDivElement>) {
   [props, ref] = useContextProps(props, ref, TagGroupContext);
   return (
     <CollectionBuilder content={props.children}>
       {collection => <TagGroupInner props={props} forwardedRef={ref} collection={collection} />}
     </CollectionBuilder>
   );
-}
+});
 
 interface TagGroupInnerProps {
   props: TagGroupProps,
@@ -119,17 +122,14 @@ function TagGroupInner({props, forwardedRef: ref, collection}: TagGroupInnerProp
 }
 
 /**
- * A tag group is a focusable list of labels, categories, keywords, filters, or other items, with support for keyboard navigation, selection, and removal.
+ * A tag list is a container for tags within a TagGroup.
  */
-const _TagGroup = /*#__PURE__*/ (forwardRef as forwardRefType)(TagGroup);
-export {_TagGroup as TagGroup};
-
-function TagList<T extends object>(props: TagListProps<T>, ref: ForwardedRef<HTMLDivElement>): JSX.Element {
+export const TagList = /*#__PURE__*/ (forwardRef as forwardRefType)(function TagList<T extends object>(props: TagListProps<T>, ref: ForwardedRef<HTMLDivElement>): JSX.Element {
   let state = useContext(ListStateContext);
   return state
     ? <TagListInner props={props} forwardedRef={ref} />
     : <Collection {...props} />;
-}
+});
 
 interface TagListInnerProps<T> {
   props: TagListProps<T>,
@@ -174,12 +174,6 @@ function TagListInner<T extends object>({props, forwardedRef}: TagListInnerProps
   );
 }
 
-/**
- * A tag list is a container for tags within a TagGroup.
- */
-const _TagList = /*#__PURE__*/ (forwardRef as forwardRefType)(TagList);
-export {_TagList as TagList};
-
 export interface TagRenderProps extends Omit<ItemRenderProps, 'allowsDragging' | 'isDragging' | 'isDropTarget'> {
   /**
    * Whether the tag group allows items to be removed.

package/src/Text.tsx

@@ -19,12 +19,9 @@ export interface TextProps extends HTMLAttributes<HTMLElement> {
 
 export const TextContext = createContext<ContextValue<TextProps, HTMLElement>>({});
 
-function Text(props: TextProps, ref: ForwardedRef<HTMLElement>) {
+export const Text = forwardRef(function Text(props: TextProps, ref: ForwardedRef<HTMLElement>) {
   [props, ref] = useContextProps(props, ref, TextContext);
   let {elementType: ElementType = 'span', ...domProps} = props;
   // @ts-ignore
   return <ElementType className="react-aria-Text" {...domProps} ref={ref} />;
-}
-
-const _Text = forwardRef(Text);
-export {_Text as Text};
+});