@m4l/components 9.4.6-BE20260109-beta.2 → 9.4.6-BE20260120

package/components/areas/components/AreasAdmin/slots/AreasAdminSlots.d.ts

@@ -58,6 +58,6 @@ export declare const EditAreaHeaderStyled: import('@emotion/styled').StyledCompo
 export declare const EditAreaChipMobileContainerStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Record<string, unknown> & {
     ownerState?: (Partial<import('../types').AreasAdminOwnerState> & Record<string, unknown>) | undefined;
 }, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('react').ClassAttributes<HTMLDivElement> | keyof import('react').HTMLAttributes<HTMLDivElement>>, {}>;
-export declare const NameChipMobileStyled: import('@emotion/styled').StyledComponent<Pick<Omit<import('../../../../mui_extended/Typography/types').TypographyProps, "ref"> & import('react').RefAttributes<HTMLSpanElement>, "size" | "children" | "title" | "component" | "zIndex" | "id" | "disabled" | "paragraph" | "border" | "fontWeight" | "lineHeight" | "letterSpacing" | "fontSize" | "textTransform" | "fontFamily" | "typography" | "variant" | "color" | "dataTestid" | "alignContent" | "alignItems" | "alignSelf" | "bottom" | "boxShadow" | "boxSizing" | "columnGap" | "content" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "fontStyle" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "height" | "justifyContent" | "justifyItems" | "justifySelf" | "left" | "marginBlockEnd" | "marginBlockStart" | "marginBottom" | "marginInlineEnd" | "marginInlineStart" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "order" | "paddingBlockEnd" | "paddingBlockStart" | "paddingBottom" | "paddingInlineEnd" | "paddingInlineStart" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "right" | "rowGap" | "textAlign" | "textOverflow" | "top" | "translate" | "visibility" | "whiteSpace" | "width" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderTop" | "flex" | "gap" | "gridArea" | "gridColumn" | "gridRow" | "margin" | "marginBlock" | "marginInline" | "overflow" | "padding" | "paddingBlock" | "paddingInline" | "className" | "style" | "classes" | "sx" | "p" | "slot" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "autoCapitalize" | "autoFocus" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "enterKeyHint" | "hidden" | "lang" | "nonce" | "spellCheck" | "tabIndex" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "rel" | "resource" | "rev" | "typeof" | "vocab" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "exportparts" | "part" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-braillelabel" | "aria-brailleroledescription" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colindextext" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-description" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowindextext" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerLeave" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "bgcolor" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "displayPrint" | "align" | "htmlFor" | "gutterBottom" | "noWrap" | "variantMapping" | "skeletonWidth" | "skeletonRows" | "ellipsis" | keyof import('react').RefAttributes<HTMLSpanElement>> & import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Record<string, unknown> & {
+export declare const NameChipMobileStyled: import('@emotion/styled').StyledComponent<Pick<Omit<import('../../../../mui_extended/Typography/types').TypographyProps, "ref"> & import('react').RefAttributes<HTMLSpanElement>, "size" | "children" | "title" | "component" | "zIndex" | "id" | "disabled" | "paragraph" | "border" | "fontWeight" | "lineHeight" | "letterSpacing" | "fontSize" | "textTransform" | "fontFamily" | "typography" | "flex" | "variant" | "color" | "dataTestid" | "alignContent" | "alignItems" | "alignSelf" | "bottom" | "boxShadow" | "boxSizing" | "columnGap" | "content" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "fontStyle" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "height" | "justifyContent" | "justifyItems" | "justifySelf" | "left" | "marginBlockEnd" | "marginBlockStart" | "marginBottom" | "marginInlineEnd" | "marginInlineStart" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "order" | "paddingBlockEnd" | "paddingBlockStart" | "paddingBottom" | "paddingInlineEnd" | "paddingInlineStart" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "right" | "rowGap" | "textAlign" | "textOverflow" | "top" | "translate" | "visibility" | "whiteSpace" | "width" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderTop" | "gap" | "gridArea" | "gridColumn" | "gridRow" | "margin" | "marginBlock" | "marginInline" | "overflow" | "padding" | "paddingBlock" | "paddingInline" | "className" | "style" | "classes" | "sx" | "p" | "slot" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "autoCapitalize" | "autoFocus" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "enterKeyHint" | "hidden" | "lang" | "nonce" | "spellCheck" | "tabIndex" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "rel" | "resource" | "rev" | "typeof" | "vocab" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "exportparts" | "part" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-braillelabel" | "aria-brailleroledescription" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colindextext" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-description" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowindextext" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerLeave" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "bgcolor" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "displayPrint" | "align" | "htmlFor" | "gutterBottom" | "noWrap" | "variantMapping" | "skeletonWidth" | "skeletonRows" | "ellipsis" | keyof import('react').RefAttributes<HTMLSpanElement>> & import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Record<string, unknown> & {
     ownerState?: (Partial<import('../types').AreasAdminOwnerState> & Record<string, unknown>) | undefined;
 }, {}, {}>;

package/components/areas/contexts/AreasContext/store.js

@@ -326,7 +326,7 @@ const createAreasStore = (initProps, storeDevtoolsEnabled = false) => {
             for (let index = 0; index < get().hashAreas[areaId].layoutItemsIds.length; index++) {
               const layoutItemId = get().hashAreas[areaId].layoutItemsIds[index];
               const layoutItem = get().hashWindows[layoutItemId];
-              if (layoutItem.parentId === removeLayoutId) {
+              if (layoutItem && layoutItem.parentId === removeLayoutId) {
                 get().areaActions.closeLayout(areaId, layoutItem.windowId);
               }
             }

package/components/datagrids/Datagrid.styles.js

@@ -1141,6 +1141,30 @@ const dataGridStyles = {
     minWidth: "max-content",
     overflow: "visible",
     flexWrap: "nowrap"
+  }),
+  /**
+   * Estilos para el contenedor raíz del renderizador de celdas de grupo por defecto
+   */
+  defaultRenderGroupCellRoot: ({ theme, ownerState }) => ({
+    display: "flex",
+    alignItems: "center",
+    gap: theme.vars.size.baseSpacings.sp2,
+    cursor: "pointer",
+    width: "100%",
+    justifyContent: ownerState?.align === "center" ? "center" : ownerState?.align === "right" ? "flex-end" : "flex-start"
+  }),
+  /**
+   * Estilos para el texto del renderizador de celdas de grupo por defecto
+   */
+  defaultRenderGroupCellText: ({ ownerState }) => ({
+    fontWeight: 600,
+    display: "-webkit-box",
+    WebkitBoxOrient: "vertical",
+    WebkitLineClamp: ownerState?.currentRowHeightVariant === "compact" ? 1 : ownerState?.currentRowHeightVariant === "confortable" ? 3 : 2,
+    overflow: "hidden",
+    textOverflow: "ellipsis",
+    wordBreak: "break-word",
+    whiteSpace: "normal"
   })
 };
 export {

package/components/datagrids/components/BaseDataGrid/BaseDataGrid.d.ts

@@ -0,0 +1,12 @@
+import { ReactNode } from 'react';
+import { DataGridProps, RowKey } from '../../types';
+/**
+ * BaseDataGrid - Componente interno que contiene toda la lógica compartida
+ * entre DataGrid y TreeDataGrid.
+ *
+ * IMPORTANTE: Este componente es INTERNO y NO debe ser exportado públicamente.
+ * Los usuarios deben usar DataGrid o TreeDataGrid.
+ */
+export declare function BaseDataGrid<TRow, TSummaryRow, TKey extends RowKey = RowKey>(props: DataGridProps<TRow, TSummaryRow, TKey> & {
+    children: ReactNode;
+}): import("react/jsx-runtime").JSX.Element;

package/components/datagrids/components/BaseDataGrid/BaseDataGrid.js

@@ -0,0 +1,131 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useRef } from "react";
+import { useModuleSkeleton } from "@m4l/core";
+import { T as TEST_PROP_COLUMNS } from "../../types.js";
+import { T as TEST_PROP_ID } from "../../../../test/constants_no_mock.js";
+import { a as getNameDataTestId } from "../../../../test/getNameDataTestId.js";
+import { T as TEST_SKELETON, D as DATAGRID_PREFIX_NAME } from "../../constants.js";
+import { D as DataGridRootStyled, C as CustomHeaderStyled } from "../../slots/DataGridSlot.js";
+import { a as getComponentSlotRoot } from "../../../../utils/getComponentSlotRoot.js";
+import { u as useComponentSize } from "../../../../hooks/useComponentSize/useComponentSize.js";
+import { D as DataGridProvider } from "../../contexts/DataGridContext/DataGridContext.js";
+import { F as FilterProvider } from "../../contexts/FilterContext/FilterContext.js";
+import { H as HeaderActions } from "../../subcomponents/HeaderActions/HeaderActions.js";
+import { C as ControlNavigate } from "../../subcomponents/ControlNavigate/ControlNavigate.js";
+function BaseDataGrid(props) {
+  const {
+    id,
+    withActions = true,
+    rows,
+    columns,
+    actionsProps,
+    rowKeyGetter,
+    rowActionsGetter,
+    rowHeaderHeights,
+    rowHeights,
+    initialRowHeightVariant,
+    checkedRows,
+    onCheckedRowsChange,
+    checkedRowsMultiple,
+    dataTestId = "",
+    customHeader: CustomHeader,
+    visibleCustomHeader = true,
+    defaultConfig,
+    onChangeConfig,
+    defaultUserColumns,
+    onChangeUserColumns,
+    size,
+    externalSortSettings,
+    externalFilterSettings,
+    defaultViewMode,
+    cardsViewConfig,
+    children
+  } = props;
+  const {
+    withSettings,
+    settingsProps,
+    withRowsCount,
+    withLocalFilters,
+    leftActions,
+    rightActions,
+    withPager,
+    pagerOptions
+  } = actionsProps;
+  const { currentSize } = useComponentSize(size);
+  const refDataGrid = useRef(null);
+  const classRoot = getComponentSlotRoot(DATAGRID_PREFIX_NAME);
+  const ownerState = {
+    visibleCustomHeader
+  };
+  const isSkeleton = useModuleSkeleton();
+  return /* @__PURE__ */ jsx(
+    DataGridRootStyled,
+    {
+      ref: refDataGrid,
+      className: classRoot,
+      ...process.env.NODE_ENV !== "production" ? {
+        [TEST_PROP_COLUMNS]: JSON.stringify(columns),
+        [TEST_PROP_ID]: getNameDataTestId(
+          DATAGRID_PREFIX_NAME,
+          "root",
+          dataTestId
+        ),
+        [TEST_SKELETON]: isSkeleton ? true : false
+      } : {},
+      children: /* @__PURE__ */ jsx(
+        DataGridProvider,
+        {
+          id,
+          columns,
+          rowHeights,
+          rowHeaderHeights,
+          initialRowHeightVariant,
+          rowsCount: rows.length,
+          checkedRows,
+          rowActionsGetter,
+          onCheckedRowsChange,
+          checkedRowsMultiple,
+          rowKeyGetter,
+          rows,
+          defaultConfig,
+          onChangeConfig,
+          defaultUserColumns,
+          onChangeUserColumns,
+          size: currentSize,
+          externalSortSettings,
+          externalFilterSettings,
+          defaultViewMode,
+          cardsViewConfig,
+          children: /* @__PURE__ */ jsxs(FilterProvider, { initialActiveFilters: false, children: [
+            withActions && actionsProps && /* @__PURE__ */ jsx(
+              HeaderActions,
+              {
+                withSettings,
+                settingsProps,
+                withRowsCount,
+                withLocalFilters,
+                leftActions,
+                rightActions,
+                withPager,
+                columns,
+                size: currentSize
+              }
+            ),
+            CustomHeader ? /* @__PURE__ */ jsx(CustomHeaderStyled, { ownerState, children: CustomHeader }) : null,
+            children,
+            withPager && /* @__PURE__ */ jsx(
+              ControlNavigate,
+              {
+                size: currentSize,
+                ...{ withPager, pagerOptions }
+              }
+            )
+          ] })
+        }
+      )
+    }
+  );
+}
+export {
+  BaseDataGrid as B
+};

package/components/datagrids/components/BaseDataGrid/index.d.ts

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

package/components/datagrids/components/BaseDataGrid/index.js

@@ -0,0 +1 @@
+

package/components/datagrids/components/DataGridMain/DataGridMain.js

@@ -1,150 +1,38 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import { useRef } from "react";
-import { useModuleSkeleton } from "@m4l/core";
-import { T as TEST_PROP_COLUMNS } from "../../types.js";
-import { T as TEST_PROP_ID } from "../../../../test/constants_no_mock.js";
-import { a as getNameDataTestId } from "../../../../test/getNameDataTestId.js";
-import { T as TEST_SKELETON, D as DATAGRID_PREFIX_NAME } from "../../constants.js";
-import { D as DataGridRootStyled, C as CustomHeaderStyled } from "../../slots/DataGridSlot.js";
-import { a as getComponentSlotRoot } from "../../../../utils/getComponentSlotRoot.js";
-import { u as useComponentSize } from "../../../../hooks/useComponentSize/useComponentSize.js";
-import { D as DataGridProvider } from "../../contexts/DataGridContext/DataGridContext.js";
-import { F as FilterProvider } from "../../contexts/FilterContext/FilterContext.js";
-import { H as HeaderActions } from "../../subcomponents/HeaderActions/HeaderActions.js";
+import { jsx } from "react/jsx-runtime";
+import { B as BaseDataGrid } from "../BaseDataGrid/BaseDataGrid.js";
 import { R as RenderContent } from "../../views/adapters/RenderContent/RenderContent.js";
-import { C as ControlNavigate } from "../../subcomponents/ControlNavigate/ControlNavigate.js";
 function DataGrid(props) {
   const {
     id,
-    withActions = true,
-    rows,
+    withActions,
     columns,
-    actionsProps,
+    rows,
     selectedRows,
     onSelectedRowsChange,
     rowKeyGetter,
-    rowActionsGetter,
     onRowsChange,
-    rowHeaderHeights,
-    rowHeights,
-    initialRowHeightVariant,
-    checkedRows,
-    onCheckedRowsChange,
-    checkedRowsMultiple,
-    dataTestId = "",
-    customHeader: CustomHeader,
-    visibleCustomHeader = true,
-    defaultConfig,
-    onChangeConfig,
-    defaultUserColumns,
-    onChangeUserColumns,
-    size,
-    externalSortSettings,
-    externalFilterSettings,
-    defaultViewMode,
     cardsViewConfig,
-    focusOnRowKey
+    focusOnRowKey,
+    checkedRows,
+    onCheckedRowsChange
   } = props;
-  const {
-    withSettings,
-    settingsProps,
-    withRowsCount,
-    withLocalFilters,
-    leftActions,
-    rightActions,
-    withPager,
-    pagerOptions
-  } = actionsProps;
-  const { currentSize } = useComponentSize(size);
-  const refDataGrid = useRef(null);
-  const classRoot = getComponentSlotRoot(DATAGRID_PREFIX_NAME);
-  const ownerState = {
-    visibleCustomHeader
-  };
-  const isSkeleton = useModuleSkeleton();
-  return /* @__PURE__ */ jsx(
-    DataGridRootStyled,
+  return /* @__PURE__ */ jsx(BaseDataGrid, { ...props, children: /* @__PURE__ */ jsx(
+    RenderContent,
     {
-      ref: refDataGrid,
-      className: classRoot,
-      ...process.env.NODE_ENV !== "production" ? {
-        [TEST_PROP_COLUMNS]: JSON.stringify(columns),
-        [TEST_PROP_ID]: getNameDataTestId(
-          DATAGRID_PREFIX_NAME,
-          "root",
-          dataTestId
-        ),
-        [TEST_SKELETON]: isSkeleton ? true : false
-      } : {},
-      children: /* @__PURE__ */ jsx(
-        DataGridProvider,
-        {
-          id: props.id,
-          columns,
-          rowHeights,
-          rowHeaderHeights,
-          initialRowHeightVariant,
-          rowsCount: rows.length,
-          checkedRows,
-          rowActionsGetter,
-          onCheckedRowsChange,
-          checkedRowsMultiple,
-          rowKeyGetter,
-          rows,
-          defaultConfig,
-          onChangeConfig,
-          defaultUserColumns,
-          onChangeUserColumns,
-          size: currentSize,
-          externalSortSettings,
-          externalFilterSettings,
-          defaultViewMode,
-          cardsViewConfig,
-          children: /* @__PURE__ */ jsxs(FilterProvider, { initialActiveFilters: false, children: [
-            withActions && actionsProps && /* @__PURE__ */ jsx(
-              HeaderActions,
-              {
-                withSettings,
-                settingsProps,
-                withRowsCount,
-                withLocalFilters,
-                leftActions,
-                rightActions,
-                withPager,
-                columns,
-                size: currentSize
-              }
-            ),
-            CustomHeader ? /* @__PURE__ */ jsx(CustomHeaderStyled, { ownerState, children: CustomHeader }) : null,
-            /* @__PURE__ */ jsx(
-              RenderContent,
-              {
-                id,
-                withActions,
-                columns,
-                rows,
-                selectedRows,
-                onSelectedRowsChange,
-                rowKeyGetter,
-                onRowsChange,
-                cardsViewConfig,
-                focusOnRowKey,
-                checkedRows,
-                onCheckedRowsChange
-              }
-            ),
-            withPager && /* @__PURE__ */ jsx(
-              ControlNavigate,
-              {
-                size: currentSize,
-                ...{ withPager, pagerOptions }
-              }
-            )
-          ] })
-        }
-      )
+      id,
+      withActions,
+      columns,
+      rows,
+      selectedRows,
+      onSelectedRowsChange,
+      rowKeyGetter,
+      onRowsChange,
+      cardsViewConfig,
+      focusOnRowKey,
+      checkedRows,
+      onCheckedRowsChange
     }
-  );
+  ) });
 }
 export {
   DataGrid as D

package/components/datagrids/components/TreeDataGrid/TreeDataGrid.d.ts

@@ -0,0 +1,22 @@
+import { TreeDataGridProps, RowKey } from '../../types';
+/**
+ * TreeDataGrid es un componente para mostrar datos jerárquicos con agrupación.
+ *
+ * Características principales:
+ * - Vista de tabla con agrupación jerárquica
+ * - Expansión/colapso de grupos
+ * - Todas las funcionalidades del DataGrid (paginación, filtros, ordenamiento, etc.)
+ *
+ * IMPORTANTE: Solo soporta vista de tabla (no cards).
+ *
+ * El groupBy se calcula automáticamente desde las columnas con grouped=true,
+ * ordenadas por groupOrder. El desarrollador solo define:
+ * - `grouped: true` en columnas que deben agruparse por defecto
+ * - `groupable: true` en columnas que el usuario puede agrupar/desagrupar
+ *
+ * Modos de control para expandedGroupIds:
+ * - Sin props: Estado interno, todos los grupos colapsados inicialmente
+ * - Solo expandedGroupIds: Usa ese valor como inicial, luego maneja internamente
+ * - expandedGroupIds + onExpandedGroupIdsChange: Modo controlado, padre maneja estado
+ */
+export declare function TreeDataGrid<TRow, TSummaryRow, TKey extends RowKey = RowKey>(props: TreeDataGridProps<TRow, TSummaryRow, TKey>): import("react/jsx-runtime").JSX.Element;

package/components/datagrids/components/TreeDataGrid/TreeDataGrid.js

@@ -0,0 +1,50 @@
+import { jsx } from "react/jsx-runtime";
+import { useState } from "react";
+import { T as TableView } from "../../views/TableView/TableView.js";
+import { B as BaseDataGrid } from "../BaseDataGrid/BaseDataGrid.js";
+function TreeDataGrid(props) {
+  const {
+    id,
+    withActions,
+    columns,
+    rows,
+    selectedRows,
+    onSelectedRowsChange,
+    rowKeyGetter,
+    onRowsChange,
+    focusOnRowKey,
+    checkedRows,
+    onCheckedRowsChange,
+    rowGrouper,
+    expandedGroupIds: expandedGroupIdsProp,
+    onExpandedGroupIdsChange: onExpandedGroupIdsChangeProp
+  } = props;
+  const [internalExpandedGroupIds, setInternalExpandedGroupIds] = useState(() => new Set(expandedGroupIdsProp ?? []));
+  const isControlled = expandedGroupIdsProp !== void 0 && onExpandedGroupIdsChangeProp !== void 0;
+  const expandedGroupIds = isControlled ? expandedGroupIdsProp : internalExpandedGroupIds;
+  const onExpandedGroupIdsChange = isControlled ? onExpandedGroupIdsChangeProp : setInternalExpandedGroupIds;
+  return /* @__PURE__ */ jsx(BaseDataGrid, { ...props, children: /* @__PURE__ */ jsx(
+    TableView,
+    {
+      id,
+      withActions,
+      columns,
+      rows,
+      selectedRows,
+      onSelectedRowsChange,
+      rowKeyGetter,
+      onRowsChange,
+      focusOnRowKey,
+      checkedRows,
+      onCheckedRowsChange,
+      treeProps: {
+        rowGrouper,
+        expandedGroupIds,
+        onExpandedGroupIdsChange
+      }
+    }
+  ) });
+}
+export {
+  TreeDataGrid as T
+};

package/components/datagrids/components/TreeDataGrid/TreeDataGrid.test.d.ts

@@ -0,0 +1 @@
+export {};

package/components/datagrids/components/TreeDataGrid/index.d.ts

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

package/components/datagrids/components/TreeDataGrid/index.js

@@ -0,0 +1 @@
+

package/components/datagrids/constants.js

@@ -1,5 +1,4 @@
 const DATAGRID_PREFIX_NAME = "M4LDataGrid";
-const DATAGRID_SELECT_COLUMN_KEY = "M4LDataGrid-CheckedColumn";
 const DATAGRID_ACTIONS_COLUMN_KEY = "M4LDataGrid-ActionsColumn";
 const TEST_SKELETON = "data-skeleton";
 const DATAGRID_HEADER_RENDER_CLICK_KEY = "M4LDataGrid-HeaderRenderClick";
@@ -45,8 +44,7 @@ export {
   DATAGRID_ROW_HEIGHTS as a,
   DATAGRID_ROW_HEADER_HEIGHTS as b,
   DATAGRID_ID_DICTIONARY as c,
-  DATAGRID_SELECT_COLUMN_KEY as d,
-  DATAGRID_ACTIONS_COLUMN_KEY as e,
-  DATAGRID_SEMANTIC_WIDTHS as f,
-  DATAGRID_HEADER_RENDER_CLICK_KEY as g
+  DATAGRID_ACTIONS_COLUMN_KEY as d,
+  DATAGRID_SEMANTIC_WIDTHS as e,
+  DATAGRID_HEADER_RENDER_CLICK_KEY as f
 };

package/components/datagrids/contexts/DataGridContext/DataGridContext.js

@@ -192,8 +192,8 @@ function DataGridProvider(props) {
           columns,
           "table",
           resolvedDefaultConfig?.columnsConfig,
-          { frozen: false },
-          { originalFrozen: false }
+          { frozen: false, grouped: false, groupOrder: 0 },
+          { originalFrozen: false, originalGrouped: false, originalGroupOrder: 0 }
         )
       );
       const finalCardsConfig = (() => {
@@ -267,12 +267,16 @@ function DataGridProvider(props) {
         if (newColumnsForView.length > 0) {
           const colLength = currentConfig.length;
           const viewSpecificDefaults = viewModeParam === "cards" ? { showTitle: false } : {
-            frozen: false
+            frozen: false,
+            grouped: false,
+            groupOrder: 0
           };
           const originalViewSpecificDefaults = viewModeParam === "cards" ? {
             originalShowTitle: false
           } : {
-            originalFrozen: false
+            originalFrozen: false,
+            originalGrouped: false,
+            originalGroupOrder: 0
           };
           const newColConfig = getInitialColumnsConfig(
             id,

package/components/datagrids/contexts/DataGridContext/types.d.ts

@@ -23,16 +23,26 @@ export interface BaseConfigColumn {
     visible: boolean;
     index: number;
     frozen: boolean;
+    /**
+     * Si la columna está agrupada actualmente.
+     * Solo aplica para TreeDataGrid.
+     */
+    grouped?: boolean;
+    /**
+     * Orden en la jerarquía de agrupación (0 = primer nivel).
+     * Solo aplica para TreeDataGrid.
+     */
+    groupOrder?: number;
     /**
      * @deprecated internamente el componente usa el name de columns.
      */
     name?: string;
 }
 /**
- * Configuración base para vista cards - omite frozen y agrega showTitle
+ * Configuración base para vista cards - omite frozen, grouped y groupOrder y agrega showTitle
  * USO: Los desarrolladores pasan esto en defaultUserColumns.columnsConfigCards
  */
-export interface BaseConfigColumnCards extends Omit<BaseConfigColumn, 'frozen'> {
+export interface BaseConfigColumnCards extends Omit<BaseConfigColumn, 'frozen' | 'grouped' | 'groupOrder'> {
     showTitle: boolean;
 }
 /**
@@ -44,12 +54,16 @@ export interface IConfigColumn extends BaseConfigColumn {
     originalIndex: number;
     originalVisible: boolean;
     originalFrozen: boolean;
+    /** Valor original de grouped definido en la columna */
+    originalGrouped?: boolean;
+    /** Valor original de groupOrder */
+    originalGroupOrder?: number;
 }
 /**
  * Configuración extendida para cards (estado interno)
  * USO INTERNO: El contexto agrega estas propiedades para tracking y gestión de estado
  */
-export interface IConfigColumnCards extends Omit<IConfigColumn, 'frozen' | 'originalFrozen'> {
+export interface IConfigColumnCards extends Omit<IConfigColumn, 'frozen' | 'originalFrozen' | 'grouped' | 'groupOrder' | 'originalGrouped' | 'originalGroupOrder'> {
     showTitle: boolean;
     originalShowTitle: boolean;
 }
@@ -60,7 +74,9 @@ export type ViewMode = 'table' | 'cards';
  * EXTENSIBILIDAD: Agregar aquí nuevas propiedades para nuevas vistas (ej: columnsConfigList)
  */
 export interface IGridConfigExtended extends IGridConfig {
+    /** Configuración de columnas para vista cards */
     columnsConfigCards?: BaseConfigColumnCards[];
+    /** Modo de vista actual (table/cards) */
     viewMode?: ViewMode;
 }
 export interface DataGridProviderProps<TRow, TSummaryRow, TKey extends RowKey = RowKey> extends Pick<GridProps<TRow, TSummaryRow, TKey>, 'rows' | 'columns' | 'rowActionsGetter' | 'rowHeaderHeights' | 'rowHeights' | 'initialRowHeightVariant' | 'checkedRows' | 'onCheckedRowsChange' | 'checkedRowsMultiple' | 'rowKeyGetter' | 'externalSortSettings' | 'externalFilterSettings' | 'defaultViewMode' | 'cardsViewConfig'> {

package/components/datagrids/dictionary.d.ts

@@ -34,6 +34,9 @@ export declare const DICTIONARY: {
     UNFREEZE_COLUMN: string;
     HIDE_COLUMN: string;
     ADD_FILTER_COLUMN: string;
+    SETTINGS_COLUMN_GROUP: string;
+    GROUP_BY_COLUMN: string;
+    REMOVE_GROUP_COLUMN: string;
     VIEW_MODE_TABLE: string;
     VIEW_MODE_CARDS: string;
     TOOLTIP_VIEW_MODE: string;

package/components/datagrids/dictionary.js

@@ -34,6 +34,10 @@ const DICTIONARY = {
   UNFREEZE_COLUMN: `${DATAGRID_ID_DICTIONARY}.unfreeze_column`,
   HIDE_COLUMN: `${DATAGRID_ID_DICTIONARY}.hide_column`,
   ADD_FILTER_COLUMN: `${DATAGRID_ID_DICTIONARY}.add_filter`,
+  // Labels para agrupación de columnas (Row Grouping)
+  SETTINGS_COLUMN_GROUP: `${DATAGRID_ID_DICTIONARY}.settings_column_group`,
+  GROUP_BY_COLUMN: `${DATAGRID_ID_DICTIONARY}.group_by_column`,
+  REMOVE_GROUP_COLUMN: `${DATAGRID_ID_DICTIONARY}.remove_group_column`,
   VIEW_MODE_TABLE: `${DATAGRID_ID_DICTIONARY}.view_mode_table`,
   VIEW_MODE_CARDS: `${DATAGRID_ID_DICTIONARY}.view_mode_cards`,
   TOOLTIP_VIEW_MODE: `${DATAGRID_ID_DICTIONARY}.tooltip_view_mode`,

package/components/datagrids/formatters/ColumnBooleanFormatter/ColumnBooleanGroupFormatter.d.ts

@@ -0,0 +1,15 @@
+import { ColumnBooleanFormatterProps } from './types';
+import { RenderGroupCellProps } from 'react-data-grid';
+/**
+ * Formatter para mostrar valores booleanos en filas de grupo (TreeDataGrid).
+ *
+ * Esta función es utilizada cuando el TreeDataGrid agrupa filas y necesita
+ * mostrar un valor booleano en el encabezado del grupo. Usa la primera fila
+ * del grupo (childRows[0]) como fuente de datos representativa.
+ * @param props - Propiedades del formatter que incluyen:
+ *                - fieldValue: Campo que contiene el valor booleano
+ *                - presentationType: Tipo de presentación (text, icon, etc.)
+ *                - Component: Componente wrapper opcional
+ * @returns Función que recibe RenderGroupCellProps y retorna el BooleanFormatter
+ */
+export declare function ColumnBooleanGroupFormatter<TRow>(props: ColumnBooleanFormatterProps<TRow>): (groupProps: RenderGroupCellProps<TRow>) => import("react/jsx-runtime").JSX.Element;