@payloadcms/ui 3.71.0-internal-debug.e053082 → 3.71.0-internal.49c4f67

package/dist/elements/AnimateHeight/index.js

@@ -1,91 +1,80 @@
 'use client';
-import { jsxDEV as _jsxDEV } from "react/jsx-dev-runtime";
+
+import { jsx as _jsx } from "react/jsx-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__*/ _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,
+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: {
-            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);
+          display: childrenDisplay
+        }
+      } : {}),
+      children: children
+    })
+  });
 };
-
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"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"}
+{"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":[]}

package/dist/elements/AnimateHeight/usePatchAnimateHeight.js

@@ -1,75 +1,72 @@
 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;
-        };
-        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
+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
+  };
 };
-
 //# sourceMappingURL=usePatchAnimateHeight.js.map

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

@@ -1 +1 @@
-{"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"}
+{"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":[]}