TS Strict Calendar #6076

snowystinger · 2024-03-19T06:19:30Z

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 · 2024-04-09T06:38:43Z

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

snowystinger · 2024-04-10T04:14:55Z

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

ishank-s · 2024-04-14T11:03:10Z

Contributor help <3

# Conflicts: # packages/@react-stately/calendar/src/useCalendarState.ts

rspbot · 2024-05-13T11:00:23Z

Build successful! 🎉

rspbot · 2024-05-13T11:52:36Z

Build successful! 🎉

rspbot · 2024-05-21T04:35:07Z

Build successful! 🎉

snowystinger · 2024-05-13T11:10:28Z

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

@@ -71,7 +70,7 @@ export function useCalendarState<T extends DateValue = DateValue>(props: Calenda
  } = props;
  let calendar = useMemo(() => createCalendar(resolvedOptions.calendar), [createCalendar, resolvedOptions.calendar]);

-  let [value, setControlledValue] = useControlledState<DateValue>(props.value, props.defaultValue, props.onChange);
+  let [value, setControlledValue] = useControlledState<DateValue | null, MappedDateValue<T>>(props.value!, props.defaultValue ?? null!, props.onChange);


I'm not certain we can fix useControlledState without overload syntax. This is the only way I've seen to prevent that syntax from propagating to every hook and component that uses useControlledState, but I'm open to other ideas.

I'm also unable to reproduce the issue in ts playground https://tinyurl.com/2p98znas
I don't know if that means I've over engineered it or have missed some setting

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

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

devongovett · 2024-05-30T03:03:49Z

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

  }

  if (maxValue) {
-    date = minDate(date, toCalendarDate(maxValue));
+    let newDate = minDate(date, toCalendarDate(maxValue));


Why can minDate return null?

it can't? only A | B | undefined

devongovett · 2024-05-30T03:06:24Z

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

@@ -238,7 +238,7 @@ export function getWeeksInMonth(date: DateValue, locale: string): number {
 }

 /** Returns the lesser of the two provider dates. */
-export function minDate<A extends DateValue, B extends DateValue>(a: A, b: B): A | B {
+export function minDate<A extends DateValue, B extends DateValue>(a?: A, b?: B): A | B | undefined {


Where do we pass in null/undefined for these?

If we keep this, I guess the parameters shouldn't be optional but should allow null/undefined? I think making them optional only allows undefined not null.

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

Line 66 in 1cacbf1

let max = useMemo(() => minDate(maxValue, availableRange?.end), [maxValue, availableRange]);

why allow null? we only pass it undefined

Seems like if we are going to allow undefined we'd also want to allow null 🤷

I think better not to have to account for both and we just restrict it to one of them. You can check it out in the latest commit though.

rspbot · 2024-05-31T01:41:38Z

Build successful! 🎉

rspbot · 2024-05-31T04:57:20Z

Build successful! 🎉

rspbot · 2024-05-31T05:07:49Z

Build successful! 🎉

rspbot · 2024-05-31T05:07:50Z

## 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: '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

@internationalized/date

minDate

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

maxDate

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

@react-aria/calendar

AriaCalendarProps

 AriaCalendarProps<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
+  maxValue?: DateValue | null
+  minValue?: DateValue | null
   onFocusChange?: (CalendarDate) => void
   pageBehavior?: PageBehavior = visible
 }

AriaRangeCalendarProps

 AriaRangeCalendarProps<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
+  maxValue?: DateValue | null
+  minValue?: DateValue | null
   onFocusChange?: (CalendarDate) => void
   pageBehavior?: PageBehavior = visible
 }

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 | null
+  minValue?: DateValue | null
+  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 | null
+  minValue?: DateValue | null
+  onFocusChange?: (CalendarDate) => void
+  pageBehavior?: PageBehavior = visible
+}

@react-spectrum/calendar

Calendar

changed by:

Calendar

 SpectrumCalendarProps<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
+  maxValue?: DateValue | null
+  minValue?: DateValue | null
   onFocusChange?: (CalendarDate) => void
   pageBehavior?: PageBehavior = visible
   visibleMonths?: number = 1
 }

it changed:

AnyCalendarDate
Calendar
AnyDateTime

RangeCalendar

 SpectrumRangeCalendarProps<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
+  maxValue?: DateValue | null
+  minValue?: DateValue | null
   onFocusChange?: (CalendarDate) => void
   pageBehavior?: PageBehavior = visible
   visibleMonths?: number = 1
 }

@react-stately/calendar

