feat(Calendar): Add `firstDayOfWeek` prop #7363

reidbarber · 2024-11-13T20:45:36Z

Adds a firstDayOfWeek prop to specify which day the week should start on when rendered, using 'sun' | 'mon' | 'tue' | 'wed' | 'thu' | 'fri' | 'sat'.

✅ 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:

Check:

🧢 Your Project:

rspbot · 2024-11-13T22:05:07Z

Build successful! 🎉

rspbot · 2024-11-14T18:48:18Z

Build successful! 🎉

rspbot · 2024-11-14T22:10:35Z

Build successful! 🎉

packages/@react-aria/calendar/docs/useCalendar.mdx

rspbot · 2024-11-15T19:32:44Z

Build successful! 🎉

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

packages/@react-aria/calendar/docs/useCalendar.mdx

rspbot · 2024-11-16T19:25:31Z

Build successful! 🎉

rspbot · 2024-11-16T19:25:32Z

## 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?: ReactNode | ((CalendarRenderProps & {
     defaultChildren: ReactNode | undefined
 })) => ReactNode
   className?: string | ((CalendarRenderProps & {
     defaultClassName: string | undefined
 })) => string
   defaultFocusedValue?: DateValue
   defaultValue?: DateValue | null
+  firstDayOfWeek?: 'sun' | 'mon' | 'tue' | 'wed' | 'thu' | 'fri' | 'sat'
   focusedValue?: DateValue
   id?: string
   isDateUnavailable?: (DateValue) => boolean
   isDisabled?: boolean = false
   isReadOnly?: boolean = false
   maxValue?: DateValue | null
   minValue?: DateValue | null
   onChange?: (MappedDateValue<DateValue>) => void
   onFocusChange?: (CalendarDate) => void
   pageBehavior?: PageBehavior = visible
   slot?: string | null
   style?: CSSProperties | ((CalendarRenderProps & {
     defaultStyle: CSSProperties
 })) => CSSProperties | undefined
   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?: ReactNode | ((RangeCalendarRenderProps & {
     defaultChildren: ReactNode | undefined
 })) => ReactNode
   className?: string | ((RangeCalendarRenderProps & {
     defaultClassName: string | undefined
 })) => string
   defaultFocusedValue?: DateValue
   defaultValue?: RangeValue<DateValue> | null
+  firstDayOfWeek?: 'sun' | 'mon' | 'tue' | 'wed' | 'thu' | 'fri' | 'sat'
   focusedValue?: DateValue
   id?: string
   isDateUnavailable?: (DateValue) => boolean
   isDisabled?: boolean = false
   isReadOnly?: boolean = false
   maxValue?: DateValue | null
   minValue?: DateValue | null
   onChange?: (T) => void
   onFocusChange?: (CalendarDate) => void
   pageBehavior?: PageBehavior = visible
   slot?: string | null
   style?: CSSProperties | ((RangeCalendarRenderProps & {
     defaultStyle: CSSProperties
 })) => CSSProperties | undefined
   value?: RangeValue<DateValue> | null
   visibleDuration?: DateDuration = {months: 1}
 }

/react-aria-components:DatePicker

 DatePicker <T extends DateValue> {
   aria-describedby?: string
   aria-details?: string
   aria-label?: string
   aria-labelledby?: string
   autoFocus?: boolean
   children?: ReactNode | ((DatePickerRenderProps & {
     defaultChildren: ReactNode | undefined
 })) => ReactNode
   className?: string | ((DatePickerRenderProps & {
     defaultClassName: string | undefined
 })) => string
   defaultOpen?: boolean
   defaultValue?: DateValue | null
+  firstDayOfWeek?: 'sun' | 'mon' | 'tue' | 'wed' | 'thu' | 'fri' | 'sat'
   granularity?: Granularity
   hideTimeZone?: boolean = false
   hourCycle?: number | number
   id?: string
   isDisabled?: boolean
   isInvalid?: boolean
   isOpen?: boolean
   isReadOnly?: boolean
   isRequired?: boolean
   maxValue?: DateValue
   minValue?: DateValue
   name?: string
   onBlur?: (FocusEvent<Target>) => void
   onChange?: (MappedDateValue<DateValue>) => void
   onFocus?: (FocusEvent<Target>) => void
   onFocusChange?: (boolean) => void
   onKeyDown?: (KeyboardEvent) => void
   onKeyUp?: (KeyboardEvent) => void
   onOpenChange?: (boolean) => void
   pageBehavior?: PageBehavior = visible
   placeholderValue?: DateValue
   shouldCloseOnSelect?: boolean | () => boolean = true
   shouldForceLeadingZeros?: boolean
   slot?: string | null
   style?: CSSProperties | ((DatePickerRenderProps & {
     defaultStyle: CSSProperties
 })) => CSSProperties | undefined
   validate?: (MappedDateValue<DateValue>) => ValidationError | boolean | null | undefined
   validationBehavior?: 'native' | 'aria' = 'native'
   value?: DateValue | null
 }

