@evoke-platform/ui-components 1.0.0-dev.217 → 1.0.0-dev.219

package/dist/published/components/custom/Form/Common/Form.d.ts

@@ -0,0 +1,38 @@
+import { ApiServices, Obj, ObjectInstance, UserAccount } from '@evoke-platform/context';
+import { ReactNode } from 'react';
+import { Document, ObjectPropertyInputProps } from '../types';
+import '../../../../styles/form-component.css';
+declare type OnSaveResponse = {
+    isSuccessful: boolean;
+    error?: Record<string, unknown>;
+};
+export declare type FormProps = {
+    formKey?: number;
+    object?: Obj;
+    instance?: ObjectInstance;
+    document?: Document;
+    user?: UserAccount;
+    onSave?: (data: Record<string, unknown>, setSubmitting?: (value: boolean) => void) => Promise<OnSaveResponse>;
+    submitButtonLabel?: string;
+    isReadOnly?: boolean;
+    apiServices?: ApiServices | undefined;
+    navigateTo?: (path: string) => void;
+    closeModal?: () => void;
+    clearable?: boolean;
+    objectInputCommonProps?: ObjectPropertyInputProps;
+    actionId?: string;
+    onAutoSave?: (data: Record<string, unknown>) => Promise<{
+        isSuccessful: boolean;
+        error?: Record<string, unknown>;
+    }>;
+    actionType?: string;
+    associatedObject?: {
+        instanceId?: string;
+        propertyId?: string;
+    };
+    queryAddresses?: unknown;
+    fieldHeight?: 'small' | 'medium';
+    richTextEditor?: ReactNode;
+};
+export declare function Form(props: FormProps): JSX.Element;
+export default Form;

package/dist/published/components/custom/Form/Common/Form.js

