update rgl to v2

Author: aferd

packages/module/package.json

@@ -33,7 +33,7 @@
     "@patternfly/react-core": "^6.3.1",
     "@patternfly/react-icons": "^6.3.1",
     "clsx": "^2.1.0",
-    "react-grid-layout": "^1.5.1"
+    "react-grid-layout": "^2.2.2"
   },
   "peerDependencies": {
     "react": "^18",
@@ -45,11 +45,10 @@
     "@babel/plugin-proposal-private-methods": "^7.18.6",
     "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
     "@patternfly/documentation-framework": "^6.24.2",
-    "@patternfly/patternfly": "^6.3.1",
+    "@patternfly/patternfly": "^6.5.0-prerelease.33",
     "@patternfly/patternfly-a11y": "^5.1.0",
     "@patternfly/react-code-editor": "^6.3.1",
     "@patternfly/react-table": "^6.3.1",
-    "@types/react-grid-layout": "^1.3.5",
     "monaco-editor": "^0.53.0",
     "nodemon": "^3.0.0",
     "react-monaco-editor": "^0.59.0",

packages/module/patternfly-docs/content/examples/basic.md

@@ -63,13 +63,30 @@ const widgetMapping: WidgetMapping = {
     defaults: { w: 2, h: 3, maxH: 6, minH: 2 },
     config: {
       title: 'My Widget',
-      icon: <MyIcon />
+      icon: <MyIcon />,
+      headerLink: {
+        title: 'View details',
+        href: '/details'
+      }
     },
     renderWidget: (id) => <MyWidgetContent />
   }
 };
 ```
 
+### Widget configuration options
+
+| Property | Type | Description |
+|----------|------|-------------|
+| `defaults.w` | `number` | Default width in grid columns |
+| `defaults.h` | `number` | Default height in grid rows |
+| `defaults.maxH` | `number` | Maximum height the widget can be resized to |
+| `defaults.minH` | `number` | Minimum height the widget can be resized to |
+| `config.title` | `string` | Widget title displayed in the header |
+| `config.icon` | `ReactNode` | Icon displayed next to the title |
+| `config.headerLink` | `{ title: string, href: string }` | Optional link displayed in the widget header |
+| `renderWidget` | `(id: string) => ReactNode` | Function that renders the widget content |
+
 ## Template configuration
 
 Define your initial layout using the `ExtendedTemplateConfig` type:
@@ -86,3 +103,29 @@ const initialTemplate: ExtendedTemplateConfig = {
 ```
 
 Each breakpoint (xl, lg, md, sm) should have its own layout configuration to ensure proper responsive behavior.
+
+### Layout item properties
+
+#### Required properties
+
+| Property | Type | Description |
+|----------|------|-------------|
+| `i` | `string` | Unique identifier in format `widgetType#uuid` (e.g., `'my-widget#1'`) |
+| `x` | `number` | X position in grid columns (0-indexed from left) |
+| `y` | `number` | Y position in grid rows (0-indexed from top) |
+| `w` | `number` | Width in grid columns |
+| `h` | `number` | Height in grid rows |
+| `widgetType` | `string` | Must match a key in `widgetMapping` |
+| `title` | `string` | Display title for this widget instance |
+
+#### Optional properties
+
+| Property | Type | Description |
+|----------|------|-------------|
+| `minW` | `number` | Minimum width during resize |
+| `maxW` | `number` | Maximum width during resize |
+| `minH` | `number` | Minimum height during resize |
+| `maxH` | `number` | Maximum height during resize |
+| `static` | `boolean` | If `true`, widget cannot be moved or resized |
+| `locked` | `boolean` | If `true`, widget is locked in place |
+| `config` | `WidgetConfiguration` | Override the widget's default config for this instance |

packages/module/src/WidgetLayout/GridLayout.tsx

@@ -1,8 +1,8 @@
 import 'react-grid-layout/css/styles.css';
 import './styles';
-import ReactGridLayout, { Layout, ReactGridLayoutProps } from 'react-grid-layout';
+import ReactGridLayout, { useContainerWidth, LayoutItem } from 'react-grid-layout';
 import GridTile, { SetWidgetAttribute } from './GridTile';
