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

package/components/panel/GridPanelHeader.js

@@ -13,6 +13,7 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _clsx = _interopRequireDefault(require("clsx"));
 var _system = require("@mui/system");
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
+var _cssVariables = require("../../constants/cssVariables");
 var _gridClasses = require("../../constants/gridClasses");
 var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
 var _jsxRuntime = require("react/jsx-runtime");
@@ -30,11 +31,9 @@ const GridPanelHeaderRoot = (0, _system.styled)('div', {
   name: 'MuiDataGrid',
   slot: 'PanelHeader',
   overridesResolver: (props, styles) => styles.panelHeader
-})(({
-  theme
-}) => ({
-  padding: theme.spacing(1)
-}));
+})({
+  padding: _cssVariables.vars.spacing(1)
+});
 function GridPanelHeader(props) {
   const {
       className

package/components/panel/filterPanel/GridFilterForm.js

@@ -11,10 +11,11 @@ var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runt
 var _react = _interopRequireWildcard(require("react"));
 var React = _react;
 var _propTypes = _interopRequireDefault(require("prop-types"));
+var _clsx = _interopRequireDefault(require("clsx"));
 var _utils = require("@mui/utils");
 var _styles = require("@mui/material/styles");
-var _clsx = _interopRequireDefault(require("clsx"));
 var _forwardRef = require("@mui/x-internals/forwardRef");
+var _cssVariables = require("../../../constants/cssVariables");
 var _gridColumnsSelector = require("../../../hooks/features/columns/gridColumnsSelector");
 var _gridFilterSelector = require("../../../hooks/features/filter/gridFilterSelector");
 var _useGridSelector = require("../../../hooks/utils/useGridSelector");
@@ -44,19 +45,19 @@ const GridFilterFormRoot = (0, _styles.styled)('div', {
   name: 'MuiDataGrid',
   slot: 'FilterForm',
   overridesResolver: (props, styles) => styles.filterForm
-})(({
-  theme
-}) => ({
+})({
   display: 'flex',
-  gap: theme.spacing(1.5)
-}));
+  gap: _cssVariables.vars.spacing(1.5)
+});
 const FilterFormDeleteIcon = (0, _styles.styled)('div', {
   name: 'MuiDataGrid',
   slot: 'FilterFormDeleteIcon',
   overridesResolver: (_, styles) => styles.filterFormDeleteIcon
 })({
   flexShrink: 0,
-  justifyContent: 'center'
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center'
 });
 const FilterFormLogicOperatorInput = (0, _styles.styled)('div', {
   name: 'MuiDataGrid',
@@ -134,7 +135,6 @@ const GridFilterForm = exports.GridFilterForm = (0, _forwardRef.forwardRef)(func
   const filterSelectorRef = React.useRef(null);
   const multiFilterOperator = filterModel.logicOperator ?? _gridFilterItem.GridLogicOperator.And;
   const hasLogicOperatorColumn = hasMultipleFilters && logicOperators.length > 0;
-  const baseFormControlProps = rootProps.slotProps?.baseFormControl || {};
   const baseSelectProps = rootProps.slotProps?.baseSelect || {};
   const isBaseSelectNative = baseSelectProps.native ?? false;
   const baseSelectOptionProps = rootProps.slotProps?.baseSelectOption || {};
@@ -263,10 +263,8 @@ const GridFilterForm = exports.GridFilterForm = (0, _forwardRef.forwardRef)(func
     ownerState: rootProps
   }, other, {
     ref: ref,
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(FilterFormDeleteIcon, (0, _extends2.default)({
-      as: rootProps.slots.baseFormControl
-    }, baseFormControlProps, deleteIconProps, {
-      className: (0, _clsx.default)(classes.deleteIcon, baseFormControlProps.className, deleteIconProps.className),
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(FilterFormDeleteIcon, (0, _extends2.default)({}, deleteIconProps, {
+      className: (0, _clsx.default)(classes.deleteIcon, deleteIconProps.className),
       ownerState: rootProps,
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseIconButton, (0, _extends2.default)({
         "aria-label": apiRef.current.getLocaleText('filterPanelDeleteIconLabel'),
@@ -329,9 +327,8 @@ const GridFilterForm = exports.GridFilterForm = (0, _forwardRef.forwardRef)(func
         value: col.field
       }), getColumnLabel(col)))
     })), /*#__PURE__*/(0, _jsxRuntime.jsx)(FilterFormOperatorInput, (0, _extends2.default)({
-      variant: "outlined",
-      size: "small",
-      as: rootProps.slots.baseSelect
+      as: rootProps.slots.baseSelect,
+      size: "small"
     }, operatorInputProps, {
       className: (0, _clsx.default)(classes.operatorInput, operatorInputProps.className),
       ownerState: rootProps,
@@ -349,11 +346,7 @@ const GridFilterForm = exports.GridFilterForm = (0, _forwardRef.forwardRef)(func
         key: operator.value,
         value: operator.value
       }), operator.label || apiRef.current.getLocaleText(`filterOperator${(0, _utils.unstable_capitalize)(operator.value)}`)))
-    })), /*#__PURE__*/(0, _jsxRuntime.jsx)(FilterFormValueInput, (0, _extends2.default)({
-      variant: "outlined",
-      size: "small",
-      as: rootProps.slots.baseFormControl
-    }, valueInputPropsOther, {
+    })), /*#__PURE__*/(0, _jsxRuntime.jsx)(FilterFormValueInput, (0, _extends2.default)({}, valueInputPropsOther, {
       className: (0, _clsx.default)(classes.valueInput, valueInputPropsOther.className),
       ownerState: rootProps,
       children: currentOperator?.InputComponent ? /*#__PURE__*/(0, _jsxRuntime.jsx)(currentOperator.InputComponent, (0, _extends2.default)({

package/components/panel/filterPanel/GridFilterInputMultipleSingleSelect.d.ts

@@ -1,8 +1,8 @@
 import * as React from 'react';
-import { AutocompleteProps } from '@mui/material/Autocomplete';
+import { AutocompleteProps } from "../../../models/gridBaseSlots.js";
 import { GridFilterInputValueProps } from "../../../models/gridFilterInputComponent.js";
 import type { ValueOptions } from '../../../models/colDef/gridColDef';
-export type GridFilterInputMultipleSingleSelectProps = GridFilterInputValueProps<Omit<AutocompleteProps<ValueOptions, true, false, true>, 'options' | 'renderInput'>> & {
+export type GridFilterInputMultipleSingleSelectProps = GridFilterInputValueProps<Omit<AutocompleteProps<ValueOptions, true, false, true>, 'options'>> & {
   type?: 'singleSelect';
 };
 declare function GridFilterInputMultipleSingleSelect(props: GridFilterInputMultipleSingleSelectProps): React.JSX.Element;

package/components/panel/filterPanel/GridFilterInputMultipleSingleSelect.js

@@ -10,15 +10,11 @@ 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 _Autocomplete = _interopRequireWildcard(require("@mui/material/Autocomplete"));
 var _utils = require("@mui/utils");
-var _filterPanelUtils = require("./filterPanelUtils");
 var _useGridRootProps = require("../../../hooks/utils/useGridRootProps");
+var _filterPanelUtils = require("./filterPanelUtils");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["item", "applyValue", "type", "apiRef", "focusElementRef", "slotProps"],
-  _excluded2 = ["key"],
-  _excluded3 = ["inputProps", "InputProps", "InputLabelProps"];
-const filter = (0, _Autocomplete.createFilterOptions)();
+const _excluded = ["item", "applyValue", "type", "apiRef", "focusElementRef", "slotProps"];
 function GridFilterInputMultipleSingleSelect(props) {
   const {
       item,
@@ -64,47 +60,22 @@ function GridFilterInputMultipleSingleSelect(props) {
       value: value.map(getOptionValue)
     }));
   }, [applyValue, item, getOptionValue]);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Autocomplete.default, (0, _extends2.default)({
+  const BaseAutocomplete = rootProps.slots.baseAutocomplete;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(BaseAutocomplete, (0, _extends2.default)({
     multiple: true,
     options: resolvedValueOptions,
     isOptionEqualToValue: isOptionEqualToValue,
-    filterOptions: filter,
     id: id,
     value: filteredValues,
     onChange: handleChange,
     getOptionLabel: getOptionLabel,
-    renderTags: (value, getTagProps) => value.map((option, index) => {
-      const _getTagProps = getTagProps({
-          index
-        }),
-        {
-          key
-        } = _getTagProps,
-        tagProps = (0, _objectWithoutPropertiesLoose2.default)(_getTagProps, _excluded2);
-      return /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseChip, (0, _extends2.default)({
-        variant: "outlined",
-        size: "small",
-        label: getOptionLabel(option)
-      }, tagProps), key);
-    }),
-    renderInput: params => {
-      const {
-          inputProps,
-          InputProps,
-          InputLabelProps
-        } = params,
-        rest = (0, _objectWithoutPropertiesLoose2.default)(params, _excluded3);
-      return /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseTextField, (0, _extends2.default)({}, rest, {
-        label: apiRef.current.getLocaleText('filterPanelInputLabel'),
-        placeholder: apiRef.current.getLocaleText('filterPanelInputPlaceholder'),
-        inputRef: focusElementRef,
+    label: apiRef.current.getLocaleText('filterPanelInputLabel'),
+    placeholder: apiRef.current.getLocaleText('filterPanelInputPlaceholder'),
+    slotProps: {
+      textField: {
         type: type || 'text',
-        slotProps: {
-          input: InputProps,
-          inputLabel: InputLabelProps,
-          htmlInput: inputProps
-        }
-      }, rootProps.slotProps?.baseTextField));
+        inputRef: focusElementRef
+      }
     }
   }, other, slotProps?.root));
 }

package/components/panel/filterPanel/GridFilterInputMultipleValue.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
-import { AutocompleteProps } from '@mui/material/Autocomplete';
+import { AutocompleteProps } from "../../../models/gridBaseSlots.js";
 import { GridFilterInputValueProps } from "../../../models/gridFilterInputComponent.js";
-export type GridFilterInputMultipleValueProps = GridFilterInputValueProps<Omit<AutocompleteProps<string, true, false, true>, 'options' | 'renderInput'>> & {
+export type GridFilterInputMultipleValueProps = GridFilterInputValueProps<Omit<AutocompleteProps<string, true, false, true>, 'options'>> & {
   type?: 'text' | 'number' | 'date' | 'datetime-local';
 };
 declare function GridFilterInputMultipleValue(props: GridFilterInputMultipleValueProps): React.JSX.Element;

package/components/panel/filterPanel/GridFilterInputMultipleValue.js

@@ -1,21 +1,17 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.GridFilterInputMultipleValue = GridFilterInputMultipleValue;
-var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _Autocomplete = _interopRequireDefault(require("@mui/material/Autocomplete"));
 var _utils = require("@mui/utils");
 var _useGridRootProps = require("../../../hooks/utils/useGridRootProps");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["key"],
-  _excluded2 = ["inputProps", "InputProps", "InputLabelProps"];
 function GridFilterInputMultipleValue(props) {
   const {
     item,
@@ -25,8 +21,9 @@ function GridFilterInputMultipleValue(props) {
     focusElementRef,
     slotProps
   } = props;
-  const [filterValueState, setFilterValueState] = React.useState(item.value || []);
   const id = (0, _utils.unstable_useId)();
+  const [options, setOptions] = React.useState([]);
+  const [filterValueState, setFilterValueState] = React.useState(item.value || []);
   const rootProps = (0, _useGridRootProps.useGridRootProps)();
   React.useEffect(() => {
     const itemValue = item.value ?? [];
@@ -38,51 +35,29 @@ function GridFilterInputMultipleValue(props) {
       value: [...value.map(filterItemValue => type === 'number' ? Number(filterItemValue) : filterItemValue)]
     }));
   }, [applyValue, item, type]);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Autocomplete.default, (0, _extends2.default)({
+  const handleInputChange = React.useCallback((event, value) => {
+    if (value === '') {
+      setOptions([]);
+    } else {
+      setOptions([value]);
+    }
+  }, [setOptions]);
+  const BaseAutocomplete = rootProps.slots.baseAutocomplete;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(BaseAutocomplete, (0, _extends2.default)({
     multiple: true,
     freeSolo: true,
-    options: [],
-    filterOptions: (options, params) => {
-      const {
-        inputValue
-      } = params;
-      return inputValue == null || inputValue === '' ? [] : [inputValue];
-    },
+    options: options,
     id: id,
     value: filterValueState,
     onChange: handleChange,
-    renderTags: (value, getTagProps) => value.map((option, index) => {
-      const _getTagProps = getTagProps({
-          index
-        }),
-        {
-          key
-        } = _getTagProps,
-        tagProps = (0, _objectWithoutPropertiesLoose2.default)(_getTagProps, _excluded);
-      return /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseChip, (0, _extends2.default)({
-        variant: "outlined",
-        size: "small",
-        label: option
-      }, tagProps), key);
-    }),
-    renderInput: params => {
-      const {
-          inputProps,
-          InputProps,
-          InputLabelProps
-        } = params,
-        rest = (0, _objectWithoutPropertiesLoose2.default)(params, _excluded2);
-      return /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseTextField, (0, _extends2.default)({}, rest, {
-        label: apiRef.current.getLocaleText('filterPanelInputLabel'),
-        placeholder: apiRef.current.getLocaleText('filterPanelInputPlaceholder'),
-        inputRef: focusElementRef,
+    onInputChange: handleInputChange,
+    label: apiRef.current.getLocaleText('filterPanelInputLabel'),
+    placeholder: apiRef.current.getLocaleText('filterPanelInputPlaceholder'),
+    slotProps: {
+      textField: {
         type: type || 'text',
-        slotProps: {
-          input: InputProps,
-          inputLabel: InputLabelProps,
-          htmlInput: inputProps
-        }
-      }, rootProps.slotProps?.baseTextField));
+        inputRef: focusElementRef
+      }
     }
   }, slotProps?.root));
 }

package/components/panel/filterPanel/GridFilterInputValue.js

@@ -65,12 +65,9 @@ function GridFilterInputValue(props) {
       disabled: disabled,
       slotProps: (0, _extends2.default)({}, textFieldProps?.slotProps, {
         input: (0, _extends2.default)({
-          endAdornment: applying ? /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseInputAdornment, {
-            position: "end",
-            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.loadIcon, {
-              fontSize: "small",
-              color: "action"
-            })
+          endAdornment: applying ? /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.loadIcon, {
+            fontSize: "small",
+            color: "action"
           }) : null
         }, textFieldProps?.slotProps?.input),
         htmlInput: (0, _extends2.default)({

package/components/toolbar/GridToolbarFilterButton.js

@@ -12,6 +12,7 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _styles = require("@mui/material/styles");
 var _utils = require("@mui/utils");
 var _forwardRef = require("@mui/x-internals/forwardRef");
+var _cssVariables = require("../../constants/cssVariables");
 var _gridColumnsSelector = require("../../hooks/features/columns/gridColumnsSelector");
 var _useGridSelector = require("../../hooks/utils/useGridSelector");
 var _gridFilterSelector = require("../../hooks/features/filter/gridFilterSelector");
@@ -34,12 +35,10 @@ const GridToolbarFilterListRoot = (0, _styles.styled)('ul', {
   name: 'MuiDataGrid',
   slot: 'ToolbarFilterList',
   overridesResolver: (_props, styles) => styles.toolbarFilterList
-})(({
-  theme
-}) => ({
-  margin: theme.spacing(1, 1, 0.5),
-  padding: theme.spacing(0, 1)
-}));
+})({
+  margin: _cssVariables.vars.spacing(1, 1, 0.5),
+  padding: _cssVariables.vars.spacing(0, 1)
+});
 
 // FIXME(v8:romgrk): override slotProps
 

package/components/toolbar/GridToolbarQuickFilter.js

@@ -15,6 +15,7 @@ var _styles = require("@mui/material/styles");
 var _utils = require("@mui/utils");
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
 var _OutlinedInput = require("@mui/material/OutlinedInput");
+var _cssVariables = require("../../constants/cssVariables");
 var _constants = require("../../constants");
 var _useGridApiContext = require("../../hooks/utils/useGridApiContext");
 var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
@@ -36,20 +37,18 @@ const GridToolbarQuickFilterRoot = (0, _styles.styled)('div', {
   name: 'MuiDataGrid',
   slot: 'ToolbarQuickFilter',
   overridesResolver: (props, styles) => styles.toolbarQuickFilter
-})(({
-  theme
-}) => ({
+})({
   [`.${_OutlinedInput.outlinedInputClasses.root}`]: {
-    fontSize: theme.typography.body2.fontSize
+    fontSize: _cssVariables.vars.typography.body.fontSize
   },
   [`& input[type="search"]::-webkit-search-decoration,
-  & input[type="search"]::-webkit-search-cancel-button,
-  & input[type="search"]::-webkit-search-results-button,
-  & input[type="search"]::-webkit-search-results-decoration`]: {
+    & input[type="search"]::-webkit-search-cancel-button,
+    & input[type="search"]::-webkit-search-results-button,
+    & input[type="search"]::-webkit-search-results-decoration`]: {
     /* clears the 'X' icon from Chrome */
     display: 'none'
   }
-}));
+});
 const defaultSearchValueParser = searchText => searchText.split(' ').filter(word => word !== '');
 const defaultSearchValueFormatter = values => values.join(' ');
 function GridToolbarQuickFilter(props) {
@@ -105,30 +104,24 @@ function GridToolbarQuickFilter(props) {
   }, other, {
     slotProps: (0, _extends2.default)({}, slotProps?.root.slotProps, {
       input: (0, _extends2.default)({
-        startAdornment: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseInputAdornment, {
-          position: "start",
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.quickFilterIcon, {
+        startAdornment: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.quickFilterIcon, {
+          fontSize: "small"
+        }),
+        endAdornment: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseIconButton, (0, _extends2.default)({
+          "aria-label": apiRef.current.getLocaleText('toolbarQuickFilterDeleteIconLabel'),
+          size: "small",
+          edge: "end",
+          style: searchValue ? {
+            visibility: 'visible'
+          } : {
+            visibility: 'hidden'
+          },
+          onClick: handleSearchReset
+        }, rootProps.slotProps?.baseIconButton, {
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.quickFilterClearIcon, {
             fontSize: "small"
           })
-        }),
-        endAdornment: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseInputAdornment, {
-          position: "end",
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseIconButton, (0, _extends2.default)({
-            "aria-label": apiRef.current.getLocaleText('toolbarQuickFilterDeleteIconLabel'),
-            size: "small",
-            edge: "end",
-            style: searchValue ? {
-              visibility: 'visible'
-            } : {
-              visibility: 'hidden'
-            },
-            onClick: handleSearchReset
-          }, rootProps.slotProps?.baseIconButton, {
-            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.quickFilterClearIcon, {
-              fontSize: "small"
-            })
-          }))
-        })
+        }))
       }, slotProps?.root.slotProps?.input)
     })
   }, rootProps.slotProps?.baseTextField));

package/components/virtualization/GridVirtualScrollbar.js

@@ -1,5 +1,6 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
@@ -7,7 +8,9 @@ Object.defineProperty(exports, "__esModule", {
 exports.GridVirtualScrollbar = void 0;
 var React = _interopRequireWildcard(require("react"));
 var _system = require("@mui/system");
-var _utils = require("@mui/utils");
+var _useEventCallback = _interopRequireDefault(require("@mui/utils/useEventCallback"));
+var _useForkRef = _interopRequireDefault(require("@mui/utils/useForkRef"));
+var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
 var _forwardRef = require("@mui/x-internals/forwardRef");
 var _useOnMount = require("../../hooks/utils/useOnMount");
 var _useGridPrivateApiContext = require("../../hooks/utils/useGridPrivateApiContext");
@@ -23,7 +26,7 @@ const useUtilityClasses = (ownerState, position) => {
     root: ['scrollbar', `scrollbar--${position}`],
     content: ['scrollbarContent']
   };
-  return (0, _utils.unstable_composeClasses)(slots, _gridClasses.getDataGridUtilityClass, classes);
+  return (0, _composeClasses.default)(slots, _gridClasses.getDataGridUtilityClass, classes);
 };
 const Scrollbar = (0, _system.styled)('div')({
   position: 'absolute',
@@ -79,7 +82,7 @@ const GridVirtualScrollbar = exports.GridVirtualScrollbar = (0, _forwardRef.forw
   const contentSize = dimensions.minimumSize[propertyDimension] + (hasScroll ? dimensions.scrollbarSize : 0);
   const scrollbarSize = props.position === 'vertical' ? dimensions.viewportInnerSize.height : dimensions.viewportOuterSize.width;
   const scrollbarInnerSize = scrollbarSize * (contentSize / dimensions.viewportOuterSize[propertyDimension]);
-  const onScrollerScroll = (0, _utils.unstable_useEventCallback)(() => {
+  const onScrollerScroll = (0, _useEventCallback.default)(() => {
     const scrollbar = scrollbarRef.current;
     const scrollPosition = props.scrollPosition.current;
     if (!scrollbar) {
@@ -97,7 +100,7 @@ const GridVirtualScrollbar = exports.GridVirtualScrollbar = (0, _forwardRef.forw
     const value = scrollPosition[propertyScrollPosition] / contentSize;
     scrollbar[propertyScroll] = value * scrollbarInnerSize;
   });
-  const onScrollbarScroll = (0, _utils.unstable_useEventCallback)(() => {
+  const onScrollbarScroll = (0, _useEventCallback.default)(() => {
     const scroller = apiRef.current.virtualScrollerRef.current;
     const scrollbar = scrollbarRef.current;
     if (!scrollbar) {
@@ -130,7 +133,7 @@ const GridVirtualScrollbar = exports.GridVirtualScrollbar = (0, _forwardRef.forw
   }, [scrollbarInnerSize, propertyDimension]);
   const Container = props.position === 'vertical' ? ScrollbarVertical : ScrollbarHorizontal;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(Container, {
-    ref: (0, _utils.unstable_useForkRef)(ref, scrollbarRef),
+    ref: (0, _useForkRef.default)(ref, scrollbarRef),
     className: classes.root,
     style: props.position === 'vertical' && rootProps.unstable_listView ? {
       height: '100%',

package/components/virtualization/GridVirtualScrollerFiller.js

@@ -8,6 +8,7 @@ exports.GridVirtualScrollerFiller = void 0;
 var React = _interopRequireWildcard(require("react"));
 var _system = require("@mui/system");
 var _fastMemo = require("@mui/x-internals/fastMemo");
+var _cssVariables = require("../../constants/cssVariables");
 var _useGridSelector = require("../../hooks/utils/useGridSelector");
 var _useGridApiContext = require("../../hooks/utils/useGridApiContext");
 var _dimensions = require("../../hooks/features/dimensions");
@@ -24,7 +25,7 @@ const Pinned = (0, _system.styled)('div')({
   height: '100%',
   boxSizing: 'border-box',
   borderTop: '1px solid var(--rowBorderColor)',
-  backgroundColor: 'var(--DataGrid-pinnedBackground)'
+  backgroundColor: _cssVariables.vars.cell.background.pinned
 });
 const PinnedLeft = (0, _system.styled)(Pinned)({
   left: 0,