@react-spectrum/s2 0.11.1 → 0.12.0

package/icons/Icon.css

@@ -1,37 +1,37 @@
 @layer _.a {
-  .Zm11 {
+  .Zm12 {
     width: calc(1.25rem * var(--s2-scale));
   }
 
-  .Fn11 {
+  .Fn12 {
     height: calc(1.25rem * var(--s2-scale));
   }
 
-  .ZF11 {
+  .ZF12 {
     width: calc(3rem * var(--s2-scale));
   }
 
-  .ZH11 {
+  .ZH12 {
     width: calc(6rem * var(--s2-scale));
   }
 
-  .Zq11 {
+  .Zq12 {
     width: calc(10rem * var(--s2-scale));
   }
 
-  .Fz11 {
+  .Fz12 {
     height: calc(3rem * var(--s2-scale));
   }
 
-  .FB11 {
+  .FB12 {
     height: calc(6rem * var(--s2-scale));
   }
 
-  .Fr11 {
+  .Fr12 {
     height: calc(10rem * var(--s2-scale));
   }
 
-  ._va11 {
+  ._va12 {
     flex-shrink: 0;
   }
 }

package/icons/Icon.mjs

@@ -62,9 +62,9 @@ const $ac8c32e6775ddd1f$var$iconStyles = function anonymous(props, overrides) {
         if (p[1] === "F") height = true;
         rules += p[0];
     }
-    if (!width) rules += ' Zm11';
-    if (!height) rules += ' Fn11';
-    rules += ' _va11';
+    if (!width) rules += ' Zm12';
+    if (!height) rules += ' Fn12';
+    rules += ' _va12';
     return rules;
 };
 function $ac8c32e6775ddd1f$export$274edc73af1ae9c8(Component, context = $ac8c32e6775ddd1f$export$a49f528ae1a4d0ed) {
@@ -105,20 +105,20 @@ const $ac8c32e6775ddd1f$var$illustrationStyles = function anonymous(props, overr
         rules += p[0];
     }
     if (props.size === "L") {
-        if (!width) rules += ' Zq11';
+        if (!width) rules += ' Zq12';
     } else if (props.size === "M") {
-        if (!width) rules += ' ZH11';
+        if (!width) rules += ' ZH12';
     } else if (props.size === "S") {
-        if (!width) rules += ' ZF11';
+        if (!width) rules += ' ZF12';
     }
     if (props.size === "L") {
-        if (!height) rules += ' Fr11';
+        if (!height) rules += ' Fr12';
     } else if (props.size === "M") {
-        if (!height) rules += ' FB11';
+        if (!height) rules += ' FB12';
     } else if (props.size === "S") {
-        if (!height) rules += ' Fz11';
+        if (!height) rules += ' Fz12';
     }
-    rules += ' _va11';
+    rules += ' _va12';
     return rules;
 };
 function $ac8c32e6775ddd1f$export$4d00e7be716a0093(Component) {

package/icons/Skeleton.cjs

@@ -96,7 +96,7 @@ function $5eb75e0c130e0669$export$cb6ddd830302c2a8({ children: children }) {
         // @ts-ignore - compatibility with React < 19
         inert: (0, $lzdFu$reactariautils.inertValue)(true),
         ref: $5eb75e0c130e0669$export$6b288fe07640c94c(true),
-        className: $5eb75e0c130e0669$export$d2353276f167b21f + " pw11 _ma11 oa11 na11 ka11 ja11",
+        className: $5eb75e0c130e0669$export$d2353276f167b21f + " pw12 _ma12 oa12 na12 ka12 ja12",
         children: children
     });
 }
@@ -117,7 +117,7 @@ function $5eb75e0c130e0669$export$6069cbe61f690103({ children: children }) {
 }
 function $5eb75e0c130e0669$export$4b7803c08fe9a32b(styles) {
     let isSkeleton = (0, $lzdFu$react.useContext)($5eb75e0c130e0669$export$74e166679b1f49ee);
-    if (isSkeleton) return (0, $308b180f49d82d28$exports.mergeStyles)(" oa11 na11 ka11 ja11", styles);
+    if (isSkeleton) return (0, $308b180f49d82d28$exports.mergeStyles)(" oa12 na12 ka12 ja12", styles);
     return styles || '';
 }
 

package/icons/Skeleton.css

@@ -12,28 +12,28 @@
 }
 
 @layer _.a {
-  .pw11 {
+  .pw12 {
     color: #0000;
   }
 
-  ._ma11 {
+  ._ma12 {
     -webkit-box-decoration-break: clone;
     box-decoration-break: clone;
   }
 
-  .oa11 {
+  .oa12 {
     border-start-start-radius: .25rem;
   }
 
-  .na11 {
+  .na12 {
     border-start-end-radius: .25rem;
   }
 
-  .ka11 {
+  .ka12 {
     border-end-start-radius: .25rem;
   }
 
-  .ja11 {
+  .ja12 {
     border-end-end-radius: .25rem;
   }
 }

package/icons/Skeleton.mjs

@@ -83,7 +83,7 @@ function $5ad421ec19460c48$export$cb6ddd830302c2a8({ children: children }) {
         // @ts-ignore - compatibility with React < 19
         inert: (0, $cHM3s$inertValue)(true),
         ref: $5ad421ec19460c48$export$6b288fe07640c94c(true),
-        className: $5ad421ec19460c48$export$d2353276f167b21f + " pw11 _ma11 oa11 na11 ka11 ja11",
+        className: $5ad421ec19460c48$export$d2353276f167b21f + " pw12 _ma12 oa12 na12 ka12 ja12",
         children: children
     });
 }
@@ -104,7 +104,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)(" oa11 na11 ka11 ja11", styles);
+    if (isSkeleton) return (0, $feb886035e0d4633$export$e618dc39ac9ad607)(" oa12 na12 ka12 ja12", styles);
     return styles || '';
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-spectrum/s2",
-  "version": "0.11.1",
+  "version": "0.12.0",
   "description": "Spectrum 2 UI components in React",
   "license": "Apache-2.0",
   "repository": {
@@ -77,28 +77,28 @@
     "src"
   ],
   "dependencies": {
-    "@internationalized/date": "^3.9.0",
+    "@internationalized/date": "^3.10.0",
     "@internationalized/number": "^3.6.5",
-    "@react-aria/calendar": "^3.9.1",
-    "@react-aria/collections": "3.0.0-rc.6",
-    "@react-aria/focus": "^3.21.1",
-    "@react-aria/i18n": "^3.12.12",
-    "@react-aria/interactions": "^3.25.5",
+    "@react-aria/calendar": "^3.9.2",
+    "@react-aria/collections": "^3.0.0",
+    "@react-aria/focus": "^3.21.2",
+    "@react-aria/i18n": "^3.12.13",
+    "@react-aria/interactions": "^3.25.6",
     "@react-aria/live-announcer": "^3.4.4",
-    "@react-aria/utils": "^3.30.1",
-    "@react-spectrum/utils": "^3.12.8",
-    "@react-stately/layout": "^4.5.0",
+    "@react-aria/utils": "^3.31.0",
+    "@react-spectrum/utils": "^3.12.9",
+    "@react-stately/layout": "^4.5.1",
     "@react-stately/utils": "^3.10.8",
-    "@react-types/dialog": "^3.5.21",
-    "@react-types/grid": "^3.3.5",
-    "@react-types/provider": "^3.8.12",
-    "@react-types/shared": "^3.32.0",
-    "@react-types/table": "^3.13.3",
-    "@react-types/textfield": "^3.12.5",
+    "@react-types/dialog": "^3.5.22",
+    "@react-types/grid": "^3.3.6",
+    "@react-types/provider": "^3.8.13",
+    "@react-types/shared": "^3.32.1",
+    "@react-types/table": "^3.13.4",
+    "@react-types/textfield": "^3.12.6",
     "csstype": "^3.0.2",
-    "react-aria": "^3.43.1",
-    "react-aria-components": "^1.12.1",
-    "react-stately": "^3.41.0"
+    "react-aria": "^3.44.0",
+    "react-aria-components": "^1.13.0",
+    "react-stately": "^3.42.0"
   },
   "peerDependencies": {
     "react": "^18.0.0 || ^19.0.0-rc.1",
@@ -107,5 +107,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "ed4815e15c9d1659208fa687e8c3a094879854bb"
+  "gitHead": "0bda51183baa23306342af32a82012ea0fe0f2dc"
 }

package/page.css

@@ -1,4 +1,4 @@
-html {
+:where(:root, :host) {
   --lightningcss-light: initial;
   --lightningcss-dark: ;
   color-scheme: light dark;
@@ -9,36 +9,36 @@ html {
 }
 
 @media (prefers-color-scheme: dark) {
-  html {
+  :where(:root, :host) {
     --lightningcss-light: ;
     --lightningcss-dark: initial;
   }
 }
 
 @media not ((hover: hover) and (pointer: fine)) {
-  html {
+  :where(:root, :host) {
     --s2-scale: 1.25;
     --s2-font-size-base: 17;
   }
 }
 
-html[data-color-scheme="light"] {
+:where(:root, :host)[data-color-scheme="light"] {
   --lightningcss-light: initial;
   --lightningcss-dark: ;
   color-scheme: light;
 }
 
-html[data-color-scheme="dark"] {
+:where(:root, :host)[data-color-scheme="dark"] {
   --lightningcss-light: ;
   --lightningcss-dark: initial;
   color-scheme: dark;
 }
 
-html[data-background="layer-1"] {
+:where(:root, :host)[data-background="layer-1"] {
   --s2-container-bg: var(--lightningcss-light, #f8f8f8) var(--lightningcss-dark, #1b1b1b);
 }
 
-html[data-background="layer-2"] {
+:where(:root, :host)[data-background="layer-2"] {
   --s2-container-bg: var(--lightningcss-light, #fff) var(--lightningcss-dark, #222);
 }
 /*# sourceMappingURL=page.css.map */

package/src/ActionBar.tsx

@@ -19,7 +19,7 @@ import {DOMRef, DOMRefValue, Key} from '@react-types/shared';
 import {FocusScope, useKeyboard} from 'react-aria';
 // @ts-ignore
 import intlMessages from '../intl/*.json';
-import {style} from '../style' with {type: 'macro'};
+import {lightDark, style} from '../style' with {type: 'macro'};
 import {useControlledState} from '@react-stately/utils';
 import {useDOMRef} from '@react-spectrum/utils';
 import {useEnterAnimation, useExitAnimation, useObjectRef, useResizeObserver} from '@react-aria/utils';
@@ -40,9 +40,8 @@ const actionBarStyles = style({
   boxSizing: 'border-box',
   outlineStyle: 'solid',
   outlineWidth: 1,
-  outlineOffset: -1,
   outlineColor: {
-    default: 'gray-200',
+    default: lightDark('transparent-white-25', 'gray-200'),
     isEmphasized: 'transparent',
     forcedColors: 'ButtonBorder'
   },
@@ -90,6 +89,9 @@ export interface ActionBarProps extends SlotProps {
 
 export const ActionBarContext = createContext<ContextValue<Partial<ActionBarProps>, DOMRefValue<HTMLDivElement>>>(null);
 
+/**
+ * Action bars are used for single and bulk selection patterns when a user needs to perform actions on one or more items at the same time.
+ */
 export const ActionBar = forwardRef(function ActionBar(props: ActionBarProps, ref: DOMRef<HTMLDivElement>) {
   [props, ref] = useSpectrumContextProps(props, ref, ActionBarContext);
   let domRef = useDOMRef(ref);

package/src/ActionButton.tsx

@@ -19,12 +19,18 @@ import {control, getAllowedOverrides, staticColor, StyleProps} from './style-uti
 import {createContext, forwardRef, ReactNode, useContext} from 'react';
 import {FocusableRef, FocusableRefValue, GlobalDOMAttributes} from '@react-types/shared';
 import {IconContext} from './Icon';
+import {ImageContext} from './Image';
+// @ts-ignore
+import intlMessages from '../intl/*.json';
 import {NotificationBadgeContext} from './NotificationBadge';
 import {pressScale} from './pressScale';
+import {ProgressCircle} from './ProgressCircle';
 import {SkeletonContext} from './Skeleton';
 import {Text, TextContext} from './Content';
 import {useFocusableRef} from '@react-spectrum/utils';
 import {useFormProps} from './Form';
+import {useLocalizedStringFormatter} from '@react-aria/i18n';
+import {usePendingState} from './Button';
 import {useSpectrumContextProps} from './useSpectrumContextProps';
 
 export interface ActionButtonStyleProps {
@@ -53,7 +59,7 @@ interface ActionGroupItemStyleProps {
   isJustified?: boolean
 }
 
-export interface ActionButtonProps extends Omit<ButtonProps, 'className' | 'style' | 'children' | 'onHover' | 'onHoverStart' | 'onHoverEnd' | 'onHoverChange' | 'isPending' | 'onClick' | keyof GlobalDOMAttributes>, StyleProps, ActionButtonStyleProps {
+export interface ActionButtonProps extends Omit<ButtonProps, 'className' | 'style' | 'children' | 'onHover' | 'onHoverStart' | 'onHoverEnd' | 'onHoverChange' | 'onClick' | keyof GlobalDOMAttributes>, StyleProps, ActionButtonStyleProps {
   /** The content to display in the ActionButton. */
   children: ReactNode
 }
@@ -67,6 +73,7 @@ export const btnStyles = style<ButtonRenderProps & ActionButtonStyleProps & Togg
   ...focusRing(),
   ...staticColor(),
   ...controlStyle,
+  position: 'relative',
   justifyContent: 'center',
   flexShrink: {
     default: 1,
@@ -231,6 +238,15 @@ export const btnStyles = style<ButtonRenderProps & ActionButtonStyleProps & Togg
   paddingX: {
     default: controlStyle.paddingX,
     [avatarOnly]: 0
+  },
+  // `control` sets this, but we need to override it for avatar only buttons.
+  '--iconMargin': {
+    type: 'marginStart',
+    value: {
+      default: fontRelative(-2),
+      [iconOnly]: 0,
+      [avatarOnly]: 0
+    }
   }
 }, getAllowedOverrides());
 
@@ -252,6 +268,8 @@ export const ActionButtonContext = createContext<ContextValue<Partial<ActionButt
 export const ActionButton = forwardRef(function ActionButton(props: ActionButtonProps, ref: FocusableRef<HTMLButtonElement>) {
   [props, ref] = useSpectrumContextProps(props, ref, ActionButtonContext);
   props = useFormProps(props as any);
+  let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/s2');
+  let {isPending = false} = props;
   let domRef = useFocusableRef(ref);
   let overlayTriggerState = useContext(OverlayTriggerStateContext);
   let ctx = useSlottedContext(ActionButtonGroupContext);
@@ -262,21 +280,21 @@ export const ActionButton = forwardRef(function ActionButton(props: ActionButton
     orientation = 'horizontal',
     staticColor = props.staticColor,
     isQuiet = props.isQuiet,
-    size = props.size || 'M',
-    isDisabled = props.isDisabled
+    size = props.size || 'M'
   } = ctx || {};
 
+  let {isProgressVisible} = usePendingState(isPending);
 
   return (
     <RACButton
       {...props}
-      isDisabled={isDisabled}
       ref={domRef}
       style={pressScale(domRef, props.UNSAFE_style)}
       className={renderProps => (props.UNSAFE_className || '') + btnStyles({
         ...renderProps,
         // Retain hover styles when an overlay is open.
         isHovered: renderProps.isHovered || overlayTriggerState?.isOpen || false,
+        isDisabled: renderProps.isDisabled || isProgressVisible,
         staticColor,
         isStaticColor: !!staticColor,
         size,
@@ -286,34 +304,96 @@ export const ActionButton = forwardRef(function ActionButton(props: ActionButton
         orientation,
         isInGroup
       }, props.styles)}>
-      <Provider
-        values={[
-          [SkeletonContext, null],
-          [TextContext, {styles: style({order: 1, truncate: true})}],
-          [IconContext, {
-            render: centerBaseline({slot: 'icon', styles: style({order: 0})}),
-            styles: style({size: fontRelative(20), marginStart: '--iconMargin', flexShrink: 0})
-          }],
-          [AvatarContext, {
-            size: avatarSize[size],
-            styles: style({
-              marginStart: {
-                default: '--iconMargin',
-                ':last-child': 0
-              },
-              flexShrink: 0,
-              order: 0
-            })
-          }],
-          [NotificationBadgeContext, {
-            staticColor: staticColor,
-            size: props.size === 'XS' ? undefined : props.size,
-            isDisabled: props.isDisabled,
-            styles: style({position: 'absolute', top: '--badgeTop', insetStart: '--badgePosition', marginTop: 'calc((self(height) * -1)/2)', marginStart: 'calc((self(height) * -1)/2)'})
-          }]
-        ]}>
-        {typeof props.children === 'string' ? <Text>{props.children}</Text> : props.children}
-      </Provider>
+      {({isDisabled}) => (
+        <>
+          <Provider
+            values={[
+              [SkeletonContext, null],
+              [TextContext, {styles:
+                style({
+                  order: 1,
+                  truncate: true,
+                  visibility: {
+                    isProgressVisible: 'hidden'
+                  }
+                })({isProgressVisible})
+              }],
+              [IconContext, {
+                render: centerBaseline({slot: 'icon', styles: style({order: 0})}),
+                styles: style({
+                  size: fontRelative(20),
+                  marginStart: '--iconMargin',
+                  flexShrink: 0,
+                  visibility: {
+                    isProgressVisible: 'hidden'
+                  }
+                })({isProgressVisible})
+              }],
+              [AvatarContext, {
+                size: avatarSize[size],
+                styles: style({
+                  marginStart: '--iconMargin',
+                  flexShrink: 0,
+                  order: 0
+                })
+              }],
+              [ImageContext, {
+                styles: style({
+                  visibility: {
+                    isProgressVisible: 'hidden'
+                  }
+                })({isProgressVisible})
+              }],
+              [NotificationBadgeContext, {
+                staticColor: staticColor,
+                size: props.size === 'XS' ? undefined : props.size,
+                isDisabled: isDisabled,
+                styles: style({
+                  position: 'absolute',
+                  top: '--badgeTop',
+                  insetStart: '--badgePosition',
+                  marginTop: 'calc((self(height) * -1)/2)',
+                  marginStart: 'calc((self(height) * -1)/2)',
+                  visibility: {
+                    isProgressVisible: 'hidden'
+                  }
+                })({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%)',
+                  visibility: {
+                    default: 'hidden',
+                    isProgressVisible: 'visible'
+                  }
+                })({isProgressVisible, isPending})}>
+                <ProgressCircle
+                  isIndeterminate
+                  aria-label={stringFormatter.format('button.pending')}
+                  size="S"
+                  staticColor={staticColor}
+                  styles={style({
+                    size: {
+                      size: {
+                        XS: 12,
+                        S: 14,
+                        M: 18,
+                        L: 20,
+                        XL: 24
+                      }
+                    }
+                  })({size})} />
+              </div>
+              }
+          </Provider>
+        </>
+      )}
     </RACButton>
   );
 });

package/src/Avatar.tsx

@@ -10,6 +10,7 @@
  * governing permissions and limitations under the License.
  */
 
+import {centerBaselineBefore} from './CenterBaseline';
 import {ContextValue, SlotProps} from 'react-aria-components';
 import {createContext, forwardRef} from 'react';
 import {DOMProps, DOMRef, DOMRefValue} from '@react-types/shared';
@@ -37,6 +38,8 @@ export interface AvatarProps extends UnsafeStyles, DOMProps, SlotProps {
 }
 
 const imageStyles = style({
+  display: 'flex',
+  alignItems: 'center',
   borderRadius: 'full',
   size: 20,
   flexShrink: 0,
@@ -86,7 +89,7 @@ export const Avatar = forwardRef(function Avatar(props: AvatarProps, ref: DOMRef
         width: remSize,
         height: remSize
       }}
-      UNSAFE_className={UNSAFE_className}
+      UNSAFE_className={UNSAFE_className + ' ' +  centerBaselineBefore}
       styles={imageStyles({isOverBackground, isLarge}, props.styles)}
       src={src} />
   );

package/src/Button.tsx

@@ -292,6 +292,24 @@ const gradient = style({
   }
 });
 
+export function usePendingState(isPending: boolean) {
+  let [isProgressVisible, setIsProgressVisible] = useState(false);
+  useEffect(() => {
+    let timeout: ReturnType<typeof setTimeout>;
+    if (isPending) {
+      timeout = setTimeout(() => {
+        setIsProgressVisible(true);
+      }, 1000);
+    } else {
+      setIsProgressVisible(false);
+    }
+    return () => {
+      clearTimeout(timeout);
+    };
+  }, [isPending]);
+  return {isProgressVisible};
+}
+
 /**
  * Buttons allow users to perform an action.
  * They have multiple styles for various needs, and are ideal for calling attention to
@@ -302,7 +320,7 @@ export const Button = forwardRef(function Button(props: ButtonProps, ref: Focusa
   props = useFormProps(props);
   let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/s2');
   let {
-    isPending,
+    isPending = false,
     variant = 'primary',
     fillStyle = 'fill',
     size = 'M',
@@ -311,24 +329,7 @@ export const Button = forwardRef(function Button(props: ButtonProps, ref: Focusa
   let domRef = useFocusableRef(ref);
   let overlayTriggerState = useContext(OverlayTriggerStateContext);
 
-  let [isProgressVisible, setIsProgressVisible] = useState(false);
-  useEffect(() => {
-    let timeout: ReturnType<typeof setTimeout>;
-
-    if (isPending) {
-      // Start timer when isPending is set to true.
-      timeout = setTimeout(() => {
-        setIsProgressVisible(true);
-      }, 1000);
-    } else {
-      // Exit loading state when isPending is set to false. */
-      setIsProgressVisible(false);
-    }
-    return () => {
-      // Clean up on unmount or when user removes isPending prop before entering loading state.
-      clearTimeout(timeout);
-    };
-  }, [isPending]);
+  let {isProgressVisible} = usePendingState(isPending);
 
   return (
     <RACButton
@@ -366,9 +367,8 @@ export const Button = forwardRef(function Button(props: ButtonProps, ref: Focusa
               styles: style({
                 paddingY: '--labelPadding',
                 order: 1,
-                opacity: {
-                  default: 1,
-                  isProgressVisible: 0
+                visibility: {
+                  isProgressVisible: 'hidden'
                 }
               })({isProgressVisible}),
               // @ts-ignore data-attributes allowed on all JSX elements, but adding to DOMProps has been problematic in the past
@@ -380,9 +380,8 @@ export const Button = forwardRef(function Button(props: ButtonProps, ref: Focusa
                 size: fontRelative(20),
                 marginStart: '--iconMargin',
                 flexShrink: 0,
-                opacity: {
-                  default: 1,
-                  isProgressVisible: 0
+                visibility: {
+                  isProgressVisible: 'hidden'
                 }
               })({isProgressVisible})
             }]
@@ -395,9 +394,9 @@ export const Button = forwardRef(function Button(props: ButtonProps, ref: Focusa
                 top: '50%',
                 left: '50%',
                 transform: 'translate(-50%, -50%)',
-                opacity: {
-                  default: 0,
-                  isProgressVisible: 1
+                visibility: {
+                  default: 'hidden',
+                  isProgressVisible: 'visible'
                 }
               })({isProgressVisible, isPending})}>
               <ProgressCircle

package/src/Calendar.tsx

@@ -284,6 +284,9 @@ const selectionSpanStyles = style({
   forcedColorAdjust: 'none'
 });
 
+/**
+ * Calendars display a grid of days in one or more months and allow users to select a single date.
+ */
 export const Calendar = /*#__PURE__*/ (forwardRef as forwardRefType)(function Calendar<T extends DateValue>(props: CalendarProps<T>, ref: ForwardedRef<HTMLDivElement>) {
   [props, ref] = useSpectrumContextProps(props, ref, CalendarContext);
   let {