@@ -0,0 +1,413 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import { useApp, useAuthenticationContext, } from '@evoke-platform/context';
+import { Components, Form as FormIO } from '@formio/react';
+import { flatten } from 'flat';
+import { isEqual, toPairs } from 'lodash';
+import React, { useEffect, useRef, useState } from 'react';
+import { Skeleton, Snackbar } from '../../../core';
+import { Box } from '../../../layout';
+import { ButtonComponent, DocumentComponent, FormFieldComponent, ImageComponent, ObjectComponent, RepeatableFieldComponent, UserComponent, ViewOnlyComponent, } from '../FormComponents';
+import { addObjectPropertiesToComponentProps, buildComponentPropsFromDocumentProperties, buildComponentPropsFromObjectProperties, convertFormToComponents, getFlattenEntries, getPrefixedUrl, } from '../utils';
+import '../../../../styles/form-component.css';
+const usePrevious = (value) => {
+    const ref = useRef();
+    useEffect(() => {
+        ref.current = value;
+    });
+    return ref.current;
+};
+export function Form(props) {
+    var _a;
+    const { clearable, closeModal, onSave, submitButtonLabel, instance, object, objectInputCommonProps, actionId, actionType, associatedObject, onAutoSave, apiServices, navigateTo, document, queryAddresses, user, isReadOnly, fieldHeight, richTextEditor, } = props;
+    const [formKey, setFormKey] = useState();
+    const [componentProps, setComponentProps] = useState([]);
+    const [snackbarError, setSnackbarError] = useState();
+    const prevFormKey = usePrevious(formKey);
+    const userAccount = user !== null && user !== void 0 ? user : (_a = useAuthenticationContext()) === null || _a === void 0 ? void 0 : _a.account;
+    const { defaultPages, findDefaultPageSlugFor } = useApp();
+    const rebuildFormComponents = () => {
+        const viewDetailsComponents = {
+            ViewOnlyBoolean: ViewOnlyComponent,
+            ViewOnlyDateTime: ViewOnlyComponent,
+            ViewOnlyDate: ViewOnlyComponent,
+            ViewOnlyDocument: DocumentComponent,
+            ViewOnlySelect: ViewOnlyComponent,
+            ViewOnlyMultiSelect: ViewOnlyComponent,
+            ViewOnlyObject: ViewOnlyComponent,
+            ViewOnlyUser: ViewOnlyComponent,
+            ViewOnlyTextField: ViewOnlyComponent,
+            ViewOnlyDecimal: ViewOnlyComponent,
+            ViewOnlyInteger: ViewOnlyComponent,
+            ViewOnlyRichText: richTextEditor,
+            ViewOnlySection: Components.components.fieldset,
+            ViewOnlyManyToManyRepeatableField: RepeatableFieldComponent,
+            ViewOnlyRepeatableField: RepeatableFieldComponent,
+            ViewOnlyImage: ImageComponent,
+            ViewOnlyTime: ViewOnlyComponent,
+        };
+        Components.setComponents(Object.assign(Object.assign(Object.assign({}, Components.components), { Boolean: FormFieldComponent, Columns: Components.components.columns, DateTime: FormFieldComponent, Date: FormFieldComponent, Select: FormFieldComponent, MultiSelect: FormFieldComponent, Object: ObjectComponent, User: UserComponent, TextField: FormFieldComponent, Decimal: FormFieldComponent, Document: DocumentComponent, Integer: FormFieldComponent, Buttons: ButtonComponent, Content: Components.components.content, RichText: richTextEditor, Section: Components.components.tabs, ManyToManyRepeatableField: RepeatableFieldComponent, RepeatableField: RepeatableFieldComponent, Image: ImageComponent, Time: FormFieldComponent }), (isReadOnly && viewDetailsComponents)));
+        buildComponents();
+    };
+    useEffect(() => {
+        // TODO: Check why formKey is not being set for create actions
+        if (((actionType === 'update' || actionType === 'delete') && !!instance) || !!document) {
+            setFormKey(Date.now());
+        }
+        rebuildFormComponents();
+    }, [object]);
+    useEffect(() => {
+        if (prevFormKey && formKey && formKey > prevFormKey && (!!instance || !!document)) {
+            buildComponents();
+        }
+    }, [formKey]);
+    const buildComponents = () => __awaiter(this, void 0, void 0, function* () {
+        var _b, _c, _d;
+        const action = (_b = object === null || object === void 0 ? void 0 : object.actions) === null || _b === void 0 ? void 0 : _b.find((action) => action.id === actionId);
+        let input;
+        const parameters = (associatedObject === null || associatedObject === void 0 ? void 0 : associatedObject.propertyId) && (action === null || action === void 0 ? void 0 : action.parameters)
+            ? action.parameters.filter((param) => param.id !== (associatedObject === null || associatedObject === void 0 ? void 0 : associatedObject.propertyId))
+            : action === null || action === void 0 ? void 0 : action.parameters;
+        if (parameters && object) {
+            input = ((_c = action === null || action === void 0 ? void 0 : action.form) === null || _c === void 0 ? void 0 : _c.entries)
+                ? convertFormToComponents(action.form.entries, parameters, object)
+                : parameters.filter((param) => { var _a; return (_a = object.properties) === null || _a === void 0 ? void 0 : _a.some((prop) => prop.id === param.id); });
+        }
+        else {
+            input = (_d = action === null || action === void 0 ? void 0 : action.inputProperties) !== null && _d !== void 0 ? _d : ((action === null || action === void 0 ? void 0 : action.type) === 'delete' ? [] : undefined);
+        }
+        let visibleObjectProperties = object === null || object === void 0 ? void 0 : object.properties;
+        if (associatedObject) {
+            // Eliminates the associated object's field from the form
+            visibleObjectProperties = visibleObjectProperties === null || visibleObjectProperties === void 0 ? void 0 : visibleObjectProperties.filter((property) => property.id !== associatedObject.propertyId);
+        }
+        let foundDefaultPages = defaultPages;
+        const relatedObjectProperties = visibleObjectProperties === null || visibleObjectProperties === void 0 ? void 0 : visibleObjectProperties.filter((property) => property.type === 'object');
+        if (relatedObjectProperties) {
+            foundDefaultPages = yield relatedObjectProperties.reduce((acc, property) => __awaiter(this, void 0, void 0, function* () {
+                const result = yield acc;
+                if (property.objectId && defaultPages && defaultPages[property.objectId]) {
+                    const slug = yield findDefaultPageSlugFor(property.objectId);
+                    if (slug) {
+                        return Object.assign(Object.assign({}, result), { [property.objectId]: slug });
+                    }
+                }
+                return result;
+            }), Promise.resolve({}));
+        }
+        const allDefaultPages = Object.assign(Object.assign({}, defaultPages), foundDefaultPages);
+        if (input && visibleObjectProperties) {
+            if (input.length || (action === null || action === void 0 ? void 0 : action.type) !== 'delete') {
+                // formIO builder-configured input properties exist
+                const newComponentProps = yield addObjectPropertiesToComponentProps(visibleObjectProperties, input, instance, Object.assign(Object.assign({}, objectInputCommonProps), { defaultPages: allDefaultPages, navigateTo,
+                    apiServices, user: userAccount }), undefined, isReadOnly, allDefaultPages, navigateTo, queryAddresses, apiServices, !!closeModal, fieldHeight);
+                const components = isReadOnly ? newComponentProps : [...newComponentProps, BottomButtons];
+                setComponentProps(components);
+            }
+            else {
+                // this condition is used for the delete action's modal form
+                setComponentProps([
+                    ...(yield addObjectPropertiesToComponentProps(visibleObjectProperties, [
+                        {
+                            html: `<p>${(action === null || action === void 0 ? void 0 : action.type) === 'delete' ? 'This action cannot be undone.' : 'Are you sure?'}</p>`,
+                            label: 'Content',
+                            customClass: '',
+                            refreshOnChange: false,
+                            hidden: false,
+                            modalEdit: false,
+                            conditional: {
+                                show: null,
+                                when: null,
+                                eq: '',
+                            },
+                            type: 'Content',
+                            key: 'content',
+                            input: false,
+                            placeholder: '',
+                            prefix: '',
+                            suffix: '',
+                            multiple: false,
+                            defaultValue: null,
+                            protected: false,
+                            unique: false,
+                            persistent: true,
+                            clearOnHide: true,
+                            refreshOn: '',
+                            redrawOn: '',
+                            tableView: false,
+                            dataGridLabel: false,
+                            labelPosition: 'top',
+                            description: '',
+                            errorLabel: '',
+                            tooltip: '',
+                            hideLabel: false,
+                            tabindex: '',
+                            disabled: false,
+                            autofocus: false,
+                            dbIndex: false,
+                            customDefaultValue: '',
+                            calculateValue: '',
+                            calculateServer: false,
+                            widget: null,
+                            attributes: {},
+                            validateOn: 'change',
+                            validate: {
+                                required: false,
+                                custom: '',
+                                customPrivate: false,
+                                strictDateValidation: false,
+                                multiple: false,
+                                unique: false,
+                            },
+                            overlay: {
+                                style: '',
+                                left: '',
+                                top: '',
+                                width: '',
+                                height: '',
+                            },
+                            allowCalculateOverride: false,
+                            encrypted: false,
+                            showCharCount: false,
+                            showWordCount: false,
+                            properties: {},
+                            allowMultipleMasks: false,
+                            addons: [],
+                            id: 'eahbwo',
+                        },
+                    ], instance, Object.assign(Object.assign({}, objectInputCommonProps), { defaultPages: allDefaultPages, navigateTo,
+                        apiServices, user: userAccount }), undefined, undefined, undefined, undefined, undefined, undefined, !!closeModal, fieldHeight)),
+                    BottomButtons,
+                ]);
+            }
+        }
+        else if (object === null || object === void 0 ? void 0 : object.properties) {
+            // If form.io form is not configured and no inputProperties are
+            // set, use object properties to build form.
+            const propertiesInForm = object.properties.filter((prop) => prop.id !== (associatedObject === null || associatedObject === void 0 ? void 0 : associatedObject.propertyId) && ((action === null || action === void 0 ? void 0 : action.type) !== 'create' || prop.type !== 'document'));
+            setComponentProps([
+                ...buildComponentPropsFromObjectProperties(propertiesInForm, object.id, instance, Object.assign(Object.assign({}, objectInputCommonProps), { defaultPages: allDefaultPages, navigateTo,
+                    apiServices,
+                    user }), !!action, undefined, isReadOnly, queryAddresses, !!closeModal, fieldHeight),
+                !isReadOnly && BottomButtons,
+            ]);
+        }
+        else if (document) {
+            const documentProperties = toPairs(flatten(document !== null && document !== void 0 ? document : {}));
+            setComponentProps([
+                ...buildComponentPropsFromDocumentProperties(documentProperties, isReadOnly, undefined, fieldHeight),
+                !isReadOnly && BottomButtons,
+            ]);
+        }
+    });
+    const uploadDocuments = (files, metadata) => __awaiter(this, void 0, void 0, function* () {
+        var _e;
+        const allDocuments = [];
+        const formData = new FormData();
+        for (const [index, file] of files.entries()) {
+            if ('size' in file) {
+                formData.append(`files[${index}]`, file);
+            }
+            else {
+                allDocuments.push(file);
+            }
+        }
+        if (metadata) {
+            for (const [key, value] of Object.entries(metadata)) {
+                formData.append(key, value);
+            }
+        }
+        const docs = yield (apiServices === null || apiServices === void 0 ? void 0 : apiServices.post(getPrefixedUrl(`/objects/${object === null || object === void 0 ? void 0 : object.id}/instances/${instance === null || instance === void 0 ? void 0 : instance.id}/documents`), formData));
+        return allDocuments.concat((_e = docs === null || docs === void 0 ? void 0 : docs.map((doc) => ({ id: doc.id, name: doc.name }))) !== null && _e !== void 0 ? _e : []);
+    });
+    const saveDocuments = (submittedFields, action) => __awaiter(this, void 0, void 0, function* () {
+        var _f, _g, _h, _j;
+        const documentProperties = (action === null || action === void 0 ? void 0 : action.parameters)
+            ? action.parameters.filter((param) => param.type === 'document')
+            : (_f = object === null || object === void 0 ? void 0 : object.properties) === null || _f === void 0 ? void 0 : _f.filter((prop) => prop.type === 'document');
+        let allEntries = null;
+        for (const docProperty of documentProperties !== null && documentProperties !== void 0 ? documentProperties : []) {
+            const value = submittedFields[docProperty.id];
+            // skip if the document list did not change
+            if (value === undefined || !instance || isEqual(instance === null || instance === void 0 ? void 0 : instance[docProperty.id], value)) {
+                continue;
+            }
+            let savedDocuments = null;
+            if (value && value.some((doc) => doc instanceof File)) {
+                if (!allEntries) {
+                    allEntries = (_j = getFlattenEntries((_h = (_g = action === null || action === void 0 ? void 0 : action.form) === null || _g === void 0 ? void 0 : _g.entries) !== null && _h !== void 0 ? _h : [])) !== null && _j !== void 0 ? _j : [];
+                }
+                const docEntry = allEntries.find((entry) => entry.parameterId === docProperty.id);
+                try {
+                    savedDocuments = yield uploadDocuments(value, Object.assign({ type: '', view_permission: '' }, docEntry === null || docEntry === void 0 ? void 0 : docEntry.documentMetadata));
+                }
+                catch (error) {
+                    setSnackbarError({ message: `An error occurred while uploading associated documents` });
+                    return false;
+                }
+            }
+            else if (value) {
+                // cast as confirmed above that no element in value is a File
+                savedDocuments = value;
+            }
+            submittedFields[docProperty.id] = savedDocuments;
+        }
+        return true;
+    });
+    const deleteDocuments = (submittedFields, requestSuccess, action) => __awaiter(this, void 0, void 0, function* () {
+        var _k, _l, _m, _o;
+        const documentProperties = (action === null || action === void 0 ? void 0 : action.parameters)
+            ? action.parameters.filter((param) => param.type === 'document')
+            : (_k = object === null || object === void 0 ? void 0 : object.properties) === null || _k === void 0 ? void 0 : _k.filter((prop) => prop.type === 'document');
+        for (const docProperty of documentProperties !== null && documentProperties !== void 0 ? documentProperties : []) {
+            const savedValue = submittedFields[docProperty.id];
+            const originalValue = instance === null || instance === void 0 ? void 0 : instance[docProperty.id];
+            const documentsToRemove = requestSuccess
+                ? (_l = originalValue === null || originalValue === void 0 ? void 0 : originalValue.filter((file) => !(savedValue === null || savedValue === void 0 ? void 0 : savedValue.some((f) => f.id === file.id)))) !== null && _l !== void 0 ? _l : []
+                : (_m = savedValue === null || savedValue === void 0 ? void 0 : savedValue.filter((file) => !(originalValue === null || originalValue === void 0 ? void 0 : originalValue.some((f) => f.id === file.id)))) !== null && _m !== void 0 ? _m : [];
+            for (const doc of documentsToRemove) {
+                try {
+                    yield (apiServices === null || apiServices === void 0 ? void 0 : apiServices.delete(getPrefixedUrl(`/objects/${object === null || object === void 0 ? void 0 : object.id}/instances/${instance === null || instance === void 0 ? void 0 : instance.id}/documents/${doc.id}`)));
+                }
+                catch (error) {
+                    if (((_o = error.response) === null || _o === void 0 ? void 0 : _o.status) !== 404) {
+                        setSnackbarError({ message: `An error occurred while removing document '${doc.name}'` });
+                    }
+                }
+            }
+        }
+    });
+    const saveHandler = (submission, type, setError, setSubmitting) => __awaiter(this, void 0, void 0, function* () {
+        var _p;
+        const submittedFields = {};
+        for (const field in submission.data) {
+            const value = submission.data[field];
+            if (value === '' || (Array.isArray(value) && !value.length)) {
+                submittedFields[field] = null;
+            }
+            else {
+                submittedFields[field] = value;
+            }
+        }
+        //OPTIMIZATION TODO: See if type can be inferred from the event target
+        if (type === 'submit') {
+            if (onSave) {
+                const action = (_p = object === null || object === void 0 ? void 0 : object.actions) === null || _p === void 0 ? void 0 : _p.find((action) => action.id === actionId);
+                const documentsUploaded = yield saveDocuments(submittedFields, action);
+                if (documentsUploaded) {
+                    try {
+                        const { isSuccessful, error } = yield onSave(submittedFields, setSubmitting);
+                        setError(error);
+                        // Delete the documents that were removed if save was successful,
+                        // otherwise delete the documents that were uploaded.
+                        yield deleteDocuments(submittedFields, isSuccessful, action);
+                        !error && !closeModal && setFormKey(Date.now());
+                    }
+                    catch (err) {
+                        // If the save fails, delete the documents that were just uploaded
+                        yield deleteDocuments(submittedFields, false, action);
+                    }
+                }
+            }
+        }
+        else {
+            if (onAutoSave) {
+                const documentsUploaded = yield saveDocuments(submittedFields);
+                if (!documentsUploaded) {
+                    return;
+                }
+                try {
+                    const { isSuccessful, error } = yield onAutoSave(submittedFields);
+                    // Delete the documents that were removed if save was successful,
+                    // otherwise delete the documents that were uploaded.
+                    deleteDocuments(submittedFields, isSuccessful);
+                    !error && !closeModal && setFormKey(Date.now());
+                }
+                catch (err) {
+                    // If the save fails, delete the documents that were just uploaded
+                    deleteDocuments(submittedFields, false);
+                }
+            }
+        }
+    });
+    const BottomButtons = {
+        type: 'Buttons',
+        key: 'cancel-submit',
+        variant: 'contained',
+        components: [
+            {
+                type: 'button',
+                action: 'cancel',
+                label: `${closeModal ? 'Cancel' : 'Discard Changes'}`,
+                style: {
+                    margin: '5px',
+                    color: '#000000',
+                    border: '1px solid rgb(206, 212, 218)',
+                    '&:hover': { backgroundColor: '#f2f4f7', border: '1px solid rgb(206, 212, 218)' },
+                },
+                key: 'cancel',
+                variant: 'outlined',
+                onClick: () => {
+                    clearable && setFormKey(Date.now());
+                    closeModal && closeModal();
+                },
+            },
+            onAutoSave
+                ? {
+                    type: 'button',
+                    action: 'save-draft',
+                    label: 'Save as draft',
+                    key: 'save-draft',
+                    variant: 'outlined',
+                    isModal: !!closeModal,
+                    onClick: (data, setError, setSubmitting) => __awaiter(this, void 0, void 0, function* () { return yield saveHandler(data, 'draft', setError, setSubmitting); }),
+                    style: { lineHeight: '2.75', margin: '5px', padding: '0 10px' },
+                }
+                : undefined,
+            {
+                type: 'button',
+                action: 'submit',
+                label: submitButtonLabel || 'Submit',
+                key: 'submit',
+                style: {
+                    lineHeight: '2.75',
+                    margin: '5px 0 5px 5px',
+                    padding: '0 23px',
+                    backgroundColor: props.actionType === 'delete' ? '#A12723' : 'default',
+                    ':hover': {
+                        backgroundColor: props.actionType === 'delete' ? '#8c2421' : 'default',
+                    },
+                },
+                variant: 'contained',
+                isModal: !!closeModal,
+                onClick: (data, setError, setSubmitting) => {
+                    saveHandler(data, 'submit', setError, setSubmitting);
+                },
+            },
+        ],
+    };
+    return (React.createElement("div", null,
+        componentProps.length ? (React.createElement(FormIO, { key: closeModal ? undefined : formKey, form: {
+                display: 'form',
+                components: componentProps,
+            } })) : (React.createElement(Box, null,
+            React.createElement(Box, { display: 'flex', width: '100%', justifyContent: 'space-between' },
+                React.createElement(Skeleton, { width: '78%', sx: { borderRadius: '8px', height: '40px' } }),
+                React.createElement(Skeleton, { width: '20%', sx: { borderRadius: '8px', height: '40px' } })),
+            React.createElement(Box, { display: 'flex', width: '100%', justifyContent: 'space-between' },
+                React.createElement(Skeleton, { width: '32%', sx: { borderRadius: '8px', height: '40px' } }),
+                React.createElement(Skeleton, { width: '33%', sx: { borderRadius: '8px', height: '40px' } }),
+                React.createElement(Skeleton, { width: '32%', sx: { borderRadius: '8px', height: '40px' } })),
+            React.createElement(Box, { display: 'flex', width: '100%', justifyContent: 'space-between' },
+                React.createElement(Skeleton, { width: '48%', sx: { borderRadius: '8px', height: '40px' } }),
+                React.createElement(Skeleton, { width: '48%', sx: { borderRadius: '8px', height: '40px' } })))),
+        React.createElement(Snackbar, { open: !!(snackbarError === null || snackbarError === void 0 ? void 0 : snackbarError.message), handleClose: () => setSnackbarError(undefined), message: snackbarError === null || snackbarError === void 0 ? void 0 : snackbarError.message, error: true })));
+}
+export default Form;

