@m4l/components 9.2.65 → 9.3.0

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 (58) hide show
  1. package/components/DataGrid/Datagrid.styles.js +112 -9
  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 +2 -1
  15. package/components/DataGrid/formatters/ColumnIconFormatter/formatter.js +2 -2
  16. package/components/DataGrid/formatters/ColumnIconFormatter/useColumnIcon.d.ts +1 -1
  17. package/components/DataGrid/formatters/ColumnInteractiveCheckFormatter/types.d.ts +2 -2
  18. package/components/DataGrid/formatters/ColumnNestedValueFormatter/formatter.d.ts +2 -1
  19. package/components/DataGrid/formatters/ColumnNestedValueFormatter/formatter.js +4 -3
  20. package/components/DataGrid/formatters/ColumnNestedValueFormatter/useColumnNestedValue.d.ts +1 -1
  21. package/components/DataGrid/formatters/ColumnPointsFormatter/formatter.d.ts +2 -1
  22. package/components/DataGrid/formatters/ColumnPointsFormatter/formatter.js +13 -5
  23. package/components/DataGrid/formatters/ColumnPointsFormatter/useColumnPoints.d.ts +1 -1
  24. package/components/DataGrid/formatters/ColumnPriceFormatter/formatter.d.ts +2 -1
  25. package/components/DataGrid/formatters/ColumnPriceFormatter/formatter.js +11 -4
  26. package/components/DataGrid/formatters/ColumnPriceFormatter/useColumnPrice.d.ts +1 -1
  27. package/components/DataGrid/formatters/ColumnSetCheckFormatter/formatter.d.ts +2 -2
  28. package/components/DataGrid/formatters/ColumnSetCheckFormatter/formatter.js +1 -1
  29. package/components/DataGrid/formatters/ColumnSetCheckFormatter/useColumnSetCheck.d.ts +1 -1
  30. package/components/DataGrid/formatters/ColumnUncertaintyFormatter/formatter.d.ts +2 -1
  31. package/components/DataGrid/formatters/ColumnUncertaintyFormatter/formatter.js +15 -6
  32. package/components/DataGrid/formatters/ColumnUncertaintyFormatter/useColumnUncertainty.d.ts +1 -1
  33. package/components/DataGrid/index.d.ts +1 -1
  34. package/components/DataGrid/subcomponents/HeaderActions/subcomponents/Settings/subcomponents/ColumnsConfig/index.js +4 -5
  35. package/components/DataGrid/subcomponents/Table/hooks/getDragHeaderRenderer.d.ts +2 -2
  36. package/components/DataGrid/subcomponents/Table/hooks/useHeaderMenuActions.d.ts +2 -2
  37. package/components/DataGrid/subcomponents/Table/hooks/useHeaderMenuActions.js +15 -6
  38. package/components/DataGrid/subcomponents/Table/hooks/useSortColumnsRows.js +13 -7
  39. package/components/DataGrid/subcomponents/Table/index.d.ts +3 -1
  40. package/components/DataGrid/subcomponents/Table/index.js +38 -9
  41. package/components/DataGrid/subcomponents/Table/subcomponents/ActionsColumn.js +1 -1
  42. package/components/DataGrid/subcomponents/Table/subcomponents/CheckboxFormatter.d.ts +2 -2
  43. package/components/DataGrid/subcomponents/Table/subcomponents/DraggableHeaderRenderer.d.ts +2 -2
  44. package/components/DataGrid/subcomponents/Table/subcomponents/DraggableHeaderRenderer.js +10 -8
  45. package/components/DataGrid/subcomponents/Table/subcomponents/HeaderRenderClick/HeaderRenderClick.js +1 -1
  46. package/components/DataGrid/subcomponents/Table/subcomponents/SelectColumn.js +7 -7
  47. package/components/DataGrid/subcomponents/editors/TextEditor/index.d.ts +15 -5
  48. package/components/DataGrid/types.d.ts +9 -4
  49. package/components/NumberInput/hooks/useNumberInput/useNumberInput.js +0 -2
  50. package/components/areas/contexts/AreasContext/store.js +2 -2
  51. package/components/formatters/BooleanFormatter/BooleanFormatter.styles.js +1 -1
  52. package/components/hook-form/RHFAutocompleteAsync/reducer/RHFAutocompleteReducer.js +0 -5
  53. package/components/mui_extended/MenuItem/MenuItem.js +2 -1
  54. package/components/mui_extended/MenuItem/types.d.ts +4 -0
  55. package/package.json +2 -2
  56. package/storybook/components/DataGrid/DataGrid.stories.d.ts +4 -0
  57. package/storybook/components/DataGrid/helpers/types.d.ts +3 -2
  58. package/helpers/getFieldValueWithRow.js +0 -10
