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

package/components/DataGrid/formatters/ColumnSetCheckFormatter/formatter.d.ts

@@ -1,4 +1,4 @@
-import { FormatterProps } from 'react-data-grid';
+import { RenderCellProps } from 'react-data-grid';
 import { ColumnSetCheckFormatterProps } from './types';
 import { RowKey } from '../../types';
 /**
@@ -6,4 +6,4 @@ import { RowKey } from '../../types';
  * acualizando un Set/Setter por medio de un hook generico el cual es invocado con el argumento field para ,
  * sin la necesidad de entrar en edición como lo hace un editor
  */
-export declare function ColumnSetCheckFormatter<Row, TKey extends RowKey = RowKey>(parameters: ColumnSetCheckFormatterProps<Row, TKey>): (props: FormatterProps<Row>) => import("react/jsx-runtime").JSX.Element;
+export declare function ColumnSetCheckFormatter<Row, TKey extends RowKey = RowKey>(parameters: ColumnSetCheckFormatterProps<Row, TKey>): (props: RenderCellProps<Row>) => import("react/jsx-runtime").JSX.Element;

package/components/DataGrid/formatters/ColumnSetCheckFormatter/formatter.js

@@ -23,7 +23,7 @@ function ColumnSetCheckFormatter(parameters) {
       {
         value: checkedRows.has(rowKeyGetter(row)) || false,
         disabled,
-        isCellSelected: props.isCellSelected,
+        tabIndex: props.tabIndex,
         onChange,
         "aria-label": "Select"
       }

package/components/DataGrid/formatters/ColumnSetCheckFormatter/useColumnSetCheck.d.ts

@@ -5,7 +5,7 @@ import { ColumnSetCheckFormatterProps } from './types';
  * Returns formatter, customFilter and customSort.
  */
 export declare const useColumnSetCheck: <TRow, TKey extends RowKey = RowKey>(props: ColumnSetCheckFormatterProps<TRow, TKey>) => {
-    formatter: (props: import('react-data-grid').FormatterProps<TRow, unknown>) => import("react/jsx-runtime").JSX.Element;
+    formatter: (props: import('react-data-grid').RenderCellProps<TRow, unknown>) => import("react/jsx-runtime").JSX.Element;
     customFilter: (row: TRow, value: TKey) => boolean;
     customSort: (a: TRow, b: TRow) => 0 | 1 | -1;
 };

package/components/DataGrid/formatters/ColumnUncertaintyFormatter/formatter.d.ts

@@ -1,5 +1,6 @@
 import { ColumnUncertaintyFormatterProps } from './types';
+import { RenderCellProps } from 'react-data-grid';
 /**
  * Formatter for column uncertainty in DataGrid
  */
-export declare function ColumnUncertaintyFormatter<TRow>(props: ColumnUncertaintyFormatterProps<TRow>): (obProps: any) => import("react/jsx-runtime").JSX.Element;
+export declare function ColumnUncertaintyFormatter<TRow>(props: ColumnUncertaintyFormatterProps<TRow>): (formatterProps: RenderCellProps<TRow>) => import("react/jsx-runtime").JSX.Element;

package/components/DataGrid/formatters/ColumnUncertaintyFormatter/formatter.js

@@ -1,14 +1,23 @@
 import { jsx } from "react/jsx-runtime";
 import React from "react";
-import { g as getFieldValueWithRow } from "../../../../helpers/getFieldValueWithRow.js";
 import { U as UncertaintyFormatter } from "../../../formatters/UncertaintyFormatter/UncertaintyFormatter.js";
 function ColumnUncertaintyFormatter(props) {
   const { Component = React.Fragment } = props;
-  const fieldValue = getFieldValueWithRow(props.fieldValue);
-  const fieldSymbol = getFieldValueWithRow(props.fieldSymbol);
-  const fieldUnit = getFieldValueWithRow(props.fieldUnit);
-  return (obProps) => {
-    return /* @__PURE__ */ jsx(UncertaintyFormatter, { obProps, ...props, fieldValue, fieldSymbol, fieldUnit, Component });
+  const fieldValue = props.fieldValue;
+  const fieldSymbol = props.fieldSymbol;
+  const fieldUnit = props.fieldUnit;
+  return (formatterProps) => {
+    return /* @__PURE__ */ jsx(
+      UncertaintyFormatter,
+      {
+        obProps: formatterProps.row,
+        ...props,
+        fieldValue,
+        fieldSymbol,
+        fieldUnit,
+        Component
+      }
+    );
   };
 }
 export {

package/components/DataGrid/formatters/ColumnUncertaintyFormatter/useColumnUncertainty.d.ts

@@ -4,7 +4,7 @@ import { ColumnUncertaintyFormatterProps } from './types';
  * the filter and the customSort of the uncertainty column.
  */
 export declare const useColumnUncertanity: <TRow>(props: ColumnUncertaintyFormatterProps<TRow>) => {
-    formatter: (obProps: any) => import("react/jsx-runtime").JSX.Element;
+    formatter: (formatterProps: import('react-data-grid').RenderCellProps<TRow, unknown>) => import("react/jsx-runtime").JSX.Element;
     customFilter: (row: TRow, value: string) => boolean;
     customSort: (a: TRow, b: TRow) => 0 | 1 | -1;
 };

package/components/DataGrid/index.d.ts

@@ -1,6 +1,6 @@
 export { DataGrid } from './DataGrid';
 export * from './formatters';
-export type { Column, EditorProps, FormatterProps } from 'react-data-grid';
+export type { Column, RenderEditCellProps, RenderCellProps } from 'react-data-grid';
 export type { RowKey, ChangeUserColumn } from './types';
 export { getDataGridComponentsDictionary } from './dictionary';
 export { TextEditor, NumberEditor } from './subcomponents/editors/TextEditor';

package/components/DataGrid/slots/DataGridEnum.d.ts

@@ -41,3 +41,6 @@ export declare enum ColumnsConfigSlots {
 export declare enum ControlNavigateSlots {
     controlNavigate = "controlNavigate"
 }
+export declare enum ColumnIconFormatterSlots {
+    columnIconFormatter = "columnIconFormatter"
+}

package/components/DataGrid/slots/DataGridEnum.js

@@ -48,6 +48,10 @@ var ControlNavigateSlots = /* @__PURE__ */ ((ControlNavigateSlots2) => {
   ControlNavigateSlots2["controlNavigate"] = "controlNavigate";
   return ControlNavigateSlots2;
 })(ControlNavigateSlots || {});
+var ColumnIconFormatterSlots = /* @__PURE__ */ ((ColumnIconFormatterSlots2) => {
+  ColumnIconFormatterSlots2["columnIconFormatter"] = "columnIconFormatter";
+  return ColumnIconFormatterSlots2;
+})(ColumnIconFormatterSlots || {});
 export {
   ActionsSlots as A,
   ControlNavigateSlots as C,
@@ -55,5 +59,6 @@ export {
   RowsCountSlots as R,
   TextEditorSlots as T,
   ColumnsConfigSlots as a,
-  TableSlots as b
+  TableSlots as b,
+  ColumnIconFormatterSlots as c
 };

package/components/DataGrid/slots/DataGridSlot.d.ts

@@ -62,3 +62,9 @@ export declare const InputTextEditorStyled: import('@emotion/styled').StyledComp
  * ****************
  */
 export declare const ControlNavigateStyled: import('@emotion/styled').StyledComponent<any, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('react').ClassAttributes<HTMLDivElement> | keyof import('react').HTMLAttributes<HTMLDivElement>>, {}>;
+/**
+ * ****************
+ * Slots ColumnIconFormatter
+ * ****************
+ */
+export declare const ColumnIconFormatterStyled: import('@emotion/styled').StyledComponent<any, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('react').ClassAttributes<HTMLDivElement> | keyof import('react').HTMLAttributes<HTMLDivElement>>, {}>;

package/components/DataGrid/slots/DataGridSlot.js

@@ -1,7 +1,7 @@
 import { styled } from "@mui/material/styles";
 import { MenuList, InputBase } from "@mui/material";
 import { D as DATAGRID_PREFIX_NAME } from "../constants.js";
-import { D as DataGridSlots, T as TextEditorSlots, A as ActionsSlots, b as TableSlots, C as ControlNavigateSlots, R as RowsCountSlots, a as ColumnsConfigSlots } from "./DataGridEnum.js";
+import { D as DataGridSlots, T as TextEditorSlots, A as ActionsSlots, b as TableSlots, C as ControlNavigateSlots, c as ColumnIconFormatterSlots, R as RowsCountSlots, a as ColumnsConfigSlots } from "./DataGridEnum.js";
 import { d as dataGridStyles } from "../Datagrid.styles.js";
 import { I as Icon } from "../../Icon/Icon.js";
 const DataGridRootStyled = styled("div", {
@@ -120,6 +120,10 @@ const ControlNavigateStyled = styled("div", {
   name: DATAGRID_PREFIX_NAME,
   slot: ControlNavigateSlots.controlNavigate
 })(dataGridStyles.controlNavigate);
+const ColumnIconFormatterStyled = styled("div", {
+  name: DATAGRID_PREFIX_NAME,
+  slot: ColumnIconFormatterSlots.columnIconFormatter
+})(dataGridStyles.columnIconFormatter);
 export {
   ActionsRootStyled as A,
   ButtonHeaderActionsStyled as B,
@@ -132,22 +136,23 @@ export {
   RowsCountRootStyled as R,
   TableWrapperDataGridStyled as T,
   WrapperSkeletonStyled as W,
-  ControlNavigateStyled as a,
-  ActionsConfigContainerStyled as b,
-  ContainerLeftActionsStyled as c,
-  ContainerRightActionsStyled as d,
-  RowsCountLabelStyled as e,
-  RowsCountValueStyled as f,
-  ColumnsConfigWrapperStyled as g,
-  ColumnsConfigDataGridStyled as h,
-  ColumnsConfigSelColumnsStyled as i,
-  ColumnsConfigActiosStyled as j,
-  ContentModalSettingStyled as k,
-  TableContainerStyled as l,
-  NameColumnStyled as m,
-  DraggableHeaderRootStyled as n,
-  DraggableWrapperInputBaseStyled as o,
-  IconSearchStyled as p,
-  HeaderRenderClickStyled as q,
-  InputTextEditorStyled as r
+  ColumnIconFormatterStyled as a,
+  ControlNavigateStyled as b,
+  ActionsConfigContainerStyled as c,
+  ContainerLeftActionsStyled as d,
+  ContainerRightActionsStyled as e,
+  RowsCountLabelStyled as f,
+  RowsCountValueStyled as g,
+  ColumnsConfigWrapperStyled as h,
+  ColumnsConfigDataGridStyled as i,
+  ColumnsConfigSelColumnsStyled as j,
+  ColumnsConfigActiosStyled as k,
+  ContentModalSettingStyled as l,
+  TableContainerStyled as m,
+  NameColumnStyled as n,
+  DraggableHeaderRootStyled as o,
+  DraggableWrapperInputBaseStyled as p,
+  IconSearchStyled as q,
+  HeaderRenderClickStyled as r,
+  InputTextEditorStyled as s
 };

package/components/DataGrid/subcomponents/ControlNavigate/ControlNavigate.js

@@ -1,6 +1,6 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import { useIsMobile } from "@m4l/graphics";
-import { a as ControlNavigateStyled } from "../../slots/DataGridSlot.js";
+import { b as ControlNavigateStyled } from "../../slots/DataGridSlot.js";
 import { R as RowsCount } from "../HeaderActions/subcomponents/RowsCount/index.js";
 import { u as useComponentSize } from "../../../../hooks/useComponentSize/useComponentSize.js";
 import { P as Pager } from "../../../Pager/Pager.js";

package/components/DataGrid/subcomponents/HeaderActions/index.js

@@ -5,7 +5,7 @@ import { D as Density } from "./subcomponents/Density/index.js";
 import { u as useDataGrid } from "../../hooks/useDataGrid.js";
 import { useIsMobile } from "@m4l/graphics";
 import { M as MobileMenuActions } from "./subcomponents/MobileMenuActions/index.js";
-import { A as ActionsRootStyled, b as ActionsConfigContainerStyled, c as ContainerLeftActionsStyled, d as ContainerRightActionsStyled } from "../../slots/DataGridSlot.js";
+import { A as ActionsRootStyled, c as ActionsConfigContainerStyled, d as ContainerLeftActionsStyled, e as ContainerRightActionsStyled } from "../../slots/DataGridSlot.js";
 import { u as useComponentSize } from "../../../../hooks/useComponentSize/useComponentSize.js";
 function HeaderActions(props) {
   const {

package/components/DataGrid/subcomponents/HeaderActions/subcomponents/Density/index.js

@@ -42,7 +42,8 @@ function Density() {
     currentRowHeightVariant,
     setRowHeightVariant,
     host_static_assets,
-    environment_assets
+    environment_assets,
+    getLabel
   ]);
   const theme = useTheme();
   const currenViewIcon = useMemo(() => {

package/components/DataGrid/subcomponents/HeaderActions/subcomponents/RowsCount/index.js

@@ -2,7 +2,7 @@ import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import { useModuleDictionary, useModuleSkeleton } from "@m4l/core";
 import { Skeleton } from "@mui/material";
 import { u as useDataGrid } from "../../../../hooks/useDataGrid.js";
-import { R as RowsCountRootStyled, e as RowsCountLabelStyled, f as RowsCountValueStyled } from "../../../../slots/DataGridSlot.js";
+import { R as RowsCountRootStyled, f as RowsCountLabelStyled, g as RowsCountValueStyled } from "../../../../slots/DataGridSlot.js";
 function RowsCount() {
   const { rowsCount, size } = useDataGrid();
   const { getLabel } = useModuleDictionary();

package/components/DataGrid/subcomponents/HeaderActions/subcomponents/Settings/subcomponents/ColumnsConfig/index.js

@@ -4,7 +4,7 @@ import { useModuleDictionary, useEnvironment } from "@m4l/core";
 import DataGrid from "react-data-grid";
 import { I as IconButton } from "../../../../../../../mui_extended/IconButton/IconButton.js";
 import { p as pathIcons } from "../../../../../../icons.js";
-import { g as ColumnsConfigWrapperStyled, h as ColumnsConfigDataGridStyled, i as ColumnsConfigSelColumnsStyled, T as TableWrapperDataGridStyled, j as ColumnsConfigActiosStyled } from "../../../../../../slots/DataGridSlot.js";
+import { h as ColumnsConfigWrapperStyled, i as ColumnsConfigDataGridStyled, j as ColumnsConfigSelColumnsStyled, T as TableWrapperDataGridStyled, k as ColumnsConfigActiosStyled } from "../../../../../../slots/DataGridSlot.js";
 import { D as DICTIONARY } from "../../../../../../dictionary.js";
 import { C as ColumnInteractiveCheckFormatter } from "../../../../../../formatters/ColumnInteractiveCheckFormatter/formatter.js";
 function getRowsFromColumnsConfig(columnsConfig, columns) {
@@ -62,7 +62,7 @@ const ColumnsConfig = forwardRef((props, ref) => {
         name: getLabel(DICTIONARY.SETTINGS_COLUMN_VISIBLE),
         width: 80,
         type: "boolean",
-        formatter: ColumnInteractiveCheckFormatter,
+        renderCell: ColumnInteractiveCheckFormatter,
         ...getAlignClass("center")
       },
       {
@@ -70,7 +70,7 @@ const ColumnsConfig = forwardRef((props, ref) => {
         name: getLabel(DICTIONARY.SETTINGS_COLUMNS_FROZEN),
         width: 80,
         type: "boolean",
-        formatter: ColumnInteractiveCheckFormatter,
+        renderCell: ColumnInteractiveCheckFormatter,
         ...getAlignClass("center")
       }
     ],
@@ -176,7 +176,7 @@ const ColumnsConfig = forwardRef((props, ref) => {
   const onInternalRowsChange = (newRows) => {
     setRows(newRows);
   };
-  const onRowClick = (row) => {
+  const onCellClick = ({ row }) => {
     if (selRows.has(row.key)) {
       return;
     }
@@ -196,9 +196,8 @@ const ColumnsConfig = forwardRef((props, ref) => {
           onRowsChange: onInternalRowsChange,
           selectedRows: selRows,
           onSelectedRowsChange: onInternalSelectedRowsChange,
-          onRowClick,
+          onCellClick,
           rowKeyGetter: (row) => row.key,
-          cellNavigationMode: "CHANGE_ROW",
           defaultColumnOptions: { resizable: true, sortable: true }
         }
       ) })

package/components/DataGrid/subcomponents/HeaderActions/subcomponents/hooks/useModalSettings/index.js

@@ -5,7 +5,7 @@ import { useRef, useCallback } from "react";
 import { u as useDataGrid } from "../../../../../hooks/useDataGrid.js";
 import { u as useModal } from "../../../../../../../hooks/useModal/index.js";
 import { C as ColumnsConfig } from "../../Settings/subcomponents/ColumnsConfig/index.js";
-import { k as ContentModalSettingStyled, D as DataGridRootStyled } from "../../../../../slots/DataGridSlot.js";
+import { l as ContentModalSettingStyled, D as DataGridRootStyled } from "../../../../../slots/DataGridSlot.js";
 import { p as pathIcons } from "../../../../../icons.js";
 import { A as ActionsContainer } from "../../../../../../CommonActions/components/ActionsContainer/ActionsContainer.js";
 import { W as WindowBase } from "../../../../../../WindowBase/WindowBase.js";

package/components/DataGrid/subcomponents/Table/hooks/getDragHeaderRenderer.d.ts

@@ -1,9 +1,9 @@
 import { FunctionComponent } from 'react';
-import { HeaderRendererProps } from 'react-data-grid';
+import { RenderHeaderCellProps } from 'react-data-grid';
 /**
  * Función encargada de retornar el componente de renderizado de cabecera con la capacidad de arrastrar columnas
  * @param handleColumnsReorder - Función que se ejecuta al reordenar columnas
  */
 export declare const getDragHeaderRenderer: <TRow, TSummaryRow>(handleColumnsReorder: (sourceKey: string, targetKey: string) => void, options?: {
     openPopover?: (anchorEl: HTMLElement, columnKey: string) => void;
-}) => FunctionComponent<HeaderRendererProps<TRow, TSummaryRow>>;
+}) => FunctionComponent<RenderHeaderCellProps<TRow, TSummaryRow>>;

package/components/DataGrid/subcomponents/Table/hooks/useHeaderMenuActions.d.ts

@@ -1,6 +1,6 @@
-import { Column } from 'react-data-grid';
+import { Column, SortColumn } from 'react-data-grid';
 import { MenuAction } from '../subcomponents/HeaderRenderClick/types';
 /**
  * Función que retorna las acciones del menu del header de la columna
  */
-export declare function useHeaderMenuActions<Trow, TSummaryRow>(columnKey: string | null, finalColumns: readonly Column<Trow, TSummaryRow>[], defaultSortable: boolean): MenuAction[];
+export declare function useHeaderMenuActions<Trow, TSummaryRow>(columnKey: string | null, finalColumns: readonly Column<Trow, TSummaryRow>[], defaultSortable: boolean, handleSortFromPopover?: (newSortColumns: SortColumn[]) => void): MenuAction[];

package/components/DataGrid/subcomponents/Table/hooks/useHeaderMenuActions.js

@@ -3,7 +3,7 @@ import { u as useDataGrid } from "../../../hooks/useDataGrid.js";
 import { useEnvironment, useModuleDictionary } from "@m4l/core";
 import { D as DICTIONARY } from "../../../dictionary.js";
 import { p as pathIcons } from "../../../icons.js";
-function useHeaderMenuActions(columnKey, finalColumns, defaultSortable) {
+function useHeaderMenuActions(columnKey, finalColumns, defaultSortable, handleSortFromPopover) {
   const {
     columnsConfig,
     onChangeColumnsConfig,
@@ -14,6 +14,13 @@ function useHeaderMenuActions(columnKey, finalColumns, defaultSortable) {
   } = useDataGrid();
   const { host_static_assets, environment_assets } = useEnvironment();
   const { getLabel } = useModuleDictionary();
+  const executeSortChange = (newSortColumns) => {
+    if (handleSortFromPopover) {
+      handleSortFromPopover(newSortColumns);
+    } else {
+      setSortColumns(newSortColumns);
+    }
+  };
   const column = useMemo(() => {
     return finalColumns.find((c) => c.key === columnKey);
   }, [columnKey, finalColumns]);
@@ -66,8 +73,9 @@ function useHeaderMenuActions(columnKey, finalColumns, defaultSortable) {
     if (!columnKey) {
       return;
     }
-    setSortColumns((prev) => prev.filter((s) => s.columnKey !== columnKey));
-  }, [columnKey, setSortColumns]);
+    const newSortColumns = sortColumns.filter((s) => s.columnKey !== columnKey);
+    executeSortChange(newSortColumns);
+  }, [columnKey, sortColumns, executeSortChange]);
   const hasAnySortApplied = useMemo(() => {
     return Boolean(currentSort);
   }, [currentSort]);
@@ -97,7 +105,8 @@ function useHeaderMenuActions(columnKey, finalColumns, defaultSortable) {
       externalSortSettings?.onChange({
         action: "add",
         columnKey,
-        direction
+        direction,
+        label: column.name
       });
     },
     [columnKey, column, externalSortSettings]
@@ -152,7 +161,7 @@ function useHeaderMenuActions(columnKey, finalColumns, defaultSortable) {
           if (externalSortSettings) {
             addExternalSort("asc");
           } else {
-            setSortColumns([
+            executeSortChange([
               {
                 columnKey,
                 direction: "ASC"
@@ -174,7 +183,7 @@ function useHeaderMenuActions(columnKey, finalColumns, defaultSortable) {
           if (externalSortSettings) {
             addExternalSort("desc");
           } else {
-            setSortColumns([
+            executeSortChange([
               {
                 columnKey,
                 direction: "DESC"
@@ -254,7 +263,8 @@ function useHeaderMenuActions(columnKey, finalColumns, defaultSortable) {
     host_static_assets,
     environment_assets,
     getLabel,
-    isAddFilterDisabled
+    isAddFilterDisabled,
+    executeSortChange
   ]);
 }
 export {

package/components/DataGrid/subcomponents/Table/hooks/useSortColumnsRows.js

@@ -17,7 +17,6 @@ function getComparator(columns, sortColumn) {
     return column.customSort;
   }
   switch (typeOrder) {
-    //Si el tipo de dato de la columna es un numerico, retorna una función de ordenamiento numérica
     case "number":
       return (a, b) => {
         try {
@@ -26,7 +25,6 @@ function getComparator(columns, sortColumn) {
           return -1;
         }
       };
-    //Por defecto retorna una función de ordenamiento de string
     default:
       return (a, b) => {
         try {
@@ -139,16 +137,20 @@ const useSortColumnsRows = (sourceColumns, sourceRows, popoverHandlers) => {
         return newColumn;
       }
       if (isSkeleton) {
-        newColumn.headerRenderer = SkeletonFormatter;
-        newColumn.formatter = SkeletonFormatter;
+        newColumn.renderHeaderCell = SkeletonFormatter;
+        newColumn.renderCell = SkeletonFormatter;
+      } else {
+        if (newColumn.formatter && !newColumn.renderCell) {
+          newColumn.renderCell = newColumn.formatter;
+        }
       }
-      if (newColumn.headerRenderer) {
-        newColumn.withinHeaderRenderer = newColumn.headerRenderer;
+      if (newColumn.renderHeaderCell) {
+        newColumn.withinHeaderRenderer = newColumn.renderHeaderCell;
       }
       if ((newColumn?.withFilter === void 0 || newColumn.withFilter === true) && activeFilters) {
         newColumn.headerCellClass = `${newColumn.headerCellClass} ${filterColumnClassName}`.trim();
       }
-      newColumn.headerRenderer = DragAndDropHeaderRenderer;
+      newColumn.renderHeaderCell = DragAndDropHeaderRenderer;
       return newColumn;
     });
   }, [

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

@@ -1,5 +1,7 @@
+import { DataGridProps } from 'react-data-grid';
 import { GridProps, RowKey } from '../../types';
 /**
  * Componente que renderiza la tabla con las filas y columnas
+ * Acepta todos los props de DataGrid y prioriza las configuraciones personalizadas
  */
-export declare function Table<TRow, TSummaryRow, TKey extends RowKey = RowKey>(props: GridProps<TRow, TSummaryRow, TKey>): import("react/jsx-runtime").JSX.Element;
+export declare function Table<TRow, TSummaryRow, TKey extends RowKey = RowKey>(props: GridProps<TRow, TSummaryRow, TKey> & Omit<DataGridProps<TRow, TSummaryRow>, keyof GridProps<TRow, TSummaryRow, TKey>>): import("react/jsx-runtime").JSX.Element;

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

@@ -1,6 +1,7 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useMemo, useState, useRef, useEffect } from "react";
 import DataGrid from "react-data-grid";
+import "react-data-grid/lib/styles.css";
 import { DndProvider } from "react-dnd";
 import { HTML5Backend } from "react-dnd-html5-backend";
 import { C as CheckboxFormatter } from "./subcomponents/CheckboxFormatter.js";
@@ -8,7 +9,7 @@ import { a as filterHeight } from "./subcomponents/SelectColumn.js";
 import { u as useSortColumnsRows } from "./hooks/useSortColumnsRows.js";
 import { u as useFilters } from "../../hooks/useFilters.js";
 import { u as useDataGrid } from "../../hooks/useDataGrid.js";
-import { l as TableContainerStyled, T as TableWrapperDataGridStyled } from "../../slots/DataGridSlot.js";
+import { m as TableContainerStyled, T as TableWrapperDataGridStyled } from "../../slots/DataGridSlot.js";
 import { u as useHeaderMenuActions } from "./hooks/useHeaderMenuActions.js";
 import { H as HeaderRenderClick } from "./subcomponents/HeaderRenderClick/HeaderRenderClick.js";
 function Table(props) {
@@ -18,8 +19,19 @@ function Table(props) {
     onRowsChange,
     rowKeyGetter,
     selectedRows,
-    onSelectedRowsChange
+    onSelectedRowsChange,
+    defaultColumnOptions: defaultColumnOptionsProp,
+    ...restProps
   } = props;
+  const renderCheckbox = (formatterProps) => {
+    return /* @__PURE__ */ jsx(
+      CheckboxFormatter,
+      {
+        ...formatterProps,
+        tabIndex: formatterProps.tabIndex
+      }
+    );
+  };
   const { finalColumns, finalRows } = useSortColumnsRows(
     columns,
     rows,
@@ -55,7 +67,18 @@ function Table(props) {
     anchorEl: null,
     columnKey: null
   });
-  const onRowClick = (row) => {
+  const [allowSortChange, setAllowSortChange] = useState(false);
+  const handleSortColumnsChange = (newSortColumns) => {
+    if (allowSortChange) {
+      setSortColumns(newSortColumns);
+      setAllowSortChange(false);
+    }
+  };
+  const handleSortFromPopover = (newSortColumns) => {
+    setAllowSortChange(true);
+    setSortColumns(newSortColumns);
+  };
+  const onCellClick = ({ row }) => {
     if (selectedRows && onSelectedRowsChange) {
       if (selectedRows.entries().next().value) {
         if (selectedRows.entries().next().value?.[1] === rowKeyGetter(row)) {
@@ -90,11 +113,16 @@ function Table(props) {
   const onColumnResize = (idx, width) => {
     onChangeColumnWidth(finalColumns[idx].key, width);
   };
-  const defaultColumnOptions = { resizable: true, sortable: true };
+  const defaultColumnOptions = {
+    resizable: true,
+    sortable: true,
+    ...defaultColumnOptionsProp || {}
+  };
   const menuActions = useHeaderMenuActions(
     popoverState.columnKey,
     finalColumns,
-    defaultColumnOptions.sortable
+    Boolean(defaultColumnOptions.sortable),
+    handleSortFromPopover
   );
   return /* @__PURE__ */ jsx(TableContainerStyled, { id: "WrapperTable", children: /* @__PURE__ */ jsxs(TableWrapperDataGridStyled, { ownerState: { size }, children: [
     /* @__PURE__ */ jsx(DndProvider, { backend: HTML5Backend, context: window, children: /* @__PURE__ */ jsx(
@@ -105,18 +133,20 @@ function Table(props) {
         headerRowHeight: activeFilters ? currentRowHeaderHeight + filterHeight : currentRowHeaderHeight,
         columns: finalColumns,
         sortColumns,
-        onSortColumnsChange: setSortColumns,
+        onSortColumnsChange: handleSortColumnsChange,
         onColumnResize,
         rows: finalRows,
         onRowsChange,
         selectedRows,
         onSelectedRowsChange,
-        onRowClick,
+        onCellClick,
         rowHeight: currentRowHeight,
         rowKeyGetter,
-        cellNavigationMode: "LOOP_OVER_ROW",
-        components: { checkboxFormatter: CheckboxFormatter },
-        defaultColumnOptions
+        renderers: {
+          renderCheckbox
+        },
+        defaultColumnOptions,
+        ...restProps
       }
     ) }),
     popoverState.columnKey && popoverState.anchorEl instanceof HTMLDivElement && /* @__PURE__ */ jsx(

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

@@ -35,7 +35,7 @@ const ActionsColumn = {
   sortable: false,
   frozen: true,
   type: "custom",
-  formatter: ActionsFormatter
+  renderCell: ActionsFormatter
 };
 function getActionLabel() {
   return "";

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

@@ -1,2 +1,2 @@
-import { CheckboxFormatterProps } from 'react-data-grid';
-export declare const CheckboxFormatter: import('react').ForwardRefExoticComponent<CheckboxFormatterProps & import('react').RefAttributes<HTMLInputElement>>;
+import { RenderCheckboxProps } from 'react-data-grid';
+export declare const CheckboxFormatter: import('react').ForwardRefExoticComponent<RenderCheckboxProps & import('react').RefAttributes<HTMLInputElement>>;

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

@@ -1,5 +1,5 @@
-import { HeaderRendererProps } from 'react-data-grid';
-interface DraggableHeaderRendererProps<TRow> extends HeaderRendererProps<TRow> {
+import { RenderHeaderCellProps } from 'react-data-grid';
+interface DraggableHeaderRendererProps<TRow> extends RenderHeaderCellProps<TRow> {
     onColumnsReorder: (sourceKey: string, targetKey: string) => void;
     openPopover?: (anchorEl: HTMLElement, columnKey: string) => void;
 }

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

@@ -2,10 +2,10 @@ import { jsxs, jsx } from "react/jsx-runtime";
 import { useState, useEffect } from "react";
 import { useModuleDictionary, useEnvironment } from "@m4l/core";
 import { useDrag, useDrop } from "react-dnd";
-import { HeaderRenderer } from "react-data-grid";
+import { renderHeaderCell } from "react-data-grid";
 import { u as useFocusRef } from "../hooks/useFocusRef.js";
 import { u as useFilters } from "../../../hooks/useFilters.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 { N as NameColumnIconStyled, n as NameColumnStyled, I as IconColumnStyled, o as DraggableHeaderRootStyled, B as ButtonHeaderActionsStyled, p as DraggableWrapperInputBaseStyled, q 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";
@@ -13,12 +13,13 @@ function DraggableHeaderRenderer(props) {
   const {
     onColumnsReorder,
     column,
-    isCellSelected,
+    tabIndex: headerTabIndex,
     openPopover,
-    onSort,
     ...others
   } = props;
-  const { ref, tabIndex } = useFocusRef(isCellSelected);
+  const { ref, tabIndex } = useFocusRef(
+    headerTabIndex !== void 0 && headerTabIndex >= 0
+  );
   const { getLabel } = useModuleDictionary();
   const { size, classes, externalSortSettings, externalFilterSettings } = useDataGrid();
   const { host_static_assets, environment_assets } = useEnvironment();
@@ -103,7 +104,19 @@ function DraggableHeaderRenderer(props) {
   if (!newColumn.withinHeaderRenderer) {
     const columnIcons = getColumnIcons();
     if (columnIcons) {
-      newColumn.name = /* @__PURE__ */ jsxs(NameColumnIconStyled, { children: [
+      const getJustifyContent = () => {
+        switch (column.align) {
+          case "left":
+            return "flex-start";
+          case "center":
+            return "center";
+          case "right":
+            return "flex-end";
+          default:
+            return "flex-start";
+        }
+      };
+      newColumn.name = /* @__PURE__ */ jsxs(NameColumnIconStyled, { style: { justifyContent: getJustifyContent() }, children: [
         /* @__PURE__ */ jsx(NameColumnStyled, { children: newColumn.name }),
         /* @__PURE__ */ jsx(IconColumnStyled, { children: columnIcons })
       ] });
@@ -121,6 +134,9 @@ function DraggableHeaderRenderer(props) {
         opacity: isDragging ? 0.5 : 1,
         backgroundColor: isOver ? "#ececec" : void 0
       },
+      onClick: (e) => {
+        e.stopPropagation();
+      },
       children: [
         /* @__PURE__ */ jsx(
           ButtonHeaderActionsStyled,
@@ -131,12 +147,10 @@ function DraggableHeaderRenderer(props) {
               openPopover?.(e.currentTarget, column.key);
             },
             children: /* @__PURE__ */ jsx(
-              HeaderRenderer,
+              renderHeaderCell,
               {
                 column: newColumn,
-                isCellSelected,
-                onSort: () => {
-                },
+                tabIndex: headerTabIndex,
                 ...others
               }
             )