/react-aria-components:DateRangePicker

 DateRangePicker <T extends DateValue> {
   allowsNonContiguousRanges?: boolean
   aria-describedby?: string
   aria-details?: string
   aria-label?: string
   aria-labelledby?: string
   autoFocus?: boolean
   children?: ReactNode | ((DateRangePickerRenderProps & {
     defaultChildren: ReactNode | undefined
 })) => ReactNode
   className?: string | ((DateRangePickerRenderProps & {
     defaultClassName: string | undefined
 })) => string
   defaultOpen?: boolean
   defaultValue?: RangeValue<DateValue> | null
   endName?: string
+  firstDayOfWeek?: 'sun' | 'mon' | 'tue' | 'wed' | 'thu' | 'fri' | 'sat'
   granularity?: Granularity
   hideTimeZone?: boolean = false
   hourCycle?: number | number
   id?: string
   isDisabled?: boolean
   isInvalid?: boolean
   isOpen?: boolean
   isReadOnly?: boolean
   isRequired?: boolean
   maxValue?: DateValue
   minValue?: DateValue
   onBlur?: (FocusEvent<Target>) => void
   onChange?: (RangeValue<MappedDateValue<DateValue>>) => void
   onFocus?: (FocusEvent<Target>) => void
   onFocusChange?: (boolean) => void
   onKeyDown?: (KeyboardEvent) => void
   onKeyUp?: (KeyboardEvent) => void
   onOpenChange?: (boolean) => void
   pageBehavior?: PageBehavior = visible
   placeholderValue?: DateValue
   shouldCloseOnSelect?: boolean | () => boolean = true
   shouldForceLeadingZeros?: boolean
   slot?: string | null
   startName?: string
   style?: CSSProperties | ((DateRangePickerRenderProps & {
     defaultStyle: CSSProperties
 })) => CSSProperties | undefined
   validate?: (RangeValue<MappedDateValue<DateValue>>) => ValidationError | boolean | null | undefined
   validationBehavior?: 'native' | 'aria' = 'native'
   value?: RangeValue<DateValue> | null
 }

/react-aria-components:CalendarProps

 CalendarProps <T extends DateValue> {
   aria-describedby?: string
   aria-details?: string
   aria-label?: string
   aria-labelledby?: string
   autoFocus?: boolean = false
   children?: ReactNode | ((CalendarRenderProps & {
     defaultChildren: ReactNode | undefined
 })) => ReactNode
   className?: string | ((CalendarRenderProps & {
     defaultClassName: string | undefined
 })) => string
   defaultFocusedValue?: DateValue
   defaultValue?: DateValue | null
+  firstDayOfWeek?: 'sun' | 'mon' | 'tue' | 'wed' | 'thu' | 'fri' | 'sat'
   focusedValue?: DateValue
   id?: string
   isDateUnavailable?: (DateValue) => boolean
   isDisabled?: boolean = false
   isReadOnly?: boolean = false
   maxValue?: DateValue | null
   minValue?: DateValue | null
   onChange?: (MappedDateValue<DateValue>) => void
   onFocusChange?: (CalendarDate) => void
   pageBehavior?: PageBehavior = visible
   slot?: string | null
   style?: CSSProperties | ((CalendarRenderProps & {
     defaultStyle: CSSProperties
 })) => CSSProperties | undefined
   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?: ReactNode | ((RangeCalendarRenderProps & {
     defaultChildren: ReactNode | undefined
 })) => ReactNode
   className?: string | ((RangeCalendarRenderProps & {
     defaultClassName: string | undefined
 })) => string
   defaultFocusedValue?: DateValue
   defaultValue?: RangeValue<DateValue> | null
+  firstDayOfWeek?: 'sun' | 'mon' | 'tue' | 'wed' | 'thu' | 'fri' | 'sat'
   focusedValue?: DateValue
   id?: string
   isDateUnavailable?: (DateValue) => boolean
   isDisabled?: boolean = false
   isReadOnly?: boolean = false
   maxValue?: DateValue | null
   minValue?: DateValue | null
   onChange?: (T) => void
   onFocusChange?: (CalendarDate) => void
   pageBehavior?: PageBehavior = visible
   slot?: string | null
   style?: CSSProperties | ((RangeCalendarRenderProps & {
     defaultStyle: CSSProperties
 })) => CSSProperties | undefined
   value?: RangeValue<DateValue> | null
   visibleDuration?: DateDuration = {months: 1}
 }

/react-aria-components:DatePickerProps

 DatePickerProps <T extends DateValue> {
   aria-describedby?: string
   aria-details?: string
   aria-label?: string
   aria-labelledby?: string
   autoFocus?: boolean
   children?: ReactNode | ((DatePickerRenderProps & {
     defaultChildren: ReactNode | undefined
 })) => ReactNode
   className?: string | ((DatePickerRenderProps & {
     defaultClassName: string | undefined
 })) => string
   defaultOpen?: boolean
   defaultValue?: DateValue | null
+  firstDayOfWeek?: 'sun' | 'mon' | 'tue' | 'wed' | 'thu' | 'fri' | 'sat'
   granularity?: Granularity
   hideTimeZone?: boolean = false
   hourCycle?: number | number
   id?: string
   isDisabled?: boolean
   isInvalid?: boolean
   isOpen?: boolean
   isReadOnly?: boolean
   isRequired?: boolean
   maxValue?: DateValue
   minValue?: DateValue
   name?: string
   onBlur?: (FocusEvent<Target>) => void
   onChange?: (MappedDateValue<DateValue>) => void
   onFocus?: (FocusEvent<Target>) => void
   onFocusChange?: (boolean) => void
   onKeyDown?: (KeyboardEvent) => void
   onKeyUp?: (KeyboardEvent) => void
   onOpenChange?: (boolean) => void
   pageBehavior?: PageBehavior = visible
   placeholderValue?: DateValue
   shouldCloseOnSelect?: boolean | () => boolean = true
   shouldForceLeadingZeros?: boolean
   slot?: string | null
   style?: CSSProperties | ((DatePickerRenderProps & {
     defaultStyle: CSSProperties
 })) => CSSProperties | undefined
   validate?: (MappedDateValue<DateValue>) => ValidationError | boolean | null | undefined
   validationBehavior?: 'native' | 'aria' = 'native'
   value?: DateValue | null
 }

