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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (88) hide show
  1. package/components/DataGrid/Datagrid.styles.js +43 -12
  2. package/components/DataGrid/formatters/ColumnBooleanFormatter/formatter.d.ts +2 -1
  3. package/components/DataGrid/formatters/ColumnBooleanFormatter/formatter.js +2 -3
  4. package/components/DataGrid/formatters/ColumnBooleanFormatter/useColumnBoolean.d.ts +1 -1
  5. package/components/DataGrid/formatters/ColumnChipStatusFormatter/formatter.d.ts +2 -1
  6. package/components/DataGrid/formatters/ColumnChipStatusFormatter/formatter.js +5 -4
  7. package/components/DataGrid/formatters/ColumnChipStatusFormatter/useColumnChipStatus.d.ts +1 -1
  8. package/components/DataGrid/formatters/ColumnConcatenatedValuesFormatter/formatter.d.ts +2 -1
  9. package/components/DataGrid/formatters/ColumnConcatenatedValuesFormatter/formatter.js +11 -4
  10. package/components/DataGrid/formatters/ColumnConcatenatedValuesFormatter/useColumnConcatenatedValues.d.ts +1 -1
  11. package/components/DataGrid/formatters/ColumnDateFormatter/formatter.d.ts +2 -1
  12. package/components/DataGrid/formatters/ColumnDateFormatter/formatter.js +13 -4
  13. package/components/DataGrid/formatters/ColumnDateFormatter/useColumnDate.d.ts +1 -1
  14. package/components/DataGrid/formatters/ColumnIconFormatter/formatter.d.ts +3 -1
  15. package/components/DataGrid/formatters/ColumnIconFormatter/formatter.js +7 -43
  16. package/components/DataGrid/formatters/ColumnIconFormatter/helpers/renderIcon.d.ts +8 -0
  17. package/components/DataGrid/formatters/ColumnIconFormatter/helpers/renderIcon.js +58 -0
  18. package/components/DataGrid/formatters/ColumnIconFormatter/helpers/renderMultipleIcons.d.ts +7 -0
  19. package/components/DataGrid/formatters/ColumnIconFormatter/helpers/renderMultipleIcons.js +19 -0
  20. package/components/DataGrid/formatters/ColumnIconFormatter/types.d.ts +10 -3
  21. package/components/DataGrid/formatters/ColumnIconFormatter/useColumnIcon.d.ts +2 -2
  22. package/components/DataGrid/formatters/ColumnInteractiveCheckFormatter/types.d.ts +2 -2
  23. package/components/DataGrid/formatters/ColumnNestedValueFormatter/formatter.d.ts +2 -1
  24. package/components/DataGrid/formatters/ColumnNestedValueFormatter/formatter.js +4 -3
  25. package/components/DataGrid/formatters/ColumnNestedValueFormatter/useColumnNestedValue.d.ts +1 -1
  26. package/components/DataGrid/formatters/ColumnPointsFormatter/formatter.d.ts +2 -1
  27. package/components/DataGrid/formatters/ColumnPointsFormatter/formatter.js +13 -5
  28. package/components/DataGrid/formatters/ColumnPointsFormatter/useColumnPoints.d.ts +1 -1
  29. package/components/DataGrid/formatters/ColumnPriceFormatter/formatter.d.ts +2 -1
  30. package/components/DataGrid/formatters/ColumnPriceFormatter/formatter.js +11 -4
  31. package/components/DataGrid/formatters/ColumnPriceFormatter/useColumnPrice.d.ts +1 -1
  32. package/components/DataGrid/formatters/ColumnSetCheckFormatter/formatter.d.ts +2 -2
  33. package/components/DataGrid/formatters/ColumnSetCheckFormatter/formatter.js +1 -1
  34. package/components/DataGrid/formatters/ColumnSetCheckFormatter/useColumnSetCheck.d.ts +1 -1
  35. package/components/DataGrid/formatters/ColumnUncertaintyFormatter/formatter.d.ts +2 -1
  36. package/components/DataGrid/formatters/ColumnUncertaintyFormatter/formatter.js +15 -6
  37. package/components/DataGrid/formatters/ColumnUncertaintyFormatter/useColumnUncertainty.d.ts +1 -1
  38. package/components/DataGrid/index.d.ts +1 -1
  39. package/components/DataGrid/slots/DataGridEnum.d.ts +3 -0
  40. package/components/DataGrid/slots/DataGridEnum.js +6 -1
  41. package/components/DataGrid/slots/DataGridSlot.d.ts +6 -0
  42. package/components/DataGrid/slots/DataGridSlot.js +24 -19
  43. package/components/DataGrid/subcomponents/ControlNavigate/ControlNavigate.js +1 -1
  44. package/components/DataGrid/subcomponents/HeaderActions/index.js +1 -1
  45. package/components/DataGrid/subcomponents/HeaderActions/subcomponents/Density/index.js +2 -1
  46. package/components/DataGrid/subcomponents/HeaderActions/subcomponents/RowsCount/index.js +1 -1
  47. package/components/DataGrid/subcomponents/HeaderActions/subcomponents/Settings/subcomponents/ColumnsConfig/index.js +5 -6
  48. package/components/DataGrid/subcomponents/HeaderActions/subcomponents/hooks/useModalSettings/index.js +1 -1
  49. package/components/DataGrid/subcomponents/Table/hooks/getDragHeaderRenderer.d.ts +2 -2
  50. package/components/DataGrid/subcomponents/Table/hooks/useHeaderMenuActions.d.ts +2 -2
  51. package/components/DataGrid/subcomponents/Table/hooks/useHeaderMenuActions.js +17 -7
  52. package/components/DataGrid/subcomponents/Table/hooks/useSortColumnsRows.js +9 -7
  53. package/components/DataGrid/subcomponents/Table/index.d.ts +3 -1
  54. package/components/DataGrid/subcomponents/Table/index.js +40 -10
  55. package/components/DataGrid/subcomponents/Table/subcomponents/ActionsColumn.js +1 -1
  56. package/components/DataGrid/subcomponents/Table/subcomponents/CheckboxFormatter.d.ts +2 -2
  57. package/components/DataGrid/subcomponents/Table/subcomponents/DraggableHeaderRenderer.d.ts +2 -2
  58. package/components/DataGrid/subcomponents/Table/subcomponents/DraggableHeaderRenderer.js +24 -10
  59. package/components/DataGrid/subcomponents/Table/subcomponents/HeaderRenderClick/HeaderRenderClick.js +2 -2
  60. package/components/DataGrid/subcomponents/Table/subcomponents/SelectColumn.js +7 -7
  61. package/components/DataGrid/subcomponents/editors/TextEditor/index.d.ts +3 -3
  62. package/components/DataGrid/subcomponents/editors/TextEditor/index.js +1 -1
  63. package/components/DataGrid/types.d.ts +8 -6
  64. package/components/NumberInput/hooks/useNumberInput/useNumberInput.js +0 -2
  65. package/components/ObjectLogs/ObjectLogs.styles.js +2 -1
  66. package/components/ObjectLogs/slots/ObjectLogsEnum.d.ts +1 -0
  67. package/components/ObjectLogs/slots/ObjectLogsEnum.js +1 -0
  68. package/components/ObjectLogs/slots/ObjectLogsSlots.d.ts +3 -0
  69. package/components/ObjectLogs/slots/ObjectLogsSlots.js +7 -2
  70. package/components/areas/contexts/AreasContext/store.js +2 -2
  71. package/components/formatters/BooleanFormatter/BooleanFormatter.js +7 -4
  72. package/components/formatters/BooleanFormatter/BooleanFormatter.styles.js +9 -1
  73. package/components/formatters/BooleanFormatter/slots/BooleanFormatterEnum.d.ts +2 -1
  74. package/components/formatters/BooleanFormatter/slots/BooleanFormatterEnum.js +1 -0
  75. package/components/formatters/BooleanFormatter/slots/BooleanFormatterSlots.d.ts +3 -0
  76. package/components/formatters/BooleanFormatter/slots/BooleanFormatterSlots.js +6 -1
  77. package/components/formatters/BooleanFormatter/types.d.ts +1 -1
  78. package/components/hook-form/RHFAutocompleteAsync/reducer/RHFAutocompleteReducer.js +0 -5
  79. package/components/mui_extended/MenuItem/MenuItem.js +2 -1
  80. package/components/mui_extended/MenuItem/types.d.ts +4 -0
  81. package/hooks/useDynamicFilterAndSort/useDynamicFilterAndSort.js +1 -1
  82. package/package.json +2 -2
  83. package/storybook/components/DataGrid/DataGrid.stories.d.ts +8 -0
  84. package/storybook/components/DataGrid/helpers/icons.d.ts +6 -0
  85. package/storybook/components/DataGrid/helpers/types.d.ts +14 -2
  86. package/storybook/components/DataGrid/helpers/useColumns.d.ts +2 -1
  87. package/storybook/components/DataGrid/helpers/useSeed.d.ts +1 -1
  88. package/helpers/getFieldValueWithRow.js +0 -10
