@mui/x-data-grid 8.0.0-alpha.12 → 8.0.0-alpha.13

package/modern/DataGrid/DataGrid.js

@@ -11,9 +11,11 @@ import { GridContextProvider } from "../context/GridContextProvider.js";
 import { useDataGridComponent } from "./useDataGridComponent.js";
 import { useDataGridProps } from "./useDataGridProps.js";
 import { propValidatorsDataGrid, validateProps } from "../internals/utils/propValidation.js";
+import { useMaterialCSSVariables } from "../material/variables.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const configuration = {
   hooks: {
+    useCSSVariables: useMaterialCSSVariables,
     useGridAriaAttributes,
     useGridRowAriaAttributes
   }
@@ -138,6 +140,21 @@ DataGridRaw.propTypes = {
    * If defined, the Data Grid will ignore the `hide` property in [[GridColDef]].
    */
   columnVisibilityModel: PropTypes.object,
+  /**
+   * The data source object.
+   */
+  dataSource: PropTypes.shape({
+    getRows: PropTypes.func.isRequired,
+    updateRow: PropTypes.func
+  }),
+  /**
+   * Data source cache object.
+   */
+  dataSourceCache: PropTypes.shape({
+    clear: PropTypes.func.isRequired,
+    get: PropTypes.func.isRequired,
+    set: PropTypes.func.isRequired
+  }),
   /**
    * Set the density of the Data Grid.
    * @default "standard"
@@ -490,6 +507,11 @@ DataGridRaw.propTypes = {
    * @param {GridCallbackDetails} details Additional details for this callback.
    */
   onColumnWidthChange: PropTypes.func,
+  /**
+   * Callback fired when a data source request fails.
+   * @param {GridGetRowsError | GridUpdateRowError} error The data source error object.
+   */
+  onDataSourceError: PropTypes.func,
   /**
    * Callback fired when the density changes.
    * @param {GridDensity} density New density value.
@@ -687,7 +709,10 @@ DataGridRaw.propTypes = {
   /**
    * Sets the row selection model of the Data Grid.
    */
-  rowSelectionModel: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired), PropTypes.number, PropTypes.string]),
+  rowSelectionModel: PropTypes /* @typescript-to-proptypes-ignore */.shape({
+    ids: PropTypes.instanceOf(Set).isRequired,
+    type: PropTypes.oneOf(['exclude', 'include']).isRequired
+  }),
   /**
    * Sets the type of space between rows added by `getRowSpacing`.
    * @default "margin"
@@ -712,6 +737,11 @@ DataGridRaw.propTypes = {
    * @default false
    */
   showColumnVerticalBorder: PropTypes.bool,
+  /**
+   * If `true`, the toolbar is displayed.
+   * @default false
+   */
+  showToolbar: PropTypes.bool,
   /**
    * Overridable components props dynamically passed to the component at rendering.
    */
