UNPKG

autumn-js

Version:
152 lines (147 loc) 5.5 kB
"use client"; import { useLayoutEffect2 } from "./chunk-4XU63W7I.mjs"; import { useComposedRefs } from "./chunk-DXHYWJOY.mjs"; // ../node_modules/.pnpm/@radix-ui+react-id@1.1.1_@types+react@19.1.10_react@19.1.1/node_modules/@radix-ui/react-id/dist/index.mjs import * as React from "react"; var useReactId = React[" useId ".trim().toString()] || (() => void 0); var count = 0; function useId(deterministicId) { const [id, setId] = React.useState(useReactId()); useLayoutEffect2(() => { if (!deterministicId) setId((reactId) => reactId ?? String(count++)); }, [deterministicId]); return deterministicId || (id ? `radix-${id}` : ""); } // ../node_modules/.pnpm/@radix-ui+react-presence@1.1.4_@types+react-dom@19.1.9_@types+react@19.1.10__@types+react@19._m54kvncv6il6p2flbkd4qzvije/node_modules/@radix-ui/react-presence/dist/index.mjs import * as React2 from "react"; import * as React3 from "react"; function useStateMachine(initialState, machine) { return React3.useReducer((state, event) => { const nextState = machine[state][event]; return nextState ?? state; }, initialState); } var Presence = (props) => { const { present, children } = props; const presence = usePresence(present); const child = typeof children === "function" ? children({ present: presence.isPresent }) : React2.Children.only(children); const ref = useComposedRefs(presence.ref, getElementRef(child)); const forceMount = typeof children === "function"; return forceMount || presence.isPresent ? React2.cloneElement(child, { ref }) : null; }; Presence.displayName = "Presence"; function usePresence(present) { const [node, setNode] = React2.useState(); const stylesRef = React2.useRef(null); const prevPresentRef = React2.useRef(present); const prevAnimationNameRef = React2.useRef("none"); const initialState = present ? "mounted" : "unmounted"; const [state, send] = useStateMachine(initialState, { mounted: { UNMOUNT: "unmounted", ANIMATION_OUT: "unmountSuspended" }, unmountSuspended: { MOUNT: "mounted", ANIMATION_END: "unmounted" }, unmounted: { MOUNT: "mounted" } }); React2.useEffect(() => { const currentAnimationName = getAnimationName(stylesRef.current); prevAnimationNameRef.current = state === "mounted" ? currentAnimationName : "none"; }, [state]); useLayoutEffect2(() => { const styles = stylesRef.current; const wasPresent = prevPresentRef.current; const hasPresentChanged = wasPresent !== present; if (hasPresentChanged) { const prevAnimationName = prevAnimationNameRef.current; const currentAnimationName = getAnimationName(styles); if (present) { send("MOUNT"); } else if (currentAnimationName === "none" || styles?.display === "none") { send("UNMOUNT"); } else { const isAnimating = prevAnimationName !== currentAnimationName; if (wasPresent && isAnimating) { send("ANIMATION_OUT"); } else { send("UNMOUNT"); } } prevPresentRef.current = present; } }, [present, send]); useLayoutEffect2(() => { if (node) { let timeoutId; const ownerWindow = node.ownerDocument.defaultView ?? window; const handleAnimationEnd = (event) => { const currentAnimationName = getAnimationName(stylesRef.current); const isCurrentAnimation = currentAnimationName.includes(event.animationName); if (event.target === node && isCurrentAnimation) { send("ANIMATION_END"); if (!prevPresentRef.current) { const currentFillMode = node.style.animationFillMode; node.style.animationFillMode = "forwards"; timeoutId = ownerWindow.setTimeout(() => { if (node.style.animationFillMode === "forwards") { node.style.animationFillMode = currentFillMode; } }); } } }; const handleAnimationStart = (event) => { if (event.target === node) { prevAnimationNameRef.current = getAnimationName(stylesRef.current); } }; node.addEventListener("animationstart", handleAnimationStart); node.addEventListener("animationcancel", handleAnimationEnd); node.addEventListener("animationend", handleAnimationEnd); return () => { ownerWindow.clearTimeout(timeoutId); node.removeEventListener("animationstart", handleAnimationStart); node.removeEventListener("animationcancel", handleAnimationEnd); node.removeEventListener("animationend", handleAnimationEnd); }; } else { send("ANIMATION_END"); } }, [node, send]); return { isPresent: ["mounted", "unmountSuspended"].includes(state), ref: React2.useCallback((node2) => { stylesRef.current = node2 ? getComputedStyle(node2) : null; setNode(node2); }, []) }; } function getAnimationName(styles) { return styles?.animationName || "none"; } function getElementRef(element) { let getter = Object.getOwnPropertyDescriptor(element.props, "ref")?.get; let mayWarn = getter && "isReactWarning" in getter && getter.isReactWarning; if (mayWarn) { return element.ref; } getter = Object.getOwnPropertyDescriptor(element, "ref")?.get; mayWarn = getter && "isReactWarning" in getter && getter.isReactWarning; if (mayWarn) { return element.props.ref; } return element.props.ref || element.ref; } export { useId, Presence };