/react-aria-components:DateRangePickerProps

 DateRangePickerProps <T extends DateValue> {
   allowsNonContiguousRanges?: boolean
   aria-describedby?: string
   aria-details?: string
   aria-label?: string
   aria-labelledby?: string
   autoFocus?: boolean
   children?: ReactNode | ((DateRangePickerRenderProps & {
     defaultChildren: ReactNode | undefined
 })) => ReactNode
   className?: string | ((DateRangePickerRenderProps & {
     defaultClassName: string | undefined
 })) => string
   defaultOpen?: boolean
   defaultValue?: RangeValue<DateValue> | null
   endName?: string
+  firstDayOfWeek?: 'sun' | 'mon' | 'tue' | 'wed' | 'thu' | 'fri' | 'sat'
   granularity?: Granularity
   hideTimeZone?: boolean = false
   hourCycle?: number | number
   id?: string
   isDisabled?: boolean
   isInvalid?: boolean
   isOpen?: boolean
   isReadOnly?: boolean
   isRequired?: boolean
   maxValue?: DateValue
   minValue?: DateValue
   onBlur?: (FocusEvent<Target>) => void
   onChange?: (RangeValue<MappedDateValue<DateValue>>) => void
   onFocus?: (FocusEvent<Target>) => void
   onFocusChange?: (boolean) => void
   onKeyDown?: (KeyboardEvent) => void
   onKeyUp?: (KeyboardEvent) => void
   onOpenChange?: (boolean) => void
   pageBehavior?: PageBehavior = visible
   placeholderValue?: DateValue
   shouldCloseOnSelect?: boolean | () => boolean = true
   shouldForceLeadingZeros?: boolean
   slot?: string | null
   startName?: string
   style?: CSSProperties | ((DateRangePickerRenderProps & {
     defaultStyle: CSSProperties
 })) => CSSProperties | undefined
   validate?: (RangeValue<MappedDateValue<DateValue>>) => ValidationError | boolean | null | undefined
   validationBehavior?: 'native' | 'aria' = 'native'
   value?: RangeValue<DateValue> | null
 }

@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
   defaultValue?: DateValue | null
   errorMessage?: ReactNode
+  firstDayOfWeek?: 'sun' | 'mon' | 'tue' | 'wed' | 'thu' | 'fri' | 'sat'
   focusedValue?: DateValue
   id?: string
   isDateUnavailable?: (DateValue) => boolean
   isDisabled?: boolean = false
   isReadOnly?: boolean = false
   maxValue?: DateValue | null
   minValue?: DateValue | null
   onChange?: (MappedDateValue<DateValue>) => void
   onFocusChange?: (CalendarDate) => void
   pageBehavior?: PageBehavior = visible
   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
   defaultValue?: RangeValue<DateValue> | null
   errorMessage?: ReactNode
+  firstDayOfWeek?: 'sun' | 'mon' | 'tue' | 'wed' | 'thu' | 'fri' | 'sat'
   focusedValue?: DateValue
   id?: string
   isDateUnavailable?: (DateValue) => boolean
   isDisabled?: boolean = false
   isReadOnly?: boolean = false
   maxValue?: DateValue | null
   minValue?: DateValue | null
   onChange?: (T) => void
   onFocusChange?: (CalendarDate) => void
   pageBehavior?: PageBehavior = visible
   value?: RangeValue<DateValue> | null
 }

/@react-aria/calendar:CalendarProps

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

/@react-aria/calendar:RangeCalendarProps

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

/@react-aria/calendar:AriaCalendarGridProps

 AriaCalendarGridProps {
   endDate?: CalendarDate
+  firstDayOfWeek?: 'sun' | 'mon' | 'tue' | 'wed' | 'thu' | 'fri' | 'sat'
   startDate?: CalendarDate
   weekdayStyle?: 'narrow' | 'short' | 'long' = "narrow"
 }

@react-aria/datepicker

/@react-aria/datepicker:AriaDatePickerProps

 AriaDatePickerProps <T extends DateValue> {
   aria-describedby?: string
   aria-details?: string
   aria-label?: string
   aria-labelledby?: string
   autoFocus?: boolean
   defaultOpen?: boolean
   defaultValue?: DateValue | null
   description?: ReactNode
   errorMessage?: ReactNode | (ValidationResult) => ReactNode
+  firstDayOfWeek?: 'sun' | 'mon' | 'tue' | 'wed' | 'thu' | 'fri' | 'sat'
   granularity?: Granularity
   hideTimeZone?: boolean = false
   hourCycle?: number | number
   id?: string
   isDisabled?: boolean
   isInvalid?: boolean
   isOpen?: boolean
   isReadOnly?: boolean
   isRequired?: boolean
   label?: ReactNode
   maxValue?: DateValue
   minValue?: DateValue
   name?: string
   onBlur?: (FocusEvent<Target>) => void
   onChange?: (MappedDateValue<DateValue>) => void
   onFocus?: (FocusEvent<Target>) => void
   onFocusChange?: (boolean) => void
   onKeyDown?: (KeyboardEvent) => void
   onKeyUp?: (KeyboardEvent) => void
   onOpenChange?: (boolean) => void
   pageBehavior?: PageBehavior = visible
   placeholderValue?: DateValue
   shouldForceLeadingZeros?: boolean
   validate?: (MappedDateValue<DateValue>) => ValidationError | boolean | null | undefined
   validationBehavior?: 'aria' | 'native' = 'aria'
   value?: DateValue | null
 }

