feat: support selectionAlignment in Calendar #8752

yihuiliao · 2025-08-21T00:06:55Z

✅ Pull Request Checklist:

Included link to corresponding React Spectrum GitHub Issue.
Added/updated unit tests and storybook for this change (for new code or code which already has tests).
Filled out test instructions.
Updated documentation (if it already exists for this component).
Looked at the Accessibility Practices for this feature - Aria Practices

📝 Test Instructions:

Test out both RAC and V3 Calendar/RangeCalender when there are multiple months displayed. If you change the value of selectionAlignment, you will need to remount it in the story since it works only on the initial render. Even if you click the resetFocusDate (in RAC stories), it won't update according to the selectionAlignment. We can debate what is the desired behavior there

For v3, you'll need to set the visibleMonths to 2 or 3 (preferably 3) and then set the selection alignment using the controls

🧢 Your Project:

rspbot · 2025-08-21T00:13:45Z

Build successful! 🎉

rspbot · 2025-08-27T23:22:05Z

Build successful! 🎉

snowystinger

forgot to finish my review, i'll catch up again later, here were two pending comments. feel free to ignore if they've already been addressed

packages/react-aria-components/stories/Calendar.stories.tsx

snowystinger · 2025-08-21T02:20:29Z

packages/@react-types/calendar/src/index.d.ts

