@evoke-platform/ui-components 1.0.0-dev.126 → 1.0.0-dev.128

package/dist/published/components/core/Autocomplete/Autocomplete.js

@@ -29,10 +29,10 @@ const Autocomplete = (props) => {
     const isError = props.error && (props.required || props.errorMessage);
     if (!!props.label && props.labelPlacement === 'outside-top') {
         return (React.createElement(UIThemeProvider, null,
-            React.createElement(InputLabel, { "data-testid": "label-outside", htmlFor: (_b = (_a = props.label) === null || _a === void 0 ? void 0 : _a.toString()) !== null && _b !== void 0 ? _b : '', sx: { paddingBottom: props.instructionText ? '0px' : '3px', fontSize: '14px' } }, (_c = props.label) !== null && _c !== void 0 ? _c : '',
+            React.createElement(InputLabel, { "data-testid": "label-outside", htmlFor: (_b = (_a = props.label) === null || _a === void 0 ? void 0 : _a.toString()) !== null && _b !== void 0 ? _b : '', sx: { paddingBottom: '0px', fontSize: '14px' } }, (_c = props.label) !== null && _c !== void 0 ? _c : '',
                 " ",
                 props.required ? React.createElement("span", { style: { color: 'red' } }, "*") : null),
-            props.instructionText && React.createElement(Typography, { variant: 'caption' }, props.instructionText),
+            props.instructionText && React.createElement(Typography, { fontSize: '10px', lineHeight: '14px' }, props.instructionText),
             React.createElement(MUIAutocomplete, Object.assign({}, props, { sx: Object.assign({ '& fieldset': { borderRadius: '8px', borderColor: isError ? 'red' : undefined } }, props.sx), options: sortedOptions, popupIcon: (_d = props.popupIcon) !== null && _d !== void 0 ? _d : React.createElement(ExpandMore, null) })),
             isError && React.createElement(FieldError, { required: props.required, label: props.errorMessage })));
     }

package/dist/published/components/custom/CriteriaBuilder/CriteriaBuilder.d.ts

@@ -15,7 +15,7 @@ export declare type ObjectProperty = {
 declare type CustomValueEditorProps = ValueEditorProps & {
     values?: AutocompleteOption[] | any[];
 };
-declare type Operator = ('=' | '!=' | '<' | '>' | '<=' | '>=' | 'contains' | 'beginsWith' | 'endsWith' | 'doesNotContain' | 'doesNotBeginWith' | 'doesNotEndWith' | 'null' | 'notNull' | 'in' | 'notIn' | 'between' | 'notBetween');
+declare type Operator = '=' | '!=' | '<' | '>' | '<=' | '>=' | 'contains' | 'beginsWith' | 'endsWith' | 'doesNotContain' | 'doesNotBeginWith' | 'doesNotEndWith' | 'null' | 'notNull' | 'in' | 'notIn' | 'between' | 'notBetween';
 declare type CriteriaInputProps = {
     properties: ObjectProperty[];
     setCriteria: Function;

package/dist/published/components/custom/CriteriaBuilder/CriteriaBuilder.js

@@ -140,6 +140,7 @@ const dynamicContentInputEditor = (props) => {
     return determineValueEditor(valueEditor, props);
 };
 const determineValueEditor = (baseValueEditor, props) => {
+    var _a, _b;
     const { handleOnChange, value, values, type, operator, inputType } = props;
     const disabled = ['null', 'notNull'].includes(operator);
     let valueEditor = baseValueEditor;
@@ -151,9 +152,35 @@ const determineValueEditor = (baseValueEditor, props) => {
                     }, renderInput: (params) => (React.createElement(TextField, Object.assign({}, params, { placeholder: "Value", size: "small", style: { width: '33%' } }))) })));
             break;
         case 'integer':
-            valueEditor = (React.createElement(TextField, { value: ['null', 'notNull'].includes(operator) ? '' : value, disabled: ['null', 'notNull'].includes(operator), onChange: (e) => {
-                    handleOnChange(isNaN(parseInt(e.target.value)) ? '' : parseInt(e.target.value));
-                }, type: "number", placeholder: "Value", size: "small", sx: { width: '33%' } }));
+            {
+                const DynamicContentInput = (_b = (_a = props.context) === null || _a === void 0 ? void 0 : _a.dynamicContentInput) === null || _b === void 0 ? void 0 : _b.component;
+                if (DynamicContentInput) {
+                    if ((operator === 'in' || operator === 'notIn') && type === 'select' && values) {
+                        valueEditor = (React.createElement(Autocomplete, { multiple: true, options: values || [], getOptionLabel: (option) => (option.label ? option.label : ''), value: Array.isArray(value) ? (disabled ? [] : value) : [], disabled: disabled, onChange: (event, newValue) => {
+                                const uniqueSelections = Array.from(new Set(newValue.map((item) => item.label))).map((label) => {
+                                    return newValue.find((item) => item.label === label);
+                                });
+                                handleOnChange(uniqueSelections.length ? uniqueSelections : '');
+                            }, isOptionEqualToValue: (option, value) => {
+                                return option === value;
+                            }, renderInput: (params) => (React.createElement(TextField, Object.assign({ label: params.label }, params, { size: "small" }))), style: { width: '33%' } }));
+                    }
+                    else if (type === 'select' && values) {
+                        valueEditor = (React.createElement(Autocomplete, { freeSolo: true, options: values, multiple: ['in', 'notIn'].includes(operator), value: disabled ? '' : value, onChange: (event, newValue) => {
+                                handleOnChange(newValue === null || newValue === void 0 ? void 0 : newValue.label);
+                            }, disabled: disabled, isOptionEqualToValue: (option, value) => {
+                                return option === value;
+                            }, renderInput: (params) => (React.createElement(TextField, Object.assign({}, params, { size: "small", placeholder: 'Value', readOnly: value === '{{user.id}}', onChange: (event) => {
+                                    handleOnChange(event.target.value);
+                                } }))), style: { width: '33%' }, disableClearable: true }));
+                    }
+                }
+                else {
+                    valueEditor = (React.createElement(TextField, { value: ['null', 'notNull'].includes(operator) ? '' : value, disabled: ['null', 'notNull'].includes(operator), onChange: (e) => {
+                            handleOnChange(isNaN(parseInt(e.target.value)) ? '' : parseInt(e.target.value));
+                        }, type: "number", placeholder: "Value", size: "small", sx: { width: '33%' } }));
+                }
+            }
             break;
         case 'number':
             valueEditor = (React.createElement(TextField, { value: ['null', 'notNull'].includes(operator) ? '' : value, disabled: ['null', 'notNull'].includes(operator), onChange: (e) => {
@@ -267,11 +294,17 @@ const CriteriaBuilder = (props) => {
                         addRuleAction: customButton,
                         removeGroupAction: customDelete,
                         removeRuleAction: customDelete,
-                        valueEditor: enablePresetValues ? customValueEditorWithPresets : dynamicContentInput ? dynamicContentInputEditor : customValueEditor,
+                        valueEditor: enablePresetValues
+                            ? customValueEditorWithPresets
+                            : dynamicContentInput
+                                ? dynamicContentInputEditor
+                                : customValueEditor,
                     }, context: { dynamicContentInput: dynamicContentInput }, controlClassnames: {
                         queryBuilder: 'queryBuilder-branches',
                         ruleGroup: 'container',
-                    }, operators: operators ? ALL_OPERATORS.filter((o) => operators.includes(o.name)) : ALL_OPERATORS }))));
+                    }, operators: operators
+                        ? ALL_OPERATORS.filter((o) => operators.includes(o.name))
+                        : ALL_OPERATORS }))));
     }
     return React.createElement(React.Fragment, null);
 };

