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

package/dist/published/components/custom/Form/Common/FormComponentWrapper.js

@@ -1,5 +1,5 @@
 import React, { useEffect, useRef, useState } from 'react';
-import { ErrorRounded, Help, HighlightOffOutlined } from '../../../../icons';
+import { ErrorRounded, Help } from '../../../../icons';
 import { IconButton, Tooltip, Typography } from '../../../core';
 import { Box } from '../../../layout';
 const underFieldStyles = {
@@ -13,11 +13,6 @@ const descriptionStyles = {
     whiteSpace: 'normal',
     paddingBottom: '4px',
 };
-const clearBtnStyles = {
-    color: '#637381',
-    fontSize: '1.2rem',
-    marginBottom: '2px',
-};
 const PrefixSuffix = (props) => {
     const { prefix, suffix, height } = props;
     const text = prefix || suffix;
@@ -51,7 +46,7 @@ const PrefixSuffix = (props) => {
  * description, tooltip, prefix, suffix and word/char counts
  */
 export const FormComponentWrapper = (props) => {
-    const { inputId, label, description, tooltip, prefix, suffix, value, validate, errorMessage, showCharCount, type, viewOnly, children, displayOption, onChange, property, readOnly, } = props;
+    const { inputId, label, description, tooltip, prefix, suffix, value, validate, errorMessage, showCharCount, type, viewOnly, children, displayOption, property, } = props;
     const [fieldHeight, setFieldHeight] = useState(40);
     const { maxLength } = validate;
     const fieldRef = useRef(null);
@@ -76,12 +71,6 @@ export const FormComponentWrapper = (props) => {
                     tooltip && (React.createElement(Tooltip, { placement: "right", title: tooltip },
                         React.createElement(IconButton, null,
                             React.createElement(Help, { sx: { fontSize: '14px' } }))))),
-                displayOption === 'radioButton' && onChange && !viewOnly && !readOnly && value && (React.createElement(Tooltip, { title: `Clear` },
-                    React.createElement("span", null,
-                        React.createElement(IconButton, { "aria-label": `Clear`, sx: { padding: '0px' }, onClick: () => {
-                                property && onChange(property.id, '');
-                            } },
-                            React.createElement(HighlightOffOutlined, { sx: clearBtnStyles }))))),
                 React.createElement(Box, { sx: { ...(displayOption === 'radioButton' && { display: 'flex' }) } },
                     React.createElement(Typography, { variant: "caption", sx: descriptionStyles }, description)))),
             React.createElement(Box, { sx: { display: 'flex', flexDirection: 'row' } },

package/dist/published/components/custom/Form/FormComponents/FormFieldComponent.d.ts

@@ -12,6 +12,7 @@ type FormFieldComponentProps = Omit<BaseFormComponentProps, 'property'> & {
     initialValue?: string;
     displayOption?: 'radioButton' | 'dropdown';
     strictlyTrue?: boolean;
+    nonStrictEnum?: boolean;
 };
 export declare class FormFieldComponent extends ReactComponent {
     [x: string]: any;

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

@@ -485,6 +485,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', required: this.component.property.type === 'boolean' ? this.component.strictlyTrue : undefined }))), root);
+                    }, ...this.component, id: inputId, defaultValue: this.dataValue, mask: this.component.inputMask, error: this.hasErrors(), size: this.component.fieldHeight ?? 'medium', required: this.component.property.type === 'boolean' ? this.component.strictlyTrue : undefined, isCombobox: this.component.nonStrictEnum }))), root);
     }
 }

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

@@ -165,6 +165,7 @@ export function convertFormToComponents(entries, parameters, object) {
                 data: {
                     values: entry.type === 'input' ? entry.enumWithLabels : undefined,
                 },
+                nonStrictEnum: parameter.nonStrictEnum,
                 property: property,
                 defaultToCurrentTime: displayOptions?.defaultValue === 'currentTime' && parameter.type === 'time' ? true : false,
                 defaultToCurrentDate: displayOptions?.defaultValue === 'currentDate' && parameter.type === 'date' ? true : false,

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

@@ -35,6 +35,7 @@ export type FormFieldProps = {
     label?: string;
     description?: string;
     tooltip?: string;
+    isCombobox?: boolean;
 };
 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, strictlyTrue, size, placeholder, errorMessage, onBlur, mask, max, min, isMultiLineText, rows, inputMaskPlaceholderChar, queryAddresses, isOptionEqualToValue, renderOption, disableCloseOnSelect, getOptionLabel, additionalProps, displayOption, sortBy, label, description, tooltip, } = props;
