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

package/modern/material/index.js

@@ -1,13 +1,18 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 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"];
 import * as React from 'react';
 import useForkRef from '@mui/utils/useForkRef';
+import { styled } from '@mui/material/styles';
+import MUIAutocomplete from '@mui/material/Autocomplete';
 import MUIBadge from '@mui/material/Badge';
 import MUICheckbox from '@mui/material/Checkbox';
 import MUIChip from '@mui/material/Chip';
@@ -22,12 +27,12 @@ import MUIMenuList from '@mui/material/MenuList';
 import MUIMenuItem from '@mui/material/MenuItem';
 import MUITextField from '@mui/material/TextField';
 import MUIFormControl from '@mui/material/FormControl';
-import MUIFormControlLabel from '@mui/material/FormControlLabel';
+import MUIFormControlLabel, { formControlLabelClasses } from '@mui/material/FormControlLabel';
 import MUISelect from '@mui/material/Select';
 import MUISwitch from '@mui/material/Switch';
 import MUIButton from '@mui/material/Button';
-import MUIIconButton from '@mui/material/IconButton';
-import MUIInputAdornment from '@mui/material/InputAdornment';
+import MUIIconButton, { iconButtonClasses } from '@mui/material/IconButton';
+import MUIInputAdornment, { inputAdornmentClasses } from '@mui/material/InputAdornment';
 import MUITooltip from '@mui/material/Tooltip';
 import MUIPopper from '@mui/material/Popper';
 import MUIClickAwayListener from '@mui/material/ClickAwayListener';
@@ -40,9 +45,47 @@ import { GridColumnUnsortedIcon } from "./icons/GridColumnUnsortedIcon.js";
 import { GridAddIcon, GridArrowDownwardIcon, GridArrowUpwardIcon, GridCheckIcon, GridCloseIcon, GridColumnIcon, GridDragIcon, GridExpandMoreIcon, GridFilterAltIcon, GridFilterListIcon, GridKeyboardArrowRight, GridMoreVertIcon, GridRemoveIcon, GridSaveAltIcon, GridSearchIcon, GridSeparatorIcon, GridTableRowsIcon, GridTripleDotsVerticalIcon, GridViewHeadlineIcon, GridViewStreamIcon, GridVisibilityOffIcon, GridViewColumnIcon, GridClearIcon, GridLoadIcon, GridDeleteForeverIcon } from "./icons/index.js";
 import { useGridRootProps } from "../hooks/utils/useGridRootProps.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export { useMaterialCSSVariables } from "./variables.js";
 const ClickAwayListener = forwardRef(MUIClickAwayListener);
