@m4l/components 9.2.59 → 9.2.60-13062025.beta.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@m4l/components",
-  "version": "9.2.59",
+  "version": "9.2.60-13062025.beta.1",
   "license": "UNLICENSED",
   "description": "M4L Components",
   "lint-staged": {
@@ -9,10 +9,10 @@
   "dependencies": {
     "@geoman-io/leaflet-geoman-free": "^2.14.2",
     "@googlemaps/js-api-loader": "^1.16.6",
-    "@hookform/resolvers": "^2.9.5",
+    "@hookform/resolvers": "2.9.11",
     "@m4l/core": "^2.0.0",
-    "@m4l/graphics": "^7.0.0",
-    "@m4l/styles": "^7.0.0",
+    "@m4l/graphics": "7.1.2-13062025.beta.1",
+    "@m4l/styles": "7.1.29-13062025.beta.1",
     "@microlink/react-json-view": "^1.23.3",
     "@mui/lab": "5.0.0-alpha.173",
     "@mui/material": "5.16.7",
@@ -31,13 +31,13 @@
     "leaflet.markercluster": "^1.5.3",
     "nprogress": "^0.2.0",
     "qrcode.react": "^3.1.0",
-    "react": "^18.0.0",
+    "react": "18.3.1",
     "react-chartjs-2": "^5.2.0",
     "react-color": "^2.19.3",
     "react-data-grid": "7.0.0-beta.13",
     "react-dnd": "^16.0.1",
     "react-dnd-html5-backend": "^16.0.1",
-    "react-dom": "^18.0.0",
+    "react-dom": "18.3.1",
     "react-draggable": "^4.4.5",
     "react-dropzone": "^14.2.2",
     "react-helmet-async": "^2.0.5",
@@ -54,25 +54,26 @@
     "react-window": "^1.8.11",
     "simplebar-react": "3.2.6",
     "storybook-multilevel-sort": "^2.0.1",
-    "yup": "^0.32.11",
+    "yup": "0.32.11",
     "zustand": "4.3.6"
   },
   "resolutions": {
-    "react": "^18.0.0",
-    "@types/react": "^18.0.0",
-    "@types/react-dom": "^18.0.0",
-    "react-dom": "^18.0.0",
-    "storybook": "^8.3.4",
+    "react": "18.3.1",
+    "@types/react": "18.3.23",
+    "@types/react-dom": "18.3.7",
+    "react-dom": "18.3.1",
     "attr-accept": "2.2.2",
-    "@vitejs/plugin-react": "4.3.4"
+    "@vitejs/plugin-react": "4.3.4",
+    "storybook": "8.3.4",
+    "@storybook/react": "8.3.4"
   },
   "overrides": {
     "glob": "^10.4.5",
-    "eslint": "^9.0.0",
-    "react": "^18.0.0",
-    "@types/react": "^18.0.0",
-    "@types/react-dom": "^18.0.0",
-    "react-dom": "^18.0.0",
+    "eslint": "9.28.0",
+    "react": "18.3.1",
+    "@types/react": "18.3.23",
+    "@types/react-dom": "18.3.7",
+    "react-dom": "18.3.1",
     "attr-accept": "2.2.2"
   },
   "files": [

package/storybook/components/DynamicFilter/DynamicFilter.stories.d.ts

@@ -8,26 +8,42 @@ type Story = StoryObj<typeof DynamicFilter>;
  */
 export declare const Base: Story;
 /**
- * DynamicFilter With props `automatic=true`
+ * Filtro habilitado automático con filtros aplicados.
  */
-export declare const WithAutomatic: Story;
+export declare const H001_EnabledAutomaticFiltersApplied: Story;
 /**
- * DynamicFilter With props `visibleRefresh=true`
+ * Filtro habilitado automático sin filtros aplicados.
+ */
+export declare const H002_EnabledAutomaticNoFiltersApplied: Story;
+/**
+ * Filtro habilitado automático sin filtros aplicados, con PopoverMenuFields abierto.
+ */
+export declare const H003_EnabledAutomaticNoFiltersAppliedPopoverMenuFieldsOpen: Story;
+/**
+ * Filtro habilitado automático sin filtros aplicados, con popoverFilter abierto.
  */
-export declare const WithAutomaticVisibleRefreshFalse: Story;
+export declare const H004_EnabledAutomaticNoFiltersAppliedPopoverFilterOpen: Story;
 /**
- * DynamicFilter With props `withAllField=true`
+ * Filtro habilitado En formato manual con filtros aplicados, no dirty.
  */
-export declare const WithAllField: Story;
+export declare const H005_EnabledManualFiltersAppliedNoDirty: Story;
 /**
- * DynamicFilter With fixed field
+ * Filtro habilitado En formato manual con filtros aplicados y en estado dirty.
+ */
+export declare const H006_EnabledManualFiltersAppliedDirty: Story;
+/**
+ * Filtro habilitado En formato manual sin filtros aplicados.
+ */
+export declare const H007_EnabledManualNoFiltersApplied: Story;
+/**
+ * DynamicFilter With props `visibleRefresh=true`
  */
-export declare const WithFixedField: Story;
+export declare const H008_WithAutomaticVisibleRefreshFalse: Story;
 /**
- * DynamicFilter in skeleton mode
+ * DynamicFilter con skeleton
  */
-export declare const WithSkeleton: Story;
+export declare const H009_WithSkeleton: Story;
 /**
  * DynamicFilter with errors
  */
-export declare const WithErrors: Story;
+export declare const H010_WithErrors: Story;

package/storybook/components/DynamicSort/DynamicSort.stories.d.ts

@@ -8,22 +8,38 @@ type Story = StoryObj<typeof DynamicSort>;
  */
 export declare const Base: Story;
 /**
- * DynamicSort with `initialAppliedSorts`
+ * sort habilitado automático con sorts aplicados.
  */
-export declare const WithInitialSort: Story;
+export declare const H001_EnabledAutomaticSortsApplied: Story;
 /**
- * DynamicSort in skeleton mode
+ * sort habilitado automático sin sorts aplicados.
  */
-export declare const WithSkeleton: Story;
+export declare const H002_EnabledAutomaticNoSortsApplied: Story;
 /**
- * DynamicFilter With fixed field
+ * sort habilitado automático sin sorts aplicados, con PopoverMenuFields abierto.
  */
-export declare const WithFixedField: Story;
+export declare const H003_EnabledAutomaticNoSortsAppliedPopoverMenuFieldsOpen: Story;
 /**
- * DynamicFilter With props `automatic=true`
+ * sort habilitado automático sin sorts aplicados, con popoverSort abierto.
  */
-export declare const WithAutomatic: Story;
+export declare const H004_EnabledAutomaticNoSortsAppliedPopoverSortOpen: Story;
 /**
- * DynamicFilter With props `visibleRefresh=true`
+ * sort habilitado En formato manual con sorts aplicados, no dirty.
  */
-export declare const WithAutomaticVisibleRefreshFalse: Story;
+export declare const H005_EnabledManualSortsAppliedNoDirty: Story;
+/**
+ * sort habilitado En formato manual con sorts aplicados y en estado dirty.
+ */
+export declare const H006_EnabledManualSortsAppliedDirty: Story;
+/**
+ * sort habilitado En formato manual sin sorts aplicados.
+ */
+export declare const H007_EnabledManualNoSortsApplied: Story;
+/**
+ * DynamicSort With props `visibleRefresh=true`
+ */
+export declare const H008_WithAutomaticVisibleRefreshFalse: Story;
+/**
+ * DynamicSort con skeleton
+ */
+export declare const H009_WithSkeleton: Story;

package/storybook/components/SideBar/subcomponents/FooterPromotion/FooterPromotion.d.ts

@@ -0,0 +1,4 @@
+/**
+ * Componente que renderiza el footer de la promoción del sidebar.
+ */
+export declare const FooterPromotion: () => import("react/jsx-runtime").JSX.Element;

package/storybook/components/SideBar/subcomponents/FooterPromotion/constants.d.ts

@@ -0,0 +1,3 @@
+export declare const POWERBY_LABEL = "label_powerby";
+export declare const IMAGE_ILLUSTRATION = "https://s3.us-east-1.amazonaws.com/static.assets.gclick/frontend/images/promotional/sidebar/assets/img/illustration.svg";
+export declare const IMAGE_POWERBY = "https://s3.us-east-1.amazonaws.com/static.assets.gclick/frontend/images/promotional/sidebar/assets/img/powerby.svg";

package/storybook/components/SideBar/subcomponents/FooterPromotion/index.d.ts

@@ -0,0 +1 @@
+export { FooterPromotion } from './FooterPromotion';

package/storybook/components/extended/mui/IconButton/IconButton.stories.d.ts

@@ -19,6 +19,7 @@ export declare const isSelected: Story;
  * Story for IconButton is selected
  */
 export declare const WithReactElement: Story;
+export declare const WithTooltipMessage: Story;
 /**
  * Story for IconButton with badge text
  */

package/.storybook/decorators/WithWindowsToolsContext/WithContextWindowTools.d.ts

@@ -1,5 +0,0 @@
-import { StoryFn } from '@storybook/react';
-/**
- * Decorador para proveer los contextos de WindowTools y DynamicMFParms.
- */
-export declare const WithContextWindowTools: (Story: StoryFn<any>, context: any) => import("react/jsx-runtime").JSX.Element;

package/components/SideBar/subcomponents/ContentGroups/index.d.ts

@@ -1,5 +0,0 @@
-import { ContentGroupsProps } from './types';
-/**
- * Renderiza el contenido de los grupos
- */
-export declare const ContentGroups: (contentGroupsProps: ContentGroupsProps) => import("react/jsx-runtime").JSX.Element;

package/components/SideBar/subcomponents/ContentGroups/subcomponents/ContainerMenuItemsMain/index.js

@@ -1,63 +0,0 @@
-import { jsxs, jsx } from "react/jsx-runtime";
-import { Collapse } from "@mui/material";
-import { useState } from "react";
-import { useIsMobile } from "@m4l/graphics";
-import clsx from "clsx";
-import { u as useSideBar } from "../../../../hooks/useSideBar/index.js";
-import { T as TEST_PROP_ID } from "../../../../../../test/constants_no_mock.js";
-import { g as getNameDataTestId } from "../../../../tests/utils.js";
-import { A as ArrowIcon } from "./subcomponents/ArrowIcon/index.js";
-import { h as ContainerMenuItemsStyled } from "../../../../slots/SideBarSlots.js";
-import { a as getComponentSlotRoot } from "../../../../../../utils/getComponentSlotRoot.js";
-import { I as ITEM_ACTIVE, b as ITEM_IN_TREE_ACTIVE, L as LIST_MENU_ITEM } from "../../../../constants.js";
-import { u as useComponentSize } from "../../../../../../hooks/useComponentSize/useComponentSize.js";
-import { M as MenuItem } from "../../../../../mui_extended/MenuItem/MenuItem.js";
-function ContainerMenuItemsMain(props) {
-  const { item, size } = props;
-  const { onMenuItemClick, onToggleVisible, urlIconPrefix } = useSideBar();
-  const [openSub, setOpenSub] = useState(props.openSubItem ?? false);
-  const hasChildren = item.children && Array.isArray(item.children) && item.children.length > 0;
-  const isMobile = useIsMobile();
-  const { currentSize } = useComponentSize(size);
-  const adjustedSize = currentSize === "small" || currentSize === "medium" ? currentSize : "medium";
-  const ownerState = {
-    active: item.active,
-    itemInTreeActive: item.itemInTreeActive,
-    sidebarSize: adjustedSize
-  };
-  const handlerClick = () => {
-    onMenuItemClick(item);
-    setOpenSub(!openSub);
-    if (isMobile && (!hasChildren || hasChildren === void 0)) {
-      onToggleVisible(true);
-    }
-  };
-  const classRoot = getComponentSlotRoot(LIST_MENU_ITEM);
-  return /* @__PURE__ */ jsxs(
-    ContainerMenuItemsStyled,
-    {
-      className: clsx(classRoot),
-      role: "listitem",
-      ownerState,
-      ...process.env.NODE_ENV !== "production" ? { [TEST_PROP_ID]: getNameDataTestId("menuItems") } : {},
-      children: [
-        /* @__PURE__ */ jsx(
-          MenuItem,
-          {
-            className: clsx(item.active ? ITEM_ACTIVE : ITEM_IN_TREE_ACTIVE),
-            label: item.title,
-            selected: item.active || item.itemInTreeActive,
-            startIcon: `${urlIconPrefix}${item.iconUrl}`,
-            endIcon: hasChildren ? /* @__PURE__ */ jsx(ArrowIcon, { openState: openSub, active: item.active }) : null,
-            onClick: () => handlerClick(),
-            size: adjustedSize
-          }
-        ),
-        hasChildren ? /* @__PURE__ */ jsx(Collapse, { in: openSub, timeout: "auto", unmountOnExit: true, children: (item.children || []).map((child) => /* @__PURE__ */ jsx(ContainerMenuItemsMain, { item: child, size: adjustedSize }, child.title)) }) : null
-      ]
-    }
-  );
-}
-export {
-  ContainerMenuItemsMain as C
-};

package/components/SideBar/subcomponents/ContentGroups/subcomponents/ContainerMenuItemsMain/styles.d.ts

@@ -1,2 +0,0 @@
-import { ContainerMenuItemsMainStyles } from '../../../../types';
-export declare const containerMenuItemsMainStyles: ContainerMenuItemsMainStyles;

package/components/SideBar/subcomponents/ContentGroups/subcomponents/ContainerMenuItemsMain/styles.js

@@ -1,47 +0,0 @@
-import { a as getHeightSizeStyles } from "../../../../../../utils/getSizeStyles/getSizeStyles.js";
-import { I as ITEM_ACTIVE, b as ITEM_IN_TREE_ACTIVE } from "../../../../constants.js";
-const containerMenuItemsMainStyles = {
-  /**
-   * Style aplicado al contenedor de los items del menú
-   */
-  containerMenuItems: ({ theme, ownerState }) => ({
-    marginLeft: theme.vars.size.baseSpacings.sp4,
-    display: "flex",
-    flexDirection: "column",
-    gap: theme.vars.size.baseSpacings["sp0-5"],
-    ...getHeightSizeStyles(
-      theme.generalSettings.isMobile,
-      ownerState?.size || "medium",
-      "container",
-      (height) => {
-        return {
-          height: "auto",
-          minHeight: height
-        };
-      }
-    ),
-    [`&.M4LListMenuItem-root > .M4LMenuItem-root[class*="${ITEM_IN_TREE_ACTIVE}"]`]: {
-      borderColor: theme.vars.palette.divider,
-      "& span": {
-        color: theme.vars.palette.text.primary
-      }
-    },
-    [`&.M4LListMenuItem-root > .M4LMenuItem-root[class*="${ITEM_IN_TREE_ACTIVE}"] .M4LIconClass-root`]: {
-      background: theme.vars.palette.text.primary
-    },
-    [`&.M4LListMenuItem-root > .M4LMenuItem-root[class*="${ITEM_ACTIVE}"]`]: {
-      borderColor: theme.vars.palette.primary.enabled,
-      "& span": {
-        color: theme.vars.palette.primary.enabled
-      }
-    },
-    "& .MuiCollapse-wrapperInner": {
-      display: "flex",
-      flexDirection: "column",
-      gap: theme.vars.size.baseSpacings["sp0-5"]
-    }
-  })
-};
-export {
-  containerMenuItemsMainStyles as c
-};

package/components/SideBar/subcomponents/ContentGroups/subcomponents/ContainerMenuItemsMain/types.d.ts

@@ -1,7 +0,0 @@
-import { Sizes } from '@m4l/styles';
-import { IMenuDataWithState } from '../../../../types';
-export type NavListSubItemProps = {
-    item: IMenuDataWithState;
-    openSubItem?: boolean;
-    size: Sizes;
-};

package/components/SideBar/subcomponents/ContentGroups/types.d.ts

@@ -1,4 +0,0 @@
-import { Sizes } from '@m4l/styles';
-export interface ContentGroupsProps {
-    size?: Sizes;
-}

package/components/SideBar/subcomponents/FooterSidebar/types.d.ts

@@ -1,5 +0,0 @@
-export interface FooterSidebarProps {
-    onToggleAnchored: (anchored: boolean) => void;
-    anchored: boolean;
-}
-export type WrapperCollapseButtonProps = Pick<FooterSidebarProps, 'anchored'>;

package/components/SideBar/subcomponents/HeaderSidebar/index.js

@@ -1,25 +0,0 @@
-import { jsxs, jsx } from "react/jsx-runtime";
-import { k as ContainerHeaderSidebarRootStyled, l as ContainerTitleSubtitleStyled } from "../../slots/SideBarSlots.js";
-import { T as Typography } from "../../../mui_extended/Typography/Typography.js";
-import { I as Image } from "../../../Image/Image.js";
-const HeaderSidebar = ({ srcIcon, title, subtitle }) => {
-  return /* @__PURE__ */ jsxs(ContainerHeaderSidebarRootStyled, { role: "heading", children: [
-    /* @__PURE__ */ jsx(
-      Image,
-      {
-        width: "24px",
-        height: "24px",
-        src: srcIcon,
-        alt: "logo"
-      },
-      "Logo"
-    ),
-    /* @__PURE__ */ jsxs(ContainerTitleSubtitleStyled, { children: [
-      /* @__PURE__ */ jsx(Typography, { variant: "subtitleDens", size: "medium", skeletonWidth: 120, children: title }),
-      /* @__PURE__ */ jsx(Typography, { variant: "paragraph", size: "medium", margin: 0, skeletonWidth: 150, children: subtitle })
-    ] })
-  ] });
-};
-export {
-  HeaderSidebar as H
-};

package/components/areas/hooks/useSetWindowsTitle/index.d.ts

@@ -1 +0,0 @@
-export * from './useSetWindowsTitle';

package/components/areas/hooks/useSetWindowsTitle/useSetWindowsTitle.d.ts

@@ -1,6 +0,0 @@
-/**
- * TODO: Documentar
- */
-export declare function useSetWindowsTitle({ isAddEditModule, }?: {
-    isAddEditModule?: boolean;
-}): void;

package/components/areas/hooks/useSetWindowsTitle/useSetWindowsTitle.js

@@ -1,31 +0,0 @@
-import { useEffect } from "react";
-import { shallow } from "zustand/shallow";
-import { useFlagsPresent, CommonFlags, useModuleDictionary } from "@m4l/core";
-import { u as useWindowToolsMF } from "../../../WindowBase/hooks/useWindowToolsMF/index.js";
-import { u as useDynamicMFParametersStore } from "../../../WindowBase/hooks/useDynamicMFParameters/index.js";
-const titleLabels = {
-  moduleName: "module_name",
-  moduleNameAdd: "module_name_add",
-  moduleNameEdit: "module_name_edit"
-};
-function useSetWindowsTitle({
-  isAddEditModule = false
-} = {}) {
-  const isFlagPresent = useFlagsPresent([CommonFlags.FLAG_DICTIONARY_LOADED]);
-  const { getLabel } = useModuleDictionary();
-  const { setWindowTitle } = useWindowToolsMF();
-  const id = useDynamicMFParametersStore(
-    // objectId or id  puede ser el nombre del parametro del con el Id que se está editando en los modulos add/edit
-    (state) => state.dynamicMFParameters?.objectId || state.dynamicMFParameters?.id,
-    shallow
-  );
-  useEffect(() => {
-    if (isFlagPresent) {
-      const labelKey = isAddEditModule ? id ? titleLabels.moduleNameEdit : titleLabels.moduleNameAdd : titleLabels.moduleName;
-      setWindowTitle(getLabel(labelKey));
-    }
-  }, [getLabel, isFlagPresent]);
-}
-export {
-  useSetWindowsTitle as u
-};

package/storybook/components/WindowBase/subcomponents/WithContextWindowToolsProvider.d.ts

@@ -1,5 +0,0 @@
-import { StoryFn } from '@storybook/react';
-/**
- * Decorador para proveer los contextos de WindowTools y DynamicMFParms.
- */
-export declare const WithContextWindowToolsProvider: (Story: StoryFn<any>, context: any) => import("react/jsx-runtime").JSX.Element;

package/storybook/components/commonActions/components/ActionFormCancel/WindowToolsMFProvider.d.ts

@@ -1,5 +0,0 @@
-import { StoryFn } from '@storybook/react';
-/**
- * Decorador para proveer los contextos de WindowTools y DynamicMFParms.
- */
-export declare const WithExtendedContainer: (Story: StoryFn<any>, context: any) => import("react/jsx-runtime").JSX.Element;