@m4l/components 9.2.61 → 9.2.62

package/components/mui_extended/index.d.ts

@@ -27,3 +27,4 @@ export * from './ToggleButton';
 export * from './ToggleIconButton';
 export * from './NavLink';
 export * from './Dialog';
+export * from './Divider';

package/hooks/useDynamicFilterAndSort/styles.js

@@ -32,7 +32,7 @@ const dynamicFilterAndSortStyles = {
    */
   stackRightActions: ({ theme }) => ({
     alignItems: "center",
-    gap: theme.vars.size.baseSpacings.sp1,
+    gap: theme.vars.size.baseSpacings.sp3,
     width: "fit-content"
   })
 };

package/index.d.ts

@@ -8,3 +8,4 @@ export * from './hooks';
 export * from './@types/export.d';
 export * from './@types/types.d';
 export * from './utils';
+export type { M4LOverridesStyleRules } from './@types/augmentations';

package/index.js

@@ -106,8 +106,9 @@ import { T as T15 } from "./components/mui_extended/ToggleIconButton/slots/Toggl
 import { T as T16 } from "./components/mui_extended/ToggleIconButton/slots/ToggleIconButtonSlots.js";
 import { N as N2 } from "./components/mui_extended/NavLink/NavLink.js";
 import { D as D6 } from "./components/mui_extended/Dialog/Dialog.js";
+import { D as D7 } from "./components/mui_extended/Divider/Divider.js";
 import { B as B6 } from "./components/formatters/BooleanFormatter/BooleanFormatter.js";
-import { D as D7, g as g12 } from "./components/formatters/DateFormatter/DateFormatter.js";
+import { D as D8, g as g12 } from "./components/formatters/DateFormatter/DateFormatter.js";
 import { U, g as g13 } from "./components/formatters/UncertaintyFormatter/UncertaintyFormatter.js";
 import { P as P3, g as g14 } from "./components/formatters/PointsFormatter/PointsFormatter.js";
 import { C as C15, g as g15 } from "./components/formatters/ConcatenatedFormatter/ConcatenatedFormatter.js";
@@ -115,7 +116,7 @@ import { P as P4, u as u12 } from "./components/formatters/PeriodFormatter/Perio
 import { P as P5, g as g16 } from "./components/formatters/PriceFormatter/PriceFormatter.js";
 import { C as C16 } from "./components/formatters/ChipStatusFormatter/ChipStatusFormatter.js";
 import { g as g17 } from "./components/formatters/DistanceToNowFormatter/dictionary.js";
-import { D as D8 } from "./components/formatters/DistanceToNowFormatter/DistanceToNowFormatter.js";
+import { D as D9 } from "./components/formatters/DistanceToNowFormatter/DistanceToNowFormatter.js";
 import { g as g18 } from "./components/formatters/dictionary.js";
 import { G } from "./components/GridLayout/GridLayout.js";
 import { R as R3 } from "./components/GridLayout/subcomponents/Responsive/index.js";
@@ -179,7 +180,7 @@ import { u as u14 } from "./components/WindowBase/hooks/useWindowToolsMF/index.j
 import { u as u15, a as a11 } from "./components/WindowBase/hooks/useDynamicMFParameters/index.js";
 import { M as M6, W as W2, a as a12 } from "./components/WindowBase/contexts/WindowToolsMFContext/WindowToolsMFContext.js";
 import { c as c3 } from "./components/WindowBase/contexts/DynamicMFParmsContext/store.js";
-import { D as D9, a as a13, M as M7 } from "./components/WindowBase/contexts/DynamicMFParmsContext/DynamicMFParmsContext.js";
+import { D as D10, a as a13, M as M7 } from "./components/WindowBase/contexts/DynamicMFParmsContext/DynamicMFParmsContext.js";
 import { W as W3 } from "./components/WindowConfirm/WindowConfirm.js";
 import { a as a14, g as g27 } from "./components/ModalDialog/dictionary.js";
 import { M as M8 } from "./components/ModalDialog/ModalDialog.js";
@@ -209,12 +210,12 @@ import { g as g30 } from "./utils/getComponentUtilityClass.js";
 import { g as g31 } from "./utils/getPaletteColor.js";
 import { g as g32 } from "./utils/getTypographyStyles.js";
 import { g as g33 } from "./utils/getIconColor.js";
-import { a as a16 } from "./utils/getSizeStyles/getSizeStyles.js";
+import { a as a16, g as g34 } from "./utils/getSizeStyles/getSizeStyles.js";
 import { O as O2 } from "./utils/ObjectQueue.js";