package/dist/published/components/custom/Form/Common/FormComponentWrapper.d.ts

@@ -0,0 +1,26 @@
+import React from 'react';
+declare type FormComponentWrapperProps = {
+    inputId: string;
+    label: string;
+    description?: string;
+    tooltip?: string;
+    prefix?: string;
+    suffix?: string;
+    value?: string;
+    validate: {
+        maxLength?: number;
+        required?: boolean;
+    };
+    errorMessage?: string;
+    showCharCount?: boolean;
+    type: string;
+    viewOnly: boolean;
+    children: React.ReactNode;
+    key: string;
+};
+/**
+ * A component that wraps a FormField and adds a label,
+ * description, tooltip, prefix, suffix and word/char counts
+ */
+export declare const FormComponentWrapper: (props: FormComponentWrapperProps) => JSX.Element;
+export {};

package/dist/published/components/custom/Form/Common/FormComponentWrapper.js

@@ -0,0 +1,79 @@
+import React, { useEffect, useRef, useState } from 'react';
+import { ErrorRounded, Help } from '../../../../icons';
+import { IconButton, Tooltip, Typography } from '../../../core';
+import { Box } from '../../../layout';
+const underFieldStyles = {
+    display: 'flex',
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+};
+const descriptionStyles = {
+    color: '#999',
+    whiteSpace: 'normal',
+    paddingBottom: '4px',
+};
+const PrefixSuffix = (props) => {
+    const { prefix, suffix, height } = props;
+    const text = prefix || suffix;
+    const prefixSuffixStyles = Object.assign(Object.assign(Object.assign({ display: 'inline-flex', alignItems: 'center', background: '#f5f5f5', padding: '5px', border: '1px solid #ccc' }, (suffix && {
+        borderTopRightRadius: '5px',
+        borderBottomRightRadius: '5px',
+        marginLeft: '-5px',
+        paddingLeft: '10px',
+    })), (prefix && {
+        borderTopLeftRadius: '5px',
+        borderBottomLeftRadius: '5px',
+        marginRight: '-5px',
+        paddingRight: '10px',
+    })), { height: height });
+    if (!prefix && !suffix)
+        return null;
+    return (React.createElement(Box, { sx: prefixSuffixStyles },
+        React.createElement(Typography, null, text)));
+};
+/**
+ * A component that wraps a FormField and adds a label,
+ * description, tooltip, prefix, suffix and word/char counts
+ */
+export const FormComponentWrapper = (props) => {
+    const { inputId, label, description, tooltip, prefix, suffix, value, validate, errorMessage, showCharCount, type, viewOnly, children, } = props;
+    const [fieldHeight, setFieldHeight] = useState(40);
+    const { maxLength } = validate;
+    const fieldRef = useRef(null);
+    useEffect(() => {
+        // Get the height of the field to sync with height of prefix and suffix.
+        const fieldElement = fieldRef.current;
+        if (fieldElement && (prefix || suffix)) {
+            setFieldHeight(fieldElement.getBoundingClientRect().height - 12);
+        }
+    }, [fieldRef]);
+    let charCount = value && type === 'TextField' ? value.length : 0;
+    if (maxLength)
+        charCount = maxLength - charCount;
+    return (React.createElement(Box, null,
+        React.createElement(Box, { sx: { padding: '10px 0' } },
+            React.createElement(Typography, { variant: "body2", color: viewOnly ? 'textSecondary' : 'textPrimary', component: "label", htmlFor: inputId },
+                label,
+                validate.required ? (React.createElement(Typography, { component: 'span', sx: { color: 'red', fontSize: '12px' } },
+                    ` *`,
+                    ' ')) : null,
+                tooltip && (React.createElement(Tooltip, { placement: "right", title: tooltip },
+                    React.createElement(IconButton, null,
+                        React.createElement(Help, { sx: { fontSize: '14px' } }))))),
+            React.createElement(Typography, { variant: "caption", sx: descriptionStyles }, description),
+            React.createElement(Box, { sx: { display: 'flex', flexDirection: 'row' } },
+                React.createElement(PrefixSuffix, { prefix: prefix, height: fieldHeight }),
+                React.createElement(Box, { sx: { width: '100%', paddingTop: '6px' } }, children),
+                React.createElement(PrefixSuffix, { suffix: suffix, height: fieldHeight }))),
+        React.createElement(Box, { sx: underFieldStyles },
+            React.createElement(Box, { sx: { width: '100%', display: 'flex', justifyContent: 'space-between' } },
+                errorMessage ? (React.createElement(Typography, { sx: { color: 'red', whiteSpace: 'normal', display: 'flex', alignItems: 'center' }, variant: "caption" },
+                    React.createElement(ErrorRounded, { sx: { fontSize: '15px', paddingRight: '4px' } }),
+                    errorMessage)) : (React.createElement("span", null)),
+                showCharCount && (React.createElement(Typography, { variant: "caption", sx: { color: '#999', whiteSpace: 'nowrap' } },
+                    charCount,
+                    " ",
+                    charCount === 1 ? 'character' : 'characters',
+                    !!maxLength && ` remaining`))))));
+};

