@xanui/core 1.2.64 → 1.2.66

package/Transition/index.cjs

@@ -2,27 +2,134 @@
 'use strict';
 
 var tslib = require('tslib');
-var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
-var index = require('../hooks/useTransition/index.cjs');
+var variants = require('./variants.cjs');
+var index$1 = require('../css/index.cjs');
+var index = require('../Document/index.cjs');
+var CSSCacheProvider = require('../css/CSSCacheProvider.cjs');
+var useAnimation = require('../hooks/useAnimation.cjs');
+var oncss = require('oncss');
 
-const TransitionBase = (_a) => {
-    var { children } = _a, options = tslib.__rest(_a, ["children"]);
-    const { props, exited } = index(options);
-    if (exited)
-        return null;
-    const clone = React.Children.only(children);
-    return React.cloneElement(clone, props);
+const getVariant = (rect, variant) => {
+    let fn = typeof variant === 'string' ? variants[variant] : variant;
+    if (!fn)
+        throw new Error(`Transition variant "${variant}" not found.`);
+    return fn(rect);
 };
 function Transition(_a) {
     var { children } = _a, options = tslib.__rest(_a, ["children"]);
-    const [mounted, setMounted] = React.useState(false);
+    let { disableInitialTransition = false, variant = "fade", duration = 400, delay, ease, easing, open, onOpen, onOpened, onClose, onClosed, onState } = options;
+    const endTimer = React.useRef(null);
+    const animId = React.useRef(0);
+    const [rect, setRect] = React.useState();
+    const [isDisableInitial, setIsDisableInitial] = React.useState(disableInitialTransition);
+    const ref = React.useRef(null);
+    const doc = index.useDocument();
+    const cacheId = CSSCacheProvider.useCSSCacheId();
+    let _ease = ease || useAnimation.animationEases[easing] || useAnimation.animationEases.bounce;
+    const style = (obj = {}) => {
+        return index$1.css(obj, { container: doc === null || doc === void 0 ? void 0 : doc.document, cacheId }).classname;
+    };
+    let [cls, setCls] = React.useState(() => {
+        let props = {};
+        if (!isDisableInitial || (isDisableInitial && !open)) {
+            props.opacity = 0;
+            props.pointerEvents = 'none';
+        }
+        return style(props);
+    });
+    // useEffect(() => {
+    //     const node = ref.current
+    //     if (!node) return
+    //     const observer = new ResizeObserver(() => {
+    //         const rect = node.getBoundingClientRect()
+    //         setRect(rect)
+    //     })
+    //     observer.observe(node)
+    //     return () => observer.disconnect()
+    // }, [])
     React.useEffect(() => {
-        setMounted(true);
+        let frame;
+        const measure = () => {
+            const node = ref.current;
+            if (!node) {
+                frame = requestAnimationFrame(measure); // ⬅️ retry next frame
+                return;
+            }
+            const rect = node.getBoundingClientRect();
+            const v = getVariant(rect, variant);
+            if (isDisableInitial) {
+                setCls(style(open ? v.to : v.from));
+            }
+            else {
+                setCls(style(open ? v.from : v.to));
+            }
+            setRect(rect);
+        };
+        frame = requestAnimationFrame(measure);
+        return () => {
+            if (endTimer.current) {
+                clearTimeout(endTimer.current);
+            }
+            cancelAnimationFrame(frame);
+        };
     }, []);
-    if (!mounted)
-        return null;
-    return jsxRuntime.jsx(TransitionBase, Object.assign({}, options, { children: children }));
+    React.useEffect(() => {
+        if (rect) {
+            let _duration = isDisableInitial ? 0 : duration;
+            let _delay = isDisableInitial ? 0 : (delay || 0);
+            if (isDisableInitial) {
+                setIsDisableInitial(false);
+            }
+            const v = getVariant(rect, variant);
+            let _css = open ? v.to : v.from;
+            let _ = Object.assign(Object.assign({}, _css), { transition: Object.keys(_css || {})
+                    .map(k => `${oncss.formatCSSProp(k)} ${_duration}ms ${_ease} ${_delay}ms`)
+                    .join(", "), willChange: Object.keys(_css || {})
+                    .map(oncss.formatCSSProp)
+                    .join(", ") });
+            if (open) {
+                onOpen === null || onOpen === void 0 ? void 0 : onOpen();
+                onState === null || onState === void 0 ? void 0 : onState("open");
+            }
+            else {
+                onClose === null || onClose === void 0 ? void 0 : onClose();
+                onState === null || onState === void 0 ? void 0 : onState("close");
+            }
+            setCls(style(_));
+            if (endTimer.current) {
+                clearTimeout(endTimer.current);
+            }
+            animId.current++;
+            const id = animId.current;
+            endTimer.current = setTimeout(() => {
+                if (id !== animId.current)
+                    return;
+                if (open) {
+                    onOpened === null || onOpened === void 0 ? void 0 : onOpened();
+                    onState === null || onState === void 0 ? void 0 : onState("opened");
+                }
+                else {
+                    onClosed === null || onClosed === void 0 ? void 0 : onClosed();
+                    onState === null || onState === void 0 ? void 0 : onState("closed");
+                }
+            }, _duration + _delay);
+        }
+    }, [rect, open, variant]);
+    const clone = React.Children.only(children);
+    return React.cloneElement(clone, {
+        className: cls,
+        ref: (node) => {
+            ref.current = node;
+            const childRef = clone.ref;
+            if (typeof childRef === "function") {
+                childRef(node);
+            }
+            else if (childRef) {
+                childRef.current = node;
+            }
+        }
+    });
 }
 
 module.exports = Transition;

package/Transition/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../../src/Transition/index.tsx"],"sourcesContent":["\"use client\";\nimport React, { cloneElement, Children, useEffect, useState } from 'react';\nimport useTransition, { UseTransitionProps } from '../hooks/useTransition';\n\nexport type TransitionProps = UseTransitionProps & {\n    children: React.ReactElement;\n}\n\nconst TransitionBase = ({ children, ...options }: TransitionProps) => {\n    const { props, exited } = useTransition(options);\n    if (exited) return null;\n    const clone: any = Children.only(children);\n    return cloneElement(clone, props);\n}\n\nfunction Transition({ children, ...options }: TransitionProps) {\n    const [mounted, setMounted] = useState(false);\n\n    useEffect(() => {\n        setMounted(true);\n    }, []);\n\n    if (!mounted) return null;\n    return <TransitionBase  {...options} >{children}</TransitionBase>\n}\n\n\nexport default Transition"],"names":[],"mappings":";;;;;;;;AAQA;AAAwB;;AAEpB;AAAY;;AAEZ;AACJ;AAEA;AAAoB;;;;;AAOhB;AAAc;AACd;AACJ;;"}
+{"version":3,"file":"index.cjs","sources":["../../src/Transition/index.tsx"],"sourcesContent":["\"use client\";\nimport React, { cloneElement, Children, useState, useEffect, useRef } from 'react';\nimport * as variants from './variants'\nimport { css } from '../css';\nimport { useDocument } from '../Document';\nimport { useCSSCacheId } from '../css/CSSCacheProvider';\nimport { animationEases } from '../hooks/useAnimation';\nimport { formatCSSProp } from 'oncss';\nimport { CSSProps } from '../css/types';\n\nexport type TransitionVariantTypes = keyof typeof variants\nexport type TransitionVariant = TransitionVariantTypes | ((rect: DOMRect) => ({ from: CSSProps, to: CSSProps }))\nexport type TransitionState = \"open\" | \"opened\" | \"close\" | \"closed\"\n\nexport type TransitionProps = {\n    children: React.ReactElement;\n    open: boolean;\n    variant: TransitionVariant\n    ease?: string;\n    easing?: keyof typeof animationEases;\n    duration?: number;\n    delay?: number;\n    disableInitialTransition?: boolean;\n    onOpen?: () => void;\n    onOpened?: () => void;\n    onClose?: () => void;\n    onClosed?: () => void;\n    onState?: (state: TransitionState) => void;\n}\n\nconst getVariant = (rect: DOMRect, variant: TransitionVariant) => {\n    let fn = typeof variant === 'string' ? variants[variant] : variant\n    if (!fn) throw new Error(`Transition variant \"${variant}\" not found.`)\n    return fn(rect as DOMRect);\n}\n\nfunction Transition({ children, ...options }: TransitionProps) {\n    let {\n        disableInitialTransition = false,\n        variant = \"fade\",\n        duration = 400,\n        delay,\n        ease,\n        easing,\n        open,\n        onOpen,\n        onOpened,\n        onClose,\n        onClosed,\n        onState\n    } = options\n\n    const endTimer = useRef<any>(null)\n    const animId = useRef(0)\n    const [rect, setRect] = useState<DOMRect>()\n    const [isDisableInitial, setIsDisableInitial] = useState(disableInitialTransition)\n    const ref = useRef<HTMLElement>(null)\n    const doc = useDocument();\n    const cacheId = useCSSCacheId()\n    let _ease = ease || (animationEases as any)[easing as any] || animationEases.bounce\n\n    const style = (obj = {}) => {\n        return css(obj, { container: doc?.document, cacheId }).classname;\n    }\n\n    let [cls, setCls] = useState(() => {\n        let props: any = {}\n        if (!isDisableInitial || (isDisableInitial && !open)) {\n            props.opacity = 0\n            props.pointerEvents = 'none'\n        }\n        return style(props)\n    })\n\n    // useEffect(() => {\n    //     const node = ref.current\n    //     if (!node) return\n    //     const observer = new ResizeObserver(() => {\n    //         const rect = node.getBoundingClientRect()\n    //         setRect(rect)\n    //     })\n    //     observer.observe(node)\n    //     return () => observer.disconnect()\n    // }, [])\n\n    useEffect(() => {\n        let frame: any\n\n        const measure = () => {\n            const node = ref.current\n            if (!node) {\n                frame = requestAnimationFrame(measure) // ⬅️ retry next frame\n                return\n            }\n\n            const rect = node.getBoundingClientRect()\n            const v = getVariant(rect, variant)\n\n            if (isDisableInitial) {\n                setCls(style(open ? v.to : v.from))\n            } else {\n                setCls(style(open ? v.from : v.to))\n            }\n\n            setRect(rect)\n        }\n\n        frame = requestAnimationFrame(measure)\n\n        return () => {\n            if (endTimer.current) {\n                clearTimeout(endTimer.current)\n            }\n            cancelAnimationFrame(frame)\n        }\n\n    }, [])\n\n    useEffect(() => {\n        if (rect) {\n            let _duration = isDisableInitial ? 0 : duration\n            let _delay = isDisableInitial ? 0 : (delay || 0)\n\n            if (isDisableInitial) {\n                setIsDisableInitial(false)\n            }\n            const v = getVariant(rect, variant)\n            let _css: any = open ? v.to : v.from\n\n            let _ = {\n                ..._css,\n                transition: Object.keys(_css || {})\n                    .map(k => `${formatCSSProp(k)} ${_duration}ms ${_ease} ${_delay}ms`)\n                    .join(\", \"),\n                willChange: Object.keys(_css || {})\n                    .map(formatCSSProp)\n                    .join(\", \"),\n            }\n\n            if (open) {\n                onOpen?.();\n                onState?.(\"open\");\n            } else {\n                onClose?.();\n                onState?.(\"close\");\n            }\n\n            setCls(style(_))\n            if (endTimer.current) {\n                clearTimeout(endTimer.current)\n            }\n            animId.current++\n            const id = animId.current\n            endTimer.current = setTimeout(() => {\n                if (id !== animId.current) return\n                if (open) {\n                    onOpened?.();\n                    onState?.(\"opened\");\n                } else {\n                    onClosed?.();\n                    onState?.(\"closed\");\n                }\n            }, _duration + _delay)\n        }\n    }, [rect, open, variant])\n\n    const clone: any = Children.only(children);\n\n    return cloneElement(clone, {\n        className: cls,\n        ref: (node: HTMLElement) => {\n            ref.current = node;\n\n            const childRef = (clone as any).ref;\n            if (typeof childRef === \"function\") {\n                childRef(node);\n            } else if (childRef) {\n                childRef.current = node;\n            }\n        }\n    });\n}\n\nexport default Transition"],"names":[],"mappings":";;;;;;;;;;;;AA8BA;AACI;AACA;AAAS;AACT;AACJ;AAEA;AAAoB;AAChB;AAeA;AACA;;;AAGA;AACA;AACA;AACA;AAEA;;AAEA;;;;AAKQ;AACA;;AAEJ;AACJ;;;;;;;;;;;;AAcI;;AAGI;;AAEI;;;AAIJ;;;AAII;;;AAEA;;;AAIR;AAEA;AAEA;AACI;AACI;;;AAGR;;;;;AAOI;;;;;AAMA;AAEA;AAGS;AACA;;AAGA;;AAIL;AACA;;;AAEA;AACA;;AAGJ;AACA;AACI;;;AAGJ;AACA;AACI;;;AAEI;AACA;;;AAEA;AACA;;AAER;;;;;AAOJ;AACA;AACI;AAEA;AACA;;;;AAGI;;;AAGX;AACL;;"}

