@payloadcms/ui 3.68.0-internal-debug.185cc5f → 3.68.0-internal-debug.591ab42

package/dist/elements/AddNewRelation/index.js

@@ -1,5 +1,5 @@
 'use client';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsxDEV as _jsxDEV } from "react/jsx-dev-runtime";
 import { getTranslation } from '@payloadcms/translations';
 import { hasAutosaveEnabled } from 'payload/shared';
 import React, { Fragment, useCallback, useEffect, useState } from 'react';
@@ -112,13 +112,13 @@ export const AddNewRelation = ({ Button: ButtonFromProps, hasMany, onChange, pat
     if (!show) {
         return null;
     }
-    return /*#__PURE__*/ _jsxs("div", {
+    return /*#__PURE__*/ _jsxDEV("div", {
         className: baseClass,
         id: `${path}-add-new`,
         children: [
-            relatedCollections.length === 1 && /*#__PURE__*/ _jsxs(Fragment, {
+            relatedCollections.length === 1 && /*#__PURE__*/ _jsxDEV(Fragment, {
                 children: [
-                    /*#__PURE__*/ _jsx(DocumentDrawerToggler, {
+                    /*#__PURE__*/ _jsxDEV(DocumentDrawerToggler, {
                         className: [
                             `${baseClass}__add-button`,
                             unstyled && `${baseClass}__add-button--unstyled`
@@ -128,58 +128,114 @@ export const AddNewRelation = ({ Button: ButtonFromProps, hasMany, onChange, pat
                         },
                         onMouseEnter: ()=>setShowTooltip(true),
                         onMouseLeave: ()=>setShowTooltip(false),
-                        children: ButtonFromProps ? ButtonFromProps : /*#__PURE__*/ _jsxs(Fragment, {
+                        children: ButtonFromProps ? ButtonFromProps : /*#__PURE__*/ _jsxDEV(Fragment, {
                             children: [
-                                /*#__PURE__*/ _jsx(Tooltip, {
+                                /*#__PURE__*/ _jsxDEV(Tooltip, {
                                     className: `${baseClass}__tooltip`,
                                     show: showTooltip,
                                     children: label
-                                }),
-                                /*#__PURE__*/ _jsx(PlusIcon, {})
+                                }, void 0, false, {
+                                    fileName: "src/elements/AddNewRelation/index.tsx",
+                                    lineNumber: 164,
+                                    columnNumber: 17
+                                }, this),
+                                /*#__PURE__*/ _jsxDEV(PlusIcon, {}, void 0, false, {
+                                    fileName: "src/elements/AddNewRelation/index.tsx",
+                                    lineNumber: 167,
+                                    columnNumber: 17
+                                }, this)
                             ]
-                        })
-                    }),
-                    /*#__PURE__*/ _jsx(DocumentDrawer, {
+                        }, void 0, true, {
+                            fileName: "src/elements/AddNewRelation/index.tsx",
+                            lineNumber: 163,
+                            columnNumber: 15
+                        }, this)
+                    }, void 0, false, {
+                        fileName: "src/elements/AddNewRelation/index.tsx",
+                        lineNumber: 147,
+                        columnNumber: 11
+                    }, this),
+                    /*#__PURE__*/ _jsxDEV(DocumentDrawer, {
                         onSave: onSave
-                    })
+                    }, void 0, false, {
+                        fileName: "src/elements/AddNewRelation/index.tsx",
+                        lineNumber: 171,
+                        columnNumber: 11
+                    }, this)
                 ]
-            }),
-            relatedCollections.length > 1 && /*#__PURE__*/ _jsxs(Fragment, {
+            }, void 0, true, {
+                fileName: "src/elements/AddNewRelation/index.tsx",
+                lineNumber: 146,
+                columnNumber: 9
+            }, this),
+            relatedCollections.length > 1 && /*#__PURE__*/ _jsxDEV(Fragment, {
                 children: [
-                    /*#__PURE__*/ _jsx(Popup, {
-                        button: ButtonFromProps ? ButtonFromProps : /*#__PURE__*/ _jsx(Button, {
+                    /*#__PURE__*/ _jsxDEV(Popup, {
+                        button: ButtonFromProps ? ButtonFromProps : /*#__PURE__*/ _jsxDEV(Button, {
                             buttonStyle: "none",
                             className: `${baseClass}__add-button`,
                             tooltip: popupOpen ? undefined : t('fields:addNew'),
-                            children: /*#__PURE__*/ _jsx(PlusIcon, {})
-                        }),
+                            children: /*#__PURE__*/ _jsxDEV(PlusIcon, {}, void 0, false, {
+                                fileName: "src/elements/AddNewRelation/index.tsx",
+                                lineNumber: 186,
+                                columnNumber: 19
+                            }, void 0)
+                        }, void 0, false, {
+                            fileName: "src/elements/AddNewRelation/index.tsx",
+                            lineNumber: 181,
+                            columnNumber: 17
+                        }, void 0),
                         buttonType: "custom",
                         horizontalAlign: "center",
                         onToggleOpen: onPopupToggle,
-                        render: ({ close: closePopup })=>/*#__PURE__*/ _jsx(PopupList.ButtonGroup, {
+                        render: ({ close: closePopup })=>/*#__PURE__*/ _jsxDEV(PopupList.ButtonGroup, {
                                 children: relatedCollections.map((relatedCollection)=>{
                                     if (permissions.collections[relatedCollection?.slug].create) {
-                                        return /*#__PURE__*/ _jsx(PopupList.Button, {
+                                        return /*#__PURE__*/ _jsxDEV(PopupList.Button, {
                                             className: `${baseClass}__relation-button--${relatedCollection?.slug}`,
                                             onClick: ()=>{
                                                 closePopup();
                                                 setSelectedCollection(relatedCollection?.slug);
                                             },
                                             children: getTranslation(relatedCollection?.labels?.singular, i18n)
-                                        }, relatedCollection?.slug);
+                                        }, relatedCollection?.slug, false, {
+                                            fileName: "src/elements/AddNewRelation/index.tsx",
+                                            lineNumber: 198,
+                                            columnNumber: 23
+                                        }, void 0);
                                     }
                                     return null;
                                 })
-                            }),
+                            }, void 0, false, {
+                                fileName: "src/elements/AddNewRelation/index.tsx",
+                                lineNumber: 194,
+                                columnNumber: 15
+                            }, void 0),
                         size: "medium"
-                    }),
-                    collectionConfig && permissions.collections[collectionConfig?.slug]?.create && /*#__PURE__*/ _jsx(DocumentDrawer, {
+                    }, void 0, false, {
+                        fileName: "src/elements/AddNewRelation/index.tsx",
+                        lineNumber: 176,
+                        columnNumber: 11
+                    }, this),
+                    collectionConfig && permissions.collections[collectionConfig?.slug]?.create && /*#__PURE__*/ _jsxDEV(DocumentDrawer, {
                         onSave: onSave
-                    })
+                    }, void 0, false, {
+                        fileName: "src/elements/AddNewRelation/index.tsx",
+                        lineNumber: 218,
+                        columnNumber: 13
+                    }, this)
                 ]
-            })
+            }, void 0, true, {
+                fileName: "src/elements/AddNewRelation/index.tsx",
+                lineNumber: 175,
+                columnNumber: 9
+            }, this)
         ]
-    });
+    }, void 0, true, {
+        fileName: "src/elements/AddNewRelation/index.tsx",
+        lineNumber: 144,
+        columnNumber: 5
+    }, this);
 };
 
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/elements/AddNewRelation/index.tsx"],"sourcesContent":["'use client'\nimport type { ClientCollectionConfig } from 'payload'\n\nimport { getTranslation } from '@payloadcms/translations'\nimport { hasAutosaveEnabled } from 'payload/shared'\nimport React, { Fragment, useCallback, useEffect, useState } from 'react'\n\nimport type { DocumentDrawerContextType } from '../DocumentDrawer/Provider.js'\nimport type { Props } from './types.js'\n\nimport { useRelatedCollections } from '../../hooks/useRelatedCollections.js'\nimport { PlusIcon } from '../../icons/Plus/index.js'\nimport { useAuth } from '../../providers/Auth/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { Button } from '../Button/index.js'\nimport { useDocumentDrawer } from '../DocumentDrawer/index.js'\nimport { Popup } from '../Popup/index.js'\nimport * as PopupList from '../Popup/PopupButtonList/index.js'\nimport './index.scss'\nimport { Tooltip } from '../Tooltip/index.js'\n\nconst baseClass = 'relationship-add-new'\n\nexport const AddNewRelation: React.FC<Props> = ({\n  Button: ButtonFromProps,\n  hasMany,\n  onChange,\n  path,\n  relationTo,\n  unstyled,\n  value,\n}) => {\n  const relatedCollections = useRelatedCollections(relationTo)\n  const { permissions } = useAuth()\n  const [show, setShow] = useState(false)\n  const [selectedCollection, setSelectedCollection] = useState<string>()\n\n  const relatedToMany = relatedCollections.length > 1\n\n  const [collectionConfig, setCollectionConfig] = useState<ClientCollectionConfig>(() =>\n    !relatedToMany ? relatedCollections[0] : undefined,\n  )\n\n  const [popupOpen, setPopupOpen] = useState(false)\n  const { i18n, t } = useTranslation()\n  const [showTooltip, setShowTooltip] = useState(false)\n\n  const [DocumentDrawer, DocumentDrawerToggler, { isDrawerOpen, toggleDrawer }] = useDocumentDrawer(\n    {\n      collectionSlug: collectionConfig?.slug,\n    },\n  )\n\n  const onSave: DocumentDrawerContextType['onSave'] = useCallback(\n    ({ doc, operation }) => {\n      // if autosave is enabled, the operation will be 'update'\n      if (\n        operation === 'create' ||\n        (operation === 'update' && hasAutosaveEnabled(collectionConfig))\n      ) {\n        // ensure the value is not already in the array\n        let isNewValue = false\n        if (!value) {\n          isNewValue = true\n        } else {\n          isNewValue = Array.isArray(value)\n            ? !value.some((v) => v && v.value === doc.id)\n            : value.value !== doc.id\n        }\n\n        if (isNewValue) {\n          if (hasMany === true) {\n            onChange([\n              ...(Array.isArray(value) ? value : []),\n              {\n                relationTo: collectionConfig?.slug,\n                value: doc.id,\n              },\n            ])\n          } else {\n            onChange({\n              relationTo: relatedCollections[0].slug,\n              value: doc.id,\n            })\n          }\n        }\n\n        setSelectedCollection(undefined)\n      }\n    },\n    [collectionConfig, hasMany, onChange, value, relatedCollections],\n  )\n\n  const onPopupToggle = useCallback((state) => {\n    setPopupOpen(state)\n  }, [])\n\n  useEffect(() => {\n    if (permissions) {\n      if (relatedCollections.length === 1) {\n        setShow(permissions.collections[relatedCollections[0]?.slug]?.create)\n      } else {\n        setShow(\n          relatedCollections.some(\n            (collection) => permissions.collections[collection?.slug]?.create,\n          ),\n        )\n      }\n    }\n  }, [permissions, relatedCollections])\n\n  useEffect(() => {\n    if (relatedToMany && selectedCollection) {\n      setCollectionConfig(\n        relatedCollections.find((collection) => collection?.slug === selectedCollection),\n      )\n    }\n  }, [selectedCollection, relatedToMany, relatedCollections])\n\n  useEffect(() => {\n    if (relatedToMany && collectionConfig) {\n      // the drawer must be rendered on the page before before opening it\n      // this is why 'selectedCollection' is different from 'collectionConfig'\n      toggleDrawer()\n      setSelectedCollection(undefined)\n    }\n  }, [toggleDrawer, relatedToMany, collectionConfig])\n\n  useEffect(() => {\n    if (relatedToMany && !isDrawerOpen) {\n      setCollectionConfig(undefined)\n    }\n  }, [isDrawerOpen, relatedToMany])\n\n  const label = t('fields:addNewLabel', {\n    label: getTranslation(relatedCollections[0]?.labels.singular, i18n),\n  })\n\n  if (!show) {\n    return null\n  }\n\n  return (\n    <div className={baseClass} id={`${path}-add-new`}>\n      {relatedCollections.length === 1 && (\n        <Fragment>\n          <DocumentDrawerToggler\n            className={[\n              `${baseClass}__add-button`,\n              unstyled && `${baseClass}__add-button--unstyled`,\n            ]\n              .filter(Boolean)\n              .join(' ')}\n            onClick={() => {\n              setShowTooltip(false)\n            }}\n            onMouseEnter={() => setShowTooltip(true)}\n            onMouseLeave={() => setShowTooltip(false)}\n          >\n            {ButtonFromProps ? (\n              ButtonFromProps\n            ) : (\n              <Fragment>\n                <Tooltip className={`${baseClass}__tooltip`} show={showTooltip}>\n                  {label}\n                </Tooltip>\n                <PlusIcon />\n              </Fragment>\n            )}\n          </DocumentDrawerToggler>\n          <DocumentDrawer onSave={onSave} />\n        </Fragment>\n      )}\n      {relatedCollections.length > 1 && (\n        <Fragment>\n          <Popup\n            button={\n              ButtonFromProps ? (\n                ButtonFromProps\n              ) : (\n                <Button\n                  buttonStyle=\"none\"\n                  className={`${baseClass}__add-button`}\n                  tooltip={popupOpen ? undefined : t('fields:addNew')}\n                >\n                  <PlusIcon />\n                </Button>\n              )\n            }\n            buttonType=\"custom\"\n            horizontalAlign=\"center\"\n            onToggleOpen={onPopupToggle}\n            render={({ close: closePopup }) => (\n              <PopupList.ButtonGroup>\n                {relatedCollections.map((relatedCollection) => {\n                  if (permissions.collections[relatedCollection?.slug].create) {\n                    return (\n                      <PopupList.Button\n                        className={`${baseClass}__relation-button--${relatedCollection?.slug}`}\n                        key={relatedCollection?.slug}\n                        onClick={() => {\n                          closePopup()\n                          setSelectedCollection(relatedCollection?.slug)\n                        }}\n                      >\n                        {getTranslation(relatedCollection?.labels?.singular, i18n)}\n                      </PopupList.Button>\n                    )\n                  }\n\n                  return null\n                })}\n              </PopupList.ButtonGroup>\n            )}\n            size=\"medium\"\n          />\n          {collectionConfig && permissions.collections[collectionConfig?.slug]?.create && (\n            <DocumentDrawer onSave={onSave} />\n          )}\n        </Fragment>\n      )}\n    </div>\n  )\n}\n"],"names":["getTranslation","hasAutosaveEnabled","React","Fragment","useCallback","useEffect","useState","useRelatedCollections","PlusIcon","useAuth","useTranslation","Button","useDocumentDrawer","Popup","PopupList","Tooltip","baseClass","AddNewRelation","ButtonFromProps","hasMany","onChange","path","relationTo","unstyled","value","relatedCollections","permissions","show","setShow","selectedCollection","setSelectedCollection","relatedToMany","length","collectionConfig","setCollectionConfig","undefined","popupOpen","setPopupOpen","i18n","t","showTooltip","setShowTooltip","DocumentDrawer","DocumentDrawerToggler","isDrawerOpen","toggleDrawer","collectionSlug","slug","onSave","doc","operation","isNewValue","Array","isArray","some","v","id","onPopupToggle","state","collections","create","collection","find","label","labels","singular","div","className","filter","Boolean","join","onClick","onMouseEnter","onMouseLeave","button","buttonStyle","tooltip","buttonType","horizontalAlign","onToggleOpen","render","close","closePopup","ButtonGroup","map","relatedCollection","size"],"mappings":"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"}
+{"version":3,"sources":["../../../src/elements/AddNewRelation/index.tsx"],"sourcesContent":["'use client'\nimport type { ClientCollectionConfig } from 'payload'\n\nimport { getTranslation } from '@payloadcms/translations'\nimport { hasAutosaveEnabled } from 'payload/shared'\nimport React, { Fragment, useCallback, useEffect, useState } from 'react'\n\nimport type { DocumentDrawerContextType } from '../DocumentDrawer/Provider.js'\nimport type { Props } from './types.js'\n\nimport { useRelatedCollections } from '../../hooks/useRelatedCollections.js'\nimport { PlusIcon } from '../../icons/Plus/index.js'\nimport { useAuth } from '../../providers/Auth/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { Button } from '../Button/index.js'\nimport { useDocumentDrawer } from '../DocumentDrawer/index.js'\nimport { Popup } from '../Popup/index.js'\nimport * as PopupList from '../Popup/PopupButtonList/index.js'\nimport './index.scss'\nimport { Tooltip } from '../Tooltip/index.js'\n\nconst baseClass = 'relationship-add-new'\n\nexport const AddNewRelation: React.FC<Props> = ({\n  Button: ButtonFromProps,\n  hasMany,\n  onChange,\n  path,\n  relationTo,\n  unstyled,\n  value,\n}) => {\n  const relatedCollections = useRelatedCollections(relationTo)\n  const { permissions } = useAuth()\n  const [show, setShow] = useState(false)\n  const [selectedCollection, setSelectedCollection] = useState<string>()\n\n  const relatedToMany = relatedCollections.length > 1\n\n  const [collectionConfig, setCollectionConfig] = useState<ClientCollectionConfig>(() =>\n    !relatedToMany ? relatedCollections[0] : undefined,\n  )\n\n  const [popupOpen, setPopupOpen] = useState(false)\n  const { i18n, t } = useTranslation()\n  const [showTooltip, setShowTooltip] = useState(false)\n\n  const [DocumentDrawer, DocumentDrawerToggler, { isDrawerOpen, toggleDrawer }] = useDocumentDrawer(\n    {\n      collectionSlug: collectionConfig?.slug,\n    },\n  )\n\n  const onSave: DocumentDrawerContextType['onSave'] = useCallback(\n    ({ doc, operation }) => {\n      // if autosave is enabled, the operation will be 'update'\n      if (\n        operation === 'create' ||\n        (operation === 'update' && hasAutosaveEnabled(collectionConfig))\n      ) {\n        // ensure the value is not already in the array\n        let isNewValue = false\n        if (!value) {\n          isNewValue = true\n        } else {\n          isNewValue = Array.isArray(value)\n            ? !value.some((v) => v && v.value === doc.id)\n            : value.value !== doc.id\n        }\n\n        if (isNewValue) {\n          if (hasMany === true) {\n            onChange([\n              ...(Array.isArray(value) ? value : []),\n              {\n                relationTo: collectionConfig?.slug,\n                value: doc.id,\n              },\n            ])\n          } else {\n            onChange({\n              relationTo: relatedCollections[0].slug,\n              value: doc.id,\n            })\n          }\n        }\n\n        setSelectedCollection(undefined)\n      }\n    },\n    [collectionConfig, hasMany, onChange, value, relatedCollections],\n  )\n\n  const onPopupToggle = useCallback((state) => {\n    setPopupOpen(state)\n  }, [])\n\n  useEffect(() => {\n    if (permissions) {\n      if (relatedCollections.length === 1) {\n        setShow(permissions.collections[relatedCollections[0]?.slug]?.create)\n      } else {\n        setShow(\n          relatedCollections.some(\n            (collection) => permissions.collections[collection?.slug]?.create,\n          ),\n        )\n      }\n    }\n  }, [permissions, relatedCollections])\n\n  useEffect(() => {\n    if (relatedToMany && selectedCollection) {\n      setCollectionConfig(\n        relatedCollections.find((collection) => collection?.slug === selectedCollection),\n      )\n    }\n  }, [selectedCollection, relatedToMany, relatedCollections])\n\n  useEffect(() => {\n    if (relatedToMany && collectionConfig) {\n      // the drawer must be rendered on the page before before opening it\n      // this is why 'selectedCollection' is different from 'collectionConfig'\n      toggleDrawer()\n      setSelectedCollection(undefined)\n    }\n  }, [toggleDrawer, relatedToMany, collectionConfig])\n\n  useEffect(() => {\n    if (relatedToMany && !isDrawerOpen) {\n      setCollectionConfig(undefined)\n    }\n  }, [isDrawerOpen, relatedToMany])\n\n  const label = t('fields:addNewLabel', {\n    label: getTranslation(relatedCollections[0]?.labels.singular, i18n),\n  })\n\n  if (!show) {\n    return null\n  }\n\n  return (\n    <div className={baseClass} id={`${path}-add-new`}>\n      {relatedCollections.length === 1 && (\n        <Fragment>\n          <DocumentDrawerToggler\n            className={[\n              `${baseClass}__add-button`,\n              unstyled && `${baseClass}__add-button--unstyled`,\n            ]\n              .filter(Boolean)\n              .join(' ')}\n            onClick={() => {\n              setShowTooltip(false)\n            }}\n            onMouseEnter={() => setShowTooltip(true)}\n            onMouseLeave={() => setShowTooltip(false)}\n          >\n            {ButtonFromProps ? (\n              ButtonFromProps\n            ) : (\n              <Fragment>\n                <Tooltip className={`${baseClass}__tooltip`} show={showTooltip}>\n                  {label}\n                </Tooltip>\n                <PlusIcon />\n              </Fragment>\n            )}\n          </DocumentDrawerToggler>\n          <DocumentDrawer onSave={onSave} />\n        </Fragment>\n      )}\n      {relatedCollections.length > 1 && (\n        <Fragment>\n          <Popup\n            button={\n              ButtonFromProps ? (\n                ButtonFromProps\n              ) : (\n                <Button\n                  buttonStyle=\"none\"\n                  className={`${baseClass}__add-button`}\n                  tooltip={popupOpen ? undefined : t('fields:addNew')}\n                >\n                  <PlusIcon />\n                </Button>\n              )\n            }\n            buttonType=\"custom\"\n            horizontalAlign=\"center\"\n            onToggleOpen={onPopupToggle}\n            render={({ close: closePopup }) => (\n              <PopupList.ButtonGroup>\n                {relatedCollections.map((relatedCollection) => {\n                  if (permissions.collections[relatedCollection?.slug].create) {\n                    return (\n                      <PopupList.Button\n                        className={`${baseClass}__relation-button--${relatedCollection?.slug}`}\n                        key={relatedCollection?.slug}\n                        onClick={() => {\n                          closePopup()\n                          setSelectedCollection(relatedCollection?.slug)\n                        }}\n                      >\n                        {getTranslation(relatedCollection?.labels?.singular, i18n)}\n                      </PopupList.Button>\n                    )\n                  }\n\n                  return null\n                })}\n              </PopupList.ButtonGroup>\n            )}\n            size=\"medium\"\n          />\n          {collectionConfig && permissions.collections[collectionConfig?.slug]?.create && (\n            <DocumentDrawer onSave={onSave} />\n          )}\n        </Fragment>\n      )}\n    </div>\n  )\n}\n"],"names":["getTranslation","hasAutosaveEnabled","React","Fragment","useCallback","useEffect","useState","useRelatedCollections","PlusIcon","useAuth","useTranslation","Button","useDocumentDrawer","Popup","PopupList","Tooltip","baseClass","AddNewRelation","ButtonFromProps","hasMany","onChange","path","relationTo","unstyled","value","relatedCollections","permissions","show","setShow","selectedCollection","setSelectedCollection","relatedToMany","length","collectionConfig","setCollectionConfig","undefined","popupOpen","setPopupOpen","i18n","t","showTooltip","setShowTooltip","DocumentDrawer","DocumentDrawerToggler","isDrawerOpen","toggleDrawer","collectionSlug","slug","onSave","doc","operation","isNewValue","Array","isArray","some","v","id","onPopupToggle","state","collections","create","collection","find","label","labels","singular","div","className","filter","Boolean","join","onClick","onMouseEnter","onMouseLeave","button","buttonStyle","tooltip","buttonType","horizontalAlign","onToggleOpen","render","close","closePopup","ButtonGroup","map","relatedCollection","size"],"mappings":"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"}

package/dist/elements/AnimateHeight/index.js

@@ -1,5 +1,5 @@
 'use client';
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxDEV as _jsxDEV } from "react/jsx-dev-runtime";
 import React, { useEffect, useRef } from 'react';
 import { usePatchAnimateHeight } from './usePatchAnimateHeight.js';
 import './index.scss';
@@ -53,7 +53,7 @@ export const AnimateHeight = ({ id, children, className, duration = 300, height
         duration,
         open
     });
-    return /*#__PURE__*/ _jsx("div", {
+    return /*#__PURE__*/ _jsxDEV("div", {
         "aria-hidden": !open,
         className: [
             className,
@@ -68,7 +68,7 @@ export const AnimateHeight = ({ id, children, className, duration = 300, height
             overflow: parentOverflow,
             transition: `height ${duration}ms ease`
         },
-        children: /*#__PURE__*/ _jsx("div", {
+        children: /*#__PURE__*/ _jsxDEV("div", {
             ref: contentRef,
             ...childrenDisplay ? {
                 style: {
@@ -76,8 +76,16 @@ export const AnimateHeight = ({ id, children, className, duration = 300, height
                 }
             } : {},
             children: children
-        })
-    });
+        }, void 0, false, {
+            fileName: "src/elements/AnimateHeight/index.tsx",
+            lineNumber: 98,
+            columnNumber: 7
+        }, this)
+    }, void 0, false, {
+        fileName: "src/elements/AnimateHeight/index.tsx",
+        lineNumber: 80,
+        columnNumber: 5
+    }, this);
 };
 
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"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"}
+{"version":3,"sources":["../../../src/elements/AnimateHeight/index.tsx"],"sourcesContent":["'use client'\nimport React, { useEffect, useRef } from 'react'\n\nimport { usePatchAnimateHeight } from './usePatchAnimateHeight.js'\nimport './index.scss'\n\nexport const AnimateHeight: React.FC<{\n  children: React.ReactNode\n  className?: string\n  duration?: number\n  height?: 'auto' | number\n  id?: string\n}> = ({ id, children, className, duration = 300, height }) => {\n  const [open, setOpen] = React.useState(() => Boolean(height))\n\n  const prevIsOpen = useRef(open)\n\n  const [childrenDisplay, setChildrenDisplay] = React.useState<CSSStyleDeclaration['display']>(\n    () => (open ? '' : 'none'),\n  )\n\n  const [parentOverflow, setParentOverflow] = React.useState<CSSStyleDeclaration['overflow']>(() =>\n    open ? '' : 'hidden',\n  )\n\n  const [isAnimating, setIsAnimating] = React.useState(false)\n\n  const containerRef = useRef<HTMLDivElement>(null)\n  const contentRef = useRef<HTMLDivElement>(null)\n\n  useEffect(() => {\n    let displayTimer: number\n    let overflowTimer: number\n\n    const newIsOpen = Boolean(height)\n    const hasChanged = prevIsOpen.current !== newIsOpen\n    prevIsOpen.current = newIsOpen\n\n    if (hasChanged) {\n      setIsAnimating(true)\n      setParentOverflow('hidden')\n\n      if (newIsOpen) {\n        setChildrenDisplay('')\n      } else {\n        // `display: none` once closed\n        displayTimer = window.setTimeout(() => {\n          setChildrenDisplay('none')\n        }, duration)\n      }\n\n      setOpen(newIsOpen)\n\n      // reset overflow once open\n      overflowTimer = window.setTimeout(() => {\n        setParentOverflow('')\n        setIsAnimating(false)\n      }, duration)\n    }\n\n    return () => {\n      if (displayTimer) {\n        clearTimeout(displayTimer)\n      }\n\n      if (overflowTimer) {\n        clearTimeout(overflowTimer)\n      }\n    }\n  }, [height, duration])\n\n  usePatchAnimateHeight({\n    containerRef,\n    contentRef,\n    duration,\n    open,\n  })\n\n  return (\n    <div\n      aria-hidden={!open}\n      className={[\n        className,\n        'rah-static',\n        open && height === 'auto' && 'rah-static--height-auto',\n        isAnimating && `rah-animating--${open ? 'down' : 'up'}`,\n        isAnimating && height === 'auto' && `rah-animating--to-height-auto`,\n      ]\n        .filter(Boolean)\n        .join(' ')}\n      id={id}\n      ref={containerRef}\n      style={{\n        overflow: parentOverflow,\n        transition: `height ${duration}ms ease`,\n      }}\n    >\n      <div ref={contentRef} {...(childrenDisplay ? { style: { display: childrenDisplay } } : {})}>\n        {children}\n      </div>\n    </div>\n  )\n}\n"],"names":["React","useEffect","useRef","usePatchAnimateHeight","AnimateHeight","id","children","className","duration","height","open","setOpen","useState","Boolean","prevIsOpen","childrenDisplay","setChildrenDisplay","parentOverflow","setParentOverflow","isAnimating","setIsAnimating","containerRef","contentRef","displayTimer","overflowTimer","newIsOpen","hasChanged","current","window","setTimeout","clearTimeout","div","aria-hidden","filter","join","ref","style","overflow","transition","display"],"mappings":"AAAA;;AACA,OAAOA,SAASC,SAAS,EAAEC,MAAM,QAAQ,QAAO;AAEhD,SAASC,qBAAqB,QAAQ,6BAA4B;AAClE,OAAO,eAAc;AAErB,OAAO,MAAMC,gBAMR,CAAC,EAAEC,EAAE,EAAEC,QAAQ,EAAEC,SAAS,EAAEC,WAAW,GAAG,EAAEC,MAAM,EAAE;IACvD,MAAM,CAACC,MAAMC,QAAQ,GAAGX,MAAMY,QAAQ,CAAC,IAAMC,QAAQJ;IAErD,MAAMK,aAAaZ,OAAOQ;IAE1B,MAAM,CAACK,iBAAiBC,mBAAmB,GAAGhB,MAAMY,QAAQ,CAC1D,IAAOF,OAAO,KAAK;IAGrB,MAAM,CAACO,gBAAgBC,kBAAkB,GAAGlB,MAAMY,QAAQ,CAAkC,IAC1FF,OAAO,KAAK;IAGd,MAAM,CAACS,aAAaC,eAAe,GAAGpB,MAAMY,QAAQ,CAAC;IAErD,MAAMS,eAAenB,OAAuB;IAC5C,MAAMoB,aAAapB,OAAuB;IAE1CD,UAAU;QACR,IAAIsB;QACJ,IAAIC;QAEJ,MAAMC,YAAYZ,QAAQJ;QAC1B,MAAMiB,aAAaZ,WAAWa,OAAO,KAAKF;QAC1CX,WAAWa,OAAO,GAAGF;QAErB,IAAIC,YAAY;YACdN,eAAe;YACfF,kBAAkB;YAElB,IAAIO,WAAW;gBACbT,mBAAmB;YACrB,OAAO;gBACL,8BAA8B;gBAC9BO,eAAeK,OAAOC,UAAU,CAAC;oBAC/Bb,mBAAmB;gBACrB,GAAGR;YACL;YAEAG,QAAQc;YAER,2BAA2B;YAC3BD,gBAAgBI,OAAOC,UAAU,CAAC;gBAChCX,kBAAkB;gBAClBE,eAAe;YACjB,GAAGZ;QACL;QAEA,OAAO;YACL,IAAIe,cAAc;gBAChBO,aAAaP;YACf;YAEA,IAAIC,eAAe;gBACjBM,aAAaN;YACf;QACF;IACF,GAAG;QAACf;QAAQD;KAAS;IAErBL,sBAAsB;QACpBkB;QACAC;QACAd;QACAE;IACF;IAEA,qBACE,QAACqB;QACCC,eAAa,CAACtB;QACdH,WAAW;YACTA;YACA;YACAG,QAAQD,WAAW,UAAU;YAC7BU,eAAe,CAAC,eAAe,EAAET,OAAO,SAAS,MAAM;YACvDS,eAAeV,WAAW,UAAU,CAAC,6BAA6B,CAAC;SACpE,CACEwB,MAAM,CAACpB,SACPqB,IAAI,CAAC;QACR7B,IAAIA;QACJ8B,KAAKd;QACLe,OAAO;YACLC,UAAUpB;YACVqB,YAAY,CAAC,OAAO,EAAE9B,SAAS,OAAO,CAAC;QACzC;kBAEA,cAAA,QAACuB;YAAII,KAAKb;YAAa,GAAIP,kBAAkB;gBAAEqB,OAAO;oBAAEG,SAASxB;gBAAgB;YAAE,IAAI,CAAC,CAAC;sBACtFT;;;;;;;;;;;AAIT,EAAC"}

package/dist/elements/AppHeader/index.js

@@ -1,5 +1,5 @@
 'use client';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsxDEV as _jsxDEV } from "react/jsx-dev-runtime";
 import { formatAdminURL } from 'payload/shared';
 import React, { useEffect, useRef, useState } from 'react';
 import { Account } from '../../graphics/Account/index.js';
@@ -40,56 +40,96 @@ export function AppHeader({ CustomAvatar, CustomIcon }) {
         Actions
     ]);
     const ActionComponents = Actions ? Object.values(Actions) : [];
-    return /*#__PURE__*/ _jsxs("header", {
+    return /*#__PURE__*/ _jsxDEV("header", {
         className: [
             baseClass,
             navOpen && `${baseClass}--nav-open`
         ].filter(Boolean).join(' '),
         children: [
-            /*#__PURE__*/ _jsx("div", {
+            /*#__PURE__*/ _jsxDEV("div", {
                 className: `${baseClass}__bg`
-            }),
-            /*#__PURE__*/ _jsx("div", {
+            }, void 0, false, {
+                fileName: "src/elements/AppHeader/index.tsx",
+                lineNumber: 66,
+                columnNumber: 7
+            }, this),
+            /*#__PURE__*/ _jsxDEV("div", {
                 className: `${baseClass}__content`,
-                children: /*#__PURE__*/ _jsxs("div", {
+                children: /*#__PURE__*/ _jsxDEV("div", {
                     className: `${baseClass}__wrapper`,
                     children: [
-                        /*#__PURE__*/ _jsx(NavToggler, {
+                        /*#__PURE__*/ _jsxDEV(NavToggler, {
                             className: `${baseClass}__mobile-nav-toggler`,
                             tabIndex: -1,
-                            children: /*#__PURE__*/ _jsx(Hamburger, {})
-                        }),
-                        /*#__PURE__*/ _jsxs("div", {
+                            children: /*#__PURE__*/ _jsxDEV(Hamburger, {}, void 0, false, {
+                                fileName: "src/elements/AppHeader/index.tsx",
+                                lineNumber: 70,
+                                columnNumber: 13
+                            }, this)
+                        }, void 0, false, {
+                            fileName: "src/elements/AppHeader/index.tsx",
+                            lineNumber: 69,
+                            columnNumber: 11
+                        }, this),
+                        /*#__PURE__*/ _jsxDEV("div", {
                             className: `${baseClass}__controls-wrapper`,
                             children: [
-                                /*#__PURE__*/ _jsx("div", {
+                                /*#__PURE__*/ _jsxDEV("div", {
                                     className: `${baseClass}__step-nav-wrapper`,
-                                    children: /*#__PURE__*/ _jsx(StepNav, {
+                                    children: /*#__PURE__*/ _jsxDEV(StepNav, {
                                         className: `${baseClass}__step-nav`,
                                         CustomIcon: CustomIcon
-                                    })
-                                }),
-                                /*#__PURE__*/ _jsxs("div", {
+                                    }, void 0, false, {
+                                        fileName: "src/elements/AppHeader/index.tsx",
+                                        lineNumber: 74,
+                                        columnNumber: 15
+                                    }, this)
+                                }, void 0, false, {
+                                    fileName: "src/elements/AppHeader/index.tsx",
+                                    lineNumber: 73,
+                                    columnNumber: 13
+                                }, this),
+                                /*#__PURE__*/ _jsxDEV("div", {
                                     className: `${baseClass}__actions-wrapper`,
                                     children: [
-                                        /*#__PURE__*/ _jsx("div", {
+                                        /*#__PURE__*/ _jsxDEV("div", {
                                             className: `${baseClass}__actions`,
                                             ref: customControlsRef,
-                                            children: ActionComponents.map((Action, i)=>/*#__PURE__*/ _jsx("div", {
+                                            children: ActionComponents.map((Action, i)=>/*#__PURE__*/ _jsxDEV("div", {
                                                     className: isScrollable && i === ActionComponents.length - 1 ? `${baseClass}__last-action` : '',
                                                     children: Action
-                                                }, i))
-                                        }),
-                                        isScrollable && /*#__PURE__*/ _jsx("div", {
+                                                }, i, false, {
+                                                    fileName: "src/elements/AppHeader/index.tsx",
+                                                    lineNumber: 79,
+                                                    columnNumber: 19
+                                                }, this))
+                                        }, void 0, false, {
+                                            fileName: "src/elements/AppHeader/index.tsx",
+                                            lineNumber: 77,
+                                            columnNumber: 15
+                                        }, this),
+                                        isScrollable && /*#__PURE__*/ _jsxDEV("div", {
                                             className: `${baseClass}__gradient-placeholder`
-                                        })
+                                        }, void 0, false, {
+                                            fileName: "src/elements/AppHeader/index.tsx",
+                                            lineNumber: 91,
+                                            columnNumber: 32
+                                        }, this)
                                     ]
-                                }),
-                                localization && /*#__PURE__*/ _jsx(LocalizerLabel, {
+                                }, void 0, true, {
+                                    fileName: "src/elements/AppHeader/index.tsx",
+                                    lineNumber: 76,
+                                    columnNumber: 13
+                                }, this),
+                                localization && /*#__PURE__*/ _jsxDEV(LocalizerLabel, {
                                     ariaLabel: "invisible",
                                     className: `${baseClass}__localizer-spacing`
-                                }),
-                                /*#__PURE__*/ _jsx(Link, {
+                                }, void 0, false, {
+                                    fileName: "src/elements/AppHeader/index.tsx",
+                                    lineNumber: 94,
+                                    columnNumber: 15
+                                }, this),
+                                /*#__PURE__*/ _jsxDEV(Link, {
                                     "aria-label": t('authentication:account'),
                                     className: `${baseClass}__account`,
                                     href: formatAdminURL({
@@ -98,21 +138,53 @@ export function AppHeader({ CustomAvatar, CustomIcon }) {
                                     }),
                                     prefetch: false,
                                     tabIndex: 0,
-                                    children: /*#__PURE__*/ _jsx(RenderCustomComponent, {
+                                    children: /*#__PURE__*/ _jsxDEV(RenderCustomComponent, {
                                         CustomComponent: CustomAvatar,
-                                        Fallback: /*#__PURE__*/ _jsx(Account, {})
-                                    })
-                                })
+                                        Fallback: /*#__PURE__*/ _jsxDEV(Account, {}, void 0, false, {
+                                            fileName: "src/elements/AppHeader/index.tsx",
+                                            lineNumber: 103,
+                                            columnNumber: 79
+                                        }, void 0)
+                                    }, void 0, false, {
+                                        fileName: "src/elements/AppHeader/index.tsx",
+                                        lineNumber: 103,
+                                        columnNumber: 15
+                                    }, this)
+                                }, void 0, false, {
+                                    fileName: "src/elements/AppHeader/index.tsx",
+                                    lineNumber: 96,
+                                    columnNumber: 13
+                                }, this)
                             ]
-                        })
+                        }, void 0, true, {
+                            fileName: "src/elements/AppHeader/index.tsx",
+                            lineNumber: 72,
+                            columnNumber: 11
+                        }, this)
                     ]
-                })
-            }),
-            /*#__PURE__*/ _jsx(Localizer, {
+                }, void 0, true, {
+                    fileName: "src/elements/AppHeader/index.tsx",
+                    lineNumber: 68,
+                    columnNumber: 9
+                }, this)
+            }, void 0, false, {
+                fileName: "src/elements/AppHeader/index.tsx",
+                lineNumber: 67,
+                columnNumber: 7
+            }, this),
+            /*#__PURE__*/ _jsxDEV(Localizer, {
                 className: `${baseClass}__localizer`
-            })
+            }, void 0, false, {
+                fileName: "src/elements/AppHeader/index.tsx",
+                lineNumber: 108,
+                columnNumber: 7
+            }, this)
         ]
-    });
+    }, void 0, true, {
+        fileName: "src/elements/AppHeader/index.tsx",
+        lineNumber: 65,
+        columnNumber: 5
+    }, this);
 }
 
 //# 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","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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"}
+{"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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"}