react-aria-components 1.6.0 → 1.7.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-aria-components",
-  "version": "1.6.0",
+  "version": "1.7.0",
   "description": "A library of styleable components built using React Aria",
   "license": "Apache-2.0",
   "main": "dist/main.js",
@@ -39,38 +39,30 @@
   "dependencies": {
     "@internationalized/date": "^3.7.0",
     "@internationalized/string": "^3.2.5",
-    "@react-aria/autocomplete": "3.0.0-alpha.37",
-    "@react-aria/collections": "3.0.0-alpha.7",
-    "@react-aria/color": "^3.0.3",
-    "@react-aria/disclosure": "^3.0.1",
-    "@react-aria/dnd": "^3.8.1",
-    "@react-aria/focus": "^3.19.1",
-    "@react-aria/interactions": "^3.23.0",
+    "@react-aria/autocomplete": "3.0.0-beta.0",
+    "@react-aria/collections": "3.0.0-beta.0",
+    "@react-aria/dnd": "^3.9.0",
+    "@react-aria/focus": "^3.20.0",
+    "@react-aria/interactions": "^3.24.0",
     "@react-aria/live-announcer": "^3.4.1",
-    "@react-aria/menu": "^3.17.0",
-    "@react-aria/toolbar": "3.0.0-beta.12",
-    "@react-aria/tree": "3.0.0-beta.3",
-    "@react-aria/utils": "^3.27.0",
-    "@react-aria/virtualizer": "^4.1.1",
-    "@react-stately/autocomplete": "3.0.0-alpha.0",
-    "@react-stately/color": "^3.8.2",
-    "@react-stately/disclosure": "^3.0.1",
-    "@react-stately/layout": "^4.1.1",
-    "@react-stately/menu": "^3.9.1",
-    "@react-stately/selection": "^3.19.0",
-    "@react-stately/table": "^3.13.1",
+    "@react-aria/toolbar": "3.0.0-beta.13",
+    "@react-aria/utils": "^3.28.0",
+    "@react-aria/virtualizer": "^4.1.2",
+    "@react-stately/autocomplete": "3.0.0-beta.0",
+    "@react-stately/layout": "^4.2.0",
+    "@react-stately/selection": "^3.20.0",
+    "@react-stately/table": "^3.14.0",
     "@react-stately/utils": "^3.10.5",
-    "@react-stately/virtualizer": "^4.2.1",
-    "@react-types/color": "^3.0.2",
-    "@react-types/form": "^3.7.9",
-    "@react-types/grid": "^3.2.11",
-    "@react-types/shared": "^3.27.0",
-    "@react-types/table": "^3.10.4",
+    "@react-stately/virtualizer": "^4.3.0",
+    "@react-types/form": "^3.7.10",
+    "@react-types/grid": "^3.3.0",
+    "@react-types/shared": "^3.28.0",
+    "@react-types/table": "^3.11.0",
     "@swc/helpers": "^0.5.0",
     "client-only": "^0.0.1",
-    "react-aria": "^3.37.0",
-    "react-stately": "^3.35.0",
-    "use-sync-external-store": "^1.2.0"
+    "react-aria": "^3.38.0",
+    "react-stately": "^3.36.0",
+    "use-sync-external-store": "^1.4.0"
   },
   "peerDependencies": {
     "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1",
@@ -79,5 +71,8 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "09e7f44bebdc9d89122926b2b439a0a38a2814ea"
+  "devDependencies": {
+    "@tailwindcss/postcss": "^4.0.0"
+  },
+  "gitHead": "4d3c72c94eea2d72eb3a0e7d56000c6ef7e39726"
 }

package/src/Autocomplete.tsx

@@ -10,8 +10,9 @@
  * governing permissions and limitations under the License.
  */
 
