payload 0.20.0 → 0.20.1

package/dist/admin/components/forms/Form/buildStateFromSchema/iterateFields.js

@@ -0,0 +1,24 @@
+import { fieldIsPresentationalOnly, } from '../../../../../fields/config/types';
+import { addFieldStatePromise } from './addFieldStatePromise';
+export const iterateFields = ({ fields, data, parentPassesCondition, path = '', fullData, user, locale, operation, fieldPromises, id, state, }) => {
+    fields.forEach((field) => {
+        var _a, _b;
+        const initialData = data;
+        if (!fieldIsPresentationalOnly(field) && !((_a = field === null || field === void 0 ? void 0 : field.admin) === null || _a === void 0 ? void 0 : _a.disabled)) {
+            const passesCondition = Boolean((((_b = field === null || field === void 0 ? void 0 : field.admin) === null || _b === void 0 ? void 0 : _b.condition) ? field.admin.condition(fullData || {}, initialData || {}) : true) && parentPassesCondition);
+            fieldPromises.push(addFieldStatePromise({
+                fullData,
+                id,
+                locale,
+                operation,
+                path,
+                state,
+                user,
+                fieldPromises,
+                field,
+                passesCondition,
+                data,
+            }));
+        }
+    });
+};

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

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+import { Context } 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 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, };

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

@@ -0,0 +1,25 @@
+"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;
+const react_1 = require("react");
+const FormContext = (0, react_1.createContext)({});
+exports.FormContext = FormContext;
+const FormWatchContext = (0, react_1.createContext)({});
+exports.FormWatchContext = FormWatchContext;
+const SubmittedContext = (0, react_1.createContext)(false);
+exports.SubmittedContext = SubmittedContext;
+const ProcessingContext = (0, react_1.createContext)(false);
+exports.ProcessingContext = ProcessingContext;
+const ModifiedContext = (0, react_1.createContext)(false);
+exports.ModifiedContext = ModifiedContext;
+const useForm = () => (0, react_1.useContext)(FormContext);
+exports.useForm = useForm;
+const useWatchForm = () => (0, react_1.useContext)(FormWatchContext);
+exports.useWatchForm = useWatchForm;
+const useFormSubmitted = () => (0, react_1.useContext)(SubmittedContext);
+exports.useFormSubmitted = useFormSubmitted;
+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=

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

@@ -0,0 +1,4 @@
+declare const _default: {
+    413: string;
+};
+export default _default;

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

@@ -0,0 +1,3 @@
+export default {
+    413: 'Your request was too large to submit successfully.',
+};

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

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

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

