@xanui/core 1.2.69 → 1.2.71

package/Transition/index.cjs

@@ -104,15 +104,22 @@ function Transition(_a) {
                         onState === null || onState === void 0 ? void 0 : onState("closed");
                     }
                 }, _duration + _delay);
-            }, 150);
+            }, 50);
         }
     }, [rect, open, variant]);
-    const clone = React.Children.only(children);
-    return React.cloneElement(clone, {
+    const childs = React.Children.toArray(children);
+    if (childs.length !== 1) {
+        throw new Error("Transition expects exactly one child.");
+    }
+    const child = childs[0];
+    if (!React.isValidElement(child)) {
+        throw new Error("Transition expects a valid React element.");
+    }
+    return React.cloneElement(child, {
         className: cls,
         ref: (node) => {
             ref.current = node;
-            const childRef = clone.ref;
+            const childRef = child.ref;
             if (typeof childRef === "function") {
                 childRef(node);
             }

package/Transition/index.cjs.map

@@ -1 +1 @@
-{"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            props.transition = 'none'\n        }\n        return style(props)\n    })\n\n\n    useEffect(() => {\n        let frame: any\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            const initial = isDisableInitial\n                ? (open ? v.to : v.from)\n                : (open ? v.from : v.to)\n\n            setCls(style({\n                ...initial,\n                transition: 'none'\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            setTimeout(() => {\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            }, 150);\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;AACA;;AAEJ;AACJ;;AAII;;AAEI;;AAEI;;;AAIJ;;;AAGI;AACA;;;AAOR;AAEA;AAEA;AACI;AACI;;;AAGR;;;;;AAOI;;;;;AAMA;AAEA;AAGS;AACA;;AAGA;;AAIL;AACA;;;AAEA;AACA;;;AAIA;AACA;AACI;;;AAGJ;AACA;AACI;;;AAEI;AACA;;;AAEA;AACA;;AAER;;;;;;AAQR;AACA;AACI;AAEA;AACA;;;;AAGI;;;AAGX;AACL;;"}
+{"version":3,"file":"index.cjs","sources":["../../src/Transition/index.tsx"],"sourcesContent":["\"use client\";\nimport React, { cloneElement, Children, useState, useEffect, useRef, isValidElement } 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            props.transition = 'none'\n        }\n        return style(props)\n    })\n\n\n    useEffect(() => {\n        let frame: any\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            const initial = isDisableInitial\n                ? (open ? v.to : v.from)\n                : (open ? v.from : v.to)\n\n            setCls(style({\n                ...initial,\n                transition: 'none'\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            setTimeout(() => {\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            }, 50);\n        }\n    }, [rect, open, variant])\n\n\n\n    const childs = Children.toArray(children)\n    if (childs.length !== 1) {\n        throw new Error(\"Transition expects exactly one child.\");\n    }\n    const child = childs[0]\n    if (!isValidElement(child)) {\n        throw new Error(\"Transition expects a valid React element.\");\n    }\n\n    return cloneElement(child, {\n        className: cls,\n        ref: (node: HTMLElement) => {\n            ref.current = node;\n\n            const childRef = (child as any).ref;\n            if (typeof childRef === \"function\") {\n                childRef(node);\n            } else if (childRef) {\n                childRef.current = node;\n            }\n        }\n    } as any);\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;AACA;;AAEJ;AACJ;;AAII;;AAEI;;AAEI;;;AAIJ;;;AAGI;AACA;;;AAOR;AAEA;AAEA;AACI;AACI;;;AAGR;;;;;AAOI;;;;;AAMA;AAEA;AAGS;AACA;;AAGA;;AAIL;AACA;;;AAEA;AACA;;;AAIA;AACA;AACI;;;AAGJ;AACA;AACI;;;AAEI;AACA;;;AAEA;AACA;;AAER;;;;;AAQZ;AACI;;AAEJ;AACA;AACI;;;AAIA;AACA;AACI;AAEA;AACA;;;;AAGI;;;AAGJ;AACZ;;"}

package/Transition/index.d.ts

@@ -24,10 +24,7 @@ type TransitionProps = {
     onClosed?: () => void;
     onState?: (state: TransitionState) => void;
 };
-declare function Transition({ children, ...options }: TransitionProps): React__default.DetailedReactHTMLElement<{
-    className: string;
-    ref: (node: HTMLElement) => void;
-}, HTMLElement>;
+declare function Transition({ children, ...options }: TransitionProps): React__default.ReactElement<unknown, string | React__default.JSXElementConstructor<any>>;
 
 export { Transition as default };
 export type { TransitionProps, TransitionState, TransitionVariant, TransitionVariantTypes };

package/Transition/index.js

@@ -1,6 +1,6 @@
 "use client";
 import { __rest } from 'tslib';
-import { useRef, useState, useEffect, Children, cloneElement } from 'react';
+import { useRef, useState, useEffect, Children, isValidElement, cloneElement } from 'react';
 import * as variants from './variants.js';
 import { css } from '../css/index.js';
 import { useDocument } from '../Document/index.js';
@@ -102,15 +102,22 @@ function Transition(_a) {
                         onState === null || onState === void 0 ? void 0 : onState("closed");
                     }
                 }, _duration + _delay);
-            }, 150);
+            }, 50);
         }
     }, [rect, open, variant]);