@@ -335,6 +335,7 @@ const dataGridStyles = {
335
335
  alignItems: "center",
336
336
  textOverflow: "inline",
337
337
  gridTemplateColumns: "auto",
338
+ padding: "0 8px",
338
339
  ...getTypographyStyles(
339
340
  theme.generalSettings.isMobile,
340
341
  ownerState?.size || "medium",
@@ -400,15 +401,20 @@ const dataGridStyles = {
400
401
  },
401
402
  "& .m4l_icon": {
402
403
  height: "100%"
404
+ },
405
+ '&[role="columnheader"]': {
406
+ '&[aria-colindex="1"]': {
407
+ borderTopLeftRadius: theme.vars.size.baseSpacings.sp2
408
+ }
403
409
  }
404
410
  },
405
411
  '& .rdg-cell[role="columnheader"] .rdg-header-sort-name': {
406
412
  ...theme.colorSchemes.finalTheme.typography.bodyDens,
407
413
  //ajuste de contenido filtro del DataGrid
408
414
  width: "100%",
409
- display: "flex",
410
- justifyContent: "center",
411
- alignItems: "center",
415
+ whiteSpace: "nowrap",
416
+ overflow: "hidden",
417
+ textOverflow: "ellipsis",
412
418
  ...getTypographyStyles(
413
419
  theme.generalSettings.isMobile,
414
420
  ownerState?.size || "medium",
@@ -446,6 +452,7 @@ const dataGridStyles = {
446
452
  textAlign: "start",
447
453
  display: "inline",
448
454
  justifyContent: "center",
455
+ alignContent: "center",
449
456
  alignItems: "center",
450
457
  '&:not([role="columnheader"])': {
451
458
  "& > div:first-of-type": {
@@ -466,6 +473,7 @@ const dataGridStyles = {
466
473
  },
467
474
  "& .rdg-cell.rdg-cell-align-right": {
468
475
  textAlign: "right",
476
+ alignContent: "center",
469
477
  '&:not([role="columnheader"])': {
470
478
  "& > div:first-of-type": {
471
479
  marginLeft: "auto"
@@ -474,17 +482,14 @@ const dataGridStyles = {
474
482
  }
475
483
  },
476
484
  '& [role="columnheader"].rdg-cell.rdg-cell-align-left .rdg-header-sort-name': {
477
- textAlign: "start",
478
- display: "inline",
479
- justifyContent: "center",
480
- alignItems: "center"
485
+ textAlign: "start"
481
486
  },
482
487
  '& [role="columnheader"].rdg-cell.rdg-cell-align-center .rdg-header-sort-name': {
483
- textAlign: "center",
484
- alignContent: "center"
488
+ textAlign: "center"
485
489
  },
486
490
  '& [role="columnheader"].rdg-cell.rdg-cell-align-right .rdg-header-sort-name': {
487
- textAlign: "right"
491
+ textAlign: "right",
492
+ paddingRight: theme.vars.size.baseSpacings.sp3
488
493
  },
489
494
  // Estilado de la ultima celda congelada
490
495
  "& .rdg-row .rdg-cell-frozen-last:after": {
@@ -577,6 +582,7 @@ const dataGridStyles = {
577
582
  alignItems: "center",
578
583
  backgroundColor: theme.vars.palette.default.enabled,
579
584
  padding: theme.vars.size.baseSpacings.sp1,
585
+ marginBottom: theme.vars.size.baseSpacings.sp2,
580
586
  gap: theme.vars.size.baseSpacings.sp1,
581
587
  borderRadius: theme.vars.size.borderRadius.r1,
582
588
  ...getSizeStyles(theme, ownerState?.size || "medium", "action", (size) => ({
@@ -665,11 +671,36 @@ const dataGridStyles = {
665
671
  /**
666
672
  * Estilos para el contenedor del boton de acciones del header
667
673
  */
668
- buttonHeaderActions: () => ({
674
+ buttonHeaderActions: ({ theme }) => ({
669
675
  display: "flex",
670
676
  alignItems: "center",
671
677
  justifyContent: "space-between",
672
- width: "100%"
678
+ width: "100%",
679
+ cursor: "pointer",
680
+ height: "100%",
681
+ "> span": {
682
+ display: "flex",
683
+ alignItems: "center",
684
+ justifyContent: "space-between",
685
+ width: "100%",
686
+ "& svg": {
687
+ width: "8px",
688
+ height: "8px",
689
+ color: theme.vars.palette.chips.default.contained.backgroundColorTone
690
+ }
691
+ }
692
+ }),
693
+ /**
694
+ * Estilos para el formatter de iconos
695
+ */
696
+ columnIconFormatter: ({ theme }) => ({
697
+ display: "flex",
698
+ alignItems: "center",
699
+ justifyContent: "center",
700
+ gap: theme.vars.size.baseSpacings.sp2,
701
+ minWidth: "max-content",
702
+ overflow: "visible",
703
+ flexWrap: "nowrap"
673
704
  })
674
705
  };
675
706
  export {
@@ -1,5 +1,6 @@
1
1
  import { ColumnBooleanFormatterProps } from './types';
2
+ import { RenderCellProps } from 'react-data-grid';
2
3
  /**
3
4
  * Función para formatear un booleano en una columna de un DataGrid
4
5
  */
5
- export declare function ColumnBooleanFormatter<TRow>(props: ColumnBooleanFormatterProps<TRow>): (obProps: any) => import("react/jsx-runtime").JSX.Element;
6
+ export declare function ColumnBooleanFormatter<TRow>(props: ColumnBooleanFormatterProps<TRow>): (renderProps: RenderCellProps<TRow>) => import("react/jsx-runtime").JSX.Element;
@@ -1,12 +1,11 @@
1
1
  import { jsx } from "react/jsx-runtime";
2
2
  import { getPropertyByString } from "@m4l/core";
3
3
  import React from "react";
4
- import { g as getFieldValueWithRow } from "../../../../helpers/getFieldValueWithRow.js";
5
4
  import { B as BooleanFormatter } from "../../../formatters/BooleanFormatter/BooleanFormatter.js";
6
5
  function ColumnBooleanFormatter(props) {
7
6
  const { fieldValue, presentationType, Component = React.Fragment } = props;
8
- return (obProps) => {
9
- const valueMaybeString = getPropertyByString(obProps, getFieldValueWithRow(fieldValue));
7
+ return (renderProps) => {
8
+ const valueMaybeString = getPropertyByString(renderProps.row, fieldValue);
10
9
  let fixedValue;
11
10
  if (typeof valueMaybeString === "boolean") {
12
11
  fixedValue = valueMaybeString;
@@ -3,7 +3,7 @@ import { ColumnBooleanFormatterProps } from './types';
3
3
  * Hook function that return the formatter, filter and customSort for a boolean column
4
4
  */
5
5
  export declare const useColumnBoolean: <TRow>(props: ColumnBooleanFormatterProps<TRow>) => {
6
- formatter: (obProps: any) => import("react/jsx-runtime").JSX.Element;
6
+ formatter: (renderProps: import('react-data-grid').RenderCellProps<TRow, unknown>) => import("react/jsx-runtime").JSX.Element;
7
7
  customFilter: (row: TRow, value: string) => boolean;
8
8
  customSort: (a: TRow, b: TRow) => 0 | 1 | -1;
9
9
  };
@@ -1,7 +1,8 @@
1
1
  import { ColumnChipStatusFormatterProps } from './types';
2
+ import { RenderCellProps } from 'react-data-grid';
2
3
  /**
3
4
  * Formatter para mostrar un chip de estado en una columna de un DataGrid
4
5
  * @param props - Propiedades del formatter
5
6
  * @returns Componente ChipStatusFormatter
6
7
  */
7
- export declare const ColumnChipStatusFormatter: (props: ColumnChipStatusFormatterProps<any>) => (obProps: any) => import("react/jsx-runtime").JSX.Element;
8
+ export declare const ColumnChipStatusFormatter: <TRow>(props: ColumnChipStatusFormatterProps<TRow>) => (renderProps: RenderCellProps<TRow>) => import("react/jsx-runtime").JSX.Element;
@@ -1,14 +1,15 @@
1
1
  import { jsx } from "react/jsx-runtime";
2
2
  import { getPropertyByString } from "@m4l/core";
3
- import { g as getFieldValueWithRow } from "../../../../helpers/getFieldValueWithRow.js";
4
3
  import { C as ChipStatusFormatterColumnWrapperStyled } from "../../../formatters/ChipStatusFormatter/slots/ChipStatusFormatterSlots.js";
5
4
  import { g as getNullGuard } from "../../../../utils/getNullGuard.js";
6
5
  import { C as ChipStatusFormatter } from "../../../formatters/ChipStatusFormatter/ChipStatusFormatter.js";
7
6
  const ColumnChipStatusFormatter = (props) => {
8
7
  const { fieldStatus, fieldLabel, statusesColors, fallbackColor } = props;
9
- return (obProps) => {
10
- const status = getNullGuard(getPropertyByString(obProps, getFieldValueWithRow(fieldStatus.toString())));
11
- const label = typeof fieldLabel === "string" ? getNullGuard(getPropertyByString(obProps, getFieldValueWithRow(fieldLabel))) : fieldLabel(obProps.row, status);
8
+ return (renderProps) => {
9
+ const cleanFieldStatus = fieldStatus.toString().startsWith("row.") ? fieldStatus.toString().substring(4) : fieldStatus.toString();
10
+ const cleanFieldLabel = typeof fieldLabel === "string" && fieldLabel.startsWith("row.") ? fieldLabel.substring(4) : fieldLabel;
11
+ const status = getNullGuard(getPropertyByString(renderProps.row, cleanFieldStatus));
12
+ const label = typeof cleanFieldLabel === "string" ? getNullGuard(getPropertyByString(renderProps.row, cleanFieldLabel)) : typeof fieldLabel === "function" ? fieldLabel(renderProps.row, status) : "";
12
13
  return /* @__PURE__ */ jsx(
13
14
  ChipStatusFormatter,
14
15
  {
@@ -3,7 +3,7 @@ import { ColumnChipStatusFormatterProps } from './types';
3
3
  * Funcion helper que retorna el formatter, filter y customSort de la columna concatenada.
4
4
  */
5
5
  export declare const useColumnChipStatus: <TRow>(props: ColumnChipStatusFormatterProps<TRow>) => {
6
- formatter: (obProps: any) => import("react/jsx-runtime").JSX.Element;
6
+ formatter: (renderProps: import('react-data-grid').RenderCellProps<TRow, unknown>) => import("react/jsx-runtime").JSX.Element;
7
7
  customFilter: (row: TRow, value: string | number) => boolean;
8
8
  customSort: (a: TRow, b: TRow) => 0 | 1 | -1;
9
9
  };
@@ -1,5 +1,6 @@
1
1
  import { ColumnConcatenatedValuesFormatterProps } from './types';
2
+ import { RenderCellProps } from 'react-data-grid';
2
3
  /**
3
4
  * Function to DataGrid that concatenates an array of strings
4
5
  */
5
- export declare function ColumnConcatenatedValuesFormatter<TRow>(props: ColumnConcatenatedValuesFormatterProps<TRow>): (obProps: any) => import("react/jsx-runtime").JSX.Element;
6
+ export declare function ColumnConcatenatedValuesFormatter<TRow>(props: ColumnConcatenatedValuesFormatterProps<TRow>): (renderProps: RenderCellProps<TRow>) => import("react/jsx-runtime").JSX.Element;
@@ -1,13 +1,13 @@
1
1
  import { jsx } from "react/jsx-runtime";
2
2
  import { getPropertyByString } from "@m4l/core";
3
3
  import React from "react";
4
- import { g as getFieldValueWithRow } from "../../../../helpers/getFieldValueWithRow.js";
5
4
  import { C as ConcatenatedFormatter } from "../../../formatters/ConcatenatedFormatter/ConcatenatedFormatter.js";
6
5
  function ColumnConcatenatedValuesFormatter(props) {
7
6
  const { fieldValue, fieldSeparator, Component = React.Fragment } = props;
8
- return (obProps) => {
7
+ return (renderProps) => {
8
+ const rowData = renderProps.row;
9
9
  const values = fieldValue.map((element) => {
10
- const valueMaybeString = getPropertyByString(obProps, getFieldValueWithRow(element));
10
+ const valueMaybeString = getPropertyByString(rowData, element);
11
11
  let fixedValue;
12
12
  if (typeof valueMaybeString === "string" || typeof valueMaybeString === "number") {
13
13
  fixedValue = valueMaybeString.toString();
@@ -16,7 +16,14 @@ function ColumnConcatenatedValuesFormatter(props) {
16
16
  }
17
17
  return fixedValue;
18
18
  });
19
- return /* @__PURE__ */ jsx(ConcatenatedFormatter, { values, separator: fieldSeparator, Component });
19
+ return /* @__PURE__ */ jsx(
20
+ ConcatenatedFormatter,
21
+ {
22
+ values,
23
+ separator: fieldSeparator,
24
+ Component
25
+ }
26
+ );
20
27
  };
21
28
  }
22
29
  export {
@@ -3,7 +3,7 @@ import { ColumnConcatenatedValuesFormatterProps } from './types';
3
3
  * Funcion helper que retorna el formatter, filter y customSort de la columna concatenada.
4
4
  */
5
5
  export declare const useColumnConcatenatedValues: <TRow>(props: ColumnConcatenatedValuesFormatterProps<TRow>) => {
6
- formatter: (obProps: any) => import("react/jsx-runtime").JSX.Element;
6
+ formatter: (renderProps: import('react-data-grid').RenderCellProps<TRow, unknown>) => import("react/jsx-runtime").JSX.Element;
7
7
  customFilter: (row: TRow, value: string) => boolean;
8
8
  customSort: (a: TRow, b: TRow) => 0 | 1 | -1;
9
9
  };
@@ -1,5 +1,6 @@
1
1
  import { ColumnDateFormatterProps } from './types';
2
+ import { RenderCellProps } from 'react-data-grid';
2
3
  /**
3
4
  * Function to format a date in a column of a DataGrid
4
5
  */
5
- export declare function ColumnDateFormatter<TRow>(props: ColumnDateFormatterProps<TRow>): (obProps: any) => import("react/jsx-runtime").JSX.Element;
6
+ export declare function ColumnDateFormatter<TRow>(props: ColumnDateFormatterProps<TRow>): (formatterProps: RenderCellProps<TRow>) => import("react/jsx-runtime").JSX.Element;
@@ -1,19 +1,28 @@
1
1
  import { jsx } from "react/jsx-runtime";
2
2
  import { getPropertyByString } from "@m4l/core";
3
3
  import React from "react";
4
- import { g as getFieldValueWithRow } from "../../../../helpers/getFieldValueWithRow.js";
5
4
  import { D as DateFormatter } from "../../../formatters/DateFormatter/DateFormatter.js";
6
5
  function ColumnDateFormatter(props) {
7
6
  const { fieldValue, presentationType, Component = React.Fragment } = props;
8
- return (obProps) => {
9
- const valueMaybeDateStringNumber = getPropertyByString(obProps, getFieldValueWithRow(fieldValue));
7
+ return (formatterProps) => {
8
+ const valueMaybeDateStringNumber = getPropertyByString(
9
+ formatterProps.row,
10
+ fieldValue
11
+ );
10
12
  let fixedValue;
11
13
  if (typeof valueMaybeDateStringNumber === "string" || typeof valueMaybeDateStringNumber === "number" || valueMaybeDateStringNumber instanceof Date) {
12
14
  fixedValue = valueMaybeDateStringNumber;
13
15
  } else {
14
16
  fixedValue = "";
15
17
  }
16
- return /* @__PURE__ */ jsx(DateFormatter, { presentationType, value: fixedValue, Component });
18
+ return /* @__PURE__ */ jsx(
19
+ DateFormatter,
20
+ {
21
+ presentationType,
22
+ value: fixedValue,
23
+ Component
24
+ }
25
+ );
17
26
  };
18
27
  }
19
28
  export {
@@ -8,7 +8,7 @@ export declare const useCustomDateFilter: <TRow>(props: ColumnDateFormatterProps
8
8
  * customFilter and customSort of a date column
9
9
  */
10
10
  export declare const useColumnDate: <TRow>(props: ColumnDateFormatterProps<TRow>) => {
11
- formatter: (obProps: any) => import("react/jsx-runtime").JSX.Element;
11
+ formatter: (formatterProps: import('react-data-grid').RenderCellProps<TRow, unknown>) => import("react/jsx-runtime").JSX.Element;
12
12
  customFilter: (row: TRow, value: string) => boolean;
13
13
  customSort: (a: TRow, b: TRow) => 0 | 1 | -1;
14
14
  };
@@ -1,5 +1,7 @@
1
1
  import { ColumnIconFormatterProps } from './types';
2
+ import { RenderCellProps } from 'react-data-grid';
2
3
  /**
3
4
  * Function to format an icon in a column of a DataGrid
5
+ * @template TRow - Tipo de datos de la fila
4
6
  */
5
- export declare function ColumnIconFormatter(props: ColumnIconFormatterProps): (rowData: any) => import("react/jsx-runtime").JSX.Element;
7
+ export declare function ColumnIconFormatter<TRow>(props: ColumnIconFormatterProps<TRow>): (renderProps: RenderCellProps<TRow>) => import("react/jsx-runtime").JSX.Element;
@@ -1,49 +1,13 @@
1
- import { jsx } from "react/jsx-runtime";
2
- import React from "react";
3
- import { C as COLUMN_ICON_KEY_COMPONENT } from "./constants.js";
4
- import { g as getPropDataTestId } from "../../../../test/getNameDataTestId.js";
5
- import { I as IconStyled } from "../../../ObjectLogs/slots/ObjectLogsSlots.js";
1
+ import { r as renderMultipleIcons } from "./helpers/renderMultipleIcons.js";
2
+ import { r as renderIcon } from "./helpers/renderIcon.js";
6
3
  function ColumnIconFormatter(props) {
7
4
  const { getIconProps } = props;
8
- return (rowData) => {
9
- const {
10
- iconUrl,
11
- onClick,
12
- tooltip,
13
- dataTestId,
14
- Component,
15
- componentProps
16
- } = getIconProps(rowData);
17
- const iconStyle = onClick ? { style: { cursor: "pointer" } } : {};
18
- if (Component && Component !== React.Fragment) {
19
- return /* @__PURE__ */ jsx(
20
- Component,
21
- {
22
- ...componentProps,
23
- ...getPropDataTestId(COLUMN_ICON_KEY_COMPONENT, "container", dataTestId),
24
- children: /* @__PURE__ */ jsx(
25
- IconStyled,
26
- {
27
- src: iconUrl,
28
- onClick,
29
- tooltipContent: tooltip,
30
- instaceDataTestId: dataTestId,
31
- ...iconStyle
32
- }
33
- )
34
- }
35
- );
5
+ return (renderProps) => {
6
+ const iconProps = getIconProps(renderProps.row);
7
+ if (Array.isArray(iconProps)) {
8
+ return renderMultipleIcons(iconProps);
36
9
  }
37
- return /* @__PURE__ */ jsx(
38
- IconStyled,
39
- {
40
- src: iconUrl,
41
- onClick,
42
- tooltipContent: tooltip,
43
- instaceDataTestId: dataTestId,
44
- ...iconStyle
45
- }
46
- );
10
+ return renderIcon(iconProps);
47
11
  };
48
12
  }
49
13
  export {
@@ -0,0 +1,8 @@
1
+ import { ColumnIconResponse } from '../types';
2
+ /**
3
+ * Helper que renderiza un único icono
4
+ * @param iconConfig - Configuración del icono
5
+ * @param key - Clave opcional para listas
6
+ * @returns Componente de icono renderizado
7
+ */
8
+ export declare function renderIcon(iconConfig: ColumnIconResponse, key?: number): import("react/jsx-runtime").JSX.Element;
@@ -0,0 +1,58 @@
1
+ import { jsx, Fragment } from "react/jsx-runtime";
2
+ import React from "react";
3
+ import { C as COLUMN_ICON_KEY_COMPONENT } from "../constants.js";
4
+ import { g as getPropDataTestId } from "../../../../../test/getNameDataTestId.js";
5
+ import { I as IconClickeableStyled, a as IconStyled } from "../../../../ObjectLogs/slots/ObjectLogsSlots.js";
6
+ function renderIcon(iconConfig, key) {
7
+ const {
8
+ iconUrl,
9
+ onClick,
10
+ tooltip,
11
+ dataTestId,
12
+ Component,
13
+ componentProps,
14
+ color,
15
+ visible,
16
+ size
17
+ } = iconConfig;
18
+ if (visible === false) {
19
+ return /* @__PURE__ */ jsx(Fragment, { children: "-" });
20
+ }
21
+ const IconComponent = onClick ? IconClickeableStyled : IconStyled;
22
+ if (Component && Component !== React.Fragment) {
23
+ return /* @__PURE__ */ jsx(
24
+ Component,
25
+ {
26
+ ...componentProps,
27
+ ...getPropDataTestId(COLUMN_ICON_KEY_COMPONENT, "container", dataTestId),
28
+ children: /* @__PURE__ */ jsx(
29
+ IconComponent,
30
+ {
31
+ src: iconUrl,
32
+ ...onClick && { onClick },
33
+ tooltipContent: tooltip,
34
+ instaceDataTestId: dataTestId,
35
+ color,
36
+ size
37
+ }
38
+ )
39
+ },
40
+ key
41
+ );
42
+ }
43
+ return /* @__PURE__ */ jsx(
44
+ IconComponent,
45
+ {
46
+ src: iconUrl,
47
+ ...onClick && { onClick },
48
+ tooltipContent: tooltip,
49
+ instaceDataTestId: dataTestId,
50
+ color,
51
+ size
52
+ },
53
+ key
54
+ );
55
+ }
56
+ export {
57
+ renderIcon as r
58
+ };
@@ -0,0 +1,7 @@
1
+ import { ColumnIconResponse } from '../types';
2
+ /**
3
+ * Helper que renderiza múltiples iconos
4
+ * @param iconsConfig - Array de configuraciones de iconos
5
+ * @returns Componente contenedor con múltiples iconos
6
+ */
7
+ export declare function renderMultipleIcons(iconsConfig: ColumnIconResponse[]): import("react/jsx-runtime").JSX.Element;
@@ -0,0 +1,19 @@
1
+ import { jsx, Fragment } from "react/jsx-runtime";
2
+ import { a as ColumnIconFormatterStyled } from "../../../slots/DataGridSlot.js";
3
+ import { r as renderIcon } from "./renderIcon.js";
4
+ function renderMultipleIcons(iconsConfig) {
5
+ if (!iconsConfig || iconsConfig.length === 0) {
6
+ return /* @__PURE__ */ jsx(Fragment, { children: "-" });
7
+ }
8
+ const visibleIcons = iconsConfig.filter((icon) => icon.visible !== false);
9
+ if (visibleIcons.length === 0) {
10
+ return /* @__PURE__ */ jsx(Fragment, { children: "-" });
11
+ }
12
+ if (visibleIcons.length === 1) {
13
+ return renderIcon(visibleIcons[0]);
14
+ }
15
+ return /* @__PURE__ */ jsx(ColumnIconFormatterStyled, { children: visibleIcons.map((iconConfig, index) => renderIcon(iconConfig, index)) });
16
+ }
17
+ export {
18
+ renderMultipleIcons as r
19
+ };
@@ -1,11 +1,18 @@
1
+ import { default as React } from 'react';
2
+ import { DeepKeyOf } from '../../../../utils/types';
3
+ import { Theme } from '@mui/material';
4
+ export type IconColorDeep = DeepKeyOf<Theme['vars']['palette']> | string;
1
5
  export type ColumnIconResponse = {
2
6
  iconUrl: string;
3
7
  tooltip?: string;
4
8
  onClick?: () => void;
5
9
  Component?: React.ElementType;
6
10
  dataTestId?: string;
7
- componentProps?: React.ComponentPropsWithoutRef<any>;
11
+ componentProps?: React.ComponentPropsWithoutRef<React.ElementType>;
12
+ visible?: boolean;
13
+ color?: IconColorDeep;
14
+ size?: 'small' | 'medium';
8
15
  };
9
- export interface ColumnIconFormatterProps {
10
- getIconProps: (obRowProps: any) => ColumnIconResponse;
16
+ export interface ColumnIconFormatterProps<TRow> {
17
+ getIconProps: (obRowProps: TRow) => ColumnIconResponse | ColumnIconResponse[];
11
18
  }
@@ -3,6 +3,6 @@ import { ColumnIconFormatterProps } from './types';
3
3
  * Función helper que retorna
4
4
  * el formatter de la columna
5
5
  */
6
- export declare const useColumnIcon: (props: ColumnIconFormatterProps) => {
7
- formatter: (rowData: any) => import("react/jsx-runtime").JSX.Element;
6
+ export declare const useColumnIcon: <TRow>(props: ColumnIconFormatterProps<TRow>) => {
7
+ formatter: (renderProps: import('react-data-grid').RenderCellProps<TRow, unknown>) => import("react/jsx-runtime").JSX.Element;
8
8
  };
@@ -1,2 +1,2 @@
1
- import { FormatterProps as RDGFormatterProps } from 'react-data-grid';
2
- export type ColumnInteractiveCheckFormatterProps<Row> = RDGFormatterProps<Row>;
1
+ import { RenderCellProps } from 'react-data-grid';
2
+ export type ColumnInteractiveCheckFormatterProps<Row> = RenderCellProps<Row>;
@@ -1,5 +1,6 @@
1
1
  import { ColumnNestedValueFormatterProps } from './types';
2
+ import { RenderCellProps } from 'react-data-grid';
2
3
  /**
3
4
  * Function to format a nested value in a column of a DataGrid
4
5
  */
5
- export declare function ColumnNestedValueFormatter<TRow>(props: ColumnNestedValueFormatterProps<TRow>): (obProps: any) => import("react/jsx-runtime").JSX.Element;
6
+ export declare function ColumnNestedValueFormatter<TRow>(props: ColumnNestedValueFormatterProps<TRow>): (formatterProps: RenderCellProps<TRow>) => import("react/jsx-runtime").JSX.Element;
@@ -1,12 +1,13 @@
1
1
  import { jsx } from "react/jsx-runtime";
2
2
  import { getPropertyByString } from "@m4l/core";
3
3
  import React from "react";
4
- import { g as getFieldValueWithRow } from "../../../../helpers/getFieldValueWithRow.js";
5
4
  import { g as getNullGuard } from "../../../../utils/getNullGuard.js";
6
5
  function ColumnNestedValueFormatter(props) {
7
6
  const { fieldValue, Component = React.Fragment } = props;
8
- return (obProps) => {
9
- const property = getNullGuard(getPropertyByString(obProps, getFieldValueWithRow(fieldValue)));
7
+ return (formatterProps) => {
8
+ const property = getNullGuard(
9
+ getPropertyByString(formatterProps.row, fieldValue)
10
+ );
10
11
  const value = typeof property === "object" ? JSON.stringify(property) : property;
11
12
  return /* @__PURE__ */ jsx(Component, { children: value });
12
13
  };
@@ -4,7 +4,7 @@ import { ColumnNestedValueFormatterProps } from './types';
4
4
  * of the column for ColumnNestedValueFormatter.
5
5
  */
6
6
  export declare const useColumnNestedValue: <TRow>(props: ColumnNestedValueFormatterProps<TRow>) => {
7
- formatter: (obProps: any) => import("react/jsx-runtime").JSX.Element;
7
+ formatter: (formatterProps: import('react-data-grid').RenderCellProps<TRow, unknown>) => import("react/jsx-runtime").JSX.Element;
8
8
  customFilter: (row: TRow, value: string) => any;
9
9
  customSort: (a: TRow, b: TRow) => 0 | 1 | -1;
10
10
  };
@@ -1,5 +1,6 @@
1
1
  import { ColumnPointsFormatterProps } from './types';
2
+ import { RenderCellProps } from 'react-data-grid';
2
3
  /**
3
4
  * Formatter for column points in DataGrid
4
5
  */
5
- export declare function ColumnPointsFormatter<TRow>(props: ColumnPointsFormatterProps<TRow>): (obProps: any) => import("react/jsx-runtime").JSX.Element;
6
+ export declare function ColumnPointsFormatter<TRow>(props: ColumnPointsFormatterProps<TRow>): (formatterProps: RenderCellProps<TRow>) => import("react/jsx-runtime").JSX.Element;
@@ -1,13 +1,21 @@
1
1
  import { jsx } from "react/jsx-runtime";
2
2
  import React from "react";
3
3
  import { P as PointsFormatter } from "../../../formatters/PointsFormatter/PointsFormatter.js";
4
- import { g as getFieldValueWithRow } from "../../../../helpers/getFieldValueWithRow.js";
5
4
  function ColumnPointsFormatter(props) {
6
5
  const { Component = React.Fragment } = props;
7
- const fieldValue = getFieldValueWithRow(props.fieldValue);
8
- const fieldUnit = getFieldValueWithRow(props.fieldUnit);
9
- return (obProps) => {
10
- return /* @__PURE__ */ jsx(PointsFormatter, { obProps, ...props, fieldValue, fieldUnit, Component });
6
+ const fieldValue = props.fieldValue;
7
+ const fieldUnit = props.fieldUnit;
8
+ return (formatterProps) => {
9
+ return /* @__PURE__ */ jsx(
10
+ PointsFormatter,
11
+ {
12
+ obProps: formatterProps.row,
13
+ ...props,
14
+ fieldValue,
15
+ fieldUnit,
16
+ Component
17
+ }
18
+ );
11
19
  };
12
20
  }
13
21
  export {
@@ -4,7 +4,7 @@ import { ColumnPointsFormatterProps } from './types';
4
4
  * return formatter, customFilter and customSort.
5
5
  */
6
6
  export declare const useColumnPoints: <TRow>(props: ColumnPointsFormatterProps<TRow>) => {
7
- formatter: (obProps: any) => import("react/jsx-runtime").JSX.Element;
7
+ formatter: (formatterProps: import('react-data-grid').RenderCellProps<TRow, unknown>) => import("react/jsx-runtime").JSX.Element;
8
8
  customFilter: (row: TRow, value: string) => boolean;
9
9
  customSort: (a: TRow, b: TRow) => 0 | 1 | -1;
10
10
  };
@@ -1,5 +1,6 @@
1
1
  import { ColumnPriceFormatterProps } from './types';
2
+ import { RenderCellProps } from 'react-data-grid';
2
3
  /**
3
4
  * Formatter for column price in DataGrid
4
5
  */
5
- export declare function ColumnPriceFormatter<TRow>(props: ColumnPriceFormatterProps<TRow>): (obProps: any) => import("react/jsx-runtime").JSX.Element;
6
+ export declare function ColumnPriceFormatter<TRow>(props: ColumnPriceFormatterProps<TRow>): (formatterProps: RenderCellProps<TRow>) => import("react/jsx-runtime").JSX.Element;
@@ -1,12 +1,19 @@
1
1
  import { jsx } from "react/jsx-runtime";
2
2
  import React from "react";
3
3
  import { P as PriceFormatter } from "../../../formatters/PriceFormatter/PriceFormatter.js";
4
- import { g as getFieldValueWithRow } from "../../../../helpers/getFieldValueWithRow.js";
5
4
  function ColumnPriceFormatter(props) {
6
5
  const { Component = React.Fragment } = props;
7
- const fieldValue = getFieldValueWithRow(props.fieldValue);
8
- return (obProps) => {
9
- return /* @__PURE__ */ jsx(PriceFormatter, { obProps, ...props, fieldValue, Component });
6
+ const fieldValue = props.fieldValue;
7
+ return (formatterProps) => {
8
+ return /* @__PURE__ */ jsx(
9
+ PriceFormatter,
10
+ {
11
+ obProps: formatterProps.row,
12
+ ...props,
13
+ fieldValue,
14
+ Component
15
+ }
16
+ );
10
17
  };
11
18
  }
12
19
  export {
@@ -4,7 +4,7 @@ import { ColumnPriceFormatterProps } from './types';
4
4
  * Returns formatter, customFilter and customSort.
5
5
  */
6
6
  export declare const useColumnPrice: <TRow>(props: ColumnPriceFormatterProps<TRow>) => {
7
- formatter: (obProps: any) => import("react/jsx-runtime").JSX.Element;
7
+ formatter: (formatterProps: import('react-data-grid').RenderCellProps<TRow, unknown>) => import("react/jsx-runtime").JSX.Element;
8
8
  customFilter: (row: TRow, value: string) => boolean;
9
9
  customSort: (a: TRow, b: TRow) => 0 | 1 | -1;
10
10
  };