@@ -0,0 +1,147 @@
+import equal from 'deep-equal';
+import { unflatten, flatten } from 'flatley';
+import flattenFilters from './flattenFilters';
+import getSiblingData from './getSiblingData';
+import reduceFieldsToValues from './reduceFieldsToValues';
+const unflattenRowsFromState = (state, path) => {
+    // Take a copy of state
+    const remainingFlattenedState = { ...state };
+    const rowsFromStateObject = {};
+    const pathPrefixToRemove = path.substring(0, path.lastIndexOf('.') + 1);
+    // Loop over all keys from state
+    // If the key begins with the name of the parent field,
+    // Add value to rowsFromStateObject and delete it from remaining state
+    Object.keys(state).forEach((key) => {
+        if (key.indexOf(`${path}.`) === 0) {
+            if (!state[key].disableFormData) {
+                const name = key.replace(pathPrefixToRemove, '');
+                rowsFromStateObject[name] = state[key];
+                rowsFromStateObject[name].initialValue = rowsFromStateObject[name].value;
+            }
+            delete remainingFlattenedState[key];
+        }
+    });
+    const unflattenedRows = unflatten(rowsFromStateObject);
+    return {
+        unflattenedRows: unflattenedRows[path.replace(pathPrefixToRemove, '')] || [],
+        remainingFlattenedState,
+    };
+};
+function fieldReducer(state, action) {
+    switch (action.type) {
+        case 'REPLACE_STATE': {
+            const newState = {};
+            // Only update fields that have changed
+            // by comparing old value / initialValue to new
+            // ..
+            // This is a performance enhancement for saving
+            // large documents with hundreds of fields
+            Object.entries(action.state).forEach(([path, field]) => {
+                const oldField = state[path];
+                const newField = field;
+                if (!equal(oldField, newField)) {
+                    newState[path] = newField;
+                }
+                else if (oldField) {
+                    newState[path] = oldField;
+                }
+            });
+            return newState;
+        }
+        case 'REMOVE': {
+            const newState = { ...state };
+            delete newState[action.path];
+            return newState;
+        }
+        case 'REMOVE_ROW': {
+            const { rowIndex, path } = action;
+            const { unflattenedRows, remainingFlattenedState } = unflattenRowsFromState(state, path);
+            unflattenedRows.splice(rowIndex, 1);
+            const flattenedRowState = unflattenedRows.length > 0 ? flatten({ [path]: unflattenedRows }, { filters: flattenFilters }) : {};
+            return {
+                ...remainingFlattenedState,
+                ...flattenedRowState,
+            };
+        }
+        case 'ADD_ROW': {
+            const { rowIndex, path, subFieldState, blockType, } = action;
+            const { unflattenedRows, remainingFlattenedState } = unflattenRowsFromState(state, path);
+            if (blockType) {
+                subFieldState.blockType = {
+                    value: blockType,
+                    initialValue: blockType,
+                    valid: true,
+                };
+            }
+            // If there are subfields
+            if (Object.keys(subFieldState).length > 0) {
+                // Add new object containing subfield names to unflattenedRows array
+                unflattenedRows.splice(rowIndex + 1, 0, subFieldState);
+            }
+            const newState = {
+                ...remainingFlattenedState,
+                ...(flatten({ [path]: unflattenedRows }, { filters: flattenFilters })),
+            };
+            return newState;
+        }
+        case 'MOVE_ROW': {
+            const { moveFromIndex, moveToIndex, path } = action;
+            const { unflattenedRows, remainingFlattenedState } = unflattenRowsFromState(state, path);
+            // copy the row to move
+            const copyOfMovingRow = unflattenedRows[moveFromIndex];
+            // delete the row by index
+            unflattenedRows.splice(moveFromIndex, 1);
+            // insert row copyOfMovingRow back in
+            unflattenedRows.splice(moveToIndex, 0, copyOfMovingRow);
+            const newState = {
+                ...remainingFlattenedState,
+                ...(flatten({ [path]: unflattenedRows }, { filters: flattenFilters })),
+            };
+            return newState;
+        }
+        case 'MODIFY_CONDITION': {
+            const { path, result } = action;
+            return Object.entries(state).reduce((newState, [fieldPath, field]) => {
+                if (fieldPath === path || fieldPath.indexOf(`${path}.`) === 0) {
+                    let passesCondition = result;
+                    // If a condition is being set to true,
+                    // Set all conditions to true
+                    // Besides those who still fail their own conditions
+                    if (passesCondition && field.condition) {
+                        passesCondition = field.condition(reduceFieldsToValues(state), getSiblingData(state, path));
+                    }
+                    return {
+                        ...newState,
+                        [fieldPath]: {
+                            ...field,
+                            passesCondition,
+                        },
+                    };
+                }
+                return {
+                    ...newState,
+                    [fieldPath]: {
+                        ...field,
+                    },
+                };
+            }, {});
+        }
+        default: {
+            const newField = {
+                value: action.value,
+                valid: action.valid,
+                errorMessage: action.errorMessage,
+                disableFormData: action.disableFormData,
+                initialValue: action.initialValue,
+                validate: action.validate,
+                condition: action.condition,
+                passesCondition: action.passesCondition,
+            };
+            return {
+                ...state,
+                [action.path]: newField,
+            };
+        }
+    }
+}
+export default fieldReducer;

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

@@ -0,0 +1,4 @@
+declare const flattenFilters: {
+    test: (_: string, value: unknown) => boolean;
+}[];
+export default flattenFilters;

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

@@ -0,0 +1,8 @@
+const flattenFilters = [{
+        test: (_, value) => {
+            const hasValidProperty = Object.prototype.hasOwnProperty.call(value, 'valid');
+            const hasValueProperty = Object.prototype.hasOwnProperty.call(value, 'value');
+            return (hasValidProperty && hasValueProperty);
+        },
+    }];
+export default flattenFilters;

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

@@ -0,0 +1,3 @@
+import { Fields } from './types';
+declare const getDataByPath: <T = unknown>(fields: Fields, path: string) => T;
+export default getDataByPath;

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

