@evoke-platform/ui-components 1.6.0-dev.6 → 1.6.0-testing.0

package/dist/published/components/core/index.d.ts

@@ -47,7 +47,7 @@ export { Tooltip } from './Tooltip';
 export { Typography } from './Typography';
 export { TabContext, TabList, TabPanel, TreeItem, TreeView } from '@mui/lab';
 export { CardActionArea, CardActions, CardContent, CardHeader, CardMedia, Input, InputAdornment, InputLabel, ListItemButton, ListItemText, MenuList, SvgIcon, TableBody, TableCell, TableContainer, TableHead, TablePagination, TableRow, TableSortLabel, } from '@mui/material';
-export { GridToolbarContainer, GridToolbarQuickFilter, useGridApiRef } from '@mui/x-data-grid';
+export { useGridApiRef } from '@mui/x-data-grid';
 export { TreeItem as RichTreeItem, RichTreeView, TreeItem2Content, TreeItem2DragAndDropOverlay, TreeItem2GroupTransition, TreeItem2Icon, TreeItem2IconContainer, TreeItem2Label, TreeItem2Provider, TreeItem2Root, useTreeItem2, } from '@mui/x-tree-view';
 export type { GridSize } from '@mui/material';
 export type { GridCellParams, GridColDef, GridEventListener, GridFilterModel, GridInitialState, GridRowParams, GridSortModel, GridValueFormatterParams, GridValueGetterParams, } from '@mui/x-data-grid';

package/dist/published/components/core/index.js

@@ -48,5 +48,5 @@ export { Typography } from './Typography';
 //TODO: Review following components. They also need theme control:
 export { TabContext, TabList, TabPanel, TreeItem, TreeView } from '@mui/lab';
 export { CardActionArea, CardActions, CardContent, CardHeader, CardMedia, Input, InputAdornment, InputLabel, ListItemButton, ListItemText, MenuList, SvgIcon, TableBody, TableCell, TableContainer, TableHead, TablePagination, TableRow, TableSortLabel, } from '@mui/material';
-export { GridToolbarContainer, GridToolbarQuickFilter, useGridApiRef } from '@mui/x-data-grid';
+export { useGridApiRef } from '@mui/x-data-grid';
 export { TreeItem as RichTreeItem, RichTreeView, TreeItem2Content, TreeItem2DragAndDropOverlay, TreeItem2GroupTransition, TreeItem2Icon, TreeItem2IconContainer, TreeItem2Label, TreeItem2Provider, TreeItem2Root, useTreeItem2, } from '@mui/x-tree-view';

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

@@ -17,32 +17,7 @@ const BuilderGrid = (props) => {
             borderBottom: 'none',
             boxShadow: 'rgba(145, 158, 171, 0.2) 0px 8px 16px',
         } },
