@payloadcms/ui 4.0.0-internal.a0ef1b8 → 4.0.0-internal.a1317b2

package/dist/views/Edit/SetDocumentTitle/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["c","_c","useEffect","useRef","useFormFields","useDocumentTitle","useTranslation","formatDocTitle","SetDocumentTitle","props","$","collectionConfig","config","fallback","globalConfig","useAsTitle","admin","t0","t1","fields","field","hasInitialized","i18n","setDocumentTitle","dateFormatFromConfig","dateFormat","value","t2","data","id","title","t3","t4","current"],"sources":["../../../../src/views/Edit/SetDocumentTitle/index.tsx"],"sourcesContent":["'use client'\nimport type { ClientCollectionConfig, ClientConfig, ClientGlobalConfig } from 'payload'\n\nimport { useEffect, useRef } from 'react'\n\nimport { useFormFields } from '../../../forms/Form/context.js'\nimport { useDocumentTitle } from '../../../providers/DocumentTitle/index.js'\nimport { useTranslation } from '../../../providers/Translation/index.js'\nimport { formatDocTitle } from '../../../utilities/formatDocTitle/index.js'\n\nexport const SetDocumentTitle: React.FC<{\n  collectionConfig?: ClientCollectionConfig\n  config?: ClientConfig\n  fallback: string\n  globalConfig?: ClientGlobalConfig\n}> = (props) => {\n  const { collectionConfig, config, fallback, globalConfig } = props\n\n  const useAsTitle = collectionConfig?.admin?.useAsTitle\n\n  const field = useFormFields(([fields]) => (useAsTitle && fields && fields?.[useAsTitle]) || null)\n\n  const hasInitialized = useRef(false)\n\n  const { i18n } = useTranslation()\n\n  const { setDocumentTitle } = useDocumentTitle()\n\n  const dateFormatFromConfig = config?.admin?.dateFormat\n\n  const title = formatDocTitle({\n    collectionConfig,\n    data: { id: '', [useAsTitle]: field?.value || '' },\n    dateFormat: dateFormatFromConfig,\n    fallback,\n    globalConfig,\n    i18n,\n  })\n\n  useEffect(() => {\n    if (!hasInitialized.current) {\n      hasInitialized.current = true\n      return\n    }\n\n    setDocumentTitle(title)\n  }, [setDocumentTitle, title])\n\n  return null\n}\n"],"mappings":"AAAA;;AAAA,SAAAA,CAAA,IAAAC,EAAA;AAGA,SAASC,SAAS,EAAEC,MAAM,QAAQ;AAElC,SAASC,aAAa,QAAQ;AAC9B,SAASC,gBAAgB,QAAQ;AACjC,SAASC,cAAc,QAAQ;AAC/B,SAASC,cAAc,QAAQ;AAE/B,OAAO,MAAMC,gBAAA,GAKRC,KAAA;EAAA,MAAAC,CAAA,GAAAT,EAAA;EACH;IAAAU,gBAAA;IAAAC,MAAA;IAAAC,QAAA;IAAAC;EAAA,IAA6DL,KAAA;EAE7D,MAAAM,UAAA,GAAmBJ,gBAAA,EAAAK,KAAA,EAAAD,UAAA;EAAyB,IAAAE,EAAA;EAAA,IAAAP,CAAA,QAAAK,UAAA;IAEhBE,EAAA,GAAAC,EAAA;MAAC,OAAAC,MAAA,IAAAD,EAAQ;MAAA,OAAKH,UAAC,IAAcI,MAAA,IAAUA,MAAA,GAASJ,UAAA,CAAW,QAAK;IAAA;IAAAL,CAAA,MAAAK,UAAA;IAAAL,CAAA,MAAAO,EAAA;EAAA;IAAAA,EAAA,GAAAP,CAAA;EAAA;EAA5F,MAAAU,KAAA,GAAchB,aAAA,CAAca,EAAgE;EAE5F,MAAAI,cAAA,GAAuBlB,MAAA,MAAO;EAE9B;IAAAmB;EAAA,IAAiBhB,cAAA;EAEjB;IAAAiB;EAAA,IAA6BlB,gBAAA;EAE7B,MAAAmB,oBAAA,GAA6BZ,MAAA,EAAAI,KAAA,EAAAS,UAAA;EAIG,MAAAP,EAAA,GAAAE,KAAA,EAAAM,KAAA,IAAgB;EAAA,IAAAC,EAAA;EAAA,IAAAjB,CAAA,QAAAC,gBAAA,IAAAD,CAAA,QAAAc,oBAAA,IAAAd,CAAA,QAAAG,QAAA,IAAAH,CAAA,QAAAI,YAAA,IAAAJ,CAAA,QAAAY,IAAA,IAAAZ,CAAA,QAAAQ,EAAA,IAAAR,CAAA,QAAAK,UAAA;IAFlCY,EAAA,GAAApB,cAAA;MAAAI,gBAAA;MAAAiB,IAAA;QAAAC,EAAA,EAEA;QAAA,CAAKd,UAAA,GAAaG;MAAgB;MAAAO,UAAA,EAClCD,oBAAA;MAAAX,QAAA;MAAAC,YAAA;MAAAQ;IAAA,CAId;IAAAZ,CAAA,MAAAC,gBAAA;IAAAD,CAAA,MAAAc,oBAAA;IAAAd,CAAA,MAAAG,QAAA;IAAAH,CAAA,MAAAI,YAAA;IAAAJ,CAAA,MAAAY,IAAA;IAAAZ,CAAA,MAAAQ,EAAA;IAAAR,CAAA,MAAAK,UAAA;IAAAL,CAAA,MAAAiB,EAAA;EAAA;IAAAA,EAAA,GAAAjB,CAAA;EAAA;EAPA,MAAAoB,KAAA,GAAcH,EAOd;EAAA,IAAAI,EAAA;EAAA,IAAAC,EAAA;EAAA,IAAAtB,CAAA,SAAAa,gBAAA,IAAAb,CAAA,SAAAoB,KAAA;IAEUC,EAAA,GAAAA,CAAA;MAAA,KACHV,cAAA,CAAAY,OAAA;QACHZ,cAAA,CAAAY,OAAA;QAAA;MAAA;MAIFV,gBAAA,CAAiBO,KAAA;IAAA;IAChBE,EAAA,IAACT,gBAAA,EAAkBO,KAAA;IAAMpB,CAAA,OAAAa,gBAAA;IAAAb,CAAA,OAAAoB,KAAA;IAAApB,CAAA,OAAAqB,EAAA;IAAArB,CAAA,OAAAsB,EAAA;EAAA;IAAAD,EAAA,GAAArB,CAAA;IAAAsB,EAAA,GAAAtB,CAAA;EAAA;EAP5BR,SAAA,CAAU6B,EAOV,EAAGC,EAAyB;EAAA;AAAA,CAG9B","ignoreList":[]}
+{"version":3,"file":"index.js","names":["c","_c","useEffect","useRef","useFormFields","useDocumentTitle","useTranslation","formatDocTitle","SetDocumentTitle","props","$","collectionConfig","config","fallback","globalConfig","useAsTitle","admin","t0","t1","fields","field","hasInitialized","i18n","setDocumentTitle","dateFormatFromConfig","dateFormat","value","t2","data","id","title","t3","t4","current","animationFrame","requestAnimationFrame","cancelAnimationFrame"],"sources":["../../../../src/views/Edit/SetDocumentTitle/index.tsx"],"sourcesContent":["'use client'\nimport type { ClientCollectionConfig, ClientConfig, ClientGlobalConfig } from 'payload'\n\nimport { useEffect, useRef } from 'react'\n\nimport { useFormFields } from '../../../forms/Form/context.js'\nimport { useDocumentTitle } from '../../../providers/DocumentTitle/index.js'\nimport { useTranslation } from '../../../providers/Translation/index.js'\nimport { formatDocTitle } from '../../../utilities/formatDocTitle/index.js'\n\nexport const SetDocumentTitle: React.FC<{\n  collectionConfig?: ClientCollectionConfig\n  config?: ClientConfig\n  fallback: string\n  globalConfig?: ClientGlobalConfig\n}> = (props) => {\n  const { collectionConfig, config, fallback, globalConfig } = props\n\n  const useAsTitle = collectionConfig?.admin?.useAsTitle\n\n  const field = useFormFields(([fields]) => (useAsTitle && fields && fields?.[useAsTitle]) || null)\n\n  const hasInitialized = useRef(false)\n\n  const { i18n } = useTranslation()\n\n  const { setDocumentTitle } = useDocumentTitle()\n\n  const dateFormatFromConfig = config?.admin?.dateFormat\n\n  const title = formatDocTitle({\n    collectionConfig,\n    data: { id: '', [useAsTitle]: field?.value || '' },\n    dateFormat: dateFormatFromConfig,\n    fallback,\n    globalConfig,\n    i18n,\n  })\n\n  useEffect(() => {\n    if (!hasInitialized.current) {\n      hasInitialized.current = true\n      return\n    }\n\n    // Coalesce rapid field changes before updating the title and step navigation contexts.\n    const animationFrame = requestAnimationFrame(() => {\n      setDocumentTitle(title)\n    })\n\n    return () => cancelAnimationFrame(animationFrame)\n  }, [setDocumentTitle, title])\n\n  return null\n}\n"],"mappings":"AAAA;;AAAA,SAAAA,CAAA,IAAAC,EAAA;AAGA,SAASC,SAAS,EAAEC,MAAM,QAAQ;AAElC,SAASC,aAAa,QAAQ;AAC9B,SAASC,gBAAgB,QAAQ;AACjC,SAASC,cAAc,QAAQ;AAC/B,SAASC,cAAc,QAAQ;AAE/B,OAAO,MAAMC,gBAAA,GAKRC,KAAA;EAAA,MAAAC,CAAA,GAAAT,EAAA;EACH;IAAAU,gBAAA;IAAAC,MAAA;IAAAC,QAAA;IAAAC;EAAA,IAA6DL,KAAA;EAE7D,MAAAM,UAAA,GAAmBJ,gBAAA,EAAAK,KAAA,EAAAD,UAAA;EAAyB,IAAAE,EAAA;EAAA,IAAAP,CAAA,QAAAK,UAAA;IAEhBE,EAAA,GAAAC,EAAA;MAAC,OAAAC,MAAA,IAAAD,EAAQ;MAAA,OAAKH,UAAC,IAAcI,MAAA,IAAUA,MAAA,GAASJ,UAAA,CAAW,QAAK;IAAA;IAAAL,CAAA,MAAAK,UAAA;IAAAL,CAAA,MAAAO,EAAA;EAAA;IAAAA,EAAA,GAAAP,CAAA;EAAA;EAA5F,MAAAU,KAAA,GAAchB,aAAA,CAAca,EAAgE;EAE5F,MAAAI,cAAA,GAAuBlB,MAAA,MAAO;EAE9B;IAAAmB;EAAA,IAAiBhB,cAAA;EAEjB;IAAAiB;EAAA,IAA6BlB,gBAAA;EAE7B,MAAAmB,oBAAA,GAA6BZ,MAAA,EAAAI,KAAA,EAAAS,UAAA;EAIG,MAAAP,EAAA,GAAAE,KAAA,EAAAM,KAAA,IAAgB;EAAA,IAAAC,EAAA;EAAA,IAAAjB,CAAA,QAAAC,gBAAA,IAAAD,CAAA,QAAAc,oBAAA,IAAAd,CAAA,QAAAG,QAAA,IAAAH,CAAA,QAAAI,YAAA,IAAAJ,CAAA,QAAAY,IAAA,IAAAZ,CAAA,QAAAQ,EAAA,IAAAR,CAAA,QAAAK,UAAA;IAFlCY,EAAA,GAAApB,cAAA;MAAAI,gBAAA;MAAAiB,IAAA;QAAAC,EAAA,EAEA;QAAA,CAAKd,UAAA,GAAaG;MAAgB;MAAAO,UAAA,EAClCD,oBAAA;MAAAX,QAAA;MAAAC,YAAA;MAAAQ;IAAA,CAId;IAAAZ,CAAA,MAAAC,gBAAA;IAAAD,CAAA,MAAAc,oBAAA;IAAAd,CAAA,MAAAG,QAAA;IAAAH,CAAA,MAAAI,YAAA;IAAAJ,CAAA,MAAAY,IAAA;IAAAZ,CAAA,MAAAQ,EAAA;IAAAR,CAAA,MAAAK,UAAA;IAAAL,CAAA,MAAAiB,EAAA;EAAA;IAAAA,EAAA,GAAAjB,CAAA;EAAA;EAPA,MAAAoB,KAAA,GAAcH,EAOd;EAAA,IAAAI,EAAA;EAAA,IAAAC,EAAA;EAAA,IAAAtB,CAAA,SAAAa,gBAAA,IAAAb,CAAA,SAAAoB,KAAA;IAEUC,EAAA,GAAAA,CAAA;MAAA,KACHV,cAAA,CAAAY,OAAA;QACHZ,cAAA,CAAAY,OAAA;QAAA;MAAA;MAKF,MAAAC,cAAA,GAAuBC,qBAAA;QACrBZ,gBAAA,CAAiBO,KAAA;MAAA,CACnB;MAAA,aAEaM,oBAAA,CAAqBF,cAAA;IAAA;IACjCF,EAAA,IAACT,gBAAA,EAAkBO,KAAA;IAAMpB,CAAA,OAAAa,gBAAA;IAAAb,CAAA,OAAAoB,KAAA;IAAApB,CAAA,OAAAqB,EAAA;IAAArB,CAAA,OAAAsB,EAAA;EAAA;IAAAD,EAAA,GAAArB,CAAA;IAAAsB,EAAA,GAAAtB,CAAA;EAAA;EAZ5BR,SAAA,CAAU6B,EAYV,EAAGC,EAAyB;EAAA;AAAA,CAG9B","ignoreList":[]}

