@m4l/components 0.1.77 → 0.1.79

package/components/DynamicFilter/{index.d7be0f37.js → index.0887320f.js}

@@ -4,39 +4,40 @@ import { useContext, useMemo, useEffect, createContext, useRef, createElement, u
 import clsx from "clsx";
 import { useModuleDictionary, useEnvironment, useModuleSkeleton, useFlagsPresent, CommonFlags } from "@m4l/core";
 import { useResponsiveDesktop, useFirstRender, useFormatter } from "@m4l/graphics";
-import { I as IconButton } from "../mui_extended/IconButton/index.fc5b7c2d.js";
+import { I as IconButton } from "../mui_extended/IconButton/index.12f1a3c3.js";
 import { T as TEST_PROP_ID } from "../../test/constants_no_mock.86c553a9.js";
+import { g as getNameDataTestId } from "../../vendor.9b969b18.js";
 import { jsxs, jsx, Fragment } from "react/jsx-runtime";
 import { generateUtilityClasses, alpha, styled as styled$1, Skeleton, MenuItem } from "@mui/material";
-import { L as LabelMemuItem } from "../mui_extended/MenuActions/index.f5b1c022.js";
+import { L as LabelMemuItem } from "../mui_extended/MenuActions/index.43a2e1ae.js";
 import { P as Popover } from "../mui_extended/Popover/index.9f35d0eb.js";
-import { I as Icon } from "../Icon/index.ecb63e65.js";
+import { I as Icon } from "../Icon/index.9fcd1476.js";
 import { styled, useTheme } from "@mui/material/styles";
 import { R as RHFormProvider } from "../../contexts/RHFormContext/index.fe175bab.js";
-import { g as getCommonActionsDictionary, A as Actions } from "../CommonActions/components/Actions/index.3eba9d91.js";
-import { A as ActionCancel } from "../CommonActions/components/ActionCancel/index.b748a38e.js";
-import { A as ActionIntro } from "../CommonActions/components/ActionIntro/index.a7d92e66.js";
+import { g as getCommonActionsDictionary, A as Actions } from "../CommonActions/components/Actions/index.5732847f.js";
+import { A as ActionCancel } from "../CommonActions/components/ActionCancel/index.92536832.js";
+import { A as ActionIntro } from "../CommonActions/components/ActionIntro/index.aa4e432e.js";
 import { useFormContext, useWatch } from "react-hook-form";
 import "@mui/material/Button";
 import "../mui_extended/Button/index.4288f9fc.js";
-import "../../contexts/ModalContext/index.dee85a61.js";
+import "../../contexts/ModalContext/index.feded672.js";
 import "../../react-draggable.7abb5d0a.js";
 import "../Resizeable/index.9a9c79a4.js";
-import "../modal/index.a0978193.js";
+import "../modal/index.cd34ddb3.js";
 import "../Image/index.c18ebf5a.js";
-import "../mui_extended/Accordion/index.12b1339a.js";
+import "../mui_extended/Accordion/index.e8ba0755.js";
 import { T as Typography } from "../mui_extended/Typography/index.443590d6.js";
 import "../mui_extended/Avatar/index.75e6ed57.js";
 import "react-router-dom";
 import "../mui_extended/Badge/index.8c2b8b66.js";
 import "@mui/lab";
-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.3c005df1.js";
 import "../mui_extended/Tooltip/index.5a795dcd.js";
 import { useStore, createStore } from "zustand";
-import "../areas/contexts/AreasContext/index.c8147e8e.js";
-import "../areas/components/AreasAdmin/index.cc4cbf56.js";
-import "../areas/components/AreasViewer/index.9c2aaaeb.js";
+import "../areas/contexts/AreasContext/index.1213c3ef.js";
+import "../areas/components/AreasAdmin/index.31905078.js";
+import "../areas/components/AreasViewer/index.fe18bdbc.js";
 import "../LinearProgressIndeterminate/index.60dabc06.js";
 import "../areas/contexts/WindowToolsMFContext/index.8f3e2a04.js";
 import "../areas/contexts/DynamicMFParmsContext/index.1607c78e.js";
@@ -44,20 +45,21 @@ import { unstable_composeClasses } from "@mui/base";
 import { g as getComponentUtilityClass, i as isValidDate } from "../../utils/index.c43a95f4.js";
 import { devtools } from "zustand/middleware";
 import { immer } from "zustand/middleware/immer";
-import { R as RHFAutocomplete } from "../hook-form/RHFAutocomplete/index.ac2b1fae.js";
+import { R as RHFAutocomplete } from "../hook-form/RHFAutocomplete/index.e52c1f6a.js";
 import "lodash/debounce";
-import "../hook-form/RHFAutocompleteAsync/index.8b4ccc8d.js";
-import "../hook-form/RHFCheckbox/index.acef119c.js";
-import "../HelperText/index.ef31df1f.js";
+import "../hook-form/RHFAutocompleteAsync/index.a226b8ac.js";
+import "../hook-form/RHFCheckbox/index.9619debd.js";
+import "../HelperText/index.29d5ad65.js";
 import "@mui/x-date-pickers";
-import { R as RHFDateTime } from "../hook-form/RHFDateTime/index.5b080342.js";
-import { R as RHFTextField } from "../hook-form/RHFTextField/index.e751dca7.js";
-import "../hook-form/RHFPeriod/index.5304e3bd.js";
-import "../Period/index.711db043.js";
+import { R as RHFDateTime } from "../hook-form/RHFDateTime/index.5da7b839.js";
+import { R as RHFTextField } from "../hook-form/RHFTextField/index.13447584.js";
+import "../hook-form/RHFPeriod/index.7e42c292.js";
+import "../Period/index.adc328ca.js";
 import "lodash/isString";
 import "react-dropzone";
-import "../hook-form/RHFUpload/index.25db0511.js";
+import "../hook-form/RHFUpload/index.80071782.js";
 import * as Yup from "yup";
+const COMPONENT_PREFIX = "m4l-dynamic-filter";
 const COMPONENT_CLASS_NAME = "M4LDynamicFilter";
 const ASSETS_URL = "frontend/components/dynamic_filter/assets/icons";
 const ASSETS = {
@@ -149,12 +151,6 @@ function useDynamicFilter(selector, equalityFn) {
     throw new Error("useDynamicFilterStore context must be use inside DynamicFilterContext");
   return useStore(store, selector, equalityFn);
 }
-const DYNAMICFILTER_TEST_ID = "M4LDynamicFilter";
-const PREFIX_TEST_ATTRIBUTE = "data-test";
-const TEST_PROP_FIELDS = `${PREFIX_TEST_ATTRIBUTE}-${DYNAMICFILTER_TEST_ID}-fields`;
-function getTestIdByClass(key, detailId) {
-  return `${DYNAMICFILTER_TEST_ID}-${key}` + (detailId ? "-" + detailId : "");
-}
 const DYNAMICFILTER_DICTIONARY_ID = "dynamic_filter";
 function getDynamicFilterComponentsDictionary() {
   return [DYNAMICFILTER_DICTIONARY_ID].concat(getCommonActionsDictionary());
@@ -191,6 +187,7 @@ const getDynamicFilterDictionary = (key) => {
 };
 function BooleanFilter() {
   const classesContainerBooleanFilter = useDynamicFilter((state) => state.classes.containerBooleanFilter);
+  const dataTestId = useDynamicFilter((state) => state.classes.containerBooleanFilter);
   const {
     getLabel
   } = useModuleDictionary();
@@ -207,7 +204,7 @@ function BooleanFilter() {
   }], [getLabel]);
   return /* @__PURE__ */ jsxs("div", {
     ...process.env.NODE_ENV !== "production" ? {
-      [TEST_PROP_ID]: getTestIdByClass("containerBooleanFilter")
+      [TEST_PROP_ID]: getNameDataTestId(COMPONENT_PREFIX, "containerBooleanFilter", dataTestId)
     } : {},
     className: classesContainerBooleanFilter,
     children: [/* @__PURE__ */ jsx(RHFAutocomplete, {
@@ -877,7 +874,6 @@ const updateAutomatic = (state) => {
   updateOwnerStateClasses(state);
 };
 const createAreaStore = (initProps) => {
-  console.log("valores iniciales de createDinamicFilter store", initProps);
   const startProps = {
     countOnChangeFiltersApplyed: 0,
     applyedFilters: [],
@@ -1031,7 +1027,8 @@ function DynamicFilterProvider(props) {
     fields,
     initialApplyedFilters = [],
     onChangeFilters,
-    children
+    children,
+    dataTestId = ""
   } = props;
   const {
     getLabel
@@ -1054,6 +1051,7 @@ function DynamicFilterProvider(props) {
       fields,
       automatic,
       getLabel,
+      dataTestId,
       ownerState: {
         isSkeleton,
         isDirty: !automatic,
@@ -1217,6 +1215,7 @@ function ApplyedFilter(props) {
     hidePopoverFilter: hidePopupEdit,
     showPopoverFilterForEdit: showPopupForEdit
   } = useDynamicFilter((state) => state.actions);
+  const dataTestId = useDynamicFilter((state) => state.dataTestId);
   const labels = useMemo(() => {
     return getLabelsFilter(props, getLabel, formatters);
   }, [props, getLabel]);
@@ -1235,7 +1234,7 @@ function ApplyedFilter(props) {
   return /* @__PURE__ */ jsxs(WrapperApplyedFilter, {
     className: clsx(classesApplyedFilter, !isSetted ? `${COMPONENT_CLASS_NAME}-noSetted` : null),
     ...process.env.NODE_ENV !== "production" ? {
-      [TEST_PROP_ID]: getTestIdByClass("applyedFilter", field.name)
+      [TEST_PROP_ID]: getNameDataTestId(COMPONENT_PREFIX, "applyedFilter", `${dataTestId}-${field.name}`)
     } : {},
     children: [urlIcon && /* @__PURE__ */ jsx(IconButton, {
       src: urlIcon,
@@ -1277,6 +1276,7 @@ const ContainerApplyedFilters = styled("div")(({
 }));
 function ApplyedFilters() {
   const classesWrapperApplyedFilters = useDynamicFilter((state) => state.classes.wrapperApplyedFilters, shallow);
+  const dataTestId = useDynamicFilter((state) => state.dataTestId, shallow);
   const classesContainerApplyedFilters = useDynamicFilter((state) => state.classes.containerApplyedFilters, shallow);
   const applyedFilters = useDynamicFilter((state) => state.applyedFilters, shallow);
   const isSkeleton = useDynamicFilter((state) => state.ownerState.isSkeleton, shallow);
@@ -1288,13 +1288,13 @@ function ApplyedFilters() {
   return /* @__PURE__ */ jsx(WrapperApplyedFilters, {
     className: classesWrapperApplyedFilters,
     ...process.env.NODE_ENV !== "production" ? {
-      [TEST_PROP_ID]: getTestIdByClass("wrapperApplyedFilters")
+      [TEST_PROP_ID]: getNameDataTestId(COMPONENT_PREFIX, "wrapperApplyedFilters", dataTestId)
     } : {},
     children: /* @__PURE__ */ jsx(ScrollBar, {
       children: /* @__PURE__ */ jsx(ContainerApplyedFilters, {
         className: classesContainerApplyedFilters,
         ...process.env.NODE_ENV !== "production" ? {
-          [TEST_PROP_ID]: getTestIdByClass("containerApplyedFilters")
+          [TEST_PROP_ID]: getNameDataTestId(COMPONENT_PREFIX, "containerApplyedFilters", dataTestId)
         } : {},
         children: [...applyedFilters].sort((a, b) => a.isSetted === b.isSetted ? 0 : a.isSetted ? -1 : 1).reverse().map((filter) => /* @__PURE__ */ jsx(ApplyedFilter, {
           ...filter
@@ -1363,6 +1363,7 @@ styled("div")(() => ({
   display: "block"
 }));
 function FilterButton() {
+  const dataTestId = useDynamicFilter((state) => state.dataTestId);
   const automatic = useDynamicFilter((state) => state.automatic);
   const isValid = useDynamicFilter((state) => state.ownerState.isValid);
   const isDirty = useDynamicFilter((state) => state.ownerState.isDirty);
@@ -1388,7 +1389,7 @@ function FilterButton() {
   return /* @__PURE__ */ jsx(IconButton, {
     className: classesFilterButton,
     ...process.env.NODE_ENV !== "production" ? {
-      [TEST_PROP_ID]: getTestIdByClass("classesFilterButton")
+      [TEST_PROP_ID]: getNameDataTestId(COMPONENT_PREFIX, "classesFilterButton", dataTestId)
     } : {},
     dictionaryTooltipId: getDynamicFilterDictionary(isValid ? isDirty ? DICCTIONARY.filter_tooltip_dirty : DICCTIONARY.filter_tooltip_refresh : DICCTIONARY.filter_tooltip_invalid),
     onClick: fireOnChangeFilters,
@@ -1404,6 +1405,7 @@ function PopoverMenuFields(props) {
   } = props;
   const fnAnchorEl = useDynamicFilter((state) => state.fnAnchorEl, shallow);
   const classesPopUpMenuFields = useDynamicFilter((state) => state.classes.popoverMenuFields, shallow);
+  const dataTestId = useDynamicFilter((state) => state.dataTestId, shallow);
   const classesPopUpMenuFieldsPaper = useDynamicFilter((state) => state.classes.popoverMenuFieldsPaper, shallow);
   const classespopoverMenuFieldsItem = useDynamicFilter((state) => state.classes.popoverMenuFieldsItem, shallow);
   const classespopoverLabelMemuItem = useDynamicFilter((state) => state.classes.classespopoverLabelMemuItem, shallow);
@@ -1445,12 +1447,12 @@ function PopoverMenuFields(props) {
     PaperProps: {
       className: classesPopUpMenuFieldsPaper,
       ...process.env.NODE_ENV !== "production" ? {
-        [TEST_PROP_ID]: getTestIdByClass("popoverMenuFieldsPaper")
+        [TEST_PROP_ID]: getNameDataTestId(COMPONENT_PREFIX, "popoverMenuFieldsPaper", dataTestId)
       } : {}
     },
     children: Boolean(fnAnchorEl) && fields.map((field, index) => /* @__PURE__ */ createElement(MenuItem, {
       ...process.env.NODE_ENV !== "production" ? {
-        [TEST_PROP_ID]: getTestIdByClass("popoverMenuFieldsItem", field.name)
+        [TEST_PROP_ID]: getNameDataTestId(COMPONENT_PREFIX, "popoverMenuFieldsItem", `${dataTestId}-${field.name}`)
       } : {},
       className: classespopoverMenuFieldsItem,
       key: `menu_action_${field.label ?? getLabel(field.dictionaryId)}`,
@@ -1470,6 +1472,7 @@ function InputFilter() {
   const withAllField = useDynamicFilter((state) => state.withAllField);
   const inputData = useDynamicFilter((state) => state.inputData);
   const availableFields = useDynamicFilter((state) => state.availableFields, shallow);
+  const dataTestId = useDynamicFilter((state) => state.dataTestId, shallow);
   const classesContainerInputFilter = useDynamicFilter((state) => state.classes.containerInputFilter, shallow);
   const isSkeleton = useDynamicFilter((state) => state.ownerState.isSkeleton, shallow);
   const {
@@ -1570,7 +1573,7 @@ function InputFilter() {
   return /* @__PURE__ */ jsxs("div", {
     className: classesContainerInputFilter,
     ...process.env.NODE_ENV !== "production" ? {
-      [TEST_PROP_ID]: getTestIdByClass("containerInputFilter")
+      [TEST_PROP_ID]: getNameDataTestId(COMPONENT_PREFIX, "containerInputFilter", dataTestId)
     } : {},
     children: [!isSkeleton ? /* @__PURE__ */ jsxs(Fragment, {
       children: [/* @__PURE__ */ jsx(Icon, {
@@ -1624,6 +1627,7 @@ const PopoverFilter = () => {
   const refPreviousPopoverFilterData = useRef(popoverFilterData);
   const classesPopoverFilter = useDynamicFilter((state) => state.classes.popoverFilter, shallow);
   const classesPopoverFilterPapper = useDynamicFilter((state) => state.classes.popoverFilterPaper, shallow);
+  const dataTestId = useDynamicFilter((state) => state.dataTestId, shallow);
   const classesPopoverFilterHeader = useDynamicFilter((state) => state.classes.popoverFilterHeader, shallow);
   const classesPopoverHeaderTitle = useDynamicFilter((state) => state.classes.popoverHeaderTitle, shallow);
   const classesPopoverContainerFields = useDynamicFilter((state) => state.classes.popoverContainerFields, shallow);
@@ -1723,7 +1727,7 @@ const PopoverFilter = () => {
     PaperProps: {
       className: classesPopoverFilterPapper,
       ...process.env.NODE_ENV !== "production" ? {
-        [TEST_PROP_ID]: getTestIdByClass("popoverFilterPaper")
+        [TEST_PROP_ID]: getNameDataTestId(COMPONENT_PREFIX, "popoverFilterPaper", dataTestId)
       } : {}
     },
     children: /* @__PURE__ */ jsxs(RHFormProvider, {
@@ -1757,21 +1761,19 @@ const PopoverFilter = () => {
     })
   });
 };
-const InnerForHooks = (props) => {
-  const {
-    dataTestId
-  } = props;
+const TEST_PROPS_DATA = `data-testing`;
+const InnerForHooks = () => {
   const isMobile = useDynamicFilter((state) => state.ownerState.isMobile, shallow);
+  const dataTestId = useDynamicFilter((state) => state.dataTestId, shallow);
   const classesRoot = useDynamicFilter((state) => state.classes.root, shallow);
   const containerClearFilter = useDynamicFilter((state) => state.classes.containerClearFilter, shallow);
   const classesContainerFistRow = useDynamicFilter((state) => state.classes.containerFistRow, shallow);
   const fields = useDynamicFilter((state) => state.fields, shallow);
-  console.log("fields test data", fields);
   return /* @__PURE__ */ jsx(DynamicFilterRoot, {
     className: classesRoot,
     ...process.env.NODE_ENV !== "production" ? {
-      [TEST_PROP_FIELDS]: JSON.stringify(fields),
-      "data-testid": `${DYNAMICFILTER_TEST_ID}-${dataTestId}`
+      [TEST_PROPS_DATA]: JSON.stringify(fields),
+      [TEST_PROP_ID]: getNameDataTestId(COMPONENT_PREFIX, "root", dataTestId)
     } : {},
     children: !isMobile ? /* @__PURE__ */ jsxs(Fragment, {
       children: [/* @__PURE__ */ jsx(InputFilter, {}), /* @__PURE__ */ jsx(ApplyedFilters, {}), /* @__PURE__ */ jsx(PopoverFilter, {}), /* @__PURE__ */ jsxs("div", {
@@ -1796,9 +1798,7 @@ const DynamicFilter = (inProps) => {
   }
   return /* @__PURE__ */ jsx(DynamicFilterProvider, {
     ...inProps,
-    children: /* @__PURE__ */ jsx(InnerForHooks, {
-      dataTestId: inProps.dataTestId
-    })
+    children: /* @__PURE__ */ jsx(InnerForHooks, {})
   });
 };
 export {

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';