+const InputAdornment = styled(MUIInputAdornment)({
+  [`&.${inputAdornmentClasses.positionEnd} .${iconButtonClasses.sizeSmall}`]: {
+    marginRight: '-7px'
+  }
+});
+const FormControlLabel = styled(MUIFormControlLabel, {
+  shouldForwardProp: prop => prop !== 'fullWidth'
+})(({
+  theme
+}) => ({
+  gap: theme.spacing(0.5),
+  margin: 0,
+  [`& .${formControlLabelClasses.label}`]: {
+    fontSize: theme.typography.pxToRem(14)
+  },
+  variants: [{
+    props: {
+      fullWidth: true
+    },
+    style: {
+      width: '100%'
+    }
+  }]
+}));
+const Checkbox = styled(MUICheckbox, {
+  shouldForwardProp: prop => prop !== 'density'
+})(({
+  theme
+}) => ({
+  variants: [{
+    props: {
+      density: 'compact'
+    },
+    style: {
+      padding: theme.spacing(0.5)
+    }
+  }]
+}));
 const BaseSelect = forwardRef(function BaseSelect(props, ref) {
-  const rootProps = useGridRootProps();
   const {
       id,
       label,
@@ -58,21 +101,27 @@ const BaseSelect = forwardRef(function BaseSelect(props, ref) {
       fullWidth
     } = props,
     rest = _objectWithoutPropertiesLoose(props, _excluded);
-  return /*#__PURE__*/_jsxs(MUIFormControl, _extends({
+  const menuProps = {
+    PaperProps: {
+      onKeyDown
+    }
+  };
+  if (onClose) {
+    menuProps.onClose = onClose;
+  }
+  return /*#__PURE__*/_jsxs(MUIFormControl, {
     size: size,
     fullWidth: fullWidth,
     style: style,
-    disabled: disabled
-  }, rootProps.slotProps?.baseFormControl, {
+    disabled: disabled,
     ref: ref,
-    children: [/*#__PURE__*/_jsx(MUIInputLabel, _extends({
+    children: [/*#__PURE__*/_jsx(MUIInputLabel, {
       id: labelId,
       htmlFor: id,
       shrink: true,
-      variant: "outlined"
-    }, rootProps.slotProps?.baseInputLabel, {
+      variant: "outlined",
       children: label
-    })), /*#__PURE__*/_jsx(MUISelect, _extends({
+    }), /*#__PURE__*/_jsx(MUISelect, _extends({
       id: id,
       labelId: labelId,
       label: label,
@@ -83,15 +132,10 @@ const BaseSelect = 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 */
@@ -135,6 +179,7 @@ const iconSlots = {
   menuItemCheckIcon: GridCheckIcon
 };
 const baseSlots = {
+  baseAutocomplete: BaseAutocomplete,
   baseBadge: MUIBadge,
   baseCheckbox: /*#__PURE__*/React.forwardRef(BaseCheckbox),
   baseCircularProgress: MUICircularProgress,
@@ -144,38 +189,29 @@ const baseSlots = {
   baseMenuList: BaseMenuList,
   baseMenuItem: BaseMenuItem,
   baseTextField: BaseTextField,
-  baseFormControl: MUIFormControl,
   baseButton: MUIButton,
   baseIconButton: MUIIconButton,
-  baseInputAdornment: MUIInputAdornment,
   baseTooltip: MUITooltip,
   basePopper: BasePopper,
-  baseInputLabel: MUIInputLabel,
   baseSelect: BaseSelect,
   baseSelectOption: BaseSelectOption,
   baseSkeleton: MUISkeleton,
-  baseSwitch: MUISwitch,
-  baseChip: MUIChip
+  baseSwitch: MUISwitch
 };
 const materialSlots = _extends({}, baseSlots, iconSlots);
 export default materialSlots;
-const CHECKBOX_COMPACT = {
-  p: 0.5
-};
 function BaseCheckbox(props, ref) {
   const {
       autoFocus,
       label,
       fullWidth,
       slotProps,
-      className,
-      density
+      className
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded2);
   const elementRef = React.useRef(null);
   const handleRef = useForkRef(elementRef, ref);
   const rippleRef = React.useRef(null);
-  const sx = density === 'compact' ? CHECKBOX_COMPACT : undefined;
   React.useEffect(() => {
     if (autoFocus) {
       const input = elementRef.current?.querySelector('input');
@@ -189,27 +225,22 @@ function BaseCheckbox(props, ref) {
     }
   }, [autoFocus]);
   if (!label) {
-    return /*#__PURE__*/_jsx(MUICheckbox, _extends({}, other, {
+    return /*#__PURE__*/_jsx(Checkbox, _extends({}, other, {
       className: className,
       inputProps: slotProps?.htmlInput,
       ref: handleRef,
-      sx: sx,
       touchRippleRef: rippleRef
     }));
   }
-  return /*#__PURE__*/_jsx(MUIFormControlLabel, {
+  return /*#__PURE__*/_jsx(FormControlLabel, {
     className: className,
-    control: /*#__PURE__*/_jsx(MUICheckbox, _extends({}, other, {
+    control: /*#__PURE__*/_jsx(Checkbox, _extends({}, other, {
       inputProps: slotProps?.htmlInput,
       ref: handleRef,
-      sx: sx,
       touchRippleRef: rippleRef
     })),
     label: label,
-    sx: fullWidth ? {
-      width: '100%',
-      margin: 0
-    } : undefined
+    fullWidth: fullWidth
   });
 }
 function BaseMenuList(props) {
@@ -245,20 +276,102 @@ function BaseTextField(props) {
     variant: "outlined"
   }, rest, {
     inputProps: slotProps?.htmlInput,
-    InputProps: slotProps?.input,
+    InputProps: transformInputProps(slotProps?.input),
     InputLabelProps: _extends({
       shrink: true
     }, slotProps?.inputLabel)
   }));
 }
-function BaseInput(props) {
+function BaseAutocomplete(props) {
+  const rootProps = useGridRootProps();
   const {
+      id,
+      multiple,
+      freeSolo,
+      options,
+      getOptionLabel,
+      isOptionEqualToValue,
+      value,
+      onChange,
+      label,
+      placeholder,
       slotProps
     } = props,
     rest = _objectWithoutPropertiesLoose(props, _excluded5);
-  return /*#__PURE__*/_jsx(MUIInputBase, _extends({}, rest, {
-    inputProps: slotProps?.htmlInput
-  }));
+  return /*#__PURE__*/_jsx(MUIAutocomplete, _extends({
+    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 = _objectWithoutPropertiesLoose(_getTagProps, _excluded6);
+      return /*#__PURE__*/_jsx(MUIChip, _extends({
+        variant: "outlined",
+        size: "small",
+        label: typeof option === 'string' ? option : getOptionLabel?.(option)
+      }, tagProps), key);
+    }),
+    renderInput: params => {
+      const {
+          inputProps,
+          InputProps,
+          InputLabelProps
+        } = params,
+        inputRest = _objectWithoutPropertiesLoose(params, _excluded7);
+      return /*#__PURE__*/_jsx(rootProps.slots.baseTextField, _extends({}, inputRest, {
+        label: label,
+        placeholder: placeholder,
+        slotProps: {
+          input: InputProps,
+          inputLabel: InputLabelProps,
+          htmlInput: inputProps
+        }
+      }, slotProps?.textField, rootProps.slotProps?.baseTextField));
+    }
+  }, rest));
+}
+function BaseInput(props) {
+  return /*#__PURE__*/_jsx(MUIInputBase, _extends({}, transformInputProps(props)));
+}
+function transformInputProps(props) {
+  if (!props) {
+    return undefined;
+  }
+  const {
+      slotProps
+    } = props,
+    rest = _objectWithoutPropertiesLoose(props, _excluded8);
+  const result = rest;
+  if (result.startAdornment) {
+    result.startAdornment = /*#__PURE__*/_jsx(InputAdornment, {
+      position: "start",
+      children: result.startAdornment
+    });
+  }
+  if (result.endAdornment) {
+    result.endAdornment = /*#__PURE__*/_jsx(InputAdornment, {
+      position: "end",
+      children: result.endAdornment
+    });
+  }
+  if (slotProps?.htmlInput) {
+    if (result.inputProps) {
+      result.inputProps = _extends({}, result.inputProps, slotProps?.htmlInput);
+    } else {
+      result.inputProps = slotProps?.htmlInput;
+    }
+  }
+  return result;
 }
 const transformOrigin = {
   'bottom-start': 'top left',
@@ -353,15 +466,17 @@ function focusTrapWrapper(props, content) {
   return /*#__PURE__*/_jsx(MUIFocusTrap, {
     open: true,
     disableEnforceFocus: true,
-    isEnabled: () => props.focusTrapEnabled ?? true,
-    children: content
+    children: /*#__PURE__*/_jsx("div", {
+      tabIndex: -1,
+      children: content
+    })
   });
 }
 function BaseSelectOption(_ref) {
   let {
       native
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded6);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded9);
   if (native) {
     return /*#__PURE__*/_jsx("option", _extends({}, props));
   }

package/modern/material/variables.d.ts

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

package/modern/material/variables.js

@@ -0,0 +1,89 @@
+import * as React from 'react';
+import { alpha, darken, lighten } from '@mui/material/styles';
+import { useTheme } from '@mui/material/styles';
+import { hash } from '@mui/x-internals/hash';
+import { vars } from "../constants/cssVariables.js";
+export function useMaterialCSSVariables() {
+  const theme = useTheme();
+  return React.useMemo(() => {
+    const id = 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})` : 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 = 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 lighten(alpha(theme.palette.divider, 1), 0.88);
+  }
+  return darken(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/modern/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/modern/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/modern/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/modern/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;
@@ -90,7 +145,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;
@@ -184,11 +238,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>;
   };

package/modern/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/modern/models/gridRowSelectionManager.d.ts

@@ -0,0 +1,9 @@
+import type { GridRowId } from './gridRows';
+import type { GridRowSelectionModel } from './gridRowSelectionModel';
+export interface RowSelectionManager {
+  data: Set<GridRowId>;
+  has(id: GridRowId): boolean;
+  select(id: GridRowId): void;
+  unselect(id: GridRowId): void;
+}
+export declare const createRowSelectionManager: (model: GridRowSelectionModel) => RowSelectionManager;

package/modern/models/gridRowSelectionManager.js

@@ -0,0 +1,36 @@
+class IncludeManager {
+  constructor(model) {
+    this.data = void 0;
+    this.data = model.ids;
+  }
+  has(id) {
+    return this.data.has(id);
+  }
+  select(id) {
+    this.data.add(id);
+  }
+  unselect(id) {
+    this.data.delete(id);
+  }
+}
+class ExcludeManager {
+  constructor(model) {
+    this.data = void 0;
+    this.data = model.ids;
+  }
+  has(id) {
+    return !this.data.has(id);
+  }
+  select(id) {
+    this.data.delete(id);
+  }
+  unselect(id) {
+    this.data.add(id);
+  }
+}
+export const createRowSelectionManager = model => {
+  if (model.type === 'include') {
+    return new IncludeManager(model);
+  }
+  return new ExcludeManager(model);
+};

package/modern/models/gridRowSelectionModel.d.ts

@@ -3,5 +3,7 @@ export type GridRowSelectionPropagation = {
   descendants?: boolean;
   parents?: boolean;
 };
-export type GridInputRowSelectionModel = readonly GridRowId[] | GridRowId;
-export type GridRowSelectionModel = readonly GridRowId[];
+export type GridRowSelectionModel = {
+  type: 'include' | 'exclude';
+  ids: Set<GridRowId>;
+};