@mui/x-data-grid 8.11.3 → 8.12.0

package/locales/zhCN.js

@@ -41,6 +41,9 @@ const zhCNGrid = {
   // Toolbar pivot button
   // toolbarPivot: 'Pivot',
 
+  // Toolbar charts button
+  // toolbarCharts: 'Charts',
+
   // Toolbar AI Assistant button
   // toolbarAssistant: 'AI Assistant',
 
@@ -121,6 +124,7 @@ const zhCNGrid = {
   columnMenuSortAsc: '升序',
   columnMenuSortDesc: '降序',
   // columnMenuManagePivot: 'Manage pivot',
+  // columnMenuManageCharts: 'Manage charts',
 
   // Column header text
   columnHeaderFiltersTooltipActive: count => count !== 1 ? `${count} 个筛选器` : `${count} 个筛选器`,
@@ -189,6 +193,7 @@ const zhCNGrid = {
   rowReorderingHeaderName: '重新排列行',
   // Aggregation
   aggregationMenuItemHeader: '集合',
+  // aggregationFunctionLabelNone: 'none',
   aggregationFunctionLabelSum: '总数',
   aggregationFunctionLabelAvg: '平均',
   aggregationFunctionLabelMin: '最小',
@@ -223,6 +228,32 @@ const zhCNGrid = {
   // pivotYearColumnHeaderName: '(Year)',
   // pivotQuarterColumnHeaderName: '(Quarter)',
 
+  // Charts configuration panel
+  // chartsNoCharts: 'There are no charts available',
+  // chartsChartNotSelected: 'Select a chart type to configure its options',
+  // chartsTabChart: 'Chart',
+  // chartsTabFields: 'Fields',
+  // chartsTabCustomize: 'Customize',
+  // chartsCloseButton: 'Close charts configuration',
+  // chartsSyncButtonLabel: 'Sync chart',
+  // chartsSearchPlaceholder: 'Search fields',
+  // chartsSearchLabel: 'Search fields',
+  // chartsSearchClear: 'Clear search',
+  // chartsNoFields: 'No fields',
+  // chartsFieldBlocked: 'This field cannot be added to any section',
+  // chartsCategories: 'Categories',
+  // chartsSeries: 'Series',
+  // chartsMenuAddToDimensions: (dimensionLabel: string) => `Add to ${dimensionLabel}`,
+  // chartsMenuAddToValues: (valuesLabel: string) => `Add to ${valuesLabel}`,
+  // chartsMenuMoveUp: 'Move up',
+  // chartsMenuMoveDown: 'Move down',
+  // chartsMenuMoveToTop: 'Move to top',
+  // chartsMenuMoveToBottom: 'Move to bottom',
+  // chartsMenuOptions: 'Field options',
+  // chartsMenuRemove: 'Remove',
+  // chartsDragToDimensions: (dimensionLabel: string) => `Drag here to use column as ${dimensionLabel}`,
+  // chartsDragToValues: (valuesLabel: string) => `Drag here to use column as ${valuesLabel}`,
+
   // AI Assistant panel
   // aiAssistantPanelTitle: 'AI Assistant',
   // aiAssistantPanelClose: 'Close AI Assistant',

package/locales/zhHK.js

@@ -41,6 +41,9 @@ const zhHKGrid = {
   // Toolbar pivot button
   // toolbarPivot: 'Pivot',
 
+  // Toolbar charts button
+  // toolbarCharts: 'Charts',
+
   // Toolbar AI Assistant button
   // toolbarAssistant: 'AI Assistant',
 
@@ -121,6 +124,7 @@ const zhHKGrid = {
   columnMenuSortAsc: '按升序排序',
   columnMenuSortDesc: '按降序排序',
   // columnMenuManagePivot: 'Manage pivot',
+  // columnMenuManageCharts: 'Manage charts',
 
   // Column header text
   columnHeaderFiltersTooltipActive: count => count !== 1 ? `${count} 個有效過濾器` : `${count} 個活動過濾器`,
@@ -189,6 +193,7 @@ const zhHKGrid = {
   rowReorderingHeaderName: '行重新排序',
   // Aggregation
   aggregationMenuItemHeader: '聚合',
+  // aggregationFunctionLabelNone: 'none',
   aggregationFunctionLabelSum: '和',
   aggregationFunctionLabelAvg: '平均',
   aggregationFunctionLabelMin: '分分鐘',
@@ -223,6 +228,32 @@ const zhHKGrid = {
   // pivotYearColumnHeaderName: '(Year)',
   // pivotQuarterColumnHeaderName: '(Quarter)',
 
+  // Charts configuration panel
+  // chartsNoCharts: 'There are no charts available',
+  // chartsChartNotSelected: 'Select a chart type to configure its options',
+  // chartsTabChart: 'Chart',
+  // chartsTabFields: 'Fields',
+  // chartsTabCustomize: 'Customize',
+  // chartsCloseButton: 'Close charts configuration',
+  // chartsSyncButtonLabel: 'Sync chart',
+  // chartsSearchPlaceholder: 'Search fields',
+  // chartsSearchLabel: 'Search fields',
+  // chartsSearchClear: 'Clear search',
+  // chartsNoFields: 'No fields',
+  // chartsFieldBlocked: 'This field cannot be added to any section',
+  // chartsCategories: 'Categories',
+  // chartsSeries: 'Series',
+  // chartsMenuAddToDimensions: (dimensionLabel: string) => `Add to ${dimensionLabel}`,
+  // chartsMenuAddToValues: (valuesLabel: string) => `Add to ${valuesLabel}`,
+  // chartsMenuMoveUp: 'Move up',
+  // chartsMenuMoveDown: 'Move down',
+  // chartsMenuMoveToTop: 'Move to top',
+  // chartsMenuMoveToBottom: 'Move to bottom',
+  // chartsMenuOptions: 'Field options',
+  // chartsMenuRemove: 'Remove',
+  // chartsDragToDimensions: (dimensionLabel: string) => `Drag here to use column as ${dimensionLabel}`,
+  // chartsDragToValues: (valuesLabel: string) => `Drag here to use column as ${valuesLabel}`,
+
   // AI Assistant panel
   // aiAssistantPanelTitle: 'AI Assistant',
   // aiAssistantPanelClose: 'Close AI Assistant',

package/locales/zhTW.js

@@ -41,6 +41,9 @@ const zhTWGrid = {
   // Toolbar pivot button
   // toolbarPivot: 'Pivot',
 
+  // Toolbar charts button
+  // toolbarCharts: 'Charts',
+
   // Toolbar AI Assistant button
   // toolbarAssistant: 'AI Assistant',
 
@@ -121,6 +124,7 @@ const zhTWGrid = {
   columnMenuSortAsc: '升序',
   columnMenuSortDesc: '降序',
   // columnMenuManagePivot: 'Manage pivot',
+  // columnMenuManageCharts: 'Manage charts',
 
   // Column header text
   columnHeaderFiltersTooltipActive: count => `${count} 個篩選器`,
@@ -189,6 +193,7 @@ const zhTWGrid = {
   rowReorderingHeaderName: '排序',
   // Aggregation
   aggregationMenuItemHeader: '集合',
+  // aggregationFunctionLabelNone: 'none',
   aggregationFunctionLabelSum: '總數',
   aggregationFunctionLabelAvg: '平均數',
   aggregationFunctionLabelMin: '最小',
@@ -223,6 +228,32 @@ const zhTWGrid = {
   // pivotYearColumnHeaderName: '(Year)',
   // pivotQuarterColumnHeaderName: '(Quarter)',
 
+  // Charts configuration panel
+  // chartsNoCharts: 'There are no charts available',
+  // chartsChartNotSelected: 'Select a chart type to configure its options',
+  // chartsTabChart: 'Chart',
+  // chartsTabFields: 'Fields',
+  // chartsTabCustomize: 'Customize',
+  // chartsCloseButton: 'Close charts configuration',
+  // chartsSyncButtonLabel: 'Sync chart',
+  // chartsSearchPlaceholder: 'Search fields',
+  // chartsSearchLabel: 'Search fields',
+  // chartsSearchClear: 'Clear search',
+  // chartsNoFields: 'No fields',
+  // chartsFieldBlocked: 'This field cannot be added to any section',
+  // chartsCategories: 'Categories',
+  // chartsSeries: 'Series',
+  // chartsMenuAddToDimensions: (dimensionLabel: string) => `Add to ${dimensionLabel}`,
+  // chartsMenuAddToValues: (valuesLabel: string) => `Add to ${valuesLabel}`,
+  // chartsMenuMoveUp: 'Move up',
+  // chartsMenuMoveDown: 'Move down',
+  // chartsMenuMoveToTop: 'Move to top',
+  // chartsMenuMoveToBottom: 'Move to bottom',
+  // chartsMenuOptions: 'Field options',
+  // chartsMenuRemove: 'Remove',
+  // chartsDragToDimensions: (dimensionLabel: string) => `Drag here to use column as ${dimensionLabel}`,
+  // chartsDragToValues: (valuesLabel: string) => `Drag here to use column as ${valuesLabel}`,
+
   // AI Assistant panel
   // aiAssistantPanelTitle: 'AI Assistant',
   // aiAssistantPanelClose: 'Close AI Assistant',

package/material/augmentation.d.ts

@@ -17,6 +17,8 @@ import type { TooltipProps } from '@mui/material/Tooltip';
 import type { InputProps } from '@mui/material/Input';
 import type { SelectProps } from '@mui/material/Select';
 import type { SkeletonProps } from '@mui/material/Skeleton';
+import type { ToggleButtonProps } from '@mui/material/ToggleButton';
+import type { TabsProps } from '@mui/material/Tabs';
 declare module '@mui/x-data-grid' {
   interface BaseAutocompletePropsOverrides {
     material?: Partial<AutocompleteProps<string, true, false, true>>;
@@ -54,6 +56,12 @@ declare module '@mui/x-data-grid' {
   interface BaseButtonPropsOverrides {
     material?: Partial<ButtonProps>;
   }
+  interface BaseToggleButtonPropsOverrides {
+    material?: Partial<ToggleButtonProps>;
+  }
+  interface BaseTabsPropsOverrides {
+    material?: Partial<TabsProps>;
+  }
   interface BaseIconButtonPropsOverrides {
     material?: Partial<IconButtonProps>;
   }

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)(({
@@ -336,11 +343,30 @@ const BaseButton = (0, _forwardRef.forwardRef)(function BaseButton(props, ref) {
   }));
 });
 if (process.env.NODE_ENV !== "production") BaseButton.displayName = "BaseButton";
+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)(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, _excluded9);
+    other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded0);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Chip.default, (0, _extends2.default)({}, other, material, {
     ref: ref
   }));
@@ -350,7 +376,7 @@ const BaseIconButton = (0, _forwardRef.forwardRef)(function BaseIconButton(props
   const {
       material
     } = props,
-    other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded0);
+    other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded1);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconButton.default, (0, _extends2.default)({}, other, material, {
     ref: ref
   }));
@@ -360,7 +386,7 @@ const BaseTooltip = (0, _forwardRef.forwardRef)(function BaseTooltip(props, ref)
   const {
       material
     } = props,
-    other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded1);
+    other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded10);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Tooltip.default, (0, _extends2.default)({}, other, material, {
     ref: ref
   }));
@@ -370,7 +396,7 @@ const BaseSkeleton = (0, _forwardRef.forwardRef)(function BaseSkeleton(props, re
   const {
       material
     } = props,
-    other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded10);
+    other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded11);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Skeleton.default, (0, _extends2.default)({}, other, material, {
     ref: ref
   }));
@@ -382,7 +408,7 @@ const BaseSwitch = (0, _forwardRef.forwardRef)(function BaseSwitch(props, ref) {
       label,
       className
     } = props,
-    other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded11);
+    other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded12);
   if (!label) {
     return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Switch.default, (0, _extends2.default)({}, other, material, {
       className: className,
@@ -402,7 +428,7 @@ const BaseMenuList = (0, _forwardRef.forwardRef)(function BaseMenuList(props, re
   const {
       material
     } = props,
-    other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded12);
+    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,7 +461,7 @@ function BaseTextField(props) {
       slotProps,
       material
     } = props,
-    other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded14);
+    other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded15);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_TextField.default, (0, _extends2.default)({
     variant: "outlined"
   }, other, material, {
@@ -462,7 +488,7 @@ function BaseAutocomplete(props) {
       slotProps,
       material
     } = props,
-    other = (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,
@@ -516,7 +542,7 @@ function transformInputProps(props, wrapAdornments = true) {
       slotProps,
       material
     } = props,
-    other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded18);
+    other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded19);
   const result = other;
   if (wrapAdornments) {
     if (result.startAdornment) {
@@ -565,7 +591,7 @@ function BasePopper(props) {
       placement,
       material
     } = props,
-    other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded19);
+    other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded20);
   const modifiers = React.useMemo(() => {
     const result = [{
       name: 'preventOverflow',
@@ -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/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/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.