@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
@@ -2,7 +2,7 @@ import { jsx } from "react/jsx-runtime";
2
2
  import { useState, useMemo, useEffect, useCallback } from "react";
3
3
  import { useModuleDictionary } from "@m4l/core";
4
4
  import { M as MenuItem } from "../../../../../mui_extended/MenuItem/MenuItem.js";
5
- import { M as MenuListStyled, q as HeaderRenderClickStyled } from "../../../../slots/DataGridSlot.js";
5
+ import { M as MenuListStyled, r as HeaderRenderClickStyled } from "../../../../slots/DataGridSlot.js";
6
6
  import { M as MenuDivider } from "../../../../../mui_extended/MenuDivider/MenuDivider.js";
7
7
  import { P as Popover } from "../../../../../mui_extended/Popover/Popover.js";
8
8
  import { D as DICTIONARY } from "../../../../dictionary.js";
@@ -128,7 +128,7 @@ function HeaderRenderClick(props) {
128
128
  paper: {
129
129
  ...paperProps,
130
130
  sx: {
131
- mt: !activeFilters ? 0.3 : 6.5,
131
+ mt: !activeFilters ? 0.3 : 5.6,
132
132
  ...paperProps?.sx
133
133
  }
134
134
  }
@@ -5,13 +5,13 @@ import { d as DATAGRID_SELECT_COLUMN_KEY } from "../../../constants.js";
5
5
  const filterColumnClassName = "filter-cell";
6
6
  const filterHeight = 35;
7
7
  function SelectGroupFormatter(props) {
8
- const [isRowSelected, onRowSelectionChange] = useRowSelection();
8
+ const { isRowSelected, onRowSelectionChange } = useRowSelection();
9
9
  const onChange = (checked) => {
10
10
  onRowSelectionChange({ row: props.row, checked, isShiftClick: false });
11
11
  };
12
12
  const cellFormater = SelectCellFormatter({
13
13
  value: isRowSelected,
14
- isCellSelected: props.isCellSelected,
14
+ tabIndex: props.tabIndex,
15
15
  onChange,
16
16
  "aria-label": "Select Group"
17
17
  });
@@ -32,7 +32,7 @@ function SelectFormatter(props) {
32
32
  SelectCellFormatter,
33
33
  {
34
34
  value: checkedRows?.has(rowKeyGetter(props.row)) || false,
35
- isCellSelected: props.isCellSelected,
35
+ tabIndex: props.tabIndex,
36
36
  onChange,
37
37
  "aria-label": "Select"
38
38
  }
@@ -53,7 +53,7 @@ const SelectColumnHeaderRenderer = (props) => {
53
53
  const allRowsChecked = rows.length === checkedRows?.size;
54
54
  return SelectCellFormatter({
55
55
  "aria-label": "Select All",
56
- isCellSelected: props.isCellSelected,
56
+ tabIndex: props.tabIndex,
57
57
  value: allRowsChecked,
58
58
  onChange: onAllRowsCheckedChange
59
59
  });
@@ -68,9 +68,9 @@ const SelectColumn = {
68
68
  sortable: false,
69
69
  frozen: true,
70
70
  type: "boolean",
71
- headerRenderer: SelectColumnHeaderRenderer,
72
- formatter: SelectFormatter,
73
- groupFormatter: SelectGroupFormatter
71
+ renderHeaderCell: SelectColumnHeaderRenderer,
72
+ renderCell: SelectFormatter,
73
+ renderGroupCell: SelectGroupFormatter
74
74
  };
75
75
  export {
76
76
  SelectColumn as S,
@@ -1,10 +1,10 @@
1
- import { EditorProps } from 'react-data-grid';
1
+ import { RenderEditCellProps } from 'react-data-grid';
2
2
  /**
3
3
  * TODO: Documentar
4
4
  */
5
- export declare function TextEditor<TRow, TSummaryRow>({ row, column, onRowChange, onClose, }: EditorProps<TRow, TSummaryRow>): import("react/jsx-runtime").JSX.Element;
5
+ export declare function TextEditor<TRow, TSummaryRow>({ row, column, onRowChange, onClose, }: RenderEditCellProps<TRow, TSummaryRow>): import("react/jsx-runtime").JSX.Element;
6
6
  /**
7
7
  * TODO: Documentar
8
8
  */
9
- export declare function NumberEditor<TRow, TSummaryRow>({ row, column, onRowChange, onClose, }: EditorProps<TRow, TSummaryRow>): import("react/jsx-runtime").JSX.Element;
9
+ export declare function NumberEditor<TRow, TSummaryRow>({ row, column, onRowChange, onClose, }: RenderEditCellProps<TRow, TSummaryRow>): import("react/jsx-runtime").JSX.Element;
10
10
  export default TextEditor;
@@ -1,5 +1,5 @@
1
1
  import { jsx } from "react/jsx-runtime";
2
- import { r as InputTextEditorStyled } from "../../../slots/DataGridSlot.js";
2
+ import { s as InputTextEditorStyled } from "../../../slots/DataGridSlot.js";
3
3
  function autoFocusAndSelect(input) {
4
4
  input?.focus();
5
5
  input?.select();
@@ -1,15 +1,15 @@
1
1
  import { Maybe } from '@m4l/core';
2
2
  import { Theme } from '@mui/material/styles';
3
- import { Column, RowsChangeData, FormatterProps } from 'react-data-grid';
3
+ import { Column, RowsChangeData, RenderCellProps, DataGridProps as NativeDataGridProps } from 'react-data-grid';
4
4
  import { MenuAction } from '../MenuActions/types';
5
- import { ActionsSlots, ColumnsConfigSlots, ControlNavigateSlots, DataGridSlots, RowsCountSlots, TableSlots, TextEditorSlots } from './slots/DataGridEnum';
5
+ import { ActionsSlots, ColumnIconFormatterSlots, ColumnsConfigSlots, ControlNavigateSlots, DataGridSlots, RowsCountSlots, TableSlots, TextEditorSlots } from './slots/DataGridEnum';
6
6
  import { OverridesStyleRules } from '@mui/material/styles/overrides';
7
7
  import { DATAGRID_PREFIX_NAME } from './constants';
8
8
  import { IGridConfig } from './contexts/DataGridContext/types';
9
9
  import { Sizes } from '@m4l/styles';
10
10
  import { PagerProps } from '../Pager';
11
11
  import { SettingsProps } from './subcomponents/HeaderActions/subcomponents/Settings/types';
12
- export type GridFormatterPropss<T, SR> = FormatterProps<T, SR>;
12
+ export type GridFormatterPropss<T, SR> = RenderCellProps<T, SR>;
13
13
  export type { ColumnUncertaintyFormatter, ColumnPointsFormatter, ColumnNestedValueFormatter, } from './formatters';
14
14
  export declare type ColumnType = 'string' | 'date' | 'number' | 'boolean' | 'custom';
15
15
  export declare type ColumnAlign = 'left' | 'center' | 'right';
@@ -31,9 +31,10 @@ declare module 'react-data-grid' {
31
31
  align?: ColumnAlign;
32
32
  isDraggable?: boolean;
33
33
  withFilter?: boolean;
34
- withinHeaderRenderer?: React.FunctionComponent<HeaderRendererProps<TRow, TSummaryRow>>;
34
+ withinHeaderRenderer?: React.FunctionComponent<RenderHeaderCellProps<TRow, TSummaryRow>>;
35
35
  customFilter?: (row: TRow, value: string) => boolean;
36
36
  customSort?: (a: TRow, b: TRow) => number;
37
+ formatter?: (props: any) => JSX.Element;
37
38
  }
38
39
  }
39
40
  export declare type RowKey = string | number;
@@ -71,6 +72,7 @@ export type SortAction = 'add' | 'remove';
71
72
  export type SortChangeAdd = {
72
73
  action: 'add';
73
74
  columnKey: string;
75
+ label: string;
74
76
  direction: Lowercase<SortDirection>;
75
77
  };
76
78
  export type SortChangeRemove = {
@@ -106,7 +108,7 @@ export interface FilterSettings {
106
108
  onChange: (event: FilterChangeEvent) => void;
107
109
  }
108
110
  /**--------------------Termina tipado de filtros-------------------------------------------- */
109
- export interface GridProps<TRow, TSummaryRow, TKey extends RowKey = RowKey> {
111
+ export interface GridProps<TRow, TSummaryRow, TKey extends RowKey = RowKey> extends Omit<NativeDataGridProps<TRow, TSummaryRow>, 'rowKeyGetter' | 'rows' | 'columns' | 'onRowsChange' | 'selectedRows' | 'onSelectedRowsChange' | 'renderers'> {
110
112
  id: string;
111
113
  withActions?: boolean;
112
114
  columns: readonly Column<TRow, TSummaryRow>[];
@@ -164,5 +166,5 @@ export interface ActionsProps {
164
166
  rightActions?: React.ReactNode;
165
167
  }
166
168
  export type DataGridOwnerState<TRow, TSummaryRow, TKey extends RowKey = RowKey> = Pick<DataGridProps<TRow, TSummaryRow, TKey>, 'visibleCustomHeader'>;
167
- export type DataGridSlotsType = DataGridSlots | TextEditorSlots | ActionsSlots | RowsCountSlots | ColumnsConfigSlots | TableSlots | ControlNavigateSlots;
169
+ export type DataGridSlotsType = DataGridSlots | TextEditorSlots | ActionsSlots | RowsCountSlots | ColumnsConfigSlots | TableSlots | ControlNavigateSlots | ColumnIconFormatterSlots;
168
170
  export type DataGridStyles = OverridesStyleRules<DataGridSlotsType, typeof DATAGRID_PREFIX_NAME, Theme>;
@@ -56,11 +56,9 @@ const useNumberInput = (parameters) => {
56
56
  (event, field, fieldValue, reason) => {
57
57
  if (field === "value" && typeof fieldValue !== "string") {
58
58
  switch (reason) {
59
- // only a blur event will dispatch `numberInput:clamp`
60
59
  case "numberInput:inputChange":
61
60
  onChange?.(event, fieldValue);
62
61
  break;
63
- // only a blur event will dispatch `numberInput:clamp`
64
62
  case "numberInput:clamp":
65
63
  onChange?.(event, fieldValue);
66
64
  break;
@@ -41,7 +41,8 @@ const objectLogsStyles = {
41
41
  /**
42
42
  * Estilos para los iconos dentro de botones y otros elementos.
43
43
  */
44
- iconStyled: () => ({
44
+ iconStyled: {},
45
+ iconClickeableStyled: () => ({
45
46
  cursor: "pointer"
46
47
  }),
47
48
  /**
@@ -8,5 +8,6 @@ export declare enum ObjectLogsSlots {
8
8
  tooltipStyled = "tooltipStyled",
9
9
  iconButtonStyled = "iconButtonStyled",
10
10
  iconStyled = "iconStyled",
11
+ iconClickeableStyled = "iconClickeableStyled",
11
12
  reactJsonSlot = "reactJsonSlot"
12
13
  }
@@ -8,6 +8,7 @@ var ObjectLogsSlots = /* @__PURE__ */ ((ObjectLogsSlots2) => {
8
8
  ObjectLogsSlots2["tooltipStyled"] = "tooltipStyled";
9
9
  ObjectLogsSlots2["iconButtonStyled"] = "iconButtonStyled";
10
10
  ObjectLogsSlots2["iconStyled"] = "iconStyled";
11
+ ObjectLogsSlots2["iconClickeableStyled"] = "iconClickeableStyled";
11
12
  ObjectLogsSlots2["reactJsonSlot"] = "reactJsonSlot";
12
13
  return ObjectLogsSlots2;
13
14
  })(ObjectLogsSlots || {});
@@ -25,6 +25,9 @@ export declare const IconButtonStyled: import('@emotion/styled').StyledComponent
25
25
  export declare const IconStyled: import('@emotion/styled').StyledComponent<Pick<import('../../Icon').IconProps, keyof import('../../Icon').IconProps> & import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Record<string, unknown> & {
26
26
  ownerState?: (Partial<import('../types').ObjectLogsOwnerState> & Record<string, unknown>) | undefined;
27
27
  }, {}, {}>;
28
+ export declare const IconClickeableStyled: import('@emotion/styled').StyledComponent<Pick<import('../../Icon').IconProps, keyof import('../../Icon').IconProps> & import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Record<string, unknown> & {
29
+ ownerState?: (Partial<import('../types').ObjectLogsOwnerState> & Record<string, unknown>) | undefined;
30
+ }, {}, {}>;
28
31
  export declare const ReactJsonSlot: import('@emotion/styled').StyledComponent<Pick<import('@microlink/react-json-view').ReactJsonViewProps, keyof import('@microlink/react-json-view').ReactJsonViewProps> & import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Record<string, unknown> & {
29
32
  ownerState?: (Partial<import('../types').ObjectLogsOwnerState> & Record<string, unknown>) | undefined;
30
33
  }, {}, {}>;
@@ -45,6 +45,10 @@ const IconStyled = styled(Icon, {
45
45
  name: OBJECT_LOGS_KEY_COMPONENT,
46
46
  slot: ObjectLogsSlots.iconStyled
47
47
  })(objectLogsStyles?.iconStyled);
48
+ const IconClickeableStyled = styled(Icon, {
49
+ name: OBJECT_LOGS_KEY_COMPONENT,
50
+ slot: ObjectLogsSlots.iconClickeableStyled
51
+ })(objectLogsStyles?.iconClickeableStyled);
48
52
  styled(ReactJson, {
49
53
  name: OBJECT_LOGS_KEY_COMPONENT,
50
54
  slot: ObjectLogsSlots.reactJsonSlot
@@ -54,7 +58,8 @@ export {
54
58
  ContainerWrapperStyled as C,
55
59
  DetailDialogComponent as D,
56
60
  GridWrapperStyled as G,
57
- IconStyled as I,
61
+ IconClickeableStyled as I,
58
62
  StackStyled as S,
59
- WindowBaseStyled as W
63
+ WindowBaseStyled as W,
64
+ IconStyled as a
60
65
  };
@@ -441,8 +441,8 @@ const createAreasStore = (initProps, storeDevtoolsEnabled = false) => {
441
441
  bounds: {
442
442
  left: MARGIN_GRIDLAYOUT,
443
443
  top: MARGIN_GRIDLAYOUT,
444
- right: -MARGIN_GRIDLAYOUT,
445
- bottom: -MARGIN_GRIDLAYOUT
444
+ right: -10,
445
+ bottom: -10
446
446
  }
447
447
  });
448
448
  }
@@ -6,7 +6,7 @@ import clsx from "clsx";
6
6
  import { a as getComponentSlotRoot } from "../../../utils/getComponentSlotRoot.js";
7
7
  import { B as BOOLEAN_FORMATTER_KEY_COMPONENT } from "./constants.js";
8
8
  import { g as getPropDataTestId } from "../../../test/getNameDataTestId.js";
9
- import { B as BooleanFormatterRootStyled, a as BooleanFormatterIconStyled, b as BooleanFormatterChipStyled } from "./slots/BooleanFormatterSlots.js";
9
+ import { B as BooleanFormatterRootStyled, a as BooleanFormatterIconStyled, b as BooleanFormatterIconCheckFalseStyled, c as BooleanFormatterChipStyled } from "./slots/BooleanFormatterSlots.js";
10
10
  import { B as BooleanFormatterSlots } from "./slots/BooleanFormatterEnum.js";
11
11
  function getFormatBoolean(presentationType, value = false, getLabel) {
12
12
  if (presentationType === "string_yes_no") {
@@ -18,6 +18,9 @@ function getFormatBoolean(presentationType, value = false, getLabel) {
18
18
  if (presentationType === "chip_active_inactive") {
19
19
  return value ? getLabel(LABEL_BOOLEAN_ACTIVE) : getLabel(LABEL_BOOLEAN_INACTIVE);
20
20
  }
21
+ if (presentationType === "chip_yes_no") {
22
+ return value ? getLabel(LABEL_BOOLEAN_YES) : getLabel(LABEL_BOOLEAN_NO);
23
+ }
21
24
  return "";
22
25
  }
23
26
  function BooleanFormatter(props) {
@@ -29,8 +32,9 @@ function BooleanFormatter(props) {
29
32
  const ownerState = { value };
30
33
  const memoComponent = useMemo(() => {
31
34
  if (presentationType === "check") {
35
+ const IconComponent = value ? BooleanFormatterIconStyled : BooleanFormatterIconCheckFalseStyled;
32
36
  return /* @__PURE__ */ jsx(
33
- BooleanFormatterIconStyled,
37
+ IconComponent,
34
38
  {
35
39
  ownerState,
36
40
  src: value ? srcCheckTrue : srcCheckFalse,
@@ -38,14 +42,13 @@ function BooleanFormatter(props) {
38
42
  }
39
43
  );
40
44
  }
41
- if (presentationType === "chip_active_inactive") {
45
+ if (presentationType === "chip_active_inactive" || presentationType === "chip_yes_no") {
42
46
  return /* @__PURE__ */ jsx(
43
47
  BooleanFormatterChipStyled,
44
48
  {
45
49
  label: getFormatBoolean(presentationType, value, getLabel),
46
50
  ownerState,
47
51
  className: clsx(getComponentSlotRoot(BOOLEAN_FORMATTER_KEY_COMPONENT), className),
48
- opacity: true,
49
52
  color: value ? "primary" : "default",
50
53
  variant: "contained"
51
54
  }
@@ -13,7 +13,15 @@ const booleanFormatterStyles = {
13
13
  */
14
14
  icon: ({ theme }) => ({
15
15
  "& .M4LIcon-icon": {
16
- backgroundColor: theme.vars.palette.chips.default.contained.backgroundColorTone
16
+ backgroundColor: theme.vars.palette.text.primary
17
+ }
18
+ }),
19
+ /**
20
+ * Estilos para el icono de false
21
+ */
22
+ iconCheckFalse: ({ theme }) => ({
23
+ "& .M4LIcon-icon": {
24
+ backgroundColor: theme.vars.palette.text.secondary
17
25
  }
18
26
  }),
19
27
  chip: {}
@@ -1,5 +1,6 @@
1
1
  export declare enum BooleanFormatterSlots {
2
2
  icon = "icon",
3
3
  root = "root",
4
- chip = "chip"
4
+ chip = "chip",
5
+ iconCheckFalse = "iconCheckFalse"
5
6
  }
@@ -2,6 +2,7 @@ var BooleanFormatterSlots = /* @__PURE__ */ ((BooleanFormatterSlots2) => {
2
2
  BooleanFormatterSlots2["icon"] = "icon";
3
3
  BooleanFormatterSlots2["root"] = "root";
4
4
  BooleanFormatterSlots2["chip"] = "chip";
5
+ BooleanFormatterSlots2["iconCheckFalse"] = "iconCheckFalse";
5
6
  return BooleanFormatterSlots2;
6
7
  })(BooleanFormatterSlots || {});
7
8
  export {
@@ -1,6 +1,9 @@
1
1
  export declare const BooleanFormatterIconStyled: import('@emotion/styled').StyledComponent<Pick<import('../../..').IconProps, keyof import('../../..').IconProps> & import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Partial<import('..').BooleanFormatterOwnerState> & Record<string, unknown> & {
2
2
  ownerState: Partial<import('..').BooleanFormatterOwnerState> & Record<string, unknown>;
3
3
  }, {}, {}>;
4
+ export declare const BooleanFormatterIconCheckFalseStyled: import('@emotion/styled').StyledComponent<Pick<import('../../..').IconProps, keyof import('../../..').IconProps> & import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Partial<import('..').BooleanFormatterOwnerState> & Record<string, unknown> & {
5
+ ownerState: Partial<import('..').BooleanFormatterOwnerState> & Record<string, unknown>;
6
+ }, {}, {}>;
4
7
  export declare const BooleanFormatterRootStyled: import('@emotion/styled').StyledComponent<Pick<import('../../../mui_extended/Typography/types').TypographyProps, keyof import('../../../mui_extended/Typography/types').TypographyProps> & import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Partial<import('..').BooleanFormatterOwnerState> & Record<string, unknown> & {
5
8
  ownerState: Partial<import('..').BooleanFormatterOwnerState> & Record<string, unknown>;
6
9
  }, {}, {}>;
@@ -9,6 +9,10 @@ const BooleanFormatterIconStyled = styled(Icon, {
9
9
  name: BOOLEAN_FORMATTER_KEY_COMPONENT,
10
10
  slot: BooleanFormatterSlots.icon
11
11
  })(booleanFormatterStyles?.icon);
12
+ const BooleanFormatterIconCheckFalseStyled = styled(Icon, {
13
+ name: BOOLEAN_FORMATTER_KEY_COMPONENT,
14
+ slot: BooleanFormatterSlots.iconCheckFalse
15
+ })(booleanFormatterStyles?.iconCheckFalse);
12
16
  const BooleanFormatterRootStyled = styled(Typography, {
13
17
  name: BOOLEAN_FORMATTER_KEY_COMPONENT,
14
18
  slot: BooleanFormatterSlots.root
@@ -20,5 +24,6 @@ const BooleanFormatterChipStyled = styled(Chip, {
20
24
  export {
21
25
  BooleanFormatterRootStyled as B,
22
26
  BooleanFormatterIconStyled as a,
23
- BooleanFormatterChipStyled as b
27
+ BooleanFormatterIconCheckFalseStyled as b,
28
+ BooleanFormatterChipStyled as c
24
29
  };
@@ -8,7 +8,7 @@ import { Theme } from '@mui/material';
8
8
  * - `'string_true_false'`: Displays "True" for `true` and "False" for `false`.
9
9
  * - `'check'`: Displays an icon to represent the boolean value.
10
10
  */
11
- export type PresentationType = 'string_yes_no' | 'string_true_false' | 'check' | 'chip_active_inactive';
11
+ export type PresentationType = 'string_yes_no' | 'string_true_false' | 'check' | 'chip_active_inactive' | 'chip_yes_no';
12
12
  /**
13
13
  * Maps to the keys in `BooleanFormatterSlots`, defining slot-specific styling or customization.
14
14
  */
@@ -65,11 +65,6 @@ const RHFAutocompleteAsyncReducer = (onChangeFilterParms) => (state, action) =>
65
65
  ...state,
66
66
  isOpen: false
67
67
  };
68
- // case actionsType.SET_SELECTED_OPTIONS_TO_AUTOCOMPLETE:
69
- // return {
70
- // ...state,
71
- // selectedOptions: action.payload,
72
- // };
73
68
  default:
74
69
  return state;
75
70
  }
@@ -20,6 +20,7 @@ const MenuItem = (props) => {
20
20
  checked = false,
21
21
  checkable = false,
22
22
  className,
23
+ dataTestId,
23
24
  ...other
24
25
  } = props;
25
26
  const { currentSize } = useComponentSize(size);
@@ -83,7 +84,7 @@ const MenuItem = (props) => {
83
84
  disableRipple: true,
84
85
  size: adjustedSize,
85
86
  className: clsx(className, MENUITEM_CLASSES.root),
86
- "data-testid": "MenuItemRoot",
87
+ "data-testid": dataTestId || "MenuItemRoot",
87
88
  children: [
88
89
  checkable && /* @__PURE__ */ jsx(
89
90
  MenuItemIconCheckedStyled,
@@ -53,6 +53,10 @@ export interface MenuItemProps extends Omit<MUIMenuItemProps, 'size' | 'color'>
53
53
  * indica si debe aparecer el icono de check
54
54
  */
55
55
  checkable?: boolean;
56
+ /**
57
+ * ID para pruebas que se pasará como data-testid
58
+ */
59
+ dataTestId?: string;
56
60
  }
57
61
  /**
58
62
  * Estado del propietario del `MenuItem` utilizado para definir propiedades internas de estilo y comportamiento.
@@ -251,7 +251,7 @@ const useDynamicFilterAndSort = (props) => {
251
251
  name: sortApplied.columnKey,
252
252
  type: sort?.type || "string",
253
253
  urlIcon: sort?.urlIcon || "",
254
- label: sort?.label || sortApplied.columnKey
254
+ label: sortApplied.label
255
255
  },
256
256
  isSet: true,
257
257
  fixed: isFixed,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@m4l/components",
3
- "version": "9.2.62",
3
+ "version": "9.2.63-JT14072025.beta.1",
4
4
  "license": "UNLICENSED",
5
5
  "description": "M4L Components",
6
6
  "lint-staged": {
@@ -34,7 +34,7 @@
34
34
  "react": "18.3.1",
35
35
  "react-chartjs-2": "^5.2.0",
36
36
  "react-color": "^2.19.3",
37
- "react-data-grid": "7.0.0-beta.13",
37
+ "react-data-grid": "7.0.0-beta.47",
38
38
  "react-dnd": "^16.0.1",
39
39
  "react-dnd-html5-backend": "^16.0.1",
40
40
  "react-dom": "18.3.1",
@@ -19,6 +19,14 @@ export declare const DataGridWithEventChangeUserColumn: Story;
19
19
  * DataGrid con columns formatters
20
20
  */
21
21
  export declare const DatagridWithFormatters: Story;
22
+ /**
23
+ * DataGrid con columns with actions
24
+ */
25
+ export declare const DatagridWithActions: Story;
26
+ /**
27
+ * DataGrid con columnas con alineación
28
+ */
29
+ export declare const DatagridWithAlign: Story;
22
30
  /**
23
31
  * DataGrid sin pager
24
32
  */
@@ -1,3 +1,9 @@
1
1
  export declare const icons: {
2
2
  roundRefreshIcon: string;
3
+ roundDeleteIcon: string;
4
+ addIcon: string;
5
+ editIcon: string;
6
+ printIcon: string;
7
+ activeIcon: string;
8
+ inactiveIcon: string;
3
9
  };
@@ -1,12 +1,14 @@
1
- import { HeaderRendererProps } from 'react-data-grid';
1
+ import { RenderHeaderCellProps } from 'react-data-grid';
2
2
  import { ChipStatusFormatterProps } from '../../../../src/components/formatters/ChipStatusFormatter/types';
3
3
  import { DeepKeyOf } from '../../../../src/utils/types';
4
+ import { ColumnAlign } from '../../../../src/components/DataGrid/types';
4
5
  export interface SeedProps {
5
6
  quantity: number;
6
7
  withBoolean?: boolean;
7
8
  withConcatenated?: boolean;
8
9
  withDate?: boolean;
9
10
  withIcon?: boolean;
11
+ withMultipleIcons?: boolean;
10
12
  withInteractiveCheck?: boolean;
11
13
  withNestedValue?: boolean;
12
14
  withPoints?: boolean;
@@ -15,6 +17,12 @@ export interface SeedProps {
15
17
  withSetCheck?: boolean;
16
18
  withCesar?: boolean;
17
19
  withChipStatus?: boolean;
20
+ withActions?: boolean;
21
+ withActionsUser?: boolean;
22
+ withBooleanStatus?: boolean;
23
+ withUserType?: boolean;
24
+ aligns?: Record<string, ColumnAlign>;
25
+ names?: Record<string, string>;
18
26
  }
19
27
  export type GetColumnsProps = Omit<SeedProps, 'quantity'>;
20
28
  export type ColumnType = 'string' | 'number' | 'boolean' | 'date' | 'custom';
@@ -48,6 +56,10 @@ export interface RowType {
48
56
  label: string;
49
57
  currentStatus: ChipStatusFormatterProps['status'];
50
58
  };
59
+ userType?: {
60
+ label: string;
61
+ currentStatus: 'superadmin' | 'admin' | 'user';
62
+ };
51
63
  }
52
64
  interface RangesUncertainty {
53
65
  cmcMin: number;
@@ -62,7 +74,7 @@ export interface Column<TRow, TSummaryRow> {
62
74
  type: ColumnType;
63
75
  formatter?: (props: any) => JSX.Element;
64
76
  width?: number;
65
- withinHeaderRenderer?: React.FunctionComponent<HeaderRendererProps<TRow, TSummaryRow>>;
77
+ withinHeaderRenderer?: React.FunctionComponent<RenderHeaderCellProps<TRow, TSummaryRow>>;
66
78
  customFilter?: (row: TRow, value: string) => boolean;
67
79
  customSort?: (a: TRow, b: TRow) => number;
68
80
  }
@@ -1,4 +1,5 @@
1
- import { GetColumnsProps, RowType, Column } from './types';
1
+ import { GetColumnsProps, RowType } from './types';
2
+ import { Column } from 'react-data-grid';
2
3
  /**
3
4
  * ****************************************************************
4
5
  * Función que retorna las columnas para el DataGrid de Storybook
@@ -3,7 +3,7 @@ import { SeedProps } from './types';
3
3
  * Función que retorna el seed para el DataGrid de Storybook
4
4
  */
5
5
  export declare const useSeed: (props: SeedProps) => {
6
- columns: readonly import('./types').Column<import('./types').RowType, unknown>[];
6
+ columns: readonly import('react-data-grid').Column<import('./types').RowType, unknown>[];
7
7
  filters: import('../../../../src').FilterField[];
8
8
  sorts: import('../../../../src').SortField[];
9
9
  rows: import('./types').RowType[];
@@ -1,10 +0,0 @@
1
- const getFieldValueWithRow = (fieldValue) => {
2
- const row = "row";
3
- if (fieldValue.includes(row)) {
4
- return fieldValue;
5
- }
6
- return `${row}.${fieldValue}`;
7
- };
8
- export {
9
- getFieldValueWithRow as g
10
- };