@m4l/components 0.1.77 → 0.1.78

package/components/DynamicFilter/subcomponents/InnerForHooks/index.d.ts

@@ -1,7 +1,6 @@
 /// <reference types="react" />
-import { InnerForHooksProps } from './types';
 /**
  * @description InnerForHooks es una estrategia de mover el componente a nivel interno para poder acceder a los hooks que acceden al contexto DynamicFilterProvider
  * @returns Componente DynamicFilter
  */
-export declare const InnerForHooks: (props: InnerForHooksProps) => import("react").JSX.Element;
+export declare const InnerForHooks: () => import("react").JSX.Element;

package/components/DynamicFilter/tests/contants.d.ts

@@ -1,6 +1,5 @@
 import { Field } from '../types';
-export declare const DYNAMICFILTER_TEST_ID = "M4LDynamicFilter";
-export declare const PREFIX_TEST_ATTRIBUTE = "data-test";
-export declare const TEST_PROP_FIELDS: string;
+export declare const DYNAMICFILTER_PROP_DATA = "m4l-dynamic-filter";
+export declare const TEST_PROPS_DATA = "data-testing";
 export declare const TEST_FIELDS: Field[];
 export declare const INITIAL_APPLYED_FILTERS_EMPTY: never[];

package/components/GridLayout/Responsive/{index.a12a8cec.js → index.0905a698.js}

@@ -1,4 +1,4 @@
-import { c as cloneLayoutItem, a as cloneLayout, b as compact, d as correctBounds, G as GridLayout, n as noop } from "../index.4ba3767a.js";
+import { c as cloneLayoutItem, a as cloneLayout, b as compact, d as correctBounds, G as GridLayout, n as noop } from "../index.da6fd387.js";
 import { useState, useRef, useEffect, useCallback } from "react";
 import { useFirstRender } from "@m4l/graphics";
 import { d as deepEqual } from "../../../node_modules.d73a220d.js";
@@ -21,12 +21,11 @@ function getColsFromBreakpoint(breakpoint, cols) {
   }
   return cols[breakpoint];
 }
