payload 1.1.7 → 1.1.8

package/dist/admin/components/forms/useField/index.js

@@ -1,88 +1,26 @@
-import { useCallback, useEffect, useState, } from 'react';
+import { useCallback, useMemo } from 'react';
 import { useAuth } from '../../utilities/Auth';
-import { useFormProcessing, useFormSubmitted, useFormModified, useForm } from '../Form/context';
-import useDebounce from '../../../hooks/useDebounce';
+import { useFormProcessing, useFormSubmitted, useFormModified, useForm, useFormFields } from '../Form/context';
 import { useDocumentInfo } from '../../utilities/DocumentInfo';
 import { useOperation } from '../../utilities/OperationProvider';
+import useThrottledEffect from '../../../hooks/useThrottledEffect';
 const useField = (options) => {
-    const { path, validate, enableDebouncedValue, disableFormData = false, condition, } = options;
-    const formContext = useForm();
+    const { path, validate, disableFormData = false, condition, } = options;
     const submitted = useFormSubmitted();
     const processing = useFormProcessing();
     const modified = useFormModified();
     const { user } = useAuth();
     const { id } = useDocumentInfo();
     const operation = useOperation();
-    const { dispatchFields, getField, getData, getSiblingData, setModified, } = formContext || {};
-    // Get field by path
-    const field = getField(path);
+    const field = useFormFields(([fields]) => fields[path]);
+    const dispatchField = useFormFields(([_, dispatch]) => dispatch);
+    const { getData, getSiblingData, setModified } = useForm();
+    const value = field === null || field === void 0 ? void 0 : field.value;
     const initialValue = field === null || field === void 0 ? void 0 : field.initialValue;
-    const [internalInitialValue, setInternalInitialValue] = useState(() => field === null || field === void 0 ? void 0 : field.initialValue);
-    const [internalValue, setInternalValue] = useState(() => field === null || field === void 0 ? void 0 : field.value);
-    const [internallyValid, setInternallyValid] = useState(undefined);
-    // Debounce internal values to update form state only every 60ms
-    const debouncedValue = useDebounce(internalValue, 120);
-    // Validation is defined by two ways -
-    // 1. by field state
-    // 2. maintained locally to reflect instant validation state changes
-    let valid = true;
-    if (field && typeof field.valid === 'boolean') {
-        valid = field.valid;
-    }
-    if (typeof internallyValid === 'boolean') {
-        valid = internallyValid;
-    }
+    const valid = typeof (field === null || field === void 0 ? void 0 : field.valid) === 'boolean' ? field.valid : true;
     const showError = valid === false && submitted;
-    // Method to send update field values from field component(s)
-    // Should only be used internally
-    const sendField = useCallback(async (valueToSend) => {
-        const fieldToDispatch = {
-            path,
-            disableFormData,
-            initialValue,
-            validate,
-            condition,
-            value: valueToSend,
-            valid: false,
-            errorMessage: undefined,
-        };
-        const validateOptions = {
-            id,
-            user,
-            data: getData(),
-            siblingData: getSiblingData(path),
-            operation,
-        };
-        const validationResult = typeof validate === 'function' ? await validate(valueToSend, validateOptions) : true;
-        if (typeof validationResult === 'string') {
-            fieldToDispatch.errorMessage = validationResult;
-            fieldToDispatch.valid = false;
-            setInternallyValid(false);
-        }
-        else {
-            fieldToDispatch.valid = validationResult;
-            fieldToDispatch.errorMessage = undefined;
-            setInternallyValid(true);
-        }
-        if (typeof dispatchFields === 'function') {
-            dispatchFields(fieldToDispatch);
-        }
-    }, [
-        condition,
-        disableFormData,
-        dispatchFields,
-        getData,
-        getSiblingData,
-        id,
-        initialValue,
-        operation,
-        path,
-        user,
-        validate,
-    ]);
     // Method to return from `useField`, used to
-    // update internal field values from field component(s)
-    // as fast as they arrive. NOTE - this method is NOT debounced
+    // update field values from field component(s)
     const setValue = useCallback((e, disableModifyingForm = false) => {
         const val = (e && e.target) ? e.target.value : e;
         if (!modified && !disableModifyingForm) {
@@ -90,42 +28,78 @@ const useField = (options) => {
                 setModified(true);
             }
         }
-        setInternalValue(val);
+        dispatchField({
+            type: 'UPDATE',
+            path,
+            value: val,
+            disableFormData,
+        });
     }, [
         setModified,
         modified,
-    ]);
-    useEffect(() => {
-        if (internalInitialValue !== initialValue) {
-            setInternalValue(initialValue);
-            setInternalInitialValue(initialValue);
-        }
-        setInternallyValid(undefined);
-    }, [initialValue, internalInitialValue]);
-    // The only time that the FORM value should be updated
-    // is when the debounced value updates. So, when the debounced value updates,
-    // send it up to the form
-    const valueToSend = enableDebouncedValue ? debouncedValue : internalValue;
-    useEffect(() => {
-        if (((field === null || field === void 0 ? void 0 : field.value) !== valueToSend && valueToSend !== undefined) || disableFormData !== (field === null || field === void 0 ? void 0 : field.disableFormData)) {
-            sendField(valueToSend);
-        }
-    }, [
         path,
-        valueToSend,
-        sendField,
-        field,
+        dispatchField,
         disableFormData,
     ]);
-    return {
-        ...options,
+    // Store result from hook as ref
+    // to prevent unnecessary rerenders
+    const result = useMemo(() => ({
         showError,
         errorMessage: field === null || field === void 0 ? void 0 : field.errorMessage,
-        value: internalValue,
+        value,
         formSubmitted: submitted,
         formProcessing: processing,
         setValue,
         initialValue,
-    };
+    }), [field, processing, setValue, showError, submitted, value, initialValue]);
+    // Throttle the validate function
+    useThrottledEffect(() => {
+        const validateField = async () => {
+            const action = {
+                type: 'UPDATE',
+                path,
+                disableFormData,
+                validate,
+                condition,
+                value,
+                valid: false,
+                errorMessage: undefined,
+            };
+            const validateOptions = {
+                id,
+                user,
+                data: getData(),
+                siblingData: getSiblingData(path),
+                operation,
+            };
+            const validationResult = typeof validate === 'function' ? await validate(value, validateOptions) : true;
+            if (typeof validationResult === 'string') {
+                action.errorMessage = validationResult;
+                action.valid = false;
+            }
+            else {
+                action.valid = validationResult;
+                action.errorMessage = undefined;
+            }
+            if (action.valid !== valid && typeof dispatchField === 'function') {
+                dispatchField(action);
+            }
+        };
+        validateField();
+    }, 150, [
+        value,
+        condition,
+        disableFormData,
+        dispatchField,
+        getData,
+        getSiblingData,
+        id,
+        operation,
+        path,
+        user,
+        validate,
+        valid,
+    ]);
+    return result;
 };
 export default useField;