-import {AriaAutocompleteProps, CollectionOptions, UNSTABLE_useAutocomplete} from '@react-aria/autocomplete';
-import {AutocompleteState, UNSTABLE_useAutocompleteState} from '@react-stately/autocomplete';
+import {AriaAutocompleteProps, CollectionOptions, useAutocomplete} from '@react-aria/autocomplete';
+import {AutocompleteState, useAutocompleteState} from '@react-stately/autocomplete';
+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';
@@ -21,46 +22,49 @@ import {TextFieldContext} from './TextField';
 export interface AutocompleteProps extends AriaAutocompleteProps, SlotProps {}
 
 interface InternalAutocompleteContextValue {
-  filterFn?: (nodeTextValue: string) => boolean,
+  filter?: (nodeTextValue: string) => boolean,
   collectionProps: CollectionOptions,
   collectionRef: RefObject<HTMLElement | null>
 }
 
-export const UNSTABLE_AutocompleteContext = createContext<SlottedContextValue<AutocompleteProps>>(null);
-export const UNSTABLE_AutocompleteStateContext = createContext<AutocompleteState | null>(null);
+export const AutocompleteContext = createContext<SlottedContextValue<Partial<AutocompleteProps>>>(null);
+export const AutocompleteStateContext = createContext<AutocompleteState | null>(null);
 // This context is to pass the register and filter down to whatever collection component is wrapped by the Autocomplete
 // TODO: export from RAC, but rename to something more appropriate
 export const UNSTABLE_InternalAutocompleteContext = createContext<InternalAutocompleteContextValue | null>(null);
 
 /**
- * A autocomplete combines a text input with a menu, allowing users to filter a list of options to items matching a query.
+ * An autocomplete combines a TextField or SearchField with a Menu or ListBox, allowing users to search or filter a list of suggestions.
  */
