@m4l/components 9.2.60 → 9.2.61

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 (62) hide show
  1. package/components/DataGrid/DataGrid.js +17 -3
  2. package/components/DataGrid/Datagrid.styles.js +72 -20
  3. package/components/DataGrid/constants.d.ts +2 -0
  4. package/components/DataGrid/constants.js +7 -3
  5. package/components/DataGrid/contexts/DataGridContext/index.js +77 -30
  6. package/components/DataGrid/contexts/DataGridContext/types.d.ts +5 -2
  7. package/components/DataGrid/dictionary.d.ts +8 -0
  8. package/components/DataGrid/dictionary.js +26 -17
  9. package/components/DataGrid/icons.d.ts +7 -0
  10. package/components/DataGrid/icons.js +8 -1
  11. package/components/DataGrid/slots/DataGridEnum.d.ts +7 -1
  12. package/components/DataGrid/slots/DataGridEnum.js +6 -0
  13. package/components/DataGrid/slots/DataGridSlot.d.ts +6 -0
  14. package/components/DataGrid/slots/DataGridSlot.js +35 -5
  15. package/components/DataGrid/subcomponents/HeaderActions/subcomponents/Filter/index.js +9 -1
  16. package/components/DataGrid/subcomponents/Table/hooks/getDragHeaderRenderer.d.ts +3 -1
  17. package/components/DataGrid/subcomponents/Table/hooks/getDragHeaderRenderer.js +9 -2
  18. package/components/DataGrid/subcomponents/Table/hooks/useHeaderMenuActions.d.ts +6 -0
  19. package/components/DataGrid/subcomponents/Table/hooks/useHeaderMenuActions.js +262 -0
  20. package/components/DataGrid/subcomponents/Table/hooks/useSortColumnsRows.d.ts +6 -4
  21. package/components/DataGrid/subcomponents/Table/hooks/useSortColumnsRows.js +35 -20
  22. package/components/DataGrid/subcomponents/Table/index.js +97 -34
  23. package/components/DataGrid/subcomponents/Table/subcomponents/ActionsColumn.js +1 -1
  24. package/components/DataGrid/subcomponents/Table/subcomponents/DraggableHeaderRenderer.d.ts +1 -0
  25. package/components/DataGrid/subcomponents/Table/subcomponents/DraggableHeaderRenderer.js +79 -4
  26. package/components/DataGrid/subcomponents/Table/subcomponents/HeaderRenderClick/HeaderRenderClick.d.ts +5 -0
  27. package/components/DataGrid/subcomponents/Table/subcomponents/HeaderRenderClick/HeaderRenderClick.js +146 -0
  28. package/components/DataGrid/subcomponents/Table/subcomponents/HeaderRenderClick/index.d.ts +1 -0
  29. package/components/DataGrid/subcomponents/Table/subcomponents/HeaderRenderClick/index.js +1 -0
  30. package/components/DataGrid/subcomponents/Table/subcomponents/HeaderRenderClick/types.d.ts +131 -0
  31. package/components/DataGrid/subcomponents/Table/subcomponents/SelectColumn.js +1 -1
  32. package/components/DataGrid/subcomponents/editors/TextEditor/index.js +1 -1
  33. package/components/DataGrid/tests/HeaderRenderClick.test.d.ts +1 -0
  34. package/components/DataGrid/tests/useHeaderMenuActions.test.d.ts +1 -0
  35. package/components/DataGrid/types.d.ts +53 -0
  36. package/components/DynamicFilter/store/DynamicFilterContext.js +63 -23
  37. package/components/DynamicFilter/subcomponents/PopoverFilter/usePopoverFilter.d.ts +3 -3
  38. package/components/DynamicFilter/types.d.ts +3 -0
  39. package/components/DynamicSort/DynamicSort.js +10 -6
  40. package/components/DynamicSort/store/DynamicSortContext.js +96 -67
  41. package/components/DynamicSort/store/DynamicSortStore.js +53 -4
  42. package/components/DynamicSort/store/types.d.ts +11 -0
  43. package/components/DynamicSort/subcomponents/PopoverSort/usePopoverSort.d.ts +3 -3
  44. package/components/DynamicSort/types.d.ts +4 -0
  45. package/components/NumberInput/hooks/useNumberInput/useNumberInput.js +0 -2
  46. package/components/hook-form/RHFAutocompleteAsync/reducer/RHFAutocompleteReducer.js +0 -5
  47. package/components/hook-form/RHFormContext/index.d.ts +1 -1
  48. package/components/mui_extended/CheckBox/CheckBox.styles.js +2 -1
  49. package/hooks/useDynamicFilterAndSort/useDynamicFilterAndSort.d.ts +3 -0
  50. package/hooks/useDynamicFilterAndSort/useDynamicFilterAndSort.js +334 -88
  51. package/index.js +7 -7
  52. package/package.json +1 -1
  53. package/storybook/components/DataGrid/DataGrid.stories.d.ts +22 -0
  54. package/storybook/components/DataGrid/MswHandles.d.ts +1 -0
  55. package/storybook/components/DataGrid/helpers/filterFieldsSeedData.d.ts +5 -0
  56. package/storybook/components/DataGrid/helpers/getRows.d.ts +4 -0
  57. package/storybook/components/DataGrid/helpers/getRowsWithBackendSimulation.d.ts +9 -0
  58. package/storybook/components/DataGrid/helpers/sortsSeedData.d.ts +5 -0
  59. package/storybook/components/DataGrid/helpers/types.d.ts +1 -0
  60. package/storybook/components/DataGrid/helpers/useSeed.d.ts +3 -0
  61. package/storybook/components/DataGrid/subcomponents/DataGridRender.d.ts +2 -0
  62. package/storybook/components/ObjectLogs/ObjectLogs.stories.d.ts +2 -2
