@react-spectrum/s2 1.4.0 → 1.5.1

package/dist/types/src/Popover.d.ts

@@ -5,7 +5,7 @@ import { DialogProps } from 'react-aria-components/Dialog';
 import { DOMRefValue, GlobalDOMAttributes } from '@react-types/shared';
 import { heightProperties, UnsafeStyles, widthProperties } from './style-utils';
 import { StyleString } from '../style/types';
-export interface PopoverProps extends UnsafeStyles, Omit<AriaPopoverProps, 'arrowSize' | 'isNonModal' | 'arrowBoundaryOffset' | 'isKeyboardDismissDisabled' | 'shouldCloseOnInteractOutside' | 'shouldUpdatePosition' | 'style' | 'className' | 'render' | keyof GlobalDOMAttributes> {
+export interface PopoverProps extends UnsafeStyles, Omit<AriaPopoverProps, 'arrowSize' | 'arrowBoundaryOffset' | 'isKeyboardDismissDisabled' | 'shouldCloseOnInteractOutside' | 'shouldUpdatePosition' | 'style' | 'className' | 'render' | keyof GlobalDOMAttributes> {
     /**
      * The styles of the popover.
      */
@@ -25,7 +25,7 @@ export declare const PopoverContext: import("react").Context<ContextValue<Popove
 export declare const InPopoverContext: import("react").Context<boolean>;
 export declare const PopoverBase: import("react").ForwardRefExoticComponent<PopoverProps & import("react").RefAttributes<HTMLDivElement | null>>;
 type PopoverStylesProp = StyleString<(typeof widthProperties)[number] | (typeof heightProperties)[number]>;
-export interface PopoverDialogProps extends Pick<PopoverProps, 'size' | 'hideArrow' | 'placement' | 'shouldFlip' | 'containerPadding' | 'offset' | 'crossOffset' | 'triggerRef' | 'isOpen' | 'onOpenChange'>, Omit<DialogProps, 'children' | 'className' | 'style' | 'render' | keyof GlobalDOMAttributes>, UnsafeStyles {
+export interface PopoverDialogProps extends Pick<PopoverProps, 'size' | 'hideArrow' | 'placement' | 'shouldFlip' | 'containerPadding' | 'offset' | 'crossOffset' | 'getTargetRect' | 'isNonModal' | 'triggerRef' | 'isOpen' | 'onOpenChange'>, Omit<DialogProps, 'children' | 'className' | 'style' | 'render' | keyof GlobalDOMAttributes>, UnsafeStyles {
     /**
      * The children of the popover.
      */

package/dist/types/src/style-utils.d.ts

@@ -272,9 +272,11 @@ export declare function control(options: ControlOptions): ControlResult;
 declare const allowedOverrides: readonly ["margin", "marginStart", "marginEnd", "marginTop", "marginBottom", "marginX", "marginY", "flexGrow", "flexShrink", "flexBasis", "justifySelf", "alignSelf", "order", "gridArea", "gridRowStart", "gridRowEnd", "gridColumnStart", "gridColumnEnd", "position", "zIndex", "top", "bottom", "inset", "insetX", "insetY", "insetStart", "insetEnd", "visibility"];
 export declare const widthProperties: readonly ["width", "minWidth", "maxWidth"];
 export declare const heightProperties: readonly ["size", "height", "minHeight", "maxHeight"];
+export declare const fontProperties: readonly ["font", "fontFamily", "fontWeight", "lineHeight", "fontSize"];
 export type StylesProp = StyleString<(typeof allowedOverrides)[number] | (typeof widthProperties)[number]>;
 export type StylesPropWithHeight = StyleString<(typeof allowedOverrides)[number] | (typeof widthProperties)[number] | (typeof heightProperties)[number]>;
 export type StylesPropWithoutWidth = StyleString<(typeof allowedOverrides)[number]>;
+export type StylesPropWithFont = StyleString<(typeof fontProperties)[number]>;
 export type UnsafeClassName = string & {
     properties?: never;
 };
@@ -295,7 +297,8 @@ export interface StyleProps extends UnsafeStyles {
     /** Spectrum-defined styles, returned by the `style()` macro. */
     styles?: StylesProp;
 }
-export declare function getAllowedOverrides({ width, height }?: {
+export declare function getAllowedOverrides({ width, height, font }?: {
+    font?: boolean | undefined;
     height?: boolean | undefined;
     width?: boolean | undefined;
 }): string[];

package/exports/CenterBaseline.ts

@@ -0,0 +1 @@
+export {CenterBaseline} from '../src/CenterBaseline';

package/exports/Skeleton.ts

@@ -1,2 +1,2 @@
-export {Skeleton, useIsSkeleton} from '../src/Skeleton';
+export {Skeleton, SkeletonContext, useIsSkeleton} from '../src/Skeleton';
 export type {SkeletonProps} from '../src/Skeleton';

package/exports/index.ts

@@ -150,6 +150,8 @@ export {pressScale} from '../src/pressScale';
 
 export {mergeStyles} from '../style/runtime';
 
+export {CenterBaseline} from '../src/CenterBaseline';
+
 export {Autocomplete} from 'react-aria-components/Autocomplete';
 export {Collection} from 'react-aria/Collection';
 export {FileTrigger} from 'react-aria-components/FileTrigger';

package/icons/Icon.cjs

@@ -71,9 +71,9 @@ const $bde97c91243ed164$var$iconStyles = function anonymous(props, overrides) {
         if (p[1] === "F") height = true;
         rules += p[0];
     }
-    if (!width) rules += ' Zm131';
-    if (!height) rules += ' Fn131';
-    rules += ' _va131';
+    if (!width) rules += ' Zm151';
+    if (!height) rules += ' Fn151';
+    rules += ' _va151';
     return rules;
 };
 function $bde97c91243ed164$export$274edc73af1ae9c8(Component, context = $bde97c91243ed164$export$a49f528ae1a4d0ed) {
@@ -114,20 +114,20 @@ const $bde97c91243ed164$var$illustrationStyles = function anonymous(props, overr
         rules += p[0];
     }
     if (props.size === "L") {
-        if (!width) rules += ' Zq131';
+        if (!width) rules += ' Zq151';
     } else if (props.size === "M") {
-        if (!width) rules += ' ZH131';
+        if (!width) rules += ' ZH151';
     } else if (props.size === "S") {
-        if (!width) rules += ' ZF131';
+        if (!width) rules += ' ZF151';
     }
     if (props.size === "L") {
-        if (!height) rules += ' Fr131';
+        if (!height) rules += ' Fr151';
     } else if (props.size === "M") {
-        if (!height) rules += ' FB131';
+        if (!height) rules += ' FB151';
     } else if (props.size === "S") {
-        if (!height) rules += ' Fz131';
+        if (!height) rules += ' Fz151';
     }
-    rules += ' _va131';
+    rules += ' _va151';
     return rules;
 };
 function $bde97c91243ed164$export$4d00e7be716a0093(Component) {

package/icons/Icon.css

@@ -1,37 +1,37 @@
 @layer _.a {
-  .Zm131 {
+  .Zm151 {
     width: calc(1.25rem * var(--s2-scale));
   }
 
-  .Fn131 {
+  .Fn151 {
     height: calc(1.25rem * var(--s2-scale));
   }
 
-  .ZF131 {
+  .ZF151 {
     width: calc(3rem * var(--s2-scale));
   }
 
-  .ZH131 {
+  .ZH151 {
     width: calc(6rem * var(--s2-scale));
   }
 
-  .Zq131 {
+  .Zq151 {
     width: calc(10rem * var(--s2-scale));
   }
 
-  .Fz131 {
+  .Fz151 {
     height: calc(3rem * var(--s2-scale));
   }
 
-  .FB131 {
+  .FB151 {
     height: calc(6rem * var(--s2-scale));
   }
 
-  .Fr131 {
+  .Fr151 {
     height: calc(10rem * var(--s2-scale));
   }
 
-  ._va131 {
+  ._va151 {
     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 += ' Zm131';
-    if (!height) rules += ' Fn131';
-    rules += ' _va131';
+    if (!width) rules += ' Zm151';
+    if (!height) rules += ' Fn151';
+    rules += ' _va151';
     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 += ' Zq131';
+        if (!width) rules += ' Zq151';
     } else if (props.size === "M") {
-        if (!width) rules += ' ZH131';
+        if (!width) rules += ' ZH151';
     } else if (props.size === "S") {
-        if (!width) rules += ' ZF131';
+        if (!width) rules += ' ZF151';
     }
     if (props.size === "L") {
-        if (!height) rules += ' Fr131';
+        if (!height) rules += ' Fr151';
     } else if (props.size === "M") {
-        if (!height) rules += ' FB131';
+        if (!height) rules += ' FB151';
     } else if (props.size === "S") {
-        if (!height) rules += ' Fz131';
+        if (!height) rules += ' Fz151';
     }
-    rules += ' _va131';
+    rules += ' _va151';
     return rules;
 };
 function $ac8c32e6775ddd1f$export$4d00e7be716a0093(Component) {

package/icons/Skeleton.cjs

@@ -99,7 +99,7 @@ function $5eb75e0c130e0669$export$cb6ddd830302c2a8({ children: children }) {
         // @ts-ignore - compatibility with React < 19
         inert: (0, $lzdFu$reactariaprivateutilsinertValue.inertValue)(true),
         ref: $5eb75e0c130e0669$export$6b288fe07640c94c(true),
-        className: $5eb75e0c130e0669$export$d2353276f167b21f + " pw131 _ma131 oa131 na131 ka131 ja131",
+        className: $5eb75e0c130e0669$export$d2353276f167b21f + " pw151 _ma151 oa151 na151 ka151 ja151",
         children: children
     });
 }
@@ -120,7 +120,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)(" oa131 na131 ka131 ja131", styles);
+    if (isSkeleton) return (0, $308b180f49d82d28$exports.mergeStyles)(" oa151 na151 ka151 ja151", styles);
     return styles || '';
 }
 

package/icons/Skeleton.css

@@ -12,28 +12,28 @@
 }
 
 @layer _.a {
-  .pw131 {
+  .pw151 {
     color: #0000;
   }
 
-  ._ma131 {
+  ._ma151 {
     -webkit-box-decoration-break: clone;
     box-decoration-break: clone;
   }
 
-  .oa131 {
+  .oa151 {
     border-start-start-radius: .25rem;
   }
 
-  .na131 {
+  .na151 {
     border-start-end-radius: .25rem;
   }
 
-  .ka131 {
+  .ka151 {
     border-end-start-radius: .25rem;
   }
 
-  .ja131 {
+  .ja151 {
     border-end-end-radius: .25rem;
   }
 }

package/icons/Skeleton.mjs

@@ -86,7 +86,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 + " pw131 _ma131 oa131 na131 ka131 ja131",
+        className: $5ad421ec19460c48$export$d2353276f167b21f + " pw151 _ma151 oa151 na151 ka151 ja151",
         children: children
     });
 }
@@ -107,7 +107,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)(" oa131 na131 ka131 ja131", styles);
+    if (isSkeleton) return (0, $feb886035e0d4633$export$e618dc39ac9ad607)(" oa151 na151 ka151 ja151", styles);
     return styles || '';
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-spectrum/s2",
-  "version": "1.4.0",
+  "version": "1.5.1",
   "description": "Spectrum 2 UI components in React",
   "license": "Apache-2.0",
   "repository": {
@@ -83,10 +83,10 @@
     "@internationalized/date": "^3.12.2",
     "@internationalized/number": "^3.6.7",
     "@parcel/macros": "^2.16.3",
-    "@react-types/shared": "^3.35.0",
-    "react-aria": "3.49.0",
-    "react-aria-components": "1.18.0",
-    "react-stately": "3.47.0"
+    "@react-types/shared": "^3.36.0",
+    "react-aria": "3.50.0",
+    "react-aria-components": "1.19.0",
+    "react-stately": "3.48.0"
   },
   "peerDependencies": {
     "react": "^19.0.0-rc.1",
@@ -96,5 +96,5 @@
   "page": "dist/page.cjs",
   "style-main": "style/dist/main.cjs",
   "style-module": "style/dist/module.mjs",
-  "gitHead": "3577a20859b9585a000010c720f6ee39c1c588cc"
+  "gitHead": "c4de1e2235bce213d392477a2ebc1e575937051f"
 }

package/src/ActionBar.tsx

@@ -30,7 +30,6 @@ import {
 import {DOMProps, DOMRef, DOMRefValue, Key} from '@react-types/shared';
 import {FocusScope} from 'react-aria/FocusScope';
 import intlMessages from '../intl/*.json';
-// @ts-ignore
 import {lightDark, style} from '../style' with {type: 'macro'};
 import {StyleProps} from './style-utils' with {type: 'macro'};
 import {useControlledState} from 'react-stately/useControlledState';

package/src/ActionButton.tsx

@@ -34,7 +34,6 @@ 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 {OverlayTriggerStateContext} from 'react-aria-components/Dialog';

package/src/ActionMenu.tsx

@@ -16,7 +16,6 @@ import {ContextValue} from 'react-aria-components/slots';
 import {createContext, forwardRef} from 'react';
 import {filterDOMProps} from 'react-aria/filterDOMProps';
 import {forwardRefType} from './types';
-// @ts-ignore
 import intlMessages from '../intl/*.json';
 import {Menu, MenuProps, MenuTrigger, MenuTriggerProps} from './Menu';
 import MoreIcon from '../s2wf-icons/S2_Icon_More_20_N.svg';

package/src/AlertDialog.tsx

@@ -20,7 +20,6 @@ import {Dialog} from './Dialog';
 import {DOMProps, DOMRef} from '@react-types/shared';
 import {forwardRef, ReactNode} from 'react';
 import {IconContext} from './Icon';
-// @ts-ignore
 import intlMessages from '../intl/*.json';
 import NoticeSquare from '../s2wf-icons/S2_Icon_AlertDiamond_20_N.svg';
 import {Provider} from 'react-aria-components/slots';

package/src/Breadcrumbs.tsx

@@ -11,14 +11,12 @@
  */
 
 import {ActionButton} from './ActionButton';
-
 import {
   Breadcrumb as AriaBreadcrumb,
   BreadcrumbProps as AriaBreadcrumbItemProps,
   BreadcrumbsProps as AriaBreadcrumbsProps,
   Breadcrumbs as RACBreadcrumbs
 } from 'react-aria-components/Breadcrumbs';
-
 import {baseColor, focusRing, size, style} from '../style' with {type: 'macro'};
 import ChevronIcon from '../ui-icons/Chevron';
 import {
@@ -56,13 +54,11 @@ import {
 } from 'react';
 import FolderIcon from '../s2wf-icons/S2_Icon_FolderBreadcrumb_20_N.svg';
 import {forwardRefType} from './types';
-// @ts-ignore
 import {HeadingContext} from 'react-aria-components/Heading';
 import {inertValue} from 'react-aria/private/utils/inertValue';
 import intlMessages from '../intl/*.json';
 import {Link, LinkRenderProps} from 'react-aria-components/Link';
 import {Menu, MenuItem, MenuTrigger} from './Menu';
-// @ts-ignore
 import {Text} from './Content';
 import {useDOMRef} from './useDOMRef';
 import {useLayoutEffect} from 'react-aria/private/utils/useLayoutEffect';

package/src/Button.tsx

@@ -29,7 +29,6 @@ import {FocusableRef, FocusableRefValue, GlobalDOMAttributes} from '@react-types
 import {IconContext} from './Icon';
 import intlMessages from '../intl/*.json';
 import {linearGradient} from '../style/spectrum-theme' with {type: 'macro'};
-// @ts-ignore
 import {Link, LinkProps} from 'react-aria-components/Link';
 import {OverlayTriggerStateContext} from 'react-aria-components/Dialog';
 import {pressScale} from './pressScale';
@@ -254,7 +253,12 @@ const button = style<ButtonRenderProps & ButtonStyleProps & {isStaticColor: bool
           fill: {
             variant: {
               primary: 'auto',
-              secondary: 'white',
+              secondary: {
+                default: 'transparent-overlay-1000',
+                isHovered: 'transparent-overlay-1000',
+                isFocusVisible: 'transparent-overlay-1000',
+                isPressed: 'transparent-overlay-1000'
+              },
               premium: 'white',
               genai: 'white'
             }
@@ -264,7 +268,12 @@ const button = style<ButtonRenderProps & ButtonStyleProps & {isStaticColor: bool
               premium: 'white',
               genai: 'white'
             },
-            default: 'white'
+            default: {
+              default: 'transparent-overlay-1000',
+              isHovered: 'transparent-overlay-1000',
+              isFocusVisible: 'transparent-overlay-1000',
+              isPressed: 'transparent-overlay-1000'
+            }
           }
         },
         isDisabled: 'transparent-overlay-400'

package/src/ButtonGroup.tsx

@@ -65,6 +65,7 @@ const buttongroup = style<ButtonGroupStyleProps>(
   {
     display: 'inline-flex',
     position: 'relative',
+    maxWidth: 'full',
     gap: {
       size: {
         S: 8,

package/src/Calendar.tsx

@@ -40,7 +40,6 @@ import {forwardRefType, GlobalDOMAttributes} from '@react-types/shared';
 import {getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};
 import {Header, HeaderContext, HeadingContext} from './Content';
 import {helpTextStyles} from './Field';
-// @ts-ignore
 import intlMessages from '../intl/*.json';
 import {pressScale} from './pressScale';
 import {RangeCalendarContext, RangeCalendarStateContext} from 'react-aria-components/RangeCalendar';

package/src/CenterBaseline.tsx

@@ -30,6 +30,23 @@ const styles = style({
   alignItems: 'center'
 });
 
+/**
+ * Vertically centers its children against the surrounding text baseline.
+ * Use this to align icons or other inline elements with adjacent text without
+ * breaking baseline alignment.
+ *
+ * @example
+ *   import {CenterBaseline} from '@react-spectrum/s2/CenterBaseline';
+ *   import {style} from '@react-spectrum/s2/style' with {type: 'macro'};
+ *   import CheckmarkIcon from '@react-spectrum/s2/icons/Checkmark';
+ *
+ *   <span className={style({display: 'flex', gap: 4, alignItems: 'baseline'})}>
+ *     <CenterBaseline>
+ *       <CheckmarkIcon />
+ *     </CenterBaseline>
+ *     <span>Done</span>
+ *   </span>;
+ */
 export function CenterBaseline(props: CenterBaselineProps): ReactNode {
   let domProps = filterDOMProps(props);
   return (

package/src/CloseButton.tsx

@@ -22,7 +22,6 @@ import {
 import {createContext, forwardRef} from 'react';
 import CrossIcon from '../ui-icons/Cross';
 import {FocusableRef, FocusableRefValue} from '@react-types/shared';
-// @ts-ignore
 import intlMessages from '../intl/*.json';
 import {pressScale} from './pressScale';
 import {useFocusableRef} from './useDOMRef';

package/src/ComboBox.tsx

@@ -77,7 +77,6 @@ import {forwardRefType} from './types';
 import {HeaderContext, HeadingContext, Text, TextContext} from './Content';
 import {IconContext} from './Icon';
 import {InputContext, InputProps} from 'react-aria-components/Input';
-// @ts-ignore
 import intlMessages from '../intl/*.json';
 import {ListLayout} from 'react-stately/useVirtualizerState';
 import {mergeRefs} from 'react-aria/mergeRefs';

package/src/ContextualHelp.tsx

@@ -17,7 +17,6 @@ import intlMessages from '../intl/*.json';
 import {mergeProps} from 'react-aria/mergeProps';
 import {mergeStyles} from '../style/runtime';
 import {Placement} from 'react-aria-components/Popover';
-// @ts-ignore
 import {Popover, PopoverDialogProps} from './Popover';
 import {space, style} from '../style' with {type: 'macro'};
 import {StyleProps} from './style-utils' with {type: 'macro'};
@@ -27,7 +26,7 @@ import {useLabels} from 'react-aria/private/utils/useLabels';
 import {useLocalizedStringFormatter} from 'react-aria/useLocalizedStringFormatter';
 import {useSpectrumContextProps} from './useSpectrumContextProps';
 
-export interface ContextualHelpPopoverProps extends PopoverDialogProps {
+export interface ContextualHelpPopoverProps extends Omit<PopoverDialogProps, 'isNonModal'> {
   /**
    * The children of the contextual help popover. Supports Heading, Content, and Footer elements.
    */

package/src/DatePicker.tsx

@@ -48,7 +48,6 @@ import {
   SpectrumLabelableProps
 } from '@react-types/shared';
 import {IconContext} from './Icon';
-// @ts-ignore
 import intlMessages from '../intl/*.json';
 import {Popover} from './Popover';
 import {PopoverProps} from 'react-aria-components/Popover';

package/src/DateRangePicker.tsx

@@ -33,7 +33,6 @@ import {
   HelpTextProps,
   SpectrumLabelableProps
 } from '@react-types/shared';
-// @ts-ignore
 import intlMessages from '../intl/*.json';
 import {PopoverProps} from 'react-aria-components/Popover';
 import {RangeCalendar, RangeCalendarProps} from './RangeCalendar';