@evoke-platform/ui-components 1.9.0-testing.4 → 1.9.0-testing.5

package/dist/published/components/custom/FormV2/FormRenderer.js

@@ -2,7 +2,7 @@ import { useObject } from '@evoke-platform/context';
 import { isEmpty, isEqual } from 'lodash';
 import React, { useEffect, useMemo, useState } from 'react';
 import { useForm } from 'react-hook-form';
-import { useResponsive } from '../../../theme';
+import { useWidgetSize } from '../../../theme';
 import { Button, Skeleton, Typography } from '../../core';
 import { Box } from '../../layout';
 import ActionButtons from './components/ActionButtons';
@@ -19,8 +19,12 @@ function FormRenderer(props) {
     });
     const hasSections = entries.some((entry) => entry.type === 'sections');
     const isModal = !!document.querySelector('.MuiDialog-container');
-    const { isSm, isXs, smallerThan } = useResponsive();
-    const isSmallerThanMd = smallerThan('md');
+    const { ref: containerRef, breakpoints, isBelow, width, } = useWidgetSize({
+        scroll: false,
+        defaultWidth: 1200,
+    });
+    const { isXs, isSm } = breakpoints;
+    const isSmallerThanMd = isBelow('md');
     const objectStore = useObject(objectId);
     const [expandedSections, setExpandedSections] = useState([]);
     const [fetchedOptions, setFetchedOptions] = useState({});
