Skip to content
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

Merged
merged 12 commits into from
Mar 21, 2023

Conversation

devongovett
Copy link
Member

@devongovett devongovett commented Mar 17, 2023

Builds on #4212.

This converts the code and examples for React Aria Components to TS strict mode. It also improves the types for:

@rspbot
Copy link

rspbot commented Mar 17, 2023

@rspbot
Copy link

rspbot commented Mar 17, 2023

Base automatically changed from aria-component-docs-ts to main March 17, 2023 23:42
@rspbot
Copy link

rspbot commented Mar 17, 2023

@rspbot
Copy link

rspbot commented Mar 18, 2023

LFDanLu
LFDanLu previously approved these changes Mar 18, 2023
Copy link
Member

@LFDanLu LFDanLu left a 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
@devongovett
Copy link
Member Author

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 isTextDropItem, isFileDropItem, and isDirectoryDropItem functions which act as TS type predicates as suggested in #3765. This makes it easier to filter drop items by kind, while enabling TypeScript to narrow the type from DropItem to TextDropItem etc. for use in subsequent array mapping.

@rspbot
Copy link

rspbot commented Mar 21, 2023

@@ -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 {
Copy link
Member

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.

@rspbot
Copy link

rspbot commented Mar 21, 2023

@rspbot
Copy link

rspbot commented Mar 21, 2023

## API Changes

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

@react-aria/dnd

isVirtualDragging

-
+isDirectoryDropItem {
+  dropItem: DropItem
+  returnVal: undefined
+}

isDirectoryDropItem

-
+isFileDropItem {
+  dropItem: DropItem
+  returnVal: undefined
+}

isFileDropItem

-
+isTextDropItem {
+  dropItem: DropItem
+  returnVal: undefined
+}

@react-aria/tabs

useTabList

changed by:

  • AriaTabListOptions
 useTabList<T> {
-  props: AriaTabListProps<T>
+  props: AriaTabListOptions<T>
   state: TabListState<T>
   ref: RefObject<HTMLElement>
   returnVal: undefined
 }

AriaTabListOptions

+AriaTabListOptions<T> {
 
+}

it changed:

  • useTabList

@react-aria/utils

mergeProps

-mergeProps<T extends Array<Props>> {
-  args: T
-  returnVal: undefined
-}
+

isVirtualPointerEvent

-
+mergeProps<T extends Array<PropsArg>> {
+  args: T
+  returnVal: undefined
+}

@react-stately/calendar

useCalendarState

changed by:

  • CalendarStateOptions
-useCalendarState {
-  props: CalendarStateOptions
-  returnVal: undefined
-}
+

useRangeCalendarState

changed by:

  • RangeCalendarStateOptions
-useRangeCalendarState {
-  props: RangeCalendarStateOptions
-  returnVal: undefined
-}
+

CalendarStateOptions

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

it changed:

  • useCalendarState

RangeCalendarStateOptions

-RangeCalendarStateOptions {
-  createCalendar: (string) => Calendar
-  locale: string
-  visibleDuration?: DateDuration = {months: 1}
-}
+

it changed:

  • useRangeCalendarState

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/datepicker

useDateFieldState

changed by:

  • DateFieldStateOptions
-useDateFieldState {
-  props: DateFieldStateOptions
-  returnVal: undefined
-}
+

useDateRangePickerState

changed by:

  • DateRangePickerStateOptions
-useDateRangePickerState {
-  props: DateRangePickerStateOptions
-  returnVal: undefined
-}
+

useTimeFieldState

changed by:

  • TimeFieldStateOptions
-useTimeFieldState {
-  props: TimeFieldStateOptions
-  returnVal: undefined
-}
+

DateFieldStateOptions

-DateFieldStateOptions {
-  createCalendar: (string) => Calendar
-  locale: string
-  maxGranularity?: 'year' | 'month' | Granularity = 'year'
-}
+

it changed:

  • useDateFieldState

DateRangePickerStateOptions

-DateRangePickerStateOptions {
-  shouldCloseOnSelect?: boolean | () => boolean = true
-}
+

it changed:

  • useDateRangePickerState

TimeFieldStateOptions

-TimeFieldStateOptions {
-  locale: string
-}
+

it changed:

  • useTimeFieldState

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
+}

@devongovett devongovett merged commit c3a32cc into main Mar 21, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

6 participants