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

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,
@@ -71,7 +72,7 @@ export function DefaultEditView({
     disableLeaveWithoutSaving,
     docPermissions,
     documentIsLocked,
-    documentLockState,
+    documentLockState: documentLockStateRef,
     getDocPermissions,
     getDocPreferences,
     globalSlug,
@@ -148,7 +149,7 @@ export function DefaultEditView({
   const {
     isLivePreviewEnabled,
     isLivePreviewing,
-    previewWindowType,
+    isPopupOpen,
     setURL: setLivePreviewURL,
     typeofLivePreviewURL,
     url: livePreviewURL
@@ -175,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(() => {
@@ -193,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
         };
@@ -213,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);
@@ -224,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
@@ -241,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,
@@ -287,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();
     }
@@ -378,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;
     }
@@ -393,6 +405,7 @@ export function DefaultEditView({
       globalSlug,
       operation,
       originalUpdatedAt: checkForStaleData ? originalUpdatedAtRef.current : undefined,
+      readOnly: isTrashed || isReadOnlyForIncomingUser,
       renderAllFields: false,
       returnLockStatus: isLockingEnabled,
       schemaPath: schemaPathSegments.join('.'),
@@ -419,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 () => {
@@ -444,10 +457,77 @@ 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,
+    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,
+        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-hooks/hooks
+    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 +547,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,
@@ -486,7 +574,7 @@ export function DefaultEditView({
             id,
             clearRouteCache,
             collectionSlug,
-            documentLockStateRef: documentLockState,
+            documentLockStateRef,
             globalSlug,
             isLockingEnabled,
             isWithinDoc: false,
@@ -511,6 +599,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 +614,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,