package/dist/published/components/custom/FormField/InputFieldComponent/InputFieldComponent.js

@@ -47,7 +47,7 @@ const InputFieldComponent = (props) => {
         setInputValue(selectValue);
     };
     const InputProps = property.type === 'number'
-        ? { inputComponent: NumericFormat, min, max }
+        ? { inputComponent: NumericFormat, inputProps: { min, max, readOnly } }
         : property.type === 'integer'
             ? { inputProps: { min, max } }
             : null;

package/dist/published/index.d.ts

@@ -1,6 +1,5 @@
 export { ClickAwayListener, FormControlProps, FormHelperTextProps, GridSize, Toolbar, createTheme, } from '@mui/material';
 export { CalendarPicker, DateTimePicker, MonthPicker, PickersDay, StaticDateTimePicker, StaticTimePicker, TimePicker, YearPicker, } from '@mui/x-date-pickers';
-export { FormComponents } from './form-components';
 export * from './components/core';
 export { CriteriaBuilder, DataGrid, FormField, MenuBar, MultiSelect, RepeatableField, UserAvatar, } from './components/custom';
 export { Box, Container, Grid, Stack } from './components/layout';

package/dist/published/index.js

@@ -1,6 +1,5 @@
 export { ClickAwayListener, Toolbar, createTheme, } from '@mui/material';
 export { CalendarPicker, DateTimePicker, MonthPicker, PickersDay, StaticDateTimePicker, StaticTimePicker, TimePicker, YearPicker, } from '@mui/x-date-pickers';
