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

package/dist/published/components/custom/Form/FormComponents/RepeatableFieldComponent/ManyToMany/DropdownRepeatableFieldInput.js

@@ -16,13 +16,13 @@ export const DropdownRepeatableFieldInput = (props) => {
         if (manyToManyPropertyId) {
             const enums = endObjectInstances
                 .map((endObjectInstance) => {
-                const normalizedInstance = Object.assign({}, endObjectInstance);
+                const normalizedInstance = { ...endObjectInstance };
                 normalizeDates([normalizedInstance], endObject);
                 return normalizedInstance;
             })
                 .map((endObjectInstance) => ({
                 label: endObjectInstance.name,
-                subLabel: (layout === null || layout === void 0 ? void 0 : layout.secondaryTextExpression)
+                subLabel: layout?.secondaryTextExpression
                     ? compileExpression(endObjectInstance, layout.secondaryTextExpression)
                     : undefined,
                 endObjectId: endObjectInstance.id,
@@ -32,7 +32,7 @@ export const DropdownRepeatableFieldInput = (props) => {
                 ...enums,
                 ...selectedOptions
                     .filter((selectedOption) => !enums.find((availableOption) => availableOption.endObjectId === selectedOption.endObjectId))
-                    .map((option) => (Object.assign(Object.assign({}, option), { hidden: true }))),
+                    .map((option) => ({ ...option, hidden: true })),
             ]);
         }
     }, [endObjectInstances, layout]);
@@ -64,12 +64,15 @@ export const DropdownRepeatableFieldInput = (props) => {
         return template(instance);
     };
     return (React.createElement(React.Fragment, null, !readOnly ? (property && (React.createElement(React.Fragment, null,
-        React.createElement(FormField, { id: id, property: Object.assign(Object.assign({}, property), { type: 'array', 
+        React.createElement(FormField, { id: id, property: {
+                ...property,
+                type: 'array',
                 // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                enum: selectOptions }), onChange: handleChange, defaultValue: selectedOptions, isOptionEqualToValue: (option, value) => isDropdownRepeatableFieldInputOption(value) &&
+                enum: selectOptions,
+            }, onChange: handleChange, defaultValue: selectedOptions, isOptionEqualToValue: (option, value) => isDropdownRepeatableFieldInputOption(value) &&
                 isDropdownRepeatableFieldInputOption(option) &&
-                option.endObjectId === value.endObjectId, size: fieldHeight !== null && fieldHeight !== void 0 ? fieldHeight : 'medium', renderOption: (props, option) => {
-                return isObject(props) && isDropdownRepeatableFieldInputOption(option) ? (React.createElement("li", Object.assign({}, props, { key: option.endObjectId }),
+                option.endObjectId === value.endObjectId, size: fieldHeight ?? 'medium', renderOption: (props, option) => {
+                return isObject(props) && isDropdownRepeatableFieldInputOption(option) ? (React.createElement("li", { ...props, key: option.endObjectId },
                     React.createElement(Typography, null,
                         option.label,
                         React.createElement("br", null),
@@ -79,9 +82,9 @@ export const DropdownRepeatableFieldInput = (props) => {
                     return options.filter((option) => !option.hidden);
                 },
                 inputValue: searchValue,
-                renderInput: (params) => (React.createElement(TextField, Object.assign({}, params, { onChange: (event) => {
+                renderInput: (params) => (React.createElement(TextField, { ...params, onChange: (event) => {
                         setSearchValue(event.target.value);
-                    } }))),
+                    } })),
                 loading: loading,
             } }),
         React.createElement(Snackbar, { open: snackbarError.showAlert, handleClose: () => setSnackbarError({ isError: snackbarError.isError, showAlert: false }), message: snackbarError.message, error: snackbarError.isError })))) : (React.createElement(Typography, null, selectedOptions && selectedOptions.map((option) => option.label).join(', ')))));

package/dist/published/components/custom/Form/FormComponents/RepeatableFieldComponent/RepeatableField.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 { useNotification, } from '@evoke-platform/context';
 import { LocalDateTime } from '@js-joda/core';
 import { get, isObject, pick, startCase } from 'lodash';
@@ -40,7 +31,6 @@ const styles = {
     },
 };
 const RepeatableField = (props) => {
-    var _a, _b;
     const { property, instance, canUpdateProperty, apiServices, queryAddresses, user, viewLayout } = props;
     const [relatedInstances, setRelatedInstances] = useState([]);
     const [relatedObject, setRelatedObject] = useState();
@@ -59,17 +49,21 @@ const RepeatableField = (props) => {
     const [error, setError] = useState(false);
     const DEFAULT_CREATE_ACTION = '_create';
     const { instanceChanges } = useNotification();
-    const fetchRelatedInstances = useCallback(() => __awaiter(void 0, void 0, void 0, function* () {
-        var _c;
+    const fetchRelatedInstances = useCallback(async () => {
         if (openDialog)
             return;
         let relatedObject;
         if (property.objectId) {
             try {
-                relatedObject = yield apiServices.get(getPrefixedUrl(`/objects/${property.objectId}/effective`));
+                relatedObject = await apiServices.get(getPrefixedUrl(`/objects/${property.objectId}/effective`));
                 let defaultTableViewLayout;
-                if ((_c = relatedObject.viewLayout) === null || _c === void 0 ? void 0 : _c.table) {
-                    defaultTableViewLayout = Object.assign({ id: 'default', name: 'Default', objectId: relatedObject.id }, relatedObject === null || relatedObject === void 0 ? void 0 : relatedObject.viewLayout.table);
+                if (relatedObject.viewLayout?.table) {
+                    defaultTableViewLayout = {
+                        id: 'default',
+                        name: 'Default',
+                        objectId: relatedObject.id,
+                        ...relatedObject?.viewLayout.table,
+                    };
                 }
                 if (viewLayout) {
                     apiServices
@@ -85,16 +79,16 @@ const RepeatableField = (props) => {
             catch (err) {
                 console.error(error);
             }
-            if (property.relatedPropertyId && (instance === null || instance === void 0 ? void 0 : instance.id)) {
+            if (property.relatedPropertyId && instance?.id) {
                 const filterProperty = `${property.relatedPropertyId}.id`;
-                const filter = { where: { [filterProperty]: instance === null || instance === void 0 ? void 0 : instance.id }, limit: 100 };
+                const filter = { where: { [filterProperty]: instance?.id }, limit: 100 };
                 const objectId = property.objectId;
                 try {
                     const timeout = setTimeout(() => {
                         setLoading(false);
                     }, 300);
                     setLoading(true);
-                    const instances = yield apiServices.get(getPrefixedUrl(`/objects/${objectId}/instances`), {
+                    const instances = await apiServices.get(getPrefixedUrl(`/objects/${objectId}/instances`), {
                         params: { filter: JSON.stringify(filter) },
                     });
                     clearTimeout(timeout);
@@ -109,7 +103,7 @@ const RepeatableField = (props) => {
             }
         }
         relatedObject && checkCreateAccess(relatedObject);
-    }), [apiServices, property, viewLayout]);
+    }, [apiServices, property, viewLayout]);
     const checkCreateAccess = (relatedObject) => {
         if (property.objectId && canUpdateProperty) {
             apiServices
@@ -117,22 +111,21 @@ const RepeatableField = (props) => {
                 params: { action: 'execute', field: '_create', scope: 'data' },
             })
                 .then((checkAccess) => {
-                var _a, _b, _c, _d, _e;
-                const action = (_a = relatedObject.actions) === null || _a === void 0 ? void 0 : _a.find((item) => item.id === '_create');
+                const action = relatedObject.actions?.find((item) => item.id === '_create');
                 if (action) {
                     let relatedObjectProperty;
                     let validationCriteria;
                     if (action.parameters) {
                         relatedObjectProperty = action.parameters.find((param) => param.id === property.relatedPropertyId);
-                        validationCriteria = (_b = relatedObjectProperty === null || relatedObjectProperty === void 0 ? void 0 : relatedObjectProperty.validation) === null || _b === void 0 ? void 0 : _b.criteria;
+                        validationCriteria = relatedObjectProperty?.validation?.criteria;
                     }
                     else if (action.inputProperties) {
                         relatedObjectProperty = action.inputProperties.find((inputProp) => inputProp.key === property.relatedPropertyId);
-                        validationCriteria = (_c = relatedObjectProperty === null || relatedObjectProperty === void 0 ? void 0 : relatedObjectProperty.validate) === null || _c === void 0 ? void 0 : _c.criteria;
+                        validationCriteria = relatedObjectProperty?.validate?.criteria;
                     }
                     else {
-                        relatedObjectProperty = ((_d = relatedObject.properties) !== null && _d !== void 0 ? _d : []).find((prop) => prop.id === property.relatedPropertyId);
-                        validationCriteria = (_e = relatedObjectProperty === null || relatedObjectProperty === void 0 ? void 0 : relatedObjectProperty.validation) === null || _e === void 0 ? void 0 : _e.criteria;
+                        relatedObjectProperty = (relatedObject.properties ?? []).find((prop) => prop.id === property.relatedPropertyId);
+                        validationCriteria = relatedObjectProperty?.validation?.criteria;
                     }
                     if (relatedObjectProperty) {
                         if (validationCriteria) {
@@ -156,24 +149,24 @@ const RepeatableField = (props) => {
         }
     };
     useEffect(() => {
-        (() => __awaiter(void 0, void 0, void 0, function* () {
+        (async () => {
             try {
-                const users = yield apiServices.get(getPrefixedUrl(`/users`));
+                const users = await apiServices.get(getPrefixedUrl(`/users`));
                 setUsers(users);
             }
             catch (error) {
                 console.error(error);
             }
-        }))();
+        })();
     }, [apiServices]);
     useEffect(() => {
         fetchRelatedInstances();
     }, [fetchRelatedInstances, reloadOnErrorTrigger, instance]);
     useEffect(() => {
-        if (relatedObject === null || relatedObject === void 0 ? void 0 : relatedObject.rootObjectId) {
+        if (relatedObject?.rootObjectId) {
             const callback = () => fetchRelatedInstances();
-            instanceChanges === null || instanceChanges === void 0 ? void 0 : instanceChanges.subscribe(relatedObject === null || relatedObject === void 0 ? void 0 : relatedObject.rootObjectId, callback);
-            return () => instanceChanges === null || instanceChanges === void 0 ? void 0 : instanceChanges.unsubscribe(relatedObject === null || relatedObject === void 0 ? void 0 : relatedObject.rootObjectId, callback);
+            instanceChanges?.subscribe(relatedObject?.rootObjectId, callback);
+            return () => instanceChanges?.unsubscribe(relatedObject?.rootObjectId, callback);
         }
     }, [instanceChanges, relatedObject]);
     const deleteRow = (id) => {
@@ -207,8 +200,7 @@ const RepeatableField = (props) => {
                 },
                 'min-width': '44px',
             }, variant: "text", onClick: () => setReloadOnErrorTrigger((prevState) => !prevState) }, "Retry")));
-    const save = (actionType, input, instanceId, setSubmitting) => __awaiter(void 0, void 0, void 0, function* () {
-        var _d, _e, _f, _g, _h, _j;
+    const save = async (actionType, input, instanceId, setSubmitting) => {
         setSubmitting && setSubmitting(true);
         // date-time fields are stored in the database in ISO format so convert all
         // LocalDateTime objects to ISO format.
@@ -220,13 +212,13 @@ const RepeatableField = (props) => {
         let isSuccessful = false;
         let error;
         if (actionType === 'create') {
-            const updatedInput = Object.assign(Object.assign({}, input), { [property === null || property === void 0 ? void 0 : property.relatedPropertyId]: { id: instance === null || instance === void 0 ? void 0 : instance.id } });
+            const updatedInput = { ...input, [property?.relatedPropertyId]: { id: instance?.id } };
             try {
-                const instance = yield apiServices.post(getPrefixedUrl(`/objects/${property.objectId}/instances/actions`), {
+                const instance = await apiServices.post(getPrefixedUrl(`/objects/${property.objectId}/instances/actions`), {
                     actionId: DEFAULT_CREATE_ACTION,
                     input: updatedInput,
                 });
-                const hasAccess = (property === null || property === void 0 ? void 0 : property.relatedPropertyId) && property.relatedPropertyId in instance;
+                const hasAccess = property?.relatedPropertyId && property.relatedPropertyId in instance;
                 hasAccess && setRelatedInstances([...relatedInstances, instance]);
                 setSubmitting && setSubmitting(false);
                 // clear out dialog
@@ -242,23 +234,25 @@ const RepeatableField = (props) => {
                     isError: true,
                 });
                 // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                error = (_e = (_d = err.response) === null || _d === void 0 ? void 0 : _d.data) === null || _e === void 0 ? void 0 : _e.error;
+                error = err.response?.data?.error;
                 setSubmitting && setSubmitting(false);
             }
         }
         else {
-            const relatedObjectId = relatedObject === null || relatedObject === void 0 ? void 0 : relatedObject.id;
+            const relatedObjectId = relatedObject?.id;
             try {
-                yield apiServices.post(getPrefixedUrl(`/objects/${relatedObjectId}/instances/${instanceId}/actions`), {
+                await apiServices.post(getPrefixedUrl(`/objects/${relatedObjectId}/instances/${instanceId}/actions`), {
                     actionId: `_${actionType}`,
-                    input: pick(input, (_g = (_f = relatedObject === null || relatedObject === void 0 ? void 0 : relatedObject.properties) === null || _f === void 0 ? void 0 : _f.filter((property) => !property.formula && property.type !== 'collection').map((property) => property.id)) !== null && _g !== void 0 ? _g : []),
+                    input: pick(input, relatedObject?.properties
+                        ?.filter((property) => !property.formula && property.type !== 'collection')
+                        .map((property) => property.id) ?? []),
                 });
                 if (actionType === 'delete') {
                     setRelatedInstances((prevInstances) => prevInstances.filter((instance) => instance.id !== instanceId));
                     setSubmitting && setSubmitting(false);
                 }
                 else {
-                    setRelatedInstances((prevInstances) => prevInstances.map((i) => (i.id === (instance === null || instance === void 0 ? void 0 : instance.id) ? instance : i)));
+                    setRelatedInstances((prevInstances) => prevInstances.map((i) => (i.id === instance?.id ? instance : i)));
                     setSubmitting && setSubmitting(false);
                 }
                 // clear out dialog
@@ -274,27 +268,30 @@ const RepeatableField = (props) => {
                     isError: true,
                 });
                 // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                error = (_j = (_h = err.response) === null || _h === void 0 ? void 0 : _h.data) === null || _j === void 0 ? void 0 : _j.error;
+                error = err.response?.data?.error;
             }
         }
         return { isSuccessful, error };
-    });
+    };
     const retrieveViewLayout = () => {
-        var _a, _b, _c, _d;
         let properties = [];
-        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 = relatedObject === null || relatedObject === void 0 ? void 0 : relatedObject.properties) === null || _b === void 0 ? void 0 : _b.find((p) => p.id === propertyId);
+                const property = relatedObject?.properties?.find((p) => p.id === propertyId);
                 if (property) {
                     if ((property.type === 'object' && property.id !== property.relatedPropertyId) ||
                         property.type === 'address' ||
                         property.type === 'user') {
-                        properties.push(Object.assign(Object.assign({}, property), { id: ['user', 'object'].includes(property.type) && !prop.id.endsWith('.name')
+                        properties.push({
+                            ...property,
+                            id: ['user', 'object'].includes(property.type) && !prop.id.endsWith('.name')
                                 ? `${prop.id}.name`
-                                : prop.id, name: property.type === 'address'
+                                : prop.id,
+                            name: property.type === 'address'
                                 ? `${property.name} - ${startCase(prop.id.split('.')[1])}`
-                                : property.name }));
+                                : property.name,
+                        });
                     }
                     else {
                         properties.push(property);
@@ -304,7 +301,12 @@ const RepeatableField = (props) => {
         }
         else {
             properties =
-                (_d = (_c = relatedObject === null || relatedObject === void 0 ? void 0 : relatedObject.properties) === null || _c === void 0 ? void 0 : _c.filter((prop) => !['address', 'image', 'collection'].includes(prop.type)).map((prop) => (Object.assign(Object.assign({}, prop), { id: prop.type === 'object' || prop.type === 'user' ? `${prop.id}.name` : prop.id })))) !== null && _d !== void 0 ? _d : [];
+                relatedObject?.properties
+                    ?.filter((prop) => !['address', 'image', 'collection'].includes(prop.type))
+                    .map((prop) => ({
+                    ...prop,
+                    id: prop.type === 'object' || prop.type === 'user' ? `${prop.id}.name` : prop.id,
+                })) ?? [];
         }
         return properties;
     };
@@ -342,7 +344,7 @@ const RepeatableField = (props) => {
         React.createElement(Skeleton, null),
         React.createElement(Skeleton, null))) : (React.createElement(React.Fragment, null,
         React.createElement(Box, { sx: { padding: '10px 0' } },
-            !(relatedInstances === null || relatedInstances === void 0 ? void 0 : relatedInstances.length) ? (!error ? (React.createElement(Typography, { sx: { color: 'rgb(114 124 132)', fontSize: '14px' } }, "No items added")) : (React.createElement(ErrorComponent, null))) : (React.createElement(TableContainer, { sx: {
+            !relatedInstances?.length ? (!error ? (React.createElement(Typography, { sx: { color: 'rgb(114 124 132)', fontSize: '14px' } }, "No items added")) : (React.createElement(ErrorComponent, null))) : (React.createElement(TableContainer, { sx: {
                     borderRadius: '6px',
                     border: '1px solid #919EAB3D',
                     boxShadow: 'none',
@@ -350,12 +352,11 @@ const RepeatableField = (props) => {
                 } },
                 React.createElement(Table, { stickyHeader: true, sx: { minWidth: 650 } },
                     React.createElement(TableHead, { sx: { backgroundColor: '#F4F6F8' } },
-                        React.createElement(TableRow, null, columns === null || columns === void 0 ? void 0 :
-                            columns.map((prop) => React.createElement(TableCell, { sx: styles.tableCell }, prop.name)),
-                            React.createElement(TableCell, { sx: Object.assign(Object.assign({}, styles.tableCell), { width: '80px' }) }))),
-                    React.createElement(TableBody, null, relatedInstances === null || relatedInstances === void 0 ? void 0 : relatedInstances.map((relatedInstance, index) => (React.createElement(TableRow, { key: relatedInstance.id }, columns === null || columns === void 0 ? void 0 :
-                        columns.map((prop) => {
-                            var _a;
+                        React.createElement(TableRow, null,
+                            columns?.map((prop) => React.createElement(TableCell, { sx: styles.tableCell }, prop.name)),
+                            React.createElement(TableCell, { sx: { ...styles.tableCell, width: '80px' } }))),
+                    React.createElement(TableBody, null, relatedInstances?.map((relatedInstance, index) => (React.createElement(TableRow, { key: relatedInstance.id },
+                        columns?.map((prop) => {
                             return (React.createElement(TableCell, { sx: { color: '#212B36', fontSize: '16px' } },
                                 React.createElement(Typography, { key: prop.id, sx: prop.id === 'name'
                                         ? {
@@ -369,7 +370,7 @@ const RepeatableField = (props) => {
                                         : undefined },
                                     getValue(relatedInstance, prop.id, prop.type),
                                     prop.type === 'user' &&
-                                        ((_a = users === null || users === void 0 ? void 0 : users.find((user) => get(relatedInstance, `${prop.id.split('.')[0]}.id`) === user.id)) === null || _a === void 0 ? void 0 : _a.status) === 'Inactive' && React.createElement("span", null, ' (Inactive)'))));
+                                        users?.find((user) => get(relatedInstance, `${prop.id.split('.')[0]}.id`) === user.id)?.status === 'Inactive' && React.createElement("span", null, ' (Inactive)'))));
                         }),
                         canUpdateProperty && (React.createElement(TableCell, { sx: { width: '80px' } },
                             React.createElement(IconButton, { "aria-label": `edit-collection-instance-${index}`, onClick: () => editRow(relatedInstance.id) },
@@ -379,9 +380,9 @@ const RepeatableField = (props) => {
                                 React.createElement(Tooltip, { title: "Delete" },
                                     React.createElement(TrashCan, { sx: { ':hover': { color: '#A12723' } } })))))))))))),
             hasCreateAction && (React.createElement(Button, { variant: "contained", sx: styles.addButton, onClick: addRow }, "Add"))),
-        relatedObject && openDialog && (React.createElement(ActionDialog, { object: relatedObject, open: openDialog, apiServices: apiServices, onClose: () => setOpenDialog(false), instanceInput: dialogType === 'update' ? (_a = relatedInstances.find((i) => i.id === selectedRow)) !== null && _a !== void 0 ? _a : {} : {}, handleSubmit: save, 
+        relatedObject && openDialog && (React.createElement(ActionDialog, { object: relatedObject, open: openDialog, apiServices: apiServices, onClose: () => setOpenDialog(false), instanceInput: dialogType === 'update' ? relatedInstances.find((i) => i.id === selectedRow) ?? {} : {}, handleSubmit: save, 
             // eslint-disable-next-line @typescript-eslint/no-explicit-any
-            objectInputCommonProps: { apiServices }, action: (_b = relatedObject === null || relatedObject === void 0 ? void 0 : relatedObject.actions) === null || _b === void 0 ? void 0 : _b.find((a) => a.id ===
+            objectInputCommonProps: { apiServices }, action: relatedObject?.actions?.find((a) => a.id ===
                 (dialogType === 'create' ? '_create' : dialogType === 'update' ? '_update' : '_delete')), instanceId: selectedRow, relatedProperty: property, queryAddresses: queryAddresses, user: user })),
         React.createElement(Snackbar, { open: snackbarError.showAlert, handleClose: () => setSnackbarError({ isError: snackbarError.isError, showAlert: false }), message: snackbarError.message, error: snackbarError.isError })));
 };

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

@@ -12,11 +12,14 @@ const apiBaseUrl = process.env.REACT_APP_API_ROOT || `${window.location.origin}/
 export class RepeatableFieldComponent extends ReactComponent {
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     constructor(component, options, data) {
-        var _a;
-        super(Object.assign(Object.assign({}, component), { canUpdateProperty: !component.readOnly, hideLabel: true }), options, data);
+        super({
+            ...component,
+            canUpdateProperty: !component.readOnly,
+            hideLabel: true,
+        }, options, data);
         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) ?? {};
     }
     init() {
         if (this.criteria) {
@@ -33,9 +36,8 @@ export class RepeatableFieldComponent 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);
                     }
@@ -49,7 +51,7 @@ export class RepeatableFieldComponent extends ReactComponent {
         const inputId = `${this.component.id}-input`;
         return ReactDOM.render(React.createElement("div", null, !this.component.hidden ? (React.createElement(ApiBaseUrlProvider, { url: apiBaseUrl },
             React.createElement(NotificationProvider, null,
-                React.createElement(FormComponentWrapper, Object.assign({}, this.component, { inputId: inputId, viewOnly: !this.component.canUpdateProperty }), this.component.property.manyToManyPropertyId ? (React.createElement(DropdownRepeatableField, { id: inputId, property: this.component.property, instance: this.component.instance, apiServices: this.component.apiServices, criteria: this.updatedCriteria, readOnly: !this.component.canUpdateProperty, initialMiddleObjectInstances: this.component.initialMiddleObjectInstances, middleObject: this.component.middleObject, getMiddleObjectInstances: this.component.getMiddleObjectInstances, fieldHeight: this.component.fieldHeight, viewLayout: this.component.viewLayout })) : (React.createElement(RepeatableField, Object.assign({}, this.component))))))) : null), element);
+                React.createElement(FormComponentWrapper, { ...this.component, inputId: inputId, viewOnly: !this.component.canUpdateProperty }, this.component.property.manyToManyPropertyId ? (React.createElement(DropdownRepeatableField, { id: inputId, property: this.component.property, instance: this.component.instance, apiServices: this.component.apiServices, criteria: this.updatedCriteria, readOnly: !this.component.canUpdateProperty, initialMiddleObjectInstances: this.component.initialMiddleObjectInstances, middleObject: this.component.middleObject, getMiddleObjectInstances: this.component.getMiddleObjectInstances, fieldHeight: this.component.fieldHeight, viewLayout: this.component.viewLayout })) : (React.createElement(RepeatableField, { ...this.component })))))) : null), element);
     }
     detachReact(element) {
         ReactDOM.unmountComponentAtNode(element);

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

@@ -6,7 +6,9 @@ export declare class UserComponent extends ReactComponent {
     [x: string]: any;
     static schema: any;
     errorDetails: any;
-    component: BaseFormComponentProps;
+    component: BaseFormComponentProps & {
+        initialValue?: string;
+    };
     componentRoot?: Root;
     criteria: Record<string, unknown> | undefined;
     updatedCriteria: Record<string, unknown>;

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

@@ -1,4 +1,3 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
 import { ReactComponent } from '@formio/react';
 import { cloneDeep, isEmpty } from 'lodash';
 import React from 'react';
@@ -8,21 +7,25 @@ import { isPropertyVisible, transformToWhere } from '../../utils';
 import { UserProperty } from './UserProperty';
 export class UserComponent extends ReactComponent {
     constructor(component, options, data) {
-        var _a;
-        super(Object.assign(Object.assign({}, component), { canUpdateProperty: !component.readOnly, hideLabel: true }), options, data);
+        super({
+            ...component,
+            canUpdateProperty: !component.readOnly,
+            hideLabel: true,
+        }, options, data);
         this.handleChangeUserProperty = (value) => {
+            delete this.errorDetails['api-error'];
             // set the value on the form instance at this.root.data
             const updatedValue = value ? { name: value.label, id: value.value } : '';
             this.setValue(updatedValue);
             // update the value in the component instance
-            this.updateValue(updatedValue !== null && updatedValue !== void 0 ? updatedValue : {}, { modified: true });
+            this.updateValue(updatedValue ?? {}, { modified: true });
             this.handleValidation();
             this.attach(this.element);
             this.component.autoSave && this.component.autoSave(value);
         };
         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.handleChangeUserProperty = this.handleChangeUserProperty.bind(this);
     }
     init() {
@@ -45,6 +48,42 @@ export class UserComponent 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.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 = {};
@@ -68,10 +107,9 @@ export class UserComponent 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;
@@ -85,15 +123,20 @@ export class UserComponent extends ReactComponent {
         this.element && this.attach(this.element);
     }
     attachReact(element) {
-        var _a;
-        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 }) });
+        const updatedComponent = {
+            ...this.component,
+            instance: {
+                ...this.component.instance,
+                [this.component.key]: isEmpty(this.dataValue) ? null : this.dataValue,
+            },
+        };
         if (!this.componentRoot) {
             this.componentRoot = createRoot(element, { onRecoverableError: console.error });
         }
         // 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(UserProperty, Object.assign({}, updatedComponent, { id: inputId, value: (_a = this.dataValue) !== null && _a !== void 0 ? _a : '', handleChangeUserProperty: this.handleChangeUserProperty, error: this.hasErrors(), filter: this.criteria ? { where: transformToWhere(this.updatedCriteria) } : undefined })))));
+            React.createElement(FormComponentWrapper, { ...updatedComponent, inputId: inputId, errorMessage: this.errorMessages() },
+                React.createElement(UserProperty, { ...updatedComponent, id: inputId, value: this.dataValue ?? '', handleChangeUserProperty: this.handleChangeUserProperty, error: this.hasErrors(), filter: this.criteria ? { where: transformToWhere(this.updatedCriteria) } : undefined }))));
     }
 }

package/dist/published/components/custom/Form/FormComponents/UserComponent/UserProperty.js

@@ -10,8 +10,8 @@ export const UserProperty = (props) => {
     const [users, setUsers] = useState();
     const [userValue, setUserValue] = useState();
     useEffect(() => {
-        if (value === '$_CURRENT' && (user === null || user === void 0 ? void 0 : user.id)) {
-            const loggedInUser = users === null || users === void 0 ? void 0 : users.find((u) => u.id === user.id);
+        if (value === '$_CURRENT' && user?.id) {
+            const loggedInUser = users?.find((u) => u.id === user.id);
             if (loggedInUser) {
                 setUserValue({ label: loggedInUser.name, value: loggedInUser.id });
                 handleChangeUserProperty({ label: loggedInUser.name, value: loggedInUser.id });
@@ -31,7 +31,7 @@ export const UserProperty = (props) => {
             setLoadingOptions(true);
             apiServices.get(getPrefixedUrl(`/users`), (error, userList) => {
                 setUsers(userList);
-                setOptions((userList !== null && userList !== void 0 ? userList : []).map((user) => ({ label: user.name, value: user.id })));
+                setOptions((userList ?? []).map((user) => ({ label: user.name, value: user.id })));
                 setLoadingOptions(false);
             });
         }
@@ -58,33 +58,33 @@ export const UserProperty = (props) => {
                         },
                     } }, children));
             }, sx: {
-                '& button.MuiButtonBase-root': Object.assign({}, (!loadingOptions && value
-                    ? {
-                        visibility: 'visible',
-                    }
-                    : {})),
+                '& button.MuiButtonBase-root': {
+                    ...(!loadingOptions && value
+                        ? {
+                            visibility: 'visible',
+                        }
+                        : {}),
+                },
             }, noOptionsText: 'No options available', renderOption: (props, option) => {
-                var _a;
-                return (React.createElement("li", Object.assign({}, props, { key: option.id }),
+                return (React.createElement("li", { ...props, key: option.id },
                     React.createElement(Typography, { sx: { marginLeft: '8px', fontSize: '14px' } },
                         option.label,
                         " ",
                         '',
-                        ((_a = users === null || users === void 0 ? void 0 : users.find((user) => option.value === user.id)) === null || _a === void 0 ? void 0 : _a.status) === 'Inactive' ? (React.createElement("span", null, "(Inactive)")) : (''))));
+                        users?.find((user) => option.value === user.id)?.status === 'Inactive' ? (React.createElement("span", null, "(Inactive)")) : (''))));
             }, onOpen: () => {
                 setOpenOptions(true);
-            }, onClose: () => setOpenOptions(false), value: userValue !== null && userValue !== void 0 ? userValue : '', options: options, getOptionLabel: (option) => {
-                var _a, _b, _c, _d;
+            }, onClose: () => setOpenOptions(false), value: userValue ?? '', options: options, getOptionLabel: (option) => {
                 if (typeof option === 'string') {
-                    return (_b = (_a = options.find((o) => o.value === option)) === null || _a === void 0 ? void 0 : _a.label) !== null && _b !== void 0 ? _b : '';
+                    return options.find((o) => o.value === option)?.label ?? '';
                 }
                 else {
                     {
-                        if (((_c = users === null || users === void 0 ? void 0 : users.find((user) => option.value === user.id)) === null || _c === void 0 ? void 0 : _c.status) === 'Inactive') {
+                        if (users?.find((user) => option.value === user.id)?.status === 'Inactive') {
                             return option.label + ' (Inactive)';
                         }
                         else {
-                            return (_d = option.label) !== null && _d !== void 0 ? _d : '';
+                            return option.label ?? '';
                         }
                     }
                 }
@@ -96,20 +96,22 @@ export const UserProperty = (props) => {
                 if (typeof value === 'string') {
                     return option.value === value;
                 }
-                return option.value === (value === null || value === void 0 ? void 0 : value.value);
+                return option.value === value?.value;
             }, onChange: (event, value) => {
                 handleChangeUserProperty(value);
-            }, selectOnFocus: false, renderInput: (params) => (React.createElement(TextField, Object.assign({}, params, { placeholder: 'Select', sx: Object.assign({}, (!loadingOptions && value
-                    ? {
-                        '.MuiOutlinedInput-root': {
-                            background: 'white',
-                            border: 'auto',
-                        },
-                        '& fieldset': { borderColor: 'auto' },
-                        '&:hover .MuiOutlinedInput-notchedOutline': {
-                            border: 'auto',
-                        },
-                        caretColor: 'white',
-                    }
-                    : {})), size: fieldHeight !== null && fieldHeight !== void 0 ? fieldHeight : 'medium' }))), error: error }))));
+            }, selectOnFocus: false, renderInput: (params) => (React.createElement(TextField, { ...params, placeholder: 'Select', sx: {
+                    ...(!loadingOptions && value
+                        ? {
+                            '.MuiOutlinedInput-root': {
+                                background: 'white',
+                                border: 'auto',
+                            },
+                            '& fieldset': { borderColor: 'auto' },
+                            '&:hover .MuiOutlinedInput-notchedOutline': {
+                                border: 'auto',
+                            },
+                            caretColor: 'white',
+                        }
+                        : {}),
+                }, size: fieldHeight ?? 'medium' })), error: error }))));
 };