@m4l/components 9.2.60-24062025.beta.1 → 9.2.60-J24062025.beta.1

package/storybook/components/DataGrid/MswHandles.d.ts

@@ -0,0 +1 @@
+export declare const mswHandles: import('msw').HttpHandler[];

package/storybook/components/DataGrid/helpers/filterFieldsSeedData.d.ts

@@ -0,0 +1,5 @@
+import { FilterField } from '../../../../src/components/DynamicFilter/types';
+/**
+ * Helper que retorna los fields configurados para el DataGrid de Storybook
+ */
+export declare const filterFieldsSeedData: FilterField[];

package/storybook/components/DataGrid/helpers/getRows.d.ts

@@ -3,3 +3,7 @@ import { RowType, SeedProps } from './types';
  * Función para generar las filas para el DataGrid de Storybook
  */
 export declare const getRows: (props: SeedProps) => RowType[];
+/**
+ * Función para generar filas con nombres duplicados para probar ordenamiento múltiple
+ */
+export declare const getRowsForMultiSort: (props: SeedProps) => RowType[];

package/storybook/components/DataGrid/helpers/getRowsWithBackendSimulation.d.ts

@@ -0,0 +1,9 @@
+import { RowType } from './types';
+import { RawFilterFieldApply } from '../../../../src/components/DynamicFilter/types';
+import { RawSortFieldApply } from '../../../../src/components/DynamicSort/types';
+/**
+ * Función que simula el comportamiento del backend
+ * Recibe exactamente los mismos parámetros que se enviarían al backend real
+ */
+export declare function getRowsWithBackendSimulation(originalRows: RowType[], f: Omit<RawFilterFieldApply, 'ft'>[] | undefined, // filtros en formato snake_case (sin ft)
+s: RawSortFieldApply[] | undefined): RowType[];

package/storybook/components/DataGrid/helpers/sortsSeedData.d.ts

@@ -0,0 +1,5 @@
+import { SortField } from '../../../../src/components/DynamicSort/types';
+/**
+ * Helper que retorna los sorts configurados para el DataGrid de Storybook
+ */
+export declare const sortsSeedData: SortField[];

package/storybook/components/DataGrid/helpers/types.d.ts

