@mui/x-data-grid 8.11.2 → 8.12.0

package/esm/material/index.js

@@ -12,16 +12,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"];
 import * as React from 'react';
 import clsx from 'clsx';
 import useForkRef from '@mui/utils/useForkRef';
@@ -56,7 +59,11 @@ import MUIGrow from '@mui/material/Grow';
 import MUIPaper from '@mui/material/Paper';
 import MUIInputLabel from '@mui/material/InputLabel';
 import MUISkeleton from '@mui/material/Skeleton';
+import MUITabs from '@mui/material/Tabs';
+import MUITab from '@mui/material/Tab';
+import MUIToggleButton from '@mui/material/ToggleButton';
 import { forwardRef } from '@mui/x-internals/forwardRef';
+import useId from '@mui/utils/useId';
 import { GridAddIcon, GridArrowDownwardIcon, GridArrowUpwardIcon, GridCheckIcon, GridCloseIcon, GridColumnIcon, GridDragIcon, GridExpandMoreIcon, GridFilterAltIcon, GridFilterListIcon, GridKeyboardArrowRight, GridMoreVertIcon, GridRemoveIcon, GridSearchIcon, GridSeparatorIcon, GridTableRowsIcon, GridTripleDotsVerticalIcon, GridViewHeadlineIcon, GridViewStreamIcon, GridVisibilityOffIcon, GridViewColumnIcon, GridClearIcon, GridLoadIcon, GridDeleteForeverIcon, GridDownloadIcon } from "./icons/index.js";
 import { GridColumnUnsortedIcon } from "../components/GridColumnUnsortedIcon.js";
 import { useGridApiContext } from "../hooks/utils/useGridApiContext.js";
