@payloadcms/ui 4.0.0-canary.0 → 4.0.0-canary.1

package/dist/views/Document/renderDocumentSlots.js

@@ -0,0 +1,179 @@
+import { hasDraftsEnabled } from 'payload/shared';
+import { RenderServerComponent } from '../../elements/RenderServerComponent/index.js';
+// eslint-disable-next-line payload/no-imports-from-exports-dir -- Server component must reference exports/client bundle for proper client boundary in prod builds
+import { ViewDescription } from '../../exports/client/index.js';
+import { getDocumentPermissions } from '../../utilities/getDocumentPermissions.js';
+export const renderDocumentSlots = args => {
+  const {
+    id,
+    collectionConfig,
+    globalConfig,
+    hasSavePermission,
+    locale,
+    permissions,
+    req
+  } = args;
+  const components = {};
+  const unsavedDraftWithValidations = undefined;
+  const isPreviewEnabled = collectionConfig?.admin?.preview || globalConfig?.admin?.preview;
+  const serverProps = {
+    id,
+    i18n: req.i18n,
+    locale,
+    payload: req.payload,
+    permissions,
+    server: req.server,
+    user: req.user
+  };
+  const BeforeDocumentControls = collectionConfig?.admin?.components?.edit?.beforeDocumentControls || globalConfig?.admin?.components?.edit?.beforeDocumentControls;
+  if (BeforeDocumentControls) {
+    components.BeforeDocumentControls = RenderServerComponent({
+      Component: BeforeDocumentControls,
+      importMap: req.payload.importMap,
+      serverProps: serverProps
+    });
+  }
+  const BeforeDocumentMeta = collectionConfig?.admin?.components?.edit?.BeforeDocumentMeta || globalConfig?.admin?.components?.edit?.BeforeDocumentMeta;
+  if (BeforeDocumentMeta) {
+    components.BeforeDocumentMeta = RenderServerComponent({
+      Component: BeforeDocumentMeta,
+      importMap: req.payload.importMap,
+      serverProps
+    });
+  }
+  const EditMenuItems = collectionConfig?.admin?.components?.edit?.editMenuItems;
+  if (EditMenuItems) {
+    components.EditMenuItems = RenderServerComponent({
+      Component: EditMenuItems,
+      importMap: req.payload.importMap,
+      serverProps: serverProps
+    });
+  }
+  const CustomPreviewButton = collectionConfig?.admin?.components?.edit?.PreviewButton || globalConfig?.admin?.components?.edit?.PreviewButton;
+  if (isPreviewEnabled && CustomPreviewButton) {
+    components.PreviewButton = RenderServerComponent({
+      Component: CustomPreviewButton,
+      importMap: req.payload.importMap,
+      serverProps: serverProps
+    });
+  }
+  const LivePreview = collectionConfig?.admin?.components?.views?.edit?.livePreview || globalConfig?.admin?.components?.views?.edit?.livePreview;
+  if (LivePreview?.Component) {
+    components.LivePreview = RenderServerComponent({
+      Component: LivePreview.Component,
+      importMap: req.payload.importMap,
+      serverProps
+    });
+  }
+  const descriptionFromConfig = collectionConfig?.admin?.description || globalConfig?.admin?.description;
+  const staticDescription = typeof descriptionFromConfig === 'function' ? descriptionFromConfig({
+    t: req.i18n.t
+  }) : descriptionFromConfig;
+  const CustomDescription = collectionConfig?.admin?.components?.Description || globalConfig?.admin?.components?.Description;
+  const hasDescription = CustomDescription || staticDescription;
+  if (hasDescription) {
+    components.Description = RenderServerComponent({
+      clientProps: {
+        collectionSlug: collectionConfig?.slug,
+        description: staticDescription
+      },
+      Component: CustomDescription,
+      Fallback: ViewDescription,
+      importMap: req.payload.importMap,
+      serverProps: serverProps
+    });
+  }
+  if (collectionConfig?.versions?.drafts || globalConfig?.versions?.drafts) {
+    const CustomStatus = collectionConfig?.admin?.components?.edit?.Status || globalConfig?.admin?.components?.edit?.Status;
+    if (CustomStatus) {
+      components.Status = RenderServerComponent({
+        Component: CustomStatus,
+        importMap: req.payload.importMap,
+        serverProps
+      });
+    }
+  }
+  if (hasSavePermission) {
+    if (hasDraftsEnabled(collectionConfig || globalConfig)) {
+      const CustomPublishButton = collectionConfig?.admin?.components?.edit?.PublishButton || globalConfig?.admin?.components?.edit?.PublishButton;
+      if (CustomPublishButton) {
+        components.PublishButton = RenderServerComponent({
+          Component: CustomPublishButton,
+          importMap: req.payload.importMap,
+          serverProps: serverProps
+        });
+      }
+      const CustomUnpublishButton = collectionConfig?.admin?.components?.edit?.UnpublishButton || globalConfig?.admin?.components?.edit?.UnpublishButton;
+      if (CustomUnpublishButton) {
+        components.UnpublishButton = RenderServerComponent({
+          Component: CustomUnpublishButton,
+          importMap: req.payload.importMap,
+          serverProps: serverProps
+        });
+      }
+      const CustomSaveDraftButton = collectionConfig?.admin?.components?.edit?.SaveDraftButton || globalConfig?.admin?.components?.edit?.SaveDraftButton;
+      const draftsEnabled = hasDraftsEnabled(collectionConfig || globalConfig);
+      if ((draftsEnabled || unsavedDraftWithValidations) && CustomSaveDraftButton) {
+        components.SaveDraftButton = RenderServerComponent({
+          Component: CustomSaveDraftButton,
+          importMap: req.payload.importMap,
+          serverProps: serverProps
+        });
+      }
+    } else {
+      const CustomSaveButton = collectionConfig?.admin?.components?.edit?.SaveButton || globalConfig?.admin?.components?.edit?.SaveButton;
+      if (CustomSaveButton) {
+        components.SaveButton = RenderServerComponent({
+          Component: CustomSaveButton,
+          importMap: req.payload.importMap,
+          serverProps: serverProps
+        });
+      }
+    }
+  }
+  if (collectionConfig?.upload && collectionConfig?.admin?.components?.edit?.Upload) {
+    components.Upload = RenderServerComponent({
+      Component: collectionConfig.admin.components.edit.Upload,
+      importMap: req.payload.importMap,
+      serverProps
+    });
+  }
+  if (collectionConfig?.upload && collectionConfig.upload.admin?.components?.controls) {
+    components.UploadControls = RenderServerComponent({
+      Component: collectionConfig.upload.admin.components.controls,
+      importMap: req.payload.importMap,
+      serverProps
+    });
+  }
+  return components;
+};
+export const renderDocumentSlotsHandler = async args => {
+  const {
+    id,
+    collectionSlug,
+    locale,
+    permissions,
+    req
+  } = args;
+  const collectionConfig = req.payload.collections[collectionSlug]?.config;
+  if (!collectionConfig) {
+    throw new Error(req.t('error:incorrectCollection'));
+  }
+  const {
+    hasSavePermission
+  } = await getDocumentPermissions({
+    id,
+    collectionConfig,
+    data: {},
+    req
+  });
+  return renderDocumentSlots({
+    id,
+    collectionConfig,
+    hasSavePermission,
+    locale,
+    permissions,
+    req
+  });
+};
+//# sourceMappingURL=renderDocumentSlots.js.map