-import { g as g34, a as a17 } from "./utils/getComponentSlotRoot.js";
+import { g as g35, a as a17 } from "./utils/getComponentSlotRoot.js";
 import { f } from "./utils/formatDistanceToNow/formatDistanteToNow.js";
-import { g as g35 } from "./utils/getValidDate.js";
-import { g as g36 } from "./utils/getNullGuard.js";
+import { g as g36 } from "./utils/getValidDate.js";
+import { g as g37 } from "./utils/getNullGuard.js";
 export {
   A7 as AREAS_DICCTIONARY,
   a3 as AREAS_DICTIONARY_ID,
@@ -261,12 +262,13 @@ export {
   e as DATAGRID_SEMANTIC_WIDTHS,
   D as DICTIONARY,
   D2 as DataGrid,
-  D7 as DateFormatter,
+  D8 as DateFormatter,
   D6 as Dialog,
-  D8 as DistanceToNowFormatter,
+  D9 as DistanceToNowFormatter,
+  D7 as Divider,
   D3 as DragResizeWindowRND,
   D4 as DynamicFilter,
-  D9 as DynamicMFParmsContext,
+  D10 as DynamicMFParmsContext,
   a13 as DynamicMFParmsProvider,
   D5 as DynamicSort,
   F as FixedSizeList,
@@ -392,7 +394,7 @@ export {
   b2 as getAreasComponentsDictionary,
   g3 as getAreasDictionary,
   g4 as getCommonActionsDictionary,
-  g34 as getComponentClasses,
+  g35 as getComponentClasses,
   a17 as getComponentSlotRoot,
   g30 as getComponentUtilityClass,
   g5 as getDataGridComponentsDictionary,
@@ -416,7 +418,7 @@ export {
   a14 as getModalDialogComponentsDictionary,
   g27 as getModalDictionary,
   g25 as getNoItemSelectedComponentsDictionary,
-  g36 as getNullGuard,
+  g37 as getNullGuard,
   g26 as getObjectLogsComponentsDictionary,
   g11 as getPagerComponentsDictionary,
   g31 as getPaletteColor,
@@ -425,9 +427,10 @@ export {
   g19 as getRHFAutocompleteComponentsDictionary,
   g9 as getRawFiltersForNetwork,
   g10 as getRawSortsForNetwork,
+  g34 as getSizeStyles,
   g32 as getTypographyStyles,
   g13 as getUncertaintyFormat,
-  g35 as getValidDate,
+  g36 as getValidDate,
   g29 as getformAddEditDictionary,
   i as isEqualLayout,
   k as isEqualLayouts,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@m4l/components",
-  "version": "9.2.61",
+  "version": "9.2.62",
   "license": "UNLICENSED",
   "description": "M4L Components",
   "lint-staged": {
@@ -62,9 +62,10 @@
     "@types/react": "18.3.23",
     "@types/react-dom": "18.3.7",
     "react-dom": "18.3.1",
-    "storybook": "^8.3.4",
     "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",

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/ObjectLogs/ObjectLogs.stories.d.ts

@@ -3,5 +3,5 @@ import { ObjectLogs } from '../../../src/components/ObjectLogs/ObjectLogs';
 import { ObjectLogsM4LProps, ObjectLogsOtherProps } from '../../../src/components/ObjectLogs/types';
 declare const meta: Meta<typeof ObjectLogs>;
 export default meta;
-export declare const DefaultM4L: import('@storybook/core/csf').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, ObjectLogsM4LProps>;
-export declare const DefaultOthers: import('@storybook/core/csf').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, ObjectLogsOtherProps>;
+export declare const DefaultM4L: import('@storybook/csf').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, ObjectLogsM4LProps>;
+export declare const DefaultOthers: import('@storybook/csf').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, ObjectLogsOtherProps>;

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/components/extended/mui/TextField/TextFieldText.stories.d.ts

@@ -14,6 +14,7 @@ export declare const Default: Story;
  * readOnly
  */
 export declare const ReadOnly: Story;
+export declare const MultipleLines: Story;
 /**
  * Se aplica cuando el input tiene adornos.
  *

package/utils/index.d.ts

@@ -7,6 +7,7 @@ export * from './getComponentSlotRoot';
 export { getTypographyStyles } from './getTypographyStyles';
 export { getIconColor } from './getIconColor';
 export { getHeightSizeStyles } from './getSizeStyles';
+export { getSizeStyles } from './getSizeStyles';
 export * from './formatDistanceToNow';
 export * from './getValidDate';
 export * from './getNullGuard';

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