TS Strict Calendar

[snowystinger]

Closes

I need help figuring out useRangeCalendarState I'm getting caught up trying to get the types to work for useControlledState

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

[ishank-s]

hi can work on this if you 're not actively doing this.

[snowystinger]

Thank you @ishank-s you're welcome to have a go at it

[ishank-s]

[rspbot]

Build successful! 🎉

• View the storybook
• View the storybook-canary
• View the storybook-17
• View the storybook-16
• View the documentation

[rspbot]

Build successful! 🎉

• View the storybook
• View the storybook-canary
• View the storybook-17
• View the storybook-16
• View the documentation

[rspbot]

## API Changes

unknown top level export { type: 'any' }
unknown top level export { type: 'any' }
unknown top level export { type: 'any' }
unknown top level export { type: 'any' }
unknown top level export { type: 'any', access: 'private' }
unknown top level export { type: 'any', access: 'private' }
unknown top level export { type: 'any' }
unknown top level export { type: 'any' }
unknown top level export { type: 'any' }
unknown top level export { type: 'any' }
unknown top level export { type: 'any' }
unknown top level export { type: 'any' }
unknown top level export { type: 'any' }
unknown top level export { type: 'any' }
unknown top level export { type: 'any' }
unknown top level export { type: 'any' }
unknown top level export { type: 'identifier', name: 'Column' }
unknown top level export { type: 'identifier', name: 'Column' }
unknown top level export { type: 'any' }
unknown top level export { type: 'any' }
unknown top level export { type: 'any' }
unknown top level export { type: 'any' }
unknown type { type: 'link' }
unknown type { type: 'link' }
unknown type { type: 'link' }
unknown type { type: 'link' }
unknown type { type: 'link' }
unknown type { type: 'link' }
unknown top level export { type: 'any' }
unknown top level export { type: 'any' }
unknown top level export { type: 'any' }
unknown top level export { type: 'any' }
unknown top level export { type: 'any' }
unknown top level export { type: 'any' }
undefined already in set
undefined already in set

@internationalized/date

minDate

 minDate<A extends DateValue, B extends DateValue> {
-  a: A
-  b: B
+  a?: A
+  b?: B
   returnVal: undefined
 }

maxDate

 maxDate<A extends DateValue, B extends DateValue> {
-  a: A
-  b: B
+  a?: A
+  b?: B
   returnVal: undefined
 }

---

@react-aria/calendar

CalendarProps

-CalendarProps<T extends DateValue> {
-  autoFocus?: boolean = false
-  defaultFocusedValue?: DateValue
-  errorMessage?: ReactNode
-  focusedValue?: DateValue
-  isDateUnavailable?: (DateValue) => boolean
-  isDisabled?: boolean = false
-  isInvalid?: boolean
-  isReadOnly?: boolean = false
-  maxValue?: DateValue
-  minValue?: DateValue
-  onFocusChange?: (CalendarDate) => void
-  pageBehavior?: PageBehavior = visible
-}
+

RangeCalendarProps

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

undefined

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

undefined

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

---

@react-stately/calendar

CalendarStateOptions

-CalendarStateOptions<T extends DateValue = DateValue> {
-  createCalendar: (string) => Calendar
-  locale: string
-  selectionAlignment?: 'start' | 'center' | 'end'
-  visibleDuration?: DateDuration = {months: 1}
-}
+

it changed:

• useCalendarState

RangeCalendarState

 RangeCalendarState {
   anchorDate: CalendarDate | null
   focusNextDay: () => void
   focusNextPage: () => void
   focusNextRow: () => void
   focusNextSection: (boolean) => void
   focusPreviousDay: () => void
   focusPreviousPage: () => void
   focusPreviousRow: () => void
   focusPreviousSection: (boolean) => void
   focusSectionEnd: () => void
   focusSectionStart: () => void
   focusedDate: CalendarDate
   getDatesInWeek: (number, CalendarDate) => Array<CalendarDate | null>
   highlightDate: (CalendarDate) => void
-  highlightedRange: RangeValue<CalendarDate>
+  highlightedRange: RangeValue<CalendarDate> | null
   isCellDisabled: (CalendarDate) => boolean
   isCellFocused: (CalendarDate) => boolean
   isCellUnavailable: (CalendarDate) => boolean
   isDisabled: boolean
   isDragging: boolean
   isFocused: boolean
   isInvalid: (CalendarDate) => boolean
   isNextVisibleRangeInvalid: () => boolean
   isPreviousVisibleRangeInvalid: () => boolean
   isReadOnly: boolean
   isSelected: (CalendarDate) => boolean
   isValueInvalid: boolean
   maxValue?: DateValue
   minValue?: DateValue
   selectDate: (CalendarDate) => void
   selectFocusedDate: () => void
   setAnchorDate: (CalendarDate | null) => void
   setDragging: (boolean) => void
   setFocused: (boolean) => void
   setFocusedDate: (CalendarDate) => void
-  setValue: (RangeValue<DateValue>) => void
+  setValue: (RangeValue<DateValue> | null) => void
   timeZone: string
-  value: RangeValue<DateValue>
+  value: RangeValue<DateValue> | null
   visibleRange: RangeValue<CalendarDate>
 }

undefined

-
+CalendarStateOptions<T extends DateValue> {
+  createCalendar: (string) => Calendar
+  locale: string
+  selectionAlignment?: 'start' | 'center' | 'end'
+  visibleDuration?: DateDuration = {months: 1}
+}

---