-import { useEffect, useMemo, useRef, useState } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 import { isWidgetType } from './utils';
 import React from 'react';
 import {
@@ -30,8 +30,8 @@ const createSerializableConfig = (config?: WidgetConfiguration) => {
 // SVG resize handle as inline data URI
 const resizeHandleSvg = 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTE2IDEuMTQyODZMMTQuODU3MSAwTDAgMTQuODU3MVYxNkgxLjE0Mjg2TDE2IDEuMTQyODZaIiBmaWxsPSIjRDJEMkQyIi8+Cjwvc3ZnPgo=';
 
-const getResizeHandle = (resizeHandleAxis: string, ref: React.Ref<HTMLDivElement>) => (
-    <div ref={ref} className={`react-resizable-handle react-resizable-handle-${resizeHandleAxis}`}>
+const getResizeHandle = (resizeHandleAxis: string, ref: React.Ref<HTMLElement>) => (
+    <div ref={ref as React.Ref<HTMLDivElement>} className={`react-resizable-handle react-resizable-handle-${resizeHandleAxis}`}>
       <img src={resizeHandleSvg} alt="Resize handle" />
     </div>
   );
@@ -57,6 +57,8 @@ export interface GridLayoutProps {
   onDrawerExpandChange?: (expanded: boolean) => void;
   /** Currently active widgets (for tracking) */
   onActiveWidgetsChange?: (widgetTypes: string[]) => void;
+  /** Widget type currently being dragged from drawer */
+  droppingWidgetType?: string;
 }
 
 const LayoutEmptyState = ({
@@ -100,35 +102,35 @@ const GridLayout = ({
   showEmptyState = true,
   onDrawerExpandChange,
   onActiveWidgetsChange,
+  droppingWidgetType,
 }: GridLayoutProps) => {
   const [isDragging, setIsDragging] = useState(false);
   const [isInitialRender, setIsInitialRender] = useState(true);
   const [layoutVariant, setLayoutVariant] = useState<Variants>('xl');
-  const [layoutWidth, setLayoutWidth] = useState<number>(1200);
-  const layoutRef = useRef<HTMLDivElement>(null);
+  
+  // Use v2 hook for container width measurement
+  const { width: layoutWidth, containerRef, mounted } = useContainerWidth();
 
-  const [currentDropInItem, setCurrentDropInItem] = useState<string | undefined>();
   const [internalTemplate, setInternalTemplate] = useState<ExtendedTemplateConfig>(template);
 
   // Sync external template changes to internal state
   useEffect(() => {
     setInternalTemplate(template);
   }, [template]);
 
-  const droppingItemTemplate: ReactGridLayoutProps['droppingItem'] = useMemo(() => {
-    if (currentDropInItem && isWidgetType(widgetMapping, currentDropInItem)) {
-      const widget = widgetMapping[currentDropInItem];
+  const droppingItemTemplate = useMemo(() => {
+    if (droppingWidgetType && isWidgetType(widgetMapping, droppingWidgetType)) {
+      const widget = widgetMapping[droppingWidgetType];
       if (!widget) {return undefined;}
       return {
         ...widget.defaults,
         i: droppingElemId,
-        widgetType: currentDropInItem,
-        title: 'New title',
-        config: createSerializableConfig(widget.config)
+        x: 0,
+        y: 0,
       };
     }
     return undefined;
-  }, [currentDropInItem, widgetMapping]);
+  }, [droppingWidgetType, widgetMapping]);
 
   const setWidgetAttribute: SetWidgetAttribute = (id, attributeName, value) => {
     const newTemplate = Object.entries(internalTemplate).reduce(
@@ -154,10 +156,11 @@ const GridLayout = ({
     onTemplateChange?.(newTemplate);
   };
 
-  const onDrop: ReactGridLayoutProps['onDrop'] = (_layout: ExtendedLayoutItem[], layoutItem: ExtendedLayoutItem, event: DragEvent) => {
-    const data = event.dataTransfer?.getData('text') || '';
+  const onDrop = (_layout: readonly LayoutItem[], layoutItem: LayoutItem | undefined, event: Event) => {
+    if (!layoutItem) return;
+    const dragEvent = event as DragEvent;
+    const data = dragEvent.dataTransfer?.getData('text') || '';
     if (isWidgetType(widgetMapping, data)) {
-      setCurrentDropInItem(undefined);
       const widget = widgetMapping[data];
       if (!widget) {return;}
       const newTemplate = Object.entries(internalTemplate).reduce((acc, [size, layout]) => {
@@ -193,76 +196,70 @@ const GridLayout = ({
       onTemplateChange?.(newTemplate);
       analytics?.('widget-layout.widget-add', { data });
     }
-    event.preventDefault();
+    dragEvent.preventDefault();
   };
 
-  const onLayoutChange = (currentLayout: Layout[]) => {
+  const onLayoutChange = (currentLayout: readonly LayoutItem[]) => {
     if (isInitialRender) {
       setIsInitialRender(false);
       const activeWidgets = activeLayout.map((item) => item.widgetType);
       onActiveWidgetsChange?.(activeWidgets);
       return;
     }
-    if (isLayoutLocked || currentDropInItem) {
+    if (isLayoutLocked || droppingWidgetType) {
       return;
     }
 
-    const newTemplate = extendLayout({ ...internalTemplate, [layoutVariant]: currentLayout });
+    // Create mutable copy of readonly layout for extendLayout
+    const newTemplate = extendLayout({ ...internalTemplate, [layoutVariant]: [...currentLayout] });
     const activeWidgets = activeLayout.map((item) => item.widgetType);
     onActiveWidgetsChange?.(activeWidgets);
 
     setInternalTemplate(newTemplate);
     onTemplateChange?.(newTemplate);
   };
 
+  // Update layout variant when container width changes
   useEffect(() => {
-    const currentWidth = layoutRef.current?.getBoundingClientRect().width ?? 1200;
-    const variant: Variants = getGridDimensions(currentWidth);
-    setLayoutVariant(variant);
-    setLayoutWidth(currentWidth);
-    
-    const observer = new ResizeObserver((entries) => {
-      if (!entries[0]) {return;}
-
-      const currentWidth = entries[0].contentRect.width;
-      const variant: Variants = getGridDimensions(currentWidth);
+    if (mounted && layoutWidth > 0) {
+      const variant: Variants = getGridDimensions(layoutWidth);
       setLayoutVariant(variant);
-      setLayoutWidth(currentWidth);
-    });
-    
-    if (layoutRef.current) {
-      observer.observe(layoutRef.current);
     }
-
-    return () => {
-      observer.disconnect();
-    };
-  }, []);
+  }, [layoutWidth, mounted]);
 
   const activeLayout = internalTemplate[layoutVariant] || [];
 
+  // Use default width before mount, actual width after
+  const effectiveWidth = mounted && layoutWidth > 0 ? layoutWidth : 1200;
+  
   return (
-    <div id="widget-layout-container" style={{ position: 'relative' }} ref={layoutRef}>
-      {activeLayout.length === 0 && !currentDropInItem && showEmptyState && (
+    <div id="widget-layout-container" style={{ position: 'relative' }} ref={containerRef}>
+      {activeLayout.length === 0 && !droppingWidgetType && showEmptyState && (
         emptyStateComponent || <LayoutEmptyState onDrawerExpandChange={onDrawerExpandChange} documentationLink={documentationLink} />
       )}
-      <ReactGridLayout
+      {mounted && <ReactGridLayout
         key={'grid-' + layoutVariant}
-        draggableHandle=".drag-handle"
         layout={internalTemplate[layoutVariant]}
-        cols={columns[layoutVariant]}
-        rowHeight={56}
-        width={layoutWidth}
-        isDraggable={!isLayoutLocked}
-        isResizable={!isLayoutLocked}
-        resizeHandle={getResizeHandle as unknown as ReactGridLayoutProps['resizeHandle']}
-        resizeHandles={['sw', 'nw', 'se', 'ne']}
+        width={effectiveWidth}
         droppingItem={droppingItemTemplate}
-        isDroppable={!isLayoutLocked}
+        gridConfig={{
+          cols: columns[layoutVariant],
+          rowHeight: 56,
+        }}
+        dragConfig={{
+          handle: '.drag-handle',
+          enabled: !isLayoutLocked,
+        }}
+        resizeConfig={{
+          enabled: !isLayoutLocked,
+          handles: ['s', 'w', 'e', 'n', 'sw', 'nw', 'se', 'ne'],
+          handleComponent: getResizeHandle,
+        }}
+        dropConfig={{
+          enabled: !isLayoutLocked,
+        }}
         onDrop={onDrop}
-        onDragStart={() => setCurrentDropInItem(undefined)}
-        useCSSTransforms
-        verticalCompact
+        onDragStart={() => {}}
         onLayoutChange={onLayoutChange}
       >
         {activeLayout
@@ -279,7 +276,7 @@ const GridLayout = ({
                   isDragging={isDragging}
                   setIsDragging={setIsDragging}
                   widgetType={widgetType}
-                  widgetConfig={{ ...layoutItem, colWidth: layoutWidth / columns[layoutVariant], config }}
+                  widgetConfig={{ ...layoutItem, colWidth: effectiveWidth / columns[layoutVariant], config }}
                   setWidgetAttribute={setWidgetAttribute}
                   removeWidget={removeWidget}
                   analytics={analytics}
@@ -290,7 +287,7 @@ const GridLayout = ({
             );
           })
           .filter((layoutItem) => layoutItem !== null)}
-      </ReactGridLayout>
+      </ReactGridLayout>}
     </div>
   );
 };

packages/module/src/WidgetLayout/GridTile.tsx

@@ -21,7 +21,7 @@ import {
 import { CompressIcon, EllipsisVIcon, ExpandIcon, GripVerticalIcon, LockIcon, MinusCircleIcon, UnlockIcon } from '@patternfly/react-icons';
 import React, { useMemo, useState } from 'react';
 import clsx from 'clsx';
-import { Layout } from 'react-grid-layout';
+import type { LayoutItem } from 'react-grid-layout';
 import { ExtendedLayoutItem, WidgetConfiguration, AnalyticsTracker } from './types';
 
 export type SetWidgetAttribute = <T extends string | number | boolean>(id: string, attributeName: keyof ExtendedLayoutItem, value: T) => void;
@@ -32,7 +32,7 @@ export type GridTileProps = React.PropsWithChildren<{
   setIsDragging: (isDragging: boolean) => void;
   isDragging: boolean;
   setWidgetAttribute: SetWidgetAttribute;
-  widgetConfig: Layout & {
+  widgetConfig: LayoutItem & {
     colWidth: number;
     locked?: boolean;
     config?: WidgetConfiguration;

packages/module/src/WidgetLayout/WidgetDrawer.tsx

@@ -28,6 +28,10 @@ export type WidgetDrawerProps = React.PropsWithChildren<{
   onOpenChange?: (isOpen: boolean) => void;
   /** Custom instruction text */
   instructionText?: string;
+  /** Callback when widget drag starts from drawer */
+  onWidgetDragStart?: (widgetType: string) => void;
+  /** Callback when widget drag ends */
+  onWidgetDragEnd?: () => void;
 }>;
 
 const WidgetWrapper = ({ widgetType, config, onDragStart, onDragEnd }: {
@@ -91,6 +95,8 @@ const WidgetDrawer = ({
   isOpen: controlledIsOpen,
   onOpenChange,
   instructionText,
+  onWidgetDragStart,
+  onWidgetDragEnd,
 }: WidgetDrawerProps) => {
   const [internalIsOpen, setInternalIsOpen] = useState(false);
 
@@ -142,8 +148,8 @@ const WidgetDrawer = ({
               <WidgetWrapper
                 widgetType={type}
                 config={widget.config}
-                onDragStart={() => {}}
-                onDragEnd={() => {}}
+                onDragStart={(widgetType) => onWidgetDragStart?.(widgetType)}
+                onDragEnd={() => onWidgetDragEnd?.()}
               />
             </GalleryItem>
           ))}

packages/module/src/WidgetLayout/WidgetLayout.tsx

@@ -44,6 +44,7 @@ const WidgetLayout = ({
   const [template, setTemplate] = useState<ExtendedTemplateConfig>(initialTemplate);
   const [drawerOpen, setDrawerOpen] = useState(initialDrawerOpen);
   const [currentlyUsedWidgets, setCurrentlyUsedWidgets] = useState<string[]>([]);
+  const [droppingWidgetType, setDroppingWidgetType] = useState<string | undefined>();
 
   const handleTemplateChange = (newTemplate: ExtendedTemplateConfig) => {
     setTemplate(newTemplate);
@@ -70,6 +71,7 @@ const WidgetLayout = ({
       showEmptyState={showEmptyState}
       onDrawerExpandChange={handleDrawerExpandChange}
       onActiveWidgetsChange={handleActiveWidgetsChange}
+      droppingWidgetType={droppingWidgetType}
     />
   );
 
@@ -84,6 +86,8 @@ const WidgetLayout = ({
       isOpen={drawerOpen}
       onOpenChange={setDrawerOpen}
       instructionText={drawerInstructionText}
+      onWidgetDragStart={setDroppingWidgetType}
+      onWidgetDragEnd={() => setDroppingWidgetType(undefined)}
     >
       {gridLayout}
     </WidgetDrawer>

packages/module/src/WidgetLayout/types.ts

@@ -1,10 +1,10 @@
-import { Layout } from 'react-grid-layout';
+import type { LayoutItem } from 'react-grid-layout';
 
 export const widgetIdSeparator = '#';
 
 export type Variants = 'sm' | 'md' | 'lg' | 'xl';
 
-export type LayoutWithTitle = Layout & { title: string };
+export type LayoutWithTitle = LayoutItem & { title: string };
 
 export type TemplateConfig = {
   [k in Variants]: LayoutWithTitle[];

packages/module/tsconfig.json

@@ -45,7 +45,7 @@
     "noPropertyAccessFromIndexSignature": true,  /* Require undeclared properties from index signatures to use element accesses. */
 
     /* Module Resolution Options */
-    "moduleResolution": "node" /* Specify module resolution strategy: 'node' (Node.js) or 'classic' (TypeScript pre-1.6). */,
+    "moduleResolution": "bundler" /* Updated to 'bundler' for react-grid-layout v2 ES module subpath exports */,
     // "baseUrl": "./",                             /* Base directory to resolve non-absolute module names. */
     // "paths": {},                                 /* A series of entries which re-map imports to lookup locations relative to the 'baseUrl'. */
     // "rootDirs": [],                              /* List of root folders whose combined content represents the structure of the project at runtime. */