@redsift/table 11.11.0-muiv6 → 11.11.0-muiv8-alpha.0

package/_internal/StatefulDataGrid2.js

@@ -1,30 +1,23 @@
-import { _ as _objectSpread2, a as _objectWithoutProperties, b as _extends$1 } from './_rollupPluginBabelHelpers.js';
+import { _ as _objectSpread2, a as _objectWithoutProperties, b as _extends } from './_rollupPluginBabelHelpers.js';
 import * as React from 'react';
-import React__default, { useCallback, useEffect, useMemo, forwardRef, useRef, useState } from 'react';
+import React__default, { useCallback, useEffect, useRef, useMemo, forwardRef, useState } from 'react';
 import classNames from 'classnames';
-import { Icon, useTheme as useTheme$1, ThemeProvider, RedsiftColorBlueN, RedsiftColorNeutralXDarkGrey, RedsiftColorNeutralWhite } from '@redsift/design-system';
+import { Icon, useTheme as useTheme$1, RedsiftColorBlueN, RedsiftColorNeutralXDarkGrey, RedsiftColorNeutralWhite, ThemeProvider } 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 { _ 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 { d as defaultSxConfig, b as isPlainObject, s as styled, e as styleFunctionSx, u as useTheme, f as clsx, h as generateUtilityClasses, j as createTheme, T as THEME_ID, k as ClassNameGenerator, P as PropTypes, l as generateUtilityClass, m as styled$1, n as memoTheme, p as createSimplePaletteValueFilter, q as useDefaultProps, r as useFormControl, t as formControlState, v as capitalize, w as composeClasses, x as rootShouldForwardProp, y as isAdornedStart, z as isFilled, F as FormControlContext, A as useId, B as useSlot, D as Select, G as refType, I as Input, H as FilledInput, O as OutlinedInput, E as EMPTY_ROW_SELECTION_MODEL, o as onServerSideSelectionStatusChange, g as getSelectionCount, S as ServerSideControlledPagination, C as ControlledPagination } from './ServerSideControlledPagination.js';
 import { j as jsxRuntimeExports } from './jsx-runtime.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';
+import { B as BaseButton, c as BaseIconButton, a as BaseCheckbox, b as BaseIcon } from './BaseIconButton.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 = props == null ? void 0 : (_props$theme = props.theme) == null ? void 0 : _props$theme.unstable_sxConfig) != null ? _props$theme$unstable : defaultSxConfig;
+  const config = props?.theme?.unstable_sxConfig ?? defaultSxConfig;
   Object.keys(props).forEach(prop => {
     if (config[prop]) {
       result.systemProps[prop] = props[prop];
@@ -36,9 +29,9 @@ const splitProps = props => {
 };
 function extendSxProp(props) {
   const {
-      sx: inSx
-    } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$7);
+    sx: inSx,
+    ...other
+  } = props;
   const {
     systemProps,
     otherProps
@@ -52,17 +45,23 @@ function extendSxProp(props) {
       if (!isPlainObject(result)) {
         return systemProps;
       }
-      return _extends({}, systemProps, result);
+      return {
+        ...systemProps,
+        ...result
+      };
     };
   } else {
-    finalSx = _extends({}, systemProps, inSx);
+    finalSx = {
+      ...systemProps,
+      ...inSx
+    };
   }
-  return _extends({}, otherProps, {
+  return {
+    ...otherProps,
     sx: finalSx
-  });
+  };
 }
 
-const _excluded$6 = ["className", "component"];
 function createBox(options = {}) {
   const {
     themeId,
@@ -75,34 +74,45 @@ function createBox(options = {}) {
   })(styleFunctionSx);
   const Box = /*#__PURE__*/React.forwardRef(function Box(inProps, ref) {
     const theme = useTheme(defaultTheme);
-    const _extendSxProp = extendSxProp(inProps),
-      {
-        className,
-        component = 'div'
-      } = _extendSxProp,
-      other = _objectWithoutPropertiesLoose(_extendSxProp, _excluded$6);
-    return /*#__PURE__*/jsxRuntimeExports.jsx(BoxRoot, _extends({
+    const {
+      className,
+      component = 'div',
+      ...other
+    } = extendSxProp(inProps);
+    return /*#__PURE__*/jsxRuntimeExports.jsx(BoxRoot, {
       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 available 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: 'MuiBox-root',
+  defaultClassName: boxClasses$1.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 "yarn proptypes"     |
-  // ----------------------------------------------------------------------
+  // ┌────────────────────────────── Warning ──────────────────────────────┐
+  // │ These PropTypes are generated from the TypeScript type definitions. │
+  // │    To update them, edit the d.ts file and run `pnpm proptypes`.     │
+  // └─────────────────────────────────────────────────────────────────────┘
   /**
    * @ignore
    */
@@ -125,7 +135,6 @@ 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,
@@ -145,59 +154,76 @@ const useUtilityClasses$4 = ownerState => {
 const FormLabelRoot = styled$1('label', {
   name: 'MuiFormLabel',
   slot: 'Root',
-  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, {
+  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,
   lineHeight: '1.4375em',
   padding: 0,
   position: 'relative',
-  [`&.${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
-  }
-}));
+  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
+      }
+    }
+  }]
+})));
 const AsteriskComponent = styled$1('span', {
   name: 'MuiFormLabel',
-  slot: 'Asterisk',
-  overridesResolver: (props, styles) => styles.asterisk
-})(({
+  slot: 'Asterisk'
+})(memoTheme(({
   theme
 }) => ({
   [`&.${formLabelClasses$1.error}`]: {
     color: (theme.vars || theme).palette.error.main
   }
-}));
+})));
 const FormLabel = /*#__PURE__*/React.forwardRef(function FormLabel(inProps, ref) {
-  const props = useThemeProps({
+  const props = useDefaultProps({
     props: inProps,
     name: 'MuiFormLabel'
   });
   const {
-      children,
-      className,
-      component = 'label'
-    } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$5);
+    children,
+    className,
+    color,
+    component = 'label',
+    disabled,
+    error,
+    filled,
+    focused,
+    required,
+    ...other
+  } = props;
   const muiFormControl = useFormControl();
   const fcs = formControlState({
     props,
     muiFormControl,
     states: ['color', 'required', 'focused', 'disabled', 'error', 'filled']
   });
-  const ownerState = _extends({}, props, {
+  const ownerState = {
+    ...props,
     color: fcs.color || 'primary',
     component,
     disabled: fcs.disabled,
@@ -205,27 +231,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, _extends({
+  return /*#__PURE__*/jsxRuntimeExports.jsxs(FormLabelRoot, {
     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 "yarn proptypes"     |
-  // ----------------------------------------------------------------------
+  // ┌────────────────────────────── Warning ──────────────────────────────┐
+  // │ These PropTypes are generated from the TypeScript type definitions. │
+  // │    To update them, edit the d.ts file and run `pnpm proptypes`.     │
+  // └─────────────────────────────────────────────────────────────────────┘
   /**
    * The content of the component.
    */
@@ -241,7 +267,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/#adding-new-colors).
+   * [palette customization guide](https://mui.com/material-ui/customization/palette/#custom-colors).
    */
   color: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.oneOf(['error', 'info', 'primary', 'secondary', 'success', 'warning']), PropTypes.string]),
   /**
@@ -281,7 +307,6 @@ 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,
@@ -293,11 +318,15 @@ const useUtilityClasses$3 = ownerState => {
     required
   } = ownerState;
   const slots = {
-    root: ['root', formControl && 'formControl', !disableAnimation && 'animated', shrink && 'shrink', size === 'small' && 'sizeSmall', variant],
+    root: ['root', formControl && 'formControl', !disableAnimation && 'animated', shrink && 'shrink', size && size !== 'medium' && `size${capitalize(size)}`, variant],
     asterisk: [required && 'asterisk']
   };
   const composedClasses = composeClasses(slots, getInputLabelUtilityClasses, classes);
-  return _extends({}, classes, composedClasses);
+  return {
+    ...classes,
+    // forward the focused, disabled, etc. classes to the FormLabel
+    ...composedClasses
+  };
 };
 const InputLabelRoot = styled$1(FormLabel$1, {
   shouldForwardProp: prop => rootShouldForwardProp(prop) || prop === 'classes',
@@ -309,81 +338,144 @@ 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, styles[ownerState.variant]];
+    }, 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]];
   }
-})(({
-  theme,
-  ownerState
-}) => _extends({
+})(memoTheme(({
+  theme
+}) => ({
   display: 'block',
   transformOrigin: 'top left',
   whiteSpace: 'nowrap',
   overflow: 'hidden',
   textOverflow: 'ellipsis',
-  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)'
+  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)'
+    }
+  }]
 })));
 const InputLabel = /*#__PURE__*/React.forwardRef(function InputLabel(inProps, ref) {
-  const props = useThemeProps({
+  const props = useDefaultProps({
     name: 'MuiInputLabel',
     props: inProps
   });
   const {
-      disableAnimation = false,
-      shrink: shrinkProp,
-      className
-    } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$4);
+    disableAnimation = false,
+    margin,
+    shrink: shrinkProp,
+    variant,
+    className,
+    ...other
+  } = props;
   const muiFormControl = useFormControl();
   let shrink = shrinkProp;
   if (typeof shrink === 'undefined' && muiFormControl) {
@@ -392,31 +484,33 @@ const InputLabel = /*#__PURE__*/React.forwardRef(function InputLabel(inProps, re
   const fcs = formControlState({
     props,
     muiFormControl,
-    states: ['size', 'variant', 'required']
+    states: ['size', 'variant', 'required', 'focused']
   });
-  const ownerState = _extends({}, props, {
+  const ownerState = {
+    ...props,
     disableAnimation,
     formControl: muiFormControl,
     shrink,
     size: fcs.size,
     variant: fcs.variant,
-    required: fcs.required
-  });
+    required: fcs.required,
+    focused: fcs.focused
+  };
   const classes = useUtilityClasses$3(ownerState);
-  return /*#__PURE__*/jsxRuntimeExports.jsx(InputLabelRoot, _extends({
+  return /*#__PURE__*/jsxRuntimeExports.jsx(InputLabelRoot, {
     "data-shrink": shrink,
-    ownerState: ownerState,
     ref: ref,
-    className: clsx(classes.root, className)
-  }, other, {
+    className: clsx(classes.root, className),
+    ...other,
+    ownerState: ownerState,
     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 "yarn proptypes"     |
-  // ----------------------------------------------------------------------
+  // ┌────────────────────────────── Warning ──────────────────────────────┐
+  // │ These PropTypes are generated from the TypeScript type definitions. │
+  // │    To update them, edit the d.ts file and run `pnpm proptypes`.     │
+  // └─────────────────────────────────────────────────────────────────────┘
   /**
    * The content of the component.
    */
@@ -432,7 +526,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/#adding-new-colors).
+   * [palette customization guide](https://mui.com/material-ui/customization/palette/#custom-colors).
    */
   color: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.oneOf(['error', 'info', 'primary', 'secondary', 'success', 'warning']), PropTypes.string]),
   /**
@@ -467,9 +561,9 @@ process.env.NODE_ENV !== "production" ? InputLabel.propTypes /* remove-proptypes
   shrink: PropTypes.bool,
   /**
    * The size of the component.
-   * @default 'normal'
+   * @default 'medium'
    */
-  size: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.oneOf(['normal', 'small']), PropTypes.string]),
+  size: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.oneOf(['medium', 'small']), PropTypes.string]),
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
@@ -486,7 +580,6 @@ 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,
@@ -501,14 +594,13 @@ const useUtilityClasses$2 = ownerState => {
 const FormControlRoot = styled$1('div', {
   name: 'MuiFormControl',
   slot: 'Root',
-  overridesResolver: ({
-    ownerState
-  }, styles) => {
-    return _extends({}, styles.root, styles[`margin${capitalize(ownerState.margin)}`], ownerState.fullWidth && styles.fullWidth);
+  overridesResolver: (props, styles) => {
+    const {
+      ownerState
+    } = props;
+    return [styles.root, styles[`margin${capitalize(ownerState.margin)}`], ownerState.fullWidth && styles.fullWidth];
   }
-})(({
-  ownerState
-}) => _extends({
+})({
   display: 'inline-flex',
   flexDirection: 'column',
   position: 'relative',
@@ -517,16 +609,33 @@ const FormControlRoot = styled$1('div', {
   padding: 0,
   margin: 0,
   border: 0,
-  verticalAlign: 'top'
-}, ownerState.margin === 'normal' && {
-  marginTop: 16,
-  marginBottom: 8
-}, ownerState.margin === 'dense' && {
-  marginTop: 8,
-  marginBottom: 4
-}, ownerState.fullWidth && {
-  width: '100%'
-}));
+  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%'
+    }
+  }]
+});
 
 /**
  * Provides context such as filled/focused/error/required for form inputs.
@@ -553,27 +662,28 @@ 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 = useThemeProps({
+  const props = useDefaultProps({
     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'
-    } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$3);
-  const ownerState = _extends({}, 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',
+    ...other
+  } = props;
+  const ownerState = {
+    ...props,
     color,
     component,
     disabled,
@@ -584,7 +694,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
@@ -625,9 +735,8 @@ 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'));
@@ -638,6 +747,12 @@ 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,
@@ -653,37 +768,33 @@ 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, required, size, variant]);
+  }, [adornedStart, color, disabled, error, filled, focused, fullWidth, hiddenLabel, registerEffect, onEmpty, onFilled, required, size, variant]);
   return /*#__PURE__*/jsxRuntimeExports.jsx(FormControlContext.Provider, {
     value: childContext,
-    children: /*#__PURE__*/jsxRuntimeExports.jsx(FormControlRoot, _extends({
+    children: /*#__PURE__*/jsxRuntimeExports.jsx(FormControlRoot, {
       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 "yarn proptypes"     |
-  // ----------------------------------------------------------------------
+  // ┌────────────────────────────── Warning ──────────────────────────────┐
+  // │ These PropTypes are generated from the TypeScript type definitions. │
+  // │    To update them, edit the d.ts file and run `pnpm proptypes`.     │
+  // └─────────────────────────────────────────────────────────────────────┘
   /**
    * The content of the component.
    */
@@ -699,7 +810,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/#adding-new-colors).
+   * [palette customization guide](https://mui.com/material-ui/customization/palette/#custom-colors).
    * @default 'primary'
    */
   color: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.oneOf(['primary', 'secondary', 'error', 'info', 'success', 'warning']), PropTypes.string]),
@@ -768,7 +879,6 @@ 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,
@@ -794,12 +904,11 @@ const FormHelperTextRoot = styled$1('p', {
     } = props;
     return [styles.root, ownerState.size && styles[`size${capitalize(ownerState.size)}`], ownerState.contained && styles.contained, ownerState.filled && styles.filled];
   }
-})(({
-  theme,
-  ownerState
-}) => _extends({
-  color: (theme.vars || theme).palette.text.secondary
-}, theme.typography.caption, {
+})(memoTheme(({
+  theme
+}) => ({
+  color: (theme.vars || theme).palette.text.secondary,
+  ...theme.typography.caption,
   textAlign: 'left',
   marginTop: 3,
   marginRight: 0,
@@ -810,31 +919,50 @@ const FormHelperTextRoot = styled$1('p', {
   },
   [`&.${formHelperTextClasses$1.error}`]: {
     color: (theme.vars || theme).palette.error.main
-  }
-}, ownerState.size === 'small' && {
-  marginTop: 4
-}, ownerState.contained && {
-  marginLeft: 14,
-  marginRight: 14
-}));
+  },
+  variants: [{
+    props: {
+      size: 'small'
+    },
+    style: {
+      marginTop: 4
+    }
+  }, {
+    props: ({
+      ownerState
+    }) => ownerState.contained,
+    style: {
+      marginLeft: 14,
+      marginRight: 14
+    }
+  }]
+})));
 const FormHelperText = /*#__PURE__*/React.forwardRef(function FormHelperText(inProps, ref) {
-  const props = useThemeProps({
+  const props = useDefaultProps({
     props: inProps,
     name: 'MuiFormHelperText'
   });
   const {
-      children,
-      className,
-      component = 'p'
-    } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$2);
+    children,
+    className,
+    component = 'p',
+    disabled,
+    error,
+    filled,
+    focused,
+    margin,
+    required,
+    variant,
+    ...other
+  } = props;
   const muiFormControl = useFormControl();
   const fcs = formControlState({
     props,
     muiFormControl,
     states: ['variant', 'size', 'disabled', 'error', 'filled', 'focused', 'required']
   });
-  const ownerState = _extends({}, props, {
+  const ownerState = {
+    ...props,
     component,
     contained: fcs.variant === 'filled' || fcs.variant === 'outlined',
     variant: fcs.variant,
@@ -844,26 +972,30 @@ 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, _extends({
+  return /*#__PURE__*/jsxRuntimeExports.jsx(FormHelperTextRoot, {
     as: component,
-    ownerState: ownerState,
     className: clsx(classes.root, className),
-    ref: ref
-  }, other, {
+    ref: ref,
+    ...other,
+    ownerState: ownerState,
     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 "yarn proptypes"     |
-  // ----------------------------------------------------------------------
+  // ┌────────────────────────────── Warning ──────────────────────────────┐
+  // │ These PropTypes are generated from the TypeScript type definitions. │
+  // │    To update them, edit the d.ts file and run `pnpm proptypes`.     │
+  // └─────────────────────────────────────────────────────────────────────┘
   /**
    * The content of the component.
    *
@@ -924,7 +1056,6 @@ 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,
@@ -941,8 +1072,7 @@ const useUtilityClasses = ownerState => {
 };
 const TextFieldRoot = styled$1(FormControl$1, {
   name: 'MuiTextField',
-  slot: 'Root',
-  overridesResolver: (props, styles) => styles.root
+  slot: 'Root'
 })({});
 
 /**
@@ -978,47 +1108,49 @@ 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 = useThemeProps({
+  const props = useDefaultProps({
     props: inProps,
     name: 'MuiTextField'
   });
   const {
-      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, {
+    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,
     autoFocus,
     color,
     disabled,
@@ -1028,32 +1160,89 @@ 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 InputMore = {};
+  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;
   if (variant === 'outlined') {
-    if (InputLabelProps && typeof InputLabelProps.shrink !== 'undefined') {
-      InputMore.notched = InputLabelProps.shrink;
+    if (inputLabelSlotProps && typeof inputLabelSlotProps.shrink !== 'undefined') {
+      inputAdditionalProps.notched = inputLabelSlotProps.shrink;
     }
-    InputMore.label = label;
+    inputAdditionalProps.label = label;
   }
   if (select) {
     // unset defaults from textbox inputs
-    if (!SelectProps || !SelectProps.native) {
-      InputMore.id = undefined;
+    if (!SelectPropsProp || !SelectPropsProp.native) {
+      inputAdditionalProps.id = undefined;
     }
-    InputMore['aria-describedby'] = undefined;
+    inputAdditionalProps['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({
+  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
+    }
+  });
+  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, {
     "aria-describedby": helperTextId,
     autoComplete: autoComplete,
     autoFocus: autoFocus,
@@ -1071,46 +1260,40 @@ const TextField = /*#__PURE__*/React.forwardRef(function TextField(inProps, ref)
     onBlur: onBlur,
     onChange: onChange,
     onFocus: onFocus,
-    onClick: onClick,
     placeholder: placeholder,
-    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({
+    inputProps: htmlInputProps,
+    slots: {
+      input: slots.htmlInput ? HtmlInputSlot : undefined
+    },
+    ...inputProps
+  });
+  return /*#__PURE__*/jsxRuntimeExports.jsxs(RootSlot, {
+    ...rootProps,
+    children: [label != null && label !== '' && /*#__PURE__*/jsxRuntimeExports.jsx(InputLabelSlot, {
       htmlFor: id,
-      id: inputLabelId
-    }, InputLabelProps, {
+      id: inputLabelId,
+      ...inputLabelProps,
       children: label
-    })), select ? /*#__PURE__*/jsxRuntimeExports.jsx(Select, _extends({
+    }), select ? /*#__PURE__*/jsxRuntimeExports.jsx(SelectSlot, {
       "aria-describedby": helperTextId,
       id: id,
       labelId: inputLabelId,
       value: value,
-      input: InputElement
-    }, SelectProps, {
+      input: InputElement,
+      ...selectProps,
       children: children
-    })) : InputElement, helperText && /*#__PURE__*/jsxRuntimeExports.jsx(FormHelperText$1, _extends({
-      id: helperTextId
-    }, FormHelperTextProps, {
+    }) : InputElement, helperText && /*#__PURE__*/jsxRuntimeExports.jsx(FormHelperTextSlot, {
+      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 "yarn proptypes"     |
-  // ----------------------------------------------------------------------
+  // ┌────────────────────────────── Warning ──────────────────────────────┐
+  // │ These PropTypes are generated from the TypeScript type definitions. │
+  // │    To update them, edit the d.ts file and run `pnpm 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.
@@ -1137,7 +1320,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/#adding-new-colors).
+   * [palette customization guide](https://mui.com/material-ui/customization/palette/#custom-colors).
    * @default 'primary'
    */
   color: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.oneOf(['primary', 'secondary', 'error', 'info', 'success', 'warning']), PropTypes.string]),
@@ -1156,7 +1339,8 @@ process.env.NODE_ENV !== "production" ? TextField.propTypes /* remove-proptypes
    */
   error: PropTypes.bool,
   /**
-   * Props applied to the [`FormHelperText`](/material-ui/api/form-helper-text/) element.
+   * 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 a future major release. See [Migrating from deprecated APIs](https://mui.com/material-ui/migration/migrating-from-deprecated-apis/) for more details.
    */
   FormHelperTextProps: PropTypes.object,
   /**
@@ -1174,19 +1358,22 @@ process.env.NODE_ENV !== "production" ? TextField.propTypes /* remove-proptypes
    */
   id: PropTypes.string,
   /**
-   * Props applied to the [`InputLabel`](/material-ui/api/input-label/) element.
+   * Props applied to the [`InputLabel`](https://mui.com/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 a future major release. 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.
+   * [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#attributes) applied to the `input` element.
+   * @deprecated Use `slotProps.htmlInput` instead. This prop will be removed in a future major release. 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`](/material-ui/api/filled-input/),
-   * [`OutlinedInput`](/material-ui/api/outlined-input/) or [`Input`](/material-ui/api/input/)
+   * 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/)
    * component depending on the `variant` prop value.
+   * @deprecated Use `slotProps.input` instead. This prop will be removed in a future major release. See [Migrating from deprecated APIs](https://mui.com/material-ui/migration/migrating-from-deprecated-apis/) for more details.
    */
   InputProps: PropTypes.object,
   /**
@@ -1230,10 +1417,6 @@ 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
    */
@@ -1252,27 +1435,52 @@ process.env.NODE_ENV !== "production" ? TextField.propTypes /* remove-proptypes
    */
   rows: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
   /**
-   * Render a [`Select`](/material-ui/api/select/) element while passing the Input element to `Select` as `input` parameter.
+   * Render a [`Select`](https://mui.com/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`](/material-ui/api/select/) element.
+   * Props applied to the [`Select`](https://mui.com/material-ui/api/select/) element.
+   * @deprecated Use `slotProps.select` instead. This prop will be removed in a future major release. See [Migrating from deprecated APIs](https://mui.com/material-ui/migration/migrating-from-deprecated-apis/) for more details.
    */
   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.
    */
   sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
   /**
-   * Type of the `input` element. It should be [a valid HTML5 input type](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Form_%3Cinput%3E_types).
+   * Type of the `input` element. It should be [a valid HTML5 input type](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#input_types).
    */
-  type: PropTypes /* @typescript-to-proptypes-ignore */.string,
+  type: PropTypes.string,
   /**
    * The value of the `input` element, required for a controlled component.
    */
@@ -1377,8 +1585,8 @@ const isBetweenOperator = {
     if (typeof filterItem.value[0] !== 'number' || typeof filterItem.value[1] !== 'number') {
       return null;
     }
-    return params => {
-      return params.value !== null && params.value !== undefined && filterItem.value[0] <= params.value && params.value <= filterItem.value[1];
+    return value => {
+      return value !== null && value !== undefined && filterItem.value[0] <= value && value <= filterItem.value[1];
     };
   },
   InputComponent: InputNumberInterval
@@ -1394,11 +1602,11 @@ const doesNotContain = {
     if (!filterItem.field || !filterItem.value || !filterItem.operator) {
       return null;
     }
-    return params => {
+    return value => {
       if (filterItem.value.length === 0) {
         return true;
       }
-      if (String(params.value).indexOf(filterItem.value) !== -1) {
+      if (String(value).indexOf(filterItem.value) !== -1) {
         return false;
       }
       return true;
@@ -1415,11 +1623,11 @@ const doesNotEqual = {
     if (!filterItem.field || !filterItem.value || !filterItem.value) {
       return null;
     }
-    return params => {
+    return value => {
       if (filterItem.value.length === 0) {
         return true;
       }
-      if (String(params.value) === filterItem.value) {
+      if (String(value) === filterItem.value) {
         return false;
       }
       return true;
@@ -1436,9 +1644,9 @@ const doesNotHaveOperator = {
     if (!filterItem.field || !filterItem.value || !filterItem.operator) {
       return null;
     }
-    return params => {
-      const cellValues = Array.isArray(params.value) ? params.value : [params.value];
-      return !cellValues.map(value => String(value)).includes(filterItem.value);
+    return value => {
+      const cellValues = Array.isArray(value) ? value : [value];
+      return !cellValues.map(val => String(val)).includes(filterItem.value);
     };
   },
   InputComponent: GridFilterInputValue
@@ -1455,9 +1663,9 @@ const hasOperator = {
     if (!filterItem.field || !filterItem.value || !filterItem.operator) {
       return null;
     }
-    return params => {
-      const cellValues = Array.isArray(params.value) ? params.value : [params.value];
-      return cellValues.map(value => String(value)).includes(filterItem.value);
+    return value => {
+      const cellValues = Array.isArray(value) ? value : [value];
+      return cellValues.map(val => String(val)).includes(filterItem.value);
     };
   },
   InputComponent: GridFilterInputValue
@@ -1474,8 +1682,8 @@ const hasOnlyOperator = {
     if (!filterItem.field || !filterItem.value || !filterItem.operator) {
       return null;
     }
-    return params => {
-      const cellValues = Array.isArray(params.value) ? params.value : [params.value];
+    return value => {
+      const cellValues = Array.isArray(value) ? value : [value];
       return cellValues.length === 1 && String(cellValues[0]) === filterItem.value;
     };
   },
@@ -1493,11 +1701,11 @@ const isOperator = {
     if (!filterItem.field || !filterItem.value || !filterItem.operator) {
       return null;
     }
-    return params => {
-      if (Array.isArray(params.value)) {
+    return value => {
+      if (Array.isArray(value)) {
         return false;
       }
-      return String(params.value) === filterItem.value;
+      return String(value) === filterItem.value;
     };
   },
   InputComponent: GridFilterInputValue
@@ -1514,11 +1722,11 @@ const isNotOperator = {
     if (!filterItem.field || !filterItem.value || !filterItem.operator) {
       return null;
     }
-    return params => {
-      if (Array.isArray(params.value)) {
+    return value => {
+      if (Array.isArray(value)) {
         return true;
       }
-      return String(params.value) !== filterItem.value;
+      return String(value) !== filterItem.value;
     };
   },
   InputComponent: GridFilterInputValue
@@ -1535,11 +1743,11 @@ const containsAnyOfOperator = {
     if (!filterItem.field || !filterItem.value || !filterItem.operator) {
       return null;
     }
-    return params => {
+    return value => {
       if (filterItem.value.length === 0) {
         return true;
       }
-      const paramValues = Array.isArray(params.value) ? params.value : [params.value];
+      const paramValues = Array.isArray(value) ? value : [value];
       let match = false;
       filterItem.value.forEach(filteredValue => {
         paramValues.forEach(paramValue => {
@@ -1560,11 +1768,11 @@ const containsAnyOfCIOperator = {
     if (!filterItem.field || !filterItem.value || !filterItem.operator) {
       return null;
     }
-    return params => {
+    return value => {
       if (filterItem.value.length === 0) {
         return true;
       }
-      const paramValues = Array.isArray(params.value) ? params.value : [params.value];
+      const paramValues = Array.isArray(value) ? value : [value];
       const paramValuesLower = paramValues.map(item => String(item).toLowerCase());
       let match = false;
       filterItem.value.forEach(filteredValue => {
@@ -1587,11 +1795,11 @@ const doesNotHaveAnyOf = {
     if (!filterItem.field || !filterItem.value || !Array.isArray(filterItem.value) || filterItem.value.length === 0) {
       return null;
     }
-    return params => {
-      const cellValues = Array.isArray(params.value) ? params.value : [params.value];
+    return value => {
+      const cellValues = Array.isArray(value) ? value : [value];
 
       // Return true only if none of the filter values are in the cell values
-      return filterItem.value.every(filterVal => !cellValues.map(value => String(value)).includes(filterVal));
+      return filterItem.value.every(filterVal => !cellValues.map(val => String(val)).includes(filterVal));
     };
   },
   InputComponent: GridFilterInputMultipleValue
@@ -1608,11 +1816,11 @@ const endsWithAnyOfOperator = {
     if (!filterItem.field || !filterItem.value || !filterItem.operator) {
       return null;
     }
-    return params => {
+    return value => {
       if (filterItem.value.length === 0) {
         return true;
       }
-      const paramValues = Array.isArray(params.value) ? params.value : [params.value];
+      const paramValues = Array.isArray(value) ? value : [value];
       let match = false;
       filterItem.value.forEach(filteredValue => {
         paramValues.forEach(paramValue => {
@@ -1635,11 +1843,11 @@ const isAnyOfOperator = {
     if (!filterItem.field || !filterItem.value || !filterItem.operator) {
       return null;
     }
-    return params => {
+    return value => {
       if (filterItem.value.length === 0) {
         return true;
       }
-      const paramValues = Array.isArray(params.value) ? params.value : [params.value];
+      const paramValues = Array.isArray(value) ? value : [value];
       for (const paramValue of paramValues) {
         if (filterItem.value.includes(String(paramValue))) {
           return true;
@@ -1663,11 +1871,11 @@ const isAnyOfIOperator = {
       return null;
     }
     const lowerCaseFilterValues = filterItem.value.map(v => String(v).toLowerCase());
-    return params => {
+    return value => {
       if (filterItem.value.length === 0) {
         return true;
       }
-      const paramValues = Array.isArray(params.value) ? params.value : [params.value];
+      const paramValues = Array.isArray(value) ? value : [value];
       for (const paramValue of paramValues) {
         if (lowerCaseFilterValues.includes(String(paramValue).toLowerCase())) {
           return true;
@@ -1690,13 +1898,13 @@ const hasAnyOfOperator = {
     if (!filterItem.field || !filterItem.value || !filterItem.operator) {
       return null;
     }
-    return params => {
+    return value => {
       if (filterItem.value.length === 0) {
         return true;
       }
-      const cellValues = Array.isArray(params.value) ? params.value : [params.value];
+      const cellValues = Array.isArray(value) ? value : [value];
       const filterItemValues = Array.isArray(filterItem.value) ? filterItem.value : [filterItem.value];
-      return filterItemValues.some(v => cellValues.map(value => String(value)).includes(v));
+      return filterItemValues.some(v => cellValues.map(val => String(val)).includes(v));
     };
   },
   InputComponent: GridFilterInputMultipleValue
@@ -1713,11 +1921,11 @@ const isNotAnyOfOperator = {
     if (!filterItem.field || !filterItem.value || !filterItem.operator) {
       return null;
     }
-    return params => {
+    return value => {
       if (filterItem.value.length === 0) {
         return true;
       }
-      const paramValues = Array.isArray(params.value) ? params.value : [params.value];
+      const paramValues = Array.isArray(value) ? value : [value];
       for (const paramValue of paramValues) {
         if (filterItem.value.includes(String(paramValue))) {
           return false;
@@ -1740,11 +1948,11 @@ const startsWithAnyOfOperator = {
     if (!filterItem.field || !filterItem.value || !filterItem.operator) {
       return null;
     }
-    return params => {
+    return value => {
       if (filterItem.value.length === 0) {
         return true;
       }
-      const paramValues = Array.isArray(params.value) ? params.value : [params.value];
+      const paramValues = Array.isArray(value) ? value : [value];
       let match = false;
       filterItem.value.forEach(filteredValue => {
         paramValues.forEach(paramValue => {
@@ -2247,16 +2455,11 @@ const isValueValid = (value, field, columns, operator) => {
   }
   const type = (_column$type = column['type']) !== null && _column$type !== void 0 ? _column$type : 'string';
 
-  // Only date and rating fail with 500s, other set themselves as undefined
-  if (type !== 'date' && type !== 'rating') {
+  // Only date fail with 500s, other set themselves as undefined
+  if (type !== 'date') {
     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
@@ -2926,6 +3129,25 @@ const useTableStates = (id, version) => {
   };
 };
 
+/**
+ * Deep comparison for objects to maintain stable references.
+ * MUI DataGrid v8 resets pagination when it detects filter/sort model changes.
+ * We need to ensure stable references when values are the same.
+ */
+const isDeepEqual = (a, b) => {
+  if (a === b) return true;
+  if (a == null || b == null) return a === b;
+  if (typeof a !== 'object' || typeof b !== 'object') return a === b;
+  const aKeys = Object.keys(a);
+  const bKeys = Object.keys(b);
+  if (aKeys.length !== bKeys.length) return false;
+  for (const key of aKeys) {
+    if (!isDeepEqual(a[key], b[key])) {
+      return false;
+    }
+  }
+  return true;
+};
 const useStatefulTable = props => {
   const {
     // density = 'standard',
@@ -2976,13 +3198,7 @@ const useStatefulTable = props => {
       [field]: newWidth
     }));
   }, [dimensionModel, setDimensionModel]);
-  const {
-    filterModel: filterParsed,
-    sortModel: sortModelParsed,
-    paginationModel: paginationModelParsed,
-    columnVisibilityModel: visibilityModel,
-    pinnedColumnsModel
-  } = getModelsParsedOrUpdateLocalStorage(search || '', localStorageVersion, propsColumns, historyReplace, initialState, {
+  const parsedModels = getModelsParsedOrUpdateLocalStorage(search || '', localStorageVersion, propsColumns, historyReplace, initialState, {
     localStorageFilters,
     setLocalStorageFilters,
     localStorageSorting: sortModel,
@@ -2994,6 +3210,39 @@ const useStatefulTable = props => {
     localStoragePinnedColumns: pinnedColumns,
     setLocalStoragePinnedColumns: setPinnedColumns
   });
+
+  // MUI DataGrid v8 auto-resets pagination when filter/sort models change.
+  // We use refs with deep comparison to maintain stable references when values are equal.
+  // This prevents false "change" detections that would reset pagination.
+  const filterModelRef = useRef(parsedModels.filterModel);
+  const sortModelRef = useRef(parsedModels.sortModel);
+  const paginationModelRef = useRef(parsedModels.paginationModel);
+  const columnVisibilityModelRef = useRef(parsedModels.columnVisibilityModel);
+  const pinnedColumnsModelRef = useRef(parsedModels.pinnedColumnsModel);
+
+  // Only update refs if values actually changed (deep comparison)
+  if (!isDeepEqual(filterModelRef.current, parsedModels.filterModel)) {
+    filterModelRef.current = parsedModels.filterModel;
+  }
+  if (!isDeepEqual(sortModelRef.current, parsedModels.sortModel)) {
+    sortModelRef.current = parsedModels.sortModel;
+  }
+  if (!isDeepEqual(paginationModelRef.current, parsedModels.paginationModel)) {
+    paginationModelRef.current = parsedModels.paginationModel;
+  }
+  if (!isDeepEqual(columnVisibilityModelRef.current, parsedModels.columnVisibilityModel)) {
+    columnVisibilityModelRef.current = parsedModels.columnVisibilityModel;
+  }
+  if (!isDeepEqual(pinnedColumnsModelRef.current, parsedModels.pinnedColumnsModel)) {
+    pinnedColumnsModelRef.current = parsedModels.pinnedColumnsModel;
+  }
+
+  // Use the stable references
+  const filterParsed = filterModelRef.current;
+  const sortModelParsed = sortModelRef.current;
+  const paginationModelParsed = paginationModelRef.current;
+  const visibilityModel = columnVisibilityModelRef.current;
+  const pinnedColumnsModel = pinnedColumnsModelRef.current;
   const columns = useMemo(() => propsColumns.map(column => {
     column.width = dimensionModel[column.field] || column.width || 100;
     return column;
@@ -3001,70 +3250,81 @@ const useStatefulTable = props => {
   if (apiRef.current) {
     /** Add resetPage method to apiRef. */
     apiRef.current.resetPage = () => {
-      apiRef.current.setPage(0);
+      var _apiRef$current;
+      (_apiRef$current = apiRef.current) === null || _apiRef$current === void 0 ? void 0 : _apiRef$current.setPage(0);
     };
   }
   return {
     apiRef,
     columns,
     onFilterModelChange: (model, details) => {
+      var _apiRef$current$state, _apiRef$current3;
       const filterModel = _objectSpread2(_objectSpread2({}, model), {}, {
         items: model.items.map(item => {
-          const column = apiRef.current.getColumn(item.field);
-          item.type = column.type || 'string';
+          var _apiRef$current2;
+          const column = (_apiRef$current2 = apiRef.current) === null || _apiRef$current2 === void 0 ? void 0 : _apiRef$current2.getColumn(item.field);
+          item.type = (column === null || column === void 0 ? void 0 : column.type) || 'string';
           return item;
         }),
         quickFilterValues: model.quickFilterValues || []
       });
-      propsOnFilterModelChange === null || propsOnFilterModelChange === void 0 ? void 0 : propsOnFilterModelChange(filterModel, details);
+      // Update URL first to ensure the search string is updated before any re-render
       updateUrl({
         filterModel: filterModel,
         sortModel: sortModelParsed,
         paginationModel: paginationModelParsed,
-        columnsModel: apiRef.current.state.columns.columnVisibilityModel,
+        columnsModel: (_apiRef$current$state = (_apiRef$current3 = apiRef.current) === null || _apiRef$current3 === void 0 ? void 0 : _apiRef$current3.state.columns.columnVisibilityModel) !== null && _apiRef$current$state !== void 0 ? _apiRef$current$state : {},
         pinnedColumnsModel: pinnedColumnsModel
       }, search, localStorageVersion, historyReplace, columns);
+      propsOnFilterModelChange === null || propsOnFilterModelChange === void 0 ? void 0 : propsOnFilterModelChange(filterModel, details);
     },
     filterModel: filterParsed,
     onSortModelChange: (model, details) => {
-      propsOnSortModelChange === null || propsOnSortModelChange === void 0 ? void 0 : propsOnSortModelChange(model, details);
+      var _apiRef$current$state2, _apiRef$current4;
+      // Update URL first to ensure the search string is updated before any re-render
       updateUrl({
         filterModel: filterParsed,
         sortModel: model,
         paginationModel: paginationModelParsed,
-        columnsModel: apiRef.current.state.columns.columnVisibilityModel,
+        columnsModel: (_apiRef$current$state2 = (_apiRef$current4 = apiRef.current) === null || _apiRef$current4 === void 0 ? void 0 : _apiRef$current4.state.columns.columnVisibilityModel) !== null && _apiRef$current$state2 !== void 0 ? _apiRef$current$state2 : {},
         pinnedColumnsModel: pinnedColumnsModel
       }, search, localStorageVersion, historyReplace, columns);
+      propsOnSortModelChange === null || propsOnSortModelChange === void 0 ? void 0 : propsOnSortModelChange(model, details);
     },
     sortModel: sortModelParsed,
     onPinnedColumnsChange: (pinnedColumns, details) => {
-      propsOnPinnedColumnsChange === null || propsOnPinnedColumnsChange === void 0 ? void 0 : propsOnPinnedColumnsChange(pinnedColumns, details);
+      var _apiRef$current$state3, _apiRef$current5;
+      // Update URL first to ensure the search string is updated before any re-render
       updateUrl({
         filterModel: filterParsed,
         sortModel: sortModelParsed,
         paginationModel: paginationModelParsed,
-        columnsModel: apiRef.current.state.columns.columnVisibilityModel,
+        columnsModel: (_apiRef$current$state3 = (_apiRef$current5 = apiRef.current) === null || _apiRef$current5 === void 0 ? void 0 : _apiRef$current5.state.columns.columnVisibilityModel) !== null && _apiRef$current$state3 !== void 0 ? _apiRef$current$state3 : {},
         pinnedColumnsModel: pinnedColumns
       }, search, localStorageVersion, historyReplace, columns);
+      propsOnPinnedColumnsChange === null || propsOnPinnedColumnsChange === void 0 ? void 0 : propsOnPinnedColumnsChange(pinnedColumns, details);
     },
     pinnedColumns: pinnedColumnsModel,
     paginationModel: paginationModelParsed,
     onPaginationModelChange: (model, details) => {
+      var _apiRef$current$state4, _apiRef$current6;
       const paginationModel = _objectSpread2(_objectSpread2({}, model), {}, {
         direction: paginationModelParsed.page < model.page ? 'next' : 'back'
       });
-      propsOnPaginationModelChange === null || propsOnPaginationModelChange === void 0 ? void 0 : propsOnPaginationModelChange(paginationModel, details);
+      // Update URL first to ensure the search string is updated before any re-render
+      // This prevents MUI DataGrid v8 from resetting pagination on re-render
       updateUrl({
         filterModel: filterParsed,
         sortModel: sortModelParsed,
         paginationModel: paginationModel,
-        columnsModel: apiRef.current.state.columns.columnVisibilityModel,
+        columnsModel: (_apiRef$current$state4 = (_apiRef$current6 = apiRef.current) === null || _apiRef$current6 === void 0 ? void 0 : _apiRef$current6.state.columns.columnVisibilityModel) !== null && _apiRef$current$state4 !== void 0 ? _apiRef$current$state4 : {},
         pinnedColumnsModel: pinnedColumnsModel
       }, search, localStorageVersion, historyReplace, columns);
+      propsOnPaginationModelChange === null || propsOnPaginationModelChange === void 0 ? void 0 : propsOnPaginationModelChange(paginationModel, details);
     },
     columnVisibilityModel: visibilityModel,
     onColumnVisibilityModelChange: (columnsVisibilityModel, details) => {
-      propsOnColumnVisibilityModelChange === null || propsOnColumnVisibilityModelChange === void 0 ? void 0 : propsOnColumnVisibilityModelChange(columnsVisibilityModel, details);
+      // Update URL first to ensure the search string is updated before any re-render
       updateUrl({
         filterModel: filterParsed,
         sortModel: sortModelParsed,
@@ -3072,6 +3332,7 @@ const useStatefulTable = props => {
         columnsModel: columnsVisibilityModel,
         pinnedColumnsModel: pinnedColumnsModel
       }, search, localStorageVersion, historyReplace, columns);
+      propsOnColumnVisibilityModelChange === null || propsOnColumnVisibilityModelChange === void 0 ? void 0 : propsOnColumnVisibilityModelChange(columnsVisibilityModel, details);
     },
     onColumnWidthChange: (params, event, details) => {
       propsOnColumnWidthChange === null || propsOnColumnWidthChange === void 0 ? void 0 : propsOnColumnWidthChange(params, event, details);
@@ -3119,7 +3380,7 @@ const StatefulDataGrid = /*#__PURE__*/forwardRef((props, ref) => {
       paginationPlacement = 'both',
       paginationProps,
       rows,
-      pageSizeOptions,
+      pageSizeOptions = [5, 10, 25, 50],
       sx,
       theme: propsTheme,
       useRouter,
@@ -3179,9 +3440,9 @@ const StatefulDataGrid = /*#__PURE__*/forwardRef((props, ref) => {
     localStorageVersion,
     previousLocalStorageVersions
   });
-  const [rowSelectionModel, setRowSelectionModel] = useState(propsRowSelectionModel !== null && propsRowSelectionModel !== void 0 ? propsRowSelectionModel : []);
+  const [rowSelectionModel, setRowSelectionModel] = useState(propsRowSelectionModel !== null && propsRowSelectionModel !== void 0 ? propsRowSelectionModel : EMPTY_ROW_SELECTION_MODEL);
   useEffect(() => {
-    setRowSelectionModel(propsRowSelectionModel !== null && propsRowSelectionModel !== void 0 ? propsRowSelectionModel : []);
+    setRowSelectionModel(propsRowSelectionModel !== null && propsRowSelectionModel !== void 0 ? propsRowSelectionModel : EMPTY_ROW_SELECTION_MODEL);
   }, [propsRowSelectionModel]);
   const onRowSelectionModelChange = (selectionModel, details) => {
     if (propsOnRowSelectionModelChange) {
@@ -3198,11 +3459,18 @@ 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');
+
   // in server-side pagination we want to update the selection status
   // every time we navigate between pages, resize our page or select something
   useEffect(() => {
     if (paginationMode == 'server') {
-      onServerSideSelectionStatusChange(Array.isArray(rowSelectionModel) ? rowSelectionModel : [rowSelectionModel], apiRef, selectionStatus, isRowSelectable, paginationModel.page, paginationModel.pageSize);
+      onServerSideSelectionStatusChange(rowSelectionModel, apiRef, selectionStatus, forceSelectionUpdate, isRowSelectable, paginationModel.page, paginationModel.pageSize);
     }
   }, [rowSelectionModel, paginationModel.page, paginationModel.pageSize]);
   if (!Array.isArray(rows)) {
@@ -3230,7 +3498,7 @@ const StatefulDataGrid = /*#__PURE__*/forwardRef((props, ref) => {
     ref: datagridRef,
     className: classNames(StatefulDataGrid.className, className),
     $height: height
-  }, /*#__PURE__*/React__default.createElement(DataGridPro, _extends$1({}, forwardedProps, {
+  }, /*#__PURE__*/React__default.createElement(DataGridPro, _extends({}, forwardedProps, {
     apiRef: apiRef,
     columns: columns,
     columnVisibilityModel: columnVisibilityModel,
@@ -3253,49 +3521,65 @@ const StatefulDataGrid = /*#__PURE__*/forwardRef((props, ref) => {
     rows: rows,
     rowCount: rowCount,
     autoHeight: autoHeight,
-    checkboxSelectionVisibleOnly: Boolean(pagination),
+    checkboxSelectionVisibleOnly: checkboxSelectionVisibleOnly,
+    showToolbar: !hideToolbar,
     slots: _objectSpread2(_objectSpread2({
       baseButton: BaseButton,
+      baseIconButton: BaseIconButton,
       baseCheckbox: BaseCheckbox,
-      // baseTextField,
-      basePopper: BasePopper,
-      columnFilteredIcon: props => /*#__PURE__*/React__default.createElement(BaseIcon, _extends$1({}, props, {
-        displayName: "ColumnFilteredIcon"
+      columnFilteredIcon: props => /*#__PURE__*/React__default.createElement(BaseIcon, _extends({}, props, {
+        displayName: "columnFilteredIcon"
       })),
-      columnSelectorIcon: props => /*#__PURE__*/React__default.createElement(BaseIcon, _extends$1({}, props, {
-        displayName: "ColumnSelectorIcon"
+      columnSelectorIcon: props => /*#__PURE__*/React__default.createElement(BaseIcon, _extends({}, props, {
+        displayName: "columnSelectorIcon"
       })),
-      columnSortedAscendingIcon: props => /*#__PURE__*/React__default.createElement(BaseIcon, _extends$1({}, props, {
-        displayName: "ColumnSortedAscendingIcon"
+      columnSortedAscendingIcon: props => /*#__PURE__*/React__default.createElement(BaseIcon, _extends({}, props, {
+        displayName: "columnSortedAscendingIcon"
       })),
-      columnSortedDescendingIcon: props => /*#__PURE__*/React__default.createElement(BaseIcon, _extends$1({}, props, {
-        displayName: "ColumnSortedDescendingIcon"
+      columnSortedDescendingIcon: props => /*#__PURE__*/React__default.createElement(BaseIcon, _extends({}, props, {
+        displayName: "columnSortedDescendingIcon"
       })),
-      densityCompactIcon: props => /*#__PURE__*/React__default.createElement(BaseIcon, _extends$1({}, props, {
-        displayName: "DensityCompactIcon"
+      densityCompactIcon: props => /*#__PURE__*/React__default.createElement(BaseIcon, _extends({}, props, {
+        displayName: "densityCompactIcon"
       })),
-      densityStandardIcon: props => /*#__PURE__*/React__default.createElement(BaseIcon, _extends$1({}, props, {
-        displayName: "DensityStandardIcon"
+      densityStandardIcon: props => /*#__PURE__*/React__default.createElement(BaseIcon, _extends({}, props, {
+        displayName: "densityStandardIcon"
       })),
-      densityComfortableIcon: props => /*#__PURE__*/React__default.createElement(BaseIcon, _extends$1({}, props, {
-        displayName: "DensityComfortableIcon"
+      densityComfortableIcon: props => /*#__PURE__*/React__default.createElement(BaseIcon, _extends({}, props, {
+        displayName: "densityComfortableIcon"
       })),
-      detailPanelCollapseIcon: props => /*#__PURE__*/React__default.createElement(BaseIcon, _extends$1({}, props, {
-        displayName: "DetailPanelCollapseIcon"
+      detailPanelCollapseIcon: props => /*#__PURE__*/React__default.createElement(BaseIcon, _extends({}, props, {
+        displayName: "detailPanelCollapseIcon"
       })),
-      detailPanelExpandIcon: props => /*#__PURE__*/React__default.createElement(BaseIcon, _extends$1({}, props, {
-        displayName: "DetailPanelExpandIcon"
+      detailPanelExpandIcon: props => /*#__PURE__*/React__default.createElement(BaseIcon, _extends({}, props, {
+        displayName: "detailPanelExpandIcon"
       })),
-      exportIcon: props => /*#__PURE__*/React__default.createElement(BaseIcon, _extends$1({}, props, {
-        displayName: "ExportIcon"
+      exportIcon: props => /*#__PURE__*/React__default.createElement(BaseIcon, _extends({}, props, {
+        displayName: "exportIcon"
       })),
-      openFilterButtonIcon: props => /*#__PURE__*/React__default.createElement(BaseIcon, _extends$1({
-        displayName: "OpenFilterButtonIcon"
-      }, props))
+      openFilterButtonIcon: props => /*#__PURE__*/React__default.createElement(BaseIcon, _extends({}, props, {
+        displayName: "openFilterButtonIcon"
+      }))
     }, slots), {}, {
-      toolbar: ToolbarWrapper,
+      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
+      })),
       pagination: props => {
-        return pagination ? paginationMode == 'server' ? /*#__PURE__*/React__default.createElement(ServerSideControlledPagination, _extends$1({}, props, {
+        return pagination ? paginationMode == 'server' ? /*#__PURE__*/React__default.createElement(ServerSideControlledPagination, _extends({}, props, {
           displaySelection: false,
           displayRowsPerPage: ['bottom', 'both'].includes(paginationPlacement),
           displayPagination: ['bottom', 'both'].includes(paginationPlacement),
@@ -3304,9 +3588,8 @@ const StatefulDataGrid = /*#__PURE__*/forwardRef((props, ref) => {
           onPaginationModelChange: onPaginationModelChange,
           pageSizeOptions: pageSizeOptions,
           paginationProps: paginationProps,
-          paginationMode: paginationMode,
           rowCount: rowCount
-        })) : /*#__PURE__*/React__default.createElement(ControlledPagination, _extends$1({}, props, {
+        })) : /*#__PURE__*/React__default.createElement(ControlledPagination, _extends({}, props, {
           displaySelection: false,
           displayRowsPerPage: ['bottom', 'both'].includes(paginationPlacement),
           displayPagination: ['bottom', 'both'].includes(paginationPlacement),
@@ -3316,30 +3599,11 @@ const StatefulDataGrid = /*#__PURE__*/forwardRef((props, ref) => {
           paginationModel: paginationModel,
           onPaginationModelChange: onPaginationModelChange,
           pageSizeOptions: pageSizeOptions,
-          paginationProps: paginationProps,
-          paginationMode: paginationMode
+          paginationProps: paginationProps
         })) : null;
       }
     }),
-    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)
-    }),
+    slotProps: _objectSpread2({}, slotProps),
     rowSelectionModel: rowSelectionModel,
     onRowSelectionModelChange: (newSelectionModel, details) => {
       if (pagination && paginationMode != 'server') {
@@ -3371,10 +3635,11 @@ const StatefulDataGrid = /*#__PURE__*/forwardRef((props, ref) => {
           return id;
         }) : gridFilteredSortedRowIdsSelector(apiRef);
         const numberOfSelectableRowsInTable = selectableRowsInTable.length;
-        const numberOfSelectedRows = newSelectionModel.length;
+        const numberOfSelectedRows = getSelectionCount(newSelectionModel);
         if (selectionStatus.current.type === 'table' && numberOfSelectedRows === numberOfSelectableRowsInTable - numberOfSelectableRowsInPage || selectionStatus.current.type === 'table' && numberOfSelectedRows === numberOfSelectableRowsInTable || selectionStatus.current.type === 'page' && numberOfSelectedRows === numberOfSelectableRowsInPage) {
           setTimeout(() => {
-            apiRef.current.selectRows([], true, true);
+            var _apiRef$current;
+            (_apiRef$current = apiRef.current) === null || _apiRef$current === void 0 ? void 0 : _apiRef$current.selectRows([], true, true);
           }, 0);
         }
         if (numberOfSelectedRows === numberOfSelectableRowsInPage && numberOfSelectableRowsInPage < numberOfSelectableRowsInTable) {
@@ -3398,6 +3663,7 @@ const StatefulDataGrid = /*#__PURE__*/forwardRef((props, ref) => {
             numberOfSelectedRows
           };
         }
+        forceSelectionUpdate(v => v + 1);
       }
       onRowSelectionModelChange === null || onRowSelectionModelChange === void 0 ? void 0 : onRowSelectionModelChange(newSelectionModel, details);
     },