[pull] main from adobe:main

packages/@react-aria/autocomplete/src/index.ts

@@ -14,4 +14,4 @@ export {useAutocomplete} from './useAutocomplete';
 
 export type {AriaSearchAutocompleteOptions, SearchAutocompleteAria} from './useSearchAutocomplete';
 export type {AriaSearchAutocompleteProps} from '@react-types/autocomplete';
-export type {AriaAutocompleteProps, AriaAutocompleteOptions, AutocompleteAria, CollectionOptions} from './useAutocomplete';
+export type {AriaAutocompleteProps, AriaAutocompleteOptions, AutocompleteAria, CollectionOptions, InputProps} from './useAutocomplete';

packages/@react-aria/autocomplete/src/useAutocomplete.ts

@@ -10,7 +10,7 @@
  * governing permissions and limitations under the License.
  */
 
-import {AriaLabelingProps, BaseEvent, DOMProps, FocusableElement, Node, RefObject} from '@react-types/shared';
+import {AriaLabelingProps, BaseEvent, DOMProps, FocusableElement, FocusEvents, KeyboardEvents, Node, RefObject, ValueBase} from '@react-types/shared';
 import {AriaTextFieldProps} from '@react-aria/textfield';
 import {AutocompleteProps, AutocompleteState} from '@react-stately/autocomplete';
 import {CLEAR_FOCUS_EVENT, FOCUS_EVENT, getActiveElement, getOwnerDocument, isAndroid, isCtrlKeyPressed, isIOS, mergeProps, mergeRefs, useEffectEvent, useEvent, useLabels, useObjectRef, useSlotId} from '@react-aria/utils';
@@ -28,6 +28,12 @@ export interface CollectionOptions extends DOMProps, AriaLabelingProps {
   disallowTypeAhead: boolean
 }
 
