@payloadcms/ui 4.0.0-internal.d28e9fb → 4.0.0-internal.d3909a9

package/dist/views/Edit/Auth/types.d.ts

@@ -9,7 +9,9 @@ export type Props = {
     readOnly: boolean;
     requirePassword?: boolean;
     setValidateBeforeSubmit: (validate: boolean) => void;
-    useAPIKey?: boolean;
+    useAPIKey?: {
+        reveal?: boolean;
+    } | boolean;
     username: string;
     verify?: boolean;
 };

package/dist/views/Edit/Auth/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/views/Edit/Auth/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,SAAS,CAAA;AAExD,MAAM,MAAM,KAAK,GAAG;IAClB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,cAAc,EAAE,yBAAyB,CAAC,MAAM,CAAC,CAAA;IACjD,oBAAoB,CAAC,EAAE,yBAAyB,CAAC,MAAM,CAAC,CAAC,sBAAsB,CAAC,CAAA;IAChF,KAAK,EAAE,MAAM,CAAA;IACb,iBAAiB,EAAE,yBAAyB,CAAC,MAAM,CAAC,CAAC,mBAAmB,CAAC,CAAA;IACzE,SAAS,EAAE,QAAQ,GAAG,QAAQ,CAAA;IAC9B,QAAQ,EAAE,OAAO,CAAA;IACjB,eAAe,CAAC,EAAE,OAAO,CAAA;IACzB,uBAAuB,EAAE,CAAC,QAAQ,EAAE,OAAO,KAAK,IAAI,CAAA;IACpD,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,QAAQ,EAAE,MAAM,CAAA;IAChB,MAAM,CAAC,EAAE,OAAO,CAAA;CACjB,CAAA"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/views/Edit/Auth/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,SAAS,CAAA;AAExD,MAAM,MAAM,KAAK,GAAG;IAClB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,cAAc,EAAE,yBAAyB,CAAC,MAAM,CAAC,CAAA;IACjD,oBAAoB,CAAC,EAAE,yBAAyB,CAAC,MAAM,CAAC,CAAC,sBAAsB,CAAC,CAAA;IAChF,KAAK,EAAE,MAAM,CAAA;IACb,iBAAiB,EAAE,yBAAyB,CAAC,MAAM,CAAC,CAAC,mBAAmB,CAAC,CAAA;IACzE,SAAS,EAAE,QAAQ,GAAG,QAAQ,CAAA;IAC9B,QAAQ,EAAE,OAAO,CAAA;IACjB,eAAe,CAAC,EAAE,OAAO,CAAA;IACzB,uBAAuB,EAAE,CAAC,QAAQ,EAAE,OAAO,KAAK,IAAI,CAAA;IACpD,SAAS,CAAC,EACN;QACE,MAAM,CAAC,EAAE,OAAO,CAAA;KACjB,GACD,OAAO,CAAA;IACX,QAAQ,EAAE,MAAM,CAAA;IAChB,MAAM,CAAC,EAAE,OAAO,CAAA;CACjB,CAAA"}

package/dist/views/Edit/Auth/types.js.map

@@ -1 +1 @@
-{"version":3,"file":"types.js","names":[],"sources":["../../../../src/views/Edit/Auth/types.ts"],"sourcesContent":["import type { SanitizedCollectionConfig } from 'payload'\n\nexport type Props = {\n  className?: string\n  collectionSlug: SanitizedCollectionConfig['slug']\n  disableLocalStrategy?: SanitizedCollectionConfig['auth']['disableLocalStrategy']\n  email: string\n  loginWithUsername: SanitizedCollectionConfig['auth']['loginWithUsername']\n  operation: 'create' | 'update'\n  readOnly: boolean\n  requirePassword?: boolean\n  setValidateBeforeSubmit: (validate: boolean) => void\n  useAPIKey?: boolean\n  username: string\n  verify?: boolean\n}\n"],"mappings":"AAEA","ignoreList":[]}
+{"version":3,"file":"types.js","names":[],"sources":["../../../../src/views/Edit/Auth/types.ts"],"sourcesContent":["import type { SanitizedCollectionConfig } from 'payload'\n\nexport type Props = {\n  className?: string\n  collectionSlug: SanitizedCollectionConfig['slug']\n  disableLocalStrategy?: SanitizedCollectionConfig['auth']['disableLocalStrategy']\n  email: string\n  loginWithUsername: SanitizedCollectionConfig['auth']['loginWithUsername']\n  operation: 'create' | 'update'\n  readOnly: boolean\n  requirePassword?: boolean\n  setValidateBeforeSubmit: (validate: boolean) => void\n  useAPIKey?:\n    | {\n        reveal?: boolean\n      }\n    | boolean\n  username: string\n  verify?: boolean\n}\n"],"mappings":"AAEA","ignoreList":[]}

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/views/Edit/SetDocumentTitle/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,sBAAsB,EAAE,YAAY,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAA;AASvF,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,EAAE,CAAC;IACtC,gBAAgB,CAAC,EAAE,sBAAsB,CAAA;IACzC,MAAM,CAAC,EAAE,YAAY,CAAA;IACrB,QAAQ,EAAE,MAAM,CAAA;IAChB,YAAY,CAAC,EAAE,kBAAkB,CAAA;CAClC,CAkCA,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/views/Edit/SetDocumentTitle/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,sBAAsB,EAAE,YAAY,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAA;AASvF,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,EAAE,CAAC;IACtC,gBAAgB,CAAC,EAAE,sBAAsB,CAAA;IACzC,MAAM,CAAC,EAAE,YAAY,CAAA;IACrB,QAAQ,EAAE,MAAM,CAAA;IAChB,YAAY,CAAC,EAAE,kBAAkB,CAAA;CAClC,CAuCA,CAAA"}

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

