chore: Release audit (#7850)

LFDanLu · devongovett · snowystinger · web-flow · commit 5f30d47203ff · 2025-03-03T20:55:03.000Z
* Fix autocomplete enterKeyHint in React 16

Also updates to "go" instead of "enter"

* Update homepage to say "Over 50 components" 🥳

* mark filter and useFilteredListState as UNSTABLE

* update Tree feature list to include virtualization

* add toast to monopackage

* export Collection from monopackage and use it in TreeView docs

* remove element specific checks for the editableSegments query selector

* remove extra dep on tree

* refactor useDatePickerGroup to consider all focusable elements and avoid mutation observer

---------

Co-authored-by: Devon Govett &lt;devongovett@gmail.com&gt;
Co-authored-by: Robert Snow &lt;rsnow@adobe.com&gt;
diff --git a/packages/@adobe/react-spectrum/package.json b/packages/@adobe/react-spectrum/package.json
@@ -38,6 +38,7 @@
   },
   "dependencies": {
     "@internationalized/string": "^3.2.5",
+    "@react-aria/collections": "3.0.0-alpha.7",
     "@react-aria/i18n": "^3.12.5",
     "@react-aria/ssr": "^3.9.7",
     "@react-aria/utils": "^3.27.0",
@@ -91,6 +92,7 @@
     "@react-spectrum/theme-dark": "^3.5.15",
     "@react-spectrum/theme-default": "^3.5.15",
     "@react-spectrum/theme-light": "^3.4.15",
+    "@react-spectrum/toast": "3.0.0-beta.18",
     "@react-spectrum/tooltip": "^3.7.1",
     "@react-spectrum/tree": "^3.0.0-beta.3",
     "@react-spectrum/view": "^3.6.15",
diff --git a/packages/@adobe/react-spectrum/src/index.ts b/packages/@adobe/react-spectrum/src/index.ts
@@ -61,6 +61,7 @@ export {TextArea, TextField} from '@react-spectrum/textfield';
 export {theme as darkTheme} from '@react-spectrum/theme-dark';
 export {theme as defaultTheme} from '@react-spectrum/theme-default';
 export {theme as lightTheme} from '@react-spectrum/theme-light';
+export {ToastContainer, ToastQueue} from '@react-spectrum/toast';
 export {Tooltip, TooltipTrigger} from '@react-spectrum/tooltip';
 export {TreeView, TreeViewItem, TreeViewItemContent} from '@react-spectrum/tree';
 export {Content, Footer, Header, View} from '@react-spectrum/view';
@@ -71,6 +72,7 @@ export {VisuallyHidden} from '@react-aria/visually-hidden';
 export {useCollator, useDateFormatter, useFilter, useLocale, useLocalizedStringFormatter, useMessageFormatter, useNumberFormatter} from '@react-aria/i18n';
 export {SSRProvider} from '@react-aria/ssr';
 export {useDragAndDrop, DIRECTORY_DRAG_TYPE} from '@react-spectrum/dnd';
+export {Collection} from '@react-aria/collections';
 
 export type {SpectrumActionBarContainerProps, SpectrumActionBarProps} from '@react-spectrum/actionbar';
 export type {SpectrumActionGroupProps} from '@react-spectrum/actiongroup';
@@ -115,6 +117,7 @@ export type {SpectrumTableProps, SpectrumColumnProps, TableHeaderProps, TableBod
 export type {SpectrumTabListProps, SpectrumTabPanelsProps, SpectrumTabsProps} from '@react-spectrum/tabs';
 export type {SpectrumTagGroupProps} from '@react-spectrum/tag';
 export type {SpectrumTextFieldProps, SpectrumTextAreaProps} from '@react-spectrum/textfield';
+export type {SpectrumToastContainerProps, SpectrumToastOptions} from '@react-spectrum/toast';
 export type {SpectrumTooltipProps, SpectrumTooltipTriggerProps} from '@react-spectrum/tooltip';
 export type {SpectrumTreeViewProps, SpectrumTreeViewItemProps, SpectrumTreeViewItemContentProps} from '@react-spectrum/tree';
 export type {ContentProps, FooterProps, HeaderProps, ViewProps} from '@react-spectrum/view';
diff --git a/packages/@react-aria/autocomplete/src/useAutocomplete.ts b/packages/@react-aria/autocomplete/src/useAutocomplete.ts
@@ -18,7 +18,7 @@ import {dispatchVirtualBlur, dispatchVirtualFocus, moveVirtualFocus} from '@reac
 import {getInteractionModality} from '@react-aria/interactions';
 // @ts-ignore
 import intlMessages from '../intl/*.json';
-import React, {FocusEvent as ReactFocusEvent, KeyboardEvent as ReactKeyboardEvent, useCallback, useEffect, useMemo, useRef} from 'react';
+import {FocusEvent as ReactFocusEvent, KeyboardEvent as ReactKeyboardEvent, useCallback, useEffect, useMemo, useRef} from 'react';
 import {useLocalizedStringFormatter} from '@react-aria/i18n';
 
 export interface CollectionOptions extends DOMProps, AriaLabelingProps {
@@ -350,7 +350,7 @@ export function useAutocomplete(props: AriaAutocompleteOptions, state: Autocompl
       autoCorrect: 'off',
       // This disable's the macOS Safari spell check auto corrections.
       spellCheck: 'false',
-      [parseInt(React.version, 10) >= 17 ? 'enterKeyHint' : 'enterkeyhint']: 'enter',
+      enterKeyHint: 'go',
       onBlur,
       onFocus
     },
diff --git a/packages/@react-aria/collections/src/BaseCollection.ts b/packages/@react-aria/collections/src/BaseCollection.ts
@@ -217,7 +217,7 @@ export class BaseCollection<T> implements ICollection<Node<T>> {
   // Will need to handle varying levels I assume but will revisit after I get searchable menu working for base menu
   // TODO: an alternative is to simply walk the collection and add all item nodes that match the filter and any sections/separators we encounter
   // to an array, then walk that new array and fix all the next/Prev keys while adding them to the new collection
-  filter(filterFn: (nodeValue: string) => boolean): BaseCollection<T> {
+  UNSTABLE_filter(filterFn: (nodeValue: string) => boolean): BaseCollection<T> {
     let newCollection = new BaseCollection<T>();
     // This tracks the absolute last node we've visited in the collection when filtering, used for setting up the filteredCollection's lastKey and
     // for updating the next/prevKey for every non-filtered node.
diff --git a/packages/@react-aria/datepicker/src/useDatePickerGroup.ts b/packages/@react-aria/datepicker/src/useDatePickerGroup.ts
@@ -1,48 +1,14 @@
 import {createFocusManager, getFocusableTreeWalker} from '@react-aria/focus';
 import {DateFieldState, DatePickerState, DateRangePickerState} from '@react-stately/datepicker';
 import {FocusableElement, KeyboardEvent, RefObject} from '@react-types/shared';
-import {mergeProps, useLayoutEffect} from '@react-aria/utils';
+import {mergeProps} from '@react-aria/utils';
 import {useLocale} from '@react-aria/i18n';
-import {useMemo, useRef} from 'react';
+import {useMemo} from 'react';
 import {usePress} from '@react-aria/interactions';
 
 export function useDatePickerGroup(state: DatePickerState | DateRangePickerState | DateFieldState, ref: RefObject<Element | null>, disableArrowNavigation?: boolean) {
   let {direction} = useLocale();
   let focusManager = useMemo(() => createFocusManager(ref), [ref]);
-  let segments = useRef<FocusableElement[]>(undefined);
-  useLayoutEffect(() => {
-    if (ref?.current) {
-
-      let update = () => {
-        if (ref.current) {
-          // TODO: For now, just querying this list of elements. However, it's possible that either through hooks or RAC that some users may include other focusable items that they would want to able to keyboard navigate to. In that case, we might want to utilize focusableElements in isFocusable.ts
-          let editableSegments: NodeListOf<Element> | undefined = ref.current?.querySelectorAll('span[role="spinbutton"], span[role="textbox"], button, div[role="spinbutton"], div[role="textbox"]');
-
-          let segmentsArr = Array.from(editableSegments as NodeListOf<Element>).filter(Boolean).map(node => {
-            return {
-              element: node as FocusableElement,
-              rectX: node.getBoundingClientRect().left
-            };
-          });
-      
-          let orderedSegments = segmentsArr.sort((a, b) => a.rectX - b.rectX).map((item => item.element));
-          segments.current = orderedSegments;
-        }
-      };
-
-      update();
-
-      let observer = new MutationObserver(update);
-      observer.observe(ref.current, {
-        subtree: true,
-        childList: true
-      });
-
-      return () => {
-        observer.disconnect();
-      };
-    }
-  }, []);
 
   // Open the popover on alt + arrow down
   let onKeyDown = (e: KeyboardEvent) => {
@@ -65,19 +31,12 @@ export function useDatePickerGroup(state: DatePickerState | DateRangePickerState
         e.preventDefault();
         e.stopPropagation();
         if (direction === 'rtl') {
-          if (segments.current) {
-            let orderedSegments = segments.current;
+          if (ref.current) {
             let target = e.target as FocusableElement;
-            let index = orderedSegments.indexOf(target);
+            let prev = findNextSegment(ref.current, target.getBoundingClientRect().left, -1);
 
-            if (index === 0) {
-              target = orderedSegments[0] || target;
-            } else {
-              target = orderedSegments[index - 1] || target;
-            }
-
-            if (target) {
-              target.focus();
+            if (prev) {
+              prev.focus();
             }
           }
         } else {
@@ -88,22 +47,12 @@ export function useDatePickerGroup(state: DatePickerState | DateRangePickerState
         e.preventDefault();
         e.stopPropagation();
         if (direction === 'rtl') {
-          if (segments.current) {
-            let orderedSegments = segments.current;
+          if (ref.current) {
             let target = e.target as FocusableElement;
-            let index = orderedSegments.indexOf(target);
-
-            if (index === orderedSegments.length - 1) {
-              target = orderedSegments[orderedSegments.length - 1] || target;
-            } else {
-              target = orderedSegments[index - 1] || target;
-            }
+            let next = findNextSegment(ref.current, target.getBoundingClientRect().left, 1);
 
-  
-            target = orderedSegments[index + 1] || target;
-  
-            if (target) {
-              target.focus();
+            if (next) {
+              next.focus();
             }
           }
         } else {
@@ -169,3 +118,21 @@ export function useDatePickerGroup(state: DatePickerState | DateRangePickerState
 
   return mergeProps(pressProps, {onKeyDown});
 }
+
+function findNextSegment(group: Element, fromX: number, direction: number) {
+  let walker = getFocusableTreeWalker(group, {tabbable: true});
+  let node = walker.nextNode();
+  let closest: FocusableElement | null = null;
+  let closestDistance = Infinity;
+  while (node) {
+    let x = (node as Element).getBoundingClientRect().left;
+    let distance = x - fromX;
+    let absoluteDistance = Math.abs(distance);
+    if (Math.sign(distance) === direction && absoluteDistance < closestDistance) {
+      closest = node as FocusableElement;
+      closestDistance = absoluteDistance;
+    }
+    node = walker.nextNode();
+  }
+  return closest;
+}
diff --git a/packages/@react-aria/textfield/src/useTextField.ts b/packages/@react-aria/textfield/src/useTextField.ts
@@ -85,7 +85,7 @@ export interface AriaTextFieldOptions<T extends TextFieldIntrinsicElements> exte
   /**
    * An enumerated attribute that defines what action label or icon to preset for the enter key on virtual keyboards. See [https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/enterkeyhint].
    */
-  enterKeyHint?: string
+  enterKeyHint?: 'enter' | 'done' | 'go' | 'next' | 'previous' | 'search' | 'send'
 }
 
 /**
diff --git a/packages/@react-spectrum/tree/docs/TreeView.mdx b/packages/@react-spectrum/tree/docs/TreeView.mdx
@@ -448,7 +448,7 @@ The `<TreeViewItem>` component works with frameworks and client side routers lik
 ### With action menus
 
 ```tsx example
-import {Collection} from 'react-aria-components';
+import {Collection} from '@adobe/react-spectrum';
 
 <TreeView aria-label="Example tree with action menus" height="size-3000" maxWidth="size-6000" items={items}>
   {function renderItem(item: MyItem) {
diff --git a/packages/@react-stately/list/src/index.ts b/packages/@react-stately/list/src/index.ts
@@ -12,6 +12,6 @@
 
 export type {ListProps, ListState} from './useListState';
 export type {SingleSelectListProps, SingleSelectListState} from './useSingleSelectListState';
-export {useListState, useFilteredListState} from './useListState';
+export {useListState, UNSTABLE_useFilteredListState} from './useListState';
 export {useSingleSelectListState} from './useSingleSelectListState';
 export {ListCollection} from './ListCollection';
diff --git a/packages/@react-stately/list/src/useListState.ts b/packages/@react-stately/list/src/useListState.ts
@@ -73,8 +73,8 @@ export function useListState<T extends object>(props: ListProps<T>): ListState<T
 /**
  * Filters a collection using the provided filter function and returns a new ListState.
  */
-export function useFilteredListState<T extends object>(state: ListState<T>, filterFn: ((nodeValue: string) => boolean) | null | undefined): ListState<T> {
-  let collection = useMemo(() => filterFn ? state.collection.filter!(filterFn) : state.collection, [state.collection, filterFn]);
+export function UNSTABLE_useFilteredListState<T extends object>(state: ListState<T>, filterFn: ((nodeValue: string) => boolean) | null | undefined): ListState<T> {
+  let collection = useMemo(() => filterFn ? state.collection.UNSTABLE_filter!(filterFn) : state.collection, [state.collection, filterFn]);
   let selectionManager = state.selectionManager.withCollection(collection);
   useFocusedKeyReset(collection, selectionManager);
   return {
diff --git a/packages/@react-types/searchfield/src/index.d.ts b/packages/@react-types/searchfield/src/index.d.ts
@@ -25,6 +25,6 @@ export interface AriaSearchFieldProps extends SearchFieldProps, AriaTextFieldPro
   /**
    * An enumerated attribute that defines what action label or icon to preset for the enter key on virtual keyboards. See [https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/enterkeyhint].
    */
-  enterKeyHint?: string
+  enterKeyHint?: 'enter' | 'done' | 'go' | 'next' | 'previous' | 'search' | 'send'
 }
 export interface SpectrumSearchFieldProps extends SpectrumTextInputBase, Omit<AriaSearchFieldProps, 'isInvalid' | 'validationState'>, SpectrumTextFieldProps {}
diff --git a/packages/@react-types/shared/src/collections.d.ts b/packages/@react-types/shared/src/collections.d.ts
@@ -183,7 +183,7 @@ export interface Collection<T> extends Iterable<T> {
   getTextValue?(key: Key): string,
 
   /** Filters the collection using the given function. */
-  filter?(filterFn: (nodeValue: string) => boolean): Collection<T>
+  UNSTABLE_filter?(filterFn: (nodeValue: string) => boolean): Collection<T>
 }
 
 export interface Node<T> {
diff --git a/packages/@react-types/textfield/src/index.d.ts b/packages/@react-types/textfield/src/index.d.ts
@@ -48,8 +48,7 @@ export interface AriaTextFieldProps<T = HTMLInputElement> extends TextFieldProps
   /**
    * An enumerated attribute that defines what action label or icon to preset for the enter key on virtual keyboards. See [https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/enterkeyhint].
    */
-  enterKeyHint?: string
-
+  enterKeyHint?: 'enter' | 'done' | 'go' | 'next' | 'previous' | 'search' | 'send'
 }
 
 interface SpectrumTextFieldBaseProps {
diff --git a/packages/dev/docs/pages/react-aria/index.mdx b/packages/dev/docs/pages/react-aria/index.mdx
@@ -59,7 +59,7 @@ image: ../assets/ReactAriaOpenGraph.webp
 
   <section className="max-w-6xl mx-auto pt-32 px-4 sm:px-8 md:px-20 pb-48 sm:pb-60">
     <h1 className="text-3xl md:text-5xl lg:text-6xl font-semibold mb-4 text-center [text-wrap:balance] [filter:drop-shadow(0_0_0.25em_var(--page-bg))] dark:filter-none"><GradientText>Craft world-class accessible components with custom styles.</GradientText></h1>
-    <p className="text-slate-800 dark:text-slate-300 text-center text-lg md:text-2xl max-w-3xl mx-auto [text-wrap:balance]">Over 40 components with built-in behavior, adaptive interactions, top-tier accessibility, and internationalization out of the box, ready for your styles.</p>
+    <p className="text-slate-800 dark:text-slate-300 text-center text-lg md:text-2xl max-w-3xl mx-auto [text-wrap:balance]">Over 50 components with built-in behavior, adaptive interactions, top-tier accessibility, and internationalization out of the box, ready for your styles.</p>
 
     <div className="flex flex-col md:flex-row items-center gap-4 my-10 justify-center">
       <a href="getting-started.html" className="bg-linear-to-r from-blue-600 to-indigo-600 border border-blue-700 shadow-[inset_0_1px_0_rgba(255,255,255,0.1)] text-base md:text-lg font-bold text-white px-8 py-3 rounded-full transition focus-ring  dark:outline-white outline-offset-2 active:scale-95">Get Started</a>
diff --git a/packages/react-aria-components/README.md b/packages/react-aria-components/README.md
@@ -1,6 +1,6 @@
 # [React Aria Components](https://react-spectrum.adobe.com/react-aria/index.html)
 
-Over 40 components with built-in behavior, adaptive interactions, top-tier accessibility, and internationalization out of the box, ready for your styles.
+Over 50 components with built-in behavior, adaptive interactions, top-tier accessibility, and internationalization out of the box, ready for your styles.
 
 ## Features
 
diff --git a/packages/react-aria-components/docs/Tree.mdx b/packages/react-aria-components/docs/Tree.mdx
@@ -259,6 +259,7 @@ HTML lists are meant for static content, rather than heirarchies with rich inter
 * **Interactive children** – Tree items may include interactive elements such as buttons, menus, etc.
 * **Actions** – Items support optional actions such as navigation via click, tap, double click, or <Keyboard>Enter</Keyboard> key.
 * **Keyboard navigation** – Tree items and focusable children can be navigated using the arrow keys, along with page up/down, home/end, etc. Typeahead, auto scrolling, and selection modifier keys are supported as well.
+* **Virtualized scrolling** – Use [Virtualizer](Virtualizer.html) to improve performance of large lists by rendering only the visible items.
 * **Touch friendly** – Selection and actions adapt their behavior depending on the device. For example, selection is activated via long press on touch when item actions are present.
 * **Accessible** – Follows the [ARIA treegrid pattern](https://www.w3.org/WAI/ARIA/apg/patterns/treegrid/), with additional selection announcements via an ARIA live region. Extensively tested across many devices and [assistive technologies](accessibility.html#testing) to ensure announcements and behaviors are consistent.
 
diff --git a/packages/react-aria-components/package.json b/packages/react-aria-components/package.json
@@ -50,7 +50,6 @@
     "@react-aria/menu": "^3.17.0",
     "@react-aria/toast": "3.0.0-beta.19",
     "@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",
diff --git a/packages/react-aria-components/src/ListBox.tsx b/packages/react-aria-components/src/ListBox.tsx
@@ -16,7 +16,7 @@ import {CollectionProps, CollectionRendererContext, ItemRenderProps, SectionCont
 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, useFilteredListState, 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';
@@ -123,7 +123,7 @@ function ListBoxInner<T extends object>({state: inputState, props, listBoxRef}:
   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 = useFilteredListState(inputState, filterFn);
+  let state = UNSTABLE_useFilteredListState(inputState, filterFn);
   let {collection, selectionManager} = state;
   let isListDraggable = !!dragAndDropHooks?.useDraggableCollectionState;
   let isListDroppable = !!dragAndDropHooks?.useDroppableCollectionState;
diff --git a/packages/react-aria-components/src/Menu.tsx b/packages/react-aria-components/src/Menu.tsx
@@ -186,7 +186,7 @@ function MenuInner<T extends object>({props, collection, menuRef: ref}: MenuInne
   let {filterFn, collectionProps: autocompleteMenuProps, collectionRef} = useContext(UNSTABLE_InternalAutocompleteContext) || {};
   // Memoed so that useAutocomplete callback ref is properly only called once on mount and not everytime a rerender happens
   ref = useObjectRef(useMemo(() => mergeRefs(ref, collectionRef !== undefined ? collectionRef as RefObject<HTMLDivElement> : null), [collectionRef, ref]));
-  let filteredCollection = useMemo(() => filterFn ? collection.filter(filterFn) : collection, [collection, filterFn]);
+  let filteredCollection = useMemo(() => filterFn ? collection.UNSTABLE_filter(filterFn) : collection, [collection, filterFn]);
   let state = useTreeState({
     ...props,
     collection: filteredCollection as ICollection<Node<object>>,
diff --git a/packages/react-aria-components/test/AriaAutocomplete.test-util.tsx b/packages/react-aria-components/test/AriaAutocomplete.test-util.tsx
@@ -100,6 +100,7 @@ export const AriaAutocompleteTests = ({renderers, setup, prefix, ariaPattern = '
         expect(input).toHaveAttribute('aria-autocomplete', 'list');
         expect(input).toHaveAttribute('autoCorrect', 'off');
         expect(input).toHaveAttribute('spellCheck', 'false');
+        expect(input).toHaveAttribute('enterkeyhint', 'go');
 
         let menu = getByRole(collectionNodeRole);
         expect(menu).toHaveAttribute('id', input.getAttribute('aria-controls')!);
diff --git a/packages/react-stately/src/index.ts b/packages/react-stately/src/index.ts
@@ -44,7 +44,7 @@ export {useDisclosureState, useDisclosureGroupState} from '@react-stately/disclo
 export {useDraggableCollectionState, useDroppableCollectionState} from '@react-stately/dnd';
 export {Item, Section, useCollection} from '@react-stately/collections';
 export {useAsyncList, useListData, useTreeData} from '@react-stately/data';
-export {useListState, useSingleSelectListState, useFilteredListState} from '@react-stately/list';
+export {useListState, useSingleSelectListState, UNSTABLE_useFilteredListState} from '@react-stately/list';
 export {useMenuTriggerState, useSubmenuTriggerState} from '@react-stately/menu';
 export {useNumberFieldState} from '@react-stately/numberfield';
 export {useOverlayTriggerState} from '@react-stately/overlays';
diff --git a/yarn.lock b/yarn.lock

Original file line number	Diff line number	Diff line change
`@@ -85,7 +85,7 @@ export interface AriaTextFieldOptions<T extends TextFieldIntrinsicElements> exte`
`85`	`85`	`/**`
`86`	`86`	`* An enumerated attribute that defines what action label or icon to preset for the enter key on virtual keyboards. See [https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/enterkeyhint].`
`87`	`87`	`*/`
`88`		`- enterKeyHint?: string`
	`88`	`+ enterKeyHint?: 'enter' \| 'done' \| 'go' \| 'next' \| 'previous' \| 'search' \| 'send'`
`89`	`89`	`}`
`90`	`90`
`91`	`91`	`/**`
Original file line number	Diff line number	Diff line change
`@@ -25,6 +25,6 @@ export interface AriaSearchFieldProps extends SearchFieldProps, AriaTextFieldPro`
`25`	`25`	`/**`
`26`	`26`	`* An enumerated attribute that defines what action label or icon to preset for the enter key on virtual keyboards. See [https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/enterkeyhint].`
`27`	`27`	`*/`
`28`		`- enterKeyHint?: string`
	`28`	`+ enterKeyHint?: 'enter' \| 'done' \| 'go' \| 'next' \| 'previous' \| 'search' \| 'send'`
`29`	`29`	`}`
`30`	`30`	`export interface SpectrumSearchFieldProps extends SpectrumTextInputBase, Omit<AriaSearchFieldProps, 'isInvalid' \| 'validationState'>, SpectrumTextFieldProps {}`