@mui/x-data-grid 8.11.2 → 8.12.0

package/material/index.js

@@ -48,7 +48,11 @@ var _Grow = _interopRequireDefault(require("@mui/material/Grow"));
 var _Paper = _interopRequireDefault(require("@mui/material/Paper"));
 var _InputLabel = _interopRequireDefault(require("@mui/material/InputLabel"));
 var _Skeleton = _interopRequireDefault(require("@mui/material/Skeleton"));
+var _Tabs = _interopRequireDefault(require("@mui/material/Tabs"));
+var _Tab = _interopRequireDefault(require("@mui/material/Tab"));
+var _ToggleButton = _interopRequireDefault(require("@mui/material/ToggleButton"));
 var _forwardRef = require("@mui/x-internals/forwardRef");
+var _useId = _interopRequireDefault(require("@mui/utils/useId"));
 var _icons = require("./icons");
 var _GridColumnUnsortedIcon = require("../components/GridColumnUnsortedIcon");
 var _useGridApiContext = require("../hooks/utils/useGridApiContext");
@@ -68,16 +72,19 @@ const _excluded = ["id", "label", "labelId", "material", "disabled", "slotProps"
   _excluded0 = ["material"],
   _excluded1 = ["material"],
   _excluded10 = ["material"],
-  _excluded11 = ["material", "label", "className"],
-  _excluded12 = ["material"],
-  _excluded13 = ["inert", "iconStart", "iconEnd", "children", "material"],
-  _excluded14 = ["slotProps", "material"],
-  _excluded15 = ["id", "multiple", "freeSolo", "options", "getOptionLabel", "isOptionEqualToValue", "value", "onChange", "label", "placeholder", "slotProps", "material"],
-  _excluded16 = ["key"],
-  _excluded17 = ["inputProps", "InputProps", "InputLabelProps"],
-  _excluded18 = ["slotProps", "material"],
-  _excluded19 = ["ref", "open", "children", "className", "clickAwayTouchEvent", "clickAwayMouseEvent", "flip", "focusTrap", "onExited", "onClickAway", "onDidShow", "onDidHide", "id", "target", "transition", "placement", "material"],
-  _excluded20 = ["native"];
+  _excluded11 = ["material"],
+  _excluded12 = ["material", "label", "className"],
+  _excluded13 = ["material"],
+  _excluded14 = ["inert", "iconStart", "iconEnd", "children", "material"],
+  _excluded15 = ["slotProps", "material"],
+  _excluded16 = ["id", "multiple", "freeSolo", "options", "getOptionLabel", "isOptionEqualToValue", "value", "onChange", "label", "placeholder", "slotProps", "material"],
+  _excluded17 = ["key"],
+  _excluded18 = ["inputProps", "InputProps", "InputLabelProps"],
+  _excluded19 = ["slotProps", "material"],
+  _excluded20 = ["ref", "open", "children", "className", "clickAwayTouchEvent", "clickAwayMouseEvent", "flip", "focusTrap", "onExited", "onClickAway", "onDidShow", "onDidHide", "id", "target", "transition", "placement", "material"],
+  _excluded21 = ["native"],
+  _excluded22 = ["children", "value", "active"],
+  _excluded23 = ["items", "value", "material"];
 /* eslint-disable material-ui/disallow-react-api-in-server-components */
 
 const InputAdornment = (0, _styles.styled)(_InputAdornment.default)(({
@@ -147,7 +154,7 @@ const BaseSelect = (0, _forwardRef.forwardRef)(function BaseSelect(props, ref) {
       style,
       fullWidth
     } = props,
-    rest = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
+    other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const menuProps = {
     PaperProps: {
       onKeyDown
@@ -175,7 +182,7 @@ const BaseSelect = (0, _forwardRef.forwardRef)(function BaseSelect(props, ref) {
       displayEmpty: true,
       onChange: onChange,
       variant: "outlined"
-    }, rest, {
+    }, other, {
       notched: true,
       inputProps: slotProps?.htmlInput,
       onOpen: onOpen,
@@ -207,7 +214,7 @@ const BasePagination = (0, _forwardRef.forwardRef)(function BasePagination(props
       material,
       disabled
     } = props,
-    rest = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded2);
+    other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded2);
   const computedProps = React.useMemo(() => {
     if (!disabled) {
       return undefined;
@@ -236,7 +243,7 @@ const BasePagination = (0, _forwardRef.forwardRef)(function BasePagination(props
       estimated: estimatedRowCount
     })),
     getItemAriaLabel: apiRef.current.getLocaleText('paginationItemAriaLabel')
-  }, computedProps, rest, material, {
+  }, computedProps, other, material, {
     ref: ref
   }));
 });
@@ -245,8 +252,8 @@ const BaseBadge = (0, _forwardRef.forwardRef)(function BaseBadge(props, ref) {
   const {
       material
     } = props,
-    rest = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded3);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Badge.default, (0, _extends2.default)({}, rest, material, {
+    other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded3);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Badge.default, (0, _extends2.default)({}, other, material, {
     ref: ref
   }));
 });
@@ -300,8 +307,8 @@ const BaseCircularProgress = (0, _forwardRef.forwardRef)(function BaseCircularPr
   const {
       material
     } = props,
-    rest = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded5);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_CircularProgress.default, (0, _extends2.default)({}, rest, material, {
+    other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded5);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_CircularProgress.default, (0, _extends2.default)({}, other, material, {
     ref: ref
   }));
 });
@@ -310,8 +317,8 @@ const BaseDivider = (0, _forwardRef.forwardRef)(function BaseDivider(props, ref)
   const {
       material
     } = props,
-    rest = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded6);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Divider.default, (0, _extends2.default)({}, rest, material, {
+    other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded6);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Divider.default, (0, _extends2.default)({}, other, material, {
     ref: ref
   }));
 });
