@redsift/table 12.0.0-muiv7 → 12.1.0-muiv6

package/_internal/StatefulDataGrid2.js

@@ -1,24 +1,30 @@
-import { _ as _objectSpread2, a as _objectWithoutProperties, b as _extends } from './_rollupPluginBabelHelpers.js';
+import { _ as _objectSpread2, a as _objectWithoutProperties, b as _extends$1 } from './_rollupPluginBabelHelpers.js';
 import * as React from 'react';
 import React__default, { useCallback, useEffect, useMemo, forwardRef, useRef, useState } from 'react';
 import classNames from 'classnames';
-import { Icon, useTheme as useTheme$1, RedsiftColorBlueN, RedsiftColorNeutralXDarkGrey, RedsiftColorNeutralWhite, ThemeProvider } from '@redsift/design-system';
+import { Icon, useTheme as useTheme$1, ThemeProvider, RedsiftColorBlueN, RedsiftColorNeutralXDarkGrey, RedsiftColorNeutralWhite } from '@redsift/design-system';
 import { getGridNumericOperators as getGridNumericOperators$1, GridFilterInputValue, GridFilterInputSingleSelect, GridFilterInputMultipleValue, GridFilterInputMultipleSingleSelect, getGridStringOperators as getGridStringOperators$1, getGridBooleanOperators, getGridDateOperators, getGridSingleSelectOperators, GridLogicOperator, useGridApiRef, DataGridPro, gridPaginatedVisibleSortedGridRowEntriesSelector, gridPaginatedVisibleSortedGridRowIdsSelector, gridFilteredSortedRowEntriesSelector, gridFilteredSortedRowIdsSelector } from '@mui/x-data-grid-pro';
 import { L as LicenseInfo, u as useControlledDatagridState, T as ThemeProvider$1, S as StyledDataGrid } from './useControlledDatagridState.js';
 import { mdiSync } from '@redsift/icons';
-import { d as defaultSxConfig, i as isPlainObject, s as styled, a as styleFunctionSx, c as clsx, g as generateUtilityClasses, b as createTheme, T as THEME_ID, C as ClassNameGenerator, P as PropTypes, e as generateUtilityClass, f as styled$1, u as useDefaultProps, h as composeClasses, r as rootShouldForwardProp, j as refType } from './Portal.js';
+import { _ as _objectWithoutPropertiesLoose, a as _extends, d as defaultSxConfig, i as isPlainObject, s as styled, b as styleFunctionSx, u as useTheme, c as clsx, e as createTheme, T as THEME_ID, C as ClassNameGenerator, P as PropTypes, g as generateUtilityClasses, f as generateUtilityClass, h as styled$1, j as useThemeProps, k as capitalize, l as composeClasses, r as rootShouldForwardProp, m as refType } from './Portal.js';
 import { j as jsxRuntimeExports } from './jsx-runtime.js';
-import { u as useTheme, m as memoTheme, c as createSimplePaletteValueFilter, a as useFormControl, f as formControlState, b as capitalize, i as isAdornedStart, d as isFilled, F as FormControlContext, e as useId, g as useSlot, h as Select, I as Input, j as FilledInput, O as OutlinedInput, o as onServerSideSelectionStatusChange, S as ServerSideControlledPagination, C as ControlledPagination } from './ControlledPagination.js';
+import { u as useFormControl, f as formControlState, i as isAdornedStart, a as isFilled, F as FormControlContext, b as useId, c as Select, I as Input, d as FilledInput, O as OutlinedInput, o as onServerSideSelectionStatusChange, S as ServerSideControlledPagination, C as ControlledPagination } from './ControlledPagination.js';
 import { T as Toolbar } from './Toolbar2.js';
 import { B as BaseButton, a as BaseCheckbox, c as BasePopper, b as BaseIcon } from './BasePopper.js';
 import { T as ToolbarWrapper } from './ToolbarWrapper2.js';
 