@@ -134,7 +141,7 @@ const BaseSelect = forwardRef(function BaseSelect(props, ref) {
       style,
       fullWidth
     } = props,
-    rest = _objectWithoutPropertiesLoose(props, _excluded);
+    other = _objectWithoutPropertiesLoose(props, _excluded);
   const menuProps = {
     PaperProps: {
       onKeyDown
@@ -162,7 +169,7 @@ const BaseSelect = forwardRef(function BaseSelect(props, ref) {
       displayEmpty: true,
       onChange: onChange,
       variant: "outlined"
-    }, rest, {
+    }, other, {
       notched: true,
       inputProps: slotProps?.htmlInput,
       onOpen: onOpen,
@@ -194,7 +201,7 @@ const BasePagination = forwardRef(function BasePagination(props, ref) {
       material,
       disabled
     } = props,
-    rest = _objectWithoutPropertiesLoose(props, _excluded2);
+    other = _objectWithoutPropertiesLoose(props, _excluded2);
   const computedProps = React.useMemo(() => {
     if (!disabled) {
       return undefined;
@@ -223,7 +230,7 @@ const BasePagination = forwardRef(function BasePagination(props, ref) {
       estimated: estimatedRowCount
     })),
     getItemAriaLabel: apiRef.current.getLocaleText('paginationItemAriaLabel')
-  }, computedProps, rest, material, {
+  }, computedProps, other, material, {
     ref: ref
   }));
 });
@@ -232,8 +239,8 @@ const BaseBadge = forwardRef(function BaseBadge(props, ref) {
   const {
       material
     } = props,
-    rest = _objectWithoutPropertiesLoose(props, _excluded3);
-  return /*#__PURE__*/_jsx(MUIBadge, _extends({}, rest, material, {
+    other = _objectWithoutPropertiesLoose(props, _excluded3);
+  return /*#__PURE__*/_jsx(MUIBadge, _extends({}, other, material, {
     ref: ref
   }));
 });
@@ -287,8 +294,8 @@ const BaseCircularProgress = forwardRef(function BaseCircularProgress(props, ref
   const {
       material
     } = props,
-    rest = _objectWithoutPropertiesLoose(props, _excluded5);
-  return /*#__PURE__*/_jsx(MUICircularProgress, _extends({}, rest, material, {
+    other = _objectWithoutPropertiesLoose(props, _excluded5);
+  return /*#__PURE__*/_jsx(MUICircularProgress, _extends({}, other, material, {
     ref: ref
   }));
 });
@@ -297,8 +304,8 @@ const BaseDivider = forwardRef(function BaseDivider(props, ref) {
   const {
       material
     } = props,
-    rest = _objectWithoutPropertiesLoose(props, _excluded6);
-  return /*#__PURE__*/_jsx(MUIDivider, _extends({}, rest, material, {
+    other = _objectWithoutPropertiesLoose(props, _excluded6);
+  return /*#__PURE__*/_jsx(MUIDivider, _extends({}, other, material, {
     ref: ref
   }));
 });
@@ -307,8 +314,8 @@ const BaseLinearProgress = forwardRef(function BaseLinearProgress(props, ref) {
   const {
       material
     } = props,
-    rest = _objectWithoutPropertiesLoose(props, _excluded7);
-  return /*#__PURE__*/_jsx(MUILinearProgress, _extends({}, rest, material, {
+    other = _objectWithoutPropertiesLoose(props, _excluded7);
+  return /*#__PURE__*/_jsx(MUILinearProgress, _extends({}, other, material, {
     ref: ref
   }));
 });
@@ -317,18 +324,37 @@ const BaseButton = forwardRef(function BaseButton(props, ref) {
   const {
       material
     } = props,
-    rest = _objectWithoutPropertiesLoose(props, _excluded8);
-  return /*#__PURE__*/_jsx(MUIButton, _extends({}, rest, material, {
+    other = _objectWithoutPropertiesLoose(props, _excluded8);
+  return /*#__PURE__*/_jsx(MUIButton, _extends({}, other, material, {
     ref: ref
   }));
 });
 if (process.env.NODE_ENV !== "production") BaseButton.displayName = "BaseButton";
-const BaseChip = forwardRef(function BaseChip(props, ref) {
+const StyledToggleButton = styled(MUIToggleButton)(({
+  theme
+}) => ({
+  gap: theme.spacing(1),
+  border: 0
+}));
+const BaseToggleButton = forwardRef(function BaseToggleButton(props, ref) {
   const {
       material
     } = props,
     rest = _objectWithoutPropertiesLoose(props, _excluded9);
-  return /*#__PURE__*/_jsx(MUIChip, _extends({}, rest, material, {
+  return /*#__PURE__*/_jsx(StyledToggleButton, _extends({
+    size: "small",
+    color: "primary"
+  }, rest, material, {
+    ref: ref
+  }));
+});
+if (process.env.NODE_ENV !== "production") BaseToggleButton.displayName = "BaseToggleButton";
+const BaseChip = forwardRef(function BaseChip(props, ref) {
+  const {
+      material
+    } = props,
+    other = _objectWithoutPropertiesLoose(props, _excluded0);
+  return /*#__PURE__*/_jsx(MUIChip, _extends({}, other, material, {
     ref: ref
   }));
 });
@@ -337,8 +363,8 @@ const BaseIconButton = forwardRef(function BaseIconButton(props, ref) {
   const {
       material
     } = props,
-    rest = _objectWithoutPropertiesLoose(props, _excluded0);
-  return /*#__PURE__*/_jsx(MUIIconButton, _extends({}, rest, material, {
+    other = _objectWithoutPropertiesLoose(props, _excluded1);
+  return /*#__PURE__*/_jsx(MUIIconButton, _extends({}, other, material, {
     ref: ref
   }));
 });
@@ -347,8 +373,8 @@ const BaseTooltip = forwardRef(function BaseTooltip(props, ref) {
   const {
       material
     } = props,
-    rest = _objectWithoutPropertiesLoose(props, _excluded1);
-  return /*#__PURE__*/_jsx(MUITooltip, _extends({}, rest, material, {
+    other = _objectWithoutPropertiesLoose(props, _excluded10);
+  return /*#__PURE__*/_jsx(MUITooltip, _extends({}, other, material, {
     ref: ref
   }));
 });
@@ -357,8 +383,8 @@ const BaseSkeleton = forwardRef(function BaseSkeleton(props, ref) {
   const {
       material
     } = props,
-    rest = _objectWithoutPropertiesLoose(props, _excluded10);
-  return /*#__PURE__*/_jsx(MUISkeleton, _extends({}, rest, material, {
+    other = _objectWithoutPropertiesLoose(props, _excluded11);
+  return /*#__PURE__*/_jsx(MUISkeleton, _extends({}, other, material, {
     ref: ref
   }));
 });
@@ -369,16 +395,16 @@ const BaseSwitch = forwardRef(function BaseSwitch(props, ref) {
       label,
       className
     } = props,
-    rest = _objectWithoutPropertiesLoose(props, _excluded11);
+    other = _objectWithoutPropertiesLoose(props, _excluded12);
   if (!label) {
-    return /*#__PURE__*/_jsx(MUISwitch, _extends({}, rest, material, {
+    return /*#__PURE__*/_jsx(MUISwitch, _extends({}, other, material, {
       className: className,
       ref: ref
     }));
   }
   return /*#__PURE__*/_jsx(FormControlLabel, {
     className: className,
-    control: /*#__PURE__*/_jsx(MUISwitch, _extends({}, rest, material, {
+    control: /*#__PURE__*/_jsx(MUISwitch, _extends({}, other, material, {
       ref: ref
     })),
     label: label
@@ -389,8 +415,8 @@ const BaseMenuList = forwardRef(function BaseMenuList(props, ref) {
   const {
       material
     } = props,
-    rest = _objectWithoutPropertiesLoose(props, _excluded12);
-  return /*#__PURE__*/_jsx(MUIMenuList, _extends({}, rest, material, {
+    other = _objectWithoutPropertiesLoose(props, _excluded13);
+  return /*#__PURE__*/_jsx(MUIMenuList, _extends({}, other, material, {
     ref: ref
   }));
 });
@@ -403,7 +429,7 @@ function BaseMenuItem(props) {
       children,
       material
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded13);
+    other = _objectWithoutPropertiesLoose(props, _excluded14);
   if (inert) {
     other.disableRipple = true;
   }
@@ -422,10 +448,10 @@ function BaseTextField(props) {
       slotProps,
       material
     } = props,
-    rest = _objectWithoutPropertiesLoose(props, _excluded14);
+    other = _objectWithoutPropertiesLoose(props, _excluded15);
   return /*#__PURE__*/_jsx(MUITextField, _extends({
     variant: "outlined"
-  }, rest, material, {
+  }, other, material, {
     inputProps: slotProps?.htmlInput,
     InputProps: transformInputProps(slotProps?.input),
     InputLabelProps: _extends({
@@ -449,7 +475,7 @@ function BaseAutocomplete(props) {
       slotProps,
       material
     } = props,
-    rest = _objectWithoutPropertiesLoose(props, _excluded15);
+    other = _objectWithoutPropertiesLoose(props, _excluded16);
   return /*#__PURE__*/_jsx(MUIAutocomplete, _extends({
     id: id,
     multiple: multiple,
@@ -466,7 +492,7 @@ function BaseAutocomplete(props) {
         {
           key
         } = _getTagProps,
-        tagProps = _objectWithoutPropertiesLoose(_getTagProps, _excluded16);
+        tagProps = _objectWithoutPropertiesLoose(_getTagProps, _excluded17);
       return /*#__PURE__*/_jsx(MUIChip, _extends({
         variant: "outlined",
         size: "small",
@@ -479,7 +505,7 @@ function BaseAutocomplete(props) {
           InputProps,
           InputLabelProps
         } = params,
-        inputRest = _objectWithoutPropertiesLoose(params, _excluded17);
+        inputRest = _objectWithoutPropertiesLoose(params, _excluded18);
       return /*#__PURE__*/_jsx(MUITextField, _extends({}, inputRest, {
         label: label,
         placeholder: placeholder,
@@ -490,7 +516,7 @@ function BaseAutocomplete(props) {
         }, InputLabelProps)
       }, slotProps?.textField, rootProps.slotProps?.baseTextField));
     }
-  }, rest, material));
+  }, other, material));
 }
 function BaseInput(props) {
   return /*#__PURE__*/_jsx(MUIInputBase, _extends({}, transformInputProps(props)));
@@ -503,8 +529,8 @@ function transformInputProps(props, wrapAdornments = true) {
       slotProps,
       material
     } = props,
-    rest = _objectWithoutPropertiesLoose(props, _excluded18);
-  const result = rest;
+    other = _objectWithoutPropertiesLoose(props, _excluded19);
+  const result = other;
   if (wrapAdornments) {
     if (result.startAdornment) {
       result.startAdornment = /*#__PURE__*/_jsx(InputAdornment, {
@@ -552,7 +578,7 @@ function BasePopper(props) {
       placement,
       material
     } = props,
-    rest = _objectWithoutPropertiesLoose(props, _excluded19);
+    other = _objectWithoutPropertiesLoose(props, _excluded20);
   const modifiers = React.useMemo(() => {
     const result = [{
       name: 'preventOverflow',
@@ -614,7 +640,7 @@ function BasePopper(props) {
     transition: transition,
     placement: placement,
     modifiers: modifiers
-  }, rest, material, {
+  }, other, material, {
     children: content
   }));
 }
@@ -650,12 +676,82 @@ function BaseSelectOption(_ref) {
   let {
       native
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded20);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded21);
   if (native) {
     return /*#__PURE__*/_jsx("option", _extends({}, props));
   }
   return /*#__PURE__*/_jsx(MUIMenuItem, _extends({}, props));
 }
+const StyledTabs = styled(MUITabs, {
+  name: 'MuiDataGrid',
+  slot: 'Tabs'
+})(({
+  theme
+}) => ({
+  borderBottom: `1px solid ${theme.palette.divider}`
+}));
+const StyledTab = styled(MUITab, {
+  name: 'MuiDataGrid',
+  slot: 'Tab'
+})({
+  flex: 1,
+  minWidth: 'fit-content'
+});
+const StyledTabPanel = styled('div', {
+  name: 'MuiDataGrid',
+  slot: 'TabPanel'
+})({
+  flex: 1,
+  display: 'flex',
+  flexDirection: 'column',
+  overflow: 'hidden'
+});
+function TabPanel(props) {
+  const {
+      children,
+      active
+    } = props,
+    other = _objectWithoutPropertiesLoose(props, _excluded22);
+  return /*#__PURE__*/_jsx(StyledTabPanel, _extends({
+    role: "tabpanel",
+    style: {
+      display: active ? 'flex' : 'none'
+    }
+  }, other, {
+    children: children
+  }));
+}
+function BaseTabs(_ref2) {
+  let {
+      items,
+      value,
+      material
+    } = _ref2,
+    props = _objectWithoutPropertiesLoose(_ref2, _excluded23);
+  const id = useId();
+  const labelId = `${id}-tab-${value}`;
+  const panelId = `${id}-tabpanel-${value}`;
+  return /*#__PURE__*/_jsxs(React.Fragment, {
+    children: [/*#__PURE__*/_jsx(StyledTabs, _extends({}, props, {
+      value: value,
+      variant: "scrollable",
+      scrollButtons: "auto"
+    }, material, {
+      children: items.map(item => /*#__PURE__*/_jsx(StyledTab, {
+        value: item.value,
+        label: item.label,
+        id: labelId,
+        "aria-controls": panelId
+      }, item.value))
+    })), items.map(item => /*#__PURE__*/_jsx(TabPanel, {
+      value: item.value,
+      active: value === item.value,
+      id: panelId,
+      "aria-labelledby": labelId,
+      children: item.children
+    }, item.value))]
+  });
+}
 const iconSlots = {
   booleanCellTrueIcon: GridCheckIcon,
   booleanCellFalseIcon: GridCloseIcon,
@@ -709,7 +805,9 @@ const baseSlots = {
   baseTextField: BaseTextField,
   baseButton: BaseButton,
   baseIconButton: BaseIconButton,
+  baseToggleButton: BaseToggleButton,
   baseTooltip: BaseTooltip,
+  baseTabs: BaseTabs,
   basePagination: BasePagination,
   basePopper: BasePopper,
   baseSelect: BaseSelect,

package/esm/material/variables.js

@@ -97,7 +97,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/esm/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/esm/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/esm/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/esm/models/configuration/gridAggregationConfiguration.js

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

package/esm/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/esm/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/esm/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/esm/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/esm/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.

package/esm/models/gridSlotsComponentsProps.d.ts

@@ -18,7 +18,7 @@ import type { GridLoadingOverlayProps } from "../components/GridLoadingOverlay.j
 import type { GridRowCountProps } from "../components/GridRowCount.js";
 import type { GridColumnHeaderSortIconProps } from "../components/columnHeaders/GridColumnHeaderSortIcon.js";
 import type { GridBottomContainerProps } from "../components/virtualization/GridBottomContainer.js";
-import type { AutocompleteProps, BadgeProps, ButtonProps, CheckboxProps, ChipProps, CircularProgressProps, DividerProps, IconButtonProps, InputProps, LinearProgressProps, MenuListProps, MenuItemProps, PaginationProps, PopperProps, SelectProps, SelectOptionProps, SkeletonProps, SwitchProps, TooltipProps, TextFieldProps, IconProps } from "./gridBaseSlots.js";
+import type { AutocompleteProps, BadgeProps, ButtonProps, CheckboxProps, ChipProps, CircularProgressProps, DividerProps, IconButtonProps, InputProps, LinearProgressProps, MenuListProps, MenuItemProps, PaginationProps, PopperProps, SelectProps, SelectOptionProps, SkeletonProps, SwitchProps, TooltipProps, TextFieldProps, IconProps, TabsProps, ToggleButtonProps } from "./gridBaseSlots.js";
 type RootProps = React.HTMLAttributes<HTMLDivElement> & Record<`data-${string}`, string>;
 type MainProps = React.HTMLAttributes<HTMLDivElement> & Record<`data-${string}`, string>;
 export interface BaseAutocompletePropsOverrides {}
@@ -30,6 +30,7 @@ export interface BaseDividerPropsOverrides {}
 export interface BaseLinearProgressPropsOverrides {}
 export interface BaseMenuListPropsOverrides {}
 export interface BaseMenuItemPropsOverrides {}
+export interface BaseTabsPropsOverrides {}
 export interface BaseTextFieldPropsOverrides {}
 export interface BaseSelectPropsOverrides {}
 export interface BaseSwitchPropsOverrides {}
@@ -43,6 +44,7 @@ export interface BaseInputLabelPropsOverrides {}
 export interface BaseSelectOptionPropsOverrides {}
 export interface BaseSkeletonPropsOverrides {}
 export interface BaseIconPropsOverrides {}
+export interface BaseToggleButtonPropsOverrides {}
 export interface CellPropsOverrides {}
 export interface ToolbarPropsOverrides {}
 export interface ColumnHeaderFilterIconButtonPropsOverrides {}
@@ -74,10 +76,12 @@ interface BaseSlotProps {
   baseLinearProgress: LinearProgressProps & BaseLinearProgressPropsOverrides;
   baseMenuList: MenuListProps & BaseMenuListPropsOverrides;
   baseMenuItem: MenuItemProps & BaseMenuItemPropsOverrides;
+  baseTabs: TabsProps & BaseTabsPropsOverrides;
   baseTextField: TextFieldProps & BaseTextFieldPropsOverrides;
   baseSwitch: SwitchProps & BaseSwitchPropsOverrides;
   baseButton: ButtonProps & BaseButtonPropsOverrides;
   baseIconButton: IconButtonProps & BaseIconButtonPropsOverrides;
+  baseToggleButton: ToggleButtonProps & BaseToggleButtonPropsOverrides;
   basePagination: PaginationProps & BasePaginationPropsOverrides;
   basePopper: PopperProps & BasePopperPropsOverrides;
   baseTooltip: TooltipProps & BaseTooltipPropsOverrides;