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

Author: LFDanLu

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/Card.tsx

@@ -15,7 +15,7 @@ import {AvatarContext} from './Avatar';
 import {ButtonContext, LinkButtonContext} from './Button';
 import {Checkbox} from './Checkbox';
 import {color, focusRing, lightDark, space, style} from '../style' with {type: 'macro'};
-import {composeRenderProps, ContextValue, DEFAULT_SLOT, type GridListItem, GridListItemProps, Provider} from 'react-aria-components';
+import {composeRenderProps, ContextValue, DEFAULT_SLOT, type GridListItem, GridListItemProps, Link, Provider} from 'react-aria-components';
 import {ContentContext, FooterContext, TextContext} from './Content';
 import {createContext, CSSProperties, forwardRef, ReactNode, useContext} from 'react';
 import {DividerContext} from './Divider';
@@ -95,18 +95,19 @@ let card = style({
     variant: {
       tertiary: {
         // Render border with box-shadow to avoid affecting layout.
-        default: `[0 0 0 1px ${color('gray-100')}]`,
-        isHovered: `[0 0 0 1px ${color('gray-200')}]`,
-        isFocusVisible: `[0 0 0 1px ${color('gray-200')}]`,
+        default: `[0 0 0 2px ${color('gray-100')}]`,
+        isHovered: `[0 0 0 2px ${color('gray-200')}]`,
+        isFocusVisible: `[0 0 0 2px ${color('gray-200')}]`,
         isSelected: 'none',
-        forcedColors: '[0 0 0 1px ButtonBorder]'
+        forcedColors: '[0 0 0 2px ButtonBorder]'
       },
       quiet: 'none'
     }
   },
   forcedColorAdjust: 'none',
   transition: 'default',
   fontFamily: 'sans',
+  textDecoration: 'none',
   overflow: {
     default: 'clip',
     variant: {
@@ -424,6 +425,28 @@ export const Card = forwardRef(function Card(props: CardProps, ref: DOMRef<HTMLD
     </Provider>
   );
 
+  let press = pressScale(domRef, UNSAFE_style);
+  if (ElementType === 'div' && !isSkeleton && props.href) {
+    // Standalone Card that has an href should be rendered as a Link.
+    // NOTE: In this case, the card must not contain interactive elements.
+    return (
+      <Link
+        {...filterDOMProps(otherProps, {isLink: true})}
+        ref={domRef as any}
+        className={renderProps => UNSAFE_className + card({...renderProps, size, density, variant, isCardView: false, isLink: true}, styles)}
+        style={renderProps =>
+          // Only the preview in quiet cards scales down on press
+          variant === 'quiet' ? UNSAFE_style : press(renderProps)
+        }>
+        {(renderProps) => (
+          <InternalCardContext.Provider value={{size, isQuiet, isCheckboxSelection: false, isSelected: false, ...renderProps}}>
+            {children}
+          </InternalCardContext.Provider>
+        )}
+      </Link>
+    );
+  }
+
   if (ElementType === 'div' || isSkeleton) {
     return (
       <div
@@ -441,7 +464,6 @@ export const Card = forwardRef(function Card(props: CardProps, ref: DOMRef<HTMLD
     );
   }
 
-  let press = pressScale(domRef, UNSAFE_style);
   return (
     <ElementType
       {...props}

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/@react-spectrum/s2/style/index.ts

@@ -11,18 +11,14 @@
  */
 
 import type * as CSS from 'csstype';
-import {Inset, fontRelative as internalFontRelative, size as internalSize, space as internalSpace, Spacing, style} from './spectrum-theme';
+import {Inset, fontRelative as internalFontRelative, space as internalSpace, Spacing, style} from './spectrum-theme';
 import type {MacroContext} from '@parcel/macros';
 import {StyleString} from './types';
 
-export {baseColor, color, edgeToText, lightDark, linearGradient, colorMix, style} from './spectrum-theme';
+export {baseColor, color, edgeToText, lightDark, linearGradient, colorMix, size, style} from './spectrum-theme';
 export type {StyleString} from './types';
 
 // Wrap these functions in arbitrary value syntax when called from the outside.
-export function size(px: number): `[${string}]` {
-  return `[${internalSize(px)}]`;
-}
-
 export function space(px: number): `[${string}]` {
   return `[${internalSpace(px)}]`;
 }

packages/@react-spectrum/s2/style/spectrum-theme.ts

@@ -330,7 +330,7 @@ const padding = {
   ...relativeSpacing
 };
 
-export function size(this: MacroContext | void, px: number): string {
+export function size(this: MacroContext | void, px: number): `calc(${string})` {
   return `calc(${pxToRem(px)} * var(--s2-scale))`;
 }
 
@@ -760,16 +760,17 @@ export const style = createTheme({
       code: 'source-code-pro, "Source Code Pro", Monaco, monospace'
     },
     fontSize: new ExpandedProperty<keyof typeof fontSize>(['fontSize', 'lineHeight'], (value) => {
-      return {
-        '--fs': `pow(1.125, ${value})`,
-        fontSize: `round(${fontSizeCalc} / 16 * 1rem, 1px)`
-      };
+      if (typeof value === 'number') {
+        return {
+          '--fs': `pow(1.125, ${value})`,
+          fontSize: `round(${fontSizeCalc} / 16 * 1rem, 1px)`
+        } as CSSProperties;
+      }
+
+      return {fontSize: value};
     }, fontSize),
     fontWeight: new ExpandedProperty<keyof typeof fontWeight>(['fontWeight', 'fontVariationSettings', 'fontSynthesisWeight'], (value) => {
       return {
-        // Set font-variation-settings in addition to font-weight to work around typekit issue.
-        // (This was fixed, but leaving for backward compatibility for now.)
-        fontVariationSettings: value === 'inherit' ? 'inherit' : `"wght" ${value}`,
         fontWeight: value as any,
         fontSynthesisWeight: 'none'
       };

packages/@react-stately/layout/src/WaterfallLayout.ts

@@ -48,10 +48,12 @@ export interface WaterfallLayoutOptions {
 
 class WaterfallLayoutInfo extends LayoutInfo {
   column = 0;
+  index = 0;
 
   copy(): WaterfallLayoutInfo {
     let res = super.copy() as WaterfallLayoutInfo;
     res.column = this.column;
+    res.index = this.index;
     return res;
   }
 }
@@ -123,18 +125,19 @@ export class WaterfallLayout<T extends object, O extends WaterfallLayoutOptions
     // Setup an array of column heights
     let columnHeights = Array(numColumns).fill(minSpace.height);
     let newLayoutInfos = new Map();
+    let index = 0;
     let addNode = (key: Key, node: Node<T>) => {
       let oldLayoutInfo = this.layoutInfos.get(key);
       let height = itemHeight;
       let estimatedSize = true;
       if (oldLayoutInfo) {
-        height = oldLayoutInfo.rect.height;
+        height = oldLayoutInfo.rect.height / oldLayoutInfo.rect.width * itemWidth;
         estimatedSize = invalidationContext.sizeChanged || oldLayoutInfo.estimatedSize || oldLayoutInfo.content !== node;
       }
 
       // Figure out which column to place the item in, and compute its position.
       // Preserve the previous column index so items don't jump around during resizing unless the number of columns changed.
-      let prevColumn = numColumns === this.numColumns && oldLayoutInfo && oldLayoutInfo.rect.y < this.virtualizer!.visibleRect.maxY ? oldLayoutInfo.column : undefined;
+      let prevColumn = numColumns === this.numColumns && oldLayoutInfo && oldLayoutInfo.index === index && oldLayoutInfo.rect.y < this.virtualizer!.visibleRect.maxY ? oldLayoutInfo.column : undefined;
       let column = prevColumn ?? columnHeights.reduce((minIndex, h, i) => h < columnHeights[minIndex] ? i : minIndex, 0);
       let x = horizontalSpacing + column * (itemWidth + horizontalSpacing) + this.margin;
       let y = columnHeights[column];
@@ -145,6 +148,7 @@ export class WaterfallLayout<T extends object, O extends WaterfallLayoutOptions
       layoutInfo.allowOverflow = true;
       layoutInfo.content = node;
       layoutInfo.column = column;
+      layoutInfo.index = index++;
       newLayoutInfos.set(key, layoutInfo);
 
       columnHeights[column] += layoutInfo.rect.height + minSpace.height;