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:

and try locales with different start days (i.e. en-US for Sunday and fr-FR for Monday), and check new tests.

🧢 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! 🎉

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

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

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

rspbot · 2024-12-23T19:33:14Z

Build successful! 🎉

packages/@react-spectrum/calendar/stories/Calendar.stories.tsx

LFDanLu · 2025-01-03T22:10:57Z

https://www.chromatic.com/build?appId=5f0dd5ad2b5fc10022a2e320&number=863 btw

rspbot · 2025-01-06T19:34:38Z

Build successful! 🎉

ktabors · 2025-01-07T04:14:07Z

packages/@internationalized/date/src/queries.ts

@@ -180,13 +180,30 @@ export function getMinimumDayInMonth(date: AnyCalendarDate) {
  return 1;
 }

+const DAY_MAP = {


Should this be exported to be used https://github.com/adobe/react-spectrum/pull/7363/files#diff-b598cd9f6e4569b26a010dc1b345368a20953c412f842b0c035f3cd661890792R24?

I didn't think it was worth exporting since they're different packages and it would be public. Open to changing this if we think that's better though.

ktabors · 2025-01-07T04:14:21Z

packages/@internationalized/date/src/queries.ts

+  sat: 6
+};
+
+type DayOfWeek = 'sun' | 'mon' | 'tue' | 'wed' | 'thu' | 'fri' | 'sat';


Should this be in the @react-types package?

Similar to the above, I didn't think it was worth exporting, but open to changing if that would be better.

LFDanLu

LGTM, verified the behavior and double checked the doc examples. One small comment, mainly geared towards whether or not we should introduce this prop to some of the other queries, but that can be handled in a separate ticket

packages/@internationalized/date/src/queries.ts

rspbot · 2025-01-08T16:17:49Z

Build successful! 🎉

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

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

rspbot · 2025-01-08T20:32:40Z

Build successful! 🎉

rspbot · 2025-01-08T21:37:36Z

Build successful! 🎉

devongovett · 2025-01-09T18:24:30Z

packages/@internationalized/date/src/queries.ts

+  let monthEnd = endOfMonth(date);
+  let lastVisibleDay = endOfWeek(monthEnd, locale, firstDayOfWeek);
+  let totalDays = lastVisibleDay.calendar.toJulianDay(lastVisibleDay) - firstVisibleDay.calendar.toJulianDay(firstVisibleDay) + 1;
+  return Math.ceil(totalDays / 7);


same logic as before should work if you pass firstDayOfWeek through to getDayOfWeek I think

devongovett · 2025-01-09T18:25:11Z

packages/@internationalized/date/src/queries.ts

+    let offset = (DAY_MAP[firstDayOfWeek] - getWeekStart(locale) + 7) % 7;
+    let diff = (7 + dayOfWeek - offset) % 7;
+    dayOfWeek = diff;
+  } 


Instead of calculating two different offsets, you could just replace getWeekStart(locale) with DAY_MAP[firstDayOfWeek] when it is provided?

devongovett

pushed slight simplification based on above comments and added some docs to @internationalized/date.

rspbot · 2025-01-09T18:51:07Z

Build successful! 🎉

rspbot · 2025-01-09T18:51:09Z

## 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 | null
   defaultValue?: DateValue | null
+  firstDayOfWeek?: 'sun' | 'mon' | 'tue' | 'wed' | 'thu' | 'fri' | 'sat'
   focusedValue?: DateValue | null
   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 | null
   defaultValue?: RangeValue<DateValue> | null
+  firstDayOfWeek?: 'sun' | 'mon' | 'tue' | 'wed' | 'thu' | 'fri' | 'sat'
   focusedValue?: DateValue | null
   id?: string
   isDateUnavailable?: (DateValue) => boolean
   isDisabled?: boolean = false
   isReadOnly?: boolean = false
   maxValue?: DateValue | null
   minValue?: DateValue | null
   onChange?: (RangeValue<MappedDateValue<DateValue>>) => 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 | null
   minValue?: DateValue | null
   name?: string
   onBlur?: (FocusEvent<Target>) => void
   onChange?: (MappedDateValue<DateValue> | null) => void
   onFocus?: (FocusEvent<Target>) => void
   onFocusChange?: (boolean) => void
   onKeyDown?: (KeyboardEvent) => void
   onKeyUp?: (KeyboardEvent) => void
   onOpenChange?: (boolean) => void
   pageBehavior?: PageBehavior = visible
   placeholderValue?: DateValue | null
   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 | null
   minValue?: DateValue | null
   onBlur?: (FocusEvent<Target>) => void
   onChange?: (RangeValue<MappedDateValue<DateValue>> | null) => void
   onFocus?: (FocusEvent<Target>) => void
   onFocusChange?: (boolean) => void
   onKeyDown?: (KeyboardEvent) => void
   onKeyUp?: (KeyboardEvent) => void
   onOpenChange?: (boolean) => void
   pageBehavior?: PageBehavior = visible
   placeholderValue?: DateValue | null
   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:useFilter

