payload 1.1.6 → 1.1.8

package/components/forms.ts

@@ -1,12 +1,21 @@
 export {
   useForm,
+  /**
+   * @deprecated useWatchForm is no longer preferred. If you need all form fields, prefer `useAllFormFields`.
+   */
   useWatchForm,
+  useFormFields,
+  useAllFormFields,
   useFormSubmitted,
   useFormProcessing,
   useFormModified,
 } from '../dist/admin/components/forms/Form/context';
 
 export { default as useField } from '../dist/admin/components/forms/useField';
+
+/**
+ * @deprecated This method is now called useField. The useFieldType alias will be removed in an upcoming version.
+ */
 export { default as useFieldType } from '../dist/admin/components/forms/useField';
 
 export { default as Form } from '../dist/admin/components/forms/Form';
@@ -24,5 +33,6 @@ export { default as Submit } from '../dist/admin/components/forms/Submit';
 export { default as Label } from '../dist/admin/components/forms/Label';
 
 export { default as reduceFieldsToValues } from '../dist/admin/components/forms/Form/reduceFieldsToValues';
+export { default as getSiblingData } from '../dist/admin/components/forms/Form/getSiblingData';
 
 export { default as withCondition } from '../dist/admin/components/forms/withCondition';

package/dist/admin/api.js