-    const clone = Children.only(children);
-    return cloneElement(clone, {
+    const childs = Children.toArray(children);
+    if (childs.length !== 1) {
+        throw new Error("Transition expects exactly one child.");
+    }
+    const child = childs[0];
+    if (!isValidElement(child)) {
+        throw new Error("Transition expects a valid React element.");
+    }
+    return cloneElement(child, {
         className: cls,
         ref: (node) => {
             ref.current = node;
-            const childRef = clone.ref;
+            const childRef = child.ref;
             if (typeof childRef === "function") {
                 childRef(node);
             }

package/Transition/index.js.map

@@ -1 +1 @@
-{"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            props.transition = 'none'\n        }\n        return style(props)\n    })\n\n\n    useEffect(() => {\n        let frame: any\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            const initial = isDisableInitial\n                ? (open ? v.to : v.from)\n                : (open ? v.from : v.to)\n\n            setCls(style({\n                ...initial,\n                transition: 'none'\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            setTimeout(() => {\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            }, 150);\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;AACA;;AAEJ;AACJ;;AAII;;AAEI;;AAEI;;;AAIJ;;;AAGI;AACA;;;AAOR;AAEA;AAEA;AACI;AACI;;;AAGR;;;;;AAOI;;;;;AAMA;AAEA;AAGS;AACA;;AAGA;;AAIL;AACA;;;AAEA;AACA;;;AAIA;AACA;AACI;;;AAGJ;AACA;AACI;;;AAEI;AACA;;;AAEA;AACA;;AAER;;;;;;AAQR;AACA;AACI;AAEA;AACA;;;;AAGI;;;AAGX;AACL;;"}
+{"version":3,"file":"index.js","sources":["../../src/Transition/index.tsx"],"sourcesContent":["\"use client\";\nimport React, { cloneElement, Children, useState, useEffect, useRef, isValidElement } 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            props.transition = 'none'\n        }\n        return style(props)\n    })\n\n\n    useEffect(() => {\n        let frame: any\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            const initial = isDisableInitial\n                ? (open ? v.to : v.from)\n                : (open ? v.from : v.to)\n\n            setCls(style({\n                ...initial,\n                transition: 'none'\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            setTimeout(() => {\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            }, 50);\n        }\n    }, [rect, open, variant])\n\n\n\n    const childs = Children.toArray(children)\n    if (childs.length !== 1) {\n        throw new Error(\"Transition expects exactly one child.\");\n    }\n    const child = childs[0]\n    if (!isValidElement(child)) {\n        throw new Error(\"Transition expects a valid React element.\");\n    }\n\n    return cloneElement(child, {\n        className: cls,\n        ref: (node: HTMLElement) => {\n            ref.current = node;\n\n            const childRef = (child as any).ref;\n            if (typeof childRef === \"function\") {\n                childRef(node);\n            } else if (childRef) {\n                childRef.current = node;\n            }\n        }\n    } as any);\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;AACA;;AAEJ;AACJ;;AAII;;AAEI;;AAEI;;;AAIJ;;;AAGI;AACA;;;AAOR;AAEA;AAEA;AACI;AACI;;;AAGR;;;;;AAOI;;;;;AAMA;AAEA;AAGS;AACA;;AAGA;;AAIL;AACA;;;AAEA;AACA;;;AAIA;AACA;AACI;;;AAGJ;AACA;AACI;;;AAEI;AACA;;;AAEA;AACA;;AAER;;;;;AAQZ;AACI;;AAEJ;AACA;AACI;;;AAIA;AACA;AACI;AAEA;AACA;;;;AAGI;;;AAGJ;AACZ;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xanui/core",
-  "version": "1.2.69",
+  "version": "1.2.71",
   "description": "Xanui Core Library",
   "private": false,
   "main": "./index.cjs",