@m4l/components 9.2.63-JT14072025.beta.1 → 9.2.64

package/@types/types.d.ts

@@ -149,6 +149,7 @@ import { ScrollBarOwnerState, ScrollBarSlotsType } from '../components/ScrollBar
 import { SplitLayoutOwnerState } from '../components/extended/React-resizable-panels/types';
 import { ObjectLogsOwnerState, ObjectLogsSlotsType } from '../components/ObjectLogs/types';
 import { LanguagePopoverOwnerState, LanguagePopoverSlotsType } from '../components/LanguagePopover/types';
+import { ContainerFlowOwnerState, ContainerFlowSlotsType } from '../components/ContainerFlow/types';
 declare module '@mui/material/styles' {
   // Define the slots in the theme
   interface ComponentNameToClassKey {
@@ -228,6 +229,7 @@ declare module '@mui/material/styles' {
     M4LSplitLayout: SplitLayoutOwnerState;
     M4LObjectLogs: ObjectLogsSlotsType;
     M4LLanguagePopover: LanguagePopoverSlotsType;
+    M4LContainerFlow: ContainerFlowSlotsType;
   }
   interface ComponentsPropsList {
     // Extend ComponentsProps or ComponentsOwnerState(this extend ComponentProps)
@@ -307,6 +309,7 @@ declare module '@mui/material/styles' {
     M4LSplitLayout: Partial<SplitLayoutOwnerState>;
     M4LObjectLogs: Partial<ObjectLogsOwnerState>;
     M4LLanguagePopover: Partial<LanguagePopoverOwnerState>;
+    M4LContainerFlow: Partial<ContainerFlowOwnerState>;
   }
   interface Components {
     M4LDynamicFilter?: {
@@ -699,5 +702,10 @@ declare module '@mui/material/styles' {
       styleOverrides?: ComponentsOverrides<Theme>['M4LLanguagePopover'];
       variants?: ComponentsVariants['M4LLanguagePopover'];
     };
+    M4LContainerFlow?: {
+      defaultProps?: ComponentsPropsList['M4LContainerFlow'];
+      styleOverrides?: ComponentsOverrides<Theme>['M4LContainerFlow'];
+      variants?: ComponentsVariants['M4LContainerFlow'];
+    };
   }
 }

package/components/ContainerFlow/ContainerFlow.d.ts

@@ -0,0 +1,7 @@
+import { ContainerFlowProps } from './types';
+/**
+ * Componente que permite renderizar un contenedor de items en forma de flujo.
+ * @param props - Propiedades del componente.
+ * @returns Un componente de tipo div con los estilos del contenedor de items.
+ */
+export declare const ContainerFlow: (props: ContainerFlowProps) => import("react/jsx-runtime").JSX.Element;

package/components/ContainerFlow/ContainerFlow.js

@@ -0,0 +1,25 @@
+import { jsx } from "react/jsx-runtime";
+import { C as CONTAINER_FLOW_CLASSES } from "./constants.js";
+import { C as ContainerFlowWrapperItemStyled, a as ContainerFlowRootStyled } from "./slots/ContainerFlowSlots.js";
+import clsx from "clsx";
+const ContainerFlow = (props) => {
+  const { variant = "column-flex", size, children, minWidth, className, gap = "standard" } = props;
+  const isColumnFlex = variant === "column-flex";
+  const ownerState = {
+    variant,
+    size,
+    minWidth,
+    gap
+  };
+  const childrenArray = Array.isArray(children) ? children : children ? [children] : [];
+  let itemsToRender;
+  if (!isColumnFlex && children) {
+    itemsToRender = children;
+  } else if (childrenArray.length > 0) {
+    itemsToRender = childrenArray.map((child, index) => /* @__PURE__ */ jsx(ContainerFlowWrapperItemStyled, { role: "listitem", ownerState: { variant, size }, className: CONTAINER_FLOW_CLASSES.wrapperItem, children: child }, index));
+  }
+  return /* @__PURE__ */ jsx(ContainerFlowRootStyled, { role: "list", ownerState, className: clsx(CONTAINER_FLOW_CLASSES.root, className), children: itemsToRender });
+};
+export {
+  ContainerFlow as C
+};

package/components/ContainerFlow/ContainerFlow.styles.d.ts

@@ -0,0 +1,2 @@
+import { ContainerFlowStyles } from './types';
+export declare const containerFlowStyles: ContainerFlowStyles;

package/components/ContainerFlow/ContainerFlow.styles.js

@@ -0,0 +1,46 @@
+import { g as getSpacingValue } from "./helpers/getSpacingValue/getSpacingValue.js";
+import { a as CONTAINER_FLOW_MIN_WIDTH_VALUES, b as CONTAINER_QUERY_NAME } from "./constants.js";
+const containerFlowStyles = {
+  /**
+   * Estilos para el contenedor raíz del componente.
+   */
+  root: ({ ownerState }) => ({
+    width: "100%",
+    height: "100%",
+    gap: getSpacingValue(ownerState?.gap ?? "standard"),
+    containerName: CONTAINER_QUERY_NAME,
+    containerType: "inline-size",
+    ...ownerState?.variant === "grid-layout" && {
+      display: "grid",
+      gridTemplateColumns: `repeat(auto-fill, minmax(${ownerState.minWidth ?? 200}px, 1fr))`,
+      height: "fit-content"
+    },
+    ...(ownerState?.variant === "column-flex" || ownerState?.variant === "flex-wrap") && {
+      display: "flex",
+      flexDirection: "row",
+      flexWrap: "wrap",
+      height: "fit-content",
+      "& > .M4LContainerFlow-wrapperItem": {
+        minWidth: ownerState?.minWidth ?? CONTAINER_FLOW_MIN_WIDTH_VALUES,
+        flex: 1
+      },
+      [`@container ${CONTAINER_QUERY_NAME} (max-width: ${ownerState?.minWidth ? ownerState?.minWidth - 1 : 200 - 1}px)`]: {
+        "& > .M4LContainerFlow-wrapperItem": {
+          minWidth: "100%",
+          maxWidth: "100%"
+        }
+      }
+    }
+  }),
+  /**
+   * Estilos para el contenedor de los items del componente.
+   */
+  wrapperItem: () => ({
+    display: "flex",
+    flexDirection: "row",
+    flexWrap: "wrap"
+  })
+};
+export {
+  containerFlowStyles as c
+};

package/components/ContainerFlow/constants.d.ts

@@ -0,0 +1,9 @@
+export declare const CONTAINER_FLOW_KEY_COMPONENT = "M4LContainerFlow";
+export declare const CONTAINER_FLOW_CLASSES: Record<string, string>;
+export declare const CONTAINER_FLOW_GAP_VALUES: {
+    compact: number;
+    standard: number;
+    comfortable: number;
+};
+export declare const CONTAINER_QUERY_NAME = "container";
+export declare const CONTAINER_FLOW_MIN_WIDTH_VALUES = 280;

package/components/ContainerFlow/constants.js

@@ -0,0 +1,21 @@
+import { g as getComponentClasses } from "../../utils/getComponentSlotRoot.js";
+import { C as ContainerFlowSlots } from "./slots/ContainerFlowEnum.js";
+const CONTAINER_FLOW_KEY_COMPONENT = "M4LContainerFlow";
+const CONTAINER_FLOW_CLASSES = getComponentClasses(
+  CONTAINER_FLOW_KEY_COMPONENT,
+  ContainerFlowSlots
+);
+const CONTAINER_FLOW_GAP_VALUES = {
+  compact: 8,
+  standard: 16,
+  comfortable: 24
+};
+const CONTAINER_QUERY_NAME = "container";
+const CONTAINER_FLOW_MIN_WIDTH_VALUES = 280;
+export {
+  CONTAINER_FLOW_CLASSES as C,
+  CONTAINER_FLOW_MIN_WIDTH_VALUES as a,
+  CONTAINER_QUERY_NAME as b,
+  CONTAINER_FLOW_GAP_VALUES as c,
+  CONTAINER_FLOW_KEY_COMPONENT as d
+};

package/components/ContainerFlow/helpers/getSpacingValue/getSpacingValue.d.ts

@@ -0,0 +1,7 @@
+import { SemanticSpacings } from '../../types';
+/**
+ * Función que retorna el valor del gap en función del tipo de gap recibido.
+ * @param gap - El gap a convertir.
+ * @returns El valor del gap en función del tipo de gap recibido.
+ */
+export declare const getSpacingValue: (gap: SemanticSpacings | number) => number;

package/components/ContainerFlow/helpers/getSpacingValue/getSpacingValue.js

@@ -0,0 +1,10 @@
+import { c as CONTAINER_FLOW_GAP_VALUES } from "../../constants.js";
+const getSpacingValue = (gap) => {
+  if (typeof gap === "number") {
+    return gap;
+  }
+  return CONTAINER_FLOW_GAP_VALUES[gap];
+};
+export {
+  getSpacingValue as g
+};

package/components/ContainerFlow/helpers/getSpacingValue/getSpacingValue.test.d.ts

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

package/components/ContainerFlow/index.d.ts

@@ -0,0 +1,2 @@
+export { ContainerFlow } from './ContainerFlow';
+export type { ContainerFlowProps } from './types';

package/components/ContainerFlow/index.js

@@ -0,0 +1 @@
+

package/components/ContainerFlow/slots/ContainerFlowEnum.d.ts

@@ -0,0 +1,4 @@
+export declare enum ContainerFlowSlots {
+    root = "root",
+    wrapperItem = "wrapperItem"
+}

package/components/ContainerFlow/slots/ContainerFlowEnum.js

@@ -0,0 +1,8 @@
+var ContainerFlowSlots = /* @__PURE__ */ ((ContainerFlowSlots2) => {
+  ContainerFlowSlots2["root"] = "root";
+  ContainerFlowSlots2["wrapperItem"] = "wrapperItem";
+  return ContainerFlowSlots2;
+})(ContainerFlowSlots || {});
+export {
+  ContainerFlowSlots as C
+};

package/components/ContainerFlow/slots/ContainerFlowSlots.d.ts

@@ -0,0 +1,6 @@
+export declare const ContainerFlowRootStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Record<string, unknown> & {
+    ownerState?: (Partial<import('../types').ContainerFlowOwnerState> & 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 ContainerFlowWrapperItemStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Record<string, unknown> & {
+    ownerState?: (Partial<import('../types').ContainerFlowOwnerState> & Record<string, unknown>) | undefined;
+}, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('react').ClassAttributes<HTMLDivElement> | keyof import('react').HTMLAttributes<HTMLDivElement>>, {}>;

package/components/ContainerFlow/slots/ContainerFlowSlots.js

@@ -0,0 +1,16 @@
+import { styled } from "@mui/material/styles";
+import { d as CONTAINER_FLOW_KEY_COMPONENT } from "../constants.js";
+import { C as ContainerFlowSlots } from "./ContainerFlowEnum.js";
+import { c as containerFlowStyles } from "../ContainerFlow.styles.js";
+const ContainerFlowRootStyled = styled("div", {
+  name: CONTAINER_FLOW_KEY_COMPONENT,
+  slot: ContainerFlowSlots.root
+})(containerFlowStyles?.root);
+const ContainerFlowWrapperItemStyled = styled("div", {
+  name: CONTAINER_FLOW_KEY_COMPONENT,
+  slot: ContainerFlowSlots.wrapperItem
+})(containerFlowStyles?.wrapperItem);
+export {
+  ContainerFlowWrapperItemStyled as C,
+  ContainerFlowRootStyled as a
+};

package/components/ContainerFlow/tests/ContainerFlow.test.d.ts

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

package/components/ContainerFlow/types.d.ts

@@ -0,0 +1,41 @@
+import { Sizes } from '@m4l/styles';
+import { ContainerFlowSlots } from './slots/ContainerFlowEnum';
+import { CONTAINER_FLOW_KEY_COMPONENT } from './constants';
+import { Theme } from '@mui/material';
+import { M4LOverridesStyleRules } from '../../@types/augmentations';
+export type ContainerFlowVariant = 'flex-wrap' | 'column-flex' | 'grid-layout';
+export type SemanticSpacings = 'compact' | 'comfortable' | 'standard';
+export type ContainerFlowProps = {
+    /**
+     * Variante del contenedor de items.
+     */
+    variant: ContainerFlowVariant;
+    /**
+     * Items del contenedor de items.
+     */
+    children: React.ReactNode;
+    /**
+     * Tamaño del contenedor de items.
+     */
+    size?: Extract<Sizes, 'small' | 'medium'>;
+    /**
+     * Ancho mínimo de los items del contenedor de items.
+     */
+    minWidth?: number;
+    /**
+     * Clase del contenedor de items.
+     */
+    className?: string;
+    /**
+     * Espacio entre los items del contenedor de items.
+     */
+    gap?: SemanticSpacings | number;
+};
+export type ContainerFlowSlotsType = keyof typeof ContainerFlowSlots;
+export type ContainerFlowOwnerState = {
+    variant: ContainerFlowProps['variant'];
+    size: ContainerFlowProps['size'];
+    minWidth: ContainerFlowProps['minWidth'];
+    gap: ContainerFlowProps['gap'];
+};
+export type ContainerFlowStyles = M4LOverridesStyleRules<ContainerFlowSlots, typeof CONTAINER_FLOW_KEY_COMPONENT, Theme>;

package/components/DataGrid/Datagrid.styles.js

@@ -335,7 +335,6 @@ const dataGridStyles = {
         alignItems: "center",
         textOverflow: "inline",
         gridTemplateColumns: "auto",
-        padding: "0 8px",
         ...getTypographyStyles(
           theme.generalSettings.isMobile,
           ownerState?.size || "medium",
@@ -401,11 +400,6 @@ const dataGridStyles = {
         },
         "& .m4l_icon": {
           height: "100%"
-        },
-        '&[role="columnheader"]': {
-          '&[aria-colindex="1"]': {
-            borderTopLeftRadius: theme.vars.size.baseSpacings.sp2
-          }
         }
       },
       '& .rdg-cell[role="columnheader"] .rdg-header-sort-name': {
@@ -582,7 +576,6 @@ const dataGridStyles = {
     alignItems: "center",
     backgroundColor: theme.vars.palette.default.enabled,
     padding: theme.vars.size.baseSpacings.sp1,
-    marginBottom: theme.vars.size.baseSpacings.sp2,
     gap: theme.vars.size.baseSpacings.sp1,
     borderRadius: theme.vars.size.borderRadius.r1,
     ...getSizeStyles(theme, ownerState?.size || "medium", "action", (size) => ({
@@ -671,24 +664,11 @@ const dataGridStyles = {
   /**
    * Estilos para el contenedor del boton de acciones del header
    */
-  buttonHeaderActions: ({ theme }) => ({
+  buttonHeaderActions: () => ({
     display: "flex",
     alignItems: "center",
     justifyContent: "space-between",
-    width: "100%",
-    cursor: "pointer",
-    height: "100%",
-    "> span": {
-      display: "flex",
-      alignItems: "center",
-      justifyContent: "space-between",
-      width: "100%",
-      "& svg": {
-        width: "8px",
-        height: "8px",
-        color: theme.vars.palette.chips.default.contained.backgroundColorTone
-      }
-    }
+    width: "100%"
   }),
   /**
    * Estilos para el formatter de iconos

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

@@ -1,6 +1,5 @@
 import { ColumnBooleanFormatterProps } from './types';
-import { RenderCellProps } from 'react-data-grid';
 /**
  * Función para formatear un booleano en una columna de un DataGrid
  */
-export declare function ColumnBooleanFormatter<TRow>(props: ColumnBooleanFormatterProps<TRow>): (renderProps: RenderCellProps<TRow>) => import("react/jsx-runtime").JSX.Element;
+export declare function ColumnBooleanFormatter<TRow>(props: ColumnBooleanFormatterProps<TRow>): (obProps: any) => import("react/jsx-runtime").JSX.Element;

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

@@ -1,11 +1,12 @@
 import { jsx } from "react/jsx-runtime";
 import { getPropertyByString } from "@m4l/core";
 import React from "react";
+import { g as getFieldValueWithRow } from "../../../../helpers/getFieldValueWithRow.js";
 import { B as BooleanFormatter } from "../../../formatters/BooleanFormatter/BooleanFormatter.js";
 function ColumnBooleanFormatter(props) {
   const { fieldValue, presentationType, Component = React.Fragment } = props;
-  return (renderProps) => {
-    const valueMaybeString = getPropertyByString(renderProps.row, fieldValue);
+  return (obProps) => {
+    const valueMaybeString = getPropertyByString(obProps, getFieldValueWithRow(fieldValue));
     let fixedValue;
     if (typeof valueMaybeString === "boolean") {
       fixedValue = valueMaybeString;

package/components/DataGrid/formatters/ColumnBooleanFormatter/useColumnBoolean.d.ts

@@ -3,7 +3,7 @@ import { ColumnBooleanFormatterProps } from './types';
  * Hook function that return the formatter, filter and customSort for a boolean column
  */
 export declare const useColumnBoolean: <TRow>(props: ColumnBooleanFormatterProps<TRow>) => {
-    formatter: (renderProps: import('react-data-grid').RenderCellProps<TRow, unknown>) => import("react/jsx-runtime").JSX.Element;
+    formatter: (obProps: any) => import("react/jsx-runtime").JSX.Element;
     customFilter: (row: TRow, value: string) => boolean;
     customSort: (a: TRow, b: TRow) => 0 | 1 | -1;
 };

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

@@ -1,8 +1,7 @@
 import { ColumnChipStatusFormatterProps } from './types';
-import { RenderCellProps } from 'react-data-grid';
 /**
  * Formatter para mostrar un chip de estado en una columna de un DataGrid
  * @param props - Propiedades del formatter
  * @returns Componente ChipStatusFormatter
  */
-export declare const ColumnChipStatusFormatter: <TRow>(props: ColumnChipStatusFormatterProps<TRow>) => (renderProps: RenderCellProps<TRow>) => import("react/jsx-runtime").JSX.Element;
+export declare const ColumnChipStatusFormatter: (props: ColumnChipStatusFormatterProps<any>) => (obProps: any) => import("react/jsx-runtime").JSX.Element;

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

@@ -1,15 +1,14 @@
 import { jsx } from "react/jsx-runtime";
 import { getPropertyByString } from "@m4l/core";
+import { g as getFieldValueWithRow } from "../../../../helpers/getFieldValueWithRow.js";
 import { C as ChipStatusFormatterColumnWrapperStyled } from "../../../formatters/ChipStatusFormatter/slots/ChipStatusFormatterSlots.js";
 import { g as getNullGuard } from "../../../../utils/getNullGuard.js";
 import { C as ChipStatusFormatter } from "../../../formatters/ChipStatusFormatter/ChipStatusFormatter.js";
 const ColumnChipStatusFormatter = (props) => {
   const { fieldStatus, fieldLabel, statusesColors, fallbackColor } = props;
-  return (renderProps) => {
-    const cleanFieldStatus = fieldStatus.toString().startsWith("row.") ? fieldStatus.toString().substring(4) : fieldStatus.toString();
-    const cleanFieldLabel = typeof fieldLabel === "string" && fieldLabel.startsWith("row.") ? fieldLabel.substring(4) : fieldLabel;
-    const status = getNullGuard(getPropertyByString(renderProps.row, cleanFieldStatus));
-    const label = typeof cleanFieldLabel === "string" ? getNullGuard(getPropertyByString(renderProps.row, cleanFieldLabel)) : typeof fieldLabel === "function" ? fieldLabel(renderProps.row, status) : "";
+  return (obProps) => {
+    const status = getNullGuard(getPropertyByString(obProps, getFieldValueWithRow(fieldStatus.toString())));
+    const label = typeof fieldLabel === "string" ? getNullGuard(getPropertyByString(obProps, getFieldValueWithRow(fieldLabel))) : fieldLabel(obProps.row, status);
     return /* @__PURE__ */ jsx(
       ChipStatusFormatter,
       {

package/components/DataGrid/formatters/ColumnChipStatusFormatter/useColumnChipStatus.d.ts

@@ -3,7 +3,7 @@ import { ColumnChipStatusFormatterProps } from './types';
  * Funcion helper que retorna el formatter, filter y customSort de la columna concatenada.
  */
 export declare const useColumnChipStatus: <TRow>(props: ColumnChipStatusFormatterProps<TRow>) => {
-    formatter: (renderProps: import('react-data-grid').RenderCellProps<TRow, unknown>) => import("react/jsx-runtime").JSX.Element;
+    formatter: (obProps: any) => import("react/jsx-runtime").JSX.Element;
     customFilter: (row: TRow, value: string | number) => boolean;
     customSort: (a: TRow, b: TRow) => 0 | 1 | -1;
 };

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

@@ -1,6 +1,5 @@
 import { ColumnConcatenatedValuesFormatterProps } from './types';
-import { RenderCellProps } from 'react-data-grid';
 /**
  * Function to DataGrid that concatenates an array of strings
  */
-export declare function ColumnConcatenatedValuesFormatter<TRow>(props: ColumnConcatenatedValuesFormatterProps<TRow>): (renderProps: RenderCellProps<TRow>) => import("react/jsx-runtime").JSX.Element;
+export declare function ColumnConcatenatedValuesFormatter<TRow>(props: ColumnConcatenatedValuesFormatterProps<TRow>): (obProps: any) => import("react/jsx-runtime").JSX.Element;

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

@@ -1,13 +1,13 @@
 import { jsx } from "react/jsx-runtime";
 import { getPropertyByString } from "@m4l/core";
 import React from "react";
+import { g as getFieldValueWithRow } from "../../../../helpers/getFieldValueWithRow.js";
 import { C as ConcatenatedFormatter } from "../../../formatters/ConcatenatedFormatter/ConcatenatedFormatter.js";
 function ColumnConcatenatedValuesFormatter(props) {
   const { fieldValue, fieldSeparator, Component = React.Fragment } = props;
-  return (renderProps) => {
-    const rowData = renderProps.row;
+  return (obProps) => {
     const values = fieldValue.map((element) => {
-      const valueMaybeString = getPropertyByString(rowData, element);
+      const valueMaybeString = getPropertyByString(obProps, getFieldValueWithRow(element));
       let fixedValue;
       if (typeof valueMaybeString === "string" || typeof valueMaybeString === "number") {
         fixedValue = valueMaybeString.toString();
@@ -16,14 +16,7 @@ function ColumnConcatenatedValuesFormatter(props) {
       }
       return fixedValue;
     });
-    return /* @__PURE__ */ jsx(
-      ConcatenatedFormatter,
-      {
-        values,
-        separator: fieldSeparator,
-        Component
-      }
-    );
+    return /* @__PURE__ */ jsx(ConcatenatedFormatter, { values, separator: fieldSeparator, Component });
   };
 }
 export {

package/components/DataGrid/formatters/ColumnConcatenatedValuesFormatter/useColumnConcatenatedValues.d.ts

@@ -3,7 +3,7 @@ import { ColumnConcatenatedValuesFormatterProps } from './types';
  * Funcion helper que retorna el formatter, filter y customSort de la columna concatenada.
  */
 export declare const useColumnConcatenatedValues: <TRow>(props: ColumnConcatenatedValuesFormatterProps<TRow>) => {
-    formatter: (renderProps: import('react-data-grid').RenderCellProps<TRow, unknown>) => import("react/jsx-runtime").JSX.Element;
+    formatter: (obProps: any) => import("react/jsx-runtime").JSX.Element;
     customFilter: (row: TRow, value: string) => boolean;
     customSort: (a: TRow, b: TRow) => 0 | 1 | -1;
 };

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

@@ -1,6 +1,5 @@
 import { ColumnDateFormatterProps } from './types';
-import { RenderCellProps } from 'react-data-grid';
 /**
  * Function to format a date in a column of a DataGrid
  */
-export declare function ColumnDateFormatter<TRow>(props: ColumnDateFormatterProps<TRow>): (formatterProps: RenderCellProps<TRow>) => import("react/jsx-runtime").JSX.Element;
+export declare function ColumnDateFormatter<TRow>(props: ColumnDateFormatterProps<TRow>): (obProps: any) => import("react/jsx-runtime").JSX.Element;

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

@@ -1,28 +1,19 @@
 import { jsx } from "react/jsx-runtime";
 import { getPropertyByString } from "@m4l/core";
 import React from "react";
+import { g as getFieldValueWithRow } from "../../../../helpers/getFieldValueWithRow.js";
 import { D as DateFormatter } from "../../../formatters/DateFormatter/DateFormatter.js";
 function ColumnDateFormatter(props) {
   const { fieldValue, presentationType, Component = React.Fragment } = props;
-  return (formatterProps) => {
-    const valueMaybeDateStringNumber = getPropertyByString(
-      formatterProps.row,
-      fieldValue
-    );
+  return (obProps) => {
+    const valueMaybeDateStringNumber = getPropertyByString(obProps, getFieldValueWithRow(fieldValue));
     let fixedValue;
     if (typeof valueMaybeDateStringNumber === "string" || typeof valueMaybeDateStringNumber === "number" || valueMaybeDateStringNumber instanceof Date) {
       fixedValue = valueMaybeDateStringNumber;
     } else {
       fixedValue = "";
     }
-    return /* @__PURE__ */ jsx(
-      DateFormatter,
-      {
-        presentationType,
-        value: fixedValue,
-        Component
-      }
-    );
+    return /* @__PURE__ */ jsx(DateFormatter, { presentationType, value: fixedValue, Component });
   };
 }
 export {

package/components/DataGrid/formatters/ColumnDateFormatter/useColumnDate.d.ts

@@ -8,7 +8,7 @@ export declare const useCustomDateFilter: <TRow>(props: ColumnDateFormatterProps
  * customFilter and customSort of a date column
  */
 export declare const useColumnDate: <TRow>(props: ColumnDateFormatterProps<TRow>) => {
-    formatter: (formatterProps: import('react-data-grid').RenderCellProps<TRow, unknown>) => import("react/jsx-runtime").JSX.Element;
+    formatter: (obProps: any) => import("react/jsx-runtime").JSX.Element;
     customFilter: (row: TRow, value: string) => boolean;
     customSort: (a: TRow, b: TRow) => 0 | 1 | -1;
 };

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

@@ -1,7 +1,6 @@
 import { ColumnIconFormatterProps } from './types';
-import { RenderCellProps } from 'react-data-grid';
 /**
  * Function to format an icon in a column of a DataGrid
  * @template TRow - Tipo de datos de la fila
  */
-export declare function ColumnIconFormatter<TRow>(props: ColumnIconFormatterProps<TRow>): (renderProps: RenderCellProps<TRow>) => 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

@@ -2,8 +2,8 @@ import { r as renderMultipleIcons } from "./helpers/renderMultipleIcons.js";
 import { r as renderIcon } from "./helpers/renderIcon.js";
 function ColumnIconFormatter(props) {
   const { getIconProps } = props;
-  return (renderProps) => {
-    const iconProps = getIconProps(renderProps.row);
+  return (rowData) => {
+    const iconProps = getIconProps(rowData);
     if (Array.isArray(iconProps)) {
       return renderMultipleIcons(iconProps);
     }

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

@@ -4,5 +4,5 @@ import { ColumnIconFormatterProps } from './types';
  * el formatter de la columna
  */
 export declare const useColumnIcon: <TRow>(props: ColumnIconFormatterProps<TRow>) => {
-    formatter: (renderProps: import('react-data-grid').RenderCellProps<TRow, unknown>) => import("react/jsx-runtime").JSX.Element;
+    formatter: (rowData: TRow) => JSX.Element;
 };

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

@@ -1,2 +1,2 @@
-import { RenderCellProps } from 'react-data-grid';
-export type ColumnInteractiveCheckFormatterProps<Row> = RenderCellProps<Row>;
+import { FormatterProps as RDGFormatterProps } from 'react-data-grid';
+export type ColumnInteractiveCheckFormatterProps<Row> = RDGFormatterProps<Row>;

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

@@ -1,6 +1,5 @@
 import { ColumnNestedValueFormatterProps } from './types';
-import { RenderCellProps } from 'react-data-grid';
 /**
  * Function to format a nested value in a column of a DataGrid
  */
-export declare function ColumnNestedValueFormatter<TRow>(props: ColumnNestedValueFormatterProps<TRow>): (formatterProps: RenderCellProps<TRow>) => import("react/jsx-runtime").JSX.Element;
+export declare function ColumnNestedValueFormatter<TRow>(props: ColumnNestedValueFormatterProps<TRow>): (obProps: any) => import("react/jsx-runtime").JSX.Element;

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

@@ -1,13 +1,12 @@
 import { jsx } from "react/jsx-runtime";
 import { getPropertyByString } from "@m4l/core";
 import React from "react";
+import { g as getFieldValueWithRow } from "../../../../helpers/getFieldValueWithRow.js";
 import { g as getNullGuard } from "../../../../utils/getNullGuard.js";
 function ColumnNestedValueFormatter(props) {
   const { fieldValue, Component = React.Fragment } = props;
-  return (formatterProps) => {
-    const property = getNullGuard(
-      getPropertyByString(formatterProps.row, fieldValue)
-    );
+  return (obProps) => {
+    const property = getNullGuard(getPropertyByString(obProps, getFieldValueWithRow(fieldValue)));
     const value = typeof property === "object" ? JSON.stringify(property) : property;
     return /* @__PURE__ */ jsx(Component, { children: value });
   };

package/components/DataGrid/formatters/ColumnNestedValueFormatter/useColumnNestedValue.d.ts

@@ -4,7 +4,7 @@ import { ColumnNestedValueFormatterProps } from './types';
  * of the column for ColumnNestedValueFormatter.
  */
 export declare const useColumnNestedValue: <TRow>(props: ColumnNestedValueFormatterProps<TRow>) => {
-    formatter: (formatterProps: import('react-data-grid').RenderCellProps<TRow, unknown>) => import("react/jsx-runtime").JSX.Element;
+    formatter: (obProps: any) => import("react/jsx-runtime").JSX.Element;
     customFilter: (row: TRow, value: string) => any;
     customSort: (a: TRow, b: TRow) => 0 | 1 | -1;
 };

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

@@ -1,6 +1,5 @@
 import { ColumnPointsFormatterProps } from './types';
-import { RenderCellProps } from 'react-data-grid';
 /**
  * Formatter for column points in DataGrid
  */
-export declare function ColumnPointsFormatter<TRow>(props: ColumnPointsFormatterProps<TRow>): (formatterProps: RenderCellProps<TRow>) => import("react/jsx-runtime").JSX.Element;
+export declare function ColumnPointsFormatter<TRow>(props: ColumnPointsFormatterProps<TRow>): (obProps: any) => import("react/jsx-runtime").JSX.Element;

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

@@ -1,21 +1,13 @@
 import { jsx } from "react/jsx-runtime";
 import React from "react";
 import { P as PointsFormatter } from "../../../formatters/PointsFormatter/PointsFormatter.js";
+import { g as getFieldValueWithRow } from "../../../../helpers/getFieldValueWithRow.js";
 function ColumnPointsFormatter(props) {
   const { Component = React.Fragment } = props;
-  const fieldValue = props.fieldValue;
-  const fieldUnit = props.fieldUnit;
-  return (formatterProps) => {
-    return /* @__PURE__ */ jsx(
-      PointsFormatter,
-      {
-        obProps: formatterProps.row,
-        ...props,
-        fieldValue,
-        fieldUnit,
-        Component
-      }
-    );
+  const fieldValue = getFieldValueWithRow(props.fieldValue);
+  const fieldUnit = getFieldValueWithRow(props.fieldUnit);
+  return (obProps) => {
+    return /* @__PURE__ */ jsx(PointsFormatter, { obProps, ...props, fieldValue, fieldUnit, Component });
   };
 }
 export {