+export interface InputProps<T = FocusableElement> extends DOMProps,
+  FocusEvents<T>,
+  KeyboardEvents,
+  Pick<ValueBase<string>, 'onChange' | 'value'>,
+  Pick<AriaTextFieldProps, 'enterKeyHint' | 'aria-controls' | 'aria-autocomplete' | 'aria-activedescendant' | 'spellCheck' | 'autoCorrect' | 'autoComplete'> {}
+
 export interface AriaAutocompleteProps<T> extends AutocompleteProps {
   /**
    * An optional filter function used to determine if a option should be included in the autocomplete list.
@@ -57,8 +63,8 @@ export interface AriaAutocompleteOptions<T> extends Omit<AriaAutocompleteProps<T
 }
 
 export interface AutocompleteAria<T> {
-  /** Props for the autocomplete textfield/searchfield element. These should be passed to the textfield/searchfield aria hooks respectively. */
-  textFieldProps: AriaTextFieldProps<FocusableElement>,
+  /** Props for the autocomplete input element. These should be passed to the input's aria hooks (e.g. useTextField/useSearchField/etc) respectively. */
+  inputProps: InputProps,
   /** Props for the collection, to be passed to collection's respective aria hook (e.g. useMenu). */
   collectionProps: CollectionOptions,
   /** Ref to attach to the wrapped collection. */
@@ -368,7 +374,7 @@ export function useAutocomplete<T>(props: AriaAutocompleteOptions<T>, state: Aut
 
   // Only apply the autocomplete specific behaviors if the collection component wrapped by it is actually
   // being filtered/allows filtering by the Autocomplete.
-  let textFieldProps = {
+  let inputProps = {
     value: state.inputValue,
     onChange
   } as AriaTextFieldProps<FocusableElement>;
@@ -381,8 +387,8 @@ export function useAutocomplete<T>(props: AriaAutocompleteOptions<T>, state: Aut
   };
 
   if (collectionId) {
-    textFieldProps = {
-      ...textFieldProps,
+    inputProps = {
+      ...inputProps,
       ...(shouldUseVirtualFocus && virtualFocusProps),
       enterKeyHint: 'go',
       'aria-controls': collectionId,
@@ -397,7 +403,7 @@ export function useAutocomplete<T>(props: AriaAutocompleteOptions<T>, state: Aut
   }
 
   return {
-    textFieldProps,
+    inputProps,
     collectionProps: mergeProps(collectionProps, {
       shouldUseVirtualFocus,
       disallowTypeAhead: true

packages/@react-spectrum/datepicker/src/DatePicker.tsx

@@ -49,9 +49,7 @@ export const DatePicker = React.forwardRef(function DatePicker<T extends DateVal
     isQuiet,
     isDisabled,
     placeholderValue,
-    maxVisibleMonths = 1,
-    pageBehavior,
-    firstDayOfWeek
+    maxVisibleMonths = 1
   } = props;
   let {hoverProps, isHovered} = useHover({isDisabled});
   let targetRef = useRef<HTMLDivElement | null>(null);
@@ -171,8 +169,6 @@ export const DatePicker = React.forwardRef(function DatePicker<T extends DateVal
                 <Calendar
                   {...calendarProps}
                   visibleMonths={visibleMonths}
-                  pageBehavior={pageBehavior}
-                  firstDayOfWeek={firstDayOfWeek}
                   createCalendar={props.createCalendar}
                   UNSAFE_className={classNames(datepickerStyles, 'react-spectrum-Datepicker-calendar', {'is-invalid': isInvalid})} />
                 {showTimeField &&

packages/@react-spectrum/datepicker/src/DateRangePicker.tsx

@@ -50,9 +50,7 @@ export const DateRangePicker = React.forwardRef(function DateRangePicker<T exten
     isDisabled,
     autoFocus,
     placeholderValue,
-    maxVisibleMonths = 1,
-    pageBehavior,
-    firstDayOfWeek
+    maxVisibleMonths = 1
   } = props;
   let {hoverProps, isHovered} = useHover({isDisabled});
   let targetRef = useRef<HTMLDivElement | null>(null);
@@ -189,8 +187,6 @@ export const DateRangePicker = React.forwardRef(function DateRangePicker<T exten
                 <RangeCalendar
                   {...calendarProps}
                   visibleMonths={visibleMonths}
-                  pageBehavior={pageBehavior}
-                  firstDayOfWeek={firstDayOfWeek}
                   createCalendar={props.createCalendar}
                   UNSAFE_className={classNames(datepickerStyles, 'react-spectrum-Datepicker-calendar', {'is-invalid': validationState === 'invalid'})} />
                 {showTimeField &&

packages/@react-spectrum/s2/chromatic/SelectBoxGroup.stories.tsx

@@ -31,17 +31,18 @@ type Story = StoryObj<typeof SelectBoxGroup>;
 export const VerticalOrientation: Story = {
   render: () => (
     <div style={{width: 600}}>
-      <SelectBoxGroup 
+      <SelectBoxGroup
+        aria-label="Vertical"
         orientation="vertical" 
         onSelectionChange={action('onSelectionChange')}>
-        <SelectBox value="text-only">
+        <SelectBox id="text-only" textValue="V: Text Only">
           <Text slot="label">V: Text Only</Text>
         </SelectBox>
-        <SelectBox value="illustration-text">
+        <SelectBox id="illustration-text" textValue="V: Illustration + Text">
           <Server />
           <Text slot="label">V: Illustration + Text</Text>
         </SelectBox>
-        <SelectBox value="illustration-desc">
+        <SelectBox id="illustration-desc" textValue="Send">
           <PaperAirplane />
         </SelectBox>
       </SelectBoxGroup>
@@ -52,21 +53,22 @@ export const VerticalOrientation: Story = {
 export const HorizontalOrientation: Story = {
   render: () => (
     <div style={{width: 800}}>
-      <SelectBoxGroup 
+      <SelectBoxGroup
+        aria-label="Horizontal"
         orientation="horizontal" 
         onSelectionChange={action('onSelectionChange')}>
-        <SelectBox value="text-only">
+        <SelectBox id="text-only" textValue="Title Only">
           <Text slot="label">Title Only</Text>
         </SelectBox>
-        <SelectBox value="illustration-text">
+        <SelectBox id="illustration-text" textValue="Illustration + Title">
           <Server />
           <Text slot="label">Illustration + Title</Text>
         </SelectBox>
-        <SelectBox value="text-desc">
+        <SelectBox id="text-desc" textValue="Title + Description">
           <Text slot="label">Title + Description</Text>
           <Text slot="description">Additional description</Text>
         </SelectBox>
-        <SelectBox value="h-all">
+        <SelectBox id="h-all" textValue="Illustration + Title + Description">
           <Server />
           <Text slot="label">Illustration + Title + Description</Text>
           <Text slot="description">Full horizontal layout with all elements</Text>

packages/@react-spectrum/s2/src/DatePicker.tsx

@@ -139,10 +139,7 @@ export const DatePicker = /*#__PURE__*/ (forwardRef as forwardRefType)(function
     styles,
     placeholderValue,
     maxVisibleMonths = 1,
-    firstDayOfWeek,
     createCalendar,
-    pageBehavior,
-    isDateUnavailable,
     ...dateFieldProps
   } = props;
   let formContext = useContext(FormContext);
@@ -206,10 +203,7 @@ export const DatePicker = /*#__PURE__*/ (forwardRef as forwardRefType)(function
             <CalendarPopover>
               <Calendar
                 visibleMonths={maxVisibleMonths}
-                createCalendar={createCalendar}
-                firstDayOfWeek={firstDayOfWeek}
-                isDateUnavailable={isDateUnavailable}
-                pageBehavior={pageBehavior} />
+                createCalendar={createCalendar} />
               {showTimeField && (
                 <div className={style({display: 'flex', gap: 16, contain: 'inline-size'})}>
                   <TimeField

packages/@react-spectrum/s2/src/DateRangePicker.tsx

@@ -72,10 +72,7 @@ export const DateRangePicker = /*#__PURE__*/ (forwardRef as forwardRefType)(func
     styles,
     placeholderValue,
     maxVisibleMonths = 1,
-    firstDayOfWeek,
     createCalendar,
-    pageBehavior,
-    isDateUnavailable,
     ...dateFieldProps
   } = props;
   let formContext = useContext(FormContext);
@@ -145,10 +142,7 @@ export const DateRangePicker = /*#__PURE__*/ (forwardRef as forwardRefType)(func
             <CalendarPopover>
               <RangeCalendar
                 visibleMonths={maxVisibleMonths}
-                createCalendar={createCalendar}
-                firstDayOfWeek={firstDayOfWeek}
-                isDateUnavailable={isDateUnavailable}
-                pageBehavior={pageBehavior} />
+                createCalendar={createCalendar} />
               {showTimeField && (
                 <div className={style({display: 'flex', gap: 16, contain: 'inline-size', marginTop: 24})}>
                   <TimeField

packages/@react-spectrum/s2/src/SelectBoxGroup.tsx

@@ -9,6 +9,7 @@
  * governing permissions and limitations under the License.
  */
 
+import {baseColor, focusRing, style} from '../style' with {type: 'macro'};
 import {box, iconStyles} from './Checkbox';
 import Checkmark from '../ui-icons/Checkmark';
 import {
@@ -19,20 +20,24 @@ import {
   ListBoxProps,
   Provider
 } from 'react-aria-components';
-import {DOMRef, DOMRefValue, GlobalDOMAttributes, Orientation} from '@react-types/shared';
-import {focusRing, style} from '../style' with {type: 'macro'};
+import {DOMRef, DOMRefValue, GlobalDOMAttributes, Key, Orientation} from '@react-types/shared';
 import {getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};
 import {IllustrationContext} from '../src/Icon';
 import {pressScale} from './pressScale';
 import React, {createContext, forwardRef, ReactNode, useContext, useMemo, useRef} from 'react';
 import {TextContext} from './Content';
 import {useSpectrumContextProps} from './useSpectrumContextProps';
 
-export interface SelectBoxGroupProps<T> extends StyleProps, Omit<ListBoxProps<T>, keyof GlobalDOMAttributes | 'layout' | 'dragAndDropHooks' | 'dependencies' | 'renderEmptyState' | 'children' | 'onAction' | 'shouldFocusOnHover' | 'selectionBehavior' | 'style' | 'className'> {
+export interface SelectBoxGroupProps<T> extends StyleProps, Omit<ListBoxProps<T>, keyof GlobalDOMAttributes | 'layout' | 'dragAndDropHooks' | 'dependencies' | 'renderEmptyState' | 'children' | 'onAction' | 'shouldFocusOnHover' | 'selectionBehavior' | 'shouldSelectOnPressUp' | 'shouldFocusWrap' | 'style' | 'className'> {
   /**
    * The SelectBox elements contained within the SelectBoxGroup.
    */
   children: ReactNode,
+  /**
+   * The layout direction of the content in each SelectBox.
+   * @default 'vertical'
+   */
+  orientation?: Orientation,
   /**
    * The selection mode for the SelectBoxGroup.
    * @default 'single'
@@ -45,12 +50,14 @@ export interface SelectBoxGroupProps<T> extends StyleProps, Omit<ListBoxProps<T>
 }
 
 export interface SelectBoxProps extends StyleProps {
+  /** The unique id of the SelectBox. */
+  id?: Key,
+  /** A string representation of the SelectBox's contents, used for features like typeahead. */
+  textValue?: string,
+  /** An accessibility label for this item. */
+  'aria-label'?: string,
   /**
-   * The value of the SelectBox.
-   */
-  value: string,
-  /**
-   * The label for the element.
+   * The contents of the SelectBox.
    */
   children: ReactNode,
   /**
@@ -76,6 +83,7 @@ const selectBoxStyles = style({
   gridAutoRows: '1fr',
   position: 'relative',
   font: 'ui',
+  cursor: 'default',
   boxSizing: 'border-box',
   overflow: 'hidden',
   width: {
@@ -176,7 +184,7 @@ const selectBoxStyles = style({
   },
   backgroundColor: {
     default: 'layer-2',
-    isDisabled: 'layer-1'
+    isDisabled: 'disabled'
   },
   color: {
     isDisabled: 'disabled'
@@ -196,12 +204,12 @@ const illustrationContainer = style({
   alignSelf: 'center',
   justifySelf: 'center',
   minSize: 48,
-  color: {
-    isDisabled: 'disabled',
-    isHovered: 'gray-900'
-  },
-  opacity: {
-    isDisabled: 0.4
+  '--iconPrimary': {
+    type: 'color',
+    value: {
+      default: baseColor('neutral'),
+      isDisabled: 'disabled'
+    }
   }
 });
 
@@ -222,8 +230,7 @@ const descriptionText = style({
     }
   },
   color: {
-    default: 'neutral',
-    isHovered: 'gray-900',
+    default: baseColor('neutral'),
     isDisabled: 'disabled'
   }
 });
@@ -254,20 +261,29 @@ const labelText = style({
     }
   },
   color: {
-    default: 'neutral',
-    isHovered: 'gray-900',
+    default: baseColor('neutral'),
     isDisabled: 'disabled'
   }
 });
 
 const gridStyles = style<{orientation?: Orientation}>({
   display: 'grid',
   gridAutoRows: '1fr',
-  gap: 16,
+  gap: 24,
+  justifyContent: 'center',
+  '--size': {
+    type: 'width',
+    value: {
+      orientation: {
+        horizontal: 368,
+        vertical: 170
+      }
+    }
+  },
   gridTemplateColumns: {
     orientation: {
-      horizontal: 'repeat(auto-fit, minmax(368px, 1fr))',
-      vertical: 'repeat(auto-fit, minmax(170px, 1fr))'
+      horizontal: 'repeat(auto-fit, var(--size))',
+      vertical: 'repeat(auto-fit, var(--size))'
     }
   }
 }, getAllowedOverrides());
@@ -276,7 +292,7 @@ const gridStyles = style<{orientation?: Orientation}>({
  * SelectBox is a single selectable item in a SelectBoxGroup.
  */
 export function SelectBox(props: SelectBoxProps): ReactNode {
-  let {children, value, isDisabled: individualDisabled = false, UNSAFE_style, UNSAFE_className, styles, ...otherProps} = props;
+  let {children, isDisabled: individualDisabled = false, UNSAFE_style, UNSAFE_className, styles, ...otherProps} = props;
 
   let {
     orientation = 'vertical',
@@ -288,8 +304,6 @@ export function SelectBox(props: SelectBoxProps): ReactNode {
 
   return (
     <ListBoxItem
-      id={value}
-      textValue={value}
       isDisabled={isDisabled}
       ref={ref}
       className={renderProps => (UNSAFE_className || '') + selectBoxStyles({
@@ -364,6 +378,7 @@ export const SelectBoxGroup = /*#__PURE__*/ forwardRef(function SelectBoxGroup<T
     isDisabled = false,
     UNSAFE_className,
     UNSAFE_style,
+    styles,
     ...otherProps
   } = props;
 
@@ -382,7 +397,7 @@ export const SelectBoxGroup = /*#__PURE__*/ forwardRef(function SelectBoxGroup<T
     <ListBox
       selectionMode={selectionMode}
       layout="grid"
-      className={(UNSAFE_className || '') + gridStyles({orientation})}
+      className={(UNSAFE_className || '') + gridStyles({orientation}, styles)}
       style={UNSAFE_style}
       {...otherProps}>
       <SelectBoxContext.Provider value={selectBoxContextValue}>

packages/@react-spectrum/s2/src/Tabs.tsx

@@ -213,7 +213,7 @@ const tablist = style({
 
 const tablistWrapper = style({
   position: 'relative',
-  minWidth: 'min',
+  minWidth: 0,
   flexShrink: 0,
   flexGrow: 0
 }, getAllowedOverrides());