@@ -320,8 +327,8 @@ const BaseLinearProgress = (0, _forwardRef.forwardRef)(function BaseLinearProgre
   const {
       material
     } = props,
-    rest = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded7);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_LinearProgress.default, (0, _extends2.default)({}, rest, material, {
+    other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded7);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_LinearProgress.default, (0, _extends2.default)({}, other, material, {
     ref: ref
   }));
 });
@@ -330,18 +337,37 @@ const BaseButton = (0, _forwardRef.forwardRef)(function BaseButton(props, ref) {
   const {
       material
     } = props,
-    rest = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded8);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, (0, _extends2.default)({}, rest, material, {
+    other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded8);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, (0, _extends2.default)({}, other, material, {
     ref: ref
   }));
 });
 if (process.env.NODE_ENV !== "production") BaseButton.displayName = "BaseButton";
-const BaseChip = (0, _forwardRef.forwardRef)(function BaseChip(props, ref) {
+const StyledToggleButton = (0, _styles.styled)(_ToggleButton.default)(({
+  theme
+}) => ({
+  gap: theme.spacing(1),
+  border: 0
+}));
+const BaseToggleButton = (0, _forwardRef.forwardRef)(function BaseToggleButton(props, ref) {
   const {
       material
     } = props,
     rest = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded9);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Chip.default, (0, _extends2.default)({}, rest, material, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledToggleButton, (0, _extends2.default)({
+    size: "small",
+    color: "primary"
+  }, rest, material, {
+    ref: ref
+  }));
+});
+if (process.env.NODE_ENV !== "production") BaseToggleButton.displayName = "BaseToggleButton";
+const BaseChip = (0, _forwardRef.forwardRef)(function BaseChip(props, ref) {
+  const {
+      material
+    } = props,
+    other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded0);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Chip.default, (0, _extends2.default)({}, other, material, {
     ref: ref
   }));
 });
@@ -350,8 +376,8 @@ const BaseIconButton = (0, _forwardRef.forwardRef)(function BaseIconButton(props
   const {
       material
     } = props,
-    rest = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded0);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconButton.default, (0, _extends2.default)({}, rest, material, {
+    other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded1);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconButton.default, (0, _extends2.default)({}, other, material, {
     ref: ref
   }));
 });
@@ -360,8 +386,8 @@ const BaseTooltip = (0, _forwardRef.forwardRef)(function BaseTooltip(props, ref)
   const {
       material
     } = props,
-    rest = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded1);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Tooltip.default, (0, _extends2.default)({}, rest, material, {
+    other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded10);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Tooltip.default, (0, _extends2.default)({}, other, material, {
     ref: ref
   }));
 });
@@ -370,8 +396,8 @@ const BaseSkeleton = (0, _forwardRef.forwardRef)(function BaseSkeleton(props, re
   const {
       material
     } = props,
-    rest = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded10);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Skeleton.default, (0, _extends2.default)({}, rest, material, {
+    other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded11);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Skeleton.default, (0, _extends2.default)({}, other, material, {
     ref: ref
   }));
 });