package/Transition/index.d.ts

@@ -1,10 +1,33 @@
 import React__default from 'react';
-import { UseTransitionProps } from '../hooks/useTransition/index.js';
+import * as variants from './variants.js';
+import { animationEases } from '../hooks/useAnimation.js';
+import { CSSProps } from '../css/types.js';
 
-type TransitionProps = UseTransitionProps & {
+type TransitionVariantTypes = keyof typeof variants;
+type TransitionVariant = TransitionVariantTypes | ((rect: DOMRect) => ({
+    from: CSSProps;
+    to: CSSProps;
+}));
+type TransitionState = "open" | "opened" | "close" | "closed";
+type TransitionProps = {
     children: React__default.ReactElement;
+    open: boolean;
+    variant: TransitionVariant;
+    ease?: string;
+    easing?: keyof typeof animationEases;
+    duration?: number;
+    delay?: number;
+    disableInitialTransition?: boolean;
+    onOpen?: () => void;
+    onOpened?: () => void;
+    onClose?: () => void;
+    onClosed?: () => void;
+    onState?: (state: TransitionState) => void;
 };
-declare function Transition({ children, ...options }: TransitionProps): React__default.JSX.Element | null;
+declare function Transition({ children, ...options }: TransitionProps): React__default.DetailedReactHTMLElement<{
+    className: string;
+    ref: (node: HTMLElement) => void;
+}, HTMLElement>;
 
 export { Transition as default };
-export type { TransitionProps };
+export type { TransitionProps, TransitionState, TransitionVariant, TransitionVariantTypes };

package/Transition/index.js

@@ -1,26 +1,133 @@
 "use client";
 import { __rest } from 'tslib';
-import { jsx } from 'react/jsx-runtime';
-import { useState, useEffect, Children, cloneElement } from 'react';
-import useTransition from '../hooks/useTransition/index.js';
+import { useRef, useState, useEffect, Children, cloneElement } from 'react';
+import * as variants from './variants.js';
+import { css } from '../css/index.js';
+import { useDocument } from '../Document/index.js';
+import { useCSSCacheId } from '../css/CSSCacheProvider.js';
+import { animationEases } from '../hooks/useAnimation.js';
+import { formatCSSProp } from 'oncss';
 
-const TransitionBase = (_a) => {
-    var { children } = _a, options = __rest(_a, ["children"]);
-    const { props, exited } = useTransition(options);
-    if (exited)
-        return null;
-    const clone = Children.only(children);
-    return cloneElement(clone, props);
+const getVariant = (rect, variant) => {
+    let fn = typeof variant === 'string' ? variants[variant] : variant;
+    if (!fn)
+        throw new Error(`Transition variant "${variant}" not found.`);
+    return fn(rect);
 };
 function Transition(_a) {
     var { children } = _a, options = __rest(_a, ["children"]);
-    const [mounted, setMounted] = useState(false);
+    let { disableInitialTransition = false, variant = "fade", duration = 400, delay, ease, easing, open, onOpen, onOpened, onClose, onClosed, onState } = options;
+    const endTimer = useRef(null);
+    const animId = useRef(0);
+    const [rect, setRect] = useState();
+    const [isDisableInitial, setIsDisableInitial] = useState(disableInitialTransition);
+    const ref = useRef(null);
+    const doc = useDocument();
+    const cacheId = useCSSCacheId();
+    let _ease = ease || animationEases[easing] || animationEases.bounce;
+    const style = (obj = {}) => {
+        return css(obj, { container: doc === null || doc === void 0 ? void 0 : doc.document, cacheId }).classname;
+    };
+    let [cls, setCls] = useState(() => {
+        let props = {};
+        if (!isDisableInitial || (isDisableInitial && !open)) {
+            props.opacity = 0;
+            props.pointerEvents = 'none';
+        }
+        return style(props);
+    });
+    // useEffect(() => {
+    //     const node = ref.current
+    //     if (!node) return
+    //     const observer = new ResizeObserver(() => {
+    //         const rect = node.getBoundingClientRect()
+    //         setRect(rect)
+    //     })
+    //     observer.observe(node)
+    //     return () => observer.disconnect()
+    // }, [])
     useEffect(() => {
-        setMounted(true);
+        let frame;
+        const measure = () => {
+            const node = ref.current;
+            if (!node) {
+                frame = requestAnimationFrame(measure); // ⬅️ retry next frame
+                return;
+            }
+            const rect = node.getBoundingClientRect();
+            const v = getVariant(rect, variant);
+            if (isDisableInitial) {
+                setCls(style(open ? v.to : v.from));
+            }
+            else {
+                setCls(style(open ? v.from : v.to));
+            }
+            setRect(rect);
+        };
+        frame = requestAnimationFrame(measure);
+        return () => {
+            if (endTimer.current) {
+                clearTimeout(endTimer.current);
+            }
+            cancelAnimationFrame(frame);
+        };
     }, []);
-    if (!mounted)
-        return null;
-    return jsx(TransitionBase, Object.assign({}, options, { children: children }));
+    useEffect(() => {
+        if (rect) {
+            let _duration = isDisableInitial ? 0 : duration;
+            let _delay = isDisableInitial ? 0 : (delay || 0);
+            if (isDisableInitial) {
+                setIsDisableInitial(false);
+            }
+            const v = getVariant(rect, variant);
+            let _css = open ? v.to : v.from;
+            let _ = Object.assign(Object.assign({}, _css), { transition: Object.keys(_css || {})
+                    .map(k => `${formatCSSProp(k)} ${_duration}ms ${_ease} ${_delay}ms`)
+                    .join(", "), willChange: Object.keys(_css || {})
+                    .map(formatCSSProp)
+                    .join(", ") });
+            if (open) {
+                onOpen === null || onOpen === void 0 ? void 0 : onOpen();
+                onState === null || onState === void 0 ? void 0 : onState("open");
+            }
+            else {
+                onClose === null || onClose === void 0 ? void 0 : onClose();
+                onState === null || onState === void 0 ? void 0 : onState("close");
+            }
+            setCls(style(_));
+            if (endTimer.current) {
+                clearTimeout(endTimer.current);
+            }
+            animId.current++;
+            const id = animId.current;
+            endTimer.current = setTimeout(() => {
+                if (id !== animId.current)
+                    return;
+                if (open) {
+                    onOpened === null || onOpened === void 0 ? void 0 : onOpened();
+                    onState === null || onState === void 0 ? void 0 : onState("opened");
+                }
+                else {
+                    onClosed === null || onClosed === void 0 ? void 0 : onClosed();
+                    onState === null || onState === void 0 ? void 0 : onState("closed");
+                }
+            }, _duration + _delay);
+        }
+    }, [rect, open, variant]);
+    const clone = Children.only(children);
+    return cloneElement(clone, {
+        className: cls,
+        ref: (node) => {
+            ref.current = node;
+            const childRef = clone.ref;
+            if (typeof childRef === "function") {
+                childRef(node);
+            }
+            else if (childRef) {
+                childRef.current = node;
+            }
+        }
+    });
 }
 
 export { Transition as default };

package/Transition/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../src/Transition/index.tsx"],"sourcesContent":["\"use client\";\nimport React, { cloneElement, Children, useEffect, useState } from 'react';\nimport useTransition, { UseTransitionProps } from '../hooks/useTransition';\n\nexport type TransitionProps = UseTransitionProps & {\n    children: React.ReactElement;\n}\n\nconst TransitionBase = ({ children, ...options }: TransitionProps) => {\n    const { props, exited } = useTransition(options);\n    if (exited) return null;\n    const clone: any = Children.only(children);\n    return cloneElement(clone, props);\n}\n\nfunction Transition({ children, ...options }: TransitionProps) {\n    const [mounted, setMounted] = useState(false);\n\n    useEffect(() => {\n        setMounted(true);\n    }, []);\n\n    if (!mounted) return null;\n    return <TransitionBase  {...options} >{children}</TransitionBase>\n}\n\n\nexport default Transition"],"names":[],"mappings":";;;;;;AAQA;AAAwB;;AAEpB;AAAY;;AAEZ;AACJ;AAEA;AAAoB;;;;;AAOhB;AAAc;AACd;AACJ;;"}
+{"version":3,"file":"index.js","sources":["../../src/Transition/index.tsx"],"sourcesContent":["\"use client\";\nimport React, { cloneElement, Children, useState, useEffect, useRef } from 'react';\nimport * as variants from './variants'\nimport { css } from '../css';\nimport { useDocument } from '../Document';\nimport { useCSSCacheId } from '../css/CSSCacheProvider';\nimport { animationEases } from '../hooks/useAnimation';\nimport { formatCSSProp } from 'oncss';\nimport { CSSProps } from '../css/types';\n\nexport type TransitionVariantTypes = keyof typeof variants\nexport type TransitionVariant = TransitionVariantTypes | ((rect: DOMRect) => ({ from: CSSProps, to: CSSProps }))\nexport type TransitionState = \"open\" | \"opened\" | \"close\" | \"closed\"\n\nexport type TransitionProps = {\n    children: React.ReactElement;\n    open: boolean;\n    variant: TransitionVariant\n    ease?: string;\n    easing?: keyof typeof animationEases;\n    duration?: number;\n    delay?: number;\n    disableInitialTransition?: boolean;\n    onOpen?: () => void;\n    onOpened?: () => void;\n    onClose?: () => void;\n    onClosed?: () => void;\n    onState?: (state: TransitionState) => void;\n}\n\nconst getVariant = (rect: DOMRect, variant: TransitionVariant) => {\n    let fn = typeof variant === 'string' ? variants[variant] : variant\n    if (!fn) throw new Error(`Transition variant \"${variant}\" not found.`)\n    return fn(rect as DOMRect);\n}\n\nfunction Transition({ children, ...options }: TransitionProps) {\n    let {\n        disableInitialTransition = false,\n        variant = \"fade\",\n        duration = 400,\n        delay,\n        ease,\n        easing,\n        open,\n        onOpen,\n        onOpened,\n        onClose,\n        onClosed,\n        onState\n    } = options\n\n    const endTimer = useRef<any>(null)\n    const animId = useRef(0)\n    const [rect, setRect] = useState<DOMRect>()\n    const [isDisableInitial, setIsDisableInitial] = useState(disableInitialTransition)\n    const ref = useRef<HTMLElement>(null)\n    const doc = useDocument();\n    const cacheId = useCSSCacheId()\n    let _ease = ease || (animationEases as any)[easing as any] || animationEases.bounce\n\n    const style = (obj = {}) => {\n        return css(obj, { container: doc?.document, cacheId }).classname;\n    }\n\n    let [cls, setCls] = useState(() => {\n        let props: any = {}\n        if (!isDisableInitial || (isDisableInitial && !open)) {\n            props.opacity = 0\n            props.pointerEvents = 'none'\n        }\n        return style(props)\n    })\n\n    // useEffect(() => {\n    //     const node = ref.current\n    //     if (!node) return\n    //     const observer = new ResizeObserver(() => {\n    //         const rect = node.getBoundingClientRect()\n    //         setRect(rect)\n    //     })\n    //     observer.observe(node)\n    //     return () => observer.disconnect()\n    // }, [])\n\n    useEffect(() => {\n        let frame: any\n\n        const measure = () => {\n            const node = ref.current\n            if (!node) {\n                frame = requestAnimationFrame(measure) // ⬅️ retry next frame\n                return\n            }\n\n            const rect = node.getBoundingClientRect()\n            const v = getVariant(rect, variant)\n\n            if (isDisableInitial) {\n                setCls(style(open ? v.to : v.from))\n            } else {\n                setCls(style(open ? v.from : v.to))\n            }\n\n            setRect(rect)\n        }\n\n        frame = requestAnimationFrame(measure)\n\n        return () => {\n            if (endTimer.current) {\n                clearTimeout(endTimer.current)\n            }\n            cancelAnimationFrame(frame)\n        }\n\n    }, [])\n\n    useEffect(() => {\n        if (rect) {\n            let _duration = isDisableInitial ? 0 : duration\n            let _delay = isDisableInitial ? 0 : (delay || 0)\n\n            if (isDisableInitial) {\n                setIsDisableInitial(false)\n            }\n            const v = getVariant(rect, variant)\n            let _css: any = open ? v.to : v.from\n\n            let _ = {\n                ..._css,\n                transition: Object.keys(_css || {})\n                    .map(k => `${formatCSSProp(k)} ${_duration}ms ${_ease} ${_delay}ms`)\n                    .join(\", \"),\n                willChange: Object.keys(_css || {})\n                    .map(formatCSSProp)\n                    .join(\", \"),\n            }\n\n            if (open) {\n                onOpen?.();\n                onState?.(\"open\");\n            } else {\n                onClose?.();\n                onState?.(\"close\");\n            }\n\n            setCls(style(_))\n            if (endTimer.current) {\n                clearTimeout(endTimer.current)\n            }\n            animId.current++\n            const id = animId.current\n            endTimer.current = setTimeout(() => {\n                if (id !== animId.current) return\n                if (open) {\n                    onOpened?.();\n                    onState?.(\"opened\");\n                } else {\n                    onClosed?.();\n                    onState?.(\"closed\");\n                }\n            }, _duration + _delay)\n        }\n    }, [rect, open, variant])\n\n    const clone: any = Children.only(children);\n\n    return cloneElement(clone, {\n        className: cls,\n        ref: (node: HTMLElement) => {\n            ref.current = node;\n\n            const childRef = (clone as any).ref;\n            if (typeof childRef === \"function\") {\n                childRef(node);\n            } else if (childRef) {\n                childRef.current = node;\n            }\n        }\n    });\n}\n\nexport default Transition"],"names":[],"mappings":";;;;;;;;;;AA8BA;AACI;AACA;AAAS;AACT;AACJ;AAEA;AAAoB;AAChB;AAeA;AACA;;;AAGA;AACA;AACA;AACA;AAEA;;AAEA;;;;AAKQ;AACA;;AAEJ;AACJ;;;;;;;;;;;;AAcI;;AAGI;;AAEI;;;AAIJ;;;AAII;;;AAEA;;;AAIR;AAEA;AAEA;AACI;AACI;;;AAGR;;;;;AAOI;;;;;AAMA;AAEA;AAGS;AACA;;AAGA;;AAIL;AACA;;;AAEA;AACA;;AAGJ;AACA;AACI;;;AAGJ;AACA;AACI;;;AAEI;AACA;;;AAEA;AACA;;AAER;;;;;AAOJ;AACA;AACI;AAEA;AACA;;;;AAGI;;;AAGX;AACL;;"}

