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

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/components/layout/Box/Box.d.ts

@@ -1,8 +1,8 @@
-import { BoxProps } from '@mui/material';
+import { BoxProps as MUIBoxProps } from '@mui/material';
 import React, { ElementType } from 'react';
-type CustomBoxProps = BoxProps & {
+export type BoxProps = MUIBoxProps & {
     sx?: object;
     component?: ElementType;
 };
-declare const Box: (props: CustomBoxProps) => React.JSX.Element;
+declare const Box: React.ForwardRefExoticComponent<Omit<BoxProps, "ref"> & React.RefAttributes<unknown>>;
 export default Box;

package/dist/published/components/layout/Box/Box.js

@@ -1,8 +1,8 @@
 import { Box as MUIBox } from '@mui/material';
-import React from 'react';
+import React, { forwardRef } from 'react';
 import UIThemeProvider from '../../../theme';
-const Box = (props) => {
+const Box = forwardRef((props, ref) => {
     return (React.createElement(UIThemeProvider, null,
-        React.createElement(MUIBox, { ...props })));
-};
+        React.createElement(MUIBox, { ref: ref, ...props })));
+});
 export default Box;

package/dist/published/icons/custom/NoNavigation.d.ts

@@ -0,0 +1,3 @@
+import { SvgIconProps } from '@mui/material';
+import React from 'react';
+export declare const NoNavigation: (props: SvgIconProps) => React.JSX.Element;

package/dist/published/icons/custom/NoNavigation.js

@@ -0,0 +1,10 @@
+import { SvgIcon } from '@mui/material';
+import React from 'react';
+export const NoNavigation = (props) => (React.createElement(SvgIcon, { ...props, viewBox: '0 0 24 24', sx: {
+        verticalAlign: 'top',
+        maxWidth: props.width ?? '24',
+        maxHeight: props.height ?? '24',
+        ...(props.sx ?? {}),
+    } },
+    React.createElement("g", { id: "icon/no_navigation" },
+        React.createElement("rect", { x: "2.75", y: "4.75", width: "18.5", height: "14.5", rx: "1.25", stroke: props?.htmlColor ?? '#212B36', strokeWidth: "1.5", fill: "transparent" }))));

package/dist/published/icons/custom/SideNavigation.d.ts

@@ -0,0 +1,3 @@
+import { SvgIconProps } from '@mui/material';
+import React from 'react';
+export declare const SideNavigation: (props: SvgIconProps) => React.JSX.Element;

package/dist/published/icons/custom/SideNavigation.js

