@m4l/components 9.2.62-B10072025beta.2 → 9.2.62-JT09072025.beta.1

package/components/DataGrid/Datagrid.styles.js

@@ -446,6 +446,7 @@ const dataGridStyles = {
         textAlign: "start",
         display: "inline",
         justifyContent: "center",
+        alignContent: "center",
         alignItems: "center",
         '&:not([role="columnheader"])': {
           "& > div:first-of-type": {
@@ -466,6 +467,7 @@ const dataGridStyles = {
       },
       "& .rdg-cell.rdg-cell-align-right": {
         textAlign: "right",
+        alignContent: "center",
         '&:not([role="columnheader"])': {
           "& > div:first-of-type": {
             marginLeft: "auto"
@@ -475,16 +477,22 @@ const dataGridStyles = {
       },
       '& [role="columnheader"].rdg-cell.rdg-cell-align-left .rdg-header-sort-name': {
         textAlign: "start",
-        display: "inline",
-        justifyContent: "center",
+        display: "flex",
+        justifyContent: "flex-start",
         alignItems: "center"
       },
       '& [role="columnheader"].rdg-cell.rdg-cell-align-center .rdg-header-sort-name': {
         textAlign: "center",
-        alignContent: "center"
+        display: "flex",
+        justifyContent: "center",
+        alignItems: "center"
       },
       '& [role="columnheader"].rdg-cell.rdg-cell-align-right .rdg-header-sort-name': {
-        textAlign: "right"
+        textAlign: "right",
+        display: "flex",
+        justifyContent: "flex-end",
+        alignItems: "center",
+        paddingRight: theme.vars.size.baseSpacings.sp3
       },
       // Estilado de la ultima celda congelada
       "& .rdg-row .rdg-cell-frozen-last:after": {
@@ -670,6 +678,18 @@ const dataGridStyles = {
     alignItems: "center",
     justifyContent: "space-between",
     width: "100%"
+  }),
+  /**
+   * Estilos para el formatter de iconos
+   */
+  columnIconFormatter: ({ theme }) => ({
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    gap: theme.vars.size.baseSpacings.sp2,
+    minWidth: "max-content",
+    overflow: "visible",
+    flexWrap: "nowrap"
   })
 };
 export {

package/components/DataGrid/formatters/ColumnIconFormatter/formatter.d.ts

@@ -1,5 +1,6 @@
 import { ColumnIconFormatterProps } from './types';
 /**
  * Function to format an icon in a column of a DataGrid
+ * @template TRow - Tipo de datos de la fila
  */
-export declare function ColumnIconFormatter(props: ColumnIconFormatterProps): (rowData: any) => import("react/jsx-runtime").JSX.Element;
+export declare function ColumnIconFormatter<TRow>(props: ColumnIconFormatterProps<TRow>): (rowData: TRow) => JSX.Element;

package/components/DataGrid/formatters/ColumnIconFormatter/formatter.js

@@ -1,49 +1,13 @@
-import { jsx } from "react/jsx-runtime";
-import React from "react";
-import { C as COLUMN_ICON_KEY_COMPONENT } from "./constants.js";
-import { g as getPropDataTestId } from "../../../../test/getNameDataTestId.js";
-import { I as IconStyled } from "../../../ObjectLogs/slots/ObjectLogsSlots.js";
+import { r as renderMultipleIcons } from "./helpers/renderMultipleIcons.js";
+import { r as renderIcon } from "./helpers/renderIcon.js";
 function ColumnIconFormatter(props) {
   const { getIconProps } = props;
   return (rowData) => {
-    const {
-      iconUrl,
-      onClick,
-      tooltip,
-      dataTestId,
-      Component,
-      componentProps
-    } = getIconProps(rowData);
-    const iconStyle = onClick ? { style: { cursor: "pointer" } } : {};
-    if (Component && Component !== React.Fragment) {
-      return /* @__PURE__ */ jsx(
-        Component,
-        {
-          ...componentProps,
-          ...getPropDataTestId(COLUMN_ICON_KEY_COMPONENT, "container", dataTestId),
-          children: /* @__PURE__ */ jsx(
-            IconStyled,
-            {
-              src: iconUrl,
-              onClick,
-              tooltipContent: tooltip,
-              instaceDataTestId: dataTestId,
-              ...iconStyle
-            }
-          )
-        }
-      );
+    const iconProps = getIconProps(rowData);
+    if (Array.isArray(iconProps)) {
+      return renderMultipleIcons(iconProps);
     }
-    return /* @__PURE__ */ jsx(
-      IconStyled,
-      {
-        src: iconUrl,
-        onClick,
-        tooltipContent: tooltip,
-        instaceDataTestId: dataTestId,
-        ...iconStyle
-      }
-    );
+    return renderIcon(iconProps);
   };
 }
 export {

package/components/DataGrid/formatters/ColumnIconFormatter/helpers/renderIcon.d.ts

@@ -0,0 +1,8 @@
+import { ColumnIconResponse } from '../types';
+/**
+ * Helper que renderiza un único icono
+ * @param iconConfig - Configuración del icono
+ * @param key - Clave opcional para listas
+ * @returns Componente de icono renderizado
+ */
+export declare function renderIcon(iconConfig: ColumnIconResponse, key?: number): import("react/jsx-runtime").JSX.Element;

package/components/DataGrid/formatters/ColumnIconFormatter/helpers/renderIcon.js

@@ -0,0 +1,58 @@
+import { jsx, Fragment } from "react/jsx-runtime";
+import React from "react";
+import { C as COLUMN_ICON_KEY_COMPONENT } from "../constants.js";
+import { g as getPropDataTestId } from "../../../../../test/getNameDataTestId.js";
+import { I as IconClickeableStyled, a as IconStyled } from "../../../../ObjectLogs/slots/ObjectLogsSlots.js";
+function renderIcon(iconConfig, key) {
+  const {
+    iconUrl,
+    onClick,
+    tooltip,
+    dataTestId,
+    Component,
+    componentProps,
+    color,
+    visible,
+    size
+  } = iconConfig;
+  if (visible === false) {
+    return /* @__PURE__ */ jsx(Fragment, { children: "-" });
+  }
+  const IconComponent = onClick ? IconClickeableStyled : IconStyled;
+  if (Component && Component !== React.Fragment) {
+    return /* @__PURE__ */ jsx(
+      Component,
+      {
+        ...componentProps,
+        ...getPropDataTestId(COLUMN_ICON_KEY_COMPONENT, "container", dataTestId),
+        children: /* @__PURE__ */ jsx(
+          IconComponent,
+          {
+            src: iconUrl,
+            ...onClick && { onClick },
+            tooltipContent: tooltip,
+            instaceDataTestId: dataTestId,
+            color,
+            size
+          }
+        )
+      },
+      key
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    IconComponent,
+    {
+      src: iconUrl,
+      ...onClick && { onClick },
+      tooltipContent: tooltip,
+      instaceDataTestId: dataTestId,
+      color,
+      size
+    },
+    key
+  );
+}
+export {
+  renderIcon as r
+};

package/components/DataGrid/formatters/ColumnIconFormatter/helpers/renderMultipleIcons.d.ts

@@ -0,0 +1,7 @@
+import { ColumnIconResponse } from '../types';
+/**
+ * Helper que renderiza múltiples iconos
+ * @param iconsConfig - Array de configuraciones de iconos
+ * @returns Componente contenedor con múltiples iconos
+ */
+export declare function renderMultipleIcons(iconsConfig: ColumnIconResponse[]): import("react/jsx-runtime").JSX.Element;

package/components/DataGrid/formatters/ColumnIconFormatter/helpers/renderMultipleIcons.js

@@ -0,0 +1,19 @@
+import { jsx, Fragment } from "react/jsx-runtime";
+import { a as ColumnIconFormatterStyled } from "../../../slots/DataGridSlot.js";
+import { r as renderIcon } from "./renderIcon.js";
+function renderMultipleIcons(iconsConfig) {
+  if (!iconsConfig || iconsConfig.length === 0) {
+    return /* @__PURE__ */ jsx(Fragment, { children: "-" });
+  }
+  const visibleIcons = iconsConfig.filter((icon) => icon.visible !== false);
+  if (visibleIcons.length === 0) {
+    return /* @__PURE__ */ jsx(Fragment, { children: "-" });
+  }
+  if (visibleIcons.length === 1) {
+    return renderIcon(visibleIcons[0]);
+  }
+  return /* @__PURE__ */ jsx(ColumnIconFormatterStyled, { children: visibleIcons.map((iconConfig, index) => renderIcon(iconConfig, index)) });
+}
+export {
+  renderMultipleIcons as r
+};

package/components/DataGrid/formatters/ColumnIconFormatter/types.d.ts

@@ -1,11 +1,18 @@
+import { default as React } from 'react';
+import { DeepKeyOf } from '../../../../utils/types';
+import { Theme } from '@mui/material';
+export type IconColorDeep = DeepKeyOf<Theme['vars']['palette']> | string;
 export type ColumnIconResponse = {
     iconUrl: string;
     tooltip?: string;
     onClick?: () => void;
     Component?: React.ElementType;
     dataTestId?: string;
-    componentProps?: React.ComponentPropsWithoutRef<any>;
+    componentProps?: React.ComponentPropsWithoutRef<React.ElementType>;
+    visible?: boolean;
+    color?: IconColorDeep;
+    size?: 'small' | 'medium';
 };
-export interface ColumnIconFormatterProps {
-    getIconProps: (obRowProps: any) => ColumnIconResponse;
+export interface ColumnIconFormatterProps<TRow> {
+    getIconProps: (obRowProps: TRow) => ColumnIconResponse | ColumnIconResponse[];
 }

package/components/DataGrid/formatters/ColumnIconFormatter/useColumnIcon.d.ts

@@ -3,6 +3,6 @@ import { ColumnIconFormatterProps } from './types';
  * Función helper que retorna
  * el formatter de la columna
  */
-export declare const useColumnIcon: (props: ColumnIconFormatterProps) => {
-    formatter: (rowData: any) => import("react/jsx-runtime").JSX.Element;
+export declare const useColumnIcon: <TRow>(props: ColumnIconFormatterProps<TRow>) => {
+    formatter: (rowData: TRow) => JSX.Element;
 };

package/components/DataGrid/slots/DataGridEnum.d.ts

@@ -41,3 +41,6 @@ export declare enum ColumnsConfigSlots {
 export declare enum ControlNavigateSlots {
     controlNavigate = "controlNavigate"
 }
+export declare enum ColumnIconFormatterSlots {
+    columnIconFormatter = "columnIconFormatter"
+}

package/components/DataGrid/slots/DataGridEnum.js

@@ -48,6 +48,10 @@ var ControlNavigateSlots = /* @__PURE__ */ ((ControlNavigateSlots2) => {
   ControlNavigateSlots2["controlNavigate"] = "controlNavigate";
   return ControlNavigateSlots2;
 })(ControlNavigateSlots || {});
+var ColumnIconFormatterSlots = /* @__PURE__ */ ((ColumnIconFormatterSlots2) => {
+  ColumnIconFormatterSlots2["columnIconFormatter"] = "columnIconFormatter";
+  return ColumnIconFormatterSlots2;
+})(ColumnIconFormatterSlots || {});
 export {
   ActionsSlots as A,
   ControlNavigateSlots as C,
@@ -55,5 +59,6 @@ export {
   RowsCountSlots as R,
   TextEditorSlots as T,
   ColumnsConfigSlots as a,
-  TableSlots as b
+  TableSlots as b,
+  ColumnIconFormatterSlots as c
 };

package/components/DataGrid/slots/DataGridSlot.d.ts

@@ -62,3 +62,9 @@ export declare const InputTextEditorStyled: import('@emotion/styled').StyledComp
  * ****************
  */
 export declare const ControlNavigateStyled: import('@emotion/styled').StyledComponent<any, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('react').ClassAttributes<HTMLDivElement> | keyof import('react').HTMLAttributes<HTMLDivElement>>, {}>;
+/**
+ * ****************
+ * Slots ColumnIconFormatter
+ * ****************
+ */
+export declare const ColumnIconFormatterStyled: import('@emotion/styled').StyledComponent<any, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('react').ClassAttributes<HTMLDivElement> | keyof import('react').HTMLAttributes<HTMLDivElement>>, {}>;

package/components/DataGrid/slots/DataGridSlot.js

@@ -1,7 +1,7 @@
 import { styled } from "@mui/material/styles";
 import { MenuList, InputBase } from "@mui/material";
 import { D as DATAGRID_PREFIX_NAME } from "../constants.js";
-import { D as DataGridSlots, T as TextEditorSlots, A as ActionsSlots, b as TableSlots, C as ControlNavigateSlots, R as RowsCountSlots, a as ColumnsConfigSlots } from "./DataGridEnum.js";
+import { D as DataGridSlots, T as TextEditorSlots, A as ActionsSlots, b as TableSlots, C as ControlNavigateSlots, c as ColumnIconFormatterSlots, R as RowsCountSlots, a as ColumnsConfigSlots } from "./DataGridEnum.js";
 import { d as dataGridStyles } from "../Datagrid.styles.js";
 import { I as Icon } from "../../Icon/Icon.js";
 const DataGridRootStyled = styled("div", {
@@ -120,6 +120,10 @@ const ControlNavigateStyled = styled("div", {
   name: DATAGRID_PREFIX_NAME,
   slot: ControlNavigateSlots.controlNavigate
 })(dataGridStyles.controlNavigate);
+const ColumnIconFormatterStyled = styled("div", {
+  name: DATAGRID_PREFIX_NAME,
+  slot: ColumnIconFormatterSlots.columnIconFormatter
+})(dataGridStyles.columnIconFormatter);
 export {
   ActionsRootStyled as A,
   ButtonHeaderActionsStyled as B,
@@ -132,22 +136,23 @@ export {
   RowsCountRootStyled as R,
   TableWrapperDataGridStyled as T,
   WrapperSkeletonStyled as W,
-  ControlNavigateStyled as a,
-  ActionsConfigContainerStyled as b,
-  ContainerLeftActionsStyled as c,
-  ContainerRightActionsStyled as d,
-  RowsCountLabelStyled as e,
-  RowsCountValueStyled as f,
-  ColumnsConfigWrapperStyled as g,
-  ColumnsConfigDataGridStyled as h,
-  ColumnsConfigSelColumnsStyled as i,
-  ColumnsConfigActiosStyled as j,
-  ContentModalSettingStyled as k,
-  TableContainerStyled as l,
-  NameColumnStyled as m,
-  DraggableHeaderRootStyled as n,
-  DraggableWrapperInputBaseStyled as o,
-  IconSearchStyled as p,
-  HeaderRenderClickStyled as q,
-  InputTextEditorStyled as r
+  ColumnIconFormatterStyled as a,
+  ControlNavigateStyled as b,
+  ActionsConfigContainerStyled as c,
+  ContainerLeftActionsStyled as d,
+  ContainerRightActionsStyled as e,
+  RowsCountLabelStyled as f,
+  RowsCountValueStyled as g,
+  ColumnsConfigWrapperStyled as h,
+  ColumnsConfigDataGridStyled as i,
+  ColumnsConfigSelColumnsStyled as j,
+  ColumnsConfigActiosStyled as k,
+  ContentModalSettingStyled as l,
+  TableContainerStyled as m,
+  NameColumnStyled as n,
+  DraggableHeaderRootStyled as o,
+  DraggableWrapperInputBaseStyled as p,
+  IconSearchStyled as q,
+  HeaderRenderClickStyled as r,
+  InputTextEditorStyled as s
 };

package/components/DataGrid/subcomponents/ControlNavigate/ControlNavigate.js

@@ -1,6 +1,6 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import { useIsMobile } from "@m4l/graphics";
-import { a as ControlNavigateStyled } from "../../slots/DataGridSlot.js";
+import { b as ControlNavigateStyled } from "../../slots/DataGridSlot.js";
 import { R as RowsCount } from "../HeaderActions/subcomponents/RowsCount/index.js";
 import { u as useComponentSize } from "../../../../hooks/useComponentSize/useComponentSize.js";
 import { P as Pager } from "../../../Pager/Pager.js";

package/components/DataGrid/subcomponents/HeaderActions/index.js

@@ -5,7 +5,7 @@ import { D as Density } from "./subcomponents/Density/index.js";
 import { u as useDataGrid } from "../../hooks/useDataGrid.js";
 import { useIsMobile } from "@m4l/graphics";
 import { M as MobileMenuActions } from "./subcomponents/MobileMenuActions/index.js";
-import { A as ActionsRootStyled, b as ActionsConfigContainerStyled, c as ContainerLeftActionsStyled, d as ContainerRightActionsStyled } from "../../slots/DataGridSlot.js";
+import { A as ActionsRootStyled, c as ActionsConfigContainerStyled, d as ContainerLeftActionsStyled, e as ContainerRightActionsStyled } from "../../slots/DataGridSlot.js";
 import { u as useComponentSize } from "../../../../hooks/useComponentSize/useComponentSize.js";
 function HeaderActions(props) {
   const {

package/components/DataGrid/subcomponents/HeaderActions/subcomponents/Density/index.js

@@ -42,7 +42,8 @@ function Density() {
     currentRowHeightVariant,
     setRowHeightVariant,
     host_static_assets,
-    environment_assets
+    environment_assets,
+    getLabel
   ]);
   const theme = useTheme();
   const currenViewIcon = useMemo(() => {

package/components/DataGrid/subcomponents/HeaderActions/subcomponents/RowsCount/index.js

@@ -2,7 +2,7 @@ import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import { useModuleDictionary, useModuleSkeleton } from "@m4l/core";
 import { Skeleton } from "@mui/material";
 import { u as useDataGrid } from "../../../../hooks/useDataGrid.js";
-import { R as RowsCountRootStyled, e as RowsCountLabelStyled, f as RowsCountValueStyled } from "../../../../slots/DataGridSlot.js";
+import { R as RowsCountRootStyled, f as RowsCountLabelStyled, g as RowsCountValueStyled } from "../../../../slots/DataGridSlot.js";
 function RowsCount() {
   const { rowsCount, size } = useDataGrid();
   const { getLabel } = useModuleDictionary();

package/components/DataGrid/subcomponents/HeaderActions/subcomponents/Settings/subcomponents/ColumnsConfig/index.js

@@ -4,7 +4,7 @@ import { useModuleDictionary, useEnvironment } from "@m4l/core";
 import DataGrid from "react-data-grid";
 import { I as IconButton } from "../../../../../../../mui_extended/IconButton/IconButton.js";
 import { p as pathIcons } from "../../../../../../icons.js";
-import { g as ColumnsConfigWrapperStyled, h as ColumnsConfigDataGridStyled, i as ColumnsConfigSelColumnsStyled, T as TableWrapperDataGridStyled, j as ColumnsConfigActiosStyled } from "../../../../../../slots/DataGridSlot.js";
+import { h as ColumnsConfigWrapperStyled, i as ColumnsConfigDataGridStyled, j as ColumnsConfigSelColumnsStyled, T as TableWrapperDataGridStyled, k as ColumnsConfigActiosStyled } from "../../../../../../slots/DataGridSlot.js";
 import { D as DICTIONARY } from "../../../../../../dictionary.js";
 import { C as ColumnInteractiveCheckFormatter } from "../../../../../../formatters/ColumnInteractiveCheckFormatter/formatter.js";
 function getRowsFromColumnsConfig(columnsConfig, columns) {

package/components/DataGrid/subcomponents/HeaderActions/subcomponents/hooks/useModalSettings/index.js

@@ -5,7 +5,7 @@ import { useRef, useCallback } from "react";
 import { u as useDataGrid } from "../../../../../hooks/useDataGrid.js";
 import { u as useModal } from "../../../../../../../hooks/useModal/index.js";
 import { C as ColumnsConfig } from "../../Settings/subcomponents/ColumnsConfig/index.js";
-import { k as ContentModalSettingStyled, D as DataGridRootStyled } from "../../../../../slots/DataGridSlot.js";
+import { l as ContentModalSettingStyled, D as DataGridRootStyled } from "../../../../../slots/DataGridSlot.js";
 import { p as pathIcons } from "../../../../../icons.js";
 import { A as ActionsContainer } from "../../../../../../CommonActions/components/ActionsContainer/ActionsContainer.js";
 import { W as WindowBase } from "../../../../../../WindowBase/WindowBase.js";

package/components/DataGrid/subcomponents/Table/hooks/useHeaderMenuActions.js

@@ -97,7 +97,8 @@ function useHeaderMenuActions(columnKey, finalColumns, defaultSortable) {
       externalSortSettings?.onChange({
         action: "add",
         columnKey,
-        direction
+        direction,
+        label: column.name
       });
     },
     [columnKey, column, externalSortSettings]

package/components/DataGrid/subcomponents/Table/hooks/useSortColumnsRows.js

@@ -17,7 +17,6 @@ function getComparator(columns, sortColumn) {
     return column.customSort;
   }
   switch (typeOrder) {
-    //Si el tipo de dato de la columna es un numerico, retorna una función de ordenamiento numérica
     case "number":
       return (a, b) => {
         try {
@@ -26,7 +25,6 @@ function getComparator(columns, sortColumn) {
           return -1;
         }
       };
-    //Por defecto retorna una función de ordenamiento de string
     default:
       return (a, b) => {
         try {

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

@@ -8,7 +8,7 @@ import { a as filterHeight } from "./subcomponents/SelectColumn.js";
 import { u as useSortColumnsRows } from "./hooks/useSortColumnsRows.js";
 import { u as useFilters } from "../../hooks/useFilters.js";
 import { u as useDataGrid } from "../../hooks/useDataGrid.js";
-import { l as TableContainerStyled, T as TableWrapperDataGridStyled } from "../../slots/DataGridSlot.js";
+import { m as TableContainerStyled, T as TableWrapperDataGridStyled } from "../../slots/DataGridSlot.js";
 import { u as useHeaderMenuActions } from "./hooks/useHeaderMenuActions.js";
 import { H as HeaderRenderClick } from "./subcomponents/HeaderRenderClick/HeaderRenderClick.js";
 function Table(props) {

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

@@ -5,7 +5,7 @@ import { useDrag, useDrop } from "react-dnd";
 import { HeaderRenderer } 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";

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

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

@@ -2,7 +2,7 @@ import { Maybe } from '@m4l/core';
 import { Theme } from '@mui/material/styles';
 import { Column, RowsChangeData, FormatterProps } 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';
@@ -71,6 +71,7 @@ export type SortAction = 'add' | 'remove';
 export type SortChangeAdd = {
     action: 'add';
     columnKey: string;
+    label: string;
     direction: Lowercase<SortDirection>;
 };
 export type SortChangeRemove = {
@@ -164,5 +165,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/PropertyValue/PropertyValue.styles.js

@@ -85,7 +85,7 @@ const propertyValueStyles = {
     width: "100%",
     display: "flex",
     justifyContent: "flex-start",
-    alignItems: "flex-start",
+    alignItems: "center",
     overflow: "hidden",
     height: ownerState?.valueHeight ? ownerState?.valueHeight : "auto",
     ...ownerState?.isForm && {

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/hook-form/RHFColorPicker/RHFColorPicker.styles.js

@@ -6,8 +6,7 @@ const rhfcolorPickerStyles = {
   root: ({ theme }) => ({
     display: "flex",
     flexDirection: "column",
-    gap: theme.vars.size.baseSpacings["sp0-5"],
-    width: "100%"
+    gap: theme.vars.size.baseSpacings["sp0-5"]
   })
 };
 export {

package/components/hook-form/RHFDateTime/RHFDateTime.styles.js

@@ -5,8 +5,7 @@ const rhfDateTimeStyles = {
   root: ({ theme }) => ({
     display: "flex",
     flexDirection: "column",
-    gap: theme.vars.size.baseSpacings["sp0-5"],
-    width: "100%"
+    gap: theme.vars.size.baseSpacings["sp0-5"]
   })
 };
 export {

package/components/hook-form/RHFDateTime/styles.d.ts

@@ -0,0 +1 @@
+export declare const RHFDateTimeRoot: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme>, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/components/hook-form/RHFNumberInput/RHFNumberInput.styles.js

@@ -8,8 +8,7 @@ const rhfNumberInputStyles = {
   root: ({ theme }) => ({
     display: "flex",
     flexDirection: "column",
-    gap: theme.vars.size.baseSpacings.sp1,
-    width: "100%"
+    gap: theme.vars.size.baseSpacings.sp1
   })
 };
 export {

package/components/hook-form/RHFPeriod/RHFPeriod.styles.js

@@ -23,8 +23,11 @@ const rhfPeriodStyles = {
   /**
    * textField class
    */
-  numberInput: () => ({
-    width: "43px !important"
+  textField: ({ theme }) => ({
+    borderRadius: "50px",
+    width: "43px !important",
+    border: theme.vars.palette.border.default,
+    color: theme.vars.palette.text.disabled
   }),
   /**
    * select class

package/components/hook-form/RHFPeriod/slots/RHFPeriodEnum.d.ts

@@ -1,6 +1,6 @@
 export declare enum RHFPeriodSlots {
     root = "root",
     periodRoot = "periodRoot",
-    numberInput = "numberInput",
+    textField = "textField",
     select = "select"
 }

package/components/hook-form/RHFPeriod/slots/RHFPeriodEnum.js

@@ -1,7 +1,7 @@
 var RHFPeriodSlots = /* @__PURE__ */ ((RHFPeriodSlots2) => {
   RHFPeriodSlots2["root"] = "root";
   RHFPeriodSlots2["periodRoot"] = "periodRoot";
-  RHFPeriodSlots2["numberInput"] = "numberInput";
+  RHFPeriodSlots2["textField"] = "textField";
   RHFPeriodSlots2["select"] = "select";
   return RHFPeriodSlots2;
 })(RHFPeriodSlots || {});

package/components/hook-form/RHFPeriod/slots/RHFPeriodSlots.d.ts

@@ -1,4 +1,4 @@
 export declare const RHFPeriodRootStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Record<string, unknown>, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('react').ClassAttributes<HTMLDivElement> | keyof import('react').HTMLAttributes<HTMLDivElement>>, {}>;
 export declare const PeriodRootStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Record<string, unknown>, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('react').ClassAttributes<HTMLDivElement> | keyof import('react').HTMLAttributes<HTMLDivElement>>, {}>;
-export declare const NumberInputStyled: import('@emotion/styled').StyledComponent<Pick<import('../../../NumberInput/types').NumberInputProps & import('react').RefAttributes<HTMLDivElement>, keyof import('react').RefAttributes<HTMLDivElement> | keyof import('../../../NumberInput/types').NumberInputProps> & import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Record<string, unknown>, {}, {}>;
+export declare const TextFieldStyled: import('@emotion/styled').StyledComponent<Pick<Omit<import('../../../mui_extended/TextField/types').TextFieldProps, "ref"> & import('react').RefAttributes<HTMLDivElement>, "value" | "size" | "children" | "title" | "component" | "name" | "error" | "select" | "rows" | "id" | "type" | "disabled" | "hidden" | "content" | "style" | "variant" | "margin" | "translate" | "className" | "classes" | "sx" | "label" | "slot" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "autoCapitalize" | "autoFocus" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "enterKeyHint" | "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" | "dataTestId" | "autoComplete" | "placeholder" | "required" | keyof import('react').RefAttributes<HTMLDivElement> | "maxRows" | "fullWidth" | "inputProps" | "inputRef" | "focused" | "hiddenLabel" | "InputProps" | "FormHelperTextProps" | "helperText" | "InputLabelProps" | "multiline" | "minRows" | "SelectProps"> & import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Record<string, unknown>, {}, {}>;
 export declare const SelectStyled: import('@emotion/styled').StyledComponent<Pick<Omit<import('../../../mui_extended/Select').SelectProps<string | number, boolean | undefined>, "ref"> & import('react').RefAttributes<HTMLDivElement>, "value" | "size" | "children" | "onClose" | "title" | "name" | "error" | "input" | "options" | "rows" | "id" | "type" | "disabled" | "components" | "hidden" | "content" | "style" | "open" | "multiple" | "variant" | "margin" | "translate" | "className" | "classes" | "sx" | "slots" | "slotProps" | "label" | "slot" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "autoCapitalize" | "autoFocus" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "enterKeyHint" | "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" | "componentsProps" | "onOpen" | "dataTestId" | "autoComplete" | "placeholder" | "readOnly" | "required" | keyof import('react').RefAttributes<HTMLDivElement> | "maxRows" | "fullWidth" | "inputProps" | "inputRef" | "multiline" | "minRows" | "disableInjectingGlobalStyles" | "endAdornment" | "inputComponent" | "renderSuffix" | "startAdornment" | "disableUnderline" | "autoWidth" | "defaultOpen" | "displayEmpty" | "IconComponent" | "labelId" | "MenuProps" | "native" | "renderValue" | "SelectDisplayProps"> & import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Record<string, unknown>, {}, {}>;

package/components/hook-form/RHFPeriod/slots/RHFPeriodSlots.js

@@ -2,7 +2,7 @@ import { styled } from "@mui/material/styles";
 import { R as RHF_PERIOD_KEY_COMPONENT } from "../constants.js";
 import { r as rhfPeriodStyles } from "../RHFPeriod.styles.js";
 import { R as RHFPeriodSlots } from "./RHFPeriodEnum.js";
-import { N as NumberInput } from "../../../NumberInput/NumberInput.js";
+import { T as TextField } from "../../../mui_extended/TextField/TextField.js";
 import { S as Select } from "../../../mui_extended/Select/Select.js";
 const RHFPeriodRootStyled = styled("div", {
   name: RHF_PERIOD_KEY_COMPONENT,
@@ -12,17 +12,17 @@ const PeriodRootStyled = styled("div", {
   name: RHF_PERIOD_KEY_COMPONENT,
   slot: RHFPeriodSlots.periodRoot
 })(rhfPeriodStyles?.periodRoot);
-const NumberInputStyled = styled(NumberInput, {
+const TextFieldStyled = styled(TextField, {
   name: RHF_PERIOD_KEY_COMPONENT,
-  slot: RHFPeriodSlots.numberInput
-})(rhfPeriodStyles?.numberInput);
+  slot: RHFPeriodSlots.textField
+})(rhfPeriodStyles?.textField);
 const SelectStyled = styled(Select, {
   name: RHF_PERIOD_KEY_COMPONENT,
   slot: RHFPeriodSlots.select
 })(rhfPeriodStyles?.select);
 export {
-  NumberInputStyled as N,
   PeriodRootStyled as P,
   RHFPeriodRootStyled as R,
-  SelectStyled as S
+  SelectStyled as S,
+  TextFieldStyled as T
 };

package/components/hook-form/RHFPeriod/subcomponents/Period/Period.js

@@ -4,7 +4,7 @@ import { E as ETimePeriods } from "./types.js";
 import { d as dictionary } from "./dictionary.js";
 import { useMemo } from "react";
 import { u as useComponentSize } from "../../../../../hooks/useComponentSize/useComponentSize.js";
-import { P as PeriodRootStyled, S as SelectStyled, N as NumberInputStyled } from "../../slots/RHFPeriodSlots.js";
+import { P as PeriodRootStyled, S as SelectStyled, T as TextFieldStyled } from "../../slots/RHFPeriodSlots.js";
 import { I as Icon } from "../../../../Icon/Icon.js";
 const Period = (props) => {
   const {
@@ -27,7 +27,7 @@ const Period = (props) => {
   );
   const getSingleValue = (period) => {
     if (!period) {
-      return null;
+      return "";
     }
     if (period.singleValue !== void 0) {
       return period.singleValue;
@@ -41,7 +41,7 @@ const Period = (props) => {
     if (period.days && period.days > 0) {
       return period.days;
     }
-    return null;
+    return "";
   };
   const getSelPeriodTime = (period) => {
     if (!period) {
@@ -68,7 +68,7 @@ const Period = (props) => {
       selPeriodTime: newPeriodTime,
       singleValue: newValue
     };
-    if (newValue && newValue > 0) {
+    if (newValue !== "" && newValue > 0) {
       newPeriod.years = 0;
       newPeriod.months = 0;
       newPeriod.days = 0;
@@ -117,14 +117,13 @@ const Period = (props) => {
       }
     ),
     /* @__PURE__ */ jsx(
-      NumberInputStyled,
+      TextFieldStyled,
       {
         type: "number",
         variant: "outlined",
         value: singleValue,
-        withDecimal: true,
-        onChange: (_event, newValue) => {
-          onTotalChange(selPeriodTime, newValue);
+        onChange: (e) => {
+          onTotalChange(selPeriodTime, e.target.value === "" ? "" : parseInt(e.target.value));
         }
       }
     )

package/components/hook-form/RHFPeriod/subcomponents/Period/types.d.ts

@@ -9,8 +9,8 @@ export type PeriodTime = {
     label: string;
 };
 export type PeriodType = {
-    selPeriodTime: null | ETimePeriods | undefined;
-    singleValue: number | null;
+    selPeriodTime: '' | ETimePeriods | undefined;
+    singleValue: number | '';
     years?: number;
     months?: number;
     days?: number;

package/components/hook-form/RHFSelect/RHFSelect.styles.js

@@ -5,8 +5,7 @@ const rhfSelectStyles = {
   root: ({ theme }) => ({
     display: "flex",
     flexDirection: "column",
-    gap: theme.vars.size.baseSpacings.sp1,
-    width: "100%"
+    gap: theme.vars.size.baseSpacings.sp1
   }),
   /**
    * Estilos del Label.

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/index.js

@@ -144,7 +144,7 @@ import { r } from "./components/hook-form/RHFPeriod/RHFPeriod.styles.js";
 import { R as R16 } from "./components/hook-form/RHFPeriod/RHFPeriod.js";
 import { R as R17 } from "./components/hook-form/RHFPeriod/constants.js";
 import { R as R18 } from "./components/hook-form/RHFPeriod/slots/RHFPeriodEnum.js";
-import { N as N3, P as P6, R as R19, S as S6 } from "./components/hook-form/RHFPeriod/slots/RHFPeriodSlots.js";
+import { P as P6, R as R19, S as S6, T as T17 } from "./components/hook-form/RHFPeriod/slots/RHFPeriodSlots.js";
 import { R as R20 } from "./components/hook-form/RHFNumberInput/RHFNumberInput.js";
 import { R as R21 } from "./components/hook-form/RHFUpload/RHFUploadImage/RHFUploadImage.js";
 import { I as I4 } from "./components/Icon/Icon.js";
@@ -160,7 +160,7 @@ import { a as a9, M as M3 } from "./components/MenuActions/MenuActions.js";
 import { M as M4 } from "./components/MFIsolationApp/MFIsolationApp.js";
 import { M as M5 } from "./components/MFLoader/MFLoader.js";
 import { g as g24 } from "./components/MFLoader/dictionary.js";
-import { N as N4 } from "./components/NoItemSelected/NoItemSelected.js";
+import { N as N3 } from "./components/NoItemSelected/NoItemSelected.js";
 import { g as g25 } from "./components/NoItemSelected/dictionary.js";
 import { g as g26 } from "./components/ObjectLogs/dictionary.js";
 import { O } from "./components/ObjectLogs/ObjectLogs.js";
@@ -173,8 +173,8 @@ import { P as P11 } from "./components/PrintingSystem/PrintingSystem.js";
 import { P as P12 } from "./components/PropertyValue/PropertyValue.js";
 import { S as S7 } from "./components/ScrollBar/ScrollBar.js";
 import { S as S8 } from "./components/SideBar/SideBar.js";
-import { T as T17 } from "./components/ToastContainer/ToastContainer.js";
-import { T as T18 } from "./components/ToastContainer/subcomponents/ToastMessage/ToastMessage.js";
+import { T as T18 } from "./components/ToastContainer/ToastContainer.js";
+import { T as T19 } from "./components/ToastContainer/subcomponents/ToastMessage/ToastMessage.js";
 import { W } from "./components/WindowBase/WindowBase.js";
 import { u as u14 } from "./components/WindowBase/hooks/useWindowToolsMF/index.js";
 import { u as u15, a as a11 } from "./components/WindowBase/hooks/useDynamicMFParameters/index.js";
@@ -304,9 +304,8 @@ export {
   M as MotionContainer,
   M2 as MotionLazyContainer,
   N2 as NavLink,
-  N4 as NoItemSelected,
+  N3 as NoItemSelected,
   N as NumberEditor,
-  N3 as NumberInputStyled,
   O as ObjectLogs,
   O2 as ObjectQueue,
   P8 as PDFViewer,
@@ -363,8 +362,9 @@ export {
   a7 as TabProvider,
   T5 as Tabs,
   T2 as TextEditor,
-  T17 as ToastContainer,
-  T18 as ToastMessage,
+  T17 as TextFieldStyled,
+  T18 as ToastContainer,
+  T19 as ToastMessage,
   T9 as ToggleButton,
   T12 as ToggleButtonRootStyled,
   T11 as ToggleButtonSlots,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@m4l/components",
-  "version": "9.2.62-B10072025beta.2",
+  "version": "9.2.62-JT09072025.beta.1",
   "license": "UNLICENSED",
   "description": "M4L Components",
   "lint-staged": {

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

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[];