+function isMuiElement(element, muiNames) {
+  return /*#__PURE__*/React.isValidElement(element) && muiNames.indexOf(element.type.muiName) !== -1;
+}
+
+const _excluded$7 = ["sx"];
 const splitProps = props => {
+  var _props$theme$unstable, _props$theme;
   const result = {
     systemProps: {},
     otherProps: {}
   };
-  const config = props?.theme?.unstable_sxConfig ?? defaultSxConfig;
+  const config = (_props$theme$unstable = props == null ? void 0 : (_props$theme = props.theme) == null ? void 0 : _props$theme.unstable_sxConfig) != null ? _props$theme$unstable : defaultSxConfig;
   Object.keys(props).forEach(prop => {
     if (config[prop]) {
       result.systemProps[prop] = props[prop];
@@ -30,9 +36,9 @@ const splitProps = props => {
 };
 function extendSxProp(props) {
   const {
-    sx: inSx,
-    ...other
-  } = props;
+      sx: inSx
+    } = props,
+    other = _objectWithoutPropertiesLoose(props, _excluded$7);
   const {
     systemProps,
     otherProps
@@ -46,23 +52,17 @@ function extendSxProp(props) {
       if (!isPlainObject(result)) {
         return systemProps;
       }
-      return {
-        ...systemProps,
-        ...result
-      };
+      return _extends({}, systemProps, result);
     };
   } else {
-    finalSx = {
-      ...systemProps,
-      ...inSx
-    };
+    finalSx = _extends({}, systemProps, inSx);
   }
-  return {
-    ...otherProps,
+  return _extends({}, otherProps, {
     sx: finalSx
-  };
+  });
 }
 
+const _excluded$6 = ["className", "component"];
 function createBox(options = {}) {
   const {
     themeId,
@@ -75,45 +75,34 @@ function createBox(options = {}) {
   })(styleFunctionSx);
   const Box = /*#__PURE__*/React.forwardRef(function Box(inProps, ref) {
     const theme = useTheme(defaultTheme);
-    const {
-      className,
-      component = 'div',
-      ...other
-    } = extendSxProp(inProps);
-    return /*#__PURE__*/jsxRuntimeExports.jsx(BoxRoot, {
+    const _extendSxProp = extendSxProp(inProps),
+      {
+        className,
+        component = 'div'
+      } = _extendSxProp,
+      other = _objectWithoutPropertiesLoose(_extendSxProp, _excluded$6);
+    return /*#__PURE__*/jsxRuntimeExports.jsx(BoxRoot, _extends({
       as: component,
       ref: ref,
       className: clsx(className, generateClassName ? generateClassName(defaultClassName) : defaultClassName),
-      theme: themeId ? theme[themeId] || theme : theme,
-      ...other
-    });
+      theme: themeId ? theme[themeId] || theme : theme
+    }, other));
   });
   return Box;
 }
 
-function isMuiElement(element, muiNames) {
-  return /*#__PURE__*/React.isValidElement(element) && muiNames.indexOf(
-  // For server components `muiName` is avaialble in element.type._payload.value.muiName
-  // relevant info - https://github.com/facebook/react/blob/2807d781a08db8e9873687fccc25c0f12b4fb3d4/packages/react/src/ReactLazy.js#L45
-  // eslint-disable-next-line no-underscore-dangle
-  element.type.muiName ?? element.type?._payload?.value?.muiName) !== -1;
-}
-
-const boxClasses = generateUtilityClasses('MuiBox', ['root']);
-var boxClasses$1 = boxClasses;
-
 const defaultTheme = createTheme();
 const Box = createBox({
   themeId: THEME_ID,
   defaultTheme,
-  defaultClassName: boxClasses$1.root,
+  defaultClassName: 'MuiBox-root',
   generateClassName: ClassNameGenerator.generate
 });
 process.env.NODE_ENV !== "production" ? Box.propTypes /* remove-proptypes */ = {
-  // ┌────────────────────────────── Warning ──────────────────────────────┐
-  // │ These PropTypes are generated from the TypeScript type definitions. │
-  // │    To update them, edit the d.ts file and run `pnpm proptypes`.     │
-  // └─────────────────────────────────────────────────────────────────────┘
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // |     To update them edit the d.ts file and run "yarn proptypes"     |
+  // ----------------------------------------------------------------------
   /**
    * @ignore
    */
@@ -136,6 +125,7 @@ function getFormLabelUtilityClasses(slot) {
 const formLabelClasses = generateUtilityClasses('MuiFormLabel', ['root', 'colorSecondary', 'focused', 'disabled', 'error', 'filled', 'required', 'asterisk']);
 var formLabelClasses$1 = formLabelClasses;
 
+const _excluded$5 = ["children", "className", "color", "component", "disabled", "error", "filled", "focused", "required"];
 const useUtilityClasses$4 = ownerState => {
   const {
     classes,
@@ -155,77 +145,59 @@ const useUtilityClasses$4 = ownerState => {
 const FormLabelRoot = styled$1('label', {
   name: 'MuiFormLabel',
   slot: 'Root',
-  overridesResolver: (props, styles) => {
-    const {
-      ownerState
-    } = props;
-    return [styles.root, ownerState.color === 'secondary' && styles.colorSecondary, ownerState.filled && styles.filled];
-  }
-})(memoTheme(({
-  theme
-}) => ({
-  color: (theme.vars || theme).palette.text.secondary,
-  ...theme.typography.body1,
+  overridesResolver: ({
+    ownerState
+  }, styles) => {
+    return _extends({}, styles.root, ownerState.color === 'secondary' && styles.colorSecondary, ownerState.filled && styles.filled);
+  }
+})(({
+  theme,
+  ownerState
+}) => _extends({
+  color: (theme.vars || theme).palette.text.secondary
+}, theme.typography.body1, {
   lineHeight: '1.4375em',
   padding: 0,
   position: 'relative',
-  variants: [...Object.entries(theme.palette).filter(createSimplePaletteValueFilter()).map(([color]) => ({
-    props: {
-      color
-    },
-    style: {
-      [`&.${formLabelClasses$1.focused}`]: {
-        color: (theme.vars || theme).palette[color].main
-      }
-    }
-  })), {
-    props: {},
-    style: {
-      [`&.${formLabelClasses$1.disabled}`]: {
-        color: (theme.vars || theme).palette.text.disabled
-      },
-      [`&.${formLabelClasses$1.error}`]: {
-        color: (theme.vars || theme).palette.error.main
-      }
-    }
-  }]
-})));
+  [`&.${formLabelClasses$1.focused}`]: {
+    color: (theme.vars || theme).palette[ownerState.color].main
+  },
+  [`&.${formLabelClasses$1.disabled}`]: {
+    color: (theme.vars || theme).palette.text.disabled
+  },
+  [`&.${formLabelClasses$1.error}`]: {
+    color: (theme.vars || theme).palette.error.main
+  }
+}));
 const AsteriskComponent = styled$1('span', {
   name: 'MuiFormLabel',
   slot: 'Asterisk',
   overridesResolver: (props, styles) => styles.asterisk
-})(memoTheme(({
+})(({
   theme
 }) => ({
   [`&.${formLabelClasses$1.error}`]: {
     color: (theme.vars || theme).palette.error.main
   }
-})));
+}));
 const FormLabel = /*#__PURE__*/React.forwardRef(function FormLabel(inProps, ref) {
-  const props = useDefaultProps({
+  const props = useThemeProps({
     props: inProps,
     name: 'MuiFormLabel'
   });
   const {
-    children,
-    className,
-    color,
-    component = 'label',
-    disabled,
-    error,
-    filled,
-    focused,
-    required,
-    ...other
-  } = props;
+      children,
+      className,
+      component = 'label'
+    } = props,
+    other = _objectWithoutPropertiesLoose(props, _excluded$5);
   const muiFormControl = useFormControl();
   const fcs = formControlState({
     props,
     muiFormControl,
     states: ['color', 'required', 'focused', 'disabled', 'error', 'filled']
   });
-  const ownerState = {
-    ...props,
+  const ownerState = _extends({}, props, {
     color: fcs.color || 'primary',
     component,
     disabled: fcs.disabled,
@@ -233,27 +205,27 @@ const FormLabel = /*#__PURE__*/React.forwardRef(function FormLabel(inProps, ref)
     filled: fcs.filled,
     focused: fcs.focused,
     required: fcs.required
-  };
+  });
   const classes = useUtilityClasses$4(ownerState);
-  return /*#__PURE__*/jsxRuntimeExports.jsxs(FormLabelRoot, {
+  return /*#__PURE__*/jsxRuntimeExports.jsxs(FormLabelRoot, _extends({
     as: component,
     ownerState: ownerState,
     className: clsx(classes.root, className),
-    ref: ref,
-    ...other,
+    ref: ref
+  }, other, {
     children: [children, fcs.required && /*#__PURE__*/jsxRuntimeExports.jsxs(AsteriskComponent, {
       ownerState: ownerState,
       "aria-hidden": true,
       className: classes.asterisk,
       children: ["\u2009", '*']
     })]
-  });
+  }));
 });
 process.env.NODE_ENV !== "production" ? FormLabel.propTypes /* remove-proptypes */ = {
-  // ┌────────────────────────────── Warning ──────────────────────────────┐
-  // │ These PropTypes are generated from the TypeScript type definitions. │
-  // │    To update them, edit the d.ts file and run `pnpm proptypes`.     │
-  // └─────────────────────────────────────────────────────────────────────┘
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // |     To update them edit the d.ts file and run "yarn proptypes"     |
+  // ----------------------------------------------------------------------
   /**
    * The content of the component.
    */
@@ -269,7 +241,7 @@ process.env.NODE_ENV !== "production" ? FormLabel.propTypes /* remove-proptypes
   /**
    * The color of the component.
    * It supports both default and custom theme colors, which can be added as shown in the
-   * [palette customization guide](https://mui.com/material-ui/customization/palette/#custom-colors).
+   * [palette customization guide](https://mui.com/material-ui/customization/palette/#adding-new-colors).
    */
   color: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.oneOf(['error', 'info', 'primary', 'secondary', 'success', 'warning']), PropTypes.string]),
   /**
@@ -309,6 +281,7 @@ function getInputLabelUtilityClasses(slot) {
 }
 generateUtilityClasses('MuiInputLabel', ['root', 'focused', 'disabled', 'error', 'required', 'asterisk', 'formControl', 'sizeSmall', 'shrink', 'animated', 'standard', 'filled', 'outlined']);
 
+const _excluded$4 = ["disableAnimation", "margin", "shrink", "variant", "className"];
 const useUtilityClasses$3 = ownerState => {
   const {
     classes,
@@ -320,15 +293,11 @@ const useUtilityClasses$3 = ownerState => {
     required
   } = ownerState;
   const slots = {
-    root: ['root', formControl && 'formControl', !disableAnimation && 'animated', shrink && 'shrink', size && size !== 'normal' && `size${capitalize(size)}`, variant],
+    root: ['root', formControl && 'formControl', !disableAnimation && 'animated', shrink && 'shrink', size === 'small' && 'sizeSmall', variant],
     asterisk: [required && 'asterisk']
   };
   const composedClasses = composeClasses(slots, getInputLabelUtilityClasses, classes);
-  return {
-    ...classes,
-    // forward the focused, disabled, etc. classes to the FormLabel
-    ...composedClasses
-  };
+  return _extends({}, classes, composedClasses);
 };
 const InputLabelRoot = styled$1(FormLabel$1, {
   shouldForwardProp: prop => rootShouldForwardProp(prop) || prop === 'classes',
@@ -340,144 +309,81 @@ const InputLabelRoot = styled$1(FormLabel$1, {
     } = props;
     return [{
       [`& .${formLabelClasses$1.asterisk}`]: styles.asterisk
-    }, styles.root, ownerState.formControl && styles.formControl, ownerState.size === 'small' && styles.sizeSmall, ownerState.shrink && styles.shrink, !ownerState.disableAnimation && styles.animated, ownerState.focused && styles.focused, styles[ownerState.variant]];
+    }, styles.root, ownerState.formControl && styles.formControl, ownerState.size === 'small' && styles.sizeSmall, ownerState.shrink && styles.shrink, !ownerState.disableAnimation && styles.animated, styles[ownerState.variant]];
   }
-})(memoTheme(({
-  theme
-}) => ({
+})(({
+  theme,
+  ownerState
+}) => _extends({
   display: 'block',
   transformOrigin: 'top left',
   whiteSpace: 'nowrap',
   overflow: 'hidden',
   textOverflow: 'ellipsis',
-  maxWidth: '100%',
-  variants: [{
-    props: ({
-      ownerState
-    }) => ownerState.formControl,
-    style: {
-      position: 'absolute',
-      left: 0,
-      top: 0,
-      // slight alteration to spec spacing to match visual spec result
-      transform: 'translate(0, 20px) scale(1)'
-    }
-  }, {
-    props: {
-      size: 'small'
-    },
-    style: {
-      // Compensation for the `Input.inputSizeSmall` style.
-      transform: 'translate(0, 17px) scale(1)'
-    }
-  }, {
-    props: ({
-      ownerState
-    }) => ownerState.shrink,
-    style: {
-      transform: 'translate(0, -1.5px) scale(0.75)',
-      transformOrigin: 'top left',
-      maxWidth: '133%'
-    }
-  }, {
-    props: ({
-      ownerState
-    }) => !ownerState.disableAnimation,
-    style: {
-      transition: theme.transitions.create(['color', 'transform', 'max-width'], {
-        duration: theme.transitions.duration.shorter,
-        easing: theme.transitions.easing.easeOut
-      })
-    }
-  }, {
-    props: {
-      variant: 'filled'
-    },
-    style: {
-      // Chrome's autofill feature gives the input field a yellow background.
-      // Since the input field is behind the label in the HTML tree,
-      // the input field is drawn last and hides the label with an opaque background color.
-      // zIndex: 1 will raise the label above opaque background-colors of input.
-      zIndex: 1,
-      pointerEvents: 'none',
-      transform: 'translate(12px, 16px) scale(1)',
-      maxWidth: 'calc(100% - 24px)'
-    }
-  }, {
-    props: {
-      variant: 'filled',
-      size: 'small'
-    },
-    style: {
-      transform: 'translate(12px, 13px) scale(1)'
-    }
-  }, {
-    props: ({
-      variant,
-      ownerState
-    }) => variant === 'filled' && ownerState.shrink,
-    style: {
-      userSelect: 'none',
-      pointerEvents: 'auto',
-      transform: 'translate(12px, 7px) scale(0.75)',
-      maxWidth: 'calc(133% - 24px)'
-    }
-  }, {
-    props: ({
-      variant,
-      ownerState,
-      size
-    }) => variant === 'filled' && ownerState.shrink && size === 'small',
-    style: {
-      transform: 'translate(12px, 4px) scale(0.75)'
-    }
-  }, {
-    props: {
-      variant: 'outlined'
-    },
-    style: {
-      // see comment above on filled.zIndex
-      zIndex: 1,
-      pointerEvents: 'none',
-      transform: 'translate(14px, 16px) scale(1)',
-      maxWidth: 'calc(100% - 24px)'
-    }
-  }, {
-    props: {
-      variant: 'outlined',
-      size: 'small'
-    },
-    style: {
-      transform: 'translate(14px, 9px) scale(1)'
-    }
-  }, {
-    props: ({
-      variant,
-      ownerState
-    }) => variant === 'outlined' && ownerState.shrink,
-    style: {
-      userSelect: 'none',
-      pointerEvents: 'auto',
-      // Theoretically, we should have (8+5)*2/0.75 = 34px
-      // but it feels a better when it bleeds a bit on the left, so 32px.
-      maxWidth: 'calc(133% - 32px)',
-      transform: 'translate(14px, -9px) scale(0.75)'
-    }
-  }]
+  maxWidth: '100%'
+}, ownerState.formControl && {
+  position: 'absolute',
+  left: 0,
+  top: 0,
+  // slight alteration to spec spacing to match visual spec result
+  transform: 'translate(0, 20px) scale(1)'
+}, ownerState.size === 'small' && {
+  // Compensation for the `Input.inputSizeSmall` style.
+  transform: 'translate(0, 17px) scale(1)'
+}, ownerState.shrink && {
+  transform: 'translate(0, -1.5px) scale(0.75)',
+  transformOrigin: 'top left',
+  maxWidth: '133%'
+}, !ownerState.disableAnimation && {
+  transition: theme.transitions.create(['color', 'transform', 'max-width'], {
+    duration: theme.transitions.duration.shorter,
+    easing: theme.transitions.easing.easeOut
+  })
+}, ownerState.variant === 'filled' && _extends({
+  // Chrome's autofill feature gives the input field a yellow background.
+  // Since the input field is behind the label in the HTML tree,
+  // the input field is drawn last and hides the label with an opaque background color.
+  // zIndex: 1 will raise the label above opaque background-colors of input.
+  zIndex: 1,
+  pointerEvents: 'none',
+  transform: 'translate(12px, 16px) scale(1)',
+  maxWidth: 'calc(100% - 24px)'
+}, ownerState.size === 'small' && {
+  transform: 'translate(12px, 13px) scale(1)'
+}, ownerState.shrink && _extends({
+  userSelect: 'none',
+  pointerEvents: 'auto',
+  transform: 'translate(12px, 7px) scale(0.75)',
+  maxWidth: 'calc(133% - 24px)'
+}, ownerState.size === 'small' && {
+  transform: 'translate(12px, 4px) scale(0.75)'
+})), ownerState.variant === 'outlined' && _extends({
+  // see comment above on filled.zIndex
+  zIndex: 1,
+  pointerEvents: 'none',
+  transform: 'translate(14px, 16px) scale(1)',
+  maxWidth: 'calc(100% - 24px)'
+}, ownerState.size === 'small' && {
+  transform: 'translate(14px, 9px) scale(1)'
+}, ownerState.shrink && {
+  userSelect: 'none',
+  pointerEvents: 'auto',
+  // Theoretically, we should have (8+5)*2/0.75 = 34px
+  // but it feels a better when it bleeds a bit on the left, so 32px.
+  maxWidth: 'calc(133% - 32px)',
+  transform: 'translate(14px, -9px) scale(0.75)'
 })));
 const InputLabel = /*#__PURE__*/React.forwardRef(function InputLabel(inProps, ref) {
-  const props = useDefaultProps({
+  const props = useThemeProps({
     name: 'MuiInputLabel',
     props: inProps
   });
   const {
-    disableAnimation = false,
-    margin,
-    shrink: shrinkProp,
-    variant,
-    className,
-    ...other
-  } = props;
+      disableAnimation = false,
+      shrink: shrinkProp,
+      className
+    } = props,
+    other = _objectWithoutPropertiesLoose(props, _excluded$4);
   const muiFormControl = useFormControl();
   let shrink = shrinkProp;
   if (typeof shrink === 'undefined' && muiFormControl) {
@@ -486,33 +392,31 @@ const InputLabel = /*#__PURE__*/React.forwardRef(function InputLabel(inProps, re
   const fcs = formControlState({
     props,
     muiFormControl,
-    states: ['size', 'variant', 'required', 'focused']
+    states: ['size', 'variant', 'required']
   });
-  const ownerState = {
-    ...props,
+  const ownerState = _extends({}, props, {
     disableAnimation,
     formControl: muiFormControl,
     shrink,
     size: fcs.size,
     variant: fcs.variant,
-    required: fcs.required,
-    focused: fcs.focused
-  };
+    required: fcs.required
+  });
   const classes = useUtilityClasses$3(ownerState);
-  return /*#__PURE__*/jsxRuntimeExports.jsx(InputLabelRoot, {
+  return /*#__PURE__*/jsxRuntimeExports.jsx(InputLabelRoot, _extends({
     "data-shrink": shrink,
-    ref: ref,
-    className: clsx(classes.root, className),
-    ...other,
     ownerState: ownerState,
+    ref: ref,
+    className: clsx(classes.root, className)
+  }, other, {
     classes: classes
-  });
+  }));
 });
 process.env.NODE_ENV !== "production" ? InputLabel.propTypes /* remove-proptypes */ = {
-  // ┌────────────────────────────── Warning ──────────────────────────────┐
-  // │ These PropTypes are generated from the TypeScript type definitions. │
-  // │    To update them, edit the d.ts file and run `pnpm proptypes`.     │
-  // └─────────────────────────────────────────────────────────────────────┘
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // |     To update them edit the d.ts file and run "yarn proptypes"     |
+  // ----------------------------------------------------------------------
   /**
    * The content of the component.
    */
@@ -528,7 +432,7 @@ process.env.NODE_ENV !== "production" ? InputLabel.propTypes /* remove-proptypes
   /**
    * The color of the component.
    * It supports both default and custom theme colors, which can be added as shown in the
-   * [palette customization guide](https://mui.com/material-ui/customization/palette/#custom-colors).
+   * [palette customization guide](https://mui.com/material-ui/customization/palette/#adding-new-colors).
    */
   color: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.oneOf(['error', 'info', 'primary', 'secondary', 'success', 'warning']), PropTypes.string]),
   /**
@@ -582,6 +486,7 @@ function getFormControlUtilityClasses(slot) {
 }
 generateUtilityClasses('MuiFormControl', ['root', 'marginNone', 'marginNormal', 'marginDense', 'fullWidth', 'disabled']);
 
+const _excluded$3 = ["children", "className", "color", "component", "disabled", "error", "focused", "fullWidth", "hiddenLabel", "margin", "required", "size", "variant"];
 const useUtilityClasses$2 = ownerState => {
   const {
     classes,
@@ -596,13 +501,14 @@ const useUtilityClasses$2 = ownerState => {
 const FormControlRoot = styled$1('div', {
   name: 'MuiFormControl',
   slot: 'Root',
-  overridesResolver: (props, styles) => {
-    const {
-      ownerState
-    } = props;
-    return [styles.root, styles[`margin${capitalize(ownerState.margin)}`], ownerState.fullWidth && styles.fullWidth];
+  overridesResolver: ({
+    ownerState
+  }, styles) => {
+    return _extends({}, styles.root, styles[`margin${capitalize(ownerState.margin)}`], ownerState.fullWidth && styles.fullWidth);
   }
-})({
+})(({
+  ownerState
+}) => _extends({
   display: 'inline-flex',
   flexDirection: 'column',
   position: 'relative',
@@ -611,33 +517,16 @@ const FormControlRoot = styled$1('div', {
   padding: 0,
   margin: 0,
   border: 0,
-  verticalAlign: 'top',
-  // Fix alignment issue on Safari.
-  variants: [{
-    props: {
-      margin: 'normal'
-    },
-    style: {
-      marginTop: 16,
-      marginBottom: 8
-    }
-  }, {
-    props: {
-      margin: 'dense'
-    },
-    style: {
-      marginTop: 8,
-      marginBottom: 4
-    }
-  }, {
-    props: {
-      fullWidth: true
-    },
-    style: {
-      width: '100%'
-    }
-  }]
-});
+  verticalAlign: 'top'
+}, ownerState.margin === 'normal' && {
+  marginTop: 16,
+  marginBottom: 8
+}, ownerState.margin === 'dense' && {
+  marginTop: 8,
+  marginBottom: 4
+}, ownerState.fullWidth && {
+  width: '100%'
+}));
 
 /**
  * Provides context such as filled/focused/error/required for form inputs.
@@ -664,28 +553,27 @@ const FormControlRoot = styled$1('div', {
  * For instance, only one input can be focused at the same time, the state shouldn't be shared.
  */
 const FormControl = /*#__PURE__*/React.forwardRef(function FormControl(inProps, ref) {
-  const props = useDefaultProps({
+  const props = useThemeProps({
     props: inProps,
     name: 'MuiFormControl'
   });
   const {
-    children,
-    className,
-    color = 'primary',
-    component = 'div',
-    disabled = false,
-    error = false,
-    focused: visuallyFocused,
-    fullWidth = false,
-    hiddenLabel = false,
-    margin = 'none',
-    required = false,
-    size = 'medium',
-    variant = 'outlined',
-    ...other
-  } = props;
-  const ownerState = {
-    ...props,
+      children,
+      className,
+      color = 'primary',
+      component = 'div',
+      disabled = false,
+      error = false,
+      focused: visuallyFocused,
+      fullWidth = false,
+      hiddenLabel = false,
+      margin = 'none',
+      required = false,
+      size = 'medium',
+      variant = 'outlined'
+    } = props,
+    other = _objectWithoutPropertiesLoose(props, _excluded$3);
+  const ownerState = _extends({}, props, {
     color,
     component,
     disabled,
@@ -696,7 +584,7 @@ const FormControl = /*#__PURE__*/React.forwardRef(function FormControl(inProps,
     required,
     size,
     variant
-  };
+  });
   const classes = useUtilityClasses$2(ownerState);
   const [adornedStart, setAdornedStart] = React.useState(() => {
     // We need to iterate through the children and find the Input in order
@@ -737,8 +625,9 @@ const FormControl = /*#__PURE__*/React.forwardRef(function FormControl(inProps,
   }
   const focused = visuallyFocused !== undefined && !disabled ? visuallyFocused : focusedState;
   let registerEffect;
-  const registeredInput = React.useRef(false);
   if (process.env.NODE_ENV !== 'production') {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const registeredInput = React.useRef(false);
     registerEffect = () => {
       if (registeredInput.current) {
         console.error(['MUI: There are multiple `InputBase` components inside a FormControl.', 'This creates visual inconsistencies, only use one `InputBase`.'].join('\n'));
@@ -749,12 +638,6 @@ const FormControl = /*#__PURE__*/React.forwardRef(function FormControl(inProps,
       };
     };
   }
-  const onFilled = React.useCallback(() => {
-    setFilled(true);
-  }, []);
-  const onEmpty = React.useCallback(() => {
-    setFilled(false);
-  }, []);
   const childContext = React.useMemo(() => {
     return {
       adornedStart,
@@ -770,33 +653,37 @@ const FormControl = /*#__PURE__*/React.forwardRef(function FormControl(inProps,
       onBlur: () => {
         setFocused(false);
       },
+      onEmpty: () => {
+        setFilled(false);
+      },
+      onFilled: () => {
+        setFilled(true);
+      },
       onFocus: () => {
         setFocused(true);
       },
-      onEmpty,
-      onFilled,
       registerEffect,
       required,
       variant
     };
-  }, [adornedStart, color, disabled, error, filled, focused, fullWidth, hiddenLabel, registerEffect, onEmpty, onFilled, required, size, variant]);
+  }, [adornedStart, color, disabled, error, filled, focused, fullWidth, hiddenLabel, registerEffect, required, size, variant]);
   return /*#__PURE__*/jsxRuntimeExports.jsx(FormControlContext.Provider, {
     value: childContext,
-    children: /*#__PURE__*/jsxRuntimeExports.jsx(FormControlRoot, {
+    children: /*#__PURE__*/jsxRuntimeExports.jsx(FormControlRoot, _extends({
       as: component,
       ownerState: ownerState,
       className: clsx(classes.root, className),
-      ref: ref,
-      ...other,
+      ref: ref
+    }, other, {
       children: children
-    })
+    }))
   });
 });
 process.env.NODE_ENV !== "production" ? FormControl.propTypes /* remove-proptypes */ = {
-  // ┌────────────────────────────── Warning ──────────────────────────────┐
-  // │ These PropTypes are generated from the TypeScript type definitions. │
-  // │    To update them, edit the d.ts file and run `pnpm proptypes`.     │
-  // └─────────────────────────────────────────────────────────────────────┘
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // |     To update them edit the d.ts file and run "yarn proptypes"     |
+  // ----------------------------------------------------------------------
   /**
    * The content of the component.
    */
@@ -812,7 +699,7 @@ process.env.NODE_ENV !== "production" ? FormControl.propTypes /* remove-proptype
   /**
    * The color of the component.
    * It supports both default and custom theme colors, which can be added as shown in the
-   * [palette customization guide](https://mui.com/material-ui/customization/palette/#custom-colors).
+   * [palette customization guide](https://mui.com/material-ui/customization/palette/#adding-new-colors).
    * @default 'primary'
    */
   color: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.oneOf(['primary', 'secondary', 'error', 'info', 'success', 'warning']), PropTypes.string]),
@@ -881,6 +768,7 @@ const formHelperTextClasses = generateUtilityClasses('MuiFormHelperText', ['root
 var formHelperTextClasses$1 = formHelperTextClasses;
 
 var _span;
+const _excluded$2 = ["children", "className", "component", "disabled", "error", "filled", "focused", "margin", "required", "variant"];
 const useUtilityClasses$1 = ownerState => {
   const {
     classes,
@@ -906,11 +794,12 @@ const FormHelperTextRoot = styled$1('p', {
     } = props;
     return [styles.root, ownerState.size && styles[`size${capitalize(ownerState.size)}`], ownerState.contained && styles.contained, ownerState.filled && styles.filled];
   }
-})(memoTheme(({
-  theme
-}) => ({
-  color: (theme.vars || theme).palette.text.secondary,
-  ...theme.typography.caption,
+})(({
+  theme,
+  ownerState
+}) => _extends({
+  color: (theme.vars || theme).palette.text.secondary
+}, theme.typography.caption, {
   textAlign: 'left',
   marginTop: 3,
   marginRight: 0,
@@ -921,50 +810,31 @@ const FormHelperTextRoot = styled$1('p', {
   },
   [`&.${formHelperTextClasses$1.error}`]: {
     color: (theme.vars || theme).palette.error.main
-  },
-  variants: [{
-    props: {
-      size: 'small'
-    },
-    style: {
-      marginTop: 4
-    }
-  }, {
-    props: ({
-      ownerState
-    }) => ownerState.contained,
-    style: {
-      marginLeft: 14,
-      marginRight: 14
-    }
-  }]
-})));
+  }
+}, ownerState.size === 'small' && {
+  marginTop: 4
+}, ownerState.contained && {
+  marginLeft: 14,
+  marginRight: 14
+}));
 const FormHelperText = /*#__PURE__*/React.forwardRef(function FormHelperText(inProps, ref) {
-  const props = useDefaultProps({
+  const props = useThemeProps({
     props: inProps,
     name: 'MuiFormHelperText'
   });
   const {
-    children,
-    className,
-    component = 'p',
-    disabled,
-    error,
-    filled,
-    focused,
-    margin,
-    required,
-    variant,
-    ...other
-  } = props;
+      children,
+      className,
+      component = 'p'
+    } = props,
+    other = _objectWithoutPropertiesLoose(props, _excluded$2);
   const muiFormControl = useFormControl();
   const fcs = formControlState({
     props,
     muiFormControl,
     states: ['variant', 'size', 'disabled', 'error', 'filled', 'focused', 'required']
   });
-  const ownerState = {
-    ...props,
+  const ownerState = _extends({}, props, {
     component,
     contained: fcs.variant === 'filled' || fcs.variant === 'outlined',
     variant: fcs.variant,
@@ -974,30 +844,26 @@ const FormHelperText = /*#__PURE__*/React.forwardRef(function FormHelperText(inP
     filled: fcs.filled,
     focused: fcs.focused,
     required: fcs.required
-  };
-
-  // This issue explains why this is required: https://github.com/mui/material-ui/issues/42184
-  delete ownerState.ownerState;
+  });
   const classes = useUtilityClasses$1(ownerState);
-  return /*#__PURE__*/jsxRuntimeExports.jsx(FormHelperTextRoot, {
+  return /*#__PURE__*/jsxRuntimeExports.jsx(FormHelperTextRoot, _extends({
     as: component,
-    className: clsx(classes.root, className),
-    ref: ref,
-    ...other,
     ownerState: ownerState,
+    className: clsx(classes.root, className),
+    ref: ref
+  }, other, {
     children: children === ' ' ? // notranslate needed while Google Translate will not fix zero-width space issue
     _span || (_span = /*#__PURE__*/jsxRuntimeExports.jsx("span", {
       className: "notranslate",
-      "aria-hidden": true,
       children: "\u200B"
     })) : children
-  });
+  }));
 });
 process.env.NODE_ENV !== "production" ? FormHelperText.propTypes /* remove-proptypes */ = {
-  // ┌────────────────────────────── Warning ──────────────────────────────┐
-  // │ These PropTypes are generated from the TypeScript type definitions. │
-  // │    To update them, edit the d.ts file and run `pnpm proptypes`.     │
-  // └─────────────────────────────────────────────────────────────────────┘
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // |     To update them edit the d.ts file and run "yarn proptypes"     |
+  // ----------------------------------------------------------------------
   /**
    * The content of the component.
    *
@@ -1058,6 +924,7 @@ function getTextFieldUtilityClass(slot) {
 }
 generateUtilityClasses('MuiTextField', ['root']);
 
+const _excluded$1 = ["autoComplete", "autoFocus", "children", "className", "color", "defaultValue", "disabled", "error", "FormHelperTextProps", "fullWidth", "helperText", "id", "InputLabelProps", "inputProps", "InputProps", "inputRef", "label", "maxRows", "minRows", "multiline", "name", "onBlur", "onChange", "onClick", "onFocus", "placeholder", "required", "rows", "select", "SelectProps", "type", "value", "variant"];
 const variantComponent = {
   standard: Input,
   filled: FilledInput,
@@ -1111,49 +978,47 @@ const TextFieldRoot = styled$1(FormControl$1, {
  * - using the underlying components directly as shown in the demos
  */
 const TextField = /*#__PURE__*/React.forwardRef(function TextField(inProps, ref) {
-  const props = useDefaultProps({
+  const props = useThemeProps({
     props: inProps,
     name: 'MuiTextField'
   });
   const {
-    autoComplete,
-    autoFocus = false,
-    children,
-    className,
-    color = 'primary',
-    defaultValue,
-    disabled = false,
-    error = false,
-    FormHelperTextProps: FormHelperTextPropsProp,
-    fullWidth = false,
-    helperText,
-    id: idOverride,
-    InputLabelProps: InputLabelPropsProp,
-    inputProps: inputPropsProp,
-    InputProps: InputPropsProp,
-    inputRef,
-    label,
-    maxRows,
-    minRows,
-    multiline = false,
-    name,
-    onBlur,
-    onChange,
-    onFocus,
-    placeholder,
-    required = false,
-    rows,
-    select = false,
-    SelectProps: SelectPropsProp,
-    slots = {},
-    slotProps = {},
-    type,
-    value,
-    variant = 'outlined',
-    ...other
-  } = props;
-  const ownerState = {
-    ...props,
+      autoComplete,
+      autoFocus = false,
+      children,
+      className,
+      color = 'primary',
+      defaultValue,
+      disabled = false,
+      error = false,
+      FormHelperTextProps,
+      fullWidth = false,
+      helperText,
+      id: idOverride,
+      InputLabelProps,
+      inputProps,
+      InputProps,
+      inputRef,
+      label,
+      maxRows,
+      minRows,
+      multiline = false,
+      name,
+      onBlur,
+      onChange,
+      onClick,
+      onFocus,
+      placeholder,
+      required = false,
+      rows,
+      select = false,
+      SelectProps,
+      type,
+      value,
+      variant = 'outlined'
+    } = props,
+    other = _objectWithoutPropertiesLoose(props, _excluded$1);
+  const ownerState = _extends({}, props, {
     autoFocus,
     color,
     disabled,
@@ -1163,89 +1028,32 @@ const TextField = /*#__PURE__*/React.forwardRef(function TextField(inProps, ref)
     required,
     select,
     variant
-  };
+  });
   const classes = useUtilityClasses(ownerState);
   if (process.env.NODE_ENV !== 'production') {
     if (select && !children) {
       console.error('MUI: `children` must be passed when using the `TextField` component with `select`.');
     }
   }
-  const id = useId(idOverride);
-  const helperTextId = helperText && id ? `${id}-helper-text` : undefined;
-  const inputLabelId = label && id ? `${id}-label` : undefined;
-  const InputComponent = variantComponent[variant];
-  const externalForwardedProps = {
-    slots,
-    slotProps: {
-      input: InputPropsProp,
-      inputLabel: InputLabelPropsProp,
-      htmlInput: inputPropsProp,
-      formHelperText: FormHelperTextPropsProp,
-      select: SelectPropsProp,
-      ...slotProps
-    }
-  };
-  const inputAdditionalProps = {};
-  const inputLabelSlotProps = externalForwardedProps.slotProps.inputLabel;
+  const InputMore = {};
   if (variant === 'outlined') {
-    if (inputLabelSlotProps && typeof inputLabelSlotProps.shrink !== 'undefined') {
-      inputAdditionalProps.notched = inputLabelSlotProps.shrink;
+    if (InputLabelProps && typeof InputLabelProps.shrink !== 'undefined') {
+      InputMore.notched = InputLabelProps.shrink;
     }
-    inputAdditionalProps.label = label;
+    InputMore.label = label;
   }
   if (select) {
     // unset defaults from textbox inputs
-    if (!SelectPropsProp || !SelectPropsProp.native) {
-      inputAdditionalProps.id = undefined;
-    }
-    inputAdditionalProps['aria-describedby'] = undefined;
-  }
-  const [RootSlot, rootProps] = useSlot('root', {
-    elementType: TextFieldRoot,
-    shouldForwardComponentProp: true,
-    externalForwardedProps: {
-      ...externalForwardedProps,
-      ...other
-    },
-    ownerState,
-    className: clsx(classes.root, className),
-    ref,
-    additionalProps: {
-      disabled,
-      error,
-      fullWidth,
-      required,
-      color,
-      variant
+    if (!SelectProps || !SelectProps.native) {
+      InputMore.id = undefined;
     }
-  });
-  const [InputSlot, inputProps] = useSlot('input', {
-    elementType: InputComponent,
-    externalForwardedProps,
-    additionalProps: inputAdditionalProps,
-    ownerState
-  });
-  const [InputLabelSlot, inputLabelProps] = useSlot('inputLabel', {
-    elementType: InputLabel$1,
-    externalForwardedProps,
-    ownerState
-  });
-  const [HtmlInputSlot, htmlInputProps] = useSlot('htmlInput', {
-    elementType: 'input',
-    externalForwardedProps,
-    ownerState
-  });
-  const [FormHelperTextSlot, formHelperTextProps] = useSlot('formHelperText', {
-    elementType: FormHelperText$1,
-    externalForwardedProps,
-    ownerState
-  });
-  const [SelectSlot, selectProps] = useSlot('select', {
-    elementType: Select,
-    externalForwardedProps,
-    ownerState
-  });
-  const InputElement = /*#__PURE__*/jsxRuntimeExports.jsx(InputSlot, {
+    InputMore['aria-describedby'] = undefined;
+  }
+  const id = useId(idOverride);
+  const helperTextId = helperText && id ? `${id}-helper-text` : undefined;
+  const inputLabelId = label && id ? `${id}-label` : undefined;
+  const InputComponent = variantComponent[variant];
+  const InputElement = /*#__PURE__*/jsxRuntimeExports.jsx(InputComponent, _extends({
     "aria-describedby": helperTextId,
     autoComplete: autoComplete,
     autoFocus: autoFocus,
@@ -1263,40 +1071,46 @@ const TextField = /*#__PURE__*/React.forwardRef(function TextField(inProps, ref)
     onBlur: onBlur,
     onChange: onChange,
     onFocus: onFocus,
+    onClick: onClick,
     placeholder: placeholder,
-    inputProps: htmlInputProps,
-    slots: {
-      input: slots.htmlInput ? HtmlInputSlot : undefined
-    },
-    ...inputProps
-  });
-  return /*#__PURE__*/jsxRuntimeExports.jsxs(RootSlot, {
-    ...rootProps,
-    children: [label != null && label !== '' && /*#__PURE__*/jsxRuntimeExports.jsx(InputLabelSlot, {
+    inputProps: inputProps
+  }, InputMore, InputProps));
+  return /*#__PURE__*/jsxRuntimeExports.jsxs(TextFieldRoot, _extends({
+    className: clsx(classes.root, className),
+    disabled: disabled,
+    error: error,
+    fullWidth: fullWidth,
+    ref: ref,
+    required: required,
+    color: color,
+    variant: variant,
+    ownerState: ownerState
+  }, other, {
+    children: [label != null && label !== '' && /*#__PURE__*/jsxRuntimeExports.jsx(InputLabel$1, _extends({
       htmlFor: id,
-      id: inputLabelId,
-      ...inputLabelProps,
+      id: inputLabelId
+    }, InputLabelProps, {
       children: label
-    }), select ? /*#__PURE__*/jsxRuntimeExports.jsx(SelectSlot, {
+    })), select ? /*#__PURE__*/jsxRuntimeExports.jsx(Select, _extends({
       "aria-describedby": helperTextId,
       id: id,
       labelId: inputLabelId,
       value: value,
-      input: InputElement,
-      ...selectProps,
+      input: InputElement
+    }, SelectProps, {
       children: children
-    }) : InputElement, helperText && /*#__PURE__*/jsxRuntimeExports.jsx(FormHelperTextSlot, {
-      id: helperTextId,
-      ...formHelperTextProps,
+    })) : InputElement, helperText && /*#__PURE__*/jsxRuntimeExports.jsx(FormHelperText$1, _extends({
+      id: helperTextId
+    }, FormHelperTextProps, {
       children: helperText
-    })]
-  });
+    }))]
+  }));
 });
 process.env.NODE_ENV !== "production" ? TextField.propTypes /* remove-proptypes */ = {
-  // ┌────────────────────────────── Warning ──────────────────────────────┐
-  // │ These PropTypes are generated from the TypeScript type definitions. │
-  // │    To update them, edit the d.ts file and run `pnpm proptypes`.     │
-  // └─────────────────────────────────────────────────────────────────────┘
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // |     To update them edit the d.ts file and run "yarn proptypes"     |
+  // ----------------------------------------------------------------------
   /**
    * This prop helps users to fill forms faster, especially on mobile devices.
    * The name can be confusing, as it's more like an autofill.
@@ -1323,7 +1137,7 @@ process.env.NODE_ENV !== "production" ? TextField.propTypes /* remove-proptypes
   /**
    * The color of the component.
    * It supports both default and custom theme colors, which can be added as shown in the
-   * [palette customization guide](https://mui.com/material-ui/customization/palette/#custom-colors).
+   * [palette customization guide](https://mui.com/material-ui/customization/palette/#adding-new-colors).
    * @default 'primary'
    */
   color: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.oneOf(['primary', 'secondary', 'error', 'info', 'success', 'warning']), PropTypes.string]),
@@ -1342,8 +1156,7 @@ process.env.NODE_ENV !== "production" ? TextField.propTypes /* remove-proptypes
    */
   error: PropTypes.bool,
   /**
-   * Props applied to the [`FormHelperText`](https://mui.com/material-ui/api/form-helper-text/) element.
-   * @deprecated Use `slotProps.formHelperText` instead. This prop will be removed in v7. See [Migrating from deprecated APIs](https://mui.com/material-ui/migration/migrating-from-deprecated-apis/) for more details.
+   * Props applied to the [`FormHelperText`](/material-ui/api/form-helper-text/) element.
    */
   FormHelperTextProps: PropTypes.object,
   /**
@@ -1361,22 +1174,19 @@ process.env.NODE_ENV !== "production" ? TextField.propTypes /* remove-proptypes
    */
   id: PropTypes.string,
   /**
-   * Props applied to the [`InputLabel`](https://mui.com/material-ui/api/input-label/) element.
+   * Props applied to the [`InputLabel`](/material-ui/api/input-label/) element.
    * Pointer events like `onClick` are enabled if and only if `shrink` is `true`.
-   * @deprecated Use `slotProps.inputLabel` instead. This prop will be removed in v7. See [Migrating from deprecated APIs](https://mui.com/material-ui/migration/migrating-from-deprecated-apis/) for more details.
    */
   InputLabelProps: PropTypes.object,
   /**
    * [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Attributes) applied to the `input` element.
-   * @deprecated Use `slotProps.htmlInput` instead. This prop will be removed in v7. See [Migrating from deprecated APIs](https://mui.com/material-ui/migration/migrating-from-deprecated-apis/) for more details.
    */
   inputProps: PropTypes.object,
   /**
    * Props applied to the Input element.
-   * It will be a [`FilledInput`](https://mui.com/material-ui/api/filled-input/),
-   * [`OutlinedInput`](https://mui.com/material-ui/api/outlined-input/) or [`Input`](https://mui.com/material-ui/api/input/)
+   * It will be a [`FilledInput`](/material-ui/api/filled-input/),
+   * [`OutlinedInput`](/material-ui/api/outlined-input/) or [`Input`](/material-ui/api/input/)
    * component depending on the `variant` prop value.
-   * @deprecated Use `slotProps.input` instead. This prop will be removed in v7. See [Migrating from deprecated APIs](https://mui.com/material-ui/migration/migrating-from-deprecated-apis/) for more details.
    */
   InputProps: PropTypes.object,
   /**
@@ -1420,6 +1230,10 @@ process.env.NODE_ENV !== "production" ? TextField.propTypes /* remove-proptypes
    * You can pull out the new value by accessing `event.target.value` (string).
    */
   onChange: PropTypes.func,
+  /**
+   * @ignore
+   */
+  onClick: PropTypes.func,
   /**
    * @ignore
    */
@@ -1438,44 +1252,19 @@ process.env.NODE_ENV !== "production" ? TextField.propTypes /* remove-proptypes
    */
   rows: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
   /**
-   * Render a [`Select`](https://mui.com/material-ui/api/select/) element while passing the Input element to `Select` as `input` parameter.
+   * Render a [`Select`](/material-ui/api/select/) element while passing the Input element to `Select` as `input` parameter.
    * If this option is set you must pass the options of the select as children.
    * @default false
    */
   select: PropTypes.bool,
   /**
-   * Props applied to the [`Select`](https://mui.com/material-ui/api/select/) element.
-   * @deprecated Use `slotProps.select` instead. This prop will be removed in v7. See [Migrating from deprecated APIs](https://mui.com/material-ui/migration/migrating-from-deprecated-apis/) for more details.
+   * Props applied to the [`Select`](/material-ui/api/select/) element.
    */
   SelectProps: PropTypes.object,
   /**
    * The size of the component.
-   * @default 'medium'
    */
   size: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.oneOf(['medium', 'small']), PropTypes.string]),
-  /**
-   * The props used for each slot inside.
-   * @default {}
-   */
-  slotProps: PropTypes /* @typescript-to-proptypes-ignore */.shape({
-    formHelperText: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
-    htmlInput: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
-    input: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
-    inputLabel: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
-    select: PropTypes.oneOfType([PropTypes.func, PropTypes.object])
-  }),
-  /**
-   * The components used for each slot inside.
-   * @default {}
-   */
-  slots: PropTypes.shape({
-    formHelperText: PropTypes.elementType,
-    htmlInput: PropTypes.elementType,
-    input: PropTypes.elementType,
-    inputLabel: PropTypes.elementType,
-    root: PropTypes.elementType,
-    select: PropTypes.elementType
-  }),
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
@@ -1588,8 +1377,8 @@ const isBetweenOperator = {
     if (typeof filterItem.value[0] !== 'number' || typeof filterItem.value[1] !== 'number') {
       return null;
     }
-    return value => {
-      return value !== null && value !== undefined && filterItem.value[0] <= value && value <= filterItem.value[1];
+    return params => {
+      return params.value !== null && params.value !== undefined && filterItem.value[0] <= params.value && params.value <= filterItem.value[1];
     };
   },
   InputComponent: InputNumberInterval
@@ -1605,11 +1394,11 @@ const doesNotContain = {
     if (!filterItem.field || !filterItem.value || !filterItem.operator) {
       return null;
     }
-    return value => {
+    return params => {
       if (filterItem.value.length === 0) {
         return true;
       }
-      if (String(value).indexOf(filterItem.value) !== -1) {
+      if (String(params.value).indexOf(filterItem.value) !== -1) {
         return false;
       }
       return true;
@@ -1626,11 +1415,11 @@ const doesNotEqual = {
     if (!filterItem.field || !filterItem.value || !filterItem.value) {
       return null;
     }
-    return value => {
+    return params => {
       if (filterItem.value.length === 0) {
         return true;
       }
-      if (String(value) === filterItem.value) {
+      if (String(params.value) === filterItem.value) {
         return false;
       }
       return true;
@@ -1647,9 +1436,9 @@ const doesNotHaveOperator = {
     if (!filterItem.field || !filterItem.value || !filterItem.operator) {
       return null;
     }
-    return value => {
-      const cellValues = Array.isArray(value) ? value : [value];
-      return !cellValues.map(val => String(val)).includes(filterItem.value);
+    return params => {
+      const cellValues = Array.isArray(params.value) ? params.value : [params.value];
+      return !cellValues.map(value => String(value)).includes(filterItem.value);
     };
   },
   InputComponent: GridFilterInputValue
@@ -1666,9 +1455,9 @@ const hasOperator = {
     if (!filterItem.field || !filterItem.value || !filterItem.operator) {
       return null;
     }
-    return value => {
-      const cellValues = Array.isArray(value) ? value : [value];
-      return cellValues.map(val => String(val)).includes(filterItem.value);
+    return params => {
+      const cellValues = Array.isArray(params.value) ? params.value : [params.value];
+      return cellValues.map(value => String(value)).includes(filterItem.value);
     };
   },
   InputComponent: GridFilterInputValue
@@ -1685,8 +1474,8 @@ const hasOnlyOperator = {
     if (!filterItem.field || !filterItem.value || !filterItem.operator) {
       return null;
     }
-    return value => {
-      const cellValues = Array.isArray(value) ? value : [value];
+    return params => {
+      const cellValues = Array.isArray(params.value) ? params.value : [params.value];
       return cellValues.length === 1 && String(cellValues[0]) === filterItem.value;
     };
   },
@@ -1704,11 +1493,11 @@ const isOperator = {
     if (!filterItem.field || !filterItem.value || !filterItem.operator) {
       return null;
     }
-    return value => {
-      if (Array.isArray(value)) {
+    return params => {
+      if (Array.isArray(params.value)) {
         return false;
       }
-      return String(value) === filterItem.value;
+      return String(params.value) === filterItem.value;
     };
   },
   InputComponent: GridFilterInputValue
@@ -1725,11 +1514,11 @@ const isNotOperator = {
     if (!filterItem.field || !filterItem.value || !filterItem.operator) {
       return null;
     }
-    return value => {
-      if (Array.isArray(value)) {
+    return params => {
+      if (Array.isArray(params.value)) {
         return true;
       }
-      return String(value) !== filterItem.value;
+      return String(params.value) !== filterItem.value;
     };
   },
   InputComponent: GridFilterInputValue
@@ -1746,11 +1535,11 @@ const containsAnyOfOperator = {
     if (!filterItem.field || !filterItem.value || !filterItem.operator) {
       return null;
     }
-    return value => {
+    return params => {
       if (filterItem.value.length === 0) {
         return true;
       }
-      const paramValues = Array.isArray(value) ? value : [value];
+      const paramValues = Array.isArray(params.value) ? params.value : [params.value];
       let match = false;
       filterItem.value.forEach(filteredValue => {
         paramValues.forEach(paramValue => {
@@ -1771,11 +1560,11 @@ const containsAnyOfCIOperator = {
     if (!filterItem.field || !filterItem.value || !filterItem.operator) {
       return null;
     }
-    return value => {
+    return params => {
       if (filterItem.value.length === 0) {
         return true;
       }
-      const paramValues = Array.isArray(value) ? value : [value];
+      const paramValues = Array.isArray(params.value) ? params.value : [params.value];
       const paramValuesLower = paramValues.map(item => String(item).toLowerCase());
       let match = false;
       filterItem.value.forEach(filteredValue => {
@@ -1798,11 +1587,11 @@ const doesNotHaveAnyOf = {
     if (!filterItem.field || !filterItem.value || !Array.isArray(filterItem.value) || filterItem.value.length === 0) {
       return null;
     }
-    return value => {
-      const cellValues = Array.isArray(value) ? value : [value];
+    return params => {
+      const cellValues = Array.isArray(params.value) ? params.value : [params.value];
 
       // Return true only if none of the filter values are in the cell values
-      return filterItem.value.every(filterVal => !cellValues.map(val => String(val)).includes(filterVal));
+      return filterItem.value.every(filterVal => !cellValues.map(value => String(value)).includes(filterVal));
     };
   },
   InputComponent: GridFilterInputMultipleValue
@@ -1819,11 +1608,11 @@ const endsWithAnyOfOperator = {
     if (!filterItem.field || !filterItem.value || !filterItem.operator) {
       return null;
     }
-    return value => {
+    return params => {
       if (filterItem.value.length === 0) {
         return true;
       }
-      const paramValues = Array.isArray(value) ? value : [value];
+      const paramValues = Array.isArray(params.value) ? params.value : [params.value];
       let match = false;
       filterItem.value.forEach(filteredValue => {
         paramValues.forEach(paramValue => {
@@ -1846,11 +1635,11 @@ const isAnyOfOperator = {
     if (!filterItem.field || !filterItem.value || !filterItem.operator) {
       return null;
     }
-    return value => {
+    return params => {
       if (filterItem.value.length === 0) {
         return true;
       }
-      const paramValues = Array.isArray(value) ? value : [value];
+      const paramValues = Array.isArray(params.value) ? params.value : [params.value];
       for (const paramValue of paramValues) {
         if (filterItem.value.includes(String(paramValue))) {
           return true;
@@ -1874,11 +1663,11 @@ const isAnyOfIOperator = {
       return null;
     }
     const lowerCaseFilterValues = filterItem.value.map(v => String(v).toLowerCase());
-    return value => {
+    return params => {
       if (filterItem.value.length === 0) {
         return true;
       }
-      const paramValues = Array.isArray(value) ? value : [value];
+      const paramValues = Array.isArray(params.value) ? params.value : [params.value];
       for (const paramValue of paramValues) {
         if (lowerCaseFilterValues.includes(String(paramValue).toLowerCase())) {
           return true;
@@ -1901,13 +1690,13 @@ const hasAnyOfOperator = {
     if (!filterItem.field || !filterItem.value || !filterItem.operator) {
       return null;
     }
-    return value => {
+    return params => {
       if (filterItem.value.length === 0) {
         return true;
       }
-      const cellValues = Array.isArray(value) ? value : [value];
+      const cellValues = Array.isArray(params.value) ? params.value : [params.value];
       const filterItemValues = Array.isArray(filterItem.value) ? filterItem.value : [filterItem.value];
-      return filterItemValues.some(v => cellValues.map(val => String(val)).includes(v));
+      return filterItemValues.some(v => cellValues.map(value => String(value)).includes(v));
     };
   },
   InputComponent: GridFilterInputMultipleValue
@@ -1924,11 +1713,11 @@ const isNotAnyOfOperator = {
     if (!filterItem.field || !filterItem.value || !filterItem.operator) {
       return null;
     }
-    return value => {
+    return params => {
       if (filterItem.value.length === 0) {
         return true;
       }
-      const paramValues = Array.isArray(value) ? value : [value];
+      const paramValues = Array.isArray(params.value) ? params.value : [params.value];
       for (const paramValue of paramValues) {
         if (filterItem.value.includes(String(paramValue))) {
           return false;
@@ -1951,11 +1740,11 @@ const startsWithAnyOfOperator = {
     if (!filterItem.field || !filterItem.value || !filterItem.operator) {
       return null;
     }
-    return value => {
+    return params => {
       if (filterItem.value.length === 0) {
         return true;
       }
-      const paramValues = Array.isArray(value) ? value : [value];
+      const paramValues = Array.isArray(params.value) ? params.value : [params.value];
       let match = false;
       filterItem.value.forEach(filteredValue => {
         paramValues.forEach(paramValue => {
@@ -2085,11 +1874,11 @@ const decodeValue = value => {
   if (value === '') {
     return '';
   }
-  const re = new RegExp(Object.keys(DECODER).reduce((acc, curr) => `${acc}%7C${curr}`), 'g');
+  const re = new RegExp(Object.keys(DECODER).reduce((acc, curr) => `${acc},${curr}`), 'g');
   // decodeValue for lists:
   if (value.startsWith('list[')) {
     const arrayValues = value.split('[')[1].split(']')[0];
-    const arrayList = arrayValues.split('%7C').map(v => v.replace(re, encoded => DECODER[encoded])).filter(item => item);
+    const arrayList = arrayValues.split(',').map(v => v.replace(re, encoded => DECODER[encoded])).filter(item => item);
     return arrayList.length > 0 ? arrayList : [];
   }
   return value.replace(re, encoded => DECODER[encoded]);
@@ -2104,7 +1893,7 @@ const encodeValue = value => {
   if (Array.isArray(value)) {
     const encodedArray = value.map(entry => {
       return String(entry).replace(/\s|&|=|\?|\[|\]/g, encoded => ENCODER[encoded]);
-    }).join('%7C');
+    }).join(',');
     return `list[${encodedArray}]`;
   }
 
@@ -2173,11 +1962,16 @@ const isValueValid = (value, field, columns, operator) => {
   }
   const type = (_column$type = column['type']) !== null && _column$type !== void 0 ? _column$type : 'string';
 
-  // Only date fail with 500s, other set themselves as undefined
-  if (type !== 'date') {
+  // Only date and rating fail with 500s, other set themselves as undefined
+  if (type !== 'date' && type !== 'rating') {
     return true;
   }
 
+  // just checking that rating is a number.
+  if (type === 'rating') {
+    return !isNaN(Number(value));
+  }
+
   // format: YYYY-MM-DD
   // just verifying that the 3 values are numbers to avoid 500s,
   // If the value is invalid the form will appear as undefined
@@ -2237,7 +2031,7 @@ const getFilterModelFromString = (searchString, columns) => {
       isInvalid = true;
       return;
     }
-    const splitRight = key.split('[')[1].split(']')[0].split('%7C');
+    const splitRight = key.split('[')[1].split(']')[0].split(',');
     const type = splitRight[1];
     if (type !== columnType) {
       isInvalid = true;
@@ -2283,9 +2077,9 @@ const getSearchParamsFromFilterModel = filterModel => {
       type
     } = item;
     if (Object.keys(numberOperatorEncoder).includes(operator)) {
-      searchParams.set(`_${field}[${numberOperatorEncoder[operator]}%7C${encodeValue(type)}]`, encodeValue(value));
+      searchParams.set(`_${field}[${numberOperatorEncoder[operator]},${encodeValue(type)}]`, encodeValue(value));
     } else {
-      searchParams.set(`_${field}[${encodeValue(operator)}%7C${encodeValue(type)}]`, encodeValue(value));
+      searchParams.set(`_${field}[${encodeValue(operator)},${encodeValue(type)}]`, encodeValue(value));
     }
   });
   if ((_filterModel$quickFil = filterModel.quickFilterValues) !== null && _filterModel$quickFil !== void 0 && _filterModel$quickFil.length) {
@@ -2334,7 +2128,7 @@ const getSortingFromString = (searchString, columns) => {
     return [];
   }
   const fields = columns.map(column => column.field);
-  const [column, order] = value.slice(1, value.length - 1).split('%7C');
+  const [column, order] = value.slice(1, value.length - 1).split(',');
   if (fields.includes(column) && (order === 'asc' || order === 'desc')) {
     return [{
       field: column,
@@ -2345,7 +2139,7 @@ const getSortingFromString = (searchString, columns) => {
 };
 const getSearchParamsFromSorting = sorting => {
   const searchParams = new URLSearchParams();
-  searchParams.set('_sortColumn', sorting.length > 0 && sorting[0].sort ? `[${encodeValue(sorting[0].field)}%7C${encodeValue(sorting[0].sort)}]` : '[]');
+  searchParams.set('_sortColumn', sorting.length > 0 && sorting[0].sort ? `[${encodeValue(sorting[0].field)},${encodeValue(sorting[0].sort)}]` : '[]');
   return searchParams;
 };
 
@@ -2386,7 +2180,7 @@ const getPaginationFromString = searchString => {
   if (value === '' || value === null || value === '[]') {
     return 'invalid';
   }
-  const pagination = value.slice(1, value.length - 1).split('%7C');
+  const pagination = value.slice(1, value.length - 1).split(',');
   const page = parseFloat(pagination[0]);
   const pageSize = parseFloat(pagination[1]);
   const direction = pagination[2];
@@ -2401,7 +2195,7 @@ const getPaginationFromString = searchString => {
 };
 const getSearchParamsFromPagination = pagination => {
   const searchParams = new URLSearchParams();
-  searchParams.set('_pagination', `[${pagination.page}%7C${pagination.pageSize}%7C${pagination.direction}]`);
+  searchParams.set('_pagination', `[${pagination.page},${pagination.pageSize},${pagination.direction}]`);
   return searchParams;
 };
 
@@ -2449,7 +2243,7 @@ const getColumnVisibilityFromString = (searchString, columns) => {
   if (value === '' || value === null || value === '[]') {
     return 'invalid';
   }
-  const parsedFields = value.slice(1, value.length - 1).split('%7C');
+  const parsedFields = value.slice(1, value.length - 1).split(',');
   const fields = columns.map(column => column.field);
   const visibility = {};
   for (const field of fields) {
@@ -2471,7 +2265,7 @@ const getSearchParamsFromColumnVisibility = (columnVisibility, columns) => {
 
   // if column visibility model is empty, show all columns
   if (Object.keys(columnVisibility).length == 0) {
-    searchParams.set('_columnVisibility', `[${fields.join('%7C')}]`);
+    searchParams.set('_columnVisibility', `[${fields.join(',')}]`);
     return searchParams;
   }
   const finalColumnVisibility = columns.filter(c => {
@@ -2483,7 +2277,7 @@ const getSearchParamsFromColumnVisibility = (columnVisibility, columns) => {
     });
   }, columnVisibility);
   const visibleColumns = fields.filter(column => finalColumnVisibility[column] !== false);
-  searchParams.set('_columnVisibility', `[${visibleColumns.join('%7C')}]`);
+  searchParams.set('_columnVisibility', `[${visibleColumns.join(',')}]`);
   return searchParams;
 };
 
@@ -2547,7 +2341,7 @@ const getPinnedColumnsFromString = (notParsed, tableColumns) => {
       continue;
     }
     const fields = [...tableColumns.map(column => column.field), '__check__'];
-    const columns = encodedValues.split('%7C').map(value => decodeValue(value)).filter(val => typeof val === 'string' && fields.includes(val));
+    const columns = encodedValues.split(',').map(value => decodeValue(value)).filter(val => typeof val === 'string' && fields.includes(val));
     if (fieldURL === '_pinnedColumnsLeft') {
       pinnedColumns['left'] = columns;
     }
@@ -2565,8 +2359,8 @@ const getSearchParamsFromPinnedColumns = pinnedColumns => {
   const searchParams = new URLSearchParams();
   const pinnedColumnLeft = ((_pinnedColumns$left = pinnedColumns.left) === null || _pinnedColumns$left === void 0 ? void 0 : _pinnedColumns$left.map(val => encodeValue(val))) || [];
   const pinnedColumnRight = ((_pinnedColumns$right = pinnedColumns.right) === null || _pinnedColumns$right === void 0 ? void 0 : _pinnedColumns$right.map(val => encodeValue(val))) || [];
-  searchParams.set('_pinnedColumnsLeft', `[${pinnedColumnLeft.join('%7C')}]`);
-  searchParams.set('_pinnedColumnsRight', `[${pinnedColumnRight.join('%7C')}]`);
+  searchParams.set('_pinnedColumnsLeft', `[${pinnedColumnLeft.join(',')}]`);
+  searchParams.set('_pinnedColumnsRight', `[${pinnedColumnRight.join(',')}]`);
   return searchParams;
 };
 
@@ -3103,9 +2897,6 @@ const StatefulDataGrid = /*#__PURE__*/forwardRef((props, ref) => {
     pageSize: paginationModel.pageSize
   });
 
-  // Version counter to force re-renders when selectionStatus ref changes
-  const [, forceSelectionUpdate] = useState(0);
-
   // The checkboxSelectionVisibleOnly should only be applied to client-side pagination,
   // for server-side pagination it produces inconsistent behavior when selecting all rows in pages 2 and beyond
   const checkboxSelectionVisibleOnly = Boolean(pagination) && Boolean(paginationMode != 'server');
@@ -3114,7 +2905,7 @@ const StatefulDataGrid = /*#__PURE__*/forwardRef((props, ref) => {
   // every time we navigate between pages, resize our page or select something
   useEffect(() => {
     if (paginationMode == 'server') {
-      onServerSideSelectionStatusChange(Array.isArray(rowSelectionModel) ? rowSelectionModel : [rowSelectionModel], apiRef, selectionStatus, forceSelectionUpdate, isRowSelectable, paginationModel.page, paginationModel.pageSize);
+      onServerSideSelectionStatusChange(Array.isArray(rowSelectionModel) ? rowSelectionModel : [rowSelectionModel], apiRef, selectionStatus, isRowSelectable, paginationModel.page, paginationModel.pageSize);
     }
   }, [rowSelectionModel, paginationModel.page, paginationModel.pageSize]);
   if (!Array.isArray(rows)) {
@@ -3142,7 +2933,7 @@ const StatefulDataGrid = /*#__PURE__*/forwardRef((props, ref) => {
     ref: datagridRef,
     className: classNames(StatefulDataGrid.className, className),
     $height: height
-  }, /*#__PURE__*/React__default.createElement(DataGridPro, _extends({}, forwardedProps, {
+  }, /*#__PURE__*/React__default.createElement(DataGridPro, _extends$1({}, forwardedProps, {
     apiRef: apiRef,
     columns: columns,
     columnVisibilityModel: columnVisibilityModel,
@@ -3171,59 +2962,43 @@ const StatefulDataGrid = /*#__PURE__*/forwardRef((props, ref) => {
       baseCheckbox: BaseCheckbox,
       // baseTextField,
       basePopper: BasePopper,
-      columnFilteredIcon: props => /*#__PURE__*/React__default.createElement(BaseIcon, _extends({}, props, {
+      columnFilteredIcon: props => /*#__PURE__*/React__default.createElement(BaseIcon, _extends$1({}, props, {
         displayName: "ColumnFilteredIcon"
       })),
-      columnSelectorIcon: props => /*#__PURE__*/React__default.createElement(BaseIcon, _extends({}, props, {
+      columnSelectorIcon: props => /*#__PURE__*/React__default.createElement(BaseIcon, _extends$1({}, props, {
         displayName: "ColumnSelectorIcon"
       })),
-      columnSortedAscendingIcon: props => /*#__PURE__*/React__default.createElement(BaseIcon, _extends({}, props, {
+      columnSortedAscendingIcon: props => /*#__PURE__*/React__default.createElement(BaseIcon, _extends$1({}, props, {
         displayName: "ColumnSortedAscendingIcon"
       })),
-      columnSortedDescendingIcon: props => /*#__PURE__*/React__default.createElement(BaseIcon, _extends({}, props, {
+      columnSortedDescendingIcon: props => /*#__PURE__*/React__default.createElement(BaseIcon, _extends$1({}, props, {
         displayName: "ColumnSortedDescendingIcon"
       })),
-      densityCompactIcon: props => /*#__PURE__*/React__default.createElement(BaseIcon, _extends({}, props, {
+      densityCompactIcon: props => /*#__PURE__*/React__default.createElement(BaseIcon, _extends$1({}, props, {
         displayName: "DensityCompactIcon"
       })),
-      densityStandardIcon: props => /*#__PURE__*/React__default.createElement(BaseIcon, _extends({}, props, {
+      densityStandardIcon: props => /*#__PURE__*/React__default.createElement(BaseIcon, _extends$1({}, props, {
         displayName: "DensityStandardIcon"
       })),
-      densityComfortableIcon: props => /*#__PURE__*/React__default.createElement(BaseIcon, _extends({}, props, {
+      densityComfortableIcon: props => /*#__PURE__*/React__default.createElement(BaseIcon, _extends$1({}, props, {
         displayName: "DensityComfortableIcon"
       })),
-      detailPanelCollapseIcon: props => /*#__PURE__*/React__default.createElement(BaseIcon, _extends({}, props, {
+      detailPanelCollapseIcon: props => /*#__PURE__*/React__default.createElement(BaseIcon, _extends$1({}, props, {
         displayName: "DetailPanelCollapseIcon"
       })),
-      detailPanelExpandIcon: props => /*#__PURE__*/React__default.createElement(BaseIcon, _extends({}, props, {
+      detailPanelExpandIcon: props => /*#__PURE__*/React__default.createElement(BaseIcon, _extends$1({}, props, {
         displayName: "DetailPanelExpandIcon"
       })),
-      exportIcon: props => /*#__PURE__*/React__default.createElement(BaseIcon, _extends({}, props, {
+      exportIcon: props => /*#__PURE__*/React__default.createElement(BaseIcon, _extends$1({}, props, {
         displayName: "ExportIcon"
       })),
-      openFilterButtonIcon: props => /*#__PURE__*/React__default.createElement(BaseIcon, _extends({
+      openFilterButtonIcon: props => /*#__PURE__*/React__default.createElement(BaseIcon, _extends$1({
         displayName: "OpenFilterButtonIcon"
       }, props))
     }, slots), {}, {
-      toolbar: props => /*#__PURE__*/React__default.createElement(ToolbarWrapper, _extends({}, props, {
-        hideToolbar: hideToolbar,
-        RenderedToolbar: RenderedToolbar,
-        filterModel: filterModel,
-        onFilterModelChange: onFilterModelChange,
-        pagination: pagination,
-        paginationPlacement: paginationPlacement,
-        selectionStatus: selectionStatus,
-        apiRef: apiRef,
-        isRowSelectable: isRowSelectable,
-        paginationModel: paginationModel,
-        onPaginationModelChange: onPaginationModelChange,
-        pageSizeOptions: pageSizeOptions,
-        paginationProps: paginationProps,
-        paginationMode: paginationMode,
-        rowCount: rowCount
-      })),
+      toolbar: ToolbarWrapper,
       pagination: props => {
-        return pagination ? paginationMode == 'server' ? /*#__PURE__*/React__default.createElement(ServerSideControlledPagination, _extends({}, props, {
+        return pagination ? paginationMode == 'server' ? /*#__PURE__*/React__default.createElement(ServerSideControlledPagination, _extends$1({}, props, {
           displaySelection: false,
           displayRowsPerPage: ['bottom', 'both'].includes(paginationPlacement),
           displayPagination: ['bottom', 'both'].includes(paginationPlacement),
@@ -3232,8 +3007,9 @@ const StatefulDataGrid = /*#__PURE__*/forwardRef((props, ref) => {
           onPaginationModelChange: onPaginationModelChange,
           pageSizeOptions: pageSizeOptions,
           paginationProps: paginationProps,
+          paginationMode: paginationMode,
           rowCount: rowCount
-        })) : /*#__PURE__*/React__default.createElement(ControlledPagination, _extends({}, props, {
+        })) : /*#__PURE__*/React__default.createElement(ControlledPagination, _extends$1({}, props, {
           displaySelection: false,
           displayRowsPerPage: ['bottom', 'both'].includes(paginationPlacement),
           displayPagination: ['bottom', 'both'].includes(paginationPlacement),
@@ -3243,11 +3019,30 @@ const StatefulDataGrid = /*#__PURE__*/forwardRef((props, ref) => {
           paginationModel: paginationModel,
           onPaginationModelChange: onPaginationModelChange,
           pageSizeOptions: pageSizeOptions,
-          paginationProps: paginationProps
+          paginationProps: paginationProps,
+          paginationMode: paginationMode
         })) : null;
       }
     }),
-    slotProps: _objectSpread2({}, slotProps),
+    slotProps: _objectSpread2(_objectSpread2({}, slotProps), {}, {
+      toolbar: _objectSpread2({
+        hideToolbar,
+        RenderedToolbar,
+        filterModel,
+        onFilterModelChange,
+        pagination,
+        paginationPlacement,
+        selectionStatus,
+        apiRef,
+        isRowSelectable,
+        paginationModel,
+        onPaginationModelChange,
+        pageSizeOptions,
+        paginationProps,
+        paginationMode,
+        rowCount
+      }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.toolbar)
+    }),
     rowSelectionModel: rowSelectionModel,
     onRowSelectionModelChange: (newSelectionModel, details) => {
       if (pagination && paginationMode != 'server') {
@@ -3306,7 +3101,6 @@ const StatefulDataGrid = /*#__PURE__*/forwardRef((props, ref) => {
             numberOfSelectedRows
           };
         }
-        forceSelectionUpdate(v => v + 1);
       }
       onRowSelectionModelChange === null || onRowSelectionModelChange === void 0 ? void 0 : onRowSelectionModelChange(newSelectionModel, details);
     },