@m4l/components 9.2.62 → 9.2.63-JT15072025.beta.1

package/components/DataGrid/subcomponents/Table/subcomponents/ActionsColumn.js

@@ -35,7 +35,7 @@ const ActionsColumn = {
   sortable: false,
   frozen: true,
   type: "custom",
-  formatter: ActionsFormatter
+  renderCell: ActionsFormatter
 };
 function getActionLabel() {
   return "";

package/components/DataGrid/subcomponents/Table/subcomponents/CheckboxFormatter.d.ts

@@ -1,2 +1,2 @@
-import { CheckboxFormatterProps } from 'react-data-grid';
-export declare const CheckboxFormatter: import('react').ForwardRefExoticComponent<CheckboxFormatterProps & import('react').RefAttributes<HTMLInputElement>>;
+import { RenderCheckboxProps } from 'react-data-grid';
+export declare const CheckboxFormatter: import('react').ForwardRefExoticComponent<RenderCheckboxProps & import('react').RefAttributes<HTMLInputElement>>;

package/components/DataGrid/subcomponents/Table/subcomponents/DraggableHeaderRenderer.d.ts

@@ -1,5 +1,5 @@
-import { HeaderRendererProps } from 'react-data-grid';
-interface DraggableHeaderRendererProps<TRow> extends HeaderRendererProps<TRow> {
+import { RenderHeaderCellProps } from 'react-data-grid';
+interface DraggableHeaderRendererProps<TRow> extends RenderHeaderCellProps<TRow> {
     onColumnsReorder: (sourceKey: string, targetKey: string) => void;
     openPopover?: (anchorEl: HTMLElement, columnKey: string) => void;
 }

package/components/DataGrid/subcomponents/Table/subcomponents/DraggableHeaderRenderer.js

@@ -2,10 +2,10 @@ import { jsxs, jsx } from "react/jsx-runtime";
 import { useState, useEffect } from "react";
 import { useModuleDictionary, useEnvironment } from "@m4l/core";
 import { useDrag, useDrop } from "react-dnd";
-import { HeaderRenderer } from "react-data-grid";
+import { renderHeaderCell } from "react-data-grid";
 import { u as useFocusRef } from "../hooks/useFocusRef.js";
 import { u as useFilters } from "../../../hooks/useFilters.js";
-import { N as NameColumnIconStyled, m as NameColumnStyled, I as IconColumnStyled, n as DraggableHeaderRootStyled, B as ButtonHeaderActionsStyled, o as DraggableWrapperInputBaseStyled, p as IconSearchStyled, H as HeaderInputBaseStyled } from "../../../slots/DataGridSlot.js";
+import { N as NameColumnIconStyled, n as NameColumnStyled, I as IconColumnStyled, o as DraggableHeaderRootStyled, B as ButtonHeaderActionsStyled, p as DraggableWrapperInputBaseStyled, q as IconSearchStyled, H as HeaderInputBaseStyled } from "../../../slots/DataGridSlot.js";
 import { p as pathIcons } from "../../../icons.js";
 import { u as useDataGrid } from "../../../hooks/useDataGrid.js";
 import { I as Icon } from "../../../../Icon/Icon.js";
@@ -13,12 +13,13 @@ function DraggableHeaderRenderer(props) {
   const {
     onColumnsReorder,
     column,
-    isCellSelected,
+    tabIndex: headerTabIndex,
     openPopover,
-    onSort,
     ...others
   } = props;
-  const { ref, tabIndex } = useFocusRef(isCellSelected);
+  const { ref, tabIndex } = useFocusRef(
+    headerTabIndex !== void 0 && headerTabIndex >= 0
+  );
   const { getLabel } = useModuleDictionary();
   const { size, classes, externalSortSettings, externalFilterSettings } = useDataGrid();
   const { host_static_assets, environment_assets } = useEnvironment();
@@ -103,7 +104,19 @@ function DraggableHeaderRenderer(props) {
   if (!newColumn.withinHeaderRenderer) {
     const columnIcons = getColumnIcons();
     if (columnIcons) {
-      newColumn.name = /* @__PURE__ */ jsxs(NameColumnIconStyled, { children: [
+      const getJustifyContent = () => {
+        switch (column.align) {
+          case "left":
+            return "flex-start";
+          case "center":
+            return "center";
+          case "right":
+            return "flex-end";
+          default:
+            return "flex-start";
+        }
+      };
+      newColumn.name = /* @__PURE__ */ jsxs(NameColumnIconStyled, { style: { justifyContent: getJustifyContent() }, children: [
         /* @__PURE__ */ jsx(NameColumnStyled, { children: newColumn.name }),
         /* @__PURE__ */ jsx(IconColumnStyled, { children: columnIcons })
       ] });
@@ -121,6 +134,9 @@ function DraggableHeaderRenderer(props) {
         opacity: isDragging ? 0.5 : 1,
         backgroundColor: isOver ? "#ececec" : void 0
       },
+      onClick: (e) => {
+        e.stopPropagation();
+      },
       children: [
         /* @__PURE__ */ jsx(
           ButtonHeaderActionsStyled,
@@ -131,12 +147,10 @@ function DraggableHeaderRenderer(props) {
               openPopover?.(e.currentTarget, column.key);
             },
             children: /* @__PURE__ */ jsx(
-              HeaderRenderer,
+              renderHeaderCell,
               {
                 column: newColumn,
-                isCellSelected,
-                onSort: () => {
-                },
+                tabIndex: headerTabIndex,
                 ...others
               }
             )

package/components/DataGrid/subcomponents/Table/subcomponents/HeaderRenderClick/HeaderRenderClick.js

@@ -2,7 +2,7 @@ import { jsx } from "react/jsx-runtime";
 import { useState, useMemo, useEffect, useCallback } from "react";
 import { useModuleDictionary } from "@m4l/core";
 import { M as MenuItem } from "../../../../../mui_extended/MenuItem/MenuItem.js";
-import { M as MenuListStyled, q as HeaderRenderClickStyled } from "../../../../slots/DataGridSlot.js";
+import { M as MenuListStyled, r as HeaderRenderClickStyled } from "../../../../slots/DataGridSlot.js";
 import { M as MenuDivider } from "../../../../../mui_extended/MenuDivider/MenuDivider.js";
 import { P as Popover } from "../../../../../mui_extended/Popover/Popover.js";
 import { D as DICTIONARY } from "../../../../dictionary.js";
@@ -128,7 +128,7 @@ function HeaderRenderClick(props) {
         paper: {
           ...paperProps,
           sx: {
-            mt: !activeFilters ? 0.3 : 6.5,
+            mt: !activeFilters ? 0.3 : 5.6,
             ...paperProps?.sx
           }
         }

package/components/DataGrid/subcomponents/Table/subcomponents/SelectColumn.js

@@ -5,13 +5,13 @@ import { d as DATAGRID_SELECT_COLUMN_KEY } from "../../../constants.js";
 const filterColumnClassName = "filter-cell";
 const filterHeight = 35;
 function SelectGroupFormatter(props) {
-  const [isRowSelected, onRowSelectionChange] = useRowSelection();
+  const { isRowSelected, onRowSelectionChange } = useRowSelection();
   const onChange = (checked) => {
     onRowSelectionChange({ row: props.row, checked, isShiftClick: false });
   };
   const cellFormater = SelectCellFormatter({
     value: isRowSelected,
-    isCellSelected: props.isCellSelected,
+    tabIndex: props.tabIndex,
     onChange,
     "aria-label": "Select Group"
   });
@@ -32,7 +32,7 @@ function SelectFormatter(props) {
     SelectCellFormatter,
     {
       value: checkedRows?.has(rowKeyGetter(props.row)) || false,
-      isCellSelected: props.isCellSelected,
+      tabIndex: props.tabIndex,
       onChange,
       "aria-label": "Select"
     }
@@ -53,7 +53,7 @@ const SelectColumnHeaderRenderer = (props) => {
   const allRowsChecked = rows.length === checkedRows?.size;
   return SelectCellFormatter({
     "aria-label": "Select All",
-    isCellSelected: props.isCellSelected,
+    tabIndex: props.tabIndex,
     value: allRowsChecked,
     onChange: onAllRowsCheckedChange
   });
@@ -68,9 +68,9 @@ const SelectColumn = {
   sortable: false,
   frozen: true,
   type: "boolean",
-  headerRenderer: SelectColumnHeaderRenderer,
-  formatter: SelectFormatter,
-  groupFormatter: SelectGroupFormatter
+  renderHeaderCell: SelectColumnHeaderRenderer,
+  renderCell: SelectFormatter,
+  renderGroupCell: SelectGroupFormatter
 };
 export {
   SelectColumn as S,

package/components/DataGrid/subcomponents/editors/TextEditor/index.d.ts

@@ -1,10 +1,10 @@
-import { EditorProps } from 'react-data-grid';
+import { RenderEditCellProps } from 'react-data-grid';
 /**
  * TODO: Documentar
  */
-export declare function TextEditor<TRow, TSummaryRow>({ row, column, onRowChange, onClose, }: EditorProps<TRow, TSummaryRow>): import("react/jsx-runtime").JSX.Element;
+export declare function TextEditor<TRow, TSummaryRow>({ row, column, onRowChange, onClose, }: RenderEditCellProps<TRow, TSummaryRow>): import("react/jsx-runtime").JSX.Element;
 /**
  * TODO: Documentar
  */
-export declare function NumberEditor<TRow, TSummaryRow>({ row, column, onRowChange, onClose, }: EditorProps<TRow, TSummaryRow>): import("react/jsx-runtime").JSX.Element;
+export declare function NumberEditor<TRow, TSummaryRow>({ row, column, onRowChange, onClose, }: RenderEditCellProps<TRow, TSummaryRow>): import("react/jsx-runtime").JSX.Element;
 export default TextEditor;

package/components/DataGrid/subcomponents/editors/TextEditor/index.js

@@ -1,5 +1,5 @@
 import { jsx } from "react/jsx-runtime";
-import { r as InputTextEditorStyled } from "../../../slots/DataGridSlot.js";
+import { s as InputTextEditorStyled } from "../../../slots/DataGridSlot.js";
 function autoFocusAndSelect(input) {
   input?.focus();
   input?.select();

package/components/DataGrid/types.d.ts

@@ -1,15 +1,15 @@
 import { Maybe } from '@m4l/core';
 import { Theme } from '@mui/material/styles';
-import { Column, RowsChangeData, FormatterProps } from 'react-data-grid';
+import { Column, RowsChangeData, RenderCellProps, DataGridProps as NativeDataGridProps } from 'react-data-grid';
 import { MenuAction } from '../MenuActions/types';
-import { ActionsSlots, ColumnsConfigSlots, ControlNavigateSlots, DataGridSlots, RowsCountSlots, TableSlots, TextEditorSlots } from './slots/DataGridEnum';
+import { ActionsSlots, ColumnIconFormatterSlots, ColumnsConfigSlots, ControlNavigateSlots, DataGridSlots, RowsCountSlots, TableSlots, TextEditorSlots } from './slots/DataGridEnum';
 import { OverridesStyleRules } from '@mui/material/styles/overrides';
 import { DATAGRID_PREFIX_NAME } from './constants';
 import { IGridConfig } from './contexts/DataGridContext/types';
 import { Sizes } from '@m4l/styles';
 import { PagerProps } from '../Pager';
 import { SettingsProps } from './subcomponents/HeaderActions/subcomponents/Settings/types';
-export type GridFormatterPropss<T, SR> = FormatterProps<T, SR>;
+export type GridFormatterPropss<T, SR> = RenderCellProps<T, SR>;
 export type { ColumnUncertaintyFormatter, ColumnPointsFormatter, ColumnNestedValueFormatter, } from './formatters';
 export declare type ColumnType = 'string' | 'date' | 'number' | 'boolean' | 'custom';
 export declare type ColumnAlign = 'left' | 'center' | 'right';
@@ -31,9 +31,10 @@ declare module 'react-data-grid' {
         align?: ColumnAlign;
         isDraggable?: boolean;
         withFilter?: boolean;
-        withinHeaderRenderer?: React.FunctionComponent<HeaderRendererProps<TRow, TSummaryRow>>;
+        withinHeaderRenderer?: React.FunctionComponent<RenderHeaderCellProps<TRow, TSummaryRow>>;
         customFilter?: (row: TRow, value: string) => boolean;
         customSort?: (a: TRow, b: TRow) => number;
+        formatter?: (props: any) => JSX.Element;
     }
 }
 export declare type RowKey = string | number;
@@ -71,6 +72,7 @@ export type SortAction = 'add' | 'remove';
 export type SortChangeAdd = {
     action: 'add';
     columnKey: string;
+    label: string;
     direction: Lowercase<SortDirection>;
 };
 export type SortChangeRemove = {
@@ -106,7 +108,7 @@ export interface FilterSettings {
     onChange: (event: FilterChangeEvent) => void;
 }
 /**--------------------Termina tipado de filtros-------------------------------------------- */
-export interface GridProps<TRow, TSummaryRow, TKey extends RowKey = RowKey> {
+export interface GridProps<TRow, TSummaryRow, TKey extends RowKey = RowKey> extends Omit<NativeDataGridProps<TRow, TSummaryRow>, 'rowKeyGetter' | 'rows' | 'columns' | 'onRowsChange' | 'selectedRows' | 'onSelectedRowsChange' | 'renderers'> {
     id: string;
     withActions?: boolean;
     columns: readonly Column<TRow, TSummaryRow>[];
@@ -164,5 +166,5 @@ export interface ActionsProps {
     rightActions?: React.ReactNode;
 }
 export type DataGridOwnerState<TRow, TSummaryRow, TKey extends RowKey = RowKey> = Pick<DataGridProps<TRow, TSummaryRow, TKey>, 'visibleCustomHeader'>;
-export type DataGridSlotsType = DataGridSlots | TextEditorSlots | ActionsSlots | RowsCountSlots | ColumnsConfigSlots | TableSlots | ControlNavigateSlots;
+export type DataGridSlotsType = DataGridSlots | TextEditorSlots | ActionsSlots | RowsCountSlots | ColumnsConfigSlots | TableSlots | ControlNavigateSlots | ColumnIconFormatterSlots;
 export type DataGridStyles = OverridesStyleRules<DataGridSlotsType, typeof DATAGRID_PREFIX_NAME, Theme>;

package/components/NumberInput/hooks/useNumberInput/useNumberInput.js

@@ -56,11 +56,9 @@ const useNumberInput = (parameters) => {
     (event, field, fieldValue, reason) => {
       if (field === "value" && typeof fieldValue !== "string") {
         switch (reason) {
-          // only a blur event will dispatch `numberInput:clamp`
           case "numberInput:inputChange":
             onChange?.(event, fieldValue);
             break;
-          // only a blur event will dispatch `numberInput:clamp`
           case "numberInput:clamp":
             onChange?.(event, fieldValue);
             break;

package/components/ObjectLogs/ObjectLogs.styles.js

@@ -41,7 +41,8 @@ const objectLogsStyles = {
   /**
    * Estilos para los iconos dentro de botones y otros elementos.
    */
-  iconStyled: () => ({
+  iconStyled: {},
+  iconClickeableStyled: () => ({
     cursor: "pointer"
   }),
   /**

package/components/ObjectLogs/slots/ObjectLogsEnum.d.ts

@@ -8,5 +8,6 @@ export declare enum ObjectLogsSlots {
     tooltipStyled = "tooltipStyled",
     iconButtonStyled = "iconButtonStyled",
     iconStyled = "iconStyled",
+    iconClickeableStyled = "iconClickeableStyled",
     reactJsonSlot = "reactJsonSlot"
 }

package/components/ObjectLogs/slots/ObjectLogsEnum.js

@@ -8,6 +8,7 @@ var ObjectLogsSlots = /* @__PURE__ */ ((ObjectLogsSlots2) => {
   ObjectLogsSlots2["tooltipStyled"] = "tooltipStyled";
   ObjectLogsSlots2["iconButtonStyled"] = "iconButtonStyled";
   ObjectLogsSlots2["iconStyled"] = "iconStyled";
+  ObjectLogsSlots2["iconClickeableStyled"] = "iconClickeableStyled";
   ObjectLogsSlots2["reactJsonSlot"] = "reactJsonSlot";
   return ObjectLogsSlots2;
 })(ObjectLogsSlots || {});

package/components/ObjectLogs/slots/ObjectLogsSlots.d.ts

@@ -25,6 +25,9 @@ export declare const IconButtonStyled: import('@emotion/styled').StyledComponent
 export declare const IconStyled: import('@emotion/styled').StyledComponent<Pick<import('../../Icon').IconProps, keyof import('../../Icon').IconProps> & import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Record<string, unknown> & {
     ownerState?: (Partial<import('../types').ObjectLogsOwnerState> & Record<string, unknown>) | undefined;
 }, {}, {}>;
+export declare const IconClickeableStyled: import('@emotion/styled').StyledComponent<Pick<import('../../Icon').IconProps, keyof import('../../Icon').IconProps> & import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Record<string, unknown> & {
+    ownerState?: (Partial<import('../types').ObjectLogsOwnerState> & Record<string, unknown>) | undefined;
+}, {}, {}>;
 export declare const ReactJsonSlot: import('@emotion/styled').StyledComponent<Pick<import('@microlink/react-json-view').ReactJsonViewProps, keyof import('@microlink/react-json-view').ReactJsonViewProps> & import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Record<string, unknown> & {
     ownerState?: (Partial<import('../types').ObjectLogsOwnerState> & Record<string, unknown>) | undefined;
 }, {}, {}>;

package/components/ObjectLogs/slots/ObjectLogsSlots.js

@@ -45,6 +45,10 @@ const IconStyled = styled(Icon, {
   name: OBJECT_LOGS_KEY_COMPONENT,
   slot: ObjectLogsSlots.iconStyled
 })(objectLogsStyles?.iconStyled);
+const IconClickeableStyled = styled(Icon, {
+  name: OBJECT_LOGS_KEY_COMPONENT,
+  slot: ObjectLogsSlots.iconClickeableStyled
+})(objectLogsStyles?.iconClickeableStyled);
 styled(ReactJson, {
   name: OBJECT_LOGS_KEY_COMPONENT,
   slot: ObjectLogsSlots.reactJsonSlot
@@ -54,7 +58,8 @@ export {
   ContainerWrapperStyled as C,
   DetailDialogComponent as D,
   GridWrapperStyled as G,
-  IconStyled as I,
+  IconClickeableStyled as I,
   StackStyled as S,
-  WindowBaseStyled as W
+  WindowBaseStyled as W,
+  IconStyled as a
 };

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

@@ -441,8 +441,8 @@ const createAreasStore = (initProps, storeDevtoolsEnabled = false) => {
                   bounds: {
                     left: MARGIN_GRIDLAYOUT,
                     top: MARGIN_GRIDLAYOUT,
-                    right: -MARGIN_GRIDLAYOUT,
-                    bottom: -MARGIN_GRIDLAYOUT
+                    right: -10,
+                    bottom: -10
                   }
                 });
               }

package/components/formatters/BooleanFormatter/BooleanFormatter.js

@@ -6,7 +6,7 @@ import clsx from "clsx";
 import { a as getComponentSlotRoot } from "../../../utils/getComponentSlotRoot.js";
 import { B as BOOLEAN_FORMATTER_KEY_COMPONENT } from "./constants.js";
 import { g as getPropDataTestId } from "../../../test/getNameDataTestId.js";
-import { B as BooleanFormatterRootStyled, a as BooleanFormatterIconStyled, b as BooleanFormatterChipStyled } from "./slots/BooleanFormatterSlots.js";
+import { B as BooleanFormatterRootStyled, a as BooleanFormatterIconStyled, b as BooleanFormatterIconCheckFalseStyled, c as BooleanFormatterChipStyled } from "./slots/BooleanFormatterSlots.js";
 import { B as BooleanFormatterSlots } from "./slots/BooleanFormatterEnum.js";
 function getFormatBoolean(presentationType, value = false, getLabel) {
   if (presentationType === "string_yes_no") {
@@ -18,6 +18,9 @@ function getFormatBoolean(presentationType, value = false, getLabel) {
   if (presentationType === "chip_active_inactive") {
     return value ? getLabel(LABEL_BOOLEAN_ACTIVE) : getLabel(LABEL_BOOLEAN_INACTIVE);
   }
+  if (presentationType === "chip_yes_no") {
+    return value ? getLabel(LABEL_BOOLEAN_YES) : getLabel(LABEL_BOOLEAN_NO);
+  }
   return "";
 }
 function BooleanFormatter(props) {
@@ -29,8 +32,9 @@ function BooleanFormatter(props) {
   const ownerState = { value };
   const memoComponent = useMemo(() => {
     if (presentationType === "check") {
+      const IconComponent = value ? BooleanFormatterIconStyled : BooleanFormatterIconCheckFalseStyled;
       return /* @__PURE__ */ jsx(
-        BooleanFormatterIconStyled,
+        IconComponent,
         {
           ownerState,
           src: value ? srcCheckTrue : srcCheckFalse,
@@ -38,14 +42,13 @@ function BooleanFormatter(props) {
         }
       );
     }
-    if (presentationType === "chip_active_inactive") {
+    if (presentationType === "chip_active_inactive" || presentationType === "chip_yes_no") {
       return /* @__PURE__ */ jsx(
         BooleanFormatterChipStyled,
         {
           label: getFormatBoolean(presentationType, value, getLabel),
           ownerState,
           className: clsx(getComponentSlotRoot(BOOLEAN_FORMATTER_KEY_COMPONENT), className),
-          opacity: true,
           color: value ? "primary" : "default",
           variant: "contained"
         }

package/components/formatters/BooleanFormatter/BooleanFormatter.styles.js

@@ -13,7 +13,15 @@ const booleanFormatterStyles = {
    */
   icon: ({ theme }) => ({
     "& .M4LIcon-icon": {
-      backgroundColor: theme.vars.palette.chips.default.contained.backgroundColorTone
+      backgroundColor: theme.vars.palette.text.primary
+    }
+  }),
+  /**
+   * Estilos para el icono de false
+   */
+  iconCheckFalse: ({ theme }) => ({
+    "& .M4LIcon-icon": {
+      backgroundColor: theme.vars.palette.text.secondary
     }
   }),
   chip: {}

package/components/formatters/BooleanFormatter/slots/BooleanFormatterEnum.d.ts

@@ -1,5 +1,6 @@
 export declare enum BooleanFormatterSlots {
     icon = "icon",
     root = "root",
-    chip = "chip"
+    chip = "chip",
+    iconCheckFalse = "iconCheckFalse"
 }

package/components/formatters/BooleanFormatter/slots/BooleanFormatterEnum.js

@@ -2,6 +2,7 @@ var BooleanFormatterSlots = /* @__PURE__ */ ((BooleanFormatterSlots2) => {
   BooleanFormatterSlots2["icon"] = "icon";
   BooleanFormatterSlots2["root"] = "root";
   BooleanFormatterSlots2["chip"] = "chip";
+  BooleanFormatterSlots2["iconCheckFalse"] = "iconCheckFalse";
   return BooleanFormatterSlots2;
 })(BooleanFormatterSlots || {});
 export {

package/components/formatters/BooleanFormatter/slots/BooleanFormatterSlots.d.ts

@@ -1,6 +1,9 @@
 export declare const BooleanFormatterIconStyled: import('@emotion/styled').StyledComponent<Pick<import('../../..').IconProps, keyof import('../../..').IconProps> & import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Partial<import('..').BooleanFormatterOwnerState> & Record<string, unknown> & {
     ownerState: Partial<import('..').BooleanFormatterOwnerState> & Record<string, unknown>;
 }, {}, {}>;
+export declare const BooleanFormatterIconCheckFalseStyled: import('@emotion/styled').StyledComponent<Pick<import('../../..').IconProps, keyof import('../../..').IconProps> & import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Partial<import('..').BooleanFormatterOwnerState> & Record<string, unknown> & {
+    ownerState: Partial<import('..').BooleanFormatterOwnerState> & Record<string, unknown>;
+}, {}, {}>;
 export declare const BooleanFormatterRootStyled: import('@emotion/styled').StyledComponent<Pick<import('../../../mui_extended/Typography/types').TypographyProps, keyof import('../../../mui_extended/Typography/types').TypographyProps> & import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Partial<import('..').BooleanFormatterOwnerState> & Record<string, unknown> & {
     ownerState: Partial<import('..').BooleanFormatterOwnerState> & Record<string, unknown>;
 }, {}, {}>;

package/components/formatters/BooleanFormatter/slots/BooleanFormatterSlots.js

@@ -9,6 +9,10 @@ const BooleanFormatterIconStyled = styled(Icon, {
   name: BOOLEAN_FORMATTER_KEY_COMPONENT,
   slot: BooleanFormatterSlots.icon
 })(booleanFormatterStyles?.icon);
+const BooleanFormatterIconCheckFalseStyled = styled(Icon, {
+  name: BOOLEAN_FORMATTER_KEY_COMPONENT,
+  slot: BooleanFormatterSlots.iconCheckFalse
+})(booleanFormatterStyles?.iconCheckFalse);
 const BooleanFormatterRootStyled = styled(Typography, {
   name: BOOLEAN_FORMATTER_KEY_COMPONENT,
   slot: BooleanFormatterSlots.root
@@ -20,5 +24,6 @@ const BooleanFormatterChipStyled = styled(Chip, {
 export {
   BooleanFormatterRootStyled as B,
   BooleanFormatterIconStyled as a,
-  BooleanFormatterChipStyled as b
+  BooleanFormatterIconCheckFalseStyled as b,
+  BooleanFormatterChipStyled as c
 };

package/components/formatters/BooleanFormatter/types.d.ts

@@ -8,7 +8,7 @@ import { Theme } from '@mui/material';
  * - `'string_true_false'`: Displays "True" for `true` and "False" for `false`.
  * - `'check'`: Displays an icon to represent the boolean value.
  */
-export type PresentationType = 'string_yes_no' | 'string_true_false' | 'check' | 'chip_active_inactive';
+export type PresentationType = 'string_yes_no' | 'string_true_false' | 'check' | 'chip_active_inactive' | 'chip_yes_no';
 /**
  * Maps to the keys in `BooleanFormatterSlots`, defining slot-specific styling or customization.
  */

package/components/hook-form/RHFAutocompleteAsync/reducer/RHFAutocompleteReducer.js

@@ -65,11 +65,6 @@ const RHFAutocompleteAsyncReducer = (onChangeFilterParms) => (state, action) =>
         ...state,
         isOpen: false
       };
-    // case actionsType.SET_SELECTED_OPTIONS_TO_AUTOCOMPLETE:
-    //   return {
-    //     ...state,
-    //     selectedOptions: action.payload,
-    //   };
     default:
       return state;
   }

package/components/mui_extended/MenuItem/MenuItem.js

@@ -20,6 +20,7 @@ const MenuItem = (props) => {
     checked = false,
     checkable = false,
     className,
+    dataTestId,
     ...other
   } = props;
   const { currentSize } = useComponentSize(size);
@@ -83,7 +84,7 @@ const MenuItem = (props) => {
       disableRipple: true,
       size: adjustedSize,
       className: clsx(className, MENUITEM_CLASSES.root),
-      "data-testid": "MenuItemRoot",
+      "data-testid": dataTestId || "MenuItemRoot",
       children: [
         checkable && /* @__PURE__ */ jsx(
           MenuItemIconCheckedStyled,

package/components/mui_extended/MenuItem/types.d.ts

@@ -53,6 +53,10 @@ export interface MenuItemProps extends Omit<MUIMenuItemProps, 'size' | 'color'>
      * indica si debe aparecer el icono de check
      */
     checkable?: boolean;
+    /**
+     * ID para pruebas que se pasará como data-testid
+     */
+    dataTestId?: string;
 }
 /**
  * Estado del propietario del `MenuItem` utilizado para definir propiedades internas de estilo y comportamiento.

package/hooks/useDynamicFilterAndSort/useDynamicFilterAndSort.js

@@ -251,7 +251,7 @@ const useDynamicFilterAndSort = (props) => {
                 name: sortApplied.columnKey,
                 type: sort?.type || "string",
                 urlIcon: sort?.urlIcon || "",
-                label: sort?.label || sortApplied.columnKey
+                label: sortApplied.label
               },
               isSet: true,
               fixed: isFixed,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@m4l/components",
-  "version": "9.2.62",
+  "version": "9.2.63-JT15072025.beta.1",
   "license": "UNLICENSED",
   "description": "M4L Components",
   "lint-staged": {
@@ -34,7 +34,7 @@
     "react": "18.3.1",
     "react-chartjs-2": "^5.2.0",
     "react-color": "^2.19.3",
-    "react-data-grid": "7.0.0-beta.13",
+    "react-data-grid": "7.0.0-beta.47",
     "react-dnd": "^16.0.1",
     "react-dnd-html5-backend": "^16.0.1",
     "react-dom": "18.3.1",

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

@@ -19,6 +19,14 @@ export declare const DataGridWithEventChangeUserColumn: Story;
  * DataGrid con columns formatters
  */
 export declare const DatagridWithFormatters: Story;
+/**
+ * DataGrid con columns with actions
+ */
+export declare const DatagridWithActions: Story;
+/**
+ * DataGrid con columnas con alineación
+ */
+export declare const DatagridWithAlign: Story;
 /**
  * DataGrid sin pager
  */

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

@@ -1,3 +1,9 @@
 export declare const icons: {
     roundRefreshIcon: string;
+    roundDeleteIcon: string;
+    addIcon: string;
+    editIcon: string;
+    printIcon: string;
+    activeIcon: string;
+    inactiveIcon: string;
 };

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

@@ -1,12 +1,14 @@
-import { HeaderRendererProps } from 'react-data-grid';
+import { RenderHeaderCellProps } from 'react-data-grid';
 import { ChipStatusFormatterProps } from '../../../../src/components/formatters/ChipStatusFormatter/types';
 import { DeepKeyOf } from '../../../../src/utils/types';
+import { ColumnAlign } from '../../../../src/components/DataGrid/types';
 export interface SeedProps {
     quantity: number;
     withBoolean?: boolean;
     withConcatenated?: boolean;
     withDate?: boolean;
     withIcon?: boolean;
+    withMultipleIcons?: boolean;
     withInteractiveCheck?: boolean;
     withNestedValue?: boolean;
     withPoints?: boolean;
@@ -15,6 +17,12 @@ export interface SeedProps {
     withSetCheck?: boolean;
     withCesar?: boolean;
     withChipStatus?: boolean;
+    withActions?: boolean;
+    withActionsUser?: boolean;
+    withBooleanStatus?: boolean;
+    withUserType?: boolean;
+    aligns?: Record<string, ColumnAlign>;
+    names?: Record<string, string>;
 }
 export type GetColumnsProps = Omit<SeedProps, 'quantity'>;
 export type ColumnType = 'string' | 'number' | 'boolean' | 'date' | 'custom';
@@ -48,6 +56,10 @@ export interface RowType {
         label: string;
         currentStatus: ChipStatusFormatterProps['status'];
     };
+    userType?: {
+        label: string;
+        currentStatus: 'superadmin' | 'admin' | 'user';
+    };
 }
 interface RangesUncertainty {
     cmcMin: number;
@@ -62,7 +74,7 @@ export interface Column<TRow, TSummaryRow> {
     type: ColumnType;
     formatter?: (props: any) => JSX.Element;
     width?: number;
-    withinHeaderRenderer?: React.FunctionComponent<HeaderRendererProps<TRow, TSummaryRow>>;
+    withinHeaderRenderer?: React.FunctionComponent<RenderHeaderCellProps<TRow, TSummaryRow>>;
     customFilter?: (row: TRow, value: string) => boolean;
     customSort?: (a: TRow, b: TRow) => number;
 }

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

@@ -1,4 +1,5 @@
-import { GetColumnsProps, RowType, Column } from './types';
+import { GetColumnsProps, RowType } from './types';
+import { Column } from 'react-data-grid';
 /**
  * ****************************************************************
  * Función que retorna las columnas para el DataGrid de Storybook

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

@@ -3,7 +3,7 @@ import { SeedProps } from './types';
  * Función que retorna el seed para el DataGrid de Storybook
  */
 export declare const useSeed: (props: SeedProps) => {
-    columns: readonly import('./types').Column<import('./types').RowType, unknown>[];
+    columns: readonly import('react-data-grid').Column<import('./types').RowType, unknown>[];
     filters: import('../../../../src').FilterField[];
     sorts: import('../../../../src').SortField[];
     rows: import('./types').RowType[];

package/helpers/getFieldValueWithRow.js

@@ -1,10 +0,0 @@
-const getFieldValueWithRow = (fieldValue) => {
-  const row = "row";
-  if (fieldValue.includes(row)) {
-    return fieldValue;
-  }
-  return `${row}.${fieldValue}`;
-};
-export {
-  getFieldValueWithRow as g
-};