/@react-aria/datepicker:AriaDateRangePickerProps

 AriaDateRangePickerProps <T extends DateValue> {
   allowsNonContiguousRanges?: boolean
   aria-describedby?: string
   aria-details?: string
   aria-label?: string
   aria-labelledby?: string
   autoFocus?: boolean
   defaultOpen?: boolean
   defaultValue?: RangeValue<DateValue> | null
   description?: ReactNode
   endName?: string
   errorMessage?: ReactNode | (ValidationResult) => ReactNode
+  firstDayOfWeek?: 'sun' | 'mon' | 'tue' | 'wed' | 'thu' | 'fri' | 'sat'
   granularity?: Granularity
   hideTimeZone?: boolean = false
   hourCycle?: number | number
   id?: string
   isDisabled?: boolean
   isInvalid?: boolean
   isOpen?: boolean
   isReadOnly?: boolean
   isRequired?: boolean
   label?: ReactNode
   maxValue?: DateValue
   minValue?: DateValue
   onBlur?: (FocusEvent<Target>) => void
   onChange?: (RangeValue<MappedDateValue<DateValue>>) => void
   onFocus?: (FocusEvent<Target>) => void
   onFocusChange?: (boolean) => void
   onKeyDown?: (KeyboardEvent) => void
   onKeyUp?: (KeyboardEvent) => void
   onOpenChange?: (boolean) => void
   pageBehavior?: PageBehavior = visible
   placeholderValue?: DateValue
   shouldForceLeadingZeros?: boolean
   startName?: string
   validate?: (RangeValue<MappedDateValue<DateValue>>) => ValidationError | boolean | null | undefined
   validationBehavior?: 'aria' | 'native' = 'aria'
   value?: RangeValue<DateValue> | null
 }

@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>
   defaultFocusedValue?: DateValue
   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>
   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>
   start?: Responsive<DimensionValue>
   top?: Responsive<DimensionValue>
   value?: DateValue | null
   visibleMonths?: number = 1
   width?: Responsive<DimensionValue>
   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>
   defaultFocusedValue?: DateValue
   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>
   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?: (DateValue) => void
   onFocusChange?: (CalendarDate) => void
   order?: Responsive<number>
   pageBehavior?: PageBehavior = visible
   position?: Responsive<'static' | 'relative' | 'absolute' | 'fixed' | 'sticky'>
   right?: Responsive<DimensionValue>
   start?: Responsive<DimensionValue>
   top?: Responsive<DimensionValue>
   value?: RangeValue<DateValue> | null
   visibleMonths?: number = 1
   width?: Responsive<DimensionValue>
   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>
   defaultFocusedValue?: DateValue
   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>
   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>
   start?: Responsive<DimensionValue>
   top?: Responsive<DimensionValue>
   value?: DateValue | null
   visibleMonths?: number = 1
   width?: Responsive<DimensionValue>
   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>
   defaultFocusedValue?: DateValue
   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>
   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?: (T) => void
   onFocusChange?: (CalendarDate) => void
   order?: Responsive<number>
   pageBehavior?: PageBehavior = visible
   position?: Responsive<'static' | 'relative' | 'absolute' | 'fixed' | 'sticky'>
   right?: Responsive<DimensionValue>
   start?: Responsive<DimensionValue>
   top?: Responsive<DimensionValue>
   value?: RangeValue<DateValue> | null
   visibleMonths?: number = 1
   width?: Responsive<DimensionValue>
   zIndex?: Responsive<number>
 }

@react-spectrum/datepicker

/@react-spectrum/datepicker:DatePicker

 DatePicker <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
   bottom?: Responsive<DimensionValue>
   contextualHelp?: ReactNode
   defaultOpen?: boolean
   defaultValue?: DateValue | null
   description?: ReactNode
   end?: Responsive<DimensionValue>
   errorMessage?: ReactNode | (ValidationResult) => ReactNode
