@react-spectrum/s2/icons/Skeleton.mjs

Spectrum 2 UI components in React

import "./Skeleton.css";
import {mergeStyles as $feb886035e0d4633$export$e618dc39ac9ad607} from "./runtime.mjs";
import {jsx as $cHM3s$jsx} from "react/jsx-runtime";
import {useRef as $cHM3s$useRef, useCallback as $cHM3s$useCallback, createContext as $cHM3s$createContext, useContext as $cHM3s$useContext, cloneElement as $cHM3s$cloneElement} from "react";
import {inertValue as $cHM3s$inertValue, mergeRefs as $cHM3s$mergeRefs} from "@react-aria/utils";
import {useMediaQuery as $cHM3s$useMediaQuery} from "@react-spectrum/utils";

/*
 * Copyright 2024 Adobe. All rights reserved.
 * This file is licensed to you under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License. You may obtain a copy
 * of the License at http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software distributed under
 * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
 * OF ANY KIND, either express or implied. See the License for the specific language
 * governing permissions and limitations under the License.
 */ 




function $5ad421ec19460c48$export$6b288fe07640c94c(isAnimating) {
    let animationRef = (0, $cHM3s$useRef)(null);
    let reduceMotion = (0, $cHM3s$useMediaQuery)('(prefers-reduced-motion: reduce)');
    return (0, $cHM3s$useCallback)((element)=>{
        if (isAnimating && !animationRef.current && element && !reduceMotion) {
            // Use web animation API instead of CSS animations so that we can
            // synchronize it between all loading elements on the page (via startTime).
            animationRef.current = element.animate([
                {
                    backgroundPosition: '100%'
                },
                {
                    backgroundPosition: '0%'
                }
            ], {
                duration: 2000,
                iterations: Infinity,
                easing: 'ease-in-out'
            });
            animationRef.current.startTime = 0;
        } else if (!isAnimating && animationRef.current) {
            animationRef.current.cancel();
            animationRef.current = null;
        }
    }, [
        isAnimating
    ]);
}
const $5ad421ec19460c48$export$74e166679b1f49ee = /*#__PURE__*/ (0, $cHM3s$createContext)(null);
function $5ad421ec19460c48$export$4f8dc7555740235c() {
    return (0, $cHM3s$useContext)($5ad421ec19460c48$export$74e166679b1f49ee) || false;
}
function $5ad421ec19460c48$export$8f31e4c4a37b8e9c({ children: children, isLoading: isLoading }) {
    // Disable all form components inside a skeleton.
    return /*#__PURE__*/ (0, $cHM3s$jsx)($5ad421ec19460c48$export$74e166679b1f49ee.Provider, {
        value: isLoading,
        children: children
    });
}
const $5ad421ec19460c48$export$d2353276f167b21f = "bNU3Fb"; // add to a separate layer so it overrides default style macro styles
function $5ad421ec19460c48$export$a05a0b8a311cd65f(children, style) {
    let isSkeleton = (0, $cHM3s$useContext)($5ad421ec19460c48$export$74e166679b1f49ee);
    if (isSkeleton) {
        children = /*#__PURE__*/ (0, $cHM3s$jsx)($5ad421ec19460c48$export$cb6ddd830302c2a8, {
            children: children
        });
        style = {
            ...style,
            // This ensures the ellipsis on truncated text is also hidden.
            // -webkit-text-fill-color overrides any `color` property that is also set.
            WebkitTextFillColor: 'transparent'
        };
    }
    return [
        children,
        style
    ];
}
function $5ad421ec19460c48$export$cb6ddd830302c2a8({ children: children }) {
    return /*#__PURE__*/ (0, $cHM3s$jsx)("span", {
        // @ts-ignore - compatibility with React < 19
        inert: (0, $cHM3s$inertValue)(true),
        ref: $5ad421ec19460c48$export$6b288fe07640c94c(true),
        className: $5ad421ec19460c48$export$d2353276f167b21f + " pw91 _ma91 oa91 na91 ka91 ja91",
        children: children
    });
}
function $5ad421ec19460c48$export$6069cbe61f690103({ children: children }) {
    let isLoading = (0, $cHM3s$useContext)($5ad421ec19460c48$export$74e166679b1f49ee);
    let animation = $5ad421ec19460c48$export$6b288fe07640c94c(isLoading || false);
    if (isLoading == null) return children;
    let childRef = 'ref' in children ? children.ref : children.props.ref;
    return /*#__PURE__*/ (0, $cHM3s$jsx)($5ad421ec19460c48$export$74e166679b1f49ee.Provider, {
        value: null,
        children: isLoading ? /*#__PURE__*/ (0, $cHM3s$cloneElement)(children, {
            ref: (0, $cHM3s$mergeRefs)(childRef, animation),
            className: (children.props.className || '') + ' ' + $5ad421ec19460c48$export$d2353276f167b21f,
            inert: 'true'
        }) : children
    });
}
function $5ad421ec19460c48$export$4b7803c08fe9a32b(styles) {
    let isSkeleton = (0, $cHM3s$useContext)($5ad421ec19460c48$export$74e166679b1f49ee);
    if (isSkeleton) return (0, $feb886035e0d4633$export$e618dc39ac9ad607)(" oa91 na91 ka91 ja91", styles);
    return styles || '';
}


export {$5ad421ec19460c48$export$6b288fe07640c94c as useLoadingAnimation, $5ad421ec19460c48$export$74e166679b1f49ee as SkeletonContext, $5ad421ec19460c48$export$4f8dc7555740235c as useIsSkeleton, $5ad421ec19460c48$export$8f31e4c4a37b8e9c as Skeleton, $5ad421ec19460c48$export$d2353276f167b21f as loadingStyle, $5ad421ec19460c48$export$a05a0b8a311cd65f as useSkeletonText, $5ad421ec19460c48$export$cb6ddd830302c2a8 as SkeletonText, $5ad421ec19460c48$export$6069cbe61f690103 as SkeletonWrapper, $5ad421ec19460c48$export$4b7803c08fe9a32b as useSkeletonIcon};
//# sourceMappingURL=Skeleton.mjs.map