@evoke-platform/ui-components 1.5.0-testing.1 → 1.5.0-testing.11

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.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.d.ts

@@ -35,7 +35,7 @@ export declare class FormFieldComponent extends ReactComponent {
      */
     manageFormErrors(): void;
     beforeSubmit(): void;
-    handleComponentChange: (components: any, value: any) => void;
+    handleAddressChange: (components: any, value: any) => void;
     handleChange: (key: string, value: any) => void;
     attachReact(element: Element): void;
 }

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

@@ -61,13 +61,13 @@ export class FormFieldComponent extends ReactComponent {
             selectOptions,
             inputMaskPlaceholderChar: component.inputMaskPlaceholderChar || '_',
         }, options, data);
-        this.handleComponentChange = (components, value) => {
+        this.handleAddressChange = (components, value) => {
             if (isArray(components)) {
                 if (components.filter((component) => Object.hasOwnProperty.call(component, 'components'))) {
                     components
                         .filter((component) => Object.hasOwnProperty.call(component, 'components'))
                         .forEach((comp) => {
-                        this.handleComponentChange(comp.components, value);
+                        this.handleAddressChange(comp.components, value);
                     });
                 }
                 components
@@ -93,12 +93,7 @@ export class FormFieldComponent extends ReactComponent {
                 else {
                     selectedValue = value.line1;
                     label = value.line1;
-                    this.handleComponentChange(this.root.components, value);
-                    this.root.components
-                        .filter((component) => Object.prototype.hasOwnProperty.call(component, 'components'))
-                        .forEach((section) => {
-                        this.handleComponentChange(section.components, value);
-                    });
+                    this.handleAddressChange(this.root.components, value);
                 }
             }
             else if (this.component.property.type === 'choices' || this.component.property.type === 'array') {
@@ -152,7 +147,9 @@ export class FormFieldComponent extends ReactComponent {
             this.on('changed-' + this.component.key, (value) => {
                 this.setValue(value ?? '');
                 this.updateValue(value, { modified: true });
-                this.attach(this.element);
+                if (this.element) {
+                    this.attach(this.element);
+                }
             });
         }
         if (this.component.type === 'Date') {
@@ -465,6 +462,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.validate?.required }))), root);
     }
 }

package/dist/published/components/custom/Form/FormComponents/ObjectComponent/RelatedObjectInstance.js

@@ -41,7 +41,7 @@ export const RelatedObjectInstance = (props) => {
         handleClose();
         setErrors([]);
     };