package/dist/views/Document/renderDocumentSlots.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"renderDocumentSlots.js","names":["hasDraftsEnabled","RenderServerComponent","ViewDescription","getDocumentPermissions","renderDocumentSlots","args","id","collectionConfig","globalConfig","hasSavePermission","locale","permissions","req","components","unsavedDraftWithValidations","undefined","isPreviewEnabled","admin","preview","serverProps","i18n","payload","server","user","BeforeDocumentControls","edit","beforeDocumentControls","Component","importMap","BeforeDocumentMeta","EditMenuItems","editMenuItems","CustomPreviewButton","PreviewButton","LivePreview","views","livePreview","descriptionFromConfig","description","staticDescription","t","CustomDescription","Description","hasDescription","clientProps","collectionSlug","slug","Fallback","versions","drafts","CustomStatus","Status","CustomPublishButton","PublishButton","CustomUnpublishButton","UnpublishButton","CustomSaveDraftButton","SaveDraftButton","draftsEnabled","CustomSaveButton","SaveButton","upload","Upload","controls","UploadControls","renderDocumentSlotsHandler","collections","config","Error","data"],"sources":["../../../src/views/Document/renderDocumentSlots.tsx"],"sourcesContent":["import type {\n  BeforeDocumentControlsServerPropsOnly,\n  DocumentSlots,\n  EditMenuItemsServerPropsOnly,\n  Locale,\n  PayloadRequest,\n  PreviewButtonServerPropsOnly,\n  PublishButtonServerPropsOnly,\n  SanitizedCollectionConfig,\n  SanitizedGlobalConfig,\n  SanitizedPermissions,\n  SaveButtonServerPropsOnly,\n  SaveDraftButtonServerPropsOnly,\n  ServerFunction,\n  ServerProps,\n  StaticDescription,\n  UnpublishButtonServerPropsOnly,\n  ViewDescriptionClientProps,\n  ViewDescriptionServerPropsOnly,\n} from 'payload'\n\nimport { hasDraftsEnabled } from 'payload/shared'\n\nimport { RenderServerComponent } from '../../elements/RenderServerComponent/index.js'\n// eslint-disable-next-line payload/no-imports-from-exports-dir -- Server component must reference exports/client bundle for proper client boundary in prod builds\nimport { ViewDescription } from '../../exports/client/index.js'\nimport { getDocumentPermissions } from '../../utilities/getDocumentPermissions.js'\n\nexport const renderDocumentSlots: (args: {\n  collectionConfig?: SanitizedCollectionConfig\n  globalConfig?: SanitizedGlobalConfig\n  hasSavePermission: boolean\n  id?: number | string\n  locale: Locale\n  permissions: SanitizedPermissions\n  req: PayloadRequest\n}) => DocumentSlots = (args) => {\n  const { id, collectionConfig, globalConfig, hasSavePermission, locale, permissions, req } = args\n\n  const components: DocumentSlots = {} as DocumentSlots\n\n  const unsavedDraftWithValidations = undefined\n\n  const isPreviewEnabled = collectionConfig?.admin?.preview || globalConfig?.admin?.preview\n\n  const serverProps: ServerProps = {\n    id,\n    i18n: req.i18n,\n    locale,\n    payload: req.payload,\n    permissions,\n    server: req.server,\n    user: req.user,\n    // TODO: Add remaining serverProps\n  }\n\n  const BeforeDocumentControls =\n    collectionConfig?.admin?.components?.edit?.beforeDocumentControls ||\n    globalConfig?.admin?.components?.edit?.beforeDocumentControls\n\n  if (BeforeDocumentControls) {\n    components.BeforeDocumentControls = RenderServerComponent({\n      Component: BeforeDocumentControls,\n      importMap: req.payload.importMap,\n      serverProps: serverProps satisfies BeforeDocumentControlsServerPropsOnly,\n    })\n  }\n\n  const BeforeDocumentMeta =\n    collectionConfig?.admin?.components?.edit?.BeforeDocumentMeta ||\n    globalConfig?.admin?.components?.edit?.BeforeDocumentMeta\n\n  if (BeforeDocumentMeta) {\n    components.BeforeDocumentMeta = RenderServerComponent({\n      Component: BeforeDocumentMeta,\n      importMap: req.payload.importMap,\n      serverProps,\n    })\n  }\n\n  const EditMenuItems = collectionConfig?.admin?.components?.edit?.editMenuItems\n\n  if (EditMenuItems) {\n    components.EditMenuItems = RenderServerComponent({\n      Component: EditMenuItems,\n      importMap: req.payload.importMap,\n      serverProps: serverProps satisfies EditMenuItemsServerPropsOnly,\n    })\n  }\n\n  const CustomPreviewButton =\n    collectionConfig?.admin?.components?.edit?.PreviewButton ||\n    globalConfig?.admin?.components?.edit?.PreviewButton\n\n  if (isPreviewEnabled && CustomPreviewButton) {\n    components.PreviewButton = RenderServerComponent({\n      Component: CustomPreviewButton,\n      importMap: req.payload.importMap,\n      serverProps: serverProps satisfies PreviewButtonServerPropsOnly,\n    })\n  }\n\n  const LivePreview =\n    collectionConfig?.admin?.components?.views?.edit?.livePreview ||\n    globalConfig?.admin?.components?.views?.edit?.livePreview\n\n  if (LivePreview?.Component) {\n    components.LivePreview = RenderServerComponent({\n      Component: LivePreview.Component,\n      importMap: req.payload.importMap,\n      serverProps,\n    })\n  }\n\n  const descriptionFromConfig =\n    collectionConfig?.admin?.description || globalConfig?.admin?.description\n\n  const staticDescription: StaticDescription =\n    typeof descriptionFromConfig === 'function'\n      ? descriptionFromConfig({ t: req.i18n.t })\n      : descriptionFromConfig\n\n  const CustomDescription =\n    collectionConfig?.admin?.components?.Description || globalConfig?.admin?.components?.Description\n\n  const hasDescription = CustomDescription || staticDescription\n\n  if (hasDescription) {\n    components.Description = RenderServerComponent({\n      clientProps: {\n        collectionSlug: collectionConfig?.slug,\n        description: staticDescription,\n      } satisfies ViewDescriptionClientProps,\n      Component: CustomDescription,\n      Fallback: ViewDescription,\n      importMap: req.payload.importMap,\n      serverProps: serverProps satisfies ViewDescriptionServerPropsOnly,\n    })\n  }\n\n  if (collectionConfig?.versions?.drafts || globalConfig?.versions?.drafts) {\n    const CustomStatus =\n      collectionConfig?.admin?.components?.edit?.Status ||\n      globalConfig?.admin?.components?.edit?.Status\n\n    if (CustomStatus) {\n      components.Status = RenderServerComponent({\n        Component: CustomStatus,\n        importMap: req.payload.importMap,\n        serverProps,\n      })\n    }\n  }\n\n  if (hasSavePermission) {\n    if (hasDraftsEnabled(collectionConfig || globalConfig)) {\n      const CustomPublishButton =\n        collectionConfig?.admin?.components?.edit?.PublishButton ||\n        globalConfig?.admin?.components?.edit?.PublishButton\n\n      if (CustomPublishButton) {\n        components.PublishButton = RenderServerComponent({\n          Component: CustomPublishButton,\n          importMap: req.payload.importMap,\n          serverProps: serverProps satisfies PublishButtonServerPropsOnly,\n        })\n      }\n\n      const CustomUnpublishButton =\n        collectionConfig?.admin?.components?.edit?.UnpublishButton ||\n        globalConfig?.admin?.components?.edit?.UnpublishButton\n\n      if (CustomUnpublishButton) {\n        components.UnpublishButton = RenderServerComponent({\n          Component: CustomUnpublishButton,\n          importMap: req.payload.importMap,\n          serverProps: serverProps satisfies UnpublishButtonServerPropsOnly,\n        })\n      }\n\n      const CustomSaveDraftButton =\n        collectionConfig?.admin?.components?.edit?.SaveDraftButton ||\n        globalConfig?.admin?.components?.edit?.SaveDraftButton\n\n      const draftsEnabled = hasDraftsEnabled(collectionConfig || globalConfig)\n\n      if ((draftsEnabled || unsavedDraftWithValidations) && CustomSaveDraftButton) {\n        components.SaveDraftButton = RenderServerComponent({\n          Component: CustomSaveDraftButton,\n          importMap: req.payload.importMap,\n          serverProps: serverProps satisfies SaveDraftButtonServerPropsOnly,\n        })\n      }\n    } else {\n      const CustomSaveButton =\n        collectionConfig?.admin?.components?.edit?.SaveButton ||\n        globalConfig?.admin?.components?.edit?.SaveButton\n\n      if (CustomSaveButton) {\n        components.SaveButton = RenderServerComponent({\n          Component: CustomSaveButton,\n          importMap: req.payload.importMap,\n          serverProps: serverProps satisfies SaveButtonServerPropsOnly,\n        })\n      }\n    }\n  }\n\n  if (collectionConfig?.upload && collectionConfig?.admin?.components?.edit?.Upload) {\n    components.Upload = RenderServerComponent({\n      Component: collectionConfig.admin.components.edit.Upload,\n      importMap: req.payload.importMap,\n      serverProps,\n    })\n  }\n\n  if (collectionConfig?.upload && collectionConfig.upload.admin?.components?.controls) {\n    components.UploadControls = RenderServerComponent({\n      Component: collectionConfig.upload.admin.components.controls,\n      importMap: req.payload.importMap,\n      serverProps,\n    })\n  }\n\n  return components\n}\n\nexport const renderDocumentSlotsHandler: ServerFunction<{\n  collectionSlug: string\n  id?: number | string\n}> = async (args) => {\n  const { id, collectionSlug, locale, permissions, req } = args\n\n  const collectionConfig = req.payload.collections[collectionSlug]?.config\n\n  if (!collectionConfig) {\n    throw new Error(req.t('error:incorrectCollection'))\n  }\n\n  const { hasSavePermission } = await getDocumentPermissions({\n    id,\n    collectionConfig,\n    data: {},\n    req,\n  })\n\n  return renderDocumentSlots({\n    id,\n    collectionConfig,\n    hasSavePermission,\n    locale,\n    permissions,\n    req,\n  })\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/views/Edit/index.css

@@ -0,0 +1,47 @@
+@layer payload-default {
+  .collection-edit__main-wrapper {
+    width: 100%;
+    display: flex;
+  }
+
+  .collection-edit__main {
+    width: 100%;
+    container-type: inline-size;
+  }
+
+  .collection-edit__main--popup-open {
+    width: 100%;
+  }
+
+  .collection-edit__main--is-live-previewing {
+    width: 40%;
+    position: relative;
+
+    &::after {
+      content: ' ';
+      position: absolute;
+      top: 0;
+      right: 0;
+      width: var(--spacer-6);
+      height: 100%;
+      pointer-events: none;
+      z-index: -1;
+    }
+  }
+
+  .collection-edit__form {
+    height: 100%;
+    width: 100%;
+  }
+
+  .collection-edit__auth {
+    border-radius: var(--radius-small);
+  }
+
+  @media (max-width: 768px) {
+    .collection-edit__auth {
+      margin-top: 0;
+      margin-bottom: var(--spacer-3);
+    }
+  }
+}

package/dist/views/Edit/index.d.ts

@@ -1,6 +1,6 @@
 import type { DocumentViewClientProps } from 'payload';
 import React from 'react';
-import './index.scss';
+import './index.css';
 export type OnSaveContext = {
     getDocPermissions?: boolean;
     incrementVersionCount?: boolean;

package/dist/views/Edit/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/views/Edit/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAc,uBAAuB,EAAE,MAAM,SAAS,CAAA;AAGlE,OAAO,KAAsE,MAAM,OAAO,CAAA;AAsC1F,OAAO,cAAc,CAAA;AAKrB,MAAM,MAAM,aAAa,GAAG;IAC1B,iBAAiB,CAAC,EAAE,OAAO,CAAA;IAC3B,qBAAqB,CAAC,EAAE,OAAO,CAAA;CAChC,CAAA;AAKD,wBAAgB,eAAe,CAAC,EAC9B,sBAAsB,EACtB,kBAAkB,EAClB,WAAW,EACX,aAAa,EACb,WAAW,EAAE,iBAAiB,EAC9B,aAAa,EACb,aAAa,EACb,UAAU,EACV,eAAe,EACf,MAAM,EACN,eAAe,EACf,MAAM,EAAE,YAAY,EACpB,cAAc,GACf,EAAE,uBAAuB,qBAyvBzB"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/views/Edit/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAc,uBAAuB,EAAE,MAAM,SAAS,CAAA;AAGlE,OAAO,KAAsE,MAAM,OAAO,CAAA;AAsC1F,OAAO,aAAa,CAAA;AAKpB,MAAM,MAAM,aAAa,GAAG;IAC1B,iBAAiB,CAAC,EAAE,OAAO,CAAA;IAC3B,qBAAqB,CAAC,EAAE,OAAO,CAAA;CAChC,CAAA;AAKD,wBAAgB,eAAe,CAAC,EAC9B,sBAAsB,EACtB,kBAAkB,EAClB,WAAW,EACX,aAAa,EACb,WAAW,EAAE,iBAAiB,EAC9B,aAAa,EACb,aAAa,EACb,UAAU,EACV,eAAe,EACf,MAAM,EACN,eAAe,EACf,MAAM,EAAE,YAAY,EACpB,cAAc,GACf,EAAE,uBAAuB,qBAswBzB"}

package/dist/views/Edit/index.js

@@ -35,7 +35,7 @@ import { handleTakeOver } from '../../utilities/handleTakeOver.js';
 import { Auth } from './Auth/index.js';
 import { SetDocumentStepNav } from './SetDocumentStepNav/index.js';
 import { SetDocumentTitle } from './SetDocumentTitle/index.js';
-import './index.scss';
+import './index.css';
 const baseClass = 'collection-edit';
 const PENDING_SUCCESS_TOAST_KEY = 'payload-pending-success-toast';
 // This component receives props only on _pages_
@@ -446,6 +446,56 @@ export function DefaultEditView({
   }, [isInitializing]);
   const shouldShowDocumentLockedModal = documentIsLocked && currentEditor && (typeof currentEditor === 'object' ? currentEditor.id !== user?.id : currentEditor !== user?.id) && !isReadOnlyForIncomingUser && !showTakeOverModal && !documentLockState.current?.hasShownLockedModal && !isLockExpired;
   const isFolderCollection = Boolean(collectionConfig?.hierarchy && typeof collectionConfig.hierarchy === 'object' && collectionConfig.hierarchy.allowHasMany === false);
+  const documentControlsProps = {
+    id,
+    slug: collectionConfig?.slug || globalConfig?.slug,
+    apiURL,
+    BeforeDocumentControls,
+    BeforeDocumentMeta,
+    customComponents: {
+      PreviewButton,
+      PublishButton,
+      SaveButton,
+      SaveDraftButton,
+      Status,
+      UnpublishButton
+    },
+    data,
+    disableActions: disableActions || isTrashed,
+    disableCreate,
+    EditMenuItems,
+    hasPublishPermission,
+    hasSavePermission,
+    isEditing,
+    isInDrawer,
+    isTrashed,
+    onDelete,
+    onDrawerCreateNew: clearDoc,
+    onDuplicate,
+    onRestore,
+    onSave,
+    onTakeOver: () => {
+      void handleTakeOver({
+        id,
+        clearRouteCache,
+        collectionSlug,
+        documentLockStateRef: documentLockState,
+        globalSlug,
+        isLockingEnabled,
+        isWithinDoc: true,
+        setCurrentEditor,
+        setIsReadOnlyForIncomingUser,
+        updateDocumentEditor,
+        user
+      });
+    },
+    permissions: docPermissions,
+    readOnlyForIncomingUser: isReadOnlyForIncomingUser,
+    redirectAfterDelete,
+    redirectAfterDuplicate,
+    redirectAfterRestore,
+    user: currentEditor
+  };
   return /*#__PURE__*/_jsx("main", {
     className: [baseClass, (id || globalSlug) && `${baseClass}--is-editing`, globalSlug && `global-edit--${globalSlug}`, collectionSlug && `collection-edit--${collectionSlug}`, isLivePreviewing && `${baseClass}--is-live-previewing`].filter(Boolean).join(' '),
     children: /*#__PURE__*/_jsx(OperationProvider, {
@@ -467,9 +517,17 @@ export function DefaultEditView({
         },
         onSuccess: onSave,
         children: [isInDrawer && /*#__PURE__*/_jsx(DocumentDrawerHeader, {
+          actions: /*#__PURE__*/_jsx(DocumentControls, {
+            ...documentControlsProps,
+            variant: "drawerHeaderActions"
+          }),
           AfterHeader: Description,
+          BeforeDocumentMeta: BeforeDocumentMeta,
           drawerSlug: drawerSlug,
-          showDocumentID: !isFolderCollection
+          readOnlyForIncomingUser: isReadOnlyForIncomingUser,
+          renderTitleAsLink: !isFolderCollection,
+          Status: Status,
+          user: currentEditor
         }), isLockingEnabled && shouldShowDocumentLockedModal && /*#__PURE__*/_jsx(DocumentLocked, {
           handleGoBack: () => handleGoBack({
             adminRoute,
@@ -511,6 +569,7 @@ export function DefaultEditView({
           isActive: showStaleDataModal,
           onReload: handleStaleDataReload
         }), preventLeaveWithoutSaving && /*#__PURE__*/_jsx(LeaveWithoutSaving, {
+          modalSlug: drawerSlug ? `leave-without-saving-${drawerSlug}` : undefined,
           onConfirm: handleLeaveConfirm,
           onPrevent: handlePrevent
         }), !isInDrawer && /*#__PURE__*/_jsx(SetDocumentStepNav, {
@@ -525,53 +584,9 @@ export function DefaultEditView({
           config: config,
           fallback: depth <= 1 ? id?.toString() : undefined,
           globalConfig: globalConfig
-        }), /*#__PURE__*/_jsx(DocumentControls, {
-          apiURL: apiURL,
-          BeforeDocumentControls: BeforeDocumentControls,
-          BeforeDocumentMeta: BeforeDocumentMeta,
-          customComponents: {
-            PreviewButton,
-            PublishButton,
-            SaveButton,
-            SaveDraftButton,
-            Status,
-            UnpublishButton
-          },
-          data: data,
-          disableActions: disableActions || isTrashed,
-          disableCreate: disableCreate,
-          EditMenuItems: EditMenuItems,
-          hasPublishPermission: hasPublishPermission,
-          hasSavePermission: hasSavePermission,
-          id: id,
-          isEditing: isEditing,
-          isInDrawer: isInDrawer,
-          isTrashed: isTrashed,
-          onDelete: onDelete,
-          onDrawerCreateNew: clearDoc,
-          onDuplicate: onDuplicate,
-          onRestore: onRestore,
-          onSave: onSave,
-          onTakeOver: () => handleTakeOver({
-            id,
-            clearRouteCache,
-            collectionSlug,
-            documentLockStateRef: documentLockState,
-            globalSlug,
-            isLockingEnabled,
-            isWithinDoc: true,
-            setCurrentEditor,
-            setIsReadOnlyForIncomingUser,
-            updateDocumentEditor,
-            user
-          }),
-          permissions: docPermissions,
-          readOnlyForIncomingUser: isReadOnlyForIncomingUser,
-          redirectAfterDelete: redirectAfterDelete,
-          redirectAfterDuplicate: redirectAfterDuplicate,
-          redirectAfterRestore: redirectAfterRestore,
-          slug: collectionConfig?.slug || globalConfig?.slug,
-          user: currentEditor
+        }), !isInDrawer && /*#__PURE__*/_jsx(DocumentControls, {
+          ...documentControlsProps,
+          variant: "default"
         }), /*#__PURE__*/_jsxs("div", {
           className: [`${baseClass}__main-wrapper`, isPopupOpen && `${baseClass}--detached`].filter(Boolean).join(' '),
           children: [/*#__PURE__*/_jsxs("div", {