chore: ts explicit module boundary RAC

packages/react-aria-components/src/Autocomplete.tsx

@@ -15,7 +15,7 @@ import {AutocompleteState, useAutocompleteState} from '@react-stately/autocomple
 import {InputContext} from './Input';
 import {mergeProps} from '@react-aria/utils';
 import {Provider, removeDataAttributes, SlotProps, SlottedContextValue, useSlottedContext} from './utils';
-import React, {createContext, JSX, RefObject, useRef} from 'react';
+import React, {Context, createContext, JSX, RefObject, useRef} from 'react';
 import {SearchFieldContext} from './SearchField';
 import {TextFieldContext} from './TextField';
 
@@ -27,11 +27,11 @@ interface InternalAutocompleteContextValue {
   collectionRef: RefObject<HTMLElement | null>
 }
 
-export const AutocompleteContext = createContext<SlottedContextValue<Partial<AutocompleteProps>>>(null);
-export const AutocompleteStateContext = createContext<AutocompleteState | null>(null);
+export const AutocompleteContext: Context<SlottedContextValue<Partial<AutocompleteProps>>> = createContext<SlottedContextValue<Partial<AutocompleteProps>>>(null);
+export const AutocompleteStateContext: Context<AutocompleteState | null> = createContext<AutocompleteState | null>(null);
 // This context is to pass the register and filter down to whatever collection component is wrapped by the Autocomplete
 // TODO: export from RAC, but rename to something more appropriate
-export const UNSTABLE_InternalAutocompleteContext = createContext<InternalAutocompleteContextValue | null>(null);
+export const UNSTABLE_InternalAutocompleteContext: Context<InternalAutocompleteContextValue | null> = createContext<InternalAutocompleteContextValue | null>(null);
 
 /**
  * An autocomplete combines a TextField or SearchField with a Menu or ListBox, allowing users to search or filter a list of suggestions.

packages/react-aria-components/src/Breadcrumbs.tsx

@@ -17,7 +17,7 @@ import {filterDOMProps} from '@react-aria/utils';
 import {forwardRefType, Key} from '@react-types/shared';
 import {LinkContext} from './Link';
 import {Node} from 'react-stately';
-import React, {createContext, ForwardedRef, forwardRef, useContext} from 'react';
+import React, {Context, createContext, ForwardedRef, forwardRef, useContext} from 'react';
 
 export interface BreadcrumbsProps<T> extends Omit<CollectionProps<T>, 'disabledKeys'>, AriaBreadcrumbsProps, StyleProps, SlotProps {
   /** Whether the breadcrumbs are disabled. */
@@ -26,12 +26,14 @@ export interface BreadcrumbsProps<T> extends Omit<CollectionProps<T>, 'disabledK
   onAction?: (key: Key) => void
 }
 
-export const BreadcrumbsContext = createContext<ContextValue<BreadcrumbsProps<any>, HTMLOListElement>>(null);
+export const BreadcrumbsContext: Context<ContextValue<BreadcrumbsProps<any>, HTMLOListElement>> = createContext<ContextValue<BreadcrumbsProps<any>, HTMLOListElement>>(null);
 
 /**
  * Breadcrumbs display a hierarchy of links to the current page or resource in an application.
  */
