Fix type regression in calendar #6790

snowystinger · 2024-07-29T03:41:51Z

Closes #6776

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

🧢 Your Project:

rspbot · 2024-07-29T03:57:09Z

Build successful! 🎉

LFDanLu · 2024-07-31T00:15:41Z

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

@@ -21,7 +21,7 @@ type MappedDateValue<T> =
  T extends CalendarDate ? CalendarDate :
  never;

-export interface CalendarPropsBase {
+export interface CalendarPropsBase extends AriaLabelingProps {


Is this supposed to have AriaLabelingProps here? It get added when AriaCalendarProps/etc gets defined, typically the base props don't extend the aria props

ah, might've added it at the wrong level, however, I'm not seeing it as a prop here https://react-spectrum.adobe.com/react-aria/Calendar.html#props and it was throwing an error in the tests trying to use the prop, I'll see about why it might not be exposed up higher

rspbot · 2024-07-31T08:02:51Z

Build successful! 🎉

LFDanLu

LGTM, guess we've been missing the ability to pass those aria attributes to Calendar all this time haha

rspbot · 2024-08-01T22:52:55Z

Build successful! 🎉

rspbot · 2024-08-07T21:48:32Z

Build successful! 🎉

rspbot · 2024-08-07T21:48:33Z

## API Changes

RangeCalendarProps already in set
RangeCalendar already in set

react-aria-components

Calendar

changed by:

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 | null
+  defaultValue?: DateValue | null
   focusedValue?: DateValue
+  id?: string
   isDateUnavailable?: (DateValue) => boolean
   isDisabled?: boolean = false
   isInvalid?: boolean
   isReadOnly?: boolean = false
   maxValue?: DateValue | null
   minValue?: DateValue | null
-  onChange?: (MappedDateValue<DateValue | null>) => void
+  onChange?: (MappedDateValue<DateValue>) => void
   onFocusChange?: (CalendarDate) => void
   pageBehavior?: PageBehavior = visible
   slot?: string | null
   style?: CSSProperties | ((CalendarRenderProps & {
     defaultStyle: CSSProperties
 })) => CSSProperties
-  value?: DateValue | null | null
+  value?: DateValue | null
   visibleDuration?: DateDuration = {months: 1}
 }

it changed:

AnyCalendarDate
Calendar
GregorianCalendar
JapaneseCalendar
BuddhistCalendar
TaiwanCalendar
PersianCalendar
IndianCalendar
IslamicCivilCalendar
IslamicTabularCalendar
IslamicUmalquraCalendar
HebrewCalendar
EthiopicCalendar
EthiopicAmeteAlemCalendar
CopticCalendar
toCalendarDate
toCalendar
getMinimumMonthInYear
getMinimumDayInMonth
AnyDateTime
createCalendar
toCalendar
CalendarStateOptions
useCalendarState
RangeCalendarStateOptions
useRangeCalendarState
DateFieldStateOptions
useDateFieldState
DateFieldState
DateFieldRenderProps
DateField
TimeField
DateFieldProps
TimeFieldProps
useDateSegment
useDateField
useDateFieldState
TimeFieldState
useTimeField
useTimeFieldState

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>
+  defaultValue?: RangeValue<DateValue> | null
   focusedValue?: DateValue
+  id?: string
   isDateUnavailable?: (DateValue) => boolean
   isDisabled?: boolean = false
   isInvalid?: boolean
   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
-  value?: RangeValue<DateValue | null>
+  value?: RangeValue<DateValue> | null
   visibleDuration?: DateDuration = {months: 1}
 }

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 | null
+  defaultValue?: DateValue | null
   focusedValue?: DateValue
+  id?: string
   isDateUnavailable?: (DateValue) => boolean
   isDisabled?: boolean = false
   isInvalid?: boolean
   isReadOnly?: boolean = false
   maxValue?: DateValue | null
   minValue?: DateValue | null
-  onChange?: (MappedDateValue<DateValue | null>) => void
+  onChange?: (MappedDateValue<DateValue>) => void
   onFocusChange?: (CalendarDate) => void
   pageBehavior?: PageBehavior = visible
   slot?: string | null
   style?: CSSProperties | ((CalendarRenderProps & {
     defaultStyle: CSSProperties
 })) => CSSProperties
-  value?: DateValue | null | null
+  value?: DateValue | null
   visibleDuration?: DateDuration = {months: 1}
 }

it changed:

DatePickerAria
useDatePicker

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>
+  defaultValue?: RangeValue<DateValue> | null
   focusedValue?: DateValue
+  id?: string
   isDateUnavailable?: (DateValue) => boolean
   isDisabled?: boolean = false
   isInvalid?: boolean
   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
-  value?: RangeValue<DateValue | null>
+  value?: RangeValue<DateValue> | null
   visibleDuration?: DateDuration = {months: 1}
 }

it changed:

DateRangePickerAria
useDateRangePicker

