react-aria-components 1.14.0 → 1.15.1

package/src/Table.tsx

@@ -7,7 +7,9 @@ import {
   ClassNameOrFunction,
   ContextValue,
   DEFAULT_SLOT,
+  dom,
   DOMProps,
+  DOMRenderProps,
   Provider,
   RenderProps,
   SlotProps,
@@ -218,7 +220,7 @@ interface ResizableTableContainerContextValue {
 
 const ResizableTableContainerContext = createContext<ResizableTableContainerContextValue | null>(null);
 
-export interface ResizableTableContainerProps extends DOMProps, GlobalDOMAttributes<HTMLDivElement> {
+export interface ResizableTableContainerProps extends DOMProps, DOMRenderProps<'div', undefined>, GlobalDOMAttributes<HTMLDivElement> {
   /**
    * The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element.
    * @default 'react-aria-ResizableTableContainer'
@@ -283,7 +285,8 @@ export const ResizableTableContainer = forwardRef(function ResizableTableContain
   }), [tableRef, width, props.onResizeStart, props.onResize, props.onResizeEnd]);
 
   return (
-    <div
+    <dom.div
+      render={props.render}
       {...filterDOMProps(props, {global: true})}
       ref={containerRef}
       className={props.className || 'react-aria-ResizableTableContainer'}
@@ -292,7 +295,7 @@ export const ResizableTableContainer = forwardRef(function ResizableTableContain
       <ResizableTableContainerContext.Provider value={ctx}>
         {props.children}
       </ResizableTableContainerContext.Provider>
-    </div>
+    </dom.div>
   );
 });
 
@@ -322,7 +325,7 @@ export interface TableRenderProps {
   state: TableState<unknown>
 }
 
-export interface TableProps extends Omit<SharedTableProps<any>, 'children'>, StyleRenderProps<TableRenderProps>, SlotProps, AriaLabelingProps, GlobalDOMAttributes<HTMLTableElement> {
+export interface TableProps extends Omit<SharedTableProps<any>, 'children'>, StyleRenderProps<TableRenderProps, 'table' | 'div'>, SlotProps, AriaLabelingProps, GlobalDOMAttributes<HTMLTableElement> {
   /**
    * 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.
    * @default 'react-aria-Table'
@@ -387,9 +390,9 @@ interface TableInnerProps {
 let TableElementType = forwardRef(function TableElementType(props: any, ref: ForwardedRef<Element>) {
   let {isVirtualized} = useContext(CollectionRendererContext);
   if (isVirtualized) {
-    return <div {...props} ref={ref} />;
+    return <dom.div {...props} ref={ref} />;
   }
-  return <table {...props} ref={ref} />;
+  return <dom.table {...props} ref={ref} />;
 });
 
 function TableInner({props, forwardedRef: ref, selectionState, collection}: TableInnerProps) {
@@ -475,8 +478,8 @@ function TableInner({props, forwardedRef: ref, selectionState, collection}: Tabl
 
   let {focusProps, isFocused, isFocusVisible} = useFocusRing();
   let renderProps = useRenderProps({
-    className: props.className,
-    style: props.style,
+    ...props,
+    children: undefined,
     defaultClassName: 'react-aria-Table',
     values: {
       isDropTarget: isRootDropTarget,
@@ -567,7 +570,7 @@ export interface TableHeaderRenderProps {
   isHovered: boolean
 }
 
-export interface TableHeaderProps<T> extends StyleRenderProps<TableHeaderRenderProps>, HoverEvents, GlobalDOMAttributes<HTMLTableSectionElement> {
+export interface TableHeaderProps<T> extends StyleRenderProps<TableHeaderRenderProps, 'thead' | 'div'>, HoverEvents, GlobalDOMAttributes<HTMLTableSectionElement> {
   /**
    * 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.
    * @default 'react-aria-TableHeader'
@@ -588,9 +591,9 @@ class TableHeaderNode<T> extends CollectionNode<T> {
 let THeadElementType = forwardRef(function THeadElementType(props: any, ref: ForwardedRef<Element>) {
   let {isVirtualized} = useContext(CollectionRendererContext);
   if (isVirtualized) {
-    return <div {...props} ref={ref} />;
+    return <dom.div {...props} ref={ref} />;
   }
-  return <thead {...props} ref={ref} />;
+  return <dom.thead {...props} ref={ref} />;
 });
 
 /**
@@ -620,8 +623,8 @@ export const TableHeader =  /*#__PURE__*/ createBranchComponent(
     });
 
     let renderProps = useRenderProps({
-      className: props.className,
-      style: props.style,
+      ...props,
+      children: undefined,
       defaultClassName: 'react-aria-TableHeader',
       values: {
         isHovered
@@ -722,7 +725,7 @@ export interface ColumnRenderProps {
   startResize(): void
 }
 
-export interface ColumnProps extends RenderProps<ColumnRenderProps>, GlobalDOMAttributes<HTMLTableHeaderCellElement> {
+export interface ColumnProps extends RenderProps<ColumnRenderProps, 'th' | 'div'>, GlobalDOMAttributes<HTMLTableHeaderCellElement> {
   /**
    * 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.
    * @default 'react-aria-Column'
@@ -753,9 +756,9 @@ class TableColumnNode extends CollectionNode<unknown> {
 let ColumnElementType = forwardRef(function ColumnElementType(props: any, ref: ForwardedRef<Element>) {
   let {isVirtualized} = useContext(CollectionRendererContext);
   if (isVirtualized) {
-    return <div {...props} ref={ref} />;
+    return <dom.div {...props} ref={ref} />;
   }
-  return <th {...props} ref={ref} />;
+  return <dom.th {...props} ref={ref} />;
 });
 
 /**
@@ -964,7 +967,7 @@ export const ColumnResizer = forwardRef(function ColumnResizer(props: ColumnResi
   let DOMProps = filterDOMProps(props, {global: true});
 
   return (
-    <div
+    <dom.div
       ref={objectRef}
       role="presentation"
       {...mergeProps(DOMProps, renderProps, resizerProps, {onPointerDown}, hoverProps)}
@@ -978,7 +981,7 @@ export const ColumnResizer = forwardRef(function ColumnResizer(props: ColumnResi
         ref={inputRef}
         {...mergeProps(inputProps, focusProps)} />
       {isResizing && isMouseDown && ReactDOM.createPortal(<div style={{position: 'fixed', top: 0, left: 0, bottom: 0, right: 0, cursor}} />, document.body)}
-    </div>
+    </dom.div>
   );
 });
 
@@ -995,7 +998,7 @@ export interface TableBodyRenderProps {
   isDropTarget: boolean
 }
 
-export interface TableBodyProps<T> extends Omit<CollectionProps<T>, 'disabledKeys'>, StyleRenderProps<TableBodyRenderProps>, GlobalDOMAttributes<HTMLTableSectionElement> {
+export interface TableBodyProps<T> extends Omit<CollectionProps<T>, 'disabledKeys'>, StyleRenderProps<TableBodyRenderProps, 'tbody' | 'div'>, GlobalDOMAttributes<HTMLTableSectionElement> {
   /**
    * 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.
    * @default 'react-aria-TableBody'
@@ -1012,9 +1015,9 @@ class TableBodyNode<T> extends FilterableNode<T> {
 let TableBodyElementType = forwardRef(function TableBodyElementType(props: any, ref: ForwardedRef<Element>) {
   let {isVirtualized} = useContext(CollectionRendererContext);
   if (isVirtualized) {
-    return <div {...props} ref={ref} />;
+    return <dom.div {...props} ref={ref} />;
   }
-  return <tbody {...props} ref={ref} />;
+  return <dom.tbody {...props} ref={ref} />;
 });
 
 /**
@@ -1093,7 +1096,7 @@ export interface RowRenderProps extends ItemRenderProps {
   id?: Key
 }
 
-export interface RowProps<T> extends StyleRenderProps<RowRenderProps>, LinkDOMProps, HoverEvents, PressEvents, Omit<GlobalDOMAttributes<HTMLTableRowElement>, 'onClick'> {
+export interface RowProps<T> extends StyleRenderProps<RowRenderProps, 'tr' | 'div'>, LinkDOMProps, HoverEvents, PressEvents, Omit<GlobalDOMAttributes<HTMLTableRowElement>, 'onClick'> {
   /**
    * 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.
    * @default 'react-aria-Row'
@@ -1140,9 +1143,9 @@ class TableRowNode<T> extends CollectionNode<T> {
 let TableRowElementType = forwardRef(function TableRowElementType(props: any, ref: ForwardedRef<Element>) {
   let {isVirtualized} = useContext(CollectionRendererContext);
   if (isVirtualized) {
-    return <div {...props} ref={ref} />;
+    return <dom.div {...props} ref={ref} />;
   }
-  return <tr {...props} ref={ref} />;
+  return <dom.tr {...props} ref={ref} />;
 });
 
 /**
@@ -1321,10 +1324,14 @@ export interface CellRenderProps {
   /**
    * The unique id of the cell.
    **/
-  id?: Key
+  id?: Key,
+  /**
+   * The index of the column that this cell belongs to. Respects col spanning.
+   */
+  columnIndex?: number | null
 }
 
-export interface CellProps extends RenderProps<CellRenderProps>, GlobalDOMAttributes<HTMLTableCellElement> {
+export interface CellProps extends RenderProps<CellRenderProps, 'td' | 'div'>, GlobalDOMAttributes<HTMLTableCellElement> {
   /**
    * 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.
    * @default 'react-aria-Cell'
@@ -1345,9 +1352,9 @@ class TableCellNode extends CollectionNode<unknown> {
 let TableCellElementType = forwardRef(function TableCellElementType(props: any, ref: ForwardedRef<Element>) {
   let {isVirtualized} = useContext(CollectionRendererContext);
   if (isVirtualized) {
-    return <div {...props} ref={ref} />;
+    return <dom.div {...props} ref={ref} />;
   }
-  return <td {...props} ref={ref} />;
+  return <dom.td {...props} ref={ref} />;
 });
 
 /**
@@ -1369,6 +1376,8 @@ export const Cell = /*#__PURE__*/ createLeafComponent(TableCellNode, (props: Cel
   let {isFocused, isFocusVisible, focusProps} = useFocusRing();
   let {hoverProps, isHovered} = useHover({});
   let isSelected = cell.parentKey != null ? state.selectionManager.isSelected(cell.parentKey) : false;
+  // colIndex is null, when there is so span, falling back to using the index
+  let columnIndex = cell.colIndex || cell.index;
 
   let renderProps = useRenderProps({
     ...props,
@@ -1380,7 +1389,8 @@ export const Cell = /*#__PURE__*/ createLeafComponent(TableCellNode, (props: Cel
       isPressed,
       isHovered,
       isSelected,
-      id: cell.key
+      id: cell.key,
+      columnIndex
     }
   });
 
@@ -1394,7 +1404,8 @@ export const Cell = /*#__PURE__*/ createLeafComponent(TableCellNode, (props: Cel
       data-focused={isFocused || undefined}
       data-focus-visible={isFocusVisible || undefined}
       data-pressed={isPressed || undefined}
-      data-selected={isSelected || undefined}>
+      data-selected={isSelected || undefined}
+      data-column-index={columnIndex}>
       <CollectionRendererContext.Provider value={DefaultCollectionRenderer}>
         {renderProps.children}
       </CollectionRendererContext.Provider>
@@ -1430,16 +1441,16 @@ interface TableDropIndicatorProps extends DropIndicatorProps, GlobalDOMAttribute
 let TableDropIndicatorRowElementType = forwardRef(function TableDropIndicatorRowElementType(props: any, ref: ForwardedRef<Element>) {
   let {isVirtualized} = useContext(CollectionRendererContext);
   if (isVirtualized) {
-    return <div {...props} ref={ref} />;
+    return <dom.div {...props} ref={ref} />;
   }
-  return <tr {...props} ref={ref} />;
+  return <dom.tr {...props} ref={ref} />;
 });
 let TableDropIndicatorTDElementType = forwardRef(function TableDropIndicatorTDElementType(props: any, ref: ForwardedRef<Element>) {
   let {isVirtualized} = useContext(CollectionRendererContext);
   if (isVirtualized) {
-    return <div {...props} ref={ref} />;
+    return <dom.div {...props} ref={ref} />;
   }
-  return <td {...props} ref={ref} />;
+  return <dom.td {...props} ref={ref} />;
 });
 
 function TableDropIndicator(props: TableDropIndicatorProps, ref: ForwardedRef<HTMLElement>) {
@@ -1509,7 +1520,7 @@ function RootDropIndicator() {
   );
 }
 
-export interface TableLoadMoreItemProps extends Omit<LoadMoreSentinelProps, 'collection'>, StyleProps, GlobalDOMAttributes<HTMLTableRowElement> {
+export interface TableLoadMoreItemProps extends Omit<LoadMoreSentinelProps, 'collection'>, StyleProps, DOMRenderProps<'tr' | 'div', undefined>, GlobalDOMAttributes<HTMLTableRowElement> {
   /**
    * The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element.
    * @default 'react-aria-TableLoadMoreItem'
@@ -1545,7 +1556,7 @@ export const TableLoadMoreItem = createLeafComponent(LoaderNode, function TableL
     id: undefined,
     children: item.rendered,
     defaultClassName: 'react-aria-TableLoadingIndicator',
-    values: null
+    values: undefined
   });
   let rowProps = {};
   let rowHeaderProps = {};

package/src/Tabs.tsx

@@ -10,9 +10,9 @@
  * governing permissions and limitations under the License.
  */
 
-import {AriaLabelingProps, forwardRefType, GlobalDOMAttributes, HoverEvents, Key, LinkDOMProps, PressEvents, RefObject} from '@react-types/shared';
+import {AriaLabelingProps, FocusEvents, forwardRefType, GlobalDOMAttributes, HoverEvents, Key, LinkDOMProps, PressEvents, RefObject} from '@react-types/shared';
 import {AriaTabListProps, AriaTabPanelProps, mergeProps, Orientation, useFocusRing, useHover, useTab, useTabList, useTabPanel} from 'react-aria';
-import {ClassNameOrFunction, ContextValue, Provider, RenderProps, SlotProps, StyleProps, StyleRenderProps, useContextProps, useRenderProps, useSlottedContext} from './utils';
+import {ClassNameOrFunction, ContextValue, dom, DOMRenderProps, PossibleLinkDOMRenderProps, Provider, RenderProps, SlotProps, StyleProps, StyleRenderProps, useContextProps, useRenderProps, useSlottedContext} from './utils';
 import {Collection, CollectionBuilder, CollectionNode, createHideableComponent, createLeafComponent} from '@react-aria/collections';
 import {CollectionProps, CollectionRendererContext, DefaultCollectionRenderer, usePersistedKeys} from './Collection';
 import {filterDOMProps, inertValue, useEnterAnimation, useExitAnimation, useLayoutEffect, useObjectRef} from '@react-aria/utils';
@@ -57,7 +57,7 @@ export interface TabListRenderProps {
   state: TabListState<unknown>
 }
 
-export interface TabProps extends RenderProps<TabRenderProps>, AriaLabelingProps, LinkDOMProps, HoverEvents, PressEvents, Omit<GlobalDOMAttributes<HTMLDivElement>, 'onClick'> {
+export interface TabProps extends Omit<RenderProps<TabRenderProps>, 'render'>, PossibleLinkDOMRenderProps<'div', TabRenderProps>, AriaLabelingProps, LinkDOMProps, HoverEvents, FocusEvents, PressEvents, Omit<GlobalDOMAttributes<HTMLDivElement>, 'onClick'> {
   /**
    * 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.
    * @default 'react-aria-Tab'
@@ -199,7 +199,7 @@ function TabsInner({props, tabsRef: ref, collection}: TabsInnerProps) {
   let DOMProps = filterDOMProps(props, {global: true});
 
   return (
-    <div
+    <dom.div
       {...mergeProps(DOMProps, renderProps, focusProps)}
       ref={ref}
       slot={props.slot || undefined}
@@ -214,7 +214,7 @@ function TabsInner({props, tabsRef: ref, collection}: TabsInnerProps) {
         ]}>
         {renderProps.children}
       </Provider>
-    </div>
+    </dom.div>
   );
 }
 
@@ -260,14 +260,14 @@ function TabListInner<T extends object>({props, forwardedRef: ref}: TabListInner
   delete DOMProps.id;
 
   return (
-    <div
+    <dom.div
       {...mergeProps(DOMProps, renderProps, tabListProps)}
       ref={objectRef}
       data-orientation={orientation || undefined}>
       <SharedElementTransition>
         <CollectionRoot collection={state.collection} persistedKeys={usePersistedKeys(state.selectionManager.focusedKey)} />
       </SharedElementTransition>
-    </div>
+    </dom.div>
   );
 }
 
@@ -290,7 +290,7 @@ export const Tab = /*#__PURE__*/ createLeafComponent(TabItemNode, (props: TabPro
     onHoverChange: props.onHoverChange
   });
 
-  let renderProps = useRenderProps({
+  let renderProps = useRenderProps<TabRenderProps, any>({
     ...props,
     id: undefined,
     children: item.rendered,
@@ -305,7 +305,7 @@ export const Tab = /*#__PURE__*/ createLeafComponent(TabItemNode, (props: TabPro
     }
   });
 
-  let ElementType: React.ElementType = item.props.href ? 'a' : 'div';
+  let ElementType = item.props.href ? dom.a : dom.div;
   let DOMProps = filterDOMProps(props as any, {global: true});
   delete DOMProps.id;
   delete DOMProps.onClick;
@@ -327,7 +327,7 @@ export const Tab = /*#__PURE__*/ createLeafComponent(TabItemNode, (props: TabPro
   );
 });
 
-export interface TabPanelsProps<T> extends CollectionProps<T>, StyleProps, GlobalDOMAttributes<HTMLDivElement> {
+export interface TabPanelsProps<T> extends Omit<CollectionProps<T>, 'disabledKeys'>, StyleProps, DOMRenderProps<'div', undefined>, GlobalDOMAttributes<HTMLDivElement> {
   /**
    * The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element.
    * @default 'react-aria-TabPanels'
@@ -354,7 +354,7 @@ export const TabPanels = /*#__PURE__*/ createHideableComponent(function TabPanel
     if (hasTransition.current == null) {
       hasTransition.current = /width|height|all/.test(window.getComputedStyle(el).transition);
     }
-    
+
     if (hasTransition.current && selectedKeyRef.current != null && selectedKeyRef.current !== state.selectedKey) {
       // Measure auto size.
       el.style.setProperty('--tab-panel-width', 'auto');
@@ -365,7 +365,7 @@ export const TabPanels = /*#__PURE__*/ createHideableComponent(function TabPanel
         // Revert to previous size.
         el.style.setProperty('--tab-panel-width', prevSize.current.width + 'px');
         el.style.setProperty('--tab-panel-height', prevSize.current.height + 'px');
-        
+
         // Force style re-calculation to trigger animations.
         window.getComputedStyle(el).height;
 
@@ -382,7 +382,7 @@ export const TabPanels = /*#__PURE__*/ createHideableComponent(function TabPanel
           .catch(() => {});
       }
     }
-    
+
     selectedKeyRef.current = state.selectedKey;
   }, [ref, state.selectedKey]);
 
@@ -394,13 +394,18 @@ export const TabPanels = /*#__PURE__*/ createHideableComponent(function TabPanel
     prevSize.current = ref.current.getBoundingClientRect();
   }
 
+  let DOMProps = filterDOMProps(props, {labelable: true, global: true});
+  delete DOMProps.id;
+
   return (
-    <div 
-      {...props}
+    <dom.div
+      render={props.render}
+      {...DOMProps}
       ref={ref}
+      style={props.style}
       className={props.className || 'react-aria-TabPanels'}>
       <Collection {...props} />
-    </div>
+    </dom.div>
   );
 });
 
@@ -466,7 +471,7 @@ function TabPanelInner(props: TabPanelProps & {tabPanelRef: RefObject<HTMLDivEle
     : mergeProps(DOMProps, renderProps);
 
   return (
-    <div
+    <dom.div
       {...domProps}
       ref={ref}
       data-focused={isFocused || undefined}
@@ -485,6 +490,6 @@ function TabPanelInner(props: TabPanelProps & {tabPanelRef: RefObject<HTMLDivEle
           {renderProps.children}
         </CollectionRendererContext.Provider>
       </Provider>
-    </div>
+    </dom.div>
   );
 }

package/src/TagGroup.tsx

@@ -15,7 +15,9 @@ import {ButtonContext} from './Button';
 import {
   ClassNameOrFunction,
   ContextValue,
+  dom,
   DOMProps,
+  DOMRenderProps,
   Provider,
   RenderProps,
   SlotProps,
@@ -27,7 +29,7 @@ import {
 import {Collection, CollectionBuilder, createLeafComponent, ItemNode} from '@react-aria/collections';
 import {CollectionProps, CollectionRendererContext, DefaultCollectionRenderer, ItemRenderProps, usePersistedKeys} from './Collection';
 import {filterDOMProps, mergeProps, useObjectRef} from '@react-aria/utils';
-import {forwardRefType, GlobalDOMAttributes, HoverEvents, Key, LinkDOMProps, PressEvents, RefObject} from '@react-types/shared';
+import {FocusEvents, forwardRefType, GlobalDOMAttributes, HoverEvents, Key, LinkDOMProps, PressEvents, RefObject} from '@react-types/shared';
 import {LabelContext} from './Label';
 import {ListState, Node, UNSTABLE_useFilteredListState, useListState} from 'react-stately';
 import {ListStateContext} from './ListBox';
@@ -37,7 +39,7 @@ import {SelectionIndicatorContext} from './SelectionIndicator';
 import {SharedElementTransition} from './SharedElementTransition';
 import {TextContext} from './Text';
 
-export interface TagGroupProps extends Omit<AriaTagGroupProps<unknown>, 'children' | 'items' | 'label' | 'description' | 'errorMessage' | 'keyboardDelegate'>, DOMProps, SlotProps, GlobalDOMAttributes<HTMLDivElement> {
+export interface TagGroupProps extends Omit<AriaTagGroupProps<unknown>, 'children' | 'items' | 'label' | 'description' | 'errorMessage' | 'keyboardDelegate'>, DOMProps, SlotProps, DOMRenderProps<'div', undefined>, GlobalDOMAttributes<HTMLDivElement> {
   /**
    * The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element.
    * @default 'react-aria-TagGroup'
@@ -67,7 +69,7 @@ export interface TagListRenderProps {
   state: ListState<unknown>
 }
 
-export interface TagListProps<T> extends Omit<CollectionProps<T>, 'disabledKeys'>, StyleRenderProps<TagListRenderProps>, GlobalDOMAttributes<HTMLDivElement> {
+export interface TagListProps<T> extends Omit<CollectionProps<T>, 'disabledKeys'>, StyleRenderProps<TagListRenderProps, 'div'>, GlobalDOMAttributes<HTMLDivElement> {
   /**
    * 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.
    * @default 'react-aria-TagList'
@@ -97,7 +99,7 @@ export const TagGroup = /*#__PURE__*/ (forwardRef as forwardRefType)(function Ta
 interface TagGroupInnerProps<T> {
   props: TagGroupProps & SelectableCollectionContextValue<T>,
   forwardedRef: ForwardedRef<HTMLDivElement>,
-  collection
+  collection: any
 }
 
 function TagGroupInner<T extends object>({props, forwardedRef: ref, collection}: TagGroupInnerProps<T>) {
@@ -133,7 +135,8 @@ function TagGroupInner<T extends object>({props, forwardedRef: ref, collection}:
   }, filteredState, tagListRef);
 
   return (
-    <div
+    <dom.div
+      render={props.render}
       {...domProps}
       id={id}
       ref={ref}
@@ -154,7 +157,7 @@ function TagGroupInner<T extends object>({props, forwardedRef: ref, collection}:
         ]}>
         {props.children}
       </Provider>
-    </div>
+    </dom.div>
   );
 }
 
@@ -186,8 +189,8 @@ function TagListInner<T extends object>({props, forwardedRef}: TagListInnerProps
     state
   };
   let renderProps = useRenderProps({
-    className: props.className,
-    style: props.style,
+    ...props,
+    children: undefined,
     defaultClassName: 'react-aria-TagList',
     values: renderValues
   });
@@ -196,7 +199,7 @@ function TagListInner<T extends object>({props, forwardedRef}: TagListInnerProps
   let DOMProps = filterDOMProps(props, {global: true});
 
   return (
-    <div
+    <dom.div
       {...mergeProps(DOMProps, renderProps, gridProps, focusProps)}
       ref={ref}
       data-empty={state.collection.size === 0 || undefined}
@@ -207,7 +210,7 @@ function TagListInner<T extends object>({props, forwardedRef}: TagListInnerProps
           ? props.renderEmptyState(renderValues)
           : <CollectionRoot collection={state.collection} persistedKeys={persistedKeys} />}
       </SharedElementTransition>
-    </div>
+    </dom.div>
   );
 }
 
@@ -219,7 +222,7 @@ export interface TagRenderProps extends Omit<ItemRenderProps, 'allowsDragging' |
   allowsRemoving: boolean
 }
 
-export interface TagProps extends RenderProps<TagRenderProps>, LinkDOMProps, HoverEvents, PressEvents, Omit<GlobalDOMAttributes<HTMLDivElement>, 'onClick'> {
+export interface TagProps extends RenderProps<TagRenderProps, 'div'>, LinkDOMProps, HoverEvents, FocusEvents, PressEvents, Omit<GlobalDOMAttributes<HTMLDivElement>, 'onClick'> {
   /**
    * 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.
    * @default 'react-aria-Tag'
@@ -277,7 +280,7 @@ export const Tag = /*#__PURE__*/ createLeafComponent(ItemNode, (props: TagProps,
   delete DOMProps.onClick;
 
   return (
-    <div
+    <dom.div
       ref={ref}
       {...mergeProps(DOMProps, renderProps, rowProps, focusProps, hoverProps)}
       data-selected={states.isSelected || undefined}
@@ -302,6 +305,6 @@ export const Tag = /*#__PURE__*/ createLeafComponent(ItemNode, (props: TagProps,
           {renderProps.children}
         </Provider>
       </div>
-    </div>
+    </dom.div>
   );
 });

package/src/Text.tsx

@@ -10,10 +10,10 @@
  * governing permissions and limitations under the License.
  */
 
-import {ContextValue, useContextProps} from './utils';
+import {ContextValue, dom, DOMRenderProps, useContextProps} from './utils';
 import React, {createContext, ForwardedRef, forwardRef, HTMLAttributes} from 'react';
 
-export interface TextProps extends HTMLAttributes<HTMLElement> {
+export interface TextProps extends HTMLAttributes<HTMLElement>, DOMRenderProps<any, any> {
   elementType?: string
 }
 
@@ -21,7 +21,8 @@ export const TextContext = createContext<ContextValue<TextProps, HTMLElement>>({
 
 export const Text = forwardRef(function Text(props: TextProps, ref: ForwardedRef<HTMLElement>) {
   [props, ref] = useContextProps(props, ref, TextContext);
-  let {elementType: ElementType = 'span', ...domProps} = props;
+  let {elementType = 'span', ...domProps} = props;
+  let ElementType = dom[elementType];
   // @ts-ignore
   return <ElementType className="react-aria-Text" {...domProps} ref={ref} />;
 });

package/src/TextArea.tsx

@@ -1,6 +1,7 @@
 import {
   ClassNameOrFunction,
   ContextValue,
+  dom,
   StyleRenderProps,
   useContextProps,
   useRenderProps
@@ -9,7 +10,7 @@ import {HoverEvents, mergeProps, useFocusRing, useHover} from 'react-aria';
 import {InputRenderProps} from './Input';
 import React, {createContext, ForwardedRef, forwardRef, TextareaHTMLAttributes} from 'react';
 
-export interface TextAreaProps extends Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, 'className' | 'style'>, HoverEvents, StyleRenderProps<InputRenderProps> {
+export interface TextAreaProps extends Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, 'className' | 'style'>, HoverEvents, StyleRenderProps<InputRenderProps, 'textarea'> {
   /**
    * 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.
    * @default 'react-aria-TextArea'
@@ -51,7 +52,7 @@ export const TextArea = forwardRef(function TextArea(props: TextAreaProps, ref:
   });
 
   return (
-    <textarea
+    <dom.textarea
       {...mergeProps(filterHoverProps(props), focusProps, hoverProps)}
       {...renderProps}
       ref={ref}

package/src/TextField.tsx

@@ -14,6 +14,7 @@ import {AriaTextFieldProps, useTextField} from 'react-aria';
 import {
   ClassNameOrFunction,
   ContextValue,
+  dom,
   DOMProps,
   Provider,
   RACValidation,
@@ -61,7 +62,7 @@ export interface TextFieldRenderProps {
   isRequired: boolean
 }
 
-export interface TextFieldProps extends Omit<AriaTextFieldProps, 'label' | 'placeholder' | 'description' | 'errorMessage' | 'validationState' | 'validationBehavior'>, RACValidation, Omit<DOMProps, 'style' | 'className' | 'children'>, SlotProps, RenderProps<TextFieldRenderProps>, GlobalDOMAttributes<HTMLDivElement> {
+export interface TextFieldProps extends Omit<AriaTextFieldProps, 'label' | 'placeholder' | 'description' | 'errorMessage' | 'validationState' | 'validationBehavior'>, RACValidation, Omit<DOMProps, 'style' | 'className' | 'render' | 'children'>, SlotProps, RenderProps<TextFieldRenderProps>, GlobalDOMAttributes<HTMLDivElement> {
   /**
    * 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.
    * @default 'react-aria-TextField'
@@ -117,7 +118,7 @@ export const TextField = /*#__PURE__*/ createHideableComponent(function TextFiel
   delete DOMProps.id;
 
   return (
-    <div
+    <dom.div
       {...DOMProps}
       {...renderProps}
       ref={ref}
@@ -142,6 +143,6 @@ export const TextField = /*#__PURE__*/ createHideableComponent(function TextFiel
         ]}>
         {renderProps.children}
       </Provider>
-    </div>
+    </dom.div>
   );
 });