@evoke-platform/ui-components 1.5.1-testing.1 → 1.6.0-dev.10

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

@@ -1,23 +1,60 @@
-import React, { useEffect, useState } from 'react';
-import { Autocomplete, FormControl, FormControlLabel, Radio, RadioGroup, TextField, } from '../../../core';
+import { createFilterOptions, List, ListSubheader } from '@mui/material';
+import { uniq } from 'lodash';
+import React, { forwardRef, useEffect, useRef, useState } from 'react';
+import { Clear } from '../../../../icons';
+import { Autocomplete, FormControl, FormControlLabel, IconButton, Radio, RadioGroup, TextField, Typography, } from '../../../core';
+import { Box } from '../../../layout';
 import InputFieldComponent from '../InputFieldComponent/InputFieldComponent';
+const filter = createFilterOptions();
 const Select = (props) => {
-    const { id, property, defaultValue, error, errorMessage, onBlur, readOnly, selectOptions, required, size, isOptionEqualToValue, renderOption, getOptionLabel, disableCloseOnSelect, additionalProps, displayOption, sortBy, } = props;
+    const { id, property, defaultValue, error, errorMessage, onBlur, onChange, readOnly, isCombobox, selectOptions, required, size, isOptionEqualToValue, renderOption, getOptionLabel, disableCloseOnSelect, additionalProps, displayOption, sortBy, } = props;
+    const otherInputRef = useRef(null);
+    const [isOther, setIsOther] = useState(!!isCombobox &&
+        !!defaultValue &&
+        !selectOptions?.some((option) => (typeof option === 'string' && option === defaultValue) ||
+            option.value === defaultValue));
+    const [isOtherFocused, setIsOtherFocused] = useState(false);
     const [value, setValue] = useState(defaultValue);
-    const [inputValue, setInputValue] = useState('');
+    const [inputValue, setInputValue] = useState(!selectOptions?.some((option) => (typeof option === 'string' && option === defaultValue) ||
+        option.value === defaultValue) && property.type !== 'array'
+        ? defaultValue
+        : '');
+    const [errorState, setErrorState] = useState();
+    useEffect(() => {
+        setErrorState(isCombobox ? error && !isOtherFocused : error);
+    }, [error, isOtherFocused]);
+    useEffect(() => {
+        if (isOther && otherInputRef.current && value === '') {
+            otherInputRef.current.focus();
+        }
+    }, [isOther, value]);
     useEffect(() => {
         setValue(defaultValue);
     }, [defaultValue]);
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     const handleChange = (event, selected) => {
         if (Array.isArray(selected)) {
-            setValue(selected.map((option) => option.value ?? option));
-            props.onChange &&
-                props.onChange(property.id, selected.map((option) => option.value ?? option), property);
+            const newValues = selected.map((option) => option.value ?? option);
+            setValue(uniq(newValues));
+            onChange && onChange(property.id, newValues, property);
         }
         else {
-            setValue(selected);
-            props.onChange && props.onChange(property.id, selected, property);
+            if (isCombobox && displayOption === 'radioButton') {
+                if (selected === '__other__') {
+                    setIsOther(true);
+                    setValue('');
+                }
+                else {
+                    setIsOther(false);
+                    setValue(selected);
+                    setInputValue('');
+                    onChange && onChange(property.id, selected, property);
+                }
+            }
+            else {
+                setValue(selected);
+                onChange && onChange(property.id, selected, property);
+            }
         }
     };
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -29,6 +66,10 @@ const Select = (props) => {
             setInputValue(selectValue);
         }
     };
+    const ListboxComponent = forwardRef(function ListboxComponent(props, ref) {
+        const { children, ...other } = props;
+        return (React.createElement(List, { component: "ul", ...other, ref: ref, subheader: isCombobox ? (React.createElement(ListSubheader, { component: 'div', id: `${id}-instructions`, role: "note", sx: { lineHeight: '36px', borderBottom: '1px solid #919EAB3D' } }, "Select below or type and click Enter to add a new item.")) : undefined }, children));
+    });
     const sortedOptions = (() => {
         if (!selectOptions)
             return [];
@@ -42,21 +83,92 @@ const Select = (props) => {
                 return options.sort((a, b) => typeof a === 'string' ? a.localeCompare(b) : a.label.localeCompare(b.label));
         }
     })();
