@evoke-platform/ui-components 1.6.0-dev.3 → 1.6.0-dev.30

package/dist/published/components/core/SwipeableDrawer/SwipeableDrawer.d.ts

@@ -0,0 +1,4 @@
+import { SwipeableDrawerProps } from '@mui/material';
+import * as React from 'react';
+declare const SwipeableDrawer: (props: SwipeableDrawerProps) => React.JSX.Element;
+export default SwipeableDrawer;

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

@@ -0,0 +1,8 @@
+import { SwipeableDrawer as MuiSwipeableDrawer } from '@mui/material';
+import * as React from 'react';
+import UIThemeProvider from '../../../theme';
+const SwipeableDrawer = (props) => {
+    return (React.createElement(UIThemeProvider, null,
+        React.createElement(MuiSwipeableDrawer, { ...props })));
+};
+export default SwipeableDrawer;

package/dist/published/components/core/SwipeableDrawer/index.d.ts

@@ -0,0 +1,3 @@
+import SwipeableDrawer from './SwipeableDrawer';
+export default SwipeableDrawer;
+export { SwipeableDrawer };

package/dist/published/components/core/SwipeableDrawer/index.js

@@ -0,0 +1,3 @@
+import SwipeableDrawer from './SwipeableDrawer';
+export default SwipeableDrawer;
+export { SwipeableDrawer };

package/dist/published/components/core/index.d.ts

@@ -37,6 +37,7 @@ export { Skeleton } from './Skeleton';
 export { Snackbar } from './Snackbar';
 export * from './StaticDatePicker';
 export { Step, StepButton, StepConnector, StepContent, StepIcon, StepLabel, Stepper } from './Stepper';
+export { SwipeableDrawer } from './SwipeableDrawer';
 export { Switch } from './Switch';
 export { Table } from './Table';
 export { Tab, Tabs } from './Tabs';

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

@@ -37,6 +37,7 @@ export { Skeleton } from './Skeleton';
 export { Snackbar } from './Snackbar';
 export * from './StaticDatePicker';
 export { Step, StepButton, StepConnector, StepContent, StepIcon, StepLabel, Stepper } from './Stepper';
+export { SwipeableDrawer } from './SwipeableDrawer';
 export { Switch } from './Switch';
 export { Table } from './Table';
 export { Tab, Tabs } from './Tabs';

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

@@ -186,7 +186,7 @@ const customSelector = (props) => {
                 return opts.find((o) => option === o.name)?.label || option;
             }
             return option.label;