-function findOrGenerateResponsiveLayout(layouts, breakpoints, breakpoint, lastBreakpoint, cols, compactType, brekpointsCols, colapsedHeight, colapsedItems) {
+function findOrGenerateResponsiveLayout(layouts, breakpoints, breakpoint, lastBreakpoint, cols, compactType, brekpointsCols, colapsedHeight) {
   let layout = layouts[breakpoint];
   const breakpointsSorted = sortBreakpoints(breakpoints);
   const indexBreakointInit = breakpointsSorted.indexOf(breakpoint);
   let compareBreakpoint;
-  console.log("findOrGenerateResponsiveLayout start", layout);
   if (!layout) {
     if (lastBreakpoint !== breakpoint && layouts[lastBreakpoint]) {
       compareBreakpoint = lastBreakpoint;
@@ -35,27 +34,20 @@ function findOrGenerateResponsiveLayout(layouts, breakpoints, breakpoint, lastBr
         ...breakpointsSorted.splice(indexBreakointInit),
         ...breakpointsSorted.reverse()
       ];
-      console.log("findOrGenerateResponsiveLayout  rotatedBreakpoints ", rotatedBreakpoints);
       for (let i = 0, len = rotatedBreakpoints.length; i < len; i++) {
         const b = rotatedBreakpoints[i];
         if (layouts[b]) {
-          console.log("findOrGenerateResponsiveLayout above I*:", i, b);
           compareBreakpoint = b;
           break;
         }
       }
     }
-    console.log("findOrGenerateResponsiveLayout  compareBreakpoint ", compareBreakpoint);
     if (compareBreakpoint) {
       layout = [];
       for (let i = 0, len = layouts[compareBreakpoint].length; i < len; i++) {
         const li = cloneLayoutItem(layouts[compareBreakpoint][i]);
         if (brekpointsCols[compareBreakpoint]) {
           const newW = Math.round(li.w * cols / brekpointsCols[compareBreakpoint]);
-          console.log(
-            `findOrGenerateResponsiveLayout  li:${li.i}, actual: ${li.w} -> new: ${newW} `,
-            compareBreakpoint
-          );
           li.w = newW;
         }
         layout.push(li);
@@ -67,23 +59,13 @@ function findOrGenerateResponsiveLayout(layouts, breakpoints, breakpoint, lastBr
   } else {
     layout = cloneLayout(layout);
   }
-  console.log("findOrGenerateResponsiveLayout layout filtrado:", layout);
   layout = cloneLayout(layout);
-  for (let index = 0; index < layout.length; index++) {
-    const element = layout[index];
-    element.colapsed = false;
-    if (colapsedItems && colapsedItems[element.i]) {
-      element.colapsed = true;
-    }
-  }
-  console.log("findOrGenerateResponsiveLayout layout clonado:", layout);
   const ret = compact(
     correctBounds(layout, { cols }, colapsedHeight),
     compactType,
     cols,
     colapsedHeight
   );
-  console.log("findOrGenerateResponsiveLayout layout ret **:", ret);
   return ret;
 }
 function sortBreakpoints(breakpoints) {
@@ -97,7 +79,7 @@ function getIndentationValue(param, breakpoint) {
     return [0, 0];
   return Array.isArray(param) ? param : param[breakpoint];
 }
-function addLayoutItemToBreakPointIfNoExists(layouts, breakpoint, layoutItem, cols, margin, containerPadding, rowHeight, containerHeight) {
+function addLayoutItemToBreakPointIfNoExists(layouts, breakpoint, layoutItem, cols, margin, containerPadding, rowHeight, containerHeight, currentBreakpoint) {
   if (!layouts[breakpoint])
     return;
   if (layouts[breakpoint].findIndex((l) => l.i === layoutItem.i) === -1) {
@@ -108,15 +90,21 @@ function addLayoutItemToBreakPointIfNoExists(layouts, breakpoint, layoutItem, co
       l.y = Math.round(heigthUnits / 4);
       l.w = Math.round(cols[breakpoint] / 2);
       l.h = heigthUnits / 2;
+      if (breakpoint === "xxs") {
+        l.visible = false;
+        for (let index = 0; index < layouts[breakpoint].length; index++) {
+          if (layouts[breakpoint][index].freeMove) {
+            layouts[breakpoint][index].visible = false;
+          }
+        }
+        if (currentBreakpoint === "xxs") {
+          l.visible = true;
+        }
+      }
     } else {
       l.w = cols[breakpoint];
       l.h = Math.round(heigthUnits * 0.8);
     }
-    if (breakpoint === "xxs") {
-      if (l.freeMove) {
-        l.visible = false;
-      }
-    }
     if (l.freeMove) {
       layouts[breakpoint].push(l);
     } else {
@@ -124,7 +112,7 @@ function addLayoutItemToBreakPointIfNoExists(layouts, breakpoint, layoutItem, co
     }
   }
 }
-function addLayoutItemToBreakPoints(layouts, layoutItem, cols, margin, containerPadding, rowHeight, containerHeight) {
+function addLayoutItemToBreakPoints(layouts, layoutItem, cols, margin, containerPadding, rowHeight, containerHeight, currentBreakpoint) {
   const newLayouts = {};
   for (const key in layouts) {
     const layoutBreakpoint = cloneLayout(layouts[key]);
@@ -137,19 +125,53 @@ function addLayoutItemToBreakPoints(layouts, layoutItem, cols, margin, container
       margin,
       containerPadding,
       rowHeight,
-      containerHeight
+      containerHeight,
+      currentBreakpoint
     );
   }
   return newLayouts;
 }
 function cloneLayouts(layouts, layoutItemReplaceProps) {
-  console.log("cloneLayout");
   const newLayouts = {};
   for (const breakPoint in layouts) {
     newLayouts[breakPoint] = cloneLayout(layouts[breakPoint], layoutItemReplaceProps);
   }
   return newLayouts;
 }
+function isEqualLayoutItem(layoutA, layoutB) {
+  if (layoutA.i !== layoutB.i) {
+    return false;
+  } else if (layoutA.x !== layoutB.x || layoutA.y !== layoutB.y || layoutA.w !== layoutB.w || layoutA.h !== layoutB.h || layoutA.colapsed !== layoutB.colapsed || layoutA.visible !== layoutB.visible || layoutA.freeMove !== layoutB.freeMove) {
+    return false;
+  }
+  return true;
+}
+function isEqualLayout(layoutA, layoutB) {
+  if (layoutA.length !== layoutB.length) {
+    return false;
+  }
+  for (let index = 0; index < layoutA.length; index++) {
+    if (!isEqualLayoutItem(layoutA[index], layoutB[index])) {
+      return false;
+    }
+  }
+  return true;
+}
+function isEqualLayouts(layoutsA, layoutsB) {
+  if (Object.keys(layoutsA).length !== Object.keys(layoutsB).length) {
+    return false;
+  }
+  for (const breakPoint in layoutsA) {
+    if (layoutsB[breakPoint]) {
+      if (!isEqualLayout(layoutsA[breakPoint], layoutsB[breakPoint])) {
+        return false;
+      }
+    } else {
+      return false;
+    }
+  }
+  return true;
+}
 function generateInitialState(props) {
   const {
     width,
@@ -160,7 +182,6 @@ function generateInitialState(props) {
     layouts: defaultLayouts = {},
     cols,
     compactType = null,
-    colapsedItems,
     colapsedHeight = 2
   } = props;
   const newBreakpoint = breakpoint || getBreakpointFromWidth(breakpoints, width);
@@ -168,7 +189,7 @@ function generateInitialState(props) {
   let fireOnLoadLayoutChange = true;
   const initialLayout = findOrGenerateResponsiveLayout(defaultLayouts, breakpoints, newBreakpoint, newBreakpoint, colNo, compactType, {
     [newBreakpoint]: colNo
-  }, colapsedHeight, colapsedItems);
+  }, colapsedHeight);
   if (defaultLayouts[newBreakpoint]) {
     if (deepEqual(defaultLayouts[newBreakpoint], initialLayout)) {
       fireOnLoadLayoutChange = false;
@@ -182,7 +203,6 @@ function generateInitialState(props) {
     contaierPadding: getIndentationValue(containerPadding, newBreakpoint),
     fireOnLoadLayoutChange
   };
-  console.log("generateInitialState", ret, initialLayout);
   return ret;
 }
 function Responsive(props) {
@@ -212,7 +232,6 @@ function Responsive(props) {
     onLayoutChange = noop,
     onContainerChange = noop,
     layoutItemRender,
-    colapsedItems,
     colapsedHeight = 2,
     ...other
   } = props;
@@ -224,13 +243,11 @@ function Responsive(props) {
     },
     breakpoint: currentState.breakpoint,
     breakpoints,
-    colapsedItems,
     width,
     height
   });
   const isFirstRender = useFirstRender([width, height, layouts]);
   useEffect(() => {
-    console.log("useEffect componente", currentState.fireOnLoadLayoutChange);
     onContainerChange({
       containerWidth: refLayouts.current.width,
       containerHeight: refLayouts.current.height,
@@ -261,8 +278,7 @@ function Responsive(props) {
     };
     let newContainerMargin = currentState.contaierMargin;
     let newContainerPadding = currentState.contaierPadding;
-    console.debug("useEffect responsive newLayouts es igual:", deepEqual(layouts, refLayouts.current.layouts), refLayouts.current.layouts);
-    if (newBreakpoint !== currentState.breakpoint || newCols !== currentState.cols || breakpoints !== refLayouts.current.breakpoints || colapsedItems !== refLayouts.current.colapsedItems || !deepEqual(layouts, refLayouts.current.layouts)) {
+    if (newBreakpoint !== currentState.breakpoint || newCols !== currentState.cols || breakpoints !== refLayouts.current.breakpoints || !isEqualLayouts(layouts, refLayouts.current.layouts)) {
       console.debug("useEffect responsive con cambio de algo", newBreakpoint, lastBreakpoint);
       newContainerMargin = getIndentationValue(containerMargin, newBreakpoint);
       newContainerPadding = getIndentationValue(containerPadding, newBreakpoint);
@@ -270,7 +286,7 @@ function Responsive(props) {
         console.error("useEffect casi imposible", lastBreakpoint, newLayouts);
         newLayouts[lastBreakpoint] = cloneLayout(currentState.layout);
       }
-      const layout = findOrGenerateResponsiveLayout(newLayouts, breakpoints, newBreakpoint, lastBreakpoint, newCols, compactType, cols, colapsedHeight, colapsedItems);
+      const layout = findOrGenerateResponsiveLayout(newLayouts, breakpoints, newBreakpoint, lastBreakpoint, newCols, compactType, cols, colapsedHeight);
       newLayouts[newBreakpoint] = layout;
       if (newBreakpoint !== currentState.breakpoint) {
         onBreakpointChange(newBreakpoint, newCols, width, height);
@@ -278,7 +294,6 @@ function Responsive(props) {
       refLayouts.current.layouts = newLayouts;
       refLayouts.current.breakpoint = newBreakpoint;
       refLayouts.current.breakpoints = breakpoints;
-      refLayouts.current.colapsedItems = colapsedItems;
       console.debug("useEffect responsive****", layout);
       setCurrentState({
         breakpoint: newBreakpoint,
@@ -296,9 +311,11 @@ function Responsive(props) {
       breakpoint: newBreakpoint,
       cols: newCols
     });
-  }, [width, height, layouts, breakpoint, breakpoints, colapsedItems]);
+  }, [width, height, layouts, breakpoint, breakpoints]);
+  useEffect(() => {
+    onLayoutChange(currentState.layout, refLayouts.current.layouts);
+  }, [currentState.layout]);
   const localOnLayoutChange = useCallback((newlayout) => {
-    console.log("localOnLayoutChange layouts antes de iniciar", refLayouts.current.layouts, newlayout);
     try {
       refLayouts.current.layouts[refLayouts.current.breakpoint] = cloneLayout(newlayout);
     } catch (error) {
@@ -312,7 +329,6 @@ function Responsive(props) {
       ...refLayouts.current.layouts
     });
   }, [onLayoutChange]);
-  console.log("Render ResponsiveReactGridLayout: ", layouts, currentState, width, height);
   return /* @__PURE__ */ jsx(GridLayout, {
     width,
     height,
@@ -331,5 +347,7 @@ export {
   Responsive as R,
   addLayoutItemToBreakPointIfNoExists as a,
   addLayoutItemToBreakPoints as b,
-  cloneLayouts as c
+  isEqualLayouts as c,
+  cloneLayouts as d,
+  isEqualLayout as i
 };

package/components/GridLayout/WidthProvider/{index.8ff65909.js → index.9a26dfe4.js}

@@ -4,7 +4,7 @@ import { throttle } from "lodash";
 import { useResizeObserver } from "@m4l/graphics";
 import { jsx } from "react/jsx-runtime";
 const THROTTLE_RESIZE_TIME = 200;
-const layoutClassName = "react-grid-layout";
+const layoutClassName = "M4LGridLayout";
 function WidthProvider(ComposedComponent) {
   return (props) => {
     const {
@@ -20,7 +20,6 @@ function WidthProvider(ComposedComponent) {
     const onWindowResizeMemo = useMemo(() => () => {
       const node = elementRef.current;
       if (node instanceof HTMLElement && node.offsetWidth) {
-        console.log("onWindowResize*******************************", node.offsetWidth, node.offsetHeight);
         setCurrentState((prev) => ({
           ...prev,
           width: node.offsetWidth,
@@ -53,7 +52,6 @@ function WidthProvider(ComposedComponent) {
         ref: elementRef
       });
     }
-    console.log("Render with provider");
     return /* @__PURE__ */ jsx(ComposedComponent, {
       innerRef: elementRef,
       width: currentState.width,

package/components/GridLayout/index.d.ts

@@ -1,6 +1,6 @@
 export { GridLayout } from './GridLayout';
 export { Responsive } from './subcomponents/Responsive';
-export { addLayoutItemToBreakPoints, addLayoutItemToBreakPointIfNoExists, cloneLayouts, } from './subcomponents/Responsive/responsiveUtils';
+export { addLayoutItemToBreakPoints, addLayoutItemToBreakPointIfNoExists, cloneLayouts, isEqualLayouts, isEqualLayout, } from './subcomponents/Responsive/responsiveUtils';
 export type { GridLayoutProps, LayoutItemRenderProps, Layout, LayoutItem, BaseLayoutItem, } from './types';
 export type { Layouts, ContainerChangeEvent } from './subcomponents/Responsive/types';
 export { WidthProvider } from './subcomponents/WidthProvider';