react-aria-components 1.14.0 → 1.15.0

package/src/GridList.tsx

@@ -16,6 +16,9 @@ import {
   ClassNameOrFunction,
   ContextValue,
   DEFAULT_SLOT,
+  dom,
+  DOMProps,
+  DOMRenderProps,
   Provider,
   RenderProps,
   SlotProps,
@@ -156,7 +159,8 @@ function GridListInner<T extends object>({props, collection, gridListRef: ref}:
     // Only tab navigation is supported in grid layout.
     keyboardNavigationBehavior: layout === 'grid' ? 'tab' : keyboardNavigationBehavior,
     isVirtualized,
-    shouldSelectOnPressUp: props.shouldSelectOnPressUp
+    shouldSelectOnPressUp: props.shouldSelectOnPressUp,
+    disallowTypeAhead
   }, filteredState, ref);
 
   let selectionManager = filteredState.selectionManager;
@@ -229,8 +233,8 @@ function GridListInner<T extends object>({props, collection, gridListRef: ref}:
     state: filteredState
   };
   let renderProps = useRenderProps({
-    className: props.className,
-    style: props.style,
+    ...props,
+    children: undefined,
     defaultClassName: 'react-aria-GridList',
     values: renderValues
   });
@@ -253,7 +257,7 @@ function GridListInner<T extends object>({props, collection, gridListRef: ref}:
 
   return (
     <FocusScope>
-      <div
+      <dom.div
         {...mergeProps(DOMProps, renderProps, gridProps, focusProps, droppableCollection?.collectionProps, emptyStatePropOverrides)}
         ref={ref as RefObject<HTMLDivElement>}
         slot={props.slot || undefined}
@@ -280,7 +284,7 @@ function GridListInner<T extends object>({props, collection, gridListRef: ref}:
         </Provider>
         {emptyState}
         {dragPreview}
-      </div>
+      </dom.div>
     </FocusScope>
   );
 }
@@ -400,7 +404,7 @@ export const GridListItem = /*#__PURE__*/ createLeafComponent(ItemNode, function
           </div>
         </div>
       }
-      <div
+      <dom.div
         {...mergeProps(DOMProps, renderProps, rowProps, focusProps, hoverProps, draggableItem?.dragProps)}
         ref={ref}
         data-selected={states.isSelected || undefined}
@@ -449,7 +453,7 @@ export const GridListItem = /*#__PURE__*/ createLeafComponent(ItemNode, function
             {renderProps.children}
           </Provider>
         </div>
-      </div>
+      </dom.div>
     </>
   );
 });
@@ -497,7 +501,7 @@ function GridListDropIndicator(props: GridListDropIndicatorProps, ref: Forwarded
   });
 
   return (
-    <div
+    <dom.div
       {...renderProps}
       role="row"
       ref={ref as RefObject<HTMLDivElement | null>}
@@ -506,7 +510,7 @@ function GridListDropIndicator(props: GridListDropIndicatorProps, ref: Forwarded
         <div {...visuallyHiddenProps} role="button" {...dropIndicatorProps} ref={buttonRef} />
         {renderProps.children}
       </div>
-    </div>
+    </dom.div>
   );
 }
 
@@ -534,7 +538,7 @@ function RootDropIndicator() {
   );
 }
 
-export interface GridListLoadMoreItemProps extends Omit<LoadMoreSentinelProps, 'collection'>, StyleProps, GlobalDOMAttributes<HTMLDivElement> {
+export interface GridListLoadMoreItemProps extends Omit<LoadMoreSentinelProps, 'collection'>, 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-GridListLoadMoreItem'
@@ -569,7 +573,7 @@ export const GridListLoadMoreItem = createLeafComponent(LoaderNode, function Gri
     id: undefined,
     children: item.rendered,
     defaultClassName: 'react-aria-GridListLoadingIndicator',
-    values: null
+    values: undefined
   });
   // For now don't include aria-posinset and aria-setsize on loader since they aren't keyboard focusable
   // Arguably shouldn't include them ever since it might be confusing to the user to include the loaders as part of the
