react-aria-components 1.14.0 → 1.15.1

package/src/Menu.tsx

@@ -17,6 +17,9 @@ import {
   ClassNameOrFunction,
   ContextValue,
   DEFAULT_SLOT,
+  dom,
+  DOMRenderProps,
+  PossibleLinkDOMRenderProps,
   Provider,
   RenderProps,
   SlotProps,
@@ -29,7 +32,7 @@ import {
 import {CollectionProps, CollectionRendererContext, ItemRenderProps, SectionContext, SectionProps, usePersistedKeys} from './Collection';
 import {FieldInputContext, SelectableCollectionContext, SelectableCollectionContextValue} from './RSPContexts';
 import {filterDOMProps, useObjectRef, useResizeObserver} from '@react-aria/utils';
-import {FocusStrategy, forwardRefType, GlobalDOMAttributes, HoverEvents, Key, LinkDOMProps, MultipleSelection, PressEvents} from '@react-types/shared';
+import {FocusEvents, FocusStrategy, forwardRefType, GlobalDOMAttributes, HoverEvents, Key, LinkDOMProps, MultipleSelection, PressEvents} from '@react-types/shared';
 import {HeaderContext} from './Header';
 import {KeyboardContext} from './Keyboard';
 import {MultipleSelectionState, SelectionManager, useMultipleSelectionState} from '@react-stately/selection';
@@ -194,7 +197,9 @@ export interface MenuProps<T> extends Omit<AriaMenuProps<T>, 'children'>, Collec
    */
   className?: ClassNameOrFunction<MenuRenderProps>,
   /** Provides content to display when there are no items in the list. */
-  renderEmptyState?: () => ReactNode
+  renderEmptyState?: () => ReactNode,
+  /** Whether the menu should close when the menu item is selected. */
+  shouldCloseOnSelect?: boolean
 }
 
 /**
@@ -232,9 +237,9 @@ function MenuInner<T extends object>({props, collection, menuRef: ref}: MenuInne
   let {isVirtualized, CollectionRoot} = useContext(CollectionRendererContext);
   let {menuProps} = useMenu({...props, isVirtualized, onClose: props.onClose || triggerState?.close}, state, ref);
   let renderProps = useRenderProps({
+    ...props,
+    children: undefined,
     defaultClassName: 'react-aria-Menu',
-    className: props.className,
-    style: props.style,
     values: {
       isEmpty: state.collection.size === 0
     }
@@ -255,7 +260,7 @@ function MenuInner<T extends object>({props, collection, menuRef: ref}: MenuInne
 
   return (
     <FocusScope>
-      <div
+      <dom.div
         {...mergeProps(DOMProps, renderProps, menuProps)}
         ref={ref as RefObject<HTMLDivElement>}
         slot={props.slot || undefined}
@@ -267,7 +272,7 @@ function MenuInner<T extends object>({props, collection, menuRef: ref}: MenuInne
             [SeparatorContext, {elementType: 'div'}],
             [SectionContext, {name: 'MenuSection', render: MenuSectionInner}],
             [SubmenuTriggerContext, {parentMenuRef: ref, shouldUseVirtualFocus: autocompleteMenuProps?.shouldUseVirtualFocus}],
-            [MenuItemContext, null],
+            [MenuItemContext, {shouldCloseOnSelect: props.shouldCloseOnSelect}],
             [SelectableCollectionContext, null],
             [FieldInputContext, null],
             [SelectionManagerContext, state.selectionManager],
@@ -284,17 +289,19 @@ function MenuInner<T extends object>({props, collection, menuRef: ref}: MenuInne
           </SharedElementTransition>
         </Provider>
         {emptyState}
-      </div>
+      </dom.div>
     </FocusScope>
   );
 }
 
-export interface MenuSectionProps<T> extends SectionProps<T>, MultipleSelection {
+export interface MenuSectionProps<T> extends SectionProps<T>, MultipleSelection, DOMRenderProps<'section', undefined> {
   /**
    * The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element.
    * @default 'react-aria-MenuSection'
    */
-  className?: string
+  className?: string,
+  /** Whether the menu should close when the menu item is selected. */
+  shouldCloseOnSelect?: boolean
 }
 
 // A subclass of SelectionManager that forwards focus-related properties to the parent,
