@m4l/components 9.2.60 → 9.2.62

package/@types/types.d.ts

@@ -148,6 +148,7 @@ import { ScrollBarOwnerState, ScrollBarSlotsType } from '../components/ScrollBar
 
 import { SplitLayoutOwnerState } from '../components/extended/React-resizable-panels/types';
 import { ObjectLogsOwnerState, ObjectLogsSlotsType } from '../components/ObjectLogs/types';
+import { LanguagePopoverOwnerState, LanguagePopoverSlotsType } from '../components/LanguagePopover/types';
 declare module '@mui/material/styles' {
   // Define the slots in the theme
   interface ComponentNameToClassKey {
@@ -226,6 +227,7 @@ declare module '@mui/material/styles' {
     M4LScrollbar: ScrollBarSlotsType;
     M4LSplitLayout: SplitLayoutOwnerState;
     M4LObjectLogs: ObjectLogsSlotsType;
+    M4LLanguagePopover: LanguagePopoverSlotsType;
   }
   interface ComponentsPropsList {
     // Extend ComponentsProps or ComponentsOwnerState(this extend ComponentProps)
@@ -304,6 +306,7 @@ declare module '@mui/material/styles' {
     M4LScrollBar: Partial<ScrollBarOwnerState>;
     M4LSplitLayout: Partial<SplitLayoutOwnerState>;
     M4LObjectLogs: Partial<ObjectLogsOwnerState>;
+    M4LLanguagePopover: Partial<LanguagePopoverOwnerState>;
   }
   interface Components {
     M4LDynamicFilter?: {
@@ -691,5 +694,10 @@ declare module '@mui/material/styles' {
       styleOverrides?: ComponentsOverrides<Theme>['M4LObjectLogs'];
       variants?: ComponentsVariants['M4LObjectLogs'];
     };
+    M4LLanguagePopover?: {
+      defaultProps?: ComponentsPropsList['M4LLanguagePopover'];
+      styleOverrides?: ComponentsOverrides<Theme>['M4LLanguagePopover'];
+      variants?: ComponentsVariants['M4LLanguagePopover'];
+    };
   }
 }

package/components/Chip/Chip.js

@@ -28,16 +28,14 @@ const Chip = forwardRef((props, ref) => {
   const { currentSize } = useComponentSize(size);
   const isSkeleton = useModuleSkeleton();
   const { host_static_assets, environment_assets } = useEnvironment();
-  const adjustedSize = currentSize === "small" || currentSize === "medium" ? currentSize : "medium";
   const ownerState = useMemo(() => ({
     interactive: !!onClick,
-    size: adjustedSize,
-    chipSize: adjustedSize,
+    size: currentSize,
     variant,
     color,
     opacity,
     externalColor
-  }), [adjustedSize, variant, color, opacity, externalColor, onClick]);
+  }), [currentSize, variant, color, opacity, externalColor, onClick]);
   const renderIcon = useMemo(() => (icon, instaceDataTestId) => {
     if (!icon) {
       return null;
@@ -50,12 +48,12 @@ const Chip = forwardRef((props, ref) => {
         {
           ownerState: { ...ownerState },
           src: icon,
-          size: adjustedSize,
+          size: currentSize,
           instaceDataTestId
         }
       );
     }
-  }, [ownerState, adjustedSize]);
+  }, [ownerState, currentSize]);
   if (isSkeleton) {
     return /* @__PURE__ */ jsx(
       SkeletonChipStyled,
@@ -75,7 +73,7 @@ const Chip = forwardRef((props, ref) => {
     ChipRootStyled,
     {
       role: "button-chip",
-      size: adjustedSize,
+      size: currentSize,
       onClick,
       ownerState: { ...ownerState },
       className: clsx(className, CHIP_CLASSES.root),
@@ -85,17 +83,18 @@ const Chip = forwardRef((props, ref) => {
       ...others,
       children: [
         renderIcon(startIcon, "ChipStartIcon"),
-        /* @__PURE__ */ jsx(TextChipStyled, { size: adjustedSize, ownerState: { ...ownerState }, color, children: label }),
+        /* @__PURE__ */ jsx(TextChipStyled, { size: currentSize, ownerState: { ...ownerState }, color, children: label }),
         renderIcon(endIcon, "ChipEndIcon"),
         onDeleted && /* @__PURE__ */ jsx(
           IconButtonStyled,
           {
             ...iconButtonProps,
             src: iconClose,
-            size: adjustedSize,
+            size: currentSize,
             ownerState: { ...ownerState },
             onClick: handleDelete,
-            disabled: disabledDeleteButton
+            disabled: disabledDeleteButton,
+            className: CHIP_CLASSES.closeIcon
           }
         )
       ]

package/components/Chip/ChipStyles.js

@@ -43,8 +43,8 @@ const chipStyles = {
       display: "flex",
       alignItems: "center",
       padding: theme.vars.size.baseSpacings.sp1,
-      paddingRight: 0,
       borderRadius: theme.vars.size.borderRadius["r0-5"],
+      gap: theme.vars.size.baseSpacings["sp0-5"],
       width: "max-content",
       cursor: "pointer",
       color,
@@ -72,6 +72,17 @@ const chipStyles = {
         border: `${theme.vars.size.borderStroke.container}`,
         borderColor: bgColor
       },
+      "&&& .M4LChip-closeIcon": {
+        ...getSizeStyles(
+          theme,
+          ownerState?.size || "medium",
+          "base",
+          (size) => ({
+            height: size,
+            width: size
+          })
+        )
+      },
       variants: []
     };
   },
@@ -81,7 +92,7 @@ const chipStyles = {
   textChip: ({ theme }) => ({
     whiteSpace: "nowrap",
     paddingLeft: theme.vars.size.baseSpacings.sp1,
-    paddingRight: theme.vars.size.baseSpacings.sp2
+    paddingRight: theme.vars.size.baseSpacings.sp1
   }),
   /**
    * Styles for the chip icon element.

package/components/Chip/constants.d.ts

@@ -1,3 +1,4 @@
+import { ChipSlots, ChipComplementaryClasses } from './slots/ChipEnum';
 /**
  * Clave de identificación del componente Chip dentro del sistema.
  *
@@ -6,6 +7,14 @@
  * @default 'M4LChip'
  */
 export declare const CHIP_KEY_COMPONENT = "M4LChip";
+export declare const COMBINED_CHIP_ENUMS: {
+    closeIcon: ChipComplementaryClasses.closeIcon;
+    root: ChipSlots.root;
+    skeletonChip: ChipSlots.skeletonChip;
+    chipIcon: ChipSlots.chipIcon;
+    textChip: ChipSlots.textChip;
+    iconButton: ChipSlots.iconButton;
+};
 /**
  * Inventario de clases CSS para el componente Chip
  */

package/components/Chip/constants.js

@@ -1,7 +1,11 @@
 import { g as getComponentClasses } from "../../utils/getComponentSlotRoot.js";
-import { C as ChipSlots } from "./slots/ChipEnum.js";
+import { C as ChipComplementaryClasses, a as ChipSlots } from "./slots/ChipEnum.js";
 const CHIP_KEY_COMPONENT = "M4LChip";
-const CHIP_CLASSES = getComponentClasses(CHIP_KEY_COMPONENT, ChipSlots);
+const COMBINED_CHIP_ENUMS = {
+  ...ChipSlots,
+  ...ChipComplementaryClasses
+};
+const CHIP_CLASSES = getComponentClasses(CHIP_KEY_COMPONENT, COMBINED_CHIP_ENUMS);
 export {
   CHIP_CLASSES as C,
   CHIP_KEY_COMPONENT as a

package/components/Chip/slots/ChipEnum.d.ts

@@ -5,3 +5,6 @@ export declare enum ChipSlots {
     textChip = "text",
     iconButton = "iconButton"
 }
+export declare enum ChipComplementaryClasses {
+    closeIcon = "closeIcon"
+}

package/components/Chip/slots/ChipEnum.js

@@ -6,6 +6,11 @@ var ChipSlots = /* @__PURE__ */ ((ChipSlots2) => {
   ChipSlots2["iconButton"] = "iconButton";
   return ChipSlots2;
 })(ChipSlots || {});
+var ChipComplementaryClasses = /* @__PURE__ */ ((ChipComplementaryClasses2) => {
+  ChipComplementaryClasses2["closeIcon"] = "closeIcon";
+  return ChipComplementaryClasses2;
+})(ChipComplementaryClasses || {});
 export {
-  ChipSlots as C
+  ChipComplementaryClasses as C,
+  ChipSlots as a
 };

package/components/Chip/slots/ChipSlots.js

@@ -1,7 +1,7 @@
 import { styled } from "@mui/material/styles";
 import { c as chipStyles } from "../ChipStyles.js";
 import { a as CHIP_KEY_COMPONENT } from "../constants.js";
-import { C as ChipSlots } from "./ChipEnum.js";
+import { a as ChipSlots } from "./ChipEnum.js";
 import { S as Skeleton } from "../../mui_extended/Skeleton/Skeleton.js";
 import { T as Typography } from "../../mui_extended/Typography/Typography.js";
 import { I as IconButton } from "../../mui_extended/IconButton/IconButton.js";

package/components/DataGrid/DataGrid.js

@@ -35,7 +35,9 @@ function DataGrid(props) {
     visibleCustomHeader = true,
     defaultUserColumns,
     onChangeUserColumns,
-    size
+    size,
+    externalSortSettings,
+    externalFilterSettings
   } = props;
   const {
     withSettings,
@@ -63,7 +65,11 @@ function DataGrid(props) {
       className: classRoot,
       ...process.env.NODE_ENV !== "production" ? {
         [TEST_PROP_COLUMNS]: JSON.stringify(columns),
-        [TEST_PROP_ID]: getNameDataTestId(DATAGRID_PREFIX_NAME, "root", dataTestId),
+        [TEST_PROP_ID]: getNameDataTestId(
+          DATAGRID_PREFIX_NAME,
+          "root",
+          dataTestId
+        ),
         [TEST_SKELETON]: isSkeleton ? true : false
       } : {},
       children: /* @__PURE__ */ jsx(
@@ -83,6 +89,8 @@ function DataGrid(props) {
           onChangeUserColumns,
           defaultUserColumns,
           size: currentSize,
+          externalSortSettings,
+          externalFilterSettings,
           children: /* @__PURE__ */ jsxs(FilterProvider, { initialActiveFilters: false, children: [
             withActions && actionsProps && /* @__PURE__ */ jsx(
               HeaderActions,
@@ -112,7 +120,13 @@ function DataGrid(props) {
                 onRowsChange
               }
             ),
-            withPager && /* @__PURE__ */ jsx(ControlNavigate, { size: currentSize, ...{ withPager, pagerOptions } })
+            withPager && /* @__PURE__ */ jsx(
+              ControlNavigate,
+              {
+                size: currentSize,
+                ...{ withPager, pagerOptions }
+              }
+            )
           ] })
         }
       )

package/components/DataGrid/Datagrid.styles.js

@@ -22,7 +22,7 @@ const dataGridStyles = {
     height: "100%",
     width: "100%",
     flex: 1,
-    overflow: "auto",
+    overflow: "hidden",
     "& .rdg .MuiCheckbox-root": {
       "& > svg": {
         color: theme.vars.palette.text.secondary
@@ -60,23 +60,17 @@ const dataGridStyles = {
   /**
    * Estilos del contenedor de las acciones
    */
-  actionsRoot: ({ theme, ownerState }) => ({
+  actionsRoot: ({ theme }) => ({
     display: "flex",
     alignItems: "center",
     justifyContent: "space-between",
     background: theme.vars.palette.background.default,
     borderRadius: theme.vars.size.borderRadius.r1,
     gap: theme.vars.size.baseSpacings.sp1,
-    // Tamaño del contenedor
-    ...getSizeStyles(
-      theme,
-      ownerState?.size || "medium",
-      "container",
-      (size) => ({
-        minHeight: size,
-        height: size
-      })
-    ),
+    height: "fit-content",
+    ...theme.generalSettings.isMobile && {
+      minHeight: theme.vars.size.baseSpacings.sp10
+    },
     "& .mobile-menu-actions": {
       marginRight: "auto"
     }
@@ -92,7 +86,8 @@ const dataGridStyles = {
     borderRadius: theme.vars.size.borderRadius.r2,
     border: theme.vars.size.borderStroke.container,
     borderColor: theme.vars.palette?.border.disabled,
-    padding: theme.vars.size.baseSpacings.sp1
+    padding: theme.vars.size.baseSpacings.sp1,
+    boxShadow: theme.vars.customShadows?.z1
   }),
   /**
    * Estilos para el contenedor de las acciones derecho
@@ -142,7 +137,11 @@ const dataGridStyles = {
     //Se utiliza directamente el valor porque no está tokenizado
     height: "100%",
     lineHeight: theme.vars.size.baseSpacings.sp4,
-    fontSize: getTypographyStyles(theme.generalSettings.isMobile, ownerState?.size || "medium", "body").fontSize
+    fontSize: getTypographyStyles(
+      theme.generalSettings.isMobile,
+      ownerState?.size || "medium",
+      "body"
+    ).fontSize
   }),
   /**
    * Estilos para el valor de RowsCount
@@ -155,7 +154,11 @@ const dataGridStyles = {
     paddingRight: "6px",
     //No hay token para este valor
     paddingTop: theme.vars.size.baseSpacings.sp1,
-    fontSize: getTypographyStyles(theme.generalSettings.isMobile, ownerState?.size || "medium", "body").fontSize
+    fontSize: getTypographyStyles(
+      theme.generalSettings.isMobile,
+      ownerState?.size || "medium",
+      "body"
+    ).fontSize
   }),
   /**
    * Estilos para el contenedor de las columnas
@@ -576,15 +579,10 @@ const dataGridStyles = {
     padding: theme.vars.size.baseSpacings.sp1,
     gap: theme.vars.size.baseSpacings.sp1,
     borderRadius: theme.vars.size.borderRadius.r1,
-    ...getSizeStyles(
-      theme,
-      ownerState?.size || "medium",
-      "action",
-      (size) => ({
-        minHeight: size,
-        height: size
-      })
-    )
+    ...getSizeStyles(theme, ownerState?.size || "medium", "action", (size) => ({
+      minHeight: size,
+      height: size
+    }))
   }),
   /**
    * Estilos de los inputs del header para el filtro
@@ -603,15 +601,10 @@ const dataGridStyles = {
     height: "100%",
     alignItems: "center",
     "& .MuiSkeleton-root": {
-      ...getSizeStyles(
-        theme,
-        ownerState?.size || "medium",
-        "base",
-        (size) => ({
-          minHeight: `${size}!important`,
-          height: `${size}!important`
-        })
-      )
+      ...getSizeStyles(theme, ownerState?.size || "medium", "base", (size) => ({
+        minHeight: `${size}!important`,
+        height: `${size}!important`
+      }))
     }
   }),
   /**
@@ -623,6 +616,60 @@ const dataGridStyles = {
       flexDirection: "column",
       height: "100%"
     }
+  }),
+  /**
+   * Estilos para el contenedor del nombre de la columna y el icono de sort
+   */
+  nameColumnIcon: ({ theme }) => ({
+    display: "flex",
+    alignItems: "center",
+    gap: theme.vars.size.baseSpacings.sp1,
+    position: "relative",
+    overflow: "visible"
+  }),
+  /**
+   * Estilos para el contenedor del nombre de la columna
+   */
+  nameColumn: () => ({
+    textOverflow: "ellipsis",
+    overflow: "hidden",
+    whiteSpace: "nowrap"
+  }),
+  /**
+   * Estilos para el contenedor del icono de la columna
+   */
+  iconColumn: ({ theme }) => ({
+    display: "flex",
+    alignItems: "center",
+    gap: theme.vars.size.baseSpacings.sp1
+  }),
+  /**
+   * Estilos para el popover del header actions
+   */
+  headerRenderClick: () => ({
+    width: "fit-content"
+  }),
+  /**
+   * Estilos para el menuList del header actions
+   */
+  menuList: ({ theme }) => ({
+    padding: theme.vars.size.baseSpacings.sp3,
+    display: "flex",
+    flexDirection: "column",
+    gap: theme.vars.size.baseSpacings.sp1,
+    "& > div": {
+      paddingLeft: theme.vars.size.baseSpacings.sp4,
+      paddingRight: theme.vars.size.baseSpacings.sp4
+    }
+  }),
+  /**
+   * Estilos para el contenedor del boton de acciones del header
+   */
+  buttonHeaderActions: () => ({
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "space-between",
+    width: "100%"
   })
 };
 export {

package/components/DataGrid/constants.d.ts

@@ -2,6 +2,8 @@ export declare const DATAGRID_PREFIX_NAME = "M4LDataGrid";
 export declare const DATAGRID_SELECT_COLUMN_KEY = "M4LDataGrid-CheckedColumn";
 export declare const DATAGRID_ACTIONS_COLUMN_KEY = "M4LDataGrid-ActionsColumn";
 export declare const TEST_SKELETON = "data-skeleton";
+export declare const DATAGRID_HEADER_RENDER_CLICK_KEY = "M4LDataGrid-HeaderRenderClick";
+export declare const DATAGRID_ID_DICTIONARY = "data_grid";
 export declare enum DATAGRID_SEMANTIC_WIDTHS {
     actions = 40,
     bigChip = 190,

package/components/DataGrid/constants.js

@@ -2,6 +2,8 @@ const DATAGRID_PREFIX_NAME = "M4LDataGrid";
 const DATAGRID_SELECT_COLUMN_KEY = "M4LDataGrid-CheckedColumn";
 const DATAGRID_ACTIONS_COLUMN_KEY = "M4LDataGrid-ActionsColumn";
 const TEST_SKELETON = "data-skeleton";
+const DATAGRID_HEADER_RENDER_CLICK_KEY = "M4LDataGrid-HeaderRenderClick";
+const DATAGRID_ID_DICTIONARY = "data_grid";
 var DATAGRID_SEMANTIC_WIDTHS = /* @__PURE__ */ ((DATAGRID_SEMANTIC_WIDTHS2) => {
   DATAGRID_SEMANTIC_WIDTHS2[DATAGRID_SEMANTIC_WIDTHS2["actions"] = 40] = "actions";
   DATAGRID_SEMANTIC_WIDTHS2[DATAGRID_SEMANTIC_WIDTHS2["bigChip"] = 190] = "bigChip";
@@ -31,7 +33,9 @@ export {
   TEST_SKELETON as T,
   DATAGRID_ROW_HEIGHTS as a,
   DATAGRID_ROW_HEADER_HEIGHTS as b,
-  DATAGRID_SELECT_COLUMN_KEY as c,
-  DATAGRID_SEMANTIC_WIDTHS as d,
-  DATAGRID_ACTIONS_COLUMN_KEY as e
+  DATAGRID_ID_DICTIONARY as c,
+  DATAGRID_SELECT_COLUMN_KEY as d,
+  DATAGRID_SEMANTIC_WIDTHS as e,
+  DATAGRID_ACTIONS_COLUMN_KEY as f,
+  DATAGRID_HEADER_RENDER_CLICK_KEY as g
 };

package/components/DataGrid/contexts/DataGridContext/index.js

@@ -1,5 +1,5 @@
 import { jsx } from "react/jsx-runtime";
-import { useState, useMemo, useEffect, useCallback, createContext } from "react";
+import { useState, useEffect, useMemo, useCallback, createContext } from "react";
 import { c as castMapColumnsWidthToRecord } from "../../helpers/castMapColumnsWidthToRecord.js";
 import { useFirstRender } from "@m4l/graphics";
 import { g as getComponentClasses } from "../../../../utils/getComponentSlotRoot.js";
@@ -32,10 +32,7 @@ function getColumnsConfig(id, columns, defaultUserColumns = void 0) {
     }
   }
   return columns.map((column, index) => {
-    const [columnConfig = { ...column }, columnConfigIndex] = getColumnConfigByKey(
-      column.key,
-      columnsConfig
-    );
+    const [columnConfig = { ...column }, columnConfigIndex] = getColumnConfigByKey(column.key, columnsConfig);
     return {
       key: column.key,
       name: typeof column.name === "string" ? column.name : String(column.name),
@@ -81,10 +78,16 @@ function getColumnsWidth(id, columns, defaultUserColumns) {
 function saveColumnsWidth(id, storeColumnsWidth, onChangeUserColumns) {
   if (onChangeUserColumns) {
     const columnsWidthObject = castMapColumnsWidthToRecord(storeColumnsWidth);
-    onChangeUserColumns({ reason: "columnsWidths", userConfig: columnsWidthObject });
+    onChangeUserColumns({
+      reason: "columnsWidths",
+      userConfig: columnsWidthObject
+    });
     return;
   }
-  localStorage.setItem(`${id}_columns_width`, JSON.stringify([...storeColumnsWidth]));
+  localStorage.setItem(
+    `${id}_columns_width`,
+    JSON.stringify([...storeColumnsWidth])
+  );
 }
 function saveColumnsConfig(id, columnsConfig, onChangeUserColumns) {
   if (onChangeUserColumns) {
@@ -118,26 +121,26 @@ function DataGridProvider(props) {
     onCheckedRowsChange,
     rowKeyGetter,
     onChangeUserColumns,
+    externalSortSettings: sortSettings,
+    externalFilterSettings: filterSettings,
     size
   } = props;
   const isFirstRender = useFirstRender([columns, id]);
-  const classes = getComponentClasses(
-    DATAGRID_PREFIX_NAME,
-    {
-      ...DataGridSlots,
-      ...ActionsSlots,
-      ...RowsCountSlots,
-      ...TableSlots,
-      ...TextEditorSlots,
-      ...ColumnsConfigSlots,
-      ...ControlNavigateSlots
-    }
-  );
-  const [columnsWidths, setColumnsWidths] = useState(
-    /* @__PURE__ */ new Map()
+  const classes = getComponentClasses(DATAGRID_PREFIX_NAME, {
+    ...DataGridSlots,
+    ...ActionsSlots,
+    ...RowsCountSlots,
+    ...TableSlots,
+    ...TextEditorSlots,
+    ...ColumnsConfigSlots,
+    ...ControlNavigateSlots
+  });
+  const [columnsWidths, setColumnsWidths] = useState(/* @__PURE__ */ new Map());
+  const [columnsConfig, setColumnsConfigOptions] = useState(
+    () => []
   );
-  const [columnsConfig, setColumnsConfigOptions] = useState(() => []);
   const [rowsFilterCount, setRowFilterCount] = useState(rowsCount);
+  const [sortColumns, setSortColumns] = useState([]);
   const [currentRowHeightVariant, setCurrentRowHeightVariant] = useState(() => {
     if (typeof rowHeights !== typeof rowHeaderHeights) {
       throw new Error("Must be same type rowheights and rowHeaderTypes");
@@ -161,19 +164,44 @@ function DataGridProvider(props) {
       rowHeaderHeight: typeof rowHeaderHeights !== "number" ? rowHeaderHeights[getIndexRowHeightVariant(initialRowHeightVariant)] : rowHeaderHeights
     };
   });
+  useEffect(() => {
+    const keys = new Set(columns.map((c) => c.key));
+    if (sortSettings?.sortsColumns) {
+      for (const sort of sortSettings.sortsColumns) {
+        if (!keys.has(sort)) {
+          throw new Error(
+            `DataGridProvider: Sorts incluye "${sort}", pero no existe ninguna columna con key="${sort}".`
+          );
+        }
+      }
+    }
+    if (filterSettings?.filterColumns) {
+      for (const filterField of filterSettings.filterColumns) {
+        if (!keys.has(filterField.name)) {
+          throw new Error(
+            `DataGridProvider: Fields incluye "${filterField.name}", pero no existe ninguna columna con key="${filterField.name}".`
+          );
+        }
+      }
+    }
+  }, [columns, sortSettings, filterSettings]);
   const finalRowHeights = useMemo(() => rowHeights, [rowHeights]);
   let timerSaveColumns;
   useEffect(() => {
     if (isFirstRender) {
       setColumnsWidths(getColumnsWidth(id, columns, defaultUserColumns));
-      setColumnsConfigOptions(getColumnsConfig(id, columns, defaultUserColumns));
+      setColumnsConfigOptions(
+        getColumnsConfig(id, columns, defaultUserColumns)
+      );
     }
   }, [defaultUserColumns]);
   useEffect(() => {
     if (!isFirstRender) {
       const finalColumnsConfig = [];
       for (let i = 0; i < columnsConfig.length; i++) {
-        const columnIndex = columns.findIndex((c) => c.key === columnsConfig[i]?.key);
+        const columnIndex = columns.findIndex(
+          (c) => c.key === columnsConfig[i]?.key
+        );
         if (columnIndex !== -1) {
           const column = columns[columnIndex];
           finalColumnsConfig.push({
@@ -185,11 +213,18 @@ function DataGridProvider(props) {
           });
         }
       }
-      const newColumns = columns.filter((column, index) => column.key !== columnsConfig[index]?.key);
+      const newColumns = columns.filter(
+        (column, index) => column.key !== columnsConfig[index]?.key
+      );
       if (newColumns.length > 0) {
         const colLength = finalColumnsConfig.length;
-        const newColConfig = getColumnsConfig(id, newColumns).map((columnConfig, index) => {
-          const columnIndex = columns.findIndex((c) => c.key === newColumns[index].key);
+        const newColConfig = getColumnsConfig(
+          id,
+          newColumns
+        ).map((columnConfig, index) => {
+          const columnIndex = columns.findIndex(
+            (c) => c.key === newColumns[index].key
+          );
           const column = newColumns[index];
           const indexNewCol = index + colLength;
           return {
@@ -206,7 +241,11 @@ function DataGridProvider(props) {
       if (deepEqual(columnsConfig, finalColumnsConfig)) {
         return;
       }
-      console.log("useEffect columnsConfig changed", columnsConfig, finalColumnsConfig);
+      console.log(
+        "useEffect columnsConfig changed",
+        columnsConfig,
+        finalColumnsConfig
+      );
       setColumnsConfigOptions(finalColumnsConfig);
     }
   }, [columns, id]);
@@ -223,8 +262,12 @@ function DataGridProvider(props) {
       if (sourceKey === targetKey) {
         return;
       }
-      const sourceColumnIndex = columnsConfig.findIndex((c) => c.key === sourceKey);
-      const targetColumnIndex = columnsConfig.findIndex((c) => c.key === targetKey);
+      const sourceColumnIndex = columnsConfig.findIndex(
+        (c) => c.key === sourceKey
+      );
+      const targetColumnIndex = columnsConfig.findIndex(
+        (c) => c.key === targetKey
+      );
       const reorderedColumnsConfig = [...columnsConfig];
       reorderedColumnsConfig.splice(
         targetColumnIndex,
@@ -282,6 +325,10 @@ function DataGridProvider(props) {
         onCheckedRowsChange,
         rowKeyGetter,
         onChangeUserColumns,
+        sortColumns,
+        setSortColumns,
+        externalSortSettings: sortSettings,
+        externalFilterSettings: filterSettings,
         classes,
         size
       },

package/components/DataGrid/contexts/DataGridContext/types.d.ts

@@ -2,6 +2,7 @@ import { ReactNode } from 'react';
 import { RowKey, RowHeightVariants, GridProps } from '../../types';
 import { Maybe } from '@m4l/core';
 import { ActionsSlots, ColumnsConfigSlots, ControlNavigateSlots, DataGridSlots, RowsCountSlots, TableSlots, TextEditorSlots } from '../../slots/DataGridEnum';
+import { SortColumn } from 'react-data-grid';
 export interface BaseConfigColumn {
     key: string;
     visible: boolean;
@@ -22,7 +23,7 @@ export interface IGridConfig {
     columnsConfig: BaseConfigColumn[];
     columnsWidths: Record<RowKey, number>;
 }
-export interface DataGridProviderProps<TRow, TSummaryRow, TKey extends RowKey = RowKey> extends Pick<GridProps<TRow, TSummaryRow, TKey>, 'rows' | 'columns' | 'rowActionsGetter' | 'rowHeaderHeights' | 'rowHeights' | 'initialRowHeightVariant' | 'checkedRows' | 'onCheckedRowsChange' | 'rowKeyGetter' | 'onChangeUserColumns' | 'defaultUserColumns'> {
+export interface DataGridProviderProps<TRow, TSummaryRow, TKey extends RowKey = RowKey> extends Pick<GridProps<TRow, TSummaryRow, TKey>, 'rows' | 'columns' | 'rowActionsGetter' | 'rowHeaderHeights' | 'rowHeights' | 'initialRowHeightVariant' | 'checkedRows' | 'onCheckedRowsChange' | 'rowKeyGetter' | 'onChangeUserColumns' | 'defaultUserColumns' | 'externalSortSettings' | 'externalFilterSettings'> {
     id: number | string;
     children: ReactNode;
     rowsCount: number;
@@ -33,7 +34,7 @@ export type RowHeightState = {
     rowHeight: number;
     rowHeaderHeight: number;
 };
-export interface DataGridContextProps<TRow, TSummaryRow, TKey extends RowKey = RowKey> extends Pick<DataGridProviderProps<TRow, TSummaryRow, TKey>, 'rows' | 'checkedRows' | 'onCheckedRowsChange' | 'rowHeights' | 'rowsCount' | 'rowActionsGetter' | 'rowKeyGetter' | 'onChangeUserColumns'> {
+export interface DataGridContextProps<TRow, TSummaryRow, TKey extends RowKey = RowKey> extends Pick<DataGridProviderProps<TRow, TSummaryRow, TKey>, 'rows' | 'checkedRows' | 'onCheckedRowsChange' | 'rowHeights' | 'rowsCount' | 'rowActionsGetter' | 'rowKeyGetter' | 'onChangeUserColumns' | 'externalSortSettings' | 'externalFilterSettings'> {
     columnsConfig: IConfigColumn[];
     columnsWidths: Map<string, Maybe<string | number>>;
     setRowsCount: (newRowsCount: number) => void;
@@ -46,4 +47,6 @@ export interface DataGridContextProps<TRow, TSummaryRow, TKey extends RowKey = R
     onChangeColumnWidth: (columnKey: string, width: number) => void;
     classes?: Record<DataGridSlots | ActionsSlots | RowsCountSlots | TableSlots | TextEditorSlots | ColumnsConfigSlots | ControlNavigateSlots, string>;
     size: GridProps<any, any, any>['size'];
+    sortColumns: SortColumn[];
+    setSortColumns: React.Dispatch<React.SetStateAction<SortColumn[]>>;
 }