@m4l/components 9.2.60 → 9.2.62-B07072025beta.1

package/components/DataGrid/subcomponents/Table/subcomponents/DraggableHeaderRenderer.js

@@ -5,17 +5,31 @@ import { useDrag, useDrop } from "react-dnd";
 import { HeaderRenderer } from "react-data-grid";
 import { u as useFocusRef } from "../hooks/useFocusRef.js";
 import { u as useFilters } from "../../../hooks/useFilters.js";
-import { m as DraggableHeaderRootStyled, n as DraggableWrapperInputBaseStyled, I as IconSearchStyled, H as HeaderInputBaseStyled } from "../../../slots/DataGridSlot.js";
+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";
 import { p as pathIcons } from "../../../icons.js";
 import { u as useDataGrid } from "../../../hooks/useDataGrid.js";
+import { I as Icon } from "../../../../Icon/Icon.js";
 function DraggableHeaderRenderer(props) {
-  const { onColumnsReorder, column, isCellSelected, ...others } = props;
+  const {
+    onColumnsReorder,
+    column,
+    isCellSelected,
+    openPopover,
+    onSort,
+    ...others
+  } = props;
   const { ref, tabIndex } = useFocusRef(isCellSelected);
   const { getLabel } = useModuleDictionary();
-  const { size, classes } = useDataGrid();
+  const { size, classes, externalSortSettings, externalFilterSettings } = useDataGrid();
   const { host_static_assets, environment_assets } = useEnvironment();
   const { activeFilters, filters, onChangeFilter } = useFilters();
   const [filter, setFilter] = useState(filters?.get(column.key) || "");
+  const currentExternalSort = externalSortSettings?.sortsApplied?.find(
+    (s) => s.columnKey === column.key
+  );
+  const currentExternalFilter = externalFilterSettings?.filtersApplied?.find(
+    (f) => f.columnKey === column.key
+  );
   const [{ isDragging }, drag] = useDrag({
     type: "COLUMN_DRAG",
     item: { key: column.key },
@@ -44,6 +58,39 @@ function DraggableHeaderRenderer(props) {
     }
     setFilter(e.target.value);
   };
+  const getSortIcon = (direction) => direction === "asc" ? `${host_static_assets}/${environment_assets}/${pathIcons.sortAsc}` : `${host_static_assets}/${environment_assets}/${pathIcons.sortDesc}`;
+  const getColumnIcons = () => {
+    const icons = [];
+    if (currentExternalSort) {
+      const sortIconPath = getSortIcon(currentExternalSort.direction);
+      icons.push(
+        /* @__PURE__ */ jsx(
+          Icon,
+          {
+            src: sortIconPath,
+            size: "small",
+            color: "text.secondary"
+          },
+          "sort-icon"
+        )
+      );
+    }
+    if (currentExternalFilter?.isValid) {
+      const filterIconPath = `${host_static_assets}/${environment_assets}/${pathIcons.filter2}`;
+      icons.push(
+        /* @__PURE__ */ jsx(
+          Icon,
+          {
+            src: filterIconPath,
+            size: "small",
+            color: "text.secondary"
+          },
+          "filter-icon"
+        )
+      );
+    }
+    return icons.length > 0 ? icons : null;
+  };
   useEffect(() => {
     if (!activeFilters) {
       setFilter("");
@@ -53,6 +100,15 @@ function DraggableHeaderRenderer(props) {
   if (newColumn.withinHeaderRenderer) {
     newColumn.name = newColumn.withinHeaderRenderer(props);
   }
+  if (!newColumn.withinHeaderRenderer) {
+    const columnIcons = getColumnIcons();
+    if (columnIcons) {
+      newColumn.name = /* @__PURE__ */ jsxs(NameColumnIconStyled, { children: [
+        /* @__PURE__ */ jsx(NameColumnStyled, { children: newColumn.name }),
+        /* @__PURE__ */ jsx(IconColumnStyled, { children: columnIcons })
+      ] });
+    }
+  }
   return /* @__PURE__ */ jsxs(
     DraggableHeaderRootStyled,
     {
@@ -66,7 +122,26 @@ function DraggableHeaderRenderer(props) {
         backgroundColor: isOver ? "#ececec" : void 0
       },
       children: [
-        /* @__PURE__ */ jsx(HeaderRenderer, { column: newColumn, isCellSelected, ...others }),
+        /* @__PURE__ */ jsx(
+          ButtonHeaderActionsStyled,
+          {
+            role: "button",
+            "aria-label": `header-column-button-${column.key}`,
+            onClick: (e) => {
+              openPopover?.(e.currentTarget, column.key);
+            },
+            children: /* @__PURE__ */ jsx(
+              HeaderRenderer,
+              {
+                column: newColumn,
+                isCellSelected,
+                onSort: () => {
+                },
+                ...others
+              }
+            )
+          }
+        ),
         activeFilters && (column?.withFilter === void 0 || column.withFilter === true) && /* @__PURE__ */ jsxs(DraggableWrapperInputBaseStyled, { children: [
           /* @__PURE__ */ jsx(
             IconSearchStyled,

package/components/DataGrid/subcomponents/Table/subcomponents/HeaderRenderClick/HeaderRenderClick.d.ts

@@ -0,0 +1,5 @@
+import { HeaderRenderClickProps } from './types';
+/**
+ * Componente que renderiza un menú de acciones para un encabezado de columna en un DataGrid.
+ */
+export declare function HeaderRenderClick(props: HeaderRenderClickProps): import("react/jsx-runtime").JSX.Element;

package/components/DataGrid/subcomponents/Table/subcomponents/HeaderRenderClick/HeaderRenderClick.js

@@ -0,0 +1,146 @@
+import { jsx } from "react/jsx-runtime";
+import { useState, useMemo, useEffect, useCallback } from "react";
+import { useModuleDictionary } from "@m4l/core";
+import { M as MenuItem } from "../../../../../mui_extended/MenuItem/MenuItem.js";
+import { M as MenuListStyled, q as HeaderRenderClickStyled } from "../../../../slots/DataGridSlot.js";
+import { M as MenuDivider } from "../../../../../mui_extended/MenuDivider/MenuDivider.js";
+import { P as Popover } from "../../../../../mui_extended/Popover/Popover.js";
+import { D as DICTIONARY } from "../../../../dictionary.js";
+import { g as DATAGRID_HEADER_RENDER_CLICK_KEY } from "../../../../constants.js";
+import { u as useFilters } from "../../../../hooks/useFilters.js";
+function HeaderRenderClick(props) {
+  const {
+    menuActions,
+    size = "medium",
+    externalOpen,
+    onOpen,
+    objItem = {},
+    actionKey,
+    className,
+    arrowType = "right-top",
+    paperProps = {},
+    slots = {},
+    ...other
+  } = props;
+  const { getLabel } = useModuleDictionary();
+  const { activeFilters } = useFilters();
+  const [anchorEl, setAnchorEl] = useState(null);
+  const resolvedAnchorEl = externalOpen ?? anchorEl;
+  const open = typeof externalOpen !== "undefined" ? Boolean(externalOpen) : Boolean(anchorEl);
+  const ownerState = useMemo(
+    () => ({
+      selected: open
+    }),
+    [open]
+  );
+  useEffect(() => {
+    if (!open) {
+      setAnchorEl(null);
+    }
+  }, [open]);
+  useEffect(() => {
+    if (onOpen) {
+      onOpen(open);
+    }
+  }, [open, onOpen]);
+  const handleOpenClose = useCallback(() => {
+    setAnchorEl(null);
+    if (onOpen) {
+      onOpen(false);
+    }
+  }, [onOpen]);
+  const handleClick = useCallback(
+    (e, menuAction) => {
+      e.stopPropagation();
+      setAnchorEl(null);
+      if (onOpen) {
+        onOpen(false);
+      }
+      menuAction.onClick && menuAction.onClick(e);
+    },
+    [onOpen]
+  );
+  const renderMenuContent = useCallback(() => {
+    let processedActions = [];
+    let finalActions = [];
+    if (menuActions) {
+      if (typeof menuActions === "function") {
+        processedActions = menuActions(objItem);
+      } else {
+        processedActions = menuActions;
+      }
+    }
+    if (Array.isArray(processedActions)) {
+      finalActions = processedActions;
+    }
+    if (finalActions.length === 0) {
+      return /* @__PURE__ */ jsx(
+        MenuItem,
+        {
+          disabled: true,
+          role: "menu-no-actions",
+          label: getLabel(DICTIONARY.NO_ACTIONS_LABEL)
+        }
+      );
+    }
+    return /* @__PURE__ */ jsx(MenuListStyled, { ownerState: {}, children: finalActions.map((menuAction, index) => {
+      const key = actionKey ?? index;
+      switch (menuAction.type ?? "menuItem") {
+        case "divider":
+          return /* @__PURE__ */ jsx(
+            MenuDivider,
+            {
+              variant: "solid",
+              size
+            },
+            `divider-${key}`
+          );
+        case "customNode":
+          return menuAction.customNode;
+        case "menuItem":
+          return /* @__PURE__ */ jsx(
+            MenuItem,
+            {
+              size,
+              ...menuAction,
+              label: menuAction.label ?? getLabel(DICTIONARY.NO_ACTIONS_LABEL),
+              onClick: menuAction.onClick ? (e) => handleClick(e, menuAction) : void 0,
+              "aria-label": menuAction.type === "menuItem" && menuAction.dataTestId ? menuAction.dataTestId : "header-render-click-menu-item"
+            },
+            `${DATAGRID_HEADER_RENDER_CLICK_KEY}${menuAction.label ?? key}`
+          );
+        default:
+          return null;
+      }
+    }) });
+  }, [menuActions, size, objItem, getLabel, actionKey, handleClick]);
+  return /* @__PURE__ */ jsx(HeaderRenderClickStyled, { className, ownerState: { ownerState }, children: open && /* @__PURE__ */ jsx(
+    Popover,
+    {
+      id: "Popover",
+      open,
+      anchorEl: resolvedAnchorEl,
+      onClose: handleOpenClose,
+      arrowType,
+      ...other,
+      slots: { ...slots },
+      slotProps: {
+        paper: {
+          ...paperProps,
+          sx: {
+            mt: !activeFilters ? 0.3 : 6.5,
+            ...paperProps?.sx
+          }
+        }
+      },
+      disableAutoFocus: true,
+      disableEnforceFocus: true,
+      anchorOrigin: { vertical: "bottom", horizontal: "left" },
+      transformOrigin: { vertical: "top", horizontal: "left" },
+      children: renderMenuContent()
+    }
+  ) });
+}
+export {
+  HeaderRenderClick as H
+};

package/components/DataGrid/subcomponents/Table/subcomponents/HeaderRenderClick/index.d.ts

@@ -0,0 +1 @@
+export * from './HeaderRenderClick';

package/components/DataGrid/subcomponents/Table/subcomponents/HeaderRenderClick/index.js

@@ -0,0 +1 @@
+

package/components/DataGrid/subcomponents/Table/subcomponents/HeaderRenderClick/types.d.ts

@@ -0,0 +1,131 @@
+import { ReactElement, ReactNode } from 'react';
+import { Sizes, ComponentPalletColor } from '@m4l/styles';
+import { PopoverProps } from '../../../../../mui_extended/Popover/types';
+import { MenuItemProps } from '../../../../../mui_extended/MenuItem/types';
+import { ComponentNameToClassKey, PaperProps, SxProps } from '@mui/material';
+import { Theme } from '@mui/material/styles';
+import { OverridesStyleRules } from '@mui/material/styles/overrides';
+export type MenuTypes = 'menuItem' | 'divider' | 'loader' | 'customNode';
+interface BaseMenuAction {
+    type?: MenuTypes;
+}
+export interface MenuItemAction extends BaseMenuAction, Pick<MenuItemProps, 'startIcon' | 'endIcon' | 'label' | 'selected' | 'color' | 'disabled' | 'checkable' | 'checked'> {
+    type?: 'menuItem';
+    onClick?: (arg?: any) => void;
+    customNode?: never;
+    error?: boolean;
+    dataTestId?: string;
+}
+interface DividerAction extends BaseMenuAction {
+    type: 'divider';
+    label?: never;
+    onClick?: never;
+    customNode?: never;
+    error?: never;
+}
+interface CustomNodeAction extends BaseMenuAction {
+    type: 'customNode';
+    customNode: ReactNode;
+    label?: never;
+    onClick?: never;
+    error?: never;
+}
+/**
+ * Define una acción del menú, con propiedades heredadas de `MenuItemProps`.
+ * [onClick] - Función opcional a ejecutar al hacer clic en la acción del menú.
+ * [error] - Indicador de error en la acción del menú.
+ */
+export type MenuAction = MenuItemAction | DividerAction | CustomNodeAction;
+export interface HeaderRenderClickProps extends Omit<PopoverProps, 'open' | 'anchorEl'> {
+    /**
+     * Tamaño opcional del menú (pequeño o mediano).
+     */
+    size?: Extract<Sizes, 'small' | 'medium'>;
+    /**
+     * Objeto personalizado a pasar al componente.
+     */
+    objItem?: any;
+    /**
+     * Acciones del menú, puede ser un array o una función que genere acciones.
+     */
+    menuActions: MenuAction[] | ((row: any) => MenuAction[]);
+    /**
+     * Texto del tooltip opcional.
+     */
+    toolTip?: string;
+    /**
+     * Elemento opcional que se renderiza al final de la lista del menú.
+     */
+    endListElement?: ReactElement;
+    /**
+     * Estilos personalizados para las acciones del menú.
+     */
+    menuActionSx?: SxProps<Theme> | Partial<OverridesStyleRules<string, ComponentNameToClassKey, Theme>>;
+    /**
+     * Contenido del `Badge` si está presente.
+     */
+    badgeContent?: string;
+    /**
+     * Elemento externo para abrir el menú.
+     */
+    externalOpen?: HTMLDivElement | null;
+    /**
+     * Función externa para cerrar el menú.
+     */
+    externalClose?: (element: null | HTMLDivElement) => void;
+    /**
+     * Tipo de flecha del menú.
+     */
+    disabled?: boolean;
+    /**
+     * The components used for each slot inside.
+     * @default {}
+     */
+    slots?: {
+        root?: React.ElementType;
+        paper?: React.ElementType;
+    };
+    /**
+     * Propiedad objeto que se usa para poder editar las propiedades del paper o agregar estilos desde su sx
+     */
+    paperProps?: PaperProps;
+    /**
+     * Propiedad checked
+     */
+    checked?: boolean;
+    /**
+     * Propiedad checkable para el menú
+     */
+    checkable?: boolean;
+    /**
+     * Propiedad para agregar un node al menú
+     */
+    customNode?: ReactNode;
+    /**
+     * Define el color del componente.
+     */
+    color?: Extract<ComponentPalletColor, 'primary'>;
+    /**
+     * Define la clave de la acción.
+     */
+    actionKey?: string;
+    /**
+     * agrega un header al menú
+     */
+    header?: ReactNode;
+    /**
+     * agrega un footer al menú
+     */
+    footer?: ReactNode;
+    /**
+     * Define el tipo de flecha del menú.
+     */
+    onOpen?: (param: boolean) => void;
+}
+/**
+ * Estado del propietario para `HeaderRenderClick`.
+ */
+export interface HeaderRenderClickOwnerState {
+    selected: boolean;
+}
+export {};

package/components/DataGrid/subcomponents/Table/subcomponents/SelectColumn.js

@@ -1,7 +1,7 @@
 import { jsx } from "react/jsx-runtime";
 import { useRowSelection, SelectCellFormatter } from "react-data-grid";
 import { u as useDataGrid } from "../../../hooks/useDataGrid.js";
-import { c as DATAGRID_SELECT_COLUMN_KEY } from "../../../constants.js";
+import { d as DATAGRID_SELECT_COLUMN_KEY } from "../../../constants.js";
 const filterColumnClassName = "filter-cell";
 const filterHeight = 35;
 function SelectGroupFormatter(props) {

package/components/DataGrid/subcomponents/editors/TextEditor/index.js

@@ -1,5 +1,5 @@
 import { jsx } from "react/jsx-runtime";
-import { o as InputTextEditorStyled } from "../../../slots/DataGridSlot.js";
+import { r as InputTextEditorStyled } from "../../../slots/DataGridSlot.js";
 function autoFocusAndSelect(input) {
   input?.focus();
   input?.select();

package/components/DataGrid/tests/HeaderRenderClick.test.d.ts

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

package/components/DataGrid/tests/useHeaderMenuActions.test.d.ts

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

package/components/DataGrid/types.d.ts

@@ -13,6 +13,7 @@ export type GridFormatterPropss<T, SR> = FormatterProps<T, SR>;
 export type { ColumnUncertaintyFormatter, ColumnPointsFormatter, ColumnNestedValueFormatter, } from './formatters';
 export declare type ColumnType = 'string' | 'date' | 'number' | 'boolean' | 'custom';
 export declare type ColumnAlign = 'left' | 'center' | 'right';
+export declare type FieldPresence = 'initialized' | 'fixed' | 'optional';
 export declare interface GridRow {
     id: number;
 }
@@ -61,10 +62,62 @@ export interface ChangeUserColumn<T extends KeyUserColumns = KeyUserColumns> {
     userConfig: IGridConfig[T];
 }
 export type OnChangeUserColumns = (props: ChangeUserColumn) => void;
+export type SortApplied = {
+    columnKey: string;
+    removable: boolean;
+    direction: Lowercase<SortDirection>;
+};
+export type SortAction = 'add' | 'remove';
+export type SortChangeAdd = {
+    action: 'add';
+    columnKey: string;
+    direction: Lowercase<SortDirection>;
+};
+export type SortChangeRemove = {
+    action: 'remove';
+    columnKey: string;
+};
+export type SortChangeEvent = SortChangeAdd | SortChangeRemove;
+export interface SortSettings {
+    sortsColumns: string[];
+    sortsApplied: SortApplied[];
+    onChange: (event: SortChangeEvent) => void;
+}
+/**---------------------------------------------------------------- */
+export type FilterChangeAdd = {
+    action: 'add';
+    columnKey: string;
+};
+export type FilterChangeOpenPopover = {
+    action: 'openPopoverMenuFields';
+};
+export type FilterChangeEvent = FilterChangeAdd | FilterChangeOpenPopover;
+interface FilterColumn {
+    name: string;
+    multiple: boolean;
+}
+export type FilterApplied = {
+    columnKey: string;
+    isValid: boolean;
+};
+export interface FilterSettings {
+    filterColumns: FilterColumn[];
+    filtersApplied: FilterApplied[];
+    onChange: (event: FilterChangeEvent) => void;
+}
+/**--------------------Termina tipado de filtros-------------------------------------------- */
 export interface GridProps<TRow, TSummaryRow, TKey extends RowKey = RowKey> {
     id: string;
     withActions?: boolean;
     columns: readonly Column<TRow, TSummaryRow>[];
+    /**
+     * Propiedad que define la configuración de los sorts aplicados.
+     */
+    externalSortSettings?: SortSettings;
+    /**
+     * Propiedad que define la configuración de los filtros aplicados.
+     */
+    externalFilterSettings?: FilterSettings;
     rows: TRow[];
     initialRowHeightVariant?: RowHeightVariants;
     rowHeaderHeights?: RowHeights;