@@ -382,16 +408,16 @@ const BaseSwitch = (0, _forwardRef.forwardRef)(function BaseSwitch(props, ref) {
       label,
       className
     } = props,
-    rest = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded11);
+    other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded12);
   if (!label) {
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Switch.default, (0, _extends2.default)({}, rest, material, {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Switch.default, (0, _extends2.default)({}, other, material, {
       className: className,
       ref: ref
     }));
   }
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(FormControlLabel, {
     className: className,
-    control: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Switch.default, (0, _extends2.default)({}, rest, material, {
+    control: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Switch.default, (0, _extends2.default)({}, other, material, {
       ref: ref
     })),
     label: label
@@ -402,8 +428,8 @@ const BaseMenuList = (0, _forwardRef.forwardRef)(function BaseMenuList(props, re
   const {
       material
     } = props,
-    rest = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded12);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_MenuList.default, (0, _extends2.default)({}, rest, material, {
+    other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded13);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_MenuList.default, (0, _extends2.default)({}, other, material, {
     ref: ref
   }));
 });
@@ -416,7 +442,7 @@ function BaseMenuItem(props) {
       children,
       material
     } = props,
-    other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded13);
+    other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded14);
   if (inert) {
     other.disableRipple = true;
   }
@@ -435,10 +461,10 @@ function BaseTextField(props) {
       slotProps,
       material
     } = props,
-    rest = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded14);
+    other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded15);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_TextField.default, (0, _extends2.default)({
     variant: "outlined"
-  }, rest, material, {
+  }, other, material, {
     inputProps: slotProps?.htmlInput,
     InputProps: transformInputProps(slotProps?.input),
     InputLabelProps: (0, _extends2.default)({
@@ -462,7 +488,7 @@ function BaseAutocomplete(props) {
       slotProps,
       material
     } = props,
-    rest = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded15);
+    other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded16);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Autocomplete.default, (0, _extends2.default)({
     id: id,
     multiple: multiple,
@@ -479,7 +505,7 @@ function BaseAutocomplete(props) {
         {
           key
         } = _getTagProps,
-        tagProps = (0, _objectWithoutPropertiesLoose2.default)(_getTagProps, _excluded16);
+        tagProps = (0, _objectWithoutPropertiesLoose2.default)(_getTagProps, _excluded17);
       return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Chip.default, (0, _extends2.default)({
         variant: "outlined",
         size: "small",
@@ -492,7 +518,7 @@ function BaseAutocomplete(props) {
           InputProps,
           InputLabelProps
         } = params,
-        inputRest = (0, _objectWithoutPropertiesLoose2.default)(params, _excluded17);
+        inputRest = (0, _objectWithoutPropertiesLoose2.default)(params, _excluded18);
       return /*#__PURE__*/(0, _jsxRuntime.jsx)(_TextField.default, (0, _extends2.default)({}, inputRest, {
         label: label,
         placeholder: placeholder,
@@ -503,7 +529,7 @@ function BaseAutocomplete(props) {
         }, InputLabelProps)
       }, slotProps?.textField, rootProps.slotProps?.baseTextField));
     }
-  }, rest, material));
+  }, other, material));
 }
 function BaseInput(props) {
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_InputBase.default, (0, _extends2.default)({}, transformInputProps(props)));
@@ -516,8 +542,8 @@ function transformInputProps(props, wrapAdornments = true) {
       slotProps,
       material
     } = props,
