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

package/esm/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/esm/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/esm/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/esm/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/esm/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/esm/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/esm/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/esm/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/esm/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/esm/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/esm/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/esm/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 };

package/esm/components/containers/GridOverlay.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 { getDataGridUtilityClass } from "../../constants/gridClasses.js";
 import { useGridRootProps } from "../../hooks/utils/useGridRootProps.js";
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -21,21 +22,18 @@ const useUtilityClasses = ownerState => {
 };
 const GridOverlayRoot = styled('div', {
   name: 'MuiDataGrid',
-  slot: 'Overlay',
-  overridesResolver: (_, styles) => styles.overlay
-})(({
-  theme
-}) => ({
+  slot: 'Overlay'
+})({
   width: '100%',
   height: '100%',
   display: 'flex',
-  gap: theme.spacing(1),
+  gap: vars.spacing(1),
   flexDirection: 'column',
   alignSelf: 'center',
   alignItems: 'center',
   justifyContent: 'center',
-  backgroundColor: 'var(--unstable_DataGrid-overlayBackground)'
-}));
+  backgroundColor: vars.colors.background.backdrop
+});
 const GridOverlay = forwardRef(function GridOverlay(props, ref) {
   const {
       className

package/esm/components/containers/GridRoot.js

@@ -8,6 +8,7 @@ import { unstable_useForkRef as useForkRef, unstable_capitalize as capitalize, u
 import { fastMemo } from '@mui/x-internals/fastMemo';
 import { forwardRef } from '@mui/x-internals/forwardRef';
 import { GridRootStyles } from "./GridRootStyles.js";
+import { useCSSVariablesContext } from "../../utils/css/context.js";
 import { useGridSelector } from "../../hooks/utils/useGridSelector.js";
 import { useGridPrivateApiContext } from "../../hooks/utils/useGridPrivateApiContext.js";
 import { useGridRootProps } from "../../hooks/utils/useGridRootProps.js";
@@ -47,18 +48,19 @@ const GridRoot = forwardRef(function GridRoot(props, ref) {
   const handleRef = useForkRef(rootElementRef, ref, rootMountCallback);
   const ownerState = rootProps;
   const classes = useUtilityClasses(ownerState, density);
+  const cssVariables = useCSSVariablesContext();
   const isSSR = useIsSSR();
   if (isSSR) {
     return null;
   }
   return /*#__PURE__*/_jsxs(GridRootStyles, _extends({
-    className: clsx(classes.root, className),
+    className: clsx(classes.root, className, cssVariables.className),
     ownerState: ownerState
   }, other, {
     ref: handleRef,
     children: [/*#__PURE__*/_jsx(GridHeader, {}), /*#__PURE__*/_jsx(GridBody, {
       children: children
-    }), /*#__PURE__*/_jsx(GridFooterPlaceholder, {})]
+    }), /*#__PURE__*/_jsx(GridFooterPlaceholder, {}), cssVariables.tag]
   }));
 });
 process.env.NODE_ENV !== "production" ? GridRoot.propTypes = {

package/esm/components/containers/GridRootStyles.d.ts

@@ -1,6 +1,5 @@
-import { Theme } from '@mui/material/styles';
 import { DataGridProcessedProps } from "../../models/props/DataGridProps.js";
 export type OwnerState = DataGridProcessedProps;
-export declare const GridRootStyles: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<Theme> & {
+export declare const GridRootStyles: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & {
   ownerState: OwnerState;
 }, Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import("react").ClassAttributes<HTMLDivElement> | keyof import("react").HTMLAttributes<HTMLDivElement>>, {}>;