-useFilter {
-  options?: Intl.CollatorOptions
-  returnVal: undefined
-}

/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 | null
   defaultValue?: DateValue | null
+  firstDayOfWeek?: 'sun' | 'mon' | 'tue' | 'wed' | 'thu' | 'fri' | 'sat'
   focusedValue?: DateValue | null
   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 | null
   defaultValue?: RangeValue<DateValue> | null
+  firstDayOfWeek?: 'sun' | 'mon' | 'tue' | 'wed' | 'thu' | 'fri' | 'sat'
   focusedValue?: DateValue | null
   id?: string
   isDateUnavailable?: (DateValue) => boolean
   isDisabled?: boolean = false
   isReadOnly?: boolean = false
   maxValue?: DateValue | null
   minValue?: DateValue | null
   onChange?: (RangeValue<MappedDateValue<DateValue>>) => 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 | null
   minValue?: DateValue | null
   name?: string
   onBlur?: (FocusEvent<Target>) => void
   onChange?: (MappedDateValue<DateValue> | null) => void
   onFocus?: (FocusEvent<Target>) => void
   onFocusChange?: (boolean) => void
   onKeyDown?: (KeyboardEvent) => void
   onKeyUp?: (KeyboardEvent) => void
   onOpenChange?: (boolean) => void
   pageBehavior?: PageBehavior = visible
   placeholderValue?: DateValue | null
   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 | null
   minValue?: DateValue | null
   onBlur?: (FocusEvent<Target>) => void
   onChange?: (RangeValue<MappedDateValue<DateValue>> | null) => void
   onFocus?: (FocusEvent<Target>) => void
   onFocusChange?: (boolean) => void
   onKeyDown?: (KeyboardEvent) => void
   onKeyUp?: (KeyboardEvent) => void
   onOpenChange?: (boolean) => void
   pageBehavior?: PageBehavior = visible
   placeholderValue?: DateValue | null
   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
 }

@internationalized/date

/@internationalized/date:getDayOfWeek

 getDayOfWeek {
   date: DateValue
   locale: string
+  firstDayOfWeek?: DayOfWeek
   returnVal: undefined
 }

/@internationalized/date:startOfWeek

 startOfWeek {
   date: DateValue
   locale: string
+  firstDayOfWeek?: DayOfWeek
   returnVal: undefined
 }

/@internationalized/date:endOfWeek

 endOfWeek {
   date: DateValue
   locale: string
+  firstDayOfWeek?: DayOfWeek
   returnVal: undefined
 }

/@internationalized/date:getWeeksInMonth

 getWeeksInMonth {
   date: DateValue
   locale: string
+  firstDayOfWeek?: DayOfWeek
   returnVal: undefined
 }

@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
   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 | 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
   isReadOnly?: boolean = false
   maxValue?: DateValue | null
   minValue?: DateValue | null
   onChange?: (RangeValue<MappedDateValue<DateValue>>) => void
   onFocusChange?: (CalendarDate) => void
   pageBehavior?: PageBehavior = visible
   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
   maxValue?: DateValue | null
   minValue?: DateValue | null
   onChange?: (MappedDateValue<DateValue>) => void
   onFocusChange?: (CalendarDate) => void
   pageBehavior?: PageBehavior = visible
   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
   maxValue?: DateValue | null
   minValue?: DateValue | null
   onChange?: (RangeValue<MappedDateValue<DateValue>>) => void
   onFocusChange?: (CalendarDate) => void
   pageBehavior?: PageBehavior = visible
   value?: RangeValue<DateValue> | 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 | null
   minValue?: DateValue | null
   name?: string
   onBlur?: (FocusEvent<Target>) => void
   onChange?: (MappedDateValue<DateValue> | null) => void
   onFocus?: (FocusEvent<Target>) => void
   onFocusChange?: (boolean) => void
   onKeyDown?: (KeyboardEvent) => void
   onKeyUp?: (KeyboardEvent) => void
   onOpenChange?: (boolean) => void
   pageBehavior?: PageBehavior = visible
   placeholderValue?: DateValue | null
   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 | null
   minValue?: DateValue | null
   onBlur?: (FocusEvent<Target>) => void
   onChange?: (RangeValue<MappedDateValue<DateValue>> | null) => void
   onFocus?: (FocusEvent<Target>) => void
   onFocusChange?: (boolean) => void
   onKeyDown?: (KeyboardEvent) => void
   onKeyUp?: (KeyboardEvent) => void
   onOpenChange?: (boolean) => void
   pageBehavior?: PageBehavior = visible
   placeholderValue?: DateValue | null
   shouldForceLeadingZeros?: boolean
   startName?: string
   validate?: (RangeValue<MappedDateValue<DateValue>>) => ValidationError | boolean | null | undefined
   validationBehavior?: 'aria' | 'native' = 'aria'
   value?: RangeValue<DateValue> | null
 }

