Merge branch 'main' into new-docs-release-notes

# Conflicts:
#	packages/dev/s2-docs/src/Code.tsx
#	packages/dev/s2-docs/src/CodeBlock.tsx

Author: snowystinger

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/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 => {

packages/dev/s2-docs/pages/react-aria/examples/ios-list.mdx

@@ -11,7 +11,7 @@ export const description = 'A GridList with Framer Motion swipe gestures and lay
 
 # iOS List View
 
-<PageDescription>A re-creation of the iOS List View built with React Aria Components, [Framer Motion](https://www.framer.com/motion/), and [Tailwind CSS](https://tailwindcss.com/) with support for swipe gestures, layout animations, and multiple selection mode.</PageDescription>
+<PageDescription>A re-creation of the iOS List View built with React Aria Components, [Motion](https://motion.dev/), and [Tailwind CSS](https://tailwindcss.com/) with support for swipe gestures, layout animations, and multiple selection mode.</PageDescription>
 
 ```tsx render type="tailwind" expanded
 "use client";
@@ -191,7 +191,7 @@ function ListItem({ id, children, textValue, onRemove }) {
     <MotionItem
       id={id}
       textValue={textValue}
-      className="outline-hidden group relative overflow-clip border-t border-0 border-solid last:border-b border-gray-200 dark:border-gray-800 pressed:bg-gray-200 dark:pressed:bg-gray-800 selected:bg-gray-200 dark:selected:bg-gray-800 focus-visible:outline focus-visible:outline-blue-600 focus-visible:-outline-offset-2"
+      className="outline-hidden group relative overflow-clip border-t border-0 border-solid last:border-b border-gray-200 dark:border-gray-800 pressed:bg-gray-200 dark:pressed:bg-gray-800 selected:bg-gray-200 dark:selected:bg-gray-800 focus-visible:outline-solid focus-visible:outline-blue-600 focus-visible:-outline-offset-2"
       layout
       transition={{ duration: 0.25 }}
       exit={{ opacity: 0 }}

packages/dev/s2-docs/pages/react-aria/examples/photos/Sidebar.css

@@ -78,7 +78,7 @@
     outline-offset: 2px;
   }
 
-  [slot=chevron] {
+  .chevron {
     all: unset;
     margin-right: 4px;
     transition: rotate 200ms;
@@ -87,11 +87,11 @@
     }
   }
 
-  &[data-expanded] [slot=chevron] {
+  &[data-expanded] .chevron {
     rotate: 90deg;
   }
 
-  &:not(:has([slot=chevron]))::before {
+  &:not(:has(.chevron))::before {
     content: '';
     width: 20px;
   }

packages/dev/s2-docs/pages/react-aria/examples/photos/Sidebar.tsx

@@ -30,7 +30,11 @@ export function Sidebar({selectedAlbum, onSelectionChange, isVisible, onDrop}: S
   let renderAlbum = (album: Album) => (
     <TreeItem textValue={album.name} className="sidebar-TreeItem">
       <TreeItemContent>
-        {album.children && <Button slot="chevron"><ChevronRight size={16} /></Button>}
+        {album.children &&
+          <Button slot="chevron" className="chevron">
+            <ChevronRight size={16} />
+          </Button>
+        }
         <span>{album.name}</span>
       </TreeItemContent>
       {album.children && <Collection items={album.children}>{renderAlbum}</Collection>}