@payloadcms/ui 4.0.0-internal.21664f3 → 4.0.0-internal.22d1431

package/dist/views/Edit/index.css

@@ -12,35 +12,32 @@
   }
 
   .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;
+    height: auto;
+    overflow: visible;
 
     .collection-edit__main {
-      min-height: 0;
-      overflow: hidden;
+      min-height: initial;
+      overflow: visible;
     }
 
     .document-fields {
-      height: 100%;
-      min-height: 0;
+      height: auto;
+      min-height: initial;
     }
 
     .document-fields--force-sidebar-wrap {
-      overflow-y: auto;
-      overscroll-behavior: contain;
-      scrollbar-width: thin;
-      scrollbar-color: var(--scrollbar-color) transparent;
+      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: 0;
-      overflow-y: auto;
-      overscroll-behavior: contain;
-      scrollbar-width: thin;
-      scrollbar-color: var(--scrollbar-color) transparent;
+      min-height: initial;
+      overflow-y: visible;
+      overscroll-behavior: auto;
+      scrollbar-width: auto;
+      scrollbar-color: auto;
     }
 
     .document-fields--force-sidebar-wrap .document-fields__main {
@@ -51,9 +48,9 @@
     }
 
     .document-fields__sidebar {
-      overscroll-behavior: contain;
-      scrollbar-width: thin;
-      scrollbar-color: var(--scrollbar-color) transparent;
+      overscroll-behavior: auto;
+      scrollbar-width: auto;
+      scrollbar-color: auto;
     }
 
     .document-fields__sidebar-wrap {
@@ -63,25 +60,61 @@
   }
 
   .template-default__wrap:has(.collection-edit__main-wrapper--scroll-fields-only) {
-    height: 100dvh;
-    overflow: hidden;
+    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 {
-      flex: 2;
-      border-inline-start: var(--stroke-width-small) solid var(--color-border);
+      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)) {
@@ -95,61 +128,62 @@
 
   /* 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) {
+  @container edit-main (min-width: 1024px) {
     .collection-edit__main-wrapper--scroll-fields-only {
-      height: auto;
-      overflow: visible;
+      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: initial;
-        overflow: visible;
+        min-height: 0;
+        overflow: hidden;
       }
 
       .document-fields {
-        height: auto;
-        min-height: initial;
+        height: 100%;
+        min-height: 0;
       }
 
       .document-fields--force-sidebar-wrap {
-        overflow-y: visible;
-        overscroll-behavior: auto;
-        scrollbar-width: auto;
-        scrollbar-color: auto;
+        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: initial;
-        overflow-y: visible;
-        overscroll-behavior: auto;
-        scrollbar-width: auto;
-        scrollbar-color: auto;
+        min-height: 0;
+        overflow-y: auto;
+        overscroll-behavior: contain;
+        scrollbar-width: thin;
+        scrollbar-color: var(--scrollbar-color) transparent;
       }
 
       .document-fields__sidebar {
-        overscroll-behavior: auto;
-        scrollbar-width: auto;
-        scrollbar-color: auto;
+        overscroll-behavior: contain;
+        scrollbar-width: thin;
+        scrollbar-color: var(--scrollbar-color) transparent;
       }
     }
 
     .template-default__wrap:has(.collection-edit__main-wrapper--scroll-fields-only) {
-      height: auto;
-      overflow: visible;
+      height: 100dvh;
+      overflow: hidden;
     }
 
     .collection-edit__main-wrapper--has-upload-panel {
-      flex-direction: column-reverse;
-      gap: var(--spacer-5);
+      flex-direction: row;
+      gap: 0;
 
       .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;
+        flex: 2;
+        border-inline-start: var(--stroke-width-small) solid var(--color-border);
       }
 
       .document-fields {
-        flex: 0 0 auto;
+        flex: initial;
         width: 100%;
       }
     }
@@ -175,6 +209,7 @@
     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;

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,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,qBAixBzB"}
+{"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,qBAmyBzB"}

package/dist/views/Edit/index.js

@@ -72,7 +72,7 @@ export function DefaultEditView({
     disableLeaveWithoutSaving,
     docPermissions,
     documentIsLocked,
-    documentLockState,
+    documentLockState: documentLockStateRef,
     getDocPermissions,
     getDocPreferences,
     globalSlug,
@@ -176,13 +176,24 @@ export function DefaultEditView({
   const [isReadOnlyForIncomingUser, setIsReadOnlyForIncomingUser] = useState(false);
   const [showTakeOverModal, setShowTakeOverModal] = useState(false);
   const [showStaleDataModal, setShowStaleDataModal] = useState(false);
-  const [editSessionStartTime, setEditSessionStartTime] = useState(Date.now());
+  const [editSessionStartTime, setEditSessionStartTime] = useState(() => Date.now());
   const hasCheckedForStaleDataRef = useRef(false);
   const originalUpdatedAtRef = useRef(data?.updatedAt);
   const saveCounterRef = useRef(0);
   const isSavingRef = useRef(false);
   const lockExpiryTime = lastUpdateTime + lockDurationInMilliseconds;
-  const isLockExpired = Date.now() > lockExpiryTime;
+  // Render can't read the current time, so check for expiry when the lock changes and expires
+  const [isLockExpired, setIsLockExpired] = useState(() => Date.now() > lockExpiryTime);
+  useEffect(() => {
+    const msUntilExpiry = lockExpiryTime - Date.now();
+    setIsLockExpired(msUntilExpiry < 0);
+    // Start a timer that marks the lock as expired at the moment it expires, which
+    // hides the "document locked" modal
+    if (msUntilExpiry >= 0 && msUntilExpiry <= 2_147_483_647) {
+      const timeout = setTimeout(() => setIsLockExpired(true), msUntilExpiry);
+      return () => clearTimeout(timeout);
+    }
+  }, [lockExpiryTime]);
   const preventLeaveWithoutSaving = !isReadOnlyForIncomingUser && (typeof disableLeaveWithoutSaving !== 'undefined' ? !disableLeaveWithoutSaving : !autosaveEnabled);
   const schemaPathSegments = useMemo(() => [entitySlug], [entitySlug]);
   const [validateBeforeSubmit, setValidateBeforeSubmit] = useState(() => {
@@ -194,16 +205,16 @@ export function DefaultEditView({
   const nextHrefRef = React.useRef(null);
   const handleDocumentLocking = useCallback(lockedState => {
     setDocumentIsLocked(true);
-    const previousOwnerID = typeof documentLockState.current?.user === 'object' ? documentLockState.current?.user?.id : documentLockState.current?.user;
+    const previousOwnerID = typeof documentLockStateRef.current?.user === 'object' ? documentLockStateRef.current?.user?.id : documentLockStateRef.current?.user;
     if (lockedState && lockedState.user) {
       const lockedUserID = typeof lockedState.user === 'string' || typeof lockedState.user === 'number' ? lockedState.user : lockedState.user.id;
-      if (!documentLockState.current || lockedUserID !== previousOwnerID) {
+      if (!documentLockStateRef.current || lockedUserID !== previousOwnerID) {
         if (previousOwnerID === user.id && lockedUserID !== user.id) {
           setShowTakeOverModal(true);
-          documentLockState.current.hasShownLockedModal = true;
+          documentLockStateRef.current.hasShownLockedModal = true;
         }
-        documentLockState.current = {
-          hasShownLockedModal: documentLockState.current?.hasShownLockedModal || false,
+        documentLockStateRef.current = {
+          hasShownLockedModal: documentLockStateRef.current?.hasShownLockedModal || false,
           isLocked: true,
           user: lockedState.user
         };
@@ -214,7 +225,7 @@ export function DefaultEditView({
         setLastUpdateTime(new Date(lockedState.lastEditedAt).getTime());
       }
     }
-  }, [documentLockState, setCurrentEditor, setDocumentIsLocked, setLastUpdateTime, user?.id]);
+  }, [documentLockStateRef, setCurrentEditor, setDocumentIsLocked, setLastUpdateTime, user?.id]);
   const handleStaleDataReload = useCallback(() => {
     // Reset modal state so it can appear again if needed
     setShowStaleDataModal(false);
@@ -225,7 +236,7 @@ export function DefaultEditView({
     nextHrefRef.current = nextHref;
   }, []);
   const handleLeaveConfirm = useCallback(async () => {
-    const lockUser = documentLockState.current?.user;
+    const lockUser = documentLockStateRef.current?.user;
     const isLockOwnedByCurrentUser = typeof lockUser === 'object' ? lockUser?.id === user?.id : lockUser === user?.id;
     if (isLockingEnabled && documentIsLocked && (id || globalSlug)) {
       // Check where user is trying to go
@@ -242,7 +253,7 @@ export function DefaultEditView({
         }
       }
     }
-  }, [collectionSlug, documentIsLocked, documentLockState, globalSlug, id, isLockingEnabled, setCurrentEditor, setDocumentIsLocked, unlockDocument, user?.id]);
+  }, [collectionSlug, documentIsLocked, documentLockStateRef, globalSlug, id, isLockingEnabled, setCurrentEditor, setDocumentIsLocked, unlockDocument, user?.id]);
   const onSave = useCallback(async (json, ctx) => {
     const {
       context,
@@ -288,7 +299,7 @@ export function DefaultEditView({
         adminRoute,
         path: `/collections/${collectionSlug}/${document?.id}${locale ? `?locale=${locale}` : ''}`
       });
-      startRouteTransition(() => router.push(redirectRoute));
+      void startRouteTransition(() => router.push(redirectRoute));
     } else {
       resetUploadEdits();
     }
@@ -379,7 +390,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;
     }
@@ -394,6 +405,7 @@ export function DefaultEditView({
       globalSlug,
       operation,
       originalUpdatedAt: checkForStaleData ? originalUpdatedAtRef.current : undefined,
+      readOnly: isTrashed || isReadOnlyForIncomingUser,
       renderAllFields: false,
       returnLockStatus: isLockingEnabled,
       schemaPath: schemaPathSegments.join('.'),
@@ -420,7 +432,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 () => {
@@ -445,7 +457,7 @@ 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 shouldShowDocumentLockedModal = documentIsLocked && currentEditor && (typeof currentEditor === 'object' ? currentEditor.id !== user?.id : currentEditor !== user?.id) && !isReadOnlyForIncomingUser && !showTakeOverModal && !documentLockStateRef.current?.hasShownLockedModal && !isLockExpired;
   const isFolderCollection = Boolean(collectionConfig?.hierarchy && typeof collectionConfig.hierarchy === 'object' && collectionConfig.hierarchy.allowHasMany === false);
   const documentControlsProps = {
     id,
@@ -480,7 +492,7 @@ export function DefaultEditView({
         id,
         clearRouteCache,
         collectionSlug,
-        documentLockStateRef: documentLockState,
+        documentLockStateRef,
         globalSlug,
         isLockingEnabled,
         isWithinDoc: true,
@@ -507,7 +519,7 @@ export function DefaultEditView({
     readOnly: !hasSavePermission,
     requirePassword: !id,
     setValidateBeforeSubmit: setValidateBeforeSubmit,
-    // eslint-disable-next-line react-compiler/react-compiler
+    // eslint-disable-next-line react-hooks/hooks
     useAPIKey: auth.useAPIKey,
     username: data?.username,
     verify: auth.verify
@@ -515,7 +527,7 @@ export function DefaultEditView({
   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(' '),
+    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, {
@@ -562,7 +574,7 @@ export function DefaultEditView({
             id,
             clearRouteCache,
             collectionSlug,
-            documentLockStateRef: documentLockState,
+            documentLockStateRef,
             globalSlug,
             isLockingEnabled,
             isWithinDoc: false,