-        }, isOptionEqualToValue: (option, value) => {
+        }, getOptionKey: (option) => option.name, isOptionEqualToValue: (option, value) => {
             if (typeof option === 'string') {
                 return option === value;
             }

package/dist/published/components/custom/Form/FormComponents/DocumentComponent/Document.d.ts

@@ -12,6 +12,7 @@ type DocumentProps = {
     objectId?: string;
     validate?: DocumentValidation;
     value: (File | SavedDocumentReference)[] | undefined;
+    onFileRejections: (fileRejectionsErrors: string[]) => void;
 };
 export declare const Document: (props: DocumentProps) => React.JSX.Element;
 export {};

package/dist/published/components/custom/Form/FormComponents/DocumentComponent/Document.js

@@ -1,16 +1,32 @@
 import { isNil } from 'lodash';
+import prettyBytes from 'pretty-bytes';
 import React, { useEffect, useState } from 'react';
 import { useDropzone } from 'react-dropzone';
 import { UploadCloud } from '../../../../../icons';
 import { Skeleton, Snackbar, Typography } from '../../../../core';
 import { Box, Grid } from '../../../../layout';
+import { createAcceptObject } from '../../../util';
 import { getPrefixedUrl } from '../../utils';
 import { DocumentList } from './DocumentList';
 export const Document = (props) => {
-    const { id, handleChange, property, instance, canUpdateProperty, apiServices, error, objectId, value, validate } = props;
+    const { id, handleChange, property, instance, canUpdateProperty, apiServices, error, objectId, value, validate, onFileRejections, } = props;
     const [documents, setDocuments] = useState();
     const [hasUpdatePermission, setHasUpdatePermission] = useState();
     const [snackbarError, setSnackbarError] = useState();
+    let allowedTypesMessage = '';
+    if (validate?.allowedFileExtensions?.length) {
+        if (validate.allowedFileExtensions.length === 1) {
+            allowedTypesMessage = validate.allowedFileExtensions[0];
+        }
+        else {
+            allowedTypesMessage = `${validate.allowedFileExtensions.slice(0, -1).join(', ')} or ${validate.allowedFileExtensions.slice(-1)[0]}`;
+        }
+    }
+    const maxSizeInBytes = Number.isFinite(validate?.maxSizeInKB)
+        ? // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+            validate.maxSizeInKB * 1000 // convert to bytes
+        : undefined;
+    const formattedMaxSize = maxSizeInBytes !== undefined ? prettyBytes(maxSizeInBytes) : '';
     useEffect(() => {
         setDocuments(value);
     }, [value]);
@@ -36,15 +52,27 @@ export const Document = (props) => {
         handleChange(property.id, newDocuments);
     };
     const uploadDisabled = !!validate?.maxDocuments && (documents?.length ?? 0) >= validate.maxDocuments;
-    const { getRootProps, getInputProps, open } = useDropzone({
+    const { getRootProps, getInputProps, open, fileRejections } = useDropzone({
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         onDrop: (files) => handleUpload(files),
         disabled: uploadDisabled,
+        accept: validate?.allowedFileExtensions ? createAcceptObject(validate.allowedFileExtensions) : undefined,
+        maxSize: maxSizeInBytes,
     });
+    useEffect(() => {
+        const errors = [];
+        if (fileRejections.some((fileRejection) => fileRejection.errors.some((error) => error.code === 'file-invalid-type'))) {
+            errors.push(`Invalid file extension. Allowed extensions are: ${allowedTypesMessage}`);
+        }
+        if (fileRejections.some((fileRejection) => fileRejection.errors.some((error) => error.code === 'file-too-large'))) {
+            errors.push(`File size exceeds the max limit of ${formattedMaxSize}`);
+        }
+        onFileRejections(errors);
+    }, [fileRejections, onFileRejections]);
     return (React.createElement(React.Fragment, null,
         canUpdateProperty && hasUpdatePermission && (React.createElement(Box, { sx: {
                 margin: '5px 0',
-                height: '115px',
+                height: formattedMaxSize || allowedTypesMessage ? '136px' : '115px',
                 borderRadius: '8px',
                 display: 'flex',
                 justifyContent: 'center',
@@ -63,8 +91,20 @@ export const Document = (props) => {
                         ' ',
                         React.createElement(Typography, { component: 'span', sx: { color: uploadDisabled ? '#919EAB' : '#0075A7', fontSize: '14px' } }, "select file"),
                         ' ',
-                        "to upload"))))),
-        canUpdateProperty && isNil(hasUpdatePermission) && (React.createElement(Skeleton, { variant: "rectangular", height: "115px", sx: { margin: '5px 0', borderRadius: '8px' } })),
+                        "to upload"),
+                    allowedTypesMessage && (React.createElement(Typography, { sx: {
+                            color: '#637381',
+                            textAlign: 'center',
+                            fontSize: '12px',
+                        } }, `${allowedTypesMessage}.`)),
+                    formattedMaxSize && (React.createElement(Typography, { sx: {
+                            color: '#637381',
+                            textAlign: 'center',
+                            fontSize: '12px',
+                        } }, validate?.maxDocuments === 1
+                        ? `Max size of ${formattedMaxSize}.`
+                        : `The max size of each document is ${formattedMaxSize}.`)))))),
+        canUpdateProperty && isNil(hasUpdatePermission) && (React.createElement(Skeleton, { variant: "rectangular", height: formattedMaxSize || allowedTypesMessage ? '136px' : '115px', sx: { margin: '5px 0', borderRadius: '8px' } })),
         React.createElement(DocumentList, { property: property, instance: instance, objectId: objectId, handleChange: handleChange, value: value, apiServices: apiServices, setSnackbarError: (type, message) => setSnackbarError({ message, type }), canUpdateProperty: canUpdateProperty && !!hasUpdatePermission }),
         React.createElement(Snackbar, { open: !!snackbarError?.message, handleClose: () => setSnackbarError(null), message: snackbarError?.message, error: snackbarError?.type === 'error' })));
 };

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