@@ -0,0 +1,11 @@
+import { SvgIcon } from '@mui/material';
+import React from 'react';
+export const SideNavigation = (props) => (React.createElement(SvgIcon, { ...props, viewBox: '0 0 24 24', sx: {
+        verticalAlign: 'top',
+        maxWidth: props.width ?? '24',
+        maxHeight: props.height ?? '24',
+        ...(props.sx ?? {}),
+    } },
+    React.createElement("g", { id: "icon/side_navigation" },
+        React.createElement("rect", { x: "2.75", y: "4.75", width: "18.5", height: "14.5", rx: "1.25", stroke: props?.htmlColor ?? '#212B36', strokeWidth: "1.5", fill: "transparent" }),
+        React.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M4 4C2.89543 4 2 4.89543 2 6V18C2 19.1046 2.89543 20 4 20H11V4H4ZM4.5 6C4.22386 6 4 6.22386 4 6.5C4 6.77614 4.22386 7 4.5 7H8.5C8.77614 7 9 6.77614 9 6.5C9 6.22386 8.77614 6 8.5 6H4.5ZM4 8.5C4 8.22386 4.22386 8 4.5 8H7.5C7.77614 8 8 8.22386 8 8.5C8 8.77614 7.77614 9 7.5 9H4.5C4.22386 9 4 8.77614 4 8.5ZM4.5 10C4.22386 10 4 10.2239 4 10.5C4 10.7761 4.22386 11 4.5 11H8.5C8.77614 11 9 10.7761 9 10.5C9 10.2239 8.77614 10 8.5 10H4.5ZM4 14.5C4 14.2239 4.22386 14 4.5 14H8.5C8.77614 14 9 14.2239 9 14.5C9 14.7761 8.77614 15 8.5 15H4.5C4.22386 15 4 14.7761 4 14.5ZM4.5 12C4.22386 12 4 12.2239 4 12.5C4 12.7761 4.22386 13 4.5 13H7.5C7.77614 13 8 12.7761 8 12.5C8 12.2239 7.77614 12 7.5 12H4.5Z", fill: props?.htmlColor ?? '#212B36' }))));

package/dist/published/icons/custom/TopNavigation.d.ts

@@ -0,0 +1,3 @@
+import { SvgIconProps } from '@mui/material';
+import React from 'react';
+export declare const TopNavigation: (props: SvgIconProps) => React.JSX.Element;

package/dist/published/icons/custom/TopNavigation.js

@@ -0,0 +1,11 @@
+import { SvgIcon } from '@mui/material';
+import React from 'react';
+export const TopNavigation = (props) => (React.createElement(SvgIcon, { ...props, viewBox: '0 0 24 24', sx: {
+        verticalAlign: 'top',
+        maxWidth: props.width ?? '24',
+        maxHeight: props.height ?? '24',
+        ...(props.sx ?? {}),
+    } },
+    React.createElement("g", { id: "icon/top_navigation" },
+        React.createElement("rect", { x: "2.75", y: "4.75", width: "18.5", height: "14.5", rx: "1.25", stroke: props?.htmlColor ?? '#212B36', "stroke-width": "1.5", "stroke-linejoin": "round", fill: "transparent" }),
+        React.createElement("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M22 5.66667C22 4.74619 21.2538 4 20.3333 4H3.66667C2.74619 4 2 4.74619 2 5.66667V9L22 9V5.66667ZM4.5 6C4.22386 6 4 6.22386 4 6.5C4 6.77614 4.22386 7 4.5 7H7.5C7.77614 7 8 6.77614 8 6.5C8 6.22386 7.77614 6 7.5 6H4.5ZM9 6.5C9 6.22386 9.22386 6 9.5 6H11.5C11.7761 6 12 6.22386 12 6.5C12 6.77614 11.7761 7 11.5 7H9.5C9.22386 7 9 6.77614 9 6.5ZM13.5 6C13.2239 6 13 6.22386 13 6.5C13 6.77614 13.2239 7 13.5 7H16.5C16.7761 7 17 6.77614 17 6.5C17 6.22386 16.7761 6 16.5 6H13.5Z", fill: props?.htmlColor ?? '#212B36' }))));

package/dist/published/icons/custom/index.d.ts

@@ -1,5 +1,8 @@
 export * from './FileWithExtension';
 export * from './Inherited';
+export * from './NoNavigation';
 export * from './Overrides';
+export * from './SideNavigation';
+export * from './TopNavigation';
 export * from './TrashCan';
 export * from './UploadCloud';

package/dist/published/icons/custom/index.js

@@ -1,5 +1,8 @@
 export * from './FileWithExtension';
 export * from './Inherited';
+export * from './NoNavigation';
 export * from './Overrides';
+export * from './SideNavigation';
+export * from './TopNavigation';
 export * from './TrashCan';
 export * from './UploadCloud';

package/dist/published/index.d.ts

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

package/dist/published/index.js

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

package/dist/published/stories/Box.stories.d.ts

@@ -1,15 +1,6 @@
 import { ComponentMeta, ComponentStory } from '@storybook/react';
 import React from 'react';
-declare const _default: ComponentMeta<(props: import("@mui/system").BoxOwnProps<import("@mui/material").Theme> & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-    ref?: ((instance: HTMLDivElement | null) => void) | React.RefObject<HTMLDivElement> | null | undefined;
-}, keyof import("@mui/material/OverridableComponent").CommonProps | keyof import("@mui/system").BoxOwnProps<import("@mui/material").Theme>> & {
-    sx?: object | undefined;
-    component?: React.ElementType<any, keyof React.JSX.IntrinsicElements> | undefined;
-}) => React.JSX.Element>;
+import { BoxProps } from '../components/layout/Box/Box';
+declare const _default: ComponentMeta<React.ForwardRefExoticComponent<Omit<BoxProps, "ref"> & React.RefAttributes<unknown>>>;
 export default _default;
-export declare const Box: ComponentStory<(props: import("@mui/system").BoxOwnProps<import("@mui/material").Theme> & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-    ref?: ((instance: HTMLDivElement | null) => void) | React.RefObject<HTMLDivElement> | null | undefined;
-}, keyof import("@mui/material/OverridableComponent").CommonProps | keyof import("@mui/system").BoxOwnProps<import("@mui/material").Theme>> & {
-    sx?: object | undefined;
-    component?: React.ElementType<any, keyof React.JSX.IntrinsicElements> | undefined;
-}) => React.JSX.Element>;
+export declare const Box: ComponentStory<React.ForwardRefExoticComponent<Omit<BoxProps, "ref"> & React.RefAttributes<unknown>>>;