@m4l/components 0.1.77 → 0.1.78

package/components/GridLayout/{index.4ba3767a.js → index.da6fd387.js}

@@ -1,6 +1,7 @@
 import React__default, { useRef, useEffect, useState, useCallback, useMemo } from "react";
 import { d as deepEqual } from "../../node_modules.d73a220d.js";
 import clsx from "clsx";
+import { i as isEqualLayout } from "./Responsive/index.0905a698.js";
 import { jsx, Fragment, jsxs } from "react/jsx-runtime";
 import { D as DraggableCore_1 } from "../../react-draggable.7abb5d0a.js";
 import { R as Resizable, r as react_resizable_css } from "../../react-resizable.ba08699a.js";
@@ -37,11 +38,11 @@ function cloneLayoutItem(layoutItem, layoutItemReplaceProps) {
     isBounded: layoutItem.isBounded,
     freeMove: layoutItem.freeMove,
     colapsed: layoutItem.colapsed,
+    visible: layoutItem.visible,
     ...layoutItemReplaceProps
   };
 }
 function cloneLayout(layout, layoutItemReplaceProps) {
-  console.log("cloneLayout");
   const newLayout = Array(layout.length);
   for (let i = 0, len = layout.length; i < len; i++) {
     newLayout[i] = cloneLayoutItem(layout[i], layoutItemReplaceProps);
@@ -108,7 +109,6 @@ function compactItem(compareWith, l, compactType, cols, fullLayout, colapsedHeig
 function compact(layout, compactType, cols, colapsedHeight, allowOverlap) {
   const layoutToCompact = layout.filter((l) => !l.freeMove);
   const layoutFreeMov = layout.filter((l) => l?.freeMove);
-  console.log(`Compacting`, layoutToCompact, layoutFreeMov);
   const compareWith = getStatics(layoutToCompact);
   const sorted = sortLayoutItems(layoutToCompact, compactType);
   const out = Array(layoutToCompact.length);
@@ -392,20 +392,7 @@ function calcGridItemPosition(positionParams, x, y, w, h, maximize, state) {
     if (maximize === "maximize_me") {
       out.width = positionParams.containerWidth - 2 * containerPadding[0] - 2;
       out.height = positionParams.containerHeight - 2 * containerPadding[1] - 2;
-      console.log(
-        "calcGridItemPosition top,left",
-        out,
-        maximize,
-        positionParams.containerHeight
-      );
     } else {
-      console.log(
-        "calcGridItemPosition top,left",
-        out,
-        maximize,
-        containerMargin,
-        positionParams.containerHeight
-      );
       out.width = calcGridItemWHPx(w, colWidth, containerMargin[0]);
       out.height = calcGridItemWHPx(h, rowHeight, containerMargin[1]);
     }
@@ -484,7 +471,8 @@ function GridItem(props) {
     freeMove,
     maximize = "none",
     colapsed,
-    colapsedHeight = 1.5
+    colapsedHeight = 1.5,
+    visible = true
   } = props;
   const refProps = useRef({
     cols,
@@ -547,9 +535,7 @@ function GridItem(props) {
     };
   }, []);
   useEffect(() => {
-    console.log("useEffect Grid Item****", i);
     return () => {
-      console.log(`*** useEffect Grid Item: ${i} [cleanUP] **** type:${type}`);
     };
   }, []);
   const createStyle = (pos2) => {
@@ -766,7 +752,7 @@ function GridItem(props) {
   }, []);
   const positionParms = getPositionParams(containerWidth, containerHeight);
   const pos = calcGridItemPosition(positionParms, x, y, w, getH(h, colapsedHeight, colapsed), maximize, currentState);
-  const classNameFinal = clsx("react-grid-item", className, {
+  const classNameFinal = clsx("M4LGridItem", className, {
     type,
     static: props.static,
     resizing: Boolean(currentState.resizing),
@@ -774,8 +760,11 @@ function GridItem(props) {
     "react-maximize-me": maximize === "maximize_me",
     "react-maximize-other": maximize === "maximize_other",
     "react-colapsed": colapsed,
-    "react-popover": freeMove,
+    M4LGridItemPopup: freeMove,
     "react-draggable-dragging": Boolean(currentState.dragging),
+    M4LColapsed: colapsed,
+    M4LResizeHide: colapsed,
+    M4LInvisible: !visible,
     cssTransforms: useCSSTransforms
   });
   const styleFinal = {
@@ -797,7 +786,6 @@ function GridItem(props) {
     children: memoLayouItemRender
   });
   const gridItem = mixinDraggable(mixinResizable(baseGridItem, pos, getPositionParams()));
-  console.log(`Render Grid Item: ${i} type:${type} ==> {x,y,w,h}:{${x},${y},${w},${getH(h, colapsedHeight, colapsed)}} - containerHeight:${containerHeight}`);
   return /* @__PURE__ */ jsx(Fragment, {
     children: gridItem
   });
@@ -813,45 +801,45 @@ const GridLayoutRoot = styled("div")`
     transition: height 200ms ease;
     border: 1px dashed gray; //TODO:Para borrar
 
-    .react-grid-item {
+    .M4LGridItem {
         transition: all 200ms ease;
         transition-property: left, top;
     }
-    .react-grid-item img {
+    .M4LGridItem img {
         pointer-events: none;
         user-select: none;
     }
-    .react-grid-item.cssTransforms {
+    .M4LGridItem.cssTransforms {
         transition-property: transform;
     }
-    .react-grid-item.react-maximize-other {
+    .M4LGridItem.react-maximize-other {
         display: none;
     }
 
-    .react-grid-item.react-popover {
+    .M4LGridItem.M4LGridItemPopup {
         z-index: 1;
         will-change: width, height;
     }
-    .react-grid-item.resizing {
-        z-index: 2;
+    .M4LGridItem.resizing {
+        z-index: 2000;
         will-change: width, height;
     }
 
-    .react-grid-item.react-draggable-dragging {
+    .M4LGridItem.react-draggable-dragging {
         transition: none;
-        z-index: 4;
+        z-index: 4000;
         will-change: transform;
     }
 
-    .react-grid-item.dropping {
+    .M4LGridItem.dropping {
         visibility: hidden;
     }
 
-    .react-grid-item.react-grid-placeholder {
+    .M4LGridItem.react-grid-placeholder {
         background: green;
         opacity: 0.2;
         transition-duration: 100ms;
-        z-index: 3;
+        z-index: 300000;
         -webkit-user-select: none;
         -moz-user-select: none;
         -ms-user-select: none;
@@ -859,13 +847,13 @@ const GridLayoutRoot = styled("div")`
         user-select: none;
     }
 
-    .react-grid-item > .react-resizable-handle {
+    .M4LGridItem > .react-resizable-handle {
         position: absolute;
         width: 20px;
         height: 20px;
     }
 
-    .react-grid-item > .react-resizable-handle::after {
+    .M4LGridItem > .react-resizable-handle::after {
         content: '';
         position: absolute;
         right: 3px;
@@ -880,63 +868,68 @@ const GridLayoutRoot = styled("div")`
         display: none;
     }
 
-    .react-grid-item > .react-resizable-handle.react-resizable-handle-sw {
+    .M4LGridItem > .react-resizable-handle.react-resizable-handle-sw {
         bottom: 0;
         left: 0;
         cursor: sw-resize;
         transform: rotate(90deg);
     }
-    .react-grid-item > .react-resizable-handle.react-resizable-handle-se {
+    .M4LGridItem > .react-resizable-handle.react-resizable-handle-se {
         bottom: 0;
         right: 0;
         cursor: se-resize;
     }
-    .react-grid-item > .react-resizable-handle.react-resizable-handle-nw {
+    .M4LGridItem > .react-resizable-handle.react-resizable-handle-nw {
         top: 0;
         left: 0;
         cursor: nw-resize;
         transform: rotate(180deg);
     }
-    .react-grid-item > .react-resizable-handle.react-resizable-handle-ne {
+    .M4LGridItem > .react-resizable-handle.react-resizable-handle-ne {
         top: 0;
         right: 0;
         cursor: ne-resize;
         transform: rotate(270deg);
     }
-    .react-grid-item > .react-resizable-handle.react-resizable-handle-w,
-    .react-grid-item > .react-resizable-handle.react-resizable-handle-e {
+    .M4LGridItem > .react-resizable-handle.react-resizable-handle-w,
+    .M4LGridItem > .react-resizable-handle.react-resizable-handle-e {
         top: 50%;
         margin-top: -10px;
         cursor: ew-resize;
     }
-    .react-grid-item > .react-resizable-handle.react-resizable-handle-w {
+    .M4LGridItem > .react-resizable-handle.react-resizable-handle-w {
         left: 0;
         transform: rotate(135deg);
     }
-    .react-grid-item > .react-resizable-handle.react-resizable-handle-e {
+    .M4LGridItem > .react-resizable-handle.react-resizable-handle-e {
         right: 0;
         transform: rotate(315deg);
     }
-    .react-grid-item > .react-resizable-handle.react-resizable-handle-n,
-    .react-grid-item > .react-resizable-handle.react-resizable-handle-s {
+    .M4LGridItem > .react-resizable-handle.react-resizable-handle-n,
+    .M4LGridItem > .react-resizable-handle.react-resizable-handle-s {
         left: 50%;
         margin-left: -10px;
         cursor: ns-resize;
     }
-    .react-grid-item > .react-resizable-handle.react-resizable-handle-n {
+    .M4LGridItem > .react-resizable-handle.react-resizable-handle-n {
         top: 0;
         transform: rotate(225deg);
     }
-    .react-grid-item > .react-resizable-handle.react-resizable-handle-s {
+    .M4LGridItem > .react-resizable-handle.react-resizable-handle-s {
         bottom: 0;
         transform: rotate(45deg);
     }
-    .react-grid-item.react-maximize-me > .react-resizable-handle {
+    .M4LGridItem.react-maximize-me > .react-resizable-handle,
+    .M4LGridItem.M4LResizeHide > .react-resizable-handle {
         display: none;
     }
+    .M4LGridItem.M4LInvisible {
+        display: none;
+    }
+
     ${react_resizable_css}
 `;
-const layoutClassName = "react-grid-layout";
+const layoutClassName = "M4LGridLayout";
 function GridLayout(props) {
   const {
     innerRef,
@@ -978,6 +971,10 @@ function GridLayout(props) {
     mounted: false
   });
   const [finalLayoutRender, setFinalLayoutRender] = useState(layout);
+  const [zIndexes, setzIndexes] = useState(() => {
+    return layout.filter((li) => li.freeMove).map((lmap) => lmap.i);
+  });
+  const refZindexes = useRef(zIndexes);
   const refState = useRef({
     layout,
     mounted: false,
@@ -991,10 +988,22 @@ function GridLayout(props) {
     });
   }, []);
   useEffect(() => {
-    if (!deepEqual(finalLayoutRender, layout)) {
-      console.debug("****useEffect cambio de layout****", layout);
-      refState.current.layout = layout;
-      setFinalLayoutRender(layout);
+    if (!isEqualLayout(finalLayoutRender, layout)) {
+      console.debug("****useEffect GridLayout cambio de layout****", layout);
+      const newLayout = cloneLayout(layout);
+      const newzIndexes = [...zIndexes];
+      for (let index = 0; index < newLayout.length; index++) {
+        const li = newLayout[index];
+        if (li.freeMove && newzIndexes.indexOf(li.i) === -1) {
+          newzIndexes.push(li.i);
+        }
+      }
+      refState.current.layout = newLayout;
+      setFinalLayoutRender(newLayout);
+      if (newzIndexes.length !== zIndexes.length) {
+        setzIndexes(newzIndexes);
+        refZindexes.current = newzIndexes;
+      }
     } else {
       console.debug("****useEffect cambio de layout sin cambios****");
     }
@@ -1004,7 +1013,6 @@ function GridLayout(props) {
       return;
     const nbRow = bottom(finalLayoutRender, colapsedHeight);
     const containerPaddingY = containerPadding ? containerPadding[1] : containerMargin[1];
-    console.log("containerHeight", nbRow, containerPaddingY, containerMargin[1], rowHeight);
     return nbRow * rowHeight + (nbRow - 1) * containerMargin[1] + containerPaddingY * 2 + "px";
   };
   const localOnDragStart = useCallback((i, _x, _y, gridDragEvent) => {
@@ -1023,6 +1031,7 @@ function GridLayout(props) {
       oldDragItem: cloneLayoutItem(l),
       oldLayout: [...layout2]
     };
+    console.log("localOnDragStart");
     return onDragStart(layout2, l, l, void 0, e, node);
   }, []);
   const onLayoutMaybeChanged = useCallback((newLayout, oldLayout) => {
@@ -1031,7 +1040,7 @@ function GridLayout(props) {
       oldLayout = refState.current.layout;
     }
     setFinalLayoutRender(newLayout);
-    if (!deepEqual(oldLayout, newLayout)) {
+    if (!isEqualLayout(oldLayout, newLayout)) {
       onLayoutChange(newLayout);
     }
   }, []);
@@ -1061,15 +1070,11 @@ function GridLayout(props) {
       if (!l.freeMove) {
         newLayout = moveElement(layout2, l, x, y, isUserAction, preventCollision, compactType, cols, colapsedHeight, allowOverlap);
       } else {
-        newLayout = cloneLayout(layout2);
-        console.log("localOnDrag", l.i, l.freeMove, x, y);
-        const nl = getLayoutItem(newLayout, i);
+        l.x = x;
+        l.y = y;
         newPlaceholder.x = x;
         newPlaceholder.y = y;
-        if (nl) {
-          nl.x = x;
-          nl.y = y;
-        }
+        newLayout = cloneLayout(layout2);
       }
       onDrag(newLayout, oldDragItem, l, newPlaceholder, e, node);
       const finalLayout = allowOverlap || l.freeMove ? newLayout : compact(newLayout, compactType, cols, colapsedHeight, allowOverlap);
@@ -1078,12 +1083,15 @@ function GridLayout(props) {
         layout: finalLayout,
         activeDrag: newPlaceholder
       };
-      console.log(`GridLayout localOnDrag i:${i} placeHolder:{${newPlaceholder.x},${newPlaceholder.y},${newPlaceholder.w},${newPlaceholder.h}}`);
       setCurrentState((prev) => ({
         ...prev,
         activeDrag: newPlaceholder
       }));
       setFinalLayoutRender([...finalLayout]);
+      if (gridDragEvent.e.type !== "touchmove") {
+        gridDragEvent.e.preventDefault();
+      }
+      gridDragEvent.e.stopPropagation();
     } catch (error) {
       console.warn("GridLayout error capturado");
     }
@@ -1107,16 +1115,13 @@ function GridLayout(props) {
     if (!l.freeMove) {
       newLayout = moveElement(layout2, l, x, y, isUserAction, preventCollision, compactType, cols, colapsedHeight, allowOverlap);
     } else {
+      l.x = x;
+      l.y = y;
       newLayout = cloneLayout(layout2);
       const nl = getLayoutItem(newLayout, i);
       if (nl) {
         nl.x = x;
         nl.y = y;
-        const index = newLayout.indexOf(nl);
-        if (index !== -1 && index !== newLayout.length - 1) {
-          newLayout.splice(index, 1);
-          newLayout.push(nl);
-        }
       }
     }
     onDragStop(layout2, oldDragItem, l, void 0, e, node);
@@ -1125,7 +1130,6 @@ function GridLayout(props) {
       ...prev,
       activeDrag: void 0
     }));
-    console.log(`GridLayout localOnDragStop i:${i}`, finalLayout);
     onLayoutMaybeChanged(finalLayout, oldLayout);
     refState.current = {
       ...refState.current,
@@ -1134,6 +1138,9 @@ function GridLayout(props) {
       oldLayout: void 0,
       activeDrag: void 0
     };
+    console.log("localOnDragStop");
+    e.preventDefault();
+    e.stopPropagation();
   }, []);
   const localOnResizeStart = useCallback((i, _w, _h, {
     e,
@@ -1160,7 +1167,6 @@ function GridLayout(props) {
       layout: layout2,
       oldResizeItem
     } = refState.current;
-    console.log("GridLayout localOnResize 1");
     let newLayout;
     let l;
     if (!oldResizeItem?.freeMove) {
@@ -1205,7 +1211,6 @@ function GridLayout(props) {
     }
     if (!l)
       return;
-    console.log(`GridLayout localOnResize i:${l.i} {x,y,w,h}:{${l.x},${l.y},${l.w},${l.h}}`);
     const newPlaceholder = {
       w: l.w,
       h: l.h,
@@ -1228,7 +1233,6 @@ function GridLayout(props) {
       }));
       onResize(newLayout, oldResizeItem, l, newPlaceholder, e, node);
     } catch (error) {
-      console.log("GridLayout localOnResize capturado");
     }
   }, []);
   const localOnResizeStop = useCallback((i, _w, _h, {
@@ -1244,7 +1248,6 @@ function GridLayout(props) {
     if (l) {
       onResizeStop(layout2, oldResizeItem, l, void 0, e, node);
     }
-    console.log("GridLayout localOnResizeStop 1");
     const finalLayout = allowOverlap || l?.freeMove ? layout2 : compact(layout2, compactType, cols, colapsedHeight, allowOverlap);
     if (l && l?.freeMove) {
       const index = finalLayout.indexOf(l);
@@ -1260,36 +1263,29 @@ function GridLayout(props) {
       oldLayout: void 0,
       activeDrag: void 0
     };
-    console.log("GridLayout localOnResizeStop 2");
     setCurrentState((prev) => ({
       ...prev,
       activeDrag: void 0
     }));
-    console.log("GridLayout localOnResizeStop 3");
     onLayoutMaybeChanged(finalLayout, oldLayout);
-    console.log("GridLayout localOnResizeStop 4");
   }, []);
   const localFreeMoveOnClick = useCallback((i) => {
     const {
       layout: layout2
     } = refState.current;
-    let l = getLayoutItem(layout2, i);
+    const index = refZindexes.current.indexOf(i);
+    const l = getLayoutItem(layout2, i);
+    console.log("localFreeMoveOnClick", index, l?.freeMove);
     if (l && l?.freeMove) {
-      const index = layout2.indexOf(l);
-      if (index !== -1 && index !== layout2.length - 1) {
-        const newLayout = cloneLayout(layout2);
-        console.debug("GridLalocalFreeMoveOnClick");
-        l = getLayoutItem(newLayout, i);
-        if (l) {
-          newLayout.splice(index, 1);
-          newLayout.push(l);
-          refState.current = {
-            ...refState.current,
-            layout: newLayout
-          };
-          setFinalLayoutRender(newLayout);
-          onLayoutChange(newLayout);
+      console.log("localFreeMoveOnClick", index, refZindexes.current.length);
+      if (index !== refZindexes.current.length - 1 || index === -1) {
+        const newIndexes = [...refZindexes.current];
+        if (index !== -1) {
+          newIndexes.splice(index, 1);
         }
+        newIndexes.push(i);
+        refZindexes.current = newIndexes;
+        setzIndexes(newIndexes);
       }
     }
   }, []);
@@ -1337,6 +1333,17 @@ function GridLayout(props) {
     const resizeHandlesOptions = l.resizeHandles || resizeHandles;
     const bounded = draggable && isBounded && l.isBounded !== false;
     const mximize = maximizeId ? maximizeId === l.i ? "maximize_me" : "maximize_other" : "none";
+    let zIndex = void 0;
+    let style2;
+    if (l.freeMove) {
+      zIndex = zIndexes.indexOf(l.i);
+      if (zIndex !== -1) {
+        zIndex = zIndex + 1;
+        style2 = {
+          zIndex
+        };
+      }
+    }
     return /* @__PURE__ */ jsx(MemonizedGridItem, {
       type: "layoutItem",
       layoutItemRender: LayoutItemRender,
@@ -1375,10 +1382,13 @@ function GridLayout(props) {
       resizeHandles: resizeHandlesOptions,
       resizeHandle,
       maximize: mximize,
+      freeMove: l.freeMove,
       colapsed: l.colapsed,
-      colapsedHeight
+      visible: l.visible,
+      colapsedHeight,
+      style: style2
     }, l.i);
-  }, [width, height, cols, containerMargin, containerPadding, maxRows, rowHeight, draggableCancel, draggableHandle, isDraggable, isResizable, isBounded, useCSSTransforms, transformScale, resizeHandles, resizeHandle, maximizeId]);
+  }, [width, height, cols, containerMargin, containerPadding, maxRows, rowHeight, draggableCancel, draggableHandle, isDraggable, isResizable, isBounded, useCSSTransforms, transformScale, resizeHandles, resizeHandle, maximizeId, zIndexes]);
   const mergedStyle = {
     height: containerHeight(),
     ...style

package/components/GridLayout/subcomponents/GridItem/index.d.ts

@@ -17,6 +17,7 @@ export declare type RefProps = {
     rowHeight: number;
     maxRows: number;
     colapsed?: boolean;
+    visible?: boolean;
 };
 /**
  * An individual item within a ReactGridLayout.

package/components/GridLayout/subcomponents/GridItem/types.d.ts

@@ -60,6 +60,7 @@ export declare type GridItemProps = {
     i: string;
     maximize: Maximize;
     colapsed?: boolean;
+    visible?: boolean;
     resizeHandles?: ResizeHandle[];
     /**
      * Defines custom component for resize handle
@@ -73,4 +74,5 @@ export declare type GridItemProps = {
     onResizeStop?: GridItemCallback<GridResizeEvent>;
     onFreeMoveClick?: (i: string) => void;
     freeMove?: boolean;
+    zIndex?: number;
 };

package/components/GridLayout/subcomponents/Responsive/responsiveUtils.d.ts

@@ -29,7 +29,7 @@ export declare function getColsFromBreakpoint(breakpoint: Breakpoint, cols: Brea
  *   vertically.
  * @return {Array}             New layout.
  */
-export declare function findOrGenerateResponsiveLayout(layouts: ResponsiveLayout<Breakpoint>, breakpoints: Breakpoints<Breakpoint>, breakpoint: Breakpoint, lastBreakpoint: Breakpoint, cols: number, compactType: CompactType, brekpointsCols: BreakpointCols, colapsedHeight: number, colapsedItems?: Record<string, boolean>): Layout;
+export declare function findOrGenerateResponsiveLayout(layouts: ResponsiveLayout<Breakpoint>, breakpoints: Breakpoints<Breakpoint>, breakpoint: Breakpoint, lastBreakpoint: Breakpoint, cols: number, compactType: CompactType, brekpointsCols: BreakpointCols, colapsedHeight: number): Layout;
 /**
  * Given breakpoints, return an array of breakpoints sorted by width. This is usually
  * e.g. ['xxs', 'xs', 'sm', ...]
@@ -51,11 +51,14 @@ export declare function getIndentationValue(param: ResponsiveMargin, breakpoint:
  * @param layouts
  * @param layoutItem
  */
-export declare function addLayoutItemToBreakPointIfNoExists(layouts: Layouts, breakpoint: string, layoutItem: LayoutItem, cols: BreakpointCols, margin: ResponsiveMargin, containerPadding: ResponsiveMargin, rowHeight: number, containerHeight?: number): void;
+export declare function addLayoutItemToBreakPointIfNoExists(layouts: Layouts, breakpoint: string, layoutItem: LayoutItem, cols: BreakpointCols, margin: ResponsiveMargin, containerPadding: ResponsiveMargin, rowHeight: number, containerHeight?: number, currentBreakpoint?: Breakpoint): void;
 /**
  * Modifica el layout y le arega el item a todos los breakpoints
  * @param layouts
  * @param layoutItem
  */
-export declare function addLayoutItemToBreakPoints(layouts: Layouts, layoutItem: LayoutItem, cols: BreakpointCols, margin: ResponsiveMargin, containerPadding: ResponsiveMargin, rowHeight: number, containerHeight?: number): Layouts;
+export declare function addLayoutItemToBreakPoints(layouts: Layouts, layoutItem: LayoutItem, cols: BreakpointCols, margin: ResponsiveMargin, containerPadding: ResponsiveMargin, rowHeight: number, containerHeight?: number, currentBreakpoint?: Breakpoint): Layouts;
 export declare function cloneLayouts(layouts: Layouts, layoutItemReplaceProps?: Partial<Exclude<LayoutItem, 'i'>>): Layouts;
+export declare function isEqualLayoutItem(layoutA: LayoutItem, layoutB: LayoutItem): boolean;
+export declare function isEqualLayout(layoutA: Layout, layoutB: Layout): boolean;
+export declare function isEqualLayouts(layoutsA: Layouts, layoutsB: Layouts): boolean;

package/components/GridLayout/subcomponents/Responsive/types.d.ts

@@ -31,7 +31,6 @@ export declare type RefResponsiveState = {
     layouts: LayoutsNotReadonly;
     breakpoint: Breakpoint;
     breakpoints: Breakpoints<Breakpoint>;
-    colapsedItems?: Record<string, boolean>;
     width: number;
     height: number;
 };
@@ -63,9 +62,8 @@ export declare type ResponsiveReactGridLayoutProps = {
     height: number;
     containerMargin?: ResponsiveMargin;
     containerPadding?: ResponsiveMargin;
-    colapsedItems?: Record<string, boolean>;
     onBreakpointChange?: OnBreakpointChange;
     onLayoutChange?: OnLayoutChangeCallback;
     onContainerChange?: OnContainerChange;
 } & Omit<GridLayoutProps, 'cols' | 'margin' | 'containerPadding' | 'onLayoutChange' | 'layout'>;
-export declare type generateInitialStateProps = Pick<ResponsiveReactGridLayoutProps, 'width' | 'height' | 'breakpoint' | 'breakpoints' | 'cols' | 'compactType' | 'layouts' | 'containerMargin' | 'containerPadding' | 'colapsedHeight' | 'colapsedItems'>;
+export declare type generateInitialStateProps = Pick<ResponsiveReactGridLayoutProps, 'width' | 'height' | 'breakpoint' | 'breakpoints' | 'cols' | 'compactType' | 'layouts' | 'containerMargin' | 'containerPadding' | 'colapsedHeight'>;

package/components/HelperText/{index.ef31df1f.js → index.a019742c.js}

@@ -1,12 +1,12 @@
 import { styled, generateUtilityClasses, generateUtilityClass } from "@mui/material";
 import "react";
 import "@m4l/core";
-import "../Icon/index.ecb63e65.js";
+import "../Icon/index.9fcd1476.js";
 import "clsx";
 import { jsx } from "react/jsx-runtime";
-import "../mui_extended/IconButton/index.fc5b7c2d.js";
+import "../mui_extended/IconButton/index.12f1a3c3.js";
 import "@m4l/graphics";
-import "../mui_extended/Accordion/index.12b1339a.js";
+import "../mui_extended/Accordion/index.9877f7bf.js";
 import { T as Typography } from "../mui_extended/Typography/index.443590d6.js";
 import "../mui_extended/Avatar/index.75e6ed57.js";
 import "react-router-dom";
@@ -15,10 +15,10 @@ import "../mui_extended/Button/index.4288f9fc.js";
 import "../mui_extended/Badge/index.8c2b8b66.js";
 import "../Image/index.c18ebf5a.js";
 import "@mui/lab";
+import "../mui_extended/MenuActions/index.43a2e1ae.js";
 import "../mui_extended/Popover/index.9f35d0eb.js";
-import "../mui_extended/MenuActions/index.f5b1c022.js";
-import "../mui_extended/Pager/index.435af0df.js";
-import "../mui_extended/Tab/index.9e2f6e34.js";
+import "../mui_extended/Pager/index.2f6d6d7d.js";
+import "../mui_extended/Tab/index.7c82e43d.js";
 import "../mui_extended/Tooltip/index.5a795dcd.js";
 import { unstable_composeClasses } from "@mui/base";
 const HelperTextRoot = styled("div")(({

package/components/Icon/{index.ecb63e65.js → index.9fcd1476.js}

@@ -3,7 +3,7 @@ import { styled, generateUtilityClasses, generateUtilityClass, Skeleton } from "
 import clsx from "clsx";
 import { jsx } from "react/jsx-runtime";
 import { useEnvironment } from "@m4l/core";
-import { u as useSideBar, g as getNameDataTestId$1 } from "../SideBar/index.c5ce0bad.js";
+import { u as useSideBar, g as getNameDataTestId$1 } from "../SideBar/index.2f497e6c.js";
 import { T as TEST_PROP_ID } from "../../test/constants_no_mock.86c553a9.js";
 import { unstable_composeClasses } from "@mui/base";
 const IconRoot = styled("div")(({

package/components/LanguagePopover/{index.0023d069.js → index.98b63dcb.js}

@@ -3,12 +3,12 @@ import { styled, generateUtilityClasses, generateUtilityClass, Stack, MenuItem }
 import { I as Image } from "../Image/index.c18ebf5a.js";
 import { useLocales } from "@m4l/graphics";
 import { useEnvironment, useNetwork } from "@m4l/core";
-import "../Icon/index.ecb63e65.js";
+import "../Icon/index.9fcd1476.js";
 import { T as TEST_PROP_ID } from "../../test/constants_no_mock.86c553a9.js";
 import "clsx";
 import { jsxs, jsx } from "react/jsx-runtime";
-import "../mui_extended/IconButton/index.fc5b7c2d.js";
-import "../mui_extended/Accordion/index.12b1339a.js";
+import "../mui_extended/IconButton/index.12f1a3c3.js";
+import "../mui_extended/Accordion/index.9877f7bf.js";
 import "../mui_extended/Typography/index.443590d6.js";
 import "../mui_extended/Avatar/index.75e6ed57.js";
 import "react-router-dom";
@@ -17,10 +17,10 @@ import { I as ImageButton } from "../mui_extended/Button/index.4288f9fc.js";
 import { C as CircularProgress } from "../mui_extended/CircularProgress/index.ad569afd.js";
 import "../mui_extended/Badge/index.8c2b8b66.js";
 import "@mui/lab";
+import "../mui_extended/MenuActions/index.43a2e1ae.js";
 import { P as Popover } from "../mui_extended/Popover/index.9f35d0eb.js";
-import "../mui_extended/MenuActions/index.f5b1c022.js";
-import "../mui_extended/Pager/index.435af0df.js";
-import "../mui_extended/Tab/index.9e2f6e34.js";
+import "../mui_extended/Pager/index.2f6d6d7d.js";
+import "../mui_extended/Tab/index.7c82e43d.js";
 import "../mui_extended/Tooltip/index.5a795dcd.js";
 import { unstable_composeClasses } from "@mui/base";
 const LanguagePopoverRoot = styled("div")(({

package/components/ModalDialog/{index.d880e685.js → index.d9937d46.js}

@@ -1,14 +1,14 @@
 import { useTheme, Dialog, Paper } from "@mui/material";
 import { c as cjs } from "../../react-draggable.7abb5d0a.js";
-import { u as useModal } from "../../hooks/useModal/index.de522a10.js";
+import { u as useModal } from "../../hooks/useModal/index.8e85f7ae.js";
 import { R as ResizeableWindow } from "../Resizeable/index.9a9c79a4.js";
 import { useResponsiveDesktop } from "@m4l/graphics";
-import { I as Icon } from "../Icon/index.ecb63e65.js";
+import { I as Icon } from "../Icon/index.9fcd1476.js";
 import { useEnvironment } from "@m4l/core";
 import { I as ICONS } from "../areas/icons.8266ccc8.js";
-import { m as modalUtilityClasses } from "../modal/index.a0978193.js";
+import { m as modalUtilityClasses } from "../modal/index.00efea85.js";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { g as getCommonActionsDictionary } from "../CommonActions/components/Actions/index.3eba9d91.js";
+import { g as getCommonActionsDictionary } from "../CommonActions/components/Actions/index.52125041.js";
 const DragabblePaperComponent = (props) => {
   return /* @__PURE__ */ jsx(cjs.exports, {
     handle: ".m4l_draggable_handle",