-export { FormComponents } from './form-components';
 export * from './components/core';
 export { CriteriaBuilder, DataGrid, FormField, MenuBar, MultiSelect, RepeatableField, UserAvatar, } from './components/custom';
 export { Box, Container, Grid, Stack } from './components/layout';

package/dist/published/stories/FormField.stories.d.ts

@@ -2,6 +2,7 @@ import { ComponentMeta, ComponentStory } from '@storybook/react';
 declare const _default: ComponentMeta<(props: import("../components/custom/FormField/FormField").FormFieldProps) => any>;
 export default _default;
 export declare const InputField: ComponentStory<(props: import("../components/custom/FormField/FormField").FormFieldProps) => any>;
+export declare const NumberField: ComponentStory<(props: import("../components/custom/FormField/FormField").FormFieldProps) => any>;
 export declare const MaskedInput: ComponentStory<(props: import("../components/custom/FormField/FormField").FormFieldProps) => any>;
 export declare const ChoicesSelectField: ComponentStory<(props: import("../components/custom/FormField/FormField").FormFieldProps) => any>;
 export declare const DatePickerField: ComponentStory<(props: import("../components/custom/FormField/FormField").FormFieldProps) => any>;

package/dist/published/stories/FormField.stories.js

@@ -26,6 +26,27 @@ InputField.args = {
     isMultiLineText: true,
     rows: 5,
 };