-    const createNewInstance = async (submission) => {
+    const createNewInstance = async (submission, setSubmitting) => {
         if (!relatedObject) {
             // Handle the case where relatedObject is undefined
             return { isSuccessful: false };
@@ -74,12 +74,12 @@ export const RelatedObjectInstance = (props) => {
                 setSnackbarError({
                     showAlert: true,
                     message: err.response?.data?.error?.details?.[0]?.message ??
-                        err.data?.error?.message ??
+                        err.response?.data?.error?.message ??
                         `An error occurred. The new instance was not created.`,
                     isError: true,
                 });
             error = err.response?.data?.error;
-            onClose();
+            setSubmitting && setSubmitting(false);
         }
         return { isSuccessful, error };
     };

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

@@ -0,0 +1,13 @@
+import { ApiServices, ObjectInstance } from '@evoke-platform/context';
+import React from 'react';
+export type DocumentViewerCellProps = {
+    instance: ObjectInstance;
+    propertyId: string;
+    apiServices: ApiServices;
+    setSnackbarError: (error: {
+        showAlert: boolean;
+        message?: string;
+        isError?: boolean;
+    }) => void;
+};
+export declare const DocumentViewerCell: (props: DocumentViewerCellProps) => React.JSX.Element;

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

@@ -0,0 +1,115 @@
+import React, { useState } from 'react';
+import { AutorenewRounded, FileWithExtension, LaunchRounded } from '../../../../../icons';
+import { Button, Menu, MenuItem, Typography } from '../../../../core';
+import { Grid } from '../../../../layout';
+import { getPrefixedUrl } from '../../utils';
+export const DocumentViewerCell = (props) => {
+    const { instance, propertyId, apiServices, setSnackbarError } = props;
+    const [anchorEl, setAnchorEl] = useState(null);
+    const [isLoading, setIsLoading] = useState(false);
+    const downloadDocument = async (doc, instance) => {
+        setIsLoading(true);
+        try {
+            const documentResponse = await apiServices.get(getPrefixedUrl(`/objects/${instance.objectId}/instances/${instance.id}/documents/${doc.id}/content`), { responseType: 'blob' });
+            const contentType = documentResponse.type;
+            const blob = new Blob([documentResponse], { type: contentType });
+            const url = URL.createObjectURL(blob);
+            // Let the browser handle whether to open the document to view in a new tab or download it.
+            window.open(url, '_blank');
+            setIsLoading(false);
+            URL.revokeObjectURL(url);
+        }
+        catch (error) {
+            const status = error.status;
+            let message = 'An error occurred while downloading the document.';
+            if (status === 403) {
+                message = 'You do not have permission to download this document.';
+            }
+            else if (status === 404) {
+                message = 'Document not found.';
+            }
+            setIsLoading(false);
+            setSnackbarError({
+                showAlert: true,
+                message,
+                isError: true,
+            });
+        }
+    };
+    return (React.createElement(React.Fragment, null, instance[propertyId]?.length ? (React.createElement(React.Fragment, null,
+        React.createElement(Button, { sx: {
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'flex-start',
+                padding: '6px 10px',
+            }, color: 'inherit', onClick: async (event) => {
+                event.stopPropagation();
+                const documents = instance[propertyId];
+                if (documents.length === 1) {
+                    await downloadDocument(documents[0], instance);
+                }
+                else {
+                    setAnchorEl(event.currentTarget);
+                }
+            }, variant: "text", "aria-haspopup": "menu", "aria-controls": `document-menu-${instance.id}-${propertyId}`, "aria-expanded": anchorEl ? 'true' : 'false' },
+            isLoading ? (React.createElement(AutorenewRounded, { sx: {
+                    color: '#637381',
+                    width: '20px',
+                    height: '20px',
+                } })) : (React.createElement(LaunchRounded, { sx: {
+                    color: '#637381',
+                    width: '20px',
+                    height: '20px',
+                } })),
+            React.createElement(Typography, { sx: {
+                    marginLeft: '8px',
+                    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) => {
+                    setAnchorEl(null);
+                    await downloadDocument(document, instance);
+                }, "aria-label": document.name },
+                React.createElement(Grid, { item: true, sx: {
+                        display: 'flex',
+                        justifyContent: 'center',
+                        padding: '7px',
+                    } },
+                    React.createElement(FileWithExtension, { fontFamily: "Arial", fileExtension: document.name?.split('.')?.pop() ?? '', sx: {
+                            height: '1rem',
+                            width: '1rem',
+                        } })),
+                React.createElement(Grid, { item: true, xs: 12, sx: {
+                        width: '100%',
+                        overflow: 'hidden',
+                        textOverflow: 'ellipsis',
+                    } },
+                    React.createElement(Typography, { noWrap: true, sx: {
+                            fontSize: '14px',
+                            fontWeight: 700,
+                            color: '#212B36',
+                            lineHeight: '15px',
+                            width: '100%',
+                        } }, document.name))))))))) : (React.createElement(Typography, { sx: {
+            fontStyle: 'italic',
+            marginLeft: '12px',
+            fontSize: '14px',
+        } }, "No documents"))));
+};

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

@@ -9,6 +9,7 @@ import { Button, IconButton, Skeleton, Snackbar, Table, TableBody, TableCell, Ta
 import { Box } from '../../../../layout';
 import { getPrefixedUrl, normalizeDateTime } from '../../utils';
 import { ActionDialog } from './ActionDialog';
+import { DocumentViewerCell } from './DocumentViewerCell';
 const styles = {
     addButton: {
         backgroundColor: 'rgba(0, 117, 167, 0.08)',
@@ -250,13 +251,13 @@ 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: `An error occurred while creating an instance`,
+                    message: error?.message ?? `An error occurred while creating an instance`,
                     isError: true,
                 });
-                // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                error = err.response?.data?.error;
                 setSubmitting && setSubmitting(false);
             }
         }
@@ -284,13 +285,15 @@ 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: `An error occurred while ${actionType === 'delete' ? ' deleting' : ' updating'} an instance`,
+                    message: error?.message ??
+                        `An error occurred while ${actionType === 'delete' ? ' deleting' : ' updating'} an instance`,
                     isError: true,
                 });
-                // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                error = err.response?.data?.error;
+                setSubmitting && setSubmitting(false);
             }
         }
         return { isSuccessful, error };
