@payloadcms/ui 4.0.0-internal.38b7f1d → 4.0.0-internal.40de3ec

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["c","_c","getTranslation","hasAutosaveEnabled","React","Fragment","useCallback","useEffect","useState","useRelatedCollections","PlusIcon","useAuth","useTranslation","Button","useDocumentDrawer","Popup","PopupList","Tooltip","baseClass","AddNewRelation","t0","$","ButtonFromProps","hasMany","onChange","path","relationTo","unstyled","value","relatedCollections","permissions","show","setShow","selectedCollection","setSelectedCollection","relatedToMany","length","t1","undefined","collectionConfig","setCollectionConfig","popupOpen","setPopupOpen","i18n","t","showTooltip","setShowTooltip","t2","slug","t3","collectionSlug","DocumentDrawer","DocumentDrawerToggler","t4","isDrawerOpen","toggleDrawer","t5","t6","doc","operation","isNewValue","some","v","id","Array","isArray","onSave","Symbol","for","state","onPopupToggle","t7","t8","collections","create","collection","t10","t9","find","collection_0","t11","t12","t13","t14","t15","labels","singular","t16","t17","bb0","label","_jsxs","className","children","_jsx","filter","Boolean","join","onClick","onMouseEnter","onMouseLeave","button","buttonStyle","tooltip","horizontalAlign","onToggleOpen","render","t18","close","closePopup","ButtonGroup","map","relatedCollection"],"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.css'\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: collectionConfig?.slug,\n              value: doc.id,\n            })\n          }\n        }\n\n        setSelectedCollection(undefined)\n      }\n    },\n    [collectionConfig, hasMany, onChange, value],\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"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"index.js","names":["c","_c","getTranslation","hasAutosaveEnabled","React","Fragment","useCallback","useEffect","useState","useRelatedCollections","PlusIcon","useAuth","useTranslation","Button","useDocumentDrawer","Popup","PopupList","Tooltip","baseClass","AddNewRelation","t0","$","ButtonFromProps","hasMany","onChange","path","relationTo","unstyled","value","relatedCollections","permissions","show","setShow","selectedCollection","setSelectedCollection","relatedToMany","length","t1","undefined","collectionConfig","setCollectionConfig","setPopupOpen","i18n","t","showTooltip","setShowTooltip","t2","slug","t3","collectionSlug","DocumentDrawer","DocumentDrawerToggler","t4","isDrawerOpen","toggleDrawer","t5","t6","doc","operation","isNewValue","some","v","id","Array","isArray","onSave","Symbol","for","state","onPopupToggle","t7","t8","collections","create","collection","t10","t9","find","collection_0","t11","t12","t13","t14","t15","labels","singular","t16","t17","bb0","label","_jsxs","className","children","_jsx","buttonStyle","filter","Boolean","join","onMouseEnter","onMouseLeave","buttonType","horizontalAlign","onToggleOpen","render","t18","close","closePopup","ButtonGroup","map","relatedCollection","onClick","_temp","active","buttonProps","selected"],"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.css'\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: collectionConfig?.slug,\n              value: doc.id,\n            })\n          }\n        }\n\n        setSelectedCollection(undefined)\n      }\n    },\n    [collectionConfig, hasMany, onChange, value],\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            buttonStyle=\"pill\"\n            className={[\n              `${baseClass}__add-button`,\n              unstyled && `${baseClass}__add-button--unstyled`,\n            ]\n              .filter(Boolean)\n              .join(' ')}\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            buttonType=\"custom\"\n            horizontalAlign=\"right\"\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            renderButton={({ active, ...buttonProps }) => (\n              <Button\n                className={`${baseClass}__add-button`}\n                {...buttonProps}\n                buttonStyle=\"pill\"\n                selected={active}\n              >\n                <PlusIcon />\n              </Button>\n            )}\n          />\n          {collectionConfig && permissions.collections[collectionConfig?.slug]?.create && (\n            <DocumentDrawer onSave={onSave} />\n          )}\n        </Fragment>\n      )}\n    </div>\n  )\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/elements/AnimateHeight/index.css

@@ -0,0 +1,10 @@
+@layer payload-default {
+  .rah-static {
+    interpolate-size: allow-keywords;
+    height: 0;
+  }
+
+  .rah-static--height-auto {
+    height: auto;
+  }
+}