+  firstDayOfWeek?: 'sun' | 'mon' | 'tue' | 'wed' | 'thu' | 'fri' | 'sat'
   flex?: Responsive<string | number | boolean>
   flexBasis?: Responsive<number | string>
   flexGrow?: Responsive<number>
   flexShrink?: Responsive<number>
   gridArea?: Responsive<string>
   gridColumn?: Responsive<string>
   gridColumnEnd?: Responsive<string>
   gridColumnStart?: Responsive<string>
   gridRow?: Responsive<string>
   gridRowEnd?: Responsive<string>
   gridRowStart?: Responsive<string>
   height?: Responsive<DimensionValue>
   hideTimeZone?: boolean = false
   hourCycle?: number | number
   id?: string
   isDateUnavailable?: (DateValue) => boolean
   isDisabled?: boolean
   isHidden?: Responsive<boolean>
   isOpen?: boolean
   isQuiet?: boolean = false
   isReadOnly?: boolean
   isRequired?: boolean
   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>
   maxValue?: DateValue
   maxVisibleMonths?: number = 1
   maxWidth?: Responsive<DimensionValue>
   minHeight?: Responsive<DimensionValue>
   minValue?: DateValue
   minWidth?: Responsive<DimensionValue>
   name?: string
   necessityIndicator?: NecessityIndicator = 'icon'
   onBlur?: (FocusEvent<Target>) => void
   onChange?: (MappedDateValue<DateValue>) => void
   onFocus?: (FocusEvent<Target>) => void
   onFocusChange?: (boolean) => void
   onKeyDown?: (KeyboardEvent) => void
   onKeyUp?: (KeyboardEvent) => void
   onOpenChange?: (boolean) => void
   order?: Responsive<number>
   pageBehavior?: PageBehavior = visible
   placeholderValue?: DateValue
   position?: Responsive<'static' | 'relative' | 'absolute' | 'fixed' | 'sticky'>
   right?: Responsive<DimensionValue>
   shouldFlip?: boolean = true
   shouldForceLeadingZeros?: boolean
   showFormatHelpText?: boolean = false
   start?: Responsive<DimensionValue>
   top?: Responsive<DimensionValue>
   validate?: (MappedDateValue<DateValue>) => ValidationError | boolean | null | undefined
   validationBehavior?: 'aria' | 'native' = 'aria'
   validationState?: ValidationState
   value?: DateValue | null
   width?: Responsive<DimensionValue>
   zIndex?: Responsive<number>
 }

/@react-spectrum/datepicker:DateRangePicker

 DateRangePicker <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
   bottom?: Responsive<DimensionValue>
   contextualHelp?: ReactNode
   defaultOpen?: boolean
   defaultValue?: RangeValue<DateValue> | null
   description?: ReactNode
   end?: Responsive<DimensionValue>
   endName?: string
   errorMessage?: ReactNode | (ValidationResult) => ReactNode
+  firstDayOfWeek?: 'sun' | 'mon' | 'tue' | 'wed' | 'thu' | 'fri' | 'sat'
   flex?: Responsive<string | number | boolean>
   flexBasis?: Responsive<number | string>
   flexGrow?: Responsive<number>
   flexShrink?: Responsive<number>
   gridArea?: Responsive<string>
   gridColumn?: Responsive<string>
   gridColumnEnd?: Responsive<string>
   gridColumnStart?: Responsive<string>
   gridRow?: Responsive<string>
   gridRowEnd?: Responsive<string>
   gridRowStart?: Responsive<string>
   height?: Responsive<DimensionValue>
   hideTimeZone?: boolean = false
   hourCycle?: number | number
   id?: string
   isDateUnavailable?: (DateValue) => boolean
   isDisabled?: boolean
   isHidden?: Responsive<boolean>
   isOpen?: boolean
   isQuiet?: boolean = false
   isReadOnly?: boolean
   isRequired?: boolean
   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>
   maxValue?: DateValue
   maxVisibleMonths?: number = 1
   maxWidth?: Responsive<DimensionValue>
   minHeight?: Responsive<DimensionValue>
   minValue?: DateValue
   minWidth?: Responsive<DimensionValue>
   necessityIndicator?: NecessityIndicator = 'icon'
   onBlur?: (FocusEvent<Target>) => void
   onChange?: (RangeValue<MappedDateValue<DateValue>>) => void
   onFocus?: (FocusEvent<Target>) => void
   onFocusChange?: (boolean) => void
   onKeyDown?: (KeyboardEvent) => void
   onKeyUp?: (KeyboardEvent) => void
   onOpenChange?: (boolean) => void
   order?: Responsive<number>
   pageBehavior?: PageBehavior = visible
   placeholderValue?: DateValue
   position?: Responsive<'static' | 'relative' | 'absolute' | 'fixed' | 'sticky'>
   right?: Responsive<DimensionValue>
   shouldFlip?: boolean = true
   shouldForceLeadingZeros?: boolean
   showFormatHelpText?: boolean = false
   start?: Responsive<DimensionValue>
   startName?: string
   top?: Responsive<DimensionValue>
   validate?: (RangeValue<MappedDateValue<DateValue>>) => ValidationError | boolean | null | undefined
   validationBehavior?: 'aria' | 'native' = 'aria'
   validationState?: ValidationState
   value?: RangeValue<DateValue> | null
   width?: Responsive<DimensionValue>
   zIndex?: Responsive<number>
 }

/@react-spectrum/datepicker:SpectrumDatePickerProps

 SpectrumDatePickerProps <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
   bottom?: Responsive<DimensionValue>
   contextualHelp?: ReactNode
   defaultOpen?: boolean
   defaultValue?: DateValue | null
   description?: ReactNode
   end?: Responsive<DimensionValue>
   errorMessage?: ReactNode | (ValidationResult) => ReactNode
