@react-spectrum/s2 3.0.0-nightly-e7053dd8f-250108 → 3.0.0-nightly-e4497fdb6-250110

package/icons/Skeleton.mjs

@@ -81,7 +81,7 @@ function $5ad421ec19460c48$export$cb6ddd830302c2a8({ children: children }) {
         // @ts-ignore - compatibility with React < 19
         inert: "true",
         ref: $5ad421ec19460c48$export$6b288fe07640c94c(true),
-        className: $5ad421ec19460c48$export$d2353276f167b21f + " . aa _sb _vb _wb _xb _yb",
+        className: $5ad421ec19460c48$export$d2353276f167b21f + " . aa _tb _wb _xb _yb _zb",
         children: children
     });
 }
@@ -101,7 +101,7 @@ function $5ad421ec19460c48$export$6069cbe61f690103({ children: children }) {
 }
 function $5ad421ec19460c48$export$4b7803c08fe9a32b(styles) {
     let isSkeleton = (0, $cHM3s$useContext)($5ad421ec19460c48$export$74e166679b1f49ee);
-    if (isSkeleton) return (0, $feb886035e0d4633$export$e618dc39ac9ad607)(" . _vb _wb _xb _yb", styles);
+    if (isSkeleton) return (0, $feb886035e0d4633$export$e618dc39ac9ad607)(" . _wb _xb _yb _zb", styles);
     return styles || '';
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-spectrum/s2",
-  "version": "3.0.0-nightly-e7053dd8f-250108",
+  "version": "3.0.0-nightly-e4497fdb6-250110",
   "description": "Spectrum 2 UI components in React",
   "license": "Apache-2.0",
   "repository": {
@@ -57,25 +57,25 @@
     "src"
   ],
   "dependencies": {
-    "@react-aria/collections": "3.0.0-nightly-e7053dd8f-250108",
-    "@react-aria/i18n": "3.0.0-nightly-e7053dd8f-250108",
-    "@react-aria/interactions": "3.0.0-nightly-e7053dd8f-250108",
-    "@react-aria/live-announcer": "3.0.0-nightly-e7053dd8f-250108",
-    "@react-aria/utils": "3.0.0-nightly-e7053dd8f-250108",
-    "@react-spectrum/utils": "3.0.0-nightly-e7053dd8f-250108",
-    "@react-stately/layout": "3.0.0-nightly-e7053dd8f-250108",
-    "@react-stately/utils": "3.0.0-nightly-e7053dd8f-250108",
-    "@react-stately/virtualizer": "3.0.0-nightly-e7053dd8f-250108",
-    "@react-types/color": "3.0.0-nightly-e7053dd8f-250108",
-    "@react-types/dialog": "3.0.0-nightly-e7053dd8f-250108",
-    "@react-types/grid": "3.0.0-nightly-e7053dd8f-250108",
-    "@react-types/provider": "3.0.0-nightly-e7053dd8f-250108",
-    "@react-types/shared": "3.0.0-nightly-e7053dd8f-250108",
-    "@react-types/table": "3.0.0-nightly-e7053dd8f-250108",
-    "@react-types/textfield": "3.0.0-nightly-e7053dd8f-250108",
+    "@react-aria/collections": "3.0.0-nightly-e4497fdb6-250110",
+    "@react-aria/i18n": "3.0.0-nightly-e4497fdb6-250110",
+    "@react-aria/interactions": "3.0.0-nightly-e4497fdb6-250110",
+    "@react-aria/live-announcer": "3.0.0-nightly-e4497fdb6-250110",
+    "@react-aria/utils": "3.0.0-nightly-e4497fdb6-250110",
+    "@react-spectrum/utils": "3.0.0-nightly-e4497fdb6-250110",
+    "@react-stately/layout": "3.0.0-nightly-e4497fdb6-250110",
+    "@react-stately/utils": "3.0.0-nightly-e4497fdb6-250110",
+    "@react-stately/virtualizer": "3.0.0-nightly-e4497fdb6-250110",
+    "@react-types/color": "3.0.0-nightly-e4497fdb6-250110",
+    "@react-types/dialog": "3.0.0-nightly-e4497fdb6-250110",
+    "@react-types/grid": "3.0.0-nightly-e4497fdb6-250110",
+    "@react-types/provider": "3.0.0-nightly-e4497fdb6-250110",
+    "@react-types/shared": "3.0.0-nightly-e4497fdb6-250110",
+    "@react-types/table": "3.0.0-nightly-e4497fdb6-250110",
+    "@react-types/textfield": "3.0.0-nightly-e4497fdb6-250110",
     "csstype": "^3.0.2",
-    "react-aria": "3.0.0-nightly-e7053dd8f-250108",
-    "react-aria-components": "3.0.0-nightly-e7053dd8f-250108"
+    "react-aria": "3.0.0-nightly-e4497fdb6-250110",
+    "react-aria-components": "3.0.0-nightly-e4497fdb6-250110"
   },
   "peerDependencies": {
     "@testing-library/react": "^15.0.7",

package/src/Button.tsx

@@ -138,24 +138,6 @@ const button = style<ButtonRenderProps & ButtonStyleProps & {isStaticColor: bool
       isDisabled: 'GrayText'
     }
   },
-  backgroundImage: {
-    variant: {
-      premium: {
-        default: linearGradient('96deg', ['fuchsia-900', 0], ['indigo-900', 66], ['blue-900', 100]),
-        isHovered: linearGradient('96deg', ['fuchsia-1000', 0], ['indigo-1000', 66], ['blue-1000', 100]),
-        isPressed: linearGradient('96deg', ['fuchsia-1000', 0], ['indigo-1000', 66], ['blue-1000', 100]),
-        isFocusVisible: linearGradient('96deg', ['fuchsia-1000', 0], ['indigo-1000', 66], ['blue-1000', 100])
-      },
-      genai: {
-        default: linearGradient('96deg', ['red-900', 0], ['magenta-900', 33], ['indigo-900', 100]),
-        isHovered: linearGradient('96deg', ['red-1000', 0], ['magenta-1000', 33], ['indigo-1000', 100]),
-        isPressed: linearGradient('96deg', ['red-1000', 0], ['magenta-1000', 33], ['indigo-1000', 100]),
-        isFocusVisible: linearGradient('96deg', ['red-1000', 0], ['magenta-1000', 33], ['indigo-1000', 100])
-      }
-    },
-    isDisabled: 'none',
-    forcedColors: 'none'
-  },
   backgroundColor: {
     fillStyle: {
       fill: {
@@ -296,6 +278,42 @@ const button = style<ButtonRenderProps & ButtonStyleProps & {isStaticColor: bool
   disableTapHighlight: true
 }, getAllowedOverrides());
 
+// Put the gradient background on a separate element from the button to work around a Safari
+// bug where transitions of custom properties cause layout flickering if any properties use rems. 🤣
+// https://bugs.webkit.org/show_bug.cgi?id=285622
+const gradient = style({
+  position: 'absolute',
+  inset: 0,
+  zIndex: -1,
+  transition: 'default',
+  borderRadius: '[inherit]',
+  backgroundImage: {
+    variant: {
+      premium: {
+        default: linearGradient('to bottom right', ['fuchsia-900', 0], ['indigo-900', 66], ['blue-900', 100]),
+        isHovered: linearGradient('to bottom right', ['fuchsia-1000', 0], ['indigo-1000', 66], ['blue-1000', 100]),
+        isPressed: linearGradient('to bottom right', ['fuchsia-1000', 0], ['indigo-1000', 66], ['blue-1000', 100]),
+        isFocusVisible: linearGradient('to bottom right', ['fuchsia-1000', 0], ['indigo-1000', 66], ['blue-1000', 100])
+      },
+      genai: {
+        default: linearGradient('to bottom right', ['red-900', 0], ['magenta-900', 33], ['indigo-900', 100]),
+        isHovered: linearGradient('to bottom right', ['red-1000', 0], ['magenta-1000', 33], ['indigo-1000', 100]),
+        isPressed: linearGradient('to bottom right', ['red-1000', 0], ['magenta-1000', 33], ['indigo-1000', 100]),
+        isFocusVisible: linearGradient('to bottom right', ['red-1000', 0], ['magenta-1000', 33], ['indigo-1000', 100])
+      }
+    },
+    isDisabled: 'none',
+    forcedColors: 'none'
+  },
+  // Force gradient colors to remain static between light and dark theme.
+  colorScheme: {
+    variant: {
+      premium: 'light',
+      genai: 'light'
+    }
+  }
+});
+
 /**
  * Buttons allow users to perform an action.
  * They have multiple styles for various needs, and are ideal for calling attention to
@@ -350,65 +368,79 @@ export const Button = forwardRef(function Button(props: ButtonProps, ref: Focusa
         staticColor,
         isStaticColor: !!staticColor
       }, props.styles)}>
-      <Provider
-        values={[
-          [SkeletonContext, null],
-          [TextContext, {
-            styles: style({
-              paddingY: '--labelPadding',
-              order: 1,
-              opacity: {
-                default: 1,
-                isProgressVisible: 0
-              }
-            })({isProgressVisible}),
-            // @ts-ignore data-attributes allowed on all JSX elements, but adding to DOMProps has been problematic in the past
-            'data-rsp-slot': 'text'
-          }],
-          [IconContext, {
-            render: centerBaseline({slot: 'icon', styles: style({order: 0})}),
-            styles: style({
-              size: fontRelative(20),
-              marginStart: '--iconMargin',
-              flexShrink: 0,
-              opacity: {
-                default: 1,
-                isProgressVisible: 0
-              }
-            })({isProgressVisible})
-          }]
-        ]}>
-        {typeof props.children === 'string' ? <Text>{props.children}</Text> : props.children}
-        {isPending &&
-          <div
-            className={style({
-              position: 'absolute',
-              top: '[50%]',
-              left: '[50%]',
-              transform: 'translate(-50%, -50%)',
-              opacity: {
-                default: 0,
-                isProgressVisible: 1
-              }
-            })({isProgressVisible, isPending})}>
-            <ProgressCircle
-              isIndeterminate
-              aria-label={stringFormatter.format('button.pending')}
-              size="S"
-              staticColor={staticColor}
-              styles={style({
-                size: {
+      {(renderProps) => (<>
+        {variant === 'genai' || variant === 'premium' 
+          ? (
+            <span
+              className={gradient({
+                ...renderProps,
+                // Retain hover styles when an overlay is open.
+                isHovered: renderProps.isHovered || overlayTriggerState?.isOpen || false,
+                isDisabled: renderProps.isDisabled || isProgressVisible,
+                variant
+              })} />
+             )
+          : null}
+        <Provider
+          values={[
+            [SkeletonContext, null],
+            [TextContext, {
+              styles: style({
+                paddingY: '--labelPadding',
+                order: 1,
+                opacity: {
+                  default: 1,
+                  isProgressVisible: 0
+                }
+              })({isProgressVisible}),
+              // @ts-ignore data-attributes allowed on all JSX elements, but adding to DOMProps has been problematic in the past
+              'data-rsp-slot': 'text'
+            }],
+            [IconContext, {
+              render: centerBaseline({slot: 'icon', styles: style({order: 0})}),
+              styles: style({
+                size: fontRelative(20),
+                marginStart: '--iconMargin',
+                flexShrink: 0,
+                opacity: {
+                  default: 1,
+                  isProgressVisible: 0
+                }
+              })({isProgressVisible})
+            }]
+          ]}>
+          {typeof props.children === 'string' ? <Text>{props.children}</Text> : props.children}
+          {isPending &&
+            <div
+              className={style({
+                position: 'absolute',
+                top: '[50%]',
+                left: '[50%]',
+                transform: 'translate(-50%, -50%)',
+                opacity: {
+                  default: 0,
+                  isProgressVisible: 1
+                }
+              })({isProgressVisible, isPending})}>
+              <ProgressCircle
+                isIndeterminate
+                aria-label={stringFormatter.format('button.pending')}
+                size="S"
+                staticColor={staticColor}
+                styles={style({
                   size: {
-                    S: 14,
-                    M: 18,
-                    L: 20,
-                    XL: 24
+                    size: {
+                      S: 14,
+                      M: 18,
+                      L: 20,
+                      XL: 24
+                    }
                   }
-                }
-              })({size})} />
-          </div>
-        }
-      </Provider>
+                })({size})} />
+            </div>
+          }
+        </Provider>
+      </>)}
     </RACButton>
   );
 });

package/src/CloseButton.tsx

@@ -65,6 +65,10 @@ const styles = style({
       isStaticColor: {
         default: baseColor('transparent-overlay-800'),
         isDisabled: 'transparent-overlay-400'
+      },
+      forcedColors: {
+        default: 'ButtonText',
+        isDisabled: 'GrayText'
       }
     }
   },

package/src/ComboBox.tsx

@@ -379,11 +379,12 @@ export function ComboBoxItem(props: ComboBoxItemProps) {
 
 export interface ComboBoxSectionProps<T extends object> extends SectionProps<T> {}
 export function ComboBoxSection<T extends object>(props: ComboBoxSectionProps<T>) {
+  let {size} = useContext(InternalComboboxContext);
   return (
     <>
       <AriaListBoxSection
         {...props}
-        className={section}>
+        className={section({size})}>
         {props.children}
       </AriaListBoxSection>
       <Divider />

package/src/Menu.tsx

@@ -81,22 +81,26 @@ export interface MenuProps<T> extends Omit<AriaMenuProps<T>, 'children' | 'style
   /**
    * The contents of the collection.
    */
-  children?: ReactNode | ((item: T) => ReactNode)
+  children?: ReactNode | ((item: T) => ReactNode),
+  /** Hides the default link out icons on menu items that open links in a new tab. */
+  hideLinkOutIcon?: boolean
 }
 
 export const MenuContext = createContext<ContextValue<MenuProps<any>, DOMRefValue<HTMLDivElement>>>(null);
 
+const menuItemGrid = {
+  size: {
+    S: [edgeToText(24), 'auto', 'auto', 'minmax(0, 1fr)', 'auto', 'auto', 'auto', edgeToText(24)],
+    M: [edgeToText(32), 'auto', 'auto', 'minmax(0, 1fr)', 'auto', 'auto', 'auto', edgeToText(32)],
+    L: [edgeToText(40), 'auto', 'auto', 'minmax(0, 1fr)', 'auto', 'auto', 'auto', edgeToText(40)],
+    XL: [edgeToText(48), 'auto', 'auto', 'minmax(0, 1fr)', 'auto', 'auto', 'auto', edgeToText(48)]
+  }
+} as const;
+
 export let menu = style({
   outlineStyle: 'none',
   display: 'grid',
-  gridTemplateColumns: {
-    size: {
-      S: [edgeToText(24), 'auto', 'auto', 'minmax(0, 1fr)', 'auto', 'auto', 'auto', edgeToText(24)],
-      M: [edgeToText(32), 'auto', 'auto', 'minmax(0, 1fr)', 'auto', 'auto', 'auto', edgeToText(32)],
-      L: [edgeToText(40), 'auto', 'auto', 'minmax(0, 1fr)', 'auto', 'auto', 'auto', edgeToText(40)],
-      XL: [edgeToText(48), 'auto', 'auto', 'minmax(0, 1fr)', 'auto', 'auto', 'auto', edgeToText(48)]
-    }
-  },
+  gridTemplateColumns: menuItemGrid,
   boxSizing: 'border-box',
   maxHeight: '[inherit]',
   overflow: {
@@ -121,7 +125,7 @@ export let section = style({
     '. checkmark icon label       value keyboard descriptor .',
     '. .         .    description .     .        .          .'
   ],
-  gridTemplateColumns: 'subgrid'
+  gridTemplateColumns: menuItemGrid
 });
 
 export let sectionHeader = style<{size?: 'S' | 'M' | 'L' | 'XL'}>({
@@ -310,7 +314,12 @@ let descriptor = style({
   }
 });
 
-let InternalMenuContext = createContext<{size: 'S' | 'M' | 'L' | 'XL', isSubmenu: boolean}>({size: 'M', isSubmenu: false});
+let InternalMenuContext = createContext<{size: 'S' | 'M' | 'L' | 'XL', isSubmenu: boolean, hideLinkOutIcon: boolean}>({
+  size: 'M',
+  isSubmenu: false,
+  hideLinkOutIcon: false
+});
+
 let InternalMenuTriggerContext = createContext<Omit<MenuTriggerProps, 'children'> | null>(null);
 
 /**
@@ -324,7 +333,8 @@ export const Menu = /*#__PURE__*/ (forwardRef as forwardRefType)(function Menu<T
     size = ctxSize,
     UNSAFE_style,
     UNSAFE_className,
-    styles
+    styles,
+    hideLinkOutIcon = false
   } = props;
   let ctx = useContext(InternalMenuTriggerContext);
   let {align = 'start', direction = 'bottom', shouldFlip} = ctx ?? {};
@@ -349,7 +359,7 @@ export const Menu = /*#__PURE__*/ (forwardRef as forwardRefType)(function Menu<T
   }
 
   let content = (
-    <InternalMenuContext.Provider value={{size, isSubmenu: true}}>
+    <InternalMenuContext.Provider value={{size, isSubmenu: true, hideLinkOutIcon}}>
       <Provider
         values={[
           [HeaderContext, {styles: sectionHeader({size})}],
@@ -417,11 +427,12 @@ export function Divider(props: SeparatorProps) {
 export interface MenuSectionProps<T extends object> extends AriaMenuSectionProps<T> {}
 export function MenuSection<T extends object>(props: MenuSectionProps<T>) {
   // remember, context doesn't work if it's around Section nor inside
+  let {size} = useContext(InternalMenuContext);
   return (
     <>
       <AriaMenuSection
         {...props}
-        className={section}>
+        className={section({size})}>
         {props.children}
       </AriaMenuSection>
       <Divider />
@@ -454,7 +465,7 @@ export function MenuItem(props: MenuItemProps) {
   let ref = useRef(null);
   let isLink = props.href != null;
   let isLinkOut = isLink && props.target === '_blank';
-  let {size} = useContext(InternalMenuContext);
+  let {size, hideLinkOutIcon} = useContext(InternalMenuContext);
   let textValue = props.textValue || (typeof props.children === 'string' ? props.children : undefined);
   let {direction} = useLocale();
   return (
@@ -494,13 +505,25 @@ export function MenuItem(props: MenuItemProps) {
                 </div>
               )}
               {typeof children === 'string' ? <Text slot="label">{children}</Text> : children}
-              {isLinkOut && <LinkOutIcon size={linkIconSize[size]} className={descriptor} />}
+              {isLinkOut && !hideLinkOutIcon && (
+                <div slot="descriptor" className={descriptor}>
+                  <LinkOutIcon
+                    size={linkIconSize[size]}
+                    className={style({
+                      scaleX: {
+                        direction: {
+                          rtl: -1
+                        }
+                      }
+                    })({direction})} />
+                </div>
+              )}
               {renderProps.hasSubmenu && (
                 <div slot="descriptor" className={descriptor}>
                   <ChevronRightIcon
                     size={size}
                     className={style({
-                      scale: {
+                      scaleX: {
                         direction: {
                           rtl: -1
                         }

package/src/Picker.tsx

@@ -464,11 +464,12 @@ function DefaultProvider({context, value, children}: {context: React.Context<any
 
 export interface PickerSectionProps<T extends object> extends SectionProps<T> {}
 export function PickerSection<T extends object>(props: PickerSectionProps<T>) {
+  let {size} = useContext(InternalPickerContext);
   return (
     <>
       <AriaListBoxSection
         {...props}
-        className={section}>
+        className={section({size})}>
         {props.children}
       </AriaListBoxSection>
       <Divider />

package/style/dist/spectrum-theme.cjs

@@ -492,7 +492,24 @@ function $7dddb03c6ef7d79c$export$9b476054b78b89cd(a, b, percent) {
     return `[color-mix(in srgb, ${$7dddb03c6ef7d79c$var$parseColor(a)}, ${$7dddb03c6ef7d79c$var$parseColor(b)} ${percent}%)]`;
 }
 function $7dddb03c6ef7d79c$export$46def8197cf4dd4c(angle, ...tokens) {
-    return `linear-gradient(${angle}, ${tokens.map(([color, stop])=>`${$7dddb03c6ef7d79c$var$parseColor(color)} ${stop}%`)})`;
+    // Generate @property rules for each gradient stop color. This allows the gradient to be animated.
+    let propertyDefinitions = [];
+    for(let i = 0; i < tokens.length; i++)propertyDefinitions.push(`@property --g${i} {
+  syntax: '<color>';
+  initial-value: #0000;
+  inherits: false;
+}`);
+    if (this && typeof this.addAsset === 'function') this.addAsset({
+        type: 'css',
+        content: propertyDefinitions.join('\n\n')
+    });
+    return [
+        {
+            type: 'linear-gradient',
+            angle: angle,
+            stops: tokens
+        }
+    ];
 }
 function $7dddb03c6ef7d79c$var$generateSpacing(px) {
     let res = {};
@@ -671,8 +688,10 @@ let $7dddb03c6ef7d79c$var$gridTrackSize = (value)=>{
     return value in $7dddb03c6ef7d79c$var$baseSpacing ? $7dddb03c6ef7d79c$var$baseSpacing[value] : value;
 };
 const $7dddb03c6ef7d79c$var$transitionProperty = {
-    default: 'color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, translate, scale, rotate, filter, backdrop-filter',
-    colors: 'color, background-color, border-color, text-decoration-color, fill, stroke',
+    // var(--gp) is generated by the backgroundImage property when setting a gradient.
+    // It includes a list of all of the custom properties used for each color stop.
+    default: 'color, background-color, var(--gp), border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, translate, scale, rotate, filter, backdrop-filter',
+    colors: 'color, background-color, var(--gp), border-color, text-decoration-color, fill, stroke',
     opacity: 'opacity',
     shadow: 'box-shadow',
     transform: 'transform, translate, scale, rotate',
@@ -1147,7 +1166,14 @@ const $7dddb03c6ef7d79c$export$1d567c320f4763bc = (0, $b3643cb9d2948e30$exports.
         rotate: (0, $b3643cb9d2948e30$exports.createArbitraryProperty)((value, property)=>({
                 [property]: typeof value === 'number' ? `${value}deg` : value
             })),
-        scale: (0, $b3643cb9d2948e30$exports.createArbitraryProperty)(),
+        scaleX: (0, $b3643cb9d2948e30$exports.createArbitraryProperty)((value)=>({
+                '--scaleX': value,
+                scale: 'var(--scaleX, 1) var(--scaleY, 1)'
+            })),
+        scaleY: (0, $b3643cb9d2948e30$exports.createArbitraryProperty)((value)=>({
+                '--scaleY': value,
+                scale: 'var(--scaleX, 1) var(--scaleY, 1)'
+            })),
         transform: (0, $b3643cb9d2948e30$exports.createArbitraryProperty)(),
         position: [
             'absolute',
@@ -1336,7 +1362,26 @@ const $7dddb03c6ef7d79c$export$1d567c320f4763bc = (0, $b3643cb9d2948e30$exports.
             'dark',
             'light dark'
         ],
-        backgroundImage: (0, $b3643cb9d2948e30$exports.createArbitraryProperty)(),
+        backgroundImage: (0, $b3643cb9d2948e30$exports.createArbitraryProperty)((value, property)=>{
+            if (typeof value === 'string') return {
+                [property]: value
+            };
+            else if (Array.isArray(value) && value[0]?.type === 'linear-gradient') {
+                let values = {
+                    [property]: `linear-gradient(${value[0].angle}, ${value[0].stops.map(([, stop], i)=>`var(--g${i}) ${stop}%`)})`
+                };
+                // Create a CSS var for each color stop so the gradient can be transitioned.
+                // These are registered via @property in the `linearGradient` macro.
+                let properties = [];
+                value[0].stops.forEach(([color], i)=>{
+                    properties.push(`--g${i}`);
+                    values[`--g${i}`] = $7dddb03c6ef7d79c$var$parseColor(color);
+                });
+                // This is used by transition-property so we automatically transition all of the color stops.
+                values['--gp'] = properties.join(', ');
+                return values;
+            } else throw new Error('Unexpected backgroundImage value: ' + JSON.stringify(value));
+        }),
         // TODO: do we need separate x and y properties?
         backgroundPosition: [
             'bottom',
@@ -1908,6 +1953,10 @@ const $7dddb03c6ef7d79c$export$1d567c320f4763bc = (0, $b3643cb9d2948e30$exports.
             'translateX',
             'translateY'
         ],
+        scale: [
+            'scaleX',
+            'scaleY'
+        ],
         inset: [
             'top',
             'bottom',