@@ -16,6 +16,7 @@ export declare class DocumentComponent extends ReactComponent {
      */
     manageFormErrors(): void;
     handleChange: (key: string, value?: (File | SavedDocumentReference)[] | null) => void;
+    handleFileRejections(fileRejectionsErrors: string[]): void;
     handleValidation(value?: (File | SavedDocumentReference)[] | null): void;
     beforeSubmit(): Promise<void>;
     attachReact(element: Element): void;

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

@@ -26,6 +26,7 @@ export class DocumentComponent extends ReactComponent {
         };
         this.errorDetails = {};
         this.handleChange = this.handleChange.bind(this);
+        this.handleFileRejections = this.handleFileRejections.bind(this);
     }
     init() {
         this.on(`api-error`, (details) => {
@@ -87,6 +88,12 @@ export class DocumentComponent extends ReactComponent {
             }
         });
     }
+    handleFileRejections(fileRejectionsErrors) {
+        delete this.errorDetails['file-rejections'];
+        if (fileRejectionsErrors.length > 0) {
+            this.errorDetails['file-rejections'] = `${fileRejectionsErrors.join('; ')}.`;
+        }
+    }
     handleValidation(value) {
         const validate = this.component.validate;
         const amountOfDocuments = value?.length ?? 0;
@@ -131,6 +138,6 @@ export class DocumentComponent extends ReactComponent {
         const inputId = `${this.component.id}-input`;
         return ReactDOM.render(React.createElement("div", null,
             React.createElement(FormComponentWrapper, { ...this.component, inputId: inputId, viewOnly: !this.component.canUpdateProperty, errorMessage: this.errorMessages() },
-                React.createElement(Document, { ...this.component, id: inputId, handleChange: this.handleChange, error: this.hasErrors(), value: this.dataValue }))), root);
+                React.createElement(Document, { ...this.component, id: inputId, handleChange: this.handleChange, error: this.hasErrors(), value: this.dataValue, onFileRejections: this.handleFileRejections }))), root);
     }
 }

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

@@ -1,6 +1,6 @@
-import { BackupOutlined, ClearRounded } from '@mui/icons-material';
 import React, { useEffect, useState } from 'react';
 import { useDropzone } from 'react-dropzone';