@@ -66,7 +66,9 @@ export interface CalendarPropsBase {
  /**
   * The day that starts the week.
   */
-  firstDayOfWeek?: 'sun' | 'mon' | 'tue' | 'wed' | 'thu' | 'fri' | 'sat'
+  firstDayOfWeek?: 'sun' | 'mon' | 'tue' | 'wed' | 'thu' | 'fri' | 'sat',
+  /** Determines how to align the initial selection relative to the visible date range. */


should changing the selectionAlignment work? or does it only apply on initial render?
maybe something like

Determines the visible months on initial render based on the current selection or current date if there is no selection.

yeah actually i think it should only apply on initial render. i'll update the description

rspbot · 2025-08-28T17:43:08Z

Build successful! 🎉

snowystinger · 2025-08-29T05:28:40Z

packages/@react-stately/calendar/src/useRangeCalendarState.ts

@@ -33,15 +33,26 @@ export interface RangeCalendarStateOptions<T extends DateValue = DateValue> exte
   * The amount of days that will be displayed at once. This affects how pagination works.
   * @default {months: 1}
   */
-  visibleDuration?: DateDuration
+  visibleDuration?: DateDuration,
+  /** Determines the alignment of the visible months on initial render based on the current selection or current date if there is no selection. */


Realised this probably also affects focusedValue so it's probably not just the initial render, it's probably anytime that that prop changes as well?
Could you add something to control that value? Maybe a second story based on https://react-spectrum.adobe.com/react-aria/Calendar.html#controlling-the-focused-date ? Just so we know what the interaction is

I may be wrong and it does nothing, but I'd like to make sure

good point, i updated one of the stories to have a focused date. it doesn't seem like selectionAlignment does anything when you reset the focusedValue, but maybe people would expect it to? opinions?

I think maybe not? Otherwise if some is controlling the focus, it could cause too much "movement" just moving one month to the next.

The reset is where I get tripped up because then I think it should...

rspbot · 2025-08-29T18:04:19Z

Build successful! 🎉

packages/@react-stately/calendar/src/useRangeCalendarState.ts

packages/react-aria-components/stories/Calendar.stories.tsx

rspbot · 2025-08-29T21:00:19Z

Build successful! 🎉

rspbot · 2025-08-29T21:00:21Z

## API Changes

react-aria-components

/react-aria-components:Calendar

 Calendar <T extends DateValue> {
   aria-describedby?: string
   aria-details?: string
   aria-label?: string
   aria-labelledby?: string
   autoFocus?: boolean = false
   children?: ChildrenOrFunction<CalendarRenderProps>
   className?: ClassNameOrFunction<CalendarRenderProps>
   createCalendar?: (CalendarIdentifier) => Calendar
   defaultFocusedValue?: DateValue | null
   defaultValue?: DateValue | null
   firstDayOfWeek?: 'sun' | 'mon' | 'tue' | 'wed' | 'thu' | 'fri' | 'sat'
   focusedValue?: DateValue | null
   id?: string
   isDateUnavailable?: (DateValue) => boolean
   isDisabled?: boolean = false
   isInvalid?: boolean
   isReadOnly?: boolean = false
   maxValue?: DateValue | null
   minValue?: DateValue | null
   onChange?: (MappedDateValue<DateValue>) => void
   onFocusChange?: (CalendarDate) => void
   pageBehavior?: PageBehavior = visible
+  selectionAlignment?: 'start' | 'center' | 'end' = 'center'
   slot?: string | null
   style?: StyleOrFunction<CalendarRenderProps>
   value?: DateValue | null
   visibleDuration?: DateDuration = {months: 1}

/react-aria-components:RangeCalendar

 RangeCalendar <T extends DateValue> {
   allowsNonContiguousRanges?: boolean
   aria-describedby?: string
   aria-details?: string
   aria-label?: string
   aria-labelledby?: string
   autoFocus?: boolean = false
   children?: ChildrenOrFunction<RangeCalendarRenderProps>
   className?: ClassNameOrFunction<RangeCalendarRenderProps>
   createCalendar?: (CalendarIdentifier) => Calendar
   defaultFocusedValue?: DateValue | null
   defaultValue?: RangeValue<DateValue> | null
   firstDayOfWeek?: 'sun' | 'mon' | 'tue' | 'wed' | 'thu' | 'fri' | 'sat'
   focusedValue?: DateValue | null
   id?: string
   isDateUnavailable?: (DateValue) => boolean
   isDisabled?: boolean = false
   isInvalid?: boolean
   isReadOnly?: boolean = false
   maxValue?: DateValue | null
   minValue?: DateValue | null
   onChange?: (RangeValue<MappedDateValue<DateValue>>) => void
   onFocusChange?: (CalendarDate) => void
   pageBehavior?: PageBehavior = visible
+  selectionAlignment?: 'start' | 'center' | 'end' = 'center'
   slot?: string | null
   style?: StyleOrFunction<RangeCalendarRenderProps>
   value?: RangeValue<DateValue> | null
   visibleDuration?: DateDuration = {months: 1}

/react-aria-components:Select

-Select <M extends SelectionMode = 'single', T extends {} = {
+Select <T extends {} = {
   
 }> {
   aria-describedby?: string
   aria-details?: string
   aria-label?: string
   aria-labelledby?: string
   autoComplete?: string
   autoFocus?: boolean
   children?: ChildrenOrFunction<SelectRenderProps>
   className?: ClassNameOrFunction<SelectRenderProps>
   defaultOpen?: boolean
-  defaultValue?: ValueType<SelectionMode>
+  defaultSelectedKey?: Key
   disabledKeys?: Iterable<Key>
   excludeFromTabOrder?: boolean
   form?: string
   id?: string
   isDisabled?: boolean
   isInvalid?: boolean
   isOpen?: boolean
   isRequired?: boolean
   name?: string
   onBlur?: (FocusEvent<Target>) => void
-  onChange?: (T) => void
   onFocus?: (FocusEvent<Target>) => void
   onFocusChange?: (boolean) => void
   onKeyDown?: (KeyboardEvent) => void
   onKeyUp?: (KeyboardEvent) => void
   onOpenChange?: (boolean) => void
+  onSelectionChange?: (Key | null) => void
   placeholder?: string = 'Select an item' (localized)
-  selectionMode?: SelectionMode = 'single'
+  selectedKey?: Key | null
   slot?: string | null
   style?: StyleOrFunction<SelectRenderProps>
-  validate?: (ValidationType<SelectionMode>) => ValidationError | boolean | null | undefined
+  validate?: (Key) => ValidationError | boolean | null | undefined
   validationBehavior?: 'native' | 'aria' = 'native'
-  value?: ValueType<SelectionMode>
 }

/react-aria-components:CalendarProps

 CalendarProps <T extends DateValue> {
   aria-describedby?: string
   aria-details?: string
   aria-label?: string
   aria-labelledby?: string
   autoFocus?: boolean = false
   children?: ChildrenOrFunction<CalendarRenderProps>
   className?: ClassNameOrFunction<CalendarRenderProps>
   createCalendar?: (CalendarIdentifier) => Calendar
   defaultFocusedValue?: DateValue | null
   defaultValue?: DateValue | null
   firstDayOfWeek?: 'sun' | 'mon' | 'tue' | 'wed' | 'thu' | 'fri' | 'sat'
   focusedValue?: DateValue | null
   id?: string
   isDateUnavailable?: (DateValue) => boolean
   isDisabled?: boolean = false
   isInvalid?: boolean
   isReadOnly?: boolean = false
   maxValue?: DateValue | null
   minValue?: DateValue | null
   onChange?: (MappedDateValue<DateValue>) => void
   onFocusChange?: (CalendarDate) => void
   pageBehavior?: PageBehavior = visible
+  selectionAlignment?: 'start' | 'center' | 'end' = 'center'
   slot?: string | null
   style?: StyleOrFunction<CalendarRenderProps>
   value?: DateValue | null
   visibleDuration?: DateDuration = {months: 1}

/react-aria-components:RangeCalendarProps

 RangeCalendarProps <T extends DateValue> {
   allowsNonContiguousRanges?: boolean
   aria-describedby?: string
   aria-details?: string
   aria-label?: string
   aria-labelledby?: string
   autoFocus?: boolean = false
   children?: ChildrenOrFunction<RangeCalendarRenderProps>
   className?: ClassNameOrFunction<RangeCalendarRenderProps>
   createCalendar?: (CalendarIdentifier) => Calendar
   defaultFocusedValue?: DateValue | null
   defaultValue?: RangeValue<DateValue> | null
   firstDayOfWeek?: 'sun' | 'mon' | 'tue' | 'wed' | 'thu' | 'fri' | 'sat'
   focusedValue?: DateValue | null
   id?: string
   isDateUnavailable?: (DateValue) => boolean
   isDisabled?: boolean = false
   isInvalid?: boolean
   isReadOnly?: boolean = false
   maxValue?: DateValue | null
   minValue?: DateValue | null
   onChange?: (RangeValue<MappedDateValue<DateValue>>) => void
   onFocusChange?: (CalendarDate) => void
   pageBehavior?: PageBehavior = visible
+  selectionAlignment?: 'start' | 'center' | 'end' = 'center'
   slot?: string | null
   style?: StyleOrFunction<RangeCalendarRenderProps>
   value?: RangeValue<DateValue> | null
   visibleDuration?: DateDuration = {months: 1}

/react-aria-components:SelectProps

-SelectProps <M extends SelectionMode = 'single', T extends {} = {
+SelectProps <T extends {} = {
   
 }> {
   aria-describedby?: string
   aria-details?: string
   aria-label?: string
   aria-labelledby?: string
   autoComplete?: string
   autoFocus?: boolean
   children?: ChildrenOrFunction<SelectRenderProps>
   className?: ClassNameOrFunction<SelectRenderProps>
   defaultOpen?: boolean
-  defaultValue?: ValueType<SelectionMode>
+  defaultSelectedKey?: Key
   disabledKeys?: Iterable<Key>
   excludeFromTabOrder?: boolean
   form?: string
   id?: string
   isDisabled?: boolean
   isInvalid?: boolean
   isOpen?: boolean
   isRequired?: boolean
   name?: string
   onBlur?: (FocusEvent<Target>) => void
-  onChange?: (T) => void
   onFocus?: (FocusEvent<Target>) => void
   onFocusChange?: (boolean) => void
   onKeyDown?: (KeyboardEvent) => void
   onKeyUp?: (KeyboardEvent) => void
   onOpenChange?: (boolean) => void
+  onSelectionChange?: (Key | null) => void
   placeholder?: string = 'Select an item' (localized)
-  selectionMode?: SelectionMode = 'single'
+  selectedKey?: Key | null
   slot?: string | null
   style?: StyleOrFunction<SelectRenderProps>
-  validate?: (ValidationType<SelectionMode>) => ValidationError | boolean | null | undefined
+  validate?: (Key) => ValidationError | boolean | null | undefined
   validationBehavior?: 'native' | 'aria' = 'native'
-  value?: ValueType<SelectionMode>
 }

/react-aria-components:SelectValueRenderProps

 SelectValueRenderProps <T> {
   isPlaceholder: boolean
-  selectedItems: Array<T | null>
-  selectedText: string
-  state: SelectState<T, 'single' | 'multiple'>
+  selectedItem: T | null
+  selectedText: string | null
 }

/react-aria-components:SelectState

-SelectState <M extends SelectionMode = 'single', T> {
+SelectState <T> {
   close: () => void
   collection: Collection<Node<T>>
   commitValidation: () => void
-  defaultValue: ValueType<SelectionMode>
+  defaultSelectedKey: Key | null
   disabledKeys: Set<Key>
   displayValidation: ValidationResult
   focusStrategy: FocusStrategy | null
   isFocused: boolean
   isOpen: boolean
   open: (FocusStrategy | null) => void
   realtimeValidation: ValidationResult
   resetValidation: () => void
-  selectedItems: Array<Node<T>>
+  selectedItem: Node<T> | null
+  selectedKey: Key | null
   selectionManager: SelectionManager
   setFocused: (boolean) => void
   setOpen: (boolean) => void
-  setValue: (Key | Array<Key> | null) => void
+  setSelectedKey: (Key | null) => void
   toggle: (FocusStrategy | null) => void
   updateValidation: (ValidationResult) => void
-  value: ValueType<SelectionMode>
 }

@react-aria/calendar

/@react-aria/calendar:AriaCalendarProps

 AriaCalendarProps <T extends DateValue> {
   aria-describedby?: string
   aria-details?: string
   aria-label?: string
   aria-labelledby?: string
   autoFocus?: boolean = false
   defaultFocusedValue?: DateValue | null
   defaultValue?: DateValue | null
   errorMessage?: ReactNode
   firstDayOfWeek?: 'sun' | 'mon' | 'tue' | 'wed' | 'thu' | 'fri' | 'sat'
   focusedValue?: DateValue | null
   id?: string
   isDateUnavailable?: (DateValue) => boolean
   isDisabled?: boolean = false
   isInvalid?: boolean
   isReadOnly?: boolean = false
   maxValue?: DateValue | null
   minValue?: DateValue | null
   onChange?: (MappedDateValue<DateValue>) => void
   onFocusChange?: (CalendarDate) => void
   pageBehavior?: PageBehavior = visible
+  selectionAlignment?: 'start' | 'center' | 'end' = 'center'
   value?: DateValue | null
 }

/@react-aria/calendar:AriaRangeCalendarProps

 AriaRangeCalendarProps <T extends DateValue> {
   allowsNonContiguousRanges?: boolean
   aria-describedby?: string
   aria-details?: string
   aria-label?: string
   aria-labelledby?: string
   autoFocus?: boolean = false
   defaultFocusedValue?: DateValue | null
   defaultValue?: RangeValue<DateValue> | null
   errorMessage?: ReactNode
   firstDayOfWeek?: 'sun' | 'mon' | 'tue' | 'wed' | 'thu' | 'fri' | 'sat'
   focusedValue?: DateValue | null
   id?: string
   isDateUnavailable?: (DateValue) => boolean
   isDisabled?: boolean = false
   isInvalid?: boolean
   isReadOnly?: boolean = false
   maxValue?: DateValue | null
   minValue?: DateValue | null
   onChange?: (RangeValue<MappedDateValue<DateValue>>) => void
   onFocusChange?: (CalendarDate) => void
   pageBehavior?: PageBehavior = visible
+  selectionAlignment?: 'start' | 'center' | 'end' = 'center'
   value?: RangeValue<DateValue> | null
 }

/@react-aria/calendar:CalendarProps

 CalendarProps <T extends DateValue> {
   autoFocus?: boolean = false
   defaultFocusedValue?: DateValue | null
   defaultValue?: DateValue | null
   errorMessage?: ReactNode
   firstDayOfWeek?: 'sun' | 'mon' | 'tue' | 'wed' | 'thu' | 'fri' | 'sat'
   focusedValue?: DateValue | null
   isDateUnavailable?: (DateValue) => boolean
   isDisabled?: boolean = false
   isInvalid?: boolean
   isReadOnly?: boolean = false
   maxValue?: DateValue | null
   minValue?: DateValue | null
   onChange?: (MappedDateValue<DateValue>) => void
   onFocusChange?: (CalendarDate) => void
   pageBehavior?: PageBehavior = visible
+  selectionAlignment?: 'start' | 'center' | 'end' = 'center'
   value?: DateValue | null
 }

/@react-aria/calendar:RangeCalendarProps

 RangeCalendarProps <T extends DateValue> {
   allowsNonContiguousRanges?: boolean
   autoFocus?: boolean = false
   defaultFocusedValue?: DateValue | null
   defaultValue?: RangeValue<DateValue> | null
   errorMessage?: ReactNode
   firstDayOfWeek?: 'sun' | 'mon' | 'tue' | 'wed' | 'thu' | 'fri' | 'sat'
   focusedValue?: DateValue | null
   isDateUnavailable?: (DateValue) => boolean
   isDisabled?: boolean = false
   isInvalid?: boolean
   isReadOnly?: boolean = false
   maxValue?: DateValue | null
   minValue?: DateValue | null
   onChange?: (RangeValue<MappedDateValue<DateValue>>) => void
   onFocusChange?: (CalendarDate) => void
   pageBehavior?: PageBehavior = visible
+  selectionAlignment?: 'start' | 'center' | 'end' = 'center'
   value?: RangeValue<DateValue> | null
 }

@react-aria/collections

/@react-aria/collections:BaseCollection

 BaseCollection <T> {
   addDescendants: (CollectionNode<T>, BaseCollection<T>) => void
   addNode: (CollectionNode<T>) => void
   at: () => Node<T>
   clone: () => this
   commit: (Key | null, Key | null, any) => void
   filter: (FilterFn<T>) => this
   getChildren: (Key) => Iterable<Node<T>>
   getFirstKey: () => Key | null
   getItem: (Key) => Node<T> | null
   getKeyAfter: (Key) => Key | null
   getKeyBefore: (Key) => Key | null
   getKeys: () => IterableIterator<Key>
   getLastKey: () => Key | null
+  isComplete: any
   removeNode: (Key) => void
   size: number
   undefined: () => IterableIterator<Node<T>>
 }

@react-aria/select

/@react-aria/select:useSelect

-useSelect <M extends SelectionMode = 'single', T> {
+useSelect <T> {
-  props: AriaSelectOptions<T, M>
-  state: SelectState<T, M>
+  props: AriaSelectOptions<T>
+  state: SelectState<T>
   ref: RefObject<HTMLElement | null>
   returnVal: undefined
 }

/@react-aria/select:useHiddenSelect

-useHiddenSelect <M extends SelectionMode = 'single', T> {
+useHiddenSelect <T> {
   props: AriaHiddenSelectOptions
-  state: SelectState<T, M>
+  state: SelectState<T>
   triggerRef: RefObject<FocusableElement | null>
   returnVal: undefined
 }

/@react-aria/select:HiddenSelect

-HiddenSelect <M extends SelectionMode = 'single', T> {
+HiddenSelect <T> {
   autoComplete?: string
   form?: string
   isDisabled?: boolean
   label?: ReactNode
   name?: string
-  state: SelectState<T, SelectionMode>
+  state: SelectState<T>
   triggerRef: RefObject<FocusableElement | null>
 }

/@react-aria/select:AriaSelectOptions

-AriaSelectOptions <M extends SelectionMode = 'single', T> {
+AriaSelectOptions <T> {
   aria-describedby?: string
   aria-details?: string
   aria-label?: string
   aria-labelledby?: string
   autoComplete?: string
   autoFocus?: boolean
   defaultOpen?: boolean
-  defaultValue?: ValueType<SelectionMode>
+  defaultSelectedKey?: Key
   description?: ReactNode
   disabledKeys?: Iterable<Key>
   errorMessage?: ReactNode | (ValidationResult) => ReactNode
   excludeFromTabOrder?: boolean
   form?: string
   id?: string
   isDisabled?: boolean
   isInvalid?: boolean
   isOpen?: boolean
   isRequired?: boolean
   items?: Iterable<T>
   keyboardDelegate?: KeyboardDelegate
   label?: ReactNode
   name?: string
   onBlur?: (FocusEvent<Target>) => void
-  onChange?: (T) => void
   onFocus?: (FocusEvent<Target>) => void
   onFocusChange?: (boolean) => void
   onKeyDown?: (KeyboardEvent) => void
   onKeyUp?: (KeyboardEvent) => void
   onOpenChange?: (boolean) => void
+  onSelectionChange?: (Key | null) => void
   placeholder?: string
-  selectionMode?: SelectionMode = 'single'
-  validate?: (ValidationType<SelectionMode>) => ValidationError | boolean | null | undefined
+  selectedKey?: Key | null
+  validate?: (Key) => ValidationError | boolean | null | undefined
   validationBehavior?: 'aria' | 'native' = 'aria'
-  value?: ValueType<SelectionMode>
 }

/@react-aria/select:SelectAria

-SelectAria <M extends SelectionMode = 'single', T> {
+SelectAria <T> {
   descriptionProps: DOMAttributes
   errorMessageProps: DOMAttributes
-  hiddenSelectProps: HiddenSelectProps<T, SelectionMode>
+  hiddenSelectProps: HiddenSelectProps<T>
   isInvalid: boolean
   labelProps: DOMAttributes
   menuProps: AriaListBoxOptions<T>
   triggerProps: AriaButtonProps
   validationErrors: Array<string>
   valueProps: DOMAttributes
 }

/@react-aria/select:HiddenSelectProps

-HiddenSelectProps <M extends SelectionMode = 'single', T> {
+HiddenSelectProps <T> {
   autoComplete?: string
   form?: string
   isDisabled?: boolean
   label?: ReactNode
   name?: string
-  state: SelectState<T, SelectionMode>
+  state: SelectState<T>
   triggerRef: RefObject<FocusableElement | null>
 }

/@react-aria/select:AriaSelectProps

-AriaSelectProps <M extends SelectionMode = 'single', T> {
+AriaSelectProps <T> {
   aria-describedby?: string
   aria-details?: string
   aria-label?: string
   aria-labelledby?: string
   autoComplete?: string
   autoFocus?: boolean
   children: CollectionChildren<T>
   defaultOpen?: boolean
-  defaultValue?: ValueType<SelectionMode>
+  defaultSelectedKey?: Key
   description?: ReactNode
   disabledKeys?: Iterable<Key>
   errorMessage?: ReactNode | (ValidationResult) => ReactNode
   excludeFromTabOrder?: boolean
   form?: string
   id?: string
   isDisabled?: boolean
   isInvalid?: boolean
   isOpen?: boolean
   isRequired?: boolean
   items?: Iterable<T>
   label?: ReactNode
   name?: string
   onBlur?: (FocusEvent<Target>) => void
-  onChange?: (T) => void
   onFocus?: (FocusEvent<Target>) => void
   onFocusChange?: (boolean) => void
   onKeyDown?: (KeyboardEvent) => void
   onKeyUp?: (KeyboardEvent) => void
   onOpenChange?: (boolean) => void
+  onSelectionChange?: (Key | null) => void
   placeholder?: string
-  selectionMode?: SelectionMode = 'single'
-  validate?: (ValidationType<SelectionMode>) => ValidationError | boolean | null | undefined
+  selectedKey?: Key | null
+  validate?: (Key) => ValidationError | boolean | null | undefined
   validationBehavior?: 'aria' | 'native' = 'aria'
-  value?: ValueType<SelectionMode>
 }

@react-spectrum/calendar

/@react-spectrum/calendar:Calendar

 Calendar <T extends DateValue> {
   UNSAFE_className?: string
   UNSAFE_style?: CSSProperties
   alignSelf?: Responsive<'auto' | 'normal' | 'start' | 'end' | 'center' | 'flex-start' | 'flex-end' | 'self-start' | 'self-end' | 'stretch'>
   aria-describedby?: string
   aria-details?: string
   aria-label?: string
   aria-labelledby?: string
   autoFocus?: boolean = false
   bottom?: Responsive<DimensionValue>
   createCalendar?: (CalendarIdentifier) => Calendar
   defaultFocusedValue?: DateValue | null
   defaultValue?: DateValue | null
   end?: Responsive<DimensionValue>
   errorMessage?: ReactNode
   firstDayOfWeek?: 'sun' | 'mon' | 'tue' | 'wed' | 'thu' | 'fri' | 'sat'
   flex?: Responsive<string | number | boolean>
   flexBasis?: Responsive<number | string>
   flexGrow?: Responsive<number>
   flexShrink?: Responsive<number>
   focusedValue?: DateValue | null
   gridArea?: Responsive<string>
   gridColumn?: Responsive<string>
   gridColumnEnd?: Responsive<string>
   gridColumnStart?: Responsive<string>
   gridRow?: Responsive<string>
   gridRowEnd?: Responsive<string>
   gridRowStart?: Responsive<string>
   height?: Responsive<DimensionValue>
   id?: string
   isDateUnavailable?: (DateValue) => boolean
   isDisabled?: boolean = false
   isHidden?: Responsive<boolean>
   isInvalid?: boolean
   isReadOnly?: boolean = false
   justifySelf?: Responsive<'auto' | 'normal' | 'start' | 'end' | 'flex-start' | 'flex-end' | 'self-start' | 'self-end' | 'center' | 'left' | 'right' | 'stretch'>
   left?: Responsive<DimensionValue>
   margin?: Responsive<DimensionValue>
   marginBottom?: Responsive<DimensionValue>
   marginEnd?: Responsive<DimensionValue>
   marginStart?: Responsive<DimensionValue>
   marginTop?: Responsive<DimensionValue>
   marginX?: Responsive<DimensionValue>
   marginY?: Responsive<DimensionValue>
   maxHeight?: Responsive<DimensionValue>
   maxValue?: DateValue | null
   maxWidth?: Responsive<DimensionValue>
   minHeight?: Responsive<DimensionValue>
   minValue?: DateValue | null
   minWidth?: Responsive<DimensionValue>
   onChange?: (MappedDateValue<DateValue>) => void
   onFocusChange?: (CalendarDate) => void
   order?: Responsive<number>
   pageBehavior?: PageBehavior = visible
   position?: Responsive<'static' | 'relative' | 'absolute' | 'fixed' | 'sticky'>
   right?: Responsive<DimensionValue>
+  selectionAlignment?: 'start' | 'center' | 'end' = 'center'
   start?: Responsive<DimensionValue>
   top?: Responsive<DimensionValue>
   value?: DateValue | null
   visibleMonths?: number = 1
   zIndex?: Responsive<number>
 }

/@react-spectrum/calendar:RangeCalendar

 RangeCalendar <T extends DateValue> {
   UNSAFE_className?: string
   UNSAFE_style?: CSSProperties
   alignSelf?: Responsive<'auto' | 'normal' | 'start' | 'end' | 'center' | 'flex-start' | 'flex-end' | 'self-start' | 'self-end' | 'stretch'>
   allowsNonContiguousRanges?: boolean
   aria-describedby?: string
   aria-details?: string
   aria-label?: string
   aria-labelledby?: string
   autoFocus?: boolean = false
   bottom?: Responsive<DimensionValue>
   createCalendar?: (CalendarIdentifier) => Calendar
   defaultFocusedValue?: DateValue | null
   defaultValue?: RangeValue<DateValue> | null
   end?: Responsive<DimensionValue>
   errorMessage?: ReactNode
   firstDayOfWeek?: 'sun' | 'mon' | 'tue' | 'wed' | 'thu' | 'fri' | 'sat'
   flex?: Responsive<string | number | boolean>
   flexBasis?: Responsive<number | string>
   flexGrow?: Responsive<number>
   flexShrink?: Responsive<number>
   focusedValue?: DateValue | null
   gridArea?: Responsive<string>
   gridColumn?: Responsive<string>
   gridColumnEnd?: Responsive<string>
   gridColumnStart?: Responsive<string>
   gridRow?: Responsive<string>
   gridRowEnd?: Responsive<string>
   gridRowStart?: Responsive<string>
   height?: Responsive<DimensionValue>
   id?: string
   isDateUnavailable?: (DateValue) => boolean
   isDisabled?: boolean = false
   isHidden?: Responsive<boolean>
   isInvalid?: boolean
   isReadOnly?: boolean = false
   justifySelf?: Responsive<'auto' | 'normal' | 'start' | 'end' | 'flex-start' | 'flex-end' | 'self-start' | 'self-end' | 'center' | 'left' | 'right' | 'stretch'>
   left?: Responsive<DimensionValue>
   margin?: Responsive<DimensionValue>
   marginBottom?: Responsive<DimensionValue>
   marginEnd?: Responsive<DimensionValue>
   marginStart?: Responsive<DimensionValue>
   marginTop?: Responsive<DimensionValue>
   marginX?: Responsive<DimensionValue>
   marginY?: Responsive<DimensionValue>
   maxHeight?: Responsive<DimensionValue>
   maxValue?: DateValue | null
   maxWidth?: Responsive<DimensionValue>
   minHeight?: Responsive<DimensionValue>
   minValue?: DateValue | null
   minWidth?: Responsive<DimensionValue>
   onChange?: (RangeValue<MappedDateValue<DateValue>>) => void
   onFocusChange?: (CalendarDate) => void
   order?: Responsive<number>
   pageBehavior?: PageBehavior = visible
   position?: Responsive<'static' | 'relative' | 'absolute' | 'fixed' | 'sticky'>
   right?: Responsive<DimensionValue>
+  selectionAlignment?: 'start' | 'center' | 'end' = 'center'
   start?: Responsive<DimensionValue>
   top?: Responsive<DimensionValue>
   value?: RangeValue<DateValue> | null
   visibleMonths?: number = 1
   zIndex?: Responsive<number>
 }

/@react-spectrum/calendar:SpectrumCalendarProps

 SpectrumCalendarProps <T extends DateValue> {
   UNSAFE_className?: string
   UNSAFE_style?: CSSProperties
   alignSelf?: Responsive<'auto' | 'normal' | 'start' | 'end' | 'center' | 'flex-start' | 'flex-end' | 'self-start' | 'self-end' | 'stretch'>
   aria-describedby?: string
   aria-details?: string
   aria-label?: string
   aria-labelledby?: string
   autoFocus?: boolean = false
   bottom?: Responsive<DimensionValue>
   createCalendar?: (CalendarIdentifier) => Calendar
   defaultFocusedValue?: DateValue | null
   defaultValue?: DateValue | null
   end?: Responsive<DimensionValue>
   errorMessage?: ReactNode
   firstDayOfWeek?: 'sun' | 'mon' | 'tue' | 'wed' | 'thu' | 'fri' | 'sat'
   flex?: Responsive<string | number | boolean>
   flexBasis?: Responsive<number | string>
   flexGrow?: Responsive<number>
   flexShrink?: Responsive<number>
   focusedValue?: DateValue | null
   gridArea?: Responsive<string>
   gridColumn?: Responsive<string>
   gridColumnEnd?: Responsive<string>
   gridColumnStart?: Responsive<string>
   gridRow?: Responsive<string>
   gridRowEnd?: Responsive<string>
   gridRowStart?: Responsive<string>
   height?: Responsive<DimensionValue>
   id?: string
   isDateUnavailable?: (DateValue) => boolean
   isDisabled?: boolean = false
   isHidden?: Responsive<boolean>
   isInvalid?: boolean
   isReadOnly?: boolean = false
   justifySelf?: Responsive<'auto' | 'normal' | 'start' | 'end' | 'flex-start' | 'flex-end' | 'self-start' | 'self-end' | 'center' | 'left' | 'right' | 'stretch'>
   left?: Responsive<DimensionValue>
   margin?: Responsive<DimensionValue>
   marginBottom?: Responsive<DimensionValue>
   marginEnd?: Responsive<DimensionValue>
   marginStart?: Responsive<DimensionValue>
   marginTop?: Responsive<DimensionValue>
   marginX?: Responsive<DimensionValue>
   marginY?: Responsive<DimensionValue>
   maxHeight?: Responsive<DimensionValue>
   maxValue?: DateValue | null
   maxWidth?: Responsive<DimensionValue>
   minHeight?: Responsive<DimensionValue>
   minValue?: DateValue | null
   minWidth?: Responsive<DimensionValue>
   onChange?: (MappedDateValue<DateValue>) => void
   onFocusChange?: (CalendarDate) => void
   order?: Responsive<number>
   pageBehavior?: PageBehavior = visible
   position?: Responsive<'static' | 'relative' | 'absolute' | 'fixed' | 'sticky'>
   right?: Responsive<DimensionValue>
+  selectionAlignment?: 'start' | 'center' | 'end' = 'center'
   start?: Responsive<DimensionValue>
   top?: Responsive<DimensionValue>
   value?: DateValue | null
   visibleMonths?: number = 1
   zIndex?: Responsive<number>
 }

/@react-spectrum/calendar:SpectrumRangeCalendarProps

 SpectrumRangeCalendarProps <T extends DateValue> {
   UNSAFE_className?: string
   UNSAFE_style?: CSSProperties
   alignSelf?: Responsive<'auto' | 'normal' | 'start' | 'end' | 'center' | 'flex-start' | 'flex-end' | 'self-start' | 'self-end' | 'stretch'>
   allowsNonContiguousRanges?: boolean
   aria-describedby?: string
   aria-details?: string
   aria-label?: string
   aria-labelledby?: string
   autoFocus?: boolean = false
   bottom?: Responsive<DimensionValue>
   createCalendar?: (CalendarIdentifier) => Calendar
   defaultFocusedValue?: DateValue | null
   defaultValue?: RangeValue<DateValue> | null
   end?: Responsive<DimensionValue>
   errorMessage?: ReactNode
   firstDayOfWeek?: 'sun' | 'mon' | 'tue' | 'wed' | 'thu' | 'fri' | 'sat'
   flex?: Responsive<string | number | boolean>
   flexBasis?: Responsive<number | string>
   flexGrow?: Responsive<number>
   flexShrink?: Responsive<number>
   focusedValue?: DateValue | null
   gridArea?: Responsive<string>
   gridColumn?: Responsive<string>
   gridColumnEnd?: Responsive<string>
   gridColumnStart?: Responsive<string>
   gridRow?: Responsive<string>
   gridRowEnd?: Responsive<string>
   gridRowStart?: Responsive<string>
   height?: Responsive<DimensionValue>
   id?: string
   isDateUnavailable?: (DateValue) => boolean
   isDisabled?: boolean = false
   isHidden?: Responsive<boolean>
   isInvalid?: boolean
   isReadOnly?: boolean = false
   justifySelf?: Responsive<'auto' | 'normal' | 'start' | 'end' | 'flex-start' | 'flex-end' | 'self-start' | 'self-end' | 'center' | 'left' | 'right' | 'stretch'>
   left?: Responsive<DimensionValue>
   margin?: Responsive<DimensionValue>
   marginBottom?: Responsive<DimensionValue>
   marginEnd?: Responsive<DimensionValue>
   marginStart?: Responsive<DimensionValue>
   marginTop?: Responsive<DimensionValue>
   marginX?: Responsive<DimensionValue>
   marginY?: Responsive<DimensionValue>
   maxHeight?: Responsive<DimensionValue>
   maxValue?: DateValue | null
   maxWidth?: Responsive<DimensionValue>
   minHeight?: Responsive<DimensionValue>
   minValue?: DateValue | null
   minWidth?: Responsive<DimensionValue>
   onChange?: (RangeValue<MappedDateValue<DateValue>>) => void
   onFocusChange?: (CalendarDate) => void
   order?: Responsive<number>
   pageBehavior?: PageBehavior = visible
   position?: Responsive<'static' | 'relative' | 'absolute' | 'fixed' | 'sticky'>
   right?: Responsive<DimensionValue>
+  selectionAlignment?: 'start' | 'center' | 'end' = 'center'
   start?: Responsive<DimensionValue>
   top?: Responsive<DimensionValue>
   value?: RangeValue<DateValue> | null
   visibleMonths?: number = 1
   zIndex?: Responsive<number>
 }

@react-spectrum/picker

/@react-spectrum/picker:Picker

 Picker <T extends {}> {
   UNSAFE_className?: string
   UNSAFE_style?: CSSProperties
   align?: Alignment = 'start'
   alignSelf?: Responsive<'auto' | 'normal' | 'start' | 'end' | 'center' | 'flex-start' | 'flex-end' | 'self-start' | 'self-end' | 'stretch'>
   aria-describedby?: string
   aria-details?: string
   aria-label?: string
   aria-labelledby?: string
   autoComplete?: string
   autoFocus?: boolean
   bottom?: Responsive<DimensionValue>
   children: CollectionChildren<{}>
   contextualHelp?: ReactNode
   defaultOpen?: boolean
   defaultSelectedKey?: Key
   description?: ReactNode
   direction?: 'bottom' | 'top' = 'bottom'
   disabledKeys?: Iterable<Key>
   end?: Responsive<DimensionValue>
   errorMessage?: ReactNode | (ValidationResult) => ReactNode
   excludeFromTabOrder?: boolean
   flex?: Responsive<string | number | boolean>
   flexBasis?: Responsive<number | string>
   flexGrow?: Responsive<number>
   flexShrink?: Responsive<number>
   form?: string
   gridArea?: Responsive<string>
   gridColumn?: Responsive<string>
   gridColumnEnd?: Responsive<string>
   gridColumnStart?: Responsive<string>
   gridRow?: Responsive<string>
   gridRowEnd?: Responsive<string>
   gridRowStart?: Responsive<string>
   height?: Responsive<DimensionValue>
   id?: string
   isDisabled?: boolean
   isHidden?: Responsive<boolean>
   isInvalid?: boolean
   isLoading?: boolean
   isOpen?: boolean
   isQuiet?: boolean
   isRequired?: boolean
   items?: Iterable<{}>
   justifySelf?: Responsive<'auto' | 'normal' | 'start' | 'end' | 'flex-start' | 'flex-end' | 'self-start' | 'self-end' | 'center' | 'left' | 'right' | 'stretch'>
   label?: ReactNode
   labelAlign?: Alignment = 'start'
   labelPosition?: LabelPosition = 'top'
   left?: Responsive<DimensionValue>
   margin?: Responsive<DimensionValue>
   marginBottom?: Responsive<DimensionValue>
   marginEnd?: Responsive<DimensionValue>
   marginStart?: Responsive<DimensionValue>
   marginTop?: Responsive<DimensionValue>
   marginX?: Responsive<DimensionValue>
   marginY?: Responsive<DimensionValue>
   maxHeight?: Responsive<DimensionValue>
   maxWidth?: Responsive<DimensionValue>
   menuWidth?: DimensionValue
   minHeight?: Responsive<DimensionValue>
   minWidth?: Responsive<DimensionValue>
   name?: string
   necessityIndicator?: NecessityIndicator = 'icon'
   onBlur?: (FocusEvent<Target>) => void
   onFocus?: (FocusEvent<Target>) => void
   onFocusChange?: (boolean) => void
   onKeyDown?: (KeyboardEvent) => void
   onKeyUp?: (KeyboardEvent) => void
   onLoadMore?: () => any
   onOpenChange?: (boolean) => void
   onSelectionChange?: (Key | null) => void
   order?: Responsive<number>
   placeholder?: string
   position?: Responsive<'static' | 'relative' | 'absolute' | 'fixed' | 'sticky'>
   right?: Responsive<DimensionValue>
   selectedKey?: Key | null
   shouldFlip?: boolean = true
   start?: Responsive<DimensionValue>
   top?: Responsive<DimensionValue>
-  validate?: (ValidationType<SelectionMode>) => ValidationError | boolean | null | undefined
+  validate?: (Key) => ValidationError | boolean | null | undefined
   validationBehavior?: 'aria' | 'native' = 'aria'
   width?: Responsive<DimensionValue>
   zIndex?: Responsive<number>
 }

/@react-spectrum/picker:SpectrumPickerProps

 SpectrumPickerProps <T> {
   UNSAFE_className?: string
   UNSAFE_style?: CSSProperties
   align?: Alignment = 'start'
   alignSelf?: Responsive<'auto' | 'normal' | 'start' | 'end' | 'center' | 'flex-start' | 'flex-end' | 'self-start' | 'self-end' | 'stretch'>
   aria-describedby?: string
   aria-details?: string
   aria-label?: string
   aria-labelledby?: string
   autoComplete?: string
   autoFocus?: boolean
   bottom?: Responsive<DimensionValue>
   children: CollectionChildren<T>
   contextualHelp?: ReactNode
   defaultOpen?: boolean
   defaultSelectedKey?: Key
   description?: ReactNode
   direction?: 'bottom' | 'top' = 'bottom'
   disabledKeys?: Iterable<Key>
   end?: Responsive<DimensionValue>
   errorMessage?: ReactNode | (ValidationResult) => ReactNode
   excludeFromTabOrder?: boolean
   flex?: Responsive<string | number | boolean>
   flexBasis?: Responsive<number | string>
   flexGrow?: Responsive<number>
   flexShrink?: Responsive<number>
   form?: string
   gridArea?: Responsive<string>
   gridColumn?: Responsive<string>
   gridColumnEnd?: Responsive<string>
   gridColumnStart?: Responsive<string>
   gridRow?: Responsive<string>
   gridRowEnd?: Responsive<string>
   gridRowStart?: Responsive<string>
   height?: Responsive<DimensionValue>
   id?: string
   isDisabled?: boolean
   isHidden?: Responsive<boolean>
   isInvalid?: boolean
   isLoading?: boolean
   isOpen?: boolean
   isQuiet?: boolean
   isRequired?: boolean
   items?: Iterable<T>
   justifySelf?: Responsive<'auto' | 'normal' | 'start' | 'end' | 'flex-start' | 'flex-end' | 'self-start' | 'self-end' | 'center' | 'left' | 'right' | 'stretch'>
   label?: ReactNode
   labelAlign?: Alignment = 'start'
   labelPosition?: LabelPosition = 'top'
   left?: Responsive<DimensionValue>
   margin?: Responsive<DimensionValue>
   marginBottom?: Responsive<DimensionValue>
   marginEnd?: Responsive<DimensionValue>
   marginStart?: Responsive<DimensionValue>
   marginTop?: Responsive<DimensionValue>
   marginX?: Responsive<DimensionValue>
   marginY?: Responsive<DimensionValue>
   maxHeight?: Responsive<DimensionValue>
   maxWidth?: Responsive<DimensionValue>
   menuWidth?: DimensionValue
   minHeight?: Responsive<DimensionValue>
   minWidth?: Responsive<DimensionValue>
   name?: string
   necessityIndicator?: NecessityIndicator = 'icon'
   onBlur?: (FocusEvent<Target>) => void
   onFocus?: (FocusEvent<Target>) => void
   onFocusChange?: (boolean) => void
   onKeyDown?: (KeyboardEvent) => void
   onKeyUp?: (KeyboardEvent) => void
   onLoadMore?: () => any
   onOpenChange?: (boolean) => void
   onSelectionChange?: (Key | null) => void
   order?: Responsive<number>
   placeholder?: string
   position?: Responsive<'static' | 'relative' | 'absolute' | 'fixed' | 'sticky'>
   right?: Responsive<DimensionValue>
   selectedKey?: Key | null
   shouldFlip?: boolean = true
   start?: Responsive<DimensionValue>
   top?: Responsive<DimensionValue>
-  validate?: (ValidationType<SelectionMode>) => ValidationError | boolean | null | undefined
+  validate?: (Key) => ValidationError | boolean | null | undefined
   validationBehavior?: 'aria' | 'native' = 'aria'
   width?: Responsive<DimensionValue>
   zIndex?: Responsive<number>
 }

@react-spectrum/s2

/@react-spectrum/s2:Calendar

 Calendar <T extends DateValue> {
   UNSAFE_className?: UnsafeClassName
   UNSAFE_style?: CSSProperties
   aria-describedby?: string
   aria-details?: string
   aria-label?: string
   aria-labelledby?: string
   autoFocus?: boolean = false
   children?: ChildrenOrFunction<CalendarRenderProps>
   createCalendar?: (CalendarIdentifier) => Calendar
   defaultFocusedValue?: DateValue | null
   defaultValue?: DateValue | null
   errorMessage?: ReactNode
   firstDayOfWeek?: 'sun' | 'mon' | 'tue' | 'wed' | 'thu' | 'fri' | 'sat'
   focusedValue?: DateValue | null
   id?: string
   isDateUnavailable?: (DateValue) => boolean
   isDisabled?: boolean = false
   isInvalid?: boolean
   isReadOnly?: boolean = false
   maxValue?: DateValue | null
   minValue?: DateValue | null
   onChange?: (MappedDateValue<DateValue>) => void
   onFocusChange?: (CalendarDate) => void
   pageBehavior?: PageBehavior = visible
+  selectionAlignment?: 'start' | 'center' | 'end' = 'center'
   slot?: string | null
   styles?: StylesProp
   value?: DateValue | null
   visibleMonths?: number = 1

/@react-spectrum/s2:Picker

-Picker <M extends SelectionMode = 'single', T extends {}> {
+Picker <T extends {}> {
   UNSAFE_className?: UnsafeClassName
   UNSAFE_style?: CSSProperties
   align?: 'start' | 'end' = 'start'
   aria-describedby?: string
   aria-details?: string
   aria-label?: string
   aria-labelledby?: string
   autoComplete?: string
   autoFocus?: boolean
   children: ReactNode | ({}) => ReactNode
   contextualHelp?: ReactNode
   defaultOpen?: boolean
-  defaultValue?: ValueType<SelectionMode>
+  defaultSelectedKey?: Key
   dependencies?: ReadonlyArray<any>
   description?: ReactNode
   direction?: 'bottom' | 'top' = 'bottom'
   disabledKeys?: Iterable<Key>
   errorMessage?: ReactNode | (ValidationResult) => ReactNode
   excludeFromTabOrder?: boolean
   form?: string
   id?: string
   isDisabled?: boolean
   isInvalid?: boolean
   isOpen?: boolean
   isRequired?: boolean
   items?: Iterable<T>
   label?: ReactNode
   labelAlign?: Alignment = 'start'
   labelPosition?: LabelPosition = 'top'
   loadingState?: LoadingState
   menuWidth?: number
   name?: string
   necessityIndicator?: NecessityIndicator = 'icon'
   onBlur?: (FocusEvent<Target>) => void
-  onChange?: (T) => void
   onFocus?: (FocusEvent<Target>) => void
   onFocusChange?: (boolean) => void
   onKeyDown?: (KeyboardEvent) => void
   onKeyUp?: (KeyboardEvent) => void
   onLoadMore?: () => any
   onOpenChange?: (boolean) => void
+  onSelectionChange?: (Key | null) => void
   placeholder?: string = 'Select an item' (localized)
-  selectionMode?: SelectionMode = 'single'
+  selectedKey?: Key | null
   shouldFlip?: boolean = true
   size?: 'S' | 'M' | 'L' | 'XL' = 'M'
   slot?: string | null
   styles?: StylesProp
-  validate?: (ValidationType<SelectionMode>) => ValidationError | boolean | null | undefined
+  validate?: (Key) => ValidationError | boolean | null | undefined
   validationBehavior?: 'native' | 'aria' = 'native'
-  value?: ValueType<SelectionMode>
 }

/@react-spectrum/s2:RangeCalendar

 RangeCalendar <T extends DateValue> {
   UNSAFE_className?: UnsafeClassName
   UNSAFE_style?: CSSProperties
   allowsNonContiguousRanges?: boolean
   aria-describedby?: string
   aria-details?: string
   aria-label?: string
   aria-labelledby?: string
   autoFocus?: boolean = false
   children?: ChildrenOrFunction<RangeCalendarRenderProps>
   createCalendar?: (CalendarIdentifier) => Calendar
   defaultFocusedValue?: DateValue | null
   defaultValue?: RangeValue<DateValue> | null
   errorMessage?: ReactNode
   firstDayOfWeek?: 'sun' | 'mon' | 'tue' | 'wed' | 'thu' | 'fri' | 'sat'
   focusedValue?: DateValue | null
   id?: string
   isDateUnavailable?: (DateValue) => boolean
   isDisabled?: boolean = false
   isInvalid?: boolean
   isReadOnly?: boolean = false
   maxValue?: DateValue | null
   minValue?: DateValue | null
   onChange?: (RangeValue<MappedDateValue<DateValue>>) => void
   onFocusChange?: (CalendarDate) => void
   pageBehavior?: PageBehavior = visible
+  selectionAlignment?: 'start' | 'center' | 'end' = 'center'
   slot?: string | null
   styles?: StylesProp
   value?: RangeValue<DateValue> | null
   visibleMonths?: number = 1

/@react-spectrum/s2:CalendarProps

 CalendarProps <T extends DateValue> {
   UNSAFE_className?: UnsafeClassName
   UNSAFE_style?: CSSProperties
   aria-describedby?: string
   aria-details?: string
   aria-label?: string
   aria-labelledby?: string
   autoFocus?: boolean = false
   children?: ChildrenOrFunction<CalendarRenderProps>
   createCalendar?: (CalendarIdentifier) => Calendar
   defaultFocusedValue?: DateValue | null
   defaultValue?: DateValue | null
   errorMessage?: ReactNode
   firstDayOfWeek?: 'sun' | 'mon' | 'tue' | 'wed' | 'thu' | 'fri' | 'sat'
   focusedValue?: DateValue | null
   id?: string
   isDateUnavailable?: (DateValue) => boolean
   isDisabled?: boolean = false
   isInvalid?: boolean
   isReadOnly?: boolean = false
   maxValue?: DateValue | null
   minValue?: DateValue | null
   onChange?: (MappedDateValue<DateValue>) => void
   onFocusChange?: (CalendarDate) => void
   pageBehavior?: PageBehavior = visible
+  selectionAlignment?: 'start' | 'center' | 'end' = 'center'
   slot?: string | null
   styles?: StylesProp
   value?: DateValue | null
   visibleMonths?: number = 1

/@react-spectrum/s2:PickerProps

-PickerProps <M extends SelectionMode = 'single', T extends {}> {
+PickerProps <T extends {}> {
   UNSAFE_className?: UnsafeClassName
   UNSAFE_style?: CSSProperties
   align?: 'start' | 'end' = 'start'
   aria-describedby?: string
   aria-details?: string
   aria-label?: string
   aria-labelledby?: string
   autoComplete?: string
   autoFocus?: boolean
   children: ReactNode | ({}) => ReactNode
   contextualHelp?: ReactNode
   defaultOpen?: boolean
-  defaultValue?: ValueType<SelectionMode>
+  defaultSelectedKey?: Key
   dependencies?: ReadonlyArray<any>
   description?: ReactNode
   direction?: 'bottom' | 'top' = 'bottom'
   disabledKeys?: Iterable<Key>
   errorMessage?: ReactNode | (ValidationResult) => ReactNode
   excludeFromTabOrder?: boolean
   form?: string
   id?: string
   isDisabled?: boolean
   isInvalid?: boolean
   isOpen?: boolean
   isRequired?: boolean
   items?: Iterable<T>
   label?: ReactNode
   labelAlign?: Alignment = 'start'
   labelPosition?: LabelPosition = 'top'
   loadingState?: LoadingState
   menuWidth?: number
   name?: string
   necessityIndicator?: NecessityIndicator = 'icon'
   onBlur?: (FocusEvent<Target>) => void
-  onChange?: (T) => void
   onFocus?: (FocusEvent<Target>) => void
   onFocusChange?: (boolean) => void
   onKeyDown?: (KeyboardEvent) => void
   onKeyUp?: (KeyboardEvent) => void
   onLoadMore?: () => any
   onOpenChange?: (boolean) => void
+  onSelectionChange?: (Key | null) => void
   placeholder?: string = 'Select an item' (localized)
-  selectionMode?: SelectionMode = 'single'
+  selectedKey?: Key | null
   shouldFlip?: boolean = true
   size?: 'S' | 'M' | 'L' | 'XL' = 'M'
   slot?: string | null
   styles?: StylesProp
-  validate?: (ValidationType<SelectionMode>) => ValidationError | boolean | null | undefined
+  validate?: (Key) => ValidationError | boolean | null | undefined
   validationBehavior?: 'native' | 'aria' = 'native'
-  value?: ValueType<SelectionMode>
 }

/@react-spectrum/s2:RangeCalendarProps

 RangeCalendarProps <T extends DateValue> {
   UNSAFE_className?: UnsafeClassName
   UNSAFE_style?: CSSProperties
   allowsNonContiguousRanges?: boolean
   aria-describedby?: string
   aria-details?: string
   aria-label?: string
   aria-labelledby?: string
   autoFocus?: boolean = false
   children?: ChildrenOrFunction<RangeCalendarRenderProps>
   createCalendar?: (CalendarIdentifier) => Calendar
   defaultFocusedValue?: DateValue | null
   defaultValue?: RangeValue<DateValue> | null
   errorMessage?: ReactNode
   firstDayOfWeek?: 'sun' | 'mon' | 'tue' | 'wed' | 'thu' | 'fri' | 'sat'
   focusedValue?: DateValue | null
   id?: string
   isDateUnavailable?: (DateValue) => boolean
   isDisabled?: boolean = false
   isInvalid?: boolean
   isReadOnly?: boolean = false
   maxValue?: DateValue | null
   minValue?: DateValue | null
   onChange?: (RangeValue<MappedDateValue<DateValue>>) => void
   onFocusChange?: (CalendarDate) => void
   pageBehavior?: PageBehavior = visible
+  selectionAlignment?: 'start' | 'center' | 'end' = 'center'
   slot?: string | null
   styles?: StylesProp
   value?: RangeValue<DateValue> | null
   visibleMonths?: number = 1

@react-stately/calendar

/@react-stately/calendar:CalendarStateOptions

 CalendarStateOptions <T extends DateValue = DateValue> {
   autoFocus?: boolean = false
   createCalendar: (CalendarIdentifier) => Calendar
   defaultFocusedValue?: DateValue | null
   defaultValue?: DateValue | null
   errorMessage?: ReactNode
   firstDayOfWeek?: 'sun' | 'mon' | 'tue' | 'wed' | 'thu' | 'fri' | 'sat'
   focusedValue?: DateValue | null
   isDateUnavailable?: (DateValue) => boolean
   isDisabled?: boolean = false
   isInvalid?: boolean
   isReadOnly?: boolean = false
   locale: string
   maxValue?: DateValue | null
   minValue?: DateValue | null
   onChange?: (MappedDateValue<DateValue>) => void
   onFocusChange?: (CalendarDate) => void
   pageBehavior?: PageBehavior = visible
-  selectionAlignment?: 'start' | 'center' | 'end'
+  selectionAlignment?: 'start' | 'center' | 'end' = 'center'
   value?: DateValue | null
   visibleDuration?: DateDuration = {months: 1}
 }

/@react-stately/calendar:RangeCalendarStateOptions

 RangeCalendarStateOptions <T extends DateValue = DateValue> {
   allowsNonContiguousRanges?: boolean
   autoFocus?: boolean = false
   createCalendar: (CalendarIdentifier) => Calendar
   defaultFocusedValue?: DateValue | null
   defaultValue?: RangeValue<DateValue> | null
   errorMessage?: ReactNode
   firstDayOfWeek?: 'sun' | 'mon' | 'tue' | 'wed' | 'thu' | 'fri' | 'sat'
   focusedValue?: DateValue | null
   isDateUnavailable?: (DateValue) => boolean
   isDisabled?: boolean = false
   isInvalid?: boolean
   isReadOnly?: boolean = false
   locale: string
   maxValue?: DateValue | null
   minValue?: DateValue | null
   onChange?: (RangeValue<MappedDateValue<DateValue>>) => void
   onFocusChange?: (CalendarDate) => void
   pageBehavior?: PageBehavior = visible
+  selectionAlignment?: 'start' | 'center' | 'end' = 'center'
   value?: RangeValue<DateValue> | null
   visibleDuration?: DateDuration = {months: 1}
 }

@react-stately/select

/@react-stately/select:useSelectState

-useSelectState <M extends SelectionMode = 'single', T extends {}> {
+useSelectState <T extends {}> {
-  props: SelectStateOptions<T, M>
+  props: SelectStateOptions<T>
   returnVal: undefined
 }

/@react-stately/select:SelectProps

-SelectProps <M extends SelectionMode = 'single', T> {
+SelectProps <T> {
   autoFocus?: boolean
   children: CollectionChildren<T>
   defaultOpen?: boolean
-  defaultValue?: ValueType<SelectionMode>
+  defaultSelectedKey?: Key
   description?: ReactNode
   disabledKeys?: Iterable<Key>
   errorMessage?: ReactNode | (ValidationResult) => ReactNode
   isDisabled?: boolean
   isInvalid?: boolean
   isOpen?: boolean
   isRequired?: boolean
   items?: Iterable<T>
   label?: ReactNode
   onBlur?: (FocusEvent<Target>) => void
-  onChange?: (T) => void
   onFocus?: (FocusEvent<Target>) => void
   onFocusChange?: (boolean) => void
   onKeyDown?: (KeyboardEvent) => void
   onKeyUp?: (KeyboardEvent) => void
   onOpenChange?: (boolean) => void
+  onSelectionChange?: (Key | null) => void
   placeholder?: string
-  selectionMode?: SelectionMode = 'single'
-  validate?: (ValidationType<SelectionMode>) => ValidationError | boolean | null | undefined
+  selectedKey?: Key | null
+  validate?: (Key) => ValidationError | boolean | null | undefined
   validationBehavior?: 'aria' | 'native' = 'aria'
-  value?: ValueType<SelectionMode>
 }

/@react-stately/select:SelectState

-SelectState <M extends SelectionMode = 'single', T> {
+SelectState <T> {
   close: () => void
   collection: Collection<Node<T>>
   commitValidation: () => void
-  defaultValue: ValueType<SelectionMode>
+  defaultSelectedKey: Key | null
   disabledKeys: Set<Key>
   displayValidation: ValidationResult
   focusStrategy: FocusStrategy | null
   isFocused: boolean
   isOpen: boolean
   open: (FocusStrategy | null) => void
   realtimeValidation: ValidationResult
   resetValidation: () => void
-  selectedItems: Array<Node<T>>
+  selectedItem: Node<T> | null
+  selectedKey: Key | null
   selectionManager: SelectionManager
   setFocused: (boolean) => void
   setOpen: (boolean) => void
-  setValue: (Key | Array<Key> | null) => void
+  setSelectedKey: (Key | null) => void
   toggle: (FocusStrategy | null) => void
   updateValidation: (ValidationResult) => void
-  value: ValueType<SelectionMode>
 }

/@react-stately/select:SelectStateOptions

-SelectStateOptions <M extends SelectionMode = 'single', T> {
+SelectStateOptions <T> {
   autoFocus?: boolean
   collection?: Collection<Node<T>>
   defaultOpen?: boolean
-  defaultValue?: ValueType<SelectionMode>
+  defaultSelectedKey?: Key
   description?: ReactNode
   disabledKeys?: Iterable<Key>
   errorMessage?: ReactNode | (ValidationResult) => ReactNode
   isDisabled?: boolean
   isInvalid?: boolean
   isOpen?: boolean
   isRequired?: boolean
   items?: Iterable<T>
   label?: ReactNode
   onBlur?: (FocusEvent<Target>) => void
-  onChange?: (T) => void
   onFocus?: (FocusEvent<Target>) => void
   onFocusChange?: (boolean) => void
   onKeyDown?: (KeyboardEvent) => void
   onKeyUp?: (KeyboardEvent) => void
   onOpenChange?: (boolean) => void
+  onSelectionChange?: (Key | null) => void
   placeholder?: string
-  selectionMode?: SelectionMode = 'single'
-  validate?: (ValidationType<SelectionMode>) => ValidationError | boolean | null | undefined
+  selectedKey?: Key | null
+  validate?: (Key) => ValidationError | boolean | null | undefined
   validationBehavior?: 'aria' | 'native' = 'aria'
-  value?: ValueType<SelectionMode>
 }

feat: support selectionAlignment in Calendar

387599a

yihuiliao changed the title ~~feat: support selectionAlignment in Calendar~~ wip: support selectionAlignment in Calendar Aug 21, 2025

yihuiliao added 2 commits August 27, 2025 10:52

Merge branch 'main' into selection-alignment

4b3aaec

add tests

89d7c0e

yihuiliao changed the title ~~wip: support selectionAlignment in Calendar~~ feat: support selectionAlignment in Calendar Aug 27, 2025

yihuiliao marked this pull request as ready for review August 27, 2025 23:21

yihuiliao added the ready for review label Aug 27, 2025

snowystinger reviewed Aug 28, 2025

View reviewed changes

yihuiliao added 2 commits August 28, 2025 10:32

update prop description

6951842

update styles in story

7b50e03

snowystinger reviewed Aug 29, 2025

View reviewed changes

update story

bdedc10

reidbarber requested changes Aug 29, 2025

View reviewed changes

packages/@react-stately/calendar/src/useRangeCalendarState.ts Outdated Show resolved Hide resolved

packages/react-aria-components/stories/Calendar.stories.tsx Outdated Show resolved Hide resolved

yihuiliao added 2 commits August 29, 2025 13:47

clean up story, add jsdoc default

4b12d50

fix lint

e292926

reidbarber approved these changes Sep 2, 2025

View reviewed changes

snowystinger approved these changes Sep 2, 2025

View reviewed changes

yihuiliao added this pull request to the merge queue Sep 3, 2025

Merged via the queue into main with commit 6618d38 Sep 3, 2025
32 checks passed

yihuiliao deleted the selection-alignment branch September 3, 2025 23:31

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

feat: support selectionAlignment in Calendar #8752

feat: support selectionAlignment in Calendar #8752

Uh oh!

yihuiliao commented Aug 21, 2025 •

edited

Loading

Uh oh!

rspbot commented Aug 21, 2025

Uh oh!

rspbot commented Aug 27, 2025

Uh oh!

snowystinger left a comment

Uh oh!

Uh oh!

snowystinger Aug 21, 2025

Uh oh!

yihuiliao Aug 28, 2025

Uh oh!

rspbot commented Aug 28, 2025

Uh oh!

snowystinger Aug 29, 2025 •

edited

Loading

Uh oh!

yihuiliao Aug 29, 2025 •

edited

Loading

Uh oh!

snowystinger Aug 30, 2025

Uh oh!

rspbot commented Aug 29, 2025

Uh oh!

Uh oh!

Uh oh!

rspbot commented Aug 29, 2025

Uh oh!

rspbot commented Aug 29, 2025

Uh oh!

Uh oh!

Uh oh!

feat: support selectionAlignment in Calendar #8752

feat: support selectionAlignment in Calendar #8752

Uh oh!

Conversation

yihuiliao commented Aug 21, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Pull Request Checklist:

📝 Test Instructions:

🧢 Your Project:

Uh oh!

rspbot commented Aug 21, 2025

Uh oh!

rspbot commented Aug 27, 2025

Uh oh!

snowystinger left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

snowystinger Aug 21, 2025

Choose a reason for hiding this comment

Uh oh!

yihuiliao Aug 28, 2025

Choose a reason for hiding this comment

Uh oh!

rspbot commented Aug 28, 2025

Uh oh!

snowystinger Aug 29, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

yihuiliao Aug 29, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

snowystinger Aug 30, 2025

Choose a reason for hiding this comment

Uh oh!

rspbot commented Aug 29, 2025

Uh oh!

Uh oh!

Uh oh!

rspbot commented Aug 29, 2025

Uh oh!

rspbot commented Aug 29, 2025

react-aria-components

/react-aria-components:Calendar

/react-aria-components:RangeCalendar

/react-aria-components:Select

/react-aria-components:CalendarProps

/react-aria-components:RangeCalendarProps

/react-aria-components:SelectProps

/react-aria-components:SelectValueRenderProps

/react-aria-components:SelectState

@react-aria/calendar

/@react-aria/calendar:AriaCalendarProps

/@react-aria/calendar:AriaRangeCalendarProps

/@react-aria/calendar:CalendarProps

/@react-aria/calendar:RangeCalendarProps

@react-aria/collections

/@react-aria/collections:BaseCollection

@react-aria/select

/@react-aria/select:useSelect

/@react-aria/select:useHiddenSelect

/@react-aria/select:HiddenSelect

/@react-aria/select:AriaSelectOptions

/@react-aria/select:SelectAria

/@react-aria/select:HiddenSelectProps

/@react-aria/select:AriaSelectProps

@react-spectrum/calendar

/@react-spectrum/calendar:Calendar

/@react-spectrum/calendar:RangeCalendar

/@react-spectrum/calendar:SpectrumCalendarProps

/@react-spectrum/calendar:SpectrumRangeCalendarProps

@react-spectrum/picker

/@react-spectrum/picker:Picker

/@react-spectrum/picker:SpectrumPickerProps

@react-spectrum/s2

/@react-spectrum/s2:Calendar

/@react-spectrum/s2:Picker

/@react-spectrum/s2:RangeCalendar

yihuiliao commented Aug 21, 2025 •

edited

Loading

snowystinger Aug 29, 2025 •

edited

Loading

yihuiliao Aug 29, 2025 •

edited

Loading