@@ -337,31 +344,37 @@ function MenuSectionInner<T extends object>(props: MenuSectionProps<T>, ref: For
     'aria-label': section.props['aria-label'] ?? undefined
   });
   let renderProps = useRenderProps({
+    ...props,
+    id: undefined,
+    children: undefined,
     defaultClassName: className,
     className: section.props?.className,
     style: section.props?.style,
-    values: {}
+    values: undefined
   });
 
   let parent = useContext(SelectionManagerContext)!;
   let selectionState = useMultipleSelectionState(props);
   let manager = props.selectionMode != null ? new GroupSelectionManager(parent, selectionState) : parent;
 
+  let closeOnSelect = useSlottedContext(MenuItemContext)?.shouldCloseOnSelect;
+
   let DOMProps = filterDOMProps(props as any, {global: true});
   delete DOMProps.id;
 
   return (
-    <section
+    <dom.section
       {...mergeProps(DOMProps, renderProps, groupProps)}
       ref={ref}>
       <Provider
         values={[
           [HeaderContext, {...headingProps, ref: headingRef}],
-          [SelectionManagerContext, manager]
+          [SelectionManagerContext, manager],
+          [MenuItemContext, {shouldCloseOnSelect: props.shouldCloseOnSelect ?? closeOnSelect}]
         ]}>
         <CollectionBranch collection={state.collection} parent={section} />
       </Provider>
-    </section>
+    </dom.section>
   );
 }
 
@@ -385,7 +398,7 @@ export interface MenuItemRenderProps extends ItemRenderProps {
   isOpen: boolean
 }
 
-export interface MenuItemProps<T = object> extends RenderProps<MenuItemRenderProps>, LinkDOMProps, HoverEvents, PressEvents, Omit<GlobalDOMAttributes<HTMLDivElement>, 'onClick'> {
+export interface MenuItemProps<T = object> extends Omit<RenderProps<MenuItemRenderProps>, 'render'>, PossibleLinkDOMRenderProps<'div', MenuItemRenderProps>, 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-MenuItem'
@@ -402,7 +415,9 @@ export interface MenuItemProps<T = object> extends RenderProps<MenuItemRenderPro
   /** Whether the item is disabled. */
   isDisabled?: boolean,
   /** Handler that is called when the item is selected. */
-  onAction?: () => void
+  onAction?: () => void,
+  /** Whether the menu should close when the menu item is selected. */
+  shouldCloseOnSelect?: boolean
 }
 
 const MenuItemContext = createContext<ContextValue<MenuItemProps, HTMLDivElement>>(null);
