react-aria-components 3.0.0-nightly-ab9fd5c68-241125 → 3.0.0-nightly-10a43de88-241127

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

@@ -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);
@@ -334,10 +331,4 @@ function TabPanel(props: TabPanelProps, forwardedRef: ForwardedRef<HTMLDivElemen
       </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};
+});

package/src/TextArea.tsx

@@ -13,7 +13,10 @@ let filterHoverProps = (props: TextAreaProps) => {
   return otherProps;
 };
 
-function TextArea(props: TextAreaProps, ref: ForwardedRef<HTMLTextAreaElement>) {
+/**
+ * A textarea allows a user to input mult-line text.
+ */
+export const TextArea = forwardRef(function TextArea(props: TextAreaProps, ref: ForwardedRef<HTMLTextAreaElement>) {
   [props, ref] = useContextProps(props, ref, TextAreaContext);
 
   let {hoverProps, isHovered} = useHover(props);
@@ -46,9 +49,4 @@ function TextArea(props: TextAreaProps, ref: ForwardedRef<HTMLTextAreaElement>)
       data-focus-visible={isFocusVisible || undefined}
       data-invalid={isInvalid || undefined} />
   );
-}
-/**
- * A textarea allows a user to input mult-line text.
- */
-const _TextArea = forwardRef(TextArea);
-export {_TextArea as TextArea};
+});

package/src/TextField.tsx

@@ -52,7 +52,10 @@ export interface TextFieldProps extends Omit<AriaTextFieldProps, 'label' | 'plac
 
 export const TextFieldContext = createContext<ContextValue<TextFieldProps, HTMLDivElement>>(null);
 
-function TextField(props: TextFieldProps, ref: ForwardedRef<HTMLDivElement>) {
+/**
+ * A text field allows a user to enter a plain text value with a keyboard.
+ */
+export const TextField = /*#__PURE__*/ (forwardRef as forwardRefType)(function TextField(props: TextFieldProps, ref: ForwardedRef<HTMLDivElement>) {
   [props, ref] = useContextProps(props, ref, TextFieldContext);
   let {validationBehavior: formValidationBehavior} = useSlottedContext(FormContext) || {};
   let validationBehavior = props.validationBehavior ?? formValidationBehavior ?? 'native';
@@ -116,10 +119,4 @@ function TextField(props: TextFieldProps, ref: ForwardedRef<HTMLDivElement>) {
       </Provider>
     </div>
   );
-}
-
-/**
- * A text field allows a user to enter a plain text value with a keyboard.
- */
-const _TextField = /*#__PURE__*/ (forwardRef as forwardRefType)(TextField);
-export {_TextField as TextField};
+});

package/src/ToggleButton.tsx

@@ -37,7 +37,10 @@ export interface ToggleButtonProps extends Omit<AriaToggleButtonProps, 'children
 
 export const ToggleButtonContext = createContext<ContextValue<ToggleButtonProps, HTMLButtonElement>>({});
 
