@evoke-platform/ui-components 1.5.0-testing.9 → 1.5.1-dev.0

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/CriteriaBuilder/CriteriaBuilder.js

@@ -155,7 +155,7 @@ const customSelector = (props) => {
                 }));
             }
             else if (inputType === 'integer' || inputType === 'number') {
-                opts = options.filter((option) => ['=', '!=', '<', '<=', '>', '>=', 'null', 'notNull'].includes(option.name));
+                opts = options.filter((option) => ['=', '!=', '<', '<=', '>', '>=', 'null', 'notNull', 'in', 'notIn'].includes(option.name));
                 // checks if it is a single-select property
             }
             else if (inputType === 'string' && isArray(props.fieldData?.values)) {
@@ -164,7 +164,7 @@ const customSelector = (props) => {
             else if (inputType === 'string') {
                 opts = options.filter((option) => !['>', '<', '<=', '>='].includes(option.name));
             }
-            else if (inputType === 'image') {
+            else if (inputType === 'image' || inputType === 'boolean') {
                 opts = options.filter((option) => ['=', '!=', 'null', 'notNull'].includes(option.name));
             }
             break;
@@ -267,12 +267,12 @@ export const valueEditor = (props) => {
 const CriteriaBuilder = (props) => {
     const { properties, criteria, setCriteria, originalCriteria, enablePresetValues, presetValues, operators, disabled, disabledCriteria, hideBorder, presetGroupLabel, customValueEditor, treeViewOpts, disableRegexEscapeChars, } = props;
     const [propertyTreeMap, setPropertyTreeMap] = useState();
-    const processRules = (rules, isSavedValue) => {
+    const processRules = (rules) => {
         return rules.map((rule) => {
             if ('rules' in rule) {
                 return {
                     ...rule,
-                    rules: processRules(rule.rules, isSavedValue),
+                    rules: processRules(rule.rules),
                 };
             }
             else {
@@ -345,7 +345,7 @@ const CriteriaBuilder = (props) => {
         return updatedQuery
             ? {
                 ...updatedQuery,
-                rules: processRules(updatedQuery.rules, true),
+                rules: processRules(updatedQuery.rules),
             }
             : { combinator: 'and', rules: [] };
     };
@@ -371,7 +371,7 @@ const CriteriaBuilder = (props) => {
     const handleQueryChange = (q) => {
         const processedQuery = {
             ...q,
-            rules: processRules(q.rules, false),
+            rules: processRules(q.rules),
         };
         setQuery(processedQuery);
         const newCriteria = JSON.parse(formatQuery(processedQuery, {

package/dist/published/components/custom/CriteriaBuilder/ValueEditor.d.ts

@@ -1,8 +1,7 @@
 import React from 'react';
-import { ValueEditorProps as ValueEditorBaseProps } from 'react-querybuilder';
-import { AutocompleteOption } from '../../core';
+import { Option, ValueEditorProps as ValueEditorBaseProps } from 'react-querybuilder';
 export type ValueEditorProps = ValueEditorBaseProps & {
-    values?: AutocompleteOption[] | any[];
+    values?: Option[];
 };
 declare const ValueEditor: (props: ValueEditorProps) => React.JSX.Element;
 export default ValueEditor;

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

@@ -1,8 +1,8 @@
 import { Instant, LocalDate, LocalDateTime, LocalTime, ZoneId } from '@js-joda/core';
-import { ClearRounded, CodeRounded } from '@mui/icons-material';
 import { Box, darken, lighten, styled } from '@mui/material';
 import { TimePicker } from '@mui/x-date-pickers';
 import React, { useEffect, useRef, useState } from 'react';
+import { ClearRounded, CodeRounded } from '../../../icons';
 import { InvalidDate } from '../../../util';
 import { Autocomplete, Chip, DatePicker, DateTimePicker, IconButton, LocalizationProvider, Menu, MenuItem, TextField, Typography, } from '../../core';
 import { NumericFormat } from '../FormField/InputFieldComponent';
@@ -18,16 +18,22 @@ const GroupHeader = styled('div')(({ theme }) => ({
         : darken(theme.palette.primary.main, 0.8),
 }));
 const GroupItems = styled('ul')({ padding: 0 });
+const isPresetValue = (value) => typeof value === 'string' && value.startsWith('{{{') && value.endsWith('}}}');
 const ValueEditor = (props) => {
     const { handleOnChange, value, operator, context, level, rule, fieldData } = props;
     let inputType = props.inputType;
-    let values = props.values;
+    let values = (props.values ?? [])
+        .map((item) => ({
+        value: item.name,
+        label: item.label,
+    }))
+        .sort((a, b) => a.label.localeCompare(b.label));
     const property = context.propertyTreeMap?.[rule.field];
     // for tree view / related object properties, the properties are stored in the propertyTreeMap upon selection
     if (!!context.treeViewOpts && !!property) {
         inputType = property.type;
         if (property.enum) {
-            values = property.enum.map((item) => ({ name: item, label: item }));
+            values = property.enum.map((item) => ({ value: item, label: item }));
         }
     }
     const [invalidDateTime, setInvalidDateTime] = useState(false);
@@ -37,10 +43,17 @@ const ValueEditor = (props) => {
     // Manages input value for Autocomplete when using 'in/not in' operators, ensuring correct handling on blur.
     const [inputValue, setInputValue] = useState('');
     const disabled = ['null', 'notNull'].includes(operator);
-    const presetValues = context.presetValues?.filter((val) => !val.type || val.type === inputType) ?? [];
-    const isPresetValue = (value) => value?.startsWith('{{{') && value?.endsWith('}}}');
-    const presetDisplayValue = presetValues?.find((option) => option.value.name === value)?.label;
-    const isPresetValueSelected = presetValues && typeof value === 'string' && isPresetValue(value) && !!presetDisplayValue;
+    const presetValues = context.presetValues
+        ?.filter((val) => !val.type || val.type === inputType)
+        ?.map((val) => {
+        return {
+            label: val.label,
+            value: val.value?.name,
+            sublabel: val.value?.sublabel,
+            type: val.type,
+        };
+    })
+        ?.sort((a, b) => a.label.localeCompare(b.label)) ?? [];
     let readOnly = context.disabled;
     if (!readOnly && context.disabledCriteria) {
         readOnly =
@@ -54,11 +67,12 @@ const ValueEditor = (props) => {
             '& .MuiAutocomplete-tag': { backgroundColor: '#edeff1' },
         },
     };
+    const isMultipleOperator = ['in', 'notIn'].includes(operator);
     useEffect(() => {
-        if (!['in', 'notIn'].includes(operator) && Array.isArray(value)) {
+        if (!isMultipleOperator && Array.isArray(value)) {
             handleOnChange('');
         }
-        else if (['in', 'notIn'].includes(operator) && !Array.isArray(value)) {
+        else if (isMultipleOperator && !Array.isArray(value)) {
             handleOnChange([]);
         }
     }, [operator]);
@@ -75,6 +89,7 @@ const ValueEditor = (props) => {
     };
     const clearValue = () => {
         handleOnChange('');
+        setInputValue('');
     };
     const setPresetValue = (value) => {
         handleOnChange(value);
@@ -126,9 +141,6 @@ const ValueEditor = (props) => {
         }
     }
     const getEditor = () => {
-        if (isPresetValueSelected) {
-            return;
-        }
         if (disabled) {
             return React.createElement(React.Fragment, null);
         }
@@ -180,18 +192,36 @@ const ValueEditor = (props) => {
                         React.createElement(TextField, { ...params, disabled: disabled, onClick: onClick, placeholder: "Value", size: "small", inputRef: inputRef, error: invalidDateTime }))), readOnly: readOnly })));
         }
         else if (inputType === 'number' || inputType === 'integer') {
-            const isMultiple = ['in', 'notIn'].includes(operator);
-            const options = presetValues;
-            if (isMultiple) {
-                return (React.createElement(Autocomplete, { freeSolo: true, multiple: true, options: options, getOptionLabel: (option) => typeof option === 'object' && option?.label ? option.label : String(option), value: Array.isArray(value) ? (disabled ? [] : value) : [], disabled: disabled, 
-                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                    onChange: (event, newValue) => {
-                        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                        const uniqueSelections = newValue.map((item) => item.value ?? Number(item));
-                        handleOnChange(uniqueSelections.length ? uniqueSelections : '');
-                    }, 
-                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                    isOptionEqualToValue: (option, value) => option === value, renderInput: (params) => (React.createElement(TextField, { label: params.label, ...params, size: "small" })), groupBy: (option) => isPresetValue(option.value?.name) ? context.presetGroupLabel || 'Preset Values' : 'Options', renderGroup: groupRenderGroup, sx: styles.input, readOnly: readOnly }));
+            if (isMultipleOperator) {
+                const options = presetValues;
+                return (React.createElement(Autocomplete, { freeSolo: true, multiple: true, options: options, value: Array.isArray(value)
+                        ? disabled
+                            ? []
+                            : value.map((v) => {
+                                const found = options.find((o) => o.value === v);
+                                return found ? found : { label: v, value: v };
+                            })
+                        : [], disabled: disabled, onChange: (event, newValue) => {
+                        const uniqueSelections = newValue
+                            .map((item) => {
+                            if (typeof item === 'object' && 'value' in item) {
+                                return item.value;
+                            }
+                            else if (typeof item === 'string') {
+                                if (isPresetValue(item)) {
+                                    return item;
+                                }
+                                else if (item.match(/^(\+|-){0,1}\d*(\.\d+)?$/)) {
+                                    const value = Number(item);
+                                    return Number.isNaN(value) ? '' : value;
+                                }
+                                return '';
+                            }
+                            return item;
+                        })
+                            .filter((item) => item !== '');
+                        handleOnChange(uniqueSelections.length ? Array.from(new Set(uniqueSelections)) : '');
+                    }, isOptionEqualToValue: (option, value) => option.value === value.value, renderInput: (params) => (React.createElement(TextField, { label: params.label, ...params, size: "small" })), groupBy: (option) => isPresetValue(option.value) ? context.presetGroupLabel || 'Preset Values' : 'Options', renderGroup: groupRenderGroup, sx: styles.input, readOnly: readOnly }));
             }
             else {
                 return (React.createElement(TextField, { inputRef: inputRef, value: ['null', 'notNull'].includes(operator) ? '' : value, disabled: disabled || ['null', 'notNull'].includes(operator), onChange: (e) => {
@@ -206,29 +236,39 @@ const ValueEditor = (props) => {
                         : { type: 'number' }), placeholder: "Value", size: "small", onClick: onClick, sx: styles.input, readOnly: readOnly }));
             }
         }
+        else if (inputType === 'boolean') {
+            const options = [{ label: 'True', value: true }, { label: 'False', value: false }, ...presetValues];
+            return (React.createElement(Autocomplete, { options: options, value: options.find((opt) => opt.value === value) ?? value, onChange: (event, newValue) => {
+                    handleOnChange(newValue ? newValue.value : '');
+                }, isOptionEqualToValue: (option, value) => option.value === value.value, renderInput: (params) => (React.createElement(TextField, { inputRef: inputRef, label: params.label, ...params, size: "small" })), groupBy: (option) => isPresetValue(option.value) ? context.presetGroupLabel || 'Preset Values' : 'Options', renderGroup: groupRenderGroup, sortBy: "NONE", sx: styles.input, readOnly: readOnly }));
+        }
         else {
-            const isMultiple = inputType === 'array' || ['in', 'notIn'].includes(operator);
-            const options = [
-                ...(values?.sort((a, b) => a.label.localeCompare(b.label)) ?? []),
-                ...(presetValues?.sort((a, b) => a.label.localeCompare(b.label)) ?? []),
-            ];
-            if (isMultiple || values?.length) {
-                return (React.createElement(Autocomplete, { freeSolo: inputType !== 'array' && fieldData.valueEditorType !== 'select', multiple: isMultiple, options: options, value: isMultiple ? (Array.isArray(value) ? value : []) : Array.isArray(value) ? '' : value, 
-                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                    onChange: (event, newValue) => {
+            const isMultiple = inputType === 'array' || isMultipleOperator || values?.length;
+            if (isMultiple) {
+                const options = [...values, ...presetValues];
+                return (React.createElement(Autocomplete, { freeSolo: inputType !== 'array' && fieldData.valueEditorType !== 'select', multiple: isMultiple, options: options, value: isMultiple
+                        ? Array.isArray(value)
+                            ? value.map((item) => {
+                                const found = options.find((o) => o.value === item);
+                                return found ? found : { label: item, value: item };
+                            })
+                            : []
+                        : Array.isArray(value)
+                            ? ''
+                            : value, onChange: (event, newValue) => {
                         let value;
                         if (isMultiple) {
-                            // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                            const values = newValue.map((item) => item.name || item.value?.name || item);
+                            const values = newValue.map((item) => typeof item === 'string' ? item : item.value);
                             value = Array.from(new Set(values));
                         }
                         else {
-                            value = newValue?.name ?? newValue?.value?.name ?? '';
+                            value =
+                                typeof newValue === 'string' ? newValue : newValue.value;
                         }
                         handleOnChange(value);
                     }, onBlur: () => {
                         if (inputValue &&
-                            (options.some((option) => option.name === inputValue) || !options.length) &&
+                            (options.some((option) => option.value === inputValue) || !options.length) &&
                             (operator === 'in' || operator === 'notIn')) {
                             const newValues = Array.isArray(value) ? [...value, inputValue] : [inputValue];
                             handleOnChange(Array.from(new Set(newValues)));
@@ -237,7 +277,7 @@ const ValueEditor = (props) => {
                     }, onKeyDown: (event) => {
                         if (event.key === 'Enter' &&
                             inputValue &&
-                            (options.some((option) => option.name === inputValue) || !options.length) &&
+                            (options.some((option) => option.value === inputValue) || !options.length) &&
                             (operator === 'in' || operator === 'notIn')) {
                             const newValues = Array.isArray(value) ? [...value, inputValue] : [inputValue];
                             handleOnChange(Array.from(new Set(newValues)));
@@ -245,32 +285,16 @@ const ValueEditor = (props) => {
                         }
                     }, onInputChange: (event, newInputValue) => {
                         setInputValue(newInputValue);
-                    }, inputValue: inputValue, renderInput: (params) => (React.createElement(TextField, { inputRef: inputRef, label: params?.label, ...params, size: "small" })), 
-                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                    getOptionLabel: (option) => {
-                        if (typeof option === 'string') {
-                            const found = options.find((o) => option === o.name || option === o.value?.name);
-                            return found?.label || option;
-                        }
-                        return option?.label;
-                    }, 
-                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                    isOptionEqualToValue: (option, value) => {
-                        if (typeof value === 'string') {
-                            return option?.name === value || option?.value?.name === value;
-                        }
-                        else {
-                            return option?.label === value?.label;
-                        }
-                    }, groupBy: (option) => isPresetValue(option.value?.name) ? context.presetGroupLabel || 'Preset Values' : 'Options', renderGroup: groupRenderGroup, sortBy: "NONE", sx: styles.input, readOnly: readOnly }));
+                    }, inputValue: inputValue, renderInput: (params) => (React.createElement(TextField, { inputRef: inputRef, label: params.label, ...params, size: "small" })), isOptionEqualToValue: (option, value) => option?.value === value.value, groupBy: (option) => isPresetValue(option.value) ? context.presetGroupLabel || 'Preset Values' : 'Options', renderGroup: groupRenderGroup, sortBy: "NONE", sx: styles.input, readOnly: readOnly }));
             }
             else {
                 return (React.createElement(TextField, { inputRef: inputRef, value: ['null', 'notNull'].includes(operator) ? '' : value, disabled: ['null', 'notNull'].includes(operator), onChange: (e) => handleOnChange(e.target.value), onClick: onClick, placeholder: "Value", size: "small", sx: styles.input, readOnly: readOnly }));
             }
         }
     };
+    const presetDisplayValue = React.useMemo(() => presetValues?.find((option) => option.value === value)?.label || value, [presetValues, value]);
     return (React.createElement(React.Fragment, null,
-        isPresetValueSelected ? (React.createElement(Box, { ref: inputRef, sx: {
+        isPresetValue(value) ? (React.createElement(Box, { ref: inputRef, sx: {
                 width: '33%',
                 display: 'flex',
                 justifyContent: 'space-between',
@@ -291,10 +315,11 @@ const ValueEditor = (props) => {
             !readOnly && (React.createElement(IconButton, { onClick: clearValue, sx: { padding: '3px', margin: '3px' } },
                 React.createElement(ClearRounded, { fontSize: "small", sx: { color: 'rgba(0, 0, 0, 0.54)' } }))))) : (getEditor()),
         !!presetValues?.length && (React.createElement(Menu, { open: openPresetValues, anchorEl: inputRef?.current, PaperProps: { sx: { borderRadius: '8px', width: inputRef?.current?.offsetWidth } }, onClose: onClose }, presetValues &&
-            // eslint-disable-next-line @typescript-eslint/no-explicit-any
-            presetValues.map((option) => (React.createElement(MenuItem, { ...props, onClick: () => setPresetValue(option.value.name), sx: { padding: '8px', minHeight: '25px' } },
-                React.createElement(Box, { padding: 0, margin: 0 },
-                    React.createElement(Typography, { fontSize: '14px', fontWeight: 500, sx: { lineHeight: '20px' } }, option.label),
-                    option.value.sublabel && (React.createElement(Typography, { fontSize: '14px', fontWeight: 500, color: 'rgba(145, 158, 171)', sx: { lineHeight: '20px' } }, option.value.sublabel))))))))));
+            presetValues.map((option) => {
+                return (React.createElement(MenuItem, { ...props, onClick: () => setPresetValue(option.value), sx: { padding: '8px', minHeight: '25px' } },
+                    React.createElement(Box, { padding: 0, margin: 0 },
+                        React.createElement(Typography, { fontSize: '14px', fontWeight: 500, sx: { lineHeight: '20px' } }, option.label),
+                        !!option.sublabel && (React.createElement(Typography, { fontSize: '14px', fontWeight: 500, color: 'rgba(145, 158, 171)', sx: { lineHeight: '20px' } }, option.sublabel)))));
+            })))));
 };
 export default ValueEditor;

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/Common/FormComponentWrapper.js

@@ -67,25 +67,26 @@ export const FormComponentWrapper = (props) => {
         charCount = maxLength - charCount;
     return (React.createElement(Box, null,
         React.createElement(Box, { sx: { padding: '10px 0' } },
-            React.createElement(Typography, { variant: "body2", color: viewOnly ? 'textSecondary' : 'textPrimary', component: "label", htmlFor: inputId, sx: { ...(displayOption === 'radioButton' && value && { marginRight: '8px' }) } },
-                label,
-                validate.required ? (React.createElement(Typography, { component: 'span', sx: { color: 'red', fontSize: '12px' } },
-                    ` *`,
-                    ' ')) : null,
-                tooltip && (React.createElement(Tooltip, { placement: "right", title: tooltip },
-                    React.createElement(IconButton, null,
-                        React.createElement(Help, { sx: { fontSize: '14px' } }))))),
-            displayOption === 'radioButton' && onChange && !viewOnly && !readOnly && value && (React.createElement(Tooltip, { title: `Clear` },
-                React.createElement("span", null,
-                    React.createElement(IconButton, { "aria-label": `Clear`, sx: { padding: '0px' }, onClick: () => {
-                            property && onChange(property.id, '');
-                        } },
-                        React.createElement(HighlightOffOutlined, { sx: clearBtnStyles }))))),
-            React.createElement(Box, { sx: { ...(displayOption === 'radioButton' && { display: 'flex' }) } },
-                React.createElement(Typography, { variant: "caption", sx: descriptionStyles }, description)),
+            property?.type !== 'boolean' && (React.createElement(React.Fragment, null,
+                React.createElement(Typography, { variant: "body2", color: viewOnly ? 'textSecondary' : 'textPrimary', component: "label", htmlFor: inputId, sx: { ...(displayOption === 'radioButton' && value && { marginRight: '8px' }) } },
+                    label,
+                    validate.required ? (React.createElement(Typography, { component: 'span', sx: { color: 'red', fontSize: '12px' } },
+                        ` *`,
+                        ' ')) : null,
+                    tooltip && (React.createElement(Tooltip, { placement: "right", title: tooltip },
+                        React.createElement(IconButton, null,
+                            React.createElement(Help, { sx: { fontSize: '14px' } }))))),
+                displayOption === 'radioButton' && onChange && !viewOnly && !readOnly && value && (React.createElement(Tooltip, { title: `Clear` },
+                    React.createElement("span", null,
+                        React.createElement(IconButton, { "aria-label": `Clear`, sx: { padding: '0px' }, onClick: () => {
+                                property && onChange(property.id, '');
+                            } },
+                            React.createElement(HighlightOffOutlined, { sx: clearBtnStyles }))))),
+                React.createElement(Box, { sx: { ...(displayOption === 'radioButton' && { display: 'flex' }) } },
+                    React.createElement(Typography, { variant: "caption", sx: descriptionStyles }, description)))),
             React.createElement(Box, { sx: { display: 'flex', flexDirection: 'row' } },
                 React.createElement(PrefixSuffix, { prefix: prefix, height: fieldHeight }),
-                React.createElement(Box, { sx: { width: '100%', paddingTop: '6px' } }, children),
+                React.createElement(Box, { sx: { width: '100%', paddingTop: property?.type !== 'boolean' ? '6px' : undefined } }, children),
                 React.createElement(PrefixSuffix, { suffix: suffix, height: fieldHeight }))),
         React.createElement(Box, { sx: underFieldStyles },
             React.createElement(Box, { sx: { width: '100%', display: 'flex', justifyContent: 'space-between' } },

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

@@ -67,7 +67,7 @@ export class FormFieldComponent extends ReactComponent {
                     components
                         .filter((component) => Object.hasOwnProperty.call(component, 'components'))
                         .forEach((comp) => {
-                        this.handleComponentChange(comp.components, value);
+                        this.handleAddressChange(comp.components, value);
                     });
                 }
                 components
@@ -136,6 +136,14 @@ export class FormFieldComponent extends ReactComponent {
                 }
             }
         };
+        if (component.type === 'Boolean' && typeof component.initialValue === 'boolean') {
+            // For Boolean components, FormIO treats false values as null/undefined
+            // We need to explicitly set the default value to ensure the correct Boolean state is preserved
+            const defaultValue = component.defaultValue === null || component.defaultValue === undefined
+                ? component.initialValue
+                : component.defaultValue;
+            this.setValue(defaultValue);
+        }
         this.errorDetails = {};
         this.handleChange = this.handleChange.bind(this);
     }
@@ -462,6 +470,6 @@ export class FormFieldComponent extends ReactComponent {
                             falsePositiveMaskError &&
                             isEmpty(this.errorDetails) &&
                             this.emit('changed-' + this.component.key, e.target.value);
-                    }, ...this.component, id: inputId, defaultValue: this.dataValue, mask: this.component.inputMask, error: this.hasErrors(), size: this.component.fieldHeight ?? 'medium' }))), root);
+                    }, ...this.component, id: inputId, defaultValue: this.dataValue, mask: this.component.inputMask, error: this.hasErrors(), size: this.component.fieldHeight ?? 'medium', required: this.component.property.type === 'boolean' ? this.component.validate?.required : undefined }))), root);
     }
 }

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,
@@ -191,7 +191,9 @@ export function convertFormToComponents(entries, parameters, object) {
                     ? displayOptions?.relatedObjectDisplay
                     : parameter.type === 'string' && parameter.enum
                         ? displayOptions?.choicesDisplay?.type
-                        : undefined,
+                        : parameter.type === 'boolean'
+                            ? displayOptions?.booleanDisplay
+                            : undefined,
                 labelPosition: 'top',
                 dataSrc: property.enum?.length ? 'values' : undefined,
                 showCharCount: displayOptions?.charCount,
@@ -346,6 +348,7 @@ export function convertComponentsToForm(components) {
                     ...((component.displayOption || component.sortBy) &&
                         component.property?.enum &&
                         component.property?.type !== 'array' &&
+                        component?.property?.type !== 'boolean' &&
                         component.property?.type !== 'object'
                         ? {
                             choicesDisplay: {
@@ -354,12 +357,17 @@ export function convertComponentsToForm(components) {
                             },
                         }
                         : {}),
+                    ...(component.displayOption && component?.property?.type === 'boolean'
+                        ? { booleanDisplay: component.displayOption }
+                        : {}),
                     ...(component.displayOption && component?.property?.type === 'object'
                         ? { relatedObjectDisplay: component.displayOption }
                         : {}),
                     ...(component.defaultToCurrentDate ||
                         component.defaultToCurrentTime ||
                         component.initialValue ||
+                        (typeof component.initialValue === 'number' && Number.isFinite(component.initialValue)) ||
+                        typeof component.initialValue === 'boolean' ||
                         component.defaultValueCriteria
                         ? {
                             defaultValue: component.defaultToCurrentDate
@@ -789,7 +797,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 +1296,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

@@ -1,39 +1,42 @@
+import parse from 'html-react-parser';
 import React, { useEffect, useState } from 'react';
-import { Autocomplete, TextField } from '../../../core';
+import { Help } from '../../../../icons';
+import { Autocomplete, Checkbox, FormControl, FormControlLabel, FormHelperText, IconButton, Switch, TextField, Tooltip, Typography, } from '../../../core';
 import InputFieldComponent from '../InputFieldComponent/InputFieldComponent';
+const descriptionStyles = {
+    color: '#999 !important',
+    whiteSpace: 'normal',
+    paddingBottom: '4px',
+    marginX: 0,
+};
 const BooleanSelect = (props) => {
-    const { id, property, defaultValue, error, errorMessage, readOnly, size, placeholder, onBlur, additionalProps } = props;
+    const { id, property, defaultValue, error, errorMessage, readOnly, size, displayOption, label, required, tooltip, description, placeholder, onBlur, additionalProps, } = props;
     const [value, setValue] = useState(defaultValue);
     useEffect(() => {
         setValue(defaultValue);
     }, [defaultValue]);
-    const handleChange = (event, selected) => {
-        setValue(selected.value);
-        props.onChange(property.id, selected.value, property);
+    const handleChange = (value) => {
+        setValue(value);
+        props.onChange && props.onChange(property.id, value, property);
     };
     const booleanOptions = [
         {
-            label: 'Yes',
+            label: 'True',
             value: true,
         },
         {
-            label: 'No',
+            label: 'False',
             value: false,
         },
     ];
-    return readOnly ? (React.createElement(InputFieldComponent, { ...props })) : (React.createElement(Autocomplete, { id: id, renderInput: (params) => (React.createElement(TextField, { ...params, error: error, errorMessage: errorMessage, onBlur: onBlur, fullWidth: true, sx: { background: 'white' }, size: size ?? 'medium', placeholder: placeholder })), value: value, onChange: handleChange, 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 ? opt.label : option;
-            }
-            if (typeof option === 'string')
-                return option;
-            return option.label;
-        }, options: booleanOptions, disableClearable: true, sx: { background: 'white', borderRadius: '8px' }, ...(additionalProps ?? {}) }));
+    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 },
+                    React.createElement(IconButton, null,
+                        React.createElement(Help, { sx: { fontSize: '14px' } })))),
+                required && (React.createElement(Typography, { variant: "body2", component: "span", color: "error", sx: { marginLeft: '4px', fontSize: '18px' } }, "*"))), control: displayOption === 'switch' ? (React.createElement(Switch, { id: id, "aria-required": required, "aria-invalid": error, size: size ?? 'medium', name: property.id, checked: value, onChange: (e) => handleChange(e.target.checked), disabled: readOnly, sx: { alignSelf: 'start' } })) : (React.createElement(Checkbox, { id: id, "aria-required": required, "aria-invalid": error, size: size ?? 'medium', checked: value, name: property.id, onChange: (e) => handleChange(e.target.checked), disabled: readOnly, sx: { alignSelf: 'start', padding: '4px 9px 9px 9px' } })) }),
+        error && React.createElement(FormHelperText, { sx: { marginX: 0 } }, errorMessage),
+        description && (React.createElement(FormHelperText, { sx: descriptionStyles, component: Typography }, parse(description)))));
 };
 export default BooleanSelect;

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

@@ -10,13 +10,55 @@ const booleanProperty = {
     name: 'Question',
     type: 'boolean',
 };
-it('returns selected option', async () => {
+describe('BooleanSelect', () => {
     const user = userEvent.setup();
-    const onChangeMock = vi.fn((name, value, property) => { });
-    render(React.createElement(BooleanSelect, { id: "chooseYesOrNo", property: booleanProperty, onChange: onChangeMock }));
-    const inputField = screen.getByRole('combobox');
-    await user.click(inputField);
-    const yesOption = await screen.findByRole('option', { name: 'Yes' });
-    await user.click(yesOption);
-    expect(onChangeMock).toBeCalledWith('theQuestion', true, booleanProperty);
+    it('returns selected option', async () => {
+        const user = userEvent.setup();
+        const onChangeMock = vi.fn((name, value, property) => { });
+        render(React.createElement(BooleanSelect, { id: "chooseTrueOrFalse", property: booleanProperty, onChange: onChangeMock, displayOption: "dropdown" }));
+        const inputField = screen.getByRole('combobox');
+        await user.click(inputField);
+        const trueOption = await screen.findByRole('option', { name: 'True' });
+        await user.click(trueOption);
+        expect(onChangeMock).toBeCalledWith('theQuestion', true, booleanProperty);
+    });
+    it('renders checkbox', () => {
+        const onChangeMock = vi.fn((name, value, property) => { });
+        render(React.createElement(BooleanSelect, { id: "checkbox", property: booleanProperty, onChange: onChangeMock, label: 'Field label', displayOption: "checkbox" }));
+        const checkbox = screen.queryByRole('checkbox', { name: /Field label/i });
+        expect(checkbox).to.be.not.null;
+    });
+    it('renders switch', () => {
+        const onChangeMock = vi.fn((name, value, property) => { });
+        render(React.createElement(BooleanSelect, { id: "switch", property: booleanProperty, onChange: onChangeMock, label: 'Field label', displayOption: "switch" }));
+        const switchComp = screen.queryByRole('checkbox', { name: /Field label/i });
+        expect(switchComp).to.be.not.null;
+    });
+    it('renders label', () => {
+        const onChangeMock = vi.fn((name, value, property) => { });
+        render(React.createElement(BooleanSelect, { id: "checkbox", property: booleanProperty, onChange: onChangeMock, label: 'Field label', displayOption: "checkbox" }));
+        const label = screen.queryByText(/Field label/i);
+        expect(label).to.be.not.null;
+    });
+    it('allows defaulting', () => {
+        const onChangeMock = vi.fn((name, value, property) => { });
+        render(React.createElement(BooleanSelect, { id: "checkbox", defaultValue: true, property: booleanProperty, onChange: onChangeMock, label: 'Field label', displayOption: "checkbox" }));
+        const checkbox = screen.getByRole('checkbox', { name: /Field label/i });
+        expect(checkbox.checked).to.be.true;
+    });
+    it('sets checkbox', async () => {
+        const onChangeMock = vi.fn((name, value, property) => { });
+        render(React.createElement(BooleanSelect, { id: "checkbox", property: booleanProperty, onChange: onChangeMock, label: 'Field label', displayOption: "checkbox" }));
+        const checkbox = screen.getByRole('checkbox', { name: /Field label/i });
+        await user.click(checkbox);
+        expect(checkbox.checked).to.be.true;
+        expect(onChangeMock).toBeCalledWith('theQuestion', true, booleanProperty);
+    });
+    it('unsets checkbox', async () => {
+        const onChangeMock = vi.fn((name, value, property) => { });
+        render(React.createElement(BooleanSelect, { id: "checkbox", defaultValue: true, property: booleanProperty, onChange: onChangeMock, label: 'Field label', displayOption: "checkbox" }));
+        const checkbox = screen.getByRole('checkbox', { name: /Field label/i });
+        await user.click(checkbox);
+        expect(checkbox.checked).to.be.false;
+    });
 });

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

@@ -28,27 +28,31 @@ const FileUploadControl = (props) => {
             color: '#C7C7CD',
         },
     };
-    useEffect(() => {
-        if (uploadedFile) {
-            props.onChange(property.id, uploadedFile, property);
-        }
-    }, [uploadedFile]);
-    const handleSelectFile = () => {
-        if (uploadedFile) {
-            setUploadedFile(undefined);
-            props.onChange(property.id, undefined, property);
-        }
-    };
     const onDrop = useCallback(
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     (acceptedFile) => {
         setUploadedFile(acceptedFile[0]);
     }, [setUploadedFile]);
-    const { getRootProps, getInputProps, isDragActive } = useDropzone({
+    const { getRootProps, getInputProps, isDragActive, open } = useDropzone({
         onDrop,
         multiple: false,
         disabled: !!uploadedFile,
+        noClick: true,
     });
+    useEffect(() => {
+        if (uploadedFile) {
+            props.onChange && props.onChange(property.id, uploadedFile, property);
+        }
+    }, [uploadedFile]);
+    const handleFileSelectionOrRemoval = () => {
+        if (uploadedFile) {
+            setUploadedFile(undefined);
+            props.onChange && props.onChange(property.id, undefined, property);
+        }
+        else {
+            open();
+        }
+    };
     return (React.createElement(Grid, { container: true, ...getRootProps({
             style: {
                 border: error ? '1px solid red' : '1px solid #c4c4c4',
@@ -57,9 +61,9 @@ const FileUploadControl = (props) => {
             },
         }) },
         React.createElement(Grid, { item: true, flexGrow: 1 },
-            React.createElement("input", { disabled: true, ...getInputProps() }),
+            React.createElement("input", { ...getInputProps() }),
             React.createElement(TextField, { id: id, sx: { '& fieldset': { border: 'none' } }, fullWidth: true, value: uploadedFile?.name ?? (isDragActive ? 'Drop your file here' : 'File'), error: error, errorMessage: errorMessage, required: required, ...(additionalProps ?? {}) })),
         React.createElement(Grid, { item: true },
-            React.createElement(Button, { sx: { ...styles.button, ...styles.selectFileBtn }, onClick: () => handleSelectFile() }, uploadedFile ? 'Remove' : 'Select File'))));
+            React.createElement(Button, { sx: { ...styles.button, ...styles.selectFileBtn }, onClick: handleFileSelectionOrRemoval }, uploadedFile ? 'Remove' : 'Select File'))));
 };
 export default FileUploadControl;

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;
@@ -29,8 +29,11 @@ export type FormFieldProps = {
     getOptionLabel?: (option: AutocompleteOption) => string;
     disableCloseOnSelect?: boolean;
     additionalProps?: Record<string, unknown>;
-    displayOption?: 'dropdown' | 'radioButton';
+    displayOption?: 'dropdown' | 'radioButton' | 'switch' | 'checkbox';
     sortBy?: 'ASC' | 'DESC' | 'NONE';
+    label?: string;
+    description?: string;
+    tooltip?: string;
 };
 declare const FormField: (props: FormFieldProps) => React.JSX.Element;
 export default FormField;

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

@@ -8,7 +8,7 @@ import InputFieldComponent from './InputFieldComponent/InputFieldComponent';
 import Select from './Select/Select';
 import TimePickerSelect from './TimePickerSelect/TimePickerSelect';
 const FormField = (props) => {
-    const { id, defaultValue, error, onChange, property, readOnly, selectOptions, required, size, placeholder, errorMessage, onBlur, mask, max, min, isMultiLineText, rows, inputMaskPlaceholderChar, queryAddresses, isOptionEqualToValue, renderOption, disableCloseOnSelect, getOptionLabel, additionalProps, displayOption, sortBy, } = props;
+    const { id, defaultValue, error, onChange, property, readOnly, selectOptions, required, size, placeholder, errorMessage, onBlur, mask, max, min, isMultiLineText, rows, inputMaskPlaceholderChar, queryAddresses, isOptionEqualToValue, renderOption, disableCloseOnSelect, getOptionLabel, additionalProps, displayOption, sortBy, label, description, tooltip, } = props;
     let control;
     const commonProps = {
         id: id ?? property.id,
@@ -20,7 +20,7 @@ const FormField = (props) => {
         readOnly,
         defaultValue,
         selectOptions,
-        required,
+        required: required,
         size,
         placeholder,
         min,
@@ -32,6 +32,9 @@ const FormField = (props) => {
         additionalProps,
         displayOption,
         sortBy,
+        label,
+        description,
+        tooltip,
     };
     if (queryAddresses) {
         control = (React.createElement(AddressFieldComponent, { ...commonProps, mask: mask, inputMaskPlaceholderChar: inputMaskPlaceholderChar, isMultiLineText: isMultiLineText, rows: rows, queryAddresses: queryAddresses }));
@@ -39,7 +42,7 @@ const FormField = (props) => {
     }
     switch (property.type) {
         case 'boolean':
-            control = React.createElement(BooleanSelect, { ...commonProps, defaultValue: defaultValue });
+            control = React.createElement(BooleanSelect, { ...commonProps });
             break;
         case 'date':
             control = React.createElement(DatePickerSelect, { ...commonProps });

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/dist/published/index.d.ts

@@ -1,4 +1,4 @@
-export { ClickAwayListener, createTheme, darken, lighten, styled, Toolbar } from '@mui/material';
+export { ClickAwayListener, createTheme, darken, lighten, styled, Toolbar, useMediaQuery, useTheme, } from '@mui/material';
 export { CalendarPicker, DateTimePicker, MonthPicker, PickersDay, StaticDateTimePicker, StaticTimePicker, TimePicker, YearPicker, } from '@mui/x-date-pickers';
 export * from './colors';
 export * from './components/core';

package/dist/published/index.js

@@ -1,4 +1,4 @@
-export { ClickAwayListener, createTheme, darken, lighten, styled, Toolbar } from '@mui/material';
+export { ClickAwayListener, createTheme, darken, lighten, styled, Toolbar, useMediaQuery, useTheme, } from '@mui/material';
 export { CalendarPicker, DateTimePicker, MonthPicker, PickersDay, StaticDateTimePicker, StaticTimePicker, TimePicker, YearPicker, } from '@mui/x-date-pickers';
 export * from './colors';
 export * from './components/core';

package/dist/published/stories/CriteriaBuilder.stories.js

@@ -95,6 +95,12 @@ const defaultProperties = [
         type: 'integer',
         required: false,
     },
+    {
+        id: 'canApply',
+        name: 'Can Apply',
+        type: 'boolean',
+        required: true,
+    },
 ];
 const CriteriaBuilderTemplate = (args) => {
     const [criteria, setCriteria] = React.useState(args.criteria);

package/dist/published/stories/Form.stories.js

@@ -24,6 +24,11 @@ const object = {
             name: 'Integer',
             type: 'integer',
         },
+        {
+            id: 'boolean',
+            name: 'Boolean',
+            type: 'boolean',
+        },
     ],
     actions: [
         {
@@ -55,7 +60,7 @@ FormWithButtons.args = {
     actionId: '_update',
     actionType: 'update',
     object: object,
-    instance: { id: 'id', objectId: 'test', name: 'test', integer: 12, decimal: 12.5 },
+    instance: { id: 'id', objectId: 'test', name: 'test', integer: 12, decimal: 12.5, boolean: true },
 };
 const FormWithNoButtonsTemplate = (args) => {
     return (React.createElement("div", null,
@@ -76,7 +81,7 @@ FormWithNoButtons.args = {
     actionId: '_update',
     actionType: 'update',
     object: object,
-    instance: { id: 'id', objectId: 'test', name: 'test', integer: 12, decimal: 12.5 },
+    instance: { id: 'id', objectId: 'test', name: 'test', integer: 12, decimal: 12.5, boolean: true },
     hideButtons: true,
     formRef: { current: {} },
 };

package/dist/published/stories/FormField.stories.js

@@ -132,6 +132,8 @@ BooleanField.args = {
     required: true,
     readOnly: false,
     size: 'small',
+    displayOption: 'checkbox',
+    label: "<a href='#'>Label</a>",
 };
 export const FileUploadField = FormFieldTemplate.bind({});
 FileUploadField.args = {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@evoke-platform/ui-components",
-    "version": "1.5.0-testing.9",
+    "version": "1.5.1-dev.0",
     "description": "",
     "main": "dist/published/index.js",
     "module": "dist/published/index.js",
@@ -31,7 +31,8 @@
         "eslint": "eslint src",
         "eslint:fix": "npm run eslint -- --fix",
         "release": "commit-and-tag-version --releaseCommitMessageFormat \"chore(release): {{currentTag}} [skip ci]\"",
-        "prepare": "husky install"
+        "prepare": "husky install",
+        "yalc:publish": "npm run build && yalc push --replace --sig"
     },
     "author": "",
     "license": "MIT",
@@ -81,7 +82,8 @@
         "rimraf": "^3.0.2",
         "typescript": "^4.7.3",
         "vitest": "^1.5.3",
-        "webpack": "^5.74.0"
+        "webpack": "^5.74.0",
+        "yalc": "^1.0.0-pre.53"
     },
     "peerDependencies": {
         "@evoke-platform/context": "^1.2.0-0",