-    rest = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded18);
-  const result = rest;
+    other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded19);
+  const result = other;
   if (wrapAdornments) {
     if (result.startAdornment) {
       result.startAdornment = /*#__PURE__*/(0, _jsxRuntime.jsx)(InputAdornment, {
@@ -565,7 +591,7 @@ function BasePopper(props) {
       placement,
       material
     } = props,
-    rest = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded19);
+    other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded20);
   const modifiers = React.useMemo(() => {
     const result = [{
       name: 'preventOverflow',
@@ -627,7 +653,7 @@ function BasePopper(props) {
     transition: transition,
     placement: placement,
     modifiers: modifiers
-  }, rest, material, {
+  }, other, material, {
     children: content
   }));
 }
@@ -663,12 +689,82 @@ function BaseSelectOption(_ref) {
   let {
       native
     } = _ref,
-    props = (0, _objectWithoutPropertiesLoose2.default)(_ref, _excluded20);
+    props = (0, _objectWithoutPropertiesLoose2.default)(_ref, _excluded21);
   if (native) {
     return /*#__PURE__*/(0, _jsxRuntime.jsx)("option", (0, _extends2.default)({}, props));
   }
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_MenuItem.default, (0, _extends2.default)({}, props));
 }
+const StyledTabs = (0, _styles.styled)(_Tabs.default, {
+  name: 'MuiDataGrid',
+  slot: 'Tabs'
+})(({
+  theme
+}) => ({
+  borderBottom: `1px solid ${theme.palette.divider}`
+}));
+const StyledTab = (0, _styles.styled)(_Tab.default, {
+  name: 'MuiDataGrid',
+  slot: 'Tab'
+})({
+  flex: 1,
+  minWidth: 'fit-content'
+});
+const StyledTabPanel = (0, _styles.styled)('div', {
+  name: 'MuiDataGrid',
+  slot: 'TabPanel'
+})({
+  flex: 1,
+  display: 'flex',
+  flexDirection: 'column',
+  overflow: 'hidden'
+});
+function TabPanel(props) {
+  const {
+      children,
+      active
+    } = props,
+    other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded22);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledTabPanel, (0, _extends2.default)({
+    role: "tabpanel",
+    style: {
+      display: active ? 'flex' : 'none'
+    }
+  }, other, {
+    children: children
+  }));
+}
+function BaseTabs(_ref2) {
+  let {
+      items,
+      value,
+      material
+    } = _ref2,
+    props = (0, _objectWithoutPropertiesLoose2.default)(_ref2, _excluded23);
+  const id = (0, _useId.default)();
+  const labelId = `${id}-tab-${value}`;
+  const panelId = `${id}-tabpanel-${value}`;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(StyledTabs, (0, _extends2.default)({}, props, {
+      value: value,
+      variant: "scrollable",
+      scrollButtons: "auto"
+    }, material, {
+      children: items.map(item => /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledTab, {
+        value: item.value,
+        label: item.label,
+        id: labelId,
+        "aria-controls": panelId
+      }, item.value))
+    })), items.map(item => /*#__PURE__*/(0, _jsxRuntime.jsx)(TabPanel, {
+      value: item.value,
+      active: value === item.value,
+      id: panelId,
+      "aria-labelledby": labelId,
+      children: item.children
+    }, item.value))]
+  });
+}
 const iconSlots = {
   booleanCellTrueIcon: _icons.GridCheckIcon,
   booleanCellFalseIcon: _icons.GridCloseIcon,
@@ -722,7 +818,9 @@ const baseSlots = {
   baseTextField: BaseTextField,
   baseButton: BaseButton,
   baseIconButton: BaseIconButton,
+  baseToggleButton: BaseToggleButton,
   baseTooltip: BaseTooltip,
+  baseTabs: BaseTabs,
   basePagination: BasePagination,
   basePopper: BasePopper,
   baseSelect: BaseSelect,

package/material/variables.js

@@ -103,7 +103,8 @@ function formatFont(font) {
   if (!font) {
     return undefined;
   }
-  return `${font.fontWeight} ${font.fontSize} / ${font.lineHeight} ${font.fontFamily}`;
+  const fontSize = typeof font.fontSize === 'number' ? `${font.fontSize}px` : font.fontSize;
+  return `${font.fontWeight} ${fontSize} / ${font.lineHeight} ${font.fontFamily}`;
 }
 
 /**

package/models/api/gridLocaleTextApi.d.ts

@@ -30,6 +30,7 @@ export interface GridLocaleText {
   toolbarExportPrint: React.ReactNode;
   toolbarExportExcel: string;
   toolbarPivot: string;
+  toolbarCharts: string;
   toolbarAssistant: React.ReactNode;
   columnsManagementSearchTitle: string;
   columnsManagementNoColumns: string;
@@ -102,6 +103,7 @@ export interface GridLocaleText {
   columnMenuSortAsc: React.ReactNode | ((colDef: GridColDef) => React.ReactNode);
   columnMenuSortDesc: React.ReactNode | ((colDef: GridColDef) => React.ReactNode);
   columnMenuManagePivot: string;
+  columnMenuManageCharts: string;
   columnHeaderFiltersTooltipActive: (count: number) => React.ReactNode;
   columnHeaderFiltersLabel: string;
   columnHeaderSortIconLabel: string;
@@ -130,6 +132,7 @@ export interface GridLocaleText {
   collapseDetailPanel: string;
   rowReorderingHeaderName: string;
   aggregationMenuItemHeader: string;
+  aggregationFunctionLabelNone: string;
   aggregationFunctionLabelSum: string;
   aggregationFunctionLabelAvg: string;
   aggregationFunctionLabelMin: string;
@@ -170,6 +173,30 @@ export interface GridLocaleText {
   pivotDragToValues: string;
   pivotYearColumnHeaderName: string;
   pivotQuarterColumnHeaderName: string;
+  chartsNoCharts: string;
+  chartsChartNotSelected: string;
+  chartsTabChart: string;
+  chartsTabFields: string;
+  chartsTabCustomize: string;
+  chartsCloseButton: string;
+  chartsSyncButtonLabel: string;
+  chartsSearchPlaceholder: string;
+  chartsSearchLabel: string;
+  chartsSearchClear: string;
+  chartsNoFields: string;
+  chartsFieldBlocked: string;
+  chartsCategories: string;
+  chartsSeries: string;
+  chartsMenuAddToDimensions: (dimensionLabel: string) => string;
+  chartsMenuAddToValues: (valuesLabel: string) => string;
+  chartsMenuMoveUp: string;
+  chartsMenuMoveDown: string;
+  chartsMenuMoveToTop: string;
+  chartsMenuMoveToBottom: string;
+  chartsMenuOptions: string;
+  chartsMenuRemove: string;
+  chartsDragToDimensions: (dimensionLabel: string) => string;
+  chartsDragToValues: (valuesLabel: string) => string;
   aiAssistantPanelTitle: string;
   aiAssistantPanelClose: string;
   aiAssistantPanelConversationHistory: string;

package/models/api/gridParamsApi.d.ts

@@ -96,12 +96,16 @@ export interface GridParamsPrivateApi {
     colDef,
     hasFocus,
     rowNode,
-    tabIndex
+    tabIndex,
+    value,
+    formattedValue
   }: {
     cellMode: GridCellMode;
     colDef: GridStateColDef;
     hasFocus: boolean;
     rowNode: N;
     tabIndex: 0 | -1;
+    value?: V;
+    formattedValue?: F;
   }) => GridCellParams<R, V, F, N>;
 }

package/models/configuration/gridAggregationConfiguration.d.ts

@@ -0,0 +1,25 @@
+import { RefObject } from '@mui/x-internals/types';
+import type { GridRowId, GridRowModel } from "../gridRows.js";
+import { GridColDef } from "../colDef/index.js";
+/**
+ * Get the cell aggregation result
+ * @param {GridRowId} id The row id
+ * @param {string} field The field
+ * @returns { { position: 'footer' | 'inline'; value: any } | null } The cell aggregation result
+ */
+export type GetCellAggregationResultFn = (id: GridRowId, field: string) => {
+  position: 'footer' | 'inline';
+  value: any;
+  formattedValue?: any;
+} | null;
+export type SortValueGetterFn = (id: GridRowId, field: string) => any;
+export type FilterValueGetterFn = (row: GridRowModel, colDef: GridColDef) => any;
+export interface GridAggregationInternalHooks<Api, Props> {
+  useCellAggregationResult: GetCellAggregationResultFn;
+  /**
+   * @param {RefObject<Api>} apiRef The API reference
+   * @returns {SortValueGetterFn} The function to get the value to sort by
+   */
+  useSortValueGetter: (apiRef: RefObject<Api>) => SortValueGetterFn;
+  useFilterValueGetter: (apiRef: RefObject<Api>, props: Props) => FilterValueGetterFn;
+}

package/models/configuration/gridAggregationConfiguration.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/models/configuration/gridConfiguration.d.ts

@@ -1,22 +1,19 @@
 import * as React from 'react';
-import { GridRowAriaAttributesInternalHook, GridRowsOverridableMethodsInternalHook } from "./gridRowConfiguration.js";
+import type { GridRowAriaAttributesInternalHook, GridRowsOverridableMethodsInternalHook } from "./gridRowConfiguration.js";
+import type { GridAggregationInternalHooks } from "./gridAggregationConfiguration.js";
 import type { GridCSSVariablesInterface } from "../../constants/cssVariables.js";
-import type { GridRowId } from "../gridRows.js";
+import { DataGridProcessedProps } from "../props/DataGridProps.js";
 import type { GridPrivateApiCommon } from "../api/gridApiCommon.js";
 import type { GridPrivateApiCommunity } from "../api/gridApiCommunity.js";
 export interface GridAriaAttributesInternalHook {
   useGridAriaAttributes: () => React.HTMLAttributes<HTMLElement>;
 }
-export interface GridInternalHook<Api> extends GridAriaAttributesInternalHook, GridRowAriaAttributesInternalHook, GridRowsOverridableMethodsInternalHook<Api> {
+export interface GridInternalHook<Api, Props> extends GridAriaAttributesInternalHook, GridRowAriaAttributesInternalHook, GridAggregationInternalHooks<Api, Props>, GridRowsOverridableMethodsInternalHook<Api> {
   useCSSVariables: () => {
     id: string;
     variables: GridCSSVariablesInterface;
   };
-  useCellAggregationResult: (id: GridRowId, field: string) => {
-    position: 'footer' | 'inline';
-    value: any;
-  } | null;
 }
-export interface GridConfiguration<Api extends GridPrivateApiCommon = GridPrivateApiCommunity> {
-  hooks: GridInternalHook<Api>;
+export interface GridConfiguration<Api extends GridPrivateApiCommon = GridPrivateApiCommunity, Props = DataGridProcessedProps> {
+  hooks: GridInternalHook<Api, Props>;
 }

package/models/gridBaseSlots.d.ts

@@ -116,6 +116,10 @@ export type IconButtonProps = Omit<ButtonProps, 'startIcon'> & {
   color?: 'default' | 'inherit' | 'primary';
   edge?: 'start' | 'end' | false;
 };
+export type ToggleButtonProps = CommonProps & {
+  selected?: boolean;
+  value: string;
+};
 export type DividerProps = {
   className?: string;
   orientation?: 'horizontal' | 'vertical';
@@ -236,6 +240,17 @@ export type SwitchProps = CommonProps & {
   onChange?: React.ChangeEventHandler;
   size?: 'small' | 'medium';
   label?: React.ReactNode;
+  disabled?: boolean;
+  title?: string;
+};
+export type TabsProps = Omit<CommonProps, 'onChange'> & {
+  items: {
+    value: string;
+    label: string;
+    children: React.ReactNode;
+  }[];
+  value: string;
+  onChange: (event: React.SyntheticEvent, value: string) => void;
 };
 export type TextFieldProps = CommonProps & {
   role?: string;

package/models/gridFilterItem.d.ts

@@ -1,3 +1,4 @@
+import { GridBaseColDef } from "./colDef/gridColDef.js";
 /**
  * Filter item definition interface.
  * @demos
@@ -12,7 +13,7 @@ export interface GridFilterItem {
   /**
    * The column from which we want to filter the rows.
    */
-  field: string;
+  field: GridBaseColDef['field'];
   /**
    * The filtering value.
    * The operator filtering function will decide for each row if the row values is correct compared to this value.
@@ -20,8 +21,9 @@ export interface GridFilterItem {
   value?: any;
   /**
    * The name of the operator we want to apply.
+   * A custom operator is supported by providing any string value.
    */
-  operator: string;
+  operator: 'contains' | 'doesNotContain' | 'equals' | 'doesNotEqual' | 'startsWith' | 'endsWith' | '=' | '!=' | '>' | '>=' | '<' | '<=' | 'is' | 'not' | 'after' | 'onOrAfter' | 'before' | 'onOrBefore' | 'isEmpty' | 'isNotEmpty' | 'isAnyOf' | (string & {});
 }
 declare enum GridLogicOperator {
   And = "and",

package/models/gridFilterOperator.d.ts

@@ -25,7 +25,7 @@ export interface GridFilterOperator<R extends GridValidRowModel = any, V = any,
    * The name of the filter operator.
    * It will be matched with the `operator` property of the filter items.
    */
-  value: string;
+  value: GridFilterItem['operator'];
   /**
    * The callback that generates a filtering function for a given filter item and column.
    * This function can return `null` to skip filtering for this item and column.

package/models/gridSlotsComponent.d.ts

@@ -73,6 +73,11 @@ export interface GridBaseSlots {
    * @default Input
    */
   baseInput: React.JSXElementConstructor<GridSlotProps['baseInput']>;
+  /**
+   * The custom ToggleButton component used in the grid.
+   * @default ToggleButton
+   */
+  baseToggleButton: React.JSXElementConstructor<GridSlotProps['baseToggleButton']>;
   /**
    * The custom Tooltip component used in the grid.
    * @default Tooltip
@@ -103,6 +108,11 @@ export interface GridBaseSlots {
    * @default Switch
    */
   baseSwitch: React.JSXElementConstructor<GridSlotProps['baseSwitch']>;
+  /**
+   * The custom Tabs component used in the grid.
+   * @default Tabs
+   */
+  baseTabs: React.JSXElementConstructor<GridSlotProps['baseTabs']>;
 }
 /**
  * Grid components React prop interface containing all the overridable components.