payload 0.20.0 → 0.20.3-beta.0

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;

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

@@ -0,0 +1,78 @@
+import React from 'react';
+import { Field as FieldConfig, Condition, Validate } from '../../../../fields/config/types';
+export declare type Field = {
+    value: unknown;
+    initialValue: unknown;
+    errorMessage?: string;
+    valid: boolean;
+    validate?: Validate;
+    disableFormData?: boolean;
+    condition?: Condition;
+    passesCondition?: boolean;
+};
+export declare type Fields = {
+    [path: string]: Field;
+};
+export declare type Data = {
+    [key: string]: any;
+};
+export declare type Preferences = {
+    [key: string]: unknown;
+};
+export declare type Props = {
+    disabled?: boolean;
+    onSubmit?: (fields: Fields, data: Data) => void;
+    method?: 'get' | 'put' | 'delete' | 'post';
+    action?: string;
+    handleResponse?: (res: Response) => void;
+    onSuccess?: (json: unknown) => void;
+    className?: string;
+    redirect?: string;
+    disableSuccessStatus?: boolean;
+    initialState?: Fields;
+    initialData?: Data;
+    waitForAutocomplete?: boolean;
+    log?: boolean;
+    validationOperation?: 'create' | 'update';
+    children?: React.ReactNode;
+};
+export declare type SubmitOptions = {
+    action?: string;
+    method?: string;
+    overrides?: Record<string, unknown>;
+    skipValidation?: boolean;
+};
+export declare type DispatchFields = React.Dispatch<any>;
+export declare type Submit = (options?: SubmitOptions, e?: React.FormEvent<HTMLFormElement>) => 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 Context = {
+    dispatchFields: DispatchFields;
+    submit: Submit;
+    fields: Fields;
+    initialState: Fields;
+    validateForm: ValidateForm;
+    createFormData: CreateFormData;
+    disabled: boolean;
+    getFields: GetFields;
+    getField: GetField;
+    getData: GetData;
+    getSiblingData: GetSiblingData;
+    getUnflattenedValues: GetUnflattenedValues;
+    getDataByPath: GetDataByPath;
+    setModified: SetModified;
+    setProcessing: SetProcessing;
+    setSubmitted: SetSubmitted;
+    formRef: React.MutableRefObject<HTMLFormElement>;
+    reset: Reset;
+};

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

@@ -0,0 +1,3 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidHlwZXMuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi9zcmMvYWRtaW4vY29tcG9uZW50cy9mb3Jtcy9Gb3JtL3R5cGVzLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiIifQ==

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

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

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

@@ -0,0 +1,12 @@
+import React from 'react';
+import './index.scss';
+const Label = (props) => {
+    const { label, required = false, htmlFor, } = props;
+    if (label) {
+        return (React.createElement("label", { htmlFor: htmlFor, className: "field-label" },
+            label,
+            required && React.createElement("span", { className: "required" }, "*")));
+    }
+    return null;
+};
+export default Label;

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

@@ -0,0 +1,13 @@
+@import '../../../scss/styles.scss';
+
+label.field-label {
+  display: flex;
+  padding-bottom: base(.25);
+  color: var(--theme-elevation-800);
+
+  .required {
+    color: var(--theme-error-500);
+    margin-left: base(.25);
+    margin-right: auto;
+  }
+}

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

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+export declare type Props = {
+    label?: string | false | JSX.Element;
+    required?: boolean;
+    htmlFor?: string;
+};

package/dist/admin/components/forms/Label/types.js

@@ -0,0 +1 @@
+export {};

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

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

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