package/dist/admin/components/forms/useField/types.d.ts

@@ -2,9 +2,7 @@ import { Condition, Validate } from '../../../../fields/config/types';
 export declare type Options = {
     path: string;
     validate?: Validate;
-    enableDebouncedValue?: boolean;
     disableFormData?: boolean;
-    ignoreWhileFlattening?: boolean;
     condition?: Condition;
 };
 export declare type FieldType<T> = {

package/dist/admin/components/forms/withCondition/index.js

@@ -22,9 +22,14 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __setModuleDefault(result, mod);
     return result;
 };
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importStar(require("react"));
 const context_1 = require("../Form/context");
+const getSiblingData_1 = __importDefault(require("../Form/getSiblingData"));
+const reduceFieldsToValues_1 = __importDefault(require("../Form/reduceFieldsToValues"));
 const withCondition = (Field) => {
     const CheckForCondition = (props) => {
         const { admin: { condition, } = {}, } = props;
@@ -36,12 +41,12 @@ const withCondition = (Field) => {
     const WithCondition = (props) => {
         const { name, path: pathFromProps, admin: { condition, } = {}, } = props;
         const path = typeof pathFromProps === 'string' ? pathFromProps : name;
-        const { getData, getSiblingData, getField, dispatchFields } = (0, context_1.useWatchForm)();
-        const data = getData();
-        const siblingData = getSiblingData(path);
+        const [fields, dispatchFields] = (0, context_1.useAllFormFields)();
+        const data = (0, reduceFieldsToValues_1.default)(fields, true);
+        const siblingData = (0, getSiblingData_1.default)(fields, path);
         const hasCondition = Boolean(condition);
         const currentlyPassesCondition = hasCondition ? condition(data, siblingData) : true;
-        const field = getField(path);
+        const field = fields[path];
         const existingConditionPasses = field === null || field === void 0 ? void 0 : field.passesCondition;
         (0, react_1.useEffect)(() => {
             if (hasCondition) {
@@ -61,4 +66,4 @@ const withCondition = (Field) => {
     return CheckForCondition;
 };
 exports.default = withCondition;
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXguanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi9zcmMvYWRtaW4vY29tcG9uZW50cy9mb3Jtcy93aXRoQ29uZGl0aW9uL2luZGV4LnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiOzs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7O0FBQUEsK0NBQXlDO0FBRXpDLDZDQUErQztBQUUvQyxNQUFNLGFBQWEsR0FBRyxDQUFvQyxLQUE2QixFQUFlLEVBQUU7SUFDdEcsTUFBTSxpQkFBaUIsR0FBZ0IsQ0FBQyxLQUFLLEVBQUUsRUFBRTtRQUMvQyxNQUFNLEVBQ0osS0FBSyxFQUFFLEVBQ0wsU0FBUyxHQUNWLEdBQUcsRUFBRSxHQUNQLEdBQUcsS0FBMkIsQ0FBQztRQUVoQyxJQUFJLFNBQVMsRUFBRTtZQUNiLE9BQU8sOEJBQUMsYUFBYSxPQUFLLEtBQUssR0FBSSxDQUFDO1NBQ3JDO1FBRUQsT0FBTyw4QkFBQyxLQUFLLE9BQUssS0FBSyxHQUFJLENBQUM7SUFDOUIsQ0FBQyxDQUFDO0lBRUYsTUFBTSxhQUFhLEdBQWdCLENBQUMsS0FBSyxFQUFFLEVBQUU7UUFDM0MsTUFBTSxFQUNKLElBQUksRUFDSixJQUFJLEVBQUUsYUFBYSxFQUNuQixLQUFLLEVBQUUsRUFDTCxTQUFTLEdBQ1YsR0FBRyxFQUFFLEdBQ1AsR0FBRyxLQUVILENBQUM7UUFFRixNQUFNLElBQUksR0FBRyxPQUFPLGFBQWEsS0FBSyxRQUFRLENBQUMsQ0FBQyxDQUFDLGFBQWEsQ0FBQyxDQUFDLENBQUMsSUFBSSxDQUFDO1FBRXRFLE1BQU0sRUFBRSxPQUFPLEVBQUUsY0FBYyxFQUFFLFFBQVEsRUFBRSxjQUFjLEVBQUUsR0FBRyxJQUFBLHNCQUFZLEdBQUUsQ0FBQztRQUU3RSxNQUFNLElBQUksR0FBRyxPQUFPLEVBQUUsQ0FBQztRQUN2QixNQUFNLFdBQVcsR0FBRyxjQUFjLENBQUMsSUFBSSxDQUFDLENBQUM7UUFDekMsTUFBTSxZQUFZLEdBQUcsT0FBTyxDQUFDLFNBQVMsQ0FBQyxDQUFDO1FBQ3hDLE1BQU0sd0JBQXdCLEdBQUcsWUFBWSxDQUFDLENBQUMsQ0FBQyxTQUFTLENBQUMsSUFBSSxFQUFFLFdBQVcsQ0FBQyxDQUFDLENBQUMsQ0FBQyxJQUFJLENBQUM7UUFDcEYsTUFBTSxLQUFLLEdBQUcsUUFBUSxDQUFDLElBQUksQ0FBQyxDQUFDO1FBQzdCLE1BQU0sdUJBQXVCLEdBQUcsS0FBSyxhQUFMLEtBQUssdUJBQUwsS0FBSyxDQUFFLGVBQWUsQ0FBQztRQUV2RCxJQUFBLGlCQUFTLEVBQUMsR0FBRyxFQUFFO1lBQ2IsSUFBSSxZQUFZLEVBQUU7Z0JBQ2hCLElBQUksQ0FBQyx1QkFBdUIsSUFBSSx3QkFBd0IsRUFBRTtvQkFDeEQsY0FBYyxDQUFDLEVBQUUsSUFBSSxFQUFFLGtCQUFrQixFQUFFLElBQUksRUFBRSxNQUFNLEVBQUUsSUFBSSxFQUFFLENBQUMsQ0FBQztpQkFDbEU7Z0JBRUQsSUFBSSxDQUFDLHdCQUF3QixJQUFJLENBQUMsdUJBQXVCLElBQUksT0FBTyx1QkFBdUIsS0FBSyxXQUFXLENBQUMsRUFBRTtvQkFDNUcsY0FBYyxDQUFDLEVBQUUsSUFBSSxFQUFFLGtCQUFrQixFQUFFLElBQUksRUFBRSxNQUFNLEVBQUUsS0FBSyxFQUFFLENBQUMsQ0FBQztpQkFDbkU7YUFDRjtRQUNILENBQUMsRUFBRSxDQUFDLHdCQUF3QixFQUFFLHVCQUF1QixFQUFFLGNBQWMsRUFBRSxJQUFJLEVBQUUsWUFBWSxDQUFDLENBQUMsQ0FBQztRQUU1RixJQUFJLHdCQUF3QixFQUFFO1lBQzVCLE9BQU8sOEJBQUMsS0FBSyxPQUFLLEtBQUssR0FBSSxDQUFDO1NBQzdCO1FBRUQsT0FBTyxJQUFJLENBQUM7SUFDZCxDQUFDLENBQUM7SUFFRixPQUFPLGlCQUFpQixDQUFDO0FBQzNCLENBQUMsQ0FBQztBQUVGLGtCQUFlLGFBQWEsQ0FBQyJ9
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXguanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi9zcmMvYWRtaW4vY29tcG9uZW50cy9mb3Jtcy93aXRoQ29uZGl0aW9uL2luZGV4LnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiOzs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7O0FBQUEsK0NBQXlDO0FBRXpDLDZDQUFtRDtBQUNuRCw0RUFBb0Q7QUFDcEQsd0ZBQWdFO0FBRWhFLE1BQU0sYUFBYSxHQUFHLENBQW9DLEtBQTZCLEVBQWUsRUFBRTtJQUN0RyxNQUFNLGlCQUFpQixHQUFnQixDQUFDLEtBQUssRUFBRSxFQUFFO1FBQy9DLE1BQU0sRUFDSixLQUFLLEVBQUUsRUFDTCxTQUFTLEdBQ1YsR0FBRyxFQUFFLEdBQ1AsR0FBRyxLQUEyQixDQUFDO1FBRWhDLElBQUksU0FBUyxFQUFFO1lBQ2IsT0FBTyw4QkFBQyxhQUFhLE9BQUssS0FBSyxHQUFJLENBQUM7U0FDckM7UUFFRCxPQUFPLDhCQUFDLEtBQUssT0FBSyxLQUFLLEdBQUksQ0FBQztJQUM5QixDQUFDLENBQUM7SUFFRixNQUFNLGFBQWEsR0FBZ0IsQ0FBQyxLQUFLLEVBQUUsRUFBRTtRQUMzQyxNQUFNLEVBQ0osSUFBSSxFQUNKLElBQUksRUFBRSxhQUFhLEVBQ25CLEtBQUssRUFBRSxFQUNMLFNBQVMsR0FDVixHQUFHLEVBQUUsR0FDUCxHQUFHLEtBRUgsQ0FBQztRQUVGLE1BQU0sSUFBSSxHQUFHLE9BQU8sYUFBYSxLQUFLLFFBQVEsQ0FBQyxDQUFDLENBQUMsYUFBYSxDQUFDLENBQUMsQ0FBQyxJQUFJLENBQUM7UUFFdEUsTUFBTSxDQUFDLE1BQU0sRUFBRSxjQUFjLENBQUMsR0FBRyxJQUFBLDBCQUFnQixHQUFFLENBQUM7UUFFcEQsTUFBTSxJQUFJLEdBQUcsSUFBQSw4QkFBb0IsRUFBQyxNQUFNLEVBQUUsSUFBSSxDQUFDLENBQUM7UUFDaEQsTUFBTSxXQUFXLEdBQUcsSUFBQSx3QkFBYyxFQUFDLE1BQU0sRUFBRSxJQUFJLENBQUMsQ0FBQztRQUNqRCxNQUFNLFlBQVksR0FBRyxPQUFPLENBQUMsU0FBUyxDQUFDLENBQUM7UUFDeEMsTUFBTSx3QkFBd0IsR0FBRyxZQUFZLENBQUMsQ0FBQyxDQUFDLFNBQVMsQ0FBQyxJQUFJLEVBQUUsV0FBVyxDQUFDLENBQUMsQ0FBQyxDQUFDLElBQUksQ0FBQztRQUNwRixNQUFNLEtBQUssR0FBRyxNQUFNLENBQUMsSUFBSSxDQUFDLENBQUM7UUFDM0IsTUFBTSx1QkFBdUIsR0FBRyxLQUFLLGFBQUwsS0FBSyx1QkFBTCxLQUFLLENBQUUsZUFBZSxDQUFDO1FBRXZELElBQUEsaUJBQVMsRUFBQyxHQUFHLEVBQUU7WUFDYixJQUFJLFlBQVksRUFBRTtnQkFDaEIsSUFBSSxDQUFDLHVCQUF1QixJQUFJLHdCQUF3QixFQUFFO29CQUN4RCxjQUFjLENBQUMsRUFBRSxJQUFJLEVBQUUsa0JBQWtCLEVBQUUsSUFBSSxFQUFFLE1BQU0sRUFBRSxJQUFJLEVBQUUsQ0FBQyxDQUFDO2lCQUNsRTtnQkFFRCxJQUFJLENBQUMsd0JBQXdCLElBQUksQ0FBQyx1QkFBdUIsSUFBSSxPQUFPLHVCQUF1QixLQUFLLFdBQVcsQ0FBQyxFQUFFO29CQUM1RyxjQUFjLENBQUMsRUFBRSxJQUFJLEVBQUUsa0JBQWtCLEVBQUUsSUFBSSxFQUFFLE1BQU0sRUFBRSxLQUFLLEVBQUUsQ0FBQyxDQUFDO2lCQUNuRTthQUNGO1FBQ0gsQ0FBQyxFQUFFLENBQUMsd0JBQXdCLEVBQUUsdUJBQXVCLEVBQUUsY0FBYyxFQUFFLElBQUksRUFBRSxZQUFZLENBQUMsQ0FBQyxDQUFDO1FBRTVGLElBQUksd0JBQXdCLEVBQUU7WUFDNUIsT0FBTyw4QkFBQyxLQUFLLE9BQUssS0FBSyxHQUFJLENBQUM7U0FDN0I7UUFFRCxPQUFPLElBQUksQ0FBQztJQUNkLENBQUMsQ0FBQztJQUVGLE9BQU8saUJBQWlCLENBQUM7QUFDM0IsQ0FBQyxDQUFDO0FBRUYsa0JBQWUsYUFBYSxDQUFDIn0=

package/dist/admin/components/modals/LeaveWithoutSaving/index.scss

@@ -3,7 +3,7 @@
 .leave-without-saving {
   @include blur-bg;
   position: fixed;
-  z-index: var(--z-modal);
+  z-index: calc(var(--z-modal) + 1);
   top: 0;
   right: 0;
   bottom: 0;
@@ -17,4 +17,4 @@
   .btn {
     margin-right: $baseline;
   }
-}
+}

package/dist/admin/components/templates/Default/index.scss

@@ -20,4 +20,4 @@
       padding: 0 0 $baseline;
     }
   }
-}
+}

package/dist/admin/components/utilities/EditDepth/index.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+export declare const EditDepthContext: import("react").Context<number>;
+export declare const useEditDepth: () => number;

package/dist/admin/components/utilities/EditDepth/index.js

@@ -0,0 +1,3 @@
+import { useContext, createContext } from 'react';
+export const EditDepthContext = createContext(0);
+export const useEditDepth = () => useContext(EditDepthContext);

package/dist/admin/components/views/collections/Edit/Auth/APIKey.js

@@ -4,7 +4,7 @@ import useField from '../../../../forms/useField';
 import Label from '../../../../forms/Label';
 import CopyToClipboard from '../../../../elements/CopyToClipboard';
 import { text } from '../../../../../../fields/validations';
-import { useWatchForm } from '../../../../forms/Form/context';
+import { useFormFields } from '../../../../forms/Form/context';
 import GenerateConfirmation from '../../../../elements/GenerateConfirmation';
 const path = 'apiKey';
 const baseClass = 'api-key';
@@ -12,8 +12,7 @@ const validate = (val) => text(val, { minLength: 24, maxLength: 48, data: {}, si
 const APIKey = () => {
     const [initialAPIKey, setInitialAPIKey] = useState(null);
     const [highlightedField, setHighlightedField] = useState(false);
-    const { getField } = useWatchForm();
-    const apiKey = getField(path);
+    const apiKey = useFormFields(([fields]) => fields[path]);
     const apiKeyValue = apiKey === null || apiKey === void 0 ? void 0 : apiKey.value;
     const APIKeyLabel = useMemo(() => (React.createElement("div", { className: `${baseClass}__label` },
         React.createElement("span", null, "API Key"),

package/dist/admin/components/views/collections/Edit/Auth/index.js

@@ -6,16 +6,16 @@ import Password from '../../../../forms/field-types/Password';
 import Checkbox from '../../../../forms/field-types/Checkbox';
 import Button from '../../../../elements/Button';
 import ConfirmPassword from '../../../../forms/field-types/ConfirmPassword';
-import { useWatchForm, useFormModified } from '../../../../forms/Form/context';
+import { useFormModified, useFormFields } from '../../../../forms/Form/context';
 import APIKey from './APIKey';
 import './index.scss';
 const baseClass = 'auth-fields';
 const Auth = (props) => {
     const { useAPIKey, requirePassword, verify, collection: { slug }, collection, email, operation } = props;
     const [changingPassword, setChangingPassword] = useState(requirePassword);
-    const { getField, dispatchFields } = useWatchForm();
+    const enableAPIKey = useFormFields(([fields]) => fields.enableAPIKey);
+    const dispatchFields = useFormFields((reducer) => reducer[1]);
     const modified = useFormModified();
-    const enableAPIKey = getField('enableAPIKey');
     const { serverURL, routes: { api, }, } = useConfig();
     const handleChangePassword = useCallback(async (state) => {
         if (!state) {

package/dist/admin/components/views/collections/Edit/Default.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Link, useRouteMatch } from 'react-router-dom';
+import { Link } from 'react-router-dom';
 import format from 'date-fns/format';
 import { useConfig } from '../../../utilities/Config';
 import Eyebrow from '../../../elements/Eyebrow';
@@ -29,10 +29,9 @@ import './index.scss';
 const baseClass = 'collection-edit';
 const DefaultEditView = (props) => {
     var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t;
-    const { params: { id } = {} } = useRouteMatch();
     const { admin: { dateFormat }, routes: { admin } } = useConfig();
     const { publishedDoc } = useDocumentInfo();
-    const { collection, isEditing, data, onSave, permissions, isLoading, initialState, apiURL, action, hasSavePermission, } = props;
+    const { collection, isEditing, data, onSave, permissions, isLoading, initialState, apiURL, action, hasSavePermission, disableEyebrow, disableActions, disableLeaveWithoutSaving, customHeader, id, } = props;
     const { slug, fields, admin: { useAsTitle, disableDuplicate, preview, hideAPIURL, }, versions, timestamps, auth, upload, } = collection;
     const classes = [
         baseClass,
@@ -45,26 +44,27 @@ const DefaultEditView = (props) => {
             React.createElement(Form, { className: `${baseClass}__form`, method: id ? 'patch' : 'post', action: action, onSuccess: onSave, disabled: !hasSavePermission, initialState: initialState },
                 React.createElement("div", { className: `${baseClass}__main` },
                     React.createElement(Meta, { title: `${isEditing ? 'Editing' : 'Creating'} - ${collection.labels.singular}`, description: `${isEditing ? 'Editing' : 'Creating'} - ${collection.labels.singular}`, keywords: `${collection.labels.singular}, Payload, CMS` }),
-                    React.createElement(Eyebrow, null),
-                    !(((_a = collection.versions) === null || _a === void 0 ? void 0 : _a.drafts) && ((_c = (_b = collection.versions) === null || _b === void 0 ? void 0 : _b.drafts) === null || _c === void 0 ? void 0 : _c.autosave)) && (React.createElement(LeaveWithoutSaving, null)),
+                    !disableEyebrow && (React.createElement(Eyebrow, null)),
+                    (!(((_a = collection.versions) === null || _a === void 0 ? void 0 : _a.drafts) && ((_c = (_b = collection.versions) === null || _b === void 0 ? void 0 : _b.drafts) === null || _c === void 0 ? void 0 : _c.autosave)) && !disableLeaveWithoutSaving) && (React.createElement(LeaveWithoutSaving, null)),
                     React.createElement(Gutter, { className: `${baseClass}__edit` },
                         React.createElement("header", { className: `${baseClass}__header` },
-                            React.createElement("h1", null,
-                                React.createElement(RenderTitle, { ...{ data, useAsTitle, fallback: '[Untitled]' } }))),
+                            customHeader && customHeader,
+                            !customHeader && (React.createElement("h1", null,
+                                React.createElement(RenderTitle, { ...{ data, useAsTitle, fallback: '[Untitled]' } })))),
                         auth && (React.createElement(Auth, { useAPIKey: auth.useAPIKey, requirePassword: !isEditing, verify: auth.verify, collection: collection, email: data === null || data === void 0 ? void 0 : data.email, operation: operation })),
                         upload && (React.createElement(Upload, { data: data, collection: collection })),
                         React.createElement(RenderFields, { readOnly: !hasSavePermission, permissions: permissions.fields, filter: (field) => { var _a, _b; return (!((_a = field === null || field === void 0 ? void 0 : field.admin) === null || _a === void 0 ? void 0 : _a.position) || (((_b = field === null || field === void 0 ? void 0 : field.admin) === null || _b === void 0 ? void 0 : _b.position) !== 'sidebar')); }, fieldTypes: fieldTypes, fieldSchema: fields }))),
                 React.createElement("div", { className: `${baseClass}__sidebar-wrap` },
                     React.createElement("div", { className: `${baseClass}__sidebar` },
                         React.createElement("div", { className: `${baseClass}__sidebar-sticky-wrap` },
-                            React.createElement("ul", { className: `${baseClass}__collection-actions` },
+                            !disableActions && (React.createElement("ul", { className: `${baseClass}__collection-actions` },
                                 ((_d = permissions === null || permissions === void 0 ? void 0 : permissions.create) === null || _d === void 0 ? void 0 : _d.permission) && (React.createElement(React.Fragment, null,
                                     React.createElement("li", null,
                                         React.createElement(Link, { id: "action-create", to: `${admin}/collections/${slug}/create` }, "Create New")),
                                     !disableDuplicate && isEditing && (React.createElement("li", null,
                                         React.createElement(DuplicateDocument, { collection: collection, id: id, slug: slug }))))),
                                 ((_e = permissions === null || permissions === void 0 ? void 0 : permissions.delete) === null || _e === void 0 ? void 0 : _e.permission) && (React.createElement("li", null,
-                                    React.createElement(DeleteDocument, { collection: collection, id: id, buttonId: "action-delete" })))),
+                                    React.createElement(DeleteDocument, { collection: collection, id: id, buttonId: "action-delete" }))))),
                             React.createElement("div", { className: `${baseClass}__document-actions${((((_f = collection.versions) === null || _f === void 0 ? void 0 : _f.drafts) && !((_h = (_g = collection.versions) === null || _g === void 0 ? void 0 : _g.drafts) === null || _h === void 0 ? void 0 : _h.autosave)) || (isEditing && preview)) ? ` ${baseClass}__document-actions--has-2` : ''}` },
                                 (preview && (!((_j = collection.versions) === null || _j === void 0 ? void 0 : _j.drafts) || ((_l = (_k = collection.versions) === null || _k === void 0 ? void 0 : _k.drafts) === null || _l === void 0 ? void 0 : _l.autosave))) && (React.createElement(PreviewButton, { generatePreviewURL: preview, data: data })),
                                 hasSavePermission && (React.createElement(React.Fragment, null,

package/dist/admin/components/views/collections/Edit/index.js

@@ -11,6 +11,7 @@ import buildStateFromSchema from '../../../forms/Form/buildStateFromSchema';
 import { useLocale } from '../../../utilities/Locale';
 import { useDocumentInfo } from '../../../utilities/DocumentInfo';
 import { usePreferences } from '../../../utilities/Preferences';
+import { EditDepthContext } from '../../../utilities/EditDepth';
 const EditView = (props) => {
     var _a, _b, _c;
     const { collection: incomingCollection, isEditing } = props;
@@ -95,17 +96,19 @@ const EditView = (props) => {
     const apiURL = `${serverURL}${api}/${slug}/${id}${collection.versions.drafts ? '?draft=true' : ''}`;
     const action = `${serverURL}${api}/${slug}${isEditing ? `/${id}` : ''}?locale=${locale}&depth=0&fallback-locale=null`;
     const hasSavePermission = (isEditing && ((_b = collectionPermissions === null || collectionPermissions === void 0 ? void 0 : collectionPermissions.update) === null || _b === void 0 ? void 0 : _b.permission)) || (!isEditing && ((_c = collectionPermissions === null || collectionPermissions === void 0 ? void 0 : collectionPermissions.create) === null || _c === void 0 ? void 0 : _c.permission));
-    return (React.createElement(RenderCustomComponent, { DefaultComponent: DefaultEdit, CustomComponent: CustomEdit, componentProps: {
-            isLoading: !initialState,
-            data: dataToRender,
-            collection,
-            permissions: collectionPermissions,
-            isEditing,
-            onSave,
-            initialState,
-            hasSavePermission,
-            apiURL,
-            action,
-        } }));
+    return (React.createElement(EditDepthContext.Provider, { value: 1 },
+        React.createElement(RenderCustomComponent, { DefaultComponent: DefaultEdit, CustomComponent: CustomEdit, componentProps: {
+                id,
+                isLoading: !initialState,
+                data: dataToRender,
+                collection,
+                permissions: collectionPermissions,
+                isEditing,
+                onSave,
+                initialState,
+                hasSavePermission,
+                apiURL,
+                action,
+            } })));
 };
 export default EditView;

package/dist/admin/components/views/collections/Edit/types.d.ts

@@ -1,3 +1,4 @@
+import React from 'react';
 import { SanitizedCollectionConfig } from '../../../../../collections/config/types';
 import { CollectionPermission } from '../../../../../auth/types';
 import { Document } from '../../../../../types';
@@ -9,6 +10,7 @@ export declare type IndexProps = {
 export declare type Props = IndexProps & {
     data: Document;
     onSave?: () => void;
+    id?: string;
     permissions: CollectionPermission;
     isLoading: boolean;
     initialState?: Fields;
@@ -16,4 +18,8 @@ export declare type Props = IndexProps & {
     action: string;
     hasSavePermission: boolean;
     autosaveEnabled: boolean;
+    disableEyebrow?: boolean;
+    disableActions?: boolean;
+    disableLeaveWithoutSaving?: boolean;
+    customHeader?: React.ReactNode;
 };

package/dist/admin/hooks/useTitle.js

@@ -1,7 +1,6 @@
-import { useWatchForm } from '../components/forms/Form/context';
+import { useFormFields } from '../components/forms/Form/context';
 const useTitle = (useAsTitle) => {
-    const { getField } = useWatchForm();
-    const titleField = getField(useAsTitle);
+    const titleField = useFormFields(([fields]) => fields[useAsTitle]);
     return titleField === null || titleField === void 0 ? void 0 : titleField.value;
 };
 export default useTitle;

package/dist/admin/index.js

@@ -28,7 +28,7 @@ const Index = () => (React.createElement(React.Fragment, null,
             } },
             React.createElement(ScrollInfoProvider, null,
                 React.createElement(Router, null,
-                    React.createElement(ModalProvider, { classPrefix: "payload", zIndex: 50, transTime: 0 },
+                    React.createElement(ModalProvider, { classPrefix: "payload", zIndex: 'var(--z-modal)', transTime: 0 },
                         React.createElement(AuthProvider, null,
                             React.createElement(PreferencesProvider, null,
                                 React.createElement(ThemeProvider, null,

package/dist/admin/scss/app.scss

@@ -9,10 +9,13 @@
   --breakpoint-m-width : #{$breakpoint-m-width};
   --breakpoint-l-width : #{$breakpoint-l-width};
   --scrollbar-width: 17px;
+  --nav-width: #{base(9)};
 
   --theme-bg: var(--theme-elevation-0);
   --theme-input-bg: var(--theme-elevation-0);
   --theme-text: var(--theme-elevation-800);
+  --theme-baseline: #{$baseline-px};
+  --theme-baseline-body-size: #{$baseline-body-size};
   --font-body: 'Suisse Intl', system-ui;
   --font-mono: monospace;
   --font-serif: 'Merriweather', serif;
@@ -26,10 +29,12 @@
 
   @include large-break {
     --gutter-h: #{base(3)};
+    --nav-width: #{base(8)};
   }
 
   @include mid-break {
     --gutter-h: #{base(2)};
+    --nav-width: 100%;
   }
 
   @include small-break {
@@ -172,4 +177,4 @@ dialog {
   z-index: var(--z-modal);
 }
 
-@import '~payload-user-css';
+@import '~payload-user-css';

package/docs/admin/components.mdx

@@ -161,51 +161,9 @@ const CustomTextField: React.FC<Props> = ({ path }) => {
 }
 ```
 
-### Getting other field values from the form
-
-There are times when a custom field component needs to have access to data from other fields. This can be done using `getDataByPath` from `useWatchForm` as follows:
-
-```tsx
-import { useWatchForm } from 'payload/components/forms';
-
-const DisplayFee: React.FC = () => {
-  const { getDataByPath } = useWatchForm();
-
-  const amount = getDataByPath('amount');
-  const feePercentage = getDataByPath('feePercentage');
-
-  if (amount && feePercentage) {
-    return (
-      <span>The fee is ${(amount * feePercentage) / 100}</span>
-    );
-  }
-};
-```
-
-### Getting the document ID
-
-The document ID can be very useful for certain custom components. You can get the `id` from the `useDocumentInfo` hook. Here is an example of a `UI` field using `id` to link to related collections:
-
-```tsx
-import { useDocumentInfo } from 'payload/components/utilities';
-
-const LinkFromCategoryToPosts: React.FC = () => {
-  // highlight-start
-  const { id } = useDocumentInfo();
-  // highlight-end
-
-  // id will be undefined on the create form
-  if (!id) {
-    return null;
-  }
-
-  return (
-    <a href={`/admin/collections/posts?where[or][0][and][0][category][in][0]=[${id}]`} >
-      View posts
-    </a>
-  )
-};
-```
+<Banner type="success">
+  For more information regarding the hooks that are available to you while you build custom components, including the <strong>useField</strong> hook, <a href="/docs/admin/hooks" style={{color: 'black'}}>click here</a>.
+</Banner>
 
 ## Custom routes
 

package/docs/admin/customizing-css.mdx

@@ -1,7 +1,7 @@
 ---
 title: Customizing CSS & SCSS
 label: Customizing CSS
-order: 30
+order: 40
 desc: Customize your Payload admin panel further by adding your own CSS or SCSS style sheet to the configuration, powerful theme and design options are waiting for you.
 keywords: admin, css, scss, documentation, Content Management System, cms, headless, javascript, node, react, express
 ---