CalendarState

 CalendarState {
   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>
   isCellDisabled: (CalendarDate) => boolean
   isCellFocused: (CalendarDate) => boolean
   isCellUnavailable: (CalendarDate) => boolean
   isDisabled: boolean
   isFocused: boolean
   isInvalid: (CalendarDate) => boolean
   isNextVisibleRangeInvalid: () => boolean
   isPreviousVisibleRangeInvalid: () => boolean
   isReadOnly: boolean
   isSelected: (CalendarDate) => boolean
   isValueInvalid: boolean
-  maxValue?: DateValue
-  minValue?: DateValue
+  maxValue?: DateValue | null
+  minValue?: DateValue | null
   selectDate: (CalendarDate) => void
   selectFocusedDate: () => void
   setFocused: (boolean) => void
   setFocusedDate: (CalendarDate) => void
   timeZone: string
   value: CalendarDate | null
   visibleRange: RangeValue<CalendarDate>
 }

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
+  maxValue?: DateValue | null
+  minValue?: DateValue | null
   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>
 }

snowystinger and others added 2 commits March 19, 2024 17:18

TS Strict Calendar

9bf4f3c

Merge branch 'main' into ts-strict-calendar-state

dc11a0c

ishank-s mentioned this pull request Apr 14, 2024

ts-strict calender fix types #6201

Merged

5 tasks

snowystinger mentioned this pull request May 8, 2024

DatePicker and DateRangePicker onChange parameter type should include null. #6339

Closed

ishank-s and others added 2 commits May 13, 2024 18:35

ts-strict calender fix types (#6201)

8cbc612

Contributor help <3

Merge branch 'main' into ts-strict-calendar-state

33946eb

# Conflicts: # packages/@react-stately/calendar/src/useCalendarState.ts

snowystinger added 2 commits May 13, 2024 21:31

type cleanup

060684c

human linting

644984b

Merge branch 'main' into ts-strict-calendar-state

6aecf6f

snowystinger commented May 21, 2024

View reviewed changes

devongovett reviewed May 30, 2024

View reviewed changes

code review changes

f89b381

snowystinger added 2 commits May 31, 2024 14:01

support 'null' for optional arguments

a1cb238

Merge branch 'main' into ts-strict-calendar-state

1ec4fdf

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

TS Strict Calendar #6076

TS Strict Calendar #6076

snowystinger commented Mar 19, 2024

ishank-s commented Apr 9, 2024

snowystinger commented Apr 10, 2024

ishank-s commented Apr 14, 2024

rspbot commented May 13, 2024

rspbot commented May 13, 2024

rspbot commented May 21, 2024

snowystinger May 13, 2024 •

edited

devongovett May 30, 2024

snowystinger May 31, 2024

devongovett May 30, 2024

snowystinger May 30, 2024

snowystinger May 31, 2024

devongovett May 31, 2024

snowystinger May 31, 2024

rspbot commented May 31, 2024

rspbot commented May 31, 2024

rspbot commented May 31, 2024

rspbot commented May 31, 2024

TS Strict Calendar #6076

Are you sure you want to change the base?

TS Strict Calendar #6076

Conversation

snowystinger commented Mar 19, 2024

✅ Pull Request Checklist:

📝 Test Instructions:

🧢 Your Project:

ishank-s commented Apr 9, 2024

snowystinger commented Apr 10, 2024

ishank-s commented Apr 14, 2024

rspbot commented May 13, 2024

rspbot commented May 13, 2024

rspbot commented May 21, 2024

snowystinger May 13, 2024 • edited

Choose a reason for hiding this comment

devongovett May 30, 2024

Choose a reason for hiding this comment

snowystinger May 31, 2024

Choose a reason for hiding this comment

devongovett May 30, 2024

Choose a reason for hiding this comment

snowystinger May 30, 2024

Choose a reason for hiding this comment

snowystinger May 31, 2024

Choose a reason for hiding this comment

devongovett May 31, 2024

Choose a reason for hiding this comment

snowystinger May 31, 2024

Choose a reason for hiding this comment

rspbot commented May 31, 2024

rspbot commented May 31, 2024

rspbot commented May 31, 2024

rspbot commented May 31, 2024

@internationalized/date

minDate

maxDate

@react-aria/calendar

AriaCalendarProps

AriaRangeCalendarProps

CalendarProps

RangeCalendarProps

undefined

undefined

@react-spectrum/calendar

Calendar

RangeCalendar

@react-stately/calendar

CalendarState

RangeCalendarState

snowystinger May 13, 2024 •

edited