[DataGrid] Refactor: create base Input

docs/pages/x/api/data-grid/data-grid-premium.json

@@ -864,6 +864,12 @@
       "default": "IconButton",
       "class": null
     },
+    {
+      "name": "baseInput",
+      "description": "The custom Input component used in the grid.",
+      "default": "Input",
+      "class": null
+    },
     {
       "name": "baseTooltip",
       "description": "The custom Tooltip component used in the grid.",

docs/pages/x/api/data-grid/data-grid-pro.json

@@ -799,6 +799,12 @@
       "default": "IconButton",
       "class": null
     },
+    {
+      "name": "baseInput",
+      "description": "The custom Input component used in the grid.",
+      "default": "Input",
+      "class": null
+    },
     {
       "name": "baseTooltip",
       "description": "The custom Tooltip component used in the grid.",

docs/pages/x/api/data-grid/data-grid.json

@@ -685,6 +685,12 @@
       "default": "IconButton",
       "class": null
     },
+    {
+      "name": "baseInput",
+      "description": "The custom Input component used in the grid.",
+      "default": "Input",
+      "class": null
+    },
     {
       "name": "baseTooltip",
       "description": "The custom Tooltip component used in the grid.",

docs/translations/api-docs/data-grid/data-grid-premium/data-grid-premium.json

@@ -1270,6 +1270,7 @@
     "baseDivider": "The custom Divider component used in the grid.",
     "baseFormControl": "The custom FormControl component used in the grid.",
     "baseIconButton": "The custom IconButton component used in the grid.",
+    "baseInput": "The custom Input component used in the grid.",
     "baseInputAdornment": "The custom InputAdornment component used in the grid.",
     "baseInputLabel": "The custom InputLabel component used in the grid.",
     "baseLinearProgress": "The custom LinearProgress component used in the grid.",

docs/translations/api-docs/data-grid/data-grid-pro/data-grid-pro.json

@@ -1208,6 +1208,7 @@
     "baseDivider": "The custom Divider component used in the grid.",
     "baseFormControl": "The custom FormControl component used in the grid.",
     "baseIconButton": "The custom IconButton component used in the grid.",
+    "baseInput": "The custom Input component used in the grid.",
     "baseInputAdornment": "The custom InputAdornment component used in the grid.",
     "baseInputLabel": "The custom InputLabel component used in the grid.",
     "baseLinearProgress": "The custom LinearProgress component used in the grid.",

docs/translations/api-docs/data-grid/data-grid/data-grid.json

@@ -1082,6 +1082,7 @@
     "baseDivider": "The custom Divider component used in the grid.",
     "baseFormControl": "The custom FormControl component used in the grid.",
     "baseIconButton": "The custom IconButton component used in the grid.",
+    "baseInput": "The custom Input component used in the grid.",
     "baseInputAdornment": "The custom InputAdornment component used in the grid.",
     "baseInputLabel": "The custom InputLabel component used in the grid.",
     "baseLinearProgress": "The custom LinearProgress component used in the grid.",

packages/x-data-grid/src/components/cell/GridEditDateCell.tsx

@@ -4,8 +4,9 @@ import {
   unstable_composeClasses as composeClasses,
   unstable_useEnhancedEffect as useEnhancedEffect,
 } from '@mui/utils';
-import InputBase, { InputBaseProps } from '@mui/material/InputBase';
 import { styled } from '@mui/material/styles';
+import { NotRendered } from '../../utils/assert';
+import { GridSlotProps } from '../../models/gridSlotsComponent';
 import { GridRenderEditCellParams } from '../../models/params/gridCellParams';
 import { getDataGridUtilityClass } from '../../constants/gridClasses';
 import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
@@ -14,7 +15,7 @@ import { useGridApiContext } from '../../hooks/utils/useGridApiContext';
 
 type OwnerState = { classes: DataGridProcessedProps['classes'] };
 
-const StyledInputBase = styled(InputBase)({
+const StyledInputBase = styled(NotRendered<GridSlotProps['baseInput']>)({
   fontSize: 'inherit',
 });
 
@@ -28,9 +29,7 @@ const useUtilityClasses = (ownerState: OwnerState) => {
   return composeClasses(slots, getDataGridUtilityClass, classes);
 };
 
-export interface GridEditDateCellProps
-  extends GridRenderEditCellParams,
-    Omit<InputBaseProps, 'id' | 'value' | 'tabIndex'> {
+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.
@@ -41,6 +40,9 @@ export interface GridEditDateCellProps
     event: React.ChangeEvent<HTMLInputElement>,
     newValue: Date | null,
   ) => Promise<void> | void;
+  slotProps?: {
+    root?: Partial<GridSlotProps['baseInput']>;
+  };
 }
 
 function GridEditDateCell(props: GridEditDateCellProps) {
@@ -61,6 +63,7 @@ function GridEditDateCell(props: GridEditDateCellProps) {
     isValidating,
     isProcessingProps,
     onValueChange,
+    slotProps,
     ...other
   } = props;
 
@@ -152,17 +155,21 @@ function GridEditDateCell(props: GridEditDateCellProps) {
   }, [hasFocus]);
   return (
     <StyledInputBase
+      as={rootProps.slots.baseInput}
       inputRef={inputRef}
       fullWidth
       className={classes.root}
       type={isDateTime ? 'datetime-local' : 'date'}
-      inputProps={{
-        max: isDateTime ? '9999-12-31T23:59' : '9999-12-31',
-        ...inputProps,
-      }}
       value={valueState.formatted}
       onChange={handleChange}
       {...other}
+      {...slotProps?.root}
+      slotProps={{
+        htmlInput: {
+          max: isDateTime ? '9999-12-31T23:59' : '9999-12-31',
+          ...slotProps?.root?.slotProps?.htmlInput,
+        },
+      }}
     />
   );
 }
@@ -222,6 +229,7 @@ GridEditDateCell.propTypes = {
    * The node of the row that the current cell belongs to.
    */
   rowNode: PropTypes.object.isRequired,
+  slotProps: PropTypes.object,
   /**
    * the tabIndex value.
    */

packages/x-data-grid/src/components/cell/GridEditInputCell.tsx

@@ -5,8 +5,9 @@ import {
   unstable_useEnhancedEffect as useEnhancedEffect,
 } from '@mui/utils';
 import { styled } from '@mui/material/styles';
-import InputBase, { InputBaseProps } from '@mui/material/InputBase';
 import { forwardRef } from '@mui/x-internals/forwardRef';
+import { NotRendered } from '../../utils/assert';
+import { GridSlotProps } from '../../models/gridSlotsComponent';
 import { GridRenderEditCellParams } from '../../models/params/gridCellParams';
 import { getDataGridUtilityClass } from '../../constants/gridClasses';
 import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
@@ -25,10 +26,9 @@ const useUtilityClasses = (ownerState: OwnerState) => {
   return composeClasses(slots, getDataGridUtilityClass, classes);
 };
 
-const GridEditInputCellRoot = styled(InputBase, {
+const GridEditInputCellRoot = styled(NotRendered<GridSlotProps['baseInput']>, {
   name: 'MuiDataGrid',
   slot: 'EditInputCell',
-  overridesResolver: (props, styles) => styles.editInputCell,
 })<{ ownerState: OwnerState }>(({ theme }) => ({
   ...theme.typography.body2,
   padding: '1px 0',
@@ -38,9 +38,7 @@ const GridEditInputCellRoot = styled(InputBase, {
   },
 }));
 
-export interface GridEditInputCellProps
-  extends GridRenderEditCellParams,
-    Omit<InputBaseProps, 'id' | 'value' | 'tabIndex' | 'ref'> {
+export interface GridEditInputCellProps extends GridRenderEditCellParams {
   debounceMs?: number;
   /**
    * Callback called when the value is changed by the user.
@@ -52,6 +50,9 @@ export interface GridEditInputCellProps
     event: React.ChangeEvent<HTMLInputElement>,
     newValue: string,
   ) => Promise<void> | void;
+  slotProps?: {
+    root?: Partial<GridSlotProps['baseInput']>;
+  };
 }
 
 const GridEditInputCell = forwardRef<HTMLInputElement, GridEditInputCellProps>((props, ref) => {
@@ -74,6 +75,7 @@ const GridEditInputCell = forwardRef<HTMLInputElement, GridEditInputCellProps>((
     debounceMs = 200,
     isProcessingProps,
     onValueChange,
+    slotProps,
     ...other
   } = props;
 
@@ -122,6 +124,7 @@ const GridEditInputCell = forwardRef<HTMLInputElement, GridEditInputCellProps>((
 
   return (
     <GridEditInputCellRoot
+      as={rootProps.slots.baseInput}
       inputRef={inputRef}
       className={classes.root}
       ownerState={rootProps}
@@ -133,6 +136,7 @@ const GridEditInputCell = forwardRef<HTMLInputElement, GridEditInputCellProps>((
         isProcessingProps ? <rootProps.slots.loadIcon fontSize="small" color="action" /> : undefined
       }
       {...other}
+      {...slotProps?.root}
       ref={ref}
     />
   );
@@ -194,6 +198,7 @@ GridEditInputCell.propTypes = {
    * The node of the row that the current cell belongs to.
    */
   rowNode: PropTypes.object.isRequired,
+  slotProps: PropTypes.object,
   /**
    * the tabIndex value.
    */

packages/x-data-grid/src/material/index.tsx

@@ -4,6 +4,7 @@ import MUICheckbox from '@mui/material/Checkbox';
 import MUIChip from '@mui/material/Chip';
 import MUICircularProgress from '@mui/material/CircularProgress';
 import MUIDivider from '@mui/material/Divider';
+import MUIInputBase from '@mui/material/InputBase';
 import MUILinearProgress from '@mui/material/LinearProgress';
 import MUIListItemIcon from '@mui/material/ListItemIcon';
 import MUIListItemText from '@mui/material/ListItemText';
@@ -96,6 +97,7 @@ const baseSlots: GridBaseSlots = {
   baseCheckbox: MUICheckbox,
   baseCircularProgress: MUICircularProgress,
   baseDivider: MUIDivider,
+  baseInput: BaseInput,
   baseLinearProgress: MUILinearProgress,
   baseMenuList: MUIMenuList,
   baseMenuItem: BaseMenuItem,
@@ -149,3 +151,8 @@ function BaseTextField(props: GridSlotProps['baseTextField']) {
     />
   );
 }
+
+function BaseInput(props: GridSlotProps['baseInput']) {
+  const { slotProps, ...rest } = props;
+  return <MUIInputBase {...rest} inputProps={slotProps?.htmlInput} />;
+}

packages/x-data-grid/src/models/gridBaseSlots.ts

@@ -61,6 +61,22 @@ export type CircularProgressProps = {
 
 export type LinearProgressProps = {};
 
+export type InputProps = {
+  ref?: React.Ref<HTMLInputElement>;
+  inputRef?: React.Ref<HTMLInputElement>;
+  className?: string;
+  fullWidth?: boolean;
+  type?: React.HTMLInputTypeAttribute;
+  value?: string;
+  onChange: React.ChangeEventHandler;
+  disabled?: boolean;
+  endAdornment?: React.ReactNode;
+  startAdornment?: React.ReactNode;
+  slotProps?: {
+    htmlInput?: React.InputHTMLAttributes<HTMLInputElement>;
+  };
+};
+
 export type SkeletonProps = {
   variant?: 'circular' | 'text';
   width?: number | string;

packages/x-data-grid/src/models/gridSlotsComponent.ts

@@ -75,6 +75,11 @@ export interface GridBaseSlots {
    * @default IconButton
    */
   baseIconButton: React.JSXElementConstructor<GridSlotProps['baseIconButton']>;
+  /**
+   * The custom Input component used in the grid.
+   * @default Input
+   */
+  baseInput: React.JSXElementConstructor<GridSlotProps['baseInput']>;
   /**
    * The custom Tooltip component used in the grid.
    * @default Tooltip

packages/x-data-grid/src/models/gridSlotsComponentsProps.ts

@@ -40,6 +40,7 @@ import type {
   CircularProgressProps,
   DividerProps,
   IconButtonProps,
+  InputProps,
   LinearProgressProps,
   MenuItemProps,
   SkeletonProps,
@@ -67,6 +68,7 @@ export interface BaseIconButtonPropsOverrides {}
 export interface BaseInputAdornmentPropsOverrides {}
 export interface BaseTooltipPropsOverrides {}
 export interface BasePopperPropsOverrides {}
+export interface BaseInputPropsOverrides {}
 export interface BaseInputLabelPropsOverrides {}
 export interface BaseSelectOptionPropsOverrides {}
 export interface BaseSkeletonPropsOverrides {}
@@ -108,6 +110,7 @@ interface BaseSlotProps {
   baseIconButton: IconButtonProps & BaseIconButtonPropsOverrides;
   basePopper: PopperProps & BasePopperPropsOverrides;
   baseTooltip: TooltipProps & BaseTooltipPropsOverrides;
+  baseInput: InputProps & BaseInputPropsOverrides;
   baseInputLabel: InputLabelProps & BaseInputLabelPropsOverrides;
   baseInputAdornment: InputAdornmentProps & BaseInputAdornmentPropsOverrides;
   baseSelectOption: {

scripts/x-data-grid-premium.exports.json

@@ -9,6 +9,7 @@
   { "name": "BaseIconButtonPropsOverrides", "kind": "Interface" },
   { "name": "BaseInputAdornmentPropsOverrides", "kind": "Interface" },
   { "name": "BaseInputLabelPropsOverrides", "kind": "Interface" },
+  { "name": "BaseInputPropsOverrides", "kind": "Interface" },
   { "name": "BaseLinearProgressPropsOverrides", "kind": "Interface" },
   { "name": "BaseMenuItemPropsOverrides", "kind": "Interface" },
   { "name": "BaseMenuListPropsOverrides", "kind": "Interface" },

scripts/x-data-grid-pro.exports.json

@@ -9,6 +9,7 @@
   { "name": "BaseIconButtonPropsOverrides", "kind": "Interface" },
   { "name": "BaseInputAdornmentPropsOverrides", "kind": "Interface" },
   { "name": "BaseInputLabelPropsOverrides", "kind": "Interface" },
+  { "name": "BaseInputPropsOverrides", "kind": "Interface" },
   { "name": "BaseLinearProgressPropsOverrides", "kind": "Interface" },
   { "name": "BaseMenuItemPropsOverrides", "kind": "Interface" },
   { "name": "BaseMenuListPropsOverrides", "kind": "Interface" },

scripts/x-data-grid.exports.json

@@ -9,6 +9,7 @@
   { "name": "BaseIconButtonPropsOverrides", "kind": "Interface" },
   { "name": "BaseInputAdornmentPropsOverrides", "kind": "Interface" },
   { "name": "BaseInputLabelPropsOverrides", "kind": "Interface" },
+  { "name": "BaseInputPropsOverrides", "kind": "Interface" },
   { "name": "BaseLinearProgressPropsOverrides", "kind": "Interface" },
   { "name": "BaseMenuItemPropsOverrides", "kind": "Interface" },
   { "name": "BaseMenuListPropsOverrides", "kind": "Interface" },