package/dist/views/Edit/index.css

@@ -1,18 +1,168 @@
 @layer payload-default {
+  .collection-edit__form {
+    height: 100%;
+    width: 100%;
+    container-type: inline-size;
+    container-name: edit-main;
+  }
+
   .collection-edit__main-wrapper {
     width: 100%;
     display: flex;
   }
 
+  .collection-edit__main-wrapper--scroll-fields-only {
+    height: auto;
+    overflow: visible;
+
+    .collection-edit__main {
+      min-height: initial;
+      overflow: visible;
+    }
+
+    .document-fields {
+      height: auto;
+      min-height: initial;
+    }
+
+    .document-fields--force-sidebar-wrap {
+      overflow-y: visible;
+      overscroll-behavior: auto;
+      scrollbar-width: auto;
+      scrollbar-color: auto;
+    }
+
+    .document-fields:not(.document-fields--force-sidebar-wrap) .document-fields__main {
+      min-height: initial;
+      overflow-y: visible;
+      overscroll-behavior: auto;
+      scrollbar-width: auto;
+      scrollbar-color: auto;
+    }
+
+    .document-fields--force-sidebar-wrap .document-fields__main {
+      overflow-y: visible;
+      overscroll-behavior: auto;
+      scrollbar-width: auto;
+      scrollbar-color: auto;
+    }
+
+    .document-fields__sidebar {
+      overscroll-behavior: auto;
+      scrollbar-width: auto;
+      scrollbar-color: auto;
+    }
+
+    .document-fields__sidebar-wrap {
+      --sidebar-wrap-top: 0px;
+      --sidebar-wrap-height: 100%;
+    }
+  }
+
+  .template-default__wrap:has(.collection-edit__main-wrapper--scroll-fields-only) {
+    height: auto;
+    overflow: visible;
+  }
+
   .collection-edit__main {
     width: 100%;
-    container-type: inline-size;
   }
 
   .collection-edit__main--popup-open {
     width: 100%;
   }
 
+  .collection-edit__main-wrapper--has-upload-panel {
+    flex-direction: column-reverse;
+    gap: var(--spacer-5);
+
+    .collection-edit__main {
+      flex: 1;
+    }
+
+    .file-manager {
+      order: 0;
+      /* Stacked — no vertical divider; the file manager's own bottom border separates it. */
+      border-inline-start: 0;
+    }
+
+    .document-fields {
+      flex: 0 0 auto;
+      width: 100%;
+    }
+
+    .collection-edit__main:not(:has(.field-type)) {
+      display: none;
+    }
+
+    .collection-edit__main:not(:has(.field-type)) ~ .file-manager {
+      border-inline-start: none;
+    }
+  }
+
+  /* Container query (not viewport) so the layout stacks based on the space actually available
+     to the edit view — e.g. inside a narrow document drawer it uses the stacked mobile layout. */
+  @container edit-main (min-width: 1024px) {
+    .collection-edit__main-wrapper--scroll-fields-only {
+      height: calc(
+        100dvh - var(--app-header-height, 0px) - var(--doc-controls-height, 0px) -
+          var(--doc-header-height, 0px)
+      );
+      overflow: hidden;
+
+      .collection-edit__main {
+        min-height: 0;
+        overflow: hidden;
+      }
+
+      .document-fields {
+        height: 100%;
+        min-height: 0;
+      }
+
+      .document-fields--force-sidebar-wrap {
+        overflow-y: auto;
+        overscroll-behavior: contain;
+        scrollbar-width: thin;
+        scrollbar-color: var(--scrollbar-color) transparent;
+      }
+
+      .document-fields:not(.document-fields--force-sidebar-wrap) .document-fields__main {
+        min-height: 0;
+        overflow-y: auto;
+        overscroll-behavior: contain;
+        scrollbar-width: thin;
+        scrollbar-color: var(--scrollbar-color) transparent;
+      }
+
+      .document-fields__sidebar {
+        overscroll-behavior: contain;
+        scrollbar-width: thin;
+        scrollbar-color: var(--scrollbar-color) transparent;
+      }
+    }
+
+    .template-default__wrap:has(.collection-edit__main-wrapper--scroll-fields-only) {
+      height: 100dvh;
+      overflow: hidden;
+    }
+
+    .collection-edit__main-wrapper--has-upload-panel {
+      flex-direction: row;
+      gap: 0;
+
+      .file-manager {
+        flex: 2;
+        border-inline-start: var(--stroke-width-small) solid var(--color-border);
+      }
+
+      .document-fields {
+        flex: initial;
+        width: 100%;
+      }
+    }
+  }
+
   .collection-edit__main--is-live-previewing {
     width: 40%;
     position: relative;
@@ -29,11 +179,6 @@
     }
   }
 