-    return readOnly ? (React.createElement(InputFieldComponent, { ...props })) : displayOption === 'radioButton' ? (React.createElement(FormControl, { error: error, required: required },
-        React.createElement(RadioGroup, { name: `radioGroup-${id}`, value: value, onChange: handleChange, sx: { paddingLeft: '12px' } }, sortedOptions.map((option, index) => (React.createElement(FormControlLabel, { key: index, value: typeof option === 'string' ? option : option.value, control: React.createElement(Radio, { size: "small", sx: {
-                    ...(size === 'small' && { paddingTop: '2px', paddingBottom: '2px' }),
-                    ...(error && {
-                        color: '#FF4842',
-                        '&.Mui-checked': { color: '#FF4842' },
-                    }),
-                } }), label: typeof option === 'string' ? option : option.label })))))) : (React.createElement(Autocomplete, { multiple: property?.type === 'array' ? true : false, id: id, sortBy: sortBy, renderInput: (params) => (React.createElement(TextField, { ...params, value: value, fullWidth: true, onBlur: onBlur })), value: value ?? (property?.type === 'array' ? [] : undefined), onChange: handleChange, options: selectOptions ?? property?.enum ?? [], inputValue: inputValue ?? '', error: error, errorMessage: errorMessage, required: required, onInputChange: handleInputValueChange, size: size, isOptionEqualToValue: isOptionEqualToValue
+    return readOnly ? (React.createElement(InputFieldComponent, { ...props })) : displayOption === 'radioButton' ? (React.createElement(React.Fragment, null,
+        React.createElement(FormControl, { error: error, required: required },
+            React.createElement(RadioGroup, { name: `radioGroup-${id}`, value: isOther ? '__other__' : value, onChange: handleChange },
+                sortedOptions.map((option, index) => (React.createElement(FormControlLabel, { key: index, sx: { margin: '3px 0' }, value: typeof option === 'string' ? option : option.value, control: React.createElement(Radio, { size: "small", sx: {
+                            padding: '3px',
+                            ...(index === 0 && {
+                                paddingTop: 0,
+                            }),
+                            ...(!!errorState && {
+                                color: '#FF4842',
+                                '&.Mui-checked': { color: '#FF4842' },
+                            }),
+                        } }), label: typeof option === 'string' ? option : option.label }))),
+                isCombobox && (React.createElement(React.Fragment, null,
+                    React.createElement(FormControlLabel, { value: '__other__', sx: { margin: '3px 0' }, control: React.createElement(Radio, { size: "small", sx: {
+                                padding: '3px',
+                                ...(!!errorState && {
+                                    color: '#FF4842',
+                                    '&.Mui-checked': { color: '#FF4842' },
+                                }),
+                            } }), label: React.createElement("span", { id: `other-radio-button-${id}` }, "Other") }),
+                    isOther && (React.createElement(TextField, { id: `other-${id}`, inputProps: {
+                            'aria-labelledby': `other-radio-button-${id}`,
+                        }, value: inputValue, inputRef: otherInputRef, error: !!errorState, sx: { marginLeft: '4px' }, onChange: (e) => {
+                            setValue(e.target.value);
+                            setInputValue(e.target.value);
+                            onChange && onChange(property.id, e.target.value, property);
+                        }, size: 'small', onFocus: () => setIsOtherFocused(true), onBlur: (e) => {
+                            // If another radio button is focused, change the value to that radio button's value.
+                            const targetElement = e.nativeEvent.relatedTarget;
+                            if (targetElement?.defaultValue && targetElement.name === `radioGroup-${id}`) {
+                                onChange && onChange(property.id, targetElement, property);
+                            }
+                            else {
+                                onChange && onChange(property.id, e.target.value, property);
+                            }
+                            setIsOtherFocused(false);
+                        } })))))),
+        displayOption === 'radioButton' && onChange && !readOnly && value && (React.createElement(Box, { sx: {
+                ':hover': { cursor: 'pointer' },
+                marginTop: '4px',
+                display: 'flex',
+                alignItems: 'center',
+            } },
+            React.createElement(IconButton, { "aria-label": `Clear`, onClick: () => {
+                    setValue('');
+                    property && onChange(property.id, '');
+                    setIsOther(false);
+                }, sx: { padding: '3px', marginRight: '6px' } },
+                React.createElement(Clear, { sx: {
+                        color: '#637381',
+                        fontSize: '1.2rem',
+                    } })),
+            React.createElement(Typography, { variant: "caption" }, "Clear Selection"))))) : (React.createElement(Autocomplete, { multiple: property?.type === 'array' ? true : false, id: id, sortBy: sortBy, renderInput: (params) => (React.createElement(TextField, { ...params, value: value, fullWidth: true, onBlur: onBlur, inputProps: {
+                ...params.inputProps,
+                'aria-describedby': isCombobox ? `${id}-instructions` : undefined,
+            } })), value: value ?? (property?.type === 'array' ? [] : undefined), onChange: handleChange, options: selectOptions ?? property?.enum ?? [], inputValue: inputValue ?? '', error: error, errorMessage: errorMessage, required: required, onInputChange: handleInputValueChange, size: size, filterOptions: (options, params) => {
+            const filtered = filter(options, params);
+            const { inputValue } = params;
+            // Suggest to the user to add a new value.
+            const found = options.some((option) => inputValue === option.label);
+            if (inputValue !== '' && !found && isCombobox) {
+                filtered.push({
+                    value: inputValue,
+                    label: `Add "${inputValue}"`,
+                    isCustomValue: true,
+                });
+            }
+            return filtered;
+        }, isOptionEqualToValue: isOptionEqualToValue
             ? (option, value) => isOptionEqualToValue(option, value)
-            : undefined, getOptionLabel: getOptionLabel ? (option) => getOptionLabel(option) : undefined, renderOption: renderOption
+            : undefined, getOptionLabel: getOptionLabel && !isCombobox
+            ? (option) => getOptionLabel(option)
+            : (option) => {
+                if (typeof option === 'string')
+                    return option;
+                // If the option is a custom value, return the value without the prepended "Add" text.
+                if (option.isCustomValue)
+                    return option.value;
+                return option.label ?? '';
+            }, renderOption: renderOption
             ? (props, option, state) => renderOption(props, option, state)
-            : undefined, disableCloseOnSelect: disableCloseOnSelect, sx: {
+            : (props, option) => React.createElement("li", { ...props }, option.label ?? option), ListboxComponent: ListboxComponent, disableCloseOnSelect: disableCloseOnSelect, sx: {
             '& button.MuiButtonBase-root': {
                 visibility: 'visible',
             },
-        }, ...(additionalProps ?? {}) }));
+        }, forcePopupIcon: true, ...(isCombobox ? { selectOnFocus: true, handleHomeEndKeys: true, freeSolo: true } : {}), ...(additionalProps ?? {}) }));
 };
 export default Select;

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