-function ToggleButton(props: ToggleButtonProps, ref: ForwardedRef<HTMLButtonElement>) {
+/**
+ * A toggle button allows a user to toggle a selection on or off, for example switching between two states or modes.
+ */
+export const ToggleButton = /*#__PURE__*/ (forwardRef as forwardRefType)(function ToggleButton(props: ToggleButtonProps, ref: ForwardedRef<HTMLButtonElement>) {
   [props, ref] = useContextProps(props, ref, ToggleButtonContext);
   let groupState = useContext(ToggleGroupStateContext);
   let state = useToggleState(groupState && props.id != null ? {
@@ -75,10 +78,4 @@ function ToggleButton(props: ToggleButtonProps, ref: ForwardedRef<HTMLButtonElem
       data-hovered={isHovered || undefined}
       data-focus-visible={isFocusVisible || undefined} />
   );
-}
-
-/**
- * A toggle button allows a user to toggle a selection on or off, for example switching between two states or modes.
- */
-const _ToggleButton = /*#__PURE__*/ (forwardRef as forwardRefType)(ToggleButton);
-export {_ToggleButton as ToggleButton};
+});

package/src/ToggleButtonGroup.tsx

@@ -32,7 +32,10 @@ export interface ToggleButtonGroupProps extends AriaToggleButtonGroupProps, Rend
 export const ToggleButtonGroupContext = createContext<ContextValue<ToggleButtonGroupProps, HTMLDivElement>>({});
 export const ToggleGroupStateContext = createContext<ToggleGroupState | null>(null);
 
-function ToggleButtonGroup(props: ToggleButtonGroupProps, ref: ForwardedRef<HTMLDivElement>) {
+/**
+ * A toggle button group allows a user to toggle multiple options, with single or multiple selection.
+ */
+export const ToggleButtonGroup = /*#__PURE__*/ (forwardRef as forwardRefType)(function ToggleButtonGroup(props: ToggleButtonGroupProps, ref: ForwardedRef<HTMLDivElement>) {
   [props, ref] = useContextProps(props, ref, ToggleButtonGroupContext);
   let state = useToggleGroupState(props);
   let {groupProps} = useToggleButtonGroup(props, state, ref);
@@ -59,10 +62,4 @@ function ToggleButtonGroup(props: ToggleButtonGroupProps, ref: ForwardedRef<HTML
       </ToggleGroupStateContext.Provider>
     </div>
   );
-}
-
-/**
- * A toggle button group allows a user to toggle multiple options, with single or multiple selection.
- */
-const _ToggleButtonGroup = /*#__PURE__*/ (forwardRef as forwardRefType)(ToggleButtonGroup);
-export {_ToggleButtonGroup as ToggleButtonGroup};
+});

package/src/Toolbar.tsx

@@ -29,7 +29,11 @@ export interface ToolbarProps extends AriaToolbarProps, SlotProps, RenderProps<T
 
 export const ToolbarContext = createContext<ContextValue<ToolbarProps, HTMLDivElement>>({});
 
-function Toolbar(props: ToolbarProps, ref: ForwardedRef<HTMLDivElement>) {
+/**
+ * A toolbar is a container for a set of interactive controls, such as buttons, dropdown menus, or checkboxes,
+ * with arrow key navigation.
+ */
+export const Toolbar = /*#__PURE__*/ (forwardRef as forwardRefType)(function Toolbar(props: ToolbarProps, ref: ForwardedRef<HTMLDivElement>) {
   [props, ref] = useContextProps(props, ref, ToolbarContext);
   let {toolbarProps} = useToolbar(props, ref);
   let renderProps = useRenderProps({
@@ -50,11 +54,4 @@ function Toolbar(props: ToolbarProps, ref: ForwardedRef<HTMLDivElement>) {
       {renderProps.children}
     </div>
   );
-}
-
-/**
- * A toolbar is a container for a set of interactive controls, such as buttons, dropdown menus, or checkboxes,
- * with arrow key navigation.
- */
-const _Toolbar = /*#__PURE__*/ (forwardRef as forwardRefType)(Toolbar);
-export {_Toolbar as Toolbar};
+});

package/src/Tooltip.tsx

@@ -98,7 +98,10 @@ export function TooltipTrigger(props: TooltipTriggerComponentProps) {
   );
 }
 
-function Tooltip({UNSTABLE_portalContainer, ...props}: TooltipProps, ref: ForwardedRef<HTMLDivElement>) {
+/**
+ * A tooltip displays a description of an element on hover or focus.
+ */
+export const Tooltip = /*#__PURE__*/ (forwardRef as forwardRefType)(function Tooltip({UNSTABLE_portalContainer, ...props}: TooltipProps, ref: ForwardedRef<HTMLDivElement>) {
   [props, ref] = useContextProps(props, ref, TooltipContext);
   let contextState = useContext(TooltipTriggerStateContext);
   let localState = useTooltipTriggerState(props);
@@ -113,13 +116,7 @@ function Tooltip({UNSTABLE_portalContainer, ...props}: TooltipProps, ref: Forwar
       <TooltipInner {...props} tooltipRef={ref} isExiting={isExiting} />
     </OverlayContainer>
   );
-}
-
-/**
- * A tooltip displays a description of an element on hover or focus.
- */
-const _Tooltip = /*#__PURE__*/ (forwardRef as forwardRefType)(Tooltip);
-export {_Tooltip as Tooltip};
+});
 
 function TooltipInner(props: TooltipProps & {isExiting: boolean, tooltipRef: RefObject<HTMLDivElement | null>}) {
   let state = useContext(TooltipTriggerStateContext)!;

package/src/Tree.tsx

@@ -136,7 +136,11 @@ export interface TreeProps<T> extends Omit<AriaTreeGridListProps<T>, 'children'>
 export const UNSTABLE_TreeContext = createContext<ContextValue<TreeProps<any>, HTMLDivElement>>(null);
 export const UNSTABLE_TreeStateContext = createContext<TreeState<any> | null>(null);
 
-function Tree<T extends object>(props: TreeProps<T>, ref: ForwardedRef<HTMLDivElement>) {
+/**
+ * A tree provides users with a way to navigate nested hierarchical information, with support for keyboard navigation
+ * and selection.
+ */
+export const UNSTABLE_Tree = /*#__PURE__*/ (forwardRef as forwardRefType)(function Tree<T extends object>(props: TreeProps<T>, ref: ForwardedRef<HTMLDivElement>) {
   // Render the portal first so that we have the collection by the time we render the DOM in SSR.
   [props, ref] = useContextProps(props, ref, UNSTABLE_TreeContext);
 
@@ -145,7 +149,7 @@ function Tree<T extends object>(props: TreeProps<T>, ref: ForwardedRef<HTMLDivEl
       {collection => <TreeInner props={props} collection={collection} treeRef={ref} />}
     </CollectionBuilder>
   );
-}
+});
 
 interface TreeInnerProps<T extends object> {
   props: TreeProps<T>,
@@ -254,13 +258,6 @@ function TreeInner<T extends object>({props, collection, treeRef: ref}: TreeInne
   );
 }
 
-/**
- * A tree provides users with a way to navigate nested hierarchical information, with support for keyboard navigation
- * and selection.
- */
-const _Tree = /*#__PURE__*/ (forwardRef as forwardRefType)(Tree);
-export {_Tree as UNSTABLE_Tree};
-
 // TODO: readd the rest of the render props when tree supports them
 export interface TreeItemRenderProps extends Omit<ItemRenderProps, 'allowsDragging' | 'isDragging' | 'isDropTarget'> {
   /** Whether the tree item is expanded. */