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

package/dist/elements/AddNewRelation/index.js

@@ -1,8 +1,7 @@
 'use client';
-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';
+import { Fragment, useCallback, useEffect, useState } from 'react';
 import { useRelatedCollections } from '../../hooks/useRelatedCollections.js';
 import { PlusIcon } from '../../icons/Plus/index.js';
 import { useAuth } from '../../providers/Auth/index.js';
@@ -112,130 +111,42 @@ export const AddNewRelation = ({ Button: ButtonFromProps, hasMany, onChange, pat
     if (!show) {
         return null;
     }
-    return /*#__PURE__*/ _jsxDEV("div", {
-        className: baseClass,
-        id: `${path}-add-new`,
-        children: [
-            relatedCollections.length === 1 && /*#__PURE__*/ _jsxDEV(Fragment, {
-                children: [
-                    /*#__PURE__*/ _jsxDEV(DocumentDrawerToggler, {
-                        className: [
-                            `${baseClass}__add-button`,
-                            unstyled && `${baseClass}__add-button--unstyled`
-                        ].filter(Boolean).join(' '),
-                        onClick: ()=>{
-                            setShowTooltip(false);
-                        },
-                        onMouseEnter: ()=>setShowTooltip(true),
-                        onMouseLeave: ()=>setShowTooltip(false),
-                        children: ButtonFromProps ? ButtonFromProps : /*#__PURE__*/ _jsxDEV(Fragment, {
-                            children: [
-                                /*#__PURE__*/ _jsxDEV(Tooltip, {
-                                    className: `${baseClass}__tooltip`,
-                                    show: showTooltip,
-                                    children: label
-                                }, 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)
-                            ]
-                        }, 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)
-                ]
-            }, void 0, true, {
-                fileName: "src/elements/AddNewRelation/index.tsx",
-                lineNumber: 146,
-                columnNumber: 9
-            }, this),
-            relatedCollections.length > 1 && /*#__PURE__*/ _jsxDEV(Fragment, {
-                children: [
-                    /*#__PURE__*/ _jsxDEV(Popup, {
-                        button: ButtonFromProps ? ButtonFromProps : /*#__PURE__*/ _jsxDEV(Button, {
-                            buttonStyle: "none",
-                            className: `${baseClass}__add-button`,
-                            tooltip: popupOpen ? undefined : t('fields:addNew'),
-                            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__*/ _jsxDEV(PopupList.ButtonGroup, {
-                                children: relatedCollections.map((relatedCollection)=>{
-                                    if (permissions.collections[relatedCollection?.slug].create) {
-                                        return /*#__PURE__*/ _jsxDEV(PopupList.Button, {
-                                            className: `${baseClass}__relation-button--${relatedCollection?.slug}`,
-                                            onClick: ()=>{
-                                                closePopup();
-                                                setSelectedCollection(relatedCollection?.slug);
-                                            },
-                                            children: getTranslation(relatedCollection?.labels?.singular, i18n)
-                                        }, 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"
-                    }, 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);
+    return <div className={baseClass} id={`${path}-add-new`}>
+      {relatedCollections.length === 1 && <Fragment>
+          <DocumentDrawerToggler className={[
+        `${baseClass}__add-button`,
+        unstyled && `${baseClass}__add-button--unstyled`
+    ].filter(Boolean).join(' ')} onClick={()=>{
+        setShowTooltip(false);
+    }} onMouseEnter={()=>setShowTooltip(true)} onMouseLeave={()=>setShowTooltip(false)}>
+            {ButtonFromProps ? ButtonFromProps : <Fragment>
+                <Tooltip className={`${baseClass}__tooltip`} show={showTooltip}>
+                  {label}
+                </Tooltip>
+                <PlusIcon/>
+              </Fragment>}
+          </DocumentDrawerToggler>
+          <DocumentDrawer onSave={onSave}/>
+        </Fragment>}
+      {relatedCollections.length > 1 && <Fragment>
+          <Popup button={ButtonFromProps ? ButtonFromProps : <Button buttonStyle="none" className={`${baseClass}__add-button`} tooltip={popupOpen ? undefined : t('fields:addNew')}>
+                  <PlusIcon/>
+                </Button>} buttonType="custom" horizontalAlign="center" onToggleOpen={onPopupToggle} render={({ close: closePopup })=><PopupList.ButtonGroup>
+                {relatedCollections.map((relatedCollection)=>{
+            if (permissions.collections[relatedCollection?.slug].create) {
+                return <PopupList.Button className={`${baseClass}__relation-button--${relatedCollection?.slug}`} key={relatedCollection?.slug} onClick={()=>{
+                    closePopup();
+                    setSelectedCollection(relatedCollection?.slug);
+                }}>
+                        {getTranslation(relatedCollection?.labels?.singular, i18n)}
+                      </PopupList.Button>;
+            }
+            return null;
+        })}
+              </PopupList.ButtonGroup>} size="medium"/>
+          {collectionConfig && permissions.collections[collectionConfig?.slug]?.create && <DocumentDrawer onSave={onSave}/>}
+        </Fragment>}
+    </div>;
 };
 
 //# 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","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","key","size"],"mappings":"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"}

package/dist/elements/AnimateHeight/index.js

@@ -1,5 +1,4 @@
 'use client';
-import { jsxDEV as _jsxDEV } from "react/jsx-dev-runtime";
 import React, { useEffect, useRef } from 'react';
 import { usePatchAnimateHeight } from './usePatchAnimateHeight.js';
 import './index.scss';
@@ -53,39 +52,24 @@ export const AnimateHeight = ({ id, children, className, duration = 300, height
         duration,
         open
     });
-    return /*#__PURE__*/ _jsxDEV("div", {
-        "aria-hidden": !open,
-        className: [
-            className,
-            'rah-static',
-            open && height === 'auto' && 'rah-static--height-auto',
-            isAnimating && `rah-animating--${open ? 'down' : 'up'}`,
-            isAnimating && height === 'auto' && `rah-animating--to-height-auto`
-        ].filter(Boolean).join(' '),
-        id: id,
-        ref: containerRef,
+    return <div aria-hidden={!open} className={[
+        className,
+        'rah-static',
+        open && height === 'auto' && 'rah-static--height-auto',
+        isAnimating && `rah-animating--${open ? 'down' : 'up'}`,
+        isAnimating && height === 'auto' && `rah-animating--to-height-auto`
+    ].filter(Boolean).join(' ')} id={id} ref={containerRef} style={{
+        overflow: parentOverflow,
+        transition: `height ${duration}ms ease`
+    }}>
+      <div ref={contentRef} {...childrenDisplay ? {
         style: {
-            overflow: parentOverflow,
-            transition: `height ${duration}ms ease`
-        },
-        children: /*#__PURE__*/ _jsxDEV("div", {
-            ref: contentRef,
-            ...childrenDisplay ? {
-                style: {
-                    display: childrenDisplay
-                }
-            } : {},
-            children: children
-        }, void 0, false, {
-            fileName: "src/elements/AnimateHeight/index.tsx",
-            lineNumber: 98,
-            columnNumber: 7
-        }, this)
-    }, void 0, false, {
-        fileName: "src/elements/AnimateHeight/index.tsx",
-        lineNumber: 80,
-        columnNumber: 5
-    }, this);
+            display: childrenDisplay
+        }
+    } : {}}>
+        {children}
+      </div>
+    </div>;
 };
 
 //# sourceMappingURL=index.js.map

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

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

package/dist/elements/AppHeader/index.js

@@ -1,7 +1,6 @@
 'use client';
-import { jsxDEV as _jsxDEV } from "react/jsx-dev-runtime";
 import { formatAdminURL } from 'payload/shared';
-import React, { useEffect, useRef, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import { Account } from '../../graphics/Account/index.js';
 import { useActions } from '../../providers/Actions/index.js';
 import { useConfig } from '../../providers/Config/index.js';
@@ -40,151 +39,40 @@ export function AppHeader({ CustomAvatar, CustomIcon }) {
         Actions
     ]);
     const ActionComponents = Actions ? Object.values(Actions) : [];
-    return /*#__PURE__*/ _jsxDEV("header", {
-        className: [
-            baseClass,
-            navOpen && `${baseClass}--nav-open`
-        ].filter(Boolean).join(' '),
-        children: [
-            /*#__PURE__*/ _jsxDEV("div", {
-                className: `${baseClass}__bg`
-            }, void 0, false, {
-                fileName: "src/elements/AppHeader/index.tsx",
-                lineNumber: 66,
-                columnNumber: 7
-            }, this),
-            /*#__PURE__*/ _jsxDEV("div", {
-                className: `${baseClass}__content`,
-                children: /*#__PURE__*/ _jsxDEV("div", {
-                    className: `${baseClass}__wrapper`,
-                    children: [
-                        /*#__PURE__*/ _jsxDEV(NavToggler, {
-                            className: `${baseClass}__mobile-nav-toggler`,
-                            tabIndex: -1,
-                            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__*/ _jsxDEV("div", {
-                                    className: `${baseClass}__step-nav-wrapper`,
-                                    children: /*#__PURE__*/ _jsxDEV(StepNav, {
-                                        className: `${baseClass}__step-nav`,
-                                        CustomIcon: CustomIcon
-                                    }, 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__*/ _jsxDEV("div", {
-                                            className: `${baseClass}__actions`,
-                                            ref: customControlsRef,
-                                            children: ActionComponents.map((Action, i)=>/*#__PURE__*/ _jsxDEV("div", {
-                                                    className: isScrollable && i === ActionComponents.length - 1 ? `${baseClass}__last-action` : '',
-                                                    children: Action
-                                                }, 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)
-                                    ]
-                                }, void 0, true, {
-                                    fileName: "src/elements/AppHeader/index.tsx",
-                                    lineNumber: 76,
-                                    columnNumber: 13
-                                }, this),
-                                localization && /*#__PURE__*/ _jsxDEV(LocalizerLabel, {
-                                    ariaLabel: "invisible",
-                                    className: `${baseClass}__localizer-spacing`
-                                }, 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({
-                                        adminRoute,
-                                        path: accountRoute
-                                    }),
-                                    prefetch: false,
-                                    tabIndex: 0,
-                                    children: /*#__PURE__*/ _jsxDEV(RenderCustomComponent, {
-                                        CustomComponent: CustomAvatar,
-                                        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)
-                    ]
-                }, 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);
+    return <header className={[
+        baseClass,
+        navOpen && `${baseClass}--nav-open`
+    ].filter(Boolean).join(' ')}>
+      <div className={`${baseClass}__bg`}/>
+      <div className={`${baseClass}__content`}>
+        <div className={`${baseClass}__wrapper`}>
+          <NavToggler className={`${baseClass}__mobile-nav-toggler`} tabIndex={-1}>
+            <Hamburger/>
+          </NavToggler>
+          <div className={`${baseClass}__controls-wrapper`}>
+            <div className={`${baseClass}__step-nav-wrapper`}>
+              <StepNav className={`${baseClass}__step-nav`} CustomIcon={CustomIcon}/>
+            </div>
+            <div className={`${baseClass}__actions-wrapper`}>
+              <div className={`${baseClass}__actions`} ref={customControlsRef}>
+                {ActionComponents.map((Action, i)=><div className={isScrollable && i === ActionComponents.length - 1 ? `${baseClass}__last-action` : ''} key={i}>
+                    {Action}
+                  </div>)}
+              </div>
+              {isScrollable && <div className={`${baseClass}__gradient-placeholder`}/>}
+            </div>
+            {localization && <LocalizerLabel ariaLabel="invisible" className={`${baseClass}__localizer-spacing`}/>}
+            <Link aria-label={t('authentication:account')} className={`${baseClass}__account`} href={formatAdminURL({
+        adminRoute,
+        path: accountRoute
+    })} prefetch={false} tabIndex={0}>
+              <RenderCustomComponent CustomComponent={CustomAvatar} Fallback={<Account/>}/>
+            </Link>
+          </div>
+        </div>
+      </div>
+      <Localizer className={`${baseClass}__localizer`}/>
+    </header>;
 }
 
 //# 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","useEffect","useRef","useState","Account","useActions","useConfig","useTranslation","Hamburger","Link","Localizer","LocalizerLabel","useNav","NavToggler","RenderCustomComponent","StepNav","baseClass","AppHeader","CustomAvatar","CustomIcon","t","Actions","config","admin","routes","account","accountRoute","localization","adminRoute","navOpen","customControlsRef","isScrollable","setIsScrollable","checkIsScrollable","el","current","scrollable","scrollWidth","clientWidth","window","addEventListener","removeEventListener","ActionComponents","Object","values","header","className","filter","Boolean","join","div","tabIndex","ref","map","Action","i","length","key","ariaLabel","aria-label","href","path","prefetch","CustomComponent","Fallback"],"mappings":"AAAA;AACA,SAASA,cAAc,QAAQ,iBAAgB;AAC/C,SAAgBC,SAAS,EAAEC,MAAM,EAAEC,QAAQ,QAAQ,QAAO;AAE1D,SAASC,OAAO,QAAQ,kCAAiC;AACzD,SAASC,UAAU,QAAQ,mCAAkC;AAC7D,SAASC,SAAS,QAAQ,kCAAiC;AAC3D,SAASC,cAAc,QAAQ,uCAAsC;AACrE,SAASC,SAAS,QAAQ,wBAAuB;AACjD,SAASC,IAAI,QAAQ,mBAAkB;AACvC,SAASC,SAAS,QAAQ,wBAAuB;AACjD,SAASC,cAAc,QAAQ,uCAAsC;AACrE,SAASC,MAAM,QAAQ,oBAAmB;AAC1C,SAASC,UAAU,QAAQ,6BAA4B;AACvD,SAASC,qBAAqB,QAAQ,oCAAmC;AACzE,SAASC,OAAO,QAAQ,sBAAqB;AAC7C,OAAO,eAAc;AAErB,MAAMC,YAAY;AAMlB,OAAO,SAASC,UAAU,EAAEC,YAAY,EAAEC,UAAU,EAAS;IAC3D,MAAM,EAAEC,CAAC,EAAE,GAAGb;IAEd,MAAM,EAAEc,OAAO,EAAE,GAAGhB;IAEpB,MAAM,EACJiB,QAAQ,EACNC,OAAO,EACLC,QAAQ,EAAEC,SAASC,YAAY,EAAE,EAClC,EACDC,YAAY,EACZH,QAAQ,EAAED,OAAOK,UAAU,EAAE,EAC9B,EACF,GAAGtB;IAEJ,MAAM,EAAEuB,OAAO,EAAE,GAAGjB;IAEpB,MAAMkB,oBAAoB5B,OAAuB;IACjD,MAAM,CAAC6B,cAAcC,gBAAgB,GAAG7B,SAAS;IAEjDF,UAAU;QACR,MAAMgC,oBAAoB;YACxB,MAAMC,KAAKJ,kBAAkBK,OAAO;YACpC,IAAID,IAAI;gBACN,MAAME,aAAaF,GAAGG,WAAW,GAAGH,GAAGI,WAAW;gBAClDN,gBAAgBI;YAClB;QACF;QAEAH;QACAM,OAAOC,gBAAgB,CAAC,UAAUP;QAElC,OAAO;YACLM,OAAOE,mBAAmB,CAAC,UAAUR;QACvC;IACF,GAAG;QAACZ;KAAQ;IAEZ,MAAMqB,mBAAmBrB,UAAUsB,OAAOC,MAAM,CAACvB,WAAW,EAAE;IAE9D,QACGwB,OAAOC,WAAW;QAAC9B;QAAWa,WAAW,GAAGb,UAAU,UAAU,CAAC;KAAC,CAAC+B,MAAM,CAACC,SAASC,IAAI,CAAC,MAAM;MAC7F,CAACC,IAAIJ,WAAW,GAAG9B,UAAU,IAAI,CAAC,GAAI;MACtC,CAACkC,IAAIJ,WAAW,GAAG9B,UAAU,SAAS,CAAC,EAAE;QACvC,CAACkC,IAAIJ,WAAW,GAAG9B,UAAU,SAAS,CAAC,EAAE;UACvC,CAACH,WAAWiC,WAAW,GAAG9B,UAAU,oBAAoB,CAAC,EAAEmC,UAAU,CAAC,GAAG;YACvE,CAAC3C,WAAY;UACf,EAAEK,WAAW;UACb,CAACqC,IAAIJ,WAAW,GAAG9B,UAAU,kBAAkB,CAAC,EAAE;YAChD,CAACkC,IAAIJ,WAAW,GAAG9B,UAAU,kBAAkB,CAAC,EAAE;cAChD,CAACD,QAAQ+B,WAAW,GAAG9B,UAAU,UAAU,CAAC,EAAEG,YAAYA,aAAc;YAC1E,EAAE+B,IAAI;YACN,CAACA,IAAIJ,WAAW,GAAG9B,UAAU,iBAAiB,CAAC,EAAE;cAC/C,CAACkC,IAAIJ,WAAW,GAAG9B,UAAU,SAAS,CAAC,EAAEoC,KAAKtB,mBAAmB;gBAC/D,CAACY,iBAAiBW,GAAG,CAAC,CAACC,QAAQC,KAC5BL,IACCJ,WACEf,gBAAgBwB,MAAMb,iBAAiBc,MAAM,GAAG,IAC5C,GAAGxC,UAAU,aAAa,CAAC,GAC3B,IAENyC,KAAKF,GACN;oBACC,CAACD,OAAO;kBACV,EAAEJ,MACD;cACL,EAAEA,IAAI;cACN,CAACnB,iBAAiBmB,IAAIJ,WAAW,GAAG9B,UAAU,sBAAsB,CAAC,IAAK;YAC5E,EAAEkC,IAAI;YACN,CAACvB,iBACEhB,eAAe+C,UAAU,YAAYZ,WAAW,GAAG9B,UAAU,mBAAmB,CAAC,IAClF;YACF,CAACP,KACCkD,YAAYvC,EAAE,2BACd0B,WAAW,GAAG9B,UAAU,SAAS,CAAC,EAClC4C,MAAM5D,eAAe;QAAE4B;QAAYiC,MAAMnC;IAAa,IACtDoC,UAAU,OACVX,UAAU,GACX;cACC,CAACrC,sBAAsBiD,iBAAiB7C,cAAc8C,WAAW5D,YAAc;YACjF,EAAEK,KAAK;UACT,EAAEyC,IAAI;QACR,EAAEA,IAAI;MACR,EAAEA,IAAI;MACN,CAACxC,UAAUoC,WAAW,GAAG9B,UAAU,WAAW,CAAC,GAAI;IACrD,EAAE6B;AAEN"}