package/{hooks/useTransition → Transition}/variants.cjs

@@ -1,9 +1,12 @@
 'use strict';
 
+const getY = (rect) => rect ? Math.min(rect.height / 2, 40) : 20;
+const getX = (rect) => rect ? Math.min(rect.width / 2, 40) : 20;
 const slideDown = (rect) => {
+    const y = getY(rect);
     return {
         from: {
-            transform: `translateY(-${rect.height}px)`,
+            transform: `translateY(-${y}px)`,
         },
         to: {
             transform: `translateY(0)`,
@@ -11,9 +14,10 @@ const slideDown = (rect) => {
     };
 };
 const slideUp = (rect) => {
+    const y = getY(rect);
     return {
         from: {
-            transform: `translateY(${rect.height}px)`,
+            transform: `translateY(${y}px)`,
         },
         to: {
             transform: `translateY(0)`,
@@ -21,9 +25,10 @@ const slideUp = (rect) => {
     };
 };
 const slideRight = (rect) => {
+    const x = getX(rect);
     return {
         from: {
-            transform: `translateX(-${rect.width}px)`,
+            transform: `translateX(-${x}px)`,
         },
         to: {
             transform: `translateX(0)`,
@@ -31,69 +36,105 @@ const slideRight = (rect) => {
     };
 };
 const slideLeft = (rect) => {
+    const x = getX(rect);
     return {
         from: {
-            transform: `translateX(${rect.width}px)`,
+            transform: `translateX(${x}px)`,
         },
         to: {
             transform: `translateX(0)`,
         }
     };
 };
+const scaleYDown = () => ({
+    from: {
+        transform: "scaleY(0.8)",
+        opacity: 0,
+        pointerEvents: 'none',
+        transformOrigin: "top"
+    },
+    to: {
+        transform: "scaleY(1)",
+        opacity: 1,
+        transformOrigin: "top"
+    }
+});
+const scaleYUp = () => ({
+    from: {
+        transform: "scaleY(0.8)",
+        transformOrigin: "bottom",
+        opacity: 0,
+        pointerEvents: 'none'
+    },
+    to: {
+        transform: "scaleY(1)",
+        transformOrigin: "bottom",
+        opacity: 1
+    }
+});
 const fade = () => {
     return {
         from: {
-            opacity: 0
+            opacity: 0,
+            pointerEvents: 'none'
         },
         to: {
             opacity: 1
         }
     };
 };
-const fadeDown = () => {
+const fadeDown = (rect) => {
+    const y = getY(rect);
     return {
         from: {
-            transform: `translateY(-30px)`,
-            opacity: 0
+            transform: `translateY(-${y}px) scale(0.98)`,
+            opacity: 0,
+            pointerEvents: 'none'
         },
         to: {
-            transform: `translateY(0)`,
+            transform: `translateY(0) scale(1)`,
             opacity: 1
         }
     };
 };
-const fadeUp = () => {
+const fadeUp = (rect) => {
+    const y = getY(rect);
     return {
         from: {
-            transform: `translateY(30px)`,
-            opacity: 0
+            transform: `translateY(${y}px) scale(0.98)`,
+            opacity: 0,
+            pointerEvents: 'none'
         },
         to: {
-            transform: `translateY(0)`,
+            transform: `translateY(0) scale(1)`,
             opacity: 1
         }
     };
 };
-const fadeRight = () => {
+const fadeRight = (rect) => {
+    const x = getX(rect);
     return {
         from: {
-            transform: `translateX(-30px)`,
-            opacity: 0
+            transform: `translateX(-${x}px) scale(0.98)`,
+            opacity: 0,
+            pointerEvents: 'none'
         },
         to: {
-            transform: `translateX(0)`,
+            transform: `translateX(0) scale(1)`,
             opacity: 1
         }
     };
 };
-const fadeLeft = () => {
+const fadeLeft = (rect) => {
+    const x = getX(rect);
     return {
         from: {
-            transform: `translateX(30px)`,
-            opacity: 0
+            transform: `translateX(${x}px) scale(0.98)`,
+            opacity: 0,
+            pointerEvents: 'none'
         },
         to: {
-            transform: `translateX(0)`,
+            transform: `translateX(0) scale(1)`,
             opacity: 1
         }
     };
@@ -102,7 +143,8 @@ const grow = () => {
     return {
         from: {
             transform: "scale(.8, .6)",
-            opacity: 0
+            opacity: 0,
+            pointerEvents: 'none'
         },
         to: {
             transform: "scale(1)",
@@ -114,10 +156,13 @@ const zoom = () => {
     return {
         from: {
             transform: "scale(.8)",
-            opacity: 0
+            transformOrigin: "center",
+            opacity: 0,
+            pointerEvents: 'none'
         },
         to: {
             transform: "scale(1)",
+            transformOrigin: "center",
             opacity: 1
         }
     };
@@ -126,10 +171,13 @@ const zoomOver = () => {
     return {
         from: {
             transform: "scale(1.2)",
-            opacity: 0
+            transformOrigin: "center",
+            opacity: 0,
+            pointerEvents: 'none'
         },
         to: {
             transform: "scale(1)",
+            transformOrigin: "center",
             opacity: 1
         }
     };
@@ -137,11 +185,11 @@ const zoomOver = () => {
 const collapseVertical = (rect) => {
     return {
         from: {
-            maxHeight: 0 + "px",
+            maxHeight: "0px",
             overflow: "hidden"
         },
         to: {
-            maxHeight: rect.height,
+            maxHeight: rect.height + "px",
             overflow: "hidden"
         }
     };
@@ -149,11 +197,11 @@ const collapseVertical = (rect) => {
 const collapseHorizontal = (rect) => {
     return {
         from: {
-            width: 0 + "px",
+            width: "0px",
             overflow: "hidden"
         },
         to: {
-            width: (rect === null || rect === void 0 ? void 0 : rect.width) ? (rect === null || rect === void 0 ? void 0 : rect.width) + "px" : "auto",
+            width: rect.width + "px",
             overflow: "hidden"
         }
     };
@@ -167,6 +215,8 @@ exports.fadeLeft = fadeLeft;
 exports.fadeRight = fadeRight;
 exports.fadeUp = fadeUp;
 exports.grow = grow;
+exports.scaleYDown = scaleYDown;
+exports.scaleYUp = scaleYUp;
 exports.slideDown = slideDown;
 exports.slideLeft = slideLeft;
 exports.slideRight = slideRight;

package/Transition/variants.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"variants.cjs","sources":["../../src/Transition/variants.ts"],"sourcesContent":["\nconst getY = (rect?: DOMRect) =>\n    rect ? Math.min(rect.height / 2, 40) : 20\n\nconst getX = (rect?: DOMRect) =>\n    rect ? Math.min(rect.width / 2, 40) : 20\n\n\n\nexport const slideDown = (rect?: DOMRect) => {\n    const y = getY(rect)\n\n    return {\n        from: {\n            transform: `translateY(-${y}px)`,\n        },\n        to: {\n            transform: `translateY(0)`,\n        }\n    }\n}\n\nexport const slideUp = (rect?: DOMRect) => {\n    const y = getY(rect)\n\n    return {\n        from: {\n            transform: `translateY(${y}px)`,\n        },\n        to: {\n            transform: `translateY(0)`,\n        }\n    }\n}\n\nexport const slideRight = (rect?: DOMRect) => {\n    const x = getX(rect)\n\n    return {\n        from: {\n            transform: `translateX(-${x}px)`,\n        },\n        to: {\n            transform: `translateX(0)`,\n        }\n    }\n}\n\nexport const slideLeft = (rect?: DOMRect) => {\n    const x = getX(rect)\n\n    return {\n        from: {\n            transform: `translateX(${x}px)`,\n        },\n        to: {\n            transform: `translateX(0)`,\n        }\n    }\n}\n\nexport const scaleYDown = () => ({\n    from: {\n        transform: \"scaleY(0.8)\",\n        opacity: 0,\n        pointerEvents: 'none',\n        transformOrigin: \"top\"\n    },\n    to: {\n        transform: \"scaleY(1)\",\n        opacity: 1,\n        transformOrigin: \"top\"\n    }\n})\n\nexport const scaleYUp = () => ({\n    from: {\n        transform: \"scaleY(0.8)\",\n        transformOrigin: \"bottom\",\n        opacity: 0,\n        pointerEvents: 'none'\n    },\n    to: {\n        transform: \"scaleY(1)\",\n        transformOrigin: \"bottom\",\n        opacity: 1\n    }\n})\n\nexport const fade = () => {\n    return {\n        from: {\n            opacity: 0,\n            pointerEvents: 'none'\n        },\n        to: {\n            opacity: 1\n        }\n    }\n}\n\n\nexport const fadeDown = (rect?: DOMRect) => {\n    const y = getY(rect)\n\n    return {\n        from: {\n            transform: `translateY(-${y}px) scale(0.98)`,\n            opacity: 0,\n            pointerEvents: 'none'\n        },\n        to: {\n            transform: `translateY(0) scale(1)`,\n            opacity: 1\n        }\n    }\n}\n\nexport const fadeUp = (rect?: DOMRect) => {\n    const y = getY(rect)\n\n    return {\n        from: {\n            transform: `translateY(${y}px) scale(0.98)`,\n            opacity: 0,\n            pointerEvents: 'none'\n        },\n        to: {\n            transform: `translateY(0) scale(1)`,\n            opacity: 1\n        }\n    }\n}\n\nexport const fadeRight = (rect?: DOMRect) => {\n    const x = getX(rect)\n\n    return {\n        from: {\n            transform: `translateX(-${x}px) scale(0.98)`,\n            opacity: 0,\n            pointerEvents: 'none'\n        },\n        to: {\n            transform: `translateX(0) scale(1)`,\n            opacity: 1\n        }\n    }\n}\n\nexport const fadeLeft = (rect?: DOMRect) => {\n    const x = getX(rect)\n\n    return {\n        from: {\n            transform: `translateX(${x}px) scale(0.98)`,\n            opacity: 0,\n            pointerEvents: 'none'\n        },\n        to: {\n            transform: `translateX(0) scale(1)`,\n            opacity: 1\n        }\n    }\n}\n\nexport const grow = () => {\n    return {\n        from: {\n            transform: \"scale(.8, .6)\",\n            opacity: 0,\n            pointerEvents: 'none'\n        },\n        to: {\n            transform: \"scale(1)\",\n            opacity: 1\n        }\n    }\n}\n\nexport const zoom = () => {\n    return {\n        from: {\n            transform: \"scale(.8)\",\n            transformOrigin: \"center\",\n            opacity: 0,\n            pointerEvents: 'none'\n        },\n        to: {\n            transform: \"scale(1)\",\n            transformOrigin: \"center\",\n            opacity: 1\n        }\n    }\n}\n\nexport const zoomOver = () => {\n    return {\n        from: {\n            transform: \"scale(1.2)\",\n            transformOrigin: \"center\",\n            opacity: 0,\n            pointerEvents: 'none'\n        },\n        to: {\n            transform: \"scale(1)\",\n            transformOrigin: \"center\",\n            opacity: 1\n        }\n    }\n}\n\nexport const collapseVertical = (rect: DOMRect) => {\n    return {\n        from: {\n            maxHeight: \"0px\",\n            overflow: \"hidden\"\n        },\n        to: {\n            maxHeight: rect.height + \"px\",\n            overflow: \"hidden\"\n        }\n    }\n}\n\n\nexport const collapseHorizontal = (rect: DOMRect) => {\n    return {\n        from: {\n            width: \"0px\",\n            overflow: \"hidden\"\n        },\n        to: {\n            width: rect.width + \"px\",\n            overflow: \"hidden\"\n        }\n    }\n}\n\n\n\n\n"],"names":[],"mappings":";;AACA,MAAM,IAAI,GAAG,CAAC,IAAc,KACxB,IAAI,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,MAAM,GAAG,CAAC,EAAE,EAAE,CAAC,GAAG,EAAE;AAE7C,MAAM,IAAI,GAAG,CAAC,IAAc,KACxB,IAAI,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,KAAK,GAAG,CAAC,EAAE,EAAE,CAAC,GAAG,EAAE;AAIrC,MAAM,SAAS,GAAG,CAAC,IAAc,KAAI;AACxC,IAAA,MAAM,CAAC,GAAG,IAAI,CAAC,IAAI,CAAC;IAEpB,OAAO;AACH,QAAA,IAAI,EAAE;YACF,SAAS,EAAE,CAAA,YAAA,EAAe,CAAC,CAAA,GAAA,CAAK;AACnC,SAAA;AACD,QAAA,EAAE,EAAE;AACA,YAAA,SAAS,EAAE,CAAA,aAAA,CAAe;AAC7B;KACJ;AACL;AAEO,MAAM,OAAO,GAAG,CAAC,IAAc,KAAI;AACtC,IAAA,MAAM,CAAC,GAAG,IAAI,CAAC,IAAI,CAAC;IAEpB,OAAO;AACH,QAAA,IAAI,EAAE;YACF,SAAS,EAAE,CAAA,WAAA,EAAc,CAAC,CAAA,GAAA,CAAK;AAClC,SAAA;AACD,QAAA,EAAE,EAAE;AACA,YAAA,SAAS,EAAE,CAAA,aAAA,CAAe;AAC7B;KACJ;AACL;AAEO,MAAM,UAAU,GAAG,CAAC,IAAc,KAAI;AACzC,IAAA,MAAM,CAAC,GAAG,IAAI,CAAC,IAAI,CAAC;IAEpB,OAAO;AACH,QAAA,IAAI,EAAE;YACF,SAAS,EAAE,CAAA,YAAA,EAAe,CAAC,CAAA,GAAA,CAAK;AACnC,SAAA;AACD,QAAA,EAAE,EAAE;AACA,YAAA,SAAS,EAAE,CAAA,aAAA,CAAe;AAC7B;KACJ;AACL;AAEO,MAAM,SAAS,GAAG,CAAC,IAAc,KAAI;AACxC,IAAA,MAAM,CAAC,GAAG,IAAI,CAAC,IAAI,CAAC;IAEpB,OAAO;AACH,QAAA,IAAI,EAAE;YACF,SAAS,EAAE,CAAA,WAAA,EAAc,CAAC,CAAA,GAAA,CAAK;AAClC,SAAA;AACD,QAAA,EAAE,EAAE;AACA,YAAA,SAAS,EAAE,CAAA,aAAA,CAAe;AAC7B;KACJ;AACL;AAEO,MAAM,UAAU,GAAG,OAAO;AAC7B,IAAA,IAAI,EAAE;AACF,QAAA,SAAS,EAAE,aAAa;AACxB,QAAA,OAAO,EAAE,CAAC;AACV,QAAA,aAAa,EAAE,MAAM;AACrB,QAAA,eAAe,EAAE;AACpB,KAAA;AACD,IAAA,EAAE,EAAE;AACA,QAAA,SAAS,EAAE,WAAW;AACtB,QAAA,OAAO,EAAE,CAAC;AACV,QAAA,eAAe,EAAE;AACpB;AACJ,CAAA;AAEM,MAAM,QAAQ,GAAG,OAAO;AAC3B,IAAA,IAAI,EAAE;AACF,QAAA,SAAS,EAAE,aAAa;AACxB,QAAA,eAAe,EAAE,QAAQ;AACzB,QAAA,OAAO,EAAE,CAAC;AACV,QAAA,aAAa,EAAE;AAClB,KAAA;AACD,IAAA,EAAE,EAAE;AACA,QAAA,SAAS,EAAE,WAAW;AACtB,QAAA,eAAe,EAAE,QAAQ;AACzB,QAAA,OAAO,EAAE;AACZ;AACJ,CAAA;AAEM,MAAM,IAAI,GAAG,MAAK;IACrB,OAAO;AACH,QAAA,IAAI,EAAE;AACF,YAAA,OAAO,EAAE,CAAC;AACV,YAAA,aAAa,EAAE;AAClB,SAAA;AACD,QAAA,EAAE,EAAE;AACA,YAAA,OAAO,EAAE;AACZ;KACJ;AACL;AAGO,MAAM,QAAQ,GAAG,CAAC,IAAc,KAAI;AACvC,IAAA,MAAM,CAAC,GAAG,IAAI,CAAC,IAAI,CAAC;IAEpB,OAAO;AACH,QAAA,IAAI,EAAE;YACF,SAAS,EAAE,CAAA,YAAA,EAAe,CAAC,CAAA,eAAA,CAAiB;AAC5C,YAAA,OAAO,EAAE,CAAC;AACV,YAAA,aAAa,EAAE;AAClB,SAAA;AACD,QAAA,EAAE,EAAE;AACA,YAAA,SAAS,EAAE,CAAA,sBAAA,CAAwB;AACnC,YAAA,OAAO,EAAE;AACZ;KACJ;AACL;AAEO,MAAM,MAAM,GAAG,CAAC,IAAc,KAAI;AACrC,IAAA,MAAM,CAAC,GAAG,IAAI,CAAC,IAAI,CAAC;IAEpB,OAAO;AACH,QAAA,IAAI,EAAE;YACF,SAAS,EAAE,CAAA,WAAA,EAAc,CAAC,CAAA,eAAA,CAAiB;AAC3C,YAAA,OAAO,EAAE,CAAC;AACV,YAAA,aAAa,EAAE;AAClB,SAAA;AACD,QAAA,EAAE,EAAE;AACA,YAAA,SAAS,EAAE,CAAA,sBAAA,CAAwB;AACnC,YAAA,OAAO,EAAE;AACZ;KACJ;AACL;AAEO,MAAM,SAAS,GAAG,CAAC,IAAc,KAAI;AACxC,IAAA,MAAM,CAAC,GAAG,IAAI,CAAC,IAAI,CAAC;IAEpB,OAAO;AACH,QAAA,IAAI,EAAE;YACF,SAAS,EAAE,CAAA,YAAA,EAAe,CAAC,CAAA,eAAA,CAAiB;AAC5C,YAAA,OAAO,EAAE,CAAC;AACV,YAAA,aAAa,EAAE;AAClB,SAAA;AACD,QAAA,EAAE,EAAE;AACA,YAAA,SAAS,EAAE,CAAA,sBAAA,CAAwB;AACnC,YAAA,OAAO,EAAE;AACZ;KACJ;AACL;AAEO,MAAM,QAAQ,GAAG,CAAC,IAAc,KAAI;AACvC,IAAA,MAAM,CAAC,GAAG,IAAI,CAAC,IAAI,CAAC;IAEpB,OAAO;AACH,QAAA,IAAI,EAAE;YACF,SAAS,EAAE,CAAA,WAAA,EAAc,CAAC,CAAA,eAAA,CAAiB;AAC3C,YAAA,OAAO,EAAE,CAAC;AACV,YAAA,aAAa,EAAE;AAClB,SAAA;AACD,QAAA,EAAE,EAAE;AACA,YAAA,SAAS,EAAE,CAAA,sBAAA,CAAwB;AACnC,YAAA,OAAO,EAAE;AACZ;KACJ;AACL;AAEO,MAAM,IAAI,GAAG,MAAK;IACrB,OAAO;AACH,QAAA,IAAI,EAAE;AACF,YAAA,SAAS,EAAE,eAAe;AAC1B,YAAA,OAAO,EAAE,CAAC;AACV,YAAA,aAAa,EAAE;AAClB,SAAA;AACD,QAAA,EAAE,EAAE;AACA,YAAA,SAAS,EAAE,UAAU;AACrB,YAAA,OAAO,EAAE;AACZ;KACJ;AACL;AAEO,MAAM,IAAI,GAAG,MAAK;IACrB,OAAO;AACH,QAAA,IAAI,EAAE;AACF,YAAA,SAAS,EAAE,WAAW;AACtB,YAAA,eAAe,EAAE,QAAQ;AACzB,YAAA,OAAO,EAAE,CAAC;AACV,YAAA,aAAa,EAAE;AAClB,SAAA;AACD,QAAA,EAAE,EAAE;AACA,YAAA,SAAS,EAAE,UAAU;AACrB,YAAA,eAAe,EAAE,QAAQ;AACzB,YAAA,OAAO,EAAE;AACZ;KACJ;AACL;AAEO,MAAM,QAAQ,GAAG,MAAK;IACzB,OAAO;AACH,QAAA,IAAI,EAAE;AACF,YAAA,SAAS,EAAE,YAAY;AACvB,YAAA,eAAe,EAAE,QAAQ;AACzB,YAAA,OAAO,EAAE,CAAC;AACV,YAAA,aAAa,EAAE;AAClB,SAAA;AACD,QAAA,EAAE,EAAE;AACA,YAAA,SAAS,EAAE,UAAU;AACrB,YAAA,eAAe,EAAE,QAAQ;AACzB,YAAA,OAAO,EAAE;AACZ;KACJ;AACL;AAEO,MAAM,gBAAgB,GAAG,CAAC,IAAa,KAAI;IAC9C,OAAO;AACH,QAAA,IAAI,EAAE;AACF,YAAA,SAAS,EAAE,KAAK;AAChB,YAAA,QAAQ,EAAE;AACb,SAAA;AACD,QAAA,EAAE,EAAE;AACA,YAAA,SAAS,EAAE,IAAI,CAAC,MAAM,GAAG,IAAI;AAC7B,YAAA,QAAQ,EAAE;AACb;KACJ;AACL;AAGO,MAAM,kBAAkB,GAAG,CAAC,IAAa,KAAI;IAChD,OAAO;AACH,QAAA,IAAI,EAAE;AACF,YAAA,KAAK,EAAE,KAAK;AACZ,YAAA,QAAQ,EAAE;AACb,SAAA;AACD,QAAA,EAAE,EAAE;AACA,YAAA,KAAK,EAAE,IAAI,CAAC,KAAK,GAAG,IAAI;AACxB,YAAA,QAAQ,EAAE;AACb;KACJ;AACL;;;;;;;;;;;;;;;;;;;"}