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

Spectrum 2 UI components in React

require("./Skeleton.css");
var $308b180f49d82d28$exports = require("./runtime.cjs");
var $lzdFu$reactjsxruntime = require("react/jsx-runtime");
var $lzdFu$react = require("react");
var $lzdFu$reactariautils = require("@react-aria/utils");
var $lzdFu$reactspectrumutils = require("@react-spectrum/utils");


function $parcel$export(e, n, v, s) {
  Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true});
}

$parcel$export(module.exports, "useLoadingAnimation", () => $5eb75e0c130e0669$export$6b288fe07640c94c);
$parcel$export(module.exports, "SkeletonContext", () => $5eb75e0c130e0669$export$74e166679b1f49ee);
$parcel$export(module.exports, "useIsSkeleton", () => $5eb75e0c130e0669$export$4f8dc7555740235c);
$parcel$export(module.exports, "Skeleton", () => $5eb75e0c130e0669$export$8f31e4c4a37b8e9c);
$parcel$export(module.exports, "loadingStyle", () => $5eb75e0c130e0669$export$d2353276f167b21f);
$parcel$export(module.exports, "useSkeletonText", () => $5eb75e0c130e0669$export$a05a0b8a311cd65f);
$parcel$export(module.exports, "SkeletonWrapper", () => $5eb75e0c130e0669$export$6069cbe61f690103);
$parcel$export(module.exports, "useSkeletonIcon", () => $5eb75e0c130e0669$export$4b7803c08fe9a32b);
/*
 * 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 $5eb75e0c130e0669$export$6b288fe07640c94c(isAnimating) {
    let animationRef = (0, $lzdFu$react.useRef)(null);
    let reduceMotion = (0, $lzdFu$reactspectrumutils.useMediaQuery)('(prefers-reduced-motion: reduce)');
    return (0, $lzdFu$react.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 $5eb75e0c130e0669$export$74e166679b1f49ee = /*#__PURE__*/ (0, $lzdFu$react.createContext)(null);
function $5eb75e0c130e0669$export$4f8dc7555740235c() {
    return (0, $lzdFu$react.useContext)($5eb75e0c130e0669$export$74e166679b1f49ee) || false;
}
function $5eb75e0c130e0669$export$8f31e4c4a37b8e9c({ children: children, isLoading: isLoading }) {
    // Disable all form components inside a skeleton.
    return /*#__PURE__*/ (0, $lzdFu$reactjsxruntime.jsx)($5eb75e0c130e0669$export$74e166679b1f49ee.Provider, {
        value: isLoading,
        children: children
    });
}
const $5eb75e0c130e0669$export$d2353276f167b21f = "bNU3Fb"; // add to a separate layer so it overrides default style macro styles
function $5eb75e0c130e0669$export$a05a0b8a311cd65f(children, style) {
    let isSkeleton = (0, $lzdFu$react.useContext)($5eb75e0c130e0669$export$74e166679b1f49ee);
    if (isSkeleton) {
        children = /*#__PURE__*/ (0, $lzdFu$reactjsxruntime.jsx)($5eb75e0c130e0669$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 $5eb75e0c130e0669$export$cb6ddd830302c2a8({ children: children }) {
    return /*#__PURE__*/ (0, $lzdFu$reactjsxruntime.jsx)("span", {
        // @ts-ignore - compatibility with React < 19
        inert: (0, $lzdFu$reactariautils.inertValue)(true),
        ref: $5eb75e0c130e0669$export$6b288fe07640c94c(true),
        className: $5eb75e0c130e0669$export$d2353276f167b21f + " pw91 _ma91 oa91 na91 ka91 ja91",
        children: children
    });
}
function $5eb75e0c130e0669$export$6069cbe61f690103({ children: children }) {
    let isLoading = (0, $lzdFu$react.useContext)($5eb75e0c130e0669$export$74e166679b1f49ee);
    let animation = $5eb75e0c130e0669$export$6b288fe07640c94c(isLoading || false);
    if (isLoading == null) return children;
    let childRef = 'ref' in children ? children.ref : children.props.ref;
    return /*#__PURE__*/ (0, $lzdFu$reactjsxruntime.jsx)($5eb75e0c130e0669$export$74e166679b1f49ee.Provider, {
        value: null,
        children: isLoading ? /*#__PURE__*/ (0, $lzdFu$react.cloneElement)(children, {
            ref: (0, $lzdFu$reactariautils.mergeRefs)(childRef, animation),
            className: (children.props.className || '') + ' ' + $5eb75e0c130e0669$export$d2353276f167b21f,
            inert: 'true'
        }) : children
    });
}
function $5eb75e0c130e0669$export$4b7803c08fe9a32b(styles) {
    let isSkeleton = (0, $lzdFu$react.useContext)($5eb75e0c130e0669$export$74e166679b1f49ee);
    if (isSkeleton) return (0, $308b180f49d82d28$exports.mergeStyles)(" oa91 na91 ka91 ja91", styles);
    return styles || '';
}


//# sourceMappingURL=Skeleton.cjs.map