@payloadcms/ui 4.0.0-internal.40de3ec → 4.0.0-internal.4804abd

package/dist/views/Edit/Auth/index.css

@@ -65,73 +65,6 @@
     background: transparent;
   }
 
-  .auth-fields .field-type.api-key input,
-  .auth-fields .api-key__toggle-button {
-    font-family: var(--text-body-medium-font-family);
-    font-size: var(--text-body-medium-font-size);
-    font-weight: var(--text-body-medium-font-weight);
-    line-height: var(--text-body-medium-line-height);
-  }
-
-  .auth-fields .field-type.api-key input {
-    width: 100%;
-    border: none;
-    border-radius: 0;
-    background: transparent;
-    color: var(--color-text);
-    height: auto;
-    min-width: 0;
-    min-height: unset;
-    outline: none;
-    padding: 0 var(--spacer-2);
-    padding-inline-end: calc(var(--spacer-4) + var(--spacer-3));
-    appearance: none;
-    -webkit-appearance: none;
-  }
-
-  .auth-fields .api-key__input-wrap {
-    position: relative;
-    display: flex;
-    align-items: stretch;
-    width: 100%;
-    background: var(--color-bg-secondary);
-    border: var(--stroke-width-small) solid transparent;
-    border-radius: var(--radius-medium);
-    min-height: var(--spacer-5);
-  }
-
-  .auth-fields .api-key__input-wrap:focus-within {
-    border-color: var(--color-border-selected);
-  }
-
-  .auth-fields .api-key__toggle-button-wrap {
-    position: absolute;
-    top: 50%;
-    right: calc(var(--spacer-2) - 5px); /* 8px input padding - 5px icon viewBox internal padding */
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    transform: translateY(-50%);
-  }
-
-  .auth-fields .api-key__toggle-button {
-    width: var(--spacer-4);
-    height: var(--spacer-4);
-    border: none;
-    color: var(--color-icon-secondary);
-    margin: 0;
-    padding: 0;
-  }
-
-  .auth-fields .api-key__toggle-button:hover {
-    color: var(--color-icon);
-  }
-
-  .auth-fields .api-key__toggle-button.btn--style-ghost:hover:not(.btn--disabled),
-  .auth-fields .api-key__toggle-button.btn--style-ghost:active:not(.btn--disabled) {
-    background-color: transparent;
-  }
-
   .auth-fields__api-key > .btn.btn--style-secondary {
     align-self: flex-start;
   }

package/dist/views/Edit/index.css

@@ -1,18 +1,160 @@
 @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: 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--force-sidebar-wrap .document-fields__main {
+      overflow-y: visible;
+      overscroll-behavior: auto;
+      scrollbar-width: auto;
+      scrollbar-color: auto;
+    }
+
+    .document-fields__sidebar {
+      overscroll-behavior: contain;
+      scrollbar-width: thin;
+      scrollbar-color: var(--scrollbar-color) transparent;
+    }
+
+    .document-fields__sidebar-wrap {
+      --sidebar-wrap-top: 0px;
+      --sidebar-wrap-height: 100%;
+    }
+  }
+
+  .template-default__wrap:has(.collection-edit__main-wrapper--scroll-fields-only) {
+    height: 100dvh;
+    overflow: hidden;
+  }
+
   .collection-edit__main {
     width: 100%;
-    container-type: inline-size;
   }
 
   .collection-edit__main--popup-open {
     width: 100%;
   }
 
+  .collection-edit__main-wrapper--has-upload-panel {
+    .collection-edit__main {
+      flex: 1;
+    }
+    .file-manager {
+      flex: 2;
+      border-inline-start: var(--stroke-width-small) solid var(--color-border);
+    }
+
+    .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 (max-width: 1024px) {
+    .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__sidebar {
+        overscroll-behavior: auto;
+        scrollbar-width: auto;
+        scrollbar-color: auto;
+      }
+    }
+
+    .template-default__wrap:has(.collection-edit__main-wrapper--scroll-fields-only) {
+      height: auto;
+      overflow: visible;
+    }
+
+    .collection-edit__main-wrapper--has-upload-panel {
+      flex-direction: column-reverse;
+      gap: var(--spacer-5);
+
+      .file-manager {
+        order: 0;
+        flex: 1 0 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--is-live-previewing {
     width: 40%;
     position: relative;
@@ -29,11 +171,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,EAAc,uBAAuB,EAAE,MAAM,SAAS,CAAA;AAGlE,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,qBAixBzB"}

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,
@@ -446,6 +447,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 +535,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 +602,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,