Merge branch 'main' into ts-explicit-modules-s2

# Conflicts:
#	packages/@react-spectrum/s2/src/Tabs.tsx

Author: snowystinger

.storybook-s2/docs/StyleMacro.jsx

@@ -205,7 +205,7 @@ function MyComponent({variant}) {
   display: 'flex',
   alignItems: 'center',
   columnGap: 8
-};
+} as const;
 
 const styles = style({
   ...horizontalStack,
@@ -218,7 +218,7 @@ export function horizontalStack(gap: number) {
     display: 'flex',
     alignItems: 'center',
     columnGap: gap
-  };
+  } as const;
 }`)}</Pre>
         <P>Then, import your macro and use it in a component.</P>
         <Pre>{highlight(`// component.tsx

package.json

@@ -25,7 +25,7 @@
     "build:s2-docs": "NODE_ENV=storybook storybook build -c .storybook-s2 --docs",
     "start:docs": "DOCS_ENV=dev parcel 'packages/@react-{spectrum,aria,stately}/*/docs/*.mdx' 'packages/react-aria-components/docs/**/*.mdx' 'packages/@internationalized/*/docs/*.mdx' 'packages/dev/docs/pages/**/*.mdx'",
     "build:docs": "DOCS_ENV=staging parcel build 'packages/@react-{spectrum,aria,stately}/*/docs/*.mdx' 'packages/react-aria-components/docs/**/*.mdx' 'packages/@internationalized/*/docs/*.mdx' 'packages/dev/docs/pages/**/*.mdx'",
-    "test": "cross-env STRICT_MODE=1 yarn jest",
+    "test": "cross-env STRICT_MODE=1 VIRT_ON=1 yarn jest",
     "test:lint": "node packages/**/*.test-lint.js",
     "test-loose": "cross-env VIRT_ON=1 yarn jest",
     "test-storybook": "test-storybook --url http://localhost:9003  --browsers chromium --no-cache",

packages/@internationalized/number/src/NumberParser.ts

@@ -23,7 +23,7 @@ interface Symbols {
 }
 
 const CURRENCY_SIGN_REGEX = new RegExp('^.*\\(.*\\).*$');
-const NUMBERING_SYSTEMS = ['latn', 'arab', 'hanidec', 'deva', 'beng'];
+const NUMBERING_SYSTEMS = ['latn', 'arab', 'hanidec', 'deva', 'beng', 'fullwide'];
 
 /**
  * A NumberParser can be used to perform locale-aware parsing of numbers from Unicode strings,

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/useCalendarCell.ts

@@ -28,7 +28,12 @@ export interface AriaCalendarCellProps {
    * Whether the cell is disabled. By default, this is determined by the
    * Calendar's `minValue`, `maxValue`, and `isDisabled` props.
    */
-  isDisabled?: boolean
+  isDisabled?: boolean,
+
+  /**
+   * Whether the cell is outside of the current month.
+   */
+  isOutsideMonth?: boolean
 }
 
 export interface CalendarCellAria {
@@ -85,7 +90,7 @@ export function useCalendarCell(props: AriaCalendarCellProps, state: CalendarSta
     timeZone: state.timeZone
   });
   let isSelected = state.isSelected(date);
-  let isFocused = state.isCellFocused(date);
+  let isFocused = state.isCellFocused(date) && !props.isOutsideMonth;
   isDisabled = isDisabled || state.isCellDisabled(date);
   let isUnavailable = state.isCellUnavailable(date);
   let isSelectable = !isDisabled && !isUnavailable;

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}
 };

packages/@react-aria/datepicker/src/useDateField.ts

@@ -51,12 +51,12 @@ interface HookData {
   focusManager: FocusManager
 }
 
-export const hookData = new WeakMap<DateFieldState, HookData>();
+export const hookData: WeakMap<DateFieldState, HookData> = new WeakMap<DateFieldState, HookData>();
 
 // Private props that we pass from useDatePicker/useDateRangePicker.
 // Ideally we'd use a Symbol for this, but React doesn't support them: https://github.com/facebook/react/issues/7552
-export const roleSymbol = '__role_' + Date.now();
-export const focusManagerSymbol = '__focusManager_' + Date.now();
+export const roleSymbol: string = '__role_' + Date.now();
+export const focusManagerSymbol: string = '__focusManager_' + Date.now();
 
 /**
  * Provides the behavior and accessibility implementation for a date field component.

packages/@react-aria/datepicker/stories/useDatePicker.stories.tsx

@@ -0,0 +1,44 @@
+/*
+ * Copyright 2025 Adobe. All rights reserved.
+ * 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
+ * governing permissions and limitations under the License.
+ */
+
+import {createCalendar, parseDate} from '@internationalized/date';
+import {Meta, StoryObj} from '@storybook/react';
+import React, {ReactElement, useRef} from 'react';
+import {useDateField} from '../src';
+import {useDateFieldState} from '@react-stately/datepicker';
+import {useLocale} from '@react-aria/i18n';
+
+export function ProgrammaticSetValueExampleRender(): ReactElement {
+  let {locale} = useLocale();
+  let state = useDateFieldState({locale, createCalendar});
+  let ref = useRef<HTMLDivElement>(null);
+  let {fieldProps} = useDateField({'aria-label': 'Date'}, state, ref);
+  return (
+    <div>
+      <div {...fieldProps} ref={ref} data-testid="field">
+        {state.segments.map((seg, i) => <span key={i}>{seg.text}</span>)}
+      </div>
+      <button onClick={() => state.setValue(parseDate('2020-01-01'))} data-testid="set">Set</button>
+    </div>
+  );
+}
+
+export default {
+  title: 'Date and Time/useDatePicker',
+  excludeStories: ['ProgrammaticSetValueExampleRender']
+} as Meta<typeof ProgrammaticSetValueExampleRender>;
+
+type Story = StoryObj<typeof ProgrammaticSetValueExampleRender>;
+
+export const ProgrammaticSetValueExample: Story = {
+  render: () => <ProgrammaticSetValueExampleRender />
+};

packages/@react-aria/datepicker/test/useDatePicker.test.tsx

@@ -0,0 +1,32 @@
+/*
+ * Copyright 2025 Adobe. All rights reserved.
+ * 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
+ * governing permissions and limitations under the License.
+ */
+
+import {pointerMap, render} from '@react-spectrum/test-utils-internal';
+import {ProgrammaticSetValueExampleRender} from '../stories/useDatePicker.stories';
+import React, {} from 'react';
+import userEvent from '@testing-library/user-event';
+
+describe('useDatePicker', function () {
+  let user;
+  beforeAll(() => {
+    user = userEvent.setup({delay: null, pointerMap});
+    jest.useFakeTimers();
+  });
+
+  it('should commit programmatically setValue when field is empty', async () => {
+    let {getByTestId} = render(<ProgrammaticSetValueExampleRender />);
+
+    expect(getByTestId('field')).toHaveTextContent('mm/dd/yyyy');
+    await user.click(getByTestId('set'));
+    expect(getByTestId('field')).toHaveTextContent('2020');
+  });
+});