@react-spectrum/s2 3.0.0-nightly-835f0aa1b-250107 → 3.0.0-nightly-d87cc4422-250109

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-spectrum/s2",
-  "version": "3.0.0-nightly-835f0aa1b-250107",
+  "version": "3.0.0-nightly-d87cc4422-250109",
   "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-835f0aa1b-250107",
-    "@react-aria/i18n": "3.0.0-nightly-835f0aa1b-250107",
-    "@react-aria/interactions": "3.0.0-nightly-835f0aa1b-250107",
-    "@react-aria/live-announcer": "3.0.0-nightly-835f0aa1b-250107",
-    "@react-aria/utils": "3.0.0-nightly-835f0aa1b-250107",
-    "@react-spectrum/utils": "3.0.0-nightly-835f0aa1b-250107",
-    "@react-stately/layout": "3.0.0-nightly-835f0aa1b-250107",
-    "@react-stately/utils": "3.0.0-nightly-835f0aa1b-250107",
-    "@react-stately/virtualizer": "3.0.0-nightly-835f0aa1b-250107",
-    "@react-types/color": "3.0.0-nightly-835f0aa1b-250107",
-    "@react-types/dialog": "3.0.0-nightly-835f0aa1b-250107",
-    "@react-types/grid": "3.0.0-nightly-835f0aa1b-250107",
-    "@react-types/provider": "3.0.0-nightly-835f0aa1b-250107",
-    "@react-types/shared": "3.0.0-nightly-835f0aa1b-250107",
-    "@react-types/table": "3.0.0-nightly-835f0aa1b-250107",
-    "@react-types/textfield": "3.0.0-nightly-835f0aa1b-250107",
+    "@react-aria/collections": "3.0.0-nightly-d87cc4422-250109",
+    "@react-aria/i18n": "3.0.0-nightly-d87cc4422-250109",
+    "@react-aria/interactions": "3.0.0-nightly-d87cc4422-250109",
+    "@react-aria/live-announcer": "3.0.0-nightly-d87cc4422-250109",
+    "@react-aria/utils": "3.0.0-nightly-d87cc4422-250109",
+    "@react-spectrum/utils": "3.0.0-nightly-d87cc4422-250109",
+    "@react-stately/layout": "3.0.0-nightly-d87cc4422-250109",
+    "@react-stately/utils": "3.0.0-nightly-d87cc4422-250109",
+    "@react-stately/virtualizer": "3.0.0-nightly-d87cc4422-250109",
+    "@react-types/color": "3.0.0-nightly-d87cc4422-250109",
+    "@react-types/dialog": "3.0.0-nightly-d87cc4422-250109",
+    "@react-types/grid": "3.0.0-nightly-d87cc4422-250109",
+    "@react-types/provider": "3.0.0-nightly-d87cc4422-250109",
+    "@react-types/shared": "3.0.0-nightly-d87cc4422-250109",
+    "@react-types/table": "3.0.0-nightly-d87cc4422-250109",
+    "@react-types/textfield": "3.0.0-nightly-d87cc4422-250109",
     "csstype": "^3.0.2",
-    "react-aria": "3.0.0-nightly-835f0aa1b-250107",
-    "react-aria-components": "3.0.0-nightly-835f0aa1b-250107"
+    "react-aria": "3.0.0-nightly-d87cc4422-250109",
+    "react-aria-components": "3.0.0-nightly-d87cc4422-250109"
   },
   "peerDependencies": {
     "@testing-library/react": "^15.0.7",

package/src/Button.tsx

@@ -154,7 +154,6 @@ const button = style<ButtonRenderProps & ButtonStyleProps & {isStaticColor: bool
       }
     },
     isDisabled: 'none',
-    isPending: 'none',
     forcedColors: 'none'
   },
   backgroundColor: {
@@ -179,7 +178,13 @@ const button = style<ButtonRenderProps & ButtonStyleProps & {isStaticColor: bool
         isHovered: 'gray-100',
         isPressed: 'gray-100',
         isFocusVisible: 'gray-100',
-        isDisabled: 'transparent'
+        isDisabled: {
+          default: 'transparent',
+          variant: {
+            premium: 'gray-100',
+            genai: 'gray-100'
+          }
+        }
       }
     },
     isStaticColor: {
@@ -188,21 +193,27 @@ const button = style<ButtonRenderProps & ButtonStyleProps & {isStaticColor: bool
           variant: {
             primary: baseColor('transparent-overlay-800'),
             secondary: baseColor('transparent-overlay-100'),
-            premium: 'gray-800',
-            genai: 'gray-800'
+            premium: 'transparent-overlay-100',
+            genai: 'transparent-overlay-100'
           },
           isDisabled: 'transparent-overlay-100'
         },
         outline: {
           variant: {
-            premium: 'gray-800',
-            genai: 'gray-800'
+            premium: 'transparent-overlay-100',
+            genai: 'transparent-overlay-100'
           },
           default: 'transparent',
           isHovered: 'transparent-overlay-100',
           isPressed: 'transparent-overlay-100',
           isFocusVisible: 'transparent-overlay-100',
-          isDisabled: 'transparent'
+          isDisabled: {
+            default: 'transparent',
+            variant: {
+              premium: 'transparent-overlay-100',
+              genai: 'transparent-overlay-100'
+            }
+          }
         }
       }
     },

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

@@ -1147,7 +1147,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',
@@ -1908,6 +1915,10 @@ const $7dddb03c6ef7d79c$export$1d567c320f4763bc = (0, $b3643cb9d2948e30$exports.
             'translateX',
             'translateY'
         ],
+        scale: [
+            'scaleX',
+            'scaleY'
+        ],
         inset: [
             'top',
             'bottom',