-
Notifications
You must be signed in to change notification settings - Fork 1.1k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Enable TS strict mode for React Aria Components #4225
Conversation
Build successful! 🎉 |
Build successful! 🎉 |
6e86bfd
to
3e6b367
Compare
Build successful! 🎉 |
Build successful! 🎉 |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
LGTM
…onents-ts-strict # Conflicts: # packages/react-aria-components/docs/Table.mdx # packages/react-aria-components/src/Collection.tsx # packages/react-aria-components/src/GridList.tsx # packages/react-aria-components/src/ListBox.tsx # packages/react-aria-components/src/Table.tsx # packages/react-aria-components/src/utils.tsx
Merged in main, and updated the drag and drop examples and code to TS strict as well. In order to make this nicer, I also added |
Build successful! 🎉 |
@@ -842,8 +842,13 @@ function DraggableListBox() { | |||
Dropping on the ListBox as a whole can be enabled using the `onRootDrop` event. When a valid drag hovers over the ListBox, it receives the `isDropTarget` state and can be styled using the `[data-drop-target]` CSS selector. | |||
|
|||
```tsx example | |||
interface Item { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I feel like this should be a type we export since it's used a couple times, but it's just for examples to show what to do.
Build successful! 🎉 |
## API Changes
unknown top level export { type: 'identifier', name: 'Column' } @react-aria/dndisVirtualDragging-
+isDirectoryDropItem {
+ dropItem: DropItem
+ returnVal: undefined
+} isDirectoryDropItem-
+isFileDropItem {
+ dropItem: DropItem
+ returnVal: undefined
+} isFileDropItem-
+isTextDropItem {
+ dropItem: DropItem
+ returnVal: undefined
+} @react-aria/tabsuseTabListchanged by:
useTabList<T> {
- props: AriaTabListProps<T>
+ props: AriaTabListOptions<T>
state: TabListState<T>
ref: RefObject<HTMLElement>
returnVal: undefined
} AriaTabListOptions+AriaTabListOptions<T> {
+} it changed:
@react-aria/utilsmergeProps-mergeProps<T extends Array<Props>> {
- args: T
- returnVal: undefined
-}
+ isVirtualPointerEvent-
+mergeProps<T extends Array<PropsArg>> {
+ args: T
+ returnVal: undefined
+} @react-stately/calendaruseCalendarStatechanged by:
-useCalendarState {
- props: CalendarStateOptions
- returnVal: undefined
-}
+ useRangeCalendarStatechanged by:
-useRangeCalendarState {
- props: RangeCalendarStateOptions
- returnVal: undefined
-}
+ CalendarStateOptions-CalendarStateOptions {
- createCalendar: (string) => Calendar
- locale: string
- selectionAlignment?: 'start' | 'center' | 'end'
- visibleDuration?: DateDuration = {months: 1}
-}
+ it changed:
RangeCalendarStateOptions-RangeCalendarStateOptions {
- createCalendar: (string) => Calendar
- locale: string
- visibleDuration?: DateDuration = {months: 1}
-}
+ it changed:
undefined-
+useCalendarState<T extends DateValue = DateValue> {
+ props: CalendarStateOptions<T>
+ returnVal: undefined
+} undefined-
+useRangeCalendarState<T extends DateValue = DateValue> {
+ props: RangeCalendarStateOptions<T>
+ returnVal: undefined
+} undefined-
+CalendarStateOptions<T extends DateValue = DateValue> {
+ createCalendar: (string) => Calendar
+ locale: string
+ selectionAlignment?: 'start' | 'center' | 'end'
+ visibleDuration?: DateDuration = {months: 1}
+} undefined-
+RangeCalendarStateOptions<T extends DateValue = DateValue> {
+ createCalendar: (string) => Calendar
+ locale: string
+ visibleDuration?: DateDuration = {months: 1}
+} @react-stately/datepickeruseDateFieldStatechanged by:
-useDateFieldState {
- props: DateFieldStateOptions
- returnVal: undefined
-}
+ useDateRangePickerStatechanged by:
-useDateRangePickerState {
- props: DateRangePickerStateOptions
- returnVal: undefined
-}
+ useTimeFieldStatechanged by:
-useTimeFieldState {
- props: TimeFieldStateOptions
- returnVal: undefined
-}
+ DateFieldStateOptions-DateFieldStateOptions {
- createCalendar: (string) => Calendar
- locale: string
- maxGranularity?: 'year' | 'month' | Granularity = 'year'
-}
+ it changed:
DateRangePickerStateOptions-DateRangePickerStateOptions {
- shouldCloseOnSelect?: boolean | () => boolean = true
-}
+ it changed:
TimeFieldStateOptions-TimeFieldStateOptions {
- locale: string
-}
+ it changed:
undefined-
+useDateFieldState<T extends DateValue = DateValue> {
+ props: DateFieldStateOptions<T>
+ returnVal: undefined
+} undefined-
+useDateRangePickerState<T extends DateValue = DateValue> {
+ props: DateRangePickerStateOptions<T>
+ returnVal: undefined
+} undefined-
+useTimeFieldState<T extends TimeValue = TimeValue> {
+ props: TimeFieldStateOptions<T>
+ returnVal: undefined
+} undefined-
+DateFieldStateOptions<T extends DateValue = DateValue> {
+ createCalendar: (string) => Calendar
+ locale: string
+ maxGranularity?: 'year' | 'month' | Granularity = 'year'
+} undefined-
+DateRangePickerStateOptions<T extends DateValue = DateValue> {
+ shouldCloseOnSelect?: boolean | () => boolean = true
+} undefined-
+TimeFieldStateOptions<T extends TimeValue = TimeValue> {
+ locale: string
+} |
Builds on #4212.
This converts the code and examples for React Aria Components to TS strict mode. It also improves the types for:
null
to thevalue
prop types. Part of DateRangePicker's controlled value can't be set to null to show the placeholder instead of the previous selected date #3187.children
as a required prop foruseTabList
.isTextDropItem
,isFileDropItem
, andisDirectoryDropItem
functions which act as TS type predicates.