@evoke-platform/ui-components 1.5.0-dev.11 → 1.5.0-dev.13

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

@@ -46,10 +46,10 @@ export { ToggleButtonGroup } from './ToggleButtonGroup';
 export { Tooltip } from './Tooltip';
 export { Typography } from './Typography';
 export { TabContext, TabList, TabPanel, TreeItem, TreeView } from '@mui/lab';
-export { CardActionArea, CardActions, CardContent, CardHeader, CardMedia, Input, InputAdornment, InputLabel, ListItemButton, ListItemText, SvgIcon, TableBody, TableCell, TableContainer, TableHead, TablePagination, TableRow, TableSortLabel, } from '@mui/material';
+export { CardActionArea, CardActions, CardContent, CardHeader, CardMedia, Input, InputAdornment, InputLabel, ListItemButton, ListItemText, MenuList, SvgIcon, TableBody, TableCell, TableContainer, TableHead, TablePagination, TableRow, TableSortLabel, } from '@mui/material';
 export { useGridApiRef } from '@mui/x-data-grid';
-export { TreeItem as RichTreeItem, RichTreeView } from '@mui/x-tree-view';
+export { TreeItem as RichTreeItem, RichTreeView, TreeItem2Content, TreeItem2DragAndDropOverlay, TreeItem2GroupTransition, TreeItem2Icon, TreeItem2IconContainer, TreeItem2Label, TreeItem2Provider, TreeItem2Root, useTreeItem2, } from '@mui/x-tree-view';
 export type { GridSize } from '@mui/material';
 export type { GridCellParams, GridColDef, GridEventListener, GridFilterModel, GridInitialState, GridRowParams, GridSortModel, GridValueFormatterParams, GridValueGetterParams, } from '@mui/x-data-grid';
-export type { TreeItemProps, TreeViewBaseItem } from '@mui/x-tree-view';
+export type { TreeItemProps, TreeViewBaseItem, UseTreeItem2Parameters } from '@mui/x-tree-view';
 export type { AutocompleteOption } from './Autocomplete/Autocomplete';

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

@@ -47,6 +47,6 @@ export { Tooltip } from './Tooltip';
 export { Typography } from './Typography';
 //TODO: Review following components. They also need theme control:
 export { TabContext, TabList, TabPanel, TreeItem, TreeView } from '@mui/lab';
-export { CardActionArea, CardActions, CardContent, CardHeader, CardMedia, Input, InputAdornment, InputLabel, ListItemButton, ListItemText, SvgIcon, TableBody, TableCell, TableContainer, TableHead, TablePagination, TableRow, TableSortLabel, } from '@mui/material';
+export { CardActionArea, CardActions, CardContent, CardHeader, CardMedia, Input, InputAdornment, InputLabel, ListItemButton, ListItemText, MenuList, SvgIcon, TableBody, TableCell, TableContainer, TableHead, TablePagination, TableRow, TableSortLabel, } from '@mui/material';
 export { useGridApiRef } from '@mui/x-data-grid';
-export { TreeItem as RichTreeItem, RichTreeView } from '@mui/x-tree-view';
+export { TreeItem as RichTreeItem, RichTreeView, TreeItem2Content, TreeItem2DragAndDropOverlay, TreeItem2GroupTransition, TreeItem2Icon, TreeItem2IconContainer, TreeItem2Label, TreeItem2Provider, TreeItem2Root, useTreeItem2, } from '@mui/x-tree-view';

package/dist/published/components/custom/Form/Common/FormComponentWrapper.d.ts

@@ -18,7 +18,7 @@ type FormComponentWrapperProps = {
     viewOnly: boolean;
     children: React.ReactNode;
     key: string;
-    displayOption?: 'radioButton' | 'dropdown' | 'dialogBox';
+    displayOption?: 'radioButton' | 'dropdown' | 'dialogBox' | 'switch' | 'checkbox';
     onChange?: (key: string, value: unknown) => void;
     property?: ObjectProperty;
     readOnly?: boolean;

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

@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 import { AutorenewRounded, FileWithExtension, LaunchRounded } from '../../../../../icons';
-import { Button, Menu, MenuItem, Typography } from '../../../../core';
+import { Button, Menu, MenuItem, MenuList, Typography } from '../../../../core';
 import { Grid } from '../../../../layout';
 import { getPrefixedUrl } from '../../utils';
 export const DocumentViewerCell = (props) => {
@@ -66,24 +66,23 @@ export const DocumentViewerCell = (props) => {
                     fontWeight: 400,
                     fontSize: '14px',
                 } }, isLoading ? 'Preparing document...' : 'View Document')),
