@pathscale/ui 1.1.79 → 1.1.81

package/dist/motion/solid/AnimatedCollapse.js

@@ -0,0 +1,166 @@
+import * as __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__ from "solid-js/web";
+import * as __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__ from "solid-js";
+import * as __WEBPACK_EXTERNAL_MODULE__driver_js_6225697c__ from "../driver.js";
+import * as __WEBPACK_EXTERNAL_MODULE__easing_js_1a315be3__ from "../easing.js";
+import * as __WEBPACK_EXTERNAL_MODULE__reduced_motion_js_a60363ae__ from "../reduced-motion.js";
+var _tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<div><div>");
+const nextCollapsePhase = (prev, open)=>{
+    if (open) return "open" === prev || "opening" === prev ? prev : "opening";
+    return "closed" === prev || "closing" === prev ? prev : "closing";
+};
+const computeCollapseStyle = (phase, heightPx, animateOpacity)=>{
+    const style = {
+        overflow: "hidden"
+    };
+    if ("closed" === phase) {
+        style.height = "0px";
+        if (animateOpacity) style.opacity = 0;
+        return style;
+    }
+    if ("open" === phase) {
+        if (animateOpacity) style.opacity = 1;
+        style.overflow = "visible";
+        return style;
+    }
+    if (null !== heightPx) style.height = `${heightPx}px`;
+    return style;
+};
+const DEFAULT_DURATION = 0.24;
+const AnimatedCollapse = (props)=>{
+    const [phase, setPhase] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createSignal)(props.open ? "open" : "closed");
+    const [heightPx, setHeightPx] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createSignal)(props.open ? null : 0);
+    const [opacity, setOpacity] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createSignal)(props.open ? 1 : 0);
+    let contentEl;
+    let activeControl = null;
+    let resizeObserver = null;
+    const stopActive = ()=>{
+        activeControl?.stop();
+        activeControl = null;
+    };
+    const measure = ()=>{
+        if (!contentEl) return 0;
+        return contentEl.scrollHeight;
+    };
+    const animateOpacity = ()=>false !== props.animateOpacity;
+    const setupObserver = ()=>{
+        if ("undefined" == typeof ResizeObserver) return;
+        if (!contentEl || resizeObserver) return;
+        resizeObserver = new ResizeObserver(()=>{});
+        resizeObserver.observe(contentEl);
+    };
+    const teardownObserver = ()=>{
+        resizeObserver?.disconnect();
+        resizeObserver = null;
+    };
+    const runAnimation = (target, fromHeight, toHeight)=>{
+        stopActive();
+        const reduce = props.reduceMotion ?? (0, __WEBPACK_EXTERNAL_MODULE__reduced_motion_js_a60363ae__.prefersReducedMotion)();
+        if (reduce) {
+            setHeightPx(toHeight);
+            if (animateOpacity()) setOpacity("opening" === target ? 1 : 0);
+            finish(target);
+            return;
+        }
+        const duration = (props.duration ?? DEFAULT_DURATION) * 1000;
+        const ease = (0, __WEBPACK_EXTERNAL_MODULE__easing_js_1a315be3__.resolveEase)("ease-out");
+        const driver = (0, __WEBPACK_EXTERNAL_MODULE__driver_js_6225697c__.getMotionDriver)();
+        const heightControl = driver({
+            from: fromHeight,
+            to: toHeight,
+            duration,
+            ease,
+            onUpdate: (value)=>setHeightPx(value),
+            onComplete: ()=>finish(target)
+        });
+        if (animateOpacity()) {
+            const fromOpacity = "opening" === target ? 0 : 1;
+            const toOpacity = "opening" === target ? 1 : 0;
+            const opacityControl = driver({
+                from: fromOpacity,
+                to: toOpacity,
+                duration,
+                ease,
+                onUpdate: (value)=>setOpacity(value)
+            });
+            activeControl = {
+                stop: ()=>{
+                    heightControl.stop();
+                    opacityControl.stop();
+                }
+            };
+        } else {
+            setOpacity(1);
+            activeControl = heightControl;
+        }
+    };
+    const finish = (target)=>{
+        if ("opening" === target) {
+            setPhase("open");
+            setHeightPx(null);
+            if (animateOpacity()) setOpacity(1);
+        } else if ("closing" === target) {
+            setPhase("closed");
+            setHeightPx(0);
+            if (animateOpacity()) setOpacity(0);
+            teardownObserver();
+        }
+    };
+    (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createEffect)(()=>{
+        const open = props.open;
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.untrack)(()=>{
+            const target = nextCollapsePhase(phase(), open);
+            if (target === phase()) return;
+            setPhase(target);
+            if ("opening" === target) requestAnimationFrame(()=>{
+                const to = measure();
+                setupObserver();
+                runAnimation("opening", 0, to);
+            });
+            else if ("closing" === target) {
+                const from = measure();
+                setHeightPx(from);
+                requestAnimationFrame(()=>runAnimation("closing", from, 0));
+            }
+        });
+    });
+    (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.onCleanup)(()=>{
+        stopActive();
+        teardownObserver();
+    });
+    const shouldRender = ()=>props.unmountOnExit ? "closed" !== phase() : true;
+    const wrapperStyle = ()=>computeCollapseStyle(phase(), heightPx(), animateOpacity());
+    return (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.Show, {
+        get when () {
+            return shouldRender();
+        },
+        get children () {
+            var _el$ = _tmpl$(), _el$2 = _el$.firstChild;
+            var _ref$ = contentEl;
+            "function" == typeof _ref$ ? (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.use)(_ref$, _el$2) : contentEl = _el$2;
+            (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$2, ()=>props.children);
+            (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.effect)((_p$)=>{
+                var _v$ = props.id, _v$2 = props.class, _v$3 = {
+                    ...wrapperStyle(),
+                    ...animateOpacity() && "open" !== phase() ? {
+                        opacity: opacity()
+                    } : {}
+                }, _v$4 = "closed" === phase() ? true : void 0, _v$5 = props.contentClass;
+                _v$ !== _p$.e && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$, "id", _p$.e = _v$);
+                _v$2 !== _p$.t && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.className)(_el$, _p$.t = _v$2);
+                _p$.a = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.style)(_el$, _v$3, _p$.a);
+                _v$4 !== _p$.o && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$, "aria-hidden", _p$.o = _v$4);
+                _v$5 !== _p$.i && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.className)(_el$2, _p$.i = _v$5);
+                return _p$;
+            }, {
+                e: void 0,
+                t: void 0,
+                a: void 0,
+                o: void 0,
+                i: void 0
+            });
+            return _el$;
+        }
+    });
+};
+const solid_AnimatedCollapse = AnimatedCollapse;
+export { AnimatedCollapse, computeCollapseStyle, solid_AnimatedCollapse as default, nextCollapsePhase };