@@ -427,7 +442,7 @@ export const MenuItem = /*#__PURE__*/ createLeafComponent(ItemNode, function Men
   let {hoverProps, isHovered} = useHover({
     isDisabled: states.isDisabled
   });
-  let renderProps = useRenderProps({
+  let renderProps = useRenderProps<MenuItemRenderProps, any>({
     ...props,
     id: undefined,
     children: item.rendered,
@@ -443,7 +458,7 @@ export const MenuItem = /*#__PURE__*/ createLeafComponent(ItemNode, function Men
     }
   });
 
-  let ElementType: React.ElementType = props.href ? 'a' : 'div';
+  let ElementType = props.href ? dom.a : dom.div;
   let DOMProps = filterDOMProps(props as any, {global: true});
   delete DOMProps.id;
   delete DOMProps.onClick;

package/src/Meter.tsx

@@ -15,6 +15,7 @@ import {clamp} from '@react-stately/utils';
 import {
   ClassNameOrFunction,
   ContextValue,
+  dom,
   RenderProps,
   SlotProps,
   useContextProps,
@@ -83,10 +84,10 @@ export const Meter = /*#__PURE__*/ (forwardRef as forwardRefType)(function Meter
   let DOMProps = filterDOMProps(props, {global: true});
 
   return (
-    <div {...mergeProps(DOMProps, renderProps, meterProps)} ref={ref} slot={props.slot || undefined}>
+    <dom.div {...mergeProps(DOMProps, renderProps, meterProps)} ref={ref} slot={props.slot || undefined}>
       <LabelContext.Provider value={{...labelProps, ref: labelRef, elementType: 'span'}}>
         {renderProps.children}
       </LabelContext.Provider>
-    </div>
+    </dom.div>
   );
 });

package/src/Modal.tsx

@@ -14,6 +14,7 @@ import {AriaModalOverlayProps, DismissButton, Overlay, useIsSSR, useModalOverlay
 import {
   ClassNameOrFunction,
   ContextValue,
+  dom,
   Provider,
   RenderProps,
   SlotProps,
@@ -200,7 +201,7 @@ function ModalOverlayInner({UNSTABLE_portalContainer, ...props}: ModalOverlayInn
 
   return (
     <Overlay isExiting={props.isExiting} portalContainer={UNSTABLE_portalContainer}>
-      <div
+      <dom.div
         {...mergeProps(filterDOMProps(props, {global: true}), underlayProps)}
         {...renderProps}
         style={style}
@@ -214,7 +215,7 @@ function ModalOverlayInner({UNSTABLE_portalContainer, ...props}: ModalOverlayInn
           ]}>
           {renderProps.children}
         </Provider>
-      </div>
+      </dom.div>
     </Overlay>
   );
 }
@@ -246,7 +247,7 @@ function ModalContent(props: ModalContentProps) {
   });
 
   return (
-    <div
+    <dom.div
       {...mergeProps(filterDOMProps(props, {global: true}), modalProps)}
       {...renderProps}
       ref={ref}
@@ -256,6 +257,6 @@ function ModalContent(props: ModalContentProps) {
         <DismissButton onDismiss={state.close} />
       }
       {renderProps.children}
-    </div>
+    </dom.div>
   );
 }

package/src/NumberField.tsx

@@ -15,6 +15,7 @@ import {ButtonContext} from './Button';
 import {
   ClassNameOrFunction,
   ContextValue,
+  dom,
   Provider,
   RACValidation,
   removeDataAttributes,
@@ -137,7 +138,7 @@ export const NumberField = /*#__PURE__*/ (forwardRef as forwardRefType)(function
         }],
         [FieldErrorContext, validation]
       ]}>
-      <div
+      <dom.div
         {...DOMProps}
         {...renderProps}
         ref={ref}

package/src/OverlayArrow.tsx

@@ -13,6 +13,7 @@
 import {
   ClassNameOrFunction,
   ContextValue,
+  dom,
   RenderProps,
   useContextProps,
   useRenderProps
@@ -30,7 +31,7 @@ export const OverlayArrowContext = createContext<ContextValue<OverlayArrowContex
   placement: 'bottom'
 });
 