-        React.createElement(MuiDataGrid, { autoPageSize: !disablePagination, hideFooterPagination: disablePagination, hideFooter: disablePagination, onMenuOpen: (env) => setAnchorEl(env.target), loading: loading, rows: rows, getRowId: (row) => row.id, disableColumnMenu: true, initialState: {
-                sorting: {
-                    sortModel: initialSort ? [initialSort] : [],
-                },
-            }, componentsProps: {
-                panel: {
-                    anchorEl: anchorEl,
-                    placement: 'bottom-end',
-                    sx: {
-                        '& .MuiPaper-root': {
-                            borderRadius: '6px',
-                            boxShadow: '0px 24px 48px rgba(145, 158, 171, 0.4)',
-                            padding: '8px',
-                            stop: -120,
-                        },
-                    },
-                },
-            }, slots: {
-                toolbar: hideToolbar ? null : toolbar,
-                noResultsOverlay: () => {
-                    return React.createElement(Box, null);
-                },
-                noRowsOverlay: () => {
-                    return noRowsOverlay ? noRowsOverlay : null;
-                },
-            }, rowHeight: 60, columnHeaderHeight: 62, ...rest, sx: {
+        React.createElement(MuiDataGrid, { autoPageSize: !disablePagination, hideFooterPagination: disablePagination, hideFooter: disablePagination, onMenuOpen: (env) => setAnchorEl(env.target), loading: loading, rows: rows, ...rest, sx: {
                 border: 'none',
                 '& .MuiDataGrid-toolbarContainer': {
                     padding: '0',
@@ -89,7 +64,32 @@ const BuilderGrid = (props) => {
                 },
                 height: disablePagination && !loading ? 'auto' : 'calc(100vh - 240px)',
                 ...rest.sx,
-            } }))) : (React.createElement(React.Fragment, null, error ? (React.createElement(Box, { sx: {
+            }, getRowId: (row) => row.id, disableColumnMenu: true, initialState: {
+                sorting: {
+                    sortModel: initialSort ? [initialSort] : [],
+                },
+            }, componentsProps: {
+                panel: {
+                    anchorEl: anchorEl,
+                    placement: 'bottom-end',
+                    sx: {
+                        '& .MuiPaper-root': {
+                            borderRadius: '6px',
+                            boxShadow: '0px 24px 48px rgba(145, 158, 171, 0.4)',
+                            padding: '8px',
+                            stop: -120,
+                        },
+                    },
+                },
+            }, slots: {
+                toolbar: hideToolbar ? null : toolbar,
+                noResultsOverlay: () => {
+                    return React.createElement(Box, null);
+                },
+                noRowsOverlay: () => {
+                    return noRowsOverlay ? noRowsOverlay : null;
+                },
+            }, rowHeight: 60, columnHeaderHeight: 62 }))) : (React.createElement(React.Fragment, null, error ? (React.createElement(Box, { sx: {
             backgroundColor: '#fff',
             borderRadius: '6px',
             display: 'flex',

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

@@ -7,7 +7,6 @@ import sift from 'sift';
 import { Edit, TrashCan } from '../../../../../icons';
 import { Button, IconButton, Skeleton, Snackbar, Table, TableBody, TableCell, TableContainer, TableHead, TableRow, Tooltip, Typography, } from '../../../../core';
 import { Box } from '../../../../layout';
-import { getReadableQuery } from '../../../CriteriaBuilder';
 import { getPrefixedUrl, normalizeDateTime, retrieveCustomErrorMessage } from '../../utils';
 import { ActionDialog } from './ActionDialog';
 import { DocumentViewerCell } from './DocumentViewerCell';
@@ -38,7 +37,6 @@ const RepeatableField = (props) => {
     const [relatedObject, setRelatedObject] = useState();
     const [hasCreateAction, setHasCreateAction] = useState(false);
     const [users, setUsers] = useState();
-    const [criteriaObjects, setCriteriaObjects] = useState([]);
     const [openDialog, setOpenDialog] = useState(false);
     const [dialogType, setDialogType] = useState();
     const [selectedRow, setSelectedRow] = useState();
@@ -52,7 +50,9 @@ const RepeatableField = (props) => {
     const [error, setError] = useState(false);
     const DEFAULT_CREATE_ACTION = '_create';
     const { instanceChanges } = useNotification();
-    const fetchRelatedObject = useCallback(async () => {
+    const fetchRelatedInstances = useCallback(async () => {
+        if (openDialog)
+            return;
         let relatedObject;
         if (property.objectId) {
             try {
@@ -80,86 +80,31 @@ const RepeatableField = (props) => {
             catch (err) {
                 console.error(error);
             }
-        }
-        relatedObject && checkCreateAccess(relatedObject);
-    }, [apiServices, property]);
-    const fetchRelatedInstances = useCallback(async () => {
-        if (openDialog)
-            return;
-        if (property.objectId && property.relatedPropertyId && instance?.id) {
-            const filterProperty = `${property.relatedPropertyId}.id`;
-            const filter = { where: { [filterProperty]: instance?.id }, limit: 100 };
-            const objectId = property.objectId;
-            try {
-                const timeout = setTimeout(() => {
+            if (property.relatedPropertyId && instance?.id) {
+                const filterProperty = `${property.relatedPropertyId}.id`;
+                const filter = { where: { [filterProperty]: instance?.id }, limit: 100 };
+                const objectId = property.objectId;
+                try {
+                    const timeout = setTimeout(() => {
+                        setLoading(false);
+                    }, 300);
+                    setLoading(true);
+                    const instances = await apiServices.get(getPrefixedUrl(`/objects/${objectId}/instances`), {
+                        params: { filter: JSON.stringify(filter) },
+                    });
+                    clearTimeout(timeout);
                     setLoading(false);
-                }, 300);
-                setLoading(true);
-                const instances = await apiServices.get(getPrefixedUrl(`/objects/${objectId}/instances`), {
-                    params: { filter: JSON.stringify(filter) },
-                });
-                clearTimeout(timeout);
-                setLoading(false);
-                if (instances) {
-                    setRelatedInstances(instances);
+                    if (instances) {
+                        setRelatedInstances(instances);
+                    }
+                }
+                catch (error) {
+                    setError(true);
                 }
             }
-            catch (error) {
-                setError(true);
-            }
-        }
-    }, [apiServices, property]);
-    const fetchCriteriaObjects = useCallback(async () => {
-        let objectIds = [];
-        const criteriaProperties = relatedObject?.properties?.filter((property) => property.type === 'criteria' && property.objectId) ?? [];
-        if (tableViewLayout) {
-            objectIds = criteriaProperties
-                .filter((p) => tableViewLayout.properties.some((column) => column.id === p.id))
-                .map((property) => property.objectId);
-        }
-        else {
-            objectIds = criteriaProperties.map((p) => p.objectId);
-        }
-        const objects = [];
-        for (const objectId of new Set(objectIds)) {
-            try {
-                const criteriaObject = await apiServices.get(getPrefixedUrl(`/objects/${objectId}/effective`), {
-                    params: { fields: ['id', 'name', 'properties'] },
-                });
-                objects.push(criteriaObject);
-            }
-            catch (error) {
-                console.error(`Error fetching criteria object with ID ${objectId}:`, error);
-            }
-        }
-        setCriteriaObjects(objects);
-    }, [apiServices, relatedObject, tableViewLayout]);
-    useEffect(() => {
-        (async () => {
-            try {
-                const users = await apiServices.get(getPrefixedUrl(`/users`));
-                setUsers(users);
-            }
-            catch (error) {
-                console.error(error);
-            }
-        })();
-    }, [apiServices]);
-    useEffect(() => {
-        fetchRelatedObject();
-        fetchRelatedInstances();
-    }, [fetchRelatedInstances, fetchRelatedObject, reloadOnErrorTrigger, instance]);
-    useEffect(() => {
-        if (relatedObject)
-            fetchCriteriaObjects();
-    }, [fetchCriteriaObjects, relatedObject]);
-    useEffect(() => {
-        if (relatedObject?.rootObjectId) {
-            const callback = () => fetchRelatedInstances();
-            instanceChanges?.subscribe(relatedObject?.rootObjectId, callback);
-            return () => instanceChanges?.unsubscribe(relatedObject?.rootObjectId, callback);
         }
-    }, [instanceChanges, relatedObject]);
+        relatedObject && checkCreateAccess(relatedObject);
+    }, [apiServices, property, viewLayout]);
     const retrieveCriteria = (relatedObjProperty, action, object) => {
         let property;
         if (action.parameters) {
@@ -226,6 +171,27 @@ const RepeatableField = (props) => {
             });
         }
     };
+    useEffect(() => {
+        (async () => {
+            try {
+                const users = await apiServices.get(getPrefixedUrl(`/users`));
+                setUsers(users);
+            }
+            catch (error) {
+                console.error(error);
+            }
+        })();
+    }, [apiServices]);
+    useEffect(() => {
+        fetchRelatedInstances();
+    }, [fetchRelatedInstances, reloadOnErrorTrigger, instance]);
+    useEffect(() => {
+        if (relatedObject?.rootObjectId) {
+            const callback = () => fetchRelatedInstances();
+            instanceChanges?.subscribe(relatedObject?.rootObjectId, callback);
+            return () => instanceChanges?.unsubscribe(relatedObject?.rootObjectId, callback);
+        }
+    }, [instanceChanges, relatedObject]);
     const deleteRow = (id) => {
         setDialogType('delete');
         setSelectedRow(id);
@@ -368,24 +334,28 @@ const RepeatableField = (props) => {
     };
     const getValue = (relatedInstance, propertyId, propertyType) => {
         const value = get(relatedInstance, propertyId);
+        // If the property is not date-like then just return the
+        // value found at the given path.
+        if (!['date', 'date-time', 'time'].includes(propertyType)) {
+            return value;
+        }
         // If the date-like value is empty then there is no need to format.
         if (!value) {
             return value;
         }
+        // At this point it has been asserted that there is a value
+        // and since the property is date-like the value must be
+        // a string.
+        const stringValue = value;
         if (propertyType === 'date') {
-            return DateTime.fromISO(value).toLocaleString(DateTime.DATE_SHORT);
+            return DateTime.fromISO(stringValue).toLocaleString(DateTime.DATE_SHORT);
         }
         if (propertyType === 'date-time') {
-            return DateTime.fromISO(value).toLocaleString(DateTime.DATETIME_SHORT);
+            return DateTime.fromISO(stringValue).toLocaleString(DateTime.DATETIME_SHORT);
         }
         if (propertyType === 'time') {
-            return DateTime.fromISO(value).toLocaleString(DateTime.TIME_SIMPLE);
-        }
-        if (propertyType === 'criteria' && typeof value === 'object') {
-            const property = relatedObject?.properties?.find((p) => p.id === propertyId);
-            return getReadableQuery(value, criteriaObjects.find((o) => o.id === property?.objectId)?.properties ?? []);
+            return DateTime.fromISO(stringValue).toLocaleString(DateTime.TIME_SIMPLE);
         }
-        return value;
     };
     const columns = retrieveViewLayout();
     return loading ? (React.createElement(React.Fragment, null,

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

@@ -1,5 +1,4 @@
 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';
@@ -16,7 +15,7 @@ const Select = (props) => {
     const [isOtherFocused, setIsOtherFocused] = useState(false);
     const [value, setValue] = useState(defaultValue);
     const [inputValue, setInputValue] = useState(!selectOptions?.some((option) => (typeof option === 'string' && option === defaultValue) ||
-        option.value === defaultValue) && property.type !== 'array'
+        option.value === defaultValue)
         ? defaultValue
         : '');
     const [errorState, setErrorState] = useState();
@@ -32,7 +31,7 @@ const Select = (props) => {
     const handleChange = (event, selected) => {
         if (Array.isArray(selected)) {
             const newValues = selected.map((option) => option.value ?? option);
-            setValue(uniq(newValues));
+            setValue(newValues);
             onChange && onChange(property.id, newValues, property);
         }
         else {
@@ -145,7 +144,6 @@ const Select = (props) => {
                 filtered.push({
                     value: inputValue,
                     label: `Add "${inputValue}"`,
-                    isCustomValue: true,
                 });
             }
             return filtered;
@@ -153,16 +151,9 @@ const Select = (props) => {
             ? (option, value) => isOptionEqualToValue(option, value)
             : 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
+            : (option) => (typeof option === 'string' ? option : option.label), renderOption: renderOption
             ? (props, option, state) => renderOption(props, option, state)
-            : (props, option) => React.createElement("li", { ...props }, option.label ?? option), ListboxComponent: ListboxComponent, disableCloseOnSelect: disableCloseOnSelect, sx: {
+            : undefined, ListboxComponent: ListboxComponent, disableCloseOnSelect: disableCloseOnSelect, sx: {
             '& button.MuiButtonBase-root': {
                 visibility: 'visible',
             },

package/dist/published/index.d.ts

@@ -1,4 +1,4 @@
-export { ClickAwayListener, createTheme, darken, lighten, styled, Toolbar, useMediaQuery, useTheme, } from '@mui/material';
+export { ClickAwayListener, createTheme, darken, lighten, styled, Toolbar } 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, useMediaQuery, useTheme, } from '@mui/material';
+export { ClickAwayListener, createTheme, darken, lighten, styled, Toolbar } 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,81 +29,3 @@ 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,6 +1,5 @@
 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:
@@ -34,67 +33,3 @@ 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/index.d.ts

@@ -1,5 +1,5 @@
 import { useMediaQuery, useTheme } from '@mui/material';
 import UIThemeProvider from './UIThemeProvider';
-import { useResponsive, useWidgetSize, type WidgetSizeInfo } from './hooks';
-export { useMediaQuery, useResponsive, useTheme, useWidgetSize, type WidgetSizeInfo };
+import { useResponsive } from './hooks';
+export { useMediaQuery, useResponsive, useTheme };
 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, useWidgetSize } from './hooks';
-export { useMediaQuery, useResponsive, useTheme, useWidgetSize };
+import { useResponsive } from './hooks';
+export { useMediaQuery, useResponsive, useTheme };
 export default UIThemeProvider;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@evoke-platform/ui-components",
-    "version": "1.6.0-dev.6",
+    "version": "1.6.0-testing.0",
     "description": "",
     "main": "dist/published/index.js",
     "module": "dist/published/index.js",
@@ -128,7 +128,6 @@
         "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",

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

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

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

@@ -1,187 +0,0 @@
-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
-    });
-});