chore: Audit and fix v3 and s2

.circleci/config.yml

@@ -401,7 +401,7 @@ jobs:
           command: |
             yarn test:parcel
             mkdir -p dist
-            yarn compare:apis --isCI --branch-api-dir="/tmp/dist/branch-api" --base-api-dir="/tmp/dist/base-api" | tee dist/ts-diff.txt
+            yarn compare:apis --isCI --branch-api-dir="/tmp/dist/branch-api" | tee dist/ts-diff.txt
 
       - persist_to_workspace:
           root: dist

package.json

@@ -52,7 +52,7 @@
     "publish:nightly": "yarn workspaces foreach --all --no-private -t npm publish --tag nightly --access public",
     "build:api-published": "node scripts/buildPublishedAPI.js",
     "build:api-branch": "node scripts/buildBranchAPI.js",
-    "compare:apis": "node scripts/compareAPIs.js",
+    "compare:apis": "node scripts/compareAPIs.js --compare-v3-s2",
     "check-apis": "yarn build:api-branch --githash=\"origin/main\" --output=\"base-api\" && yarn build:api-branch && yarn compare:apis",
     "check-published-apis": "yarn build:api-published && yarn build:api-branch && yarn compare:apis",
     "bumpVersions": "node scripts/bumpVersions.js",

packages/@react-aria/gridlist/src/useGridListItem.ts

@@ -283,10 +283,10 @@ export function useGridListItem<T>(props: AriaGridListItemOptions, state: ListSt
     onKeyDown,
     onFocus,
     // 'aria-label': [(node.textValue || undefined), rowAnnouncement].filter(Boolean).join(', '),
-    'aria-label': node.textValue || undefined,
+    'aria-label': node['aria-label'] || node.textValue || undefined,
     'aria-selected': state.selectionManager.canSelectItem(node.key) ? state.selectionManager.isSelected(node.key) : undefined,
     'aria-disabled': state.selectionManager.isDisabled(node.key) || undefined,
-    'aria-labelledby': descriptionId && node.textValue ? `${getRowId(state, node.key)} ${descriptionId}` : undefined,
+    'aria-labelledby': descriptionId && (node['aria-label'] || node.textValue) ? `${getRowId(state, node.key)} ${descriptionId}` : undefined,
     id: getRowId(state, node.key)
   });
 

packages/@react-spectrum/s2/chromatic/Breadcrumbs.stories.tsx

@@ -12,7 +12,7 @@
 
 import {Breadcrumb, Breadcrumbs} from '../src';
 import {generatePowerset} from '@react-spectrum/story-utils';
-import {Many} from '../stories/Breadcrumbs.stories';
+import {type IMany, Many} from '../stories/Breadcrumbs.stories';
 import type {Meta, StoryObj} from '@storybook/react';
 import {ReactNode} from 'react';
 import {shortName} from './utils';
