diff --git a/packages/@react-aria/selection/src/ListKeyboardDelegate.ts b/packages/@react-aria/selection/src/ListKeyboardDelegate.ts index 735c7078c1c..7405467b0bc 100644 --- a/packages/@react-aria/selection/src/ListKeyboardDelegate.ts +++ b/packages/@react-aria/selection/src/ListKeyboardDelegate.ts @@ -17,6 +17,7 @@ import {Key, RefObject} from 'react'; interface ListKeyboardDelegateOptions { collection: Collection>, ref: RefObject, + collator?: Intl.Collator, layout?: 'stack' | 'grid', orientation?: Orientation, direction?: Direction, @@ -27,7 +28,7 @@ export class ListKeyboardDelegate implements KeyboardDelegate { private collection: Collection>; private disabledKeys: Set; private ref: RefObject; - private collator: Intl.Collator; + private collator: Intl.Collator | undefined; private layout: 'stack' | 'grid'; private orientation?: Orientation; private direction?: Direction; @@ -39,6 +40,7 @@ export class ListKeyboardDelegate implements KeyboardDelegate { let opts = args[0] as ListKeyboardDelegateOptions; this.collection = opts.collection; this.ref = opts.ref; + this.collator = opts.collator; this.disabledKeys = opts.disabledKeys || new Set(); this.orientation = opts.orientation; this.direction = opts.direction; diff --git a/packages/react-aria-components/src/ListBox.tsx b/packages/react-aria-components/src/ListBox.tsx index e7a16fb0a92..ef928e685c5 100644 --- a/packages/react-aria-components/src/ListBox.tsx +++ b/packages/react-aria-components/src/ListBox.tsx @@ -10,7 +10,7 @@ * governing permissions and limitations under the License. */ -import {AriaListBoxOptions, AriaListBoxProps, DraggableItemResult, DragPreviewRenderer, DroppableCollectionResult, DroppableItemResult, FocusScope, ListKeyboardDelegate, mergeProps, useFocusRing, useHover, useListBox, useListBoxSection, useLocale, useOption} from 'react-aria'; +import {AriaListBoxOptions, AriaListBoxProps, DraggableItemResult, DragPreviewRenderer, DroppableCollectionResult, DroppableItemResult, FocusScope, ListKeyboardDelegate, mergeProps, useCollator, useFocusRing, useHover, useListBox, useListBoxSection, useLocale, useOption} from 'react-aria'; import {CollectionDocumentContext, CollectionPortal, CollectionProps, ItemProps, useCachedChildren, useCollection} from './Collection'; import {ContextValue, forwardRefType, HiddenContext, Provider, SlotProps, StyleProps, StyleRenderProps, useContextProps, useRenderProps, useSlot, useSlottedContext} from './utils'; import {DragAndDropContext, DragAndDropHooks, DropIndicator, DropIndicatorContext, DropIndicatorProps} from './useDragAndDrop'; @@ -130,16 +130,18 @@ function ListBoxInner({state, props, listBoxRef}: ListBoxInnerProps) { let isListDroppable = !!dragAndDropHooks?.useDroppableCollectionState; let {direction} = useLocale(); let {disabledBehavior, disabledKeys} = selectionManager; + let collator = useCollator({usage: 'search', sensitivity: 'base'}); let keyboardDelegate = useMemo(() => ( props.keyboardDelegate || new ListKeyboardDelegate({ collection, + collator, ref: listBoxRef, disabledKeys: disabledBehavior === 'selection' ? new Set() : disabledKeys, layout, orientation, direction }) - ), [collection, listBoxRef, disabledBehavior, disabledKeys, orientation, direction, props.keyboardDelegate, layout]); + ), [collection, collator, listBoxRef, disabledBehavior, disabledKeys, orientation, direction, props.keyboardDelegate, layout]); let {listBoxProps} = useListBox({ ...props,