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

package/locales/ruRU.js

@@ -21,9 +21,8 @@ const ruRUGrid = {
   // Root
   noRowsLabel: 'Нет строк',
   noResultsOverlayLabel: 'Данные не найдены.',
-  // noColumnsOverlayLabel: 'No columns',
-  // noColumnsOverlayManageColumns: 'Manage columns',
-
+  noColumnsOverlayLabel: 'Нет столбцов',
+  noColumnsOverlayManageColumns: 'Управление столбцами',
   // Density selector toolbar button text
   toolbarDensity: 'Высота строки',
   toolbarDensityLabel: 'Высота строки',
@@ -48,16 +47,15 @@ const ruRUGrid = {
   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: 'Экспорт',
@@ -69,8 +67,7 @@ const ruRUGrid = {
   columnsManagementNoColumns: 'Нет столбцов',
   columnsManagementShowHideAllText: 'Показать/Скрыть Всё',
   columnsManagementReset: 'Сбросить',
-  // columnsManagementDeleteIconLabel: 'Clear',
-
+  columnsManagementDeleteIconLabel: 'Очистить',
   // Filter panel text
   filterPanelAddFilter: 'Добавить фильтр',
   filterPanelRemoveAll: 'Очистить фильтр',
@@ -84,9 +81,9 @@ const ruRUGrid = {
   filterPanelInputPlaceholder: 'Значение фильтра',
   // Filter operators text
   filterOperatorContains: 'содержит',
-  // filterOperatorDoesNotContain: 'does not contain',
+  filterOperatorDoesNotContain: 'не содержит',
   filterOperatorEquals: 'равен',
-  // filterOperatorDoesNotEqual: 'does not equal',
+  filterOperatorDoesNotEqual: 'не равен',
   filterOperatorStartsWith: 'начинается с',
   filterOperatorEndsWith: 'заканчивается на',
   filterOperatorIs: 'равен',
@@ -106,9 +103,9 @@ const ruRUGrid = {
   'filterOperator<=': '<=',
   // Header filter operators text
   headerFilterOperatorContains: 'содержит',
-  // headerFilterOperatorDoesNotContain: 'Does not contain',
+  headerFilterOperatorDoesNotContain: 'не содержит',
   headerFilterOperatorEquals: 'равен',
-  // headerFilterOperatorDoesNotEqual: 'Does not equal',
+  headerFilterOperatorDoesNotEqual: 'не равен',
   headerFilterOperatorStartsWith: 'начинается с',
   headerFilterOperatorEndsWith: 'заканчивается на',
   headerFilterOperatorIs: 'равен',
@@ -126,8 +123,7 @@ const ruRUGrid = {
   'headerFilterOperator>=': 'больше или равно',
   'headerFilterOperator<': 'меньше чем',
   'headerFilterOperator<=': 'меньше или равно',
-  // headerFilterClear: 'Clear filter',
-
+  headerFilterClear: 'Очистить фильтр',
   // Filter values text
   filterValueAny: 'любой',
   filterValueTrue: 'истина',

package/material/index.d.ts

@@ -1,4 +1,5 @@
 import type { GridIconSlotsComponent } from '../models';
 import type { GridBaseSlots } from '../models/gridSlotsComponent';
+export { useMaterialCSSVariables } from "./variables.js";
 declare const materialSlots: GridBaseSlots & GridIconSlotsComponent;
 export default materialSlots;

package/material/index.js

@@ -6,10 +6,18 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+Object.defineProperty(exports, "useMaterialCSSVariables", {
+  enumerable: true,
+  get: function () {
+    return _variables.useMaterialCSSVariables;
+  }
+});
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var React = _interopRequireWildcard(require("react"));
 var _useForkRef = _interopRequireDefault(require("@mui/utils/useForkRef"));
+var _styles = require("@mui/material/styles");
+var _Autocomplete = _interopRequireDefault(require("@mui/material/Autocomplete"));
 var _Badge = _interopRequireDefault(require("@mui/material/Badge"));
 var _Checkbox = _interopRequireDefault(require("@mui/material/Checkbox"));
 var _Chip = _interopRequireDefault(require("@mui/material/Chip"));
@@ -24,12 +32,12 @@ var _MenuList = _interopRequireDefault(require("@mui/material/MenuList"));
 var _MenuItem = _interopRequireDefault(require("@mui/material/MenuItem"));
 var _TextField = _interopRequireDefault(require("@mui/material/TextField"));
 var _FormControl = _interopRequireDefault(require("@mui/material/FormControl"));
-var _FormControlLabel = _interopRequireDefault(require("@mui/material/FormControlLabel"));
+var _FormControlLabel = _interopRequireWildcard(require("@mui/material/FormControlLabel"));
 var _Select = _interopRequireDefault(require("@mui/material/Select"));
 var _Switch = _interopRequireDefault(require("@mui/material/Switch"));
 var _Button = _interopRequireDefault(require("@mui/material/Button"));
-var _IconButton = _interopRequireDefault(require("@mui/material/IconButton"));
-var _InputAdornment = _interopRequireDefault(require("@mui/material/InputAdornment"));
+var _IconButton = _interopRequireWildcard(require("@mui/material/IconButton"));
+var _InputAdornment = _interopRequireWildcard(require("@mui/material/InputAdornment"));
 var _Tooltip = _interopRequireDefault(require("@mui/material/Tooltip"));
 var _Popper = _interopRequireDefault(require("@mui/material/Popper"));
 var _ClickAwayListener = _interopRequireDefault(require("@mui/material/ClickAwayListener"));
@@ -42,15 +50,56 @@ var _GridColumnUnsortedIcon = require("./icons/GridColumnUnsortedIcon");
 var _icons = require("./icons");
 var _useGridRootProps = require("../hooks/utils/useGridRootProps");
 var _jsxRuntime = require("react/jsx-runtime");
+var _variables = require("./variables");
 const _excluded = ["id", "label", "labelId", "disabled", "slotProps", "onChange", "onKeyDown", "onOpen", "onClose", "size", "style", "fullWidth"],
-  _excluded2 = ["autoFocus", "label", "fullWidth", "slotProps", "className", "density"],
+  _excluded2 = ["autoFocus", "label", "fullWidth", "slotProps", "className"],
   _excluded3 = ["inert", "iconStart", "iconEnd", "children"],
   _excluded4 = ["slotProps"],
-  _excluded5 = ["slotProps"],
-  _excluded6 = ["native"];
+  _excluded5 = ["id", "multiple", "freeSolo", "options", "getOptionLabel", "isOptionEqualToValue", "value", "onChange", "label", "placeholder", "slotProps"],
+  _excluded6 = ["key"],
+  _excluded7 = ["inputProps", "InputProps", "InputLabelProps"],
+  _excluded8 = ["slotProps"],
+  _excluded9 = ["native"];
 const ClickAwayListener = (0, _forwardRef.forwardRef)(_ClickAwayListener.default);
+const InputAdornment = (0, _styles.styled)(_InputAdornment.default)({
+  [`&.${_InputAdornment.inputAdornmentClasses.positionEnd} .${_IconButton.iconButtonClasses.sizeSmall}`]: {
+    marginRight: '-7px'
+  }
+});
+const FormControlLabel = (0, _styles.styled)(_FormControlLabel.default, {
+  shouldForwardProp: prop => prop !== 'fullWidth'
+})(({
+  theme
+}) => ({
+  gap: theme.spacing(0.5),
+  margin: 0,
+  [`& .${_FormControlLabel.formControlLabelClasses.label}`]: {
+    fontSize: theme.typography.pxToRem(14)
+  },
+  variants: [{
+    props: {
+      fullWidth: true
+    },
+    style: {
+      width: '100%'
+    }
+  }]
+}));
+const Checkbox = (0, _styles.styled)(_Checkbox.default, {
+  shouldForwardProp: prop => prop !== 'density'
+})(({
+  theme
+}) => ({
+  variants: [{
+    props: {
+      density: 'compact'
+    },
+    style: {
+      padding: theme.spacing(0.5)
+    }
+  }]
+}));
 const BaseSelect = (0, _forwardRef.forwardRef)(function BaseSelect(props, ref) {
-  const rootProps = (0, _useGridRootProps.useGridRootProps)();
   const {
       id,
       label,
@@ -66,21 +115,27 @@ const BaseSelect = (0, _forwardRef.forwardRef)(function BaseSelect(props, ref) {
       fullWidth
     } = props,
     rest = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_FormControl.default, (0, _extends2.default)({
+  const menuProps = {
+    PaperProps: {
+      onKeyDown
+    }
+  };
+  if (onClose) {
+    menuProps.onClose = onClose;
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_FormControl.default, {
     size: size,
     fullWidth: fullWidth,
     style: style,
-    disabled: disabled
-  }, rootProps.slotProps?.baseFormControl, {
+    disabled: disabled,
     ref: ref,
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_InputLabel.default, (0, _extends2.default)({
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_InputLabel.default, {
       id: labelId,
       htmlFor: id,
       shrink: true,
-      variant: "outlined"
-    }, rootProps.slotProps?.baseInputLabel, {
+      variant: "outlined",
       children: label
-    })), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Select.default, (0, _extends2.default)({
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Select.default, (0, _extends2.default)({
       id: id,
       labelId: labelId,
       label: label,
@@ -91,15 +146,10 @@ const BaseSelect = (0, _forwardRef.forwardRef)(function BaseSelect(props, ref) {
       notched: true,
       inputProps: slotProps?.htmlInput,
       onOpen: onOpen,
-      MenuProps: {
-        onClose,
-        PaperProps: {
-          onKeyDown
-        }
-      },
+      MenuProps: menuProps,
       size: size
     }))]
-  }));
+  });
 });
 
 /* eslint-disable material-ui/disallow-react-api-in-server-components */
@@ -143,6 +193,7 @@ const iconSlots = {
   menuItemCheckIcon: _icons.GridCheckIcon
 };
 const baseSlots = {
+  baseAutocomplete: BaseAutocomplete,
   baseBadge: _Badge.default,
   baseCheckbox: /*#__PURE__*/React.forwardRef(BaseCheckbox),
   baseCircularProgress: _CircularProgress.default,
@@ -152,38 +203,29 @@ const baseSlots = {
   baseMenuList: BaseMenuList,
   baseMenuItem: BaseMenuItem,
   baseTextField: BaseTextField,
-  baseFormControl: _FormControl.default,
   baseButton: _Button.default,
   baseIconButton: _IconButton.default,
-  baseInputAdornment: _InputAdornment.default,
   baseTooltip: _Tooltip.default,
   basePopper: BasePopper,
-  baseInputLabel: _InputLabel.default,
   baseSelect: BaseSelect,
   baseSelectOption: BaseSelectOption,
   baseSkeleton: _Skeleton.default,
-  baseSwitch: _Switch.default,
-  baseChip: _Chip.default
+  baseSwitch: _Switch.default
 };
 const materialSlots = (0, _extends2.default)({}, baseSlots, iconSlots);
 var _default = exports.default = materialSlots;
-const CHECKBOX_COMPACT = {
-  p: 0.5
-};
 function BaseCheckbox(props, ref) {
   const {
       autoFocus,
       label,
       fullWidth,
       slotProps,
-      className,
-      density
+      className
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded2);
   const elementRef = React.useRef(null);
   const handleRef = (0, _useForkRef.default)(elementRef, ref);
   const rippleRef = React.useRef(null);
-  const sx = density === 'compact' ? CHECKBOX_COMPACT : undefined;
   React.useEffect(() => {
     if (autoFocus) {
       const input = elementRef.current?.querySelector('input');
@@ -197,27 +239,22 @@ function BaseCheckbox(props, ref) {
     }
   }, [autoFocus]);
   if (!label) {
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Checkbox.default, (0, _extends2.default)({}, other, {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(Checkbox, (0, _extends2.default)({}, other, {
       className: className,
       inputProps: slotProps?.htmlInput,
       ref: handleRef,
-      sx: sx,
       touchRippleRef: rippleRef
     }));
   }
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_FormControlLabel.default, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(FormControlLabel, {
     className: className,
-    control: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Checkbox.default, (0, _extends2.default)({}, other, {
+    control: /*#__PURE__*/(0, _jsxRuntime.jsx)(Checkbox, (0, _extends2.default)({}, other, {
       inputProps: slotProps?.htmlInput,
       ref: handleRef,
-      sx: sx,
       touchRippleRef: rippleRef
     })),
     label: label,
-    sx: fullWidth ? {
-      width: '100%',
-      margin: 0
-    } : undefined
+    fullWidth: fullWidth
   });
 }
 function BaseMenuList(props) {
@@ -253,20 +290,102 @@ function BaseTextField(props) {
     variant: "outlined"
   }, rest, {
     inputProps: slotProps?.htmlInput,
-    InputProps: slotProps?.input,
+    InputProps: transformInputProps(slotProps?.input),
     InputLabelProps: (0, _extends2.default)({
       shrink: true
     }, slotProps?.inputLabel)
   }));
 }
-function BaseInput(props) {
+function BaseAutocomplete(props) {
+  const rootProps = (0, _useGridRootProps.useGridRootProps)();
   const {
+      id,
+      multiple,
+      freeSolo,
+      options,
+      getOptionLabel,
+      isOptionEqualToValue,
+      value,
+      onChange,
+      label,
+      placeholder,
       slotProps
     } = props,
     rest = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded5);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_InputBase.default, (0, _extends2.default)({}, rest, {
-    inputProps: slotProps?.htmlInput
-  }));
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Autocomplete.default, (0, _extends2.default)({
+    id: id,
+    multiple: multiple,
+    freeSolo: freeSolo,
+    options: options,
+    getOptionLabel: getOptionLabel,
+    isOptionEqualToValue: isOptionEqualToValue,
+    value: value,
+    onChange: onChange,
+    renderTags: (currentValue, getTagProps) => currentValue.map((option, index) => {
+      const _getTagProps = getTagProps({
+          index
+        }),
+        {
+          key
+        } = _getTagProps,
+        tagProps = (0, _objectWithoutPropertiesLoose2.default)(_getTagProps, _excluded6);
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Chip.default, (0, _extends2.default)({
+        variant: "outlined",
+        size: "small",
+        label: typeof option === 'string' ? option : getOptionLabel?.(option)
+      }, tagProps), key);
+    }),
+    renderInput: params => {
+      const {
+          inputProps,
+          InputProps,
+          InputLabelProps
+        } = params,
+        inputRest = (0, _objectWithoutPropertiesLoose2.default)(params, _excluded7);
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseTextField, (0, _extends2.default)({}, inputRest, {
+        label: label,
+        placeholder: placeholder,
+        slotProps: {
+          input: InputProps,
+          inputLabel: InputLabelProps,
+          htmlInput: inputProps
+        }
+      }, slotProps?.textField, rootProps.slotProps?.baseTextField));
+    }
+  }, rest));
+}
+function BaseInput(props) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_InputBase.default, (0, _extends2.default)({}, transformInputProps(props)));
+}
+function transformInputProps(props) {
+  if (!props) {
+    return undefined;
+  }
+  const {
+      slotProps
+    } = props,
+    rest = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded8);
+  const result = rest;
+  if (result.startAdornment) {
+    result.startAdornment = /*#__PURE__*/(0, _jsxRuntime.jsx)(InputAdornment, {
+      position: "start",
+      children: result.startAdornment
+    });
+  }
+  if (result.endAdornment) {
+    result.endAdornment = /*#__PURE__*/(0, _jsxRuntime.jsx)(InputAdornment, {
+      position: "end",
+      children: result.endAdornment
+    });
+  }
+  if (slotProps?.htmlInput) {
+    if (result.inputProps) {
+      result.inputProps = (0, _extends2.default)({}, result.inputProps, slotProps?.htmlInput);
+    } else {
+      result.inputProps = slotProps?.htmlInput;
+    }
+  }
+  return result;
 }
 const transformOrigin = {
   'bottom-start': 'top left',
@@ -361,15 +480,17 @@ function focusTrapWrapper(props, content) {
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Unstable_TrapFocus.default, {
     open: true,
     disableEnforceFocus: true,
-    isEnabled: () => props.focusTrapEnabled ?? true,
-    children: content
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      tabIndex: -1,
+      children: content
+    })
   });
 }
 function BaseSelectOption(_ref) {
   let {
       native
     } = _ref,
-    props = (0, _objectWithoutPropertiesLoose2.default)(_ref, _excluded6);
+    props = (0, _objectWithoutPropertiesLoose2.default)(_ref, _excluded9);
   if (native) {
     return /*#__PURE__*/(0, _jsxRuntime.jsx)("option", (0, _extends2.default)({}, props));
   }

package/material/variables.d.ts

@@ -0,0 +1,5 @@
+import { type GridCSSVariablesInterface } from "../constants/cssVariables.js";
+export declare function useMaterialCSSVariables(): {
+  id: string;
+  variables: GridCSSVariablesInterface;
+};

package/material/variables.js

@@ -0,0 +1,95 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useMaterialCSSVariables = useMaterialCSSVariables;
+var React = _interopRequireWildcard(require("react"));
+var _styles = require("@mui/material/styles");
+var _hash = require("@mui/x-internals/hash");
+var _cssVariables = require("../constants/cssVariables");
+function useMaterialCSSVariables() {
+  const theme = (0, _styles.useTheme)();
+  return React.useMemo(() => {
+    const id = (0, _hash.hash)(JSON.stringify(theme));
+    const variables = transformTheme(theme);
+    return {
+      id,
+      variables
+    };
+  }, [theme]);
+}
+function transformTheme(t) {
+  const borderColor = getBorderColor(t);
+  const dataGridPalette = t.palette.DataGrid; // FIXME: docs typecheck error
+
+  const backgroundBase = dataGridPalette?.bg ?? (t.vars || t).palette.background.default;
+  const backgroundHeader = dataGridPalette?.headerBg ?? backgroundBase;
+  const backgroundPinned = dataGridPalette?.pinnedBg ?? backgroundBase;
+  const backgroundBackdrop = t.vars ? `rgba(${t.vars.palette.background.defaultChannel} / ${t.vars.palette.action.disabledOpacity})` : (0, _styles.alpha)(t.palette.background.default, t.palette.action.disabledOpacity);
+  const selectedColor = t.vars ? `rgb(${t.vars.palette.primary.mainChannel})` : t.palette.primary.main;
+  const k = _cssVariables.vars.keys;
+  return {
+    [k.spacingUnit]: t.spacing(1),
+    [k.colors.border.base]: borderColor,
+    [k.colors.background.base]: backgroundBase,
+    [k.colors.background.overlay]: t.palette.mode === 'dark' ? `color-mix(in srgb, ${t.palette.background.paper} 95%, #fff)` : t.palette.background.paper,
+    [k.colors.background.backdrop]: backgroundBackdrop,
+    [k.colors.foreground.base]: t.palette.text.primary,
+    [k.colors.foreground.muted]: t.palette.text.secondary,
+    [k.colors.foreground.accent]: t.palette.primary.dark,
+    [k.colors.foreground.disabled]: t.palette.text.disabled,
+    [k.colors.interactive.hover]: removeOpacity(t.palette.action.hover),
+    [k.colors.interactive.hoverOpacity]: t.palette.action.hoverOpacity,
+    [k.colors.interactive.focus]: removeOpacity(t.palette.primary.main),
+    [k.colors.interactive.focusOpacity]: t.palette.action.focusOpacity,
+    [k.colors.interactive.disabled]: removeOpacity(t.palette.action.disabled),
+    [k.colors.interactive.disabledOpacity]: t.palette.action.disabledOpacity,
+    [k.colors.interactive.selected]: selectedColor,
+    [k.colors.interactive.selectedOpacity]: t.palette.action.selectedOpacity,
+    [k.header.background.base]: backgroundHeader,
+    [k.cell.background.pinned]: backgroundPinned,
+    [k.radius.base]: typeof t.shape.borderRadius === 'number' ? `${t.shape.borderRadius}px` : t.shape.borderRadius,
+    [k.typography.fontFamily.base]: t.typography.fontFamily,
+    [k.typography.fontWeight.light]: t.typography.fontWeightLight,
+    [k.typography.fontWeight.regular]: t.typography.fontWeightRegular,
+    [k.typography.fontWeight.medium]: t.typography.fontWeightMedium,
+    [k.typography.fontWeight.bold]: t.typography.fontWeightBold,
+    [k.typography.body.fontFamily]: t.typography.body2.fontFamily,
+    [k.typography.body.fontSize]: t.typography.body2.fontSize,
+    [k.typography.body.fontWeight]: t.typography.body2.fontWeight,
+    [k.typography.body.letterSpacing]: t.typography.body2.letterSpacing,
+    [k.typography.body.lineHeight]: t.typography.body2.lineHeight,
+    [k.typography.small.fontFamily]: t.typography.caption.fontFamily,
+    [k.typography.small.fontSize]: t.typography.caption.fontSize,
+    [k.typography.small.fontWeight]: t.typography.caption.fontWeight,
+    [k.typography.small.letterSpacing]: t.typography.caption.letterSpacing,
+    [k.typography.small.lineHeight]: t.typography.caption.lineHeight,
+    [k.transitions.easing.easeIn]: t.transitions.easing.easeIn,
+    [k.transitions.easing.easeOut]: t.transitions.easing.easeOut,
+    [k.transitions.easing.easeInOut]: t.transitions.easing.easeInOut,
+    [k.transitions.duration.short]: `${t.transitions.duration.shorter}ms`,
+    [k.transitions.duration.base]: `${t.transitions.duration.short}ms`,
+    [k.transitions.duration.long]: `${t.transitions.duration.standard}ms`,
+    [k.shadows.base]: t.shadows[2],
+    [k.shadows.overlay]: t.shadows[8],
+    [k.zIndex.panel]: t.zIndex.modal,
+    [k.zIndex.menu]: t.zIndex.modal
+  };
+}
+function getBorderColor(theme) {
+  if (theme.vars) {
+    return theme.vars.palette.TableCell.border;
+  }
+  if (theme.palette.mode === 'light') {
+    return (0, _styles.lighten)((0, _styles.alpha)(theme.palette.divider, 1), 0.88);
+  }
+  return (0, _styles.darken)((0, _styles.alpha)(theme.palette.divider, 1), 0.68);
+}
+function setOpacity(color, opacity) {
+  return `rgba(from ${color} r g b / ${opacity})`;
+}
+function removeOpacity(color) {
+  return setOpacity(color, 1);
+}

package/models/api/gridRowSelectionApi.d.ts

@@ -1,4 +1,5 @@
-import { GridRowId, GridRowModel } from "../gridRows.js";
+import type { GridRowId, GridRowModel } from '../gridRows';
+import type { GridRowSelectionModel } from '../gridRowSelectionModel';
 /**
  * The selection API interface that is available in the grid [[apiRef]].
  */
@@ -25,6 +26,7 @@ export interface GridRowSelectionApi {
   /**
    * Returns an array of the selected rows.
    * @returns {Map<GridRowId, GridRowModel>} A `Map` with the selected rows.
+   * @deprecated Use `gridRowSelectionIdsSelector`, `gridRowSelectionCountSelector`, or `gridRowSelectionManagerSelector` instead.
    */
   getSelectedRows: () => Map<GridRowId, GridRowModel>;
   /**
@@ -32,7 +34,7 @@ export interface GridRowSelectionApi {
    * Any row already selected will be unselected.
    * @param {readonly GridRowId[]} rowIds The row ids to select.
    */
-  setRowSelectionModel: (rowIds: readonly GridRowId[]) => void;
+  setRowSelectionModel: (rowIds: GridRowSelectionModel) => void;
 }
 export interface GridRowMultiSelectionApi {
   /**

package/models/api/gridSortApi.d.ts

@@ -23,7 +23,7 @@ export interface GridSortApi {
    * Sorts a column.
    * @param {GridColDef['field']} field The field identifier of the column to be sorted.
    * @param {GridSortDirection} direction The direction to be sorted. By default, the next in the `sortingOrder` prop.
-   * @param {boolean} allowMultipleSorting Whether to keep the existing [[GridSortItem]]. Default is `false`.
+   * @param {boolean} allowMultipleSorting Whether to keep the existing [GridSortModel]. Default is `false`.
    */
   sortColumn: (field: GridColDef['field'], direction?: GridSortDirection, allowMultipleSorting?: boolean) => void;
   /**

package/models/configuration/gridConfiguration.d.ts

@@ -1,9 +1,15 @@
 import * as React from 'react';
 import { GridRowAriaAttributesInternalHook } from "./gridRowConfiguration.js";
+import type { GridCSSVariablesInterface } from '../../constants/cssVariables';
 export interface GridAriaAttributesInternalHook {
   useGridAriaAttributes: () => React.HTMLAttributes<HTMLElement>;
 }
-export interface GridInternalHook extends GridAriaAttributesInternalHook, GridRowAriaAttributesInternalHook {}
+export interface GridInternalHook extends GridAriaAttributesInternalHook, GridRowAriaAttributesInternalHook {
+  useCSSVariables: () => {
+    id: string;
+    variables: GridCSSVariablesInterface;
+  };
+}
 export interface GridConfiguration {
   hooks: GridInternalHook;
 }