@evoke-platform/ui-components 1.6.0-dev.1 → 1.6.0-dev.3

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 { useGridApiRef } from '@mui/x-data-grid';
+export { GridToolbarContainer, GridToolbarQuickFilter, 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 { useGridApiRef } from '@mui/x-data-grid';
+export { GridToolbarContainer, GridToolbarQuickFilter, 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,7 +17,32 @@ 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, ...rest, sx: {
+        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: {
                 border: 'none',
                 '& .MuiDataGrid-toolbarContainer': {
                     padding: '0',
@@ -64,32 +89,7 @@ const BuilderGrid = (props) => {
                 },
                 height: disablePagination && !loading ? 'auto' : 'calc(100vh - 240px)',
                 ...rest.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: {
+            } }))) : (React.createElement(React.Fragment, null, error ? (React.createElement(Box, { sx: {
             backgroundColor: '#fff',
             borderRadius: '6px',
             display: 'flex',

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.6.0-dev.1",
+    "version": "1.6.0-dev.3",
     "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",