@@ -0,0 +1,77 @@
+import React, { useEffect, useState } from 'react';
+import RenderCustomComponent from '../../utilities/RenderCustomComponent';
+import useIntersect from '../../../hooks/useIntersect';
+import { fieldAffectsData, fieldIsPresentationalOnly } from '../../../../fields/config/types';
+import { useOperation } from '../../utilities/OperationProvider';
+const baseClass = 'render-fields';
+const intersectionObserverOptions = {
+    rootMargin: '1000px',
+};
+const RenderFields = (props) => {
+    var _a;
+    const { fieldSchema, fieldTypes, filter, permissions, readOnly: readOnlyOverride, className, forceRender, } = props;
+    const [hasRendered, setHasRendered] = useState(false);
+    const [intersectionRef, entry] = useIntersect(intersectionObserverOptions);
+    const operation = useOperation();
+    const isIntersecting = Boolean(entry === null || entry === void 0 ? void 0 : entry.isIntersecting);
+    const isAboveViewport = ((_a = entry === null || entry === void 0 ? void 0 : entry.boundingClientRect) === null || _a === void 0 ? void 0 : _a.top) < 0;
+    const shouldRender = forceRender || isIntersecting || isAboveViewport;
+    useEffect(() => {
+        if (shouldRender && !hasRendered) {
+            setHasRendered(true);
+        }
+    }, [shouldRender, hasRendered]);
+    const classes = [
+        baseClass,
+        className,
+    ].filter(Boolean).join(' ');
+    if (fieldSchema) {
+        return (React.createElement("div", { ref: intersectionRef, className: classes }, hasRendered && (fieldSchema.map((field, i) => {
+            var _a, _b, _c, _d, _e, _f, _g, _h;
+            const fieldIsPresentational = fieldIsPresentationalOnly(field);
+            let FieldComponent = fieldTypes[field.type];
+            if (fieldIsPresentational || (!(field === null || field === void 0 ? void 0 : field.hidden) && ((_a = field === null || field === void 0 ? void 0 : field.admin) === null || _a === void 0 ? void 0 : _a.disabled) !== true)) {
+                if ((filter && typeof filter === 'function' && filter(field)) || !filter) {
+                    if (fieldIsPresentational) {
+                        return (React.createElement(FieldComponent, { ...field, key: i }));
+                    }
+                    if ((_b = field === null || field === void 0 ? void 0 : field.admin) === null || _b === void 0 ? void 0 : _b.hidden) {
+                        FieldComponent = fieldTypes.hidden;
+                    }
+                    const isFieldAffectingData = fieldAffectsData(field);
+                    const fieldPermissions = isFieldAffectingData ? permissions === null || permissions === void 0 ? void 0 : permissions[field.name] : permissions;
+                    let { admin: { readOnly } = {} } = field;
+                    if (readOnlyOverride && readOnly !== false)
+                        readOnly = true;
+                    if ((isFieldAffectingData && ((_d = (_c = permissions === null || permissions === void 0 ? void 0 : permissions[field === null || field === void 0 ? void 0 : field.name]) === null || _c === void 0 ? void 0 : _c.read) === null || _d === void 0 ? void 0 : _d.permission) !== false) || !isFieldAffectingData) {
+                        if (isFieldAffectingData && ((_f = (_e = permissions === null || permissions === void 0 ? void 0 : permissions[field === null || field === void 0 ? void 0 : field.name]) === null || _e === void 0 ? void 0 : _e[operation]) === null || _f === void 0 ? void 0 : _f.permission) === false) {
+                            readOnly = true;
+                        }
+                        if (FieldComponent) {
+                            return (React.createElement(RenderCustomComponent, { key: i, CustomComponent: (_h = (_g = field === null || field === void 0 ? void 0 : field.admin) === null || _g === void 0 ? void 0 : _g.components) === null || _h === void 0 ? void 0 : _h.Field, DefaultComponent: FieldComponent, componentProps: {
+                                    ...field,
+                                    path: field.path || (isFieldAffectingData ? field.name : undefined),
+                                    fieldTypes,
+                                    admin: {
+                                        ...(field.admin || {}),
+                                        readOnly,
+                                    },
+                                    permissions: fieldPermissions,
+                                } }));
+                        }
+                        return (React.createElement("div", { className: "missing-field", key: i },
+                            "No matched field found for",
+                            ' ',
+                            "\"",
+                            field.label,
+                            "\""));
+                    }
+                }
+                return null;
+            }
+            return null;
+        }))));
+    }
+    return null;
+};
+export default RenderFields;

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

@@ -0,0 +1,14 @@
+import { FieldPermissions } from '../../../../auth/types';
+import { FieldWithPath, Field } from '../../../../fields/config/types';
+import { FieldTypes } from '../field-types';
+export declare type Props = {
+    className?: string;
+    readOnly?: boolean;
+    forceRender?: boolean;
+    permissions?: {
+        [field: string]: FieldPermissions;
+    };
+    filter?: (field: Field) => boolean;
+    fieldSchema: FieldWithPath[];
+    fieldTypes: FieldTypes;
+};

package/dist/admin/components/forms/RenderFields/types.js

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,5 @@
+import React from 'react';
+import { Props } from '../../elements/Button/types';
+import './index.scss';
+declare const FormSubmit: React.FC<Props>;
+export default FormSubmit;

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

@@ -0,0 +1,13 @@
+import React from 'react';
+import { useForm, useFormProcessing } from '../Form/context';
+import Button from '../../elements/Button';
+import './index.scss';
+const baseClass = 'form-submit';
+const FormSubmit = (props) => {
+    const { children, buttonId: id, disabled: disabledFromProps, type = 'submit' } = props;
+    const processing = useFormProcessing();
+    const { disabled } = useForm();
+    return (React.createElement("div", { className: baseClass },
+        React.createElement(Button, { ...props, id: id, type: type, disabled: disabledFromProps || processing || disabled ? true : undefined }, children)));
+};
+export default FormSubmit;

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

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

package/dist/admin/components/forms/field-types/Array/Array.d.ts

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