+  firstDayOfWeek?: 'sun' | 'mon' | 'tue' | 'wed' | 'thu' | 'fri' | 'sat'
   flex?: Responsive<string | number | boolean>
   flexBasis?: Responsive<number | string>
   flexGrow?: Responsive<number>
   flexShrink?: Responsive<number>
   gridArea?: Responsive<string>
   gridColumn?: Responsive<string>
   gridColumnEnd?: Responsive<string>
   gridColumnStart?: Responsive<string>
   gridRow?: Responsive<string>
   gridRowEnd?: Responsive<string>
   gridRowStart?: Responsive<string>
   height?: Responsive<DimensionValue>
   hideTimeZone?: boolean = false
   hourCycle?: number | number
   id?: string
   isDateUnavailable?: (DateValue) => boolean
   isDisabled?: boolean
   isHidden?: Responsive<boolean>
   isOpen?: boolean
   isQuiet?: boolean = false
   isReadOnly?: boolean
   isRequired?: boolean
   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>
   maxValue?: DateValue
   maxVisibleMonths?: number = 1
   maxWidth?: Responsive<DimensionValue>
   minHeight?: Responsive<DimensionValue>
   minValue?: DateValue
   minWidth?: Responsive<DimensionValue>
   name?: string
   necessityIndicator?: NecessityIndicator = 'icon'
   onBlur?: (FocusEvent<Target>) => void
   onChange?: (MappedDateValue<DateValue>) => void
   onFocus?: (FocusEvent<Target>) => void
   onFocusChange?: (boolean) => void
   onKeyDown?: (KeyboardEvent) => void
   onKeyUp?: (KeyboardEvent) => void
   onOpenChange?: (boolean) => void
   order?: Responsive<number>
   pageBehavior?: PageBehavior = visible
   placeholderValue?: DateValue
   position?: Responsive<'static' | 'relative' | 'absolute' | 'fixed' | 'sticky'>
   right?: Responsive<DimensionValue>
   shouldFlip?: boolean = true
   shouldForceLeadingZeros?: boolean
   showFormatHelpText?: boolean = false
   start?: Responsive<DimensionValue>
   top?: Responsive<DimensionValue>
   validate?: (MappedDateValue<DateValue>) => ValidationError | boolean | null | undefined
   validationBehavior?: 'aria' | 'native' = 'aria'
   validationState?: ValidationState
   value?: DateValue | null
   width?: Responsive<DimensionValue>
   zIndex?: Responsive<number>
 }

/@react-spectrum/datepicker:SpectrumDateRangePickerProps

 SpectrumDateRangePickerProps <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
   bottom?: Responsive<DimensionValue>
   contextualHelp?: ReactNode
   defaultOpen?: boolean
   defaultValue?: RangeValue<DateValue> | null
   description?: ReactNode
   end?: Responsive<DimensionValue>
   endName?: string
   errorMessage?: ReactNode | (ValidationResult) => ReactNode
+  firstDayOfWeek?: 'sun' | 'mon' | 'tue' | 'wed' | 'thu' | 'fri' | 'sat'
   flex?: Responsive<string | number | boolean>
   flexBasis?: Responsive<number | string>
   flexGrow?: Responsive<number>
   flexShrink?: Responsive<number>
   gridArea?: Responsive<string>
   gridColumn?: Responsive<string>
   gridColumnEnd?: Responsive<string>
   gridColumnStart?: Responsive<string>
   gridRow?: Responsive<string>
   gridRowEnd?: Responsive<string>
   gridRowStart?: Responsive<string>
   height?: Responsive<DimensionValue>
   hideTimeZone?: boolean = false
   hourCycle?: number | number
   id?: string
   isDateUnavailable?: (DateValue) => boolean
   isDisabled?: boolean
   isHidden?: Responsive<boolean>
   isOpen?: boolean
   isQuiet?: boolean = false
   isReadOnly?: boolean
   isRequired?: boolean
   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>
   maxValue?: DateValue
   maxVisibleMonths?: number = 1
   maxWidth?: Responsive<DimensionValue>
   minHeight?: Responsive<DimensionValue>
   minValue?: DateValue
   minWidth?: Responsive<DimensionValue>
   necessityIndicator?: NecessityIndicator = 'icon'
   onBlur?: (FocusEvent<Target>) => void
   onChange?: (RangeValue<MappedDateValue<DateValue>>) => void
   onFocus?: (FocusEvent<Target>) => void
   onFocusChange?: (boolean) => void
   onKeyDown?: (KeyboardEvent) => void
   onKeyUp?: (KeyboardEvent) => void
   onOpenChange?: (boolean) => void
   order?: Responsive<number>
   pageBehavior?: PageBehavior = visible
   placeholderValue?: DateValue
   position?: Responsive<'static' | 'relative' | 'absolute' | 'fixed' | 'sticky'>
   right?: Responsive<DimensionValue>
   shouldFlip?: boolean = true
   shouldForceLeadingZeros?: boolean
   showFormatHelpText?: boolean = false
   start?: Responsive<DimensionValue>
   startName?: string
   top?: Responsive<DimensionValue>
   validate?: (RangeValue<MappedDateValue<DateValue>>) => ValidationError | boolean | null | undefined
   validationBehavior?: 'aria' | 'native' = 'aria'
   validationState?: ValidationState
   value?: RangeValue<DateValue> | null
   width?: Responsive<DimensionValue>
   zIndex?: Responsive<number>
 }

@react-stately/calendar

/@react-stately/calendar:CalendarStateOptions

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

/@react-stately/calendar:RangeCalendarStateOptions

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

@react-stately/datepicker