package/dist/motion/solid/Presence.d.ts

@@ -0,0 +1,30 @@
+import { type JSX } from "solid-js";
+export type PresenceRenderProp = (isExiting: () => boolean, onExitComplete: () => void) => JSX.Element;
+export interface PresenceProps {
+    /** Controls whether the child should be mounted/visible. */
+    when: boolean;
+    /**
+     * Render function. Receives an `isExiting` accessor (pass through to
+     * MotionDiv's `isExiting`) and an `onExitComplete` callback that must be
+     * wired to MotionDiv (or invoked manually when the exit animation ends).
+     */
+    children: PresenceRenderProp;
+    /**
+     * Fallback timeout (ms) after which Presence force-unmounts the child if
+     * `onExitComplete` was never called. Prevents stuck-exit states. Default 800.
+     */
+    exitTimeout?: number;
+    /** Override for prefers-reduced-motion detection. */
+    reduceMotion?: boolean;
+}
+interface PresenceState {
+    mounted: boolean;
+    isExiting: boolean;
+}
+/**
+ * Pure state transition for Presence. Given the previous state and the next
+ * `when` value, returns the next state. Exposed for unit testing.
+ */
+export declare const nextPresenceState: (prev: PresenceState, when: boolean) => PresenceState;
+export declare const Presence: (props: PresenceProps) => JSX.Element;
+export default Presence;

package/dist/motion/solid/Presence.js

