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

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 */
@@ -119,7 +169,7 @@ const iconSlots = {
   densityCompactIcon: _icons.GridViewHeadlineIcon,
   densityStandardIcon: _icons.GridTableRowsIcon,
   densityComfortableIcon: _icons.GridViewStreamIcon,
-  exportIcon: _icons.GridSaveAltIcon,
+  exportIcon: _icons.GridDownloadIcon,
   moreActionsIcon: _icons.GridMoreVertIcon,
   treeDataCollapseIcon: _icons.GridExpandMoreIcon,
   treeDataExpandIcon: _icons.GridKeyboardArrowRight,
@@ -129,7 +179,7 @@ const iconSlots = {
   detailPanelCollapseIcon: _icons.GridRemoveIcon,
   rowReorderIcon: _icons.GridDragIcon,
   quickFilterIcon: _icons.GridSearchIcon,
-  quickFilterClearIcon: _icons.GridCloseIcon,
+  quickFilterClearIcon: _icons.GridClearIcon,
   columnMenuHideIcon: _icons.GridVisibilityOffIcon,
   columnMenuSortAscendingIcon: _icons.GridArrowUpwardIcon,
   columnMenuSortDescendingIcon: _icons.GridArrowDownwardIcon,
@@ -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;
 }

package/models/gridBaseSlots.d.ts

@@ -1,4 +1,59 @@
 type Ref<T = HTMLElement> = React.RefCallback<T | null> | React.RefObject<T | null> | null;
+export interface AutocompleteFilterOptionsState<Value> {
+  inputValue: string;
+  getOptionLabel: (option: Value) => string;
+}
+type AcValueMap<FreeSolo> = FreeSolo extends true ? string : never;
+type AcValue<Value, Multiple, DisableClearable, FreeSolo> = Multiple extends true ? Array<Value | AcValueMap<FreeSolo>> : DisableClearable extends true ? NonNullable<Value | AcValueMap<FreeSolo>> : Value | null | AcValueMap<FreeSolo>;
+export type AutocompleteProps<Value = string, Multiple extends boolean = false, DisableClearable extends boolean = false, FreeSolo extends boolean = false> = {
+  id?: string;
+  /** Allow multiple selection. */
+  multiple?: Multiple;
+  /** Allow to add new options. */
+  freeSolo?: FreeSolo;
+  value?: AcValue<Value, Multiple, DisableClearable, FreeSolo>;
+  options: ReadonlyArray<Value>;
+  /**
+   * Used to determine the string value for a given option.
+   * It's used to fill the input (and the list box options if `renderOption` is not provided).
+   *
+   * If used in free solo mode, it must accept both the type of the options and a string.
+   *
+   * @param {Value} option The option
+   * @returns {string} The label
+   * @default (option) => option.label ?? option
+   */
+  getOptionLabel?: (option: Value | AcValueMap<FreeSolo>) => string;
+  /**
+   * Used to determine if the option represents the given value.
+   * Uses strict equality by default.
+   * ⚠️ Both arguments need to be handled, an option can only match with one value.
+   *
+   * @param {Value} option The option to test.
+   * @param {Value} value The value to test against.
+   * @returns {boolean} true if value matches
+   */
+  isOptionEqualToValue?: (option: Value, value: Value) => boolean;
+  /**
+   * Callback fired when the value changes.
+   *
+   * @param {React.SyntheticEvent} event The event source of the callback.
+   * @param {Value|Value[]} value The new value of the component.
+   */
+  onChange?: (event: React.SyntheticEvent, value: AcValue<Value, Multiple, DisableClearable, FreeSolo>) => void;
+  /**
+   * Callback fired when the input value changes.
+   *
+   * @param {React.SyntheticEvent} event The event source of the callback.
+   * @param {string} value The new value of the input.
+   */
+  onInputChange?: (event: React.SyntheticEvent, value: string) => void;
+  label?: React.ReactNode;
+  placeholder?: string;
+  slotProps?: {
+    textField: TextFieldProps;
+  };
+};
 export type BadgeProps = {
   badgeContent?: React.ReactNode;
   children: React.ReactNode;
@@ -53,7 +108,9 @@ export type IconButtonProps = Omit<ButtonProps, 'startIcon'> & {
   color?: 'default' | 'inherit' | 'primary';
   edge?: 'start' | 'end' | false;
 };
-export type DividerProps = {};
+export type DividerProps = {
+  orientation?: 'horizontal' | 'vertical';
+};
 export type MenuListProps = {
   ref?: Ref<HTMLUListElement>;
   id?: string;
@@ -90,7 +147,6 @@ export type PopperProps = {
   clickAwayMouseEvent?: false | ClickAwayMouseEventHandler;
   flip?: boolean;
   focusTrap?: boolean;
-  focusTrapEnabled?: boolean;
   onExited?: (node: HTMLElement | null) => void;
   onClickAway?: (event: MouseEvent | TouchEvent) => void;
   onDidShow?: () => void;
@@ -169,6 +225,7 @@ export type SwitchProps = {
   size?: 'small' | 'medium';
 };
 export type TextFieldProps = {
+  role?: string;
   autoComplete?: string;
   className?: string;
   color?: 'primary' | 'error';
@@ -184,11 +241,7 @@ export type TextFieldProps = {
   placeholder?: string;
   size?: 'small' | 'medium';
   slotProps?: {
-    input?: {
-      disabled?: boolean;
-      endAdornment?: React.ReactNode;
-      startAdornment?: React.ReactNode;
-    };
+    input?: Partial<InputProps>;
     inputLabel?: {};
     htmlInput?: React.InputHTMLAttributes<HTMLInputElement>;
   };
@@ -196,6 +249,7 @@ export type TextFieldProps = {
   tabIndex?: number;
   type?: React.HTMLInputTypeAttribute;
   value?: string;
+  ref?: Ref<HTMLInputElement>;
 };
 export type TooltipProps = {
   children: React.ReactElement<any, any>;

package/models/gridDataSource.d.ts

@@ -1,4 +1,4 @@
-import type { GridSortModel, GridFilterModel, GridRowModel, GridPaginationModel } from '.';
+import type { GridSortModel, GridFilterModel, GridRowModel, GridPaginationModel, GridRowId } from '.';
 export interface GridGetRowsParams {
   sortModel: GridSortModel;
   filterModel: GridFilterModel;
@@ -15,6 +15,11 @@ export interface GridGetRowsParams {
    */
   end: number;
 }
+export interface GridUpdateRowParams {
+  rowId: GridRowId;
+  updatedRow: GridRowModel;
+  previousRow: GridRowModel;
+}
 export interface GridGetRowsResponse {
   rows: GridRowModel[];
   /**
@@ -39,11 +44,11 @@ export interface GridDataSource {
    */
   getRows(params: GridGetRowsParams): Promise<GridGetRowsResponse>;
   /**
-   * This method will be called when the user updates a row [Not yet implemented].
-   * @param {GridRowModel} updatedRow The updated row.
+   * This method will be called when the user updates a row.
+   * @param {GridUpdateRowParams} params The parameters required to update the row.
    * @returns {Promise<any>} If resolved (synced on the backend), the grid will update the row and mutate the cache.
    */
-  updateRow?(updatedRow: GridRowModel): Promise<any>;
+  updateRow?(params: GridUpdateRowParams): Promise<any>;
 }
 export interface GridDataSourceCache {
   /**

package/models/gridIconSlotsComponent.d.ts

@@ -70,7 +70,7 @@ export interface GridIconSlotsComponent {
   densityComfortableIcon: React.JSXElementConstructor<any>;
   /**
    * Icon displayed on the open export button present in the toolbar by default.
-   * @default GridSaveAltIcon
+   * @default GridDownloadIcon
    */
   exportIcon: React.JSXElementConstructor<any>;
   /**