@@ -27,7 +27,7 @@ const meta: Meta<typeof Breadcrumbs> = {
 
 export default meta;
 
-export const Dynamic: StoryObj<typeof Breadcrumbs> = {
+export const Dynamic: StoryObj<IMany> = {
   ...Many,
   parameters: {
     // TODO: move these options back to meta above once we get strings for ar-AE. This is just to prevent the RTL story's config from actually applying

packages/@react-spectrum/s2/package.json

@@ -164,6 +164,7 @@
     "@react-stately/utils": "^3.10.8",
     "@react-types/dialog": "^3.5.22",
     "@react-types/grid": "^3.3.6",
+    "@react-types/overlays": "^3.9.2",
     "@react-types/provider": "^3.8.13",
     "@react-types/shared": "^3.32.1",
     "@react-types/table": "^3.13.4",

packages/@react-spectrum/s2/src/ActionBar.tsx

@@ -15,11 +15,12 @@ import {announce} from '@react-aria/live-announcer';
 import {CloseButton} from './CloseButton';
 import {ContextValue, SlotProps} from 'react-aria-components';
 import {createContext, ForwardedRef, forwardRef, ReactElement, ReactNode, RefObject, useCallback, useEffect, useMemo, useRef, useState} from 'react';
-import {DOMRef, DOMRefValue, Key} from '@react-types/shared';
+import {DOMProps, DOMRef, DOMRefValue, Key} from '@react-types/shared';
 import {FocusScope, useKeyboard} from 'react-aria';
 // @ts-ignore
 import intlMessages from '../intl/*.json';
 import {lightDark, style} from '../style' with {type: 'macro'};
+import {StyleProps} from './style-utils' with { type: 'macro' };
 import {useControlledState} from '@react-stately/utils';
 import {useDOMRef} from '@react-spectrum/utils';
 import {useEnterAnimation, useExitAnimation, useObjectRef, useResizeObserver} from '@react-aria/utils';
@@ -74,7 +75,7 @@ const actionBarStyles = style({
   }
 });
 
-export interface ActionBarProps extends SlotProps {
+export interface ActionBarProps extends SlotProps, StyleProps, DOMProps {
   /** A list of ActionButtons to display. */
   children: ReactNode,
   /** Whether the ActionBar should be displayed with a emphasized style. */
@@ -106,7 +107,8 @@ export const ActionBar = forwardRef(function ActionBar(props: ActionBarProps, re
 });
 
 const ActionBarInner = forwardRef(function ActionBarInner(props: ActionBarProps & {isExiting: boolean}, ref: ForwardedRef<HTMLDivElement | null>) {
-  let {isEmphasized, selectedItemCount = 0, children, onClearSelection, isExiting} = props;
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  let {isEmphasized, selectedItemCount = 0, children, onClearSelection, isExiting, slot, ...otherProps} = props;
   let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/s2');
 
   // Store the last count greater than zero so that we can retain it while rendering the fade-out animation.
@@ -158,6 +160,7 @@ const ActionBarInner = forwardRef(function ActionBarInner(props: ActionBarProps
     <FocusScope restoreFocus>
       <div
         ref={objectRef}
+        {...otherProps}
         {...keyboardProps}
         className={actionBarStyles({isEmphasized, isInContainer: !!scrollRef, isEntering, isExiting})}
         style={{insetInlineEnd: `calc(var(--insetEnd) + ${scrollbarWidth}px)`}}>

packages/@react-spectrum/s2/src/ActionMenu.tsx

@@ -29,6 +29,11 @@ export interface ActionMenuProps<T> extends
   Pick<MenuProps<T>, 'children' | 'items' | 'disabledKeys' | 'onAction'>,
   Pick<ActionButtonProps, 'isDisabled' | 'isQuiet' | 'autoFocus' | 'size'>,
   StyleProps, DOMProps, AriaLabelingProps {
+  /**
+   * The size of the Trigger and Menu.
+   *
+   * @default 'M'
+   */
   menuSize?: 'S' | 'M' | 'L' | 'XL'
 }
 

packages/@react-spectrum/s2/src/Breadcrumbs.tsx

@@ -62,9 +62,9 @@ interface BreadcrumbsStyleProps {
   // TODO: showRoot?: boolean,
 }
 
-export interface BreadcrumbsProps<T> extends Omit<AriaBreadcrumbsProps<T>, 'children' | 'items' | 'style' | 'className' | keyof GlobalDOMAttributes>, BreadcrumbsStyleProps, StyleProps {
+export interface BreadcrumbsProps<T> extends Omit<AriaBreadcrumbsProps<T>, 'children' | 'style' | 'className' | keyof GlobalDOMAttributes>, BreadcrumbsStyleProps, StyleProps {
   /** The children of the Breadcrumbs. */
-  children: ReactNode
+  children: ReactNode | ((item: T) => ReactNode)
 }
 
 export const BreadcrumbsContext = createContext<ContextValue<Partial<BreadcrumbsProps<any>>, DOMRefValue<HTMLOListElement>>>(null);

packages/@react-spectrum/s2/src/ContextualHelp.tsx

@@ -11,6 +11,7 @@ import InfoIcon from '../s2wf-icons/S2_Icon_InfoCircle_20_N.svg';
 // @ts-ignore
 import intlMessages from '../intl/*.json';
 import {mergeStyles} from '../style/runtime';
+import {Placement} from '@react-types/overlays';
 import {Popover, PopoverDialogProps} from './Popover';
 import {space, style} from '../style' with {type: 'macro'};
 import {StyleProps} from './style-utils' with { type: 'macro' };
@@ -29,6 +30,11 @@ export interface ContextualHelpProps extends
   Pick<DialogTriggerProps, 'isOpen' | 'defaultOpen' | 'onOpenChange'>,
   Pick<PopoverDialogProps, 'shouldFlip' | 'offset' | 'crossOffset' | 'placement' | 'containerPadding'>,
   ContextualHelpStyleProps, StyleProps, DOMProps, AriaLabelingProps {
+  /**
+   * The placement of the popover with respect to the action button.
+   * @default 'bottom start'
+   */
+  placement?: Placement,
   /** Contents of the Contextual Help popover. */
   children: ReactNode,
   /**

packages/@react-spectrum/s2/src/DatePicker.tsx

@@ -20,14 +20,15 @@ import {
   Dialog,
   FormContext,
   OverlayTriggerStateContext,
+  PopoverProps,
   Provider,
   TimeValue
 } from 'react-aria-components';
 import {baseColor, focusRing, fontRelative, space, style} from '../style' with {type: 'macro'};
 import {Calendar, CalendarProps, IconContext, TimeField} from '../';
 import CalendarIcon from '../s2wf-icons/S2_Icon_Calendar_20_N.svg';
 import {controlBorderRadius, field, fieldInput, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};
-import {createContext, forwardRef, PropsWithChildren, ReactElement, Ref, useContext, useRef, useState} from 'react';
+import {createContext, forwardRef, ReactElement, ReactNode, Ref, useContext, useRef, useState} from 'react';
 import {DateInput, DateInputContainer, InvalidIndicator} from './DateField';
 import {FieldGroup, FieldLabel, HelpText} from './Field';
 import {forwardRefType, GlobalDOMAttributes, HelpTextProps, SpectrumLabelableProps} from '@react-types/shared';
@@ -42,6 +43,7 @@ import {useSpectrumContextProps} from './useSpectrumContextProps';
 export interface DatePickerProps<T extends DateValue> extends
   Omit<AriaDatePickerProps<T>, 'children' | 'className' | 'style' | keyof GlobalDOMAttributes>,
   Pick<CalendarProps<T>, 'createCalendar' | 'pageBehavior' | 'firstDayOfWeek' | 'isDateUnavailable'>,
+  Pick<PopoverProps, 'shouldFlip'>,
   StyleProps,
   SpectrumLabelableProps,
   HelpTextProps {
@@ -203,7 +205,7 @@ export const DatePicker = /*#__PURE__*/ (forwardRef as forwardRefType)(function
               <InvalidIndicator isInvalid={isInvalid} isDisabled={isDisabled} />
               <CalendarButton isOpen={isOpen} size={size} setButtonHasFocus={setButtonHasFocus} />
             </FieldGroup>
-            <CalendarPopover>
+            <CalendarPopover shouldFlip={props.shouldFlip}>
               <Calendar
                 visibleMonths={maxVisibleMonths}
                 createCalendar={createCalendar} />
@@ -238,9 +240,10 @@ export const DatePicker = /*#__PURE__*/ (forwardRef as forwardRefType)(function
   );
 });
 
-export function CalendarPopover(props: PropsWithChildren): ReactElement {
+export function CalendarPopover(props: Omit<PopoverProps, 'children'> & {children: ReactNode}): ReactElement {
   return (
     <Popover
+      {...props}
       hideArrow
       padding="none">
       <div

packages/@react-spectrum/s2/src/DateRangePicker.tsx

@@ -15,7 +15,8 @@ import {
   DateRangePickerProps as AriaDateRangePickerProps,
   ContextValue,
   DateValue,
-  FormContext
+  FormContext,
+  PopoverProps
 } from 'react-aria-components';
 import {CalendarButton, CalendarPopover, timeField} from './DatePicker';
 import {createContext, forwardRef, ReactElement, Ref, useContext, useState} from 'react';
@@ -34,6 +35,7 @@ import {useSpectrumContextProps} from './useSpectrumContextProps';
 export interface DateRangePickerProps<T extends DateValue> extends
   Omit<AriaDateRangePickerProps<T>, 'children' | 'className' | 'style' | keyof GlobalDOMAttributes>,
   Pick<RangeCalendarProps<T>, 'createCalendar' | 'pageBehavior' | 'firstDayOfWeek' | 'isDateUnavailable'>,
+  Pick<PopoverProps, 'shouldFlip'>,
   StyleProps,
   SpectrumLabelableProps,
   HelpTextProps {
@@ -143,7 +145,7 @@ export const DateRangePicker = /*#__PURE__*/ (forwardRef as forwardRefType)(func
                 <CalendarButton isOpen={isOpen} size={size} setButtonHasFocus={setButtonHasFocus} />
               </div>
             </FieldGroup>
-            <CalendarPopover>
+            <CalendarPopover shouldFlip={props.shouldFlip}>
               <RangeCalendar
                 visibleMonths={maxVisibleMonths}
                 createCalendar={createCalendar} />

packages/@react-spectrum/s2/src/Picker.tsx

@@ -674,7 +674,7 @@ function DefaultProvider({context, value, children}: {context: React.Context<any
   return <context.Provider value={value}>{children}</context.Provider>;
 }
 
-export interface PickerSectionProps<T extends object> extends Omit<SectionProps<T>, keyof GlobalDOMAttributes> {}
+export interface PickerSectionProps<T extends object> extends Omit<SectionProps<T>, 'style' | 'className' | keyof GlobalDOMAttributes>, StyleProps {}
 export function PickerSection<T extends object>(props: PickerSectionProps<T>): ReactNode {
   let {size} = useContext(InternalPickerContext);
   return (

packages/@react-spectrum/s2/src/Provider.tsx

@@ -13,14 +13,16 @@
 import type {ColorScheme, Router} from '@react-types/provider';
 import {colorScheme, UnsafeStyles} from './style-utils' with {type: 'macro'};
 import {createContext, JSX, ReactNode, useContext} from 'react';
+import {DOMProps} from '@react-types/shared';
+import {filterDOMProps} from '@react-aria/utils';
 import {Fonts} from './Fonts';
 import {generateDefaultColorSchemeStyles} from './page.macro' with {type: 'macro'};
 import {I18nProvider, RouterProvider, useLocale} from 'react-aria-components';
 import {mergeStyles} from '../style/runtime';
 import {style} from '../style' with {type: 'macro'};
 import {StyleString} from '../style/types';
 
-export interface ProviderProps extends UnsafeStyles {
+export interface ProviderProps extends UnsafeStyles, DOMProps {
   /** The content of the Provider. */
   children: ReactNode,
   /**
@@ -113,6 +115,7 @@ function ProviderInner(props: ProviderProps) {
   let {locale, direction} = useLocale();
   return (
     <Element
+      {...filterDOMProps(props)}
       lang={locale}
       dir={direction}
       style={UNSAFE_style}

packages/@react-spectrum/s2/src/StatusLight.tsx

@@ -26,6 +26,8 @@ interface StatusLightStyleProps {
   /**
    * The variant changes the color of the status light.
    * When status lights have a semantic meaning, they should use the variant for semantic colors.
+   *
+   * @default 'neutral'
    */
   variant: 'informative' | 'neutral' | 'positive' | 'notice' | 'negative' | 'celery' | 'chartreuse' | 'cyan' | 'fuchsia' | 'purple' | 'magenta' | 'indigo' | 'seafoam' | 'yellow' | 'pink' | 'turquoise' | 'cinnamon' | 'brown' | 'silver',
   /**

packages/@react-spectrum/s2/src/TableView.tsx

@@ -58,7 +58,7 @@ import Chevron from '../ui-icons/Chevron';
 import Close from '../s2wf-icons/S2_Icon_Close_20_N.svg';
 import {ColumnSize} from '@react-types/table';
 import {CustomDialog, DialogContainer} from '..';
-import {DOMRef, DOMRefValue, forwardRefType, GlobalDOMAttributes, LoadingState, Node} from '@react-types/shared';
+import {DOMProps, DOMRef, DOMRefValue, forwardRefType, GlobalDOMAttributes, LoadingState, Node} from '@react-types/shared';
 import {getActiveElement, getOwnerDocument, useLayoutEffect, useObjectRef} from '@react-aria/utils';
 import {GridNode} from '@react-types/grid';
 import {IconContext} from './Icon';
@@ -120,7 +120,7 @@ interface S2TableProps {
 }
 
 // TODO: Note that loadMore and loadingState are now on the Table instead of on the TableBody
-export interface TableViewProps extends Omit<RACTableProps, 'style' | 'disabledBehavior' | 'className' | 'onRowAction' | 'selectionBehavior' | 'onScroll' | 'onCellAction' | 'dragAndDropHooks' | keyof GlobalDOMAttributes>, UnsafeStyles, S2TableProps {
+export interface TableViewProps extends Omit<RACTableProps, 'style' | 'className' | 'onRowAction' | 'selectionBehavior' | 'onScroll' | 'onCellAction' | 'dragAndDropHooks' | keyof GlobalDOMAttributes>, DOMProps, UnsafeStyles, S2TableProps {
   /** Spectrum-defined styles, returned by the `style()` macro. */
   styles?: StylesPropWithHeight
 }

packages/@react-spectrum/s2/src/TagGroup.tsx

@@ -35,7 +35,7 @@ import {ClearButton} from './ClearButton';
 import {Collection, CollectionBuilder} from '@react-aria/collections';
 import {control, field, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};
 import {createContext, forwardRef, ReactNode, useContext, useEffect, useMemo, useRef, useState} from 'react';
-import {DOMRef, DOMRefValue, GlobalDOMAttributes, HelpTextProps, Node, SpectrumLabelableProps} from '@react-types/shared';
+import {DOMRef, DOMRefValue, GlobalDOMAttributes, HelpTextProps, LabelableProps, Node, SpectrumLabelableProps} from '@react-types/shared';
 import {FieldLabel, helpTextStyles} from './Field';
 import {flushSync} from 'react-dom';
 import {FormContext, useFormProps} from './Form';
@@ -52,7 +52,7 @@ import {useLocalizedStringFormatter} from '@react-aria/i18n';
 import {useSpectrumContextProps} from './useSpectrumContextProps';
 
 // Get types from RSP and extend those?
-export interface TagProps extends Omit<AriaTagProps, 'children' | 'style' | 'className' | 'onClick' | keyof GlobalDOMAttributes> {
+export interface TagProps extends Omit<AriaTagProps, 'children' | 'style' | 'className' | 'onClick' | keyof GlobalDOMAttributes>, LabelableProps {
   /** The children of the tag. */
   children: ReactNode
 }

packages/@react-spectrum/s2/src/ToggleButtonGroup.tsx

@@ -13,10 +13,10 @@
 import {ActionButtonGroupProps, actionGroupStyle} from './ActionButtonGroup';
 import {ContextValue, ToggleButtonGroup as RACToggleButtonGroup, ToggleButtonGroupProps as RACToggleButtonGroupProps} from 'react-aria-components';
 import {createContext, ForwardedRef, forwardRef} from 'react';
-import {GlobalDOMAttributes} from '@react-types/shared';
+import {DOMProps, GlobalDOMAttributes} from '@react-types/shared';
 import {useSpectrumContextProps} from './useSpectrumContextProps';
 
-export interface ToggleButtonGroupProps extends ActionButtonGroupProps, Omit<RACToggleButtonGroupProps, 'children' | 'style' | 'className' | keyof GlobalDOMAttributes> {
+export interface ToggleButtonGroupProps extends ActionButtonGroupProps, Omit<RACToggleButtonGroupProps, 'children' | 'style' | 'className' | keyof GlobalDOMAttributes>, DOMProps {
   /** Whether the button should be displayed with an [emphasized style](https://spectrum.adobe.com/page/action-button/#Emphasis). */
   isEmphasized?: boolean
 }

packages/@react-spectrum/s2/src/Tooltip.tsx

@@ -23,7 +23,7 @@ import {centerPadding, colorScheme, UnsafeStyles} from './style-utils' with {typ
 import {ColorScheme} from '@react-types/provider';
 import {ColorSchemeContext} from './Provider';
 import {createContext, forwardRef, MutableRefObject, ReactNode, useCallback, useContext, useState} from 'react';
-import {DOMRef, GlobalDOMAttributes} from '@react-types/shared';
+import {DOMProps, DOMRef, GlobalDOMAttributes} from '@react-types/shared';
 import {style} from '../style' with {type: 'macro'};
 import {useDOMRef} from '@react-spectrum/utils';
 
@@ -35,10 +35,16 @@ export interface TooltipTriggerProps extends Omit<AriaTooltipTriggerComponentPro
    *
    * @default 'top'
    */
-  placement?: 'start' | 'end' | 'right' | 'left' | 'top' | 'bottom'
+  placement?: 'start' | 'end' | 'right' | 'left' | 'top' | 'bottom',
+  /**
+   * The offset of the tooltip from the trigger.
+   *
+   * @default 4
+   */
+  offset?: number
 }
 
-export interface TooltipProps extends Omit<AriaTooltipProps, 'children' | 'className' | 'style' | 'triggerRef' | 'UNSTABLE_portalContainer' | 'isEntering' | 'isExiting' | 'placement' | 'containerPadding' |  'offset' | 'crossOffset' |  'shouldFlip' | 'arrowBoundaryOffset' | 'isOpen' | 'defaultOpen' | 'onOpenChange' | keyof GlobalDOMAttributes>, UnsafeStyles {
+export interface TooltipProps extends Omit<AriaTooltipProps, 'children' | 'className' | 'style' | 'triggerRef' | 'UNSTABLE_portalContainer' | 'isEntering' | 'isExiting' | 'placement' | 'containerPadding' |  'offset' | 'crossOffset' |  'shouldFlip' | 'arrowBoundaryOffset' | 'isOpen' | 'defaultOpen' | 'onOpenChange' | keyof GlobalDOMAttributes>, DOMProps, UnsafeStyles {
   /** The content of the tooltip. */
   children: ReactNode
 }
@@ -139,7 +145,7 @@ export const Tooltip = forwardRef(function Tooltip(props: TooltipProps, ref: DOM
   let {
     containerPadding,
     crossOffset,
-    offset,
+    offset = 4,
     placement = 'top',
     shouldFlip
   } = useContext(InternalTooltipTriggerContext);