@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>
+  defaultValue?: RangeValue<DateValue> | null
   errorMessage?: ReactNode
   focusedValue?: DateValue
   id?: string
   isDateUnavailable?: (DateValue) => boolean
   isDisabled?: boolean = false
   isInvalid?: boolean
   isReadOnly?: boolean = false
   maxValue?: DateValue | null
   minValue?: DateValue | null
   onChange?: (T) => void
   onFocusChange?: (CalendarDate) => void
   pageBehavior?: PageBehavior = visible
-  value?: RangeValue<DateValue>
+  value?: RangeValue<DateValue> | null
 }

it changed:

useRangeCalendar

RangeCalendarProps

 RangeCalendarProps <T extends DateValue | null> {
   allowsNonContiguousRanges?: boolean
   autoFocus?: boolean = false
   defaultFocusedValue?: DateValue
-  defaultValue?: RangeValue<DateValue | null>
+  defaultValue?: RangeValue<DateValue | null> | null
   errorMessage?: ReactNode
   focusedValue?: DateValue
   isDateUnavailable?: (DateValue) => boolean
   isDisabled?: boolean = false
   isInvalid?: boolean
   isReadOnly?: boolean = false
   maxValue?: DateValue | null
   minValue?: DateValue | null
   onChange?: (T) => void
   onFocusChange?: (CalendarDate) => void
   pageBehavior?: PageBehavior = visible
-  value?: RangeValue<DateValue | null>
+  value?: RangeValue<DateValue | null> | null
 }

it changed:

DateRangePickerAria
useDateRangePicker

@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>
+  defaultValue?: RangeValue<DateValue> | null
   end?: Responsive<DimensionValue>
   errorMessage?: ReactNode
   flex?: Responsive<string | number | boolean>
   flexBasis?: Responsive<number | string>
   flexGrow?: Responsive<number>
   flexShrink?: Responsive<number>
   focusedValue?: DateValue
   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>
+  value?: RangeValue<DateValue> | null
   visibleMonths?: number = 1
   width?: Responsive<DimensionValue>
   zIndex?: Responsive<number>
 }

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>
+  defaultValue?: RangeValue<DateValue> | null
   end?: Responsive<DimensionValue>
   errorMessage?: ReactNode
   flex?: Responsive<string | number | boolean>
   flexBasis?: Responsive<number | string>
   flexGrow?: Responsive<number>
   flexShrink?: Responsive<number>
   focusedValue?: DateValue
   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>
+  value?: RangeValue<DateValue> | null
   visibleMonths?: number = 1
   width?: Responsive<DimensionValue>
   zIndex?: Responsive<number>
 }

@react-stately/calendar

RangeCalendarStateOptions

changed by:

Calendar
Calendar

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

it changed:

useRangeCalendarState

snowystinger added 2 commits July 29, 2024 12:56

Fix type regression in RangeCalendar

e9faceb

Adds ts to the tests and fixes errors as a result of that

e4f5ffe

snowystinger changed the title ~~Fix type regression calendar~~ Fix type regression in calendar Jul 29, 2024

yihuiliao previously approved these changes Jul 29, 2024

View reviewed changes

LFDanLu reviewed Jul 31, 2024

View reviewed changes

move up labelling props

b41f2bb

snowystinger dismissed yihuiliao’s stale review via b41f2bb July 31, 2024 07:48

akyllus approved these changes Jul 31, 2024

View reviewed changes

snowystinger and others added 2 commits July 31, 2024 20:26

Merge branch 'main' into fix-type-regression-calendar

b094c59

Merge branch 'main' into fix-type-regression-calendar

e3eba69

LFDanLu approved these changes Aug 1, 2024

View reviewed changes

yihuiliao approved these changes Aug 7, 2024

View reviewed changes

Merge branch 'main' into fix-type-regression-calendar

3dd4bd4

snowystinger merged commit dcfa1b0 into main Aug 7, 2024
29 checks passed

snowystinger deleted the fix-type-regression-calendar branch August 7, 2024 22:24

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Fix type regression in calendar #6790

Fix type regression in calendar #6790

snowystinger commented Jul 29, 2024

rspbot commented Jul 29, 2024

LFDanLu Jul 31, 2024

snowystinger Jul 31, 2024

rspbot commented Jul 31, 2024

LFDanLu left a comment

rspbot commented Aug 1, 2024

rspbot commented Aug 7, 2024

rspbot commented Aug 7, 2024

Fix type regression in calendar #6790

Fix type regression in calendar #6790

Conversation

snowystinger commented Jul 29, 2024

✅ Pull Request Checklist:

📝 Test Instructions:

🧢 Your Project:

rspbot commented Jul 29, 2024

LFDanLu Jul 31, 2024

Choose a reason for hiding this comment

snowystinger Jul 31, 2024

Choose a reason for hiding this comment

rspbot commented Jul 31, 2024

LFDanLu left a comment

Choose a reason for hiding this comment

rspbot commented Aug 1, 2024

rspbot commented Aug 7, 2024

rspbot commented Aug 7, 2024

react-aria-components

Calendar

RangeCalendar

CalendarProps

RangeCalendarProps

@react-aria/calendar

AriaRangeCalendarProps

RangeCalendarProps

@react-spectrum/calendar

RangeCalendar

SpectrumRangeCalendarProps

@react-stately/calendar

RangeCalendarStateOptions