@@ -14,8 +14,8 @@ describe('Single select', () => {
         type: 'choices',
     };
     it('returns selected option', async () => {
-        const user = userEvent.setup();
         const onChangeMock = vi.fn((name, value, property) => { });
+        const user = userEvent.setup();
         const options = ['option 1', 'option 2', 'option 3'];
         render(React.createElement(Select, { id: "testSelect", property: choiceProperty, selectOptions: options, onChange: onChangeMock }));
         const input = screen.getByRole('combobox');
@@ -48,6 +48,21 @@ describe('Single select', () => {
         const optionLabels = allOptions.map((option) => option.textContent);
         expect(optionLabels).toEqual(expectedValues);
     });
+    it('allows the user to enter a custom value if it is combobox component', async () => {
+        const onChangeMock = vi.fn((name, value, property) => { });
+        const user = userEvent.setup();
+        const options = ['option 1', 'option 2', 'option 3'];
+        render(React.createElement(Select, { id: "testSelect", property: choiceProperty, selectOptions: options, onChange: onChangeMock, isCombobox: true }));
+        const input = screen.getByRole('combobox');
+        await user.click(input);
+        // Verify the instruction text for a combobox displays as the sub-header of the combobox.
+        screen.getByText('Select below or type and click Enter to add a new item.');
+        await user.type(input, 'custom option');
+        // Verify the option to add the custom value is displayed as an available option in the dropdown.
+        const customOption = await screen.findByRole('option', { name: 'Add "custom option"' });
+        await user.click(customOption);
+        expect(onChangeMock).toBeCalledWith('selectOptions', expect.objectContaining({ label: 'Add "custom option"', value: 'custom option' }), choiceProperty);
+    });
 });
 describe('Multi select', () => {
     // Right now an object property is required for this to function, but eventually this should go
@@ -66,12 +81,49 @@ describe('Multi select', () => {
         await user.click(input);
         const option2 = await screen.findByRole('option', { name: 'option 2' });
         await user.click(option2);
-        await user.click(input); // selecting option closes the dropdown, re-open the options
+        // selecting option closes the dropdown, re-open the options
+        await user.click(input);
         const option3 = await screen.findByRole('option', { name: 'option 3' });
         await user.click(option3);
         expect(onChangeMock).toBeCalledTimes(2);
         expect(onChangeMock).lastCalledWith('multiSelect', ['option 2', 'option 3'], multiChoiceProperty);
     });
+    it('allows the user to enter custom values if it is combobox component', async () => {
+        const onChangeMock = vi.fn((name, value, property) => { });
+        const user = userEvent.setup();
+        const options = ['option 1', 'option 2', 'option 3'];
+        render(React.createElement(Select, { id: "multiSelect", property: multiChoiceProperty, selectOptions: options, onChange: onChangeMock, isCombobox: true }));
+        const input = screen.getByRole('combobox');
+        await user.click(input);
+        // Verify the instruction text for a combobox displays as the sub-header of the combobox.
+        screen.getByText('Select below or type and click Enter to add a new item.');
+        await user.type(input, 'custom option 1');
+        const customOption1 = await screen.findByRole('option', { name: 'Add "custom option 1"' });
+        await user.click(customOption1);
+        await user.type(input, 'custom option 2');
+        const customOption2 = await screen.findByRole('option', { name: 'Add "custom option 2"' });
+        await user.click(customOption2);
+        expect(onChangeMock).toBeCalledTimes(2);
+        expect(onChangeMock).lastCalledWith('multiSelect', ['custom option 1', 'custom option 2'], multiChoiceProperty);
+    });
+    it('allows the user to enter custom values in conjunction with the predefined options if it is combobox component', async () => {
+        const onChangeMock = vi.fn((name, value, property) => { });
+        const user = userEvent.setup();
+        const options = ['option 1', 'option 2', 'option 3'];
+        render(React.createElement(Select, { id: "multiSelect", property: multiChoiceProperty, selectOptions: options, onChange: onChangeMock, isCombobox: true }));
+        const input = screen.getByRole('combobox');
+        await user.click(input);
+        // Verify the instruction text for a combobox displays as the sub-header of the combobox.
+        screen.getByText('Select below or type and click Enter to add a new item.');
+        await user.type(input, 'custom option 1');
+        const customOption1 = await screen.findByRole('option', { name: 'Add "custom option 1"' });
+        await user.click(customOption1);
+        await user.click(input);
+        const option1 = await screen.findByRole('option', { name: 'option 1' });
+        await user.click(option1);
+        expect(onChangeMock).toBeCalledTimes(2);
+        expect(onChangeMock).lastCalledWith('multiSelect', ['custom option 1', 'option 1'], multiChoiceProperty);
+    });
 });
 describe('Radio Single select', () => {
     const choiceProperty = {
@@ -79,7 +131,7 @@ describe('Radio Single select', () => {
         name: 'Select Options',
         type: 'choices',
     };
-    test('returns selected radio option', async () => {
+    it('returns selected radio option', async () => {
         const user = userEvent.setup();
         const onChangeMock = vi.fn((name, value, property) => { });
         const options = ['option 1', 'option 2', 'option 3'];
@@ -99,4 +151,21 @@ describe('Radio Single select', () => {
         const radioValues = radioButtons.map((radioButton) => radioButton.value);
         expect(radioValues).toEqual(expectedValues);
     });
+    it('renders an "Other" option in the radio group if the component is configured to support a custom value', async () => {
+        const onChangeMock = vi.fn((name, value, property) => { });
+        const options = ['option 1', 'option 2', 'option 3'];
+        render(React.createElement(Select, { id: "testSelect", property: choiceProperty, selectOptions: options, displayOption: 'radioButton', sortBy: 'ASC', onChange: onChangeMock, isCombobox: true }));
+        await screen.findByRole('radio', { name: 'Other' });
+    });
+    it('renders a text field for a custom option if the "Other" option is selected', async () => {
+        const user = userEvent.setup();
+        const onChangeMock = vi.fn((name, value, property) => { });
+        const options = ['option 1', 'option 2', 'option 3'];
+        render(React.createElement(Select, { id: "testSelect", property: choiceProperty, selectOptions: options, displayOption: 'radioButton', sortBy: 'ASC', onChange: onChangeMock, isCombobox: true }));
+        await screen.findByRole('radio', { name: 'Other' });
+        await user.click(screen.getByRole('radio', { name: 'Other' }));
+        const otherTextField = await screen.findByRole('textbox', { name: `Other` });
+        await user.type(otherTextField, 'custom option');
+        expect(onChangeMock).toBeCalledWith('selectOptions', expect.stringContaining('custom option'), choiceProperty);
+    });
 });

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

@@ -1,9 +1,11 @@
 import { LocalDateTime } from '@js-joda/core';
 import { TimePicker } from '@mui/x-date-pickers';
-import { isUndefined, padStart } from 'lodash';
+import { isUndefined, omit, padStart } from 'lodash';
+import { DateTime } from 'luxon';
 import React, { useEffect, useState } from 'react';
 import { InvalidDate } from '../../../../util';
 import { LocalizationProvider, TextField } from '../../../core';
+import InputFieldComponent from '../InputFieldComponent/InputFieldComponent';
 const TimePickerSelect = (props) => {
     const { id, property, defaultValue, error, errorMessage, readOnly, required, size, onBlur, placeholder, additionalProps, } = props;
     const values = defaultValue ? defaultValue.split(':') : undefined;
@@ -39,7 +41,15 @@ const TimePickerSelect = (props) => {
             props.onChange && props.onChange(property.id, date, property);
         }
     };
-    return (React.createElement(LocalizationProvider, null,
-        React.createElement(TimePicker, { value: value, onChange: handleChange, renderInput: (params) => (React.createElement(TextField, { ...params, id: id, error: error, errorMessage: errorMessage, onBlur: onBlur, fullWidth: true, required: required, sx: { background: 'white', borderRadius: '8px' }, size: size ?? 'medium', placeholder: placeholder, readOnly: readOnly, ...(additionalProps ?? {}) })), readOnly: readOnly })));
+    return readOnly ? (React.createElement(InputFieldComponent, { ...{
+            ...props,
+            defaultValue: value instanceof LocalDateTime ? DateTime.fromISO(value.toString()).toFormat('hh:mm a') : '',
+        } })) : (React.createElement(LocalizationProvider, null,
+        React.createElement(TimePicker, { value: value, onChange: handleChange, renderInput: (params) => (React.createElement(TextField, { ...params, id: id, error: error, errorMessage: errorMessage, onBlur: onBlur, fullWidth: true, required: required, sx: { background: 'white', borderRadius: '8px' }, size: size ?? 'medium', placeholder: placeholder, 
+                // merges MUI inputProps with additionalProps.inputProps in a way that still shows the value
+                inputProps: {
+                    ...params.inputProps,
+                    ...(additionalProps?.inputProps ?? {}),
+                }, ...omit(additionalProps, ['inputProps']) })), readOnly: readOnly })));
 };
 export default TimePickerSelect;

package/dist/published/components/custom/HistoryLog/HistoryData.d.ts

@@ -7,6 +7,7 @@ type HistoryDataProps = {
     documentHistory?: Record<string, History[]>;
     object: Obj;
     referencedObjects?: Obj[];
+    hideTimeline?: boolean;
 };
 declare const HistoricalData: (props: HistoryDataProps) => React.JSX.Element;
 export default HistoricalData;

package/dist/published/components/custom/HistoryLog/HistoryData.js

@@ -19,8 +19,7 @@ const styles = {
         color: '#637381',
     },
     timelineConnector: {
-        padding: '1px 0px 24px 22px',
-        borderLeft: '2px rgba(145, 158, 171, 0.24) solid',
+        padding: '1px 0px 24px 0px',
         marginLeft: '5px',
     },
     historyData: {
@@ -30,15 +29,24 @@ const styles = {
     },
 };
 const HistoricalData = (props) => {
-    const { records, documentHistory, object, referencedObjects } = props;
+    const { records, documentHistory, object, referencedObjects, hideTimeline } = props;
     const getPastDocumentVersion = (history) => {
         const documentVersions = documentHistory?.[history.subject?.id ?? 'unknown'] ?? [];
         const currentVersion = documentVersions?.map((v) => v.timestamp).indexOf(history.timestamp);
         return currentVersion ? documentVersions[currentVersion - 1] : undefined;
     };
-    return (React.createElement(Box, { sx: styles.timelineConnector }, records.map((r) => (React.createElement(Box, { margin: '16px 0px', key: `${r.timestamp}-${nanoid()}` },
-        React.createElement(Box, { sx: { display: 'flex', justifyContent: 'space-between' } },
-            React.createElement(Box, { sx: { display: 'flex', maxWidth: '60%', alignContent: 'flex-start' } },
+    return (React.createElement(Box, { sx: {
+            ...styles.timelineConnector,
+            borderLeft: !hideTimeline ? '2px rgba(145, 158, 171, 0.24) solid' : undefined,
+        } }, records.map((r) => (React.createElement(Box, { margin: '16px 0px', key: `${r.timestamp}-${nanoid()}` },
+        React.createElement(Box, { sx: {
+                display: 'flex',
+                justifyContent: 'space-between',
+                flexDirection: { xs: 'column', sm: 'row' },
+                alignItems: { xs: 'flex-start', sm: 'center' },
+                gap: 0,
+            } },
+            React.createElement(Box, { sx: { display: 'flex', maxWidth: { sx: '100%', sm: '60%' }, alignContent: 'flex-start' } },
                 React.createElement(Typography, { sx: { fontSize: '12px', color: '#637381' } },
                     React.createElement(Typography, { component: 'span', sx: { fontWeight: 600, fontSize: '12px' } }, r.user.name ?? 'Unknown User'),
                     "\u00A0",

package/dist/published/components/custom/HistoryLog/HistoryLoading.d.ts

@@ -1,3 +1,6 @@
 import React from 'react';
-declare const HistoryLoading: () => React.JSX.Element;
+type HistoryLoadingProps = {
+    hideTimeline?: boolean;
+};
+declare const HistoryLoading: (props: HistoryLoadingProps) => React.JSX.Element;
 export default HistoryLoading;

package/dist/published/components/custom/HistoryLog/HistoryLoading.js

@@ -1,11 +1,10 @@
+import { Circle } from '@mui/icons-material';
 import React from 'react';
-import { Box } from '../../layout';
 import { Skeleton } from '../../core';
-import { Circle } from '@mui/icons-material';
+import { Box } from '../../layout';
 const styles = {
     timelineConnector: {
         padding: '1px 0px 5px 22px',
-        borderLeft: '2px rgba(145, 158, 171, 0.24) solid',
         marginLeft: '5px',
     },
     headerSkeleton: {
@@ -18,20 +17,27 @@ const styles = {
         borderRadius: '7px',
     },
 };
-const HistoryLoading = () => {
+const HistoryLoading = (props) => {
+    const { hideTimeline } = props;
     return (React.createElement(React.Fragment, { key: 'history-log-loading' },
         React.createElement(Box, { sx: { display: 'flex', alignItems: 'center' } },
-            React.createElement(Circle, { color: "primary", sx: { fontSize: '12px', marginRight: '12px' } }),
+            !hideTimeline && React.createElement(Circle, { color: "primary", sx: { fontSize: '12px', marginRight: '12px' } }),
             React.createElement(Skeleton, { variant: "text", sx: styles.headerSkeleton })),
-        React.createElement(Box, { sx: styles.timelineConnector },
+        React.createElement(Box, { sx: {
+                ...styles.timelineConnector,
+                borderLeft: !hideTimeline ? '2px rgba(145, 158, 171, 0.24) solid' : undefined,
+            } },
             React.createElement(Box, { margin: '4px 0px 24px 0px' },
                 React.createElement(Skeleton, { variant: "text", sx: { ...styles.dataSkeleton, width: '120px' } }),
                 React.createElement(Skeleton, { variant: "text", sx: { ...styles.dataSkeleton, width: '65%' } }),
                 React.createElement(Skeleton, { variant: "text", sx: { ...styles.dataSkeleton, width: '75%' } }))),
         React.createElement(Box, { sx: { display: 'flex', alignItems: 'center' } },
-            React.createElement(Circle, { color: "primary", sx: { fontSize: '12px', marginRight: '12px' } }),
+            !hideTimeline && React.createElement(Circle, { color: "primary", sx: { fontSize: '12px', marginRight: '12px' } }),
             React.createElement(Skeleton, { variant: "text", sx: styles.headerSkeleton })),
-        React.createElement(Box, { sx: styles.timelineConnector },
+        React.createElement(Box, { sx: {
+                ...styles.timelineConnector,
+                borderLeft: !hideTimeline ? '2px rgba(145, 158, 171, 0.24) solid' : undefined,
+            } },
             React.createElement(Box, { margin: '4px 0px 20px 0px' },
                 React.createElement(Skeleton, { variant: "text", sx: { ...styles.dataSkeleton, width: '120px' } }),
                 React.createElement(Skeleton, { variant: "text", sx: { ...styles.dataSkeleton, width: '55%' } })))));

package/dist/published/components/custom/HistoryLog/index.d.ts

@@ -10,6 +10,8 @@ export type HistoryLogProps = {
     loading?: boolean;
     /** The title displayed above the timeline */
     title?: string;
+    /** Whether to hide the timeline in the history log */
+    hideTimeline?: boolean;
 };
 /**
  * Renders a timeline of the instance's history log.

package/dist/published/components/custom/HistoryLog/index.js

@@ -20,7 +20,7 @@ const { format } = require('small-date');
  * @returns {JSX.Element} A timeline view representing the instance's history.
  */
 export const HistoryLog = (props) => {
-    const { object, history, loading, title } = props;
+    const { object, history, loading, title, hideTimeline } = props;
     const [historyMap, setHistoryMap] = useState({});
     const [documentHistory, setDocumentHistory] = useState({});
     const [referencedObjects, setReferencedObjects] = useState([]);
@@ -91,7 +91,7 @@ export const HistoryLog = (props) => {
                 if (records.length) {
                     return (React.createElement(React.Fragment, { key: date },
                         React.createElement(Box, { sx: { display: 'flex', alignItems: 'center' } },
-                            React.createElement(Circle, { color: "primary", sx: { fontSize: '12px', marginRight: '12px' } }),
+                            !hideTimeline && (React.createElement(Circle, { color: "primary", sx: { fontSize: '12px', marginRight: '12px' } })),
                             React.createElement(Typography, { sx: { fontWeight: 600, fontSize: '16px' } },
                                 format(new Date(), 'yyyy-MM-dd') === date
                                     ? 'Today'
@@ -99,14 +99,14 @@ export const HistoryLog = (props) => {
                                 ' ',
                                 "\u00A0"),
                             React.createElement(Typography, { sx: { fontWeight: 600, fontSize: '16px', color: '#637381' } }, format(new Date(date + ' 00:00:000'), 'MMM dd, yyyy'))),
-                        React.createElement(HistoricalData, { object: object, records: records, documentHistory: documentHistory, referencedObjects: referencedObjects })));
+                        React.createElement(HistoricalData, { object: object, records: records, documentHistory: documentHistory, referencedObjects: referencedObjects, hideTimeline: hideTimeline })));
                 }
                 return null;
             }),
         !loading && filteredHistory && Object.values(filteredHistory).every((v) => !v.length) && (React.createElement(Box, { width: '100%', display: 'grid', justifyContent: 'center', marginTop: '60px' },
             React.createElement(Typography, { fontSize: '20px', fontWeight: 700 }, "You Have No History"),
             React.createElement(Typography, { fontSize: '14px', fontWeight: 400 }, "Try modifying the history type."))),
-        loading && React.createElement(HistoryLoading, null),
+        loading && React.createElement(HistoryLoading, { hideTimeline: hideTimeline }),
         React.createElement(Snackbar, { open: showSnackbar, handleClose: () => setShowSnackbar(false), message: 'Error occurred when loading referenced objects', error: true })));
 };
 export default HistoryLog;

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

@@ -0,0 +1,33 @@
+import React from 'react';
+export interface ResponsiveOverflowProps {
+    /**
+     * Children elements to be displayed horizontally
+     */
+    children: React.ReactNode[];
+    /**
+     * Text for the overflow button. Default is "More"
+     */
+    moreButtonText?: string;
+    /**
+     * Custom button element to replace the default "More" button
+     */
+    customMoreButton?: React.ReactNode;
+    /**
+     * Maximum number of children to be displayed before overflowing
+     */
+    maxVisible?: number;
+    /**
+     * Function to render each overflow menu item. Receives the overflowed child and its index.
+     */
+    renderOverflowMenuItem?: (item: React.ReactNode) => React.ReactNode;
+    /**
+     * If true, the container will take full width
+     */
+    fullWidth?: boolean;
+}
+/**
+ * ResponsiveOverflow is a container component that displays children horizontally,
+ * automatically moving overflow items into a dropdown menu when there isn't enough space.
+ */
+export declare const ResponsiveOverflow: (props: ResponsiveOverflowProps) => React.JSX.Element;
+export default ResponsiveOverflow;