-  .collection-edit__form {
-    height: 100%;
-    width: 100%;
-  }
-
   .collection-edit__auth {
     border-radius: var(--radius-small);
   }

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

@@ -5,5 +5,5 @@ export type OnSaveContext = {
     getDocPermissions?: boolean;
     incrementVersionCount?: boolean;
 };
-export declare function DefaultEditView({ BeforeDocumentControls, BeforeDocumentMeta, Description, EditMenuItems, LivePreview: CustomLivePreview, PreviewButton, PublishButton, SaveButton, SaveDraftButton, Status, UnpublishButton, Upload: CustomUpload, UploadControls, }: DocumentViewClientProps): React.JSX.Element;
+export declare function DefaultEditView({ BeforeDocumentControls, BeforeDocumentMeta, Description, EditMenuItems, LivePreview: CustomLivePreview, PreviewButton, PublishButton, SaveButton, SaveDraftButton, Status, UnpublishButton, Upload: CustomUpload, UploadControls, UploadFilePreview, }: DocumentViewClientProps): React.JSX.Element;
 //# sourceMappingURL=index.d.ts.map

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,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,qBA6vBzB"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/views/Edit/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,uBAAuB,EAAQ,MAAM,SAAS,CAAA;AAG5D,OAAO,KAA4D,MAAM,OAAO,CAAA;AAsChF,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,EACd,iBAAiB,GAClB,EAAE,uBAAuB,qBAqxBzB"}

