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>();