@@ -0,0 +1,65 @@
+import * as __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__ from "solid-js/web";
+import * as __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__ from "solid-js";
+import * as __WEBPACK_EXTERNAL_MODULE__reduced_motion_js_a60363ae__ from "../reduced-motion.js";
+const nextPresenceState = (prev, when)=>{
+    if (when) return {
+        mounted: true,
+        isExiting: false
+    };
+    if (prev.mounted && !prev.isExiting) return {
+        mounted: true,
+        isExiting: true
+    };
+    return prev.mounted ? prev : {
+        mounted: false,
+        isExiting: false
+    };
+};
+const DEFAULT_EXIT_TIMEOUT = 800;
+const Presence_Presence = (props)=>{
+    const [state, setState] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createSignal)({
+        mounted: props.when,
+        isExiting: false
+    });
+    let exitTimer = null;
+    const clearTimer = ()=>{
+        if (null !== exitTimer) {
+            clearTimeout(exitTimer);
+            exitTimer = null;
+        }
+    };
+    const finishExit = ()=>{
+        clearTimer();
+        setState((prev)=>prev.isExiting ? {
+                mounted: false,
+                isExiting: false
+            } : prev);
+    };
+    (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createEffect)(()=>{
+        const when = props.when;
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.untrack)(()=>{
+            const next = nextPresenceState(state(), when);
+            if (next === state()) return;
+            setState(next);
+            if (next.isExiting) {
+                const reduce = props.reduceMotion ?? (0, __WEBPACK_EXTERNAL_MODULE__reduced_motion_js_a60363ae__.prefersReducedMotion)();
+                if (reduce) return void queueMicrotask(finishExit);
+                clearTimer();
+                const ms = props.exitTimeout ?? DEFAULT_EXIT_TIMEOUT;
+                exitTimer = setTimeout(finishExit, ms);
+            } else clearTimer();
+        });
+    });
+    (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.onCleanup)(clearTimer);
+    const isExiting = ()=>state().isExiting;
+    return (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.Show, {
+        get when () {
+            return state().mounted;
+        },
+        get children () {
+            return props.children(isExiting, finishExit);
+        }
+    });
+};
+const Presence = Presence_Presence;
+export { Presence_Presence as Presence, Presence as default, nextPresenceState };

package/dist/motion/solid/index.d.ts

@@ -1,2 +1,6 @@
 export { default as MotionDiv } from "./MotionDiv";
 export type { MotionDivProps } from "./MotionDiv";
+export { default as Presence, nextPresenceState } from "./Presence";
+export type { PresenceProps, PresenceRenderProp } from "./Presence";
+export { default as AnimatedCollapse, nextCollapsePhase, computeCollapseStyle, } from "./AnimatedCollapse";
+export type { AnimatedCollapseProps } from "./AnimatedCollapse";

package/dist/motion/solid/index.js

@@ -1,3 +1,10 @@
 import * as __WEBPACK_EXTERNAL_MODULE__MotionDiv_js_142518a8__ from "./MotionDiv.js";
+import * as __WEBPACK_EXTERNAL_MODULE__Presence_js_c85f5127__ from "./Presence.js";
+import * as __WEBPACK_EXTERNAL_MODULE__AnimatedCollapse_js_e9eaa465__ from "./AnimatedCollapse.js";
+var __webpack_exports__AnimatedCollapse = __WEBPACK_EXTERNAL_MODULE__AnimatedCollapse_js_e9eaa465__["default"];
 var __webpack_exports__MotionDiv = __WEBPACK_EXTERNAL_MODULE__MotionDiv_js_142518a8__["default"];
-export { __webpack_exports__MotionDiv as MotionDiv };
+var __webpack_exports__Presence = __WEBPACK_EXTERNAL_MODULE__Presence_js_c85f5127__["default"];
+var __webpack_exports__computeCollapseStyle = __WEBPACK_EXTERNAL_MODULE__AnimatedCollapse_js_e9eaa465__.computeCollapseStyle;
+var __webpack_exports__nextCollapsePhase = __WEBPACK_EXTERNAL_MODULE__AnimatedCollapse_js_e9eaa465__.nextCollapsePhase;
+var __webpack_exports__nextPresenceState = __WEBPACK_EXTERNAL_MODULE__Presence_js_c85f5127__.nextPresenceState;
+export { __webpack_exports__AnimatedCollapse as AnimatedCollapse, __webpack_exports__MotionDiv as MotionDiv, __webpack_exports__Presence as Presence, __webpack_exports__computeCollapseStyle as computeCollapseStyle, __webpack_exports__nextCollapsePhase as nextCollapsePhase, __webpack_exports__nextPresenceState as nextPresenceState };