/@react-stately/datepicker:DateFieldStateOptions

 DateFieldStateOptions <T extends DateValue = DateValue> {
   autoFocus?: boolean
   createCalendar: (string) => Calendar
   defaultOpen?: boolean
   defaultValue?: DateValue | null
   description?: ReactNode
   errorMessage?: ReactNode | (ValidationResult) => ReactNode
+  firstDayOfWeek?: 'sun' | 'mon' | 'tue' | 'wed' | 'thu' | 'fri' | 'sat'
   granularity?: Granularity
   hideTimeZone?: boolean = false
   hourCycle?: number | number
   isDateUnavailable?: (DateValue) => boolean
   isInvalid?: boolean
   isOpen?: boolean
   isReadOnly?: boolean
   isRequired?: boolean
   label?: ReactNode
   locale: string
   maxGranularity?: 'year' | 'month' | Granularity = 'year'
   maxValue?: DateValue
   minValue?: DateValue
   onBlur?: (FocusEvent<Target>) => void
   onChange?: (MappedDateValue<DateValue>) => void
   onFocus?: (FocusEvent<Target>) => void
   onFocusChange?: (boolean) => void
   onKeyDown?: (KeyboardEvent) => void
   onKeyUp?: (KeyboardEvent) => void
   onOpenChange?: (boolean) => void
   pageBehavior?: PageBehavior = visible
   placeholderValue?: DateValue
   shouldForceLeadingZeros?: boolean
   validate?: (MappedDateValue<DateValue>) => ValidationError | boolean | null | undefined
   validationBehavior?: 'aria' | 'native' = 'aria'
   value?: DateValue | null
 }

/@react-stately/datepicker:DatePickerStateOptions

 DatePickerStateOptions <T extends DateValue> {
   autoFocus?: boolean
   defaultOpen?: boolean
   defaultValue?: DateValue | null
   description?: ReactNode
   errorMessage?: ReactNode | (ValidationResult) => ReactNode
+  firstDayOfWeek?: 'sun' | 'mon' | 'tue' | 'wed' | 'thu' | 'fri' | 'sat'
   granularity?: Granularity
   hideTimeZone?: boolean = false
   hourCycle?: number | number
   isDateUnavailable?: (DateValue) => boolean
   isInvalid?: boolean
   isOpen?: boolean
   isReadOnly?: boolean
   isRequired?: boolean
   label?: ReactNode
   maxValue?: DateValue
   minValue?: DateValue
   onBlur?: (FocusEvent<Target>) => void
   onChange?: (MappedDateValue<DateValue>) => void
   onFocus?: (FocusEvent<Target>) => void
   onFocusChange?: (boolean) => void
   onKeyDown?: (KeyboardEvent) => void
   onKeyUp?: (KeyboardEvent) => void
   onOpenChange?: (boolean) => void
   pageBehavior?: PageBehavior = visible
   placeholderValue?: DateValue
   shouldCloseOnSelect?: boolean | () => boolean = true
   shouldForceLeadingZeros?: boolean
   validate?: (MappedDateValue<DateValue>) => ValidationError | boolean | null | undefined
   validationBehavior?: 'aria' | 'native' = 'aria'
   value?: DateValue | null
 }

/@react-stately/datepicker:DateRangePickerStateOptions

 DateRangePickerStateOptions <T extends DateValue = DateValue> {
   allowsNonContiguousRanges?: boolean
   autoFocus?: boolean
   defaultOpen?: boolean
   defaultValue?: RangeValue<DateValue> | null
   description?: ReactNode
   endName?: string
   errorMessage?: ReactNode | (ValidationResult) => ReactNode
+  firstDayOfWeek?: 'sun' | 'mon' | 'tue' | 'wed' | 'thu' | 'fri' | 'sat'
   granularity?: Granularity
   hideTimeZone?: boolean = false
   hourCycle?: number | number
   isDateUnavailable?: (DateValue) => boolean
   isInvalid?: boolean
   isOpen?: boolean
   isReadOnly?: boolean
   isRequired?: boolean
   label?: ReactNode
   maxValue?: DateValue
   minValue?: DateValue
   onBlur?: (FocusEvent<Target>) => void
   onChange?: (RangeValue<MappedDateValue<DateValue>>) => void
   onFocus?: (FocusEvent<Target>) => void
   onFocusChange?: (boolean) => void
   onKeyDown?: (KeyboardEvent) => void
   onKeyUp?: (KeyboardEvent) => void
   onOpenChange?: (boolean) => void
   pageBehavior?: PageBehavior = visible
   placeholderValue?: DateValue
   shouldCloseOnSelect?: boolean | () => boolean = true
   shouldForceLeadingZeros?: boolean
   startName?: string
   validate?: (RangeValue<MappedDateValue<DateValue>>) => ValidationError | boolean | null | undefined
   validationBehavior?: 'aria' | 'native' = 'aria'
   value?: RangeValue<DateValue> | null
 }

snowystinger · 2024-11-20T00:52:51Z

packages/@react-spectrum/calendar/src/CalendarBase.tsx

@@ -45,7 +45,8 @@ export function CalendarBase<T extends CalendarState | RangeCalendarState>(props
    prevButtonProps,
    errorMessageProps,
    calendarRef: ref,
-    visibleMonths = 1
+    visibleMonths = 1,
+    firstDayOfWeek = 'sun'


i thought this was determined by locale/calendar system? do we need a default here?

snowystinger · 2024-11-20T00:53:02Z

packages/@react-spectrum/calendar/src/CalendarCell.tsx

 }