@@ -2,13 +2,14 @@ import qs from 'qs';
 export const requests = {
     get: (url, params = {}) => {
         const query = qs.stringify(params, { addQueryPrefix: true });
-        return fetch(`${url}${query}`);
+        return fetch(`${url}${query}`, { credentials: 'include' });
     },
     post: (url, options = { headers: {} }) => {
         const headers = options && options.headers ? { ...options.headers } : {};
         const formattedOptions = {
             ...options,
             method: 'post',
+            credentials: 'include',
             headers: {
                 ...headers,
             },
@@ -20,6 +21,7 @@ export const requests = {
         const formattedOptions = {
             ...options,
             method: 'put',
+            credentials: 'include',
             headers: {
                 ...headers,
             },
@@ -31,6 +33,7 @@ export const requests = {
         const formattedOptions = {
             ...options,
             method: 'PATCH',
+            credentials: 'include',
             headers: {
                 ...headers,
             },
@@ -39,12 +42,14 @@ export const requests = {
     },
     delete: (url, options = { headers: {} }) => {
         const headers = options && options.headers ? { ...options.headers } : {};
-        return fetch(url, {
+        const formattedOptions = {
             ...options,
             method: 'delete',
+            credentials: 'include',
             headers: {
                 ...headers,
             },
-        });
+        };
+        return fetch(url, formattedOptions);
     },
 };

package/dist/admin/components/elements/Autosave/index.js

@@ -3,7 +3,7 @@ import { useHistory } from 'react-router-dom';
 import { toast } from 'react-toastify';
 import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { useConfig } from '../../utilities/Config';
-import { useWatchForm, useFormModified } from '../../forms/Form/context';
+import { useFormModified, useAllFormFields } from '../../forms/Form/context';
 import { useLocale } from '../../utilities/Locale';
 import reduceFieldsToValues from '../../forms/Form/reduceFieldsToValues';
 import { useDocumentInfo } from '../../utilities/DocumentInfo';
@@ -14,7 +14,7 @@ const Autosave = ({ collection, global, id, publishedDocUpdatedAt }) => {
     var _a, _b, _c, _d;
     const { serverURL, routes: { api, admin } } = useConfig();
     const { versions, getVersions } = useDocumentInfo();
-    const { fields, dispatchFields } = useWatchForm();
+    const [fields] = useAllFormFields();
     const modified = useFormModified();
     const locale = useLocale();
     const { replace } = useHistory();
@@ -34,6 +34,7 @@ const Autosave = ({ collection, global, id, publishedDocUpdatedAt }) => {
     const createCollectionDoc = useCallback(async () => {
         const res = await fetch(`${serverURL}${api}/${collection.slug}?locale=${locale}&fallback-locale=null&depth=0&draft=true`, {
             method: 'POST',
+            credentials: 'include',
             headers: {
                 'Content-Type': 'application/json',
             },
@@ -81,6 +82,7 @@ const Autosave = ({ collection, global, id, publishedDocUpdatedAt }) => {
                     setTimeout(async () => {
                         const res = await fetch(url, {
                             method,
+                            credentials: 'include',
                             headers: {
                                 'Content-Type': 'application/json',
                             },
@@ -96,7 +98,7 @@ const Autosave = ({ collection, global, id, publishedDocUpdatedAt }) => {
             }
         };
         autosave();
-    }, [debouncedFields, modified, serverURL, api, collection, global, id, dispatchFields, getVersions, locale]);
+    }, [debouncedFields, modified, serverURL, api, collection, global, id, getVersions, locale]);
     useEffect(() => {
         var _a;
         if ((_a = versions === null || versions === void 0 ? void 0 : versions.docs) === null || _a === void 0 ? void 0 : _a[0]) {

package/dist/admin/components/elements/Nav/index.scss

@@ -6,7 +6,7 @@
   top: 0;
   left: 0;
   height: 100vh;
-  width: base(9);
+  width: var(--nav-width);
   overflow: hidden;
   border-right: 1px solid var(--theme-elevation-100);
 
@@ -120,10 +120,6 @@
     }
   }
 
-  @include large-break {
-    width: base(8);
-  }
-
   @include mid-break {
     @include blur-bg;
     position: fixed;

package/dist/admin/components/elements/WhereBuilder/Condition/Relationship/index.js

@@ -35,7 +35,7 @@ const RelationshipField = (props) => {
                     const collection = collections.find((coll) => coll.slug === relation);
                     const fieldToSearch = ((_a = collection === null || collection === void 0 ? void 0 : collection.admin) === null || _a === void 0 ? void 0 : _a.useAsTitle) || 'id';
                     const searchParam = searchArg ? `&where[${fieldToSearch}][like]=${searchArg}` : '';
-                    const response = await fetch(`${serverURL}${api}/${relation}?limit=${maxResultsPerRequest}&page=${lastLoadedPageToUse}&depth=0${searchParam}`);
+                    const response = await fetch(`${serverURL}${api}/${relation}?limit=${maxResultsPerRequest}&page=${lastLoadedPageToUse}&depth=0${searchParam}`, { credentials: 'include' });
                     if (response.ok) {
                         const data = await response.json();
                         if (data.docs.length > 0) {
@@ -111,7 +111,7 @@ const RelationshipField = (props) => {
     }, [search]);
     const addOptionByID = useCallback(async (id, relation) => {
         if (!errorLoading && id !== 'null') {
-            const response = await fetch(`${serverURL}${api}/${relation}/${id}?depth=0`);
+            const response = await fetch(`${serverURL}${api}/${relation}/${id}?depth=0`, { credentials: 'include' });
             if (response.ok) {
                 const data = await response.json();
                 addOptions({ docs: [data] }, relation);

package/dist/admin/components/forms/Form/context.d.ts

@@ -1,13 +1,16 @@
 /// <reference types="react" />
-import { Context } from './types';
+import { Context, FormFieldsContext as FormFieldsContextType } from './types';
 declare const FormContext: import("react").Context<Context>;
 declare const FormWatchContext: import("react").Context<Context>;
 declare const SubmittedContext: import("react").Context<boolean>;
 declare const ProcessingContext: import("react").Context<boolean>;
 declare const ModifiedContext: import("react").Context<boolean>;
+declare const FormFieldsContext: import("use-context-selector").Context<FormFieldsContextType>;
 declare const useForm: () => Context;
 declare const useWatchForm: () => Context;
 declare const useFormSubmitted: () => boolean;
 declare const useFormProcessing: () => boolean;
 declare const useFormModified: () => boolean;
-export { FormContext, FormWatchContext, SubmittedContext, ProcessingContext, ModifiedContext, useForm, useWatchForm, useFormSubmitted, useFormProcessing, useFormModified, };
+declare const useFormFields: <Value = unknown>(selector: (context: FormFieldsContextType) => Value) => Value;
+declare const useAllFormFields: () => FormFieldsContextType;
+export { SubmittedContext, ProcessingContext, ModifiedContext, useFormSubmitted, useFormProcessing, useFormModified, useForm, FormContext, FormFieldsContext, useFormFields, useAllFormFields, FormWatchContext, useWatchForm, };

package/dist/admin/components/forms/Form/context.js

@@ -1,7 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useFormModified = exports.useFormProcessing = exports.useFormSubmitted = exports.useWatchForm = exports.useForm = exports.ModifiedContext = exports.ProcessingContext = exports.SubmittedContext = exports.FormWatchContext = exports.FormContext = void 0;
+exports.useWatchForm = exports.FormWatchContext = exports.useAllFormFields = exports.useFormFields = exports.FormFieldsContext = exports.FormContext = exports.useForm = exports.useFormModified = exports.useFormProcessing = exports.useFormSubmitted = exports.ModifiedContext = exports.ProcessingContext = exports.SubmittedContext = void 0;
 const react_1 = require("react");
+const use_context_selector_1 = require("use-context-selector");
 const FormContext = (0, react_1.createContext)({});
 exports.FormContext = FormContext;
 const FormWatchContext = (0, react_1.createContext)({});
@@ -12,6 +13,8 @@ const ProcessingContext = (0, react_1.createContext)(false);
 exports.ProcessingContext = ProcessingContext;
 const ModifiedContext = (0, react_1.createContext)(false);
 exports.ModifiedContext = ModifiedContext;
+const FormFieldsContext = (0, use_context_selector_1.createContext)([{}, () => null]);
+exports.FormFieldsContext = FormFieldsContext;
 const useForm = () => (0, react_1.useContext)(FormContext);
 exports.useForm = useForm;
 const useWatchForm = () => (0, react_1.useContext)(FormWatchContext);
@@ -22,4 +25,8 @@ const useFormProcessing = () => (0, react_1.useContext)(ProcessingContext);
 exports.useFormProcessing = useFormProcessing;
 const useFormModified = () => (0, react_1.useContext)(ModifiedContext);
 exports.useFormModified = useFormModified;
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY29udGV4dC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uL3NyYy9hZG1pbi9jb21wb25lbnRzL2Zvcm1zL0Zvcm0vY29udGV4dC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiOzs7QUFBQSxpQ0FBa0Q7QUFHbEQsTUFBTSxXQUFXLEdBQUcsSUFBQSxxQkFBYSxFQUFDLEVBQWEsQ0FBQyxDQUFDO0FBYS9DLGtDQUFXO0FBWmIsTUFBTSxnQkFBZ0IsR0FBRyxJQUFBLHFCQUFhLEVBQUMsRUFBYSxDQUFDLENBQUM7QUFhcEQsNENBQWdCO0FBWmxCLE1BQU0sZ0JBQWdCLEdBQUcsSUFBQSxxQkFBYSxFQUFDLEtBQUssQ0FBQyxDQUFDO0FBYTVDLDRDQUFnQjtBQVpsQixNQUFNLGlCQUFpQixHQUFHLElBQUEscUJBQWEsRUFBQyxLQUFLLENBQUMsQ0FBQztBQWE3Qyw4Q0FBaUI7QUFabkIsTUFBTSxlQUFlLEdBQUcsSUFBQSxxQkFBYSxFQUFDLEtBQUssQ0FBQyxDQUFDO0FBYTNDLDBDQUFlO0FBWGpCLE1BQU0sT0FBTyxHQUFHLEdBQVksRUFBRSxDQUFDLElBQUEsa0JBQVUsRUFBQyxXQUFXLENBQUMsQ0FBQztBQVlyRCwwQkFBTztBQVhULE1BQU0sWUFBWSxHQUFHLEdBQVksRUFBRSxDQUFDLElBQUEsa0JBQVUsRUFBQyxnQkFBZ0IsQ0FBQyxDQUFDO0FBWS9ELG9DQUFZO0FBWGQsTUFBTSxnQkFBZ0IsR0FBRyxHQUFZLEVBQUUsQ0FBQyxJQUFBLGtCQUFVLEVBQUMsZ0JBQWdCLENBQUMsQ0FBQztBQVluRSw0Q0FBZ0I7QUFYbEIsTUFBTSxpQkFBaUIsR0FBRyxHQUFZLEVBQUUsQ0FBQyxJQUFBLGtCQUFVLEVBQUMsaUJBQWlCLENBQUMsQ0FBQztBQVlyRSw4Q0FBaUI7QUFYbkIsTUFBTSxlQUFlLEdBQUcsR0FBWSxFQUFFLENBQUMsSUFBQSxrQkFBVSxFQUFDLGVBQWUsQ0FBQyxDQUFDO0FBWWpFLDBDQUFlIn0=
+const useFormFields = (selector) => (0, use_context_selector_1.useContextSelector)(FormFieldsContext, selector);
+exports.useFormFields = useFormFields;
+const useAllFormFields = () => (0, use_context_selector_1.useContext)(FormFieldsContext);
+exports.useAllFormFields = useAllFormFields;
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY29udGV4dC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uL3NyYy9hZG1pbi9jb21wb25lbnRzL2Zvcm1zL0Zvcm0vY29udGV4dC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiOzs7QUFBQSxpQ0FBa0Q7QUFDbEQsK0RBQWdJO0FBR2hJLE1BQU0sV0FBVyxHQUFHLElBQUEscUJBQWEsRUFBQyxFQUFhLENBQUMsQ0FBQztBQXdCL0Msa0NBQVc7QUF2QmIsTUFBTSxnQkFBZ0IsR0FBRyxJQUFBLHFCQUFhLEVBQUMsRUFBYSxDQUFDLENBQUM7QUEyQnBELDRDQUFnQjtBQTFCbEIsTUFBTSxnQkFBZ0IsR0FBRyxJQUFBLHFCQUFhLEVBQUMsS0FBSyxDQUFDLENBQUM7QUFlNUMsNENBQWdCO0FBZGxCLE1BQU0saUJBQWlCLEdBQUcsSUFBQSxxQkFBYSxFQUFDLEtBQUssQ0FBQyxDQUFDO0FBZTdDLDhDQUFpQjtBQWRuQixNQUFNLGVBQWUsR0FBRyxJQUFBLHFCQUFhLEVBQUMsS0FBSyxDQUFDLENBQUM7QUFlM0MsMENBQWU7QUFkakIsTUFBTSxpQkFBaUIsR0FBRyxJQUFBLG9DQUFxQixFQUF3QixDQUFDLEVBQUUsRUFBRSxHQUFHLEVBQUUsQ0FBQyxJQUFJLENBQUMsQ0FBQyxDQUFDO0FBb0J2Riw4Q0FBaUI7QUFsQm5CLE1BQU0sT0FBTyxHQUFHLEdBQVksRUFBRSxDQUFDLElBQUEsa0JBQVUsRUFBQyxXQUFXLENBQUMsQ0FBQztBQWdCckQsMEJBQU87QUFmVCxNQUFNLFlBQVksR0FBRyxHQUFZLEVBQUUsQ0FBQyxJQUFBLGtCQUFVLEVBQUMsZ0JBQWdCLENBQUMsQ0FBQztBQXFCL0Qsb0NBQVk7QUFwQmQsTUFBTSxnQkFBZ0IsR0FBRyxHQUFZLEVBQUUsQ0FBQyxJQUFBLGtCQUFVLEVBQUMsZ0JBQWdCLENBQUMsQ0FBQztBQVduRSw0Q0FBZ0I7QUFWbEIsTUFBTSxpQkFBaUIsR0FBRyxHQUFZLEVBQUUsQ0FBQyxJQUFBLGtCQUFVLEVBQUMsaUJBQWlCLENBQUMsQ0FBQztBQVdyRSw4Q0FBaUI7QUFWbkIsTUFBTSxlQUFlLEdBQUcsR0FBWSxFQUFFLENBQUMsSUFBQSxrQkFBVSxFQUFDLGVBQWUsQ0FBQyxDQUFDO0FBV2pFLDBDQUFlO0FBVGpCLE1BQU0sYUFBYSxHQUFHLENBQWtCLFFBQW1ELEVBQVMsRUFBRSxDQUFDLElBQUEseUNBQWtCLEVBQUMsaUJBQWlCLEVBQUUsUUFBUSxDQUFDLENBQUM7QUFhckosc0NBQWE7QUFaZixNQUFNLGdCQUFnQixHQUFHLEdBQTBCLEVBQUUsQ0FBQyxJQUFBLGlDQUFjLEVBQUMsaUJBQWlCLENBQUMsQ0FBQztBQWF0Riw0Q0FBZ0IifQ==

package/dist/admin/components/forms/Form/fieldReducer.d.ts

@@ -1,3 +1,3 @@
-import { Fields } from './types';
-declare function fieldReducer(state: Fields, action: any): Fields;
+import { FieldAction, Fields } from './types';
+declare function fieldReducer(state: Fields, action: FieldAction): Fields;
 export default fieldReducer;

package/dist/admin/components/forms/Form/fieldReducer.js

@@ -145,7 +145,7 @@ function fieldReducer(state, action) {
                 };
             }, {});
         }
-        default: {
+        case 'UPDATE': {
             const newField = {
                 value: action.value,
                 valid: action.valid,
@@ -161,6 +161,9 @@ function fieldReducer(state, action) {
                 [action.path]: newField,
             };
         }
+        default: {
+            return state;
+        }
     }
 }
 export default fieldReducer;

package/dist/admin/components/forms/Form/getSiblingData.js

@@ -1,8 +1,13 @@
-import { unflatten } from 'flatley';
-import reduceFieldsToValues from './reduceFieldsToValues';
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const flatley_1 = require("flatley");
+const reduceFieldsToValues_1 = __importDefault(require("./reduceFieldsToValues"));
 const getSiblingData = (fields, path) => {
     if (path.indexOf('.') === -1) {
-        return reduceFieldsToValues(fields, true);
+        return (0, reduceFieldsToValues_1.default)(fields, true);
     }
     const siblingFields = {};
     // If this field is nested
@@ -13,6 +18,7 @@ const getSiblingData = (fields, path) => {
             siblingFields[fieldKey.replace(parentFieldPath, '')] = fields[fieldKey].value;
         }
     });
-    return unflatten(siblingFields, { safe: true });
+    return (0, flatley_1.unflatten)(siblingFields, { safe: true });
 };
-export default getSiblingData;
+exports.default = getSiblingData;
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZ2V0U2libGluZ0RhdGEuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi9zcmMvYWRtaW4vY29tcG9uZW50cy9mb3Jtcy9Gb3JtL2dldFNpYmxpbmdEYXRhLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7Ozs7O0FBQUEscUNBQW9DO0FBRXBDLGtGQUEwRDtBQUUxRCxNQUFNLGNBQWMsR0FBRyxDQUFDLE1BQWMsRUFBRSxJQUFZLEVBQVEsRUFBRTtJQUM1RCxJQUFJLElBQUksQ0FBQyxPQUFPLENBQUMsR0FBRyxDQUFDLEtBQUssQ0FBQyxDQUFDLEVBQUU7UUFDNUIsT0FBTyxJQUFBLDhCQUFvQixFQUFDLE1BQU0sRUFBRSxJQUFJLENBQUMsQ0FBQztLQUMzQztJQUNELE1BQU0sYUFBYSxHQUFHLEVBQUUsQ0FBQztJQUV6QiwwQkFBMEI7SUFDMUIsMENBQTBDO0lBQzFDLE1BQU0sZUFBZSxHQUFHLElBQUksQ0FBQyxTQUFTLENBQUMsQ0FBQyxFQUFFLElBQUksQ0FBQyxXQUFXLENBQUMsR0FBRyxDQUFDLEdBQUcsQ0FBQyxDQUFDLENBQUM7SUFDckUsTUFBTSxDQUFDLElBQUksQ0FBQyxNQUFNLENBQUMsQ0FBQyxPQUFPLENBQUMsQ0FBQyxRQUFRLEVBQUUsRUFBRTtRQUN2QyxJQUFJLENBQUMsTUFBTSxDQUFDLFFBQVEsQ0FBQyxDQUFDLGVBQWUsSUFBSSxRQUFRLENBQUMsT0FBTyxDQUFDLGVBQWUsQ0FBQyxLQUFLLENBQUMsRUFBRTtZQUNoRixhQUFhLENBQUMsUUFBUSxDQUFDLE9BQU8sQ0FBQyxlQUFlLEVBQUUsRUFBRSxDQUFDLENBQUMsR0FBRyxNQUFNLENBQUMsUUFBUSxDQUFDLENBQUMsS0FBSyxDQUFDO1NBQy9FO0lBQ0gsQ0FBQyxDQUFDLENBQUM7SUFFSCxPQUFPLElBQUEsbUJBQVMsRUFBQyxhQUFhLEVBQUUsRUFBRSxJQUFJLEVBQUUsSUFBSSxFQUFFLENBQUMsQ0FBQztBQUNsRCxDQUFDLENBQUM7QUFFRixrQkFBZSxjQUFjLENBQUMifQ==

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

@@ -17,7 +17,7 @@ import getDataByPathFunc from './getDataByPath';
 import wait from '../../../../utilities/wait';
 import buildInitialState from './buildInitialState';
 import errorMessages from './errorMessages';
-import { SubmittedContext, ProcessingContext, ModifiedContext, FormContext, FormWatchContext } from './context';
+import { SubmittedContext, ProcessingContext, ModifiedContext, FormContext, FormFieldsContext, FormWatchContext } from './context';
 import buildStateFromSchema from './buildStateFromSchema';
 import { useOperation } from '../../utilities/OperationProvider';
 const baseClass = 'form';
@@ -41,10 +41,10 @@ const Form = (props) => {
         initialFieldState = formattedInitialData;
     if (initialState)
         initialFieldState = initialState;
-    // Allow access to initialState for field types such as Blocks and Array
-    contextRef.current.initialState = initialState;
-    const [fields, dispatchFields] = useReducer(fieldReducer, {}, () => initialFieldState);
+    const fieldsReducer = useReducer(fieldReducer, {}, () => initialFieldState);
+    const [fields, dispatchFields] = fieldsReducer;
     contextRef.current.fields = fields;
+    contextRef.current.dispatchFields = dispatchFields;
     const validateForm = useCallback(async () => {
         const validatedFieldState = {};
         let isValid = true;
@@ -78,7 +78,7 @@ const Form = (props) => {
             dispatchFields({ type: 'REPLACE_STATE', state: validatedFieldState });
         }
         return isValid;
-    }, [contextRef, id, user, operation]);
+    }, [contextRef, id, user, operation, dispatchFields]);
     const submit = useCallback(async (options = {}, e) => {
         const { overrides = {}, action: actionToUse = action, method: methodToUse = method, skipValidation, } = options;
         if (disabled) {
@@ -189,6 +189,7 @@ const Form = (props) => {
                     fieldErrors.forEach((err) => {
                         var _a, _b;
                         dispatchFields({
+                            type: 'UPDATE',
                             ...(((_b = (_a = contextRef.current) === null || _a === void 0 ? void 0 : _a.fields) === null || _b === void 0 ? void 0 : _b[err.field]) || {}),
                             valid: false,
                             errorMessage: err.message,
@@ -213,6 +214,7 @@ const Form = (props) => {
         action,
         disableSuccessStatus,
         disabled,
+        dispatchFields,
         fields,
         handleResponse,
         history,
@@ -227,7 +229,6 @@ const Form = (props) => {
     const getData = useCallback(() => reduceFieldsToValues(contextRef.current.fields, true), [contextRef]);
     const getSiblingData = useCallback((path) => getSiblingDataFunc(contextRef.current.fields, path), [contextRef]);
     const getDataByPath = useCallback((path) => getDataByPathFunc(contextRef.current.fields, path), [contextRef]);
-    const getUnflattenedValues = useCallback(() => reduceFieldsToValues(contextRef.current.fields), [contextRef]);
     const createFormData = useCallback((overrides = {}) => {
         const data = reduceFieldsToValues(contextRef.current.fields, true);
         const file = data === null || data === void 0 ? void 0 : data.file;
@@ -250,15 +251,13 @@ const Form = (props) => {
         const state = await buildStateFromSchema({ fieldSchema, data, user, id, operation, locale });
         contextRef.current = { ...initContextState };
         dispatchFields({ type: 'REPLACE_STATE', state });
-    }, [id, user, operation, locale]);
-    contextRef.current.dispatchFields = dispatchFields;
+    }, [id, user, operation, locale, dispatchFields]);
     contextRef.current.submit = submit;
     contextRef.current.getFields = getFields;
     contextRef.current.getField = getField;
     contextRef.current.getData = getData;
     contextRef.current.getSiblingData = getSiblingData;
     contextRef.current.getDataByPath = getDataByPath;
-    contextRef.current.getUnflattenedValues = getUnflattenedValues;
     contextRef.current.validateForm = validateForm;
     contextRef.current.createFormData = createFormData;
     contextRef.current.setModified = setModified;
@@ -272,7 +271,7 @@ const Form = (props) => {
             contextRef.current = { ...initContextState };
             dispatchFields({ type: 'REPLACE_STATE', state: initialState });
         }
-    }, [initialState]);
+    }, [initialState, dispatchFields]);
     useEffect(() => {
         if (initialData) {
             contextRef.current = { ...initContextState };
@@ -280,7 +279,7 @@ const Form = (props) => {
             setFormattedInitialData(builtState);
             dispatchFields({ type: 'REPLACE_STATE', state: builtState });
         }
-    }, [initialData]);
+    }, [initialData, dispatchFields]);
     useThrottledEffect(() => {
         refreshCookie();
     }, 15000, [fields]);
@@ -307,6 +306,7 @@ const Form = (props) => {
                 } },
                 React.createElement(SubmittedContext.Provider, { value: submitted },
                     React.createElement(ProcessingContext.Provider, { value: processing },
-                        React.createElement(ModifiedContext.Provider, { value: modified }, children)))))));
+                        React.createElement(ModifiedContext.Provider, { value: modified },
+                            React.createElement(FormFieldsContext.Provider, { value: fieldsReducer }, children))))))));
 };
 export default Form;

package/dist/admin/components/forms/Form/initContextState.js

@@ -1,6 +1,5 @@
 const submit = () => undefined;
 const getSiblingData = () => undefined;
-const getUnflattenedValues = () => ({});
 const dispatchFields = () => undefined;
 const validateForm = () => undefined;
 const createFormData = () => undefined;
@@ -14,7 +13,6 @@ const initialContextState = {
     getData: () => undefined,
     getSiblingData,
     getDataByPath: () => undefined,
-    getUnflattenedValues,
     validateForm,
     createFormData,
     submit,
@@ -22,7 +20,6 @@ const initialContextState = {
     setModified,
     setProcessing,
     setSubmitted,
-    initialState: {},
     fields: {},
     disabled: false,
     formRef: null,

package/dist/admin/components/forms/Form/reduceFieldsToValues.js

@@ -1,4 +1,6 @@
-import { unflatten as flatleyUnflatten } from 'flatley';
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const flatley_1 = require("flatley");
 const reduceFieldsToValues = (fields, unflatten) => {
     const data = {};
     Object.keys(fields).forEach((key) => {
@@ -7,8 +9,9 @@ const reduceFieldsToValues = (fields, unflatten) => {
         }
     });
     if (unflatten) {
-        return flatleyUnflatten(data, { safe: true });
+        return (0, flatley_1.unflatten)(data, { safe: true });
     }
     return data;
 };
-export default reduceFieldsToValues;
+exports.default = reduceFieldsToValues;
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicmVkdWNlRmllbGRzVG9WYWx1ZXMuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi9zcmMvYWRtaW4vY29tcG9uZW50cy9mb3Jtcy9Gb3JtL3JlZHVjZUZpZWxkc1RvVmFsdWVzLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7O0FBQUEscUNBQXdEO0FBR3hELE1BQU0sb0JBQW9CLEdBQUcsQ0FBQyxNQUFjLEVBQUUsU0FBbUIsRUFBUSxFQUFFO0lBQ3pFLE1BQU0sSUFBSSxHQUFHLEVBQUUsQ0FBQztJQUVoQixNQUFNLENBQUMsSUFBSSxDQUFDLE1BQU0sQ0FBQyxDQUFDLE9BQU8sQ0FBQyxDQUFDLEdBQUcsRUFBRSxFQUFFO1FBQ2xDLElBQUksQ0FBQyxNQUFNLENBQUMsR0FBRyxDQUFDLENBQUMsZUFBZSxFQUFFO1lBQ2hDLElBQUksQ0FBQyxHQUFHLENBQUMsR0FBRyxNQUFNLENBQUMsR0FBRyxDQUFDLENBQUMsS0FBSyxDQUFDO1NBQy9CO0lBQ0gsQ0FBQyxDQUFDLENBQUM7SUFFSCxJQUFJLFNBQVMsRUFBRTtRQUNiLE9BQU8sSUFBQSxtQkFBZ0IsRUFBQyxJQUFJLEVBQUUsRUFBRSxJQUFJLEVBQUUsSUFBSSxFQUFFLENBQUMsQ0FBQztLQUMvQztJQUVELE9BQU8sSUFBSSxDQUFDO0FBQ2QsQ0FBQyxDQUFDO0FBRUYsa0JBQWUsb0JBQW9CLENBQUMifQ==

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { Dispatch } from 'react';
 import { Field as FieldConfig, Condition, Validate } from '../../../../fields/config/types';
 export declare type Field = {
     value: unknown;
@@ -43,24 +43,67 @@ export declare type SubmitOptions = {
     skipValidation?: boolean;
 };
 export declare type DispatchFields = React.Dispatch<any>;
-export declare type Submit = (options?: SubmitOptions, e?: React.FormEvent<HTMLFormElement>) => void;
+export declare type Submit = (options?: SubmitOptions, e?: React.FormEvent<HTMLFormElement>) => Promise<void>;
 export declare type ValidateForm = () => Promise<boolean>;
 export declare type CreateFormData = (overrides?: any) => FormData;
 export declare type GetFields = () => Fields;
 export declare type GetField = (path: string) => Field;
 export declare type GetData = () => Data;
 export declare type GetSiblingData = (path: string) => Data;
-export declare type GetUnflattenedValues = () => Data;
 export declare type GetDataByPath = <T = unknown>(path: string) => T;
 export declare type SetModified = (modified: boolean) => void;
 export declare type SetSubmitted = (submitted: boolean) => void;
 export declare type SetProcessing = (processing: boolean) => void;
 export declare type Reset = (fieldSchema: FieldConfig[], data: unknown) => Promise<void>;
+export declare type REPLACE_STATE = {
+    type: 'REPLACE_STATE';
+    state: Fields;
+};
+export declare type REMOVE = {
+    type: 'REMOVE';
+    path: string;
+};
+export declare type REMOVE_ROW = {
+    type: 'REMOVE_ROW';
+    rowIndex: number;
+    path: string;
+};
+export declare type ADD_ROW = {
+    type: 'ADD_ROW';
+    rowIndex: number;
+    path: string;
+    subFieldState?: Fields;
+    blockType?: string;
+};
+export declare type DUPLICATE_ROW = {
+    type: 'DUPLICATE_ROW';
+    rowIndex: number;
+    path: string;
+};
+export declare type MOVE_ROW = {
+    type: 'MOVE_ROW';
+    moveFromIndex: number;
+    moveToIndex: number;
+    path: string;
+};
+export declare type MODIFY_CONDITION = {
+    type: 'MODIFY_CONDITION';
+    path: string;
+    result: boolean;
+};
+export declare type UPDATE = {
+    type: 'UPDATE';
+    path: string;
+} & Partial<Field>;
+export declare type FieldAction = REPLACE_STATE | REMOVE | REMOVE_ROW | ADD_ROW | DUPLICATE_ROW | MOVE_ROW | MODIFY_CONDITION | UPDATE;
+export declare type FormFieldsContext = [Fields, Dispatch<FieldAction>];
 export declare type Context = {
-    dispatchFields: DispatchFields;
-    submit: Submit;
+    /**
+     * @deprecated Form context fields may be outdated and should not be relied on. Instead, prefer `useFormFields`.
+     */
     fields: Fields;
-    initialState: Fields;
+    submit: Submit;
+    dispatchFields: Dispatch<FieldAction>;
     validateForm: ValidateForm;
     createFormData: CreateFormData;
     disabled: boolean;
@@ -68,7 +111,6 @@ export declare type Context = {
     getField: GetField;
     getData: GetData;
     getSiblingData: GetSiblingData;
-    getUnflattenedValues: GetUnflattenedValues;
     getDataByPath: GetDataByPath;
     setModified: SetModified;
     setProcessing: SetProcessing;

package/dist/admin/components/forms/field-types/Code/Code.js

@@ -32,7 +32,6 @@ const Code = (props) => {
     const { value, showError, setValue, errorMessage, } = useField({
         path,
         validate: memoizedValidate,
-        enableDebouncedValue: true,
         condition,
     });
     const classes = [

package/dist/admin/components/forms/field-types/ConfirmPassword/index.js

@@ -2,11 +2,10 @@ import React, { useCallback } from 'react';
 import useField from '../../useField';
 import Label from '../../Label';
 import Error from '../../Error';
-import { useWatchForm } from '../../Form/context';
+import { useFormFields } from '../../Form/context';
 import './index.scss';
 const ConfirmPassword = () => {
-    const { getField } = useWatchForm();
-    const password = getField('password');
+    const password = useFormFields(([fields]) => fields.password);
     const validate = useCallback((value) => {
         if (!value) {
             return 'This field is required';
@@ -20,7 +19,6 @@ const ConfirmPassword = () => {
         path: 'confirm-password',
         disableFormData: true,
         validate,
-        enableDebouncedValue: true,
     });
     const classes = [
         'field-type',

package/dist/admin/components/forms/field-types/Email/index.js

@@ -15,7 +15,6 @@ const Email = (props) => {
     const fieldType = useField({
         path,
         validate: memoizedValidate,
-        enableDebouncedValue: true,
         condition,
     });
     const { value, showError, setValue, errorMessage, } = fieldType;

package/dist/admin/components/forms/field-types/Number/index.js

@@ -15,7 +15,6 @@ const NumberField = (props) => {
     const { value, showError, setValue, errorMessage, } = useField({
         path,
         validate: memoizedValidate,
-        enableDebouncedValue: true,
         condition,
     });
     const handleChange = useCallback((e) => {

package/dist/admin/components/forms/field-types/Password/index.js

@@ -15,7 +15,6 @@ const Password = (props) => {
     const { value, showError, formProcessing, setValue, errorMessage, } = useField({
         path,
         validate: memoizedValidate,
-        enableDebouncedValue: true,
     });
     const classes = [
         'field-type',

package/dist/admin/components/forms/field-types/Point/index.js

@@ -16,7 +16,6 @@ const PointField = (props) => {
     const { value = [null, null], showError, setValue, errorMessage, } = useField({
         path,
         validate: memoizedValidate,
-        enableDebouncedValue: true,
         condition,
     });
     const handleChange = useCallback((e, index) => {

package/dist/admin/components/forms/field-types/Relationship/AddNew/Modal/index.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { Props } from './types';
+import './index.scss';
+export declare const AddNewRelationModal: React.FC<Props>;

package/dist/admin/components/forms/field-types/Relationship/AddNew/Modal/index.js

@@ -0,0 +1,67 @@
+import React, { useEffect, useState } from 'react';
+import { Modal, useModal } from '@faceless-ui/modal';
+import { useWindowInfo } from '@faceless-ui/window-info';
+import Button from '../../../../../elements/Button';
+import { useAuth } from '../../../../../utilities/Auth';
+import RenderCustomComponent from '../../../../../utilities/RenderCustomComponent';
+import { useLocale } from '../../../../../utilities/Locale';
+import { useConfig } from '../../../../../utilities/Config';
+import DefaultEdit from '../../../../../views/collections/Edit/Default';
+import X from '../../../../../icons/X';
+import buildStateFromSchema from '../../../../Form/buildStateFromSchema';
+import { EditDepthContext, useEditDepth } from '../../../../../utilities/EditDepth';
+import './index.scss';
+const baseClass = 'relationship-add-new-modal';
+export const AddNewRelationModal = ({ modalCollection, onSave, modalSlug }) => {
+    var _a, _b, _c;
+    const { serverURL, routes: { api } } = useConfig();
+    const { toggleModal } = useModal();
+    const { breakpoints: { m: midBreak } } = useWindowInfo();
+    const locale = useLocale();
+    const { permissions, user } = useAuth();
+    const [initialState, setInitialState] = useState();
+    const [isAnimated, setIsAnimated] = useState(false);
+    const editDepth = useEditDepth();
+    const modalAction = `${serverURL}${api}/${modalCollection.slug}?locale=${locale}&depth=0&fallback-locale=null`;
+    useEffect(() => {
+        const buildState = async () => {
+            const state = await buildStateFromSchema({ fieldSchema: modalCollection.fields, data: {}, user, operation: 'create', locale });
+            setInitialState(state);
+        };
+        buildState();
+    }, [modalCollection, locale, user]);
+    useEffect(() => {
+        setIsAnimated(true);
+    }, []);
+    return (React.createElement(Modal, { slug: modalSlug, className: [
+            baseClass,
+            isAnimated && `${baseClass}--animated`,
+        ].filter(Boolean).join(' ') },
+        editDepth === 1 && (React.createElement("div", { className: `${baseClass}__blur-bg` })),
+        React.createElement(EditDepthContext.Provider, { value: editDepth + 1 },
+            React.createElement("button", { className: `${baseClass}__close`, type: "button", onClick: () => toggleModal(modalSlug), style: {
+                    width: `calc(${midBreak ? 'var(--gutter-h)' : 'var(--nav-width)'} + ${editDepth - 1} * 25px)`,
+                } },
+                React.createElement("span", null, "Close")),
+            React.createElement(RenderCustomComponent, { DefaultComponent: DefaultEdit, CustomComponent: (_c = (_b = (_a = modalCollection.admin) === null || _a === void 0 ? void 0 : _a.components) === null || _b === void 0 ? void 0 : _b.views) === null || _c === void 0 ? void 0 : _c.Edit, componentProps: {
+                    isLoading: !initialState,
+                    data: {},
+                    collection: modalCollection,
+                    permissions: permissions.collections[modalCollection.slug],
+                    isEditing: false,
+                    onSave,
+                    initialState,
+                    hasSavePermission: true,
+                    action: modalAction,
+                    disableEyebrow: true,
+                    disableActions: true,
+                    disableLeaveWithoutSaving: true,
+                    customHeader: (React.createElement("div", { className: `${baseClass}__header` },
+                        React.createElement("h2", null,
+                            "Add new",
+                            ' ',
+                            modalCollection.labels.singular),
+                        React.createElement(Button, { buttonStyle: "none", className: `${baseClass}__header-close`, onClick: () => toggleModal(modalSlug) },
+                            React.createElement(X, null)))),
+                } }))));
+};