package/dist/views/Edit/index.js

@@ -2,7 +2,7 @@
 
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { formatAdminURL, hasAutosaveEnabled } from 'payload/shared';
-import React, { Fragment, useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { toast } from 'sonner';
 import { DocumentControls } from '../../elements/DocumentControls/index.js';
 import { DocumentDrawerHeader } from '../../elements/DocumentDrawer/DrawerHeader/index.js';
@@ -11,9 +11,9 @@ import { DocumentFields } from '../../elements/DocumentFields/index.js';
 import { DocumentLocked } from '../../elements/DocumentLocked/index.js';
 import { DocumentStaleData } from '../../elements/DocumentStaleData/index.js';
 import { DocumentTakeOver } from '../../elements/DocumentTakeOver/index.js';
+import { FileManager } from '../../elements/FileManager/index.js';
 import { LeaveWithoutSaving } from '../../elements/LeaveWithoutSaving/index.js';
 import { LivePreviewWindow } from '../../elements/LivePreview/Window/index.js';
-import { Upload } from '../../elements/Upload/index.js';
 import { Form } from '../../forms/Form/index.js';
 import { useAuth } from '../../providers/Auth/index.js';
 import { useConfig } from '../../providers/Config/index.js';
@@ -54,7 +54,8 @@ export function DefaultEditView({
   Status,
   UnpublishButton,
   Upload: CustomUpload,
-  UploadControls
+  UploadControls,
+  UploadFilePreview
 }) {
   const {
     id,
@@ -378,7 +379,7 @@ export function DefaultEditView({
     // Check for stale data on first edit only
     // Skip this check entirely for autosave-enabled collections/globals to prevent
     // false positives from the user's own autosaves
-    const checkForStaleData = !hasCheckedForStaleDataRef.current && originalUpdatedAtRef.current && operation === 'update' && !autosaveEnabled;
+    const checkForStaleData = !hasCheckedForStaleDataRef.current && originalUpdatedAtRef.current && operation === 'update' && !isTrashed && !autosaveEnabled;
     if (checkForStaleData) {
       hasCheckedForStaleDataRef.current = true;
     }
@@ -393,6 +394,7 @@ export function DefaultEditView({
       globalSlug,
       operation,
       originalUpdatedAt: checkForStaleData ? originalUpdatedAtRef.current : undefined,
+      readOnly: isTrashed || isReadOnlyForIncomingUser,
       renderAllFields: false,
       returnLockStatus: isLockingEnabled,
       schemaPath: schemaPathSegments.join('.'),
@@ -419,7 +421,7 @@ export function DefaultEditView({
     }
     abortOnChangeRef.current = null;
     return state_0;
-  }, [data?.updatedAt, editSessionStartTime, isLockingEnabled, getDocPreferences, getFormState, id, collectionSlug, docPermissions, globalSlug, operation, schemaPathSegments, handleDocumentLocking, autosaveEnabled]);
+  }, [data?.updatedAt, editSessionStartTime, isLockingEnabled, getDocPreferences, getFormState, id, collectionSlug, docPermissions, globalSlug, operation, schemaPathSegments, handleDocumentLocking, autosaveEnabled, isTrashed, isReadOnlyForIncomingUser]);
   // Clean up when the component unmounts or when the document is unlocked
   useEffect(() => {
     return () => {
@@ -446,6 +448,73 @@ 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
+  };
+  const renderAuth = auth ? /*#__PURE__*/_jsx(Auth, {
+    className: `${baseClass}__auth`,
+    collectionSlug: collectionConfig.slug,
+    disableLocalStrategy: collectionConfig.auth?.disableLocalStrategy,
+    email: data?.email,
+    loginWithUsername: auth?.loginWithUsername,
+    operation: operation,
+    readOnly: !hasSavePermission,
+    requirePassword: !id,
+    setValidateBeforeSubmit: setValidateBeforeSubmit,
+    // eslint-disable-next-line react-compiler/react-compiler
+    useAPIKey: auth.useAPIKey,
+    username: data?.username,
+    verify: auth.verify
+  }) : undefined;
+  const shouldRenderUploadPanel = Boolean(upload) && !(operation === 'create' && upload.hideFileInputOnCreate);
+  const shouldScrollFieldsOnly = shouldRenderUploadPanel;
   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 +536,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,
@@ -526,93 +603,34 @@ 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(' '),
+          className: [`${baseClass}__main-wrapper`, shouldRenderUploadPanel && `${baseClass}__main-wrapper--has-upload-panel`, shouldScrollFieldsOnly && `${baseClass}__main-wrapper--scroll-fields-only`, isPopupOpen && `${baseClass}--detached`].filter(Boolean).join(' '),
           children: [/*#__PURE__*/_jsxs("div", {
             className: [`${baseClass}__main`, isPopupOpen && `${baseClass}__main--popup-open`].filter(Boolean).join(' '),
             children: [/*#__PURE__*/_jsx(DocumentFields, {
               AfterFields: AfterFields,
-              BeforeFields: BeforeFields || /*#__PURE__*/_jsxs(Fragment, {
-                children: [auth && /*#__PURE__*/_jsx(Auth, {
-                  className: `${baseClass}__auth`,
-                  collectionSlug: collectionConfig.slug,
-                  disableLocalStrategy: collectionConfig.auth?.disableLocalStrategy,
-                  email: data?.email,
-                  loginWithUsername: auth?.loginWithUsername,
-                  operation: operation,
-                  readOnly: !hasSavePermission,
-                  requirePassword: !id,
-                  setValidateBeforeSubmit: setValidateBeforeSubmit,
-                  // eslint-disable-next-line react-compiler/react-compiler
-                  useAPIKey: auth.useAPIKey,
-                  username: data?.username,
-                  verify: auth.verify
-                }), upload && /*#__PURE__*/_jsx(React.Fragment, {
-                  children: /*#__PURE__*/_jsx(UploadControlsProvider, {
-                    children: CustomUpload || /*#__PURE__*/_jsx(Upload, {
-                      collectionSlug: collectionConfig.slug,
-                      initialState: initialState,
-                      uploadConfig: upload,
-                      UploadControls: UploadControls
-                    })
-                  })
-                })]
-              }),
+              BeforeFields: renderAuth || BeforeFields ? /*#__PURE__*/_jsxs(_Fragment, {
+                children: [renderAuth, BeforeFields]
+              }) : null,
               Description: Description,
               docPermissions: docPermissions,
               fields: docConfig.fields,
-              forceSidebarWrap: isLivePreviewing,
+              forceSidebarWrap: shouldRenderUploadPanel || isLivePreviewing,
               isTrashed: isTrashed,
               readOnly: isReadOnlyForIncomingUser || !hasSavePermission || isTrashed,
               schemaPathSegments: schemaPathSegments
             }), AfterDocument]
+          }), shouldRenderUploadPanel && /*#__PURE__*/_jsx(UploadControlsProvider, {
+            children: CustomUpload || /*#__PURE__*/_jsx(FileManager, {
+              collectionSlug: collectionConfig.slug,
+              initialState: initialState,
+              uploadConfig: upload,
+              UploadControls: UploadControls,
+              UploadFilePreview: UploadFilePreview
+            })
           }), isLivePreviewEnabled && !isInDrawer && livePreviewURL && /*#__PURE__*/_jsx(_Fragment, {
             children: CustomLivePreview || /*#__PURE__*/_jsx(LivePreviewWindow, {
               collectionSlug: collectionSlug,