[DataGrid] Refactor: create base Switch (#16527)

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

@@ -923,6 +923,12 @@
       "default": "Skeleton",
       "class": null
     },
+    {
+      "name": "baseSwitch",
+      "description": "The custom Switch component used in the grid.",
+      "default": "Switch",
+      "class": null
+    },
     {
       "name": "booleanCellTrueIcon",
       "description": "Icon displayed on the boolean cell to represent the true value.",

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

@@ -858,6 +858,12 @@
       "default": "Skeleton",
       "class": null
     },
+    {
+      "name": "baseSwitch",
+      "description": "The custom Switch component used in the grid.",
+      "default": "Switch",
+      "class": null
+    },
     {
       "name": "booleanCellTrueIcon",
       "description": "Icon displayed on the boolean cell to represent the true value.",

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

@@ -741,6 +741,12 @@
       "default": "Skeleton",
       "class": null
     },
+    {
+      "name": "baseSwitch",
+      "description": "The custom Switch component used in the grid.",
+      "default": "Switch",
+      "class": null
+    },
     {
       "name": "booleanCellTrueIcon",
       "description": "Icon displayed on the boolean cell to represent the true value.",

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

@@ -1297,6 +1297,7 @@
     "baseSelect": "The custom Select component used in the grid.",
     "baseSelectOption": "The custom SelectOption component used in the grid.",
     "baseSkeleton": "The custom Skeleton component used in the grid.",
+    "baseSwitch": "The custom Switch component used in the grid.",
     "baseTextField": "The custom TextField component used in the grid.",
     "baseTooltip": "The custom Tooltip component used in the grid.",
     "booleanCellFalseIcon": "Icon displayed on the boolean cell to represent the false value.",

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

@@ -1235,6 +1235,7 @@
     "baseSelect": "The custom Select component used in the grid.",
     "baseSelectOption": "The custom SelectOption component used in the grid.",
     "baseSkeleton": "The custom Skeleton component used in the grid.",
+    "baseSwitch": "The custom Switch component used in the grid.",
     "baseTextField": "The custom TextField component used in the grid.",
     "baseTooltip": "The custom Tooltip component used in the grid.",
     "booleanCellFalseIcon": "Icon displayed on the boolean cell to represent the false value.",

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

@@ -1109,6 +1109,7 @@
     "baseSelect": "The custom Select component used in the grid.",
     "baseSelectOption": "The custom SelectOption component used in the grid.",
     "baseSkeleton": "The custom Skeleton component used in the grid.",
+    "baseSwitch": "The custom Switch component used in the grid.",
     "baseTextField": "The custom TextField component used in the grid.",
     "baseTooltip": "The custom Tooltip component used in the grid.",
     "booleanCellFalseIcon": "Icon displayed on the boolean cell to represent the false value.",

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

@@ -15,6 +15,7 @@ import MUITextField from '@mui/material/TextField';
 import MUIFormControl from '@mui/material/FormControl';
 import MUIFormControlLabel 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';
@@ -180,6 +181,7 @@ const baseSlots: GridBaseSlots = {
   baseSelect: BaseSelect,
   baseSelectOption: BaseSelectOption,
   baseSkeleton: MUISkeleton,
+  baseSwitch: MUISwitch,
   baseChip: MUIChip,
 };
 

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

@@ -178,6 +178,12 @@ export type SkeletonProps = {
   height?: number | string;
 };
 
+export type SwitchProps = {
+  checked?: boolean;
+  onChange?: React.ChangeEventHandler;
+  size?: 'small' | 'medium';
+};
+
 export type TextFieldProps = {
   autoComplete?: string;
   className?: string;

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

@@ -100,6 +100,11 @@ export interface GridBaseSlots {
    * @default Skeleton
    */
   baseSkeleton: React.JSXElementConstructor<GridSlotProps['baseSkeleton']>;
+  /**
+   * The custom Switch component used in the grid.
+   * @default Switch
+   */
+  baseSwitch: React.JSXElementConstructor<GridSlotProps['baseSwitch']>;
 }
 
 /**

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

@@ -5,7 +5,6 @@ import type { CircularProgressProps as MUICircularProgressProps } from '@mui/mat
 import type { LinearProgressProps as MUILinearProgressProps } from '@mui/material/LinearProgress';
 import type { MenuItemProps as MUIMenuItemProps } from '@mui/material/MenuItem';
 import type { FormControlProps } from '@mui/material/FormControl';
-import type { SwitchProps } from '@mui/material/Switch';
 import type { IconButtonProps as MUIIconButtonProps } from '@mui/material/IconButton';
 import type { InputAdornmentProps } from '@mui/material/InputAdornment';
 import type { TooltipProps as MUITooltipProps } from '@mui/material/Tooltip';
@@ -45,6 +44,7 @@ import type {
   SelectProps,
   SelectOptionProps,
   SkeletonProps,
+  SwitchProps,
   TooltipProps,
   TextFieldProps,
 } from './gridBaseSlots';