feat: adding custom breakpoint interface

Author: Jakub007d

packages/module/src/WidgetLayout/GridLayout.tsx

@@ -60,8 +60,12 @@ export interface GridLayoutProps {
   onActiveWidgetsChange?: (widgetTypes: string[]) => void;
   /** Widget type currently being dragged from drawer */
   droppingWidgetType?: string;
-  /** Resize configuration options */
+  /** Resize configuration overrides */
   resizeWidgetConfig?: Partial<ResizeConfig>;
+  /** Custom breakpoints for responsive layout (container width thresholds in px) */
+  customBreakpoints?: Record<Variants, number>;
+  /** Custom column counts per breakpoint variant */
+  customColumns?: Record<Variants, number>;
 }
 
 const LayoutEmptyState = ({
@@ -107,7 +111,10 @@ const GridLayout = ({
   onActiveWidgetsChange,
   droppingWidgetType,
   resizeWidgetConfig,
+  customBreakpoints,
+  customColumns,
 }: GridLayoutProps) => {
+  const activeColumns = customColumns ?? columns;
   const [isDragging, setIsDragging] = useState(false);
   const [isInitialRender, setIsInitialRender] = useState(true);
   const [layoutVariant, setLayoutVariant] = useState<Variants>('xl');
@@ -172,8 +179,8 @@ const GridLayout = ({
           ...layoutItem,
           ...widget.defaults,
           // make sure the configuration is valid for all layout sizes
-          w: size === layoutVariant ? layoutItem.w : Math.min(widget.defaults.w, columns[size as Variants]),
-          x: size === layoutVariant ? layoutItem.x : Math.min(layoutItem.x, columns[size as Variants]),
+          w: size === layoutVariant ? layoutItem.w : Math.min(widget.defaults.w, activeColumns[size as Variants]),
+          x: size === layoutVariant ? layoutItem.x : Math.min(layoutItem.x, activeColumns[size as Variants]),
           widgetType: data,
           i: getWidgetIdentifier(data),
           title: 'New title',
@@ -226,7 +233,7 @@ const GridLayout = ({
   // Update layout variant when container width changes
   useEffect(() => {
     if (mounted && layoutWidth > 0) {
-      const variant: Variants = getGridDimensions(layoutWidth);
+      const variant: Variants = getGridDimensions(layoutWidth, customBreakpoints);
       setLayoutVariant(variant);
     }
   }, [layoutWidth, mounted]);
@@ -247,7 +254,7 @@ const GridLayout = ({
         width={effectiveWidth}
         droppingItem={droppingItemTemplate}
         gridConfig={{
-          cols: columns[layoutVariant],
+          cols: activeColumns[layoutVariant],
           rowHeight: 56,
         }}
         dragConfig={{
@@ -283,7 +290,7 @@ const GridLayout = ({
                   widgetType={widgetType}
                   widgetConfig={{
                     ...layoutItem,
-                    colWidth: effectiveWidth / columns[layoutVariant],
+                    colWidth: effectiveWidth / activeColumns[layoutVariant],
                     config,
                     maxH: layoutItem.maxH ?? widget.defaults.maxH,
                     minH: layoutItem.minH ?? widget.defaults.minH,

packages/module/src/WidgetLayout/utils.ts

@@ -52,14 +52,15 @@ export const extendLayout = (extendedTemplateConfig: ExtendedTemplateConfig): Ex
 /**
  * Get grid dimensions based on container width
  */
-export function getGridDimensions(currentWidth: number): Variants {
-  if (currentWidth >= breakpoints.xl) {
+export function getGridDimensions(currentWidth: number, customBreakpoints?: Record<Variants, number>): Variants {
+  const bp = customBreakpoints ?? breakpoints;
+  if (currentWidth >= bp.xl) {
     return 'xl';
   }
-  if (currentWidth >= breakpoints.lg) {
+  if (currentWidth >= bp.lg) {
     return 'lg';
   }
-  if (currentWidth >= breakpoints.md) {
+  if (currentWidth >= bp.md) {
     return 'md';
   }
   return 'sm';