Code changes from docs-ts branch (#4090)

Author: devongovett

packages/@adobe/react-spectrum/package.json

@@ -72,7 +72,8 @@
     "@react-spectrum/view": "^3.4.1",
     "@react-spectrum/well": "^3.3.4",
     "@react-stately/collections": "^3.5.1",
-    "@react-stately/data": "^3.8.1"
+    "@react-stately/data": "^3.8.1",
+    "@react-types/shared": "^3.15.0"
   },
   "publishConfig": {
     "access": "public"

packages/@adobe/react-spectrum/src/index.ts

@@ -103,3 +103,4 @@ export type {VisuallyHiddenAria, VisuallyHiddenProps} from '@react-aria/visually
 export type {DateFormatter, DateFormatterOptions, Filter, FormatMessage, Locale, LocalizedStrings} from '@react-aria/i18n';
 export type {SSRProviderProps} from '@react-aria/ssr';
 export type {DirectoryDropItem, DragAndDropHooks, DragAndDropOptions, DraggableCollectionEndEvent, DraggableCollectionMoveEvent, DraggableCollectionStartEvent, DragPreviewRenderer, DragTypes, DropItem, DropOperation, DroppableCollectionDropEvent, DroppableCollectionEnterEvent, DroppableCollectionExitEvent, DroppableCollectionInsertDropEvent, DroppableCollectionMoveEvent, DroppableCollectionOnItemDropEvent, DroppableCollectionReorderEvent, DroppableCollectionRootDropEvent, DropPosition, DropTarget, FileDropItem, ItemDropTarget, RootDropTarget, TextDropItem} from '@react-spectrum/dnd';
+export type {Selection} from '@react-types/shared';

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

@@ -42,6 +42,7 @@ export class CalendarDate {
   // This prevents TypeScript from allowing other types with the same fields to match.
   // i.e. a ZonedDateTime should not be be passable to a parameter that expects CalendarDate.
   // If that behavior is desired, use the AnyCalendarDate interface instead.
+  // @ts-ignore
   #type;
   /** The calendar system associated with this date, e.g. Gregorian. */
   public readonly calendar: Calendar;
@@ -124,6 +125,7 @@ export class CalendarDate {
 /** A Time represents a clock time without any date components. */
 export class Time {
   // This prevents TypeScript from allowing other types with the same fields to match.
+  // @ts-ignore
   #type;
   /** The hour, numbered from 0 to 23. */
   public readonly hour: number;
@@ -189,6 +191,7 @@ export class Time {
 /** A CalendarDateTime represents a date and time without a time zone, in a specific calendar system. */
 export class CalendarDateTime {
   // This prevents TypeScript from allowing other types with the same fields to match.
+  // @ts-ignore
   #type;
   /** The calendar system associated with this date, e.g. Gregorian. */
   public readonly calendar: Calendar;
@@ -296,6 +299,7 @@ export class CalendarDateTime {
 /** A ZonedDateTime represents a date and time in a specific time zone and calendar system. */
 export class ZonedDateTime {
   // This prevents TypeScript from allowing other types with the same fields to match.
+  // @ts-ignore
   #type;
   /** The calendar system associated with this date, e.g. Gregorian. */
   public readonly calendar: Calendar;

packages/@react-aria/button/src/useToggleButton.ts

@@ -25,8 +25,9 @@ import {DOMAttributes} from '@react-types/shared';
 import {mergeProps} from '@react-aria/utils';
 import {ToggleState} from '@react-stately/toggle';
 
-export function useToggleButton(props: AriaToggleButtonProps<'a'>, state: ToggleState, ref: RefObject<HTMLAnchorElement>): ButtonAria<AnchorHTMLAttributes<HTMLAnchorElement>>;
+// Order with overrides is important: 'button' should be default
 export function useToggleButton(props: AriaToggleButtonProps<'button'>, state: ToggleState, ref: RefObject<HTMLButtonElement>): ButtonAria<ButtonHTMLAttributes<HTMLButtonElement>>;
+export function useToggleButton(props: AriaToggleButtonProps<'a'>, state: ToggleState, ref: RefObject<HTMLAnchorElement>): ButtonAria<AnchorHTMLAttributes<HTMLAnchorElement>>;
 export function useToggleButton(props: AriaToggleButtonProps<'div'>, state: ToggleState, ref: RefObject<HTMLDivElement>): ButtonAria<HTMLAttributes<HTMLDivElement>>;
 export function useToggleButton(props: AriaToggleButtonProps<'input'>, state: ToggleState, ref: RefObject<HTMLInputElement>): ButtonAria<InputHTMLAttributes<HTMLInputElement>>;
 export function useToggleButton(props: AriaToggleButtonProps<'span'>, state: ToggleState, ref: RefObject<HTMLSpanElement>): ButtonAria<HTMLAttributes<HTMLSpanElement>>;

packages/@react-aria/listbox/src/index.ts

@@ -3,7 +3,7 @@
  * This file is licensed to you under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License. You may obtain a copy
  * of the License at http://www.apache.org/licenses/LICENSE-2.0
- * 
+ *
  * Unless required by applicable law or agreed to in writing, software distributed under
  * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
  * OF ANY KIND, either express or implied. See the License for the specific language
@@ -15,6 +15,7 @@ export {useOption} from './useOption';
 export {useListBoxSection} from './useListBoxSection';
 export {listData, getItemId} from './utils';
 
+export type {AriaListBoxProps} from '@react-types/listbox';
 export type {AriaListBoxOptions, ListBoxAria} from './useListBox';
 export type {AriaOptionProps, OptionAria} from './useOption';
 export type {AriaListBoxSectionProps, ListBoxSectionAria} from './useListBoxSection';

packages/@react-aria/listbox/src/useListBox.ts

@@ -13,9 +13,9 @@
 import {AriaListBoxProps} from '@react-types/listbox';
 import {DOMAttributes, KeyboardDelegate} from '@react-types/shared';
 import {filterDOMProps, mergeProps} from '@react-aria/utils';
-import {Key, ReactNode, RefObject} from 'react';
 import {listData} from './utils';
 import {ListState} from '@react-stately/list';
+import {RefObject} from 'react';
 import {useFocusWithin} from '@react-aria/interactions';
 import {useId} from '@react-aria/utils';
 import {useLabel} from '@react-aria/label';
@@ -47,17 +47,7 @@ export interface AriaListBoxOptions<T> extends Omit<AriaListBoxProps<T>, 'childr
   shouldSelectOnPressUp?: boolean,
 
   /** Whether options should be focused when the user hovers over them. */
-  shouldFocusOnHover?: boolean,
-
-  /**
-   * An optional visual label for the listbox.
-   */
-  label?: ReactNode,
-  /**
-   * Handler that is called when a user performs an action on an item. The exact user event depends on
-   * the collection's `selectionBehavior` prop and the interaction modality.
-   */
-  onAction?: (key: Key) => void
+  shouldFocusOnHover?: boolean
 }
 
 /**

packages/@react-aria/menu/src/index.ts

@@ -15,6 +15,7 @@ export {useMenu} from './useMenu';
 export {useMenuItem} from './useMenuItem';
 export {useMenuSection} from './useMenuSection';
 
+export type {AriaMenuProps} from '@react-types/menu';
 export type {AriaMenuTriggerProps, MenuTriggerAria} from './useMenuTrigger';
 export type {AriaMenuOptions, MenuAria} from './useMenu';
 export type {AriaMenuItemProps, MenuItemAria} from './useMenuItem';

packages/@react-aria/overlays/src/useOverlayTrigger.ts

@@ -34,7 +34,7 @@ export interface OverlayTriggerAria {
  * Handles the behavior and accessibility for an overlay trigger, e.g. a button
  * that opens a popover, menu, or other overlay that is positioned relative to the trigger.
  */
-export function useOverlayTrigger(props: OverlayTriggerProps, state: OverlayTriggerState, ref: RefObject<Element>): OverlayTriggerAria {
+export function useOverlayTrigger(props: OverlayTriggerProps, state: OverlayTriggerState, ref?: RefObject<Element>): OverlayTriggerAria {
   let {type} = props;
   let {isOpen} = state;
 

packages/@react-spectrum/autocomplete/src/SearchAutocomplete.tsx

@@ -340,5 +340,5 @@ let SearchAutocompleteInput = React.forwardRef(_SearchAutocompleteInput) as <T>(
 /**
  * A SearchAutocomplete is a searchfield that supports a dynamic list of suggestions.
  */
-let _SearchAutocomplete = forwardRef(SearchAutocomplete);
+let _SearchAutocomplete = forwardRef(SearchAutocomplete) as <T>(props: SpectrumSearchAutocompleteProps<T> & {ref?: FocusableRef<HTMLElement>}) => ReactElement;
 export {_SearchAutocomplete as SearchAutocomplete};

packages/@react-types/color/src/index.d.ts

@@ -17,6 +17,7 @@ import {
   DOMProps,
   FocusableDOMProps,
   FocusableProps,
+  HelpTextProps,
   InputBase,
   LabelableProps,
   SpectrumLabelableProps,
@@ -94,7 +95,7 @@ export interface Color {
   getColorChannels(): [ColorChannel, ColorChannel, ColorChannel]
 }
 
-export interface ColorFieldProps extends Omit<ValueBase<string | Color | null>, 'onChange'>, InputBase, Validation, FocusableProps, TextInputBase, LabelableProps {
+export interface ColorFieldProps extends Omit<ValueBase<string | Color | null>, 'onChange'>, InputBase, Validation, FocusableProps, TextInputBase, LabelableProps, HelpTextProps {
   /** Handler that is called when the value changes. */
   onChange?: (color: Color | null) => void
 }