@payloadcms/ui 3.0.0-canary.926cbeb → 3.0.0-canary.93a7bbd

package/dist/elements/DocumentControls/index.js

@@ -2,9 +2,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { getTranslation } from '@payloadcms/translations';
 import React, { Fragment, useEffect } from 'react';
-import { useComponentMap } from '../../providers/ComponentMap/index.js';
 import { useConfig } from '../../providers/Config/index.js';
 import { useTranslation } from '../../providers/Translation/index.js';
+import { formatAdminURL } from '../../utilities/formatAdminURL.js';
 import { formatDate } from '../../utilities/formatDate.js';
 import { Autosave } from '../Autosave/index.js';
 import { DeleteDocument } from '../DeleteDocument/index.js';
@@ -21,13 +21,12 @@ const baseClass = 'doc-controls';
 export const DocumentControls = (props)=>{
     const { id, slug, data, disableActions, hasSavePermission, isAccountView, isEditing, permissions } = props;
     const { i18n } = useTranslation();
-    const config = useConfig();
-    const { getComponentMap } = useComponentMap();
-    const collectionConfig = config.collections.find((coll)=>coll.slug === slug);
-    const globalConfig = config.globals.find((global)=>global.slug === slug);
-    const componentMap = getComponentMap({
-        collectionSlug: collectionConfig?.slug,
-        globalSlug: globalConfig?.slug
+    const { config, getEntityConfig } = useConfig();
+    const collectionConfig = getEntityConfig({
+        collectionSlug: slug
+    });
+    const globalConfig = getEntityConfig({
+        globalSlug: slug
     });
     const { admin: { dateFormat }, routes: { admin: adminRoute } } = config;
     // Settings these in state to avoid hydration issues if there is a mismatch between the server and client
@@ -150,21 +149,21 @@ export const DocumentControls = (props)=>{
                             /*#__PURE__*/ _jsxs("div", {
                                 className: `${baseClass}__controls`,
                                 children: [
-                                    componentMap?.isPreviewEnabled && /*#__PURE__*/ _jsx(PreviewButton, {
-                                        CustomComponent: componentMap.PreviewButton
+                                    (collectionConfig?._isPreviewEnabled || globalConfig?._isPreviewEnabled) && /*#__PURE__*/ _jsx(PreviewButton, {
+                                        CustomComponent: collectionConfig?.admin?.components?.edit?.PreviewButton || globalConfig?.admin?.components?.elements?.PreviewButton
                                     }),
                                     hasSavePermission && /*#__PURE__*/ _jsx(React.Fragment, {
                                         children: collectionConfig?.versions?.drafts || globalConfig?.versions?.drafts ? /*#__PURE__*/ _jsxs(React.Fragment, {
                                             children: [
                                                 (collectionConfig?.versions?.drafts && !collectionConfig?.versions?.drafts?.autosave || unsavedDraftWithValidations || globalConfig?.versions?.drafts && !globalConfig?.versions?.drafts?.autosave) && /*#__PURE__*/ _jsx(SaveDraftButton, {
-                                                    CustomComponent: componentMap.SaveDraftButton
+                                                    CustomComponent: collectionConfig?.admin?.components?.edit?.SaveDraftButton || globalConfig?.admin?.components?.elements?.SaveDraftButton
                                                 }),
                                                 /*#__PURE__*/ _jsx(PublishButton, {
-                                                    CustomComponent: componentMap.PublishButton
+                                                    CustomComponent: collectionConfig?.admin?.components?.edit?.PublishButton || globalConfig?.admin?.components?.elements?.PublishButton
                                                 })
                                             ]
                                         }) : /*#__PURE__*/ _jsx(SaveButton, {
-                                            CustomComponent: componentMap.SaveButton
+                                            CustomComponent: collectionConfig?.admin?.components?.edit?.SaveButton || globalConfig?.admin?.components?.elements?.SaveButton
                                         })
                                     })
                                 ]
@@ -187,7 +186,10 @@ export const DocumentControls = (props)=>{
                                         hasCreatePermission && /*#__PURE__*/ _jsxs(React.Fragment, {
                                             children: [
                                                 /*#__PURE__*/ _jsx(PopupList.Button, {
-                                                    href: `${adminRoute}/collections/${collectionConfig?.slug}/create`,
+                                                    href: formatAdminURL({
+                                                        adminRoute,
+                                                        path: `/collections/${collectionConfig?.slug}/create`
+                                                    }),
                                                     id: "action-create",
                                                     children: i18n.t('general:createNew')
                                                 }),

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/elements/DocumentControls/index.tsx"],"sourcesContent":["'use client'\nimport type { CollectionPermission, GlobalPermission, SanitizedCollectionConfig } from 'payload'\n\nimport { getTranslation } from '@payloadcms/translations'\nimport React, { Fragment, useEffect } from 'react'\n\nimport { useComponentMap } from '../../providers/ComponentMap/index.js'\nimport { useConfig } from '../../providers/Config/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { formatDate } from '../../utilities/formatDate.js'\nimport { Autosave } from '../Autosave/index.js'\nimport { DeleteDocument } from '../DeleteDocument/index.js'\nimport { DuplicateDocument } from '../DuplicateDocument/index.js'\nimport { Gutter } from '../Gutter/index.js'\nimport { Popup, PopupList } from '../Popup/index.js'\nimport { PreviewButton } from '../PreviewButton/index.js'\nimport { PublishButton } from '../PublishButton/index.js'\nimport { SaveButton } from '../SaveButton/index.js'\nimport { SaveDraftButton } from '../SaveDraftButton/index.js'\nimport { Status } from '../Status/index.js'\nimport './index.scss'\n\nconst baseClass = 'doc-controls'\n\nexport const DocumentControls: React.FC<{\n  apiURL: string\n  data?: any\n  disableActions?: boolean\n  hasPublishPermission?: boolean\n  hasSavePermission?: boolean\n  id?: number | string\n  isAccountView?: boolean\n  isEditing?: boolean\n  permissions: CollectionPermission | GlobalPermission | null\n  slug: SanitizedCollectionConfig['slug']\n}> = (props) => {\n  const {\n    id,\n    slug,\n    data,\n    disableActions,\n    hasSavePermission,\n    isAccountView,\n    isEditing,\n    permissions,\n  } = props\n\n  const { i18n } = useTranslation()\n\n  const config = useConfig()\n  const { getComponentMap } = useComponentMap()\n\n  const collectionConfig = config.collections.find((coll) => coll.slug === slug)\n  const globalConfig = config.globals.find((global) => global.slug === slug)\n\n  const componentMap = getComponentMap({\n    collectionSlug: collectionConfig?.slug,\n    globalSlug: globalConfig?.slug,\n  })\n\n  const {\n    admin: { dateFormat },\n    routes: { admin: adminRoute },\n  } = config\n\n  // Settings these in state to avoid hydration issues if there is a mismatch between the server and client\n  const [updatedAt, setUpdatedAt] = React.useState<string>('')\n  const [createdAt, setCreatedAt] = React.useState<string>('')\n\n  useEffect(() => {\n    if (data?.updatedAt) {\n      setUpdatedAt(formatDate({ date: data.updatedAt, i18n, pattern: dateFormat }))\n    }\n    if (data?.createdAt) {\n      setCreatedAt(formatDate({ date: data.createdAt, i18n, pattern: dateFormat }))\n    }\n  }, [data, i18n, dateFormat])\n\n  const hasCreatePermission =\n    permissions && 'create' in permissions && permissions.create?.permission\n\n  const hasDeletePermission =\n    permissions && 'delete' in permissions && permissions.delete?.permission\n\n  const showDotMenu = Boolean(\n    collectionConfig && id && !disableActions && (hasCreatePermission || hasDeletePermission),\n  )\n\n  const unsavedDraftWithValidations =\n    !id && collectionConfig?.versions?.drafts && collectionConfig.versions?.drafts.validate\n\n  return (\n    <Gutter className={baseClass}>\n      <div className={`${baseClass}__wrapper`}>\n        <div className={`${baseClass}__content`}>\n          <ul className={`${baseClass}__meta`}>\n            {collectionConfig && !isEditing && !isAccountView && (\n              <li className={`${baseClass}__list-item`}>\n                <p className={`${baseClass}__value`}>\n                  {i18n.t('general:creatingNewLabel', {\n                    label: getTranslation(\n                      collectionConfig?.labels?.singular ?? i18n.t('general:document'),\n                      i18n,\n                    ),\n                  })}\n                </p>\n              </li>\n            )}\n            {(collectionConfig?.versions?.drafts || globalConfig?.versions?.drafts) && (\n              <Fragment>\n                {(globalConfig || (collectionConfig && isEditing)) && (\n                  <li\n                    className={[`${baseClass}__status`, `${baseClass}__list-item`]\n                      .filter(Boolean)\n                      .join(' ')}\n                  >\n                    <Status />\n                  </li>\n                )}\n                {((collectionConfig?.versions?.drafts &&\n                  collectionConfig?.versions?.drafts?.autosave &&\n                  !unsavedDraftWithValidations) ||\n                  (globalConfig?.versions?.drafts && globalConfig?.versions?.drafts?.autosave)) &&\n                  hasSavePermission && (\n                    <li className={`${baseClass}__list-item`}>\n                      <Autosave\n                        collection={collectionConfig}\n                        global={globalConfig}\n                        id={id}\n                        publishedDocUpdatedAt={data?.createdAt}\n                      />\n                    </li>\n                  )}\n              </Fragment>\n            )}\n            {collectionConfig?.timestamps && (isEditing || isAccountView) && (\n              <Fragment>\n                <li\n                  className={[`${baseClass}__list-item`, `${baseClass}__value-wrap`]\n                    .filter(Boolean)\n                    .join(' ')}\n                  title={data?.updatedAt ? updatedAt : ''}\n                >\n                  <p className={`${baseClass}__label`}>{i18n.t('general:lastModified')}:&nbsp;</p>\n                  {data?.updatedAt && <p className={`${baseClass}__value`}>{updatedAt}</p>}\n                </li>\n                <li\n                  className={[`${baseClass}__list-item`, `${baseClass}__value-wrap`]\n                    .filter(Boolean)\n                    .join(' ')}\n                  title={data?.createdAt ? createdAt : ''}\n                >\n                  <p className={`${baseClass}__label`}>{i18n.t('general:created')}:&nbsp;</p>\n                  {data?.createdAt && <p className={`${baseClass}__value`}>{createdAt}</p>}\n                </li>\n              </Fragment>\n            )}\n          </ul>\n        </div>\n        <div className={`${baseClass}__controls-wrapper`}>\n          <div className={`${baseClass}__controls`}>\n            {componentMap?.isPreviewEnabled && (\n              <PreviewButton CustomComponent={componentMap.PreviewButton} />\n            )}\n            {hasSavePermission && (\n              <React.Fragment>\n                {collectionConfig?.versions?.drafts || globalConfig?.versions?.drafts ? (\n                  <React.Fragment>\n                    {((collectionConfig?.versions?.drafts &&\n                      !collectionConfig?.versions?.drafts?.autosave) ||\n                      unsavedDraftWithValidations ||\n                      (globalConfig?.versions?.drafts &&\n                        !globalConfig?.versions?.drafts?.autosave)) && (\n                      <SaveDraftButton CustomComponent={componentMap.SaveDraftButton} />\n                    )}\n                    <PublishButton CustomComponent={componentMap.PublishButton} />\n                  </React.Fragment>\n                ) : (\n                  <SaveButton CustomComponent={componentMap.SaveButton} />\n                )}\n              </React.Fragment>\n            )}\n          </div>\n          {showDotMenu && (\n            <Popup\n              button={\n                <div className={`${baseClass}__dots`}>\n                  <div />\n                  <div />\n                  <div />\n                </div>\n              }\n              className={`${baseClass}__popup`}\n              horizontalAlign=\"right\"\n              size=\"large\"\n              verticalAlign=\"bottom\"\n            >\n              <PopupList.ButtonGroup>\n                {hasCreatePermission && (\n                  <React.Fragment>\n                    <PopupList.Button\n                      href={`${adminRoute}/collections/${collectionConfig?.slug}/create`}\n                      id=\"action-create\"\n                    >\n                      {i18n.t('general:createNew')}\n                    </PopupList.Button>\n                    {!collectionConfig.disableDuplicate && isEditing && (\n                      <DuplicateDocument\n                        id={id.toString()}\n                        singularLabel={collectionConfig?.labels?.singular}\n                        slug={collectionConfig?.slug}\n                      />\n                    )}\n                  </React.Fragment>\n                )}\n                {hasDeletePermission && (\n                  <DeleteDocument\n                    buttonId=\"action-delete\"\n                    collectionSlug={collectionConfig?.slug}\n                    id={id.toString()}\n                    singularLabel={collectionConfig?.labels?.singular}\n                    useAsTitle={collectionConfig?.admin?.useAsTitle}\n                  />\n                )}\n              </PopupList.ButtonGroup>\n            </Popup>\n          )}\n        </div>\n      </div>\n      <div className={`${baseClass}__divider`} />\n    </Gutter>\n  )\n}\n"],"names":["getTranslation","React","Fragment","useEffect","useComponentMap","useConfig","useTranslation","formatDate","Autosave","DeleteDocument","DuplicateDocument","Gutter","Popup","PopupList","PreviewButton","PublishButton","SaveButton","SaveDraftButton","Status","baseClass","DocumentControls","props","id","slug","data","disableActions","hasSavePermission","isAccountView","isEditing","permissions","i18n","config","getComponentMap","collectionConfig","collections","find","coll","globalConfig","globals","global","componentMap","collectionSlug","globalSlug","admin","dateFormat","routes","adminRoute","updatedAt","setUpdatedAt","useState","createdAt","setCreatedAt","date","pattern","hasCreatePermission","create","permission","hasDeletePermission","delete","showDotMenu","Boolean","unsavedDraftWithValidations","versions","drafts","validate","className","div","ul","li","p","t","label","labels","singular","filter","join","autosave","collection","publishedDocUpdatedAt","timestamps","title","isPreviewEnabled","CustomComponent","button","horizontalAlign","size","verticalAlign","ButtonGroup","Button","href","disableDuplicate","toString","singularLabel","buttonId","useAsTitle"],"mappings":"AAAA;;AAGA,SAASA,cAAc,QAAQ,2BAA0B;AACzD,OAAOC,SAASC,QAAQ,EAAEC,SAAS,QAAQ,QAAO;AAElD,SAASC,eAAe,QAAQ,wCAAuC;AACvE,SAASC,SAAS,QAAQ,kCAAiC;AAC3D,SAASC,cAAc,QAAQ,uCAAsC;AACrE,SAASC,UAAU,QAAQ,gCAA+B;AAC1D,SAASC,QAAQ,QAAQ,uBAAsB;AAC/C,SAASC,cAAc,QAAQ,6BAA4B;AAC3D,SAASC,iBAAiB,QAAQ,gCAA+B;AACjE,SAASC,MAAM,QAAQ,qBAAoB;AAC3C,SAASC,KAAK,EAAEC,SAAS,QAAQ,oBAAmB;AACpD,SAASC,aAAa,QAAQ,4BAA2B;AACzD,SAASC,aAAa,QAAQ,4BAA2B;AACzD,SAASC,UAAU,QAAQ,yBAAwB;AACnD,SAASC,eAAe,QAAQ,8BAA6B;AAC7D,SAASC,MAAM,QAAQ,qBAAoB;AAC3C,OAAO,eAAc;AAErB,MAAMC,YAAY;AAElB,OAAO,MAAMC,mBAWR,CAACC;IACJ,MAAM,EACJC,EAAE,EACFC,IAAI,EACJC,IAAI,EACJC,cAAc,EACdC,iBAAiB,EACjBC,aAAa,EACbC,SAAS,EACTC,WAAW,EACZ,GAAGR;IAEJ,MAAM,EAAES,IAAI,EAAE,GAAGxB;IAEjB,MAAMyB,SAAS1B;IACf,MAAM,EAAE2B,eAAe,EAAE,GAAG5B;IAE5B,MAAM6B,mBAAmBF,OAAOG,WAAW,CAACC,IAAI,CAAC,CAACC,OAASA,KAAKb,IAAI,KAAKA;IACzE,MAAMc,eAAeN,OAAOO,OAAO,CAACH,IAAI,CAAC,CAACI,SAAWA,OAAOhB,IAAI,KAAKA;IAErE,MAAMiB,eAAeR,gBAAgB;QACnCS,gBAAgBR,kBAAkBV;QAClCmB,YAAYL,cAAcd;IAC5B;IAEA,MAAM,EACJoB,OAAO,EAAEC,UAAU,EAAE,EACrBC,QAAQ,EAAEF,OAAOG,UAAU,EAAE,EAC9B,GAAGf;IAEJ,yGAAyG;IACzG,MAAM,CAACgB,WAAWC,aAAa,GAAG/C,MAAMgD,QAAQ,CAAS;IACzD,MAAM,CAACC,WAAWC,aAAa,GAAGlD,MAAMgD,QAAQ,CAAS;IAEzD9C,UAAU;QACR,IAAIqB,MAAMuB,WAAW;YACnBC,aAAazC,WAAW;gBAAE6C,MAAM5B,KAAKuB,SAAS;gBAAEjB;gBAAMuB,SAAST;YAAW;QAC5E;QACA,IAAIpB,MAAM0B,WAAW;YACnBC,aAAa5C,WAAW;gBAAE6C,MAAM5B,KAAK0B,SAAS;gBAAEpB;gBAAMuB,SAAST;YAAW;QAC5E;IACF,GAAG;QAACpB;QAAMM;QAAMc;KAAW;IAE3B,MAAMU,sBACJzB,eAAe,YAAYA,eAAeA,YAAY0B,MAAM,EAAEC;IAEhE,MAAMC,sBACJ5B,eAAe,YAAYA,eAAeA,YAAY6B,MAAM,EAAEF;IAEhE,MAAMG,cAAcC,QAClB3B,oBAAoBX,MAAM,CAACG,kBAAmB6B,CAAAA,uBAAuBG,mBAAkB;IAGzF,MAAMI,8BACJ,CAACvC,MAAMW,kBAAkB6B,UAAUC,UAAU9B,iBAAiB6B,QAAQ,EAAEC,OAAOC;IAEjF,qBACE,MAACrD;QAAOsD,WAAW9C;;0BACjB,MAAC+C;gBAAID,WAAW,CAAC,EAAE9C,UAAU,SAAS,CAAC;;kCACrC,KAAC+C;wBAAID,WAAW,CAAC,EAAE9C,UAAU,SAAS,CAAC;kCACrC,cAAA,MAACgD;4BAAGF,WAAW,CAAC,EAAE9C,UAAU,MAAM,CAAC;;gCAChCc,oBAAoB,CAACL,aAAa,CAACD,+BAClC,KAACyC;oCAAGH,WAAW,CAAC,EAAE9C,UAAU,WAAW,CAAC;8CACtC,cAAA,KAACkD;wCAAEJ,WAAW,CAAC,EAAE9C,UAAU,OAAO,CAAC;kDAChCW,KAAKwC,CAAC,CAAC,4BAA4B;4CAClCC,OAAOvE,eACLiC,kBAAkBuC,QAAQC,YAAY3C,KAAKwC,CAAC,CAAC,qBAC7CxC;wCAEJ;;;gCAIJG,CAAAA,kBAAkB6B,UAAUC,UAAU1B,cAAcyB,UAAUC,MAAK,mBACnE,MAAC7D;;wCACGmC,CAAAA,gBAAiBJ,oBAAoBL,SAAS,mBAC9C,KAACwC;4CACCH,WAAW;gDAAC,CAAC,EAAE9C,UAAU,QAAQ,CAAC;gDAAE,CAAC,EAAEA,UAAU,WAAW,CAAC;6CAAC,CAC3DuD,MAAM,CAACd,SACPe,IAAI,CAAC;sDAER,cAAA,KAACzD;;wCAGH,CAAA,AAACe,kBAAkB6B,UAAUC,UAC7B9B,kBAAkB6B,UAAUC,QAAQa,YACpC,CAACf,+BACAxB,cAAcyB,UAAUC,UAAU1B,cAAcyB,UAAUC,QAAQa,QAAQ,KAC3ElD,mCACE,KAAC0C;4CAAGH,WAAW,CAAC,EAAE9C,UAAU,WAAW,CAAC;sDACtC,cAAA,KAACX;gDACCqE,YAAY5C;gDACZM,QAAQF;gDACRf,IAAIA;gDACJwD,uBAAuBtD,MAAM0B;;;;;gCAMxCjB,kBAAkB8C,cAAenD,CAAAA,aAAaD,aAAY,mBACzD,MAACzB;;sDACC,MAACkE;4CACCH,WAAW;gDAAC,CAAC,EAAE9C,UAAU,WAAW,CAAC;gDAAE,CAAC,EAAEA,UAAU,YAAY,CAAC;6CAAC,CAC/DuD,MAAM,CAACd,SACPe,IAAI,CAAC;4CACRK,OAAOxD,MAAMuB,YAAYA,YAAY;;8DAErC,MAACsB;oDAAEJ,WAAW,CAAC,EAAE9C,UAAU,OAAO,CAAC;;wDAAGW,KAAKwC,CAAC,CAAC;wDAAwB;;;gDACpE9C,MAAMuB,2BAAa,KAACsB;oDAAEJ,WAAW,CAAC,EAAE9C,UAAU,OAAO,CAAC;8DAAG4B;;;;sDAE5D,MAACqB;4CACCH,WAAW;gDAAC,CAAC,EAAE9C,UAAU,WAAW,CAAC;gDAAE,CAAC,EAAEA,UAAU,YAAY,CAAC;6CAAC,CAC/DuD,MAAM,CAACd,SACPe,IAAI,CAAC;4CACRK,OAAOxD,MAAM0B,YAAYA,YAAY;;8DAErC,MAACmB;oDAAEJ,WAAW,CAAC,EAAE9C,UAAU,OAAO,CAAC;;wDAAGW,KAAKwC,CAAC,CAAC;wDAAmB;;;gDAC/D9C,MAAM0B,2BAAa,KAACmB;oDAAEJ,WAAW,CAAC,EAAE9C,UAAU,OAAO,CAAC;8DAAG+B;;;;;;;;;kCAMpE,MAACgB;wBAAID,WAAW,CAAC,EAAE9C,UAAU,kBAAkB,CAAC;;0CAC9C,MAAC+C;gCAAID,WAAW,CAAC,EAAE9C,UAAU,UAAU,CAAC;;oCACrCqB,cAAcyC,kCACb,KAACnE;wCAAcoE,iBAAiB1C,aAAa1B,aAAa;;oCAE3DY,mCACC,KAACzB,MAAMC,QAAQ;kDACZ+B,kBAAkB6B,UAAUC,UAAU1B,cAAcyB,UAAUC,uBAC7D,MAAC9D,MAAMC,QAAQ;;gDACX,CAAA,AAAC+B,kBAAkB6B,UAAUC,UAC7B,CAAC9B,kBAAkB6B,UAAUC,QAAQa,YACrCf,+BACCxB,cAAcyB,UAAUC,UACvB,CAAC1B,cAAcyB,UAAUC,QAAQa,QAAQ,mBAC3C,KAAC3D;oDAAgBiE,iBAAiB1C,aAAavB,eAAe;;8DAEhE,KAACF;oDAAcmE,iBAAiB1C,aAAazB,aAAa;;;2DAG5D,KAACC;4CAAWkE,iBAAiB1C,aAAaxB,UAAU;;;;;4BAK3D2C,6BACC,KAAC/C;gCACCuE,sBACE,MAACjB;oCAAID,WAAW,CAAC,EAAE9C,UAAU,MAAM,CAAC;;sDAClC,KAAC+C;sDACD,KAACA;sDACD,KAACA;;;gCAGLD,WAAW,CAAC,EAAE9C,UAAU,OAAO,CAAC;gCAChCiE,iBAAgB;gCAChBC,MAAK;gCACLC,eAAc;0CAEd,cAAA,MAACzE,UAAU0E,WAAW;;wCACnBjC,qCACC,MAACrD,MAAMC,QAAQ;;8DACb,KAACW,UAAU2E,MAAM;oDACfC,MAAM,CAAC,EAAE3C,WAAW,aAAa,EAAEb,kBAAkBV,KAAK,OAAO,CAAC;oDAClED,IAAG;8DAEFQ,KAAKwC,CAAC,CAAC;;gDAET,CAACrC,iBAAiByD,gBAAgB,IAAI9D,2BACrC,KAAClB;oDACCY,IAAIA,GAAGqE,QAAQ;oDACfC,eAAe3D,kBAAkBuC,QAAQC;oDACzClD,MAAMU,kBAAkBV;;;;wCAK/BkC,qCACC,KAAChD;4CACCoF,UAAS;4CACTpD,gBAAgBR,kBAAkBV;4CAClCD,IAAIA,GAAGqE,QAAQ;4CACfC,eAAe3D,kBAAkBuC,QAAQC;4CACzCqB,YAAY7D,kBAAkBU,OAAOmD;;;;;;;;;0BAQnD,KAAC5B;gBAAID,WAAW,CAAC,EAAE9C,UAAU,SAAS,CAAC;;;;AAG7C,EAAC"}
+{"version":3,"sources":["../../../src/elements/DocumentControls/index.tsx"],"sourcesContent":["'use client'\nimport type {\n  ClientCollectionConfig,\n  ClientGlobalConfig,\n  CollectionPermission,\n  GlobalPermission,\n  SanitizedCollectionConfig,\n} from 'payload'\n\nimport { getTranslation } from '@payloadcms/translations'\nimport React, { Fragment, useEffect } from 'react'\n\nimport { useConfig } from '../../providers/Config/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { formatAdminURL } from '../../utilities/formatAdminURL.js'\nimport { formatDate } from '../../utilities/formatDate.js'\nimport { Autosave } from '../Autosave/index.js'\nimport { DeleteDocument } from '../DeleteDocument/index.js'\nimport { DuplicateDocument } from '../DuplicateDocument/index.js'\nimport { Gutter } from '../Gutter/index.js'\nimport { Popup, PopupList } from '../Popup/index.js'\nimport { PreviewButton } from '../PreviewButton/index.js'\nimport { PublishButton } from '../PublishButton/index.js'\nimport { SaveButton } from '../SaveButton/index.js'\nimport { SaveDraftButton } from '../SaveDraftButton/index.js'\nimport { Status } from '../Status/index.js'\nimport './index.scss'\n\nconst baseClass = 'doc-controls'\n\nexport const DocumentControls: React.FC<{\n  readonly apiURL: string\n  readonly data?: any\n  readonly disableActions?: boolean\n  readonly hasPublishPermission?: boolean\n  readonly hasSavePermission?: boolean\n  readonly id?: number | string\n  readonly isAccountView?: boolean\n  readonly isEditing?: boolean\n  readonly permissions: CollectionPermission | GlobalPermission | null\n  readonly slug: SanitizedCollectionConfig['slug']\n}> = (props) => {\n  const {\n    id,\n    slug,\n    data,\n    disableActions,\n    hasSavePermission,\n    isAccountView,\n    isEditing,\n    permissions,\n  } = props\n\n  const { i18n } = useTranslation()\n\n  const { config, getEntityConfig } = useConfig()\n\n  const collectionConfig = getEntityConfig({ collectionSlug: slug }) as ClientCollectionConfig\n  const globalConfig = getEntityConfig({ globalSlug: slug }) as ClientGlobalConfig\n\n  const {\n    admin: { dateFormat },\n    routes: { admin: adminRoute },\n  } = config\n\n  // Settings these in state to avoid hydration issues if there is a mismatch between the server and client\n  const [updatedAt, setUpdatedAt] = React.useState<string>('')\n  const [createdAt, setCreatedAt] = React.useState<string>('')\n\n  useEffect(() => {\n    if (data?.updatedAt) {\n      setUpdatedAt(formatDate({ date: data.updatedAt, i18n, pattern: dateFormat }))\n    }\n    if (data?.createdAt) {\n      setCreatedAt(formatDate({ date: data.createdAt, i18n, pattern: dateFormat }))\n    }\n  }, [data, i18n, dateFormat])\n\n  const hasCreatePermission =\n    permissions && 'create' in permissions && permissions.create?.permission\n\n  const hasDeletePermission =\n    permissions && 'delete' in permissions && permissions.delete?.permission\n\n  const showDotMenu = Boolean(\n    collectionConfig && id && !disableActions && (hasCreatePermission || hasDeletePermission),\n  )\n\n  const unsavedDraftWithValidations =\n    !id && collectionConfig?.versions?.drafts && collectionConfig.versions?.drafts.validate\n\n  return (\n    <Gutter className={baseClass}>\n      <div className={`${baseClass}__wrapper`}>\n        <div className={`${baseClass}__content`}>\n          <ul className={`${baseClass}__meta`}>\n            {collectionConfig && !isEditing && !isAccountView && (\n              <li className={`${baseClass}__list-item`}>\n                <p className={`${baseClass}__value`}>\n                  {i18n.t('general:creatingNewLabel', {\n                    label: getTranslation(\n                      collectionConfig?.labels?.singular ?? i18n.t('general:document'),\n                      i18n,\n                    ),\n                  })}\n                </p>\n              </li>\n            )}\n            {(collectionConfig?.versions?.drafts || globalConfig?.versions?.drafts) && (\n              <Fragment>\n                {(globalConfig || (collectionConfig && isEditing)) && (\n                  <li\n                    className={[`${baseClass}__status`, `${baseClass}__list-item`]\n                      .filter(Boolean)\n                      .join(' ')}\n                  >\n                    <Status />\n                  </li>\n                )}\n                {((collectionConfig?.versions?.drafts &&\n                  collectionConfig?.versions?.drafts?.autosave &&\n                  !unsavedDraftWithValidations) ||\n                  (globalConfig?.versions?.drafts && globalConfig?.versions?.drafts?.autosave)) &&\n                  hasSavePermission && (\n                    <li className={`${baseClass}__list-item`}>\n                      <Autosave\n                        collection={collectionConfig}\n                        global={globalConfig}\n                        id={id}\n                        publishedDocUpdatedAt={data?.createdAt}\n                      />\n                    </li>\n                  )}\n              </Fragment>\n            )}\n            {collectionConfig?.timestamps && (isEditing || isAccountView) && (\n              <Fragment>\n                <li\n                  className={[`${baseClass}__list-item`, `${baseClass}__value-wrap`]\n                    .filter(Boolean)\n                    .join(' ')}\n                  title={data?.updatedAt ? updatedAt : ''}\n                >\n                  <p className={`${baseClass}__label`}>{i18n.t('general:lastModified')}:&nbsp;</p>\n                  {data?.updatedAt && <p className={`${baseClass}__value`}>{updatedAt}</p>}\n                </li>\n                <li\n                  className={[`${baseClass}__list-item`, `${baseClass}__value-wrap`]\n                    .filter(Boolean)\n                    .join(' ')}\n                  title={data?.createdAt ? createdAt : ''}\n                >\n                  <p className={`${baseClass}__label`}>{i18n.t('general:created')}:&nbsp;</p>\n                  {data?.createdAt && <p className={`${baseClass}__value`}>{createdAt}</p>}\n                </li>\n              </Fragment>\n            )}\n          </ul>\n        </div>\n        <div className={`${baseClass}__controls-wrapper`}>\n          <div className={`${baseClass}__controls`}>\n            {(collectionConfig?._isPreviewEnabled || globalConfig?._isPreviewEnabled) && (\n              <PreviewButton\n                CustomComponent={\n                  collectionConfig?.admin?.components?.edit?.PreviewButton ||\n                  globalConfig?.admin?.components?.elements?.PreviewButton\n                }\n              />\n            )}\n            {hasSavePermission && (\n              <React.Fragment>\n                {collectionConfig?.versions?.drafts || globalConfig?.versions?.drafts ? (\n                  <React.Fragment>\n                    {((collectionConfig?.versions?.drafts &&\n                      !collectionConfig?.versions?.drafts?.autosave) ||\n                      unsavedDraftWithValidations ||\n                      (globalConfig?.versions?.drafts &&\n                        !globalConfig?.versions?.drafts?.autosave)) && (\n                      <SaveDraftButton\n                        CustomComponent={\n                          collectionConfig?.admin?.components?.edit?.SaveDraftButton ||\n                          globalConfig?.admin?.components?.elements?.SaveDraftButton\n                        }\n                      />\n                    )}\n                    <PublishButton\n                      CustomComponent={\n                        collectionConfig?.admin?.components?.edit?.PublishButton ||\n                        globalConfig?.admin?.components?.elements?.PublishButton\n                      }\n                    />\n                  </React.Fragment>\n                ) : (\n                  <SaveButton\n                    CustomComponent={\n                      collectionConfig?.admin?.components?.edit?.SaveButton ||\n                      globalConfig?.admin?.components?.elements?.SaveButton\n                    }\n                  />\n                )}\n              </React.Fragment>\n            )}\n          </div>\n          {showDotMenu && (\n            <Popup\n              button={\n                <div className={`${baseClass}__dots`}>\n                  <div />\n                  <div />\n                  <div />\n                </div>\n              }\n              className={`${baseClass}__popup`}\n              horizontalAlign=\"right\"\n              size=\"large\"\n              verticalAlign=\"bottom\"\n            >\n              <PopupList.ButtonGroup>\n                {hasCreatePermission && (\n                  <React.Fragment>\n                    <PopupList.Button\n                      href={formatAdminURL({\n                        adminRoute,\n                        path: `/collections/${collectionConfig?.slug}/create`,\n                      })}\n                      id=\"action-create\"\n                    >\n                      {i18n.t('general:createNew')}\n                    </PopupList.Button>\n                    {!collectionConfig.disableDuplicate && isEditing && (\n                      <DuplicateDocument\n                        id={id.toString()}\n                        singularLabel={collectionConfig?.labels?.singular}\n                        slug={collectionConfig?.slug}\n                      />\n                    )}\n                  </React.Fragment>\n                )}\n                {hasDeletePermission && (\n                  <DeleteDocument\n                    buttonId=\"action-delete\"\n                    collectionSlug={collectionConfig?.slug}\n                    id={id.toString()}\n                    singularLabel={collectionConfig?.labels?.singular}\n                    useAsTitle={collectionConfig?.admin?.useAsTitle}\n                  />\n                )}\n              </PopupList.ButtonGroup>\n            </Popup>\n          )}\n        </div>\n      </div>\n      <div className={`${baseClass}__divider`} />\n    </Gutter>\n  )\n}\n"],"names":["getTranslation","React","Fragment","useEffect","useConfig","useTranslation","formatAdminURL","formatDate","Autosave","DeleteDocument","DuplicateDocument","Gutter","Popup","PopupList","PreviewButton","PublishButton","SaveButton","SaveDraftButton","Status","baseClass","DocumentControls","props","id","slug","data","disableActions","hasSavePermission","isAccountView","isEditing","permissions","i18n","config","getEntityConfig","collectionConfig","collectionSlug","globalConfig","globalSlug","admin","dateFormat","routes","adminRoute","updatedAt","setUpdatedAt","useState","createdAt","setCreatedAt","date","pattern","hasCreatePermission","create","permission","hasDeletePermission","delete","showDotMenu","Boolean","unsavedDraftWithValidations","versions","drafts","validate","className","div","ul","li","p","t","label","labels","singular","filter","join","autosave","collection","global","publishedDocUpdatedAt","timestamps","title","_isPreviewEnabled","CustomComponent","components","edit","elements","button","horizontalAlign","size","verticalAlign","ButtonGroup","Button","href","path","disableDuplicate","toString","singularLabel","buttonId","useAsTitle"],"mappings":"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"}

package/dist/elements/DocumentControls/index.scss

@@ -24,7 +24,7 @@
     position: relative;
     width: 100%;
     display: flex;
-    align-items: center;
+    align-items: space-between;
     gap: var(--base);
     padding-bottom: 1px;
     z-index: 4;
@@ -36,6 +36,7 @@
     align-items: center;
     flex-grow: 1;
     overflow: hidden;
+    padding: base(0.8) 0;
   }
 
   &__meta {
@@ -46,6 +47,10 @@
     gap: var(--base);
     margin: 0;
     width: 100%;
+
+    & button {
+      margin: 0;
+    }
   }
 
   &__list-item {
@@ -64,6 +69,7 @@
     white-space: nowrap;
     margin: 0;
     font-weight: 600;
+    line-height: base(1.2);
   }
 
   &__label {
@@ -103,8 +109,8 @@
     gap: 2px;
     border: 1px solid var(--theme-elevation-100);
     border-radius: $style-radius-m;
-    height: calc(var(--base) * 1.5);
-    width: calc(var(--base) * 1.5);
+    height: calc(var(--base) * 1.6);
+    width: calc(var(--base) * 1.6);
 
     &:hover {
       border: 1px solid var(--theme-elevation-500);
@@ -141,7 +147,7 @@
     // The timestamps and meta can scroll past
     // The same container needs to the sticky, though
     // So we use a static height with a negative top equal to the meta height plus top padding
-    top: calc(var(--base) * -2);
+    top: base(-2.8);
     padding-right: 0;
     padding-left: 0;
 
@@ -154,8 +160,7 @@
     &__content {
       width: 100%;
       overflow: auto;
-      height: calc(var(--base) * 2);
-
+      padding-inline: base(2);
       // this container has a fixed height
       // this means the scrollbar (when present) overlaps the content
       &::-webkit-scrollbar {
@@ -166,14 +171,13 @@
     &__meta {
       width: auto;
       gap: calc(var(--base) / 2);
-      margin-left: var(--gutter-h);
 
       &::after {
         content: '';
         display: block;
-        position: sticky;
+        position: absolute;
         right: 0;
-        width: calc(var(--base) * 2);
+        width: base(0.8);
         height: var(--base);
         background: linear-gradient(to right, transparent, var(--theme-bg));
         flex-shrink: 0;
@@ -183,6 +187,7 @@
     }
 
     &__controls-wrapper {
+      background-color: var(--theme-bg);
       width: 100%;
       transform: translate3d(0, 0, 0);
       padding-right: var(--gutter-h);
@@ -215,4 +220,10 @@
       }
     }
   }
+
+  @include small-break {
+    &__content {
+      padding-inline: base(0.8);
+    }
+  }
 }

package/dist/elements/DocumentDrawer/DrawerContent.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DrawerContent.d.ts","sourceRoot":"","sources":["../../../src/elements/DocumentDrawer/DrawerContent.tsx"],"names":[],"mappings":"AAIA,OAAO,KAA2C,MAAM,OAAO,CAAA;AAG/D,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,YAAY,CAAA;AAerD,eAAO,MAAM,qBAAqB,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CAiG/D,CAAA"}
+{"version":3,"file":"DrawerContent.d.ts","sourceRoot":"","sources":["../../../src/elements/DocumentDrawer/DrawerContent.tsx"],"names":[],"mappings":"AAGA,OAAO,KAA2C,MAAM,OAAO,CAAA;AAG/D,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,YAAY,CAAA;AAcrD,eAAO,MAAM,qBAAqB,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CA0F/D,CAAA"}

package/dist/elements/DocumentDrawer/DrawerContent.js

@@ -1,15 +1,13 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useModal } from '@faceless-ui/modal';
-import qs from 'qs';
 import React, { useCallback, useEffect, useState } from 'react';
 import { toast } from 'sonner';
 import { useRelatedCollections } from '../../fields/Relationship/AddNew/useRelatedCollections.js';
 import { XIcon } from '../../icons/X/index.js';
-import { useComponentMap } from '../../providers/ComponentMap/index.js';
+import { RenderComponent } from '../../providers/Config/RenderComponent.js';
 import { useConfig } from '../../providers/Config/index.js';
 import { DocumentInfoProvider, useDocumentInfo } from '../../providers/DocumentInfo/index.js';
-import { useFormQueryParams } from '../../providers/FormQueryParams/index.js';
 import { useLocale } from '../../providers/Locale/index.js';
 import { useTranslation } from '../../providers/Translation/index.js';
 import { Gutter } from '../Gutter/index.js';
@@ -17,7 +15,7 @@ import { IDLabel } from '../IDLabel/index.js';
 import { RenderTitle } from '../RenderTitle/index.js';
 import { baseClass } from './index.js';
 export const DocumentDrawerContent = ({ id: existingDocID, Header, collectionSlug, drawerSlug, onSave: onSaveFromProps })=>{
-    const config = useConfig();
+    const { config } = useConfig();
     const { routes: { api: apiRoute }, serverURL } = config;
     const { closeModal, modalState, toggleModal } = useModal();
     const locale = useLocale();
@@ -25,13 +23,9 @@ export const DocumentDrawerContent = ({ id: existingDocID, Header, collectionSlu
     const [docID, setDocID] = useState(existingDocID);
     const [isOpen, setIsOpen] = useState(false);
     const [collectionConfig] = useRelatedCollections(collectionSlug);
-    const { formQueryParams } = useFormQueryParams();
-    const formattedQueryParams = qs.stringify(formQueryParams);
-    const { componentMap } = useComponentMap();
-    const { Edit } = componentMap[`${collectionSlug ? 'collections' : 'globals'}`][collectionSlug];
+    const Edit = collectionConfig.admin.components.views.edit.default.Component;
     const isEditing = Boolean(docID);
     const apiURL = docID ? `${serverURL}${apiRoute}/${collectionSlug}/${docID}${locale?.code ? `?locale=${locale.code}` : ''}` : null;
-    const action = `${serverURL}${apiRoute}/${collectionSlug}${isEditing ? `/${docID}` : ''}?${formattedQueryParams}`;
     useEffect(()=>{
         setIsOpen(Boolean(modalState[drawerSlug]?.isOpen));
     }, [
@@ -86,7 +80,6 @@ export const DocumentDrawerContent = ({ id: existingDocID, Header, collectionSlu
                 /*#__PURE__*/ _jsx(DocumentTitle, {})
             ]
         }),
-        action: action,
         apiURL: apiURL,
         collectionSlug: collectionConfig.slug,
         disableActions: true,
@@ -95,7 +88,9 @@ export const DocumentDrawerContent = ({ id: existingDocID, Header, collectionSlu
         isEditing: isEditing,
         onLoadError: onLoadError,
         onSave: onSave,
-        children: Edit
+        children: /*#__PURE__*/ _jsx(RenderComponent, {
+            mappedComponent: Edit
+        })
     });
 };
 const DocumentTitle = ()=>{

package/dist/elements/DocumentDrawer/DrawerContent.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/elements/DocumentDrawer/DrawerContent.tsx"],"sourcesContent":["'use client'\n\nimport { useModal } from '@faceless-ui/modal'\nimport qs from 'qs'\nimport React, { useCallback, useEffect, useState } from 'react'\nimport { toast } from 'sonner'\n\nimport type { DocumentDrawerProps } from './types.js'\n\nimport { useRelatedCollections } from '../../fields/Relationship/AddNew/useRelatedCollections.js'\nimport { XIcon } from '../../icons/X/index.js'\nimport { useComponentMap } from '../../providers/ComponentMap/index.js'\nimport { useConfig } from '../../providers/Config/index.js'\nimport { DocumentInfoProvider, useDocumentInfo } from '../../providers/DocumentInfo/index.js'\nimport { useFormQueryParams } from '../../providers/FormQueryParams/index.js'\nimport { useLocale } from '../../providers/Locale/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { Gutter } from '../Gutter/index.js'\nimport { IDLabel } from '../IDLabel/index.js'\nimport { RenderTitle } from '../RenderTitle/index.js'\nimport { baseClass } from './index.js'\n\nexport const DocumentDrawerContent: React.FC<DocumentDrawerProps> = ({\n  id: existingDocID,\n  Header,\n  collectionSlug,\n  drawerSlug,\n  onSave: onSaveFromProps,\n}) => {\n  const config = useConfig()\n\n  const {\n    routes: { api: apiRoute },\n    serverURL,\n  } = config\n\n  const { closeModal, modalState, toggleModal } = useModal()\n  const locale = useLocale()\n  const { t } = useTranslation()\n  const [docID, setDocID] = useState(existingDocID)\n  const [isOpen, setIsOpen] = useState(false)\n  const [collectionConfig] = useRelatedCollections(collectionSlug)\n  const { formQueryParams } = useFormQueryParams()\n  const formattedQueryParams = qs.stringify(formQueryParams)\n\n  const { componentMap } = useComponentMap()\n\n  const { Edit } = componentMap[`${collectionSlug ? 'collections' : 'globals'}`][collectionSlug]\n  const isEditing = Boolean(docID)\n  const apiURL = docID\n    ? `${serverURL}${apiRoute}/${collectionSlug}/${docID}${locale?.code ? `?locale=${locale.code}` : ''}`\n    : null\n  const action = `${serverURL}${apiRoute}/${collectionSlug}${\n    isEditing ? `/${docID}` : ''\n  }?${formattedQueryParams}`\n\n  useEffect(() => {\n    setIsOpen(Boolean(modalState[drawerSlug]?.isOpen))\n  }, [modalState, drawerSlug])\n\n  const onLoadError = React.useCallback(\n    (data) => {\n      if (isOpen) {\n        closeModal(drawerSlug)\n        toast.error(data.errors?.[0].message || t('error:unspecific'))\n      }\n    },\n    [closeModal, drawerSlug, isOpen, t],\n  )\n\n  const onSave = useCallback<DocumentDrawerProps['onSave']>(\n    (args) => {\n      setDocID(args.doc.id)\n      if (typeof onSaveFromProps === 'function') {\n        void onSaveFromProps({\n          ...args,\n          collectionConfig,\n        })\n      }\n    },\n    [onSaveFromProps, collectionConfig],\n  )\n\n  return (\n    <DocumentInfoProvider\n      BeforeDocument={\n        <Gutter className={`${baseClass}__header`}>\n          <div className={`${baseClass}__header-content`}>\n            <h2 className={`${baseClass}__header-text`}>\n              {Header || <RenderTitle element=\"span\" />}\n            </h2>\n            {/* TODO: the `button` HTML element breaks CSS transitions on the drawer for some reason...\n            i.e. changing to a `div` element will fix the animation issue but will break accessibility\n          */}\n            <button\n              aria-label={t('general:close')}\n              className={`${baseClass}__header-close`}\n              onClick={() => toggleModal(drawerSlug)}\n              type=\"button\"\n            >\n              <XIcon />\n            </button>\n          </div>\n          <DocumentTitle />\n        </Gutter>\n      }\n      action={action}\n      apiURL={apiURL}\n      collectionSlug={collectionConfig.slug}\n      disableActions\n      disableLeaveWithoutSaving\n      id={docID}\n      isEditing={isEditing}\n      onLoadError={onLoadError}\n      onSave={onSave}\n    >\n      {Edit}\n    </DocumentInfoProvider>\n  )\n}\n\nconst DocumentTitle: React.FC = () => {\n  const { id, title } = useDocumentInfo()\n  return id && id !== title ? <IDLabel id={id.toString()} /> : null\n}\n"],"names":["useModal","qs","React","useCallback","useEffect","useState","toast","useRelatedCollections","XIcon","useComponentMap","useConfig","DocumentInfoProvider","useDocumentInfo","useFormQueryParams","useLocale","useTranslation","Gutter","IDLabel","RenderTitle","baseClass","DocumentDrawerContent","id","existingDocID","Header","collectionSlug","drawerSlug","onSave","onSaveFromProps","config","routes","api","apiRoute","serverURL","closeModal","modalState","toggleModal","locale","t","docID","setDocID","isOpen","setIsOpen","collectionConfig","formQueryParams","formattedQueryParams","stringify","componentMap","Edit","isEditing","Boolean","apiURL","code","action","onLoadError","data","error","errors","message","args","doc","BeforeDocument","className","div","h2","element","button","aria-label","onClick","type","DocumentTitle","slug","disableActions","disableLeaveWithoutSaving","title","toString"],"mappings":"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"}
+{"version":3,"sources":["../../../src/elements/DocumentDrawer/DrawerContent.tsx"],"sourcesContent":["'use client'\n\nimport { useModal } from '@faceless-ui/modal'\nimport React, { useCallback, useEffect, useState } from 'react'\nimport { toast } from 'sonner'\n\nimport type { DocumentDrawerProps } from './types.js'\n\nimport { useRelatedCollections } from '../../fields/Relationship/AddNew/useRelatedCollections.js'\nimport { XIcon } from '../../icons/X/index.js'\nimport { RenderComponent } from '../../providers/Config/RenderComponent.js'\nimport { useConfig } from '../../providers/Config/index.js'\nimport { DocumentInfoProvider, useDocumentInfo } from '../../providers/DocumentInfo/index.js'\nimport { useLocale } from '../../providers/Locale/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { Gutter } from '../Gutter/index.js'\nimport { IDLabel } from '../IDLabel/index.js'\nimport { RenderTitle } from '../RenderTitle/index.js'\nimport { baseClass } from './index.js'\n\nexport const DocumentDrawerContent: React.FC<DocumentDrawerProps> = ({\n  id: existingDocID,\n  Header,\n  collectionSlug,\n  drawerSlug,\n  onSave: onSaveFromProps,\n}) => {\n  const { config } = useConfig()\n\n  const {\n    routes: { api: apiRoute },\n    serverURL,\n  } = config\n\n  const { closeModal, modalState, toggleModal } = useModal()\n  const locale = useLocale()\n  const { t } = useTranslation()\n  const [docID, setDocID] = useState(existingDocID)\n  const [isOpen, setIsOpen] = useState(false)\n  const [collectionConfig] = useRelatedCollections(collectionSlug)\n\n  const Edit = collectionConfig.admin.components.views.edit.default.Component\n\n  const isEditing = Boolean(docID)\n  const apiURL = docID\n    ? `${serverURL}${apiRoute}/${collectionSlug}/${docID}${locale?.code ? `?locale=${locale.code}` : ''}`\n    : null\n\n  useEffect(() => {\n    setIsOpen(Boolean(modalState[drawerSlug]?.isOpen))\n  }, [modalState, drawerSlug])\n\n  const onLoadError = React.useCallback(\n    (data) => {\n      if (isOpen) {\n        closeModal(drawerSlug)\n        toast.error(data.errors?.[0].message || t('error:unspecific'))\n      }\n    },\n    [closeModal, drawerSlug, isOpen, t],\n  )\n\n  const onSave = useCallback<DocumentDrawerProps['onSave']>(\n    (args) => {\n      setDocID(args.doc.id)\n      if (typeof onSaveFromProps === 'function') {\n        void onSaveFromProps({\n          ...args,\n          collectionConfig,\n        })\n      }\n    },\n    [onSaveFromProps, collectionConfig],\n  )\n\n  return (\n    <DocumentInfoProvider\n      BeforeDocument={\n        <Gutter className={`${baseClass}__header`}>\n          <div className={`${baseClass}__header-content`}>\n            <h2 className={`${baseClass}__header-text`}>\n              {Header || <RenderTitle element=\"span\" />}\n            </h2>\n            {/* TODO: the `button` HTML element breaks CSS transitions on the drawer for some reason...\n            i.e. changing to a `div` element will fix the animation issue but will break accessibility\n          */}\n            <button\n              aria-label={t('general:close')}\n              className={`${baseClass}__header-close`}\n              onClick={() => toggleModal(drawerSlug)}\n              type=\"button\"\n            >\n              <XIcon />\n            </button>\n          </div>\n          <DocumentTitle />\n        </Gutter>\n      }\n      apiURL={apiURL}\n      collectionSlug={collectionConfig.slug}\n      disableActions\n      disableLeaveWithoutSaving\n      id={docID}\n      isEditing={isEditing}\n      onLoadError={onLoadError}\n      onSave={onSave}\n    >\n      <RenderComponent mappedComponent={Edit} />\n    </DocumentInfoProvider>\n  )\n}\n\nconst DocumentTitle: React.FC = () => {\n  const { id, title } = useDocumentInfo()\n  return id && id !== title ? <IDLabel id={id.toString()} /> : null\n}\n"],"names":["useModal","React","useCallback","useEffect","useState","toast","useRelatedCollections","XIcon","RenderComponent","useConfig","DocumentInfoProvider","useDocumentInfo","useLocale","useTranslation","Gutter","IDLabel","RenderTitle","baseClass","DocumentDrawerContent","id","existingDocID","Header","collectionSlug","drawerSlug","onSave","onSaveFromProps","config","routes","api","apiRoute","serverURL","closeModal","modalState","toggleModal","locale","t","docID","setDocID","isOpen","setIsOpen","collectionConfig","Edit","admin","components","views","edit","default","Component","isEditing","Boolean","apiURL","code","onLoadError","data","error","errors","message","args","doc","BeforeDocument","className","div","h2","element","button","aria-label","onClick","type","DocumentTitle","slug","disableActions","disableLeaveWithoutSaving","mappedComponent","title","toString"],"mappings":"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"}

package/dist/elements/DocumentDrawer/index.scss

@@ -45,15 +45,13 @@
     padding: 0;
     cursor: pointer;
     overflow: hidden;
-    width: base(1);
-    height: base(1);
+    width: base(2);
+    height: base(2);
 
     svg {
-      width: base(2.75);
-      height: base(2.75);
+      width: base(2);
+      height: base(2);
       position: relative;
-      left: base(-0.825);
-      top: base(-0.825);
 
       .stroke {
         stroke-width: 2px;

package/dist/elements/DocumentDrawer/types.d.ts

@@ -2,20 +2,20 @@ import type React from 'react';
 import type { HTMLAttributes } from 'react';
 import type { DocumentInfoContext } from '../../providers/DocumentInfo/types.js';
 import type { Props as DrawerProps } from '../Drawer/types.js';
-export type DocumentDrawerProps = Pick<DrawerProps, 'Header'> & {
-    collectionSlug: string;
-    drawerSlug?: string;
-    id?: null | number | string;
-    onSave?: DocumentInfoContext['onSave'];
-};
-export type DocumentTogglerProps = HTMLAttributes<HTMLButtonElement> & {
-    children?: React.ReactNode;
-    className?: string;
-    collectionSlug: string;
-    disabled?: boolean;
-    drawerSlug?: string;
-    id?: string;
-};
+export type DocumentDrawerProps = {
+    readonly collectionSlug: string;
+    readonly drawerSlug?: string;
+    readonly id?: null | number | string;
+    readonly onSave?: DocumentInfoContext['onSave'];
+} & Pick<DrawerProps, 'Header'>;
+export type DocumentTogglerProps = {
+    readonly children?: React.ReactNode;
+    readonly className?: string;
+    readonly collectionSlug: string;
+    readonly disabled?: boolean;
+    readonly drawerSlug?: string;
+    readonly id?: string;
+} & HTMLAttributes<HTMLButtonElement>;
 export type UseDocumentDrawer = (args: {
     collectionSlug: string;
     id?: number | string;

package/dist/elements/DocumentDrawer/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/elements/DocumentDrawer/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAA;AAE3C,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,uCAAuC,CAAA;AAChF,OAAO,KAAK,EAAE,KAAK,IAAI,WAAW,EAAE,MAAM,oBAAoB,CAAA;AAE9D,MAAM,MAAM,mBAAmB,GAAG,IAAI,CAAC,WAAW,EAAE,QAAQ,CAAC,GAAG;IAC9D,cAAc,EAAE,MAAM,CAAA;IACtB,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,EAAE,CAAC,EAAE,IAAI,GAAG,MAAM,GAAG,MAAM,CAAA;IAC3B,MAAM,CAAC,EAAE,mBAAmB,CAAC,QAAQ,CAAC,CAAA;CACvC,CAAA;AAED,MAAM,MAAM,oBAAoB,GAAG,cAAc,CAAC,iBAAiB,CAAC,GAAG;IACrE,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,cAAc,EAAE,MAAM,CAAA;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,EAAE,CAAC,EAAE,MAAM,CAAA;CACZ,CAAA;AAED,MAAM,MAAM,iBAAiB,GAAG,CAAC,IAAI,EAAE;IAAE,cAAc,EAAE,MAAM,CAAC;IAAC,EAAE,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;CAAE,KAAK;IAC1F,KAAK,CAAC,EAAE,CAAC,IAAI,CAAC,mBAAmB,EAAE,gBAAgB,GAAG,IAAI,CAAC,CAAC;IAC5D,KAAK,CAAC,EAAE,CAAC,IAAI,CAAC,oBAAoB,EAAE,gBAAgB,GAAG,IAAI,CAAC,CAAC;IAC7D;QACE,WAAW,EAAE,MAAM,IAAI,CAAA;QACvB,WAAW,EAAE,MAAM,CAAA;QACnB,UAAU,EAAE,MAAM,CAAA;QAClB,YAAY,EAAE,OAAO,CAAA;QACrB,UAAU,EAAE,MAAM,IAAI,CAAA;QACtB,YAAY,EAAE,MAAM,IAAI,CAAA;KACzB;CACF,CAAA"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/elements/DocumentDrawer/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAA;AAE3C,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,uCAAuC,CAAA;AAChF,OAAO,KAAK,EAAE,KAAK,IAAI,WAAW,EAAE,MAAM,oBAAoB,CAAA;AAE9D,MAAM,MAAM,mBAAmB,GAAG;IAChC,QAAQ,CAAC,cAAc,EAAE,MAAM,CAAA;IAC/B,QAAQ,CAAC,UAAU,CAAC,EAAE,MAAM,CAAA;IAC5B,QAAQ,CAAC,EAAE,CAAC,EAAE,IAAI,GAAG,MAAM,GAAG,MAAM,CAAA;IACpC,QAAQ,CAAC,MAAM,CAAC,EAAE,mBAAmB,CAAC,QAAQ,CAAC,CAAA;CAChD,GAAG,IAAI,CAAC,WAAW,EAAE,QAAQ,CAAC,CAAA;AAE/B,MAAM,MAAM,oBAAoB,GAAG;IACjC,QAAQ,CAAC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACnC,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,CAAA;IAC3B,QAAQ,CAAC,cAAc,EAAE,MAAM,CAAA;IAC/B,QAAQ,CAAC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAC3B,QAAQ,CAAC,UAAU,CAAC,EAAE,MAAM,CAAA;IAC5B,QAAQ,CAAC,EAAE,CAAC,EAAE,MAAM,CAAA;CACrB,GAAG,cAAc,CAAC,iBAAiB,CAAC,CAAA;AAErC,MAAM,MAAM,iBAAiB,GAAG,CAAC,IAAI,EAAE;IAAE,cAAc,EAAE,MAAM,CAAC;IAAC,EAAE,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;CAAE,KAAK;IAC1F,KAAK,CAAC,EAAE,CAAC,IAAI,CAAC,mBAAmB,EAAE,gBAAgB,GAAG,IAAI,CAAC,CAAC;IAC5D,KAAK,CAAC,EAAE,CAAC,IAAI,CAAC,oBAAoB,EAAE,gBAAgB,GAAG,IAAI,CAAC,CAAC;IAC7D;QACE,WAAW,EAAE,MAAM,IAAI,CAAA;QACvB,WAAW,EAAE,MAAM,CAAA;QACnB,UAAU,EAAE,MAAM,CAAA;QAClB,YAAY,EAAE,OAAO,CAAA;QACrB,UAAU,EAAE,MAAM,IAAI,CAAA;QACtB,YAAY,EAAE,MAAM,IAAI,CAAA;KACzB;CACF,CAAA"}

package/dist/elements/DocumentDrawer/types.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/elements/DocumentDrawer/types.ts"],"sourcesContent":["import type React from 'react'\nimport type { HTMLAttributes } from 'react'\n\nimport type { DocumentInfoContext } from '../../providers/DocumentInfo/types.js'\nimport type { Props as DrawerProps } from '../Drawer/types.js'\n\nexport type DocumentDrawerProps = Pick<DrawerProps, 'Header'> & {\n  collectionSlug: string\n  drawerSlug?: string\n  id?: null | number | string\n  onSave?: DocumentInfoContext['onSave']\n}\n\nexport type DocumentTogglerProps = HTMLAttributes<HTMLButtonElement> & {\n  children?: React.ReactNode\n  className?: string\n  collectionSlug: string\n  disabled?: boolean\n  drawerSlug?: string\n  id?: string\n}\n\nexport type UseDocumentDrawer = (args: { collectionSlug: string; id?: number | string }) => [\n  React.FC<Omit<DocumentDrawerProps, 'collectionSlug' | 'id'>>, // drawer\n  React.FC<Omit<DocumentTogglerProps, 'collectionSlug' | 'id'>>, // toggler\n  {\n    closeDrawer: () => void\n    drawerDepth: number\n    drawerSlug: string\n    isDrawerOpen: boolean\n    openDrawer: () => void\n    toggleDrawer: () => void\n  },\n]\n"],"names":[],"mappings":"AAsBA,WAWC"}
+{"version":3,"sources":["../../../src/elements/DocumentDrawer/types.ts"],"sourcesContent":["import type React from 'react'\nimport type { HTMLAttributes } from 'react'\n\nimport type { DocumentInfoContext } from '../../providers/DocumentInfo/types.js'\nimport type { Props as DrawerProps } from '../Drawer/types.js'\n\nexport type DocumentDrawerProps = {\n  readonly collectionSlug: string\n  readonly drawerSlug?: string\n  readonly id?: null | number | string\n  readonly onSave?: DocumentInfoContext['onSave']\n} & Pick<DrawerProps, 'Header'>\n\nexport type DocumentTogglerProps = {\n  readonly children?: React.ReactNode\n  readonly className?: string\n  readonly collectionSlug: string\n  readonly disabled?: boolean\n  readonly drawerSlug?: string\n  readonly id?: string\n} & HTMLAttributes<HTMLButtonElement>\n\nexport type UseDocumentDrawer = (args: { collectionSlug: string; id?: number | string }) => [\n  React.FC<Omit<DocumentDrawerProps, 'collectionSlug' | 'id'>>, // drawer\n  React.FC<Omit<DocumentTogglerProps, 'collectionSlug' | 'id'>>, // toggler\n  {\n    closeDrawer: () => void\n    drawerDepth: number\n    drawerSlug: string\n    isDrawerOpen: boolean\n    openDrawer: () => void\n    toggleDrawer: () => void\n  },\n]\n"],"names":[],"mappings":"AAsBA,WAWC"}

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

@@ -1,16 +1,15 @@
-import type { Description, DocumentPermissions } from 'payload';
+import type { ClientField, Description, DocumentPermissions } from 'payload';
 import React from 'react';
-import type { FieldMap } from '../../providers/ComponentMap/buildComponentMap/types.js';
 import './index.scss';
 type Args = {
-    AfterFields?: React.ReactNode;
-    BeforeFields?: React.ReactNode;
-    description?: Description;
-    docPermissions: DocumentPermissions;
-    fieldMap: FieldMap;
-    forceSidebarWrap?: boolean;
-    readOnly: boolean;
-    schemaPath: string;
+    readonly AfterFields?: React.ReactNode;
+    readonly BeforeFields?: React.ReactNode;
+    readonly description?: Description;
+    readonly docPermissions: DocumentPermissions;
+    readonly fields: ClientField[];
+    readonly forceSidebarWrap?: boolean;
+    readonly readOnly: boolean;
+    readonly schemaPath: string;
 };
 export declare const DocumentFields: React.FC<Args>;
 export {};

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/DocumentFields/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAA;AAE/D,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,yDAAyD,CAAA;AAIvF,OAAO,cAAc,CAAA;AAIrB,KAAK,IAAI,GAAG;IACV,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC7B,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC9B,WAAW,CAAC,EAAE,WAAW,CAAA;IACzB,cAAc,EAAE,mBAAmB,CAAA;IACnC,QAAQ,EAAE,QAAQ,CAAA;IAClB,gBAAgB,CAAC,EAAE,OAAO,CAAA;IAC1B,QAAQ,EAAE,OAAO,CAAA;IACjB,UAAU,EAAE,MAAM,CAAA;CACnB,CAAA;AAED,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,IAAI,CAoEzC,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/DocumentFields/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAE,WAAW,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAA;AAG5E,OAAO,KAAK,MAAM,OAAO,CAAA;AAIzB,OAAO,cAAc,CAAA;AAIrB,KAAK,IAAI,GAAG;IACV,QAAQ,CAAC,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACtC,QAAQ,CAAC,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACvC,QAAQ,CAAC,WAAW,CAAC,EAAE,WAAW,CAAA;IAClC,QAAQ,CAAC,cAAc,EAAE,mBAAmB,CAAA;IAC5C,QAAQ,CAAC,MAAM,EAAE,WAAW,EAAE,CAAA;IAC9B,QAAQ,CAAC,gBAAgB,CAAC,EAAE,OAAO,CAAA;IACnC,QAAQ,CAAC,QAAQ,EAAE,OAAO,CAAA;IAC1B,QAAQ,CAAC,UAAU,EAAE,MAAM,CAAA;CAC5B,CAAA;AAED,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,IAAI,CAkEzC,CAAA"}

package/dist/elements/DocumentFields/index.js

@@ -1,66 +1,65 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { fieldIsSidebar } from 'payload/shared';
 import React from 'react';
 import { RenderFields } from '../../forms/RenderFields/index.js';
 import { Gutter } from '../Gutter/index.js';
 import './index.scss';
 const baseClass = 'document-fields';
-export const DocumentFields = ({ AfterFields, BeforeFields, description, docPermissions, fieldMap, forceSidebarWrap, readOnly, schemaPath })=>{
-    const mainFields = fieldMap.filter(({ isSidebar })=>!isSidebar);
-    const sidebarFields = fieldMap.filter(({ isSidebar })=>isSidebar);
+export const DocumentFields = ({ AfterFields, BeforeFields, description, docPermissions, fields, forceSidebarWrap, readOnly, schemaPath })=>{
+    const mainFields = fields.filter((field)=>!fieldIsSidebar(field));
+    const sidebarFields = fields.filter((field)=>fieldIsSidebar(field));
     const hasSidebarFields = sidebarFields && sidebarFields.length > 0;
-    return /*#__PURE__*/ _jsx(React.Fragment, {
-        children: /*#__PURE__*/ _jsxs("div", {
-            className: [
-                baseClass,
-                hasSidebarFields ? `${baseClass}--has-sidebar` : `${baseClass}--no-sidebar`,
-                forceSidebarWrap && `${baseClass}--force-sidebar-wrap`
-            ].filter(Boolean).join(' '),
-            children: [
-                /*#__PURE__*/ _jsx("div", {
-                    className: `${baseClass}__main`,
-                    children: /*#__PURE__*/ _jsxs(Gutter, {
-                        className: `${baseClass}__edit`,
-                        children: [
-                            /*#__PURE__*/ _jsx("header", {
-                                className: `${baseClass}__header`,
-                                children: description && /*#__PURE__*/ _jsx("div", {
-                                    className: `${baseClass}__sub-header`
-                                })
-                            }),
-                            BeforeFields,
-                            /*#__PURE__*/ _jsx(RenderFields, {
-                                className: `${baseClass}__fields`,
-                                fieldMap: mainFields,
-                                forceRender: 10,
-                                path: "",
-                                permissions: docPermissions?.fields,
-                                readOnly: readOnly,
-                                schemaPath: schemaPath
-                            }),
-                            AfterFields
-                        ]
-                    })
-                }),
-                hasSidebarFields && /*#__PURE__*/ _jsx("div", {
-                    className: `${baseClass}__sidebar-wrap`,
-                    children: /*#__PURE__*/ _jsx("div", {
-                        className: `${baseClass}__sidebar`,
-                        children: /*#__PURE__*/ _jsx("div", {
-                            className: `${baseClass}__sidebar-fields`,
-                            children: /*#__PURE__*/ _jsx(RenderFields, {
-                                fieldMap: sidebarFields,
-                                forceRender: 10,
-                                path: "",
-                                permissions: docPermissions?.fields,
-                                readOnly: readOnly,
-                                schemaPath: schemaPath
+    return /*#__PURE__*/ _jsxs("div", {
+        className: [
+            baseClass,
+            hasSidebarFields ? `${baseClass}--has-sidebar` : `${baseClass}--no-sidebar`,
+            forceSidebarWrap && `${baseClass}--force-sidebar-wrap`
+        ].filter(Boolean).join(' '),
+        children: [
+            /*#__PURE__*/ _jsx("div", {
+                className: `${baseClass}__main`,
+                children: /*#__PURE__*/ _jsxs(Gutter, {
+                    className: `${baseClass}__edit`,
+                    children: [
+                        /*#__PURE__*/ _jsx("header", {
+                            className: `${baseClass}__header`,
+                            children: description && /*#__PURE__*/ _jsx("div", {
+                                className: `${baseClass}__sub-header`
                             })
+                        }),
+                        BeforeFields,
+                        /*#__PURE__*/ _jsx(RenderFields, {
+                            className: `${baseClass}__fields`,
+                            fields: mainFields,
+                            forceRender: 10,
+                            path: "",
+                            permissions: docPermissions?.fields,
+                            readOnly: readOnly,
+                            schemaPath: schemaPath
+                        }),
+                        AfterFields
+                    ]
+                })
+            }),
+            hasSidebarFields && /*#__PURE__*/ _jsx("div", {
+                className: `${baseClass}__sidebar-wrap`,
+                children: /*#__PURE__*/ _jsx("div", {
+                    className: `${baseClass}__sidebar`,
+                    children: /*#__PURE__*/ _jsx("div", {
+                        className: `${baseClass}__sidebar-fields`,
+                        children: /*#__PURE__*/ _jsx(RenderFields, {
+                            fields: sidebarFields,
+                            forceRender: 10,
+                            path: "",
+                            permissions: docPermissions?.fields,
+                            readOnly: readOnly,
+                            schemaPath: schemaPath
                         })
                     })
                 })
-            ]
-        })
+            })
+        ]
     });
 };