react-aria-components 1.7.1 → 1.9.0

package/i18n/index.mjs

@@ -83,7 +83,7 @@ function getLocalizationScript(locale, dict = dictionary) {
   return getPackageLocalizationScript(locale, strings);
 }
 
-let deps = {"@react-aria/autocomplete":["@react-aria/combobox","@react-aria/searchfield"],"@react-aria/color":["@react-aria/numberfield","@react-aria/spinbutton","@react-stately/color"],"@react-aria/combobox":["@react-aria/menu","@react-aria/overlays"],"@react-aria/datepicker":["@react-aria/spinbutton","@react-stately/datepicker"],"@react-aria/dnd":["@react-aria/overlays"],"@react-aria/gridlist":["@react-aria/grid"],"@react-aria/menu":["@react-aria/overlays"],"@react-aria/numberfield":["@react-aria/spinbutton"],"@react-aria/table":["@react-aria/grid"],"@react-aria/tag":["@react-aria/gridlist"],"@react-aria/tree":["@react-aria/gridlist"],"react-aria-components":["@react-aria/autocomplete","@react-aria/dnd"]};
+let deps = {"@react-aria/autocomplete":["@react-aria/combobox","@react-aria/searchfield"],"@react-aria/color":["@react-aria/numberfield","@react-aria/spinbutton","@react-stately/color"],"@react-aria/combobox":["@react-aria/menu","@react-aria/overlays"],"@react-aria/datepicker":["@react-aria/spinbutton","@react-stately/datepicker"],"@react-aria/dnd":["@react-aria/overlays"],"@react-aria/gridlist":["@react-aria/grid"],"@react-aria/menu":["@react-aria/overlays"],"@react-aria/numberfield":["@react-aria/spinbutton"],"@react-aria/table":["@react-aria/grid"],"@react-aria/tag":["@react-aria/gridlist"],"@react-aria/tree":["@react-aria/gridlist"],"react-aria-components":["@react-aria/autocomplete","@react-aria/dnd","@react-aria/overlays"]};
 
 function createLocalizedStringDictionary(packages) {
   let strings = {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-aria-components",
-  "version": "1.7.1",
+  "version": "1.9.0",
   "description": "A library of styleable components built using React Aria",
   "license": "Apache-2.0",
   "main": "dist/main.js",
@@ -37,31 +37,33 @@
     "url": "https://github.com/adobe/react-spectrum"
   },
   "dependencies": {
-    "@internationalized/date": "^3.7.0",
-    "@internationalized/string": "^3.2.5",
-    "@react-aria/autocomplete": "3.0.0-beta.1",
-    "@react-aria/collections": "3.0.0-beta.1",
-    "@react-aria/dnd": "^3.9.1",
-    "@react-aria/focus": "^3.20.1",
-    "@react-aria/interactions": "^3.24.1",
-    "@react-aria/live-announcer": "^3.4.1",
-    "@react-aria/toolbar": "3.0.0-beta.14",
-    "@react-aria/utils": "^3.28.1",
-    "@react-aria/virtualizer": "^4.1.3",
-    "@react-stately/autocomplete": "3.0.0-beta.0",
-    "@react-stately/layout": "^4.2.1",
-    "@react-stately/selection": "^3.20.0",
-    "@react-stately/table": "^3.14.0",
-    "@react-stately/utils": "^3.10.5",
-    "@react-stately/virtualizer": "^4.3.1",
-    "@react-types/form": "^3.7.10",
-    "@react-types/grid": "^3.3.0",
-    "@react-types/shared": "^3.28.0",
-    "@react-types/table": "^3.11.0",
+    "@internationalized/date": "^3.8.1",
+    "@internationalized/string": "^3.2.6",
+    "@react-aria/autocomplete": "3.0.0-beta.3",
+    "@react-aria/collections": "3.0.0-rc.1",
+    "@react-aria/dnd": "^3.9.3",
+    "@react-aria/focus": "^3.20.3",
+    "@react-aria/interactions": "^3.25.1",
+    "@react-aria/live-announcer": "^3.4.2",
+    "@react-aria/overlays": "^3.27.1",
+    "@react-aria/ssr": "^3.9.8",
+    "@react-aria/toolbar": "3.0.0-beta.16",
+    "@react-aria/utils": "^3.29.0",
+    "@react-aria/virtualizer": "^4.1.5",
+    "@react-stately/autocomplete": "3.0.0-beta.1",
+    "@react-stately/layout": "^4.3.0",
+    "@react-stately/selection": "^3.20.2",
+    "@react-stately/table": "^3.14.2",
+    "@react-stately/utils": "^3.10.6",
+    "@react-stately/virtualizer": "^4.4.0",
+    "@react-types/form": "^3.7.12",
+    "@react-types/grid": "^3.3.2",
+    "@react-types/shared": "^3.29.1",
+    "@react-types/table": "^3.13.0",
     "@swc/helpers": "^0.5.0",
     "client-only": "^0.0.1",
-    "react-aria": "^3.38.1",
-    "react-stately": "^3.36.1",
+    "react-aria": "^3.40.0",
+    "react-stately": "^3.38.0",
     "use-sync-external-store": "^1.4.0"
   },
   "peerDependencies": {
@@ -74,5 +76,5 @@
   "devDependencies": {
     "@tailwindcss/postcss": "^4.0.0"
   },
-  "gitHead": "9c4ebbc0c1972cc880febc29de995ca58caa3ba4"
+  "gitHead": "9c77d4e8267ed39469c65f65da94ece7be509874"
 }

package/src/Autocomplete.tsx

@@ -15,7 +15,7 @@ import {AutocompleteState, useAutocompleteState} from '@react-stately/autocomple
 import {InputContext} from './Input';
 import {mergeProps} from '@react-aria/utils';
 import {Provider, removeDataAttributes, SlotProps, SlottedContextValue, useSlottedContext} from './utils';
-import React, {createContext, RefObject, useRef} from 'react';
+import React, {createContext, JSX, RefObject, useRef} from 'react';
 import {SearchFieldContext} from './SearchField';
 import {TextFieldContext} from './TextField';
 
@@ -36,7 +36,7 @@ export const UNSTABLE_InternalAutocompleteContext = createContext<InternalAutoco
 /**
  * An autocomplete combines a TextField or SearchField with a Menu or ListBox, allowing users to search or filter a list of suggestions.
  */
-export function Autocomplete(props: AutocompleteProps) {
+export function Autocomplete(props: AutocompleteProps): JSX.Element {
   let ctx = useSlottedContext(AutocompleteContext, props.slot);
   props = mergeProps(ctx, props);
   let {filter, disableAutoFocusFirst} = props;

package/src/Calendar.tsx

@@ -24,7 +24,7 @@ import {
   VisuallyHidden
 } from 'react-aria';
 import {ButtonContext} from './Button';
-import {CalendarDate, createCalendar, DateDuration, endOfMonth, getWeeksInMonth, isSameDay, isSameMonth} from '@internationalized/date';
+import {CalendarDate, CalendarIdentifier, createCalendar, DateDuration, endOfMonth, Calendar as ICalendar, isSameDay, isSameMonth} from '@internationalized/date';
 import {CalendarState, RangeCalendarState, useCalendarState, useRangeCalendarState} from 'react-stately';
 import {ContextValue, DOMProps, Provider, RenderProps, SlotProps, StyleProps, useContextProps, useRenderProps, useSlottedContext} from './utils';
 import {DOMAttributes, FocusableElement, forwardRefType, HoverEvents} from '@react-types/shared';
@@ -62,7 +62,14 @@ export interface CalendarProps<T extends DateValue> extends Omit<AriaCalendarPro
    * The amount of days that will be displayed at once. This affects how pagination works.
    * @default {months: 1}
    */
-  visibleDuration?: DateDuration
+  visibleDuration?: DateDuration,
+
+  /**
+   * A function to create a new [Calendar](https://react-spectrum.adobe.com/internationalized/date/Calendar.html)
+   * object for a given calendar identifier. If not provided, the `createCalendar` function
+   * from `@internationalized/date` will be used.
+   */
+  createCalendar?: (identifier: CalendarIdentifier) => ICalendar
 }
 
 export interface RangeCalendarProps<T extends DateValue> extends Omit<AriaRangeCalendarProps<T>, 'errorMessage' | 'validationState'>, RenderProps<RangeCalendarRenderProps>, SlotProps {
@@ -70,7 +77,14 @@ export interface RangeCalendarProps<T extends DateValue> extends Omit<AriaRangeC
    * The amount of days that will be displayed at once. This affects how pagination works.
    * @default {months: 1}
    */
-  visibleDuration?: DateDuration
+  visibleDuration?: DateDuration,
+
+  /**
+   * A function to create a new [Calendar](https://react-spectrum.adobe.com/internationalized/date/Calendar.html)
+   * object for a given calendar identifier. If not provided, the `createCalendar` function
+   * from `@internationalized/date` will be used.
+   */
+  createCalendar?: (identifier: CalendarIdentifier) => ICalendar
 }
 
 export const CalendarContext = createContext<ContextValue<CalendarProps<any>, HTMLDivElement>>(null);
@@ -87,7 +101,7 @@ export const Calendar = /*#__PURE__*/ (forwardRef as forwardRefType)(function Ca
   let state = useCalendarState({
     ...props,
     locale,
-    createCalendar
+    createCalendar: props.createCalendar || createCalendar
   });
 
   let {calendarProps, prevButtonProps, nextButtonProps, errorMessageProps, title} = useCalendar(props, state);
@@ -160,7 +174,7 @@ export const RangeCalendar = /*#__PURE__*/ (forwardRef as forwardRefType)(functi
   let state = useRangeCalendarState({
     ...props,
     locale,
-    createCalendar
+    createCalendar: props.createCalendar || createCalendar
   });
 
   let {calendarProps, prevButtonProps, nextButtonProps, errorMessageProps, title} = useRangeCalendar(
@@ -329,7 +343,7 @@ interface InternalCalendarGridContextValue {
   headerProps: DOMAttributes<FocusableElement>,
   weekDays: string[],
   startDate: CalendarDate,
-  firstDayOfWeek: 'sun' | 'mon' | 'tue' | 'wed' | 'thu' | 'fri' | 'sat' | undefined
+  weeksInMonth: number
 }
 
 const InternalCalendarGridContext = createContext<InternalCalendarGridContextValue | null>(null);
@@ -351,7 +365,7 @@ export const CalendarGrid = /*#__PURE__*/ (forwardRef as forwardRefType)(functio
 
   let firstDayOfWeek = calenderProps?.firstDayOfWeek ?? rangeCalenderProps?.firstDayOfWeek;
 
-  let {gridProps, headerProps, weekDays} = useCalendarGrid({
+  let {gridProps, headerProps, weekDays, weeksInMonth} = useCalendarGrid({
     startDate,
     endDate: endOfMonth(startDate),
     weekdayStyle: props.weekdayStyle,
@@ -359,7 +373,7 @@ export const CalendarGrid = /*#__PURE__*/ (forwardRef as forwardRefType)(functio
   }, state);
 
   return (
-    <InternalCalendarGridContext.Provider value={{headerProps, weekDays, startDate, firstDayOfWeek}}>
+    <InternalCalendarGridContext.Provider value={{headerProps, weekDays, startDate, weeksInMonth}}>
       <table
         {...filterDOMProps(props as any)}
         {...gridProps}
@@ -442,9 +456,7 @@ function CalendarGridBody(props: CalendarGridBodyProps, ref: ForwardedRef<HTMLTa
   let calendarState = useContext(CalendarStateContext);
   let rangeCalendarState = useContext(RangeCalendarStateContext);
   let state = calendarState ?? rangeCalendarState!;
-  let {startDate, firstDayOfWeek} = useContext(InternalCalendarGridContext)!;
-  let {locale} = useLocale();
-  let weeksInMonth = getWeeksInMonth(startDate, locale, firstDayOfWeek);
+  let {startDate, weeksInMonth} = useContext(InternalCalendarGridContext)!;
 
   return (
     <tbody

package/src/Collection.tsx

@@ -102,7 +102,9 @@ export const SectionContext = createContext<SectionContextValue | null>(null);
 /** @deprecated */
 export const Section = /*#__PURE__*/ createBranchComponent('section', <T extends object>(props: SectionProps<T>, ref: ForwardedRef<HTMLElement>, section: Node<T>): JSX.Element => {
   let {name, render} = useContext(SectionContext)!;
-  console.warn(`<Section> is deprecated. Please use <${name}> instead.`);
+  if (process.env.NODE_ENV !== 'production') {
+    console.warn(`<Section> is deprecated. Please use <${name}> instead.`);
+  }
   return render(props, ref, section, 'react-aria-Section');
 });
 
@@ -177,6 +179,7 @@ function useCollectionRender(
 
 export const CollectionRendererContext = createContext<CollectionRenderer>(DefaultCollectionRenderer);
 
-export function usePersistedKeys(focusedKey: Key | null) {
+type PersistedKeysReturnValue = Set<Key> | null;
+export function usePersistedKeys(focusedKey: Key | null): PersistedKeysReturnValue {
   return useMemo(() => focusedKey != null ? new Set([focusedKey]) : null, [focusedKey]);
 }

package/src/ColorPicker.tsx

@@ -16,7 +16,7 @@ import {ColorSwatchContext} from './ColorSwatch';
 import {ColorSwatchPickerContext} from './ColorSwatchPicker';
 import {mergeProps} from 'react-aria';
 import {Provider, RenderProps, SlotProps, SlottedContextValue, useRenderProps, useSlottedContext} from './utils';
-import React, {createContext} from 'react';
+import React, {createContext, JSX} from 'react';
 
 export interface ColorPickerRenderProps {
   /** The currently selected color. */
@@ -32,7 +32,7 @@ export const ColorPickerStateContext = createContext<ColorPickerState | null>(nu
  * A ColorPicker synchronizes a color value between multiple React Aria color components.
  * It simplifies building color pickers with customizable layouts via composition.
  */
-export function ColorPicker(props: ColorPickerProps) {
+export function ColorPicker(props: ColorPickerProps): JSX.Element {
   let ctx = useSlottedContext(ColorPickerContext, props.slot);
   props = mergeProps(ctx, props);
   let state = useColorPickerState(props);

package/src/ColorWheel.tsx

@@ -77,6 +77,8 @@ export const ColorWheelTrackContext = createContext<ContextValue<ColorWheelTrack
 export const ColorWheelTrack = forwardRef(function ColorWheelTrack(props: ColorWheelTrackProps, ref: ForwardedRef<HTMLDivElement>) {
   [props, ref] = useContextProps(props, ref, ColorWheelTrackContext);
   let state = useContext(ColorWheelStateContext)!;
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  let {className, style, ...rest} = props;
 
   let renderProps = useRenderProps({
     ...props,
@@ -89,7 +91,7 @@ export const ColorWheelTrack = forwardRef(function ColorWheelTrack(props: ColorW
 
   return (
     <div
-      {...props}
+      {...rest}
       {...renderProps}
       ref={ref}
       data-disabled={state.isDisabled || undefined} />

package/src/DateField.tsx

@@ -92,7 +92,7 @@ export const DateField = /*#__PURE__*/ (forwardRef as forwardRefType)(function D
     <Provider
       values={[
         [DateFieldStateContext, state],
-        [GroupContext, {...fieldProps, ref: fieldRef, isInvalid: state.isInvalid}],
+        [GroupContext, {...fieldProps, ref: fieldRef, isInvalid: state.isInvalid, isDisabled: state.isDisabled}],
         [InputContext, {...inputProps, ref: inputRef}],
         [LabelContext, {...labelProps, ref: labelRef, elementType: 'span'}],
         [TextContext, {
@@ -108,7 +108,8 @@ export const DateField = /*#__PURE__*/ (forwardRef as forwardRefType)(function D
         {...renderProps}
         ref={ref}
         slot={props.slot || undefined}
-        data-invalid={state.isInvalid || undefined} />
+        data-invalid={state.isInvalid || undefined}
+        data-disabled={state.isDisabled || undefined} />
     </Provider>
   );
 });
@@ -157,7 +158,7 @@ export const TimeField = /*#__PURE__*/ (forwardRef as forwardRefType)(function T
     <Provider
       values={[
         [TimeFieldStateContext, state],
-        [GroupContext, {...fieldProps, ref: fieldRef, isInvalid: state.isInvalid}],
+        [GroupContext, {...fieldProps, ref: fieldRef, isInvalid: state.isInvalid, isDisabled: state.isDisabled}],
         [InputContext, {...inputProps, ref: inputRef}],
         [LabelContext, {...labelProps, ref: labelRef, elementType: 'span'}],
         [TextContext, {
@@ -173,7 +174,8 @@ export const TimeField = /*#__PURE__*/ (forwardRef as forwardRefType)(function T
         {...renderProps}
         ref={ref}
         slot={props.slot || undefined}
-        data-invalid={state.isInvalid || undefined} />
+        data-invalid={state.isInvalid || undefined} 
+        data-disabled={state.isDisabled || undefined} />
     </Provider>
   );
 });
@@ -241,7 +243,7 @@ const DateInputStandalone = forwardRef((props: DateInputProps, ref: ForwardedRef
       values={[
         [DateFieldStateContext, state],
         [InputContext, {...inputProps, ref: inputRef}],
-        [GroupContext, {...fieldProps, ref: fieldRef, isInvalid: state.isInvalid}]
+        [GroupContext, {...fieldProps, ref: fieldRef, isInvalid: state.isInvalid, isDisabled: state.isDisabled}]
       ]}>
       <DateInputInner {...props} />
     </Provider>
@@ -261,7 +263,8 @@ const DateInputInner = forwardRef((props: DateInputProps, ref: ForwardedRef<HTML
         ref={ref}
         slot={props.slot || undefined}
         className={className ?? 'react-aria-DateInput'}
-        isInvalid={state.isInvalid}>
+        isInvalid={state.isInvalid}
+        isDisabled={state.isDisabled}>
         {state.segments.map((segment, i) => cloneElement(children(segment), {key: i}))}
       </Group>
       <Input />
@@ -328,11 +331,12 @@ export const DateSegment = /*#__PURE__*/ (forwardRef as forwardRefType)(function
   let {segmentProps} = useDateSegment(segment, state, domRef);
   let {focusProps, isFocused, isFocusVisible} = useFocusRing();
   let {hoverProps, isHovered} = useHover({...otherProps, isDisabled: state.isDisabled || segment.type === 'literal'});
+  let {isEditable, ...segmentRest} = segment;
   let renderProps = useRenderProps({
     ...otherProps,
     values: {
-      ...segment,
-      isReadOnly: !segment.isEditable,
+      ...segmentRest,
+      isReadOnly: !isEditable,
       isInvalid: state.isInvalid,
       isDisabled: state.isDisabled,
       isHovered,
@@ -352,7 +356,7 @@ export const DateSegment = /*#__PURE__*/ (forwardRef as forwardRefType)(function
       ref={domRef}
       data-placeholder={segment.isPlaceholder || undefined}
       data-invalid={state.isInvalid || undefined}
-      data-readonly={!segment.isEditable || undefined}
+      data-readonly={!isEditable || undefined}
       data-disabled={state.isDisabled || undefined}
       data-type={segment.type}
       data-hovered={isHovered || undefined}

package/src/Dialog.tsx

@@ -12,13 +12,13 @@
 import {AriaDialogProps, useDialog, useId, useOverlayTrigger} from 'react-aria';
 import {ButtonContext} from './Button';
 import {ContextValue, DEFAULT_SLOT, Provider, SlotProps, StyleProps, useContextProps, useRenderProps} from './utils';
-import {filterDOMProps} from '@react-aria/utils';
+import {filterDOMProps, useResizeObserver} from '@react-aria/utils';
 import {forwardRefType} from '@react-types/shared';
 import {HeadingContext} from './RSPContexts';
 import {OverlayTriggerProps, OverlayTriggerState, useMenuTriggerState} from 'react-stately';
 import {PopoverContext} from './Popover';
 import {PressResponder} from '@react-aria/interactions';
-import React, {createContext, ForwardedRef, forwardRef, ReactNode, useContext, useRef} from 'react';
+import React, {createContext, ForwardedRef, forwardRef, JSX, ReactNode, useCallback, useContext, useRef, useState} from 'react';
 import {RootMenuTriggerStateContext} from './Menu';
 
 export interface DialogTriggerProps extends OverlayTriggerProps {
@@ -40,7 +40,7 @@ export const OverlayTriggerStateContext = createContext<OverlayTriggerState | nu
 /**
  * A DialogTrigger opens a dialog when a trigger element is pressed.
  */
-export function DialogTrigger(props: DialogTriggerProps) {
+export function DialogTrigger(props: DialogTriggerProps): JSX.Element {
   // Use useMenuTriggerState instead of useOverlayTriggerState in case a menu is embedded in the dialog.
   // This is needed to handle submenus.
   let state = useMenuTriggerState(props);
@@ -48,6 +48,19 @@ export function DialogTrigger(props: DialogTriggerProps) {
   let buttonRef = useRef<HTMLButtonElement>(null);
   let {triggerProps, overlayProps} = useOverlayTrigger({type: 'dialog'}, state, buttonRef);
 
+  // Allows popover width to match trigger element
+  let [buttonWidth, setButtonWidth] = useState<string | null>(null);
+  let onResize = useCallback(() => {
+    if (buttonRef.current) {
+      setButtonWidth(buttonRef.current.offsetWidth + 'px');
+    }
+  }, [buttonRef]);
+
+  useResizeObserver({
+    ref: buttonRef,
+    onResize: onResize
+  });
+
   // Label dialog by the trigger as a fallback if there is no title slot.
   // This is done in RAC instead of hooks because otherwise we cannot distinguish
   // between context and props. Normally aria-labelledby overrides the title
@@ -64,7 +77,8 @@ export function DialogTrigger(props: DialogTriggerProps) {
         [PopoverContext, {
           trigger: 'DialogTrigger',
           triggerRef: buttonRef,
-          'aria-labelledby': overlayProps['aria-labelledby']
+          'aria-labelledby': overlayProps['aria-labelledby'],
+          style: {'--trigger-width': buttonWidth} as React.CSSProperties
         }]
       ]}>
       <PressResponder {...triggerProps} ref={buttonRef} isPressed={state.isOpen}>
@@ -93,7 +107,7 @@ export const Dialog = /*#__PURE__*/ (forwardRef as forwardRefType)(function Dial
     // Use that as a fallback in case there is no title slot.
     if (props['aria-labelledby']) {
       dialogProps['aria-labelledby'] = props['aria-labelledby'];
-    } else {
+    } else if (process.env.NODE_ENV !== 'production') {
       console.warn('If a Dialog does not contain a <Heading slot="title">, it must have an aria-label or aria-labelledby attribute for accessibility.');
     }
   }

package/src/DragAndDrop.tsx

@@ -45,7 +45,9 @@ export const DropIndicator = forwardRef(function DropIndicator(props: DropIndica
   return <>{render(props, ref)}</>;
 });
 
-export function useRenderDropIndicator(dragAndDropHooks?: DragAndDropHooks, dropState?: DroppableCollectionState) {
+type RenderDropIndicatorRetValue = ((target: ItemDropTarget) => ReactNode | undefined) | undefined
+
+export function useRenderDropIndicator(dragAndDropHooks?: DragAndDropHooks, dropState?: DroppableCollectionState): RenderDropIndicatorRetValue {
   let renderDropIndicator = dragAndDropHooks?.renderDropIndicator;
   let isVirtualDragging = dragAndDropHooks?.isVirtualDragging?.();
   let fn = useCallback((target: ItemDropTarget) => {
@@ -59,7 +61,7 @@ export function useRenderDropIndicator(dragAndDropHooks?: DragAndDropHooks, drop
   return dragAndDropHooks?.useDropIndicator ? fn : undefined;
 }
 
-export function useDndPersistedKeys(selectionManager: MultipleSelectionManager, dragAndDropHooks?: DragAndDropHooks, dropState?: DroppableCollectionState) {
+export function useDndPersistedKeys(selectionManager: MultipleSelectionManager, dragAndDropHooks?: DragAndDropHooks, dropState?: DroppableCollectionState): Set<Key> {
   // Persist the focused key and the drop target key.
   let focusedKey = selectionManager.focusedKey;
   let dropTargetKey: Key | null | undefined = null;

package/src/GridList.tsx

@@ -14,11 +14,11 @@ import {ButtonContext} from './Button';
 import {CheckboxContext} from './RSPContexts';
 import {Collection, CollectionBuilder, createLeafComponent} from '@react-aria/collections';
 import {CollectionProps, CollectionRendererContext, DefaultCollectionRenderer, ItemRenderProps} from './Collection';
-import {ContextValue, DEFAULT_SLOT, Provider, RenderProps, ScrollableProps, SlotProps, StyleRenderProps, useContextProps, useRenderProps} from './utils';
+import {ContextValue, DEFAULT_SLOT, Provider, RenderProps, ScrollableProps, SlotProps, StyleProps, StyleRenderProps, useContextProps, useRenderProps} from './utils';
 import {DragAndDropContext, DropIndicatorContext, DropIndicatorProps, useDndPersistedKeys, useRenderDropIndicator} from './DragAndDrop';
 import {DragAndDropHooks} from './useDragAndDrop';
 import {DraggableCollectionState, DroppableCollectionState, Collection as ICollection, ListState, Node, SelectionBehavior, useListState} from 'react-stately';
-import {filterDOMProps, useObjectRef} from '@react-aria/utils';
+import {filterDOMProps, inertValue, LoadMoreSentinelProps, UNSTABLE_useLoadMoreSentinel, useObjectRef} from '@react-aria/utils';
 import {forwardRefType, HoverEvents, Key, LinkDOMProps, RefObject} from '@react-types/shared';
 import {ListStateContext} from './ListBox';
 import React, {createContext, ForwardedRef, forwardRef, HTMLAttributes, JSX, ReactNode, useContext, useEffect, useMemo, useRef} from 'react';
@@ -130,7 +130,8 @@ function GridListInner<T extends object>({props, collection, gridListRef: ref}:
     keyboardDelegate,
     // Only tab navigation is supported in grid layout.
     keyboardNavigationBehavior: layout === 'grid' ? 'tab' : keyboardNavigationBehavior,
-    isVirtualized
+    isVirtualized,
+    shouldSelectOnPressUp: props.shouldSelectOnPressUp
   }, state, ref);
 
   let selectionManager = state.selectionManager;
@@ -139,6 +140,9 @@ function GridListInner<T extends object>({props, collection, gridListRef: ref}:
   let dragHooksProvided = useRef(isListDraggable);
   let dropHooksProvided = useRef(isListDroppable);
   useEffect(() => {
+    if (process.env.NODE_ENV === 'production') {
+      return;
+    }
     if (dragHooksProvided.current !== isListDraggable) {
       console.warn('Drag hooks were provided during one render, but not another. This should be avoided as it may produce unexpected behavior.');
     }
@@ -190,9 +194,11 @@ function GridListInner<T extends object>({props, collection, gridListRef: ref}:
   }
 
   let {focusProps, isFocused, isFocusVisible} = useFocusRing();
+  // TODO: What do we think about this check? Ideally we could just query the collection and see if ALL node are loaders and thus have it return that it is empty
+  let isEmpty = state.collection.size === 0 || (state.collection.size === 1 && state.collection.getItem(state.collection.getFirstKey()!)?.type === 'loader');
   let renderValues = {
     isDropTarget: isRootDropTarget,
-    isEmpty: state.collection.size === 0,
+    isEmpty,
     isFocused,
     isFocusVisible,
     layout,
@@ -207,10 +213,11 @@ function GridListInner<T extends object>({props, collection, gridListRef: ref}:
 
   let emptyState: ReactNode = null;
   let emptyStatePropOverrides: HTMLAttributes<HTMLElement> | null = null;
-  if (state.collection.size === 0 && props.renderEmptyState) {
+
+  if (isEmpty && props.renderEmptyState) {
     let content = props.renderEmptyState(renderValues);
     emptyState = (
-      <div role="row" style={{display: 'contents'}}>
+      <div role="row" aria-rowindex={1} style={{display: 'contents'}}>
         <div role="gridcell" style={{display: 'contents'}}>
           {content}
         </div>
@@ -228,7 +235,7 @@ function GridListInner<T extends object>({props, collection, gridListRef: ref}:
         slot={props.slot || undefined}
         onScroll={props.onScroll}
         data-drop-target={isRootDropTarget || undefined}
-        data-empty={state.collection.size === 0 || undefined}
+        data-empty={isEmpty || undefined}
         data-focused={isFocused || undefined}
         data-focus-visible={isFocusVisible || undefined}
         data-layout={layout}>
@@ -344,7 +351,7 @@ export const GridListItem = /*#__PURE__*/ createLeafComponent('item', function G
   }, []);
 
   useEffect(() => {
-    if (!item.textValue) {
+    if (!item.textValue && process.env.NODE_ENV !== 'production') {
       console.warn('A `textValue` prop is required for <GridListItem> elements with non-plain text children in order to support accessibility features such as type to select.');
     }
   }, [item.textValue]);
@@ -489,3 +496,61 @@ function RootDropIndicator() {
     </div>
   );
 }
+
+export interface GridListLoadingSentinelProps extends Omit<LoadMoreSentinelProps, 'collection'>, StyleProps {
+  /**
+   * The load more spinner to render when loading additional items.
+   */
+  children?: ReactNode,
+  /**
+   * Whether or not the loading spinner should be rendered or not.
+   */
+  isLoading?: boolean
+}
+
+export const UNSTABLE_GridListLoadingSentinel = createLeafComponent('loader', function GridListLoadingIndicator<T extends object>(props: GridListLoadingSentinelProps, ref: ForwardedRef<HTMLDivElement>, item: Node<T>) {
+  let state = useContext(ListStateContext)!;
+  let {isVirtualized} = useContext(CollectionRendererContext);
+  let {isLoading, onLoadMore, scrollOffset, ...otherProps} = props;
+
+  let sentinelRef = useRef(null);
+  let memoedLoadMoreProps = useMemo(() => ({
+    onLoadMore,
+    collection: state?.collection,
+    sentinelRef,
+    scrollOffset
+  }), [onLoadMore, scrollOffset, state?.collection]);
+  UNSTABLE_useLoadMoreSentinel(memoedLoadMoreProps, sentinelRef);
+
+  let renderProps = useRenderProps({
+    ...otherProps,
+    id: undefined,
+    children: item.rendered,
+    defaultClassName: 'react-aria-GridListLoadingIndicator',
+    values: null
+  });
+
+  return (
+    <>
+      {/* Alway render the sentinel. For now onus is on the user for styling when using flex + gap (this would introduce a gap even though it doesn't take room) */}
+      {/* @ts-ignore - compatibility with React < 19 */}
+      <div style={{position: 'relative', width: 0, height: 0}} inert={inertValue(true)} >
+        <div data-testid="loadMoreSentinel" ref={sentinelRef} style={{position: 'absolute', height: 1, width: 1}} />
+      </div>
+      {isLoading && renderProps.children && (
+        <div
+          {...renderProps}
+          {...mergeProps(filterDOMProps(props as any))}
+          role="row"
+          aria-rowindex={isVirtualized ? item.index + 1 : undefined}
+          ref={ref}>
+          <div
+            aria-colindex={isVirtualized ? 1 : undefined}
+            role="gridcell">
+            {renderProps.children}
+          </div>
+        </div>
+      )}
+    </>
+  );
+});