@payloadcms/ui 3.68.0-internal-debug.56c9b68 → 3.68.0-internal-debug.2eb12b9

package/dist/elements/AnimateHeight/index.js

@@ -1,80 +1,83 @@
 '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 /*#__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__*/ _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
+                }
+            } : {},
+            children: children
+        })
+    });
 };
+
 //# 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,KAACqB;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,KAACuB;YAAII,KAAKb;YAAa,GAAIP,kBAAkB;gBAAEqB,OAAO;oBAAEG,SAASxB;gBAAgB;YAAE,IAAI,CAAC,CAAC;sBACtFT;;;AAIT,EAAC"}

package/dist/elements/AnimateHeight/usePatchAnimateHeight.js

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

package/dist/elements/AppHeader/index.js

@@ -1,5 +1,4 @@
 'use client';
-
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { formatAdminURL } from 'payload/shared';
 import React, { useEffect, useRef, useState } from 'react';
@@ -17,103 +16,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 /*#__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
+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`
             }),
-            prefetch: false,
-            tabIndex: 0,
-            children: /*#__PURE__*/_jsx(RenderCustomComponent, {
-              CustomComponent: CustomAvatar,
-              Fallback: /*#__PURE__*/_jsx(Account, {})
+            /*#__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`
             })
-          })]
-        })]
-      })
-    }), /*#__PURE__*/_jsx(Localizer, {
-      className: `${baseClass}__localizer`
-    })]
-  });
+        ]
+    });
 }
+
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"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":[]}
+{"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","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","header","className","filter","Boolean","join","div","tabIndex","ref","map","Action","i","length","ariaLabel","aria-label","href","path","prefetch","CustomComponent","Fallback"],"mappings":"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"}