@@ -21,6 +21,7 @@ export type ColumnType = 'string' | 'number' | 'boolean' | 'date' | 'custom';
 export interface RowType {
     id: string;
     name: string;
+    filterableOnlyOne: string;
     email: string;
     phone: string;
     ip: string;

package/storybook/components/DataGrid/helpers/useSeed.d.ts

@@ -4,5 +4,8 @@ import { SeedProps } from './types';
  */
 export declare const useSeed: (props: SeedProps) => {
     columns: readonly import('./types').Column<import('./types').RowType, unknown>[];
+    filters: import('../../../../src').FilterField[];
+    sorts: import('../../../../src').SortField[];
     rows: import('./types').RowType[];
+    rowsMultiSort: import('./types').RowType[];
 };

package/storybook/components/DataGrid/subcomponents/DataGridRender.d.ts

@@ -8,6 +8,8 @@ interface DataGridRenderProps<TRow, TSummaryRow, TKey extends RowKey = RowKey> {
     dynamicColumns?: boolean;
     filterSortAutomatic?: boolean;
     visibleRefreshFilterSort?: boolean;
+    withExternalSortSettings?: boolean;
+    withExternalFilterSettings?: boolean;
 }
 /**
  * Componente que renderiza el DataGrid para el storybook

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

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

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

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

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

@@ -19,7 +19,6 @@ 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,7 +14,6 @@ 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,7 +7,6 @@ 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/hooks/useCollapse/index.d.ts

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

package/components/SideBar/hooks/useCollapse/useCollapse.d.ts

@@ -1,11 +0,0 @@
-import { IMenuDataWithState } from '../../types';
-/**
- * Hook para manejar el estado de colapso de un item del menu
- * @param {IMenuDataWithState} item - Item del menu
- * @returns {Object} - Objeto con el estado de colapso, el manejador de click y si el item tiene hijos
- */
-export declare const useCollapse: (item: IMenuDataWithState, defaultOpen?: boolean) => {
-    isOpen: boolean;
-    handlerClick: () => void;
-    hasChildren: boolean | undefined;
-};

package/components/SideBar/hooks/useCollapse/useCollapse.js

@@ -1,23 +0,0 @@
-import { useState, useEffect } from "react";
-import { u as useSideBar } from "../useSideBar/index.js";
-import { useIsMobile } from "@m4l/graphics";
-const useCollapse = (item, defaultOpen = false) => {
-  const { onMenuItemClick, onToggleVisible } = useSideBar();
-  const [isOpen, setIsOpen] = useState(defaultOpen);
-  const isMobile = useIsMobile();
-  const hasChildren = item.children && Array.isArray(item.children) && item.children.length > 0;
-  const handlerClick = () => {
-    onMenuItemClick(item);
-    setIsOpen(!isOpen);
-    if (isMobile && (!hasChildren || hasChildren === void 0)) {
-      onToggleVisible(true);
-    }
-  };
-  useEffect(() => {
-    setIsOpen(defaultOpen);
-  }, [defaultOpen]);
-  return { isOpen, handlerClick, hasChildren };
-};
-export {
-  useCollapse as u
-};

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

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

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

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

package/components/SideBar/subcomponents/TreeGroupItems/subcomponents/NodeMenuItem/index.js

@@ -1,69 +0,0 @@
-import { jsxs, jsx } from "react/jsx-runtime";
-import { Collapse } from "@mui/material";
-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 "../ArrowIcon/index.js";
-import { l as ContainerNodeMenuItemStyled } from "../../../../slots/SideBarSlots.js";
-import { c as CLASS_NAME_MENU_ACTIVE, d as CLASS_NAME_ITEM_IN_TREE_ACTIVE, e as CLASS_NAME_HAS_CHILDREN } from "../../../../constants.js";
-import { useModuleSkeleton } from "@m4l/core";
-import { u as useCollapse } from "../../../../hooks/useCollapse/useCollapse.js";
-import { u as useComponentSize } from "../../../../../../hooks/useComponentSize/useComponentSize.js";
-import { M as MenuItem } from "../../../../../mui_extended/MenuItem/MenuItem.js";
-function NodeMenuItem(props) {
-  const { item, size, defaultOpen = false, className, isLastSibling = false } = props;
-  const { urlIconPrefix, classes } = useSideBar();
-  const { isOpen, handlerClick, hasChildren } = useCollapse(item, defaultOpen);
-  const { currentSize } = useComponentSize(size);
-  const isSkeleton = useModuleSkeleton();
-  const ownerState = {
-    active: item.active,
-    itemInTreeActive: item.itemInTreeActive,
-    sidebarSize: currentSize,
-    hasChildren,
-    isLastSibling
-  };
-  const CLASS_NAME_ITEM_STATE = clsx(item.active && CLASS_NAME_MENU_ACTIVE, item.itemInTreeActive && CLASS_NAME_ITEM_IN_TREE_ACTIVE);
-  return /* @__PURE__ */ jsxs(
-    ContainerNodeMenuItemStyled,
-    {
-      className: clsx(classes.containerNodeMenuItem, CLASS_NAME_ITEM_STATE, className),
-      role: "listitem",
-      ownerState,
-      ...process.env.NODE_ENV !== "production" ? { [TEST_PROP_ID]: getNameDataTestId("menuItems") } : {},
-      children: [
-        /* @__PURE__ */ jsx(
-          MenuItem,
-          {
-            className: clsx(
-              CLASS_NAME_ITEM_STATE,
-              className,
-              item.children && item.children.length > 0 && CLASS_NAME_HAS_CHILDREN,
-              item.itemInTreeActive && CLASS_NAME_ITEM_IN_TREE_ACTIVE
-            ),
-            label: item.title,
-            selected: item.active,
-            startIcon: `${urlIconPrefix}${item.iconUrl}`,
-            endIcon: hasChildren ? /* @__PURE__ */ jsx(ArrowIcon, { openState: isOpen, active: item.active }) : null,
-            onClick: () => handlerClick(),
-            size: currentSize
-          }
-        ),
-        hasChildren ? /* @__PURE__ */ jsx(Collapse, { in: isOpen, timeout: "auto", unmountOnExit: true, children: (item.children || []).map((child, index) => /* @__PURE__ */ jsx(
-          NodeMenuItem,
-          {
-            item: child,
-            size: currentSize,
-            defaultOpen: isSkeleton ? false : child.active,
-            isLastSibling: item.children?.length === index + 1
-          },
-          child.title
-        )) }) : null
-      ]
-    }
-  );
-}
-export {
-  NodeMenuItem as N
-};

package/components/SideBar/subcomponents/TreeGroupItems/subcomponents/NodeMenuItem/types.d.ts

@@ -1,9 +0,0 @@
-import { Sizes } from '@m4l/styles';
-import { IMenuDataWithState } from '../../../../types';
-export type NodeMenuItemProps = {
-    item: IMenuDataWithState;
-    defaultOpen?: boolean;
-    size: Extract<Sizes, 'small' | 'medium'>;
-    className?: string;
-    isLastSibling?: boolean;
-};

package/components/SideBar/subcomponents/TreeGroupItems/subcomponents/NodeMenuItemMain/NodeMenuItemMain.d.ts

@@ -1,5 +0,0 @@
-import { NodeMenuItemProps } from '../NodeMenuItem/types';
-/**
- * Componente que representa un nodo menu Item principal.
- */
-export declare const NodeMenuItemMain: (props: NodeMenuItemProps) => import("react/jsx-runtime").JSX.Element;

package/components/SideBar/subcomponents/TreeGroupItems/subcomponents/NodeMenuItemMain/NodeMenuItemMain.js

@@ -1,56 +0,0 @@
-import { jsxs, jsx } from "react/jsx-runtime";
-import { m as ContainerNodeMenuItemMainStyled, M as MenuItemMainStyled } from "../../../../slots/SideBarSlots.js";
-import { g as getNameDataTestId } from "../../../../tests/utils.js";
-import { T as TEST_PROP_ID } from "../../../../../../test/constants_no_mock.js";
-import { A as ArrowIcon } from "../ArrowIcon/index.js";
-import { Collapse } from "@mui/material";
-import { N as NodeMenuItem } from "../NodeMenuItem/index.js";
-import { b as CLASS_NAME_IS_ROOT } from "../../../../constants.js";
-import clsx from "clsx";
-import { useModuleSkeleton } from "@m4l/core";
-import { u as useComponentSize } from "../../../../../../hooks/useComponentSize/useComponentSize.js";
-import { u as useCollapse } from "../../../../hooks/useCollapse/useCollapse.js";
-const NodeMenuItemMain = (props) => {
-  const { item, size, defaultOpen = false } = props;
-  const { currentSize } = useComponentSize(size);
-  const { isOpen, handlerClick, hasChildren } = useCollapse(item, defaultOpen);
-  const isSkeleton = useModuleSkeleton();
-  const ownerState = {
-    active: item.active,
-    itemInTreeActive: item.itemInTreeActive,
-    sidebarSize: currentSize
-  };
-  return /* @__PURE__ */ jsxs(
-    ContainerNodeMenuItemMainStyled,
-    {
-      role: "treeitem",
-      ownerState,
-      ...process.env.NODE_ENV !== "production" ? { [TEST_PROP_ID]: getNameDataTestId("menuItems") } : {},
-      children: [
-        /* @__PURE__ */ jsx(
-          MenuItemMainStyled,
-          {
-            label: item.title,
-            startIcon: hasChildren ? /* @__PURE__ */ jsx(ArrowIcon, { openState: isOpen, active: item.active }) : null,
-            onClick: () => handlerClick(),
-            size: currentSize
-          }
-        ),
-        /* @__PURE__ */ jsx(Collapse, { in: isOpen, timeout: "auto", unmountOnExit: true, children: (item.children || []).map((child, index) => /* @__PURE__ */ jsx(
-          NodeMenuItem,
-          {
-            item: child,
-            size: currentSize,
-            className: clsx(CLASS_NAME_IS_ROOT),
-            defaultOpen: isSkeleton ? false : true,
-            isLastSibling: item.children?.length === index + 1
-          },
-          child.title
-        )) })
-      ]
-    }
-  );
-};
-export {
-  NodeMenuItemMain as N
-};

package/components/SideBar/subcomponents/TreeGroupItems/subcomponents/NodeMenuItemMain/index.d.ts

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

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

@@ -1,4 +0,0 @@
-import { Sizes } from '@m4l/styles';
-export interface TreeGroupItemsProps {
-    size?: Extract<Sizes, 'small' | 'medium'>;
-}

package/components/mui_extended/Divider/index.d.ts

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

package/components/mui_extended/Divider/index.js

@@ -1 +0,0 @@
-

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

@@ -1,4 +0,0 @@
-/**
- * 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

@@ -1,3 +0,0 @@
-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

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