fix: change stately to use arrow fn types (#8663)

packages/@react-stately/autocomplete/src/useAutocompleteState.ts

@@ -17,11 +17,11 @@ export interface AutocompleteState {
   /** The current value of the autocomplete input. */
   inputValue: string,
   /** Sets the value of the autocomplete input. */
-  setInputValue(value: string): void,
+  setInputValue: (value: string) => void,
   /** The id of the current aria-activedescendant of the autocomplete input. */
   focusedNodeId: string | null,
   /** Sets the id of the current aria-activedescendant of the autocomplete input. */
-  setFocusedNodeId(value: string | null): void
+  setFocusedNodeId: (value: string | null) => void
 }
 
 export interface AutocompleteProps {

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

@@ -37,90 +37,90 @@ interface CalendarStateBase {
   /** The currently focused date. */
   readonly focusedDate: CalendarDate,
   /** Sets the focused date. */
-  setFocusedDate(value: CalendarDate): void,
+  setFocusedDate: (value: CalendarDate) => void,
   /** Moves focus to the next calendar date. */
-  focusNextDay(): void,
+  focusNextDay: () => void,
   /** Moves focus to the previous calendar date. */
-  focusPreviousDay(): void,
+  focusPreviousDay: () => void,
   /** Moves focus to the next row of dates, e.g. the next week. */
-  focusNextRow(): void,
+  focusNextRow: () => void,
   /** Moves focus to the previous row of dates, e.g. the previous work. */
-  focusPreviousRow(): void,
+  focusPreviousRow: () => void,
   /** Moves focus to the next page of dates, e.g. the next month if one month is visible. */
-  focusNextPage(): void,
+  focusNextPage: () => void,
   /** Moves focus to the previous page of dates, e.g. the previous month if one month is visible. */
-  focusPreviousPage(): void,
+  focusPreviousPage: () => void,
   /** Moves focus to the start of the current section of dates, e.g. the start of the current month. */
-  focusSectionStart(): void,
+  focusSectionStart: () => void,
   /** Moves focus to the end of the current section of dates, e.g. the end of the current month month. */
-  focusSectionEnd(): void,
+  focusSectionEnd: () => void,
   /**
    * Moves focus to the next section of dates based on what is currently displayed.
    * By default, focus is moved by one of the currently displayed unit. For example, if
    * one or more months are displayed, then focus is moved forward by one month.
    * If the `larger` option is `true`, the focus is moved by the next larger unit than
    * the one displayed. For example, if months are displayed, then focus moves to the next year.
    */
-  focusNextSection(larger?: boolean): void,
+  focusNextSection: (larger?: boolean) => void,
   /**
    * Moves focus to the previous section of dates based on what is currently displayed.
    * By default, focus is moved by one of the currently displayed unit. For example, if
    * one or more months are displayed, then focus is moved backward by one month.
    * If the `larger` option is `true`, the focus is moved by the next larger unit than
    * the one displayed. For example, if months are displayed, then focus moves to the previous year.
    */
-  focusPreviousSection(larger?: boolean): void,
+  focusPreviousSection: (larger?: boolean) => void,
   /** Selects the currently focused date. */
-  selectFocusedDate(): void,
+  selectFocusedDate: () => void,
   /** Selects the given date. */
-  selectDate(date: CalendarDate): void,
+  selectDate: (date: CalendarDate) => void,
   /** Whether focus is currently within the calendar. */
   readonly isFocused: boolean,
   /** Sets whether focus is currently within the calendar. */
-  setFocused(value: boolean): void,
+  setFocused: (value: boolean) => void,
   /** Returns whether the given date is invalid according to the `minValue` and `maxValue` props. */
-  isInvalid(date: CalendarDate): boolean,
+  isInvalid: (date: CalendarDate) => boolean,
   /** Returns whether the given date is currently selected. */
-  isSelected(date: CalendarDate): boolean,
+  isSelected: (date: CalendarDate) => boolean,
   /** Returns whether the given date is currently focused. */
-  isCellFocused(date: CalendarDate): boolean,
+  isCellFocused: (date: CalendarDate) => boolean,
   /** Returns whether the given date is disabled according to the `minValue, `maxValue`, and `isDisabled` props. */
-  isCellDisabled(date: CalendarDate): boolean,
+  isCellDisabled: (date: CalendarDate) => boolean,
   /** Returns whether the given date is unavailable according to the `isDateUnavailable` prop. */
-  isCellUnavailable(date: CalendarDate): boolean,
+  isCellUnavailable: (date: CalendarDate) => boolean,
   /** Returns whether the previous visible date range is allowed to be selected according to the `minValue` prop. */
-  isPreviousVisibleRangeInvalid(): boolean,
+  isPreviousVisibleRangeInvalid: () => boolean,
   /** Returns whether the next visible date range is allowed to be selected according to the `maxValue` prop. */
-  isNextVisibleRangeInvalid(): boolean,
+  isNextVisibleRangeInvalid: () => boolean,
   /**
    * Returns an array of dates in the week index counted from the provided start date, or the first visible date if not given.
    * The returned array always has 7 elements, but may include null if the date does not exist according to the calendar system.
    */
-  getDatesInWeek(weekIndex: number, startDate?: CalendarDate): Array<CalendarDate | null>
+  getDatesInWeek: (weekIndex: number, startDate?: CalendarDate) => Array<CalendarDate | null>
 }
 
 export interface CalendarState extends CalendarStateBase {
   /** The currently selected date. */
   readonly value: CalendarDate | null,
   /** Sets the currently selected date. */
-  setValue(value: CalendarDate | null): void
+  setValue: (value: CalendarDate | null) => void
 }
 
 export interface RangeCalendarState extends CalendarStateBase {
   /** The currently selected date range. */
   readonly value: RangeValue<DateValue> | null,
   /** Sets the currently selected date range. */
-  setValue(value: RangeValue<DateValue> | null): void,
+  setValue: (value: RangeValue<DateValue> | null) => void,
   /** Highlights the given date during selection, e.g. by hovering or dragging. */
-  highlightDate(date: CalendarDate): void,
+  highlightDate: (date: CalendarDate) => void,
   /** The current anchor date that the user clicked on to begin range selection. */
   readonly anchorDate: CalendarDate | null,
   /** Sets the anchor date that the user clicked on to begin range selection. */
-  setAnchorDate(date: CalendarDate | null): void,
+  setAnchorDate: (date: CalendarDate | null) => void,
   /** The currently highlighted date range. */
   readonly highlightedRange: RangeValue<CalendarDate> | null,
   /** Whether the user is currently dragging over the calendar. */
   readonly isDragging: boolean,
   /** Sets whether the user is dragging over the calendar. */
-  setDragging(isDragging: boolean): void
+  setDragging: (isDragging: boolean) => void
 }

packages/@react-stately/checkbox/src/useCheckboxGroupState.ts

@@ -44,22 +44,22 @@ export interface CheckboxGroupState extends FormValidationState {
   readonly isRequired: boolean,
 
   /** Returns whether the given value is selected. */
-  isSelected(value: string): boolean,
+  isSelected: (value: string) => boolean,
 
   /** Sets the selected values. */
-  setValue(value: string[]): void,
+  setValue: (value: string[]) => void,
 
   /** Adds a value to the set of selected values. */
-  addValue(value: string): void,
+  addValue: (value: string) => void,
 
   /** Removes a value from the set of selected values. */
-  removeValue(value: string): void,
+  removeValue: (value: string) => void,
 
   /** Toggles a value in the set of selected values. */
-  toggleValue(value: string): void,
+  toggleValue: (value: string) => void,
 
   /** Sets whether one of the checkboxes is invalid. */
-  setInvalid(value: string, validation: ValidationResult): void
+  setInvalid: (value: string, validation: ValidationResult) => void
 }
 
 /**

packages/@react-stately/color/src/useColorAreaState.ts

@@ -21,37 +21,37 @@ export interface ColorAreaState {
   /** The default value of the color area. */
   readonly defaultValue: Color,
   /** Sets the current color value. If a string is passed, it will be parsed to a Color. */
-  setValue(value: string | Color): void,
+  setValue: (value: string | Color) => void,
 
   /** The current value of the horizontal axis channel displayed by the color area. */
   xValue: number,
   /** Sets the value for the horizontal axis channel displayed by the color area, and triggers `onChange`. */
-  setXValue(value: number): void,
+  setXValue: (value: number) => void,
 
   /** The current value of the vertical axis channel displayed by the color area. */
   yValue: number,
   /** Sets the value for the vertical axis channel displayed by the color area, and triggers `onChange`. */
-  setYValue(value: number): void,
+  setYValue: (value: number) => void,
 
   /** Sets the x and y channels of the current color value based on a percentage of the width and height of the color area, and triggers `onChange`. */
-  setColorFromPoint(x: number, y: number): void,
+  setColorFromPoint: (x: number, y: number) => void,
   /** Returns the coordinates of the thumb relative to the upper left corner of the color area as a percentage. */
-  getThumbPosition(): {x: number, y: number},
+  getThumbPosition: () => {x: number, y: number},
 
   /** Increments the value of the horizontal axis channel by the channel step or page amount. */
-  incrementX(stepSize?: number): void,
+  incrementX: (stepSize?: number) => void,
   /** Decrements the value of the horizontal axis channel by the channel step or page amount. */
-  decrementX(stepSize?: number): void,
+  decrementX: (stepSize?: number) => void,
 
   /** Increments the value of the vertical axis channel by the channel step or page amount. */
-  incrementY(stepSize?: number): void,
+  incrementY: (stepSize?: number) => void,
   /** Decrements the value of the vertical axis channel by the channel step or page amount. */
-  decrementY(stepSize?: number): void,
+  decrementY: (stepSize?: number) => void,
 
   /** Whether the color area is currently being dragged. */
   readonly isDragging: boolean,
   /** Sets whether the color area is being dragged. */
-  setDragging(value: boolean): void,
+  setDragging: (value: boolean) => void,
 
   /** Returns the xChannel, yChannel and zChannel names based on the color value. */
   channels: {xChannel: ColorChannel, yChannel: ColorChannel, zChannel: ColorChannel},
@@ -65,7 +65,7 @@ export interface ColorAreaState {
   yChannelPageStep: number,
 
   /** Returns the color that should be displayed in the color area thumb instead of `value`. */
-  getDisplayColor(): Color
+  getDisplayColor: () => Color
 }
 
 const DEFAULT_COLOR = parseColor('#ffffff');

packages/@react-stately/color/src/useColorChannelFieldState.ts

@@ -19,7 +19,7 @@ export interface ColorChannelFieldState extends NumberFieldState {
   /** The default value of the field. */
   defaultColorValue: Color | null,
   /** Sets the color value of the field. */
-  setColorValue(value: Color | null): void
+  setColorValue: (value: Color | null) => void
 }
 
 /**

packages/@react-stately/color/src/useColorFieldState.ts

@@ -31,28 +31,28 @@ export interface ColorFieldState extends FormValidationState {
   /** The default value of the color field. */
   readonly defaultColorValue: Color | null,
   /** Sets the color value of the field. */
-  setColorValue(value: Color | null): void,
+  setColorValue: (value: Color | null) => void,
   /** Sets the current text value of the input. */
-  setInputValue(value: string): void,
+  setInputValue: (value: string) => void,
   /**
    * Updates the input value based on the currently parsed color value.
    * Typically this is called when the field is blurred.
    */
-  commit(): void,
+  commit: () => void,
   /** Increments the current input value to the next step boundary, and fires `onChange`. */
-  increment(): void,
+  increment: () => void,
   /** Decrements the current input value to the next step boundary, and fires `onChange`. */
-  decrement(): void,
+  decrement: () => void,
   /** Sets the current value to the maximum color value, and fires `onChange`. */
-  incrementToMax(): void,
+  incrementToMax: () => void,
   /** Sets the current value to the minimum color value, and fires `onChange`. */
-  decrementToMin(): void,
+  decrementToMin: () => void,
   /**
    * Validates a user input string.
    * Values can be partially entered, and may be valid even if they cannot currently be parsed to a color.
    * Can be used to implement validation as a user types.
    */
-  validate(value: string): boolean
+  validate: (value: string) => boolean
 }
 
 const MIN_COLOR = parseColor('#000000');

packages/@react-stately/color/src/useColorPickerState.ts

@@ -10,7 +10,7 @@ export interface ColorPickerState {
   /** The current color value of the color picker. */
   color: Color,
   /** Sets the current color value of the color picker. */
-  setColor(color: Color | null): void
+  setColor: (color: Color | null) => void
 }
 
 export function useColorPickerState(props: ColorPickerProps): ColorPickerState {

packages/@react-stately/color/src/useColorSliderState.ts

@@ -20,9 +20,9 @@ export interface ColorSliderState extends SliderState {
   /** The current color value represented by the color slider. */
   readonly value: Color,
   /** Sets the current color value. If a string is passed, it will be parsed to a Color. */
-  setValue(value: string | Color): void,
+  setValue: (value: string | Color) => void,
   /** Returns the color that should be displayed in the slider instead of `value` or the optional parameter. */
-  getDisplayColor(): Color,
+  getDisplayColor: () => Color,
   /** Whether the color slider is currently being dragged. */
   readonly isDragging: boolean
 }

packages/@react-stately/color/src/useColorWheelState.ts

@@ -21,29 +21,29 @@ export interface ColorWheelState {
   /** The default color value. */
   readonly defaultValue: Color,
   /** Sets the color value represented by the color wheel, and triggers `onChange`. */
-  setValue(value: string | Color): void,
+  setValue: (value: string | Color) => void,
 
   /** The current value of the hue channel displayed by the color wheel. */
   readonly hue: number,
   /** Sets the hue channel of the current color value and triggers `onChange`. */
-  setHue(value: number): void,
+  setHue: (value: number) => void,
 
   /** Sets the hue channel of the current color value based on the given coordinates and radius of the color wheel, and triggers `onChange`. */
-  setHueFromPoint(x: number, y: number, radius: number): void,
+  setHueFromPoint: (x: number, y: number, radius: number) => void,
   /** Returns the coordinates of the thumb relative to the center point of the color wheel. */
-  getThumbPosition(radius: number): {x: number, y: number},
+  getThumbPosition: (radius: number) => {x: number, y: number},
 
   /** Increments the hue by the given amount (defaults to 1). */
-  increment(stepSize?: number): void,
+  increment: (stepSize?: number) => void,
   /** Decrements the hue by the given amount (defaults to 1). */
-  decrement(stepSize?: number): void,
+  decrement: (stepSize?: number) => void,
 
   /** Whether the color wheel is currently being dragged. */
   readonly isDragging: boolean,
   /** Sets whether the color wheel is being dragged. */
-  setDragging(value: boolean): void,
+  setDragging: (value: boolean) => void,
   /** Returns the color that should be displayed in the color wheel instead of `value`. */
-  getDisplayColor(): Color,
+  getDisplayColor: () => Color,
   /** The step value of the hue channel, used when incrementing and decrementing. */
   step: number,
   /** The page step value of the hue channel, used when incrementing and decrementing. */

packages/@react-stately/combobox/src/useComboBoxState.ts

@@ -26,17 +26,17 @@ export interface ComboBoxState<T> extends SelectState<T>, FormValidationState{
   /** The default value of the combo box input. */
   defaultInputValue: string,
   /** Sets the value of the combo box input. */
-  setInputValue(value: string): void,
+  setInputValue: (value: string) => void,
   /** Selects the currently focused item and updates the input value. */
-  commit(): void,
+  commit: () => void,
   /** Controls which item will be auto focused when the menu opens. */
   readonly focusStrategy: FocusStrategy | null,
   /** Opens the menu. */
-  open(focusStrategy?: FocusStrategy | null, trigger?: MenuTriggerAction): void,
+  open: (focusStrategy?: FocusStrategy | null, trigger?: MenuTriggerAction) => void,
   /** Toggles the menu. */
-  toggle(focusStrategy?: FocusStrategy | null, trigger?: MenuTriggerAction): void,
+  toggle: (focusStrategy?: FocusStrategy | null, trigger?: MenuTriggerAction) => void,
   /** Resets the input value to the previously selected item's text if any and closes the menu.  */
-  revert(): void
+  revert: () => void
 }
 
 type FilterFn = (textValue: string, inputValue: string) => boolean;

packages/@react-stately/data/src/useAsyncList.ts

@@ -102,11 +102,11 @@ export interface AsyncListData<T> extends ListData<T> {
   sortDescriptor?: SortDescriptor,
 
   /** Reloads the data in the list. */
-  reload(): void,
+  reload: () => void,
   /** Loads the next page of data in the list. */
-  loadMore(): void,
+  loadMore: () => void,
   /** Triggers sorting for the list. */
-  sort(descriptor: SortDescriptor): void,
+  sort: (descriptor: SortDescriptor) => void,
   /** The current loading state for the list. */
   loadingState: LoadingState
 }