@@ -0,0 +1,14 @@
+import { unflatten } from 'flatley';
+const getDataByPath = (fields, path) => {
+    const pathPrefixToRemove = path.substring(0, path.lastIndexOf('.') + 1);
+    const name = path.split('.').pop();
+    const data = {};
+    Object.keys(fields).forEach((key) => {
+        if (!fields[key].disableFormData && (key.indexOf(`${path}.`) === 0 || key === path)) {
+            data[key.replace(pathPrefixToRemove, '')] = fields[key].value;
+        }
+    });
+    const unflattenedData = unflatten(data);
+    return unflattenedData === null || unflattenedData === void 0 ? void 0 : unflattenedData[name];
+};
+export default getDataByPath;

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

@@ -0,0 +1,3 @@
+import { Fields, Data } from './types';
+declare const getSiblingData: (fields: Fields, path: string) => Data;
+export default getSiblingData;

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

@@ -0,0 +1,18 @@
+import { unflatten } from 'flatley';
+import reduceFieldsToValues from './reduceFieldsToValues';
+const getSiblingData = (fields, path) => {
+    if (path.indexOf('.') === -1) {
+        return reduceFieldsToValues(fields, true);
+    }
+    const siblingFields = {};
+    // If this field is nested
+    // We can provide a list of sibling fields
+    const parentFieldPath = path.substring(0, path.lastIndexOf('.') + 1);
+    Object.keys(fields).forEach((fieldKey) => {
+        if (!fields[fieldKey].disableFormData && fieldKey.indexOf(parentFieldPath) === 0) {
+            siblingFields[fieldKey.replace(parentFieldPath, '')] = fields[fieldKey].value;
+        }
+    });
+    return unflatten(siblingFields, { safe: true });
+};
+export default getSiblingData;

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

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

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