@@ -743,27 +773,6 @@ DataGridRaw.propTypes = {
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
   sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
-  /**
-   * The data source object.
-   */
-  unstable_dataSource: PropTypes.shape({
-    getRows: PropTypes.func.isRequired,
-    updateRow: PropTypes.func
-  }),
-  /**
-   * Data source cache object.
-   */
-  unstable_dataSourceCache: PropTypes.shape({
-    clear: PropTypes.func.isRequired,
-    get: PropTypes.func.isRequired,
-    set: PropTypes.func.isRequired
-  }),
-  /**
-   * Callback fired when the data source request fails.
-   * @param {Error} error The error object.
-   * @param {GridGetRowsParams} params With all properties from [[GridGetRowsParams]].
-   */
-  unstable_onDataSourceError: PropTypes.func,
   /**
    * If `true`, the Data Grid enables column virtualization when `getRowHeight` is set to `() => 'auto'`.
    * By default, column virtualization is disabled when dynamic row height is enabled to measure the row height correctly.

package/modern/DataGrid/useDataGridProps.js

@@ -17,7 +17,7 @@ const DATA_GRID_FORCED_PROPS = {
   signature: 'DataGrid',
   unstable_listView: false
 };
-const getDataGridForcedProps = themedProps => _extends({}, DATA_GRID_FORCED_PROPS, themedProps.unstable_dataSource ? {
+const getDataGridForcedProps = themedProps => _extends({}, DATA_GRID_FORCED_PROPS, themedProps.dataSource ? {
   filterMode: 'server',
   sortingMode: 'server',
   paginationMode: 'server'

package/modern/colDef/gridCheckboxSelectionColDef.js

@@ -2,7 +2,6 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import { GridCellCheckboxRenderer } from "../components/columnSelection/GridCellCheckboxRenderer.js";
 import { GridHeaderCheckbox } from "../components/columnSelection/GridHeaderCheckbox.js";
-import { selectedIdsLookupSelector } from "../hooks/features/rowSelection/gridRowSelectionSelector.js";
 import { GRID_BOOLEAN_COL_DEF } from "./gridBooleanColDef.js";
 import { gridRowIdSelector } from "../hooks/core/gridPropsSelectors.js";
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -22,9 +21,8 @@ export const GRID_CHECKBOX_SELECTION_COL_DEF = _extends({}, GRID_BOOLEAN_COL_DEF
   getApplyQuickFilterFn: undefined,
   display: 'flex',
   valueGetter: (value, row, column, apiRef) => {
-    const selectionLookup = selectedIdsLookupSelector(apiRef);
     const rowId = gridRowIdSelector(apiRef, row);
-    return selectionLookup[rowId] !== undefined;
+    return apiRef.current.isRowSelected(rowId);
   },
   renderHeader: params => /*#__PURE__*/_jsx(GridHeaderCheckbox, _extends({}, params)),
   renderCell: params => /*#__PURE__*/_jsx(GridCellCheckboxRenderer, _extends({}, params))

package/modern/components/GridFooter.js

@@ -4,7 +4,7 @@ import PropTypes from 'prop-types';
 import { forwardRef } from '@mui/x-internals/forwardRef';
 import { useGridSelector } from "../hooks/utils/useGridSelector.js";
 import { gridTopLevelRowCountSelector } from "../hooks/features/rows/gridRowsSelector.js";
-import { selectedGridRowsCountSelector } from "../hooks/features/rowSelection/gridRowSelectionSelector.js";
+import { gridRowSelectionCountSelector } from "../hooks/features/rowSelection/gridRowSelectionSelector.js";
 import { gridFilteredTopLevelRowCountSelector } from "../hooks/features/filter/gridFilterSelector.js";
 import { useGridApiContext } from "../hooks/utils/useGridApiContext.js";
 import { GridSelectedRowCount } from "./GridSelectedRowCount.js";
@@ -15,7 +15,7 @@ const GridFooter = forwardRef(function GridFooter(props, ref) {
   const apiRef = useGridApiContext();
   const rootProps = useGridRootProps();
   const totalTopLevelRowCount = useGridSelector(apiRef, gridTopLevelRowCountSelector);
-  const selectedRowCount = useGridSelector(apiRef, selectedGridRowsCountSelector);
+  const selectedRowCount = useGridSelector(apiRef, gridRowSelectionCountSelector);
   const visibleTopLevelRowCount = useGridSelector(apiRef, gridFilteredTopLevelRowCountSelector);
   const selectedRowCountElement = !rootProps.hideFooterSelectedRowCount && selectedRowCount > 0 ? /*#__PURE__*/_jsx(GridSelectedRowCount, {
     selectedRowCount: selectedRowCount

package/modern/components/GridHeader.js

@@ -6,6 +6,6 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export function GridHeader() {
   const rootProps = useGridRootProps();
   return /*#__PURE__*/_jsxs(React.Fragment, {
-    children: [/*#__PURE__*/_jsx(GridPreferencesPanel, {}), rootProps.slots.toolbar && /*#__PURE__*/_jsx(rootProps.slots.toolbar, _extends({}, rootProps.slotProps?.toolbar))]
+    children: [/*#__PURE__*/_jsx(GridPreferencesPanel, {}), rootProps.showToolbar && /*#__PURE__*/_jsx(rootProps.slots.toolbar, _extends({}, rootProps.slotProps?.toolbar))]
   });
 }

package/modern/components/GridPagination.js

@@ -4,30 +4,29 @@ import { styled } from '@mui/material/styles';
 import PropTypes from 'prop-types';
 import TablePagination, { tablePaginationClasses } from '@mui/material/TablePagination';
 import { forwardRef } from '@mui/x-internals/forwardRef';
+import { vars } from "../constants/cssVariables.js";
 import { useGridSelector } from "../hooks/utils/useGridSelector.js";
 import { useGridApiContext } from "../hooks/utils/useGridApiContext.js";
 import { useGridRootProps } from "../hooks/utils/useGridRootProps.js";
 import { gridPaginationModelSelector, gridPaginationRowCountSelector, gridPageCountSelector } from "../hooks/features/pagination/gridPaginationSelector.js";
 import { jsx as _jsx } from "react/jsx-runtime";
-const GridPaginationRoot = styled(TablePagination)(({
-  theme
-}) => ({
+const GridPaginationRoot = styled(TablePagination)({
   maxHeight: 'calc(100% + 1px)',
   // border width
   flexGrow: 1,
   [`& .${tablePaginationClasses.selectLabel}`]: {
     display: 'none',
-    [theme.breakpoints.up('sm')]: {
+    [vars.breakpoints.up('sm')]: {
       display: 'block'
     }
   },
   [`& .${tablePaginationClasses.input}`]: {
     display: 'none',
-    [theme.breakpoints.up('sm')]: {
+    [vars.breakpoints.up('sm')]: {
       display: 'inline-flex'
     }
   }
-}));
+});
 const wrapLabelDisplayedRows = (labelDisplayedRows, estimated) => {
   return ({
     from,

package/modern/components/GridRowCount.js

@@ -7,6 +7,7 @@ import clsx from 'clsx';
 import composeClasses from '@mui/utils/composeClasses';
 import { styled } from '@mui/system';
 import { forwardRef } from '@mui/x-internals/forwardRef';
+import { vars } from "../constants/cssVariables.js";
 import { useGridApiContext } from "../hooks/utils/useGridApiContext.js";
 import { getDataGridUtilityClass } from "../constants/gridClasses.js";
 import { useGridRootProps } from "../hooks/utils/useGridRootProps.js";
@@ -24,13 +25,11 @@ const GridRowCountRoot = styled('div', {
   name: 'MuiDataGrid',
   slot: 'RowCount',
   overridesResolver: (props, styles) => styles.rowCount
-})(({
-  theme
-}) => ({
+})({
   alignItems: 'center',
   display: 'flex',
-  margin: theme.spacing(0, 2)
-}));
+  margin: vars.spacing(0, 2)
+});
 const GridRowCount = forwardRef(function GridRowCount(props, ref) {
   const {
       className,

package/modern/components/GridScrollArea.js

@@ -3,7 +3,8 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import clsx from 'clsx';
-import { unstable_composeClasses as composeClasses, unstable_useEventCallback as useEventCallback } from '@mui/utils';
+import useEventCallback from '@mui/utils/useEventCallback';
+import composeClasses from '@mui/utils/composeClasses';
 import { styled } from '@mui/system';
 import { fastMemo } from '@mui/x-internals/fastMemo';
 import { useGridRootProps } from "../hooks/utils/useGridRootProps.js";

package/modern/components/GridSelectedRowCount.js

@@ -7,6 +7,7 @@ import clsx from 'clsx';
 import composeClasses from '@mui/utils/composeClasses';
 import { styled } from '@mui/system';
 import { forwardRef } from '@mui/x-internals/forwardRef';
+import { vars } from "../constants/cssVariables.js";
 import { useGridApiContext } from "../hooks/utils/useGridApiContext.js";
 import { getDataGridUtilityClass } from "../constants/gridClasses.js";
 import { useGridRootProps } from "../hooks/utils/useGridRootProps.js";
@@ -24,21 +25,19 @@ const GridSelectedRowCountRoot = styled('div', {
   name: 'MuiDataGrid',
   slot: 'SelectedRowCount',
   overridesResolver: (props, styles) => styles.selectedRowCount
-})(({
-  theme
-}) => ({
+})({
   alignItems: 'center',
   display: 'flex',
-  margin: theme.spacing(0, 2),
+  margin: vars.spacing(0, 2),
   visibility: 'hidden',
   width: 0,
   height: 0,
-  [theme.breakpoints.up('sm')]: {
+  [vars.breakpoints.up('sm')]: {
     visibility: 'visible',
     width: 'auto',
     height: 'auto'
   }
-}));
+});
 const GridSelectedRowCount = forwardRef(function GridSelectedRowCount(props, ref) {
   const {
       className,

package/modern/components/GridShadowScrollArea.d.ts

@@ -0,0 +1,8 @@
+import * as React from 'react';
+export interface GridShadowScrollAreaProps extends React.HTMLAttributes<HTMLDivElement> {
+  children: React.ReactNode;
+}
+/**
+ * Adds scroll shadows above and below content in a scrollable container.
+ */
+export declare function GridShadowScrollArea(props: GridShadowScrollAreaProps): React.JSX.Element;

package/modern/components/GridShadowScrollArea.js

@@ -0,0 +1,74 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+const _excluded = ["children"];
+import * as React from 'react';
+import { styled, keyframes } from '@mui/system';
+import { jsx as _jsx } from "react/jsx-runtime";
+const reveal = keyframes({
+  from: {
+    opacity: 0
+  },
+  to: {
+    opacity: 1
+  }
+});
+const detectScroll = keyframes({
+  'from, to': {
+    '--scrollable': '" "'
+  }
+});
+const ShadowScrollArea = styled('div', {
+  name: 'MuiDataGrid',
+  slot: 'ShadowScrollArea'
+})({
+  flex: 1,
+  display: 'flex',
+  flexDirection: 'column',
+  animation: detectScroll,
+  animationTimeline: '--scroll-timeline',
+  animationFillMode: 'none',
+  boxSizing: 'border-box',
+  overflow: 'auto',
+  scrollTimeline: '--scroll-timeline block',
+  '&::before, &::after': {
+    content: '""',
+    flexShrink: 0,
+    display: 'block',
+    position: 'sticky',
+    left: 0,
+    width: '100%',
+    height: '4px',
+    animation: `${reveal} linear both`,
+    animationTimeline: '--scroll-timeline',
+    // Custom property toggle trick:
+    // - Detects if the element is scrollable
+    // - https://css-tricks.com/the-css-custom-property-toggle-trick/
+    '--visibility-scrollable': 'var(--scrollable) visible',
+    '--visibility-not-scrollable': 'hidden',
+    visibility: 'var(--visibility-scrollable, var(--visibility-not-scrollable))'
+  },
+  '&::before': {
+    top: 0,
+    background: 'linear-gradient(to bottom, rgba(0,0,0,0.05) 0, transparent 100%)',
+    animationRange: '0 4px'
+  },
+  '&::after': {
+    bottom: 0,
+    background: 'linear-gradient(to top, rgba(0,0,0,0.05) 0, transparent 100%)',
+    animationDirection: 'reverse',
+    animationRange: 'calc(100% - 4px) 100%'
+  }
+});
+
+/**
+ * Adds scroll shadows above and below content in a scrollable container.
+ */
+export function GridShadowScrollArea(props) {
+  const {
+      children
+    } = props,
+    rest = _objectWithoutPropertiesLoose(props, _excluded);
+  return /*#__PURE__*/_jsx(ShadowScrollArea, _extends({}, rest, {
+    children: children
+  }));
+}

package/modern/components/cell/GridEditInputCell.js

@@ -7,6 +7,7 @@ import { unstable_composeClasses as composeClasses, unstable_useEnhancedEffect a
 import { styled } from '@mui/material/styles';
 import { forwardRef } from '@mui/x-internals/forwardRef';
 import { NotRendered } from "../../utils/assert.js";
+import { vars } from "../../constants/cssVariables.js";
 import { getDataGridUtilityClass } from "../../constants/gridClasses.js";
 import { useGridRootProps } from "../../hooks/utils/useGridRootProps.js";
 import { useGridApiContext } from "../../hooks/utils/useGridApiContext.js";
@@ -23,9 +24,7 @@ const useUtilityClasses = ownerState => {
 const GridEditInputCellRoot = styled(NotRendered, {
   name: 'MuiDataGrid',
   slot: 'EditInputCell'
-})(({
-  theme
-}) => _extends({}, theme.typography.body2, {
+})(_extends({}, vars.typography.body, {
   padding: '1px 0',
   '& input': {
     padding: '0 16px',

package/modern/components/columnSelection/GridHeaderCheckbox.js

@@ -14,6 +14,7 @@ import { getDataGridUtilityClass } from "../../constants/gridClasses.js";
 import { useGridRootProps } from "../../hooks/utils/useGridRootProps.js";
 import { gridExpandedSortedRowIdsSelector } from "../../hooks/features/filter/gridFilterSelector.js";
 import { gridPaginatedVisibleSortedGridRowIdsSelector } from "../../hooks/features/pagination/gridPaginationSelector.js";
+import { createRowSelectionManager } from "../../models/gridRowSelectionManager.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const useUtilityClasses = ownerState => {
   const {
@@ -38,39 +39,72 @@ const GridHeaderCheckbox = forwardRef(function GridHeaderCheckbox(props, ref) {
   const visibleRowIds = useGridSelector(apiRef, gridExpandedSortedRowIdsSelector);
   const paginatedVisibleRowIds = useGridSelector(apiRef, gridPaginatedVisibleSortedGridRowIdsSelector);
   const filteredSelection = React.useMemo(() => {
-    if (typeof rootProps.isRowSelectable !== 'function') {
+    const isRowSelectable = rootProps.isRowSelectable;
+    if (typeof isRowSelectable !== 'function') {
       return selection;
     }
-    return selection.filter(id => {
+    if (selection.type === 'exclude') {
+      return selection;
+    }
+
+    // selection.type === 'include'
+    const selectionModel = {
+      type: 'include',
+      ids: new Set()
+    };
+    for (const id of selection.ids) {
       if (rootProps.keepNonExistentRowsSelected) {
-        return true;
+        selectionModel.ids.add(id);
       }
       // The row might have been deleted
       if (!apiRef.current.getRow(id)) {
-        return false;
+        continue;
+      }
+      if (isRowSelectable(apiRef.current.getRowParams(id))) {
+        selectionModel.ids.add(id);
       }
-      return rootProps.isRowSelectable(apiRef.current.getRowParams(id));
-    });
-  }, [apiRef, rootProps.isRowSelectable, selection, rootProps.keepNonExistentRowsSelected]);
+    }
+    return selectionModel;
+  }, [apiRef, rootProps.isRowSelectable, rootProps.keepNonExistentRowsSelected, selection]);
 
   // All the rows that could be selected / unselected by toggling this checkbox
   const selectionCandidates = React.useMemo(() => {
     const rowIds = !rootProps.pagination || !rootProps.checkboxSelectionVisibleOnly ? visibleRowIds : paginatedVisibleRowIds;
 
-    // Convert to an object to make O(1) checking if a row exists or not
-    // TODO create selector that returns visibleRowIds/paginatedVisibleRowIds as an object
-    return rowIds.reduce((acc, id) => {
-      if (!apiRef.current.isRowSelectable(id)) {
-        return acc;
+    // Convert to a Set to make O(1) checking if a row exists or not
+    const candidates = new Set();
+    for (let i = 0; i < rowIds.length; i += 1) {
+      const id = rowIds[i];
+      if (apiRef.current.isRowSelectable(id)) {
+        candidates.add(id);
       }
-      acc[id] = true;
-      return acc;
-    }, {});
+    }
+    return candidates;
   }, [apiRef, rootProps.pagination, rootProps.checkboxSelectionVisibleOnly, paginatedVisibleRowIds, visibleRowIds]);
 
   // Amount of rows selected and that are visible in the current page
-  const currentSelectionSize = React.useMemo(() => filteredSelection.filter(id => selectionCandidates[id]).length, [filteredSelection, selectionCandidates]);
-  const isIndeterminate = currentSelectionSize > 0 && currentSelectionSize < Object.keys(selectionCandidates).length;
+  const currentSelectionSize = React.useMemo(() => {
+    const selectionManager = createRowSelectionManager(filteredSelection);
+    let size = 0;
+    for (const id of selectionCandidates) {
+      if (selectionManager.has(id)) {
+        size += 1;
+      }
+    }
+    return size;
+  }, [filteredSelection, selectionCandidates]);
+  const isIndeterminate = React.useMemo(() => {
+    if (filteredSelection.ids.size === 0) {
+      return false;
+    }
+    const selectionManager = createRowSelectionManager(filteredSelection);
+    for (const rowId of selectionCandidates) {
+      if (!selectionManager.has(rowId)) {
+        return true;
+      }
+    }
+    return false;
+  }, [filteredSelection, selectionCandidates]);
   const isChecked = currentSelectionSize > 0;
   const handleChange = event => {
     const params = {

package/modern/components/columnsManagement/GridColumnsManagement.js

@@ -5,14 +5,15 @@ import PropTypes from 'prop-types';
 import composeClasses from '@mui/utils/composeClasses';
 import { styled } from '@mui/material/styles';
 import { inputBaseClasses } from '@mui/material/InputBase';
-import { gridColumnDefinitionsSelector, gridColumnVisibilityModelSelector } from "../../hooks/features/columns/gridColumnsSelector.js";
+import { vars } from "../../constants/cssVariables.js";
+import { gridColumnDefinitionsSelector, gridColumnVisibilityModelSelector, gridInitialColumnVisibilityModelSelector } from "../../hooks/features/columns/gridColumnsSelector.js";
 import { useGridSelector } from "../../hooks/utils/useGridSelector.js";
 import { useGridApiContext } from "../../hooks/utils/useGridApiContext.js";
 import { useGridRootProps } from "../../hooks/utils/useGridRootProps.js";
 import { getDataGridUtilityClass } from "../../constants/gridClasses.js";
-import { useLazyRef } from "../../hooks/utils/useLazyRef.js";
 import { checkColumnVisibilityModelsSame, defaultSearchPredicate } from "./utils.js";
 import { NotRendered } from "../../utils/assert.js";
+import { GridShadowScrollArea } from "../GridShadowScrollArea.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const useUtilityClasses = ownerState => {
   const {
@@ -32,7 +33,7 @@ function GridColumnsManagement(props) {
   const apiRef = useGridApiContext();
   const searchInputRef = React.useRef(null);
   const columns = useGridSelector(apiRef, gridColumnDefinitionsSelector);
-  const initialColumnVisibilityModel = useLazyRef(() => gridColumnVisibilityModelSelector(apiRef)).current;
+  const initialColumnVisibilityModel = useGridSelector(apiRef, gridInitialColumnVisibilityModelSelector);
   const columnVisibilityModel = useGridSelector(apiRef, gridColumnVisibilityModelSelector);
   const rootProps = useGridRootProps();
   const [searchValue, setSearchValue] = React.useState('');
@@ -132,20 +133,20 @@ function GridColumnsManagement(props) {
         type: "search",
         slotProps: {
           input: {
-            startAdornment: /*#__PURE__*/_jsx(rootProps.slots.baseInputAdornment, {
-              position: "start",
-              children: /*#__PURE__*/_jsx(rootProps.slots.quickFilterIcon, {})
+            startAdornment: /*#__PURE__*/_jsx(rootProps.slots.quickFilterIcon, {
+              fontSize: "small"
             }),
             endAdornment: /*#__PURE__*/_jsx(rootProps.slots.baseIconButton, _extends({
-              "aria-label": apiRef.current.getLocaleText('columnsManagementDeleteIconLabel'),
               size: "small",
+              "aria-label": apiRef.current.getLocaleText('columnsManagementDeleteIconLabel'),
               style: searchValue ? {
                 visibility: 'visible'
               } : {
                 visibility: 'hidden'
               },
               tabIndex: -1,
-              onClick: handleSearchReset
+              onClick: handleSearchReset,
+              edge: "end"
             }, rootProps.slotProps?.baseIconButton, {
               children: /*#__PURE__*/_jsx(rootProps.slots.quickFilterClearIcon, {
                 fontSize: "small"
@@ -159,25 +160,27 @@ function GridColumnsManagement(props) {
         autoComplete: "off",
         fullWidth: true
       }, rootProps.slotProps?.baseTextField, searchInputProps))
-    }), /*#__PURE__*/_jsxs(GridColumnsManagementBody, {
-      className: classes.root,
+    }), /*#__PURE__*/_jsx(GridColumnsManagementScrollArea, {
       ownerState: rootProps,
-      children: [currentColumns.map(column => /*#__PURE__*/_jsx(rootProps.slots.baseCheckbox, _extends({
-        className: classes.row,
-        disabled: column.hideable === false,
-        checked: columnVisibilityModel[column.field] !== false,
-        onClick: toggleColumn,
-        name: column.field,
-        inputRef: isFirstHideableColumn(column) ? firstSwitchRef : undefined,
-        label: column.headerName || column.field,
-        size: "medium",
-        density: "compact",
-        fullWidth: true
-      }, rootProps.slotProps?.baseCheckbox), column.field)), currentColumns.length === 0 && /*#__PURE__*/_jsx(GridColumnsManagementEmptyText, {
+      children: /*#__PURE__*/_jsxs(GridColumnsManagementBody, {
+        className: classes.root,
         ownerState: rootProps,
-        children: apiRef.current.getLocaleText('columnsManagementNoColumns')
-      })]
-    }), (!disableShowHideToggle || !disableResetButton) && currentColumns.length > 0 ? /*#__PURE__*/_jsxs(GridColumnsManagementFooter, {
+        children: [currentColumns.map(column => /*#__PURE__*/_jsx(rootProps.slots.baseCheckbox, _extends({
+          className: classes.row,
+          disabled: column.hideable === false,
+          checked: columnVisibilityModel[column.field] !== false,
+          onClick: toggleColumn,
+          name: column.field,
+          inputRef: isFirstHideableColumn(column) ? firstSwitchRef : undefined,
+          label: column.headerName || column.field,
+          density: "compact",
+          fullWidth: true
+        }, rootProps.slotProps?.baseCheckbox), column.field)), currentColumns.length === 0 && /*#__PURE__*/_jsx(GridColumnsManagementEmptyText, {
+          ownerState: rootProps,
+          children: apiRef.current.getLocaleText('columnsManagementNoColumns')
+        })]
+      })
+    }), !disableShowHideToggle || !disableResetButton ? /*#__PURE__*/_jsxs(GridColumnsManagementFooter, {
       ownerState: rootProps,
       className: classes.footer,
       children: [!disableShowHideToggle ? /*#__PURE__*/_jsx(rootProps.slots.baseCheckbox, _extends({
@@ -186,7 +189,8 @@ function GridColumnsManagement(props) {
         indeterminate: !allHideableColumnsVisible && !allHideableColumnsHidden,
         onClick: () => toggleAllColumns(!allHideableColumnsVisible),
         name: apiRef.current.getLocaleText('columnsManagementShowHideAllText'),
-        label: apiRef.current.getLocaleText('columnsManagementShowHideAllText')
+        label: apiRef.current.getLocaleText('columnsManagementShowHideAllText'),
+        density: "compact"
       }, rootProps.slotProps?.baseCheckbox)) : /*#__PURE__*/_jsx("span", {}), !disableResetButton ? /*#__PURE__*/_jsx(rootProps.slots.baseButton, _extends({
         onClick: () => apiRef.current.setColumnVisibilityModel(initialColumnVisibilityModel),
         disabled: isResetDisabled
@@ -262,57 +266,51 @@ process.env.NODE_ENV !== "production" ? GridColumnsManagement.propTypes = {
 const GridColumnsManagementBody = styled('div', {
   name: 'MuiDataGrid',
   slot: 'ColumnsManagement'
-})(({
-  theme
-}) => ({
-  padding: theme.spacing(0, 2, 1.5),
+})({
   display: 'flex',
   flexDirection: 'column',
-  overflow: 'auto',
-  flex: '1 1',
-  maxHeight: 400,
-  alignItems: 'flex-start'
-}));
+  padding: vars.spacing(0.5, 1.5)
+});
+const GridColumnsManagementScrollArea = styled(GridShadowScrollArea, {
+  name: 'MuiDataGrid',
+  slot: 'ColumnsManagementScrollArea'
+})({
+  maxHeight: 400
+});
 const GridColumnsManagementHeader = styled('div', {
   name: 'MuiDataGrid',
   slot: 'ColumnsManagementHeader'
-})(({
-  theme
-}) => ({
-  padding: theme.spacing(1.5, 3)
-}));
+})({
+  padding: vars.spacing(1.5, 2),
+  borderBottom: `1px solid ${vars.colors.border.base}`
+});
 const SearchInput = styled(NotRendered, {
   name: 'MuiDataGrid',
   slot: 'ColumnsManagementSearchInput'
-})(({
-  theme
-}) => ({
-  [`& .${inputBaseClasses.root}`]: {
-    padding: theme.spacing(0, 1.5, 0, 1.5)
-  },
+})({
   [`& .${inputBaseClasses.input}::-webkit-search-decoration,
-  & .${inputBaseClasses.input}::-webkit-search-cancel-button,
-  & .${inputBaseClasses.input}::-webkit-search-results-button,
-  & .${inputBaseClasses.input}::-webkit-search-results-decoration`]: {
+      & .${inputBaseClasses.input}::-webkit-search-cancel-button,
+      & .${inputBaseClasses.input}::-webkit-search-results-button,
+      & .${inputBaseClasses.input}::-webkit-search-results-decoration`]: {
     /* clears the 'X' icon from Chrome */
     display: 'none'
   }
-}));
+});
 const GridColumnsManagementFooter = styled('div', {
   name: 'MuiDataGrid',
   slot: 'ColumnsManagementFooter'
-})(({
-  theme
-}) => ({
-  padding: theme.spacing(0.5, 1, 0.5, 3),
+})({
+  padding: vars.spacing(1, 1, 1, 1.5),
   display: 'flex',
   justifyContent: 'space-between',
-  borderTop: `1px solid ${theme.palette.divider}`
-}));
-const GridColumnsManagementEmptyText = styled('div')(({
-  theme
-}) => ({
-  padding: theme.spacing(0.5, 0),
-  color: theme.palette.grey[500]
-}));
+  borderTop: `1px solid ${vars.colors.border.base}`
+});
+const GridColumnsManagementEmptyText = styled('div', {
+  name: 'MuiDataGrid',
+  slot: 'ColumnsManagementEmptyText'
+})({
+  padding: vars.spacing(1, 0),
+  alignSelf: 'center',
+  fontSize: vars.typography.body.fontSize
+});
 export { GridColumnsManagement };