-export interface OverlayArrowProps extends Omit<HTMLAttributes<HTMLDivElement>, 'className' | 'style' | 'children'>, RenderProps<OverlayArrowRenderProps>, DOMProps {
+export interface OverlayArrowProps extends Omit<HTMLAttributes<HTMLDivElement>, 'className' | 'style' | 'render' | 'children'>, RenderProps<OverlayArrowRenderProps>, DOMProps {
   /**
    * 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-OverlayArrow'
@@ -77,7 +78,7 @@ export const OverlayArrow = /*#__PURE__*/ (forwardRef as forwardRefType)(functio
   let DOMProps = filterDOMProps(props);
 
   return (
-    <div
+    <dom.div
       {...DOMProps}
       {...renderProps}
       style={{

package/src/Popover.tsx

@@ -15,12 +15,13 @@ import {AriaPopoverProps, DismissButton, Overlay, PlacementAxis, PositionProps,
 import {
   ClassNameOrFunction,
   ContextValue,
+  dom,
   RenderProps,
   SlotProps,
   useContextProps,
   useRenderProps
 } from './utils';
-import {filterDOMProps, mergeProps, useEnterAnimation, useExitAnimation, useLayoutEffect} from '@react-aria/utils';
+import {filterDOMProps, mergeProps, nodeContains, useEnterAnimation, useExitAnimation, useLayoutEffect} from '@react-aria/utils';
 import {focusSafely} from '@react-aria/interactions';
 import {OverlayArrowContext} from './OverlayArrow';
 import {OverlayTriggerProps, OverlayTriggerState, useOverlayTriggerState} from 'react-stately';
@@ -198,7 +199,7 @@ function PopoverInner({state, isExiting, UNSTABLE_portalContainer, clearContexts
   // Focus the popover itself on mount, unless a child element is already focused.
   // Skip this for submenus since hovering a submenutrigger should keep focus on the trigger
   useEffect(() => {
-    if (isDialog && props.trigger !== 'SubmenuTrigger' && ref.current && !ref.current.contains(document.activeElement)) {
+    if (isDialog && props.trigger !== 'SubmenuTrigger' && ref.current && !nodeContains(ref.current, document.activeElement)) {
       focusSafely(ref.current);
     }
   }, [isDialog, ref, props.trigger]);
@@ -220,7 +221,7 @@ function PopoverInner({state, isExiting, UNSTABLE_portalContainer, clearContexts
   };
 
   let overlay = (
-    <div
+    <dom.div
       {...mergeProps(filterDOMProps(props, {global: true}), popoverProps)}
       {...renderProps}
       role={isDialog ? 'dialog' : undefined}
@@ -240,7 +241,7 @@ function PopoverInner({state, isExiting, UNSTABLE_portalContainer, clearContexts
         {children}
       </OverlayArrowContext.Provider>
       <DismissButton onDismiss={state.close} />
-    </div>
+    </dom.div>
   );
 
   // If this is a root popover, render an extra div to act as the portal container for submenus/subdialogs.

package/src/ProgressBar.tsx

@@ -15,6 +15,7 @@ import {clamp} from '@react-stately/utils';
 import {
   ClassNameOrFunction,
   ContextValue,
+  dom,
   RenderProps,
   SlotProps,
   useContextProps,
@@ -91,10 +92,10 @@ export const ProgressBar = forwardRef(function ProgressBar(props: ProgressBarPro
   let DOMProps = filterDOMProps(props, {global: true});
 
   return (
-    <div {...mergeProps(DOMProps, renderProps, progressBarProps)} ref={ref} slot={props.slot || undefined}>
+    <dom.div {...mergeProps(DOMProps, renderProps, progressBarProps)} ref={ref} slot={props.slot || undefined}>
       <LabelContext.Provider value={{...labelProps, ref: labelRef, elementType: 'span'}}>
         {renderProps.children}
       </LabelContext.Provider>
-    </div>
+    </dom.div>
   );
 });

package/src/RadioGroup.tsx

@@ -14,6 +14,7 @@ import {AriaRadioGroupProps, AriaRadioProps, HoverEvents, Orientation, useFocusR
 import {
   ClassNameOrFunction,
   ContextValue,
+  dom,
   Provider,
   RACValidation,
   removeDataAttributes,
@@ -42,7 +43,7 @@ export interface RadioGroupProps extends Omit<AriaRadioGroupProps, 'children' |
    */
   className?: ClassNameOrFunction<RadioGroupRenderProps>
 }
-export interface RadioProps extends Omit<AriaRadioProps, 'children'>, HoverEvents, RenderProps<RadioRenderProps>, SlotProps, Omit<GlobalDOMAttributes<HTMLLabelElement>, 'onClick'> {
+export interface RadioProps extends Omit<AriaRadioProps, 'children'>, HoverEvents, RenderProps<RadioRenderProps, 'label'>, SlotProps, Omit<GlobalDOMAttributes<HTMLLabelElement>, '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-Radio'
@@ -175,7 +176,7 @@ export const RadioGroup = /*#__PURE__*/ (forwardRef as forwardRefType)(function
   let DOMProps = filterDOMProps(props, {global: true});
 
   return (
-    <div
+    <dom.div
       {...mergeProps(DOMProps, renderProps, radioGroupProps)}
       ref={ref}
       slot={props.slot || undefined}
@@ -200,7 +201,7 @@ export const RadioGroup = /*#__PURE__*/ (forwardRef as forwardRefType)(function
           {renderProps.children}
         </SharedElementTransition>
       </Provider>
-    </div>
+    </dom.div>
   );
 });
 
@@ -249,7 +250,7 @@ export const Radio = /*#__PURE__*/ (forwardRef as forwardRefType)(function Radio
   delete DOMProps.onClick;
 
   return (
-    <label
+    <dom.label
       {...mergeProps(DOMProps, labelProps, hoverProps, renderProps)}
       ref={ref}
       data-selected={isSelected || undefined}
@@ -267,6 +268,6 @@ export const Radio = /*#__PURE__*/ (forwardRef as forwardRefType)(function Radio
       <SelectionIndicatorContext.Provider value={{isSelected}}>
         {renderProps.children}
       </SelectionIndicatorContext.Provider>
-    </label>
+    </dom.label>
   );
 });

package/src/SearchField.tsx

@@ -15,6 +15,7 @@ import {ButtonContext} from './Button';
 import {
   ClassNameOrFunction,
   ContextValue,
+  dom,
   Provider,
   RACValidation,
   removeDataAttributes,
@@ -120,7 +121,7 @@ export const SearchField = /*#__PURE__*/ createHideableComponent(function Search
   delete DOMProps.id;
 
   return (
-    <div
+    <dom.div
       {...DOMProps}
       {...renderProps}
       ref={ref}
@@ -146,6 +147,6 @@ export const SearchField = /*#__PURE__*/ createHideableComponent(function Search
         ]}>
         {renderProps.children}
       </Provider>
-    </div>
+    </dom.div>
   );
 });

package/src/Select.tsx

@@ -15,6 +15,7 @@ import {ButtonContext} from './Button';
 import {
   ClassNameOrFunction,
   ContextValue,
+  dom,
   Provider,
   RACValidation,
   removeDataAttributes,
@@ -222,7 +223,7 @@ function SelectInner<T extends object>({props, selectRef: ref, collection}: Sele
         }],
         [FieldErrorContext, validation]
       ]}>
-      <div
+      <dom.div
         {...mergeProps(DOMProps, renderProps, focusProps)}
         ref={ref}
         slot={props.slot || undefined}
@@ -236,7 +237,7 @@ function SelectInner<T extends object>({props, selectRef: ref, collection}: Sele
         <HiddenSelect
           {...hiddenSelectProps}
           autoComplete={props.autoComplete} />
-      </div>
+      </dom.div>
     </Provider>
   );
 }
@@ -260,7 +261,7 @@ export interface SelectValueRenderProps<T> {
   state: SelectState<T, 'single' | 'multiple'>
 }
 
-export interface SelectValueProps<T extends object> extends Omit<HTMLAttributes<HTMLElement>, keyof RenderProps<unknown>>, RenderProps<SelectValueRenderProps<T>> {
+export interface SelectValueProps<T extends object> extends Omit<HTMLAttributes<HTMLElement>, keyof RenderProps<unknown>>, RenderProps<SelectValueRenderProps<T>, 'span'> {
   /**
    * 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-SelectValue'
@@ -345,11 +346,11 @@ export const SelectValue = /*#__PURE__*/ createHideableComponent(function Select
   let DOMProps = filterDOMProps(props, {global: true});
 
   return (
-    <span ref={ref} {...DOMProps} {...renderProps} data-placeholder={state.selectedItems.length === 0 || undefined}>
+    <dom.span ref={ref} {...DOMProps} {...renderProps} data-placeholder={state.selectedItems.length === 0 || undefined}>
       {/* clear description and error message slots */}
       <TextContext.Provider value={undefined}>
         {renderProps.children}
       </TextContext.Provider>
-    </span>
+    </dom.span>
   );
 });

package/src/Separator.tsx

@@ -12,12 +12,12 @@
 
 import {SeparatorProps as AriaSeparatorProps, useSeparator} from 'react-aria';
 import {BaseCollection, CollectionNode, createLeafComponent} from '@react-aria/collections';
-import {ContextValue, SlotProps, StyleProps, useContextProps} from './utils';
+import {ContextValue, dom, DOMRenderProps, SlotProps, StyleProps, useContextProps} from './utils';
 import {filterDOMProps, mergeProps} from '@react-aria/utils';
 import {GlobalDOMAttributes} from '@react-types/shared';
-import React, {createContext, ElementType, ForwardedRef} from 'react';
+import React, {createContext, ForwardedRef} from 'react';
 
-export interface SeparatorProps extends AriaSeparatorProps, StyleProps, SlotProps, GlobalDOMAttributes<HTMLElement> {
+export interface SeparatorProps extends AriaSeparatorProps, StyleProps, SlotProps, DOMRenderProps<'hr' | 'div', undefined>, GlobalDOMAttributes<HTMLElement> {
   /**
    * The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element.
    * @default 'react-aria-Separator'
@@ -49,11 +49,13 @@ export const Separator = /*#__PURE__*/ createLeafComponent(SeparatorNode, functi
   [props, ref] = useContextProps(props, ref, SeparatorContext);
 
   let {elementType, orientation, style, className, slot, ...otherProps} = props;
-  let Element = (elementType as ElementType) || 'hr';
+  let Element = elementType || 'hr';
   if (Element === 'hr' && orientation === 'vertical') {
     Element = 'div';
   }
 
+  let ElementType = dom[Element];
+
   let {separatorProps} = useSeparator({
     ...otherProps,
     elementType,
@@ -63,7 +65,8 @@ export const Separator = /*#__PURE__*/ createLeafComponent(SeparatorNode, functi
   let DOMProps = filterDOMProps(props, {global: true});
 
   return (
-    <Element
+    <ElementType
+      render={props.render}
       {...mergeProps(DOMProps, separatorProps)}
       style={style}
       className={className ?? 'react-aria-Separator'}

package/src/SharedElementTransition.tsx

@@ -10,9 +10,9 @@
  * governing permissions and limitations under the License.
  */
 
+import {dom, RenderProps, useRenderProps} from './utils';
 import {flushSync} from 'react-dom';
 import React, {createContext, ForwardedRef, forwardRef, HTMLAttributes, ReactNode, RefObject, useContext, useRef, useState} from 'react';
-import {RenderProps, useRenderProps} from './utils';
 import {useLayoutEffect} from '@react-aria/utils';
 import {useObjectRef} from 'react-aria';
 
@@ -63,7 +63,7 @@ export interface SharedElementProps extends SharedElementPropsBase {
  * An element that animates between its old and new position when moving between parents.
  */
 export const SharedElement = forwardRef(function SharedElement(props: SharedElementProps, ref: ForwardedRef<HTMLDivElement>) {
-  let {name, isVisible = true, children, className, style, ...divProps} = props;
+  let {name, isVisible = true, children, className, style, render, ...divProps} = props;
   let [state, setState] = useState(isVisible ? 'visible' : 'hidden');
   let scopeRef = useContext(SharedElementContext);
   if (!scopeRef) {
@@ -164,6 +164,7 @@ export const SharedElement = forwardRef(function SharedElement(props: SharedElem
     children,
     className,
     style,
+    render,
     values: {
       isEntering: state === 'entering',
       isExiting: state === 'exiting'
@@ -175,7 +176,7 @@ export const SharedElement = forwardRef(function SharedElement(props: SharedElem
   }
 
   return (
-    <div
+    <dom.div
       {...divProps}
       {...renderProps}
       ref={ref}

package/src/Slider.tsx

@@ -14,6 +14,7 @@ import {AriaSliderProps, AriaSliderThumbProps, HoverEvents, mergeProps, Orientat
 import {
   ClassNameOrFunction,
   ContextValue,
+  dom,
   Provider,
   RenderProps,
   SlotProps,
@@ -101,7 +102,7 @@ export const Slider = /*#__PURE__*/ (forwardRef as forwardRefType)(function Slid
         [SliderOutputContext, outputProps],
         [LabelContext, {...labelProps, ref: labelRef}]
       ]}>
-      <div
+      <dom.div
         {...mergeProps(DOMProps, renderProps, groupProps)}
         ref={ref}
         slot={props.slot || undefined}
@@ -111,7 +112,7 @@ export const Slider = /*#__PURE__*/ (forwardRef as forwardRefType)(function Slid
   );
 });
 
-export interface SliderOutputProps extends RenderProps<SliderRenderProps>, GlobalDOMAttributes<HTMLOutputElement> {
+export interface SliderOutputProps extends RenderProps<SliderRenderProps, 'output'>, GlobalDOMAttributes<HTMLOutputElement> {
   /**
    * 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-SliderOutput'
@@ -125,12 +126,13 @@ interface SliderOutputContextValue extends Omit<OutputHTMLAttributes<HTMLOutputE
  */
 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 {children, style, className, render, ...otherProps} = props;
   let state = useContext(SliderStateContext)!;
   let renderProps = useRenderProps({
     className,
     style,
     children,
+    render,
     defaultChildren: state.getThumbValueLabel(0),
     defaultClassName: 'react-aria-SliderOutput',
     values: {
@@ -141,7 +143,7 @@ export const SliderOutput = /*#__PURE__*/ (forwardRef as forwardRefType)(functio
   });
 
   return (
-    <output
+    <dom.output
       {...otherProps}
       {...renderProps}
       ref={ref}
@@ -187,7 +189,7 @@ export const SliderTrack = /*#__PURE__*/ (forwardRef as forwardRefType)(function
   });
 
   return (
-    <div
+    <dom.div
       {...mergeProps(otherProps, hoverProps)}
       {...renderProps}
       ref={ref}
@@ -284,7 +286,7 @@ export const SliderThumb = /*#__PURE__*/ (forwardRef as forwardRefType)(function
   delete DOMProps.id;
 
   return (
-    <div
+    <dom.div
       {...mergeProps(DOMProps, thumbProps, hoverProps)}
       {...renderProps}
       ref={ref}
@@ -303,6 +305,6 @@ export const SliderThumb = /*#__PURE__*/ (forwardRef as forwardRefType)(function
         ]}>
         {renderProps.children}
       </Provider>
-    </div>
+    </dom.div>
   );
 });

package/src/Switch.tsx

@@ -12,20 +12,21 @@
 
 import {AriaSwitchProps, HoverEvents, mergeProps, useFocusRing, useHover, useSwitch, VisuallyHidden} from 'react-aria';
 import {
- ClassNameOrFunction,
- ContextValue,
- removeDataAttributes,
- RenderProps,
- SlotProps,
- useContextProps,
- useRenderProps
+  ClassNameOrFunction,
+  ContextValue,
+  dom,
+  removeDataAttributes,
+  RenderProps,
+  SlotProps,
+  useContextProps,
+  useRenderProps
 } from './utils';
 import {filterDOMProps, mergeRefs, useObjectRef} from '@react-aria/utils';
 import {forwardRefType, GlobalDOMAttributes, RefObject} from '@react-types/shared';
 import React, {createContext, ForwardedRef, forwardRef} from 'react';
 import {ToggleState, useToggleState} from 'react-stately';
 
-export interface SwitchProps extends Omit<AriaSwitchProps, 'children'>, HoverEvents, RenderProps<SwitchRenderProps>, SlotProps, Omit<GlobalDOMAttributes<HTMLLabelElement>, 'onClick'> {
+export interface SwitchProps extends Omit<AriaSwitchProps, 'children'>, HoverEvents, RenderProps<SwitchRenderProps, 'label'>, SlotProps, Omit<GlobalDOMAttributes<HTMLLabelElement>, '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-Switch'
@@ -125,7 +126,7 @@ export const Switch = /*#__PURE__*/ (forwardRef as forwardRefType)(function Swit
   delete DOMProps.onClick;
 
   return (
-    <label
+    <dom.label
       {...mergeProps(DOMProps, labelProps, hoverProps, renderProps)}
       ref={ref}
       slot={props.slot || undefined}
@@ -140,6 +141,6 @@ export const Switch = /*#__PURE__*/ (forwardRef as forwardRefType)(function Swit
         <input {...mergeProps(inputProps, focusProps)} ref={inputRef} />
       </VisuallyHidden>
       {renderProps.children}
-    </label>
+    </dom.label>
   );
 });