+    const { id, defaultValue, error, onChange, property, readOnly, selectOptions, required, strictlyTrue, size, placeholder, errorMessage, onBlur, mask, max, min, isMultiLineText, rows, inputMaskPlaceholderChar, queryAddresses, isOptionEqualToValue, renderOption, disableCloseOnSelect, getOptionLabel, additionalProps, displayOption, sortBy, label, description, tooltip, isCombobox, } = props;
     let control;
     const commonProps = {
         id: id ?? property.id,
@@ -36,6 +36,7 @@ const FormField = (props) => {
         label,
         description,
         tooltip,
+        isCombobox,
     };
     if (queryAddresses) {
         control = (React.createElement(AddressFieldComponent, { ...commonProps, mask: mask, inputMaskPlaceholderChar: inputMaskPlaceholderChar, isMultiLineText: isMultiLineText, rows: rows, queryAddresses: queryAddresses }));

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

@@ -1,23 +1,56 @@
-import React, { useEffect, useState } from 'react';
-import { Autocomplete, FormControl, FormControlLabel, Radio, RadioGroup, TextField, } from '../../../core';
+import { createFilterOptions, List, ListSubheader } from '@mui/material';
+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)
+        ? defaultValue
+        : '');
+    const [errorState, setErrorState] = useState();
     useEffect(() => {
-        setValue(defaultValue);
-    }, [defaultValue]);
+        setErrorState(isCombobox ? error && !isOtherFocused : error);
+    }, [error, isOtherFocused]);
+    useEffect(() => {
+        if (isOther && otherInputRef.current && value === '') {
+            otherInputRef.current.focus();
+        }
+    }, [isOther, value]);
     // 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(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 +62,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 +79,84 @@ 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}"`,
+                });
+            }
+            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) => (typeof option === 'string' ? option : option.label), renderOption: renderOption
             ? (props, option, state) => renderOption(props, option, state)