package/dist/published/components/custom/Form/Common/index.d.ts

@@ -0,0 +1,2 @@
+export * from './Form';
+export * from './FormComponentWrapper';

package/dist/published/components/custom/Form/Common/index.js

@@ -0,0 +1,2 @@
+export * from './Form';
+export * from './FormComponentWrapper';

package/dist/published/components/custom/Form/FormComponents/ButtonComponent.d.ts

@@ -0,0 +1,37 @@
+/// <reference types="react" />
+import { ReactComponent } from '@formio/react';
+import { Root } from 'react-dom/client';
+interface ButtonComponentProps {
+    components: Button[];
+}
+declare type Button = {
+    action: 'cancel' | 'submit' | 'save-draft';
+    label: string;
+    onClick: (event?: any, setError?: (error?: Record<string, unknown>) => void, isSubmitting?: (val: boolean) => void) => void;
+    variant: 'contained' | 'outlined' | 'text';
+    style: any;
+    isModal: boolean;
+};
+declare type ButtonProps = {
+    button: any;
+    handleSubmit: (setSubmitting: (value: boolean) => void) => void;
+    handleCancel: (event: any) => void;
+    handleSaveDraft: (setSubmitting: (value: boolean) => void) => void;
+    setButtonKey: (value: string) => void;
+};
+export declare class ButtonComponent extends ReactComponent {
+    [x: string]: any;
+    component: ButtonComponentProps;
+    componentRoot?: Root;
+    constructor(component: ButtonComponentProps, options: any, data: any);
+    setError(error?: Record<string, unknown>): void;
+    getButton: (buttonAction: 'cancel' | 'submit' | 'save-draft') => Button | undefined;
+    handleCancel: (event: any) => void;
+    handleSaveDraft: (setSubmitting: (value: boolean) => void) => void;
+    handleSubmit: (setSubmitting: (value: boolean) => void) => void;
+    scrollIntoViewWithOffset: (el: any, offset: number) => void;
+    setButtonKey: (value: string) => void;
+    attachReact(element: Element): void;
+}
+declare const Button: (props: ButtonProps) => JSX.Element;
+export {};