@@ -0,0 +1,308 @@
+/* eslint-disable jsx-a11y/no-noninteractive-element-interactions */
+import React, { useReducer, useEffect, useRef, useState, useCallback, } from 'react';
+import isDeepEqual from 'deep-equal';
+import { serialize } from 'object-to-formdata';
+import { useHistory } from 'react-router-dom';
+import { toast } from 'react-toastify';
+import { useAuth } from '../../utilities/Auth';
+import { useLocale } from '../../utilities/Locale';
+import { useDocumentInfo } from '../../utilities/DocumentInfo';
+import { requests } from '../../../api';
+import useThrottledEffect from '../../../hooks/useThrottledEffect';
+import fieldReducer from './fieldReducer';
+import initContextState from './initContextState';
+import reduceFieldsToValues from './reduceFieldsToValues';
+import getSiblingDataFunc from './getSiblingData';
+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 buildStateFromSchema from './buildStateFromSchema';
+import { useOperation } from '../../utilities/OperationProvider';
+const baseClass = 'form';
+const Form = (props) => {
+    const { disabled, onSubmit, method, action, handleResponse, onSuccess, children, className, redirect, disableSuccessStatus, initialState, // fully formed initial field state
+    initialData, // values only, paths are required as key - form should build initial state as convenience
+    waitForAutocomplete, log, } = props;
+    const history = useHistory();
+    const locale = useLocale();
+    const { refreshCookie, user } = useAuth();
+    const { id } = useDocumentInfo();
+    const operation = useOperation();
+    const [modified, setModified] = useState(false);
+    const [processing, setProcessing] = useState(false);
+    const [submitted, setSubmitted] = useState(false);
+    const [formattedInitialData, setFormattedInitialData] = useState(buildInitialState(initialData));
+    const formRef = useRef(null);
+    const contextRef = useRef({});
+    let initialFieldState = {};
+    if (formattedInitialData)
+        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);
+    contextRef.current.fields = fields;
+    const validateForm = useCallback(async () => {
+        const validatedFieldState = {};
+        let isValid = true;
+        const data = contextRef.current.getData();
+        const validationPromises = Object.entries(contextRef.current.fields).map(async ([path, field]) => {
+            const validatedField = {
+                ...field,
+                valid: true,
+            };
+            if (field.passesCondition !== false) {
+                let validationResult = true;
+                if (typeof field.validate === 'function') {
+                    validationResult = await field.validate(field.value, {
+                        data,
+                        siblingData: contextRef.current.getSiblingData(path),
+                        user,
+                        id,
+                        operation,
+                    });
+                }
+                if (typeof validationResult === 'string') {
+                    validatedField.errorMessage = validationResult;
+                    validatedField.valid = false;
+                    isValid = false;
+                }
+            }
+            validatedFieldState[path] = validatedField;
+        });
+        await Promise.all(validationPromises);
+        if (!isDeepEqual(contextRef.current.fields, validatedFieldState)) {
+            dispatchFields({ type: 'REPLACE_STATE', state: validatedFieldState });
+        }
+        return isValid;
+    }, [contextRef, id, user, operation]);
+    const submit = useCallback(async (options = {}, e) => {
+        const { overrides = {}, action: actionToUse = action, method: methodToUse = method, skipValidation, } = options;
+        if (disabled) {
+            if (e) {
+                e.preventDefault();
+            }
+            return;
+        }
+        if (e) {
+            e.stopPropagation();
+            e.preventDefault();
+        }
+        setProcessing(true);
+        if (waitForAutocomplete)
+            await wait(100);
+        const isValid = skipValidation ? true : await contextRef.current.validateForm();
+        setSubmitted(true);
+        // If not valid, prevent submission
+        if (!isValid) {
+            toast.error('Please correct invalid fields.');
+            setProcessing(false);
+            return;
+        }
+        // If submit handler comes through via props, run that
+        if (onSubmit) {
+            const data = {
+                ...reduceFieldsToValues(fields),
+                ...overrides,
+            };
+            onSubmit(fields, data);
+            return;
+        }
+        const formData = contextRef.current.createFormData(overrides);
+        try {
+            const res = await requests[methodToUse.toLowerCase()](actionToUse, {
+                body: formData,
+            });
+            setModified(false);
+            if (typeof handleResponse === 'function') {
+                handleResponse(res);
+                return;
+            }
+            setProcessing(false);
+            const contentType = res.headers.get('content-type');
+            const isJSON = contentType && contentType.indexOf('application/json') !== -1;
+            let json = {};
+            if (isJSON)
+                json = await res.json();
+            if (res.status < 400) {
+                setSubmitted(false);
+                if (typeof onSuccess === 'function')
+                    onSuccess(json);
+                if (redirect) {
+                    const destination = {
+                        pathname: redirect,
+                        state: {},
+                    };
+                    if (typeof json === 'object' && json.message && !disableSuccessStatus) {
+                        destination.state = {
+                            status: [
+                                {
+                                    message: json.message,
+                                    type: 'success',
+                                },
+                            ],
+                        };
+                    }
+                    history.push(destination);
+                }
+                else if (!disableSuccessStatus) {
+                    toast.success(json.message || 'Submission successful.', { autoClose: 3000 });
+                }
+            }
+            else {
+                contextRef.current = { ...contextRef.current }; // triggers rerender of all components that subscribe to form
+                if (json.message) {
+                    toast.error(json.message);
+                    return;
+                }
+                if (Array.isArray(json.errors)) {
+                    const [fieldErrors, nonFieldErrors] = json.errors.reduce(([fieldErrs, nonFieldErrs], err) => {
+                        const newFieldErrs = [];
+                        const newNonFieldErrs = [];
+                        if (err === null || err === void 0 ? void 0 : err.message) {
+                            newNonFieldErrs.push(err);
+                        }
+                        if (Array.isArray(err === null || err === void 0 ? void 0 : err.data)) {
+                            err.data.forEach((dataError) => {
+                                if (dataError === null || dataError === void 0 ? void 0 : dataError.field) {
+                                    newFieldErrs.push(dataError);
+                                }
+                                else {
+                                    newNonFieldErrs.push(dataError);
+                                }
+                            });
+                        }
+                        return [
+                            [
+                                ...fieldErrs,
+                                ...newFieldErrs,
+                            ],
+                            [
+                                ...nonFieldErrs,
+                                ...newNonFieldErrs,
+                            ],
+                        ];
+                    }, [[], []]);
+                    fieldErrors.forEach((err) => {
+                        var _a, _b;
+                        dispatchFields({
+                            ...(((_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,
+                            path: err.field,
+                        });
+                    });
+                    nonFieldErrors.forEach((err) => {
+                        toast.error(err.message || 'An unknown error occurred.');
+                    });
+                    return;
+                }
+                const message = errorMessages[res.status] || 'An unknown error occurrred.';
+                toast.error(message);
+            }
+            return;
+        }
+        catch (err) {
+            setProcessing(false);
+            toast.error(err);
+        }
+    }, [
+        action,
+        disableSuccessStatus,
+        disabled,
+        fields,
+        handleResponse,
+        history,
+        method,
+        onSubmit,
+        onSuccess,
+        redirect,
+        waitForAutocomplete,
+    ]);
+    const getFields = useCallback(() => contextRef.current.fields, [contextRef]);
+    const getField = useCallback((path) => contextRef.current.fields[path], [contextRef]);
+    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;
+        if (file) {
+            delete data.file;
+        }
+        const dataWithOverrides = {
+            ...data,
+            ...overrides,
+        };
+        const dataToSerialize = {
+            _payload: JSON.stringify(dataWithOverrides),
+            file,
+        };
+        // nullAsUndefineds is important to allow uploads and relationship fields to clear themselves
+        const formData = serialize(dataToSerialize, { indices: true, nullsAsUndefineds: false });
+        return formData;
+    }, [contextRef]);
+    const reset = useCallback(async (fieldSchema, data) => {
+        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;
+    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;
+    contextRef.current.setProcessing = setProcessing;
+    contextRef.current.setSubmitted = setSubmitted;
+    contextRef.current.disabled = disabled;
+    contextRef.current.formRef = formRef;
+    contextRef.current.reset = reset;
+    useEffect(() => {
+        if (initialState) {
+            contextRef.current = { ...initContextState };
+            dispatchFields({ type: 'REPLACE_STATE', state: initialState });
+        }
+    }, [initialState]);
+    useEffect(() => {
+        if (initialData) {
+            contextRef.current = { ...initContextState };
+            const builtState = buildInitialState(initialData);
+            setFormattedInitialData(builtState);
+            dispatchFields({ type: 'REPLACE_STATE', state: builtState });
+        }
+    }, [initialData]);
+    useThrottledEffect(() => {
+        refreshCookie();
+    }, 15000, [fields]);
+    useThrottledEffect(() => {
+        validateForm();
+    }, 1000, [validateForm, fields]);
+    useEffect(() => {
+        contextRef.current = { ...contextRef.current }; // triggers rerender of all components that subscribe to form
+        setModified(false);
+    }, [locale]);
+    const classes = [
+        className,
+        baseClass,
+    ].filter(Boolean).join(' ');
+    return (React.createElement("form", { noValidate: true, onSubmit: (e) => contextRef.current.submit({}, e), method: method, action: action, className: classes, ref: formRef },
+        React.createElement(FormContext.Provider, { value: contextRef.current },
+            React.createElement(FormWatchContext.Provider, { value: {
+                    fields,
+                    ...contextRef.current,
+                } },
+                React.createElement(SubmittedContext.Provider, { value: submitted },
+                    React.createElement(ProcessingContext.Provider, { value: processing },
+                        React.createElement(ModifiedContext.Provider, { value: modified }, children)))))));
+};
+export default Form;

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

@@ -0,0 +1,5 @@
+.form {
+  > * {
+    width: 100%;
+  }
+}

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

@@ -0,0 +1,3 @@
+import { Context } from './types';
+declare const initialContextState: Context;
+export default initialContextState;

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

@@ -0,0 +1,31 @@
+const submit = () => undefined;
+const getSiblingData = () => undefined;
+const getUnflattenedValues = () => ({});
+const dispatchFields = () => undefined;
+const validateForm = () => undefined;
+const createFormData = () => undefined;
+const setModified = () => undefined;
+const setProcessing = () => undefined;
+const setSubmitted = () => undefined;
+const reset = () => undefined;
+const initialContextState = {
+    getFields: () => ({}),
+    getField: () => undefined,
+    getData: () => undefined,
+    getSiblingData,
+    getDataByPath: () => undefined,
+    getUnflattenedValues,
+    validateForm,
+    createFormData,
+    submit,
+    dispatchFields,
+    setModified,
+    setProcessing,
+    setSubmitted,
+    initialState: {},
+    fields: {},
+    disabled: false,
+    formRef: null,
+    reset,
+};
+export default initialContextState;

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

@@ -0,0 +1,3 @@
+import { Data, Fields } from './types';
+declare const reduceFieldsToValues: (fields: Fields, unflatten?: boolean) => Data;
+export default reduceFieldsToValues;

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

@@ -0,0 +1,14 @@
+import { unflatten as flatleyUnflatten } from 'flatley';
+const reduceFieldsToValues = (fields, unflatten) => {
+    const data = {};
+    Object.keys(fields).forEach((key) => {
+        if (!fields[key].disableFormData) {
+            data[key] = fields[key].value;
+        }
+    });
+    if (unflatten) {
+        return flatleyUnflatten(data, { safe: true });
+    }
+    return data;
+};
+export default reduceFieldsToValues;