@payloadcms/ui 3.68.0-internal-debug.e9b66ee → 3.68.0-internal.35482da

package/dist/elements/AnimateHeight/index.js

@@ -1,75 +1,80 @@
 'use client';
+
+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 <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`
-    }}>
-      <div ref={contentRef} {...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);
+    }
+    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
+          display: childrenDisplay
         }
-    } : {}}>
-        {children}
-      </div>
-    </div>;
+      } : {}),
+      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,QACGqB,IACCC,aAAa,CAACtB,MACdH,WAAW;QACTA;QACA;QACAG,QAAQD,WAAW,UAAU;QAC7BU,eAAe,CAAC,eAAe,EAAET,OAAO,SAAS,MAAM;QACvDS,eAAeV,WAAW,UAAU,CAAC,6BAA6B,CAAC;KACpE,CACEwB,MAAM,CAACpB,SACPqB,IAAI,CAAC,MACR7B,IAAIA,IACJ8B,KAAKd,cACLe,OAAO;QACLC,UAAUpB;QACVqB,YAAY,CAAC,OAAO,EAAE9B,SAAS,OAAO,CAAC;IACzC,GACD;MACC,CAACuB,IAAII,KAAKb,aAAa,GAAIP,kBAAkB;QAAEqB,OAAO;YAAEG,SAASxB;QAAgB;IAAE,IAAI,CAAC,CAAC,EAAG;QAC1F,CAACT,SAAS;MACZ,EAAEyB,IAAI;IACR,EAAEA;AAEN,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,73 @@
 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,CAAC;MAAA;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":[]}

package/dist/elements/AppHeader/index.js

@@ -1,6 +1,8 @@
 'use client';
+
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { formatAdminURL } from 'payload/shared';
-import { useEffect, useRef, useState } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import { Account } from '../../graphics/Account/index.js';
 import { useActions } from '../../providers/Actions/index.js';
 import { useConfig } from '../../providers/Config/index.js';
@@ -15,64 +17,103 @@ import { RenderCustomComponent } from '../RenderCustomComponent/index.js';
 import { StepNav } from '../StepNav/index.js';
 import './index.scss';
 const baseClass = 'app-header';
-export function AppHeader({ CustomAvatar, CustomIcon }) {
-    const { t } = useTranslation();
-    const { Actions } = useActions();
-    const { config: { admin: { routes: { account: accountRoute } }, localization, routes: { admin: adminRoute } } } = useConfig();
-    const { navOpen } = useNav();
-    const customControlsRef = useRef(null);
-    const [isScrollable, setIsScrollable] = useState(false);
-    useEffect(()=>{
-        const checkIsScrollable = ()=>{
-            const el = customControlsRef.current;
-            if (el) {
-                const scrollable = el.scrollWidth > el.clientWidth;
-                setIsScrollable(scrollable);
-            }
-        };
-        checkIsScrollable();
-        window.addEventListener('resize', checkIsScrollable);
-        return ()=>{
-            window.removeEventListener('resize', checkIsScrollable);
-        };
-    }, [
-        Actions
-    ]);
-    const ActionComponents = Actions ? Object.values(Actions) : [];
-    return <header className={[
-        baseClass,
-        navOpen && `${baseClass}--nav-open`
-    ].filter(Boolean).join(' ')}>
-      <div className={`${baseClass}__bg`}/>
-      <div className={`${baseClass}__content`}>
-        <div className={`${baseClass}__wrapper`}>
-          <NavToggler className={`${baseClass}__mobile-nav-toggler`} tabIndex={-1}>
-            <Hamburger/>
-          </NavToggler>
-          <div className={`${baseClass}__controls-wrapper`}>
-            <div className={`${baseClass}__step-nav-wrapper`}>
-              <StepNav className={`${baseClass}__step-nav`} CustomIcon={CustomIcon}/>
-            </div>
-            <div className={`${baseClass}__actions-wrapper`}>
-              <div className={`${baseClass}__actions`} ref={customControlsRef}>
-                {ActionComponents.map((Action, i)=><div className={isScrollable && i === ActionComponents.length - 1 ? `${baseClass}__last-action` : ''} key={i}>
-                    {Action}
-                  </div>)}
-              </div>
-              {isScrollable && <div className={`${baseClass}__gradient-placeholder`}/>}
-            </div>
-            {localization && <LocalizerLabel ariaLabel="invisible" className={`${baseClass}__localizer-spacing`}/>}
-            <Link aria-label={t('authentication:account')} className={`${baseClass}__account`} href={formatAdminURL({
-        adminRoute,
-        path: accountRoute
-    })} prefetch={false} tabIndex={0}>
-              <RenderCustomComponent CustomComponent={CustomAvatar} Fallback={<Account/>}/>
-            </Link>
-          </div>
-        </div>
-      </div>
-      <Localizer className={`${baseClass}__localizer`}/>
-    </header>;
+export function AppHeader({
+  CustomAvatar,
+  CustomIcon
+}) {
+  const {
+    t
+  } = useTranslation();
+  const {
+    Actions
+  } = useActions();
+  const {
+    config: {
+      admin: {
+        routes: {
+          account: accountRoute
+        }
+      },
+      localization,
+      routes: {
+        admin: adminRoute
+      }
+    }
+  } = useConfig();
+  const {
+    navOpen
+  } = useNav();
+  const customControlsRef = useRef(null);
+  const [isScrollable, setIsScrollable] = useState(false);
+  useEffect(() => {
+    const checkIsScrollable = () => {
+      const el = customControlsRef.current;
+      if (el) {
+        const scrollable = el.scrollWidth > el.clientWidth;
+        setIsScrollable(scrollable);
+      }
+    };
+    checkIsScrollable();
+    window.addEventListener('resize', checkIsScrollable);
+    return () => {
+      window.removeEventListener('resize', checkIsScrollable);
+    };
+  }, [Actions]);
+  const ActionComponents = Actions ? Object.values(Actions) : [];
+  return /*#__PURE__*/_jsxs("header", {
+    className: [baseClass, navOpen && `${baseClass}--nav-open`].filter(Boolean).join(' '),
+    children: [/*#__PURE__*/_jsx("div", {
+      className: `${baseClass}__bg`
+    }), /*#__PURE__*/_jsx("div", {
+      className: `${baseClass}__content`,
+      children: /*#__PURE__*/_jsxs("div", {
+        className: `${baseClass}__wrapper`,
+        children: [/*#__PURE__*/_jsx(NavToggler, {
+          className: `${baseClass}__mobile-nav-toggler`,
+          tabIndex: -1,
+          children: /*#__PURE__*/_jsx(Hamburger, {})
+        }), /*#__PURE__*/_jsxs("div", {
+          className: `${baseClass}__controls-wrapper`,
+          children: [/*#__PURE__*/_jsx("div", {
+            className: `${baseClass}__step-nav-wrapper`,
+            children: /*#__PURE__*/_jsx(StepNav, {
+              className: `${baseClass}__step-nav`,
+              CustomIcon: CustomIcon
+            })
+          }), /*#__PURE__*/_jsxs("div", {
+            className: `${baseClass}__actions-wrapper`,
+            children: [/*#__PURE__*/_jsx("div", {
+              className: `${baseClass}__actions`,
+              ref: customControlsRef,
+              children: ActionComponents.map((Action, i) => /*#__PURE__*/_jsx("div", {
+                className: isScrollable && i === ActionComponents.length - 1 ? `${baseClass}__last-action` : '',
+                children: Action
+              }, i))
+            }), isScrollable && /*#__PURE__*/_jsx("div", {
+              className: `${baseClass}__gradient-placeholder`
+            })]
+          }), localization && /*#__PURE__*/_jsx(LocalizerLabel, {
+            ariaLabel: "invisible",
+            className: `${baseClass}__localizer-spacing`
+          }), /*#__PURE__*/_jsx(Link, {
+            "aria-label": t('authentication:account'),
+            className: `${baseClass}__account`,
+            href: formatAdminURL({
+              adminRoute,
+              path: accountRoute
+            }),
+            prefetch: false,
+            tabIndex: 0,
+            children: /*#__PURE__*/_jsx(RenderCustomComponent, {
+              CustomComponent: CustomAvatar,
+              Fallback: /*#__PURE__*/_jsx(Account, {})
+            })
+          })]
+        })]
+      })
+    }), /*#__PURE__*/_jsx(Localizer, {
+      className: `${baseClass}__localizer`
+    })]
+  });
 }
-
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/elements/AppHeader/index.tsx"],"sourcesContent":["'use client'\nimport { formatAdminURL } from 'payload/shared'\nimport React, { useEffect, useRef, useState } from 'react'\n\nimport { Account } from '../../graphics/Account/index.js'\nimport { useActions } from '../../providers/Actions/index.js'\nimport { useConfig } from '../../providers/Config/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { Hamburger } from '../Hamburger/index.js'\nimport { Link } from '../Link/index.js'\nimport { Localizer } from '../Localizer/index.js'\nimport { LocalizerLabel } from '../Localizer/LocalizerLabel/index.js'\nimport { useNav } from '../Nav/context.js'\nimport { NavToggler } from '../Nav/NavToggler/index.js'\nimport { RenderCustomComponent } from '../RenderCustomComponent/index.js'\nimport { StepNav } from '../StepNav/index.js'\nimport './index.scss'\n\nconst baseClass = 'app-header'\n\ntype Props = {\n  CustomAvatar?: React.ReactNode\n  CustomIcon?: React.ReactNode\n}\nexport function AppHeader({ CustomAvatar, CustomIcon }: Props) {\n  const { t } = useTranslation()\n\n  const { Actions } = useActions()\n\n  const {\n    config: {\n      admin: {\n        routes: { account: accountRoute },\n      },\n      localization,\n      routes: { admin: adminRoute },\n    },\n  } = useConfig()\n\n  const { navOpen } = useNav()\n\n  const customControlsRef = useRef<HTMLDivElement>(null)\n  const [isScrollable, setIsScrollable] = useState(false)\n\n  useEffect(() => {\n    const checkIsScrollable = () => {\n      const el = customControlsRef.current\n      if (el) {\n        const scrollable = el.scrollWidth > el.clientWidth\n        setIsScrollable(scrollable)\n      }\n    }\n\n    checkIsScrollable()\n    window.addEventListener('resize', checkIsScrollable)\n\n    return () => {\n      window.removeEventListener('resize', checkIsScrollable)\n    }\n  }, [Actions])\n\n  const ActionComponents = Actions ? Object.values(Actions) : []\n\n  return (\n    <header className={[baseClass, navOpen && `${baseClass}--nav-open`].filter(Boolean).join(' ')}>\n      <div className={`${baseClass}__bg`} />\n      <div className={`${baseClass}__content`}>\n        <div className={`${baseClass}__wrapper`}>\n          <NavToggler className={`${baseClass}__mobile-nav-toggler`} tabIndex={-1}>\n            <Hamburger />\n          </NavToggler>\n          <div className={`${baseClass}__controls-wrapper`}>\n            <div className={`${baseClass}__step-nav-wrapper`}>\n              <StepNav className={`${baseClass}__step-nav`} CustomIcon={CustomIcon} />\n            </div>\n            <div className={`${baseClass}__actions-wrapper`}>\n              <div className={`${baseClass}__actions`} ref={customControlsRef}>\n                {ActionComponents.map((Action, i) => (\n                  <div\n                    className={\n                      isScrollable && i === ActionComponents.length - 1\n                        ? `${baseClass}__last-action`\n                        : ''\n                    }\n                    key={i}\n                  >\n                    {Action}\n                  </div>\n                ))}\n              </div>\n              {isScrollable && <div className={`${baseClass}__gradient-placeholder`} />}\n            </div>\n            {localization && (\n              <LocalizerLabel ariaLabel=\"invisible\" className={`${baseClass}__localizer-spacing`} />\n            )}\n            <Link\n              aria-label={t('authentication:account')}\n              className={`${baseClass}__account`}\n              href={formatAdminURL({ adminRoute, path: accountRoute })}\n              prefetch={false}\n              tabIndex={0}\n            >\n              <RenderCustomComponent CustomComponent={CustomAvatar} Fallback={<Account />} />\n            </Link>\n          </div>\n        </div>\n      </div>\n      <Localizer className={`${baseClass}__localizer`} />\n    </header>\n  )\n}\n"],"names":["formatAdminURL","useEffect","useRef","useState","Account","useActions","useConfig","useTranslation","Hamburger","Link","Localizer","LocalizerLabel","useNav","NavToggler","RenderCustomComponent","StepNav","baseClass","AppHeader","CustomAvatar","CustomIcon","t","Actions","config","admin","routes","account","accountRoute","localization","adminRoute","navOpen","customControlsRef","isScrollable","setIsScrollable","checkIsScrollable","el","current","scrollable","scrollWidth","clientWidth","window","addEventListener","removeEventListener","ActionComponents","Object","values","header","className","filter","Boolean","join","div","tabIndex","ref","map","Action","i","length","key","ariaLabel","aria-label","href","path","prefetch","CustomComponent","Fallback"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["formatAdminURL","React","useEffect","useRef","useState","Account","useActions","useConfig","useTranslation","Hamburger","Link","Localizer","LocalizerLabel","useNav","NavToggler","RenderCustomComponent","StepNav","baseClass","AppHeader","CustomAvatar","CustomIcon","t","Actions","config","admin","routes","account","accountRoute","localization","adminRoute","navOpen","customControlsRef","isScrollable","setIsScrollable","checkIsScrollable","el","current","scrollable","scrollWidth","clientWidth","window","addEventListener","removeEventListener","ActionComponents","Object","values","_jsxs","className","filter","Boolean","join","_jsx","tabIndex","ref","map","Action","i","length","ariaLabel","href","path","prefetch","CustomComponent","Fallback"],"sources":["../../../src/elements/AppHeader/index.tsx"],"sourcesContent":["'use client'\nimport { formatAdminURL } from 'payload/shared'\nimport React, { useEffect, useRef, useState } from 'react'\n\nimport { Account } from '../../graphics/Account/index.js'\nimport { useActions } from '../../providers/Actions/index.js'\nimport { useConfig } from '../../providers/Config/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { Hamburger } from '../Hamburger/index.js'\nimport { Link } from '../Link/index.js'\nimport { Localizer } from '../Localizer/index.js'\nimport { LocalizerLabel } from '../Localizer/LocalizerLabel/index.js'\nimport { useNav } from '../Nav/context.js'\nimport { NavToggler } from '../Nav/NavToggler/index.js'\nimport { RenderCustomComponent } from '../RenderCustomComponent/index.js'\nimport { StepNav } from '../StepNav/index.js'\nimport './index.scss'\n\nconst baseClass = 'app-header'\n\ntype Props = {\n  CustomAvatar?: React.ReactNode\n  CustomIcon?: React.ReactNode\n}\nexport function AppHeader({ CustomAvatar, CustomIcon }: Props) {\n  const { t } = useTranslation()\n\n  const { Actions } = useActions()\n\n  const {\n    config: {\n      admin: {\n        routes: { account: accountRoute },\n      },\n      localization,\n      routes: { admin: adminRoute },\n    },\n  } = useConfig()\n\n  const { navOpen } = useNav()\n\n  const customControlsRef = useRef<HTMLDivElement>(null)\n  const [isScrollable, setIsScrollable] = useState(false)\n\n  useEffect(() => {\n    const checkIsScrollable = () => {\n      const el = customControlsRef.current\n      if (el) {\n        const scrollable = el.scrollWidth > el.clientWidth\n        setIsScrollable(scrollable)\n      }\n    }\n\n    checkIsScrollable()\n    window.addEventListener('resize', checkIsScrollable)\n\n    return () => {\n      window.removeEventListener('resize', checkIsScrollable)\n    }\n  }, [Actions])\n\n  const ActionComponents = Actions ? Object.values(Actions) : []\n\n  return (\n    <header className={[baseClass, navOpen && `${baseClass}--nav-open`].filter(Boolean).join(' ')}>\n      <div className={`${baseClass}__bg`} />\n      <div className={`${baseClass}__content`}>\n        <div className={`${baseClass}__wrapper`}>\n          <NavToggler className={`${baseClass}__mobile-nav-toggler`} tabIndex={-1}>\n            <Hamburger />\n          </NavToggler>\n          <div className={`${baseClass}__controls-wrapper`}>\n            <div className={`${baseClass}__step-nav-wrapper`}>\n              <StepNav className={`${baseClass}__step-nav`} CustomIcon={CustomIcon} />\n            </div>\n            <div className={`${baseClass}__actions-wrapper`}>\n              <div className={`${baseClass}__actions`} ref={customControlsRef}>\n                {ActionComponents.map((Action, i) => (\n                  <div\n                    className={\n                      isScrollable && i === ActionComponents.length - 1\n                        ? `${baseClass}__last-action`\n                        : ''\n                    }\n                    key={i}\n                  >\n                    {Action}\n                  </div>\n                ))}\n              </div>\n              {isScrollable && <div className={`${baseClass}__gradient-placeholder`} />}\n            </div>\n            {localization && (\n              <LocalizerLabel ariaLabel=\"invisible\" className={`${baseClass}__localizer-spacing`} />\n            )}\n            <Link\n              aria-label={t('authentication:account')}\n              className={`${baseClass}__account`}\n              href={formatAdminURL({ adminRoute, path: accountRoute })}\n              prefetch={false}\n              tabIndex={0}\n            >\n              <RenderCustomComponent CustomComponent={CustomAvatar} Fallback={<Account />} />\n            </Link>\n          </div>\n        </div>\n      </div>\n      <Localizer className={`${baseClass}__localizer`} />\n    </header>\n  )\n}\n"],"mappings":"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","ignoreList":[]}