-export function CalendarCell({state, currentMonth, ...props}: CalendarCellProps) {
+export function CalendarCell({state, currentMonth, firstDayOfWeek = 'sun', ...props}: CalendarCellProps) {


snowystinger · 2024-11-20T00:53:40Z

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

@@ -47,7 +47,8 @@ function DateRangePicker<T extends DateValue>(props: SpectrumDateRangePickerProp
    autoFocus,
    placeholderValue,
    maxVisibleMonths = 1,
-    pageBehavior
+    pageBehavior,
+    firstDayOfWeek = 'sun'


same for these as well

snowystinger · 2024-11-20T00:55:05Z

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

@@ -77,6 +77,8 @@ export const CalendarContext = createContext<ContextValue<CalendarProps<any>, HT
 export const RangeCalendarContext = createContext<ContextValue<RangeCalendarProps<any>, HTMLDivElement>>({});
 export const CalendarStateContext = createContext<CalendarState | null>(null);
 export const RangeCalendarStateContext = createContext<RangeCalendarState | null>(null);
+const InternalCalendarContext = createContext<CalendarProps<any> | null>(null);


should we just send this on the normal state context?

reidbarber added 9 commits November 13, 2024 10:29

add firstDayOfWeek prop

8ecbca1

pass to DatePicker/DateRangePicker

3819daa

add storybook controls

4675901

add to RAC

b84969e

add docs

afa1c0f

add v3 tests

509257c

add hook tests

b03d491

lint

68b9f48

add chromatic stories

c9f80eb

reidbarber added 4 commits November 14, 2024 12:11

update v3 RangeCalendar styles for first and last day of week

15a047a

Merge remote-tracking branch 'origin/main' into calendar-firstDayOfWeek

c4f7e5f

lint

4020fb2

lint

ab374a8

use number instead of enum for type

b554178

snowystinger reviewed Nov 15, 2024

View reviewed changes

packages/@react-aria/calendar/docs/useCalendar.mdx Outdated Show resolved Hide resolved

reidbarber added 3 commits November 15, 2024 12:52

update type to enum

237cdfb

update tests

11c86e3

fix v3 cell style

c16d42e

devongovett reviewed Nov 15, 2024

View reviewed changes

packages/@react-types/calendar/src/index.d.ts Outdated Show resolved Hide resolved

devongovett reviewed Nov 15, 2024

View reviewed changes

packages/@react-aria/calendar/docs/useCalendar.mdx Outdated Show resolved Hide resolved

reidbarber added 2 commits November 16, 2024 13:16

use lowercase and update docs

b7f7185

Merge remote-tracking branch 'origin/main' into calendar-firstDayOfWeek

e4a342b

snowystinger reviewed Nov 20, 2024

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(Calendar): Add `firstDayOfWeek` prop #7363

feat(Calendar): Add `firstDayOfWeek` prop #7363

reidbarber commented Nov 13, 2024 •

edited

Loading

rspbot commented Nov 13, 2024

rspbot commented Nov 14, 2024

rspbot commented Nov 14, 2024

rspbot commented Nov 15, 2024

rspbot commented Nov 16, 2024

rspbot commented Nov 16, 2024

snowystinger Nov 20, 2024

snowystinger Nov 20, 2024

snowystinger Nov 20, 2024

snowystinger Nov 20, 2024

feat(Calendar): Add firstDayOfWeek prop #7363

Are you sure you want to change the base?

feat(Calendar): Add firstDayOfWeek prop #7363

Conversation

reidbarber commented Nov 13, 2024 • edited Loading

✅ Pull Request Checklist:

📝 Test Instructions:

🧢 Your Project:

rspbot commented Nov 13, 2024

rspbot commented Nov 14, 2024

rspbot commented Nov 14, 2024

rspbot commented Nov 15, 2024

rspbot commented Nov 16, 2024

rspbot commented Nov 16, 2024

react-aria-components

/react-aria-components:Calendar

/react-aria-components:RangeCalendar

/react-aria-components:DatePicker

/react-aria-components:DateRangePicker

/react-aria-components:CalendarProps

/react-aria-components:RangeCalendarProps

/react-aria-components:DatePickerProps

/react-aria-components:DateRangePickerProps

@react-aria/calendar

/@react-aria/calendar:AriaCalendarProps

/@react-aria/calendar:AriaRangeCalendarProps

/@react-aria/calendar:CalendarProps

/@react-aria/calendar:RangeCalendarProps

/@react-aria/calendar:AriaCalendarGridProps

@react-aria/datepicker

/@react-aria/datepicker:AriaDatePickerProps

/@react-aria/datepicker:AriaDateRangePickerProps

@react-spectrum/calendar

/@react-spectrum/calendar:Calendar

/@react-spectrum/calendar:RangeCalendar

/@react-spectrum/calendar:SpectrumCalendarProps

/@react-spectrum/calendar:SpectrumRangeCalendarProps

@react-spectrum/datepicker

/@react-spectrum/datepicker:DatePicker

/@react-spectrum/datepicker:DateRangePicker

/@react-spectrum/datepicker:SpectrumDatePickerProps

/@react-spectrum/datepicker:SpectrumDateRangePickerProps

@react-stately/calendar

/@react-stately/calendar:CalendarStateOptions

/@react-stately/calendar:RangeCalendarStateOptions

@react-stately/datepicker

/@react-stately/datepicker:DateFieldStateOptions

/@react-stately/datepicker:DatePickerStateOptions

/@react-stately/datepicker:DateRangePickerStateOptions

snowystinger Nov 20, 2024

Choose a reason for hiding this comment

snowystinger Nov 20, 2024

Choose a reason for hiding this comment

snowystinger Nov 20, 2024

Choose a reason for hiding this comment

snowystinger Nov 20, 2024

Choose a reason for hiding this comment

feat(Calendar): Add `firstDayOfWeek` prop #7363

feat(Calendar): Add `firstDayOfWeek` prop #7363

reidbarber commented Nov 13, 2024 •

edited

Loading