reshaped 4.2.0-canary.0 → 4.2.0

package/dist/components/_private/Expandable/Expandable.js

@@ -1,58 +0,0 @@
-"use client";
-import { jsx as _jsx } from "react/jsx-runtime";
-import React from "react";
-import { classNames } from "@reshaped/utilities";
-import useIsomorphicLayoutEffect from "../../../hooks/useIsomorphicLayoutEffect";
-import { onNextFrame, checkTransitions } from "../../../utilities/animation";
-import s from "./Expandable.module.css";
-const Expandable = (props) => {
-    const { children, active, attributes } = props;
-    const rootRef = React.useRef(null);
-    const mountedRef = React.useRef(false);
-    const [animatedHeight, setAnimatedHeight] = React.useState(active ? "auto" : null);
-    const contentClassNames = classNames(s.root, animatedHeight !== null && animatedHeight !== 0 && s["--visible"], mountedRef.current && animatedHeight !== "auto" && s["--animated"]);
-    const handleTransitionEnd = (e) => {
-        if (e.propertyName !== "height")
-            return;
-        setAnimatedHeight(active ? "auto" : null);
-    };
-    // Avoid animations happening if component is active by default
-    // onNextFrame lets us wait for the component to render first
-    React.useEffect(() => {
-        onNextFrame(() => {
-            mountedRef.current = true;
-        });
-    }, []);
-    useIsomorphicLayoutEffect(() => {
-        const rootEl = rootRef.current;
-        if (!rootEl || !mountedRef.current)
-            return;
-        if (!checkTransitions()) {
-            setAnimatedHeight(active ? "auto" : null);
-            return;
-        }
-        if (active) {
-            rootEl.style.height = "auto";
-            requestAnimationFrame(() => {
-                const targetHeight = rootEl.clientHeight;
-                rootEl.style.height = "0";
-                requestAnimationFrame(() => {
-                    setAnimatedHeight(targetHeight);
-                });
-            });
-        }
-        else {
-            rootEl.style.height = `${rootEl.clientHeight}px`;
-            requestAnimationFrame(() => {
-                setAnimatedHeight(0);
-            });
-        }
-    }, [active]);
-    return (_jsx("div", { ...attributes, className: contentClassNames, ref: rootRef, style: animatedHeight !== null
-            ? { height: animatedHeight, overflow: animatedHeight === "auto" ? "visible" : undefined }
-            : undefined, onTransitionEnd: handleTransitionEnd, 
-        // oxlint-disable-next-line jsx-a11y/prefer-tag-over-role
-        role: "region", hidden: !active && animatedHeight === null, children: children }));
-};
-Expandable.displayName = "Expandable";
-export default Expandable;

package/dist/components/_private/Expandable/Expandable.module.css

@@ -1 +0,0 @@
-.root{overflow:hidden;position:relative;height:0;opacity:0}.root.--visible{opacity:1}.root.--animated{transition:height var(--rs-duration-medium) var(--rs-easing-standard),opacity var(--rs-duration-medium) var(--rs-easing-standard)}

package/dist/components/_private/Expandable/Expandable.types.d.ts

@@ -1,7 +0,0 @@
-import React from "react";
-import type { Attributes } from "../../../types/global";
-export type ContentProps = {
-    active?: boolean;
-    children?: React.ReactNode;
-    attributes?: Attributes<"div">;
-};

package/dist/components/_private/Expandable/index.d.ts

@@ -1 +0,0 @@
-export { default } from "./Expandable";