@@ -334,9 +337,9 @@ const RepeatableField = (props) => {
     };
     const getValue = (relatedInstance, propertyId, propertyType) => {
         const value = get(relatedInstance, propertyId);
-        // If the property is not date-like or document then just return the
+        // If the property is not date-like then just return the
         // value found at the given path.
-        if (!['date', 'date-time', 'time', 'document'].includes(propertyType)) {
+        if (!['date', 'date-time', 'time'].includes(propertyType)) {
             return value;
         }
         // If the date-like value is empty then there is no need to format.
@@ -356,9 +359,6 @@ const RepeatableField = (props) => {
         if (propertyType === 'time') {
             return DateTime.fromISO(stringValue).toLocaleString(DateTime.TIME_SIMPLE);
         }
-        if (property.type === 'document') {
-            return Array.isArray(value) ? value.map((v) => v.name).join(', ') : value;
-        }
     };
     const columns = retrieveViewLayout();
     return loading ? (React.createElement(React.Fragment, null,
@@ -376,23 +376,22 @@ const RepeatableField = (props) => {
                     React.createElement(TableHead, { sx: { backgroundColor: '#F4F6F8' } },
                         React.createElement(TableRow, null,
                             columns?.map((prop) => React.createElement(TableCell, { sx: styles.tableCell }, prop.name)),
-                            React.createElement(TableCell, { sx: { ...styles.tableCell, width: '80px' } }))),
+                            canUpdateProperty && React.createElement(TableCell, { sx: { ...styles.tableCell, width: '80px' } }))),
                     React.createElement(TableBody, null, relatedInstances?.map((relatedInstance, index) => (React.createElement(TableRow, { key: relatedInstance.id },
                         columns?.map((prop) => {
-                            return (React.createElement(TableCell, { sx: { color: '#212B36', fontSize: '16px' } },
-                                React.createElement(Typography, { key: prop.id, sx: prop.id === 'name'
-                                        ? {
-                                            '&:hover': {
-                                                textDecoration: 'underline',
-                                                cursor: 'pointer',
-                                            },
-                                        }
-                                        : {}, onClick: canUpdateProperty && prop.id === 'name'
-                                        ? () => editRow(relatedInstance.id)
-                                        : undefined },
-                                    getValue(relatedInstance, prop.id, prop.type),
-                                    prop.type === 'user' &&
-                                        users?.find((user) => get(relatedInstance, `${prop.id.split('.')[0]}.id`) === user.id)?.status === 'Inactive' && React.createElement("span", null, ' (Inactive)'))));
+                            return (React.createElement(TableCell, { sx: { color: '#212B36', fontSize: '16px' } }, prop.type === 'document' ? (React.createElement(DocumentViewerCell, { instance: relatedInstance, propertyId: prop.id, apiServices: apiServices, setSnackbarError: setSnackbarError })) : (React.createElement(Typography, { key: prop.id, sx: prop.id === 'name'
+                                    ? {
+                                        '&:hover': {
+                                            textDecoration: 'underline',
+                                            cursor: 'pointer',
+                                        },
+                                    }
+                                    : {}, onClick: canUpdateProperty && prop.id === 'name'
+                                    ? () => editRow(relatedInstance.id)
+                                    : undefined },
+                                getValue(relatedInstance, prop.id, prop.type),
+                                prop.type === 'user' &&
+                                    users?.find((user) => get(relatedInstance, `${prop.id.split('.')[0]}.id`) === user.id)?.status === 'Inactive' && (React.createElement("span", null, ' (Inactive)'))))));
                         }),
                         canUpdateProperty && (React.createElement(TableCell, { sx: { width: '80px' } },
                             React.createElement(IconButton, { "aria-label": `edit-collection-instance-${index}`, onClick: () => editRow(relatedInstance.id) },

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

@@ -59,7 +59,7 @@ export class RepeatableFieldComponent extends ReactComponent {
                         }
                     }
                     this.updatedCriteria = updateCriteriaInputs(this.criteria ?? {}, data, this.component.user);
-                    this.attachReact(this.element);
+                    this.attach(this.element);
                 });
             }
         }

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

@@ -127,7 +127,7 @@ export function convertFormToComponents(entries, parameters, object) {
                 conditional: convertVisibilityToConditional(entry.visibility),
             };
         }
-        else {
+        else if (entry.type === 'input') {
             const displayOptions = entry.display;
             const parameter = parameters.find((parameter) => parameter.id === entry.parameterId);
             if (!parameter) {

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(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-checked": value, "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-checked": value, "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/FormField.d.ts

@@ -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,
@@ -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/Menubar/Menubar.d.ts

@@ -1,9 +1,22 @@
 import React, { ReactNode } from 'react';
 export type MenuBarProps = {
-    showNotifications: boolean;
+    /** The URL of the logo image to display. */
     logo: string;
+    /** Alternative text for the logo image. */
     logoAltText?: string;
+    /** Navigation items to display on the right side of the menu bar. */
     navItems?: ReactNode;
+    /** The name of the environment to display instead of the logo. */
     envName?: string;
+    /** Navigation item to display before the logo. */
+    navBeforeLogo?: ReactNode;
+    /** Indicates whether to show notifications. Currently not supported. */
+    showNotifications?: boolean;
 };
+/**
+ * Renders a customizable menu bar with navigation items, logo, etc.
+ *
+ * @param {MenuBarProps} props - Configuration props for the MenuBar component.
+ * @returns {JSX.Element} A menu bar component.
+ */
 export default function MenuBar(props: MenuBarProps): React.JSX.Element;

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

@@ -1,6 +1,12 @@
 import { AppBar, Box, CardMedia, Toolbar, Typography } from '@mui/material';
 import React from 'react';
 import UIThemeProvider, { useResponsive } from '../../../theme';
+/**
+ * Renders a customizable menu bar with navigation items, logo, etc.
+ *
+ * @param {MenuBarProps} props - Configuration props for the MenuBar component.
+ * @returns {JSX.Element} A menu bar component.
+ */
 export default function MenuBar(props) {
     const { isXs: isMobileView } = useResponsive();
     const classes = {
@@ -9,7 +15,7 @@ export default function MenuBar(props) {
             flexGrow: 1,
         },
         logo: {
-            paddingRight: '16px',
+            padding: '0 16px',
             height: '70px',
             maxWidth: isMobileView ? '220px' : null,
             objectFit: 'contain',
@@ -18,7 +24,8 @@ export default function MenuBar(props) {
     };
     return (React.createElement(UIThemeProvider, null,
         React.createElement(AppBar, { color: "inherit", position: "fixed", elevation: 0, sx: { zIndex: (theme) => theme.zIndex.drawer + 1, borderBottom: '1px solid #919EAB3D' } },
-            React.createElement(Toolbar, { sx: { justifyContent: 'space-between' } },
+            React.createElement(Toolbar, { disableGutters: true, sx: { justifyContent: 'space-between', overflow: 'hidden', paddingRight: '14px' } },
+                props.navBeforeLogo && (React.createElement(Box, { sx: { height: '70px', borderRight: '1px solid #919EAB3D' } }, props.navBeforeLogo)),
                 React.createElement(Box, { sx: classes.title }, !props.envName ? (React.createElement(CardMedia, { component: 'img', src: props.logo, alt: props.logoAltText, sx: classes.logo })) : (React.createElement(Box, { mt: 2 },
                     React.createElement(Typography, { variant: "h5" },
                         props?.envName,

package/dist/published/components/custom/Menubar/Menubar.test.js

@@ -11,3 +11,8 @@ it('render Menubar component without crashing', () => {
     render(React.createElement(Menubar, { showNotifications: true, navItems: navItems, logo: "" }));
     expect(screen.getAllByRole('link')).toHaveLength(3);
 });
+it('renders navBeforeLogo correctly', () => {
+    const navBeforeLogo = React.createElement(Link, { href: "#" }, "Before");
+    render(React.createElement(Menubar, { showNotifications: true, navItems: null, navBeforeLogo: navBeforeLogo, logo: "" }));
+    expect(screen.getAllByRole('link')).toHaveLength(1);
+});

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/dist/published/stories/MenuBar.stories.js

@@ -1,25 +1,20 @@
-import { Link } from '@mui/material';
 import React from 'react';
 import { MenuBar as CustomMenuBar } from '../index';
 // eslint-disable-next-line @typescript-eslint/no-var-requires
 const logo = require('../assets/SA_logo.jpeg');
 export default {
-    title: 'Data Display/MenuBar',
+    title: 'Custom/MenuBar',
     component: CustomMenuBar,
-    argTypes: {
-        navItems: {
-            control: 'object',
-            defaultValue: React.createElement(Link, null, "Object"),
-        },
-        showNotifications: {
-            defaultValue: true,
-            type: 'boolean',
-        },
-        logo: {
-            defaultValue: logo,
-        },
-        envName: { defaultValue: 'System Automation' },
-    },
 };
-const Template = (props) => React.createElement(CustomMenuBar, { ...props });
-export const MenuBar = Template.bind({});
+const MenuBarTemplate = (args) => React.createElement(CustomMenuBar, { ...args });
+export const MenuBar = MenuBarTemplate.bind({});
+MenuBar.args = {
+    logo: logo,
+    logoAltText: 'System Automation',
+    navItems: (React.createElement(React.Fragment, null,
+        React.createElement("a", { href: "#" }, "Object1"),
+        React.createElement("a", { href: "#" }, "Object2"),
+        React.createElement("a", { href: "#" }, "Object3"))),
+    envName: 'System Automation',
+    showNotifications: true,
+};

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@evoke-platform/ui-components",
-    "version": "1.5.0-testing.1",
+    "version": "1.5.0-testing.11",
     "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,10 +82,11 @@
         "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.1.0-testing.5",
+        "@evoke-platform/context": "^1.2.0-0",
         "react": "^18.1.0",
         "react-dom": "^18.1.0"
     },