@@ -69,7 +69,10 @@ export const SetDocumentTitle = props => {
         hasInitialized.current = true;
         return;
       }
-      setDocumentTitle(title);
+      const animationFrame = requestAnimationFrame(() => {
+        setDocumentTitle(title);
+      });
+      return () => cancelAnimationFrame(animationFrame);
     };
     t4 = [setDocumentTitle, title];
     $[10] = setDocumentTitle;

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

@@ -0,0 +1,219 @@
+@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%;
+  }
+
+  .collection-edit .collection-edit__main > .document-fields {
+    width: 100%;
+    max-width: 100%;
+    margin-inline: auto;
+  }
+
+  @media (min-width: 1024px) {
+    .collection-edit--constrain-document-width
+      .collection-edit__main
+      > .document-fields:not(.document-fields--force-sidebar-wrap) {
+      --field-border-bleed: 0;
+      --field-tabs-edge-display: none;
+      max-width: calc(var(--spacer-6) * 27);
+    }
+  }
+
+  @container drawer (width <= 768px) {
+    .collection-edit--constrain-document-width
+      .collection-edit__main
+      > .document-fields:not(.document-fields--force-sidebar-wrap) {
+      --field-border-bleed: 1;
+      --field-tabs-edge-display: block;
+      max-width: 100%;
+    }
+  }
+
+  .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;
+
+    &::after {
+      content: ' ';
+      position: absolute;
+      top: 0;
+      right: 0;
+      width: var(--spacer-6);
+      height: 100%;
+      pointer-events: none;
+      z-index: -1;
+    }
+  }
+
+  .collection-edit__auth {
+    border-radius: var(--radius-small);
+  }
+
+  /* stylelint-disable-next-line plugin/no-max-width-media-query -- TODO: pre-existing; migrate to a mobile-first min-width query */
+  @media (max-width: 768px) {
+    .collection-edit__auth {
+      margin-top: 0;
+      margin-bottom: var(--spacer-3);
+    }
+  }
+}

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

@@ -1,9 +1,9 @@
 import type { DocumentViewClientProps } from 'payload';
 import React from 'react';
-import './index.scss';
+import './index.css';
 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;AAIlE,OAAO,KAAsE,MAAM,OAAO,CAAA;AAqC1F,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,qBA+vBzB"}
+{"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,qBAsxBzB"}

package/dist/views/Edit/index.js

@@ -1,9 +1,8 @@
 'use client';
 
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useRouter, useSearchParams } from 'next/navigation.js';
 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';
@@ -12,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';
@@ -24,6 +23,7 @@ import { useEditDepth } from '../../providers/EditDepth/index.js';
 import { useLivePreviewContext, usePreviewURL } from '../../providers/LivePreview/context.js';
 import { OperationProvider } from '../../providers/Operation/index.js';
 import { useRouteCache } from '../../providers/RouteCache/index.js';
+import { useRouter, useSearchParams } from '../../providers/RouterAdapter/index.js';
 import { useRouteTransition } from '../../providers/RouteTransition/index.js';
 import { useServerFunctions } from '../../providers/ServerFunctions/index.js';
 import { UploadControlsProvider } from '../../providers/UploadControls/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_
@@ -54,7 +54,8 @@ export function DefaultEditView({
   Status,
   UnpublishButton,
   Upload: CustomUpload,
-  UploadControls
+  UploadControls,
+  UploadFilePreview
 }) {
   const {
     id,
@@ -148,7 +149,7 @@ export function DefaultEditView({
   const {
     isLivePreviewEnabled,
     isLivePreviewing,
-    previewWindowType,
+    isPopupOpen,
     setURL: setLivePreviewURL,
     typeofLivePreviewURL,
     url: livePreviewURL
@@ -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,8 +448,75 @@ 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 && previewWindowType === 'iframe' && `${baseClass}--is-live-previewing`].filter(Boolean).join(' '),
+    className: [baseClass, config.admin.constrainWidth && `${baseClass}--constrain-document-width`, (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, {
       operation: operation,
       children: /*#__PURE__*/_jsxs(Form, {
@@ -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,
@@ -511,6 +588,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,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`, previewWindowType === 'popup' && `${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`, previewWindowType === 'popup' && `${baseClass}__main--popup-open`].filter(Boolean).join(' '),
+            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,