package/dist/elements/AnimateHeight/index.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import './index.scss';
+import './index.css';
 export declare const AnimateHeight: React.FC<{
     children: React.ReactNode;
     className?: string;

package/dist/elements/AnimateHeight/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/AnimateHeight/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAA4B,MAAM,OAAO,CAAA;AAGhD,OAAO,cAAc,CAAA;AAErB,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC;IACnC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IACxB,EAAE,CAAC,EAAE,MAAM,CAAA;CACZ,CA0FA,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/AnimateHeight/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAA4B,MAAM,OAAO,CAAA;AAGhD,OAAO,aAAa,CAAA;AAEpB,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC;IACnC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IACxB,EAAE,CAAC,EAAE,MAAM,CAAA;CACZ,CA0FA,CAAA"}

package/dist/elements/AnimateHeight/index.js

@@ -3,7 +3,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import React, { useEffect, useRef } from 'react';
 import { usePatchAnimateHeight } from './usePatchAnimateHeight.js';
-import './index.scss';
+import './index.css';
 export const AnimateHeight = ({
   id,
   children,

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","useEffect","useRef","usePatchAnimateHeight","AnimateHeight","id","children","className","duration","height","open","setOpen","useState","Boolean","prevIsOpen","childrenDisplay","setChildrenDisplay","parentOverflow","setParentOverflow","isAnimating","setIsAnimating","containerRef","contentRef","displayTimer","overflowTimer","newIsOpen","hasChanged","current","window","setTimeout","clearTimeout","_jsx","filter","join","ref","style","overflow","transition","display"],"sources":["../../../src/elements/AnimateHeight/index.tsx"],"sourcesContent":["'use client'\nimport React, { useEffect, useRef } from 'react'\n\nimport { usePatchAnimateHeight } from './usePatchAnimateHeight.js'\nimport './index.scss'\n\nexport const AnimateHeight: React.FC<{\n  children: React.ReactNode\n  className?: string\n  duration?: number\n  height?: 'auto' | number\n  id?: string\n}> = ({ id, children, className, duration = 300, height }) => {\n  const [open, setOpen] = React.useState(() => Boolean(height))\n\n  const prevIsOpen = useRef(open)\n\n  const [childrenDisplay, setChildrenDisplay] = React.useState<CSSStyleDeclaration['display']>(\n    () => (open ? '' : 'none'),\n  )\n\n  const [parentOverflow, setParentOverflow] = React.useState<CSSStyleDeclaration['overflow']>(() =>\n    open ? '' : 'hidden',\n  )\n\n  const [isAnimating, setIsAnimating] = React.useState(false)\n\n  const containerRef = useRef<HTMLDivElement>(null)\n  const contentRef = useRef<HTMLDivElement>(null)\n\n  useEffect(() => {\n    let displayTimer: number\n    let overflowTimer: number\n\n    const newIsOpen = Boolean(height)\n    const hasChanged = prevIsOpen.current !== newIsOpen\n    prevIsOpen.current = newIsOpen\n\n    if (hasChanged) {\n      setIsAnimating(true)\n      setParentOverflow('hidden')\n\n      if (newIsOpen) {\n        setChildrenDisplay('')\n      } else {\n        // `display: none` once closed\n        displayTimer = window.setTimeout(() => {\n          setChildrenDisplay('none')\n        }, duration)\n      }\n\n      setOpen(newIsOpen)\n\n      // reset overflow once open\n      overflowTimer = window.setTimeout(() => {\n        setParentOverflow('')\n        setIsAnimating(false)\n      }, duration)\n    }\n\n    return () => {\n      if (displayTimer) {\n        clearTimeout(displayTimer)\n      }\n\n      if (overflowTimer) {\n        clearTimeout(overflowTimer)\n      }\n    }\n  }, [height, duration])\n\n  usePatchAnimateHeight({\n    containerRef,\n    contentRef,\n    duration,\n    open,\n  })\n\n  return (\n    <div\n      aria-hidden={!open}\n      className={[\n        className,\n        'rah-static',\n        open && height === 'auto' && 'rah-static--height-auto',\n        isAnimating && `rah-animating--${open ? 'down' : 'up'}`,\n        isAnimating && height === 'auto' && `rah-animating--to-height-auto`,\n      ]\n        .filter(Boolean)\n        .join(' ')}\n      id={id}\n      ref={containerRef}\n      style={{\n        overflow: parentOverflow,\n        transition: `height ${duration}ms ease`,\n      }}\n    >\n      <div ref={contentRef} {...(childrenDisplay ? { style: { display: childrenDisplay } } : {})}>\n        {children}\n      </div>\n    </div>\n  )\n}\n"],"mappings":"AAAA;;;AACA,OAAOA,KAAA,IAASC,SAAS,EAAEC,MAAM,QAAQ;AAEzC,SAASC,qBAAqB,QAAQ;AACtC,OAAO;AAEP,OAAO,MAAMC,aAAA,GAMRA,CAAC;EAAEC,EAAE;EAAEC,QAAQ;EAAEC,SAAS;EAAEC,QAAA,GAAW,GAAG;EAAEC;AAAM,CAAE;EACvD,MAAM,CAACC,IAAA,EAAMC,OAAA,CAAQ,GAAGX,KAAA,CAAMY,QAAQ,CAAC,MAAMC,OAAA,CAAQJ,MAAA;EAErD,MAAMK,UAAA,GAAaZ,MAAA,CAAOQ,IAAA;EAE1B,MAAM,CAACK,eAAA,EAAiBC,kBAAA,CAAmB,GAAGhB,KAAA,CAAMY,QAAQ,CAC1D,MAAOF,IAAA,GAAO,KAAK;EAGrB,MAAM,CAACO,cAAA,EAAgBC,iBAAA,CAAkB,GAAGlB,KAAA,CAAMY,QAAQ,CAAkC,MAC1FF,IAAA,GAAO,KAAK;EAGd,MAAM,CAACS,WAAA,EAAaC,cAAA,CAAe,GAAGpB,KAAA,CAAMY,QAAQ,CAAC;EAErD,MAAMS,YAAA,GAAenB,MAAA,CAAuB;EAC5C,MAAMoB,UAAA,GAAapB,MAAA,CAAuB;EAE1CD,SAAA,CAAU;IACR,IAAIsB,YAAA;IACJ,IAAIC,aAAA;IAEJ,MAAMC,SAAA,GAAYZ,OAAA,CAAQJ,MAAA;IAC1B,MAAMiB,UAAA,GAAaZ,UAAA,CAAWa,OAAO,KAAKF,SAAA;IAC1CX,UAAA,CAAWa,OAAO,GAAGF,SAAA;IAErB,IAAIC,UAAA,EAAY;MACdN,cAAA,CAAe;MACfF,iBAAA,CAAkB;MAElB,IAAIO,SAAA,EAAW;QACbT,kBAAA,CAAmB;MACrB,OAAO;QACL;QACAO,YAAA,GAAeK,MAAA,CAAOC,UAAU,CAAC;UAC/Bb,kBAAA,CAAmB;QACrB,GAAGR,QAAA;MACL;MAEAG,OAAA,CAAQc,SAAA;MAER;MACAD,aAAA,GAAgBI,MAAA,CAAOC,UAAU,CAAC;QAChCX,iBAAA,CAAkB;QAClBE,cAAA,CAAe;MACjB,GAAGZ,QAAA;IACL;IAEA,OAAO;MACL,IAAIe,YAAA,EAAc;QAChBO,YAAA,CAAaP,YAAA;MACf;MAEA,IAAIC,aAAA,EAAe;QACjBM,YAAA,CAAaN,aAAA;MACf;IACF;EACF,GAAG,CAACf,MAAA,EAAQD,QAAA,CAAS;EAErBL,qBAAA,CAAsB;IACpBkB,YAAA;IACAC,UAAA;IACAd,QAAA;IACAE;EACF;EAEA,oBACEqB,IAAA,CAAC;IACC,eAAa,CAACrB,IAAA;IACdH,SAAA,EAAW,CACTA,SAAA,EACA,cACAG,IAAA,IAAQD,MAAA,KAAW,UAAU,2BAC7BU,WAAA,IAAe,kBAAkBT,IAAA,GAAO,SAAS,MAAM,EACvDS,WAAA,IAAeV,MAAA,KAAW,UAAU,+BAA+B,CACpE,CACEuB,MAAM,CAACnB,OAAA,EACPoB,IAAI,CAAC;IACR5B,EAAA,EAAIA,EAAA;IACJ6B,GAAA,EAAKb,YAAA;IACLc,KAAA,EAAO;MACLC,QAAA,EAAUnB,cAAA;MACVoB,UAAA,EAAY,UAAU7B,QAAA;IACxB;cAEA,aAAAuB,IAAA,CAAC;MAAIG,GAAA,EAAKZ,UAAA;MAAa,IAAIP,eAAA,GAAkB;QAAEoB,KAAA,EAAO;UAAEG,OAAA,EAASvB;QAAgB;MAAE,IAAI,CAAC,CAAC;gBACtFT;;;AAIT","ignoreList":[]}
+{"version":3,"file":"index.js","names":["React","useEffect","useRef","usePatchAnimateHeight","AnimateHeight","id","children","className","duration","height","open","setOpen","useState","Boolean","prevIsOpen","childrenDisplay","setChildrenDisplay","parentOverflow","setParentOverflow","isAnimating","setIsAnimating","containerRef","contentRef","displayTimer","overflowTimer","newIsOpen","hasChanged","current","window","setTimeout","clearTimeout","_jsx","filter","join","ref","style","overflow","transition","display"],"sources":["../../../src/elements/AnimateHeight/index.tsx"],"sourcesContent":["'use client'\nimport React, { useEffect, useRef } from 'react'\n\nimport { usePatchAnimateHeight } from './usePatchAnimateHeight.js'\nimport './index.css'\n\nexport const AnimateHeight: React.FC<{\n  children: React.ReactNode\n  className?: string\n  duration?: number\n  height?: 'auto' | number\n  id?: string\n}> = ({ id, children, className, duration = 300, height }) => {\n  const [open, setOpen] = React.useState(() => Boolean(height))\n\n  const prevIsOpen = useRef(open)\n\n  const [childrenDisplay, setChildrenDisplay] = React.useState<CSSStyleDeclaration['display']>(\n    () => (open ? '' : 'none'),\n  )\n\n  const [parentOverflow, setParentOverflow] = React.useState<CSSStyleDeclaration['overflow']>(() =>\n    open ? '' : 'hidden',\n  )\n\n  const [isAnimating, setIsAnimating] = React.useState(false)\n\n  const containerRef = useRef<HTMLDivElement>(null)\n  const contentRef = useRef<HTMLDivElement>(null)\n\n  useEffect(() => {\n    let displayTimer: number\n    let overflowTimer: number\n\n    const newIsOpen = Boolean(height)\n    const hasChanged = prevIsOpen.current !== newIsOpen\n    prevIsOpen.current = newIsOpen\n\n    if (hasChanged) {\n      setIsAnimating(true)\n      setParentOverflow('hidden')\n\n      if (newIsOpen) {\n        setChildrenDisplay('')\n      } else {\n        // `display: none` once closed\n        displayTimer = window.setTimeout(() => {\n          setChildrenDisplay('none')\n        }, duration)\n      }\n\n      setOpen(newIsOpen)\n\n      // reset overflow once open\n      overflowTimer = window.setTimeout(() => {\n        setParentOverflow('')\n        setIsAnimating(false)\n      }, duration)\n    }\n\n    return () => {\n      if (displayTimer) {\n        clearTimeout(displayTimer)\n      }\n\n      if (overflowTimer) {\n        clearTimeout(overflowTimer)\n      }\n    }\n  }, [height, duration])\n\n  usePatchAnimateHeight({\n    containerRef,\n    contentRef,\n    duration,\n    open,\n  })\n\n  return (\n    <div\n      aria-hidden={!open}\n      className={[\n        className,\n        'rah-static',\n        open && height === 'auto' && 'rah-static--height-auto',\n        isAnimating && `rah-animating--${open ? 'down' : 'up'}`,\n        isAnimating && height === 'auto' && `rah-animating--to-height-auto`,\n      ]\n        .filter(Boolean)\n        .join(' ')}\n      id={id}\n      ref={containerRef}\n      style={{\n        overflow: parentOverflow,\n        transition: `height ${duration}ms ease`,\n      }}\n    >\n      <div ref={contentRef} {...(childrenDisplay ? { style: { display: childrenDisplay } } : {})}>\n        {children}\n      </div>\n    </div>\n  )\n}\n"],"mappings":"AAAA;;;AACA,OAAOA,KAAA,IAASC,SAAS,EAAEC,MAAM,QAAQ;AAEzC,SAASC,qBAAqB,QAAQ;AACtC,OAAO;AAEP,OAAO,MAAMC,aAAA,GAMRA,CAAC;EAAEC,EAAE;EAAEC,QAAQ;EAAEC,SAAS;EAAEC,QAAA,GAAW,GAAG;EAAEC;AAAM,CAAE;EACvD,MAAM,CAACC,IAAA,EAAMC,OAAA,CAAQ,GAAGX,KAAA,CAAMY,QAAQ,CAAC,MAAMC,OAAA,CAAQJ,MAAA;EAErD,MAAMK,UAAA,GAAaZ,MAAA,CAAOQ,IAAA;EAE1B,MAAM,CAACK,eAAA,EAAiBC,kBAAA,CAAmB,GAAGhB,KAAA,CAAMY,QAAQ,CAC1D,MAAOF,IAAA,GAAO,KAAK;EAGrB,MAAM,CAACO,cAAA,EAAgBC,iBAAA,CAAkB,GAAGlB,KAAA,CAAMY,QAAQ,CAAkC,MAC1FF,IAAA,GAAO,KAAK;EAGd,MAAM,CAACS,WAAA,EAAaC,cAAA,CAAe,GAAGpB,KAAA,CAAMY,QAAQ,CAAC;EAErD,MAAMS,YAAA,GAAenB,MAAA,CAAuB;EAC5C,MAAMoB,UAAA,GAAapB,MAAA,CAAuB;EAE1CD,SAAA,CAAU;IACR,IAAIsB,YAAA;IACJ,IAAIC,aAAA;IAEJ,MAAMC,SAAA,GAAYZ,OAAA,CAAQJ,MAAA;IAC1B,MAAMiB,UAAA,GAAaZ,UAAA,CAAWa,OAAO,KAAKF,SAAA;IAC1CX,UAAA,CAAWa,OAAO,GAAGF,SAAA;IAErB,IAAIC,UAAA,EAAY;MACdN,cAAA,CAAe;MACfF,iBAAA,CAAkB;MAElB,IAAIO,SAAA,EAAW;QACbT,kBAAA,CAAmB;MACrB,OAAO;QACL;QACAO,YAAA,GAAeK,MAAA,CAAOC,UAAU,CAAC;UAC/Bb,kBAAA,CAAmB;QACrB,GAAGR,QAAA;MACL;MAEAG,OAAA,CAAQc,SAAA;MAER;MACAD,aAAA,GAAgBI,MAAA,CAAOC,UAAU,CAAC;QAChCX,iBAAA,CAAkB;QAClBE,cAAA,CAAe;MACjB,GAAGZ,QAAA;IACL;IAEA,OAAO;MACL,IAAIe,YAAA,EAAc;QAChBO,YAAA,CAAaP,YAAA;MACf;MAEA,IAAIC,aAAA,EAAe;QACjBM,YAAA,CAAaN,aAAA;MACf;IACF;EACF,GAAG,CAACf,MAAA,EAAQD,QAAA,CAAS;EAErBL,qBAAA,CAAsB;IACpBkB,YAAA;IACAC,UAAA;IACAd,QAAA;IACAE;EACF;EAEA,oBACEqB,IAAA,CAAC;IACC,eAAa,CAACrB,IAAA;IACdH,SAAA,EAAW,CACTA,SAAA,EACA,cACAG,IAAA,IAAQD,MAAA,KAAW,UAAU,2BAC7BU,WAAA,IAAe,kBAAkBT,IAAA,GAAO,SAAS,MAAM,EACvDS,WAAA,IAAeV,MAAA,KAAW,UAAU,+BAA+B,CACpE,CACEuB,MAAM,CAACnB,OAAA,EACPoB,IAAI,CAAC;IACR5B,EAAA,EAAIA,EAAA;IACJ6B,GAAA,EAAKb,YAAA;IACLc,KAAA,EAAO;MACLC,QAAA,EAAUnB,cAAA;MACVoB,UAAA,EAAY,UAAU7B,QAAA;IACxB;cAEA,aAAAuB,IAAA,CAAC;MAAIG,GAAA,EAAKZ,UAAA;MAAa,IAAIP,eAAA,GAAkB;QAAEoB,KAAA,EAAO;UAAEG,OAAA,EAASvB;QAAgB;MAAE,IAAI,CAAC,CAAC;gBACtFT;;;AAIT","ignoreList":[]}

package/dist/elements/AnimateHeight/usePatchAnimateHeight.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"usePatchAnimateHeight.d.ts","sourceRoot":"","sources":["../../../src/elements/AnimateHeight/usePatchAnimateHeight.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,qBAAqB,kDAK/B;IACD,YAAY,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC,CAAA;IAC7C,UAAU,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC,CAAA;IAC3C,QAAQ,EAAE,MAAM,CAAA;IAChB,IAAI,EAAE,OAAO,CAAA;CACd,KAAG;IAAE,+BAA+B,EAAE,OAAO,CAAA;CAoF7C,CAAA"}
+{"version":3,"file":"usePatchAnimateHeight.d.ts","sourceRoot":"","sources":["../../../src/elements/AnimateHeight/usePatchAnimateHeight.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,qBAAqB,GAAI,+CAKnC;IACD,YAAY,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC,CAAA;IAC7C,UAAU,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC,CAAA;IAC3C,QAAQ,EAAE,MAAM,CAAA;IAChB,IAAI,EAAE,OAAO,CAAA;CACd,KAAG;IAAE,+BAA+B,EAAE,OAAO,CAAA;CAoF7C,CAAA"}

package/dist/elements/AppHeader/index.css

@@ -2,7 +2,6 @@
   .app-header {
     position: relative;
     width: 100%;
-    height: var(--app-header-height);
     z-index: var(--z-modal);
   }
 
@@ -11,40 +10,14 @@
   }
 
   .app-header__localizer.localizer {
-    position: absolute;
-    top: 50%;
-    right: calc(var(--base) * 4.5);
-    transform: translate3d(0, -50%, 0);
-  }
-
-  [dir='rtl'] .app-header__localizer {
-    right: unset;
-    left: calc(var(--base) * 4.5);
-  }
-
-  .app-header__localizer-spacing {
-    visibility: hidden;
-  }
-
-  .app-header__bg {
-    opacity: 0;
-    position: absolute;
-    left: 0;
-    top: 0;
-    width: 100%;
-    height: 100%;
-    pointer-events: none;
-  }
-
-  .app-header--show-bg {
-    opacity: 1;
+    flex-shrink: 0;
   }
 
   .app-header__content {
     display: flex;
     align-items: center;
-    height: 100%;
-    padding: 0 var(--gutter-h);
+    padding: var(--spacer-2-5) var(--gutter-h);
+    gap: var(--spacer-2-5);
     position: relative;
     flex-grow: 1;
   }
@@ -53,7 +26,6 @@
     display: flex;
     gap: var(--spacer-2);
     align-items: center;
-    height: 100%;
     flex-grow: 1;
     justify-content: space-between;
     width: 100%;
@@ -74,7 +46,7 @@
         content: '';
         outline: none;
         border: var(--accessibility-outline);
-        border-radius: var(--radius-medium);
+        border-radius: var(--button-radius);
         position: absolute;
         top: 0;
         right: 0;
@@ -85,20 +57,44 @@
     }
   }
 
+  .app-header__step-nav-wrapper {
+    display: flex;
+    margin-right: auto;
+    margin-left: calc(-1 * var(--spacer-1));
+    flex-grow: 0;
+    gap: var(--spacer-1);
+    width: 100%;
+  }
+
   .app-header__controls-wrapper {
     display: flex;
     align-items: center;
+    gap: var(--spacer-2);
     flex: 1;
     min-width: 0;
   }
 
-  .app-header__step-nav-wrapper {
-    flex-grow: 0;
+  .app-header__sidebar-toggle {
     display: flex;
-    width: 100%;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    background: transparent;
+    border: var(--stroke-width-small) solid transparent;
+    border-radius: var(--button-radius);
+    cursor: pointer;
+    color: var(--color-icon);
+    transition:
+      background-color 0.15s ease,
+      border-color 0.15s ease;
+
+    &:hover {
+      background-color: var(--color-bg-transparent-hover);
+    }
 
-    &::-webkit-scrollbar {
-      display: none;
+    &:focus-visible {
+      outline: none;
+      border-color: var(--color-border-selected);
     }
   }
 
@@ -106,16 +102,15 @@
     position: relative;
     display: flex;
     align-items: center;
-    gap: var(--spacer-2);
-    margin-right: var(--base);
+    gap: var(--spacer-2-5);
   }
 
   .app-header__gradient-placeholder {
     position: absolute;
     top: 0;
     right: 0;
-    width: var(--base);
-    height: var(--base);
+    width: var(--spacer-3);
+    height: var(--spacer-3);
     background: linear-gradient(to right, transparent, var(--color-bg));
   }
 
@@ -133,7 +128,7 @@
   }
 
   .app-header__last-action {
-    margin-right: var(--base);
+    margin-right: var(--spacer-3);
   }
 
   @media (max-width: 1440px) {
@@ -144,18 +139,25 @@
 
   @media (max-width: 1024px) {
     .app-header__gradient-placeholder {
-      right: var(--base);
+      right: var(--spacer-3);
     }
 
     .app-header__actions {
       max-width: 300px;
-      margin-right: var(--base);
     }
   }
 
   @media (max-width: 768px) {
-    .app-header__localizer.localizer {
-      right: calc(var(--base) * 2);
+    .app-header__content {
+      padding: var(--spacer-2-5);
+    }
+
+    .app-header__controls-wrapper {
+      flex-wrap: wrap;
+    }
+
+    .app-header__step-nav-wrapper {
+      width: unset;
     }
 
     .app-header--nav-open .app-header__localizer {
@@ -171,10 +173,6 @@
       opacity: 0.5;
     }
 
-    .app-header__step-header {
-      display: none;
-    }
-
     .app-header__gradient-placeholder {
       right: 0;
     }

package/dist/elements/AppHeader/index.d.ts

@@ -2,8 +2,7 @@ import React from 'react';
 import './index.css';
 type Props = {
     CustomAvatar?: React.ReactNode;
-    CustomIcon?: React.ReactNode;
 };
-export declare function AppHeader({ CustomAvatar, CustomIcon }: Props): React.JSX.Element;
+export declare function AppHeader({ CustomAvatar }: Props): React.JSX.Element;
 export {};
 //# sourceMappingURL=index.d.ts.map

package/dist/elements/AppHeader/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/AppHeader/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAsC,MAAM,OAAO,CAAA;AAc1D,OAAO,aAAa,CAAA;AAIpB,KAAK,KAAK,GAAG;IACX,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC9B,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAC7B,CAAA;AACD,wBAAgB,SAAS,CAAC,EAAE,YAAY,EAAE,UAAU,EAAE,EAAE,KAAK,qBAuF5D"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/AppHeader/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAsC,MAAM,OAAO,CAAA;AAiB1D,OAAO,aAAa,CAAA;AAIpB,KAAK,KAAK,GAAG;IACX,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAC/B,CAAA;AACD,wBAAgB,SAAS,CAAC,EAAE,YAAY,EAAE,EAAE,KAAK,qBAgHhD"}

package/dist/elements/AppHeader/index.js

@@ -4,13 +4,16 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { formatAdminURL } from 'payload/shared';
 import React, { useEffect, useRef, useState } from 'react';
 import { Account } from '../../graphics/Account/index.js';
+import { ChevronIcon } from '../../icons/Chevron/index.js';
+import { LanguageIcon } from '../../icons/Language/index.js';
+import { SidebarIcon } from '../../icons/Sidebar/index.js';
 import { useActions } from '../../providers/Actions/index.js';
 import { useConfig } from '../../providers/Config/index.js';
+import { useLocale } from '../../providers/Locale/index.js';
 import { useTranslation } from '../../providers/Translation/index.js';
-import { Hamburger } from '../Hamburger/index.js';
+import { Button } from '../Button/index.js';
 import { Link } from '../Link/index.js';
 import { Localizer } from '../Localizer/index.js';
-import { LocalizerLabel } from '../Localizer/LocalizerLabel/index.js';
 import { useNav } from '../Nav/context.js';
 import { NavToggler } from '../Nav/NavToggler/index.js';
 import { RenderCustomComponent } from '../RenderCustomComponent/index.js';
@@ -18,15 +21,19 @@ import { StepNav } from '../StepNav/index.js';
 import './index.css';
 const baseClass = 'app-header';
 export function AppHeader({
-  CustomAvatar,
-  CustomIcon
+  CustomAvatar
 }) {
   const {
     t
   } = useTranslation();
+  const locale = useLocale();
   const {
     Actions
   } = useActions();
+  const {
+    navOpen,
+    setNavOpen
+  } = useNav();
   const {
     config: {
       admin: {
@@ -37,13 +44,9 @@ export function AppHeader({
       localization,
       routes: {
         admin: adminRoute
-      },
-      serverURL
+      }
     }
   } = useConfig();
-  const {
-    navOpen
-  } = useNav();
   const customControlsRef = useRef(null);
   const [isScrollable, setIsScrollable] = useState(false);
   useEffect(() => {
@@ -61,26 +64,32 @@ export function AppHeader({
     };
   }, [Actions]);
   const ActionComponents = Actions ? Object.values(Actions) : [];
-  return /*#__PURE__*/_jsxs("header", {
+  return /*#__PURE__*/_jsx("header", {
     className: [baseClass, navOpen && `${baseClass}--nav-open`].filter(Boolean).join(' '),
-    children: [/*#__PURE__*/_jsx("div", {
-      className: `${baseClass}__bg`
-    }), /*#__PURE__*/_jsx("div", {
+    children: /*#__PURE__*/_jsx("div", {
       className: `${baseClass}__content`,
       children: /*#__PURE__*/_jsxs("div", {
         className: `${baseClass}__wrapper`,
         children: [/*#__PURE__*/_jsx(NavToggler, {
           className: `${baseClass}__mobile-nav-toggler`,
-          tabIndex: -1,
-          children: /*#__PURE__*/_jsx(Hamburger, {})
+          tabIndex: -1
         }), /*#__PURE__*/_jsxs("div", {
           className: `${baseClass}__controls-wrapper`,
-          children: [/*#__PURE__*/_jsx("div", {
+          children: [/*#__PURE__*/_jsxs("div", {
             className: `${baseClass}__step-nav-wrapper`,
-            children: /*#__PURE__*/_jsx(StepNav, {
-              className: `${baseClass}__step-nav`,
-              CustomIcon: CustomIcon
-            })
+            children: [/*#__PURE__*/_jsx(Button, {
+              "aria-label": `${navOpen ? t('general:close') : t('general:open')} ${t('general:menu')}`,
+              buttonStyle: "ghost",
+              className: `${baseClass}__sidebar-toggle`,
+              icon: /*#__PURE__*/_jsx(SidebarIcon, {}),
+              onClick: () => setNavOpen(!navOpen),
+              type: "button"
+            }), /*#__PURE__*/_jsx("div", {
+              className: `${baseClass}__step-nav-wrapper`,
+              children: /*#__PURE__*/_jsx(StepNav, {
+                className: `${baseClass}__step-nav`
+              })
+            })]
           }), /*#__PURE__*/_jsxs("div", {
             className: `${baseClass}__actions-wrapper`,
             children: [/*#__PURE__*/_jsx("div", {
@@ -93,9 +102,37 @@ export function AppHeader({
             }), isScrollable && /*#__PURE__*/_jsx("div", {
               className: `${baseClass}__gradient-placeholder`
             })]
-          }), localization && /*#__PURE__*/_jsx(LocalizerLabel, {
-            ariaLabel: "invisible",
-            className: `${baseClass}__localizer-spacing`
+          }), localization && /*#__PURE__*/_jsx(Localizer, {
+            className: `${baseClass}__localizer`,
+            renderButton: ({
+              active,
+              onClick,
+              onKeyDown,
+              ...ariaProps
+            }) => /*#__PURE__*/_jsx(Button, {
+              "aria-label": t('general:locale'),
+              buttonStyle: "secondary",
+              extraButtonProps: {
+                onKeyDown,
+                style: {
+                  padding: '0 var(--spacer-1) 0 0'
+                }
+              },
+              icon: /*#__PURE__*/_jsx(LanguageIcon, {
+                size: 24
+              }),
+              iconPosition: "left",
+              onClick: onClick,
+              selected: active,
+              ...ariaProps,
+              children: /*#__PURE__*/_jsxs("div", {
+                className: "localizer__button-content",
+                children: [locale.code, /*#__PURE__*/_jsx(ChevronIcon, {
+                  direction: active ? 'up' : 'down',
+                  size: 16
+                })]
+              })
+            })
           }), /*#__PURE__*/_jsx(Link, {
             "aria-label": t('authentication:account'),
             className: `${baseClass}__account`,
@@ -112,9 +149,7 @@ export function AppHeader({
           })]
         })]
       })
-    }), /*#__PURE__*/_jsx(Localizer, {
-      className: `${baseClass}__localizer`
-    })]
+    })
   });
 }
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["formatAdminURL","React","useEffect","useRef","useState","Account","useActions","useConfig","useTranslation","Hamburger","Link","Localizer","LocalizerLabel","useNav","NavToggler","RenderCustomComponent","StepNav","baseClass","AppHeader","CustomAvatar","CustomIcon","t","Actions","config","admin","routes","account","accountRoute","localization","adminRoute","serverURL","navOpen","customControlsRef","isScrollable","setIsScrollable","checkIsScrollable","el","current","scrollable","scrollWidth","clientWidth","window","addEventListener","removeEventListener","ActionComponents","Object","values","_jsxs","className","filter","Boolean","join","_jsx","tabIndex","ref","map","Action","i","length","ariaLabel","href","path","prefetch","CustomComponent","Fallback"],"sources":["../../../src/elements/AppHeader/index.tsx"],"sourcesContent":["'use client'\nimport { formatAdminURL } from 'payload/shared'\nimport React, { useEffect, useRef, useState } from 'react'\n\nimport { Account } from '../../graphics/Account/index.js'\nimport { useActions } from '../../providers/Actions/index.js'\nimport { useConfig } from '../../providers/Config/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { Hamburger } from '../Hamburger/index.js'\nimport { Link } from '../Link/index.js'\nimport { Localizer } from '../Localizer/index.js'\nimport { LocalizerLabel } from '../Localizer/LocalizerLabel/index.js'\nimport { useNav } from '../Nav/context.js'\nimport { NavToggler } from '../Nav/NavToggler/index.js'\nimport { RenderCustomComponent } from '../RenderCustomComponent/index.js'\nimport { StepNav } from '../StepNav/index.js'\nimport './index.css'\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      serverURL,\n    },\n  } = useConfig()\n\n  const { navOpen } = useNav()\n\n  const customControlsRef = useRef<HTMLDivElement>(null)\n  const [isScrollable, setIsScrollable] = useState(false)\n\n  useEffect(() => {\n    const checkIsScrollable = () => {\n      const el = customControlsRef.current\n      if (el) {\n        const scrollable = el.scrollWidth > el.clientWidth\n        setIsScrollable(scrollable)\n      }\n    }\n\n    checkIsScrollable()\n    window.addEventListener('resize', checkIsScrollable)\n\n    return () => {\n      window.removeEventListener('resize', checkIsScrollable)\n    }\n  }, [Actions])\n\n  const ActionComponents = Actions ? Object.values(Actions) : []\n\n  return (\n    <header className={[baseClass, navOpen && `${baseClass}--nav-open`].filter(Boolean).join(' ')}>\n      <div className={`${baseClass}__bg`} />\n      <div className={`${baseClass}__content`}>\n        <div className={`${baseClass}__wrapper`}>\n          <NavToggler className={`${baseClass}__mobile-nav-toggler`} tabIndex={-1}>\n            <Hamburger />\n          </NavToggler>\n          <div className={`${baseClass}__controls-wrapper`}>\n            <div className={`${baseClass}__step-nav-wrapper`}>\n              <StepNav className={`${baseClass}__step-nav`} CustomIcon={CustomIcon} />\n            </div>\n            <div className={`${baseClass}__actions-wrapper`}>\n              <div className={`${baseClass}__actions`} ref={customControlsRef}>\n                {ActionComponents.map((Action, i) => (\n                  <div\n                    className={\n                      isScrollable && i === ActionComponents.length - 1\n                        ? `${baseClass}__last-action`\n                        : ''\n                    }\n                    key={i}\n                  >\n                    {Action}\n                  </div>\n                ))}\n              </div>\n              {isScrollable && <div className={`${baseClass}__gradient-placeholder`} />}\n            </div>\n            {localization && (\n              <LocalizerLabel ariaLabel=\"invisible\" className={`${baseClass}__localizer-spacing`} />\n            )}\n            <Link\n              aria-label={t('authentication:account')}\n              className={`${baseClass}__account`}\n              href={formatAdminURL({ adminRoute, path: accountRoute })}\n              prefetch={false}\n              tabIndex={0}\n            >\n              <RenderCustomComponent CustomComponent={CustomAvatar} Fallback={<Account />} />\n            </Link>\n          </div>\n        </div>\n      </div>\n      <Localizer className={`${baseClass}__localizer`} />\n    </header>\n  )\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"index.js","names":["formatAdminURL","React","useEffect","useRef","useState","Account","ChevronIcon","LanguageIcon","SidebarIcon","useActions","useConfig","useLocale","useTranslation","Button","Link","Localizer","useNav","NavToggler","RenderCustomComponent","StepNav","baseClass","AppHeader","CustomAvatar","t","locale","Actions","navOpen","setNavOpen","config","admin","routes","account","accountRoute","localization","adminRoute","customControlsRef","isScrollable","setIsScrollable","checkIsScrollable","el","current","scrollable","scrollWidth","clientWidth","window","addEventListener","removeEventListener","ActionComponents","Object","values","_jsx","className","filter","Boolean","join","_jsxs","tabIndex","buttonStyle","icon","onClick","type","ref","map","Action","i","length","renderButton","active","onKeyDown","ariaProps","extraButtonProps","style","padding","size","iconPosition","selected","code","direction","href","path","prefetch","CustomComponent","Fallback"],"sources":["../../../src/elements/AppHeader/index.tsx"],"sourcesContent":["'use client'\nimport { formatAdminURL } from 'payload/shared'\nimport React, { useEffect, useRef, useState } from 'react'\n\nimport { Account } from '../../graphics/Account/index.js'\nimport { ChevronIcon } from '../../icons/Chevron/index.js'\nimport { LanguageIcon } from '../../icons/Language/index.js'\nimport { SidebarIcon } from '../../icons/Sidebar/index.js'\nimport { useActions } from '../../providers/Actions/index.js'\nimport { useConfig } from '../../providers/Config/index.js'\nimport { useLocale } from '../../providers/Locale/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { Button } from '../Button/index.js'\nimport { Link } from '../Link/index.js'\nimport { Localizer } from '../Localizer/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.css'\n\nconst baseClass = 'app-header'\n\ntype Props = {\n  CustomAvatar?: React.ReactNode\n}\nexport function AppHeader({ CustomAvatar }: Props) {\n  const { t } = useTranslation()\n  const locale = useLocale()\n\n  const { Actions } = useActions()\n\n  const { navOpen, setNavOpen } = useNav()\n\n  const {\n    config: {\n      admin: {\n        routes: { account: accountRoute },\n      },\n      localization,\n      routes: { admin: adminRoute },\n    },\n  } = useConfig()\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}__content`}>\n        <div className={`${baseClass}__wrapper`}>\n          <NavToggler className={`${baseClass}__mobile-nav-toggler`} tabIndex={-1} />\n          <div className={`${baseClass}__controls-wrapper`}>\n            <div className={`${baseClass}__step-nav-wrapper`}>\n              <Button\n                aria-label={`${navOpen ? t('general:close') : t('general:open')} ${t('general:menu')}`}\n                buttonStyle=\"ghost\"\n                className={`${baseClass}__sidebar-toggle`}\n                icon={<SidebarIcon />}\n                onClick={() => setNavOpen(!navOpen)}\n                type=\"button\"\n              />\n              <div className={`${baseClass}__step-nav-wrapper`}>\n                <StepNav className={`${baseClass}__step-nav`} />\n              </div>\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              <Localizer\n                className={`${baseClass}__localizer`}\n                renderButton={({ active, onClick, onKeyDown, ...ariaProps }) => (\n                  <Button\n                    aria-label={t('general:locale')}\n                    buttonStyle=\"secondary\"\n                    extraButtonProps={{ onKeyDown, style: { padding: '0 var(--spacer-1) 0 0' } }}\n                    icon={<LanguageIcon size={24} />}\n                    iconPosition=\"left\"\n                    onClick={onClick}\n                    selected={active}\n                    {...ariaProps}\n                  >\n                    <div className=\"localizer__button-content\">\n                      {locale.code}\n                      <ChevronIcon direction={active ? 'up' : 'down'} size={16} />\n                    </div>\n                  </Button>\n                )}\n              />\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    </header>\n  )\n}\n"],"mappings":"AAAA;;;AACA,SAASA,cAAc,QAAQ;AAC/B,OAAOC,KAAA,IAASC,SAAS,EAAEC,MAAM,EAAEC,QAAQ,QAAQ;AAEnD,SAASC,OAAO,QAAQ;AACxB,SAASC,WAAW,QAAQ;AAC5B,SAASC,YAAY,QAAQ;AAC7B,SAASC,WAAW,QAAQ;AAC5B,SAASC,UAAU,QAAQ;AAC3B,SAASC,SAAS,QAAQ;AAC1B,SAASC,SAAS,QAAQ;AAC1B,SAASC,cAAc,QAAQ;AAC/B,SAASC,MAAM,QAAQ;AACvB,SAASC,IAAI,QAAQ;AACrB,SAASC,SAAS,QAAQ;AAC1B,SAASC,MAAM,QAAQ;AACvB,SAASC,UAAU,QAAQ;AAC3B,SAASC,qBAAqB,QAAQ;AACtC,SAASC,OAAO,QAAQ;AACxB,OAAO;AAEP,MAAMC,SAAA,GAAY;AAKlB,OAAO,SAASC,UAAU;EAAEC;AAAY,CAAS;EAC/C,MAAM;IAAEC;EAAC,CAAE,GAAGX,cAAA;EACd,MAAMY,MAAA,GAASb,SAAA;EAEf,MAAM;IAAEc;EAAO,CAAE,GAAGhB,UAAA;EAEpB,MAAM;IAAEiB,OAAO;IAAEC;EAAU,CAAE,GAAGX,MAAA;EAEhC,MAAM;IACJY,MAAA,EAAQ;MACNC,KAAA,EAAO;QACLC,MAAA,EAAQ;UAAEC,OAAA,EAASC;QAAY;MAAE,CAClC;MACDC,YAAY;MACZH,MAAA,EAAQ;QAAED,KAAA,EAAOK;MAAU;IAAE;EAC9B,CACF,GAAGxB,SAAA;EAEJ,MAAMyB,iBAAA,GAAoBhC,MAAA,CAAuB;EACjD,MAAM,CAACiC,YAAA,EAAcC,eAAA,CAAgB,GAAGjC,QAAA,CAAS;EAEjDF,SAAA,CAAU;IACR,MAAMoC,iBAAA,GAAoBA,CAAA;MACxB,MAAMC,EAAA,GAAKJ,iBAAA,CAAkBK,OAAO;MACpC,IAAID,EAAA,EAAI;QACN,MAAME,UAAA,GAAaF,EAAA,CAAGG,WAAW,GAAGH,EAAA,CAAGI,WAAW;QAClDN,eAAA,CAAgBI,UAAA;MAClB;IACF;IAEAH,iBAAA;IACAM,MAAA,CAAOC,gBAAgB,CAAC,UAAUP,iBAAA;IAElC,OAAO;MACLM,MAAA,CAAOE,mBAAmB,CAAC,UAAUR,iBAAA;IACvC;EACF,GAAG,CAACb,OAAA,CAAQ;EAEZ,MAAMsB,gBAAA,GAAmBtB,OAAA,GAAUuB,MAAA,CAAOC,MAAM,CAACxB,OAAA,IAAW,EAAE;EAE9D,oBACEyB,IAAA,CAAC;IAAOC,SAAA,EAAW,CAAC/B,SAAA,EAAWM,OAAA,IAAW,GAAGN,SAAA,YAAqB,CAAC,CAACgC,MAAM,CAACC,OAAA,EAASC,IAAI,CAAC;cACvF,aAAAJ,IAAA,CAAC;MAAIC,SAAA,EAAW,GAAG/B,SAAA,WAAoB;gBACrC,aAAAmC,KAAA,CAAC;QAAIJ,SAAA,EAAW,GAAG/B,SAAA,WAAoB;gCACrC8B,IAAA,CAACjC,UAAA;UAAWkC,SAAA,EAAW,GAAG/B,SAAA,sBAA+B;UAAEoC,QAAA,EAAU,CAAC;yBACtED,KAAA,CAAC;UAAIJ,SAAA,EAAW,GAAG/B,SAAA,oBAA6B;kCAC9CmC,KAAA,CAAC;YAAIJ,SAAA,EAAW,GAAG/B,SAAA,oBAA6B;oCAC9C8B,IAAA,CAACrC,MAAA;cACC,cAAY,GAAGa,OAAA,GAAUH,CAAA,CAAE,mBAAmBA,CAAA,CAAE,mBAAmBA,CAAA,CAAE,iBAAiB;cACtFkC,WAAA,EAAY;cACZN,SAAA,EAAW,GAAG/B,SAAA,kBAA2B;cACzCsC,IAAA,eAAMR,IAAA,CAAC1C,WAAA;cACPmD,OAAA,EAASA,CAAA,KAAMhC,UAAA,CAAW,CAACD,OAAA;cAC3BkC,IAAA,EAAK;6BAEPV,IAAA,CAAC;cAAIC,SAAA,EAAW,GAAG/B,SAAA,oBAA6B;wBAC9C,aAAA8B,IAAA,CAAC/B,OAAA;gBAAQgC,SAAA,EAAW,GAAG/B,SAAA;;;2BAG3BmC,KAAA,CAAC;YAAIJ,SAAA,EAAW,GAAG/B,SAAA,mBAA4B;oCAC7C8B,IAAA,CAAC;cAAIC,SAAA,EAAW,GAAG/B,SAAA,WAAoB;cAAEyC,GAAA,EAAK1B,iBAAA;wBAC3CY,gBAAA,CAAiBe,GAAG,CAAC,CAACC,MAAA,EAAQC,CAAA,kBAC7Bd,IAAA,CAAC;gBACCC,SAAA,EACEf,YAAA,IAAgB4B,CAAA,KAAMjB,gBAAA,CAAiBkB,MAAM,GAAG,IAC5C,GAAG7C,SAAA,eAAwB,GAC3B;0BAIL2C;iBAFIC,CAAA;gBAMV5B,YAAA,iBAAgBc,IAAA,CAAC;cAAIC,SAAA,EAAW,GAAG/B,SAAA;;cAErCa,YAAA,iBACCiB,IAAA,CAACnC,SAAA;YACCoC,SAAA,EAAW,GAAG/B,SAAA,aAAsB;YACpC8C,YAAA,EAAcA,CAAC;cAAEC,MAAM;cAAER,OAAO;cAAES,SAAS;cAAE,GAAGC;YAAA,CAAW,kBACzDnB,IAAA,CAACrC,MAAA;cACC,cAAYU,CAAA,CAAE;cACdkC,WAAA,EAAY;cACZa,gBAAA,EAAkB;gBAAEF,SAAA;gBAAWG,KAAA,EAAO;kBAAEC,OAAA,EAAS;gBAAwB;cAAE;cAC3Ed,IAAA,eAAMR,IAAA,CAAC3C,YAAA;gBAAakE,IAAA,EAAM;;cAC1BC,YAAA,EAAa;cACbf,OAAA,EAASA,OAAA;cACTgB,QAAA,EAAUR,MAAA;cACT,GAAGE,SAAS;wBAEb,aAAAd,KAAA,CAAC;gBAAIJ,SAAA,EAAU;2BACZ3B,MAAA,CAAOoD,IAAI,E,aACZ1B,IAAA,CAAC5C,WAAA;kBAAYuE,SAAA,EAAWV,MAAA,GAAS,OAAO;kBAAQM,IAAA,EAAM;;;;2BAMhEvB,IAAA,CAACpC,IAAA;YACC,cAAYS,CAAA,CAAE;YACd4B,SAAA,EAAW,GAAG/B,SAAA,WAAoB;YAClC0D,IAAA,EAAM9E,cAAA,CAAe;cAAEkC,UAAA;cAAY6C,IAAA,EAAM/C;YAAa;YACtDgD,QAAA,EAAU;YACVxB,QAAA,EAAU;sBAEV,aAAAN,IAAA,CAAChC,qBAAA;cAAsB+D,eAAA,EAAiB3D,YAAA;cAAc4D,QAAA,eAAUhC,IAAA,CAAC7C,OAAA;;;;;;;AAO/E","ignoreList":[]}

package/dist/elements/ArrayAction/index.css

@@ -3,6 +3,13 @@
     cursor: pointer;
   }
 
+  .array-actions__button.popup-button--active,
+  .array-actions__button.popup-button--active:hover,
+  .array-actions__button.popup-button--active:active {
+    background: var(--color-bg-selected);
+    color: var(--color-icon-selected);
+  }
+
   .array-actions__actions {
     list-style: none;
     margin: 0;

package/dist/elements/ArrayAction/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/ArrayAction/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAA;AASzB,OAAO,aAAa,CAAA;AAKpB,MAAM,MAAM,KAAK,GAAG;IAClB,MAAM,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,SAAS,CAAC,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,GAAG,IAAI,CAAA;IACrE,OAAO,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IAChC,YAAY,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAA;IACvC,UAAU,EAAE,OAAO,CAAA;IACnB,KAAK,EAAE,MAAM,CAAA;IACb,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,OAAO,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,EAAE,EAAE,MAAM,KAAK,IAAI,CAAA;IAC3C,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IACjC,SAAS,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IAClC,QAAQ,EAAE,MAAM,CAAA;CACjB,CAAA;AAED,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CA8GvC,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/ArrayAction/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAA;AAWzB,OAAO,aAAa,CAAA;AAIpB,MAAM,MAAM,KAAK,GAAG;IAClB,MAAM,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,SAAS,CAAC,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,GAAG,IAAI,CAAA;IACrE,OAAO,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IAChC,YAAY,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAA;IACvC,UAAU,EAAE,OAAO,CAAA;IACnB,KAAK,EAAE,MAAM,CAAA;IACb,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,OAAO,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,EAAE,EAAE,MAAM,KAAK,IAAI,CAAA;IAC3C,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IACjC,SAAS,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IAClC,QAAQ,EAAE,MAAM,CAAA;CACjB,CAAA;AAED,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CA4GvC,CAAA"}