@@ -583,7 +587,7 @@ export const GridListLoadMoreItem = createLeafComponent(LoaderNode, function Gri
         <div data-testid="loadMoreSentinel" ref={sentinelRef} style={{position: 'absolute', height: 1, width: 1}} />
       </div>
       {isLoading && renderProps.children && (
-        <div
+        <dom.div
           {...renderProps}
           {...filterDOMProps(props, {global: true})}
           role="row"
@@ -593,13 +597,13 @@ export const GridListLoadMoreItem = createLeafComponent(LoaderNode, function Gri
             role="gridcell">
             {renderProps.children}
           </div>
-        </div>
+        </dom.div>
       )}
     </>
   );
 });
 
-export interface GridListSectionProps<T> extends SectionProps<T> {
+export interface GridListSectionProps<T> extends SectionProps<T>, DOMRenderProps<'div', undefined> {
   /**
    * The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element.
    * @default 'react-aria-GridListSection'
@@ -619,17 +623,18 @@ export const GridListSection = /*#__PURE__*/ createBranchComponent(SectionNode,
     'aria-label': props['aria-label'] ?? undefined
   }, state, ref);
   let renderProps = useRenderProps({
+    ...props,
+    id: undefined,
+    children: undefined,
     defaultClassName: 'react-aria-GridListSection',
-    className: props.className,
-    style: props.style,
-    values: {}
+    values: undefined
   });
 
   let DOMProps = filterDOMProps(props as any, {global: true});
   delete DOMProps.id;
 
   return (
-    <div
+    <dom.div
       {...mergeProps(DOMProps, renderProps, rowGroupProps)}
       ref={ref}>
       <Provider
@@ -641,22 +646,24 @@ export const GridListSection = /*#__PURE__*/ createBranchComponent(SectionNode,
           collection={state.collection}
           parent={item} />
       </Provider>
-    </div>
+    </dom.div>
   );
 });
 
-export const GridListHeaderContext = createContext<ContextValue<HTMLAttributes<HTMLDivElement>, HTMLDivElement>>({});
+export interface GridListHeaderProps extends DOMRenderProps<'div', undefined>, DOMProps, GlobalDOMAttributes<HTMLElement> {}
+
+export const GridListHeaderContext = createContext<ContextValue<GridListHeaderProps, HTMLDivElement>>({});
 const GridListHeaderInnerContext = createContext<HTMLAttributes<HTMLElement> | null>(null);
 
