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

package/modern/components/base/GridBody.d.ts

@@ -0,0 +1,2 @@
+import { GridVirtualScroller } from "../virtualization/GridVirtualScroller.js";
+export { GridVirtualScroller as GridBody };

package/modern/components/base/GridFooterPlaceholder.d.ts

@@ -0,0 +1,2 @@
+import * as React from 'react';
+export declare function GridFooterPlaceholder(): React.JSX.Element | null;

package/modern/components/base/GridOverlays.d.ts

@@ -0,0 +1,13 @@
+import * as React from 'react';
+import { GridLoadingOverlayVariant } from "../GridLoadingOverlay.js";
+import { GridSlotsComponent } from "../../models/index.js";
+export type GridOverlayType = keyof Pick<GridSlotsComponent, 'noColumnsOverlay' | 'noRowsOverlay' | 'noResultsOverlay' | 'loadingOverlay'> | null;
+interface GridOverlaysProps {
+  overlayType: GridOverlayType;
+  loadingOverlayVariant: GridLoadingOverlayVariant | null;
+}
+export declare function GridOverlayWrapper(props: React.PropsWithChildren<GridOverlaysProps>): React.JSX.Element;
+export declare namespace GridOverlayWrapper {
+  var propTypes: any;
+}
+export {};

package/modern/components/base/GridOverlays.js

@@ -82,5 +82,5 @@ process.env.NODE_ENV !== "production" ? GridOverlayWrapper.propTypes = {
   // | To update them edit the TypeScript types and run "pnpm proptypes"  |
   // ----------------------------------------------------------------------
   loadingOverlayVariant: PropTypes.oneOf(['circular-progress', 'linear-progress', 'skeleton']),
-  overlayType: PropTypes.oneOf(['loadingOverlay', 'noResultsOverlay', 'noRowsOverlay'])
+  overlayType: PropTypes.oneOf(['loadingOverlay', 'noResultsOverlay', 'noRowsOverlay', 'noColumnsOverlay'])
 } : void 0;

package/modern/components/base/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./GridBody.js";
+export * from "./GridFooterPlaceholder.js";

package/modern/components/cell/GridActionsCell.d.ts

@@ -0,0 +1,13 @@
+import * as React from 'react';
+import { GridRenderCellParams } from "../../models/params/gridCellParams.js";
+import { GridMenuProps } from "../menu/GridMenu.js";
+interface GridActionsCellProps extends Omit<GridRenderCellParams, 'api'> {
+  api?: GridRenderCellParams['api'];
+  position?: GridMenuProps['position'];
+}
+declare function GridActionsCell(props: GridActionsCellProps): React.JSX.Element;
+declare namespace GridActionsCell {
+  var propTypes: any;
+}
+export { GridActionsCell };
+export declare const renderActionsCell: (params: GridRenderCellParams) => React.JSX.Element;

package/modern/components/cell/GridActionsCell.js

