Merge branch 'main' of github.com:adobe/react-spectrum into concepts

# Conflicts:
#	packages/dev/s2-docs/pages/react-aria/styling.mdx

Author: devongovett

packages/@react-aria/i18n/src/useDefaultLocale.ts

@@ -80,8 +80,9 @@ export function useDefaultLocale(): Locale {
   // We cannot determine the browser's language on the server, so default to
   // en-US. This will be updated after hydration on the client to the correct value.
   if (isSSR) {
+    let locale = typeof window !== 'undefined' && window[localeSymbol];
     return {
-      locale: 'en-US',
+      locale: locale || 'en-US',
       direction: 'ltr'
     };
   }

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

@@ -141,7 +141,6 @@
   },
   "devDependencies": {
     "@adobe/spectrum-tokens": "^13.15.1",
-    "@parcel/macros": "^2.16.0",
     "@react-aria/test-utils": "^1.0.0-alpha.8",
     "@storybook/jest": "^0.2.3",
     "@testing-library/dom": "^10.1.0",
@@ -152,6 +151,7 @@
   "dependencies": {
     "@internationalized/date": "^3.10.0",
     "@internationalized/number": "^3.6.5",
+    "@parcel/macros": "^2.16.0",
     "@react-aria/calendar": "^3.9.2",
     "@react-aria/collections": "^3.0.0",
     "@react-aria/focus": "^3.21.2",

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

@@ -52,7 +52,7 @@ import {useSpectrumContextProps} from './useSpectrumContextProps';
 
 
 export interface CalendarProps<T extends DateValue>
-  extends Omit<AriaCalendarProps<T>, 'visibleDuration' | 'style' | 'className' | 'styles' | keyof GlobalDOMAttributes>,
+  extends Omit<AriaCalendarProps<T>, 'visibleDuration' | 'style' | 'className' | 'styles' | 'children' | keyof GlobalDOMAttributes>,
   StyleProps {
   /**
    * The error message to display when the calendar is invalid.

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

@@ -29,7 +29,7 @@ interface DividerSpectrumProps {
    */
   size?: 'S' | 'M' | 'L',
   /**
-   * How thick the Divider should be.
+   * The orientation of the Divider.
    * @default 'horizontal'
    */
   orientation?: 'horizontal' | 'vertical',

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

@@ -409,7 +409,12 @@ export function Divider(props: SeparatorProps): ReactNode {
   );
 }
 
-export interface MenuSectionProps<T extends object> extends Omit<AriaMenuSectionProps<T>, keyof GlobalDOMAttributes> {}
+export interface MenuSectionProps<T extends object> extends Omit<AriaMenuSectionProps<T>, 'style' | 'className' | keyof GlobalDOMAttributes> {
+  /**
+   * The children of the menu section.
+   */
+  children?: ReactNode
+}
 export function MenuSection<T extends object>(props: MenuSectionProps<T>): ReactNode {
   // remember, context doesn't work if it's around Section nor inside
   let {size} = useContext(InternalMenuContext);

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

@@ -22,7 +22,7 @@ import {
 } from 'react-aria-components';
 import {colorScheme, getAllowedOverrides, heightProperties, UnsafeStyles, widthProperties} from './style-utils' with {type: 'macro'};
 import {ColorSchemeContext} from './Provider';
-import {createContext, ForwardedRef, forwardRef, useCallback, useContext, useMemo} from 'react';
+import {createContext, ForwardedRef, forwardRef, ReactNode, useCallback, useContext, useMemo} from 'react';
 import {DOMRef, DOMRefValue, GlobalDOMAttributes} from '@react-types/shared';
 import {lightDark, style} from '../style' with {type: 'macro'};
 import {mergeRefs} from '@react-aria/utils';
@@ -31,7 +31,20 @@ import {StyleString} from '../style/types' with {type: 'macro'};
 import {useDOMRef} from '@react-spectrum/utils';
 import {useSpectrumContextProps} from './useSpectrumContextProps';
 
-export interface PopoverProps extends UnsafeStyles, Omit<AriaPopoverProps, 'arrowSize' | 'isNonModal' | 'arrowBoundaryOffset' | 'isKeyboardDismissDisabled' | 'shouldCloseOnInteractOutside' | 'shouldUpdatePosition' | keyof GlobalDOMAttributes> {
+export interface PopoverProps extends UnsafeStyles, Omit<AriaPopoverProps,
+  'arrowSize' |
+  'isNonModal' |
+  'arrowBoundaryOffset' |
+  'isKeyboardDismissDisabled' |
+  'shouldCloseOnInteractOutside' |
+  'shouldUpdatePosition' |
+  'style' |
+  'className' |
+  keyof GlobalDOMAttributes
+> {
+  /**
+   * The styles of the popover.
+   */
   styles?: StyleString,
   /**
    * Whether a popover's arrow should be hidden.
@@ -228,7 +241,22 @@ export const PopoverBase = forwardRef(function PopoverBase(props: PopoverProps,
 });
 
 type PopoverStylesProp = StyleString<((typeof widthProperties)[number] | (typeof heightProperties)[number])>;
-export interface PopoverDialogProps extends Pick<PopoverProps, 'children' | 'size' | 'hideArrow'| 'placement' | 'shouldFlip' | 'containerPadding' | 'offset' | 'crossOffset' | 'triggerRef' | 'isOpen' | 'onOpenChange'>, Omit<DialogProps, 'children' | 'className' | 'style' | keyof GlobalDOMAttributes>, UnsafeStyles {
+export interface PopoverDialogProps extends Pick<PopoverProps,
+'size' |
+'hideArrow'|
+'placement' |
+'shouldFlip' |
+'containerPadding' |
+'offset' |
+'crossOffset' |
+'triggerRef' |
+'isOpen' |
+'onOpenChange'
+>, Omit<DialogProps, 'children' | 'className' | 'style' | keyof GlobalDOMAttributes>, UnsafeStyles {
+  /**
+   * The children of the popover.
+   */
+  children?: ReactNode,
   /**
    * The amount of padding around the contents of the dialog.
    * @default 'default'

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

@@ -34,7 +34,7 @@ import {useSpectrumContextProps} from './useSpectrumContextProps';
 
 
 export interface RangeCalendarProps<T extends DateValue>
-  extends Omit<AriaRangeCalendarProps<T>, 'visibleDuration' | 'style' | 'className' | 'styles' | keyof GlobalDOMAttributes>,
+  extends Omit<AriaRangeCalendarProps<T>, 'visibleDuration' | 'style' | 'className' | 'children' | 'styles' | keyof GlobalDOMAttributes>,
   StyleProps {
   /**
    * The error message to display when the calendar is invalid.

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

@@ -519,7 +519,7 @@ const columnStyles = style({
   forcedColorAdjust: 'none'
 });
 
-export interface ColumnProps extends Omit<RACColumnProps, keyof GlobalDOMAttributes> {
+export interface ColumnProps extends Omit<RACColumnProps, 'style' | 'className' | keyof GlobalDOMAttributes> {
   /** Whether the column should render a divider between it and the next column. */
   showDivider?: boolean,
   /** Whether the column allows resizing. */
@@ -1017,7 +1017,7 @@ const cellContent = style({
   }
 });
 
-export interface CellProps extends RACCellProps, Pick<ColumnProps, 'align' | 'showDivider'> {
+export interface CellProps extends Omit<RACCellProps, 'style' | 'className' | keyof GlobalDOMAttributes>, Pick<ColumnProps, 'align' | 'showDivider'> {
   /** @private */
   isSticky?: boolean,
   /** The content to render as the cell children. */
@@ -1410,6 +1410,9 @@ export const Row = /*#__PURE__*/ (forwardRef as forwardRefType)(function Row<T e
       }) + (renderProps.isFocusVisible && ' ' + raw('&:before { content: ""; display: inline-block; position: sticky; inset-inline-start: 0; width: 3px; height: 100%; margin-inline-end: -3px; margin-block-end: 1px;  z-index: 3; background-color: var(--rowFocusIndicatorColor)'))}
       {...otherProps}>
       {selectionMode !== 'none' && selectionBehavior === 'toggle' && (
+        // Not sure what we want to do with this className, in Cell it currently overrides the className that would have been applied.
+        // The `spread` otherProps must be after className in Cell.
+        // @ts-ignore
         <Cell isSticky className={checkboxCellStyle}>
           <Checkbox isEmphasized slot="selection" />
         </Cell>

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

@@ -34,7 +34,7 @@ import {useMediaQuery} from '@react-spectrum/utils';
 import {useOverlayTriggerState} from 'react-stately';
 
 export type ToastPlacement = 'top' | 'top end' | 'bottom' | 'bottom end';
-export interface ToastContainerProps extends Omit<ToastRegionProps<SpectrumToastValue>, 'queue' | 'children'> {
+export interface ToastContainerProps extends Omit<ToastRegionProps<SpectrumToastValue>, 'queue' | 'children' | 'style' | 'className'> {
   /**
    * Placement of the toast container on the page.
    * @default "bottom"
@@ -490,7 +490,7 @@ export function SpectrumToast(props: SpectrumToastProps): ReactNode {
           width: '100%',
           translate: `0 0 ${(-12 * index) / 16}rem`,
           // Only 3 toasts are visible in the stack at once, but all toasts are in the DOM.
-          // This allows view transitions to smoothly animate them from where they would be 
+          // This allows view transitions to smoothly animate them from where they would be
           // in the collapsed stack to their final position in the expanded list.
           opacity: index >= 3 ? 0 : 1,
           zIndex: visibleToasts.length - index - 1,
@@ -528,7 +528,7 @@ export function SpectrumToast(props: SpectrumToastProps): ReactNode {
           }
           <Text slot="title">{toast.content.children}</Text>
         </ToastContent>
-        {!isExpanded && visibleToasts.length > 1 && 
+        {!isExpanded && visibleToasts.length > 1 &&
           <ActionButton
             isQuiet
             staticColor="white"

packages/dev/docs/pages/react-aria/home/ExampleApp.tsx

@@ -13,10 +13,10 @@
 import {AlertDialog} from 'tailwind-starter/AlertDialog';
 import {Arrow} from './components';
 import {Button} from 'tailwind-starter/Button';
-import {Cell, Column, Row, Table, TableHeader} from 'tailwind-starter/Table';
+import {Cell, Column, Row, Table, TableBody, TableHeader} from 'tailwind-starter/Table';
 import {Checkbox} from 'tailwind-starter/Checkbox';
 import {CloudSun, Dessert, Droplet, Droplets, FilterIcon, Mail, MoreHorizontal, PencilIcon, PlusIcon, RefreshCw, ShareIcon, SlidersIcon, StarIcon, Sun, SunDim, TrashIcon, Twitter} from 'lucide-react';
-import {ColumnProps, Dialog, DialogTrigger, DropZone, Form, Heading, isFileDropItem, Key, ModalOverlay, ModalOverlayProps, Modal as RACModal, Selection, SortDescriptor, TableBody, Text, ToggleButton, ToggleButtonProps, TooltipTrigger} from 'react-aria-components';
+import {ColumnProps, Dialog, DialogTrigger, DropZone, Form, Heading, isFileDropItem, Key, ModalOverlay, ModalOverlayProps, Modal as RACModal, Selection, SortDescriptor, Text, ToggleButton, ToggleButtonProps, TooltipTrigger} from 'react-aria-components';
 import {ComboBox, ComboBoxItem} from 'tailwind-starter/ComboBox';
 import {DatePicker} from 'tailwind-starter/DatePicker';
 import {focusRing} from 'tailwind-starter/utils';
@@ -177,7 +177,7 @@ export function ExampleApp(): React.ReactNode {
         <SearchField aria-label="Search" value={search} onChange={setSearch} className="col-span-3 sm:col-span-1" />
         <DialogTrigger>
           <TooltipTrigger>
-            <Button aria-label="Filters" variant="secondary" className="w-9 h-9 shrink-0 p-0 relative">
+            <Button aria-label="Filters" variant="secondary" className="w-9 h-9 shrink-0 p-0 px-2 relative">
               <FilterIcon aria-hidden className="block w-5 h-5" />
               {filters > 0 && <div className="absolute -top-2 -right-2 rounded-full h-4 aspect-square text-white text-xs bg-blue-600">{filters}</div>}
             </Button>
@@ -239,7 +239,7 @@ export function ExampleApp(): React.ReactNode {
                 <span className="truncate capitalize">{item.common_name}</span>
                 <span className="truncate text-xs text-gray-600 dark:text-zinc-400 col-start-2 row-start-2">{item.scientific_name}</span>
                 <MenuTrigger placement="bottom end" >
-                  <Button aria-label="Actions" variant="secondary" className="row-span-2 place-self-center"><MoreHorizontal className="w-5 h-5" /></Button>
+                  <Button aria-label="Actions" variant="secondary" className="row-span-2 place-self-center bg-transparent dark:bg-transparent border-transparent dark:border-transparent !p-1"><MoreHorizontal className="w-5 h-5" /></Button>
                   <Menu onAction={action => onAction(item, action)}>
                     <MenuItem id="favorite"><StarIcon aria-hidden className="w-4 h-4" /> {item.isFavorite ? 'Unfavorite' : 'Favorite'}</MenuItem>
                     <MenuItem id="edit"><PencilIcon aria-hidden className="w-4 h-4" /> Edit…</MenuItem>
@@ -266,7 +266,7 @@ export function ExampleApp(): React.ReactNode {
           <TableHeader columns={columns}>
             {column => <Column {...column} />}
           </TableHeader>
-          <TableBody items={items} dependencies={[columns]}>
+          <TableBody items={items} dependencies={[columns]} renderEmptyState={() => 'No results. Try changing the filters.'}>
             {item => (
               <Row columns={columns}>
                 {column => {