@evoke-platform/ui-components 1.0.0-dev.226 → 1.0.0-dev.227

package/dist/published/components/custom/Form/FormComponents/ImageComponent/Image.js

@@ -1,12 +1,3 @@
-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 { BackupOutlined, ClearRounded } from '@mui/icons-material';
 import React, { useEffect, useState } from 'react';
 import { useDropzone } from 'react-dropzone';
@@ -62,38 +53,35 @@ const styles = {
     },
 };
 export const Image = (props) => {
-    const { id, handleChange, property, instance, canUpdateProperty, error } = props;
-    const [image, setImage] = useState();
+    const { id, handleChange, property, value, canUpdateProperty, error } = props;
+    const [image, setImage] = useState(value);
     useEffect(() => {
-        const value = instance === null || instance === void 0 ? void 0 : instance[property.id];
-        if (typeof value === 'string') {
-            setImage(value);
-        }
-    }, [property]);
-    const handleUpload = (file) => __awaiter(void 0, void 0, void 0, function* () {
-        if ((file === null || file === void 0 ? void 0 : file.size) && file.size <= 300000) {
-            const dataUrl = file ? yield blobToDataUrl(file) : null;
-            setImage(dataUrl);
+        setImage(value);
+    }, [value]);
+    const handleUpload = async (file) => {
+        if (file?.size && file.size <= 300000) {
+            const dataUrl = file ? await blobToDataUrl(file) : null;
+            setImage(dataUrl ?? undefined);
             handleChange(property.id, dataUrl);
         }
-    });
+    };
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     const handleRemove = (e) => {
-        setImage(null);
+        setImage(undefined);
         handleChange(property.id, '');
         e.stopPropagation();
     };
     const { getRootProps, getInputProps, open } = useDropzone({
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        onDrop: (files) => handleUpload(files === null || files === void 0 ? void 0 : files[0]),
+        onDrop: (files) => handleUpload(files?.[0]),
         accept: { 'image/*': ['.png', '.jpg', '.jpeg', '.gif', '.svg'] },
     });
     return (React.createElement(React.Fragment, null, image ? (React.createElement(Box, { sx: styles.imageContainer },
         React.createElement(Box, { sx: { position: 'relative', left: 0, zIndex: 5 } },
             React.createElement(CardMedia, { component: "img", image: image, sx: styles.image }),
             canUpdateProperty && (React.createElement(IconButton, { onClick: handleRemove, "aria-label": "remove image", sx: styles.deleteIcon },
-                React.createElement(ClearRounded, { sx: styles.icon })))))) : canUpdateProperty ? (React.createElement(Box, Object.assign({ sx: Object.assign(Object.assign({}, styles.dropzoneContainer), { borderColor: error ? 'red' : '#858585' }) }, getRootProps(), { onClick: open }),
-        React.createElement("input", Object.assign({}, getInputProps({ id }), { multiple: false })),
+                React.createElement(ClearRounded, { sx: styles.icon })))))) : canUpdateProperty ? (React.createElement(Box, { sx: { ...styles.dropzoneContainer, borderColor: error ? 'red' : '#858585' }, ...getRootProps(), onClick: open },
+        React.createElement("input", { ...getInputProps({ id }), multiple: false }),
         React.createElement(Grid, { container: true, sx: { width: '100%' } },
             React.createElement(Grid, { item: true, xs: 12, sx: { display: 'flex', justifyContent: 'center', paddingBottom: '5px' } },
                 React.createElement(BackupOutlined, { sx: { color: '#919EAB', height: '1.5em', width: '1.5em' } })),

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

@@ -4,7 +4,9 @@ import { BaseFormComponentProps } from '../../types';
 export declare class ImageComponent extends ReactComponent {
     [x: string]: any;
     static schema: any;
-    component: BaseFormComponentProps;
+    component: BaseFormComponentProps & {
+        initialValue?: string;
+    };
     errorDetails: any;
     componentRoot?: Root;
     constructor(component: BaseFormComponentProps, options: any, data: any);

package/dist/published/components/custom/Form/FormComponents/ImageComponent/ImageComponent.js

@@ -1,4 +1,3 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
 import { ReactComponent } from '@formio/react';
 import { isEmpty } from 'lodash';
 import React from 'react';
@@ -8,7 +7,11 @@ import { isPropertyVisible } from '../../utils';
 import { Image } from './Image';
 export class ImageComponent extends ReactComponent {
     constructor(component, options, data) {
-        super(Object.assign(Object.assign({}, component), { canUpdateProperty: !component.readOnly, hideLabel: true }), options, data);
+        super({
+            ...component,
+            canUpdateProperty: !component.readOnly,
+            hideLabel: true,
+        }, options, data);
         this.handleChange = (key, value) => {
             delete this.errorDetails['api-error'];
             this.setValue(value);
@@ -43,16 +46,35 @@ export class ImageComponent extends ReactComponent {
                 }
             }
         });
+        if (this.component.initialValue && /^{{.*}}$/.test(this.component.initialValue)) {
+            const regex = /^{{input\.(?<relatedObjectProperty>[a-zA-Z][a-zA-Z0-9_]*)\.(?<nestedProperty>[a-zA-Z][a-zA-Z0-9_]*)}}$/;
+            const groups = regex.exec(this.component.initialValue)?.groups;
+            if (groups?.relatedObjectProperty && groups?.nestedProperty) {
+                this.on(`changed-${groups.relatedObjectProperty}`, (value) => {
+                    if (value) {
+                        this.setValue(value?.[groups.nestedProperty]);
+                        this.updateValue(value?.[groups.nestedProperty], { modified: true });
+                        this.attach(this.element);
+                        this.attachReact(this.element);
+                    }
+                });
+            }
+        }
         this.on(`api-error`, (details) => {
             const error = details.find((detail) => detail.code === 'errorMessage' && detail.path.replace('/', '') === this.component.key);
             if (error) {
                 if (!this.root.customErrors.find((err) => err.formattedKeyOrPath === this.component.key && err.message === error.message)) {
                     this.root.customErrors = [
                         ...this.root.customErrors,
-                        Object.assign(Object.assign({}, error), { code: 'api-error', component: this.component, formattedKeyOrPath: this.component.key }),
+                        {
+                            ...error,
+                            code: 'api-error',
+                            component: this.component,
+                            formattedKeyOrPath: this.component.key,
+                        },
                     ];
                 }
-                this.errorDetails['api-error'] = error === null || error === void 0 ? void 0 : error.message;
+                this.errorDetails['api-error'] = error?.message;
             }
             else {
                 this.root.customErrors = this.root.customErrors.filter((item) => item.formattedKeyOrPath !== this.component.key);
@@ -84,10 +106,9 @@ export class ImageComponent extends ReactComponent {
      * Synchronizes out-of-the-box formio errors with this field's errorDetails object
      */
     manageFormErrors() {
-        var _a;
-        const outOfTheBoxError = (_a = this.root.errors.find((error) => {
+        const outOfTheBoxError = this.root.errors.find((error) => {
             return error.component.key === this.component.key;
-        })) === null || _a === void 0 ? void 0 : _a.message;
+        })?.message;
         // add OoB formio error to errorDetails object to show under field
         if (outOfTheBoxError) {
             this.errorDetails['rootError'] = outOfTheBoxError;
@@ -106,7 +127,7 @@ export class ImageComponent extends ReactComponent {
         }
         // FormIO uses id for an enclosing div, so we need to give the input field a different id.
         const inputId = `${this.component.id}-input`;
-        return this.componentRoot.render(React.createElement("div", null, !this.component.hidden ? (React.createElement(FormComponentWrapper, Object.assign({}, this.component, { inputId: inputId, viewOnly: !this.component.canUpdateProperty, errorMessage: this.errorMessages() }),
-            React.createElement(Image, Object.assign({}, this.component, { id: inputId, handleChange: this.handleChange, error: this.hasErrors() })))) : null));
+        return this.componentRoot.render(React.createElement("div", null, !this.component.hidden ? (React.createElement(FormComponentWrapper, { ...this.component, inputId: inputId, viewOnly: !this.component.canUpdateProperty, errorMessage: this.errorMessages() },
+            React.createElement(Image, { ...this.component, id: inputId, value: this.dataValue, handleChange: this.handleChange, error: this.hasErrors() }))) : null));
     }
 }

package/dist/published/components/custom/Form/FormComponents/ObjectComponent/InstanceLookup.js

@@ -1,12 +1,3 @@
-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 { Clear, Search } from '@mui/icons-material';
 import { debounce, get, startCase } from 'lodash';
 import { DateTime } from 'luxon';
@@ -21,7 +12,7 @@ const SearchField = (props) => {
         setSearchString('');
         setFilter(undefined);
     };
-    const handleSearch = (e) => __awaiter(void 0, void 0, void 0, function* () {
+    const handleSearch = async (e) => {
         const searchProperties = searchableColumns.map((column) => {
             const columnId = column.id;
             return {
@@ -36,11 +27,15 @@ const SearchField = (props) => {
         }
         else {
             setSearchString(e.target.value);
-            setFilter(Object.assign(Object.assign({}, filter), { where: {
+            setFilter({
+                ...filter,
+                where: {
                     or: searchProperties,
-                }, limit: 100 }));
+                },
+                limit: 100,
+            });
         }
-    });
+    };
     return (React.createElement(TextField, { autoFocus: true, placeholder: "Search", value: searchString, onChange: (e) => handleSearch(e), size: "medium", fullWidth: true, sx: { marginBottom: '15px', marginTop: '15px' }, InputProps: {
             endAdornment: (React.createElement(InputAdornment, { position: "end" },
                 React.createElement(IconButton, { sx: {
@@ -54,20 +49,18 @@ const SearchField = (props) => {
         } }));
 };
 export const InstanceLookup = (props) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
     const { object, apiServices, setSelectedInstance, mode, nestedFieldsView, setRelationType, filter: criteriaFilter, layout, } = props;
     const [rows, setRows] = useState([]);
     const [loading, setLoading] = useState(false);
     const [filter, setFilter] = useState();
     const [searchString, setSearchString] = useState('');
-    const [searchableColumns] = useState((_b = (_a = object.properties) === null || _a === void 0 ? void 0 : _a.filter((property) => property.searchable)) !== null && _b !== void 0 ? _b : []);
+    const [searchableColumns] = useState(object.properties?.filter((property) => property.searchable) ?? []);
     const retrieveColumns = (tableViewLayout) => {
-        var _a, _b, _c, _d;
         let columns = [];
-        if ((_a = tableViewLayout === null || tableViewLayout === void 0 ? void 0 : tableViewLayout.properties) === null || _a === void 0 ? void 0 : _a.length) {
+        if (tableViewLayout?.properties?.length) {
             for (const prop of tableViewLayout.properties) {
                 const propertyId = prop.id.split('.')[0];
-                const property = (_b = object.properties) === null || _b === void 0 ? void 0 : _b.find((p) => p.id === propertyId);
+                const property = object.properties?.find((p) => p.id === propertyId);
                 if (property) {
                     if (property.type === 'address') {
                         columns.push({
@@ -76,8 +69,7 @@ export const InstanceLookup = (props) => {
                             type: 'string',
                             flex: 1,
                             valueGetter: (params) => {
-                                var _a;
-                                return (_a = get(params.row, prop.id)) !== null && _a !== void 0 ? _a : '';
+                                return get(params.row, prop.id) ?? '';
                             },
                         });
                     }
@@ -88,8 +80,7 @@ export const InstanceLookup = (props) => {
                             type: 'string',
                             flex: 1,
                             valueGetter: (params) => {
-                                var _a;
-                                return ((_a = get(params.row, !prop.id.includes('.') ? `${prop.id}.name` : prop.id)) !== null && _a !== void 0 ? _a : '');
+                                return (get(params.row, !prop.id.includes('.') ? `${prop.id}.name` : prop.id) ?? '');
                             },
                         });
                     }
@@ -100,9 +91,9 @@ export const InstanceLookup = (props) => {
                             type: 'string',
                             flex: 1,
                             valueGetter: (params) => {
-                                var _a, _b;
                                 const row = params.row;
-                                return ((_b = (_a = row[prop.id]) === null || _a === void 0 ? void 0 : _a.map((v) => v.name).join(', ')) !== null && _b !== void 0 ? _b : '');
+                                return (row[prop.id]?.map((v) => v.name).join(', ') ??
+                                    '');
                             },
                         });
                     }
@@ -166,18 +157,22 @@ export const InstanceLookup = (props) => {
             }
         }
         else {
-            const name = (_c = object.properties) === null || _c === void 0 ? void 0 : _c.find((property) => property.id == 'name');
-            columns = [{ field: 'name', headerName: (_d = name === null || name === void 0 ? void 0 : name.name) !== null && _d !== void 0 ? _d : 'Name', type: 'string', flex: 1 }];
+            const name = object.properties?.find((property) => property.id == 'name');
+            columns = [{ field: 'name', headerName: name?.name ?? 'Name', type: 'string', flex: 1 }];
         }
         return columns;
     };
     function fetchObjectInstance() {
         setLoading(true);
-        const combinedFilter = Object.assign(Object.assign(Object.assign({}, criteriaFilter), filter), { where: (criteriaFilter === null || criteriaFilter === void 0 ? void 0 : criteriaFilter.where)
+        const combinedFilter = {
+            ...criteriaFilter,
+            ...filter,
+            where: criteriaFilter?.where
                 ? {
-                    and: [criteriaFilter.where, filter === null || filter === void 0 ? void 0 : filter.where],
+                    and: [criteriaFilter.where, filter?.where],
                 }
-                : filter === null || filter === void 0 ? void 0 : filter.where });
+                : filter?.where,
+        };
         apiServices.get(getPrefixedUrl(`/objects/${object.id}/instances`), { params: { filter: JSON.stringify(combinedFilter) } }, (error, objectInstances) => {
             if (error) {
                 console.error(error);
@@ -200,8 +195,8 @@ export const InstanceLookup = (props) => {
     return (React.createElement(Grid, { container: true, sx: { paddingBottom: '30px' } },
         React.createElement(Grid, { item: true, xs: 12 }, searchableColumns.length ? (React.createElement(SearchField, { searchString: searchString, setSearchString: setSearchString, filter: filter, setFilter: setFilter, searchableColumns: searchableColumns })) : (React.createElement(Typography, { sx: { fontSize: '16px', fontWeight: '700' } }, "There are no searchable properties configured for this object"))),
         React.createElement(BuilderGrid, { item: 'instances', rows: rows, columns: columns, onRowClick: (params) => setSelectedInstance(params.row), initialSort: {
-                field: (_f = (_e = (_d = (_c = object.viewLayout) === null || _c === void 0 ? void 0 : _c.table) === null || _d === void 0 ? void 0 : _d.sort) === null || _e === void 0 ? void 0 : _e.colId) !== null && _f !== void 0 ? _f : 'name',
-                sort: (_k = (_j = (_h = (_g = object.viewLayout) === null || _g === void 0 ? void 0 : _g.table) === null || _h === void 0 ? void 0 : _h.sort) === null || _j === void 0 ? void 0 : _j.sort) !== null && _k !== void 0 ? _k : 'asc',
+                field: object.viewLayout?.table?.sort?.colId ?? 'name',
+                sort: object.viewLayout?.table?.sort?.sort ?? 'asc',
             }, sx: {
                 height: '360px',
                 width: '100%',

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

@@ -1,11 +1,12 @@
-import { Obj, Reference } from '@evoke-platform/context';
+import { Obj, ObjectInstance } from '@evoke-platform/context';
 import { ReactComponent } from '@formio/react';
 import { Root } from 'react-dom/client';
 import { BaseFormComponentProps } from '../../types';
-declare type ObjectComponentProps = BaseFormComponentProps & {
+interface ObjectComponentProps extends BaseFormComponentProps {
     mode: 'default' | 'existingOnly';
     defaultValueCriteria?: Record<string, unknown>;
-};
+    initialValue?: string;
+}
 export declare class ObjectComponent extends ReactComponent {
     relatedObject?: Obj;
     [x: string]: any;
@@ -27,7 +28,7 @@ export declare class ObjectComponent extends ReactComponent {
      * Synchronizes out-of-the-box formio errors with this field's errorDetails object
      */
     manageFormErrors(): void;
-    handleChangeObjectProperty: (key: string, value?: Reference | null) => void;
+    handleChangeObjectProperty: (key: string, value?: ObjectInstance | null) => void;
     beforeSubmit(): void;
     attachReact(element: Element): void;
 }

package/dist/published/components/custom/Form/FormComponents/ObjectComponent/ObjectComponent.js

@@ -1,34 +1,38 @@
 import { ReactComponent } from '@formio/react';
 import dot from 'dot-object';
-import { cloneDeep, isEmpty } from 'lodash';
+import { cloneDeep, isEmpty, pick } from 'lodash';
 import React from 'react';
 import { createRoot } from 'react-dom/client';
 import { FormComponentWrapper } from '../../Common';
-import { getAllCriteriaInputs, isPropertyVisible, transformToWhere, updateCriteriaInputs } from '../../utils';
+import { getAllCriteriaInputs, getPrefixedUrl, isPropertyVisible, transformToWhere, updateCriteriaInputs, } from '../../utils';
 import { ObjectPropertyInput } from './ObjectPropertyInput';
 export class ObjectComponent extends ReactComponent {
     constructor(component, options, data) {
-        var _a, _b;
-        super(Object.assign(Object.assign({}, component), { canUpdateProperty: !component.readOnly, hideLabel: true }), options, data);
+        super({
+            ...component,
+            canUpdateProperty: !component.readOnly,
+            hideLabel: true,
+        }, options, data);
         this.handleChangeObjectProperty = (key, value) => {
+            delete this.errorDetails['api-error'];
+            const updatedValue = pick(value, 'id', 'name');
             // set the value on the form instance at this.root.data
-            this.setValue(value !== null && value !== void 0 ? value : '');
+            this.setValue(updatedValue ?? '');
             // update the value in the component instance
-            this.updateValue(value !== null && value !== void 0 ? value : {}, { modified: true });
+            this.updateValue(updatedValue ?? {}, { modified: true });
             this.handleValidation();
             this.emit('changed-' + this.component.key, value);
             this.attach(this.element);
-            this.component.autoSave && this.component.autoSave({ [key]: value });
+            this.component.autoSave && this.component.autoSave({ [key]: updatedValue });
         };
         this.errorDetails = {};
         this.criteria = component.validate.criteria;
-        this.updatedCriteria = (_a = cloneDeep(component.validate.criteria)) !== null && _a !== void 0 ? _a : {};
+        this.updatedCriteria = cloneDeep(component.validate.criteria) ?? {};
         this.defaultValueCriteria = component.defaultValueCriteria;
-        this.updatedDefaultValueCriteria = (_b = cloneDeep(component.defaultValueCriteria)) !== null && _b !== void 0 ? _b : {};
+        this.updatedDefaultValueCriteria = cloneDeep(component.defaultValueCriteria) ?? {};
         this.handleChangeObjectProperty = this.handleChangeObjectProperty.bind(this);
     }
     init() {
-        var _a, _b;
         this.on('changed-' + this.component.conditional.when, (value) => {
             //set default value when conditional field is shown
             if (this.component.defaultValue && value === this.component.conditional.eq) {
@@ -62,9 +66,8 @@ export class ObjectComponent extends ReactComponent {
                     compKey = inputProp;
                 }
                 this.on(`changed-${compKey}`, () => {
-                    var _a;
                     const data = dot.dot(this.root._data);
-                    this.updatedCriteria = (_a = cloneDeep(this.criteria)) !== null && _a !== void 0 ? _a : {};
+                    this.updatedCriteria = cloneDeep(this.criteria) ?? {};
                     for (const inputProp of inputProps) {
                         updateCriteriaInputs(this.updatedCriteria, inputProp, data[inputProp], true);
                     }
@@ -76,7 +79,7 @@ export class ObjectComponent extends ReactComponent {
         }
         if (this.defaultValueCriteria) {
             const inputProps = getAllCriteriaInputs(this.defaultValueCriteria);
-            updateCriteriaInputs(this.updatedDefaultValueCriteria, 'user.id', (_b = (_a = this.component.user) === null || _a === void 0 ? void 0 : _a.id) !== null && _b !== void 0 ? _b : '');
+            updateCriteriaInputs(this.updatedDefaultValueCriteria, 'user.id', this.component.user?.id ?? '');
             for (const inputProp of inputProps) {
                 // Parse data to update criteria when form is loaded.
                 updateCriteriaInputs(this.updatedDefaultValueCriteria, inputProp, data[inputProp], true);
@@ -88,10 +91,9 @@ export class ObjectComponent extends ReactComponent {
                     compKey = inputProp;
                 }
                 this.on(`changed-${compKey}`, () => {
-                    var _a, _b, _c;
                     const data = dot.dot(this.root._data);
-                    this.updatedDefaultValueCriteria = (_a = cloneDeep(this.defaultValueCriteria)) !== null && _a !== void 0 ? _a : {};
-                    updateCriteriaInputs(this.updatedDefaultValueCriteria, 'user.id', (_c = (_b = this.component.user) === null || _b === void 0 ? void 0 : _b.id) !== null && _c !== void 0 ? _c : '');
+                    this.updatedDefaultValueCriteria = cloneDeep(this.defaultValueCriteria) ?? {};
+                    updateCriteriaInputs(this.updatedDefaultValueCriteria, 'user.id', this.component.user?.id ?? '');
                     for (const inputProp of inputProps) {
                         updateCriteriaInputs(this.updatedDefaultValueCriteria, inputProp, data[inputProp], true);
                     }
@@ -101,6 +103,46 @@ export class ObjectComponent extends ReactComponent {
                 });
             }
         }
+        if (this.component.initialValue && /^{{.*}}$/.test(this.component.initialValue)) {
+            const regex = /^{{input\.(?<relatedObjectProperty>[a-zA-Z][a-zA-Z0-9_]*)\.(?<nestedProperty>[a-zA-Z][a-zA-Z0-9_]*)}}$/;
+            const groups = regex.exec(this.component.initialValue)?.groups;
+            if (groups?.relatedObjectProperty && groups?.nestedProperty) {
+                this.on(`changed-${groups.relatedObjectProperty}`, async (value) => {
+                    if (value) {
+                        const instanceReference = value[groups.nestedProperty];
+                        this.setValue(instanceReference);
+                        this.updateValue(instanceReference, { modified: true });
+                        this.attach(this.element);
+                        const apiServices = this.component.apiServices;
+                        const relatedInstance = await apiServices?.get(getPrefixedUrl(`/objects/${this.component.property.objectId}/instances/${instanceReference.id}`));
+                        this.emit(`changed-${this.component.key}`, relatedInstance);
+                    }
+                });
+            }
+        }
+        this.on(`api-error`, (details) => {
+            const error = details.find((detail) => detail.code === 'errorMessage' && detail.path.replace('/', '') === this.component.key);
+            if (error) {
+                if (!this.root.customErrors.find((err) => err.formattedKeyOrPath === this.component.key && err.message === error.message)) {
+                    this.root.customErrors = [
+                        ...this.root.customErrors,
+                        {
+                            ...error,
+                            code: 'api-error',
+                            component: this.component,
+                            formattedKeyOrPath: this.component.key,
+                        },
+                    ];
+                }
+                this.errorDetails['api-error'] = error?.message;
+            }
+            else {
+                this.root.customErrors = this.root.customErrors.filter((item) => item.formattedKeyOrPath !== this.component.key);
+                delete this.errorDetails['api-error'];
+            }
+            this.attach(this.element);
+            this.attachReact(this.element);
+        });
     }
     clearErrors() {
         this.errorDetails = {};
@@ -124,10 +166,9 @@ export class ObjectComponent extends ReactComponent {
      * Synchronizes out-of-the-box formio errors with this field's errorDetails object
      */
     manageFormErrors() {
-        var _a;
-        const outOfTheBoxError = (_a = this.root.errors.find((error) => {
+        const outOfTheBoxError = this.root.errors.find((error) => {
             return error.component.key === this.component.key;
-        })) === null || _a === void 0 ? void 0 : _a.message;
+        })?.message;
         //add OoB formio error to errorDetails object to show under field
         if (outOfTheBoxError) {
             this.errorDetails['rootError'] = outOfTheBoxError;
@@ -141,14 +182,21 @@ export class ObjectComponent extends ReactComponent {
         this.element && this.attach(this.element);
     }
     attachReact(element) {
-        const updatedComponent = Object.assign(Object.assign({}, this.component), { instance: Object.assign(Object.assign({}, this.component.instance), { [this.component.key]: isEmpty(this.dataValue) ? null : this.dataValue }), defaultValueCriteria: this.updatedDefaultValueCriteria });
+        const updatedComponent = {
+            ...this.component,
+            instance: {
+                ...this.component.instance,
+                [this.component.key]: isEmpty(this.dataValue) ? null : this.dataValue,
+            },
+            defaultValueCriteria: this.updatedDefaultValueCriteria,
+        };
         if (!this.componentRoot) {
             this.componentRoot = createRoot(element);
         }
         // FormIO uses id for an enclosing div, so we need to give the input field a different id.
         const inputId = `${this.component.id}-input`;
         return this.componentRoot.render(React.createElement("div", null,
-            React.createElement(FormComponentWrapper, Object.assign({}, updatedComponent, { inputId: inputId, errorMessage: this.errorMessages() }),
-                React.createElement(ObjectPropertyInput, Object.assign({}, updatedComponent, { id: inputId, handleChangeObjectProperty: this.handleChangeObjectProperty, error: this.hasErrors(), filter: this.criteria ? { where: transformToWhere(this.updatedCriteria) } : undefined })))));
+            React.createElement(FormComponentWrapper, { ...updatedComponent, inputId: inputId, errorMessage: this.errorMessages() },
+                React.createElement(ObjectPropertyInput, { ...updatedComponent, id: inputId, handleChangeObjectProperty: this.handleChangeObjectProperty, error: this.hasErrors(), filter: this.criteria ? { where: transformToWhere(this.updatedCriteria) } : undefined }))));
     }
 }