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

package/dist/published/components/custom/Form/FormComponents/CriteriaComponent/Criteria.js

@@ -18,7 +18,58 @@ export const Criteria = (props) => {
                     setLoadingError(true);
                 }
                 if (properties) {
-                    setProperties(properties);
+                    const flattenProperties = properties.flatMap((prop) => {
+                        if (prop.type === 'object' || prop.type === 'user') {
+                            return [
+                                {
+                                    id: `${prop.id}.id`,
+                                    name: `${prop.name} Id`,
+                                    type: 'string',
+                                },
+                                {
+                                    id: `${prop.id}.name`,
+                                    name: `${prop.name} Name`,
+                                    type: 'string',
+                                },
+                            ];
+                        }
+                        else if (prop.type === 'address') {
+                            return [
+                                {
+                                    id: `${prop.id}.line1`,
+                                    name: `${prop.name} Line 1`,
+                                    type: 'string',
+                                },
+                                {
+                                    id: `${prop.id}.line2`,
+                                    name: `${prop.name} Line 2`,
+                                    type: 'string',
+                                },
+                                {
+                                    id: `${prop.id}.city`,
+                                    name: `${prop.name} City`,
+                                    type: 'string',
+                                },
+                                {
+                                    id: `${prop.id}.county`,
+                                    name: `${prop.name} County`,
+                                    type: 'string',
+                                },
+                                {
+                                    id: `${prop.id}.state`,
+                                    name: `${prop.name} State`,
+                                    type: 'string',
+                                },
+                                {
+                                    id: `${prop.id}.zipCode`,
+                                    name: `${prop.name} Zip Code`,
+                                    type: 'string',
+                                },
+                            ];
+                        }
+                        return prop;
+                    });
+                    setProperties(flattenProperties);
                     setLoadingError(false);
                 }
                 setLoading(false);

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

@@ -71,7 +71,7 @@ export class ObjectComponent extends ReactComponent {
                     }
                     this.updatedCriteria = updateCriteriaInputs(this.criteria ?? {}, data, this.component.user);
                     if (this.visible) {
-                        this.attachReact(this.element);
+                        this.attach(this.element);
                     }
                 });
             }
@@ -115,7 +115,7 @@ export class ObjectComponent extends ReactComponent {
                     }
                     this.updatedDefaultValueCriteria = updateCriteriaInputs(this.defaultValueCriteria ?? {}, data, this.component.user);
                     if (this.visible) {
-                        this.attachReact(this.element);
+                        this.attach(this.element);
                     }
                 });
             }
@@ -158,7 +158,6 @@ export class ObjectComponent extends ReactComponent {
                 delete this.errorDetails['api-error'];
             }
             this.attach(this.element);
-            this.attachReact(this.element);
         });
         if (this.component.defaultValue) {
             this.expandInstance();
@@ -216,11 +215,16 @@ export class ObjectComponent extends ReactComponent {
         if (!root) {
             root = element;
         }
+        let updatedValue;
+        if (this.shouldSetValue)
+            updatedValue = this.dataForSetting;
+        else
+            updatedValue = this.dataValue;
         const updatedComponent = {
             ...this.component,
             instance: {
                 ...this.component.instance,
-                [this.component.key]: isEmpty(this.dataValue) ? null : this.dataValue,
+                [this.component.key]: isEmpty(updatedValue) || isNil(updatedValue) || updatedValue.length === 0 ? null : updatedValue,
             },
             defaultValueCriteria: this.updatedDefaultValueCriteria,
         };

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) {
@@ -719,7 +719,7 @@ formComponents, allCriteriaInputs, instance, objectPropertyInputProps, associate
                         // Set the associated instance as a default value and hide the field.
                         if (associatedObject?.instanceId &&
                             associatedObject?.propertyId &&
-                            item.property.id === associatedObject.propertyId) {
+                            item.property?.id === associatedObject.propertyId) {
                             item.defaultValue = { id: associatedObject.instanceId };
                             item.hidden = true;
                             // If "conditional" is defined, the "hidden" property isn't respected.

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/HistoryLog/DisplayedProperty.js

@@ -23,7 +23,7 @@ const DisplayedProperty = (props) => {
         return stringAddress;
     };
     const formatData = (property, value) => {
-        if (property?.objectId && property?.type === 'object') {
+        if (property?.objectId && (property?.type === 'object' || property?.type === 'collection')) {
             return value?.name ?? value?.id;
         }
         switch (property?.type) {