chore: TS explicit module boundary aria (#8388)

* chore: TS explicit module boundary aria

* fix undesired removal of enum

* fix storybook build

* simplify types

Author: snowystinger

packages/@react-aria/aria-modal-polyfill/src/index.ts

@@ -19,7 +19,7 @@ const currentDocument = typeof document !== 'undefined' ? document : undefined;
 /**
  * Acts as a polyfill for `aria-modal` by watching for added modals and hiding any surrounding DOM elements with `aria-hidden`.
  */
-export function watchModals(selector:string = 'body', {document = currentDocument} = {}): Revert {
+export function watchModals(selector:string = 'body', {document = currentDocument}: {document?: Document} = {}): Revert {
   /**
    * Listen for additions to the child list of the selected element (defaults to body). This is where providers render modal portals.
    * When one is added, see if there is a modal inside it, if there is, then hide everything else from screen readers.

packages/@react-aria/button/stories/useButton.stories.tsx

@@ -11,14 +11,16 @@
  */
 
 import {AriaButtonProps} from '@react-types/button';
-import React, {useRef} from 'react';
+import React, {JSX, useRef} from 'react';
+import {StoryObj} from '@storybook/react';
 import {useButton} from '../';
 
 export default {
   title: 'useButton'
 };
+export type InputButtonStory = StoryObj<typeof InputButton>;
 
-export const InputTypeButton = {
+export const InputTypeButton: InputButtonStory = {
   render: () => <InputButton />,
   name: 'input type button'
 };
@@ -27,7 +29,7 @@ interface InputButtonProps extends AriaButtonProps<'input'> {
   value?: string
 }
 
-function InputButton(props: InputButtonProps) {
+function InputButton(props: InputButtonProps): JSX.Element {
   let {
     value = 'Test'
   } = props;

packages/@react-aria/calendar/src/utils.ts

@@ -25,7 +25,7 @@ interface HookData {
   selectedDateDescription: string
 }
 
-export const hookData = new WeakMap<CalendarState | RangeCalendarState, HookData>();
+export const hookData: WeakMap<CalendarState | RangeCalendarState, HookData> = new WeakMap<CalendarState | RangeCalendarState, HookData>();
 
 export function getEraFormat(date: CalendarDate | undefined): 'short' | undefined {
   return date?.calendar.identifier === 'gregory' && date.era === 'BC' ? 'short' : undefined;

packages/@react-aria/calendar/stories/Example.tsx

@@ -9,15 +9,15 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
+import {AriaCalendarProps, DateValue, useCalendar, useCalendarCell, useCalendarGrid} from '../src';
 import {Button} from '@react-spectrum/button';
+import {CalendarDate, createCalendar, DateDuration, startOfWeek} from '@internationalized/date';
 import {CalendarState, RangeCalendarState, useCalendarState} from '@react-stately/calendar';
-import {createCalendar, DateDuration, startOfWeek} from '@internationalized/date';
-import React, {ReactElement, useMemo, useRef} from 'react';
-import {useCalendar, useCalendarCell, useCalendarGrid} from '../src';
+import React, {JSX, ReactElement, useMemo, useRef} from 'react';
 import {useDateFormatter, useLocale} from '@react-aria/i18n';
 
 
-export function Example(props) {
+export function Example<T extends DateValue | CalendarDate>(props: AriaCalendarProps<T> & {visibleDuration: DateDuration}): JSX.Element {
   let {locale} = useLocale();
   const {visibleDuration} = props;
 
@@ -98,7 +98,7 @@ function Cell(props) {
   );
 }
 
-export function ExampleCustomFirstDay(props) {
+export function ExampleCustomFirstDay(props: AriaCalendarProps<DateValue>): JSX.Element {
   let {locale} = useLocale();
   const {firstDayOfWeek} = props;
 

packages/@react-aria/calendar/stories/useCalendar.stories.tsx

@@ -12,48 +12,51 @@
 
 import {Example} from './Example';
 import React from 'react';
+import {StoryObj} from '@storybook/react';
 import {today} from '@internationalized/date';
 
 export default {
   title: 'Date and Time/useCalendar'
 };
 
-export const Days3 = {
+export type ExampleStory = StoryObj<typeof Example>;
+
+export const Days3: ExampleStory = {
   render: () => <Example visibleDuration={{days: 3}} />,
   name: 'days: 3'
 };
 
-export const Weeks1 = {
+export const Weeks1: ExampleStory = {
   render: () => <Example visibleDuration={{weeks: 1}} />,
   name: 'weeks: 1'
 };
 
-export const Weeks2 = {
+export const Weeks2: ExampleStory = {
   render: () => <Example visibleDuration={{weeks: 2}} />,
   name: 'weeks: 2'
 };
 
-export const Months1 = {
+export const Months1: ExampleStory = {
   render: () => <Example visibleDuration={{months: 1}} />,
   name: 'months: 1'
 };
 
-export const Months2 = {
+export const Months2: ExampleStory = {
   render: () => <Example visibleDuration={{months: 2}} />,
   name: 'months: 2'
 };
 
-export const Days7SingleToday = {
-  render: () => <Example defaultValue={today} visibleDuration={{days: 7}} pageBehavior="single" />,
+export const Days7SingleToday: ExampleStory = {
+  render: () => <Example defaultValue={today('UTC')} visibleDuration={{days: 7}} pageBehavior="single" />,
   name: 'days: 7, pageBehavior: single, defaultValue: today'
 };
 
-export const Weeks5SingleToday = {
-  render: () => <Example defaultValue={today} visibleDuration={{weeks: 5}} pageBehavior="single" />,
+export const Weeks5SingleToday: ExampleStory = {
+  render: () => <Example defaultValue={today('UTC')} visibleDuration={{weeks: 5}} pageBehavior="single" />,
   name: 'weeks: 5, pageBehavior: single, defaultValue: today'
 };
 
-export const Months2PageBehaviorSingle = {
+export const Months2PageBehaviorSingle: ExampleStory = {
   render: () => <Example visibleDuration={{months: 2}} pageBehavior="single" />,
   name: 'months: 2, pageBehavior: single'
 };

packages/@react-aria/checkbox/src/utils.ts

@@ -19,4 +19,4 @@ interface CheckboxGroupData {
   validationBehavior: 'aria' | 'native'
 }
 
-export const checkboxGroupData = new WeakMap<CheckboxGroupState, CheckboxGroupData>();
+export const checkboxGroupData: WeakMap<CheckboxGroupState, CheckboxGroupData> = new WeakMap<CheckboxGroupState, CheckboxGroupData>();

packages/@react-aria/collections/src/Document.ts

@@ -395,11 +395,11 @@ export class ElementNode<T> extends BaseNode<T> {
  */
 export class Document<T, C extends BaseCollection<T> = BaseCollection<T>> extends BaseNode<T> {
   nodeType = 11; // DOCUMENT_FRAGMENT_NODE
-  ownerDocument = this;
+  ownerDocument: Document<T, C> = this;
   dirtyNodes: Set<BaseNode<T>> = new Set();
   isSSR = false;
   nodeId = 0;
-  nodesByProps = new WeakMap<object, ElementNode<T>>();
+  nodesByProps: WeakMap<object, ElementNode<T>> = new WeakMap<object, ElementNode<T>>();
   isMounted = true;
   private collection: C;
   private nextCollection: C | null = null;

packages/@react-aria/collections/src/Hidden.tsx

@@ -11,7 +11,7 @@
  */
 
 import {forwardRefType} from '@react-types/shared';
-import React, {createContext, forwardRef, JSX, ReactElement, ReactNode, useContext} from 'react';
+import React, {Context, createContext, forwardRef, JSX, ReactElement, ReactNode, useContext} from 'react';
 
 // React doesn't understand the <template> element, which doesn't have children like a normal element.
 // It will throw an error during hydration when it expects the firstChild to contain content rendered
@@ -33,7 +33,7 @@ if (typeof HTMLTemplateElement !== 'undefined') {
   });
 }
 
-export const HiddenContext = createContext<boolean>(false);
+export const HiddenContext: Context<boolean> = createContext<boolean>(false);
 
 export function Hidden(props: {children: ReactNode}): JSX.Element {
   let isHidden = useContext(HiddenContext);

packages/@react-aria/combobox/stories/example.tsx

@@ -10,16 +10,16 @@
  * governing permissions and limitations under the License.
  */
 
+import {AriaComboBoxProps, useComboBox} from '@react-aria/combobox';
 import {DismissButton, useOverlay} from '@react-aria/overlays';
 import {FocusScope} from '@react-aria/focus';
-import React from 'react';
+import React, {JSX} from 'react';
 import {useButton} from '@react-aria/button';
-import {useComboBox} from '@react-aria/combobox';
 import {useComboBoxState} from '@react-stately/combobox';
 import {useFilter} from '@react-aria/i18n';
 import {useListBox, useOption} from '@react-aria/listbox';
 
-export function ComboBox(props) {
+export function ComboBox(props: AriaComboBoxProps<any>): JSX.Element {
   // Setup filter function and state.
   let {contains} = useFilter({sensitivity: 'base'});
   let state = useComboBoxState({...props, defaultFilter: contains});

packages/@react-aria/combobox/stories/useComboBox.stories.tsx

@@ -10,36 +10,40 @@
  * governing permissions and limitations under the License.
  */
 
+import {AriaComboBoxProps} from '@react-aria/combobox';
 import {ComboBox} from './example';
 import {Item} from '@react-stately/collections';
-import React from 'react';
+import React, {JSX} from 'react';
+import {StoryObj} from '@storybook/react';
 
 export default {
   title: 'useComboBox'
 };
 
+export type TemplateStory = StoryObj<typeof Template>;
+
 let lotsOfItems: any[] = [];
 for (let i = 0; i < 50; i++) {
   lotsOfItems.push({name: 'Item ' + i});
 }
 
-const Template = (args) => (
+const Template = (args: AriaComboBoxProps<any>): JSX.Element => (
   <ComboBox {...args} label="Example" defaultItems={lotsOfItems}>
     {(item: any) => <Item key={item.name}>{item.name}</Item>}
   </ComboBox>
 );
 
-export const ScrollTesting = {
+export const ScrollTesting: TemplateStory = {
   render: Template,
   args: {}
 };
 
-export const Disabled = {
+export const Disabled: TemplateStory = {
   render: Template,
   args: {isDisabled: true}
 };
 
-export const FocusWrapping = {
+export const FocusWrapping: TemplateStory = {
   render: Template,
   args: {shouldFocusWrap: true}
 };