-            : undefined, disableCloseOnSelect: disableCloseOnSelect, sx: {
+            : undefined, ListboxComponent: ListboxComponent, disableCloseOnSelect: disableCloseOnSelect, sx: {
             '& button.MuiButtonBase-root': {
                 visibility: 'visible',
             },
-        }, ...(additionalProps ?? {}) }));
+        }, ...(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/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/theme/hooks.d.ts

@@ -29,3 +29,81 @@ export declare function useResponsive(): {
     /** Returns true if viewport width is between the specified breakpoints */
     between: (start: Breakpoint, end: Breakpoint) => boolean;
 };
+export interface WidgetSizeInfo {
+    /** The ref to attach to the widget container */
+    ref: (element: HTMLElement | SVGElement | null) => void;
+    /** Width in pixels */
+    width: number;
+    /** Height in pixels */
+    height: number;
+    /** Widget size breakpoints */
+    breakpoints: {
+        /** Extra small: width < 800px */
+        isXs: boolean;
+        /** Small: 800px <= width < 1000px */
+        isSm: boolean;
+        /** Medium: 1000px <= width < 1200px */
+        isMd: boolean;
+        /** Large: 1200px <= width < 1400px */
+        isLg: boolean;
+        /** Extra large: width >= 1400px */
+        isXl: boolean;
+        /** Compact height: height < 300px */
+        isCompact: boolean;
+        /** Tall height: height >= 600px */
+        isTall: boolean;
+    };
+    /** Bounds information from react-use-measure */
+    bounds: {
+        /**
+         * left is usually the same as x, but can differ if width is negative.
+         * See: https://developer.mozilla.org/en-US/docs/Web/API/DOMRect
+         */
+        left: number;
+        /**
+         * top is usually the same as y, but can differ if height is negative.
+         * See: https://developer.mozilla.org/en-US/docs/Web/API/DOMRect
+         */
+        top: number;
+        width: number;
+        height: number;
+        bottom: number;
+        right: number;
+        x: number;
+        y: number;
+    };
+    /** Check if widget is above a breakpoint */
+    isAbove: (breakpoint: 'xs' | 'sm' | 'md' | 'lg' | 'xl') => boolean;
+    /** Check if widget is below a breakpoint */
+    isBelow: (breakpoint: 'xs' | 'sm' | 'md' | 'lg' | 'xl') => boolean;
+}
+/**
+ * Custom hook that measures widget dimensions and provides responsive breakpoints
+ * based on the actual widget size rather than viewport size.
+ *
+ * @param options Configuration options for the measurement
+ * @returns WidgetSizeInfo object with ref, dimensions, and breakpoints
+ *
+ * @example
+ * ```tsx
+ * const { ref, width, breakpoints } = useWidgetSize();
+ *
+ * return (
+ *   <div ref={ref}>
+ *     {breakpoints.isXs ? 'Compact view' : 'Full view'}
+ *     <p>Widget width: {width}px</p>
+ *   </div>
+ * );
+ * ```
+ */
+export declare const useWidgetSize: (options?: {
+    /** Debounce measurement updates (ms) */
+    debounce?: number;
+    /** Throttle measurement updates (ms) */
+    throttle?: number;
+    /** Scroll containers to observe */
+    scroll?: boolean;
+    /** Resize containers to observe */
+    resize?: boolean;
+}) => WidgetSizeInfo;
+export default useWidgetSize;

package/dist/published/theme/hooks.js

@@ -1,5 +1,6 @@
 import { useTheme } from '@mui/material';
 import useMediaQuery from '@mui/material/useMediaQuery';
+import useMeasure from 'react-use-measure';
 /**
  * Custom hook for responsive design breakpoints using size terminology.
  * Breakpoints based on MUI default theme:
@@ -33,3 +34,67 @@ export function useResponsive() {
         between: (start, end) => useMediaQuery(theme.breakpoints.between(start, end)),
     };
 }
+/**
+ * Custom hook that measures widget dimensions and provides responsive breakpoints
+ * based on the actual widget size rather than viewport size.
+ *
+ * @param options Configuration options for the measurement
+ * @returns WidgetSizeInfo object with ref, dimensions, and breakpoints
+ *
+ * @example
+ * ```tsx
+ * const { ref, width, breakpoints } = useWidgetSize();
+ *
+ * return (
+ *   <div ref={ref}>
+ *     {breakpoints.isXs ? 'Compact view' : 'Full view'}
+ *     <p>Widget width: {width}px</p>
+ *   </div>
+ * );
+ * ```
+ */
+export const useWidgetSize = (options) => {
+    const [ref, bounds] = useMeasure({
+        debounce: options?.debounce ?? 16,
+        scroll: options?.scroll ?? true,
+        offsetSize: true,
+        ...options,
+    });
+    const width = bounds.width || 0;
+    const height = bounds.height || 0;
+    // Widget-specific breakpoints based on container width
+    const breakpoints = {
+        isXs: width < 800,
+        isSm: width >= 800 && width < 1000,
+        isMd: width >= 1000 && width < 1200,
+        isLg: width >= 1200 && width < 1400,
+        isXl: width >= 1400,
+        isCompact: height < 300,
+        isTall: height >= 600,
+    };
+    // Breakpoint thresholds
+    const breakpointThresholds = {
+        xs: 800,
+        sm: 1000,
+        md: 1200,
+        lg: 1400,
+        xl: Infinity,
+    };
+    // Utility functions for responsive checks
+    const isAbove = (breakpoint) => {
+        return width >= breakpointThresholds[breakpoint];
+    };
+    const isBelow = (breakpoint) => {
+        return width < breakpointThresholds[breakpoint];
+    };
+    return {
+        ref,
+        width,
+        height,
+        breakpoints,
+        bounds,
+        isAbove,
+        isBelow,
+    };
+};
+export default useWidgetSize;

package/dist/published/theme/hooks.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/published/theme/hooks.test.js

@@ -0,0 +1,187 @@
+import { renderHook } from '@testing-library/react';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import { useWidgetSize } from '.';
+// Shared mock bounds for useMeasure
+let mockBounds = {
+    left: 0,
+    top: 0,
+    width: 0,
+    height: 0,
+    bottom: 0,
+    right: 0,
+    x: 0,
+    y: 0,
+};
+function setMockBounds(newBounds) {
+    mockBounds = { ...mockBounds, ...newBounds };
+}
+// Mock useMeasure from react-use-measure
+vi.mock('react-use-measure', () => {
+    const useMeasure = () => [
+        vi.fn(),
+        mockBounds,
+    ];
+    return { __esModule: true, default: useMeasure, useMeasure };
+});
+describe('useWidgetSize', () => {
+    beforeEach(() => {
+        // Reset bounds before each test
+        setMockBounds({
+            left: 0,
+            top: 0,
+            width: 0,
+            height: 0,
+            bottom: 0,
+            right: 0,
+            x: 0,
+            y: 0,
+        });
+    });
+    it('should provide ref and basic structure', () => {
+        setMockBounds({ width: 123, height: 456 });
+        const { result } = renderHook(() => useWidgetSize());
+        expect(result.current.ref).toBeDefined();
+        expect(typeof result.current.ref).toBe('function');
+        expect(result.current.width).toBe(123);
+        expect(result.current.height).toBe(456);
+    });
+    describe('breakpoints', () => {
+        it('should set isXs for width < 800', () => {
+            setMockBounds({ width: 799, height: 100 });
+            const { result } = renderHook(() => useWidgetSize());
+            expect(result.current.breakpoints.isXs).toBe(true);
+            expect(result.current.breakpoints.isSm).toBe(false);
+            expect(result.current.breakpoints.isMd).toBe(false);
+            expect(result.current.breakpoints.isLg).toBe(false);
+            expect(result.current.breakpoints.isXl).toBe(false);
+        });
+        it('should set isSm for 800 <= width < 1000', () => {
+            setMockBounds({ width: 800, height: 100 });
+            let { result } = renderHook(() => useWidgetSize());
+            expect(result.current.breakpoints.isXs).toBe(false);
+            expect(result.current.breakpoints.isSm).toBe(true);
+            expect(result.current.breakpoints.isMd).toBe(false);
+            expect(result.current.breakpoints.isLg).toBe(false);
+            expect(result.current.breakpoints.isXl).toBe(false);
+            setMockBounds({ width: 999, height: 100 });
+            result = renderHook(() => useWidgetSize()).result;
+            expect(result.current.breakpoints.isXs).toBe(false);
+            expect(result.current.breakpoints.isSm).toBe(true);
+            expect(result.current.breakpoints.isMd).toBe(false);
+            expect(result.current.breakpoints.isLg).toBe(false);
+            expect(result.current.breakpoints.isXl).toBe(false);
+        });
+        it('should set isMd for 1000 <= width < 1200', () => {
+            setMockBounds({ width: 1000, height: 100 });
+            let { result } = renderHook(() => useWidgetSize());
+            expect(result.current.breakpoints.isXs).toBe(false);
+            expect(result.current.breakpoints.isSm).toBe(false);
+            expect(result.current.breakpoints.isMd).toBe(true);
+            expect(result.current.breakpoints.isLg).toBe(false);
+            expect(result.current.breakpoints.isXl).toBe(false);
+            setMockBounds({ width: 1199, height: 100 });
+            result = renderHook(() => useWidgetSize()).result;
+            expect(result.current.breakpoints.isXs).toBe(false);
+            expect(result.current.breakpoints.isSm).toBe(false);
+            expect(result.current.breakpoints.isMd).toBe(true);
+            expect(result.current.breakpoints.isLg).toBe(false);
+            expect(result.current.breakpoints.isXl).toBe(false);
+        });
+        it('should set isLg for 1200 <= width < 1400', () => {
+            setMockBounds({ width: 1200, height: 100 });
+            let { result } = renderHook(() => useWidgetSize());
+            expect(result.current.breakpoints.isXs).toBe(false);
+            expect(result.current.breakpoints.isSm).toBe(false);
+            expect(result.current.breakpoints.isMd).toBe(false);
+            expect(result.current.breakpoints.isLg).toBe(true);
+            expect(result.current.breakpoints.isXl).toBe(false);
+            setMockBounds({ width: 1399, height: 100 });
+            result = renderHook(() => useWidgetSize()).result;
+            expect(result.current.breakpoints.isXs).toBe(false);
+            expect(result.current.breakpoints.isSm).toBe(false);
+            expect(result.current.breakpoints.isMd).toBe(false);
+            expect(result.current.breakpoints.isLg).toBe(true);
+            expect(result.current.breakpoints.isXl).toBe(false);
+        });
+        it('should set isXl for width >= 1400', () => {
+            setMockBounds({ width: 1400, height: 100 });
+            let { result } = renderHook(() => useWidgetSize());
+            expect(result.current.breakpoints.isXs).toBe(false);
+            expect(result.current.breakpoints.isSm).toBe(false);
+            expect(result.current.breakpoints.isMd).toBe(false);
+            expect(result.current.breakpoints.isLg).toBe(false);
+            expect(result.current.breakpoints.isXl).toBe(true);
+            setMockBounds({ width: 2000, height: 100 });
+            result = renderHook(() => useWidgetSize()).result;
+            expect(result.current.breakpoints.isXs).toBe(false);
+            expect(result.current.breakpoints.isSm).toBe(false);
+            expect(result.current.breakpoints.isMd).toBe(false);
+            expect(result.current.breakpoints.isLg).toBe(false);
+            expect(result.current.breakpoints.isXl).toBe(true);
+        });
+        it('should set isCompact for height < 300', () => {
+            setMockBounds({ width: 1000, height: 299 });
+            const { result } = renderHook(() => useWidgetSize());
+            expect(result.current.breakpoints.isCompact).toBe(true);
+            expect(result.current.breakpoints.isTall).toBe(false);
+        });
+        it('should set isTall for height >= 600', () => {
+            setMockBounds({ width: 1000, height: 600 });
+            const { result } = renderHook(() => useWidgetSize());
+            expect(result.current.breakpoints.isTall).toBe(true);
+            expect(result.current.breakpoints.isCompact).toBe(false);
+            setMockBounds({ width: 1000, height: 800 });
+            const { result: result2 } = renderHook(() => useWidgetSize());
+            expect(result2.current.breakpoints.isTall).toBe(true);
+            expect(result2.current.breakpoints.isCompact).toBe(false);
+        });
+        it('should not set isCompact or isTall for 300 <= height < 600', () => {
+            setMockBounds({ width: 1000, height: 300 });
+            let { result } = renderHook(() => useWidgetSize());
+            expect(result.current.breakpoints.isCompact).toBe(false);
+            expect(result.current.breakpoints.isTall).toBe(false);
+            setMockBounds({ width: 1000, height: 599 });
+            result = renderHook(() => useWidgetSize()).result;
+            expect(result.current.breakpoints.isCompact).toBe(false);
+            expect(result.current.breakpoints.isTall).toBe(false);
+        });
+    });
+    it('should provide bounds information', () => {
+        setMockBounds({
+            left: 1,
+            top: 2,
+            width: 300,
+            height: 400,
+            bottom: 402,
+            right: 301,
+            x: 1,
+            y: 2,
+        });
+        const { result } = renderHook(() => useWidgetSize());
+        expect(result.current.bounds).toBeDefined();
+        expect(result.current.bounds.left).toBe(1);
+        expect(result.current.bounds.top).toBe(2);
+        expect(result.current.bounds.width).toBe(300);
+        expect(result.current.bounds.height).toBe(400);
+        expect(result.current.bounds.bottom).toBe(402);
+        expect(result.current.bounds.right).toBe(301);
+        expect(result.current.bounds.x).toBe(1);
+        expect(result.current.bounds.y).toBe(2);
+    });
+    it('should provide responsive utility functions', () => {
+        setMockBounds({ width: 1200 });
+        const { result } = renderHook(() => useWidgetSize());
+        expect(result.current.isAbove).toBeDefined();
+        expect(typeof result.current.isAbove).toBe('function');
+        expect(result.current.isBelow).toBeDefined();
+        expect(typeof result.current.isBelow).toBe('function');
+    });
+    it('should calculate responsive utility functions correctly', () => {
+        setMockBounds({ width: 1100 });
+        const { result } = renderHook(() => useWidgetSize());
+        expect(result.current.isAbove('sm')).toBe(true); // 1100 >= 1000
+        expect(result.current.isBelow('lg')).toBe(true); // 1100 < 1400
+        expect(result.current.isAbove('xl')).toBe(false); // 1100 < Infinity
+        expect(result.current.isBelow('xs')).toBe(false); // 1100 >= 800
+    });
+});

package/dist/published/theme/index.d.ts

@@ -1,5 +1,5 @@
 import { useMediaQuery, useTheme } from '@mui/material';
 import UIThemeProvider from './UIThemeProvider';
-import { useResponsive } from './hooks';
-export { useMediaQuery, useResponsive, useTheme };
+import { useResponsive, useWidgetSize, type WidgetSizeInfo } from './hooks';
+export { useMediaQuery, useResponsive, useTheme, useWidgetSize, type WidgetSizeInfo };
 export default UIThemeProvider;

package/dist/published/theme/index.js

@@ -1,5 +1,5 @@
 import { useMediaQuery, useTheme } from '@mui/material';
 import UIThemeProvider from './UIThemeProvider';
-import { useResponsive } from './hooks';
-export { useMediaQuery, useResponsive, useTheme };
+import { useResponsive, useWidgetSize } from './hooks';
+export { useMediaQuery, useResponsive, useTheme, useWidgetSize };
 export default UIThemeProvider;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@evoke-platform/ui-components",
-    "version": "1.5.1-testing.1",
+    "version": "1.6.0-dev.2",
     "description": "",
     "main": "dist/published/index.js",
     "module": "dist/published/index.js",
@@ -128,6 +128,7 @@
         "react-input-mask": "^2.0.4",
         "react-number-format": "^4.9.3",
         "react-querybuilder": "^6.0.2",
+        "react-use-measure": "^2.1.7",
         "rtf.js": "^3.0.9",
         "sift": "^17.1.3",
         "small-date": "^2.0.0",