@@ -5,17 +5,31 @@ import { useDrag, useDrop } from "react-dnd";
5
5
  import { HeaderRenderer } from "react-data-grid";
6
6
  import { u as useFocusRef } from "../hooks/useFocusRef.js";
7
7
  import { u as useFilters } from "../../../hooks/useFilters.js";
8
- import { m as DraggableHeaderRootStyled, n as DraggableWrapperInputBaseStyled, I as IconSearchStyled, H as HeaderInputBaseStyled } from "../../../slots/DataGridSlot.js";
8
+ import { N as NameColumnIconStyled, m as NameColumnStyled, I as IconColumnStyled, n as DraggableHeaderRootStyled, B as ButtonHeaderActionsStyled, o as DraggableWrapperInputBaseStyled, p as IconSearchStyled, H as HeaderInputBaseStyled } from "../../../slots/DataGridSlot.js";
9
9
  import { p as pathIcons } from "../../../icons.js";
10
10
  import { u as useDataGrid } from "../../../hooks/useDataGrid.js";
11
+ import { I as Icon } from "../../../../Icon/Icon.js";
11
12
  function DraggableHeaderRenderer(props) {
12
- const { onColumnsReorder, column, isCellSelected, ...others } = props;
13
+ const {
14
+ onColumnsReorder,
15
+ column,
16
+ isCellSelected,
17
+ openPopover,
18
+ onSort,
19
+ ...others
20
+ } = props;
13
21
  const { ref, tabIndex } = useFocusRef(isCellSelected);
14
22
  const { getLabel } = useModuleDictionary();
15
- const { size, classes } = useDataGrid();
23
+ const { size, classes, externalSortSettings, externalFilterSettings } = useDataGrid();
16
24
  const { host_static_assets, environment_assets } = useEnvironment();
17
25
  const { activeFilters, filters, onChangeFilter } = useFilters();
18
26
  const [filter, setFilter] = useState(filters?.get(column.key) || "");
27
+ const currentExternalSort = externalSortSettings?.sortsApplied?.find(
28
+ (s) => s.columnKey === column.key
29
+ );
30
+ const currentExternalFilter = externalFilterSettings?.filtersApplied?.find(
31
+ (f) => f.columnKey === column.key
32
+ );
19
33
  const [{ isDragging }, drag] = useDrag({
20
34
  type: "COLUMN_DRAG",
21
35
  item: { key: column.key },
@@ -44,6 +58,39 @@ function DraggableHeaderRenderer(props) {
44
58
  }
45
59
  setFilter(e.target.value);
46
60
  };
61
+ const getSortIcon = (direction) => direction === "asc" ? `${host_static_assets}/${environment_assets}/${pathIcons.sortAsc}` : `${host_static_assets}/${environment_assets}/${pathIcons.sortDesc}`;
62
+ const getColumnIcons = () => {
63
+ const icons = [];
64
+ if (currentExternalSort) {
65
+ const sortIconPath = getSortIcon(currentExternalSort.direction);
66
+ icons.push(
67
+ /* @__PURE__ */ jsx(
68
+ Icon,
69
+ {
70
+ src: sortIconPath,
71
+ size: "small",
72
+ color: "text.secondary"
73
+ },
74
+ "sort-icon"
75
+ )
76
+ );
77
+ }
78
+ if (currentExternalFilter?.isValid) {
79
+ const filterIconPath = `${host_static_assets}/${environment_assets}/${pathIcons.filter2}`;
80
+ icons.push(
81
+ /* @__PURE__ */ jsx(
82
+ Icon,
83
+ {
84
+ src: filterIconPath,
85
+ size: "small",
86
+ color: "text.secondary"
87
+ },
88
+ "filter-icon"
89
+ )
90
+ );
91
+ }
92
+ return icons.length > 0 ? icons : null;
93
+ };
47
94
  useEffect(() => {
48
95
  if (!activeFilters) {
49
96
  setFilter("");
@@ -53,6 +100,15 @@ function DraggableHeaderRenderer(props) {
53
100
  if (newColumn.withinHeaderRenderer) {
54
101
  newColumn.name = newColumn.withinHeaderRenderer(props);
55
102
  }
103
+ if (!newColumn.withinHeaderRenderer) {
104
+ const columnIcons = getColumnIcons();
105
+ if (columnIcons) {
106
+ newColumn.name = /* @__PURE__ */ jsxs(NameColumnIconStyled, { children: [
107
+ /* @__PURE__ */ jsx(NameColumnStyled, { children: newColumn.name }),
108
+ /* @__PURE__ */ jsx(IconColumnStyled, { children: columnIcons })
109
+ ] });
110
+ }
111
+ }
56
112
  return /* @__PURE__ */ jsxs(
57
113
  DraggableHeaderRootStyled,
58
114
  {
@@ -66,7 +122,26 @@ function DraggableHeaderRenderer(props) {
66
122
  backgroundColor: isOver ? "#ececec" : void 0
67
123
  },
68
124
  children: [
69
- /* @__PURE__ */ jsx(HeaderRenderer, { column: newColumn, isCellSelected, ...others }),
125
+ /* @__PURE__ */ jsx(
126
+ ButtonHeaderActionsStyled,
127
+ {
128
+ role: "button",
129
+ "aria-label": `header-column-button-${column.key}`,
130
+ onClick: (e) => {
131
+ openPopover?.(e.currentTarget, column.key);
132
+ },
133
+ children: /* @__PURE__ */ jsx(
134
+ HeaderRenderer,
135
+ {
136
+ column: newColumn,
137
+ isCellSelected,
138
+ onSort: () => {
139
+ },
140
+ ...others
141
+ }
142
+ )
143
+ }
144
+ ),
70
145
  activeFilters && (column?.withFilter === void 0 || column.withFilter === true) && /* @__PURE__ */ jsxs(DraggableWrapperInputBaseStyled, { children: [
71
146
  /* @__PURE__ */ jsx(
72
147
  IconSearchStyled,
@@ -0,0 +1,5 @@
1
+ import { HeaderRenderClickProps } from './types';
2
+ /**
3
+ * Componente que renderiza un menú de acciones para un encabezado de columna en un DataGrid.
4
+ */
5
+ export declare function HeaderRenderClick(props: HeaderRenderClickProps): import("react/jsx-runtime").JSX.Element;
@@ -0,0 +1,146 @@
1
+ import { jsx } from "react/jsx-runtime";
2
+ import { useState, useMemo, useEffect, useCallback } from "react";
3
+ import { useModuleDictionary } from "@m4l/core";
4
+ import { M as MenuItem } from "../../../../../mui_extended/MenuItem/MenuItem.js";
5
+ import { M as MenuListStyled, q as HeaderRenderClickStyled } from "../../../../slots/DataGridSlot.js";
6
+ import { M as MenuDivider } from "../../../../../mui_extended/MenuDivider/MenuDivider.js";
7
+ import { P as Popover } from "../../../../../mui_extended/Popover/Popover.js";
8
+ import { D as DICTIONARY } from "../../../../dictionary.js";
9
+ import { g as DATAGRID_HEADER_RENDER_CLICK_KEY } from "../../../../constants.js";
10
+ import { u as useFilters } from "../../../../hooks/useFilters.js";
11
+ function HeaderRenderClick(props) {
12
+ const {
13
+ menuActions,
14
+ size = "medium",
15
+ externalOpen,
16
+ onOpen,
17
+ objItem = {},
18
+ actionKey,
19
+ className,
20
+ arrowType = "right-top",
21
+ paperProps = {},
22
+ slots = {},
23
+ ...other
24
+ } = props;
25
+ const { getLabel } = useModuleDictionary();
26
+ const { activeFilters } = useFilters();
27
+ const [anchorEl, setAnchorEl] = useState(null);
28
+ const resolvedAnchorEl = externalOpen ?? anchorEl;
29
+ const open = typeof externalOpen !== "undefined" ? Boolean(externalOpen) : Boolean(anchorEl);
30
+ const ownerState = useMemo(
31
+ () => ({
32
+ selected: open
33
+ }),
34
+ [open]
35
+ );
36
+ useEffect(() => {
37
+ if (!open) {
38
+ setAnchorEl(null);
39
+ }
40
+ }, [open]);
41
+ useEffect(() => {
42
+ if (onOpen) {
43
+ onOpen(open);
44
+ }
45
+ }, [open, onOpen]);
46
+ const handleOpenClose = useCallback(() => {
47
+ setAnchorEl(null);
48
+ if (onOpen) {
49
+ onOpen(false);
50
+ }
51
+ }, [onOpen]);
52
+ const handleClick = useCallback(
53
+ (e, menuAction) => {
54
+ e.stopPropagation();
55
+ setAnchorEl(null);
56
+ if (onOpen) {
57
+ onOpen(false);
58
+ }
59
+ menuAction.onClick && menuAction.onClick(e);
60
+ },
61
+ [onOpen]
62
+ );
63
+ const renderMenuContent = useCallback(() => {
64
+ let processedActions = [];
65
+ let finalActions = [];
66
+ if (menuActions) {
67
+ if (typeof menuActions === "function") {
68
+ processedActions = menuActions(objItem);
69
+ } else {
70
+ processedActions = menuActions;
71
+ }
72
+ }
73
+ if (Array.isArray(processedActions)) {
74
+ finalActions = processedActions;
75
+ }
76
+ if (finalActions.length === 0) {
77
+ return /* @__PURE__ */ jsx(
78
+ MenuItem,
79
+ {
80
+ disabled: true,
81
+ role: "menu-no-actions",
82
+ label: getLabel(DICTIONARY.NO_ACTIONS_LABEL)
83
+ }
84
+ );
85
+ }
86
+ return /* @__PURE__ */ jsx(MenuListStyled, { ownerState: {}, children: finalActions.map((menuAction, index) => {
87
+ const key = actionKey ?? index;
88
+ switch (menuAction.type ?? "menuItem") {
89
+ case "divider":
90
+ return /* @__PURE__ */ jsx(
91
+ MenuDivider,
92
+ {
93
+ variant: "solid",
94
+ size
95
+ },
96
+ `divider-${key}`
97
+ );
98
+ case "customNode":
99
+ return menuAction.customNode;
100
+ case "menuItem":
101
+ return /* @__PURE__ */ jsx(
102
+ MenuItem,
103
+ {
104
+ size,
105
+ ...menuAction,
106
+ label: menuAction.label ?? getLabel(DICTIONARY.NO_ACTIONS_LABEL),
107
+ onClick: menuAction.onClick ? (e) => handleClick(e, menuAction) : void 0,
108
+ "aria-label": menuAction.type === "menuItem" && menuAction.dataTestId ? menuAction.dataTestId : "header-render-click-menu-item"
109
+ },
110
+ `${DATAGRID_HEADER_RENDER_CLICK_KEY}${menuAction.label ?? key}`
111
+ );
112
+ default:
113
+ return null;
114
+ }
115
+ }) });
116
+ }, [menuActions, size, objItem, getLabel, actionKey, handleClick]);
117
+ return /* @__PURE__ */ jsx(HeaderRenderClickStyled, { className, ownerState: { ownerState }, children: open && /* @__PURE__ */ jsx(
118
+ Popover,
119
+ {
120
+ id: "Popover",
121
+ open,
122
+ anchorEl: resolvedAnchorEl,
123
+ onClose: handleOpenClose,
124
+ arrowType,
125
+ ...other,
126
+ slots: { ...slots },
127
+ slotProps: {
128
+ paper: {
129
+ ...paperProps,
130
+ sx: {
131
+ mt: !activeFilters ? 0.3 : 6.5,
132
+ ...paperProps?.sx
133
+ }
134
+ }
135
+ },
136
+ disableAutoFocus: true,
137
+ disableEnforceFocus: true,
138
+ anchorOrigin: { vertical: "bottom", horizontal: "left" },
139
+ transformOrigin: { vertical: "top", horizontal: "left" },
140
+ children: renderMenuContent()
141
+ }
142
+ ) });
143
+ }
144
+ export {
145
+ HeaderRenderClick as H
146
+ };
@@ -0,0 +1 @@
1
+ export * from './HeaderRenderClick';
@@ -0,0 +1,131 @@
1
+ import { ReactElement, ReactNode } from 'react';
2
+ import { Sizes, ComponentPalletColor } from '@m4l/styles';
3
+ import { PopoverProps } from '../../../../../mui_extended/Popover/types';
4
+ import { MenuItemProps } from '../../../../../mui_extended/MenuItem/types';
5
+ import { ComponentNameToClassKey, PaperProps, SxProps } from '@mui/material';
6
+ import { Theme } from '@mui/material/styles';
7
+ import { OverridesStyleRules } from '@mui/material/styles/overrides';
8
+ export type MenuTypes = 'menuItem' | 'divider' | 'loader' | 'customNode';
9
+ interface BaseMenuAction {
10
+ type?: MenuTypes;
11
+ }
12
+ export interface MenuItemAction extends BaseMenuAction, Pick<MenuItemProps, 'startIcon' | 'endIcon' | 'label' | 'selected' | 'color' | 'disabled' | 'checkable' | 'checked'> {
13
+ type?: 'menuItem';
14
+ onClick?: (arg?: any) => void;
15
+ customNode?: never;
16
+ error?: boolean;
17
+ dataTestId?: string;
18
+ }
19
+ interface DividerAction extends BaseMenuAction {
20
+ type: 'divider';
21
+ label?: never;
22
+ onClick?: never;
23
+ customNode?: never;
24
+ error?: never;
25
+ }
26
+ interface CustomNodeAction extends BaseMenuAction {
27
+ type: 'customNode';
28
+ customNode: ReactNode;
29
+ label?: never;
30
+ onClick?: never;
31
+ error?: never;
32
+ }
33
+ /**
34
+ * Define una acción del menú, con propiedades heredadas de `MenuItemProps`.
35
+ * [onClick] - Función opcional a ejecutar al hacer clic en la acción del menú.
36
+ * [error] - Indicador de error en la acción del menú.
37
+ */
38
+ export type MenuAction = MenuItemAction | DividerAction | CustomNodeAction;
39
+ export interface HeaderRenderClickProps extends Omit<PopoverProps, 'open' | 'anchorEl'> {
40
+ /**
41
+ * Tamaño opcional del menú (pequeño o mediano).
42
+ */
43
+ size?: Extract<Sizes, 'small' | 'medium'>;
44
+ /**
45
+ * Objeto personalizado a pasar al componente.
46
+ */
47
+ objItem?: any;
48
+ /**
49
+ * Acciones del menú, puede ser un array o una función que genere acciones.
50
+ */
51
+ menuActions: MenuAction[] | ((row: any) => MenuAction[]);
52
+ /**
53
+ * Texto del tooltip opcional.
54
+ */
55
+ toolTip?: string;
56
+ /**
57
+ * Elemento opcional que se renderiza al final de la lista del menú.
58
+ */
59
+ endListElement?: ReactElement;
60
+ /**
61
+ * Estilos personalizados para las acciones del menú.
62
+ */
63
+ menuActionSx?: SxProps<Theme> | Partial<OverridesStyleRules<string, ComponentNameToClassKey, Theme>>;
64
+ /**
65
+ * Contenido del `Badge` si está presente.
66
+ */
67
+ badgeContent?: string;
68
+ /**
69
+ * Elemento externo para abrir el menú.
70
+ */
71
+ externalOpen?: HTMLDivElement | null;
72
+ /**
73
+ * Función externa para cerrar el menú.
74
+ */
75
+ externalClose?: (element: null | HTMLDivElement) => void;
76
+ /**
77
+ * Tipo de flecha del menú.
78
+ */
79
+ disabled?: boolean;
80
+ /**
81
+ * The components used for each slot inside.
82
+ * @default {}
83
+ */
84
+ slots?: {
85
+ root?: React.ElementType;
86
+ paper?: React.ElementType;
87
+ };
88
+ /**
89
+ * Propiedad objeto que se usa para poder editar las propiedades del paper o agregar estilos desde su sx
90
+ */
91
+ paperProps?: PaperProps;
92
+ /**
93
+ * Propiedad checked
94
+ */
95
+ checked?: boolean;
96
+ /**
97
+ * Propiedad checkable para el menú
98
+ */
99
+ checkable?: boolean;
100
+ /**
101
+ * Propiedad para agregar un node al menú
102
+ */
103
+ customNode?: ReactNode;
104
+ /**
105
+ * Define el color del componente.
106
+ */
107
+ color?: Extract<ComponentPalletColor, 'primary'>;
108
+ /**
109
+ * Define la clave de la acción.
110
+ */
111
+ actionKey?: string;
112
+ /**
113
+ * agrega un header al menú
114
+ */
115
+ header?: ReactNode;
116
+ /**
117
+ * agrega un footer al menú
118
+ */
119
+ footer?: ReactNode;
120
+ /**
121
+ * Define el tipo de flecha del menú.
122
+ */
123
+ onOpen?: (param: boolean) => void;
124
+ }
125
+ /**
126
+ * Estado del propietario para `HeaderRenderClick`.
127
+ */
128
+ export interface HeaderRenderClickOwnerState {
129
+ selected: boolean;
130
+ }
131
+ export {};
@@ -1,7 +1,7 @@
1
1
  import { jsx } from "react/jsx-runtime";
2
2
  import { useRowSelection, SelectCellFormatter } from "react-data-grid";
3
3
  import { u as useDataGrid } from "../../../hooks/useDataGrid.js";
4
- import { c as DATAGRID_SELECT_COLUMN_KEY } from "../../../constants.js";
4
+ 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) {
@@ -1,5 +1,5 @@
1
1
  import { jsx } from "react/jsx-runtime";
2
- import { o as InputTextEditorStyled } from "../../../slots/DataGridSlot.js";
2
+ import { r as InputTextEditorStyled } from "../../../slots/DataGridSlot.js";
3
3
  function autoFocusAndSelect(input) {
4
4
  input?.focus();
5
5
  input?.select();
@@ -13,6 +13,7 @@ export type GridFormatterPropss<T, SR> = FormatterProps<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';
16
+ export declare type FieldPresence = 'initialized' | 'fixed' | 'optional';
16
17
  export declare interface GridRow {
17
18
  id: number;
18
19
  }
@@ -61,10 +62,62 @@ export interface ChangeUserColumn<T extends KeyUserColumns = KeyUserColumns> {
61
62
  userConfig: IGridConfig[T];
62
63
  }
63
64
  export type OnChangeUserColumns = (props: ChangeUserColumn) => void;
65
+ export type SortApplied = {
66
+ columnKey: string;
67
+ removable: boolean;
68
+ direction: Lowercase<SortDirection>;
69
+ };
70
+ export type SortAction = 'add' | 'remove';
71
+ export type SortChangeAdd = {
72
+ action: 'add';
73
+ columnKey: string;
74
+ direction: Lowercase<SortDirection>;
75
+ };
76
+ export type SortChangeRemove = {
77
+ action: 'remove';
78
+ columnKey: string;
79
+ };
80
+ export type SortChangeEvent = SortChangeAdd | SortChangeRemove;
81
+ export interface SortSettings {
82
+ sortsColumns: string[];
83
+ sortsApplied: SortApplied[];
84
+ onChange: (event: SortChangeEvent) => void;
85
+ }
86
+ /**---------------------------------------------------------------- */
87
+ export type FilterChangeAdd = {
88
+ action: 'add';
89
+ columnKey: string;
90
+ };
91
+ export type FilterChangeOpenPopover = {
92
+ action: 'openPopoverMenuFields';
93
+ };
94
+ export type FilterChangeEvent = FilterChangeAdd | FilterChangeOpenPopover;
95
+ interface FilterColumn {
96
+ name: string;
97
+ multiple: boolean;
98
+ }
99
+ export type FilterApplied = {
100
+ columnKey: string;
101
+ isValid: boolean;
102
+ };
103
+ export interface FilterSettings {
104
+ filterColumns: FilterColumn[];
105
+ filtersApplied: FilterApplied[];
106
+ onChange: (event: FilterChangeEvent) => void;
107
+ }
108
+ /**--------------------Termina tipado de filtros-------------------------------------------- */
64
109
  export interface GridProps<TRow, TSummaryRow, TKey extends RowKey = RowKey> {
65
110
  id: string;
66
111
  withActions?: boolean;
67
112
  columns: readonly Column<TRow, TSummaryRow>[];
113
+ /**
114
+ * Propiedad que define la configuración de los sorts aplicados.
115
+ */
116
+ externalSortSettings?: SortSettings;
117
+ /**
118
+ * Propiedad que define la configuración de los filtros aplicados.
119
+ */
120
+ externalFilterSettings?: FilterSettings;
68
121
  rows: TRow[];
69
122
  initialRowHeightVariant?: RowHeightVariants;
70
123
  rowHeaderHeights?: RowHeights;
@@ -33,29 +33,32 @@ const DynamicFilterProvider = forwardRef((props, ref) => {
33
33
  const isSkeleton = useModuleSkeleton();
34
34
  const isFirstRender = useFirstRender([isDesktop, isSkeleton]);
35
35
  if (!dynamicFilterStoreRef.current) {
36
- dynamicFilterStoreRef.current = createDynamicFilterStore({
37
- allField: {
38
- ...ALL_FIELD,
39
- urlIcon: `${host_static_assets}/${environment_assets}/frontend/components/dynamic_filter/assets/icons/all_fields.svg`
36
+ dynamicFilterStoreRef.current = createDynamicFilterStore(
37
+ {
38
+ allField: {
39
+ ...ALL_FIELD,
40
+ urlIcon: `${host_static_assets}/${environment_assets}/frontend/components/dynamic_filter/assets/icons/all_fields.svg`
41
+ },
42
+ withAllField,
43
+ fields,
44
+ automatic,
45
+ getLabel,
46
+ dataTestId,
47
+ size,
48
+ storeId,
49
+ visibleRefresh,
50
+ ownerState: {
51
+ isSkeleton,
52
+ isDirty: false,
53
+ inEdition: false,
54
+ isValid: true,
55
+ isMobile: !isDesktop,
56
+ isEmpty: true,
57
+ size
58
+ }
40
59
  },
41
- withAllField,
42
- fields,
43
- automatic,
44
- getLabel,
45
- dataTestId,
46
- size,
47
- storeId,
48
- visibleRefresh,
49
- ownerState: {
50
- isSkeleton,
51
- isDirty: false,
52
- inEdition: false,
53
- isValid: true,
54
- isMobile: !isDesktop,
55
- isEmpty: true,
56
- size
57
- }
58
- }, storeDevtoolsEnabled);
60
+ storeDevtoolsEnabled
61
+ );
59
62
  dynamicFilterStoreRef.current.getState().actions.init(initialAppliedFilters);
60
63
  }
61
64
  const fireOnChangeFilters = useStore(
@@ -63,8 +66,45 @@ const DynamicFilterProvider = forwardRef((props, ref) => {
63
66
  (state) => state.actions.fireOnChangeFilters,
64
67
  shallow
65
68
  );
69
+ const openPopoverMenuFields = useStore(
70
+ dynamicFilterStoreRef.current,
71
+ (state) => state.actions.openPopoverMenuFields,
72
+ shallow
73
+ );
74
+ const showPopoverFilterForAdd = useStore(
75
+ dynamicFilterStoreRef.current,
76
+ (state) => state.actions.showPopoverFilterForAdd,
77
+ shallow
78
+ );
79
+ const addExternalFilter = (columnKey) => {
80
+ try {
81
+ const state = dynamicFilterStoreRef.current?.getState();
82
+ if (!state) {
83
+ return;
84
+ }
85
+ const field = state.actions.getFieldByName(columnKey);
86
+ const isFilterApplied = state.appliedFilters.some(
87
+ (filter) => filter.field.name === columnKey && filter.isSet
88
+ );
89
+ const isFilterMultiple = field.multiple;
90
+ if (isFilterApplied && !isFilterMultiple) {
91
+ return;
92
+ }
93
+ showPopoverFilterForAdd(field);
94
+ } catch (error) {
95
+ throw new Error(`Error al agregar el filtro externo: ${error}`);
96
+ }
97
+ };
98
+ const getCurrentFilters = useStore(
99
+ dynamicFilterStoreRef.current,
100
+ (state) => () => state.appliedFilters,
101
+ shallow
102
+ );
66
103
  useImperativeHandle(ref, () => ({
67
- fireOnChangeFilter: fireOnChangeFilters
104
+ fireOnChangeFilter: fireOnChangeFilters,
105
+ openPopoverMenuFields,
106
+ addExternalFilter,
107
+ getCurrentFilters
68
108
  }));
69
109
  const countOnChangeFiltersApplied = useStore(
70
110
  dynamicFilterStoreRef.current,
@@ -17,11 +17,11 @@ declare function usePopoverFilter(): {
17
17
  filterFormValue: FormFilterValue;
18
18
  formFilter: FormFilterFieldApplied;
19
19
  popupValidationSchema: import('yup').ArraySchema<import('yup').BaseSchema<unknown, import('yup/lib/object').AnyObject, unknown> | import('yup/lib/Lazy').default<import('yup').BaseSchema<unknown, import('yup/lib/object').AnyObject, unknown>, import('yup/lib/object').AnyObject>, import('yup/lib/types').AnyObject, unknown[] | undefined, unknown[] | undefined> | import('yup').BaseSchema<any, import('yup/lib/object').AnyObject, any> | import('yup').ObjectSchema<{
20
- [x: string]: import('yup').ObjectSchema<any, import('yup/lib/object').AnyObject, import('yup/lib/object').TypeOfShape<any>, import('yup/lib/object').AssertsShape<any>> | import('yup').BaseSchema<any, import('yup/lib/object').AnyObject, any> | import('yup').ArraySchema<import('yup').BaseSchema<unknown, import('yup/lib/object').AnyObject, unknown> | import('yup/lib/Lazy').default<import('yup').BaseSchema<unknown, import('yup/lib/object').AnyObject, unknown>, import('yup/lib/object').AnyObject>, import('yup/lib/types').AnyObject, unknown[] | undefined, unknown[] | undefined> | import('yup/lib/Lazy').default<import('yup').ObjectSchema<any, import('yup/lib/object').AnyObject, import('yup/lib/object').TypeOfShape<any>, import('yup/lib/object').AssertsShape<any>>, any>;
20
+ [x: string]: import('yup').ObjectSchema</*elided*/ any, import('yup/lib/object').AnyObject, import('yup/lib/object').TypeOfShape</*elided*/ any>, import('yup/lib/object').AssertsShape</*elided*/ any>> | import('yup').BaseSchema<any, import('yup/lib/object').AnyObject, any> | import('yup').ArraySchema<import('yup').BaseSchema<unknown, import('yup/lib/object').AnyObject, unknown> | import('yup/lib/Lazy').default<import('yup').BaseSchema<unknown, import('yup/lib/object').AnyObject, unknown>, import('yup/lib/object').AnyObject>, import('yup/lib/types').AnyObject, unknown[] | undefined, unknown[] | undefined> | import('yup/lib/Lazy').default<import('yup').ObjectSchema</*elided*/ any, import('yup/lib/object').AnyObject, import('yup/lib/object').TypeOfShape</*elided*/ any>, import('yup/lib/object').AssertsShape</*elided*/ any>>, any>;
21
21
  }, import('yup/lib/object').AnyObject, import('yup/lib/object').TypeOfShape<{
22
- [x: string]: import('yup').ObjectSchema<any, import('yup/lib/object').AnyObject, import('yup/lib/object').TypeOfShape<any>, import('yup/lib/object').AssertsShape<any>> | import('yup').BaseSchema<any, import('yup/lib/object').AnyObject, any> | import('yup').ArraySchema<import('yup').BaseSchema<unknown, import('yup/lib/object').AnyObject, unknown> | import('yup/lib/Lazy').default<import('yup').BaseSchema<unknown, import('yup/lib/object').AnyObject, unknown>, import('yup/lib/object').AnyObject>, import('yup/lib/types').AnyObject, unknown[] | undefined, unknown[] | undefined> | import('yup/lib/Lazy').default<import('yup').ObjectSchema<any, import('yup/lib/object').AnyObject, import('yup/lib/object').TypeOfShape<any>, import('yup/lib/object').AssertsShape<any>>, any>;
22
+ [x: string]: import('yup').ObjectSchema</*elided*/ any, import('yup/lib/object').AnyObject, import('yup/lib/object').TypeOfShape</*elided*/ any>, import('yup/lib/object').AssertsShape</*elided*/ any>> | import('yup').BaseSchema<any, import('yup/lib/object').AnyObject, any> | import('yup').ArraySchema<import('yup').BaseSchema<unknown, import('yup/lib/object').AnyObject, unknown> | import('yup/lib/Lazy').default<import('yup').BaseSchema<unknown, import('yup/lib/object').AnyObject, unknown>, import('yup/lib/object').AnyObject>, import('yup/lib/types').AnyObject, unknown[] | undefined, unknown[] | undefined> | import('yup/lib/Lazy').default<import('yup').ObjectSchema</*elided*/ any, import('yup/lib/object').AnyObject, import('yup/lib/object').TypeOfShape</*elided*/ any>, import('yup/lib/object').AssertsShape</*elided*/ any>>, any>;
23
23
  }>, import('yup/lib/object').AssertsShape<{
24
- [x: string]: import('yup').ObjectSchema<any, import('yup/lib/object').AnyObject, import('yup/lib/object').TypeOfShape<any>, import('yup/lib/object').AssertsShape<any>> | import('yup').BaseSchema<any, import('yup/lib/object').AnyObject, any> | import('yup').ArraySchema<import('yup').BaseSchema<unknown, import('yup/lib/object').AnyObject, unknown> | import('yup/lib/Lazy').default<import('yup').BaseSchema<unknown, import('yup/lib/object').AnyObject, unknown>, import('yup/lib/object').AnyObject>, import('yup/lib/types').AnyObject, unknown[] | undefined, unknown[] | undefined> | import('yup/lib/Lazy').default<import('yup').ObjectSchema<any, import('yup/lib/object').AnyObject, import('yup/lib/object').TypeOfShape<any>, import('yup/lib/object').AssertsShape<any>>, any>;
24
+ [x: string]: import('yup').ObjectSchema</*elided*/ any, import('yup/lib/object').AnyObject, import('yup/lib/object').TypeOfShape</*elided*/ any>, import('yup/lib/object').AssertsShape</*elided*/ any>> | import('yup').BaseSchema<any, import('yup/lib/object').AnyObject, any> | import('yup').ArraySchema<import('yup').BaseSchema<unknown, import('yup/lib/object').AnyObject, unknown> | import('yup/lib/Lazy').default<import('yup').BaseSchema<unknown, import('yup/lib/object').AnyObject, unknown>, import('yup/lib/object').AnyObject>, import('yup/lib/types').AnyObject, unknown[] | undefined, unknown[] | undefined> | import('yup/lib/Lazy').default<import('yup').ObjectSchema</*elided*/ any, import('yup/lib/object').AnyObject, import('yup/lib/object').TypeOfShape</*elided*/ any>, import('yup/lib/object').AssertsShape</*elided*/ any>>, any>;
25
25
  }>> | undefined;
26
26
  statusLoad: "initial" | "reload_values_provider" | "ready";
27
27
  };
@@ -354,5 +354,8 @@ export type DynamicFilterSlotsType = keyof typeof DynamicFilterSlots;
354
354
  export type DynamicFilterStyles = M4LOverridesStyleRules<DynamicFilterSlotsType, 'M4LDynamicFilter', Theme>;
355
355
  export interface DynamicFilterRef {
356
356
  fireOnChangeFilter: () => void;
357
+ openPopoverMenuFields: () => void;
358
+ addExternalFilter: (columnKey: string) => void;
359
+ getCurrentFilters: () => FilterFieldApplied[];
357
360
  }
358
361
  export {};
@@ -3,13 +3,17 @@ import { useFlagsPresent, CommonFlags } from "@m4l/core";
3
3
  import { forwardRef } from "react";
4
4
  import { D as DynamicSortProvider } from "./store/DynamicSortContext.js";
5
5
  import { D as DynamicSortBase } from "./subcomponents/DynamicSortBase/DynamicSortBase.js";
6
- const DynamicSort = forwardRef((props, ref) => {
7
- const hasPresentFlags = useFlagsPresent([CommonFlags.FLAG_DICTIONARY_LOADED]);
8
- if (!hasPresentFlags) {
9
- return null;
6
+ const DynamicSort = forwardRef(
7
+ (props, ref) => {
8
+ const hasPresentFlags = useFlagsPresent([
9
+ CommonFlags.FLAG_DICTIONARY_LOADED
10
+ ]);
11
+ if (!hasPresentFlags) {
12
+ return null;
13
+ }
14
+ return /* @__PURE__ */ jsx(DynamicSortProvider, { ...props, ref, children: /* @__PURE__ */ jsx(DynamicSortBase, {}) });
10
15
  }
11
- return /* @__PURE__ */ jsx(DynamicSortProvider, { ...props, ref, children: /* @__PURE__ */ jsx(DynamicSortBase, {}) });
12
- });
16
+ );
13
17
  export {
14
18
  DynamicSort as D
15
19
  };