@@ -101,7 +105,7 @@ function FormRenderer(props) {
         handleValidation(entries, register, getValues(), action?.parameters, instance);
     }, [action?.parameters, instance, entries, register, getValues]);
     if (parameters && (!actionId || action)) {
-        return (React.createElement(React.Fragment, null,
+        return (React.createElement(Box, { ref: containerRef },
             ((isSubmitted && !isEmpty(errors)) || (isSmallerThanMd && hasSections) || title) && (React.createElement(Box, { sx: {
                     paddingX: isSmallerThanMd ? 2 : 3,
                     paddingTop: '0px',
@@ -143,7 +147,7 @@ function FormRenderer(props) {
                                 fontWeight: 400,
                                 fontSize: '14px',
                             }, onClick: handleCollapseAll }, "Collapse all")))),
-                React.createElement(ValidationErrorDisplay, { formId: form.id, title: title, errors: errors, showSubmitError: isSubmitted }))),
+                React.createElement(ValidationErrorDisplay, { formId: form.id, title: title, errors: errors, showSubmitError: isSubmitted, isSmallerThanMd: isSmallerThanMd }))),
             React.createElement(FormContext.Provider, { value: {
                     fetchedOptions,
                     setFetchedOptions: updateFetchedOptions,
@@ -163,6 +167,7 @@ function FormRenderer(props) {
                     triggerFieldReset,
                     showSubmitError: isSubmitted,
                     associatedObject,
+                    width,
                 } },
                 React.createElement(Box, { sx: {
                         paddingX: isSm || isXs ? 2 : 3,

package/dist/published/components/custom/FormV2/components/AccordionSections.js

@@ -1,14 +1,18 @@
 import { ExpandMoreOutlined } from '@mui/icons-material';
 import { isEqual } from 'lodash';
 import React, { useEffect } from 'react';
-import { useFormContext } from '../../../../theme/hooks';
+import useWidgetSize, { useFormContext } from '../../../../theme/hooks';
 import { Accordion, AccordionDetails, AccordionSummary, Typography } from '../../../core';
 import { Box } from '../../../layout';
 import { RecursiveEntryRenderer } from './RecursiveEntryRenderer';
 import { getErrorCountForSection } from './utils';
 function AccordionSections(props) {
     const { entry } = props;
-    const { errors, expandedSections, setExpandedSections, expandAll, setExpandAll, showSubmitError } = useFormContext();
+    const { errors, expandedSections, setExpandedSections, expandAll, setExpandAll, showSubmitError, width } = useFormContext();
+    const { isAbove } = useWidgetSize({
+        scroll: false,
+        defaultWidth: width,
+    });
     const lastSection = entry.sections.length - 1;
     function collectNestedSections(entries = []) {
         const nestedSections = [];
@@ -32,7 +36,7 @@ function AccordionSections(props) {
             sectionList.forEach((section, index) => {
                 expandedSections.push({
                     label: section.label,
-                    expanded: expandAll ?? index === 0,
+                    expanded: expandAll ?? (index === 0 || isAbove('md')),
                     id: section?.id,
                     isNested: isNested,
                 });

package/dist/published/components/custom/FormV2/components/ActionButtons.js

@@ -1,15 +1,19 @@
 import { isEmpty, omit } from 'lodash';
 import React, { useContext, useState } from 'react';
-import { useResponsive } from '../../../../theme';
+import { useWidgetSize } from '../../../../theme';
 import { Button, LoadingButton } from '../../../core';
 import { Box } from '../../../layout';
 import { FormContext } from './FormContext';
 import { entryIsVisible, getEntryId, getNestedParameterIds, isAddressProperty, scrollIntoViewWithOffset, } from './utils';
 function ActionButtons(props) {
     const { onSubmit, submitButtonLabel, actionType, handleSubmit, onReset, unregister, isModal, entries, setValue, formId, } = props;
-    const { isXs } = useResponsive();
     const [isSubmitLoading, setIsSubmitLoading] = useState(false);
-    const { getValues, instance, errors } = useContext(FormContext);
+    const { getValues, instance, errors, width } = useContext(FormContext);
+    const { breakpoints } = useWidgetSize({
+        scroll: false,
+        defaultWidth: width,
+    });
+    const { isXs } = breakpoints;
     const unregisterHiddenFields = (entriesToCheck) => {
         entriesToCheck.forEach((entry) => {
             if (entry.type === 'sections' || entry.type === 'columns') {

package/dist/published/components/custom/FormV2/components/FormContext.d.ts

@@ -24,6 +24,7 @@ type FormContextType = {
         instanceId?: string;
         propertyId?: string;
     };
+    width: number;
 };
 export declare const FormContext: import("react").Context<FormContextType>;
 export {};

package/dist/published/components/custom/FormV2/components/FormContext.js

@@ -14,4 +14,6 @@ export const FormContext = createContext({
     triggerFieldReset: false,
     handleChange: () => { },
     fieldHeight: 'medium',
+    // Default width 1200 to match common 'lg' render size and avoid style changes on first render
+    width: 1200,
 });

package/dist/published/components/custom/FormV2/components/FormFieldTypes/CollectionFiles/ActionDialog.js

@@ -61,7 +61,9 @@ export const ActionDialog = (props) => {
     const handleFormSave = async (data) => {
         return handleSubmit(action, data, instanceId);
     };
-    return (React.createElement(Dialog, { maxWidth: 'md', fullWidth: true, open: open, onClose: (e, reason) => reason !== 'backdropClick' && onClose() },
+    return (React.createElement(Dialog, { PaperProps: {
+            sx: { maxWidth: '950px', width: '100%' },
+        }, fullWidth: true, open: open, onClose: (e, reason) => reason !== 'backdropClick' && onClose() },
         React.createElement(DialogTitle, { sx: { ...styles.dialogTitle, borderBottom: action.type === 'delete' ? undefined : '1px solid #e9ecef' } },
             React.createElement(IconButton, { sx: styles.closeIcon, onClick: onClose },
                 React.createElement(Close, { fontSize: "small" })),

package/dist/published/components/custom/FormV2/components/FormFieldTypes/CollectionFiles/DocumentViewerCell.js

@@ -1,6 +1,8 @@
 import { useApiServices } from '@evoke-platform/context';
 import React, { useState } from 'react';
 import { AutorenewRounded, Close, FileWithExtension, LaunchRounded } from '../../../../../../icons';
+import { useWidgetSize } from '../../../../../../theme';
+import { useFormContext } from '../../../../../../theme/hooks';
 import { Button, Dialog, DialogContent, DialogTitle, IconButton, Menu, MenuItem, Typography, } from '../../../../../core';
 import { Grid } from '../../../../../layout';
 import { getPrefixedUrl } from '../../utils';
@@ -29,7 +31,13 @@ const DocumentView = (props) => {
                 } }, document?.name))));
 };
 export const DocumentViewerCell = (props) => {
-    const { instance, propertyId, setSnackbarError, smallerThanMd } = props;
+    const { instance, propertyId, setSnackbarError } = props;
+    const { width } = useFormContext();
+    const { isBelow } = useWidgetSize({
+        scroll: false,
+        defaultWidth: width,
+    });
+    const smallerThanMd = isBelow('md');
     const apiServices = useApiServices();
     const [anchorEl, setAnchorEl] = useState(null);
     const [isLoading, setIsLoading] = useState(false);

package/dist/published/components/custom/FormV2/components/FormFieldTypes/CollectionFiles/RepeatableField.js

@@ -4,8 +4,7 @@ import { DateTime } from 'luxon';
 import React, { useCallback, useEffect, useState } from 'react';
 import sift from 'sift';
 import { Edit, ExpandMoreOutlined, TrashCan } from '../../../../../../icons';
-import { useResponsive } from '../../../../../../theme';
-import { useFormContext } from '../../../../../../theme/hooks';
+import useWidgetSize, { useFormContext } from '../../../../../../theme/hooks';
 import { Accordion, AccordionDetails, AccordionSummary, Button, IconButton, Skeleton, Snackbar, Table, TableBody, TableCell, TableContainer, TableHead, TableRow, Tooltip, Typography, } from '../../../../../core';
 import { Box } from '../../../../../layout';
 import { getReadableQuery } from '../../../../CriteriaBuilder';
@@ -36,11 +35,14 @@ const styles = {
 };
 const RepeatableField = (props) => {
     const { fieldDefinition, canUpdateProperty, criteria, viewLayout, entry, createActionId, updateActionId, deleteActionId, } = props;
-    const { fetchedOptions, setFetchedOptions, instance } = useFormContext();
+    const { fetchedOptions, setFetchedOptions, instance, width } = useFormContext();
+    const { isBelow } = useWidgetSize({
+        scroll: false,
+        defaultWidth: width,
+    });
+    const smallerThanMd = isBelow('md');
     const { instanceChanges } = useNotification();
     const apiServices = useApiServices();
-    const { smallerThan } = useResponsive();
-    const smallerThanMd = smallerThan('md');
     const [reloadOnErrorTrigger, setReloadOnErrorTrigger] = useState(true);
     const [criteriaObjects, setCriteriaObjects] = useState([]);
     const [selectedRow, setSelectedRow] = useState();

package/dist/published/components/custom/FormV2/components/FormFieldTypes/relatedObjectFiles/ObjectPropertyInput.js

@@ -491,7 +491,9 @@ const ObjectPropertyInput = (props) => {
                     event.stopPropagation();
                     setOpenCreateDialog(true);
                 }, "aria-label": `Add` }, "Add")))),
-        openCreateDialog && (React.createElement(React.Fragment, null, nestedFieldsView ? (React.createElement(RelatedObjectInstance, { id: id, handleClose: handleClose, setSelectedInstance: setSelectedInstance, relatedObject: relatedObject, nestedFieldsView: nestedFieldsView, mode: mode, displayOption: displayOption, setOptions: setOptions, options: options, filter: updatedCriteria, layout: layout, formId: form?.id, actionId: createActionId, setSnackbarError: setSnackbarError, fieldDefinition: fieldDefinition })) : (React.createElement(Dialog, { fullWidth: true, maxWidth: "md", open: openCreateDialog, onClose: (e, reason) => reason !== 'backdropClick' && handleClose },
+        openCreateDialog && (React.createElement(React.Fragment, null, nestedFieldsView ? (React.createElement(RelatedObjectInstance, { id: id, handleClose: handleClose, setSelectedInstance: setSelectedInstance, relatedObject: relatedObject, nestedFieldsView: nestedFieldsView, mode: mode, displayOption: displayOption, setOptions: setOptions, options: options, filter: updatedCriteria, layout: layout, formId: form?.id, actionId: createActionId, setSnackbarError: setSnackbarError, fieldDefinition: fieldDefinition })) : (React.createElement(Dialog, { fullWidth: true, PaperProps: {
+                sx: { maxWidth: '950px', width: '100%' },
+            }, open: openCreateDialog, onClose: (e, reason) => reason !== 'backdropClick' && handleClose },
             React.createElement(DialogTitle, { sx: {
                     fontSize: '18px',
                     fontWeight: 700,

package/dist/published/components/custom/FormV2/components/RecursiveEntryRenderer.js

@@ -2,8 +2,7 @@ import { useApiServices, useAuthenticationContext, } from '@evoke-platform/conte
 import { WarningRounded } from '@mui/icons-material';
 import DOMPurify from 'dompurify';
 import React, { useEffect, useMemo } from 'react';
-import { useResponsive } from '../../../../theme';
-import { useFormContext } from '../../../../theme/hooks';
+import useWidgetSize, { useFormContext } from '../../../../theme/hooks';
 import { TextField, Typography } from '../../../core';
 import { Box } from '../../../layout';
 import FormField from '../../FormField';
@@ -38,13 +37,17 @@ function getFieldWrapperProps(fieldDefinition, entry, entryId, fieldValue, displ
 }
 export function RecursiveEntryRenderer(props) {
     const { entry, isDocument } = props;
-    const { fetchedOptions, setFetchedOptions, object, getValues, errors, instance, richTextEditor, parameters, handleChange, fieldHeight, triggerFieldReset, associatedObject, } = useFormContext();
+    const { fetchedOptions, setFetchedOptions, object, getValues, errors, instance, richTextEditor, parameters, handleChange, fieldHeight, triggerFieldReset, associatedObject, width, } = useFormContext();
     // If the entry is hidden, clear its value and any nested values, and skip rendering
     if (!entryIsVisible(entry, getValues(), instance)) {
         return null;
     }
-    const { isXs, smallerThan } = useResponsive();
-    const isSmallerThanMd = smallerThan('md');
+    const { isBelow, breakpoints } = useWidgetSize({
+        scroll: false,
+        defaultWidth: width,
+    });
+    const { isXs } = breakpoints;
+    const isSmallerThanMd = isBelow('md');
     const apiServices = useApiServices();
     const userAccount = useAuthenticationContext()?.account;
     const entryId = getEntryId(entry) || 'defaultId';
@@ -168,7 +171,12 @@ export function RecursiveEntryRenderer(props) {
         }
     }
     else if (entry.type === 'columns') {
-        return (React.createElement(Box, { sx: { display: 'flex', alignItems: 'flex-start', gap: '30px', flexDirection: isXs ? 'column' : 'row' } }, entry.columns.map((column, colIndex) => (
+        return (React.createElement(Box, { sx: {
+                display: 'flex',
+                alignItems: 'flex-start',
+                gap: '30px',
+                flexDirection: isXs ? 'column' : 'row',
+            } }, entry.columns.map((column, colIndex) => (
         // calculating the width like this rather than flex={column.width} to prevent collections from being too wide
         React.createElement(Box, { key: colIndex, sx: { width: isXs ? '100%' : `calc(${(column.width / 12) * 100}% - 15px)` } }, column.entries?.map((columnEntry, entryIndex) => {
             return (React.createElement(RecursiveEntryRenderer, { key: entryIndex + (columnEntry?.parameterId ?? ''), entry: columnEntry }));

package/dist/published/components/custom/FormV2/components/ValidationFiles/ValidationErrorDisplay.d.ts

@@ -5,6 +5,7 @@ export type ValidationErrorDisplayProps = {
     title?: string;
     errors?: FieldErrors;
     showSubmitError?: boolean;
+    isSmallerThanMd: boolean;
 };
 declare function ValidationErrorDisplay(props: ValidationErrorDisplayProps): React.JSX.Element | null;
 export default ValidationErrorDisplay;

package/dist/published/components/custom/FormV2/components/ValidationFiles/ValidationErrorDisplay.js

@@ -1,10 +1,8 @@
 import React from 'react';
-import { useResponsive } from '../../../../../theme';
 import { List, ListItem, Typography } from '../../../../core';
 import { Box } from '../../../../layout';
 function ValidationErrorDisplay(props) {
-    const { formId, title, errors, showSubmitError } = props;
-    const { isSm, isXs } = useResponsive();
+    const { formId, title, errors, showSubmitError, isSmallerThanMd } = props;
     function extractErrorMessages(errors) {
         const messages = [];
         for (const key in errors) {
@@ -31,8 +29,8 @@ function ValidationErrorDisplay(props) {
             border: '1px solid #721c24',
             padding: '8px 24px',
             borderRadius: '4px',
-            marginBottom: isSm || isXs ? 2 : 3,
-            marginTop: !title ? (isSm || isXs ? -2 : -3) : undefined,
+            marginBottom: isSmallerThanMd ? 2 : 3,
+            marginTop: !title ? (isSmallerThanMd ? -2 : -3) : undefined,
         } },
         React.createElement(Typography, { sx: { color: '#721c24', mt: '16px', mb: '8px' } }, "Please fix the following errors before submitting:"),
         React.createElement(List, { sx: {

package/dist/published/components/custom/FormV2/tests/FormRenderer.test.js

@@ -10,6 +10,12 @@ import { expect, it } from 'vitest';
 import FormRenderer from '../FormRenderer';
 import { accessibility508Object, createSpecialtyForm, jsonLogicDisplayTestSpecialtyForm, licenseObject, npLicense, npSpecialtyType1, npSpecialtyType2, rnLicense, rnSpecialtyType1, rnSpecialtyType2, simpleConditionDisplayTestSpecialtyForm, specialtyObject, specialtyTypeObject, UpdateAccessibilityFormOne, UpdateAccessibilityFormTwo, users, } from './test-data';
 expect.extend(matchers);
+// Mock ResizeObserver
+global.ResizeObserver = class ResizeObserver {
+    observe() { }
+    unobserve() { }
+    disconnect() { }
+};
 const removePoppers = () => {
     const portalSelectors = ['.MuiAutocomplete-popper'];
     portalSelectors.forEach((selector) => {
@@ -372,6 +378,9 @@ describe('Form component', () => {
             await user.tab();
             await user.tab();
             await user.keyboard('{Enter}');
+            await waitFor(() => {
+                expect(screen.getByText('+ Add New')).toBeInTheDocument();
+            });
             await user.keyboard('{ArrowUp}'); // Navigate to "Add New" option
             await user.keyboard('{Enter}');
             await waitFor(() => {

package/dist/published/components/custom/FormV2/tests/FormRendererContainer.test.js

@@ -10,6 +10,12 @@ import { expect, it } from 'vitest';
 import FormRendererContainer from '../FormRendererContainer';
 import { createSpecialtyForm, licenseObject, npLicense, npSpecialtyType1, npSpecialtyType2, rnLicense, rnSpecialtyType1, rnSpecialtyType2, specialtyObject, specialtyTypeObject, } from './test-data';
 expect.extend(matchers);
+// Mock ResizeObserver
+global.ResizeObserver = class ResizeObserver {
+    observe() { }
+    unobserve() { }
+    disconnect() { }
+};
 const removePoppers = () => {
     const portalSelectors = ['.MuiAutocomplete-popper'];
     portalSelectors.forEach((selector) => {

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

@@ -39,19 +39,19 @@ export interface WidgetSizeInfo {
     height: number;
     /** Widget size breakpoints */
     breakpoints: {
-        /** Extra small: width < 800px */
+        /** Extra small: width < sm threshold (default: < 600px) */
         isXs: boolean;
-        /** Small: 800px <= width < 1000px */
+        /** Small: sm <= width < md (default: 600px - 899px) */
         isSm: boolean;
-        /** Medium: 1000px <= width < 1200px */
+        /** Medium: md <= width < lg (default: 900px - 1199px) */
         isMd: boolean;
-        /** Large: 1200px <= width < 1400px */
+        /** Large: lg <= width < xl (default: 1200px - 1535px) */
         isLg: boolean;
-        /** Extra large: width >= 1400px */
+        /** Extra large: width >= xl (default: >= 1536px) */
         isXl: boolean;
-        /** Compact height: height < 300px */
+        /** Compact height: height < compact threshold (default: < 300px) */
         isCompact: boolean;
-        /** Tall height: height >= 600px */
+        /** Tall height: height >= tall threshold (default: >= 600px) */
         isTall: boolean;
     };
     /** Bounds information from react-use-measure */
@@ -74,9 +74,9 @@ export interface WidgetSizeInfo {
         y: number;
     };
     /** Check if widget is above a breakpoint */
-    isAbove: (breakpoint: 'xs' | 'sm' | 'md' | 'lg' | 'xl') => boolean;
+    isAbove: (breakpoint: Breakpoint) => boolean;
     /** Check if widget is below a breakpoint */
-    isBelow: (breakpoint: 'xs' | 'sm' | 'md' | 'lg' | 'xl') => boolean;
+    isBelow: (breakpoint: Breakpoint) => boolean;
 }
 /**
  * Custom hook that measures widget dimensions and provides responsive breakpoints
@@ -106,6 +106,23 @@ export declare const useWidgetSize: (options?: {
     scroll?: boolean;
     /** Resize containers to observe */
     resize?: boolean;
+    /** Initial width to assume the Ref is */
+    defaultWidth?: number;
+    /** Custom breakpoint thresholds (defaults to MUI theme breakpoints) */
+    breakpoints?: {
+        xs?: number;
+        sm?: number;
+        md?: number;
+        lg?: number;
+        xl?: number;
+    };
+    /** Height breakpoint thresholds */
+    heightBreakpoints?: {
+        /** Compact height threshold (default: 300) */
+        compact?: number;
+        /** Tall height threshold (default: 600) */
+        tall?: number;
+    };
 }) => WidgetSizeInfo;
 export default useWidgetSize;
 export declare function useFormContext(): {
@@ -130,4 +147,5 @@ export declare function useFormContext(): {
         instanceId?: string | undefined;
         propertyId?: string | undefined;
     } | undefined;
+    width: number;
 };

package/dist/published/theme/hooks.js

@@ -56,31 +56,35 @@ export function useResponsive() {
  * ```
  */
 export const useWidgetSize = (options) => {
+    const theme = useTheme();
     const [ref, bounds] = useMeasure({
         debounce: options?.debounce ?? 16,
         scroll: options?.scroll ?? true,
         offsetSize: true,
         ...options,
     });
-    const width = bounds.width || 0;
+    const width = bounds.width || options?.defaultWidth || 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
+    // Use custom breakpoints if provided, otherwise default to MUI theme breakpoints
     const breakpointThresholds = {
-        xs: 800,
-        sm: 1000,
-        md: 1200,
-        lg: 1400,
-        xl: Infinity,
+        xs: options?.breakpoints?.xs ?? theme.breakpoints.values.xs,
+        sm: options?.breakpoints?.sm ?? theme.breakpoints.values.sm,
+        md: options?.breakpoints?.md ?? theme.breakpoints.values.md,
+        lg: options?.breakpoints?.lg ?? theme.breakpoints.values.lg,
+        xl: options?.breakpoints?.xl ?? theme.breakpoints.values.xl,
+    };
+    const heightThresholds = {
+        compact: options?.heightBreakpoints?.compact ?? 300,
+        tall: options?.heightBreakpoints?.tall ?? 600,
+    };
+    const breakpoints = {
+        isXs: width < breakpointThresholds.sm,
+        isSm: width >= breakpointThresholds.sm && width < breakpointThresholds.md,
+        isMd: width >= breakpointThresholds.md && width < breakpointThresholds.lg,
+        isLg: width >= breakpointThresholds.lg && width < breakpointThresholds.xl,
+        isXl: width >= breakpointThresholds.xl,
+        isCompact: height < heightThresholds.compact,
+        isTall: height >= heightThresholds.tall,
     };
     // Utility functions for responsive checks
     const isAbove = (breakpoint) => {

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

@@ -46,8 +46,8 @@ describe('useWidgetSize', () => {
         expect(result.current.height).toBe(456);
     });
     describe('breakpoints', () => {
-        it('should set isXs for width < 800', () => {
-            setMockBounds({ width: 799, height: 100 });
+        it('should set isXs for width < 600', () => {
+            setMockBounds({ width: 599, height: 100 });
             const { result } = renderHook(() => useWidgetSize());
             expect(result.current.breakpoints.isXs).toBe(true);
             expect(result.current.breakpoints.isSm).toBe(false);
@@ -55,15 +55,15 @@ describe('useWidgetSize', () => {
             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 });
+        it('should set isSm for 600 <= width < 900', () => {
+            setMockBounds({ width: 600, 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 });
+            setMockBounds({ width: 899, height: 100 });
             result = renderHook(() => useWidgetSize()).result;
             expect(result.current.breakpoints.isXs).toBe(false);
             expect(result.current.breakpoints.isSm).toBe(true);
@@ -71,8 +71,8 @@ describe('useWidgetSize', () => {
             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 });
+        it('should set isMd for 900 <= width < 1200', () => {
+            setMockBounds({ width: 900, height: 100 });
             let { result } = renderHook(() => useWidgetSize());
             expect(result.current.breakpoints.isXs).toBe(false);
             expect(result.current.breakpoints.isSm).toBe(false);
@@ -87,7 +87,7 @@ describe('useWidgetSize', () => {
             expect(result.current.breakpoints.isLg).toBe(false);
             expect(result.current.breakpoints.isXl).toBe(false);
         });
-        it('should set isLg for 1200 <= width < 1400', () => {
+        it('should set isLg for 1200 <= width < 1536', () => {
             setMockBounds({ width: 1200, height: 100 });
             let { result } = renderHook(() => useWidgetSize());
             expect(result.current.breakpoints.isXs).toBe(false);
@@ -95,7 +95,7 @@ describe('useWidgetSize', () => {
             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 });
+            setMockBounds({ width: 1535, height: 100 });
             result = renderHook(() => useWidgetSize()).result;
             expect(result.current.breakpoints.isXs).toBe(false);
             expect(result.current.breakpoints.isSm).toBe(false);
@@ -103,8 +103,8 @@ describe('useWidgetSize', () => {
             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 });
+        it('should set isXl for width >= 1536', () => {
+            setMockBounds({ width: 1536, height: 100 });
             let { result } = renderHook(() => useWidgetSize());
             expect(result.current.breakpoints.isXs).toBe(false);
             expect(result.current.breakpoints.isSm).toBe(false);

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@evoke-platform/ui-components",
-    "version": "1.9.0-testing.4",
+    "version": "1.9.0-testing.5",
     "description": "",
     "main": "dist/published/index.js",
     "module": "dist/published/index.js",