-        React.createElement("section", { role: "region", "aria-label": "Document Menu" },
-            React.createElement(Menu, { id: `document-menu-${instance.id}-${propertyId}`, anchorEl: anchorEl, open: Boolean(anchorEl), onClose: () => {
-                    setAnchorEl(null);
-                }, sx: {
-                    '& .MuiPaper-root': {
-                        borderRadius: '12px',
-                        boxShadow: 'rgba(145, 158, 171, 0.2)',
-                    },
-                }, variant: 'menu', slotProps: {
-                    paper: {
-                        tabIndex: 0,
-                        style: {
-                            maxHeight: 200,
-                            maxWidth: 300,
-                            minWidth: 300,
-                        },
-                    },
-                } }, instance[propertyId].map((document) => (React.createElement(MenuItem, { key: document.id, onClick: async (e) => {
+        React.createElement(Menu, { id: `document-menu-${instance.id}-${propertyId}`, anchorEl: anchorEl, open: Boolean(anchorEl), onClose: () => {
+                setAnchorEl(null);
+            }, sx: {
+                '& .MuiPaper-root': {
+                    borderRadius: '12px',
+                    boxShadow: 'rgba(145, 158, 171, 0.2)',
+                },
+            }, variant: 'menu', PaperProps: {
+                tabIndex: 0,
+                sx: {
+                    maxHeight: 200,
+                    maxWidth: 300,
+                    minWidth: 300,
+                },
+                component: 'nav',
+            } },
+            React.createElement(MenuList, { autoFocusItem: Boolean(anchorEl) }, instance[propertyId].map((document) => (React.createElement(MenuItem, { key: document.id, onClick: async (e) => {
                     setAnchorEl(null);
                     await downloadDocument(document, instance);
                 }, "aria-label": document.name },

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

@@ -1,8 +1,8 @@
 import { useNotification, } from '@evoke-platform/context';
-import { debounce, isEmpty, isObject } from 'lodash';
+import { debounce, isEmpty } from 'lodash';
 import React, { useCallback, useEffect, useState } from 'react';
 import { Skeleton } from '../../../../../core';
-import { getMiddleObject, getPrefixedUrl, transformToWhere } from '../../../utils';
+import { getMiddleObject, getPrefixedUrl, retrieveCustomErrorMessage, transformToWhere } from '../../../utils';
 import { DropdownRepeatableFieldInput } from './DropdownRepeatableFieldInput';
 export const DropdownRepeatableField = (props) => {
     const { id, property, criteria, instance, readOnly, apiServices, initialMiddleObjectInstances, middleObject, getMiddleObjectInstances, fieldHeight, viewLayout, } = props;
@@ -127,43 +127,41 @@ export const DropdownRepeatableField = (props) => {
             fetchEndObjectInstances();
         }
     }, [fetchEndObjectInstances, layoutLoaded]);
-    const saveMiddleInstance = (endObjectId, endObjectName) => {
+    const saveMiddleInstance = async (endObjectId, endObjectName) => {
         if (property.objectId) {
             const middleObject = getMiddleObject(instance, property, endObjectId, endObjectName);
-            apiServices.post(getPrefixedUrl(`/objects/${property.objectId}/instances/actions`), { actionId: `_create`, input: middleObject }, (error, newInstance) => {
-                if (!error && newInstance && isObject(newInstance)) {
-                    setMiddleObjectInstances((prevObjectInstances) => [
-                        ...prevObjectInstances,
-                        newInstance,
-                    ]);
-                }
-                else {
-                    if (error) {
-                        setSnackbarError({
-                            showAlert: true,
-                            message: 'An error occured while adding an instance',
-                            isError: true,
-                        });
-                        setDropDownSelections(middleObjectInstances);
-                    }
-                }
-            });
-        }
-    };
-    const removeMiddleInstance = (instanceId) => {
-        apiServices.post(getPrefixedUrl(`/objects/${property.objectId}/instances/${instanceId}/actions`), { actionId: '_delete' }, (error, res) => {
-            if (!error) {
-                setMiddleObjectInstances((prevInstances) => prevInstances.filter((curr) => curr.id !== instanceId));
+            try {
+                const newInstance = await apiServices.post(getPrefixedUrl(`/objects/${property.objectId}/instances/actions`), { actionId: `_create`, input: middleObject });
+                setMiddleObjectInstances((prevObjectInstances) => [
+                    ...prevObjectInstances,
+                    newInstance,
+                ]);
             }
-            else {
-                setDropDownSelections(middleObjectInstances);
+            catch (err) {
                 setSnackbarError({
                     showAlert: true,
-                    message: 'An error occurred while deleting the instance',
+                    message: retrieveCustomErrorMessage(err) ??
+                        'An error occured while adding an instance',
                     isError: true,
                 });
+                setDropDownSelections(middleObjectInstances);
             }
-        });
+        }
+    };
+    const removeMiddleInstance = async (instanceId) => {
+        try {
+            await apiServices.post(getPrefixedUrl(`/objects/${property.objectId}/instances/${instanceId}/actions`), { actionId: '_delete' });
+            setMiddleObjectInstances((prevInstances) => prevInstances.filter((curr) => curr.id !== instanceId));
+        }
+        catch (err) {
+            setDropDownSelections(middleObjectInstances);
+            setSnackbarError({
+                showAlert: true,
+                message: retrieveCustomErrorMessage(err) ??
+                    'An error occurred while deleting the instance',
+                isError: true,
+            });
+        }
     };
     return initialLoading ? (React.createElement(Skeleton, null)) : (React.createElement(React.Fragment, null, middleObjectInstances && endObject && (React.createElement(DropdownRepeatableFieldInput, { id: id, property: property, readOnly: readOnly || !middleObject.actions?.some((action) => action.id === '_create'), layout: layout, middleObjectInstances: middleObjectInstances, endObjectInstances: endObjectInstances ?? [], endObject: endObject, searchValue: searchValue ?? '', loading: loading, handleSaveMiddleInstance: saveMiddleInstance, handleRemoveMiddleInstance: removeMiddleInstance, setSearchValue: setSearchValue, setSnackbarError: setSnackbarError, snackbarError: snackbarError, selectedOptions: selectedOptions, setSelectedOptions: setSelectedOptions, setDropdownSelections: setDropDownSelections, fieldHeight: fieldHeight }))));
 };

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

@@ -7,7 +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 { getPrefixedUrl, normalizeDateTime } from '../../utils';
+import { getPrefixedUrl, normalizeDateTime, retrieveCustomErrorMessage } from '../../utils';
 import { ActionDialog } from './ActionDialog';
 import { DocumentViewerCell } from './DocumentViewerCell';
 const styles = {
@@ -251,11 +251,10 @@ const RepeatableField = (props) => {
                 isSuccessful = true;
             }
             catch (err) {
-                // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                error = err.response?.data?.error;
                 setSnackbarError({
                     showAlert: true,
-                    message: error?.message ?? `An error occurred while creating an instance`,
+                    message: retrieveCustomErrorMessage(err) ??
+                        `An error occurred while creating an instance`,
                     isError: true,
                 });
                 setSubmitting && setSubmitting(false);
@@ -285,11 +284,9 @@ const RepeatableField = (props) => {
                 isSuccessful = true;
             }
             catch (err) {
-                // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                error = err.response?.data?.error;
                 setSnackbarError({
                     showAlert: true,
-                    message: error?.message ??
+                    message: retrieveCustomErrorMessage(err) ??
                         `An error occurred while ${actionType === 'delete' ? ' deleting' : ' updating'} an instance`,
                     isError: true,
                 });

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

@@ -15,6 +15,6 @@ export declare class ViewOnlyComponent extends ReactComponent {
      * @param data - The contextual data object (model) used for this component.
      */
     constructor(component: BaseFormComponentProps, options: any, data: any);
-    showValue(value: unknown): {} | undefined;
+    showValue(value: unknown): unknown;
     attachReact(element: Element): void;
 }

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

@@ -4,6 +4,7 @@ import { DateTime } from 'luxon';
 import React from 'react';
 import ReactDOM from 'react-dom';
 import { Link, Typography } from '../../../core';
+import BooleanSelect from '../../FormField/BooleanSelect/BooleanSelect';
 import { FormComponentWrapper } from '../Common/FormComponentWrapper';
 export class ViewOnlyComponent extends ReactComponent {
     /**
@@ -25,7 +26,7 @@ export class ViewOnlyComponent extends ReactComponent {
         this.showValue = this.showValue.bind(this);
     }
     showValue(value) {
-        if (value === null || value === undefined)
+        if ((value === null || value === undefined) && this.component.type !== 'ViewOnlyBoolean')
             return React.createElement("span", null, "\u00A0");
         switch (this.component.type) {
             case 'ViewOnlyObject':
@@ -63,7 +64,9 @@ export class ViewOnlyComponent extends ReactComponent {
             case 'ViewOnlyTime':
                 return DateTime.fromISO(DateTime.now().toISODate() + 'T' + value).toFormat('hh:mm a');
             case 'ViewOnlyBoolean':
-                return value ? 'Yes' : 'No';
+                return (React.createElement(BooleanSelect, { id: this.component.key, readOnly: true, label: this.component.label, required: this.component.validate?.required, description: this.component.description, property: this.component.property, defaultValue: this.component.instance
+                        ? get(this.component.instance, this.component.key)
+                        : this.component.defaultValue, size: this.component.fieldHeight, displayOption: this.component.displayOption }));
             default:
                 return value;
         }

package/dist/published/components/custom/Form/types.d.ts

@@ -50,6 +50,8 @@ export type BaseFormComponentProps = {
     autoSave?: (update: Record<string, unknown>) => void;
     baseUrl: string;
     apiServices: ApiServices;
+    description?: string;
+    displayOption?: 'radioButton' | 'dropdown' | 'dialogBox' | 'switch' | 'checkbox';
 };
 export type ObjectPropertyInputProps = {
     id: string;

package/dist/published/components/custom/Form/utils.d.ts

@@ -1,4 +1,4 @@
-import { ActionInput, ActionInputType, ApiServices, FormEntry, InputParameter, InputParameterReference, Obj, ObjectInstance, Property, PropertyType, UserAccount } from '@evoke-platform/context';
+import { ActionInput, ActionInputType, ApiServices, AxiosError, FormEntry, InputParameter, InputParameterReference, Obj, ObjectInstance, Property, PropertyType, UserAccount } from '@evoke-platform/context';
 import { ReactComponent } from '@formio/react';
 import { LocalDateTime } from '@js-joda/core';
 import { AutocompleteOption } from '../../core';
@@ -50,3 +50,4 @@ export declare function isPropertyVisible(conditional: {
 }, formData: Record<string, unknown>): boolean;
 export declare function normalizeDateTime(dateTime: LocalDateTime): string;
 export declare function normalizeDates(instances: ObjectInstance[], object?: Obj): void;
+export declare function retrieveCustomErrorMessage(error: AxiosError<any>): string | undefined;

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

@@ -129,12 +129,12 @@ export function convertFormToComponents(entries, parameters, object) {
         }
         else if (entry.type === 'input') {
             const displayOptions = entry.display;
-            const parameter = parameters.find((parameter) => parameter.id === entry.parameterId);
+            const parameter = parameters.find((parameter) => entry.type === 'input' && parameter.id === entry.parameterId);
             if (!parameter) {
                 return;
             }
-            let property = object.properties?.find((p) => p.id === entry.parameterId) ?? {
-                id: entry.parameterId,
+            let property = object.properties?.find((p) => entry.type === 'input' && p.id === entry.parameterId) ?? {
+                id: entry.type === 'input' ? entry.parameterId : undefined,
             };
             if (property.id?.includes('.')) {
                 const topLevelProperty = object.properties?.find((p) => p.id === property.id?.split('.')[0] && (p.type === 'address' || p.type === 'user'));
@@ -163,7 +163,7 @@ export function convertFormToComponents(entries, parameters, object) {
                 type,
                 multiple: ['array', 'document'].includes(parameter.type),
                 data: {
-                    values: entry.enumWithLabels,
+                    values: entry.type === 'input' ? entry.enumWithLabels : undefined,
                 },
                 property: property,
                 defaultToCurrentTime: displayOptions?.defaultValue === 'currentTime' && parameter.type === 'time' ? true : false,
@@ -189,7 +189,7 @@ export function convertFormToComponents(entries, parameters, object) {
                 tableView: false,
                 displayOption: parameter.type === 'object'
                     ? displayOptions?.relatedObjectDisplay
-                    : parameter.type === 'string' && parameter.enum
+                    : (parameter.type === 'string' && parameter.enum) || parameter.type === 'boolean'
                         ? displayOptions?.choicesDisplay?.type
                         : undefined,
                 labelPosition: 'top',
@@ -789,7 +789,9 @@ formComponents, allCriteriaInputs, instance, objectPropertyInputProps, associate
     ];
 }
 export function getDefaultValue(initialValue, selectOptions) {
-    if (!isEmpty(initialValue) || (initialValue !== undefined && typeof initialValue === 'number')) {
+    if (typeof initialValue === 'boolean' ||
+        !isEmpty(initialValue) ||
+        (initialValue !== undefined && typeof initialValue === 'number')) {
         if (Array.isArray(initialValue)) {
             return initialValue
                 .map((option) => {
@@ -1286,6 +1288,9 @@ export function normalizeDates(instances, object) {
         });
     });
 }
+export function retrieveCustomErrorMessage(error) {
+    return error?.response?.data?.error?.statusCode !== 500 ? error?.response?.data?.error?.message : undefined;
+}
 /**
  * Given an object entry in a JsonLogic object, map it to the correct value.
  * @param entry An entry in a JsonLogic object.

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

@@ -34,12 +34,12 @@ const AddressFieldComponent = (props) => {
                     return { label, sublabel, value: address.address };
                 }));
             });
-        props.onChange(property.id, inputValue, property, undefined);
+        props.onChange && props.onChange(property.id, inputValue, property, undefined);
     };
     const handleClick = (option) => {
         setAnchorEl(null);
         setValue(option.value.line1);
-        props.onChange(property.id, option.value, property, undefined);
+        props.onChange && props.onChange(property.id, option.value, property, undefined);
     };
     const handleClose = () => {
         setAnchorEl(null);

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

@@ -17,7 +17,7 @@ const BooleanSelect = (props) => {
     }, [defaultValue]);
     const handleChange = (value) => {
         setValue(value);
-        props.onChange(property.id, value, property);
+        props.onChange && props.onChange(property.id, value, property);
     };
     const booleanOptions = [
         {
@@ -29,18 +29,7 @@ const BooleanSelect = (props) => {
             value: false,
         },
     ];
-    return displayOption === 'dropdown' ? (readOnly ? (React.createElement(InputFieldComponent, { ...props })) : (React.createElement(Autocomplete, { renderInput: (params) => (React.createElement(TextField, { ...params, error: error, errorMessage: errorMessage, onBlur: onBlur, fullWidth: true, sx: { background: 'white' }, placeholder: placeholder })), value: value, onChange: (e, selectedValue) => handleChange(selectedValue.value), isOptionEqualToValue: (option, val) => {
-            if (typeof val === 'boolean') {
-                return option?.value === val;
-            }
-            return option?.value === val?.value;
-        }, getOptionLabel: (option) => {
-            if (typeof option === 'boolean') {
-                const opt = booleanOptions.find((o) => o.value === option);
-                return opt?.label ?? '';
-            }
-            return option.label;
-        }, options: booleanOptions, disableClearable: true, sx: { background: 'white', borderRadius: '8px' }, ...(additionalProps ?? {}) }))) : (React.createElement(FormControl, { error: error, fullWidth: true },
+    return displayOption === 'dropdown' ? (readOnly ? (React.createElement(InputFieldComponent, { ...props })) : (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" }))) : (React.createElement(FormControl, { error: error, fullWidth: true },
         React.createElement(FormControlLabel, { labelPlacement: "end", label: React.createElement(Typography, { variant: "body2", sx: { wordWrap: 'break-word', fontFamily: 'Public Sans' } },
                 label,
                 tooltip && (React.createElement(Tooltip, { placement: "right", title: tooltip },

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

@@ -33,7 +33,7 @@ const DatePickerSelect = (props) => {
     }, [defaultValue]);
     const handleChange = (date) => {
         setValue(date);
-        onChange(property.id, date, property);
+        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 ?? {}) })) })));

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

@@ -40,7 +40,7 @@ const DateTimePickerSelect = (props) => {
             date = LocalDateTime.of(date, LocalTime.of(0));
         }
         setValue(date);
-        props.onChange(property.id, date, property);
+        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 ?? {}) })) })));

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

@@ -30,13 +30,13 @@ const FileUploadControl = (props) => {
     };
     useEffect(() => {
         if (uploadedFile) {
-            props.onChange(property.id, uploadedFile, property);
+            props.onChange && props.onChange(property.id, uploadedFile, property);
         }
     }, [uploadedFile]);
     const handleSelectFile = () => {
         if (uploadedFile) {
             setUploadedFile(undefined);
-            props.onChange(property.id, undefined, property);
+            props.onChange && props.onChange(property.id, undefined, property);
         }
     };
     const onDrop = useCallback(

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

@@ -6,7 +6,7 @@ import { Address } from './AddressFieldComponent/addressFieldComponent';
 export type FormFieldProps = {
     id?: string;
     property: ObjectProperty;
-    onChange: Function;
+    onChange?: Function;
     onBlur?: FocusEventHandler<HTMLInputElement | HTMLTextAreaElement>;
     defaultValue?: unknown;
     error?: boolean;

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

@@ -26,11 +26,11 @@ const InputFieldComponent = (props) => {
             ? parseInt(e.target.value, 10)
             : e.target.value;
         setValue(inputValue);
-        props.onChange(property.id, inputValue, property);
+        props.onChange && props.onChange(property.id, inputValue, property);
     };
     const handleSelectChange = (e, selected) => {
         setValue(selected.label);
-        props.onChange(property.id, selected.label, property);
+        props.onChange && props.onChange(property.id, selected.label, property);
     };
     const handleInputValueChange = (event, selectValue) => {
         setInputValue(selectValue);

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

@@ -12,11 +12,12 @@ const Select = (props) => {
     const handleChange = (event, selected) => {
         if (Array.isArray(selected)) {
             setValue(selected.map((option) => option.value ?? option));
-            props.onChange(property.id, selected.map((option) => option.value ?? option), property);
+            props.onChange &&
+                props.onChange(property.id, selected.map((option) => option.value ?? option), property);
         }
         else {
             setValue(selected);
-            props.onChange(property.id, selected, property);
+            props.onChange && props.onChange(property.id, selected, property);
         }
     };
     // eslint-disable-next-line @typescript-eslint/no-explicit-any

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

@@ -32,11 +32,11 @@ const TimePickerSelect = (props) => {
             const hour = padStart(date?.hour().toString(), 2, '0');
             const minute = padStart(date?.minute().toString(), 2, '0');
             const second = padStart(date?.second().toString(), 2, '0');
-            props.onChange(property.id, `${hour}:${minute}:${second}`, property);
+            props.onChange && props.onChange(property.id, `${hour}:${minute}:${second}`, property);
         }
         else {
             setValue(null);
-            props.onChange(property.id, date, property);
+            props.onChange && props.onChange(property.id, date, property);
         }
     };
     return (React.createElement(LocalizationProvider, null,

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@evoke-platform/ui-components",
-    "version": "1.5.0-dev.11",
+    "version": "1.5.0-dev.13",
     "description": "",
     "main": "dist/published/index.js",
     "module": "dist/published/index.js",
@@ -18,9 +18,9 @@
         "test": "vitest",
         "test:ui": "vitest --ui",
         "copy-styles": "copyfiles -u 1 src/styles/*.css dist/published/",
-        "build": "mkdirp -rf ./dist && tsc && npm run copy-styles",
+        "build": "rm -rf ./dist && tsc && npm run copy-styles",
         "build:cjs": "tsc --module CommonJS --outDir dist/cjs",
-        "prepublish": "mkdirp -rf ./dist && tsc && npm run copy-styles",
+        "prepublish": "rm -rf ./dist && tsc && npm run copy-styles",
         "storybook": "start-storybook -p 6006",
         "build-storybook": "build-storybook",
         "lint": "npm run prettier:check && npm run eslint",