@mui/x-data-grid 8.0.0-alpha.4 → 8.0.0-alpha.5

package/modern/components/toolbar/GridToolbarQuickFilter.js

@@ -8,6 +8,7 @@ import TextField from '@mui/material/TextField';
 import { styled } from '@mui/material/styles';
 import { unstable_debounce as debounce } from '@mui/utils';
 import composeClasses from '@mui/utils/composeClasses';
+import { outlinedInputClasses } from '@mui/material/OutlinedInput';
 import { getDataGridUtilityClass } from "../../constants/index.js";
 import { useGridApiContext } from "../../hooks/utils/useGridApiContext.js";
 import { useGridRootProps } from "../../hooks/utils/useGridRootProps.js";
@@ -31,13 +32,8 @@ const GridToolbarQuickFilterRoot = styled(TextField, {
 })(({
   theme
 }) => ({
-  width: 'auto',
-  paddingBottom: theme.spacing(0.5),
-  '& input': {
-    marginLeft: theme.spacing(0.5)
-  },
-  '& .MuiInput-underline:before': {
-    borderBottom: `1px solid ${(theme.vars || theme).palette.divider}`
+  [`.${outlinedInputClasses.root}`]: {
+    fontSize: theme.typography.body2.fontSize
   },
   [`& input[type="search"]::-webkit-search-decoration,
   & input[type="search"]::-webkit-search-cancel-button,
@@ -91,7 +87,8 @@ function GridToolbarQuickFilter(props) {
   return /*#__PURE__*/_jsx(GridToolbarQuickFilterRoot, _extends({
     as: rootProps.slots.baseTextField,
     ownerState: rootProps,
-    variant: "standard",
+    variant: "outlined",
+    size: "small",
     value: searchValue,
     onChange: handleSearchValueChange,
     className: clsx(classes.root, className),
@@ -100,23 +97,30 @@ function GridToolbarQuickFilter(props) {
     type: "search"
   }, other, {
     InputProps: _extends({
-      startAdornment: /*#__PURE__*/_jsx(rootProps.slots.quickFilterIcon, {
-        fontSize: "small"
-      }),
-      endAdornment: /*#__PURE__*/_jsx(rootProps.slots.baseIconButton, _extends({
-        "aria-label": apiRef.current.getLocaleText('toolbarQuickFilterDeleteIconLabel'),
-        size: "small",
-        sx: [searchValue ? {
-          visibility: 'visible'
-        } : {
-          visibility: 'hidden'
-        }],
-        onClick: handleSearchReset
-      }, rootProps.slotProps?.baseIconButton, {
-        children: /*#__PURE__*/_jsx(rootProps.slots.quickFilterClearIcon, {
+      startAdornment: /*#__PURE__*/_jsx(rootProps.slots.baseInputAdornment, {
+        position: "start",
+        children: /*#__PURE__*/_jsx(rootProps.slots.quickFilterIcon, {
           fontSize: "small"
         })
-      }))
+      }),
+      endAdornment: /*#__PURE__*/_jsx(rootProps.slots.baseInputAdornment, {
+        position: "end",
+        children: /*#__PURE__*/_jsx(rootProps.slots.baseIconButton, _extends({
+          "aria-label": apiRef.current.getLocaleText('toolbarQuickFilterDeleteIconLabel'),
+          size: "small",
+          edge: "end",
+          sx: [searchValue ? {
+            visibility: 'visible'
+          } : {
+            visibility: 'hidden'
+          }],
+          onClick: handleSearchReset
+        }, rootProps.slotProps?.baseIconButton, {
+          children: /*#__PURE__*/_jsx(rootProps.slots.quickFilterClearIcon, {
+            fontSize: "small"
+          })
+        }))
+      })
     }, other.InputProps)
   }, rootProps.slotProps?.baseTextField));
 }

package/modern/components/virtualization/GridMainContainer.js

@@ -30,7 +30,7 @@ export const GridMainContainer = /*#__PURE__*/React.forwardRef((props, ref) => {
     ownerState: rootProps,
     className: props.className,
     tabIndex: -1
-  }, ariaAttributes, {
+  }, ariaAttributes, rootProps.slotProps?.main, {
     children: [/*#__PURE__*/_jsx(GridPanelAnchor, {
       role: "presentation",
       "data-id": "gridPanelAnchor"

package/modern/hooks/features/columnHeaders/useGridColumnHeaders.js

@@ -47,7 +47,7 @@ export const useGridColumnHeaders = props => {
   const isRtl = useRtl();
   const rootProps = useGridRootProps();
   const dimensions = useGridSelector(apiRef, gridDimensionsSelector);
-  const hasVirtualization = useGridSelector(apiRef, gridVirtualizationColumnEnabledSelector);
+  const hasColumnVirtualization = useGridSelector(apiRef, gridVirtualizationColumnEnabledSelector);
   const columnGroupsModel = useGridSelector(apiRef, gridColumnGroupsUnwrappedModelSelector);
   const columnPositions = useGridSelector(apiRef, gridColumnPositionsSelector);
   const renderContext = useGridSelector(apiRef, gridRenderContextColumnsSelector);
@@ -87,8 +87,15 @@ export const useGridColumnHeaders = props => {
       renderContext: currentContext = renderContext,
       maxLastColumn = visibleColumns.length
     } = params || {};
-    const firstColumnToRender = currentContext.firstColumnIndex;
-    const lastColumnToRender = !hasVirtualization ? maxLastColumn : currentContext.lastColumnIndex;
+    let firstColumnToRender;
+    let lastColumnToRender;
+    if (!rootProps.disableVirtualization && !hasColumnVirtualization) {
+      firstColumnToRender = 0;
+      lastColumnToRender = maxLastColumn;
+    } else {
+      firstColumnToRender = currentContext.firstColumnIndex;
+      lastColumnToRender = currentContext.lastColumnIndex;
+    }
     const renderedColumns = visibleColumns.slice(firstColumnToRender, lastColumnToRender);
     return {
       renderedColumns,

package/modern/hooks/features/columnResize/gridColumnResizeApi.js

@@ -2,7 +2,8 @@ export const DEFAULT_GRID_AUTOSIZE_OPTIONS = {
   includeHeaders: true,
   includeOutliers: false,
   outliersFactor: 1.5,
-  expand: false
+  expand: false,
+  disableColumnVirtualization: true
 };
 
 /**

package/modern/hooks/features/columnResize/useGridColumnResize.js

@@ -460,6 +460,7 @@ export const useGridColumnResize = (apiRef, props) => {
       return;
     }
     apiRef.current.autosizeColumns(_extends({}, props.autosizeOptions, {
+      disableColumnVirtualization: false,
       columns: [column.field]
     }));
   });
@@ -486,8 +487,10 @@ export const useGridColumnResize = (apiRef, props) => {
     options.columns = options.columns.filter(c => state.columnVisibilityModel[c] !== false);
     const columns = options.columns.map(c => apiRef.current.state.columns.lookup[c]);
     try {
-      apiRef.current.unstable_setColumnVirtualization(false);
-      await columnVirtualizationDisabled();
+      if (!props.disableVirtualization && options.disableColumnVirtualization) {
+        apiRef.current.unstable_setColumnVirtualization(false);
+        await columnVirtualizationDisabled();
+      }
       const widthByField = extractColumnWidths(apiRef, options, columns);
       const newColumns = columns.map(column => _extends({}, column, {
         width: widthByField[column.field],
@@ -519,10 +522,12 @@ export const useGridColumnResize = (apiRef, props) => {
         }
       });
     } finally {
-      apiRef.current.unstable_setColumnVirtualization(true);
+      if (!props.disableVirtualization) {
+        apiRef.current.unstable_setColumnVirtualization(true);
+      }
       isAutosizingRef.current = false;
     }
-  }, [apiRef, columnVirtualizationDisabled]);
+  }, [apiRef, columnVirtualizationDisabled, props.disableVirtualization]);
 
   /**
    * EFFECTS

package/modern/hooks/features/columns/gridColumnsUtils.js

@@ -319,6 +319,7 @@ export function getTotalHeaderHeight(apiRef, props) {
   const maxDepth = gridColumnGroupsHeaderMaxDepthSelector(apiRef);
   const isHeaderFilteringEnabled = gridHeaderFilteringEnabledSelector(apiRef);
   const columnHeadersHeight = Math.floor(props.columnHeaderHeight * densityFactor);
+  const columnGroupHeadersHeight = Math.floor((props.columnGroupHeaderHeight ?? props.columnHeaderHeight) * densityFactor);
   const filterHeadersHeight = isHeaderFilteringEnabled ? Math.floor((props.headerFilterHeight ?? props.columnHeaderHeight) * densityFactor) : 0;
-  return columnHeadersHeight * (1 + (maxDepth ?? 0)) + filterHeadersHeight;
+  return columnHeadersHeight + columnGroupHeadersHeight * maxDepth + filterHeadersHeight;
 }

package/modern/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-data-grid v8.0.0-alpha.4
+ * @mui/x-data-grid v8.0.0-alpha.5
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/modern/internals/utils/index.js

@@ -1,4 +1,3 @@
 export * from "./computeSlots.js";
-export * from "./useProps.js";
 export * from "./propValidation.js";
 export * from "./gridRowGroupingUtils.js";

package/modern/locales/koKR.js

@@ -24,16 +24,15 @@ const koKRGrid = {
   toolbarQuickFilterLabel: '검색',
   toolbarQuickFilterDeleteIconLabel: '초기화',
   // Prompt toolbar field
-  // toolbarPromptControlPlaceholder: 'Type a prompt…',
-  // toolbarPromptControlWithRecordingPlaceholder: 'Type or record a prompt…',
-  // toolbarPromptControlRecordingPlaceholder: 'Listening for prompt…',
-  // toolbarPromptControlLabel: 'Prompt input',
-  // toolbarPromptControlRecordButtonDefaultLabel: 'Record',
-  // toolbarPromptControlRecordButtonActiveLabel: 'Stop recording',
-  // toolbarPromptControlSendActionLabel: 'Send',
-  // toolbarPromptControlSendActionAriaLabel: 'Send prompt',
-  // toolbarPromptControlErrorMessage: 'An error occurred while processing the request. Please try again with a different prompt.',
-
+  toolbarPromptControlPlaceholder: '프롬프트 입력…',
+  toolbarPromptControlWithRecordingPlaceholder: '프롬프트 입력 또는 녹음…',
+  toolbarPromptControlRecordingPlaceholder: '녹음 중…',
+  toolbarPromptControlLabel: '프롬프트 입력',
+  toolbarPromptControlRecordButtonDefaultLabel: '녹음',
+  toolbarPromptControlRecordButtonActiveLabel: '녹음 정지',
+  toolbarPromptControlSendActionLabel: '전송',
+  toolbarPromptControlSendActionAriaLabel: '프롬프트 전송',
+  toolbarPromptControlErrorMessage: '요청을 처리하는 동안 오류가 발생했습니다. 다른 프롬프트로 다시 시도하십시오.',
   // Export selector toolbar button text
   toolbarExport: '내보내기',
   toolbarExportLabel: '내보내기',
@@ -41,15 +40,14 @@ const koKRGrid = {
   toolbarExportPrint: '프린트',
   toolbarExportExcel: 'Excel로 내보내기',
   // Columns management text
-  // columnsManagementSearchTitle: 'Search',
-  // columnsManagementNoColumns: 'No columns',
-  // columnsManagementShowHideAllText: 'Show/Hide All',
-  // columnsManagementReset: 'Reset',
-  // columnsManagementDeleteIconLabel: 'Clear',
-
+  columnsManagementSearchTitle: '검색',
+  columnsManagementNoColumns: '열이 없습니다.',
+  columnsManagementShowHideAllText: '모두 보기/숨기기',
+  columnsManagementReset: '초기화',
+  columnsManagementDeleteIconLabel: '제거',
   // Filter panel text
   filterPanelAddFilter: '필터 추가',
-  // filterPanelRemoveAll: 'Remove all',
+  filterPanelRemoveAll: '모두 삭제',
   filterPanelDeleteIconLabel: '삭제',
   filterPanelLogicOperator: '논리 연산자',
   filterPanelOperator: '연산자',
@@ -60,9 +58,9 @@ const koKRGrid = {
   filterPanelInputPlaceholder: '값 입력',
   // Filter operators text
   filterOperatorContains: '포함하는',
-  // filterOperatorDoesNotContain: 'does not contain',
+  filterOperatorDoesNotContain: '포함하지 않는',
   filterOperatorEquals: '값이 같은',
-  // filterOperatorDoesNotEqual: 'does not equal',
+  filterOperatorDoesNotEqual: '값이 다른',
   filterOperatorStartsWith: '시작하는',
   filterOperatorEndsWith: '끝나는',
   filterOperatorIs: '~인',
@@ -74,36 +72,34 @@ const koKRGrid = {
   filterOperatorIsEmpty: '값이 없는',
   filterOperatorIsNotEmpty: '값이 있는',
   filterOperatorIsAnyOf: '값 중 하나인',
-  // 'filterOperator=': '=',
-  // 'filterOperator!=': '!=',
-  // 'filterOperator>': '>',
-  // 'filterOperator>=': '>=',
-  // 'filterOperator<': '<',
-  // 'filterOperator<=': '<=',
-
+  'filterOperator=': '=',
+  'filterOperator!=': '!=',
+  'filterOperator>': '>',
+  'filterOperator>=': '>=',
+  'filterOperator<': '<',
+  'filterOperator<=': '<=',
   // Header filter operators text
-  // headerFilterOperatorContains: 'Contains',
-  // headerFilterOperatorDoesNotContain: 'Does not contain',
-  // headerFilterOperatorEquals: 'Equals',
-  // headerFilterOperatorDoesNotEqual: 'Does not equal',
-  // headerFilterOperatorStartsWith: 'Starts with',
-  // headerFilterOperatorEndsWith: 'Ends with',
-  // headerFilterOperatorIs: 'Is',
-  // headerFilterOperatorNot: 'Is not',
-  // headerFilterOperatorAfter: 'Is after',
-  // headerFilterOperatorOnOrAfter: 'Is on or after',
-  // headerFilterOperatorBefore: 'Is before',
-  // headerFilterOperatorOnOrBefore: 'Is on or before',
-  // headerFilterOperatorIsEmpty: 'Is empty',
-  // headerFilterOperatorIsNotEmpty: 'Is not empty',
-  // headerFilterOperatorIsAnyOf: 'Is any of',
-  // 'headerFilterOperator=': 'Equals',
-  // 'headerFilterOperator!=': 'Not equals',
-  // 'headerFilterOperator>': 'Greater than',
-  // 'headerFilterOperator>=': 'Greater than or equal to',
-  // 'headerFilterOperator<': 'Less than',
-  // 'headerFilterOperator<=': 'Less than or equal to',
-
+  headerFilterOperatorContains: '포함하는',
+  headerFilterOperatorDoesNotContain: '포함하지 않는',
+  headerFilterOperatorEquals: '값이 같은',
+  headerFilterOperatorDoesNotEqual: '값이 다른',
+  headerFilterOperatorStartsWith: '시작하는',
+  headerFilterOperatorEndsWith: '끝나는',
+  headerFilterOperatorIs: '~인',
+  headerFilterOperatorNot: '~아닌',
+  headerFilterOperatorAfter: '더 이후',
+  headerFilterOperatorOnOrAfter: '이후',
+  headerFilterOperatorBefore: '더 이전',
+  headerFilterOperatorOnOrBefore: '이전',
+  headerFilterOperatorIsEmpty: '값이 없는',
+  headerFilterOperatorIsNotEmpty: '값이 있는',
+  headerFilterOperatorIsAnyOf: '값 중 하나인',
+  'headerFilterOperator=': '값이 같은',
+  'headerFilterOperator!=': '값이 다른',
+  'headerFilterOperator>': '더 큰',
+  'headerFilterOperator>=': '같거나 더 큰',
+  'headerFilterOperator<': '더 작은',
+  'headerFilterOperator<=': '같거나 더 작은',
   // Filter values text
   filterValueAny: '아무값',
   filterValueTrue: '참',
@@ -111,7 +107,7 @@ const koKRGrid = {
   // Column menu text
   columnMenuLabel: '메뉴',
   columnMenuShowColumns: '열 표시',
-  // columnMenuManageColumns: 'Manage columns',
+  columnMenuManageColumns: '열 관리',
   columnMenuFilter: '필터',
   columnMenuHideColumn: '열 숨기기',
   columnMenuUnsort: '정렬 해제',

package/modern/material/index.js

@@ -1,7 +1,12 @@
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
+const _excluded = ["inert", "iconStart", "iconEnd", "children"];
+import * as React from 'react';
 import MUIBadge from '@mui/material/Badge';
 import MUICheckbox from '@mui/material/Checkbox';
 import MUIDivider from '@mui/material/Divider';
+import MUIListItemIcon from '@mui/material/ListItemIcon';
+import MUIListItemText from '@mui/material/ListItemText';
 import MUIMenuList from '@mui/material/MenuList';
 import MUIMenuItem from '@mui/material/MenuItem';
 import MUITextField from '@mui/material/TextField';
@@ -17,6 +22,7 @@ import MUIChip from '@mui/material/Chip';
 import { GridColumnUnsortedIcon } from "./icons/GridColumnUnsortedIcon.js";
 import { GridAddIcon, GridArrowDownwardIcon, GridArrowUpwardIcon, GridCheckIcon, GridCloseIcon, GridColumnIcon, GridDragIcon, GridExpandMoreIcon, GridFilterAltIcon, GridFilterListIcon, GridKeyboardArrowRight, GridMoreVertIcon, GridRemoveIcon, GridSaveAltIcon, GridSearchIcon, GridSeparatorIcon, GridTableRowsIcon, GridTripleDotsVerticalIcon, GridViewHeadlineIcon, GridViewStreamIcon, GridVisibilityOffIcon, GridViewColumnIcon, GridClearIcon, GridLoadIcon, GridDeleteForeverIcon } from "./icons/index.js";
 import MUISelectOption from "./components/MUISelectOption.js";
+import { jsx as _jsx } from "react/jsx-runtime";
 const iconSlots = {
   booleanCellTrueIcon: GridCheckIcon,
   booleanCellFalseIcon: GridCloseIcon,
@@ -54,12 +60,12 @@ const iconSlots = {
   filterPanelRemoveAllIcon: GridDeleteForeverIcon,
   columnReorderIcon: GridDragIcon
 };
-const materialSlots = _extends({}, iconSlots, {
+const baseSlots = {
   baseBadge: MUIBadge,
   baseCheckbox: MUICheckbox,
   baseDivider: MUIDivider,
   baseMenuList: MUIMenuList,
-  baseMenuItem: MUIMenuItem,
+  baseMenuItem: BaseMenuItem,
   baseTextField: MUITextField,
   baseFormControl: MUIFormControl,
   baseSelect: MUISelect,
@@ -71,5 +77,25 @@ const materialSlots = _extends({}, iconSlots, {
   baseInputLabel: MUIInputLabel,
   baseSelectOption: MUISelectOption,
   baseChip: MUIChip
-});
-export default materialSlots;
+};
+const materialSlots = _extends({}, baseSlots, iconSlots);
+export default materialSlots;
+function BaseMenuItem(props) {
+  const {
+      inert,
+      iconStart,
+      iconEnd,
+      children
+    } = props,
+    other = _objectWithoutPropertiesLoose(props, _excluded);
+  if (inert) {
+    other.disableRipple = true;
+  }
+  return /*#__PURE__*/React.createElement(MUIMenuItem, other, [iconStart && /*#__PURE__*/_jsx(MUIListItemIcon, {
+    children: iconStart
+  }, "1"), /*#__PURE__*/_jsx(MUIListItemText, {
+    children: children
+  }, "2"), iconEnd && /*#__PURE__*/_jsx(MUIListItemIcon, {
+    children: iconEnd
+  }, "3")]);
+}

package/modern/models/gridBaseSlots.js

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

package/node/DataGrid/DataGrid.js

@@ -45,7 +45,7 @@ const DataGridRaw = /*#__PURE__*/React.forwardRef(function DataGrid(inProps, ref
       style: props.style,
       sx: props.sx,
       ref: ref
-    }, props.forwardedProps, {
+    }, props.slotProps?.root, {
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.GridHeader, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.GridBody, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.GridFooterPlaceholder, {})]
     }))
   });
@@ -102,6 +102,7 @@ DataGridRaw.propTypes = {
    */
   autosizeOptions: _propTypes.default.shape({
     columns: _propTypes.default.arrayOf(_propTypes.default.string),
+    disableColumnVirtualization: _propTypes.default.bool,
     expand: _propTypes.default.bool,
     includeHeaders: _propTypes.default.bool,
     includeOutliers: _propTypes.default.bool,
@@ -255,11 +256,6 @@ DataGridRaw.propTypes = {
     quickFilterLogicOperator: _propTypes.default.oneOf(['and', 'or']),
     quickFilterValues: _propTypes.default.array
   }),
-  /**
-   * Forwarded props for the Data Grid root element.
-   * @ignore - do not document.
-   */
-  forwardedProps: _propTypes.default.object,
   /**
    * Function that applies CSS classes dynamically on cells.
    * @param {GridCellParams} params With all properties from [[GridCellParams]].

package/node/DataGrid/useDataGridProps.js

@@ -27,12 +27,12 @@ const DATA_GRID_FORCED_PROPS = {
 };
 const defaultSlots = _defaultGridSlotsComponents.DATA_GRID_DEFAULT_SLOTS_COMPONENTS;
 const useDataGridProps = inProps => {
-  const themedProps = (0, _utils.useProps)(
+  const themedProps =
   // eslint-disable-next-line material-ui/mui-name-matches-component-name
   (0, _styles.useThemeProps)({
     props: inProps,
     name: 'MuiDataGrid'
-  }));
+  });
   const localeText = React.useMemo(() => (0, _extends2.default)({}, _constants.GRID_DEFAULT_LOCALE_TEXT, themedProps.localeText), [themedProps.localeText]);
   const slots = React.useMemo(() => (0, _utils.computeSlots)({
     defaultSlots,

package/node/components/GridRow.js

@@ -32,6 +32,7 @@ var _GridScrollbarFillerCell = require("./GridScrollbarFillerCell");
 var _getPinnedCellOffset = require("../internals/utils/getPinnedCellOffset");
 var _useGridConfiguration = require("../hooks/utils/useGridConfiguration");
 var _useGridPrivateApiContext = require("../hooks/utils/useGridPrivateApiContext");
+var _hooks = require("../hooks");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["selected", "rowId", "row", "index", "style", "rowHeight", "className", "visibleColumns", "pinnedColumns", "offsetTop", "offsetLeft", "dimensions", "renderContext", "focusedColumnIndex", "isFirstVisible", "isLastVisible", "isNotVisible", "showBottomBorder", "tabbableCell", "onClick", "onDoubleClick", "onMouseEnter", "onMouseLeave", "onMouseOut", "onMouseOver"];
 const GridRow = /*#__PURE__*/React.forwardRef(function GridRow(props, refProp) {
@@ -76,6 +77,7 @@ const GridRow = /*#__PURE__*/React.forwardRef(function GridRow(props, refProp) {
   const gridHasFiller = dimensions.columnsTotalWidth < dimensions.viewportOuterSize.width;
   const editing = apiRef.current.getRowMode(rowId) === _gridEditRowModel.GridRowModes.Edit;
   const editable = rootProps.editMode === _gridEditRowModel.GridEditModes.Row;
+  const hasColumnVirtualization = (0, _useGridSelector.useGridSelector)(apiRef, _hooks.gridVirtualizationColumnEnabledSelector);
   const hasFocusCell = focusedColumnIndex !== undefined;
   const hasVirtualFocusCellLeft = hasFocusCell && focusedColumnIndex >= pinnedColumns.left.length && focusedColumnIndex < renderContext.firstColumnIndex;
   const hasVirtualFocusCellRight = hasFocusCell && focusedColumnIndex < visibleColumns.length - pinnedColumns.right.length && focusedColumnIndex >= renderContext.lastColumnIndex;
@@ -257,7 +259,16 @@ const GridRow = /*#__PURE__*/React.forwardRef(function GridRow(props, refProp) {
   if (hasVirtualFocusCellLeft) {
     cells.push(getCell(visibleColumns[focusedColumnIndex], focusedColumnIndex - pinnedColumns.left.length, focusedColumnIndex, middleColumnsLength, _GridCell.PinnedPosition.VIRTUAL));
   }
-  for (let i = renderContext.firstColumnIndex; i < renderContext.lastColumnIndex; i += 1) {
+  let firstColumnIndex;
+  let lastColumnIndex;
+  if (!rootProps.disableVirtualization && !hasColumnVirtualization) {
+    firstColumnIndex = 0;
+    lastColumnIndex = visibleColumns.length;
+  } else {
+    firstColumnIndex = renderContext.firstColumnIndex;
+    lastColumnIndex = renderContext.lastColumnIndex;
+  }
+  for (let i = firstColumnIndex; i < lastColumnIndex; i += 1) {
     const column = visibleColumns[i];
     const indexInSection = i - pinnedColumns.left.length;
     if (!column) {

package/node/components/cell/GridActionsCellItem.js

@@ -10,7 +10,6 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _ListItemIcon = _interopRequireDefault(require("@mui/material/ListItemIcon"));
 var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["label", "icon", "showInMenu", "onClick"],
@@ -54,13 +53,12 @@ const GridActionsCellItem = exports.GridActionsCellItem = /*#__PURE__*/React.for
       closeMenu?.();
     }
   };
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(rootProps.slots.baseMenuItem, (0, _extends2.default)({
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseMenuItem, (0, _extends2.default)({
     ref: ref
   }, other, {
     onClick: handleClick,
-    children: [icon && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ListItemIcon.default, {
-      children: icon
-    }), label]
+    iconStart: icon,
+    children: label
   }));
 });
 process.env.NODE_ENV !== "production" ? GridActionsCellItem.propTypes = {

package/node/components/menu/columnMenu/menuItems/GridColumnMenuFilterItem.js

@@ -8,8 +8,6 @@ Object.defineProperty(exports, "__esModule", {
 exports.GridColumnMenuFilterItem = GridColumnMenuFilterItem;
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _ListItemIcon = _interopRequireDefault(require("@mui/material/ListItemIcon"));
-var _ListItemText = _interopRequireDefault(require("@mui/material/ListItemText"));
 var _useGridApiContext = require("../../../../hooks/utils/useGridApiContext");
 var _useGridRootProps = require("../../../../hooks/utils/useGridRootProps");
 var _jsxRuntime = require("react/jsx-runtime");
@@ -27,15 +25,12 @@ function GridColumnMenuFilterItem(props) {
   if (rootProps.disableColumnFilter || !colDef.filterable) {
     return null;
   }
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(rootProps.slots.baseMenuItem, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseMenuItem, {
     onClick: showFilter,
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ListItemIcon.default, {
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.columnMenuFilterIcon, {
-        fontSize: "small"
-      })
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ListItemText.default, {
-      children: apiRef.current.getLocaleText('columnMenuFilter')
-    })]
+    iconStart: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.columnMenuFilterIcon, {
+      fontSize: "small"
+    }),
+    children: apiRef.current.getLocaleText('columnMenuFilter')
   });
 }
 process.env.NODE_ENV !== "production" ? GridColumnMenuFilterItem.propTypes = {

package/node/components/menu/columnMenu/menuItems/GridColumnMenuHideItem.js

@@ -8,8 +8,6 @@ Object.defineProperty(exports, "__esModule", {
 exports.GridColumnMenuHideItem = GridColumnMenuHideItem;
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _ListItemIcon = _interopRequireDefault(require("@mui/material/ListItemIcon"));
-var _ListItemText = _interopRequireDefault(require("@mui/material/ListItemText"));
 var _useGridApiContext = require("../../../../hooks/utils/useGridApiContext");
 var _useGridRootProps = require("../../../../hooks/utils/useGridRootProps");
 var _columns = require("../../../../hooks/features/columns");
@@ -43,16 +41,13 @@ function GridColumnMenuHideItem(props) {
   if (colDef.hideable === false) {
     return null;
   }
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(rootProps.slots.baseMenuItem, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseMenuItem, {
     onClick: toggleColumn,
     disabled: disabled,
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ListItemIcon.default, {
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.columnMenuHideIcon, {
-        fontSize: "small"
-      })
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ListItemText.default, {
-      children: apiRef.current.getLocaleText('columnMenuHideColumn')
-    })]
+    iconStart: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.columnMenuHideIcon, {
+      fontSize: "small"
+    }),
+    children: apiRef.current.getLocaleText('columnMenuHideColumn')
   });
 }
 process.env.NODE_ENV !== "production" ? GridColumnMenuHideItem.propTypes = {

package/node/components/menu/columnMenu/menuItems/GridColumnMenuManageItem.js

@@ -8,8 +8,6 @@ Object.defineProperty(exports, "__esModule", {
 exports.GridColumnMenuManageItem = GridColumnMenuManageItem;
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _ListItemIcon = _interopRequireDefault(require("@mui/material/ListItemIcon"));
-var _ListItemText = _interopRequireDefault(require("@mui/material/ListItemText"));
 var _gridPreferencePanelsValue = require("../../../../hooks/features/preferencesPanel/gridPreferencePanelsValue");
 var _useGridApiContext = require("../../../../hooks/utils/useGridApiContext");
 var _useGridRootProps = require("../../../../hooks/utils/useGridRootProps");
@@ -27,15 +25,12 @@ function GridColumnMenuManageItem(props) {
   if (rootProps.disableColumnSelector) {
     return null;
   }
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(rootProps.slots.baseMenuItem, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseMenuItem, {
     onClick: showColumns,
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ListItemIcon.default, {
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.columnMenuManageColumnsIcon, {
-        fontSize: "small"
-      })
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ListItemText.default, {
-      children: apiRef.current.getLocaleText('columnMenuManageColumns')
-    })]
+    iconStart: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.columnMenuManageColumnsIcon, {
+      fontSize: "small"
+    }),
+    children: apiRef.current.getLocaleText('columnMenuManageColumns')
   });
 }
 process.env.NODE_ENV !== "production" ? GridColumnMenuManageItem.propTypes = {