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

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

@@ -0,0 +1,369 @@
+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';
+import { DateTime } from 'luxon';
+import React, { useCallback, useEffect, useState } from 'react';
+import sift from 'sift';
+import { TrashCan } from '../../../../../icons';
+import { Button, IconButton, Skeleton, Snackbar, Table, TableBody, TableCell, TableContainer, TableHead, TableRow, Typography, } from '../../../../core';
+import { Box } from '../../../../layout';
+import { getPrefixedUrl, normalizeDateTime } from '../../utils';
+import { ActionDialog } from './ActionDialog';
+const styles = {
+    addButton: {
+        backgroundColor: 'rgba(0, 117, 167, 0.08)',
+        boxShadow: 'none',
+        color: 'rgba(0, 117, 167)',
+        marginTop: '15px',
+        '&:hover': {
+            backgroundColor: 'rgba(0, 117, 167, 0.08)',
+            color: 'rgba(0, 117, 167)',
+            boxShadow: 'none',
+        },
+    },
+    tableCell: {
+        color: '#637381',
+        backgroundColor: '#F4F6F8',
+        fontSize: '14px',
+        fontWeight: '700',
+        padding: '8px 20px',
+        whiteSpace: 'nowrap',
+    },
+};
+const RepeatableField = (props) => {
+    var _a, _b, _c, _d, _e;
+    const { property, instance, canUpdateProperty, apiServices, queryAddresses, user } = props;
+    const [relatedInstances, setRelatedInstances] = useState([]);
+    const [relatedObject, setRelatedObject] = useState();
+    const [hasCreateAction, setHasCreateAction] = useState(false);
+    const [users, setUsers] = useState();
+    const [openDialog, setOpenDialog] = useState(false);
+    const [dialogType, setDialogType] = useState();
+    const [selectedRow, setSelectedRow] = useState();
+    const [loading, setLoading] = useState(true);
+    const [reloadOnErrorTrigger, setReloadOnErrorTrigger] = useState(true);
+    const [snackbarError, setSnackbarError] = useState({
+        showAlert: false,
+        isError: false,
+    });
+    const [error, setError] = useState(false);
+    const DEFAULT_CREATE_ACTION = '_create';
+    const { instanceChanges } = useNotification();
+    const fetchRelatedInstances = useCallback(() => __awaiter(void 0, void 0, void 0, function* () {
+        if (openDialog)
+            return;
+        let relatedObject;
+        if (property.objectId) {
+            try {
+                relatedObject = yield apiServices.get(getPrefixedUrl(`/objects/${property.objectId}/effective`));
+                setRelatedObject(relatedObject);
+            }
+            catch (err) {
+                console.error(error);
+            }
+            if (property.relatedPropertyId && (instance === null || instance === void 0 ? void 0 : instance.id)) {
+                const filterProperty = `${property.relatedPropertyId}.id`;
+                const filter = { where: { [filterProperty]: instance === null || instance === void 0 ? void 0 : 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`), {
+                        params: { filter: JSON.stringify(filter) },
+                    });
+                    clearTimeout(timeout);
+                    setLoading(false);
+                    if (instances) {
+                        setRelatedInstances(instances);
+                    }
+                }
+                catch (error) {
+                    setError(true);
+                }
+            }
+        }
+        relatedObject && checkCreateAccess(relatedObject);
+    }), [apiServices, property]);
+    const checkCreateAccess = (relatedObject) => {
+        if (property.objectId && canUpdateProperty) {
+            apiServices
+                .get(getPrefixedUrl(`/objects/${property.objectId}/instances/checkAccess`), {
+                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');
+                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;
+                    }
+                    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;
+                    }
+                    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;
+                    }
+                    if (relatedObjectProperty) {
+                        if (validationCriteria) {
+                            if (JSON.stringify(validationCriteria).includes('{{{input.')) {
+                                setHasCreateAction(checkAccess.result);
+                            }
+                            else {
+                                const criteria = sift(validationCriteria);
+                                setHasCreateAction(criteria(instance) && checkAccess.result);
+                            }
+                        }
+                        else {
+                            setHasCreateAction(checkAccess.result);
+                        }
+                    }
+                }
+                else {
+                    setHasCreateAction(false);
+                }
+            });
+        }
+    };
+    useEffect(() => {
+        (() => __awaiter(void 0, void 0, void 0, function* () {
+            try {
+                const users = yield 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) {
+            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, relatedObject]);
+    const deleteRow = (id) => {
+        setDialogType('delete');
+        setSelectedRow(id);
+        setOpenDialog(true);
+    };
+    const addRow = () => {
+        setDialogType('create');
+        setOpenDialog(true);
+    };
+    const editRow = (id) => {
+        setDialogType('update');
+        setSelectedRow(id);
+        setOpenDialog(true);
+    };
+    const ErrorComponent = () => loading ? (React.createElement("div", null,
+        React.createElement(Typography, { sx: {
+                fontSize: '14px',
+                color: '#727c84',
+            } }, "Loading..."))) : (React.createElement(Typography, { sx: {
+            color: 'rgb(114 124 132)',
+            fontSize: '14px',
+        } },
+        "An error occurred when retrieving this data.",
+        ' ',
+        React.createElement(Button, { sx: {
+                padding: 0,
+                '&:hover': {
+                    backgroundColor: 'transparent',
+                },
+                '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 _f, _g, _h, _j, _k, _l;
+        setSubmitting && setSubmitting(true);
+        // date-time fields are stored in the database in ISO format so convert all
+        // LocalDateTime objects to ISO format.
+        if (isObject(input)) {
+            input = Object.entries(input).reduce((agg, [key, value]) => Object.assign(agg, {
+                [key]: value instanceof LocalDateTime ? normalizeDateTime(value) : value,
+            }), {});
+        }
+        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 } });
+            try {
+                const instance = yield 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;
+                hasAccess && setRelatedInstances([...relatedInstances, instance]);
+                setSubmitting && setSubmitting(false);
+                // clear out dialog
+                setOpenDialog(false);
+                setDialogType(undefined);
+                setSelectedRow(undefined);
+                isSuccessful = true;
+            }
+            catch (err) {
+                setSnackbarError({
+                    showAlert: true,
+                    message: `An error occurred while creating an instance`,
+                    isError: true,
+                });
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                error = (_g = (_f = err.response) === null || _f === void 0 ? void 0 : _f.data) === null || _g === void 0 ? void 0 : _g.error;
+                setSubmitting && setSubmitting(false);
+            }
+        }
+        else {
+            const relatedObjectId = relatedObject === null || relatedObject === void 0 ? void 0 : relatedObject.id;
+            try {
+                yield apiServices.post(getPrefixedUrl(`/objects/${relatedObjectId}/instances/${instanceId}/actions`), {
+                    actionId: `_${actionType}`,
+                    input: pick(input, (_j = (_h = relatedObject === null || relatedObject === void 0 ? void 0 : relatedObject.properties) === null || _h === void 0 ? void 0 : _h.filter((property) => !property.formula && property.type !== 'collection').map((property) => property.id)) !== null && _j !== void 0 ? _j : []),
+                });
+                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)));
+                    setSubmitting && setSubmitting(false);
+                }
+                // clear out dialog
+                setOpenDialog(false);
+                setDialogType(undefined);
+                setSelectedRow(undefined);
+                isSuccessful = true;
+            }
+            catch (err) {
+                setSnackbarError({
+                    showAlert: true,
+                    message: `An error occurred while ${actionType === 'delete' ? ' deleting' : ' updating'} an instance`,
+                    isError: true,
+                });
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                error = (_l = (_k = err.response) === null || _k === void 0 ? void 0 : _k.data) === null || _l === void 0 ? void 0 : _l.error;
+            }
+        }
+        return { isSuccessful, error };
+    });
+    const retrieveViewLayout = () => {
+        var _a, _b, _c, _d, _e;
+        let properties = [];
+        if (((_b = (_a = relatedObject === null || relatedObject === void 0 ? void 0 : relatedObject.viewLayout) === null || _a === void 0 ? void 0 : _a.table) === null || _b === void 0 ? void 0 : _b.properties) && relatedObject.viewLayout.table.properties.length > 1) {
+            for (const prop of relatedObject.viewLayout.table.properties) {
+                const propertyId = prop.id.split('.')[0];
+                const property = (_c = relatedObject.properties) === null || _c === void 0 ? void 0 : _c.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')
+                                ? `${prop.id}.name`
+                                : prop.id, name: property.type === 'address'
+                                ? `${property.name} - ${startCase(prop.id.split('.')[1])}`
+                                : property.name }));
+                    }
+                    else {
+                        properties.push(property);
+                    }
+                }
+            }
+        }
+        else {
+            properties =
+                (_e = (_d = relatedObject === null || relatedObject === void 0 ? void 0 : relatedObject.properties) === null || _d === void 0 ? void 0 : _d.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 && _e !== void 0 ? _e : [];
+        }
+        return properties.filter((prop) => prop.id !== 'name');
+    };
+    const getValue = (relatedInstance, propertyId, propertyType) => {
+        const value = get(relatedInstance, propertyId);
+        // If the property is not date-like or document then just return the
+        // value found at the given path.
+        if (!['date', 'date-time', 'time', 'document'].includes(propertyType)) {
+            return value;
+        }
+        // If the date-like value is empty then there is no need to format.
+        if (!value) {
+            return value;
+        }
+        // At this point it has been asserted that there is a value
+        // and since the property is date-like the value must be
+        // a string.
+        const stringValue = value;
+        if (propertyType === 'date') {
+            return DateTime.fromISO(stringValue).toLocaleString(DateTime.DATE_SHORT);
+        }
+        if (propertyType === 'date-time') {
+            return DateTime.fromISO(stringValue).toLocaleString(DateTime.DATETIME_SHORT);
+        }
+        if (propertyType === 'time') {
+            return DateTime.fromISO(stringValue).toLocaleString(DateTime.TIME_SIMPLE);
+        }
+        if (property.type === 'document') {
+            return Array.isArray(value) ? value.map((v) => v.name).join(', ') : value;
+        }
+    };
+    return loading ? (React.createElement(React.Fragment, null,
+        React.createElement(Skeleton, null),
+        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: {
+                    borderRadius: '6px',
+                    border: '1px solid #919EAB3D',
+                    boxShadow: 'none',
+                    maxHeight: '70vh',
+                } },
+                React.createElement(Table, { stickyHeader: true, sx: { minWidth: 650 } },
+                    React.createElement(TableHead, { sx: { backgroundColor: '#F4F6F8' } },
+                        React.createElement(TableRow, null,
+                            React.createElement(TableCell, { sx: styles.tableCell }, (_b = (_a = relatedObject === null || relatedObject === void 0 ? void 0 : relatedObject.properties) === null || _a === void 0 ? void 0 : _a.find((p) => p.id === 'name')) === null || _b === void 0 ? void 0 : _b.name), (_c = retrieveViewLayout()) === null || _c === void 0 ? void 0 :
+                            _c.map((prop) => (React.createElement(TableCell, { sx: styles.tableCell }, prop.name))),
+                            React.createElement(TableCell, { sx: Object.assign(Object.assign({}, styles.tableCell), { width: '20px' }) }))),
+                    React.createElement(TableBody, null, relatedInstances === null || relatedInstances === void 0 ? void 0 : relatedInstances.map((relatedInstance, index) => {
+                        var _a;
+                        return (React.createElement(TableRow, { key: relatedInstance.id },
+                            React.createElement(TableCell, { sx: {
+                                    color: '#212B36',
+                                    fontSize: '14px',
+                                    '&:hover': { textDecoration: 'underline', cursor: 'pointer' },
+                                }, onClick: canUpdateProperty ? () => editRow(relatedInstance.id) : undefined },
+                                React.createElement(Typography, null, relatedInstance === null || relatedInstance === void 0 ? void 0 : relatedInstance.name)), (_a = retrieveViewLayout()) === null || _a === void 0 ? void 0 :
+                            _a.map((prop) => {
+                                var _a;
+                                return (React.createElement(TableCell, { sx: { color: '#212B36', fontSize: '14px' } },
+                                    React.createElement(Typography, { key: prop.id },
+                                        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)'))));
+                            }),
+                            canUpdateProperty && (React.createElement(TableCell, { sx: { width: '20px' } },
+                                React.createElement(IconButton, { "aria-label": `delete-collection-instance-${index}`, onClick: () => deleteRow(relatedInstance.id) },
+                                    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' ? (_d = relatedInstances.find((i) => i.id === selectedRow)) !== null && _d !== void 0 ? _d : {} : {}, handleSubmit: save, 
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            objectInputCommonProps: { apiServices }, action: (_e = relatedObject === null || relatedObject === void 0 ? void 0 : relatedObject.actions) === null || _e === void 0 ? void 0 : _e.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 })));
+};
+export default RepeatableField;

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

@@ -0,0 +1,20 @@
+import { ObjWithRoot, ObjectInstance } from '@evoke-platform/context';
+import { ReactComponent } from '@formio/react';
+import { BaseFormComponentProps } from '../../types';
+declare type RepeatableFieldComponentProps = BaseFormComponentProps & {
+    middleObject: ObjWithRoot;
+    initialMiddleObjectInstances: ObjectInstance[];
+    getMiddleObjectInstances: () => Promise<ObjectInstance[]>;
+};
+export declare class RepeatableFieldComponent extends ReactComponent {
+    [x: string]: any;
+    static schema: any;
+    component: RepeatableFieldComponentProps;
+    criteria: Record<string, any> | undefined;
+    updatedCriteria: Record<string, any>;
+    constructor(component: RepeatableFieldComponentProps, options: any, data: any);
+    init(): void;
+    attachReact(element: Element): void;
+    detachReact(element: Element): void;
+}
+export {};

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

@@ -0,0 +1,57 @@
+import { ApiBaseUrlProvider, NotificationProvider } from '@evoke-platform/context';
+import { ReactComponent } from '@formio/react';
+import dot from 'dot-object';
+import { cloneDeep } from 'lodash';
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { FormComponentWrapper } from '../../Common';
+import { getAllCriteriaInputs, updateCriteriaInputs } from '../../utils';
+import { DropdownRepeatableField } from './ManyToMany/DropdownRepeatableField';
+import RepeatableField from './RepeatableField';
+const apiBaseUrl = process.env.REACT_APP_API_ROOT || `${window.location.origin}/api`;
+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);
+        this.errorDetails = {};
+        this.criteria = component.validate.criteria;
+        this.updatedCriteria = (_a = cloneDeep(component.validate.criteria)) !== null && _a !== void 0 ? _a : {};
+    }
+    init() {
+        if (this.criteria) {
+            const inputProps = getAllCriteriaInputs(this.criteria);
+            const data = dot.dot(this.root._data);
+            for (const inputProp of inputProps) {
+                // Parse data to update criteria when form is loaded.
+                updateCriteriaInputs(this.updatedCriteria, inputProp, data[inputProp], true);
+                // Parse data to update criteria when form field is updated
+                // Need to parse all fields again.
+                const compKeyFragments = inputProp.split('.');
+                let compKey = compKeyFragments[0];
+                if (['line1', 'line2', 'city', 'state', 'zipCode'].includes(compKeyFragments[1])) {
+                    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 : {};
+                    for (const inputProp of inputProps) {
+                        updateCriteriaInputs(this.updatedCriteria, inputProp, data[inputProp], true);
+                    }
+                    this.attachReact(this.element);
+                });
+            }
+        }
+    }
+    attachReact(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 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 })) : (React.createElement(RepeatableField, Object.assign({}, this.component))))))) : null), element);
+    }
+    detachReact(element) {
+        ReactDOM.unmountComponentAtNode(element);
+    }
+}

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

@@ -0,0 +1,26 @@
+import { ReactComponent } from '@formio/react';
+import { Root } from 'react-dom/client';
+import { AutocompleteOption } from '../../../../core';
+import { BaseFormComponentProps } from '../../types';
+export declare class UserComponent extends ReactComponent {
+    [x: string]: any;
+    static schema: any;
+    errorDetails: any;
+    component: BaseFormComponentProps;
+    componentRoot?: Root;
+    criteria: Record<string, unknown> | undefined;
+    updatedCriteria: Record<string, unknown>;
+    constructor(component: BaseFormComponentProps, options: any, data: any);
+    init(): void;
+    clearErrors(): void;
+    handleValidation(): void;
+    hasErrors(): boolean;
+    errorMessages(): string;
+    /**
+     * Synchronizes out-of-the-box formio errors with this field's errorDetails object
+     */
+    manageFormErrors(): void;
+    handleChangeUserProperty: (value: AutocompleteOption) => void;
+    beforeSubmit(): void;
+    attachReact(element: Element): void;
+}

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

@@ -0,0 +1,99 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { ReactComponent } from '@formio/react';
+import { cloneDeep, isEmpty } from 'lodash';
+import React from 'react';
+import { createRoot } from 'react-dom/client';
+import { FormComponentWrapper } from '../../Common';
+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);
+        this.handleChangeUserProperty = (value) => {
+            // 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.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.handleChangeUserProperty = this.handleChangeUserProperty.bind(this);
+    }
+    init() {
+        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) {
+                this.setValue(this.component.defaultValue);
+                this.updateValue(this.component.defaultValue, { modified: true });
+            }
+            // clear data and errors when a true conditional field is hidden
+            if (this.component.conditional.show && value !== this.component.conditional.eq) {
+                this.setValue('');
+                this.updateValue('', { modified: true });
+                this.clearErrors();
+                super.detach();
+                // Detach the componentRoot when the component is hidden
+                if (this.componentRoot) {
+                    this.componentRoot.unmount();
+                    this.componentRoot = undefined;
+                }
+            }
+        });
+    }
+    clearErrors() {
+        this.errorDetails = {};
+        this.root.customErrors = this.root.customErrors.filter((error) => error.formattedKeyOrPath !== this.component.key);
+    }
+    handleValidation() {
+        if (!isPropertyVisible(this.component.conditional, this.root.data)) {
+            return;
+        }
+        // check for out-of-the-box formio errors which store on this.root.errors
+        this.checkValidity(this.dataValue, true, this.data);
+        this.manageFormErrors();
+    }
+    hasErrors() {
+        return !isEmpty(this.errorDetails);
+    }
+    errorMessages() {
+        return Object.values(this.errorDetails).join(', ');
+    }
+    /**
+     * Synchronizes out-of-the-box formio errors with this field's errorDetails object
+     */
+    manageFormErrors() {
+        var _a;
+        const outOfTheBoxError = (_a = this.root.errors.find((error) => {
+            return error.component.key === this.component.key;
+        })) === null || _a === void 0 ? void 0 : _a.message;
+        // add OoB formio error to errorDetails object to show under field
+        if (outOfTheBoxError) {
+            this.errorDetails['rootError'] = outOfTheBoxError;
+        }
+        else {
+            delete this.errorDetails['rootError'];
+        }
+    }
+    beforeSubmit() {
+        this.handleValidation();
+        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 }) });
+        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 })))));
+    }
+}

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

@@ -0,0 +1,23 @@
+/// <reference types="react" />
+import { ApiServices, Property, UserAccount } from '@evoke-platform/context';
+import { AutocompleteOption } from '../../../../core';
+export declare type UserPropertyProps = {
+    id: string;
+    property: Property;
+    apiServices: ApiServices;
+    user?: UserAccount;
+    handleChangeUserProperty: (user: AutocompleteOption) => void;
+    error?: boolean;
+    setSnackbarError?: (snackbarError: {
+        showAlert: boolean;
+        message?: string;
+        isError?: boolean;
+    }) => void;
+    filter?: Record<string, unknown>;
+    value?: {
+        id: string;
+        name: string;
+    } | '$_CURRENT';
+    fieldHeight?: 'small' | 'medium';
+};
+export declare const UserProperty: (props: UserPropertyProps) => JSX.Element;