@react-aria/overlays

/@react-aria/overlays:AriaPositionProps

 AriaPositionProps {
   arrowBoundaryOffset?: number = 0
   arrowSize?: number = 0
   boundaryElement?: Element = document.body
   containerPadding?: number = 12
   crossOffset?: number = 0
   isOpen?: boolean
   maxHeight?: number
   offset?: number = 0
-  onClose?: () => void | null
+  onClose?: () => void
   overlayRef: RefObject<Element | null>
   placement?: Placement = 'bottom'
   scrollRef?: RefObject<Element | null> = overlayRef
   shouldFlip?: boolean = true
   targetRef: RefObject<Element | 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 | 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>
   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 | 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>
   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>
   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 | 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>
   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 | 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>
   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>
   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 | null
   maxVisibleMonths?: number = 1
   maxWidth?: Responsive<DimensionValue>
   minHeight?: Responsive<DimensionValue>
   minValue?: DateValue | null
   minWidth?: Responsive<DimensionValue>
   name?: string
   necessityIndicator?: NecessityIndicator = 'icon'
   onBlur?: (FocusEvent<Target>) => void
   onChange?: (MappedDateValue<DateValue> | null) => 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 | null
   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 | null
   maxVisibleMonths?: number = 1
   maxWidth?: Responsive<DimensionValue>
   minHeight?: Responsive<DimensionValue>
   minValue?: DateValue | null
   minWidth?: Responsive<DimensionValue>
   necessityIndicator?: NecessityIndicator = 'icon'
   onBlur?: (FocusEvent<Target>) => void
   onChange?: (RangeValue<MappedDateValue<DateValue>> | null) => 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 | null
   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 | null
   maxVisibleMonths?: number = 1
   maxWidth?: Responsive<DimensionValue>
   minHeight?: Responsive<DimensionValue>
   minValue?: DateValue | null
   minWidth?: Responsive<DimensionValue>
   name?: string
   necessityIndicator?: NecessityIndicator = 'icon'
   onBlur?: (FocusEvent<Target>) => void
   onChange?: (MappedDateValue<DateValue> | null) => 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 | null
   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 | null
   maxVisibleMonths?: number = 1
   maxWidth?: Responsive<DimensionValue>
   minHeight?: Responsive<DimensionValue>
   minValue?: DateValue | null
   minWidth?: Responsive<DimensionValue>
   necessityIndicator?: NecessityIndicator = 'icon'
   onBlur?: (FocusEvent<Target>) => void
   onChange?: (RangeValue<MappedDateValue<DateValue>> | null) => 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 | null
   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/s2

/@react-spectrum/s2:Menu

 Menu <T extends {}> {
   UNSAFE_className?: string
   UNSAFE_style?: CSSProperties
   aria-describedby?: string
   aria-details?: string
   aria-label?: string
   aria-labelledby?: string
   autoFocus?: boolean | FocusStrategy
   children?: ReactNode | ({}) => ReactNode
   defaultSelectedKeys?: 'all' | Iterable<Key>
   disabledKeys?: Iterable<Key>
   disallowEmptySelection?: boolean
-  hideLinkOutIcon?: boolean
   id?: string
   items?: Iterable<T>
   onAction?: (Key) => void
   onClose?: () => void
   onSelectionChange?: (Selection) => void
   selectedKeys?: 'all' | Iterable<Key>
   selectionMode?: SelectionMode
   shouldFocusWrap?: boolean
   size?: 'S' | 'M' | 'L' | 'XL' = 'M'
   slot?: string | null
   styles?: StylesProp
 }

/@react-spectrum/s2:MenuProps

 MenuProps <T> {
   UNSAFE_className?: string
   UNSAFE_style?: CSSProperties
   aria-describedby?: string
   aria-details?: string
   aria-label?: string
   aria-labelledby?: string
   autoFocus?: boolean | FocusStrategy
   children?: ReactNode | (T) => ReactNode
   defaultSelectedKeys?: 'all' | Iterable<Key>
   disabledKeys?: Iterable<Key>
   disallowEmptySelection?: boolean
-  hideLinkOutIcon?: boolean
   id?: string
   items?: Iterable<T>
   onAction?: (Key) => void
   onClose?: () => void
   onSelectionChange?: (Selection) => void
   selectedKeys?: 'all' | Iterable<Key>
   selectionMode?: SelectionMode
   shouldFocusWrap?: boolean
   size?: 'S' | 'M' | 'L' | 'XL' = 'M'
   slot?: string | null
   styles?: StylesProp
 }

@react-stately/calendar

/@react-stately/calendar:CalendarStateOptions

 CalendarStateOptions <T extends DateValue = DateValue> {
   autoFocus?: boolean = false
   createCalendar: (string) => 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
   locale: string
   maxValue?: DateValue | null
   minValue?: DateValue | null
   onChange?: (MappedDateValue<DateValue>) => void
   onFocusChange?: (CalendarDate) => void
   pageBehavior?: PageBehavior = visible
   selectionAlignment?: 'start' | 'center' | 'end'
   value?: DateValue | null
   visibleDuration?: DateDuration = {months: 1}
 }

/@react-stately/calendar:RangeCalendarStateOptions

 RangeCalendarStateOptions <T extends DateValue = DateValue> {
   allowsNonContiguousRanges?: boolean
   autoFocus?: boolean = false
   createCalendar: (string) => 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
   locale: string
   maxValue?: DateValue | null
   minValue?: DateValue | null
   onChange?: (RangeValue<MappedDateValue<DateValue>>) => void
   onFocusChange?: (CalendarDate) => void
   pageBehavior?: PageBehavior = visible
   value?: RangeValue<DateValue> | 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 | null
   minValue?: DateValue | null
   onBlur?: (FocusEvent<Target>) => void
   onChange?: (MappedDateValue<DateValue> | null) => void
   onFocus?: (FocusEvent<Target>) => void
   onFocusChange?: (boolean) => void
   onKeyDown?: (KeyboardEvent) => void
   onKeyUp?: (KeyboardEvent) => void
   onOpenChange?: (boolean) => void
   pageBehavior?: PageBehavior = visible
   placeholderValue?: DateValue | null
   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 | null
   minValue?: DateValue | null
   onBlur?: (FocusEvent<Target>) => void
   onChange?: (MappedDateValue<DateValue> | null) => void
   onFocus?: (FocusEvent<Target>) => void
   onFocusChange?: (boolean) => void
   onKeyDown?: (KeyboardEvent) => void
   onKeyUp?: (KeyboardEvent) => void
   onOpenChange?: (boolean) => void
   pageBehavior?: PageBehavior = visible
   placeholderValue?: DateValue | null
   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 | null
   minValue?: DateValue | null
   onBlur?: (FocusEvent<Target>) => void
   onChange?: (RangeValue<MappedDateValue<DateValue>> | null) => void
   onFocus?: (FocusEvent<Target>) => void
   onFocusChange?: (boolean) => void
   onKeyDown?: (KeyboardEvent) => void
   onKeyUp?: (KeyboardEvent) => void
   onOpenChange?: (boolean) => void
   pageBehavior?: PageBehavior = visible
   placeholderValue?: DateValue | null
   shouldCloseOnSelect?: boolean | () => boolean = true
   shouldForceLeadingZeros?: boolean
   startName?: string
   validate?: (RangeValue<MappedDateValue<DateValue>>) => ValidationError | boolean | null | undefined
   validationBehavior?: 'aria' | 'native' = 'aria'
   value?: RangeValue<DateValue> | null
 }

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

packages/@react-spectrum/calendar/src/CalendarBase.tsx Outdated Show resolved Hide resolved

snowystinger reviewed Nov 20, 2024

View reviewed changes

packages/@react-spectrum/calendar/src/CalendarCell.tsx Outdated Show resolved Hide resolved

snowystinger reviewed Nov 20, 2024

View reviewed changes

packages/@react-spectrum/datepicker/src/DateRangePicker.tsx Outdated Show resolved Hide resolved

lint

38c0ed2

LFDanLu requested changes Jan 3, 2025

View reviewed changes

packages/@react-spectrum/calendar/stories/Calendar.stories.tsx Outdated Show resolved Hide resolved

reidbarber added 2 commits January 6, 2025 13:22

pass firstDayOfWeek into getWeeksInMonth

a6bf5a1

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

ad1a352

reidbarber added the release label Jan 6, 2025

ktabors reviewed Jan 7, 2025

View reviewed changes

LFDanLu previously approved these changes Jan 7, 2025

View reviewed changes

packages/@internationalized/date/src/queries.ts Outdated Show resolved Hide resolved

reidbarber added 2 commits January 8, 2025 10:00

add firstDayOfWeek param to endOfWeek

22d398f

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

779505b

reidbarber dismissed LFDanLu’s stale review via 779505b January 8, 2025 16:00

devongovett reviewed Jan 8, 2025

View reviewed changes

packages/@react-spectrum/calendar/src/CalendarCell.tsx Outdated Show resolved Hide resolved

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

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

add firstDayOfWeek to getDayOfWeek

6d061df

pass firstDayOfWeek to getDayOfWeek

34a3442

devongovett added 2 commits January 9, 2025 13:26

slight simplification and add tests

e631c51

add docs

32f9e25

devongovett reviewed Jan 9, 2025

View reviewed changes

devongovett approved these changes Jan 9, 2025

View reviewed changes

LFDanLu approved these changes Jan 9, 2025

View reviewed changes

reidbarber added this pull request to the merge queue Jan 9, 2025

Merged via the queue into main with commit 82a4de5 Jan 9, 2025
30 checks passed

reidbarber deleted the calendar-firstDayOfWeek branch January 9, 2025 19:48

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 Dec 23, 2024

LFDanLu commented Jan 3, 2025

rspbot commented Jan 6, 2025

ktabors Jan 7, 2025

reidbarber Jan 7, 2025

ktabors Jan 7, 2025

reidbarber Jan 7, 2025

LFDanLu left a comment

rspbot commented Jan 8, 2025

rspbot commented Jan 8, 2025

rspbot commented Jan 8, 2025

devongovett Jan 9, 2025

devongovett Jan 9, 2025

devongovett left a comment

rspbot commented Jan 9, 2025

rspbot commented Jan 9, 2025

feat(Calendar): Add firstDayOfWeek prop #7363

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 Dec 23, 2024

LFDanLu commented Jan 3, 2025

rspbot commented Jan 6, 2025

ktabors Jan 7, 2025

Choose a reason for hiding this comment

reidbarber Jan 7, 2025

Choose a reason for hiding this comment

ktabors Jan 7, 2025

Choose a reason for hiding this comment

reidbarber Jan 7, 2025

Choose a reason for hiding this comment

LFDanLu left a comment

Choose a reason for hiding this comment

rspbot commented Jan 8, 2025

rspbot commented Jan 8, 2025

rspbot commented Jan 8, 2025

devongovett Jan 9, 2025

Choose a reason for hiding this comment

devongovett Jan 9, 2025

Choose a reason for hiding this comment

devongovett left a comment

Choose a reason for hiding this comment

rspbot commented Jan 9, 2025

rspbot commented Jan 9, 2025

react-aria-components

/react-aria-components:Calendar

/react-aria-components:RangeCalendar

/react-aria-components:DatePicker

/react-aria-components:DateRangePicker

/react-aria-components:useFilter

/react-aria-components:CalendarProps

/react-aria-components:RangeCalendarProps

/react-aria-components:DatePickerProps

/react-aria-components:DateRangePickerProps

@internationalized/date

/@internationalized/date:getDayOfWeek

/@internationalized/date:startOfWeek

/@internationalized/date:endOfWeek

/@internationalized/date:getWeeksInMonth

@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-aria/overlays

/@react-aria/overlays:AriaPositionProps

@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-spectrum/s2

/@react-spectrum/s2:Menu

/@react-spectrum/s2:MenuProps

@react-stately/calendar

/@react-stately/calendar:CalendarStateOptions

/@react-stately/calendar:RangeCalendarStateOptions

@react-stately/datepicker

/@react-stately/datepicker:DateFieldStateOptions

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

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

reidbarber commented Nov 13, 2024 •

edited

Loading