@@ -221,7 +221,14 @@ const dataGridStyles = {
221
221
  verticalAlign: "top",
222
222
  textAlign: "right",
223
223
  fontFamily: "inherit",
224
+ background: "transparent",
224
225
  "&:focus": {
226
+ outline: "none",
227
+ border: "none",
228
+ boxShadow: "none"
229
+ },
230
+ "&:hover": {
231
+ border: "none",
225
232
  outline: "none"
226
233
  },
227
234
  "&::placeholder": {
@@ -263,6 +270,9 @@ const dataGridStyles = {
263
270
  border: theme.vars.size.borderStroke.container,
264
271
  borderColor: theme.vars.palette?.border.secondary,
265
272
  "& .rdg ": {
273
+ display: "grid",
274
+ contain: "content",
275
+ boxSizing: "border-box",
266
276
  border: "none",
267
277
  background: theme.vars.palette.background.default,
268
278
  gridColumnGap: theme.vars.size.baseSpacings.sp0,
@@ -291,6 +301,19 @@ const dataGridStyles = {
291
301
  boxShadow: `inset 0 0.5px 0 0 ${theme.vars.palette?.border.secondary}`
292
302
  }
293
303
  },
304
+ "&.MeasuringCell": {
305
+ contain: "strict",
306
+ gridRow: "1",
307
+ visibility: "hidden"
308
+ },
309
+ "&::before": {
310
+ content: "''",
311
+ gridColumn: "1/-1",
312
+ gridRow: "1/-1"
313
+ },
314
+ '& [role="row"], & .rdg-row, & .rdg-header-row, & .rdg-summary-row': {
315
+ display: "contents"
316
+ },
294
317
  '& [role="columnheader"]': {
295
318
  justifyContent: "center",
296
319
  alignItems: "center",
@@ -306,6 +329,13 @@ const dataGridStyles = {
306
329
  }
307
330
  },
308
331
  "& .rdg-row": {
332
+ display: "contents",
333
+ '&[aria-selected="true"]': {
334
+ backgroundColor: theme.vars.palette.primary.toneOpacity,
335
+ "&:hover": {
336
+ backgroundColor: theme.vars.palette.primary.toneOpacity
337
+ }
338
+ },
309
339
  "& .rdg-cell": {
310
340
  backgroundColor: theme.vars.palette.background.default
311
341
  },
@@ -329,18 +359,29 @@ const dataGridStyles = {
329
359
  backgroundColor: "transparent"
330
360
  },
331
361
  "& .rdg-cell": {
362
+ overflow: "clip",
363
+ position: "sticky",
364
+ outline: "none",
332
365
  color: theme.vars.palette.text.primary,
333
- display: "inline",
334
- justifyContent: "center",
335
- alignItems: "center",
336
- textOverflow: "inline",
337
- gridTemplateColumns: "auto",
366
+ paddingBlock: 0,
367
+ paddingInline: "8px",
368
+ borderInlineEnd: "1px solid var(--rdg-border-color)",
369
+ borderBlockEnd: "1px solid var(--rdg-border-color)",
370
+ gridRowStart: "var(--rdg-grid-row-start)",
371
+ alignContent: "center",
372
+ backgroundColor: "inherit",
373
+ whiteSpace: "nowrap",
374
+ textOverflow: "ellipsis",
338
375
  ...getTypographyStyles(
339
376
  theme.generalSettings.isMobile,
340
377
  ownerState?.size || "medium",
341
378
  "body"
342
379
  ),
343
380
  lineHeight: "var(--rdg-row-height)!important",
381
+ '&[aria-selected="true"]': {
382
+ outline: `2px solid var(--rdg-selection-color)`,
383
+ outlineOffset: "-2px"
384
+ },
344
385
  "& .checkbox-checked": {
345
386
  "& path:first-of-type": {
346
387
  fill: theme.vars.palette.primary.main
@@ -388,7 +429,13 @@ const dataGridStyles = {
388
429
  display: "flex",
389
430
  justifyContent: "center",
390
431
  alignItems: "center",
391
- boxShadow: "unset"
432
+ boxShadow: "unset",
433
+ position: "sticky !important",
434
+ zIndex: 1
435
+ },
436
+ '&.rdg-cell-frozen:not([role="columnheader"])': {
437
+ position: "sticky !important",
438
+ zIndex: 1
392
439
  },
393
440
  "&:after": {
394
441
  content: `""`,
@@ -400,6 +447,16 @@ const dataGridStyles = {
400
447
  },
401
448
  "& .m4l_icon": {
402
449
  height: "100%"
450
+ },
451
+ '&[role="columnheader"]': {
452
+ position: "sticky",
453
+ top: 0,
454
+ zIndex: 2,
455
+ justifyContent: "center",
456
+ alignItems: "center",
457
+ '&[aria-colindex="1"]': {
458
+ borderTopLeftRadius: theme.vars.size.baseSpacings.sp2
459
+ }
403
460
  }
404
461
  },
405
462
  '& .rdg-cell[role="columnheader"] .rdg-header-sort-name': {
@@ -489,13 +546,32 @@ const dataGridStyles = {
489
546
  "& .rdg-row .rdg-cell-frozen-last:after": {
490
547
  borderRight: `0px solid transparent`
491
548
  },
549
+ "& .rdg-row .rdg-cell-frozen": {
550
+ position: "sticky !important",
551
+ zIndex: 1,
552
+ left: "var(--rdg-cell-left, 0)"
553
+ },
554
+ "& .rdg-row .rdg-cell-frozen-last": {
555
+ position: "sticky !important",
556
+ zIndex: 1,
557
+ left: "var(--rdg-cell-left, 0)"
558
+ },
492
559
  // Estilado de la ultima celda (Quitar la linea divisora derecha)
493
560
  "& .rdg-row :last-child:after": {
494
561
  borderRight: `0px solid`,
495
562
  borderColor: theme.vars.palette.background.surface
496
563
  },
497
564
  "& .rdg-header-row": {
498
- backgroundColor: theme.vars.palette.background.base
565
+ display: "contents",
566
+ backgroundColor: theme.vars.palette.background.base,
567
+ fontWeight: "bold",
568
+ "& > .rdg-cell": {
569
+ zIndex: 2,
570
+ position: "sticky"
571
+ },
572
+ "& > .rdg-cell.rdg-cell-frozen": {
573
+ zIndex: 3
574
+ }
499
575
  },
500
576
  // Estilado de celdas de la cabecera
501
577
  "& .rdg-header-row .rdg-cell": {
@@ -504,9 +580,13 @@ const dataGridStyles = {
504
580
  boxShadow: "unset!important",
505
581
  borderBottom: theme.vars.size.borderStroke.container,
506
582
  borderColor: `${theme.vars.palette?.background.surface}!important`,
583
+ cursor: "pointer",
507
584
  "&:hover": {
508
585
  boxShadow: `inset 1px 0 0 0 ${theme.vars.palette?.border.default}, inset -1px 0 0 0 ${theme.vars.palette?.border.default}!important `
509
586
  },
587
+ "&[data-resize]": {
588
+ touchAction: "none"
589
+ },
510
590
  '& [draggable="true"]': {
511
591
  fontSize: theme.typography.body
512
592
  },
@@ -528,6 +608,15 @@ const dataGridStyles = {
528
608
  // Modificar el tamaño de la flecha
529
609
  "& .rdg-sort-arrow": {}
530
610
  },
611
+ // Estilo específico para el resize handle generado por react-data-grid
612
+ '& [class*="r1y6ywlx"]': {
613
+ cursor: "col-resize",
614
+ position: "absolute",
615
+ insetBlockStart: 0,
616
+ insetInlineEnd: 0,
617
+ insetBlockEnd: 0,
618
+ inlineSize: "10px"
619
+ },
531
620
  // Estilado de la ultima celda Header
532
621
  "& .rdg-header-row :last-child.rdg-cell": {
533
622
  borderTopRightRadius: theme.vars.size.baseSpacings.sp0,
@@ -576,6 +665,7 @@ const dataGridStyles = {
576
665
  alignItems: "center",
577
666
  backgroundColor: theme.vars.palette.default.enabled,
578
667
  padding: theme.vars.size.baseSpacings.sp1,
668
+ marginBottom: theme.vars.size.baseSpacings.sp2,
579
669
  gap: theme.vars.size.baseSpacings.sp1,
580
670
  borderRadius: theme.vars.size.borderRadius.r1,
581
671
  ...getSizeStyles(theme, ownerState?.size || "medium", "action", (size) => ({
@@ -664,11 +754,24 @@ const dataGridStyles = {
664
754
  /**
665
755
  * Estilos para el contenedor del boton de acciones del header
666
756
  */
667
- buttonHeaderActions: () => ({
757
+ buttonHeaderActions: ({ theme }) => ({
668
758
  display: "flex",
669
759
  alignItems: "center",
670
760
  justifyContent: "space-between",
671
- width: "100%"
761
+ width: "100%",
762
+ cursor: "pointer",
763
+ height: "100%",
764
+ "> span": {
765
+ display: "flex",
766
+ alignItems: "center",
767
+ justifyContent: "space-between",
768
+ width: "100%",
769
+ "& svg": {
770
+ width: "8px",
771
+ height: "8px",
772
+ color: theme.vars.palette.chips.default.contained.backgroundColorTone
773
+ }
774
+ }
672
775
  }),
673
776
  /**
674
777
  * Estilos para el formatter de iconos
@@ -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,6 +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
4
5
  * @template TRow - Tipo de datos de la fila
5
6
  */
6
- export declare function ColumnIconFormatter<TRow>(props: ColumnIconFormatterProps<TRow>): (rowData: TRow) => JSX.Element;
7
+ export declare function ColumnIconFormatter<TRow>(props: ColumnIconFormatterProps<TRow>): (renderProps: RenderCellProps<TRow>) => import("react/jsx-runtime").JSX.Element;
@@ -2,8 +2,8 @@ import { r as renderMultipleIcons } from "./helpers/renderMultipleIcons.js";
2
2
  import { r as renderIcon } from "./helpers/renderIcon.js";
3
3
  function ColumnIconFormatter(props) {
4
4
  const { getIconProps } = props;
5
- return (rowData) => {
6
- const iconProps = getIconProps(rowData);
5
+ return (renderProps) => {
6
+ const iconProps = getIconProps(renderProps.row);
7
7
  if (Array.isArray(iconProps)) {
8
8
  return renderMultipleIcons(iconProps);
9
9
  }
@@ -4,5 +4,5 @@ import { ColumnIconFormatterProps } from './types';
4
4
  * el formatter de la columna
5
5
  */
6
6
  export declare const useColumnIcon: <TRow>(props: ColumnIconFormatterProps<TRow>) => {
7
- formatter: (rowData: TRow) => JSX.Element;
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
  };
@@ -1,4 +1,4 @@
1
- import { FormatterProps } from 'react-data-grid';
1
+ import { RenderCellProps } from 'react-data-grid';
2
2
  import { ColumnSetCheckFormatterProps } from './types';
3
3
  import { RowKey } from '../../types';
4
4
  /**
@@ -6,4 +6,4 @@ import { RowKey } from '../../types';
6
6
  * acualizando un Set/Setter por medio de un hook generico el cual es invocado con el argumento field para ,
7
7
  * sin la necesidad de entrar en edición como lo hace un editor
8
8
  */
9
- export declare function ColumnSetCheckFormatter<Row, TKey extends RowKey = RowKey>(parameters: ColumnSetCheckFormatterProps<Row, TKey>): (props: FormatterProps<Row>) => import("react/jsx-runtime").JSX.Element;
9
+ export declare function ColumnSetCheckFormatter<Row, TKey extends RowKey = RowKey>(parameters: ColumnSetCheckFormatterProps<Row, TKey>): (props: RenderCellProps<Row>) => import("react/jsx-runtime").JSX.Element;
@@ -23,7 +23,7 @@ function ColumnSetCheckFormatter(parameters) {
23
23
  {
24
24
  value: checkedRows.has(rowKeyGetter(row)) || false,
25
25
  disabled,
26
- isCellSelected: props.isCellSelected,
26
+ tabIndex: props.tabIndex,
27
27
  onChange,
28
28
  "aria-label": "Select"
29
29
  }
@@ -5,7 +5,7 @@ import { ColumnSetCheckFormatterProps } from './types';
5
5
  * Returns formatter, customFilter and customSort.
6
6
  */
7
7
  export declare const useColumnSetCheck: <TRow, TKey extends RowKey = RowKey>(props: ColumnSetCheckFormatterProps<TRow, TKey>) => {
8
- formatter: (props: import('react-data-grid').FormatterProps<TRow, unknown>) => import("react/jsx-runtime").JSX.Element;
8
+ formatter: (props: import('react-data-grid').RenderCellProps<TRow, unknown>) => import("react/jsx-runtime").JSX.Element;
9
9
  customFilter: (row: TRow, value: TKey) => boolean;
10
10
  customSort: (a: TRow, b: TRow) => 0 | 1 | -1;
11
11
  };
@@ -1,5 +1,6 @@
1
1
  import { ColumnUncertaintyFormatterProps } from './types';
2
+ import { RenderCellProps } from 'react-data-grid';
2
3
  /**
3
4
  * Formatter for column uncertainty in DataGrid
4
5
  */
5
- export declare function ColumnUncertaintyFormatter<TRow>(props: ColumnUncertaintyFormatterProps<TRow>): (obProps: any) => import("react/jsx-runtime").JSX.Element;
6
+ export declare function ColumnUncertaintyFormatter<TRow>(props: ColumnUncertaintyFormatterProps<TRow>): (formatterProps: RenderCellProps<TRow>) => import("react/jsx-runtime").JSX.Element;