+export const NumberField = FormFieldTemplate.bind({});
+NumberField.args = {
+    property: {
+        id: 'price',
+        name: 'Price',
+        type: 'number',
+        // enum?: string[],
+        required: true,
+    },
+    onChange: (id, value) => console.log('id= ', id, 'Value= ', value),
+    defaultValue: '12.99',
+    error: false,
+    required: true,
+    readOnly: true,
+    selectOptions: [],
+    locale: 'string',
+    size: 'small',
+    placeholder: 'string',
+    isMultiLineText: true,
+    rows: 5,
+};
 export const MaskedInput = FormFieldTemplate.bind({});
 MaskedInput.args = {
     mask: '999-99-9999',

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@evoke-platform/ui-components",
-    "version": "1.0.0-dev.126",
+    "version": "1.0.0-dev.128",
     "description": "",
     "main": "dist/published/index.js",
     "module": "dist/published/index.js",

package/dist/published/form-components/Buttons.d.ts

@@ -1,10 +0,0 @@
-import { ReactComponent } from '@formio/react';
-declare class Buttons extends ReactComponent {
-    [x: string]: any;
-    constructor(component: any, options: any, data: any);
-    init(): void;
-    handleCancel: (event: any) => void;
-    handleSubmit: (event: any) => void;
-    attachReact(element: any): void;
-}
-export default Buttons;

package/dist/published/form-components/Buttons.js

@@ -1,37 +0,0 @@
-import React from 'react';
-import { Button as EvokeButton } from '../components/core';
-import { ReactComponent } from '@formio/react';
-import ReactDOM from 'react-dom';
-import { cloneDeep, isEmpty, isEqual } from 'lodash';
-class Buttons extends ReactComponent {
-    constructor(component, options, data) {
-        super(component, options, data);
-        this.handleCancel = (event) => {
-            this.component.components[0].onCancel(event);
-        };
-        this.handleSubmit = (event) => {
-            const submission = this.root.getValue();
-            this.emit('submitButton', submission);
-            if (isEmpty([...this.root.errors, ...this.root.customErrors])) {
-                this.component.components[1].onSubmit(submission);
-            }
-        };
-        this.handleCancel = this.handleCancel.bind(this);
-        this.handleSubmit = this.handleSubmit.bind(this);
-    }
-    init() {
-        const originalData = cloneDeep(this.root.data);
-        this.on('change', () => {
-            if (!isEqual(originalData, this.root.data)) {
-                this.root.formEdited = true;
-                this.attachReact(this.element);
-            }
-        });
-    }
-    attachReact(element) {
-        return ReactDOM.render(React.createElement("div", { style: { width: '100%', display: 'flex', justifyContent: 'flex-end' } },
-            React.createElement(EvokeButton, { sx: { margin: '5px' }, variant: this.component.components[0].variant, onClick: this.handleCancel, disabled: !this.root.formEdited }, this.component.components[0].label),
-            React.createElement(EvokeButton, { sx: { margin: '5px' }, variant: this.component.components[1].variant, onClick: this.handleSubmit, disabled: !this.root.formEdited }, this.component.components[1].label)), element);
-    }
-}
-export default Buttons;

package/dist/published/form-components/FieldWrapper.d.ts

@@ -1,21 +0,0 @@
-/// <reference types="react" />
-declare type FieldWrapperProps = {
-    label: string;
-    description?: string;
-    tooltip?: string;
-    prefix?: string;
-    suffix?: string;
-    value?: string;
-    validate: any;
-    errorMessage: string;
-    showCharCount?: boolean;
-    type: string;
-    onChange: Function;
-    children: any;
-};
-/**
- * A component that wraps a FormField and adds a label,
- * description, tooltip, prefix, suffix and word/char counts
- */
-declare const FieldWrapper: (props: FieldWrapperProps) => JSX.Element;
-export default FieldWrapper;

package/dist/published/form-components/FieldWrapper.js

@@ -1,84 +0,0 @@
-import { Typography, Tooltip, IconButton } from '../components/core';
-import { Box } from '../components/layout';
-import { Help } from '../icons';
-import React, { useEffect, useRef } from 'react';
-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
- */
-const FieldWrapper = (props) => {
-    const { label, description, tooltip, prefix, suffix, value, validate, errorMessage, showCharCount, type, onChange, children, } = props;
-    const [fieldHeight, setFieldHeight] = React.useState(40);
-    const [fieldValue, setFieldValue] = React.useState(value);
-    const { maxLength } = validate;
-    const fieldRef = useRef(null);
-    useEffect(() => {
-        //get height of field to sync with height of prefix and suffix
-        const fieldElement = fieldRef.current;
-        if (fieldElement && (prefix || suffix)) {
-            setFieldHeight(fieldElement.getBoundingClientRect().height - 12);
-        }
-    }, [fieldRef]);
-    const underFieldStyles = {
-        display: 'flex',
-        flexDirection: 'row',
-        justifyContent: 'space-between',
-        alignItems: 'center',
-    };
-    const descriptionStyles = {
-        color: '#999',
-        whiteSpace: 'normal',
-    };
-    let charCount = fieldValue && type === 'textfield' ? fieldValue.length : 0;
-    if (maxLength)
-        charCount = maxLength - charCount;
-    const handleChange = (key, value) => {
-        onChange(key, value, new Event('keydown'));
-        setFieldValue(value);
-    };
-    return (React.createElement(Box, null,
-        React.createElement(Box, null,
-            React.createElement(Typography, { sx: { fontWeight: 600 }, variant: "subtitle2" },
-                label,
-                validate.required ? React.createElement("span", { style: { color: 'red' } },
-                    ` *`,
-                    " ") : 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("div", { style: { width: '100%' }, ref: fieldRef }, React.Children.map(children, (child) => {
-                    return React.cloneElement(child, { onChange: handleChange });
-                })),
-                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' }, variant: "caption" }, ' ⚠ ' + errorMessage)) : (React.createElement("span", null)),
-                showCharCount && (React.createElement(Typography, { variant: "caption", sx: { color: '#999', whiteSpace: 'nowrap' } },
-                    charCount,
-                    " ",
-                    charCount === 1 ? 'character' : 'characters',
-                    !!maxLength && ` remaining`))))));
-};
-export default FieldWrapper;

package/dist/published/form-components/FormFieldComponent.d.ts

@@ -1,34 +0,0 @@
-import { ReactComponent } from '@formio/react';
-declare class FormFieldComponent extends ReactComponent {
-    [x: string]: any;
-    static schema: any;
-    errorDetails: any;
-    /**
-     * Called when the component has been instantiated. This is useful to define
-     * default instance variable values.
-     *
-     * @param component - The JSON representation of the component created.
-     * @param options - The global options for the renderer
-     * @param data - The contextual data object (model) used for this component.
-     */
-    constructor(component: any, options: any, data: any);
-    init(): void;
-    handleValidation(value: string): void;
-    hasCustomErrors(): boolean;
-    manageFormErrors(): void;
-    beforeSubmit(): void;
-    /**
-     * Checks for errors in the data value.
-     * @param {any} data - The data value to check.
-     * @param {boolean} dirty - Whether the data value has been modified.
-     * @param {any} rowData - The row data.
-     * @returns {{ hasErrors: boolean, fieldErrorMessages: string[] }} An object containing whether the data value has errors and an array of error messages.
-     */
-    errorCheck(data: any, dirty: any, rowData: any): {
-        hasErrors: boolean;
-        fieldErrorMessages: any[];
-    };
-    handleChange: (key: string, value: any, event: Event) => void;
-    attachReact(element: any): void;
-}
-export default FormFieldComponent;

package/dist/published/form-components/FormFieldComponent.js

@@ -1,160 +0,0 @@
-import React from 'react';
-import { FormField } from '../components/custom';
-import FieldWrapper from './FieldWrapper';
-import { isEmpty } from 'lodash';
-import ReactDOM from 'react-dom';
-import { ReactComponent } from '@formio/react';
-class FormFieldComponent extends ReactComponent {
-    /**
-     * Called when the component has been instantiated. This is useful to define
-     * default instance variable values.
-     *
-     * @param component - The JSON representation of the component created.
-     * @param options - The global options for the renderer
-     * @param data - The contextual data object (model) used for this component.
-     */
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    constructor(component, options, data) {
-        const { property } = component;
-        component.property = Object.assign(Object.assign({}, component.property), { type: property.type === 'string' && property.enum ? 'choices' : property.type });
-        let selectOptions = [];
-        if (!isEmpty(component.data)) {
-            selectOptions = component.data.values;
-        }
-        else if (property.enum) {
-            selectOptions = property.enum.map((val) => ({ label: val, value: val }));
-        }
-        super(Object.assign(Object.assign({}, component), { hideLabel: true, readOnly: component.readOnlyValue || !!property.formula, selectOptions }), options, data);
-        this.handleChange = (key, value, event) => {
-            event.stopPropagation();
-            const val = typeof value === 'object' && value.hasOwnProperty('value') ? value.value : value;
-            this.updateValue(val, { modified: true });
-            this.emit('changed-' + this.component.key, val);
-            this.handleValidation(val);
-            this.attachReact(this.element);
-        };
-        this.errorDetails = {};
-        this.handleChange = this.handleChange.bind(this);
-    }
-    init() {
-        const { conditional: { when, eq }, } = this.component;
-        //listens for the this.emit('changed-'... event on the 'when' component
-        this.on('changed-' + when, (value) => {
-            if (when && eq && value === eq) {
-                this.component.hidden = false;
-                this.attachReact(this.element);
-            }
-        });
-    }
-    handleValidation(value) {
-        const { validate } = this.component;
-        if ((value === undefined || value === null || value === '') && !validate.required) {
-            return;
-        }
-        if (!isEmpty(validate.regexes)) {
-            const regexes = validate.regexes;
-            const failedRules = validate.regexes.filter((rule) => {
-                if (!RegExp(rule.regex).test(value)) {
-                    return true;
-                }
-                return false;
-            });
-            if (failedRules.length === 0) {
-                delete this.errorDetails['regexes'];
-            }
-            else {
-                if (validate.operator === 'all') {
-                    this.errorDetails['regexes'] = failedRules.map((rule) => rule.errorMessage).join(' and ');
-                }
-                else if (validate.operator === 'any') {
-                    if (regexes.length > failedRules.length) {
-                        delete this.errorDetails['regexes'];
-                    }
-                    else {
-                        this.errorDetails['regexes'] = failedRules.map((rule) => rule.errorMessage).join(' or ');
-                    }
-                }
-            }
-        }
-        if (this.component.validate.minDate) {
-            if (value < this.component.validate.minDate || value > this.component.validate.maxDate) {
-                this.errorDetails['date'] = this.component.validate.customMessage;
-            }
-            else {
-                delete this.errorDetails['date'];
-            }
-        }
-        if (this.component.validate.min && value < this.component.validate.min) {
-            this.errorDetails['min-max'] = this.component.validate.customMessage;
-        }
-        else if (this.component.validate.max && value > this.component.validate.max) {
-            this.errorDetails['min-max'] = this.component.validate.customMessage;
-        }
-        else {
-            delete this.errorDetails['min-max'];
-        }
-        this.manageFormErrors();
-    }
-    hasCustomErrors() {
-        return !isEmpty(this.errorDetails);
-    }
-    manageFormErrors() {
-        if (!isEmpty(this.errorDetails)) {
-            const fieldError = {
-                component: this.component,
-                external: false,
-                formattedKeyOrPath: this.component.key,
-                message: this.component.label + ': ' + Object.values(this.errorDetails).join(', '),
-            };
-            const rootHasErrorData = this.root.customErrors.some((error) => {
-                return error.formattedKeyOrPath === this.component.key;
-            });
-            if (!rootHasErrorData) {
-                this.root.customErrors = [...this.root.customErrors, fieldError];
-            }
-        }
-        else {
-            this.root.customErrors = this.root.customErrors.filter((error) => {
-                return error.formattedKeyOrPath !== this.component.key;
-            });
-        }
-    }
-    beforeSubmit() {
-        this.handleValidation(this.dataValue);
-        this.attachReact(this.element);
-    }
-    /**
-     * Checks for errors in the data value.
-     * @param {any} data - The data value to check.
-     * @param {boolean} dirty - Whether the data value has been modified.
-     * @param {any} rowData - The row data.
-     * @returns {{ hasErrors: boolean, fieldErrorMessages: string[] }} An object containing whether the data value has errors and an array of error messages.
-     */
-    errorCheck(data, dirty, rowData) {
-        //after changes, check for both custom errors and formio errors
-        if (this.dataValue !== this.defaultValue && !this.component.readOnlyValue) {
-            return {
-                hasErrors: this.hasCustomErrors() || !super.checkValidity(data, dirty, rowData),
-                fieldErrorMessages: [...this.root.errors, ...this.root.customErrors]
-                    .filter((error) => error.component.key === this.component.key)
-                    .map((error) => error.message),
-            };
-        }
-        return {
-            hasErrors: false,
-            fieldErrorMessages: [],
-        };
-    }
-    attachReact(element) {
-        var _a;
-        const { inputMask, hidden } = this.component;
-        const { hasErrors, fieldErrorMessages } = this.errorCheck(this.dataValue, false, this.data);
-        let root = ReactDOM.findDOMNode(element);
-        if (!root) {
-            root = element;
-        }
-        return ReactDOM.render(React.createElement("div", null, !hidden ? (React.createElement(FieldWrapper, Object.assign({}, this.component, { onChange: this.handleChange, error: hasErrors, errorMessage: fieldErrorMessages.join(', ') }),
-            React.createElement(FormField, Object.assign({}, this.component, { defaultValue: (_a = this.dataValue) !== null && _a !== void 0 ? _a : this.component.defaultValue, mask: inputMask, error: hasErrors })))) : null), root);
-    }
-}
-export default FormFieldComponent;

package/dist/published/form-components/index.d.ts

@@ -1,21 +0,0 @@
-/// <reference types="react" />
-import FormFieldComponent from './FormFieldComponent';
-import Buttons from './Buttons';
-export declare const FormComponents: {
-    FormFieldComponent: typeof FormFieldComponent;
-    Buttons: typeof Buttons;
-    FieldWrapper: (props: {
-        label: string;
-        description?: string | undefined;
-        tooltip?: string | undefined;
-        prefix?: string | undefined;
-        suffix?: string | undefined;
-        value?: string | undefined;
-        validate: any;
-        errorMessage: string;
-        showCharCount?: boolean | undefined;
-        type: string;
-        onChange: Function;
-        children: any;
-    }) => JSX.Element;
-};

package/dist/published/form-components/index.js

@@ -1,8 +0,0 @@
-import FormFieldComponent from './FormFieldComponent';
-import Buttons from './Buttons';
-import FieldWrapper from './FieldWrapper';
-export const FormComponents = {
-    FormFieldComponent,
-    Buttons,
-    FieldWrapper,
-};