Skip to content

Conversation

devongovett
Copy link
Member

@devongovett devongovett commented Mar 15, 2023

This converts the examples in the React Aria Components docs to TypeScript, and fixes some type issues in the implementation.

  • forwardRef on components with generics. I added a helper type to the utils that we can cast the forwardRef function to which supports generics unlike the default type.
  • Added missing exports to react-aria and react-stately monopackages to reduce use of individual types packages.
  • Made slider types generic. Unfortunately this breaks inference until we can turn on strictFunctionTypes. For now I had to add additional annotations.

@rspbot
Copy link

rspbot commented Mar 15, 2023

Copy link
Member

@snowystinger snowystinger left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Docs look good for modified examples

@rspbot
Copy link

rspbot commented Mar 17, 2023

@rspbot
Copy link

rspbot commented Mar 17, 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' }
DateValue already in set
Orientation already in set
Orientation already in set

@react-aria/calendar

DateValue

-
+DateValue {
+  D: undefined
+}

it changed:

  • isSameDay
  • isSameMonth
  • isSameYear
  • isEqualDay
  • isEqualMonth
  • isEqualYear
  • isToday
  • getDayOfWeek
  • startOfMonth
  • startOfWeek
  • startOfYear
  • endOfMonth
  • endOfWeek
  • endOfYear
  • getWeeksInMonth
  • minDate
  • maxDate
  • isWeekend
  • isWeekday
  • AriaCalendarProps
  • AriaRangeCalendarProps
  • CalendarProps
  • RangeCalendarProps
  • AriaDatePickerProps
  • AriaDateRangePickerProps
  • AriaDateFieldProps
  • useDateField
  • DateRange
  • SpectrumCalendarProps
  • SpectrumRangeCalendarProps
  • SpectrumDateFieldProps
  • SpectrumDatePickerProps
  • SpectrumDateRangePickerProps

@react-aria/combobox

AriaComboBoxProps

-
+AriaComboBoxProps<T> {
+  allowsCustomValue?: boolean
+  defaultInputValue?: string
+  defaultItems?: Iterable<T>
+  inputValue?: string
+  items?: Iterable<T>
+  menuTrigger?: MenuTriggerAction = 'input'
+  name?: string
+  onInputChange?: (string) => void
+  onOpenChange?: (boolean, MenuTriggerAction) => void
+  shouldFocusWrap?: boolean
+}

@react-aria/datepicker

useDateField

changed by:

  • AriaDateFieldProps
  • DateValue
  • AriaDateFieldOptions
 useDateField<T extends DateValue> {
-  props: AriaDateFieldProps<T>
+  props: AriaDateFieldOptions<T>
   state: DateFieldState
   ref: RefObject<Element>
   returnVal: undefined
 }

AriaDateFieldProps

changed by:

  • DateValue
 AriaDateFieldProps<T extends DateValue> {
-
+  granularity?: Granularity
+  hideTimeZone?: boolean = false
+  hourCycle?: number | number
+  isDateUnavailable?: (DateValue) => boolean
+  maxValue?: DateValue
+  minValue?: DateValue
+  placeholderValue?: DateValue
 }

it changed:

  • useDateField

DateRange

changed by:

  • DateValue
-
+DateRange {
+  D: undefined
+}

DateValue

-
+DateValue {
+  D: undefined
+}

it changed:

  • isSameDay
  • isSameMonth
  • isSameYear
  • isEqualDay
  • isEqualMonth
  • isEqualYear
  • isToday
  • getDayOfWeek
  • startOfMonth
  • startOfWeek
  • startOfYear
  • endOfMonth
  • endOfWeek
  • endOfYear
  • getWeeksInMonth
  • minDate
  • maxDate
  • isWeekend
  • isWeekday
  • AriaCalendarProps
  • AriaRangeCalendarProps
  • CalendarProps
  • RangeCalendarProps
  • AriaDatePickerProps
  • AriaDateRangePickerProps
  • AriaDateFieldProps
  • useDateField
  • DateRange
  • SpectrumCalendarProps
  • SpectrumRangeCalendarProps
  • SpectrumDateFieldProps
  • SpectrumDatePickerProps
  • SpectrumDateRangePickerProps

TimeValue

-
+TimeValue {
+  T: undefined
+}

it changed:

  • AriaTimeFieldProps
  • SpectrumTimeFieldProps

AriaDateFieldOptions

+AriaDateFieldOptions<T extends DateValue> {
 
+}

it changed:

  • useDateField

@react-aria/overlays

Placement

-
+Placement {
+  P: undefined
+}

it changed:

  • PositionProps

PlacementAxis

-
+PlacementAxis {
+  P: undefined
+}

PositionProps

changed by:

  • Placement
-
+PositionProps {
+  containerPadding?: number = 12
+  crossOffset?: number = 0
+  isOpen?: boolean
+  offset?: number = 0
+  placement?: Placement = 'bottom'
+  shouldFlip?: boolean = true
+}

@react-aria/radio

Orientation

-
+Orientation {
+  O: undefined
+}

@react-aria/select

AriaSelectProps

-
+AriaSelectProps<T> {
+  autoComplete?: string
+  defaultOpen?: boolean
+  isOpen?: boolean
+  name?: string
+  onOpenChange?: (boolean) => void
+}

@react-aria/slider

AriaSliderThumbProps

-
+AriaSliderThumbProps {
+  index?: number = 0
+  isDisabled?: boolean
+}

Orientation

-
+Orientation {
+  O: undefined
+}

@react-aria/tabs

Orientation

-
+Orientation {
+  O: undefined
+}

@react-stately/table

buildHeaderRows

-
+buildHeaderRows<T> {
+  keyMap: Map<Key, GridNode<T>>
+  columnNodes: Array<GridNode<T>>
+  returnVal: undefined
+}

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

@devongovett devongovett merged commit 17d75d8 into main Mar 17, 2023
@devongovett devongovett deleted the aria-component-docs-ts branch March 17, 2023 23:42
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.

4 participants