@payloadcms/ui 3.71.0-canary.2 → 3.71.0-internal-debug.dea9d74

package/dist/elements/AnimateHeight/index.js

@@ -1,80 +1,91 @@
 'use client';
-
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxDEV as _jsxDEV } from "react/jsx-dev-runtime";
 import React, { useEffect, useRef } from 'react';
 import { usePatchAnimateHeight } from './usePatchAnimateHeight.js';
 import './index.scss';
-export const AnimateHeight = ({
-  id,
-  children,
-  className,
-  duration = 300,
-  height
-}) => {
-  const [open, setOpen] = React.useState(() => Boolean(height));
-  const prevIsOpen = useRef(open);
-  const [childrenDisplay, setChildrenDisplay] = React.useState(() => open ? '' : 'none');
-  const [parentOverflow, setParentOverflow] = React.useState(() => open ? '' : 'hidden');
-  const [isAnimating, setIsAnimating] = React.useState(false);
-  const containerRef = useRef(null);
-  const contentRef = useRef(null);
-  useEffect(() => {
-    let displayTimer;
-    let overflowTimer;
-    const newIsOpen = Boolean(height);
-    const hasChanged = prevIsOpen.current !== newIsOpen;
-    prevIsOpen.current = newIsOpen;
-    if (hasChanged) {
-      setIsAnimating(true);
-      setParentOverflow('hidden');
-      if (newIsOpen) {
-        setChildrenDisplay('');
-      } else {
-        // `display: none` once closed
-        displayTimer = window.setTimeout(() => {
-          setChildrenDisplay('none');
-        }, duration);
-      }
-      setOpen(newIsOpen);
-      // reset overflow once open
-      overflowTimer = window.setTimeout(() => {
-        setParentOverflow('');
-        setIsAnimating(false);
-      }, duration);
-    }
-    return () => {
-      if (displayTimer) {
-        clearTimeout(displayTimer);
-      }
-      if (overflowTimer) {
-        clearTimeout(overflowTimer);
-      }
-    };
-  }, [height, duration]);
-  usePatchAnimateHeight({
-    containerRef,
-    contentRef,
-    duration,
-    open
-  });
-  return /*#__PURE__*/_jsx("div", {
-    "aria-hidden": !open,
-    className: [className, 'rah-static', open && height === 'auto' && 'rah-static--height-auto', isAnimating && `rah-animating--${open ? 'down' : 'up'}`, isAnimating && height === 'auto' && `rah-animating--to-height-auto`].filter(Boolean).join(' '),
-    id: id,
-    ref: containerRef,
-    style: {
-      overflow: parentOverflow,
-      transition: `height ${duration}ms ease`
-    },
-    children: /*#__PURE__*/_jsx("div", {
-      ref: contentRef,
-      ...(childrenDisplay ? {
-        style: {
-          display: childrenDisplay
+export const AnimateHeight = ({ id, children, className, duration = 300, height })=>{
+    const [open, setOpen] = React.useState(()=>Boolean(height));
+    const prevIsOpen = useRef(open);
+    const [childrenDisplay, setChildrenDisplay] = React.useState(()=>open ? '' : 'none');
+    const [parentOverflow, setParentOverflow] = React.useState(()=>open ? '' : 'hidden');
+    const [isAnimating, setIsAnimating] = React.useState(false);
+    const containerRef = useRef(null);
+    const contentRef = useRef(null);
+    useEffect(()=>{
+        let displayTimer;
+        let overflowTimer;
+        const newIsOpen = Boolean(height);
+        const hasChanged = prevIsOpen.current !== newIsOpen;
+        prevIsOpen.current = newIsOpen;
+        if (hasChanged) {
+            setIsAnimating(true);
+            setParentOverflow('hidden');
+            if (newIsOpen) {
+                setChildrenDisplay('');
+            } else {
+                // `display: none` once closed
+                displayTimer = window.setTimeout(()=>{
+                    setChildrenDisplay('none');
+                }, duration);
+            }
+            setOpen(newIsOpen);
+            // reset overflow once open
+            overflowTimer = window.setTimeout(()=>{
+                setParentOverflow('');
+                setIsAnimating(false);
+            }, duration);
         }
-      } : {}),
-      children: children
-    })
-  });
+        return ()=>{
+            if (displayTimer) {
+                clearTimeout(displayTimer);
+            }
+            if (overflowTimer) {
+                clearTimeout(overflowTimer);
+            }
+        };
+    }, [
+        height,
+        duration
+    ]);
+    usePatchAnimateHeight({
+        containerRef,
+        contentRef,
+        duration,
+        open
+    });
+    return /*#__PURE__*/ _jsxDEV("div", {
+        "aria-hidden": !open,
+        className: [
+            className,
+            'rah-static',
+            open && height === 'auto' && 'rah-static--height-auto',
+            isAnimating && `rah-animating--${open ? 'down' : 'up'}`,
+            isAnimating && height === 'auto' && `rah-animating--to-height-auto`
+        ].filter(Boolean).join(' '),
+        id: id,
+        ref: containerRef,
+        style: {
+            overflow: parentOverflow,
+            transition: `height ${duration}ms ease`
+        },
+        children: /*#__PURE__*/ _jsxDEV("div", {
+            ref: contentRef,
+            ...childrenDisplay ? {
+                style: {
+                    display: childrenDisplay
+                }
+            } : {},
+            children: children
+        }, void 0, false, {
+            fileName: "src/elements/AnimateHeight/index.tsx",
+            lineNumber: 98,
+            columnNumber: 7
+        }, this)
+    }, void 0, false, {
+        fileName: "src/elements/AnimateHeight/index.tsx",
+        lineNumber: 80,
+        columnNumber: 5
+    }, this);
 };
+
 //# sourceMappingURL=index.js.map

package/dist/elements/AnimateHeight/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","useEffect","useRef","usePatchAnimateHeight","AnimateHeight","id","children","className","duration","height","open","setOpen","useState","Boolean","prevIsOpen","childrenDisplay","setChildrenDisplay","parentOverflow","setParentOverflow","isAnimating","setIsAnimating","containerRef","contentRef","displayTimer","overflowTimer","newIsOpen","hasChanged","current","window","setTimeout","clearTimeout","_jsx","filter","join","ref","style","overflow","transition","display"],"sources":["../../../src/elements/AnimateHeight/index.tsx"],"sourcesContent":["'use client'\nimport React, { useEffect, useRef } from 'react'\n\nimport { usePatchAnimateHeight } from './usePatchAnimateHeight.js'\nimport './index.scss'\n\nexport const AnimateHeight: React.FC<{\n  children: React.ReactNode\n  className?: string\n  duration?: number\n  height?: 'auto' | number\n  id?: string\n}> = ({ id, children, className, duration = 300, height }) => {\n  const [open, setOpen] = React.useState(() => Boolean(height))\n\n  const prevIsOpen = useRef(open)\n\n  const [childrenDisplay, setChildrenDisplay] = React.useState<CSSStyleDeclaration['display']>(\n    () => (open ? '' : 'none'),\n  )\n\n  const [parentOverflow, setParentOverflow] = React.useState<CSSStyleDeclaration['overflow']>(() =>\n    open ? '' : 'hidden',\n  )\n\n  const [isAnimating, setIsAnimating] = React.useState(false)\n\n  const containerRef = useRef<HTMLDivElement>(null)\n  const contentRef = useRef<HTMLDivElement>(null)\n\n  useEffect(() => {\n    let displayTimer: number\n    let overflowTimer: number\n\n    const newIsOpen = Boolean(height)\n    const hasChanged = prevIsOpen.current !== newIsOpen\n    prevIsOpen.current = newIsOpen\n\n    if (hasChanged) {\n      setIsAnimating(true)\n      setParentOverflow('hidden')\n\n      if (newIsOpen) {\n        setChildrenDisplay('')\n      } else {\n        // `display: none` once closed\n        displayTimer = window.setTimeout(() => {\n          setChildrenDisplay('none')\n        }, duration)\n      }\n\n      setOpen(newIsOpen)\n\n      // reset overflow once open\n      overflowTimer = window.setTimeout(() => {\n        setParentOverflow('')\n        setIsAnimating(false)\n      }, duration)\n    }\n\n    return () => {\n      if (displayTimer) {\n        clearTimeout(displayTimer)\n      }\n\n      if (overflowTimer) {\n        clearTimeout(overflowTimer)\n      }\n    }\n  }, [height, duration])\n\n  usePatchAnimateHeight({\n    containerRef,\n    contentRef,\n    duration,\n    open,\n  })\n\n  return (\n    <div\n      aria-hidden={!open}\n      className={[\n        className,\n        'rah-static',\n        open && height === 'auto' && 'rah-static--height-auto',\n        isAnimating && `rah-animating--${open ? 'down' : 'up'}`,\n        isAnimating && height === 'auto' && `rah-animating--to-height-auto`,\n      ]\n        .filter(Boolean)\n        .join(' ')}\n      id={id}\n      ref={containerRef}\n      style={{\n        overflow: parentOverflow,\n        transition: `height ${duration}ms ease`,\n      }}\n    >\n      <div ref={contentRef} {...(childrenDisplay ? { style: { display: childrenDisplay } } : {})}>\n        {children}\n      </div>\n    </div>\n  )\n}\n"],"mappings":"AAAA;;;AACA,OAAOA,KAAA,IAASC,SAAS,EAAEC,MAAM,QAAQ;AAEzC,SAASC,qBAAqB,QAAQ;AACtC,OAAO;AAEP,OAAO,MAAMC,aAAA,GAMRA,CAAC;EAAEC,EAAE;EAAEC,QAAQ;EAAEC,SAAS;EAAEC,QAAA,GAAW,GAAG;EAAEC;AAAM,CAAE;EACvD,MAAM,CAACC,IAAA,EAAMC,OAAA,CAAQ,GAAGX,KAAA,CAAMY,QAAQ,CAAC,MAAMC,OAAA,CAAQJ,MAAA;EAErD,MAAMK,UAAA,GAAaZ,MAAA,CAAOQ,IAAA;EAE1B,MAAM,CAACK,eAAA,EAAiBC,kBAAA,CAAmB,GAAGhB,KAAA,CAAMY,QAAQ,CAC1D,MAAOF,IAAA,GAAO,KAAK;EAGrB,MAAM,CAACO,cAAA,EAAgBC,iBAAA,CAAkB,GAAGlB,KAAA,CAAMY,QAAQ,CAAkC,MAC1FF,IAAA,GAAO,KAAK;EAGd,MAAM,CAACS,WAAA,EAAaC,cAAA,CAAe,GAAGpB,KAAA,CAAMY,QAAQ,CAAC;EAErD,MAAMS,YAAA,GAAenB,MAAA,CAAuB;EAC5C,MAAMoB,UAAA,GAAapB,MAAA,CAAuB;EAE1CD,SAAA,CAAU;IACR,IAAIsB,YAAA;IACJ,IAAIC,aAAA;IAEJ,MAAMC,SAAA,GAAYZ,OAAA,CAAQJ,MAAA;IAC1B,MAAMiB,UAAA,GAAaZ,UAAA,CAAWa,OAAO,KAAKF,SAAA;IAC1CX,UAAA,CAAWa,OAAO,GAAGF,SAAA;IAErB,IAAIC,UAAA,EAAY;MACdN,cAAA,CAAe;MACfF,iBAAA,CAAkB;MAElB,IAAIO,SAAA,EAAW;QACbT,kBAAA,CAAmB;MACrB,OAAO;QACL;QACAO,YAAA,GAAeK,MAAA,CAAOC,UAAU,CAAC;UAC/Bb,kBAAA,CAAmB;QACrB,GAAGR,QAAA;MACL;MAEAG,OAAA,CAAQc,SAAA;MAER;MACAD,aAAA,GAAgBI,MAAA,CAAOC,UAAU,CAAC;QAChCX,iBAAA,CAAkB;QAClBE,cAAA,CAAe;MACjB,GAAGZ,QAAA;IACL;IAEA,OAAO;MACL,IAAIe,YAAA,EAAc;QAChBO,YAAA,CAAaP,YAAA;MACf;MAEA,IAAIC,aAAA,EAAe;QACjBM,YAAA,CAAaN,aAAA;MACf;IACF;EACF,GAAG,CAACf,MAAA,EAAQD,QAAA,CAAS;EAErBL,qBAAA,CAAsB;IACpBkB,YAAA;IACAC,UAAA;IACAd,QAAA;IACAE;EACF;EAEA,oBACEqB,IAAA,CAAC;IACC,eAAa,CAACrB,IAAA;IACdH,SAAA,EAAW,CACTA,SAAA,EACA,cACAG,IAAA,IAAQD,MAAA,KAAW,UAAU,2BAC7BU,WAAA,IAAe,kBAAkBT,IAAA,GAAO,SAAS,MAAM,EACvDS,WAAA,IAAeV,MAAA,KAAW,UAAU,+BAA+B,CACpE,CACEuB,MAAM,CAACnB,OAAA,EACPoB,IAAI,CAAC;IACR5B,EAAA,EAAIA,EAAA;IACJ6B,GAAA,EAAKb,YAAA;IACLc,KAAA,EAAO;MACLC,QAAA,EAAUnB,cAAA;MACVoB,UAAA,EAAY,UAAU7B,QAAA;IACxB;cAEA,aAAAuB,IAAA,CAAC;MAAIG,GAAA,EAAKZ,UAAA;MAAa,IAAIP,eAAA,GAAkB;QAAEoB,KAAA,EAAO;UAAEG,OAAA,EAASvB;QAAgB;MAAE,IAAI,CAAC,CAAC;gBACtFT;;;AAIT","ignoreList":[]}
+{"version":3,"sources":["../../../src/elements/AnimateHeight/index.tsx"],"sourcesContent":["'use client'\nimport React, { useEffect, useRef } from 'react'\n\nimport { usePatchAnimateHeight } from './usePatchAnimateHeight.js'\nimport './index.scss'\n\nexport const AnimateHeight: React.FC<{\n  children: React.ReactNode\n  className?: string\n  duration?: number\n  height?: 'auto' | number\n  id?: string\n}> = ({ id, children, className, duration = 300, height }) => {\n  const [open, setOpen] = React.useState(() => Boolean(height))\n\n  const prevIsOpen = useRef(open)\n\n  const [childrenDisplay, setChildrenDisplay] = React.useState<CSSStyleDeclaration['display']>(\n    () => (open ? '' : 'none'),\n  )\n\n  const [parentOverflow, setParentOverflow] = React.useState<CSSStyleDeclaration['overflow']>(() =>\n    open ? '' : 'hidden',\n  )\n\n  const [isAnimating, setIsAnimating] = React.useState(false)\n\n  const containerRef = useRef<HTMLDivElement>(null)\n  const contentRef = useRef<HTMLDivElement>(null)\n\n  useEffect(() => {\n    let displayTimer: number\n    let overflowTimer: number\n\n    const newIsOpen = Boolean(height)\n    const hasChanged = prevIsOpen.current !== newIsOpen\n    prevIsOpen.current = newIsOpen\n\n    if (hasChanged) {\n      setIsAnimating(true)\n      setParentOverflow('hidden')\n\n      if (newIsOpen) {\n        setChildrenDisplay('')\n      } else {\n        // `display: none` once closed\n        displayTimer = window.setTimeout(() => {\n          setChildrenDisplay('none')\n        }, duration)\n      }\n\n      setOpen(newIsOpen)\n\n      // reset overflow once open\n      overflowTimer = window.setTimeout(() => {\n        setParentOverflow('')\n        setIsAnimating(false)\n      }, duration)\n    }\n\n    return () => {\n      if (displayTimer) {\n        clearTimeout(displayTimer)\n      }\n\n      if (overflowTimer) {\n        clearTimeout(overflowTimer)\n      }\n    }\n  }, [height, duration])\n\n  usePatchAnimateHeight({\n    containerRef,\n    contentRef,\n    duration,\n    open,\n  })\n\n  return (\n    <div\n      aria-hidden={!open}\n      className={[\n        className,\n        'rah-static',\n        open && height === 'auto' && 'rah-static--height-auto',\n        isAnimating && `rah-animating--${open ? 'down' : 'up'}`,\n        isAnimating && height === 'auto' && `rah-animating--to-height-auto`,\n      ]\n        .filter(Boolean)\n        .join(' ')}\n      id={id}\n      ref={containerRef}\n      style={{\n        overflow: parentOverflow,\n        transition: `height ${duration}ms ease`,\n      }}\n    >\n      <div ref={contentRef} {...(childrenDisplay ? { style: { display: childrenDisplay } } : {})}>\n        {children}\n      </div>\n    </div>\n  )\n}\n"],"names":["React","useEffect","useRef","usePatchAnimateHeight","AnimateHeight","id","children","className","duration","height","open","setOpen","useState","Boolean","prevIsOpen","childrenDisplay","setChildrenDisplay","parentOverflow","setParentOverflow","isAnimating","setIsAnimating","containerRef","contentRef","displayTimer","overflowTimer","newIsOpen","hasChanged","current","window","setTimeout","clearTimeout","div","aria-hidden","filter","join","ref","style","overflow","transition","display"],"mappings":"AAAA;;AACA,OAAOA,SAASC,SAAS,EAAEC,MAAM,QAAQ,QAAO;AAEhD,SAASC,qBAAqB,QAAQ,6BAA4B;AAClE,OAAO,eAAc;AAErB,OAAO,MAAMC,gBAMR,CAAC,EAAEC,EAAE,EAAEC,QAAQ,EAAEC,SAAS,EAAEC,WAAW,GAAG,EAAEC,MAAM,EAAE;IACvD,MAAM,CAACC,MAAMC,QAAQ,GAAGX,MAAMY,QAAQ,CAAC,IAAMC,QAAQJ;IAErD,MAAMK,aAAaZ,OAAOQ;IAE1B,MAAM,CAACK,iBAAiBC,mBAAmB,GAAGhB,MAAMY,QAAQ,CAC1D,IAAOF,OAAO,KAAK;IAGrB,MAAM,CAACO,gBAAgBC,kBAAkB,GAAGlB,MAAMY,QAAQ,CAAkC,IAC1FF,OAAO,KAAK;IAGd,MAAM,CAACS,aAAaC,eAAe,GAAGpB,MAAMY,QAAQ,CAAC;IAErD,MAAMS,eAAenB,OAAuB;IAC5C,MAAMoB,aAAapB,OAAuB;IAE1CD,UAAU;QACR,IAAIsB;QACJ,IAAIC;QAEJ,MAAMC,YAAYZ,QAAQJ;QAC1B,MAAMiB,aAAaZ,WAAWa,OAAO,KAAKF;QAC1CX,WAAWa,OAAO,GAAGF;QAErB,IAAIC,YAAY;YACdN,eAAe;YACfF,kBAAkB;YAElB,IAAIO,WAAW;gBACbT,mBAAmB;YACrB,OAAO;gBACL,8BAA8B;gBAC9BO,eAAeK,OAAOC,UAAU,CAAC;oBAC/Bb,mBAAmB;gBACrB,GAAGR;YACL;YAEAG,QAAQc;YAER,2BAA2B;YAC3BD,gBAAgBI,OAAOC,UAAU,CAAC;gBAChCX,kBAAkB;gBAClBE,eAAe;YACjB,GAAGZ;QACL;QAEA,OAAO;YACL,IAAIe,cAAc;gBAChBO,aAAaP;YACf;YAEA,IAAIC,eAAe;gBACjBM,aAAaN;YACf;QACF;IACF,GAAG;QAACf;QAAQD;KAAS;IAErBL,sBAAsB;QACpBkB;QACAC;QACAd;QACAE;IACF;IAEA,qBACE,QAACqB;QACCC,eAAa,CAACtB;QACdH,WAAW;YACTA;YACA;YACAG,QAAQD,WAAW,UAAU;YAC7BU,eAAe,CAAC,eAAe,EAAET,OAAO,SAAS,MAAM;YACvDS,eAAeV,WAAW,UAAU,CAAC,6BAA6B,CAAC;SACpE,CACEwB,MAAM,CAACpB,SACPqB,IAAI,CAAC;QACR7B,IAAIA;QACJ8B,KAAKd;QACLe,OAAO;YACLC,UAAUpB;YACVqB,YAAY,CAAC,OAAO,EAAE9B,SAAS,OAAO,CAAC;QACzC;kBAEA,cAAA,QAACuB;YAAII,KAAKb;YAAa,GAAIP,kBAAkB;gBAAEqB,OAAO;oBAAEG,SAASxB;gBAAgB;YAAE,IAAI,CAAC,CAAC;sBACtFT;;;;;;;;;;;AAIT,EAAC"}

package/dist/elements/AnimateHeight/usePatchAnimateHeight.js

@@ -1,72 +1,75 @@
 import { useEffect, useMemo, useRef, useState } from 'react';
-export const usePatchAnimateHeight = ({
-  containerRef,
-  contentRef,
-  duration,
-  open
-}) => {
-  const browserSupportsKeywordAnimation = useMemo(() => typeof CSS !== 'undefined' && CSS && CSS.supports ? CSS.supports('interpolate-size', 'allow-keywords') : false, []);
-  const hasInitialized = useRef(false);
-  const previousOpenState = useRef(open);
-  const [isAnimating, setIsAnimating] = useState(false);
-  const resizeObserverRef = useRef(null);
-  useEffect(() => {
-    const container = containerRef.current;
-    const content = contentRef.current;
-    if (!container || !content || browserSupportsKeywordAnimation) {
-      return;
-    }
-    const setContainerHeight = height => {
-      container.style.height = height;
+export const usePatchAnimateHeight = ({ containerRef, contentRef, duration, open })=>{
+    const browserSupportsKeywordAnimation = useMemo(()=>typeof CSS !== 'undefined' && CSS && CSS.supports ? CSS.supports('interpolate-size', 'allow-keywords') : false, []);
+    const hasInitialized = useRef(false);
+    const previousOpenState = useRef(open);
+    const [isAnimating, setIsAnimating] = useState(false);
+    const resizeObserverRef = useRef(null);
+    useEffect(()=>{
+        const container = containerRef.current;
+        const content = contentRef.current;
+        if (!container || !content || browserSupportsKeywordAnimation) {
+            return;
+        }
+        const setContainerHeight = (height)=>{
+            container.style.height = height;
+        };
+        const handleTransitionEnd = ()=>{
+            if (container) {
+                container.style.transition = '';
+                container.style.height = open ? 'auto' : '0px';
+                setIsAnimating(false);
+            }
+        };
+        const animate = ()=>{
+            if (!hasInitialized.current && open) {
+                // Skip animation on first render
+                setContainerHeight('auto');
+                setIsAnimating(false);
+                return;
+            }
+            hasInitialized.current = true;
+            if (previousOpenState.current !== open) {
+                setContainerHeight(open ? '0px' : `${content.scrollHeight}px`);
+            }
+            // Trigger reflow
+            container.offsetHeight;
+            // eslint-disable-line @typescript-eslint/no-unused-expressions
+            setIsAnimating(true);
+            container.style.transition = `height ${duration}ms ease`;
+            setContainerHeight(open ? `${content.scrollHeight}px` : '0px');
+            const onTransitionEnd = ()=>{
+                handleTransitionEnd();
+                container.removeEventListener('transitionend', onTransitionEnd);
+            };
+            container.addEventListener('transitionend', onTransitionEnd);
+        };
+        animate();
+        previousOpenState.current = open;
+        // Setup ResizeObserver
+        resizeObserverRef.current = new ResizeObserver(()=>{
+            if (isAnimating) {
+                container.style.height = open ? `${content.scrollHeight}px` : '0px';
+            }
+        });
+        resizeObserverRef.current.observe(content);
+        return ()=>{
+            if (container) {
+                container.style.transition = '';
+                container.style.height = '';
+            }
+            resizeObserverRef.current?.disconnect();
+        };
+    }, [
+        open,
+        duration,
+        containerRef,
+        contentRef,
+        browserSupportsKeywordAnimation
+    ]);
+    return {
+        browserSupportsKeywordAnimation
     };
-    const handleTransitionEnd = () => {
-      if (container) {
-        container.style.transition = '';
-        container.style.height = open ? 'auto' : '0px';
-        setIsAnimating(false);
-      }
-    };
-    const animate = () => {
-      if (!hasInitialized.current && open) {
-        // Skip animation on first render
-        setContainerHeight('auto');
-        setIsAnimating(false);
-        return;
-      }
-      hasInitialized.current = true;
-      if (previousOpenState.current !== open) {
-        setContainerHeight(open ? '0px' : `${content.scrollHeight}px`);
-      }
-      // Trigger reflow
-      container.offsetHeight; // eslint-disable-line @typescript-eslint/no-unused-expressions
-      setIsAnimating(true);
-      container.style.transition = `height ${duration}ms ease`;
-      setContainerHeight(open ? `${content.scrollHeight}px` : '0px');
-      const onTransitionEnd = () => {
-        handleTransitionEnd();
-        container.removeEventListener('transitionend', onTransitionEnd);
-      };
-      container.addEventListener('transitionend', onTransitionEnd);
-    };
-    animate();
-    previousOpenState.current = open;
-    // Setup ResizeObserver
-    resizeObserverRef.current = new ResizeObserver(() => {
-      if (isAnimating) {
-        container.style.height = open ? `${content.scrollHeight}px` : '0px';
-      }
-    });
-    resizeObserverRef.current.observe(content);
-    return () => {
-      if (container) {
-        container.style.transition = '';
-        container.style.height = '';
-      }
-      resizeObserverRef.current?.disconnect();
-    };
-  }, [open, duration, containerRef, contentRef, browserSupportsKeywordAnimation]);
-  return {
-    browserSupportsKeywordAnimation
-  };
 };
+
 //# sourceMappingURL=usePatchAnimateHeight.js.map

package/dist/elements/AnimateHeight/usePatchAnimateHeight.js.map

@@ -1 +1 @@
-{"version":3,"file":"usePatchAnimateHeight.js","names":["useEffect","useMemo","useRef","useState","usePatchAnimateHeight","containerRef","contentRef","duration","open","browserSupportsKeywordAnimation","CSS","supports","hasInitialized","previousOpenState","isAnimating","setIsAnimating","resizeObserverRef","container","current","content","setContainerHeight","height","style","handleTransitionEnd","transition","animate","scrollHeight","offsetHeight","onTransitionEnd","removeEventListener","addEventListener","ResizeObserver","observe","disconnect"],"sources":["../../../src/elements/AnimateHeight/usePatchAnimateHeight.ts"],"sourcesContent":["import { useEffect, useMemo, useRef, useState } from 'react'\n\nexport const usePatchAnimateHeight = ({\n  containerRef,\n  contentRef,\n  duration,\n  open,\n}: {\n  containerRef: React.RefObject<HTMLDivElement>\n  contentRef: React.RefObject<HTMLDivElement>\n  duration: number\n  open: boolean\n}): { browserSupportsKeywordAnimation: boolean } => {\n  const browserSupportsKeywordAnimation = useMemo(\n    () =>\n      typeof CSS !== 'undefined' && CSS && CSS.supports\n        ? CSS.supports('interpolate-size', 'allow-keywords')\n        : false,\n    [],\n  )\n\n  const hasInitialized = useRef(false)\n  const previousOpenState = useRef(open)\n  const [isAnimating, setIsAnimating] = useState(false)\n  const resizeObserverRef = useRef<null | ResizeObserver>(null)\n\n  useEffect(() => {\n    const container = containerRef.current\n    const content = contentRef.current\n\n    if (!container || !content || browserSupportsKeywordAnimation) {\n      return\n    }\n\n    const setContainerHeight = (height: string) => {\n      container.style.height = height\n    }\n\n    const handleTransitionEnd = () => {\n      if (container) {\n        container.style.transition = ''\n        container.style.height = open ? 'auto' : '0px'\n        setIsAnimating(false)\n      }\n    }\n\n    const animate = () => {\n      if (!hasInitialized.current && open) {\n        // Skip animation on first render\n        setContainerHeight('auto')\n        setIsAnimating(false)\n        return\n      }\n\n      hasInitialized.current = true\n\n      if (previousOpenState.current !== open) {\n        setContainerHeight(open ? '0px' : `${content.scrollHeight}px`)\n      }\n\n      // Trigger reflow\n      container.offsetHeight // eslint-disable-line @typescript-eslint/no-unused-expressions\n\n      setIsAnimating(true)\n      container.style.transition = `height ${duration}ms ease`\n      setContainerHeight(open ? `${content.scrollHeight}px` : '0px')\n\n      const onTransitionEnd = () => {\n        handleTransitionEnd()\n        container.removeEventListener('transitionend', onTransitionEnd)\n      }\n\n      container.addEventListener('transitionend', onTransitionEnd)\n    }\n\n    animate()\n    previousOpenState.current = open\n\n    // Setup ResizeObserver\n    resizeObserverRef.current = new ResizeObserver(() => {\n      if (isAnimating) {\n        container.style.height = open ? `${content.scrollHeight}px` : '0px'\n      }\n    })\n    resizeObserverRef.current.observe(content)\n\n    return () => {\n      if (container) {\n        container.style.transition = ''\n        container.style.height = ''\n      }\n      resizeObserverRef.current?.disconnect()\n    }\n  }, [open, duration, containerRef, contentRef, browserSupportsKeywordAnimation])\n\n  return { browserSupportsKeywordAnimation }\n}\n"],"mappings":"AAAA,SAASA,SAAS,EAAEC,OAAO,EAAEC,MAAM,EAAEC,QAAQ,QAAQ;AAErD,OAAO,MAAMC,qBAAA,GAAwBA,CAAC;EACpCC,YAAY;EACZC,UAAU;EACVC,QAAQ;EACRC;AAAI,CAML;EACC,MAAMC,+BAAA,GAAkCR,OAAA,CACtC,MACE,OAAOS,GAAA,KAAQ,eAAeA,GAAA,IAAOA,GAAA,CAAIC,QAAQ,GAC7CD,GAAA,CAAIC,QAAQ,CAAC,oBAAoB,oBACjC,OACN,EAAE;EAGJ,MAAMC,cAAA,GAAiBV,MAAA,CAAO;EAC9B,MAAMW,iBAAA,GAAoBX,MAAA,CAAOM,IAAA;EACjC,MAAM,CAACM,WAAA,EAAaC,cAAA,CAAe,GAAGZ,QAAA,CAAS;EAC/C,MAAMa,iBAAA,GAAoBd,MAAA,CAA8B;EAExDF,SAAA,CAAU;IACR,MAAMiB,SAAA,GAAYZ,YAAA,CAAaa,OAAO;IACtC,MAAMC,OAAA,GAAUb,UAAA,CAAWY,OAAO;IAElC,IAAI,CAACD,SAAA,IAAa,CAACE,OAAA,IAAWV,+BAAA,EAAiC;MAC7D;IACF;IAEA,MAAMW,kBAAA,GAAsBC,MAAA;MAC1BJ,SAAA,CAAUK,KAAK,CAACD,MAAM,GAAGA,MAAA;IAC3B;IAEA,MAAME,mBAAA,GAAsBA,CAAA;MAC1B,IAAIN,SAAA,EAAW;QACbA,SAAA,CAAUK,KAAK,CAACE,UAAU,GAAG;QAC7BP,SAAA,CAAUK,KAAK,CAACD,MAAM,GAAGb,IAAA,GAAO,SAAS;QACzCO,cAAA,CAAe;MACjB;IACF;IAEA,MAAMU,OAAA,GAAUA,CAAA;MACd,IAAI,CAACb,cAAA,CAAeM,OAAO,IAAIV,IAAA,EAAM;QACnC;QACAY,kBAAA,CAAmB;QACnBL,cAAA,CAAe;QACf;MACF;MAEAH,cAAA,CAAeM,OAAO,GAAG;MAEzB,IAAIL,iBAAA,CAAkBK,OAAO,KAAKV,IAAA,EAAM;QACtCY,kBAAA,CAAmBZ,IAAA,GAAO,QAAQ,GAAGW,OAAA,CAAQO,YAAY,IAAI;MAC/D;MAEA;MACAT,SAAA,CAAUU,YAAY,EAAC;MAEvBZ,cAAA,CAAe;MACfE,SAAA,CAAUK,KAAK,CAACE,UAAU,GAAG,UAAUjB,QAAA,SAAiB;MACxDa,kBAAA,CAAmBZ,IAAA,GAAO,GAAGW,OAAA,CAAQO,YAAY,IAAI,GAAG;MAExD,MAAME,eAAA,GAAkBA,CAAA;QACtBL,mBAAA;QACAN,SAAA,CAAUY,mBAAmB,CAAC,iBAAiBD,eAAA;MACjD;MAEAX,SAAA,CAAUa,gBAAgB,CAAC,iBAAiBF,eAAA;IAC9C;IAEAH,OAAA;IACAZ,iBAAA,CAAkBK,OAAO,GAAGV,IAAA;IAE5B;IACAQ,iBAAA,CAAkBE,OAAO,GAAG,IAAIa,cAAA,CAAe;MAC7C,IAAIjB,WAAA,EAAa;QACfG,SAAA,CAAUK,KAAK,CAACD,MAAM,GAAGb,IAAA,GAAO,GAAGW,OAAA,CAAQO,YAAY,IAAI,GAAG;MAChE;IACF;IACAV,iBAAA,CAAkBE,OAAO,CAACc,OAAO,CAACb,OAAA;IAElC,OAAO;MACL,IAAIF,SAAA,EAAW;QACbA,SAAA,CAAUK,KAAK,CAACE,UAAU,GAAG;QAC7BP,SAAA,CAAUK,KAAK,CAACD,MAAM,GAAG;MAC3B;MACAL,iBAAA,CAAkBE,OAAO,EAAEe,UAAA;IAC7B;EACF,GAAG,CAACzB,IAAA,EAAMD,QAAA,EAAUF,YAAA,EAAcC,UAAA,EAAYG,+BAAA,CAAgC;EAE9E,OAAO;IAAEA;EAAgC;AAC3C","ignoreList":[]}
+{"version":3,"sources":["../../../src/elements/AnimateHeight/usePatchAnimateHeight.ts"],"sourcesContent":["import { useEffect, useMemo, useRef, useState } from 'react'\n\nexport const usePatchAnimateHeight = ({\n  containerRef,\n  contentRef,\n  duration,\n  open,\n}: {\n  containerRef: React.RefObject<HTMLDivElement>\n  contentRef: React.RefObject<HTMLDivElement>\n  duration: number\n  open: boolean\n}): { browserSupportsKeywordAnimation: boolean } => {\n  const browserSupportsKeywordAnimation = useMemo(\n    () =>\n      typeof CSS !== 'undefined' && CSS && CSS.supports\n        ? CSS.supports('interpolate-size', 'allow-keywords')\n        : false,\n    [],\n  )\n\n  const hasInitialized = useRef(false)\n  const previousOpenState = useRef(open)\n  const [isAnimating, setIsAnimating] = useState(false)\n  const resizeObserverRef = useRef<null | ResizeObserver>(null)\n\n  useEffect(() => {\n    const container = containerRef.current\n    const content = contentRef.current\n\n    if (!container || !content || browserSupportsKeywordAnimation) {\n      return\n    }\n\n    const setContainerHeight = (height: string) => {\n      container.style.height = height\n    }\n\n    const handleTransitionEnd = () => {\n      if (container) {\n        container.style.transition = ''\n        container.style.height = open ? 'auto' : '0px'\n        setIsAnimating(false)\n      }\n    }\n\n    const animate = () => {\n      if (!hasInitialized.current && open) {\n        // Skip animation on first render\n        setContainerHeight('auto')\n        setIsAnimating(false)\n        return\n      }\n\n      hasInitialized.current = true\n\n      if (previousOpenState.current !== open) {\n        setContainerHeight(open ? '0px' : `${content.scrollHeight}px`)\n      }\n\n      // Trigger reflow\n      container.offsetHeight // eslint-disable-line @typescript-eslint/no-unused-expressions\n\n      setIsAnimating(true)\n      container.style.transition = `height ${duration}ms ease`\n      setContainerHeight(open ? `${content.scrollHeight}px` : '0px')\n\n      const onTransitionEnd = () => {\n        handleTransitionEnd()\n        container.removeEventListener('transitionend', onTransitionEnd)\n      }\n\n      container.addEventListener('transitionend', onTransitionEnd)\n    }\n\n    animate()\n    previousOpenState.current = open\n\n    // Setup ResizeObserver\n    resizeObserverRef.current = new ResizeObserver(() => {\n      if (isAnimating) {\n        container.style.height = open ? `${content.scrollHeight}px` : '0px'\n      }\n    })\n    resizeObserverRef.current.observe(content)\n\n    return () => {\n      if (container) {\n        container.style.transition = ''\n        container.style.height = ''\n      }\n      resizeObserverRef.current?.disconnect()\n    }\n  }, [open, duration, containerRef, contentRef, browserSupportsKeywordAnimation])\n\n  return { browserSupportsKeywordAnimation }\n}\n"],"names":["useEffect","useMemo","useRef","useState","usePatchAnimateHeight","containerRef","contentRef","duration","open","browserSupportsKeywordAnimation","CSS","supports","hasInitialized","previousOpenState","isAnimating","setIsAnimating","resizeObserverRef","container","current","content","setContainerHeight","height","style","handleTransitionEnd","transition","animate","scrollHeight","offsetHeight","onTransitionEnd","removeEventListener","addEventListener","ResizeObserver","observe","disconnect"],"mappings":"AAAA,SAASA,SAAS,EAAEC,OAAO,EAAEC,MAAM,EAAEC,QAAQ,QAAQ,QAAO;AAE5D,OAAO,MAAMC,wBAAwB,CAAC,EACpCC,YAAY,EACZC,UAAU,EACVC,QAAQ,EACRC,IAAI,EAML;IACC,MAAMC,kCAAkCR,QACtC,IACE,OAAOS,QAAQ,eAAeA,OAAOA,IAAIC,QAAQ,GAC7CD,IAAIC,QAAQ,CAAC,oBAAoB,oBACjC,OACN,EAAE;IAGJ,MAAMC,iBAAiBV,OAAO;IAC9B,MAAMW,oBAAoBX,OAAOM;IACjC,MAAM,CAACM,aAAaC,eAAe,GAAGZ,SAAS;IAC/C,MAAMa,oBAAoBd,OAA8B;IAExDF,UAAU;QACR,MAAMiB,YAAYZ,aAAaa,OAAO;QACtC,MAAMC,UAAUb,WAAWY,OAAO;QAElC,IAAI,CAACD,aAAa,CAACE,WAAWV,iCAAiC;YAC7D;QACF;QAEA,MAAMW,qBAAqB,CAACC;YAC1BJ,UAAUK,KAAK,CAACD,MAAM,GAAGA;QAC3B;QAEA,MAAME,sBAAsB;YAC1B,IAAIN,WAAW;gBACbA,UAAUK,KAAK,CAACE,UAAU,GAAG;gBAC7BP,UAAUK,KAAK,CAACD,MAAM,GAAGb,OAAO,SAAS;gBACzCO,eAAe;YACjB;QACF;QAEA,MAAMU,UAAU;YACd,IAAI,CAACb,eAAeM,OAAO,IAAIV,MAAM;gBACnC,iCAAiC;gBACjCY,mBAAmB;gBACnBL,eAAe;gBACf;YACF;YAEAH,eAAeM,OAAO,GAAG;YAEzB,IAAIL,kBAAkBK,OAAO,KAAKV,MAAM;gBACtCY,mBAAmBZ,OAAO,QAAQ,GAAGW,QAAQO,YAAY,CAAC,EAAE,CAAC;YAC/D;YAEA,iBAAiB;YACjBT,UAAUU,YAAY;YAAC,+DAA+D;YAEtFZ,eAAe;YACfE,UAAUK,KAAK,CAACE,UAAU,GAAG,CAAC,OAAO,EAAEjB,SAAS,OAAO,CAAC;YACxDa,mBAAmBZ,OAAO,GAAGW,QAAQO,YAAY,CAAC,EAAE,CAAC,GAAG;YAExD,MAAME,kBAAkB;gBACtBL;gBACAN,UAAUY,mBAAmB,CAAC,iBAAiBD;YACjD;YAEAX,UAAUa,gBAAgB,CAAC,iBAAiBF;QAC9C;QAEAH;QACAZ,kBAAkBK,OAAO,GAAGV;QAE5B,uBAAuB;QACvBQ,kBAAkBE,OAAO,GAAG,IAAIa,eAAe;YAC7C,IAAIjB,aAAa;gBACfG,UAAUK,KAAK,CAACD,MAAM,GAAGb,OAAO,GAAGW,QAAQO,YAAY,CAAC,EAAE,CAAC,GAAG;YAChE;QACF;QACAV,kBAAkBE,OAAO,CAACc,OAAO,CAACb;QAElC,OAAO;YACL,IAAIF,WAAW;gBACbA,UAAUK,KAAK,CAACE,UAAU,GAAG;gBAC7BP,UAAUK,KAAK,CAACD,MAAM,GAAG;YAC3B;YACAL,kBAAkBE,OAAO,EAAEe;QAC7B;IACF,GAAG;QAACzB;QAAMD;QAAUF;QAAcC;QAAYG;KAAgC;IAE9E,OAAO;QAAEA;IAAgC;AAC3C,EAAC"}