-export function UNSTABLE_Autocomplete(props: AutocompleteProps) {
-  let ctx = useSlottedContext(UNSTABLE_AutocompleteContext, props.slot);
+export function Autocomplete(props: AutocompleteProps) {
+  let ctx = useSlottedContext(AutocompleteContext, props.slot);
   props = mergeProps(ctx, props);
-  let {filter} = props;
-  let state = UNSTABLE_useAutocompleteState(props);
+  let {filter, disableAutoFocusFirst} = props;
+  let state = useAutocompleteState(props);
+  let inputRef = useRef<HTMLInputElement | null>(null);
   let collectionRef = useRef<HTMLElement>(null);
-
   let {
     textFieldProps,
     collectionProps,
     collectionRef: mergedCollectionRef,
-    filterFn
-  } = UNSTABLE_useAutocomplete({
+    filter: filterFn
+  } = useAutocomplete({
     ...removeDataAttributes(props),
     filter,
+    disableAutoFocusFirst,
+    inputRef,
     collectionRef
   }, state);
 
   return (
     <Provider
       values={[
-        [UNSTABLE_AutocompleteStateContext, state],
+        [AutocompleteStateContext, state],
         [SearchFieldContext, textFieldProps],
         [TextFieldContext, textFieldProps],
+        [InputContext, {ref: inputRef}],
         [UNSTABLE_InternalAutocompleteContext, {
-          filterFn,
+          filter: filterFn,
           collectionProps,
           collectionRef: mergedCollectionRef
         }]

package/src/Checkbox.tsx

@@ -123,7 +123,9 @@ export const CheckboxGroup = /*#__PURE__*/ (forwardRef as forwardRefType)(functi
     ...props,
     validationBehavior
   });
-  let [labelRef, label] = useSlot();
+  let [labelRef, label] = useSlot(
+    !props['aria-label'] && !props['aria-labelledby']
+  );
   let {groupProps, labelProps, descriptionProps, errorMessageProps, ...validation} = useCheckboxGroup({
     ...props,
     label,

package/src/Collection.tsx

@@ -19,7 +19,7 @@ export interface CollectionProps<T> extends Omit<CollectionBase<T>, 'children'>
   /** The contents of the collection. */
   children?: ReactNode | ((item: T) => ReactNode),
   /** Values that should invalidate the item cache when using dynamic collections. */
-  dependencies?: any[]
+  dependencies?: ReadonlyArray<any>
 }
 
 export interface ItemRenderProps {
@@ -89,7 +89,7 @@ export interface SectionProps<T> extends Omit<SharedSectionProps<T>, 'children'
   /** Static child items or a function to render children. */
   children?: ReactNode | ((item: T) => ReactElement),
   /** Values that should invalidate the item cache when using dynamic collections. */
-  dependencies?: any[]
+  dependencies?: ReadonlyArray<any>
 }
 
 interface SectionContextValue {

package/src/ColorArea.tsx

@@ -1,11 +1,10 @@
-import {AriaColorAreaProps} from '@react-types/color';
+import {AriaColorAreaProps, useColorArea} from 'react-aria';
 import {ColorAreaContext} from './RSPContexts';
-import {ColorAreaState, useColorAreaState} from '@react-stately/color';
+import {ColorAreaState, useColorAreaState} from 'react-stately';
 import {filterDOMProps} from '@react-aria/utils';
 import {InternalColorThumbContext} from './ColorThumb';
 import {Provider, RenderProps, SlotProps, useContextProps, useRenderProps} from './utils';
 import React, {createContext, ForwardedRef, forwardRef, useRef} from 'react';
-import {useColorArea} from '@react-aria/color';
 
 export interface ColorAreaRenderProps {
   /**

package/src/ColorField.tsx

@@ -10,10 +10,9 @@
  * governing permissions and limitations under the License.
  */
 
-import {AriaColorFieldProps, useColorChannelField, useColorField} from '@react-aria/color';
-import {ColorChannel, ColorSpace} from '@react-types/color';
+import {AriaColorFieldProps, useColorChannelField, useColorField, useLocale} from 'react-aria';
+import {ColorChannel, ColorFieldState, ColorSpace, useColorChannelFieldState, useColorFieldState} from 'react-stately';
 import {ColorFieldContext} from './RSPContexts';
-import {ColorFieldState, useColorChannelFieldState, useColorFieldState} from '@react-stately/color';
 import {FieldErrorContext} from './FieldError';
 import {filterDOMProps} from '@react-aria/utils';
 import {InputContext} from './Input';
@@ -22,7 +21,6 @@ import {LabelContext} from './Label';
 import {Provider, RACValidation, removeDataAttributes, RenderProps, SlotProps, useContextProps, useRenderProps, useSlot} from './utils';
 import React, {createContext, ForwardedRef, forwardRef, HTMLAttributes, InputHTMLAttributes, LabelHTMLAttributes, Ref, useRef} from 'react';
 import {TextContext} from './Text';
-import {useLocale} from 'react-aria';
 
 export interface ColorFieldRenderProps {
   /**
@@ -86,7 +84,9 @@ function ColorChannelField(props: ColorChannelFieldProps) {
   });
 
   let inputRef = useRef<HTMLInputElement>(null);
-  let [labelRef, label] = useSlot();
+  let [labelRef, label] = useSlot(
+    !props['aria-label'] && !props['aria-labelledby']
+  );
   let {
     labelProps,
     inputProps,
@@ -129,7 +129,9 @@ function HexColorField(props: HexColorFieldProps) {
   });
 
   let inputRef = useRef<HTMLInputElement>(null);
-  let [labelRef, label] = useSlot();
+  let [labelRef, label] = useSlot(
+    !props['aria-label'] && !props['aria-labelledby']
+  );
   let {
     labelProps,
     inputProps,

package/src/ColorPicker.tsx

@@ -10,9 +10,8 @@
  * governing permissions and limitations under the License.
  */
 
-import {Color} from '@react-types/color';
+import {Color, ColorPickerState, ColorPickerProps as StatelyColorPickerProps, useColorPickerState} from 'react-stately';
 import {ColorAreaContext, ColorFieldContext, ColorSliderContext, ColorWheelContext} from './RSPContexts';
-import {ColorPickerState, ColorPickerProps as StatelyColorPickerProps, useColorPickerState} from '@react-stately/color';
 import {ColorSwatchContext} from './ColorSwatch';
 import {ColorSwatchPickerContext} from './ColorSwatchPicker';
 import {mergeProps} from 'react-aria';

package/src/ColorSlider.tsx

@@ -1,14 +1,12 @@
-import {AriaColorSliderProps} from '@react-types/color';
+import {AriaColorSliderProps, Orientation, useColorSlider, useLocale} from 'react-aria';
 import {ColorSliderContext} from './RSPContexts';
-import {ColorSliderState, useColorSliderState} from '@react-stately/color';
+import {ColorSliderState, useColorSliderState} from 'react-stately';
 import {filterDOMProps} from '@react-aria/utils';
 import {InternalColorThumbContext} from './ColorThumb';
 import {LabelContext} from './Label';
-import {Orientation, useLocale} from 'react-aria';
 import {Provider, RenderProps, SlotProps, useContextProps, useRenderProps, useSlot} from './utils';
 import React, {createContext, ForwardedRef, forwardRef} from 'react';
 import {SliderOutputContext, SliderStateContext, SliderTrackContext} from './Slider';
-import {useColorSlider} from '@react-aria/color';
 
 export interface ColorSliderRenderProps {
   /**
@@ -41,7 +39,9 @@ export const ColorSlider = forwardRef(function ColorSlider(props: ColorSliderPro
   let trackRef = React.useRef(null);
   let inputRef = React.useRef(null);
 
-  let [labelRef, label] = useSlot();
+  let [labelRef, label] = useSlot(
+    !props['aria-label'] && !props['aria-labelledby']
+  );
   let {
     trackProps,
     thumbProps,

package/src/ColorSwatch.tsx

@@ -1,5 +1,5 @@
-import {AriaColorSwatchProps, useColorSwatch} from '@react-aria/color';
-import {Color} from '@react-types/color';
+import {AriaColorSwatchProps, useColorSwatch} from 'react-aria';
+import {Color} from 'react-stately';
 import {ContextValue, SlotProps, StyleRenderProps, useContextProps, useRenderProps} from './utils';
 import React, {createContext, ForwardedRef, forwardRef} from 'react';
 

package/src/ColorSwatchPicker.tsx

@@ -1,5 +1,5 @@
 import {AriaLabelingProps, HoverEvents, ValueBase} from '@react-types/shared';
-import {Color, parseColor, useColorPickerState} from '@react-stately/color';
+import {Color, parseColor, useColorPickerState} from 'react-stately';
 import {ColorSwatchContext} from './ColorSwatch';
 import {composeRenderProps, ContextValue, RenderProps, StyleRenderProps, useContextProps} from './utils';
 import {filterDOMProps} from '@react-aria/utils';

package/src/ColorThumb.tsx

@@ -1,11 +1,9 @@
-import {Color} from '@react-types/color';
+import {Color} from 'react-stately';
 import {filterDOMProps} from '@react-aria/utils';
 import {HoverEvents, RefObject} from '@react-types/shared';
-import {mergeProps} from 'react-aria';
+import {mergeProps, useFocusRing, useHover} from 'react-aria';
 import React, {createContext, ForwardedRef, forwardRef, HTMLAttributes, InputHTMLAttributes, useContext} from 'react';
 import {RenderProps, useRenderProps} from './utils';
-import {useFocusRing} from '@react-aria/focus';
-import {useHover} from '@react-aria/interactions';
 
 interface ColorState {
   getDisplayColor(): Color,

package/src/ColorWheel.tsx

@@ -1,6 +1,6 @@
-import {AriaColorWheelOptions, useColorWheel} from '@react-aria/color';
+import {AriaColorWheelOptions, useColorWheel} from 'react-aria';
 import {ColorWheelContext} from './RSPContexts';
-import {ColorWheelState, useColorWheelState} from '@react-stately/color';
+import {ColorWheelState, useColorWheelState} from 'react-stately';
 import {ContextValue, Provider, RenderProps, SlotProps, StyleRenderProps, useContextProps, useRenderProps} from './utils';
 import {filterDOMProps} from '@react-aria/utils';
 import {InternalColorThumbContext} from './ColorThumb';

package/src/ComboBox.tsx

@@ -126,7 +126,9 @@ function ComboBoxInner<T extends object>({props, collection, comboBoxRef: ref}:
   let inputRef = useRef<HTMLInputElement>(null);
   let listBoxRef = useRef<HTMLDivElement>(null);
   let popoverRef = useRef<HTMLDivElement>(null);
-  let [labelRef, label] = useSlot();
+  let [labelRef, label] = useSlot(
+    !props['aria-label'] && !props['aria-labelledby']
+  );
   let {
     buttonProps,
     inputProps,

package/src/DateField.tsx

@@ -64,7 +64,9 @@ export const DateField = /*#__PURE__*/ (forwardRef as forwardRefType)(function D
   });
 
   let fieldRef = useRef<HTMLDivElement>(null);
-  let [labelRef, label] = useSlot();
+  let [labelRef, label] = useSlot(
+    !props['aria-label'] && !props['aria-labelledby']
+  );
   let inputRef = useRef<HTMLInputElement>(null);
   let {labelProps, fieldProps, inputProps, descriptionProps, errorMessageProps, ...validation} = useDateField({
     ...removeDataAttributes(props),
@@ -127,7 +129,9 @@ export const TimeField = /*#__PURE__*/ (forwardRef as forwardRefType)(function T
   });
 
   let fieldRef = useRef<HTMLDivElement>(null);
-  let [labelRef, label] = useSlot();
+  let [labelRef, label] = useSlot(
+    !props['aria-label'] && !props['aria-labelledby']
+  );
   let inputRef = useRef<HTMLInputElement>(null);
   let {labelProps, fieldProps, inputProps, descriptionProps, errorMessageProps, ...validation} = useTimeField({
     ...removeDataAttributes(props),
@@ -341,9 +345,10 @@ export const DateSegment = /*#__PURE__*/ (forwardRef as forwardRefType)(function
 
 
   return (
-    <div
+    <span
       {...mergeProps(filterDOMProps(otherProps as any), segmentProps, focusProps, hoverProps)}
       {...renderProps}
+      style={segmentProps.style}
       ref={domRef}
       data-placeholder={segment.isPlaceholder || undefined}
       data-invalid={state.isInvalid || undefined}

package/src/DatePicker.tsx

@@ -85,7 +85,9 @@ export const DatePicker = /*#__PURE__*/ (forwardRef as forwardRefType)(function
   });
 
   let groupRef = useRef<HTMLDivElement>(null);
-  let [labelRef, label] = useSlot();
+  let [labelRef, label] = useSlot(
+    !props['aria-label'] && !props['aria-labelledby']
+  );
   let {
     groupProps,
     labelProps,
@@ -186,7 +188,9 @@ export const DateRangePicker = /*#__PURE__*/ (forwardRef as forwardRefType)(func
   });
 
   let groupRef = useRef<HTMLDivElement>(null);
-  let [labelRef, label] = useSlot();
+  let [labelRef, label] = useSlot(
+    !props['aria-label'] && !props['aria-labelledby']
+  );
   let {
     groupProps,
     labelProps,

package/src/Dialog.tsx

@@ -25,7 +25,7 @@ export interface DialogTriggerProps extends OverlayTriggerProps {
   children: ReactNode
 }
 
-interface DialogRenderProps {
+export interface DialogRenderProps {
   close: () => void
 }
 
@@ -61,7 +61,11 @@ export function DialogTrigger(props: DialogTriggerProps) {
         [OverlayTriggerStateContext, state],
         [RootMenuTriggerStateContext, state],
         [DialogContext, overlayProps],
-        [PopoverContext, {trigger: 'DialogTrigger', triggerRef: buttonRef}]
+        [PopoverContext, {
+          trigger: 'DialogTrigger',
+          triggerRef: buttonRef,
+          'aria-labelledby': overlayProps['aria-labelledby']
+        }]
       ]}>
       <PressResponder {...triggerProps} ref={buttonRef} isPressed={state.isOpen}>
         {props.children}

package/src/Disclosure.tsx

@@ -10,14 +10,13 @@
  * governing permissions and limitations under the License.
  */
 
-import {AriaDisclosureProps, useDisclosure} from '@react-aria/disclosure';
+import {AriaDisclosureProps, useDisclosure, useFocusRing} from 'react-aria';
 import {ButtonContext} from './Button';
 import {ContextValue, DEFAULT_SLOT, Provider, RenderProps, SlotProps, useContextProps, useRenderProps} from './utils';
-import {DisclosureGroupState, DisclosureState, DisclosureGroupProps as StatelyDisclosureGroupProps, useDisclosureGroupState, useDisclosureState} from '@react-stately/disclosure';
+import {DisclosureGroupState, DisclosureState, DisclosureGroupProps as StatelyDisclosureGroupProps, useDisclosureGroupState, useDisclosureState} from 'react-stately';
 import {DOMProps, forwardRefType, Key} from '@react-types/shared';
 import {filterDOMProps, mergeProps, mergeRefs, useId} from '@react-aria/utils';
 import React, {createContext, DOMAttributes, ForwardedRef, forwardRef, ReactNode, useContext} from 'react';
-import {useFocusRing} from 'react-aria';
 
 export interface DisclosureGroupProps extends StatelyDisclosureGroupProps, RenderProps<DisclosureGroupRenderProps>, DOMProps {}
 

package/src/DropZone.tsx

@@ -13,10 +13,9 @@
 import {AriaLabelingProps, HoverEvents} from '@react-types/shared';
 import {ContextValue, Provider, RenderProps, SlotProps, useContextProps, useRenderProps} from './utils';
 import {DropOptions, mergeProps, useButton, useClipboard, useDrop, useFocusRing, useHover, useLocalizedStringFormatter, VisuallyHidden} from 'react-aria';
-import {filterDOMProps, useLabels, useObjectRef, useSlotId} from '@react-aria/utils';
+import {filterDOMProps, isFocusable, useLabels, useObjectRef, useSlotId} from '@react-aria/utils';
 // @ts-ignore
 import intlMessages from '../intl/*.json';
-import {isFocusable} from '@react-aria/focus';
 import React, {createContext, ForwardedRef, forwardRef, useRef} from 'react';
 import {TextContext} from './Text';
 

package/src/GridList.tsx

@@ -57,6 +57,11 @@ export interface GridListRenderProps {
 }
 
 export interface GridListProps<T> extends Omit<AriaGridListProps<T>, 'children'>, CollectionProps<T>, StyleRenderProps<GridListRenderProps>, SlotProps, ScrollableProps<HTMLDivElement> {
+  /**
+   * Whether typeahead navigation is disabled.
+   * @default false
+   */
+  disallowTypeAhead?: boolean,
   /** How multiple selection should behave in the collection. */
   selectionBehavior?: SelectionBehavior,
   /** The drag and drop hooks returned by `useDragAndDrop` used to enable drag and drop behavior for the GridList. */

package/src/Group.tsx

@@ -74,6 +74,7 @@ export const Group = /*#__PURE__*/ (forwardRef as forwardRefType)(function Group
 
   isDisabled ??= !!props['aria-disabled'] && props['aria-disabled'] !== 'false';
   isInvalid ??= !!props['aria-invalid'] && props['aria-invalid'] !== 'false';
+
   let renderProps = useRenderProps({
     ...props,
     values: {isHovered, isFocusWithin: isFocused, isFocusVisible, isDisabled, isInvalid},

package/src/ListBox.tsx

@@ -13,10 +13,10 @@
 import {AriaListBoxOptions, AriaListBoxProps, DraggableItemResult, DragPreviewRenderer, DroppableCollectionResult, DroppableItemResult, FocusScope, ListKeyboardDelegate, mergeProps, useCollator, useFocusRing, useHover, useListBox, useListBoxSection, useLocale, useOption} from 'react-aria';
 import {Collection, CollectionBuilder, createBranchComponent, createLeafComponent} from '@react-aria/collections';
 import {CollectionProps, CollectionRendererContext, ItemRenderProps, SectionContext, SectionProps} from './Collection';
-import {ContextValue, Provider, RenderProps, ScrollableProps, SlotProps, StyleRenderProps, useContextProps, useRenderProps, useSlot} from './utils';
+import {ContextValue, DEFAULT_SLOT, Provider, RenderProps, ScrollableProps, SlotProps, StyleRenderProps, useContextProps, useRenderProps, useSlot} from './utils';
 import {DragAndDropContext, DropIndicatorContext, DropIndicatorProps, useDndPersistedKeys, useRenderDropIndicator} from './DragAndDrop';
 import {DragAndDropHooks} from './useDragAndDrop';
-import {DraggableCollectionState, DroppableCollectionState, ListState, Node, Orientation, SelectionBehavior, useListState} from 'react-stately';
+import {DraggableCollectionState, DroppableCollectionState, ListState, Node, Orientation, SelectionBehavior, UNSTABLE_useFilteredListState, useListState} from 'react-stately';
 import {filterDOMProps, mergeRefs, useObjectRef} from '@react-aria/utils';
 import {forwardRefType, HoverEvents, Key, LinkDOMProps, RefObject} from '@react-types/shared';
 import {HeaderContext} from './Header';
@@ -107,12 +107,8 @@ export const ListBox = /*#__PURE__*/ (forwardRef as forwardRefType)(function Lis
 function StandaloneListBox({props, listBoxRef, collection}) {
   props = {...props, collection, children: null, items: null};
   let {layoutDelegate} = useContext(CollectionRendererContext);
-  let {filterFn, collectionProps, collectionRef} = useContext(UNSTABLE_InternalAutocompleteContext) || {};
-  // Memoed so that useAutocomplete callback ref is properly only called once on mount and not everytime a rerender happens
-  listBoxRef = useObjectRef(useMemo(() => mergeRefs(listBoxRef, collectionRef !== undefined ? collectionRef as RefObject<HTMLDivElement> : null), [collectionRef, listBoxRef]));
-  let filteredCollection = useMemo(() => filterFn ? collection.filter(filterFn) : collection, [collection, filterFn]);
-  let state = useListState({...props, collection: filteredCollection, layoutDelegate});
-  return <ListBoxInner state={state} props={{...props, ...collectionProps}} listBoxRef={listBoxRef} />;
+  let state = useListState({...props, layoutDelegate});
+  return <ListBoxInner state={state} props={props} listBoxRef={listBoxRef} />;
 }
 
 interface ListBoxInnerProps<T> {
@@ -121,8 +117,13 @@ interface ListBoxInnerProps<T> {
   listBoxRef: RefObject<HTMLDivElement | null>
 }
 
-function ListBoxInner<T extends object>({state, props, listBoxRef}: ListBoxInnerProps<T>) {
+function ListBoxInner<T extends object>({state: inputState, props, listBoxRef}: ListBoxInnerProps<T>) {
+  let {filter, collectionProps, collectionRef} = useContext(UNSTABLE_InternalAutocompleteContext) || {};
+  props = useMemo(() => collectionProps ? ({...props, ...collectionProps}) : props, [props, collectionProps]);
   let {dragAndDropHooks, layout = 'stack', orientation = 'vertical'} = props;
+  // Memoed so that useAutocomplete callback ref is properly only called once on mount and not everytime a rerender happens
+  listBoxRef = useObjectRef(useMemo(() => mergeRefs(listBoxRef, collectionRef !== undefined ? collectionRef as RefObject<HTMLDivElement> : null), [collectionRef, listBoxRef]));
+  let state = UNSTABLE_useFilteredListState(inputState, filter);
   let {collection, selectionManager} = state;
   let isListDraggable = !!dragAndDropHooks?.useDraggableCollectionState;
   let isListDroppable = !!dragAndDropHooks?.useDroppableCollectionState;
@@ -398,6 +399,7 @@ export const ListBoxItem = /*#__PURE__*/ createLeafComponent('item', function Li
         values={[
           [TextContext, {
             slots: {
+              [DEFAULT_SLOT]: labelProps,
               label: labelProps,
               description: descriptionProps
             }