-export const Breadcrumbs = /*#__PURE__*/ (forwardRef as forwardRefType)(function Breadcrumbs<T extends object>(props: BreadcrumbsProps<T>, ref: ForwardedRef<HTMLOListElement>) {
+export const Breadcrumbs:
+  <T extends object>(props: BreadcrumbsProps<T> & React.RefAttributes<HTMLOListElement>) => React.ReactElement | null =
+/*#__PURE__*/ (forwardRef as forwardRefType)(function Breadcrumbs<T extends object>(props: BreadcrumbsProps<T>, ref: ForwardedRef<HTMLOListElement>) {
   [props, ref] = useContextProps(props, ref, BreadcrumbsContext);
   let {CollectionRoot} = useContext(CollectionRendererContext);
   let {navProps} = useBreadcrumbs(props);
@@ -75,7 +77,9 @@ export interface BreadcrumbProps extends RenderProps<BreadcrumbRenderProps>  {
 /**
  * A Breadcrumb represents an individual item in a `<Breadcrumbs>` list.
  */
-export const Breadcrumb = /*#__PURE__*/ createLeafComponent('item', function Breadcrumb(props: BreadcrumbProps, ref: ForwardedRef<HTMLLIElement>, node: Node<unknown>) {
+export const Breadcrumb:
+  (props: BreadcrumbProps & React.RefAttributes<object>) => React.ReactElement | null =
+/*#__PURE__*/ createLeafComponent('item', function Breadcrumb(props: BreadcrumbProps, ref: ForwardedRef<HTMLLIElement>, node: Node<unknown>) {
   // Recreating useBreadcrumbItem because we want to use composition instead of having the link builtin.
   let isCurrent = node.nextKey == null;
   let {isDisabled, onAction} = useSlottedContext(BreadcrumbsContext)!;

packages/react-aria-components/src/Button.tsx

@@ -30,7 +30,7 @@ import {
 import {createHideableComponent} from '@react-aria/collections';
 import {filterDOMProps} from '@react-aria/utils';
 import {ProgressBarContext} from './ProgressBar';
-import React, {createContext, ForwardedRef, useEffect, useRef} from 'react';
+import React, {Context, createContext, ForwardedRef, useEffect, useRef} from 'react';
 
 export interface ButtonRenderProps {
   /**
@@ -101,12 +101,14 @@ interface ButtonContextValue extends ButtonProps {
 
 const additionalButtonHTMLAttributes = new Set(['form', 'formAction', 'formEncType', 'formMethod', 'formNoValidate', 'formTarget', 'name', 'value']);
 
-export const ButtonContext = createContext<ContextValue<ButtonContextValue, HTMLButtonElement>>({});
+export const ButtonContext: Context<ContextValue<ButtonContextValue, HTMLButtonElement>> = createContext<ContextValue<ButtonContextValue, HTMLButtonElement>>({});
 
 /**
  * A button allows a user to perform an action, with mouse, touch, and keyboard interactions.
  */
-export const Button = /*#__PURE__*/ createHideableComponent(function Button(props: ButtonProps, ref: ForwardedRef<HTMLButtonElement>) {
+export const Button:
+  (props: ButtonProps & React.RefAttributes<HTMLButtonElement>) => React.ReactElement | null =
+/*#__PURE__*/ createHideableComponent(function Button(props: ButtonProps, ref: ForwardedRef<HTMLButtonElement>) {
   [props, ref] = useContextProps(props, ref, ButtonContext);
   props = disablePendingProps(props);
   let ctx = props as ButtonContextValue;

packages/react-aria-components/src/Calendar.tsx

@@ -30,7 +30,7 @@ import {ContextValue, DOMProps, Provider, RenderProps, SlotProps, StyleProps, us
 import {DOMAttributes, FocusableElement, forwardRefType, HoverEvents} from '@react-types/shared';
 import {filterDOMProps} from '@react-aria/utils';
 import {HeadingContext} from './RSPContexts';
-import React, {createContext, ForwardedRef, forwardRef, ReactElement, useContext, useRef} from 'react';
+import React, {Context, createContext, ForwardedRef, forwardRef, ReactElement, useContext, useRef} from 'react';
 import {TextContext} from './Text';
 
 export interface CalendarRenderProps {
@@ -87,15 +87,17 @@ export interface RangeCalendarProps<T extends DateValue> extends Omit<AriaRangeC
   createCalendar?: (identifier: CalendarIdentifier) => ICalendar
 }
 
-export const CalendarContext = createContext<ContextValue<CalendarProps<any>, HTMLDivElement>>(null);
-export const RangeCalendarContext = createContext<ContextValue<RangeCalendarProps<any>, HTMLDivElement>>(null);
-export const CalendarStateContext = createContext<CalendarState | null>(null);
-export const RangeCalendarStateContext = createContext<RangeCalendarState | null>(null);
+export const CalendarContext: Context<ContextValue<CalendarProps<any>, HTMLDivElement>> = createContext<ContextValue<CalendarProps<any>, HTMLDivElement>>(null);
+export const RangeCalendarContext: Context<ContextValue<RangeCalendarProps<any>, HTMLDivElement>> = createContext<ContextValue<RangeCalendarProps<any>, HTMLDivElement>>(null);
+export const CalendarStateContext: Context<CalendarState | null> = createContext<CalendarState | null>(null);
+export const RangeCalendarStateContext: Context<RangeCalendarState | null> = createContext<RangeCalendarState | null>(null);
 
 /**
  * A calendar displays one or more date grids and allows users to select a single date.
  */
-export const Calendar = /*#__PURE__*/ (forwardRef as forwardRefType)(function Calendar<T extends DateValue>(props: CalendarProps<T>, ref: ForwardedRef<HTMLDivElement>) {
+export const Calendar:
+  <T extends DateValue>(props: CalendarProps<T> & React.RefAttributes<HTMLDivElement>) => ReactElement | null =
+/*#__PURE__*/ (forwardRef as forwardRefType)(function Calendar<T extends DateValue>(props: CalendarProps<T>, ref: ForwardedRef<HTMLDivElement>) {
   [props, ref] = useContextProps(props, ref, CalendarContext);
   let {locale} = useLocale();
   let state = useCalendarState({
@@ -168,7 +170,9 @@ export const Calendar = /*#__PURE__*/ (forwardRef as forwardRefType)(function Ca
 /**
  * A range calendar displays one or more date grids and allows users to select a contiguous range of dates.
  */
-export const RangeCalendar = /*#__PURE__*/ (forwardRef as forwardRefType)(function RangeCalendar<T extends DateValue>(props: RangeCalendarProps<T>, ref: ForwardedRef<HTMLDivElement>) {
+export const RangeCalendar:
+  <T extends DateValue>(props: RangeCalendarProps<T> & React.RefAttributes<HTMLDivElement>) => ReactElement | null =
+/*#__PURE__*/ (forwardRef as forwardRefType)(function RangeCalendar<T extends DateValue>(props: RangeCalendarProps<T>, ref: ForwardedRef<HTMLDivElement>) {
   [props, ref] = useContextProps(props, ref, RangeCalendarContext);
   let {locale} = useLocale();
   let state = useRangeCalendarState({
@@ -352,7 +356,9 @@ const InternalCalendarGridContext = createContext<InternalCalendarGridContextVal
  * A calendar grid displays a single grid of days within a calendar or range calendar which
  * can be keyboard navigated and selected by the user.
  */
-export const CalendarGrid = /*#__PURE__*/ (forwardRef as forwardRefType)(function CalendarGrid(props: CalendarGridProps, ref: ForwardedRef<HTMLTableElement>) {
+export const CalendarGrid:
+  (props: CalendarGridProps & React.RefAttributes<HTMLTableElement>) => ReactElement | null =
+/*#__PURE__*/ (forwardRef as forwardRefType)(function CalendarGrid(props: CalendarGridProps, ref: ForwardedRef<HTMLTableElement>) {
   let calendarState = useContext(CalendarStateContext);
   let rangeCalendarState = useContext(RangeCalendarStateContext);
   let calenderProps = useSlottedContext(CalendarContext)!;
@@ -422,7 +428,10 @@ function CalendarGridHeader(props: CalendarGridHeaderProps, ref: ForwardedRef<HT
 /**
  * A calendar grid header displays a row of week day names at the top of a month.
  */
-const CalendarGridHeaderForwardRef = /*#__PURE__*/ (forwardRef as forwardRefType)(CalendarGridHeader);
+const CalendarGridHeaderForwardRef:
+  (props: CalendarGridHeaderProps & React.RefAttributes<HTMLTableSectionElement>) => ReactElement | null =
+/*#__PURE__*/ (forwardRef as forwardRefType)(CalendarGridHeader);
+
 export {CalendarGridHeaderForwardRef as CalendarGridHeader};
 
 export interface CalendarHeaderCellProps extends DOMProps {}
@@ -443,7 +452,10 @@ function CalendarHeaderCell(props: CalendarHeaderCellProps, ref: ForwardedRef<HT
 /**
  * A calendar header cell displays a week day name at the top of a column within a calendar.
  */
-const CalendarHeaderCellForwardRef = forwardRef(CalendarHeaderCell);
+const CalendarHeaderCellForwardRef:
+  React.ForwardRefExoticComponent<CalendarHeaderCellProps & React.RefAttributes<HTMLTableCellElement>> =
+forwardRef(CalendarHeaderCell);
+
 export {CalendarHeaderCellForwardRef as CalendarHeaderCell};
 
 export interface CalendarGridBodyProps extends StyleProps {
@@ -480,7 +492,7 @@ function CalendarGridBody(props: CalendarGridBodyProps, ref: ForwardedRef<HTMLTa
 /**
  * A calendar grid body displays a grid of calendar cells within a month.
  */
-const CalendarGridBodyForwardRef = /*#__PURE__*/ (forwardRef as forwardRefType)(CalendarGridBody);
+const CalendarGridBodyForwardRef: (props: CalendarGridBodyProps & React.RefAttributes<HTMLTableSectionElement>) => ReactElement | null = /*#__PURE__*/ (forwardRef as forwardRefType)(CalendarGridBody);
 export {CalendarGridBodyForwardRef as CalendarGridBody};
 
 export interface CalendarCellProps extends RenderProps<CalendarCellRenderProps>, HoverEvents {
@@ -491,7 +503,7 @@ export interface CalendarCellProps extends RenderProps<CalendarCellRenderProps>,
 /**
  * A calendar cell displays a date cell within a calendar grid which can be selected by the user.
  */
-export const CalendarCell = /*#__PURE__*/ (forwardRef as forwardRefType)(function CalendarCell({date, ...otherProps}: CalendarCellProps, ref: ForwardedRef<HTMLTableCellElement>) {
+export const CalendarCell: (props: CalendarCellProps & React.RefAttributes<HTMLTableCellElement>) => ReactElement | null = /*#__PURE__*/ (forwardRef as forwardRefType)(function CalendarCell({date, ...otherProps}: CalendarCellProps, ref: ForwardedRef<HTMLTableCellElement>) {
   let calendarState = useContext(CalendarStateContext);
   let rangeCalendarState = useContext(RangeCalendarStateContext);
   let state = calendarState ?? rangeCalendarState!;

packages/react-aria-components/src/Checkbox.tsx

@@ -18,7 +18,7 @@ import {filterDOMProps, mergeRefs, useObjectRef} from '@react-aria/utils';
 import {FormContext} from './Form';
 import {forwardRefType, RefObject} from '@react-types/shared';
 import {LabelContext} from './Label';
-import React, {createContext, ForwardedRef, forwardRef, useContext, useMemo} from 'react';
+import React, {Context, createContext, ForwardedRef, forwardRef, useContext, useMemo} from 'react';
 import {TextContext} from './Text';
 
 export interface CheckboxGroupProps extends Omit<AriaCheckboxGroupProps, 'children' | 'label' | 'description' | 'errorMessage' | 'validationState' | 'validationBehavior'>, RACValidation, RenderProps<CheckboxGroupRenderProps>, SlotProps {}
@@ -109,13 +109,15 @@ export interface CheckboxRenderProps {
   isRequired: boolean
 }
 
-export const CheckboxGroupContext = createContext<ContextValue<CheckboxGroupProps, HTMLDivElement>>(null);
-export const CheckboxGroupStateContext = createContext<CheckboxGroupState | null>(null);
+export const CheckboxGroupContext: Context<ContextValue<CheckboxGroupProps, HTMLDivElement>> = createContext<ContextValue<CheckboxGroupProps, HTMLDivElement>>(null);
+export const CheckboxGroupStateContext: Context<CheckboxGroupState | null> = createContext<CheckboxGroupState | null>(null);
 
 /**
  * A checkbox group allows a user to select multiple items from a list of options.
  */
-export const CheckboxGroup = /*#__PURE__*/ (forwardRef as forwardRefType)(function CheckboxGroup(props: CheckboxGroupProps, ref: ForwardedRef<HTMLDivElement>) {
+export const CheckboxGroup:
+  (props: CheckboxGroupProps & React.RefAttributes<HTMLDivElement>) => React.ReactElement | null =
+/*#__PURE__*/ (forwardRef as forwardRefType)(function CheckboxGroup(props: CheckboxGroupProps, ref: ForwardedRef<HTMLDivElement>) {
   [props, ref] = useContextProps(props, ref, CheckboxGroupContext);
   let {validationBehavior: formValidationBehavior} = useSlottedContext(FormContext) || {};
   let validationBehavior = props.validationBehavior ?? formValidationBehavior ?? 'native';
@@ -176,7 +178,9 @@ export const CheckboxGroup = /*#__PURE__*/ (forwardRef as forwardRefType)(functi
  * A checkbox allows a user to select multiple items from a list of individual items, or
  * to mark one individual item as selected.
  */
-export const Checkbox = /*#__PURE__*/ (forwardRef as forwardRefType)(function Checkbox(props: CheckboxProps, ref: ForwardedRef<HTMLLabelElement>) {
+export const Checkbox:
+  (props: CheckboxProps & React.RefAttributes<HTMLLabelElement>) => React.ReactElement | null =
+/*#__PURE__*/ (forwardRef as forwardRefType)(function Checkbox(props: CheckboxProps, ref: ForwardedRef<HTMLLabelElement>) {
   let {
     inputRef: userProvidedInputRef = null,
     ...otherProps

packages/react-aria-components/src/Collection.tsx

@@ -12,7 +12,7 @@
 import {CollectionBase, DropTargetDelegate, ItemDropTarget, Key, LayoutDelegate, RefObject} from '@react-types/shared';
 import {createBranchComponent, useCachedChildren} from '@react-aria/collections';
 import {Collection as ICollection, Node, SelectionBehavior, SelectionMode, SectionProps as SharedSectionProps} from 'react-stately';
-import React, {cloneElement, createContext, ForwardedRef, HTMLAttributes, isValidElement, JSX, ReactElement, ReactNode, useContext, useMemo} from 'react';
+import React, {cloneElement, Context, createContext, ForwardedRef, HTMLAttributes, isValidElement, JSX, ReactElement, ReactNode, useContext, useMemo} from 'react';
 import {StyleProps} from './utils';
 
 export interface CollectionProps<T> extends Omit<CollectionBase<T>, 'children'> {
@@ -97,10 +97,12 @@ interface SectionContextValue {
   render: (props: SectionProps<any>, ref: ForwardedRef<HTMLElement>, section: Node<any>, className?: string) => ReactElement
 }
 
-export const SectionContext = createContext<SectionContextValue | null>(null);
+export const SectionContext: Context<SectionContextValue | null> = createContext<SectionContextValue | null>(null);
 
 /** @deprecated */
-export const Section = /*#__PURE__*/ createBranchComponent('section', <T extends object>(props: SectionProps<T>, ref: ForwardedRef<HTMLElement>, section: Node<T>): JSX.Element => {
+export const Section:
+  <T extends object>(props: SectionProps<T> & React.RefAttributes<HTMLElement>) => ReactElement | null =
+/*#__PURE__*/ createBranchComponent('section', <T extends object>(props: SectionProps<T>, ref: ForwardedRef<HTMLElement>, section: Node<object>): JSX.Element => {
   let {name, render} = useContext(SectionContext)!;
   if (process.env.NODE_ENV !== 'production') {
     console.warn(`<Section> is deprecated. Please use <${name}> instead.`);
@@ -211,7 +213,7 @@ export function renderAfterDropIndicators(collection: ICollection<Node<unknown>>
   return afterIndicators;
 }
 
-export const CollectionRendererContext = createContext<CollectionRenderer>(DefaultCollectionRenderer);
+export const CollectionRendererContext: Context<CollectionRenderer> = createContext<CollectionRenderer>(DefaultCollectionRenderer);
 
 type PersistedKeysReturnValue = Set<Key> | null;
 export function usePersistedKeys(focusedKey: Key | null): PersistedKeysReturnValue {

packages/react-aria-components/src/ColorArea.tsx

@@ -4,7 +4,7 @@ import {ColorAreaState, useColorAreaState} from 'react-stately';
 import {filterDOMProps} from '@react-aria/utils';
 import {InternalColorThumbContext} from './ColorThumb';
 import {Provider, RenderProps, SlotProps, useContextProps, useRenderProps} from './utils';
-import React, {createContext, ForwardedRef, forwardRef, useRef} from 'react';
+import React, {Context, createContext, ForwardedRef, forwardRef, useRef} from 'react';
 
 export interface ColorAreaRenderProps {
   /**
@@ -20,12 +20,14 @@ export interface ColorAreaRenderProps {
 
 export interface ColorAreaProps extends AriaColorAreaProps, RenderProps<ColorAreaRenderProps>, SlotProps {}
 
-export const ColorAreaStateContext = createContext<ColorAreaState | null>(null);
+export const ColorAreaStateContext: Context<ColorAreaState | null> = createContext<ColorAreaState | null>(null);
 
 /**
  * A color area allows users to adjust two channels of an RGB, HSL or HSB color value against a two-dimensional gradient background.
  */
-export const ColorArea = forwardRef(function ColorArea(props: ColorAreaProps, ref: ForwardedRef<HTMLDivElement>) {
+export const ColorArea:
+  React.ForwardRefExoticComponent<ColorAreaProps & React.RefAttributes<HTMLDivElement>> =
+forwardRef(function ColorArea(props: ColorAreaProps, ref: ForwardedRef<HTMLDivElement>) {
   [props, ref] = useContextProps(props, ref, ColorAreaContext);
   let inputXRef = useRef(null);
   let inputYRef = useRef(null);