-export const GridListHeader = /*#__PURE__*/ createLeafComponent(HeaderNode, function Header(props: HTMLAttributes<HTMLElement>, ref: ForwardedRef<HTMLDivElement>) {
+export const GridListHeader = /*#__PURE__*/ createLeafComponent(HeaderNode, function Header(props: GridListHeaderProps, ref: ForwardedRef<HTMLDivElement>) {
   [props, ref] = useContextProps(props, ref, GridListHeaderContext);
   let rowHeaderProps = useContext(GridListHeaderInnerContext);
 
   return (
-    <div className="react-aria-GridListHeader" ref={ref} {...props}>
+    <dom.div render={props.render} className="react-aria-GridListHeader" ref={ref} {...props}>
       <div {...rowHeaderProps} style={{display: 'contents'}}>
         {props.children}
       </div>
-    </div>
+    </dom.div>
   );
 });

package/src/Group.tsx

@@ -12,12 +12,13 @@
 
 import {AriaLabelingProps, DOMProps, forwardRefType} from '@react-types/shared';
 import {
- ClassNameOrFunction,
- ContextValue,
- RenderProps,
- SlotProps,
- useContextProps,
- useRenderProps
+  ClassNameOrFunction,
+  ContextValue,
+  dom,
+  RenderProps,
+  SlotProps,
+  useContextProps,
+  useRenderProps
 } from './utils';
 import {HoverProps, mergeProps, useFocusRing, useHover} from 'react-aria';
 import React, {createContext, ForwardedRef, forwardRef, HTMLAttributes} from 'react';
@@ -50,7 +51,7 @@ export interface GroupRenderProps {
   isInvalid: boolean
 }
 
-export interface GroupProps extends AriaLabelingProps, Omit<HTMLAttributes<HTMLElement>, 'children' | 'className' | 'style' | 'role' | 'slot'>, DOMProps, HoverProps, RenderProps<GroupRenderProps>, SlotProps {
+export interface GroupProps extends AriaLabelingProps, Omit<HTMLAttributes<HTMLElement>, 'children' | 'className' | 'style' | 'render' | 'role' | 'slot'>, DOMProps, HoverProps, RenderProps<GroupRenderProps>, SlotProps {
  /**
   * 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-Group'
@@ -95,7 +96,7 @@ export const Group = /*#__PURE__*/ (forwardRef as forwardRefType)(function Group
   });
 
   return (
-    <div
+    <dom.div
       {...mergeProps(otherProps, focusProps, hoverProps)}
       {...renderProps}
       ref={ref}
@@ -108,6 +109,6 @@ export const Group = /*#__PURE__*/ (forwardRef as forwardRefType)(function Group
       data-invalid={isInvalid || undefined}
       data-readonly={isReadOnly || undefined}>
       {renderProps.children}
-    </div>
+    </dom.div>
   );
 });

package/src/Header.tsx

@@ -10,17 +10,19 @@
  * governing permissions and limitations under the License.
  */
 
-import {ContextValue, useContextProps} from './utils';
+import {ContextValue, dom, DOMRenderProps, useContextProps} from './utils';
 import {createLeafComponent, HeaderNode} from '@react-aria/collections';
 import React, {createContext, ForwardedRef, HTMLAttributes} from 'react';
 
-export const HeaderContext = createContext<ContextValue<HTMLAttributes<HTMLElement>, HTMLElement>>({});
+export interface HeaderProps extends HTMLAttributes<HTMLElement>, DOMRenderProps<'header', undefined> {}
 
-export const Header = /*#__PURE__*/ createLeafComponent(HeaderNode, function Header(props: HTMLAttributes<HTMLElement>, ref: ForwardedRef<HTMLElement>) {
+export const HeaderContext = createContext<ContextValue<HeaderProps, HTMLElement>>({});
+
+export const Header = /*#__PURE__*/ createLeafComponent(HeaderNode, function Header(props: HeaderProps, ref: ForwardedRef<HTMLElement>) {
   [props, ref] = useContextProps(props, ref, HeaderContext);
   return (
-    <header className="react-aria-Header" {...props} ref={ref}>
+    <dom.header className="react-aria-Header" {...props} ref={ref}>
       {props.children}
-    </header>
+    </dom.header>
   );
 });

package/src/Heading.tsx

@@ -10,18 +10,18 @@
  * governing permissions and limitations under the License.
  */
 
+import {dom, DOMRenderProps, useContextProps} from './utils';
 import {HeadingContext} from './RSPContexts';
-import React, {ElementType, ForwardedRef, forwardRef, HTMLAttributes} from 'react';
-import {useContextProps} from './utils';
+import React, {ForwardedRef, forwardRef, HTMLAttributes} from 'react';
 
-export interface HeadingProps extends HTMLAttributes<HTMLElement> {
+export interface HeadingProps extends HTMLAttributes<HTMLElement>, DOMRenderProps<'h1', undefined> {
   level?: number
 }
 
 export const Heading = forwardRef(function Heading(props: HeadingProps, ref: ForwardedRef<HTMLHeadingElement>) {
   [props, ref] = useContextProps(props, ref, HeadingContext);
   let {children, level = 3, className, ...domProps} = props;
-  let Element = `h${level}` as ElementType;
+  let Element = dom[`h${level}`];
 
   return (
     <Element {...domProps} ref={ref} className={className ?? 'react-aria-Heading'}>

package/src/HiddenDateInput.tsx

@@ -11,7 +11,7 @@
  */
 
 
-import {CalendarDate, CalendarDateTime, parseDate, parseDateTime} from '@internationalized/date';
+import {CalendarDate, CalendarDateTime, parseDate, parseDateTime, toCalendarDate, toCalendarDateTime, toLocalTimeZone} from '@internationalized/date';
 import {DateFieldState, DatePickerState, DateSegmentType} from 'react-stately';
 import React, {ReactNode} from 'react';
 import {useVisuallyHidden} from 'react-aria';
@@ -65,8 +65,15 @@ export function useHiddenDateInput(props: HiddenDateInputProps, state: DateField
   } else if (state.granularity === 'hour') {
     inputStep = 3600;
   }
-
-  let dateValue = state.value == null ? '' : state.value.toString();
+  
+  let dateValue = '';
+  if (state.value) {
+    if (state.granularity === 'day') {
+      dateValue = toCalendarDate(state.value).toString();
+    } else {
+      dateValue = toCalendarDateTime('timeZone' in state.value ? toLocalTimeZone(state.value) : state.value).toString();
+    }
+  }
 
   let inputType = state.granularity === 'day' ? 'date' : 'datetime-local';
 

package/src/Input.tsx

@@ -13,6 +13,7 @@
 import {
  ClassNameOrFunction,
  ContextValue,
+ dom,
  StyleRenderProps,
  useContextProps,
  useRenderProps
@@ -49,7 +50,7 @@ export interface InputRenderProps {
   isInvalid: boolean
 }
 
-export interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'className' | 'style'>, HoverEvents, StyleRenderProps<InputRenderProps> {
+export interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'className' | 'style'>, HoverEvents, StyleRenderProps<InputRenderProps, 'input'> {
  /**
   * 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-Input'
@@ -99,7 +100,7 @@ export const Input = /*#__PURE__*/ createHideableComponent(function Input(props:
   });
 
   return (
-    <input
+    <dom.input
       {...mergeProps(filterHoverProps(props), focusProps, hoverProps)}
       {...renderProps}
       ref={ref}

package/src/Keyboard.tsx

@@ -10,12 +10,14 @@
  * 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 KeyboardProps extends HTMLAttributes<HTMLElement>, DOMRenderProps<'kbd', undefined> {}
+
 export const KeyboardContext = createContext<ContextValue<HTMLAttributes<HTMLElement>, HTMLElement>>({});
 
 export const Keyboard = forwardRef(function Keyboard(props: HTMLAttributes<HTMLElement>, ref: ForwardedRef<HTMLElement>) {
   [props, ref] = useContextProps(props, ref, KeyboardContext);
-  return <kbd dir="ltr" {...props} ref={ref} />;
+  return <dom.kbd dir="ltr" {...props} ref={ref} />;
 });

package/src/Label.tsx

@@ -10,11 +10,11 @@
  * governing permissions and limitations under the License.
  */
 
-import {ContextValue, useContextProps} from './utils';
+import {ContextValue, dom, DOMRenderProps, useContextProps} from './utils';
 import {createHideableComponent} from '@react-aria/collections';
 import React, {createContext, ForwardedRef, LabelHTMLAttributes} from 'react';
 
-export interface LabelProps extends LabelHTMLAttributes<HTMLLabelElement> {
+export interface LabelProps extends LabelHTMLAttributes<HTMLLabelElement>, DOMRenderProps<'label', undefined> {
   elementType?: string
 }
 
@@ -22,7 +22,8 @@ export const LabelContext = createContext<ContextValue<LabelProps, HTMLLabelElem
 
 export const Label = /*#__PURE__*/ createHideableComponent(function Label(props: LabelProps, ref: ForwardedRef<HTMLLabelElement>) {
   [props, ref] = useContextProps(props, ref, LabelContext);
-  let {elementType: ElementType = 'label', ...labelProps} = props;
+  let {elementType = 'label', ...labelProps} = props;
+  let ElementType = dom[elementType];
   // @ts-ignore
   return <ElementType className="react-aria-Label" {...labelProps} ref={ref} />;
 });

package/src/Link.tsx

@@ -12,18 +12,20 @@
 
 import {AriaLinkOptions, HoverEvents, mergeProps, useFocusRing, useHover, useLink} from 'react-aria';
 import {
- ClassNameOrFunction,
- ContextValue,
- RenderProps,
- SlotProps,
- useContextProps,
- useRenderProps
+  ClassNameOrFunction,
+  ContextValue,
+  dom,
+  PossibleLinkDOMRenderProps,
+  RenderProps,
+  SlotProps,
+  useContextProps,
+  useRenderProps
 } from './utils';
+import {DOMProps, forwardRefType, GlobalDOMAttributes} from '@react-types/shared';
 import {filterDOMProps} from '@react-aria/utils';
-import {forwardRefType, GlobalDOMAttributes} from '@react-types/shared';
-import React, {createContext, ElementType, ForwardedRef, forwardRef} from 'react';
+import React, {createContext, ForwardedRef, forwardRef} from 'react';
 
-export interface LinkProps extends Omit<AriaLinkOptions, 'elementType'>, HoverEvents, RenderProps<LinkRenderProps>, SlotProps, Omit<GlobalDOMAttributes<HTMLAnchorElement>, 'onClick'> {
+export interface LinkProps extends Omit<AriaLinkOptions, 'elementType'>, HoverEvents, Omit<RenderProps<LinkRenderProps>, 'render'>, PossibleLinkDOMRenderProps<'span', LinkRenderProps>, SlotProps, DOMProps, Omit<GlobalDOMAttributes<HTMLAnchorElement>, '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-Link'
@@ -73,13 +75,14 @@ export const LinkContext = createContext<ContextValue<LinkProps, HTMLAnchorEleme
 export const Link = /*#__PURE__*/ (forwardRef as forwardRefType)(function Link(props: LinkProps, ref: ForwardedRef<HTMLAnchorElement>) {
   [props, ref] = useContextProps(props, ref, LinkContext);
 
-  let ElementType: ElementType = props.href && !props.isDisabled ? 'a' : 'span';
-  let {linkProps, isPressed} = useLink({...props, elementType: ElementType}, ref);
+  let elementType = props.href && !props.isDisabled ? 'a' : 'span';
+  let {linkProps, isPressed} = useLink({...props, elementType}, ref);
+  let ElementType = dom[elementType];
 
   let {hoverProps, isHovered} = useHover(props);
   let {focusProps, isFocused, isFocusVisible} = useFocusRing();
 
-  let renderProps = useRenderProps({
+  let renderProps = useRenderProps<LinkRenderProps, 'span' | 'a'>({
     ...props,
     defaultClassName: 'react-aria-Link',
     values: {

package/src/ListBox.tsx

@@ -15,6 +15,9 @@ import {
   ClassNameOrFunction,
   ContextValue,
   DEFAULT_SLOT,
+  dom,
+  DOMRenderProps,
+  PossibleLinkDOMRenderProps,
   Provider,
   RenderProps,
   SlotProps,
@@ -231,8 +234,8 @@ function ListBoxInner<T extends object>({state: inputState, props, listBoxRef}:
     state
   };
   let renderProps = useRenderProps({
-    className: props.className,
-    style: props.style,
+    ...props,
+    children: undefined,
     defaultClassName: 'react-aria-ListBox',
     values: renderValues
   });
@@ -253,7 +256,7 @@ function ListBoxInner<T extends object>({state: inputState, props, listBoxRef}:
 
   return (
     <FocusScope>
-      <div
+      <dom.div
         {...mergeProps(DOMProps, renderProps, listBoxProps, focusProps, droppableCollection?.collectionProps)}
         ref={listBoxRef as RefObject<HTMLDivElement>}
         slot={props.slot || undefined}
@@ -283,12 +286,12 @@ function ListBoxInner<T extends object>({state: inputState, props, listBoxRef}:
         </Provider>
         {emptyState}
         {dragPreview}
-      </div>
+      </dom.div>
     </FocusScope>
   );
 }
 
-export interface ListBoxSectionProps<T> extends SectionProps<T> {
+export interface ListBoxSectionProps<T> extends SectionProps<T>, DOMRenderProps<'section', undefined> {
   /**
    * The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element.
    * @default 'react-aria-ListBoxSection'
@@ -306,17 +309,18 @@ function ListBoxSectionInner<T extends object>(props: ListBoxSectionProps<T>, re
     'aria-label': props['aria-label'] ?? undefined
   });
   let renderProps = useRenderProps({
+    ...props,
+    id: undefined,
+    children: undefined,
     defaultClassName: className,
-    className: props.className,
-    style: props.style,
-    values: {}
+    values: undefined
   });
 
   let DOMProps = filterDOMProps(props as any, {global: true});
   delete DOMProps.id;
 
   return (
-    <section
+    <dom.section
       {...mergeProps(DOMProps, renderProps, groupProps)}
       ref={ref}>
       <HeaderContext.Provider value={{...headingProps, ref: headingRef}}>
@@ -325,7 +329,7 @@ function ListBoxSectionInner<T extends object>(props: ListBoxSectionProps<T>, re
           parent={section}
           renderDropIndicator={useRenderDropIndicator(dragAndDropHooks, dropState)} />
       </HeaderContext.Provider>
-    </section>
+    </dom.section>
   );
 }
 
@@ -336,7 +340,7 @@ export const ListBoxSection = /*#__PURE__*/ createBranchComponent(SectionNode, L
 
 export interface ListBoxItemRenderProps extends ItemRenderProps {}
 
-export interface ListBoxItemProps<T = object> extends RenderProps<ListBoxItemRenderProps>, LinkDOMProps, HoverEvents, PressEvents, FocusEvents<HTMLDivElement>, Omit<GlobalDOMAttributes<HTMLDivElement>, 'onClick'> {
+export interface ListBoxItemProps<T = object> extends Omit<RenderProps<ListBoxItemRenderProps>, 'render'>, PossibleLinkDOMRenderProps<'div', ListBoxItemRenderProps>, LinkDOMProps, HoverEvents, PressEvents, FocusEvents<HTMLDivElement>, 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-ListBoxItem'
@@ -394,7 +398,7 @@ export const ListBoxItem = /*#__PURE__*/ createLeafComponent(ItemNode, function
   }
 
   let isDragging = dragState && dragState.isDragging(item.key);
-  let renderProps = useRenderProps({
+  let renderProps = useRenderProps<ListBoxItemRenderProps, any>({
     ...props,
     id: undefined,
     children: props.children,
@@ -416,13 +420,12 @@ export const ListBoxItem = /*#__PURE__*/ createLeafComponent(ItemNode, function
     }
   }, [item.textValue]);
 
-  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;
 
-  if (ElementType === 'a' && optionProps.tabIndex == null) {
+  if (props.href && optionProps.tabIndex == null) {
     optionProps.tabIndex = -1;
   }
 
@@ -496,10 +499,9 @@ function ListBoxDropIndicator(props: ListBoxDropIndicatorProps, ref: ForwardedRe
   });
 
   return (
-    <div
+    <dom.div
       {...dropIndicatorProps}
       {...renderProps}
-      // eslint-disable-next-line
       role="option"
       ref={ref as RefObject<HTMLDivElement | null>}
       data-drop-target={isDropTarget || undefined} />
@@ -508,7 +510,7 @@ function ListBoxDropIndicator(props: ListBoxDropIndicatorProps, ref: ForwardedRe
 
 const ListBoxDropIndicatorForwardRef = forwardRef(ListBoxDropIndicator);
 
-export interface ListBoxLoadMoreItemProps extends Omit<LoadMoreSentinelProps, 'collection'>, StyleProps, GlobalDOMAttributes<HTMLDivElement> {
+export interface ListBoxLoadMoreItemProps extends Omit<LoadMoreSentinelProps, 'collection'>, 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-ListBoxLoadMoreItem'
@@ -541,7 +543,7 @@ export const ListBoxLoadMoreItem = createLeafComponent(LoaderNode, function List
     id: undefined,
     children: item.rendered,
     defaultClassName: 'react-aria-ListBoxLoadingIndicator',
-    values: null
+    values: undefined
   });
 
   let optionProps = {
@@ -560,15 +562,14 @@ export const ListBoxLoadMoreItem = createLeafComponent(LoaderNode, function List
         <div data-testid="loadMoreSentinel" ref={sentinelRef} style={{position: 'absolute', height: 1, width: 1}} />
       </div>
       {isLoading && renderProps.children && (
-        <div
+        <dom.div
           {...mergeProps(filterDOMProps(props, {global: true}), optionProps)}
           {...renderProps}
           // aria-selected isn't needed here since this option is not selectable.
-          // eslint-disable-next-line jsx-a11y/role-has-required-aria-props
           role="option"
           ref={ref as ForwardedRef<HTMLDivElement>}>
           {renderProps.children}
-        </div>
+        </dom.div>
       )}
     </>
   );