@@ -183,7 +183,6 @@ function GridActionsCell(props) {
         className: gridClasses.menuList,
         onKeyDown: handleListKeyDown,
         "aria-labelledby": buttonId,
-        variant: "menu",
         autoFocusItem: true,
         children: menuButtons.map((button, index) => /*#__PURE__*/React.cloneElement(button, {
           key: index,

package/modern/components/cell/GridActionsCellItem.d.ts

@@ -0,0 +1,41 @@
+import * as React from 'react';
+import { GridSlotProps } from "../../models/gridSlotsComponentsProps.js";
+interface GridActionsCellItemCommonProps {
+  label: string;
+  icon?: React.ReactElement<any>;
+  /** from https://mui.com/material-ui/api/button-base/#ButtonBase-prop-component */
+  component?: React.ElementType;
+}
+export type GridActionsCellItemProps = GridActionsCellItemCommonProps & (({
+  showInMenu?: false;
+  icon: React.ReactElement<any>;
+} & Omit<GridSlotProps['baseIconButton'], 'component'>) | ({
+  showInMenu: true;
+  /**
+   * If false, the menu will not close when this item is clicked.
+   * @default true
+   */
+  closeMenuOnClick?: boolean;
+  closeMenu?: () => void;
+} & Omit<GridSlotProps['baseMenuItem'], 'component'>));
+declare const GridActionsCellItem: React.ForwardRefExoticComponent<GridActionsCellItemProps> | React.ForwardRefExoticComponent<(Omit<GridActionsCellItemCommonProps & {
+  showInMenu?: false;
+  icon: React.ReactElement<any>;
+} & Omit<Omit<import("../../models/gridBaseSlots").ButtonProps, "startIcon"> & {
+  label?: string;
+  color?: "default" | "inherit" | "primary";
+  edge?: "start" | "end" | false;
+} & import("../..").BaseIconButtonPropsOverrides & import("@mui/material").IconButtonOwnProps & Omit<import("@mui/material").ButtonBaseOwnProps, "classes"> & import("@mui/material/OverridableComponent").CommonProps & Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "color" | "size" | "style" | "disabled" | "action" | "className" | "tabIndex" | "children" | "sx" | "classes" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "disableFocusRipple" | "edge"> & {
+  component?: React.ElementType;
+}, "component">, "ref"> | Omit<GridActionsCellItemCommonProps & {
+  showInMenu: true;
+  /**
+   * If false, the menu will not close when this item is clicked.
+   * @default true
+   */
+  closeMenuOnClick?: boolean;
+  closeMenu?: () => void;
+} & Omit<import("../../models/gridBaseSlots").MenuItemProps & import("../..").BaseMenuItemPropsOverrides & import("@mui/material").MenuItemOwnProps & Omit<import("@mui/material").ButtonBaseOwnProps, "classes"> & import("@mui/material/OverridableComponent").CommonProps & Omit<React.DetailedHTMLProps<React.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "style" | "dense" | "disabled" | "action" | "selected" | "autoFocus" | "className" | "tabIndex" | "children" | "sx" | "classes" | "disableGutters" | "divider" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef"> & {
+  component?: React.ElementType;
+}, "component">, "ref">) & React.RefAttributes<HTMLElement>>;
+export { GridActionsCellItem };

package/modern/components/cell/GridBooleanCell.d.ts

@@ -0,0 +1,14 @@
+import * as React from 'react';
+import { SvgIconProps } from '@mui/material/SvgIcon';
+import type { GridColDef } from '../../models/colDef/gridColDef';
+import type { GridRenderCellParams } from '../../models/params/gridCellParams';
+interface GridBooleanCellProps extends GridRenderCellParams, Omit<SvgIconProps, 'tabIndex' | 'id'> {
+  hideDescendantCount?: boolean;
+}
+declare function GridBooleanCellRaw(props: GridBooleanCellProps): React.JSX.Element | null;
+declare namespace GridBooleanCellRaw {
+  var propTypes: any;
+}
+declare const GridBooleanCell: React.MemoExoticComponent<typeof GridBooleanCellRaw>;
+export { GridBooleanCell };
+export declare const renderBooleanCell: GridColDef['renderCell'];

package/modern/components/cell/GridCell.d.ts

@@ -0,0 +1,77 @@
+import * as React from 'react';
+import { GridRowId } from "../../models/index.js";
+import { GridAlignment, GridStateColDef } from "../../models/colDef/gridColDef.js";
+import { GridRowModel, GridTreeNode } from "../../models/gridRows.js";
+import { GridPinnedColumnPosition } from "../../hooks/features/columns/gridColumnsInterfaces.js";
+import { PinnedColumnPosition } from "../../internals/constants.js";
+export declare const gridPinnedColumnPositionLookup: {
+  1: GridPinnedColumnPosition;
+  2: GridPinnedColumnPosition;
+  0: undefined;
+  3: undefined;
+};
+export type GridCellProps = React.HTMLAttributes<HTMLDivElement> & {
+  align: GridAlignment;
+  className?: string;
+  colIndex: number;
+  column: GridStateColDef;
+  row: GridRowModel;
+  rowId: GridRowId;
+  rowNode: GridTreeNode;
+  width: number;
+  colSpan?: number;
+  disableDragEvents?: boolean;
+  isNotVisible: boolean;
+  pinnedOffset?: number;
+  pinnedPosition: PinnedColumnPosition;
+  showRightBorder: boolean;
+  showLeftBorder: boolean;
+  onClick?: React.MouseEventHandler<HTMLDivElement>;
+  onDoubleClick?: React.MouseEventHandler<HTMLDivElement>;
+  onMouseEnter?: React.MouseEventHandler<HTMLDivElement>;
+  onMouseDown?: React.MouseEventHandler<HTMLDivElement>;
+  onMouseLeave?: React.MouseEventHandler<HTMLDivElement>;
+  onMouseUp?: React.MouseEventHandler<HTMLDivElement>;
+  onMouseOver?: React.MouseEventHandler<HTMLDivElement>;
+  onKeyUp?: React.KeyboardEventHandler<HTMLDivElement>;
+  onKeyDown?: React.KeyboardEventHandler<HTMLDivElement>;
+  onDragEnter?: React.DragEventHandler<HTMLDivElement>;
+  onDragOver?: React.DragEventHandler<HTMLDivElement>;
+  onFocus?: React.FocusEventHandler<Element>;
+  children?: React.ReactNode;
+  style?: React.CSSProperties;
+  [x: `data-${string}`]: string;
+};
+declare const MemoizedGridCell: React.ForwardRefExoticComponent<GridCellProps> | React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
+  [x: `data-${string}`]: string;
+  align: GridAlignment;
+  className?: string;
+  colIndex: number;
+  column: GridStateColDef;
+  row: GridRowModel;
+  rowId: GridRowId;
+  rowNode: GridTreeNode;
+  width: number;
+  colSpan?: number;
+  disableDragEvents?: boolean;
+  isNotVisible: boolean;
+  pinnedOffset?: number;
+  pinnedPosition: PinnedColumnPosition;
+  showRightBorder: boolean;
+  showLeftBorder: boolean;
+  onClick?: React.MouseEventHandler<HTMLDivElement>;
+  onDoubleClick?: React.MouseEventHandler<HTMLDivElement>;
+  onMouseEnter?: React.MouseEventHandler<HTMLDivElement>;
+  onMouseDown?: React.MouseEventHandler<HTMLDivElement>;
+  onMouseLeave?: React.MouseEventHandler<HTMLDivElement>;
+  onMouseUp?: React.MouseEventHandler<HTMLDivElement>;
+  onMouseOver?: React.MouseEventHandler<HTMLDivElement>;
+  onKeyUp?: React.KeyboardEventHandler<HTMLDivElement>;
+  onKeyDown?: React.KeyboardEventHandler<HTMLDivElement>;
+  onDragEnter?: React.DragEventHandler<HTMLDivElement>;
+  onDragOver?: React.DragEventHandler<HTMLDivElement>;
+  onFocus?: React.FocusEventHandler<Element>;
+  children?: React.ReactNode;
+  style?: React.CSSProperties;
+} & React.RefAttributes<HTMLDivElement>>;
+export { MemoizedGridCell as GridCell };

package/modern/components/cell/GridEditBooleanCell.d.ts

@@ -0,0 +1,17 @@
+import * as React from 'react';
+import { GridRenderEditCellParams } from "../../models/params/gridCellParams.js";
+export interface GridEditBooleanCellProps extends GridRenderEditCellParams, Omit<React.DetailedHTMLProps<React.LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, 'id' | 'tabIndex'> {
+  /**
+   * Callback called when the value is changed by the user.
+   * @param {React.ChangeEvent<HTMLInputElement>} event The event source of the callback.
+   * @param {boolean} newValue The value that is going to be passed to `apiRef.current.setEditCellValue`.
+   * @returns {Promise<void> | void} A promise to be awaited before calling `apiRef.current.setEditCellValue`
+   */
+  onValueChange?: (event: React.ChangeEvent<HTMLInputElement>, newValue: boolean) => Promise<void> | void;
+}
+declare function GridEditBooleanCell(props: GridEditBooleanCellProps): React.JSX.Element;
+declare namespace GridEditBooleanCell {
+  var propTypes: any;
+}
+export { GridEditBooleanCell };
+export declare const renderEditBooleanCell: (params: GridEditBooleanCellProps) => React.JSX.Element;

package/modern/components/cell/GridEditDateCell.d.ts

@@ -0,0 +1,21 @@
+import * as React from 'react';
+import { GridSlotProps } from "../../models/gridSlotsComponent.js";
+import { GridRenderEditCellParams } from "../../models/params/gridCellParams.js";
+export interface GridEditDateCellProps extends GridRenderEditCellParams {
+  /**
+   * Callback called when the value is changed by the user.
+   * @param {React.ChangeEvent<HTMLInputElement>} event The event source of the callback.
+   * @param {Date | null} newValue The value that is going to be passed to `apiRef.current.setEditCellValue`.
+   * @returns {Promise<void> | void} A promise to be awaited before calling `apiRef.current.setEditCellValue`
+   */
+  onValueChange?: (event: React.ChangeEvent<HTMLInputElement>, newValue: Date | null) => Promise<void> | void;
+  slotProps?: {
+    root?: Partial<GridSlotProps['baseInput']>;
+  };
+}
+declare function GridEditDateCell(props: GridEditDateCellProps): React.JSX.Element;
+declare namespace GridEditDateCell {
+  var propTypes: any;
+}
+export { GridEditDateCell };
+export declare const renderEditDateCell: (params: GridRenderEditCellParams) => React.JSX.Element;

package/modern/components/cell/GridEditDateCell.js

@@ -1,16 +1,16 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["id", "value", "formattedValue", "api", "field", "row", "rowNode", "colDef", "cellMode", "isEditable", "tabIndex", "hasFocus", "inputProps", "isValidating", "isProcessingProps", "onValueChange"];
+const _excluded = ["id", "value", "formattedValue", "api", "field", "row", "rowNode", "colDef", "cellMode", "isEditable", "tabIndex", "hasFocus", "inputProps", "isValidating", "isProcessingProps", "onValueChange", "slotProps"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { unstable_composeClasses as composeClasses, unstable_useEnhancedEffect as useEnhancedEffect } from '@mui/utils';
-import InputBase from '@mui/material/InputBase';
 import { styled } from '@mui/material/styles';
+import { NotRendered } from "../../utils/assert.js";
 import { getDataGridUtilityClass } from "../../constants/gridClasses.js";
 import { useGridRootProps } from "../../hooks/utils/useGridRootProps.js";
 import { useGridApiContext } from "../../hooks/utils/useGridApiContext.js";
 import { jsx as _jsx } from "react/jsx-runtime";
-const StyledInputBase = styled(InputBase)({
+const StyledInputBase = styled(NotRendered)({
   fontSize: 'inherit'
 });
 const useUtilityClasses = ownerState => {
@@ -29,8 +29,8 @@ function GridEditDateCell(props) {
       field,
       colDef,
       hasFocus,
-      inputProps,
-      onValueChange
+      onValueChange,
+      slotProps
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
   const isDateTime = colDef.type === 'dateTime';
@@ -108,16 +108,20 @@ function GridEditDateCell(props) {
     }
   }, [hasFocus]);
   return /*#__PURE__*/_jsx(StyledInputBase, _extends({
+    as: rootProps.slots.baseInput,
     inputRef: inputRef,
     fullWidth: true,
     className: classes.root,
     type: isDateTime ? 'datetime-local' : 'date',
-    inputProps: _extends({
-      max: isDateTime ? '9999-12-31T23:59' : '9999-12-31'
-    }, inputProps),
     value: valueState.formatted,
     onChange: handleChange
-  }, other));
+  }, other, slotProps?.root, {
+    slotProps: {
+      htmlInput: _extends({
+        max: isDateTime ? '9999-12-31T23:59' : '9999-12-31'
+      }, slotProps?.root?.slotProps?.htmlInput)
+    }
+  }));
 }
 process.env.NODE_ENV !== "production" ? GridEditDateCell.propTypes = {
   // ----------------------------- Warning --------------------------------
@@ -174,6 +178,7 @@ process.env.NODE_ENV !== "production" ? GridEditDateCell.propTypes = {
    * The node of the row that the current cell belongs to.
    */
   rowNode: PropTypes.object.isRequired,
+  slotProps: PropTypes.object,
   /**
    * the tabIndex value.
    */

package/modern/components/cell/GridEditInputCell.d.ts

@@ -0,0 +1,19 @@
+import * as React from 'react';
+import { GridSlotProps } from "../../models/gridSlotsComponent.js";
+import { GridRenderEditCellParams } from "../../models/params/gridCellParams.js";
+export interface GridEditInputCellProps extends GridRenderEditCellParams {
+  debounceMs?: number;
+  /**
+   * Callback called when the value is changed by the user.
+   * @param {React.ChangeEvent<HTMLInputElement>} event The event source of the callback.
+   * @param {Date | null} newValue The value that is going to be passed to `apiRef.current.setEditCellValue`.
+   * @returns {Promise<void> | void} A promise to be awaited before calling `apiRef.current.setEditCellValue`
+   */
+  onValueChange?: (event: React.ChangeEvent<HTMLInputElement>, newValue: string) => Promise<void> | void;
+  slotProps?: {
+    root?: Partial<GridSlotProps['baseInput']>;
+  };
+}
+declare const GridEditInputCell: React.ForwardRefExoticComponent<GridEditInputCellProps> | React.ForwardRefExoticComponent<Omit<GridEditInputCellProps, "ref"> & React.RefAttributes<HTMLInputElement>>;
+export { GridEditInputCell };
+export declare const renderEditInputCell: (params: GridEditInputCellProps) => React.JSX.Element;

package/modern/components/cell/GridEditInputCell.js

@@ -1,12 +1,12 @@
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["id", "value", "formattedValue", "api", "field", "row", "rowNode", "colDef", "cellMode", "isEditable", "tabIndex", "hasFocus", "isValidating", "debounceMs", "isProcessingProps", "onValueChange"];
+const _excluded = ["id", "value", "formattedValue", "api", "field", "row", "rowNode", "colDef", "cellMode", "isEditable", "tabIndex", "hasFocus", "isValidating", "debounceMs", "isProcessingProps", "onValueChange", "slotProps"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { unstable_composeClasses as composeClasses, unstable_useEnhancedEffect as useEnhancedEffect } from '@mui/utils';
 import { styled } from '@mui/material/styles';
-import InputBase from '@mui/material/InputBase';
 import { forwardRef } from '@mui/x-internals/forwardRef';
+import { NotRendered } from "../../utils/assert.js";
 import { getDataGridUtilityClass } from "../../constants/gridClasses.js";
 import { useGridRootProps } from "../../hooks/utils/useGridRootProps.js";
 import { useGridApiContext } from "../../hooks/utils/useGridApiContext.js";
@@ -20,10 +20,9 @@ const useUtilityClasses = ownerState => {
   };
   return composeClasses(slots, getDataGridUtilityClass, classes);
 };
-const GridEditInputCellRoot = styled(InputBase, {
+const GridEditInputCellRoot = styled(NotRendered, {
   name: 'MuiDataGrid',
-  slot: 'EditInputCell',
-  overridesResolver: (props, styles) => styles.editInputCell
+  slot: 'EditInputCell'
 })(({
   theme
 }) => _extends({}, theme.typography.body2, {
@@ -43,7 +42,8 @@ const GridEditInputCell = forwardRef((props, ref) => {
       hasFocus,
       debounceMs = 200,
       isProcessingProps,
-      onValueChange
+      onValueChange,
+      slotProps
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
   const apiRef = useGridApiContext();
@@ -81,6 +81,7 @@ const GridEditInputCell = forwardRef((props, ref) => {
     }
   }, [hasFocus]);
   return /*#__PURE__*/_jsx(GridEditInputCellRoot, _extends({
+    as: rootProps.slots.baseInput,
     inputRef: inputRef,
     className: classes.root,
     ownerState: rootProps,
@@ -92,7 +93,7 @@ const GridEditInputCell = forwardRef((props, ref) => {
       fontSize: "small",
       color: "action"
     }) : undefined
-  }, other, {
+  }, other, slotProps?.root, {
     ref: ref
   }));
 });
@@ -152,6 +153,7 @@ process.env.NODE_ENV !== "production" ? GridEditInputCell.propTypes = {
    * The node of the row that the current cell belongs to.
    */
   rowNode: PropTypes.object.isRequired,
+  slotProps: PropTypes.object,
   /**
    * the tabIndex value.
    */

package/modern/components/cell/GridEditSingleSelectCell.d.ts

@@ -0,0 +1,22 @@
+import * as React from 'react';
+import { SelectProps, SelectChangeEvent } from '@mui/material/Select';
+import { GridRenderEditCellParams } from "../../models/params/gridCellParams.js";
+export interface GridEditSingleSelectCellProps extends GridRenderEditCellParams, Omit<SelectProps, 'id' | 'tabIndex' | 'value'> {
+  /**
+   * Callback called when the value is changed by the user.
+   * @param {SelectChangeEvent<any>} event The event source of the callback.
+   * @param {any} newValue The value that is going to be passed to `apiRef.current.setEditCellValue`.
+   * @returns {Promise<void> | void} A promise to be awaited before calling `apiRef.current.setEditCellValue`
+   */
+  onValueChange?: (event: SelectChangeEvent<any>, newValue: any) => Promise<void> | void;
+  /**
+   * If true, the select opens by default.
+   */
+  initialOpen?: boolean;
+}
+declare function GridEditSingleSelectCell(props: GridEditSingleSelectCellProps): React.JSX.Element | null;
+declare namespace GridEditSingleSelectCell {
+  var propTypes: any;
+}
+export { GridEditSingleSelectCell };
+export declare const renderEditSingleSelectCell: (params: GridEditSingleSelectCellProps) => React.JSX.Element;

package/modern/components/cell/GridEditSingleSelectCell.js

@@ -1,7 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["id", "value", "formattedValue", "api", "field", "row", "rowNode", "colDef", "cellMode", "isEditable", "tabIndex", "className", "hasFocus", "isValidating", "isProcessingProps", "error", "onValueChange", "initialOpen"],
-  _excluded2 = ["MenuProps"];
+const _excluded = ["id", "value", "formattedValue", "api", "field", "row", "rowNode", "colDef", "cellMode", "isEditable", "tabIndex", "className", "hasFocus", "isValidating", "isProcessingProps", "error", "onValueChange", "initialOpen", "slotProps"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { unstable_useEnhancedEffect as useEnhancedEffect } from '@mui/utils';
@@ -26,7 +25,8 @@ function GridEditSingleSelectCell(props) {
       hasFocus,
       error,
       onValueChange,
-      initialOpen = rootProps.editMode === GridEditModes.Cell
+      initialOpen = rootProps.editMode === GridEditModes.Cell,
+      slotProps
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
   const apiRef = useGridApiContext();
@@ -35,11 +35,6 @@ function GridEditSingleSelectCell(props) {
   const [open, setOpen] = React.useState(initialOpen);
   const baseSelectProps = rootProps.slotProps?.baseSelect || {};
   const isSelectNative = baseSelectProps.native ?? false;
-  const _ref = rootProps.slotProps?.baseSelect || {},
-    {
-      MenuProps
-    } = _ref,
-    otherBaseSelectProps = _objectWithoutPropertiesLoose(_ref, _excluded2);
   useEnhancedEffect(() => {
     if (hasFocus) {
       inputRef.current?.focus();
@@ -97,18 +92,20 @@ function GridEditSingleSelectCell(props) {
   }
   return /*#__PURE__*/_jsx(rootProps.slots.baseSelect, _extends({
     ref: ref,
-    inputRef: inputRef,
     value: valueProp,
     onChange: handleChange,
     open: open,
     onOpen: handleOpen,
-    MenuProps: _extends({
-      onClose: handleClose
-    }, MenuProps),
+    onClose: handleClose,
     error: error,
     native: isSelectNative,
-    fullWidth: true
-  }, other, otherBaseSelectProps, {
+    fullWidth: true,
+    slotProps: {
+      htmlInput: {
+        ref: inputRef
+      }
+    }
+  }, other, slotProps?.root, rootProps.slotProps?.baseSelect, {
     children: valueOptions.map(valueOption => {
       const value = getOptionValue(valueOption);
       return /*#__PURE__*/_createElement(rootProps.slots.baseSelectOption, _extends({}, rootProps.slotProps?.baseSelectOption || {}, {

package/modern/components/cell/GridSkeletonCell.d.ts

@@ -0,0 +1,20 @@
+import * as React from 'react';
+import { GridColType } from "../../models/index.js";
+export interface GridSkeletonCellProps extends React.HTMLAttributes<HTMLDivElement> {
+  type?: GridColType;
+  width?: number | string;
+  height?: number | 'auto';
+  field?: string;
+  align?: string;
+  /**
+   * If `true`, the cell will not display the skeleton but still reserve the cell space.
+   * @default false
+   */
+  empty?: boolean;
+}
+declare function GridSkeletonCell(props: GridSkeletonCellProps): React.JSX.Element;
+declare namespace GridSkeletonCell {
+  var propTypes: any;
+}
+declare const Memoized: typeof GridSkeletonCell;
+export { Memoized as GridSkeletonCell };

package/modern/components/cell/index.d.ts

@@ -0,0 +1,10 @@
+export { GridCell } from "./GridCell.js";
+export type { GridCellProps } from './GridCell';
+export * from "./GridBooleanCell.js";
+export * from "./GridEditBooleanCell.js";
+export * from "./GridEditDateCell.js";
+export * from "./GridEditInputCell.js";
+export * from "./GridEditSingleSelectCell.js";
+export * from "./GridActionsCell.js";
+export * from "./GridActionsCellItem.js";
+export * from "./GridSkeletonCell.js";

package/modern/components/columnHeaders/ColumnHeaderMenuIcon.d.ts

@@ -0,0 +1,10 @@
+import * as React from 'react';
+import { GridStateColDef } from "../../models/colDef/gridColDef.js";
+export interface ColumnHeaderMenuIconProps {
+  colDef: GridStateColDef;
+  columnMenuId: string;
+  columnMenuButtonId: string;
+  open: boolean;
+  iconButtonRef: React.RefObject<HTMLButtonElement | null>;
+}
+export declare const ColumnHeaderMenuIcon: React.MemoExoticComponent<(props: ColumnHeaderMenuIconProps) => React.JSX.Element>;

package/modern/components/columnHeaders/GridBaseColumnHeaders.d.ts

@@ -0,0 +1,7 @@
+import * as React from 'react';
+import { SxProps, Theme } from '@mui/system';
+interface GridBaseColumnHeadersProps extends React.HTMLAttributes<HTMLDivElement> {
+  sx?: SxProps<Theme>;
+}
+export declare const GridBaseColumnHeaders: React.ForwardRefExoticComponent<GridBaseColumnHeadersProps> | React.ForwardRefExoticComponent<GridBaseColumnHeadersProps & React.RefAttributes<HTMLDivElement>>;
+export {};

package/modern/components/columnHeaders/GridColumnGroupHeader.d.ts

@@ -0,0 +1,21 @@
+import * as React from 'react';
+import { PinnedColumnPosition } from "../../internals/constants.js";
+interface GridColumnGroupHeaderProps {
+  groupId: string | null;
+  width: number;
+  fields: string[];
+  colIndex: number;
+  isLastColumn: boolean;
+  depth: number;
+  maxDepth: number;
+  height: number;
+  hasFocus?: boolean;
+  tabIndex: 0 | -1;
+  style?: React.CSSProperties;
+  showLeftBorder: boolean;
+  showRightBorder: boolean;
+  pinnedPosition: PinnedColumnPosition | undefined;
+  pinnedOffset?: number;
+}
+declare function GridColumnGroupHeader(props: GridColumnGroupHeaderProps): React.JSX.Element;
+export { GridColumnGroupHeader };

package/modern/components/columnHeaders/GridColumnHeaderFilterIconButton.d.ts

@@ -0,0 +1,12 @@
+import * as React from 'react';
+import { GridColumnHeaderParams } from "../../models/params/gridColumnHeaderParams.js";
+export interface ColumnHeaderFilterIconButtonProps {
+  field: string;
+  counter?: number;
+  onClick?: (params: GridColumnHeaderParams, event: React.MouseEvent<HTMLButtonElement>) => void;
+}
+declare function GridColumnHeaderFilterIconButtonWrapped(props: ColumnHeaderFilterIconButtonProps): React.JSX.Element | null;
+declare namespace GridColumnHeaderFilterIconButtonWrapped {
+  var propTypes: any;
+}
+export { GridColumnHeaderFilterIconButtonWrapped as GridColumnHeaderFilterIconButton };

package/modern/components/columnHeaders/GridColumnHeaderFilterIconButton.js

@@ -55,7 +55,7 @@ function GridColumnHeaderFilterIconButton(props) {
     const {
       open,
       openedPanelValue
-    } = gridPreferencePanelStateSelector(apiRef.current.state);
+    } = gridPreferencePanelStateSelector(apiRef);
     if (open && openedPanelValue === GridPreferencePanelsValue.filters) {
       apiRef.current.hideFilterPanel();
     } else {

package/modern/components/columnHeaders/GridColumnHeaderItem.d.ts

@@ -0,0 +1,34 @@
+import * as React from 'react';
+import { GridStateColDef } from "../../models/colDef/gridColDef.js";
+import { GridSortDirection } from "../../models/gridSortModel.js";
+import { GridColumnHeaderSeparatorProps } from "./GridColumnHeaderSeparator.js";
+import { PinnedColumnPosition } from "../../internals/constants.js";
+interface GridColumnHeaderItemProps {
+  colIndex: number;
+  colDef: GridStateColDef;
+  columnMenuOpen: boolean;
+  headerHeight: number;
+  isDragging: boolean;
+  isResizing: boolean;
+  isLast: boolean;
+  sortDirection: GridSortDirection;
+  sortIndex?: number;
+  filterItemsCounter?: number;
+  hasFocus?: boolean;
+  tabIndex: 0 | -1;
+  disableReorder?: boolean;
+  separatorSide?: GridColumnHeaderSeparatorProps['side'];
+  pinnedPosition?: PinnedColumnPosition;
+  pinnedOffset?: number;
+  style?: React.CSSProperties;
+  isLastUnpinned: boolean;
+  isSiblingFocused: boolean;
+  showLeftBorder: boolean;
+  showRightBorder: boolean;
+}
+declare function GridColumnHeaderItem(props: GridColumnHeaderItemProps): React.JSX.Element;
+declare namespace GridColumnHeaderItem {
+  var propTypes: any;
+}
+declare const Memoized: typeof GridColumnHeaderItem;
+export { Memoized as GridColumnHeaderItem };

package/modern/components/columnHeaders/GridColumnHeaderSeparator.d.ts

@@ -0,0 +1,17 @@
+import * as React from 'react';
+declare enum GridColumnHeaderSeparatorSides {
+  Left = "left",
+  Right = "right",
+}
+export interface GridColumnHeaderSeparatorProps extends React.HTMLAttributes<HTMLDivElement> {
+  resizable: boolean;
+  resizing: boolean;
+  height: number;
+  side?: GridColumnHeaderSeparatorSides;
+}
+declare function GridColumnHeaderSeparatorRaw(props: GridColumnHeaderSeparatorProps): React.JSX.Element;
+declare namespace GridColumnHeaderSeparatorRaw {
+  var propTypes: any;
+}
+declare const GridColumnHeaderSeparator: React.MemoExoticComponent<typeof GridColumnHeaderSeparatorRaw>;
+export { GridColumnHeaderSeparator, GridColumnHeaderSeparatorSides };

package/modern/components/columnHeaders/GridColumnHeaderSortIcon.d.ts

@@ -0,0 +1,15 @@
+import * as React from 'react';
+import { GridSortDirection } from "../../models/gridSortModel.js";
+export interface GridColumnHeaderSortIconProps {
+  field: string;
+  direction: GridSortDirection;
+  index: number | undefined;
+  sortingOrder: readonly GridSortDirection[];
+  disabled?: boolean;
+}
+declare function GridColumnHeaderSortIconRaw(props: GridColumnHeaderSortIconProps): React.JSX.Element | null;
+declare namespace GridColumnHeaderSortIconRaw {
+  var propTypes: any;
+}
+declare const GridColumnHeaderSortIcon: React.MemoExoticComponent<typeof GridColumnHeaderSortIconRaw>;
+export { GridColumnHeaderSortIcon };