@react-spectrum/s2 1.4.0 → 1.5.0

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 += ' Zm15';
+    if (!height) rules += ' Fn15';
+    rules += ' _va15';
     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 += ' Zq15';
     } else if (props.size === "M") {
-        if (!width) rules += ' ZH131';
+        if (!width) rules += ' ZH15';
     } else if (props.size === "S") {
-        if (!width) rules += ' ZF131';
+        if (!width) rules += ' ZF15';
     }
     if (props.size === "L") {
-        if (!height) rules += ' Fr131';
+        if (!height) rules += ' Fr15';
     } else if (props.size === "M") {
-        if (!height) rules += ' FB131';
+        if (!height) rules += ' FB15';
     } else if (props.size === "S") {
-        if (!height) rules += ' Fz131';
+        if (!height) rules += ' Fz15';
     }
-    rules += ' _va131';
+    rules += ' _va15';
     return rules;
 };
 function $bde97c91243ed164$export$4d00e7be716a0093(Component) {

package/icons/Icon.css

@@ -1,37 +1,37 @@
 @layer _.a {
-  .Zm131 {
+  .Zm15 {
     width: calc(1.25rem * var(--s2-scale));
   }
 
-  .Fn131 {
+  .Fn15 {
     height: calc(1.25rem * var(--s2-scale));
   }
 
-  .ZF131 {
+  .ZF15 {
     width: calc(3rem * var(--s2-scale));
   }
 
-  .ZH131 {
+  .ZH15 {
     width: calc(6rem * var(--s2-scale));
   }
 
-  .Zq131 {
+  .Zq15 {
     width: calc(10rem * var(--s2-scale));
   }
 
-  .Fz131 {
+  .Fz15 {
     height: calc(3rem * var(--s2-scale));
   }
 
-  .FB131 {
+  .FB15 {
     height: calc(6rem * var(--s2-scale));
   }
 
-  .Fr131 {
+  .Fr15 {
     height: calc(10rem * var(--s2-scale));
   }
 
-  ._va131 {
+  ._va15 {
     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 += ' Zm15';
+    if (!height) rules += ' Fn15';
+    rules += ' _va15';
     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 += ' Zq15';
     } else if (props.size === "M") {
-        if (!width) rules += ' ZH131';
+        if (!width) rules += ' ZH15';
     } else if (props.size === "S") {
-        if (!width) rules += ' ZF131';
+        if (!width) rules += ' ZF15';
     }
     if (props.size === "L") {
-        if (!height) rules += ' Fr131';
+        if (!height) rules += ' Fr15';
     } else if (props.size === "M") {
-        if (!height) rules += ' FB131';
+        if (!height) rules += ' FB15';
     } else if (props.size === "S") {
-        if (!height) rules += ' Fz131';
+        if (!height) rules += ' Fz15';
     }
-    rules += ' _va131';
+    rules += ' _va15';
     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 + " pw15 _ma15 oa15 na15 ka15 ja15",
         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)(" oa15 na15 ka15 ja15", styles);
     return styles || '';
 }
 

package/icons/Skeleton.cjs.map

@@ -1 +1 @@
-{"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;AAqBM,SAAS,0CAAoB,WAAoB;IACtD,IAAI,eAAe,CAAA,GAAA,mBAAK,EAAoB;IAC5C,IAAI,eAAe,CAAA,GAAA,uCAAY,EAAE;IACjC,OAAO,CAAA,GAAA,wBAAU,EACf,CAAC;QACC,IACE,eACA,CAAC,aAAa,OAAO,IACrB,WACA,CAAC,gBACD,OAAO,QAAQ,OAAO,KAAK,YAC3B;YACA,iEAAiE;YACjE,2EAA2E;YAC3E,aAAa,OAAO,GAAG,QAAQ,OAAO,CACpC;gBAAC;oBAAC,oBAAoB;gBAAM;gBAAG;oBAAC,oBAAoB;gBAAI;aAAE,EAC1D;gBACE,UAAU;gBACV,YAAY;gBACZ,QAAQ;YACV;YAEF,aAAa,OAAO,CAAC,SAAS,GAAG;QACnC,OAAO,IAAI,CAAC,eAAe,aAAa,OAAO,EAAE;YAC/C,aAAa,OAAO,CAAC,MAAM;YAC3B,aAAa,OAAO,GAAG;QACzB;IACF,GACA;QAAC;QAAa;KAAa;AAE/B;AASO,MAAM,0DAAkB,CAAA,GAAA,0BAAY,EAAkB;AACtD,SAAS;IACd,OAAO,CAAA,GAAA,uBAAS,EAAE,8CAAoB;AACxC;AAUO,SAAS,0CAAS,YAAC,QAAQ,aAAE,SAAS,EAAgB;IAC3D,iDAAiD;IACjD,qBAAO,gCAAC,0CAAgB,QAAQ;QAAC,OAAO;kBAAY;;AACtD;AAEO,MAAM,sDASV,qEAAqE;AAEjE,SAAS,0CACd,QAAmB,EACnB,KAAgC;IAEhC,IAAI,aAAa,CAAA,GAAA,uBAAS,EAAE;IAC5B,IAAI,YAAY;QACd,yBAAW,gCAAC;sBAAc;;QAC1B,QAAQ;YACN,GAAG,KAAK;YACR,8DAA8D;YAC9D,2EAA2E;YAC3E,qBAAqB;QACvB;IACF;IACA,OAAO;QAAC;QAAU;KAAM;AAC1B;AAGO,SAAS,0CAAa,YAAC,QAAQ,EAAwB;IAC5D,qBACE,gCAAC;QACC,6CAA6C;QAC7C,OAAO,CAAA,GAAA,iDAAS,EAAE;QAClB,KAAK,0CAAoB;QACzB,WACE;kBAOD;;AAGP;AAGO,SAAS,0CAAgB,YAAC,QAAQ,EAA8B;IACrE,IAAI,YAAY,CAAA,GAAA,uBAAS,EAAE;IAC3B,IAAI,YAAY,0CAAoB,aAAa;IACjD,IAAI,aAAa,MACf,OAAO;IAGT,IAAI,WACF,SAAS,YAAY,CAAC,OAAO,wBAAwB,CAAC,UAAU,QAAQ,MACnE,SAAS,GAAG,GACb,SAAS,KAAK,CAAC,GAAG;IACxB,qBACE,gCAAC,0CAAgB,QAAQ;QAAC,OAAO;kBAC9B,0BACG,CAAA,GAAA,yBAAW,EAAE,UAAU;YACrB,KAAK,CAAA,GAAA,mCAAQ,EAAE,UAAU;YACzB,WAAW,AAAC,CAAA,SAAS,KAAK,CAAC,SAAS,IAAI,EAAC,IAAK,MAAM;YACpD,6CAA6C;YAC7C,OAAO,CAAA,GAAA,iDAAS,EAAE;QACpB,KACA;;AAGV;AAGO,SAAS,0CAAgB,MAAmB;IACjD,IAAI,aAAa,CAAA,GAAA,uBAAS,EAAE;IAC5B,IAAI,YACF,OAAO,CAAA,GAAA,qCAAU,8BAA+B;IAElD,OAAO,UAAW;AACpB","sources":["packages/@react-spectrum/s2/src/Skeleton.tsx"],"sourcesContent":["/*\n * Copyright 2024 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {\n  cloneElement,\n  createContext,\n  CSSProperties,\n  ReactElement,\n  ReactNode,\n  Ref,\n  useCallback,\n  useContext,\n  useRef\n} from 'react';\nimport {color, style} from '../style' with {type: 'macro'};\nimport {css} from '../style/style-macro' with {type: 'macro'};\nimport {inertValue} from 'react-aria/private/utils/inertValue';\nimport {mergeRefs} from 'react-aria/mergeRefs';\nimport {mergeStyles} from '../style/runtime';\nimport {StyleString} from '../style/types';\nimport {useMediaQuery} from './useMediaQuery';\n\nexport function useLoadingAnimation(isAnimating: boolean): (element: HTMLElement | null) => void {\n  let animationRef = useRef<Animation | null>(null);\n  let reduceMotion = useMediaQuery('(prefers-reduced-motion: reduce)');\n  return useCallback(\n    (element: HTMLElement | null) => {\n      if (\n        isAnimating &&\n        !animationRef.current &&\n        element &&\n        !reduceMotion &&\n        typeof element.animate === 'function'\n      ) {\n        // Use web animation API instead of CSS animations so that we can\n        // synchronize it between all loading elements on the page (via startTime).\n        animationRef.current = element.animate(\n          [{backgroundPosition: '100%'}, {backgroundPosition: '0%'}],\n          {\n            duration: 2000,\n            iterations: Infinity,\n            easing: 'ease-in-out'\n          }\n        );\n        animationRef.current.startTime = 0;\n      } else if (!isAnimating && animationRef.current) {\n        animationRef.current.cancel();\n        animationRef.current = null;\n      }\n    },\n    [isAnimating, reduceMotion]\n  );\n}\n\nexport type SkeletonElement = ReactElement<{\n  children: ReactNode;\n  className?: string;\n  ref?: Ref<HTMLElement>;\n  inert?: boolean | 'true';\n}>;\n\nexport const SkeletonContext = createContext<boolean | null>(null);\nexport function useIsSkeleton(): boolean {\n  return useContext(SkeletonContext) || false;\n}\n\nexport interface SkeletonProps {\n  children: ReactNode;\n  isLoading: boolean;\n}\n\n/**\n * A Skeleton wraps around content to render it as a placeholder.\n */\nexport function Skeleton({children, isLoading}: SkeletonProps): ReactNode {\n  // Disable all form components inside a skeleton.\n  return <SkeletonContext.Provider value={isLoading}>{children}</SkeletonContext.Provider>;\n}\n\nexport const loadingStyle = css(\n  `\n  background-image: linear-gradient(to right, ${color('gray-100')} 33%, light-dark(${color('gray-25')}, ${color('gray-300')}), ${color('gray-100')} 66%);\n  background-size: 300%;\n  * {\n    visibility: hidden;\n  }\n`,\n  'L'\n); // add to a separate layer so it overrides default style macro styles\n\nexport function useSkeletonText(\n  children: ReactNode,\n  style: CSSProperties | undefined\n): [ReactNode, CSSProperties | undefined] {\n  let isSkeleton = useContext(SkeletonContext);\n  if (isSkeleton) {\n    children = <SkeletonText>{children}</SkeletonText>;\n    style = {\n      ...style,\n      // This ensures the ellipsis on truncated text is also hidden.\n      // -webkit-text-fill-color overrides any `color` property that is also set.\n      WebkitTextFillColor: 'transparent'\n    };\n  }\n  return [children, style];\n}\n\n// Rendered inside <Text> to create skeleton line boxes via box-decoration-break.\nexport function SkeletonText({children}: {children: ReactNode}): ReactNode {\n  return (\n    <span\n      // @ts-ignore - compatibility with React < 19\n      inert={inertValue(true)}\n      ref={useLoadingAnimation(true)}\n      className={\n        loadingStyle +\n        style({\n          color: 'transparent',\n          boxDecorationBreak: 'clone',\n          borderRadius: 'sm'\n        })\n      }>\n      {children}\n    </span>\n  );\n}\n\n// Clones the child element and displays it with skeleton styling.\nexport function SkeletonWrapper({children}: {children: SkeletonElement}): ReactNode {\n  let isLoading = useContext(SkeletonContext);\n  let animation = useLoadingAnimation(isLoading || false);\n  if (isLoading == null) {\n    return children;\n  }\n\n  let childRef =\n    'ref' in children && !Object.getOwnPropertyDescriptor(children, 'ref')?.get\n      ? (children.ref as any)\n      : children.props.ref;\n  return (\n    <SkeletonContext.Provider value={null}>\n      {isLoading\n        ? cloneElement(children, {\n            ref: mergeRefs(childRef, animation),\n            className: (children.props.className || '') + ' ' + loadingStyle,\n            // @ts-ignore - compatibility with React < 19\n            inert: inertValue(true)\n          })\n        : children}\n    </SkeletonContext.Provider>\n  );\n}\n\n// Adds default border radius around icons when displayed in a skeleton.\nexport function useSkeletonIcon(styles: StyleString): StyleString {\n  let isSkeleton = useContext(SkeletonContext);\n  if (isSkeleton) {\n    return mergeStyles(style({borderRadius: 'sm'}), styles);\n  }\n  return styles || ('' as StyleString);\n}\n"],"names":[],"version":3,"file":"Skeleton.cjs.map"}
+{"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;AAqBM,SAAS,0CAAoB,WAAoB;IACtD,IAAI,eAAe,CAAA,GAAA,mBAAK,EAAoB;IAC5C,IAAI,eAAe,CAAA,GAAA,uCAAY,EAAE;IACjC,OAAO,CAAA,GAAA,wBAAU,EACf,CAAC;QACC,IACE,eACA,CAAC,aAAa,OAAO,IACrB,WACA,CAAC,gBACD,OAAO,QAAQ,OAAO,KAAK,YAC3B;YACA,iEAAiE;YACjE,2EAA2E;YAC3E,aAAa,OAAO,GAAG,QAAQ,OAAO,CACpC;gBAAC;oBAAC,oBAAoB;gBAAM;gBAAG;oBAAC,oBAAoB;gBAAI;aAAE,EAC1D;gBACE,UAAU;gBACV,YAAY;gBACZ,QAAQ;YACV;YAEF,aAAa,OAAO,CAAC,SAAS,GAAG;QACnC,OAAO,IAAI,CAAC,eAAe,aAAa,OAAO,EAAE;YAC/C,aAAa,OAAO,CAAC,MAAM;YAC3B,aAAa,OAAO,GAAG;QACzB;IACF,GACA;QAAC;QAAa;KAAa;AAE/B;AASO,MAAM,0DAAkB,CAAA,GAAA,0BAAY,EAAkB;AACtD,SAAS;IACd,OAAO,CAAA,GAAA,uBAAS,EAAE,8CAAoB;AACxC;AAUO,SAAS,0CAAS,YAAC,QAAQ,aAAE,SAAS,EAAgB;IAC3D,iDAAiD;IACjD,qBAAO,gCAAC,0CAAgB,QAAQ;QAAC,OAAO;kBAAY;;AACtD;AAEO,MAAM,sDASV,qEAAqE;AAEjE,SAAS,0CACd,QAAmB,EACnB,KAAgC;IAEhC,IAAI,aAAa,CAAA,GAAA,uBAAS,EAAE;IAC5B,IAAI,YAAY;QACd,yBAAW,gCAAC;sBAAc;;QAC1B,QAAQ;YACN,GAAG,KAAK;YACR,8DAA8D;YAC9D,2EAA2E;YAC3E,qBAAqB;QACvB;IACF;IACA,OAAO;QAAC;QAAU;KAAM;AAC1B;AAGO,SAAS,0CAAa,YAAC,QAAQ,EAAwB;IAC5D,qBACE,gCAAC;QACC,6CAA6C;QAC7C,OAAO,CAAA,GAAA,iDAAS,EAAE;QAClB,KAAK,0CAAoB;QACzB,WACE;kBAOD;;AAGP;AAGO,SAAS,0CAAgB,YAAC,QAAQ,EAA8B;IACrE,IAAI,YAAY,CAAA,GAAA,uBAAS,EAAE;IAC3B,IAAI,YAAY,0CAAoB,aAAa;IACjD,IAAI,aAAa,MACf,OAAO;IAGT,IAAI,WACF,SAAS,YAAY,CAAC,OAAO,wBAAwB,CAAC,UAAU,QAAQ,MACnE,SAAS,GAAG,GACb,SAAS,KAAK,CAAC,GAAG;IACxB,qBACE,gCAAC,0CAAgB,QAAQ;QAAC,OAAO;kBAC9B,0BACG,CAAA,GAAA,yBAAW,EAAE,UAAU;YACrB,KAAK,CAAA,GAAA,mCAAQ,EAAE,UAAU;YACzB,WAAW,AAAC,CAAA,SAAS,KAAK,CAAC,SAAS,IAAI,EAAC,IAAK,MAAM;YACpD,6CAA6C;YAC7C,OAAO,CAAA,GAAA,iDAAS,EAAE;QACpB,KACA;;AAGV;AAGO,SAAS,0CAAgB,MAAmB;IACjD,IAAI,aAAa,CAAA,GAAA,uBAAS,EAAE;IAC5B,IAAI,YACF,OAAO,CAAA,GAAA,qCAAU,0BAA+B;IAElD,OAAO,UAAW;AACpB","sources":["packages/@react-spectrum/s2/src/Skeleton.tsx"],"sourcesContent":["/*\n * Copyright 2024 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {\n  cloneElement,\n  createContext,\n  CSSProperties,\n  ReactElement,\n  ReactNode,\n  Ref,\n  useCallback,\n  useContext,\n  useRef\n} from 'react';\nimport {color, style} from '../style' with {type: 'macro'};\nimport {css} from '../style/style-macro' with {type: 'macro'};\nimport {inertValue} from 'react-aria/private/utils/inertValue';\nimport {mergeRefs} from 'react-aria/mergeRefs';\nimport {mergeStyles} from '../style/runtime';\nimport {StyleString} from '../style/types';\nimport {useMediaQuery} from './useMediaQuery';\n\nexport function useLoadingAnimation(isAnimating: boolean): (element: HTMLElement | null) => void {\n  let animationRef = useRef<Animation | null>(null);\n  let reduceMotion = useMediaQuery('(prefers-reduced-motion: reduce)');\n  return useCallback(\n    (element: HTMLElement | null) => {\n      if (\n        isAnimating &&\n        !animationRef.current &&\n        element &&\n        !reduceMotion &&\n        typeof element.animate === 'function'\n      ) {\n        // Use web animation API instead of CSS animations so that we can\n        // synchronize it between all loading elements on the page (via startTime).\n        animationRef.current = element.animate(\n          [{backgroundPosition: '100%'}, {backgroundPosition: '0%'}],\n          {\n            duration: 2000,\n            iterations: Infinity,\n            easing: 'ease-in-out'\n          }\n        );\n        animationRef.current.startTime = 0;\n      } else if (!isAnimating && animationRef.current) {\n        animationRef.current.cancel();\n        animationRef.current = null;\n      }\n    },\n    [isAnimating, reduceMotion]\n  );\n}\n\nexport type SkeletonElement = ReactElement<{\n  children: ReactNode;\n  className?: string;\n  ref?: Ref<HTMLElement>;\n  inert?: boolean | 'true';\n}>;\n\nexport const SkeletonContext = createContext<boolean | null>(null);\nexport function useIsSkeleton(): boolean {\n  return useContext(SkeletonContext) || false;\n}\n\nexport interface SkeletonProps {\n  children: ReactNode;\n  isLoading: boolean;\n}\n\n/**\n * A Skeleton wraps around content to render it as a placeholder.\n */\nexport function Skeleton({children, isLoading}: SkeletonProps): ReactNode {\n  // Disable all form components inside a skeleton.\n  return <SkeletonContext.Provider value={isLoading}>{children}</SkeletonContext.Provider>;\n}\n\nexport const loadingStyle = css(\n  `\n  background-image: linear-gradient(to right, ${color('gray-100')} 33%, light-dark(${color('gray-25')}, ${color('gray-300')}), ${color('gray-100')} 66%);\n  background-size: 300%;\n  * {\n    visibility: hidden;\n  }\n`,\n  'L'\n); // add to a separate layer so it overrides default style macro styles\n\nexport function useSkeletonText(\n  children: ReactNode,\n  style: CSSProperties | undefined\n): [ReactNode, CSSProperties | undefined] {\n  let isSkeleton = useContext(SkeletonContext);\n  if (isSkeleton) {\n    children = <SkeletonText>{children}</SkeletonText>;\n    style = {\n      ...style,\n      // This ensures the ellipsis on truncated text is also hidden.\n      // -webkit-text-fill-color overrides any `color` property that is also set.\n      WebkitTextFillColor: 'transparent'\n    };\n  }\n  return [children, style];\n}\n\n// Rendered inside <Text> to create skeleton line boxes via box-decoration-break.\nexport function SkeletonText({children}: {children: ReactNode}): ReactNode {\n  return (\n    <span\n      // @ts-ignore - compatibility with React < 19\n      inert={inertValue(true)}\n      ref={useLoadingAnimation(true)}\n      className={\n        loadingStyle +\n        style({\n          color: 'transparent',\n          boxDecorationBreak: 'clone',\n          borderRadius: 'sm'\n        })\n      }>\n      {children}\n    </span>\n  );\n}\n\n// Clones the child element and displays it with skeleton styling.\nexport function SkeletonWrapper({children}: {children: SkeletonElement}): ReactNode {\n  let isLoading = useContext(SkeletonContext);\n  let animation = useLoadingAnimation(isLoading || false);\n  if (isLoading == null) {\n    return children;\n  }\n\n  let childRef =\n    'ref' in children && !Object.getOwnPropertyDescriptor(children, 'ref')?.get\n      ? (children.ref as any)\n      : children.props.ref;\n  return (\n    <SkeletonContext.Provider value={null}>\n      {isLoading\n        ? cloneElement(children, {\n            ref: mergeRefs(childRef, animation),\n            className: (children.props.className || '') + ' ' + loadingStyle,\n            // @ts-ignore - compatibility with React < 19\n            inert: inertValue(true)\n          })\n        : children}\n    </SkeletonContext.Provider>\n  );\n}\n\n// Adds default border radius around icons when displayed in a skeleton.\nexport function useSkeletonIcon(styles: StyleString): StyleString {\n  let isSkeleton = useContext(SkeletonContext);\n  if (isSkeleton) {\n    return mergeStyles(style({borderRadius: 'sm'}), styles);\n  }\n  return styles || ('' as StyleString);\n}\n"],"names":[],"version":3,"file":"Skeleton.cjs.map"}

package/icons/Skeleton.css

@@ -12,28 +12,28 @@
 }
 
 @layer _.a {
-  .pw131 {
+  .pw15 {
     color: #0000;
   }
 
-  ._ma131 {
+  ._ma15 {
     -webkit-box-decoration-break: clone;
     box-decoration-break: clone;
   }
 
-  .oa131 {
+  .oa15 {
     border-start-start-radius: .25rem;
   }
 
-  .na131 {
+  .na15 {
     border-start-end-radius: .25rem;
   }
 
-  .ka131 {
+  .ka15 {
     border-end-start-radius: .25rem;
   }
 
-  .ja131 {
+  .ja15 {
     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 + " pw15 _ma15 oa15 na15 ka15 ja15",
         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)(" oa15 na15 ka15 ja15", styles);
     return styles || '';
 }
 

package/icons/Skeleton.mjs.map

@@ -1 +1 @@
-{"mappings":";;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;AAqBM,SAAS,0CAAoB,WAAoB;IACtD,IAAI,eAAe,CAAA,GAAA,aAAK,EAAoB;IAC5C,IAAI,eAAe,CAAA,GAAA,wCAAY,EAAE;IACjC,OAAO,CAAA,GAAA,kBAAU,EACf,CAAC;QACC,IACE,eACA,CAAC,aAAa,OAAO,IACrB,WACA,CAAC,gBACD,OAAO,QAAQ,OAAO,KAAK,YAC3B;YACA,iEAAiE;YACjE,2EAA2E;YAC3E,aAAa,OAAO,GAAG,QAAQ,OAAO,CACpC;gBAAC;oBAAC,oBAAoB;gBAAM;gBAAG;oBAAC,oBAAoB;gBAAI;aAAE,EAC1D;gBACE,UAAU;gBACV,YAAY;gBACZ,QAAQ;YACV;YAEF,aAAa,OAAO,CAAC,SAAS,GAAG;QACnC,OAAO,IAAI,CAAC,eAAe,aAAa,OAAO,EAAE;YAC/C,aAAa,OAAO,CAAC,MAAM;YAC3B,aAAa,OAAO,GAAG;QACzB;IACF,GACA;QAAC;QAAa;KAAa;AAE/B;AASO,MAAM,0DAAkB,CAAA,GAAA,oBAAY,EAAkB;AACtD,SAAS;IACd,OAAO,CAAA,GAAA,iBAAS,EAAE,8CAAoB;AACxC;AAUO,SAAS,0CAAS,YAAC,QAAQ,aAAE,SAAS,EAAgB;IAC3D,iDAAiD;IACjD,qBAAO,gBAAC,0CAAgB,QAAQ;QAAC,OAAO;kBAAY;;AACtD;AAEO,MAAM,sDASV,qEAAqE;AAEjE,SAAS,0CACd,QAAmB,EACnB,KAAgC;IAEhC,IAAI,aAAa,CAAA,GAAA,iBAAS,EAAE;IAC5B,IAAI,YAAY;QACd,yBAAW,gBAAC;sBAAc;;QAC1B,QAAQ;YACN,GAAG,KAAK;YACR,8DAA8D;YAC9D,2EAA2E;YAC3E,qBAAqB;QACvB;IACF;IACA,OAAO;QAAC;QAAU;KAAM;AAC1B;AAGO,SAAS,0CAAa,YAAC,QAAQ,EAAwB;IAC5D,qBACE,gBAAC;QACC,6CAA6C;QAC7C,OAAO,CAAA,GAAA,iBAAS,EAAE;QAClB,KAAK,0CAAoB;QACzB,WACE;kBAOD;;AAGP;AAGO,SAAS,0CAAgB,YAAC,QAAQ,EAA8B;IACrE,IAAI,YAAY,CAAA,GAAA,iBAAS,EAAE;IAC3B,IAAI,YAAY,0CAAoB,aAAa;IACjD,IAAI,aAAa,MACf,OAAO;IAGT,IAAI,WACF,SAAS,YAAY,CAAC,OAAO,wBAAwB,CAAC,UAAU,QAAQ,MACnE,SAAS,GAAG,GACb,SAAS,KAAK,CAAC,GAAG;IACxB,qBACE,gBAAC,0CAAgB,QAAQ;QAAC,OAAO;kBAC9B,0BACG,CAAA,GAAA,mBAAW,EAAE,UAAU;YACrB,KAAK,CAAA,GAAA,gBAAQ,EAAE,UAAU;YACzB,WAAW,AAAC,CAAA,SAAS,KAAK,CAAC,SAAS,IAAI,EAAC,IAAK,MAAM;YACpD,6CAA6C;YAC7C,OAAO,CAAA,GAAA,iBAAS,EAAE;QACpB,KACA;;AAGV;AAGO,SAAS,0CAAgB,MAAmB;IACjD,IAAI,aAAa,CAAA,GAAA,iBAAS,EAAE;IAC5B,IAAI,YACF,OAAO,CAAA,GAAA,yCAAU,8BAA+B;IAElD,OAAO,UAAW;AACpB","sources":["packages/@react-spectrum/s2/src/Skeleton.tsx"],"sourcesContent":["/*\n * Copyright 2024 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {\n  cloneElement,\n  createContext,\n  CSSProperties,\n  ReactElement,\n  ReactNode,\n  Ref,\n  useCallback,\n  useContext,\n  useRef\n} from 'react';\nimport {color, style} from '../style' with {type: 'macro'};\nimport {css} from '../style/style-macro' with {type: 'macro'};\nimport {inertValue} from 'react-aria/private/utils/inertValue';\nimport {mergeRefs} from 'react-aria/mergeRefs';\nimport {mergeStyles} from '../style/runtime';\nimport {StyleString} from '../style/types';\nimport {useMediaQuery} from './useMediaQuery';\n\nexport function useLoadingAnimation(isAnimating: boolean): (element: HTMLElement | null) => void {\n  let animationRef = useRef<Animation | null>(null);\n  let reduceMotion = useMediaQuery('(prefers-reduced-motion: reduce)');\n  return useCallback(\n    (element: HTMLElement | null) => {\n      if (\n        isAnimating &&\n        !animationRef.current &&\n        element &&\n        !reduceMotion &&\n        typeof element.animate === 'function'\n      ) {\n        // Use web animation API instead of CSS animations so that we can\n        // synchronize it between all loading elements on the page (via startTime).\n        animationRef.current = element.animate(\n          [{backgroundPosition: '100%'}, {backgroundPosition: '0%'}],\n          {\n            duration: 2000,\n            iterations: Infinity,\n            easing: 'ease-in-out'\n          }\n        );\n        animationRef.current.startTime = 0;\n      } else if (!isAnimating && animationRef.current) {\n        animationRef.current.cancel();\n        animationRef.current = null;\n      }\n    },\n    [isAnimating, reduceMotion]\n  );\n}\n\nexport type SkeletonElement = ReactElement<{\n  children: ReactNode;\n  className?: string;\n  ref?: Ref<HTMLElement>;\n  inert?: boolean | 'true';\n}>;\n\nexport const SkeletonContext = createContext<boolean | null>(null);\nexport function useIsSkeleton(): boolean {\n  return useContext(SkeletonContext) || false;\n}\n\nexport interface SkeletonProps {\n  children: ReactNode;\n  isLoading: boolean;\n}\n\n/**\n * A Skeleton wraps around content to render it as a placeholder.\n */\nexport function Skeleton({children, isLoading}: SkeletonProps): ReactNode {\n  // Disable all form components inside a skeleton.\n  return <SkeletonContext.Provider value={isLoading}>{children}</SkeletonContext.Provider>;\n}\n\nexport const loadingStyle = css(\n  `\n  background-image: linear-gradient(to right, ${color('gray-100')} 33%, light-dark(${color('gray-25')}, ${color('gray-300')}), ${color('gray-100')} 66%);\n  background-size: 300%;\n  * {\n    visibility: hidden;\n  }\n`,\n  'L'\n); // add to a separate layer so it overrides default style macro styles\n\nexport function useSkeletonText(\n  children: ReactNode,\n  style: CSSProperties | undefined\n): [ReactNode, CSSProperties | undefined] {\n  let isSkeleton = useContext(SkeletonContext);\n  if (isSkeleton) {\n    children = <SkeletonText>{children}</SkeletonText>;\n    style = {\n      ...style,\n      // This ensures the ellipsis on truncated text is also hidden.\n      // -webkit-text-fill-color overrides any `color` property that is also set.\n      WebkitTextFillColor: 'transparent'\n    };\n  }\n  return [children, style];\n}\n\n// Rendered inside <Text> to create skeleton line boxes via box-decoration-break.\nexport function SkeletonText({children}: {children: ReactNode}): ReactNode {\n  return (\n    <span\n      // @ts-ignore - compatibility with React < 19\n      inert={inertValue(true)}\n      ref={useLoadingAnimation(true)}\n      className={\n        loadingStyle +\n        style({\n          color: 'transparent',\n          boxDecorationBreak: 'clone',\n          borderRadius: 'sm'\n        })\n      }>\n      {children}\n    </span>\n  );\n}\n\n// Clones the child element and displays it with skeleton styling.\nexport function SkeletonWrapper({children}: {children: SkeletonElement}): ReactNode {\n  let isLoading = useContext(SkeletonContext);\n  let animation = useLoadingAnimation(isLoading || false);\n  if (isLoading == null) {\n    return children;\n  }\n\n  let childRef =\n    'ref' in children && !Object.getOwnPropertyDescriptor(children, 'ref')?.get\n      ? (children.ref as any)\n      : children.props.ref;\n  return (\n    <SkeletonContext.Provider value={null}>\n      {isLoading\n        ? cloneElement(children, {\n            ref: mergeRefs(childRef, animation),\n            className: (children.props.className || '') + ' ' + loadingStyle,\n            // @ts-ignore - compatibility with React < 19\n            inert: inertValue(true)\n          })\n        : children}\n    </SkeletonContext.Provider>\n  );\n}\n\n// Adds default border radius around icons when displayed in a skeleton.\nexport function useSkeletonIcon(styles: StyleString): StyleString {\n  let isSkeleton = useContext(SkeletonContext);\n  if (isSkeleton) {\n    return mergeStyles(style({borderRadius: 'sm'}), styles);\n  }\n  return styles || ('' as StyleString);\n}\n"],"names":[],"version":3,"file":"Skeleton.mjs.map"}
+{"mappings":";;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;AAqBM,SAAS,0CAAoB,WAAoB;IACtD,IAAI,eAAe,CAAA,GAAA,aAAK,EAAoB;IAC5C,IAAI,eAAe,CAAA,GAAA,wCAAY,EAAE;IACjC,OAAO,CAAA,GAAA,kBAAU,EACf,CAAC;QACC,IACE,eACA,CAAC,aAAa,OAAO,IACrB,WACA,CAAC,gBACD,OAAO,QAAQ,OAAO,KAAK,YAC3B;YACA,iEAAiE;YACjE,2EAA2E;YAC3E,aAAa,OAAO,GAAG,QAAQ,OAAO,CACpC;gBAAC;oBAAC,oBAAoB;gBAAM;gBAAG;oBAAC,oBAAoB;gBAAI;aAAE,EAC1D;gBACE,UAAU;gBACV,YAAY;gBACZ,QAAQ;YACV;YAEF,aAAa,OAAO,CAAC,SAAS,GAAG;QACnC,OAAO,IAAI,CAAC,eAAe,aAAa,OAAO,EAAE;YAC/C,aAAa,OAAO,CAAC,MAAM;YAC3B,aAAa,OAAO,GAAG;QACzB;IACF,GACA;QAAC;QAAa;KAAa;AAE/B;AASO,MAAM,0DAAkB,CAAA,GAAA,oBAAY,EAAkB;AACtD,SAAS;IACd,OAAO,CAAA,GAAA,iBAAS,EAAE,8CAAoB;AACxC;AAUO,SAAS,0CAAS,YAAC,QAAQ,aAAE,SAAS,EAAgB;IAC3D,iDAAiD;IACjD,qBAAO,gBAAC,0CAAgB,QAAQ;QAAC,OAAO;kBAAY;;AACtD;AAEO,MAAM,sDASV,qEAAqE;AAEjE,SAAS,0CACd,QAAmB,EACnB,KAAgC;IAEhC,IAAI,aAAa,CAAA,GAAA,iBAAS,EAAE;IAC5B,IAAI,YAAY;QACd,yBAAW,gBAAC;sBAAc;;QAC1B,QAAQ;YACN,GAAG,KAAK;YACR,8DAA8D;YAC9D,2EAA2E;YAC3E,qBAAqB;QACvB;IACF;IACA,OAAO;QAAC;QAAU;KAAM;AAC1B;AAGO,SAAS,0CAAa,YAAC,QAAQ,EAAwB;IAC5D,qBACE,gBAAC;QACC,6CAA6C;QAC7C,OAAO,CAAA,GAAA,iBAAS,EAAE;QAClB,KAAK,0CAAoB;QACzB,WACE;kBAOD;;AAGP;AAGO,SAAS,0CAAgB,YAAC,QAAQ,EAA8B;IACrE,IAAI,YAAY,CAAA,GAAA,iBAAS,EAAE;IAC3B,IAAI,YAAY,0CAAoB,aAAa;IACjD,IAAI,aAAa,MACf,OAAO;IAGT,IAAI,WACF,SAAS,YAAY,CAAC,OAAO,wBAAwB,CAAC,UAAU,QAAQ,MACnE,SAAS,GAAG,GACb,SAAS,KAAK,CAAC,GAAG;IACxB,qBACE,gBAAC,0CAAgB,QAAQ;QAAC,OAAO;kBAC9B,0BACG,CAAA,GAAA,mBAAW,EAAE,UAAU;YACrB,KAAK,CAAA,GAAA,gBAAQ,EAAE,UAAU;YACzB,WAAW,AAAC,CAAA,SAAS,KAAK,CAAC,SAAS,IAAI,EAAC,IAAK,MAAM;YACpD,6CAA6C;YAC7C,OAAO,CAAA,GAAA,iBAAS,EAAE;QACpB,KACA;;AAGV;AAGO,SAAS,0CAAgB,MAAmB;IACjD,IAAI,aAAa,CAAA,GAAA,iBAAS,EAAE;IAC5B,IAAI,YACF,OAAO,CAAA,GAAA,yCAAU,0BAA+B;IAElD,OAAO,UAAW;AACpB","sources":["packages/@react-spectrum/s2/src/Skeleton.tsx"],"sourcesContent":["/*\n * Copyright 2024 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {\n  cloneElement,\n  createContext,\n  CSSProperties,\n  ReactElement,\n  ReactNode,\n  Ref,\n  useCallback,\n  useContext,\n  useRef\n} from 'react';\nimport {color, style} from '../style' with {type: 'macro'};\nimport {css} from '../style/style-macro' with {type: 'macro'};\nimport {inertValue} from 'react-aria/private/utils/inertValue';\nimport {mergeRefs} from 'react-aria/mergeRefs';\nimport {mergeStyles} from '../style/runtime';\nimport {StyleString} from '../style/types';\nimport {useMediaQuery} from './useMediaQuery';\n\nexport function useLoadingAnimation(isAnimating: boolean): (element: HTMLElement | null) => void {\n  let animationRef = useRef<Animation | null>(null);\n  let reduceMotion = useMediaQuery('(prefers-reduced-motion: reduce)');\n  return useCallback(\n    (element: HTMLElement | null) => {\n      if (\n        isAnimating &&\n        !animationRef.current &&\n        element &&\n        !reduceMotion &&\n        typeof element.animate === 'function'\n      ) {\n        // Use web animation API instead of CSS animations so that we can\n        // synchronize it between all loading elements on the page (via startTime).\n        animationRef.current = element.animate(\n          [{backgroundPosition: '100%'}, {backgroundPosition: '0%'}],\n          {\n            duration: 2000,\n            iterations: Infinity,\n            easing: 'ease-in-out'\n          }\n        );\n        animationRef.current.startTime = 0;\n      } else if (!isAnimating && animationRef.current) {\n        animationRef.current.cancel();\n        animationRef.current = null;\n      }\n    },\n    [isAnimating, reduceMotion]\n  );\n}\n\nexport type SkeletonElement = ReactElement<{\n  children: ReactNode;\n  className?: string;\n  ref?: Ref<HTMLElement>;\n  inert?: boolean | 'true';\n}>;\n\nexport const SkeletonContext = createContext<boolean | null>(null);\nexport function useIsSkeleton(): boolean {\n  return useContext(SkeletonContext) || false;\n}\n\nexport interface SkeletonProps {\n  children: ReactNode;\n  isLoading: boolean;\n}\n\n/**\n * A Skeleton wraps around content to render it as a placeholder.\n */\nexport function Skeleton({children, isLoading}: SkeletonProps): ReactNode {\n  // Disable all form components inside a skeleton.\n  return <SkeletonContext.Provider value={isLoading}>{children}</SkeletonContext.Provider>;\n}\n\nexport const loadingStyle = css(\n  `\n  background-image: linear-gradient(to right, ${color('gray-100')} 33%, light-dark(${color('gray-25')}, ${color('gray-300')}), ${color('gray-100')} 66%);\n  background-size: 300%;\n  * {\n    visibility: hidden;\n  }\n`,\n  'L'\n); // add to a separate layer so it overrides default style macro styles\n\nexport function useSkeletonText(\n  children: ReactNode,\n  style: CSSProperties | undefined\n): [ReactNode, CSSProperties | undefined] {\n  let isSkeleton = useContext(SkeletonContext);\n  if (isSkeleton) {\n    children = <SkeletonText>{children}</SkeletonText>;\n    style = {\n      ...style,\n      // This ensures the ellipsis on truncated text is also hidden.\n      // -webkit-text-fill-color overrides any `color` property that is also set.\n      WebkitTextFillColor: 'transparent'\n    };\n  }\n  return [children, style];\n}\n\n// Rendered inside <Text> to create skeleton line boxes via box-decoration-break.\nexport function SkeletonText({children}: {children: ReactNode}): ReactNode {\n  return (\n    <span\n      // @ts-ignore - compatibility with React < 19\n      inert={inertValue(true)}\n      ref={useLoadingAnimation(true)}\n      className={\n        loadingStyle +\n        style({\n          color: 'transparent',\n          boxDecorationBreak: 'clone',\n          borderRadius: 'sm'\n        })\n      }>\n      {children}\n    </span>\n  );\n}\n\n// Clones the child element and displays it with skeleton styling.\nexport function SkeletonWrapper({children}: {children: SkeletonElement}): ReactNode {\n  let isLoading = useContext(SkeletonContext);\n  let animation = useLoadingAnimation(isLoading || false);\n  if (isLoading == null) {\n    return children;\n  }\n\n  let childRef =\n    'ref' in children && !Object.getOwnPropertyDescriptor(children, 'ref')?.get\n      ? (children.ref as any)\n      : children.props.ref;\n  return (\n    <SkeletonContext.Provider value={null}>\n      {isLoading\n        ? cloneElement(children, {\n            ref: mergeRefs(childRef, animation),\n            className: (children.props.className || '') + ' ' + loadingStyle,\n            // @ts-ignore - compatibility with React < 19\n            inert: inertValue(true)\n          })\n        : children}\n    </SkeletonContext.Provider>\n  );\n}\n\n// Adds default border radius around icons when displayed in a skeleton.\nexport function useSkeletonIcon(styles: StyleString): StyleString {\n  let isSkeleton = useContext(SkeletonContext);\n  if (isSkeleton) {\n    return mergeStyles(style({borderRadius: 'sm'}), styles);\n  }\n  return styles || ('' as StyleString);\n}\n"],"names":[],"version":3,"file":"Skeleton.mjs.map"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-spectrum/s2",
-  "version": "1.4.0",
+  "version": "1.5.0",
   "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": "1c84a49a1faf50b571c84e00bcf9c60b22ddd03e"
 }

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';

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';