Code changes from docs-ts branch

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
 }

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

@@ -10,7 +10,8 @@
  * governing permissions and limitations under the License.
  */
 
-import {AriaLabelingProps, AsyncLoadable, CollectionBase, DOMProps, FocusEvents, FocusStrategy, MultipleSelection, StyleProps} from '@react-types/shared';
+import {AriaLabelingProps, AsyncLoadable, CollectionBase, DOMProps, FocusEvents, FocusStrategy, MultipleSelection, SelectionBehavior, StyleProps} from '@react-types/shared';
+import {Key, ReactNode} from 'react';
 
 export interface ListBoxProps<T> extends CollectionBase<T>, MultipleSelection, FocusEvents {
   /** Whether to auto focus the listbox or an option. */
@@ -19,7 +20,20 @@ export interface ListBoxProps<T> extends CollectionBase<T>, MultipleSelection, F
   shouldFocusWrap?: boolean
 }
 
-export interface AriaListBoxProps<T> extends ListBoxProps<T>, DOMProps, AriaLabelingProps {}
+interface AriaListBoxPropsBase<T> extends ListBoxProps<T>, DOMProps, AriaLabelingProps {}
+export interface AriaListBoxProps<T> extends AriaListBoxPropsBase<T> {
+  /**
+   * An optional visual label for the listbox.
+   */
+  label?: ReactNode,
+  /** How multiple selection should behave in the collection. */
+  selectionBehavior?: SelectionBehavior,
+  /**
+   * 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
+}
 
-export interface SpectrumListBoxProps<T> extends AriaListBoxProps<T>, AsyncLoadable, StyleProps {
+export interface SpectrumListBoxProps<T> extends AriaListBoxPropsBase<T>, AsyncLoadable, StyleProps {
 }

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

@@ -30,7 +30,7 @@ export interface AriaTabProps extends AriaLabelingProps {
 
 export interface TabListProps<T> extends CollectionBase<T>, Omit<SingleSelection, 'disallowEmptySelection'> {
   /**
-   * Whether the Tabs are disabled.
+   * Whether the TabList is disabled.
    * Shows that a selection exists, but is not available in that circumstance.
    */
   isDisabled?: boolean
@@ -60,6 +60,8 @@ export interface SpectrumTabsProps<T> extends AriaTabListBase, SingleSelection,
   items?: Iterable<T>,
   /** The keys of the tabs that are disabled. These tabs cannot be selected, focused, or otherwise interacted with. */
   disabledKeys?: Iterable<Key>,
+  /** Whether the Tabs are disabled. */
+  isDisabled?: boolean,
   /** Whether the tabs are displayed in a quiet style. */
   isQuiet?: boolean,
   /** Whether the tabs are displayed in an emphasized style. */

packages/react-aria/src/index.ts

@@ -58,9 +58,9 @@ export type {ClipboardProps, ClipboardResult, DirectoryDropItem, DragEndEvent, D
 export type {FocusProps, FocusResult, FocusVisibleProps, FocusVisibleResult, FocusWithinProps, FocusWithinResult, HoverProps, HoverResult, InteractOutsideProps, KeyboardProps, KeyboardResult, LongPressProps, LongPressResult, MoveEvents, MoveResult, PressHookProps, PressProps, PressResult, ScrollWheelProps} from '@react-aria/interactions';
 export type {AriaFieldProps, FieldAria, LabelAria, LabelAriaProps} from '@react-aria/label';
 export type {AriaLinkOptions, LinkAria} from '@react-aria/link';
-export type {AriaListBoxOptions, AriaListBoxSectionProps, AriaOptionProps, ListBoxAria, ListBoxSectionAria, OptionAria} from '@react-aria/listbox';
+export type {AriaListBoxOptions, AriaListBoxProps, AriaListBoxSectionProps, AriaOptionProps, ListBoxAria, ListBoxSectionAria, OptionAria} from '@react-aria/listbox';
 export type {AriaGridListOptions, GridListAria, AriaGridListItemOptions, GridListItemAria, AriaGridSelectionCheckboxProps, GridSelectionCheckboxAria} from '@react-aria/gridlist';
-export type {AriaMenuItemProps, AriaMenuOptions, AriaMenuSectionProps, AriaMenuTriggerProps, MenuAria, MenuItemAria, MenuSectionAria, MenuTriggerAria} from '@react-aria/menu';
+export type {AriaMenuProps, AriaMenuItemProps, AriaMenuOptions, AriaMenuSectionProps, AriaMenuTriggerProps, MenuAria, MenuItemAria, MenuSectionAria, MenuTriggerAria} from '@react-aria/menu';
 export type {AriaMeterProps, MeterAria} from '@react-aria/meter';
 export type {AriaNumberFieldProps, NumberFieldAria} from '@react-aria/numberfield';
 export type {AriaModalOptions, AriaModalOverlayProps, AriaOverlayProps, AriaPopoverProps, AriaPositionProps, DismissButtonProps, ModalAria, ModalOverlayAria, ModalProviderAria, ModalProviderProps, OverlayAria, OverlayContainerProps, OverlayProps, OverlayTriggerAria, OverlayTriggerProps, PopoverAria, PositionAria} from '@react-aria/overlays';

packages/react-stately/src/index.ts

@@ -30,7 +30,7 @@ export type {TabListProps, TabListState} from '@react-stately/tabs';
 export type {ToggleProps, ToggleState} from '@react-stately/toggle';
 export type {TooltipTriggerProps, TooltipTriggerState} from '@react-stately/tooltip';
 export type {TreeProps, TreeState} from '@react-stately/tree';
-export type {ItemProps, SectionProps} from '@react-types/shared';
+export type {ItemProps, SectionProps, Selection} from '@react-types/shared';
 
 export {useCalendarState, useRangeCalendarState} from '@react-stately/calendar';
 export {useCheckboxGroupState} from '@react-stately/checkbox';