+import { ClearRounded, UploadCloud } from '../../../../../icons';
 import { CardMedia, IconButton, Typography } from '../../../../core';
 import { Box, Grid } from '../../../../layout';
 export function blobToDataUrl(blob) {
@@ -84,7 +84,7 @@ export const Image = (props) => {
         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' } })),
+                React.createElement(UploadCloud, { sx: { color: '#919EAB', width: '50px', height: '30px' } })),
             React.createElement(Grid, { item: true, xs: 12 },
                 React.createElement(Typography, { variant: "body2", sx: { color: '#212B36', textAlign: 'center' } },
                     "Drag and drop or",

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

@@ -7,6 +7,7 @@ import sift from 'sift';
 import { Edit, TrashCan } from '../../../../../icons';
 import { Button, IconButton, Skeleton, Snackbar, Table, TableBody, TableCell, TableContainer, TableHead, TableRow, Tooltip, Typography, } from '../../../../core';
 import { Box } from '../../../../layout';
+import { getReadableQuery } from '../../../CriteriaBuilder';
 import { getPrefixedUrl, normalizeDateTime, retrieveCustomErrorMessage } from '../../utils';
 import { ActionDialog } from './ActionDialog';
 import { DocumentViewerCell } from './DocumentViewerCell';
@@ -37,6 +38,7 @@ const RepeatableField = (props) => {
     const [relatedObject, setRelatedObject] = useState();
     const [hasCreateAction, setHasCreateAction] = useState(false);
     const [users, setUsers] = useState();
+    const [criteriaObjects, setCriteriaObjects] = useState([]);
     const [openDialog, setOpenDialog] = useState(false);
     const [dialogType, setDialogType] = useState();
     const [selectedRow, setSelectedRow] = useState();
@@ -50,9 +52,7 @@ const RepeatableField = (props) => {
     const [error, setError] = useState(false);
     const DEFAULT_CREATE_ACTION = '_create';
     const { instanceChanges } = useNotification();
-    const fetchRelatedInstances = useCallback(async () => {
-        if (openDialog)
-            return;
+    const fetchRelatedObject = useCallback(async () => {
         let relatedObject;
         if (property.objectId) {
             try {
@@ -80,31 +80,86 @@ const RepeatableField = (props) => {
             catch (err) {
                 console.error(error);
             }
-            if (property.relatedPropertyId && instance?.id) {
-                const filterProperty = `${property.relatedPropertyId}.id`;
-                const filter = { where: { [filterProperty]: instance?.id }, limit: 100 };
-                const objectId = property.objectId;
-                try {
-                    const timeout = setTimeout(() => {
-                        setLoading(false);
-                    }, 300);
-                    setLoading(true);
-                    const instances = await apiServices.get(getPrefixedUrl(`/objects/${objectId}/instances`), {
-                        params: { filter: JSON.stringify(filter) },
-                    });
-                    clearTimeout(timeout);
+        }
+        relatedObject && checkCreateAccess(relatedObject);
+    }, [apiServices, property]);
+    const fetchRelatedInstances = useCallback(async () => {
+        if (openDialog)
+            return;
+        if (property.objectId && property.relatedPropertyId && instance?.id) {
+            const filterProperty = `${property.relatedPropertyId}.id`;
+            const filter = { where: { [filterProperty]: instance?.id }, limit: 100 };
+            const objectId = property.objectId;
+            try {
+                const timeout = setTimeout(() => {
                     setLoading(false);
-                    if (instances) {
-                        setRelatedInstances(instances);
-                    }
-                }
-                catch (error) {
-                    setError(true);
+                }, 300);
+                setLoading(true);
+                const instances = await 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, viewLayout]);
+    }, [apiServices, property]);
+    const fetchCriteriaObjects = useCallback(async () => {
+        let objectIds = [];
+        const criteriaProperties = relatedObject?.properties?.filter((property) => property.type === 'criteria' && property.objectId) ?? [];
+        if (tableViewLayout) {
+            objectIds = criteriaProperties
+                .filter((p) => tableViewLayout.properties.some((column) => column.id === p.id))
+                .map((property) => property.objectId);
+        }
+        else {
+            objectIds = criteriaProperties.map((p) => p.objectId);
+        }
+        const objects = [];
+        for (const objectId of new Set(objectIds)) {
+            try {
+                const criteriaObject = await apiServices.get(getPrefixedUrl(`/objects/${objectId}/effective`), {
+                    params: { fields: ['id', 'name', 'properties'] },
+                });
+                objects.push(criteriaObject);
+            }
+            catch (error) {
+                console.error(`Error fetching criteria object with ID ${objectId}:`, error);
+            }
+        }
+        setCriteriaObjects(objects);
+    }, [apiServices, relatedObject, tableViewLayout]);
+    useEffect(() => {
+        (async () => {
+            try {
+                const users = await apiServices.get(getPrefixedUrl(`/users`));
+                setUsers(users);
+            }
+            catch (error) {
+                console.error(error);
+            }
+        })();
+    }, [apiServices]);
+    useEffect(() => {
+        fetchRelatedObject();
+        fetchRelatedInstances();
+    }, [fetchRelatedInstances, fetchRelatedObject, reloadOnErrorTrigger, instance]);
+    useEffect(() => {
+        if (relatedObject)
+            fetchCriteriaObjects();
+    }, [fetchCriteriaObjects, relatedObject]);
+    useEffect(() => {
+        if (relatedObject?.rootObjectId) {
+            const callback = () => fetchRelatedInstances();
+            instanceChanges?.subscribe(relatedObject?.rootObjectId, callback);
+            return () => instanceChanges?.unsubscribe(relatedObject?.rootObjectId, callback);
+        }
+    }, [instanceChanges, relatedObject]);
     const retrieveCriteria = (relatedObjProperty, action, object) => {
         let property;
         if (action.parameters) {
@@ -171,27 +226,6 @@ const RepeatableField = (props) => {
             });
         }
     };
-    useEffect(() => {
-        (async () => {
-            try {
-                const users = await apiServices.get(getPrefixedUrl(`/users`));
-                setUsers(users);
-            }
-            catch (error) {
-                console.error(error);
-            }
-        })();
-    }, [apiServices]);
-    useEffect(() => {
-        fetchRelatedInstances();
-    }, [fetchRelatedInstances, reloadOnErrorTrigger, instance]);
-    useEffect(() => {
-        if (relatedObject?.rootObjectId) {
-            const callback = () => fetchRelatedInstances();
-            instanceChanges?.subscribe(relatedObject?.rootObjectId, callback);
-            return () => instanceChanges?.unsubscribe(relatedObject?.rootObjectId, callback);
-        }
-    }, [instanceChanges, relatedObject]);
     const deleteRow = (id) => {
         setDialogType('delete');
         setSelectedRow(id);
@@ -334,28 +368,24 @@ const RepeatableField = (props) => {
     };
     const getValue = (relatedInstance, propertyId, propertyType) => {
         const value = get(relatedInstance, propertyId);
-        // If the property is not date-like then just return the
-        // value found at the given path.
-        if (!['date', 'date-time', 'time'].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);
+            return DateTime.fromISO(value).toLocaleString(DateTime.DATE_SHORT);
         }
         if (propertyType === 'date-time') {
-            return DateTime.fromISO(stringValue).toLocaleString(DateTime.DATETIME_SHORT);
+            return DateTime.fromISO(value).toLocaleString(DateTime.DATETIME_SHORT);
         }
         if (propertyType === 'time') {
-            return DateTime.fromISO(stringValue).toLocaleString(DateTime.TIME_SIMPLE);
+            return DateTime.fromISO(value).toLocaleString(DateTime.TIME_SIMPLE);
+        }
+        if (propertyType === 'criteria' && typeof value === 'object') {
+            const property = relatedObject?.properties?.find((p) => p.id === propertyId);
+            return getReadableQuery(value, criteriaObjects.find((o) => o.id === property?.objectId)?.properties ?? []);
         }
+        return value;
     };
     const columns = retrieveViewLayout();
     return loading ? (React.createElement(React.Fragment, null,

package/dist/published/components/custom/Form/tests/Form.test.js

@@ -6,7 +6,7 @@ import { isEqual } from 'lodash';
 import { http, HttpResponse } from 'msw';
 import { setupServer } from 'msw/node';
 import React from 'react';
-import { it } from 'vitest';
+import { expect, it } from 'vitest';
 import Form from '../Common/Form';
 import { licenseObject, npLicense, npSpecialtyType1, npSpecialtyType2, rnLicense, rnSpecialtyType1, rnSpecialtyType2, specialtyObject, specialtyTypeObject, } from './test-data';
 const removePoppers = () => {

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

@@ -233,6 +233,12 @@ export function convertFormToComponents(entries, parameters, object) {
                     maxDocuments: parameter.type === 'document'
                         ? parameter.validation?.maxDocuments
                         : undefined,
+                    allowedFileExtensions: parameter.type === 'document'
+                        ? parameter.validation?.allowedFileExtensions
+                        : undefined,
+                    maxSizeInKB: parameter.type === 'document'
+                        ? parameter.validation?.maxSizeInKB
+                        : undefined,
                     customMessage: ['integer', 'number', 'date', 'time', 'document'].includes(parameter.type ?? '')
                         ? parameter.validation
                             ?.errorMessage

package/dist/published/components/custom/FormField/AddressFieldComponent/addressFieldComponent.js

@@ -45,7 +45,7 @@ const AddressFieldComponent = (props) => {
         setAnchorEl(null);
     };
     return (React.createElement(Box, null,
-        !mask ? (React.createElement(TextField, { id: id, inputRef: textFieldRef, onChange: !readOnly ? handleChange : undefined, error: error, errorMessage: errorMessage, value: value, fullWidth: true, onBlur: onBlur, size: size ?? 'medium', placeholder: placeholder, InputProps: {
+        !mask ? (React.createElement(TextField, { id: id, inputRef: textFieldRef, onChange: !readOnly ? handleChange : undefined, error: error, errorMessage: errorMessage, value: value, fullWidth: true, onBlur: onBlur, size: size ?? 'medium', placeholder: readOnly ? undefined : placeholder, InputProps: {
                 type: 'search',
                 autoComplete: 'off',
             }, required: required, readOnly: readOnly, multiline: property.type === 'string' && !readOnly && isMultiLineText, rows: isMultiLineText ? (rows ? rows : 3) : undefined, ...(additionalProps ?? {}) })) : (React.createElement(InputMask, { mask: mask, maskChar: inputMaskPlaceholderChar ?? '_', value: value, onChange: !readOnly ? handleChange : undefined, onBlur: onBlur, alwaysShowMask: true }, (() => (React.createElement(TextField, { id: id, inputRef: textFieldRef, sx: readOnly

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

@@ -56,12 +56,12 @@ const BooleanSelect = (props) => {
         return readOnlyComponent();
     }
     return displayOption === 'dropdown' ? (React.createElement(Autocomplete, { renderInput: (params) => (React.createElement(TextField, { ...params, error: error, errorMessage: errorMessage, onBlur: onBlur, fullWidth: true, sx: { background: 'white' }, placeholder: placeholder, size: size ?? 'medium' })), value: booleanOptions.find((opt) => opt.value === value) ?? '', onChange: (e, selectedValue) => handleChange(selectedValue.value), isOptionEqualToValue: (option, val) => option?.value === val?.value, options: booleanOptions, disableClearable: true, sx: { background: 'white', borderRadius: '8px' }, ...(additionalProps ?? {}), sortBy: "NONE", required: strictlyTrue })) : (React.createElement(FormControl, { required: strictlyTrue, error: error, fullWidth: true },
-        React.createElement(FormControlLabel, { labelPlacement: "end", label: labelComponent(), control: displayOption === 'switch' ? (React.createElement(Switch, { id: id, "aria-required": strictlyTrue, "aria-invalid": error, size: size ?? 'medium', name: property.id, checked: value, onChange: (e) => handleChange(e.target.checked), sx: {
+        React.createElement(FormControlLabel, { labelPlacement: "end", label: labelComponent(), sx: { marginLeft: '-8px' }, control: displayOption === 'switch' ? (React.createElement(Switch, { id: id, "aria-required": strictlyTrue, "aria-invalid": error, size: size ?? 'medium', name: property.id, checked: value, onChange: (e) => handleChange(e.target.checked), sx: {
                     alignSelf: 'start',
-                } })) : (React.createElement(Checkbox, { id: id, "aria-required": strictlyTrue, "aria-invalid": error, size: size ?? 'medium', checked: value, name: property.id, onChange: (e) => handleChange(e.target.checked), sx: {
+                }, ...(additionalProps ?? {}) })) : (React.createElement(Checkbox, { id: id, "aria-required": strictlyTrue, "aria-invalid": error, size: size ?? 'medium', checked: value, name: property.id, onChange: (e) => handleChange(e.target.checked), sx: {
                     alignSelf: 'start',
                     padding: '4px 9px 9px 9px',
-                } })) }),
+                }, ...(additionalProps ?? {}) })) }),
         error && errorMessage?.length && React.createElement(FormHelperText, { sx: { marginX: 0 } }, errorMessage),
         descriptionComponent()));
 };

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

@@ -1,4 +1,5 @@
 import { DateTimeFormatter } from '@js-joda/core';
+import { omit } from 'lodash';
 import React, { useEffect, useState } from 'react';
 import { InvalidDate, LocalDate, nativeJs } from '../../../../util';
 import { DatePicker, LocalizationProvider, TextField } from '../../../core';
@@ -36,6 +37,11 @@ const DatePickerSelect = (props) => {
         onChange && onChange(property.id, date, property);
     };
     return readOnly ? (React.createElement(InputFieldComponent, { ...{ ...props, defaultValue: asMonthDayYearFormat(value) } })) : (React.createElement(LocalizationProvider, null,
-        React.createElement(DatePicker, { value: value, onChange: handleChange, inputFormat: "MM/dd/yyyy", renderInput: (params) => (React.createElement(TextField, { ...params, id: id, error: error, errorMessage: errorMessage, onBlur: onBlur, fullWidth: true, required: required, sx: { background: 'white', borderRadius: '8px' }, size: size ?? 'medium', ...(additionalProps ?? {}) })) })));
+        React.createElement(DatePicker, { value: value, onChange: handleChange, inputFormat: "MM/dd/yyyy", renderInput: (params) => (React.createElement(TextField, { ...params, id: id, error: error, errorMessage: errorMessage, onBlur: onBlur, fullWidth: true, required: required, sx: { background: 'white', borderRadius: '8px' }, size: size ?? 'medium', 
+                // merges MUI inputProps with additionalProps.inputProps in a way that still shows the value
+                inputProps: {
+                    ...params.inputProps,
+                    ...(additionalProps?.inputProps ?? {}),
+                }, ...omit(additionalProps, ['inputProps']) })) })));
 };
 export default DatePickerSelect;

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

@@ -1,4 +1,5 @@
 import { LocalDate, LocalDateTime, LocalTime, nativeJs } from '@js-joda/core';
+import { omit } from 'lodash';
 import React, { useEffect, useState } from 'react';
 import { InvalidDate } from '../../../../util';
 import { DateTimePicker, LocalizationProvider, TextField } from '../../../core';
@@ -43,6 +44,11 @@ const DateTimePickerSelect = (props) => {
         props.onChange && props.onChange(property.id, date, property);
     };
     return readOnly ? (React.createElement(InputFieldComponent, { ...{ ...props, defaultValue: formatDateTime(value) } })) : (React.createElement(LocalizationProvider, null,
-        React.createElement(DateTimePicker, { value: value, onChange: handleChange, renderInput: (params) => (React.createElement(TextField, { ...params, id: id, error: error, errorMessage: errorMessage, onBlur: onBlur, fullWidth: true, required: required, sx: { background: 'white', borderRadius: '8px' }, size: size ?? 'medium', ...(additionalProps ?? {}) })) })));
+        React.createElement(DateTimePicker, { value: value, onChange: handleChange, renderInput: (params) => (React.createElement(TextField, { ...params, id: id, error: error, errorMessage: errorMessage, onBlur: onBlur, fullWidth: true, required: required, sx: { background: 'white', borderRadius: '8px' }, size: size ?? 'medium', 
+                // merges MUI inputProps with additionalProps.inputProps in a way that still shows the value
+                inputProps: {
+                    ...params.inputProps,
+                    ...(additionalProps?.inputProps ?? {}),
+                }, ...omit(additionalProps, ['inputProps']) })) })));
 };
 export default DateTimePickerSelect;

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

@@ -36,9 +36,12 @@ const InputFieldComponent = (props) => {
         setInputValue(selectValue);
     };
     const InputProps = property.type === 'number'
-        ? { inputComponent: NumericFormat, inputProps: { min, max, readOnly } }
+        ? {
+            inputComponent: NumericFormat,
+            inputProps: { min, max, readOnly, ...(additionalProps?.inputProps ?? {}) },
+        }
         : property.type === 'integer'
-            ? { inputProps: { min, max } }
+            ? { inputProps: { min, max, ...(additionalProps?.inputProps ?? {}) } }
             : null;
     return property.enum && !readOnly ? (React.createElement(Autocomplete, { id: id, 
         // note: this is different between widgets and builder
@@ -62,7 +65,7 @@ const InputFieldComponent = (props) => {
                     backgroundColor: '#f4f6f8',
                 },
             }),
-        }, error: error, errorMessage: errorMessage, value: value, onChange: !readOnly ? handleChange : undefined, InputProps: { ...InputProps, readOnly: readOnly }, required: required, fullWidth: true, onBlur: onBlur, placeholder: placeholder, size: size ?? 'medium', type: property.type === 'integer' ? 'number' : 'text', multiline: property.type === 'string' && !readOnly && isMultiLineText, rows: isMultiLineText ? (rows ? rows : 3) : undefined, ...(additionalProps ?? {}) })) : (React.createElement(InputMask, { mask: mask, maskChar: inputMaskPlaceholderChar ?? '_', value: value, onChange: !readOnly ? handleChange : undefined, onBlur: onBlur, alwaysShowMask: true }, (() => (React.createElement(TextField, { id: id, sx: readOnly
+        }, error: error, errorMessage: errorMessage, value: value, onChange: !readOnly ? handleChange : undefined, InputProps: { ...InputProps, readOnly: readOnly }, required: required, fullWidth: true, onBlur: onBlur, placeholder: readOnly ? undefined : placeholder, size: size ?? 'medium', type: property.type === 'integer' ? 'number' : 'text', multiline: property.type === 'string' && !readOnly && isMultiLineText, rows: isMultiLineText ? (rows ? rows : 3) : undefined, ...(additionalProps ?? {}) })) : (React.createElement(InputMask, { mask: mask, maskChar: inputMaskPlaceholderChar ?? '_', value: value, onChange: !readOnly ? handleChange : undefined, onBlur: onBlur, alwaysShowMask: true }, (() => (React.createElement(TextField, { id: id, sx: readOnly
             ? {
                 '& .MuiOutlinedInput-notchedOutline': {
                     border: 'none',

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

@@ -1,4 +1,5 @@
 import { createFilterOptions, List, ListSubheader } from '@mui/material';
+import { uniq } from 'lodash';
 import React, { forwardRef, useEffect, useRef, useState } from 'react';
 import { Clear } from '../../../../icons';
 import { Autocomplete, FormControl, FormControlLabel, IconButton, Radio, RadioGroup, TextField, Typography, } from '../../../core';
@@ -15,7 +16,7 @@ const Select = (props) => {
     const [isOtherFocused, setIsOtherFocused] = useState(false);
     const [value, setValue] = useState(defaultValue);
     const [inputValue, setInputValue] = useState(!selectOptions?.some((option) => (typeof option === 'string' && option === defaultValue) ||
-        option.value === defaultValue)
+        option.value === defaultValue) && property.type !== 'array'
         ? defaultValue
         : '');
     const [errorState, setErrorState] = useState();
@@ -27,11 +28,14 @@ const Select = (props) => {
             otherInputRef.current.focus();
         }
     }, [isOther, value]);
+    useEffect(() => {
+        setValue(defaultValue);
+    }, [defaultValue]);
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     const handleChange = (event, selected) => {
         if (Array.isArray(selected)) {
             const newValues = selected.map((option) => option.value ?? option);
-            setValue(newValues);
+            setValue(uniq(newValues));
             onChange && onChange(property.id, newValues, property);
         }
         else {
@@ -144,6 +148,7 @@ const Select = (props) => {
                 filtered.push({
                     value: inputValue,
                     label: `Add "${inputValue}"`,
+                    isCustomValue: true,
                 });
             }
             return filtered;
@@ -151,12 +156,19 @@ const Select = (props) => {
             ? (option, value) => isOptionEqualToValue(option, value)
             : undefined, getOptionLabel: getOptionLabel && !isCombobox
             ? (option) => getOptionLabel(option)
-            : (option) => (typeof option === 'string' ? option : option.label), renderOption: renderOption
+            : (option) => {
+                if (typeof option === 'string')
+                    return option;
+                // If the option is a custom value, return the value without the prepended "Add" text.
+                if (option.isCustomValue)
+                    return option.value;
+                return option.label ?? '';
+            }, renderOption: renderOption
             ? (props, option, state) => renderOption(props, option, state)
-            : undefined, ListboxComponent: ListboxComponent, disableCloseOnSelect: disableCloseOnSelect, sx: {
+            : (props, option) => React.createElement("li", { ...props }, option.label ?? option), ListboxComponent: ListboxComponent, disableCloseOnSelect: disableCloseOnSelect, sx: {
             '& button.MuiButtonBase-root': {
                 visibility: 'visible',
             },
-        }, ...(isCombobox ? { selectOnFocus: true, handleHomeEndKeys: true, freeSolo: true } : {}), ...(additionalProps ?? {}) }));
+        }, forcePopupIcon: true, ...(isCombobox ? { selectOnFocus: true, handleHomeEndKeys: true, freeSolo: true } : {}), ...(additionalProps ?? {}) }));
 };
 export default Select;

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

@@ -1,9 +1,11 @@
 import { LocalDateTime } from '@js-joda/core';
 import { TimePicker } from '@mui/x-date-pickers';
-import { isUndefined, padStart } from 'lodash';
+import { isUndefined, omit, padStart } from 'lodash';
+import { DateTime } from 'luxon';
 import React, { useEffect, useState } from 'react';
 import { InvalidDate } from '../../../../util';
 import { LocalizationProvider, TextField } from '../../../core';
+import InputFieldComponent from '../InputFieldComponent/InputFieldComponent';
 const TimePickerSelect = (props) => {
     const { id, property, defaultValue, error, errorMessage, readOnly, required, size, onBlur, placeholder, additionalProps, } = props;
     const values = defaultValue ? defaultValue.split(':') : undefined;
@@ -39,7 +41,15 @@ const TimePickerSelect = (props) => {
             props.onChange && props.onChange(property.id, date, property);
         }
     };
-    return (React.createElement(LocalizationProvider, null,
-        React.createElement(TimePicker, { value: value, onChange: handleChange, renderInput: (params) => (React.createElement(TextField, { ...params, id: id, error: error, errorMessage: errorMessage, onBlur: onBlur, fullWidth: true, required: required, sx: { background: 'white', borderRadius: '8px' }, size: size ?? 'medium', placeholder: placeholder, readOnly: readOnly, ...(additionalProps ?? {}) })), readOnly: readOnly })));
+    return readOnly ? (React.createElement(InputFieldComponent, { ...{
+            ...props,
+            defaultValue: value instanceof LocalDateTime ? DateTime.fromISO(value.toString()).toFormat('hh:mm a') : '',
+        } })) : (React.createElement(LocalizationProvider, null,
+        React.createElement(TimePicker, { value: value, onChange: handleChange, renderInput: (params) => (React.createElement(TextField, { ...params, id: id, error: error, errorMessage: errorMessage, onBlur: onBlur, fullWidth: true, required: required, sx: { background: 'white', borderRadius: '8px' }, size: size ?? 'medium', placeholder: placeholder, 
+                // merges MUI inputProps with additionalProps.inputProps in a way that still shows the value
+                inputProps: {
+                    ...params.inputProps,
+                    ...(additionalProps?.inputProps ?? {}),
+                }, ...omit(additionalProps, ['inputProps']) })), readOnly: readOnly })));
 };
 export default TimePickerSelect;