@mui/material 6.4.8 → 6.4.10

package/modern/Switch/Switch.js

@@ -14,6 +14,7 @@ import { styled } from "../zero-styled/index.js";
 import memoTheme from "../utils/memoTheme.js";
 import { useDefaultProps } from "../DefaultPropsProvider/index.js";
 import switchClasses, { getSwitchUtilityClass } from "./switchClasses.js";
+import useSlot from "../utils/useSlot.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const useUtilityClasses = ownerState => {
   const {
@@ -212,6 +213,8 @@ const Switch = /*#__PURE__*/React.forwardRef(function Switch(inProps, ref) {
     edge = false,
     size = 'medium',
     sx,
+    slots = {},
+    slotProps = {},
     ...other
   } = props;
   const ownerState = {
@@ -221,14 +224,36 @@ const Switch = /*#__PURE__*/React.forwardRef(function Switch(inProps, ref) {
     size
   };
   const classes = useUtilityClasses(ownerState);
-  const icon = /*#__PURE__*/_jsx(SwitchThumb, {
+  const externalForwardedProps = {
+    slots,
+    slotProps
+  };
+  const [RootSlot, rootSlotProps] = useSlot('root', {
+    className: clsx(classes.root, className),
+    elementType: SwitchRoot,
+    externalForwardedProps,
+    ownerState,
+    additionalProps: {
+      sx
+    }
+  });
+  const [ThumbSlot, thumbSlotProps] = useSlot('thumb', {
     className: classes.thumb,
-    ownerState: ownerState
+    elementType: SwitchThumb,
+    externalForwardedProps,
+    ownerState
   });
-  return /*#__PURE__*/_jsxs(SwitchRoot, {
-    className: clsx(classes.root, className),
-    sx: sx,
-    ownerState: ownerState,
+  const icon = /*#__PURE__*/_jsx(ThumbSlot, {
+    ...thumbSlotProps
+  });
+  const [TrackSlot, trackSlotProps] = useSlot('track', {
+    className: classes.track,
+    elementType: SwitchTrack,
+    externalForwardedProps,
+    ownerState
+  });
+  return /*#__PURE__*/_jsxs(RootSlot, {
+    ...rootSlotProps,
     children: [/*#__PURE__*/_jsx(SwitchSwitchBase, {
       type: "checkbox",
       icon: icon,
@@ -239,10 +264,25 @@ const Switch = /*#__PURE__*/React.forwardRef(function Switch(inProps, ref) {
       classes: {
         ...classes,
         root: classes.switchBase
+      },
+      slots: {
+        ...(slots.switchBase && {
+          root: slots.switchBase
+        }),
+        ...(slots.input && {
+          input: slots.input
+        })
+      },
+      slotProps: {
+        ...(slotProps.switchBase && {
+          root: typeof slotProps.switchBase === 'function' ? slotProps.switchBase(ownerState) : slotProps.switchBase
+        }),
+        ...(slotProps.input && {
+          input: typeof slotProps.input === 'function' ? slotProps.input(ownerState) : slotProps.input
+        })
       }
-    }), /*#__PURE__*/_jsx(SwitchTrack, {
-      className: classes.track,
-      ownerState: ownerState
+    }), /*#__PURE__*/_jsx(TrackSlot, {
+      ...trackSlotProps
     })]
   });
 });
@@ -332,6 +372,28 @@ process.env.NODE_ENV !== "production" ? Switch.propTypes /* remove-proptypes */
    * @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.shape({
+    input: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+    root: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+    switchBase: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+    thumb: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+    track: PropTypes.oneOfType([PropTypes.func, PropTypes.object])
+  }),
+  /**
+   * The components used for each slot inside.
+   * @default {}
+   */
+  slots: PropTypes.shape({
+    input: PropTypes.elementType,
+    root: PropTypes.elementType,
+    switchBase: PropTypes.elementType,
+    thumb: PropTypes.elementType,
+    track: PropTypes.elementType
+  }),
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */

package/modern/Tabs/Tabs.js

@@ -693,6 +693,10 @@ const Tabs = /*#__PURE__*/React.forwardRef(function Tabs(inProps, ref) {
     });
   });
   const handleKeyDown = event => {
+    // Check if a modifier key (Alt, Shift, Ctrl, Meta) is pressed
+    if (event.altKey || event.shiftKey || event.ctrlKey || event.metaKey) {
+      return;
+    }
     const list = tabListRef.current;
     const currentFocus = ownerDocument(list).activeElement;
     // Keyboard navigation assumes that [role="tab"] are siblings

package/modern/TextField/TextField.js

@@ -160,6 +160,25 @@ const TextField = /*#__PURE__*/React.forwardRef(function TextField(inProps, ref)
     }
     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
+    }
+  });
   const [InputSlot, inputProps] = useSlot('input', {
     elementType: InputComponent,
     externalForwardedProps,
@@ -211,17 +230,8 @@ const TextField = /*#__PURE__*/React.forwardRef(function TextField(inProps, ref)
     },
     ...inputProps
   });
-  return /*#__PURE__*/_jsxs(TextFieldRoot, {
-    className: clsx(classes.root, className),
-    disabled: disabled,
-    error: error,
-    fullWidth: fullWidth,
-    ref: ref,
-    required: required,
-    color: color,
-    variant: variant,
-    ownerState: ownerState,
-    ...other,
+  return /*#__PURE__*/_jsxs(RootSlot, {
+    ...rootProps,
     children: [label != null && label !== '' && /*#__PURE__*/_jsx(InputLabelSlot, {
       htmlFor: id,
       id: inputLabelId,
@@ -423,6 +433,7 @@ process.env.NODE_ENV !== "production" ? TextField.propTypes /* remove-proptypes
     htmlInput: PropTypes.elementType,
     input: PropTypes.elementType,
     inputLabel: PropTypes.elementType,
+    root: PropTypes.elementType,
     select: PropTypes.elementType
   }),
   /**

package/modern/TextareaAutosize/TextareaAutosize.js

@@ -37,11 +37,11 @@ function isEmpty(obj) {
  *
  * Demos:
  *
- * - [Textarea Autosize](https://mui.com/material-ui/react-textarea-autosize/)
+ * - [Textarea Autosize](https://v6.mui.com/material-ui/react-textarea-autosize/)
  *
  * API:
  *
- * - [TextareaAutosize API](https://mui.com/material-ui/api/textarea-autosize/)
+ * - [TextareaAutosize API](https://v6.mui.com/material-ui/api/textarea-autosize/)
  */
 const TextareaAutosize = /*#__PURE__*/React.forwardRef(function TextareaAutosize(props, forwardedRef) {
   const {

package/modern/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/material v6.4.8
+ * @mui/material v6.4.10
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/modern/styles/createThemeNoVars.js

@@ -25,9 +25,7 @@ function createThemeNoVars(options = {}, ...args) {
   // The error should throw only for the root theme creation because user is not allowed to use a custom node `vars`.
   // `generateThemeVars` is the closest identifier for checking that the `options` is a result of `createTheme` with CSS variables so that user can create new theme for nested ThemeProvider.
   options.generateThemeVars === undefined) {
-    throw new Error(process.env.NODE_ENV !== "production" ? 'MUI: `vars` is a private field used for CSS variables support.\n' +
-    // #host-reference
-    'Please use another name or follow the [docs](https://mui.com/material-ui/customization/css-theme-variables/usage/) to enable the feature.' : _formatMuiErrorMessage(20));
+    throw new Error(process.env.NODE_ENV !== "production" ? 'MUI: `vars` is a private field used for CSS variables support.\n' + 'Please use another name or follow the [docs](https://mui.com/material-ui/customization/css-theme-variables/usage/) to enable the feature.' : _formatMuiErrorMessage(20));
   }
   const palette = createPalette(paletteInput);
   const systemTheme = systemCreateTheme(options);

package/modern/useAutocomplete/useAutocomplete.js

@@ -121,8 +121,8 @@ function useAutocomplete(props) {
   const highlightedIndexRef = React.useRef(defaultHighlighted);
 
   // Calculate the initial inputValue on mount only.
-  // Using useRef since defaultValue doesn't need to update inputValue dynamically.
-  const initialInputValue = React.useRef(getInputValue(defaultValue, multiple, getOptionLabel)).current;
+  // useRef ensures it doesn't update dynamically with defaultValue or value props.
+  const initialInputValue = React.useRef(getInputValue(defaultValue ?? valueProp, multiple, getOptionLabel)).current;
   const [value, setValueState] = useControlled({
     controlled: valueProp,
     default: defaultValue,
@@ -238,7 +238,7 @@ function useAutocomplete(props) {
   const setHighlightedIndex = useEventCallback(({
     event,
     index,
-    reason = 'auto'
+    reason
   }) => {
     highlightedIndexRef.current = index;
 
@@ -248,7 +248,7 @@ function useAutocomplete(props) {
     } else {
       inputRef.current.setAttribute('aria-activedescendant', `${id}-option-${index}`);
     }
-    if (onHighlightChange) {
+    if (onHighlightChange && ['mouse', 'keyboard', 'touch'].includes(reason)) {
       onHighlightChange(event, index === -1 ? null : filteredOptions[index], reason);
     }
     if (!listboxRef.current) {
@@ -301,7 +301,7 @@ function useAutocomplete(props) {
     event,
     diff,
     direction = 'next',
-    reason = 'auto'
+    reason
   }) => {
     if (!popupOpen) {
       return;

package/modern/version/index.js

@@ -1,6 +1,6 @@
-export const version = "6.4.8";
+export const version = "6.4.10";
 export const major = Number("6");
 export const minor = Number("4");
-export const patch = Number("8");
+export const patch = Number("10");
 export const prerelease = undefined;
 export default version;

package/node/Autocomplete/Autocomplete.js

@@ -1049,7 +1049,7 @@ process.env.NODE_ENV !== "production" ? Autocomplete.propTypes /* remove-proptyp
    *
    * @param {React.SyntheticEvent} event The event source of the callback.
    * @param {Value} option The highlighted option.
-   * @param {string} reason Can be: `"keyboard"`, `"auto"`, `"mouse"`, `"touch"`.
+   * @param {string} reason Can be: `"keyboard"`, `"mouse"`, `"touch"`.
    */
   onHighlightChange: _propTypes.default.func,
   /**

package/node/ClickAwayListener/ClickAwayListener.js

@@ -24,12 +24,12 @@ function clickedRootScrollbar(event, doc) {
  *
  * Demos:
  *
- * - [Click-Away Listener](https://mui.com/material-ui/react-click-away-listener/)
- * - [Menu](https://mui.com/material-ui/react-menu/)
+ * - [Click-Away Listener](https://v6.mui.com/material-ui/react-click-away-listener/)
+ * - [Menu](https://v6.mui.com/material-ui/react-menu/)
  *
  * API:
  *
- * - [ClickAwayListener API](https://mui.com/material-ui/api/click-away-listener/)
+ * - [ClickAwayListener API](https://v6.mui.com/material-ui/api/click-away-listener/)
  */
 function ClickAwayListener(props) {
   const {

package/node/Grid2/Grid2.js

@@ -16,11 +16,11 @@ var _useTheme = _interopRequireDefault(require("../styles/useTheme"));
  *
  * Demos:
  *
- * - [Grid version 2](https://mui.com/material-ui/react-grid2/)
+ * - [Grid version 2](https://v6.mui.com/material-ui/react-grid2/)
  *
  * API:
  *
- * - [Grid2 API](https://mui.com/material-ui/api/grid-2/)
+ * - [Grid2 API](https://v6.mui.com/material-ui/api/grid-2/)
  */
 const Grid2 = (0, _Grid.createGrid)({
   createStyledComponent: (0, _styles.styled)('div', {

package/node/NoSsr/NoSsr.js

@@ -22,11 +22,11 @@ var _utils = require("@mui/utils");
  *
  * Demos:
  *
- * - [No SSR](https://mui.com/material-ui/react-no-ssr/)
+ * - [No SSR](https://v6.mui.com/material-ui/react-no-ssr/)
  *
  * API:
  *
- * - [NoSsr API](https://mui.com/material-ui/api/no-ssr/)
+ * - [NoSsr API](https://v6.mui.com/material-ui/api/no-ssr/)
  */
 function NoSsr(props) {
   const {

package/node/PigmentContainer/PigmentContainer.js

@@ -32,11 +32,11 @@ const useUtilityClasses = ownerState => {
  *
  * Demos:
  *
- * - [Container](https://mui.com/material-ui/react-container/)
+ * - [Container](https://v6.mui.com/material-ui/react-container/)
  *
  * API:
  *
- * - [PigmentContainer API](https://mui.com/material-ui/api/pigment-container/)
+ * - [PigmentContainer API](https://v6.mui.com/material-ui/api/pigment-container/)
  */
 const PigmentContainer = /*#__PURE__*/React.forwardRef(function PigmentContainer({
   className,

package/node/PigmentGrid/PigmentGrid.js

@@ -46,11 +46,11 @@ const useUtilityClasses = ownerState => {
  *
  * Demos:
  *
- * - [Grid version 2](https://mui.com/material-ui/react-grid2/)
+ * - [Grid version 2](https://v6.mui.com/material-ui/react-grid2/)
  *
  * API:
  *
- * - [PigmentGrid API](https://mui.com/material-ui/api/pigment-grid/)
+ * - [PigmentGrid API](https://v6.mui.com/material-ui/api/pigment-grid/)
  */
 const PigmentGrid = /*#__PURE__*/React.forwardRef(function PigmentGrid(props, ref) {
   const {

package/node/PigmentHidden/PigmentHidden.js

@@ -179,11 +179,11 @@ process.env.NODE_ENV !== "production" ? HiddenCss.propTypes /* remove-proptypes
  *
  * Demos:
  *
- * - [Hidden](https://mui.com/material-ui/react-hidden/)
+ * - [Hidden](https://v6.mui.com/material-ui/react-hidden/)
  *
  * API:
  *
- * - [PigmentHidden API](https://mui.com/material-ui/api/pigment-hidden/)
+ * - [PigmentHidden API](https://v6.mui.com/material-ui/api/pigment-hidden/)
  */
 function PigmentHidden({
   implementation = 'js',

package/node/PigmentStack/PigmentStack.js

@@ -25,11 +25,11 @@ const useUtilityClasses = () => {
  *
  * Demos:
  *
- * - [Stack](https://mui.com/material-ui/react-stack/)
+ * - [Stack](https://v6.mui.com/material-ui/react-stack/)
  *
  * API:
  *
- * - [PigmentStack API](https://mui.com/material-ui/api/pigment-stack/)
+ * - [PigmentStack API](https://v6.mui.com/material-ui/api/pigment-stack/)
  */
 const PigmentStack = /*#__PURE__*/React.forwardRef(function PigmentStack({
   className,

package/node/Popover/Popover.js

@@ -285,7 +285,7 @@ const Popover = /*#__PURE__*/React.forwardRef(function Popover(inProps, ref) {
     const handleResize = (0, _debounce.default)(() => {
       setPositioningStyles();
     });
-    const containerWindow = (0, _ownerWindow.default)(anchorEl);
+    const containerWindow = (0, _ownerWindow.default)(resolveAnchorEl(anchorEl));
     containerWindow.addEventListener('resize', handleResize);
     return () => {
       handleResize.clear();

package/node/Popper/Popper.js

@@ -26,13 +26,13 @@ const PopperRoot = (0, _zeroStyled.styled)(_BasePopper.default, {
  *
  * Demos:
  *
- * - [Autocomplete](https://mui.com/material-ui/react-autocomplete/)
- * - [Menu](https://mui.com/material-ui/react-menu/)
- * - [Popper](https://mui.com/material-ui/react-popper/)
+ * - [Autocomplete](https://v6.mui.com/material-ui/react-autocomplete/)
+ * - [Menu](https://v6.mui.com/material-ui/react-menu/)
+ * - [Popper](https://v6.mui.com/material-ui/react-popper/)
  *
  * API:
  *
- * - [Popper API](https://mui.com/material-ui/api/popper/)
+ * - [Popper API](https://v6.mui.com/material-ui/api/popper/)
  */
 const Popper = /*#__PURE__*/React.forwardRef(function Popper(inProps, ref) {
   const isRtl = (0, _RtlProvider.useRtl)();

package/node/Portal/Portal.js

@@ -21,11 +21,11 @@ function getContainer(container) {
  *
  * Demos:
  *
- * - [Portal](https://mui.com/material-ui/react-portal/)
+ * - [Portal](https://v6.mui.com/material-ui/react-portal/)
  *
  * API:
  *
- * - [Portal API](https://mui.com/material-ui/api/portal/)
+ * - [Portal API](https://v6.mui.com/material-ui/api/portal/)
  */
 const Portal = /*#__PURE__*/React.forwardRef(function Portal(props, forwardedRef) {
   const {

package/node/StepLabel/StepLabel.js

@@ -169,6 +169,16 @@ const StepLabel = /*#__PURE__*/React.forwardRef(function StepLabel(inProps, ref)
       ...slotProps
     }
   };
+  const [RootSlot, rootProps] = (0, _useSlot.default)('root', {
+    elementType: StepLabelRoot,
+    externalForwardedProps: {
+      ...externalForwardedProps,
+      ...other
+    },
+    ownerState,
+    ref,
+    className: (0, _clsx.default)(classes.root, className)
+  });
   const [LabelSlot, labelProps] = (0, _useSlot.default)('label', {
     elementType: StepLabelLabel,
     externalForwardedProps,
@@ -179,11 +189,8 @@ const StepLabel = /*#__PURE__*/React.forwardRef(function StepLabel(inProps, ref)
     externalForwardedProps,
     ownerState
   });
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(StepLabelRoot, {
-    className: (0, _clsx.default)(classes.root, className),
-    ref: ref,
-    ownerState: ownerState,
-    ...other,
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(RootSlot, {
+    ...rootProps,
     children: [icon || StepIconSlot ? /*#__PURE__*/(0, _jsxRuntime.jsx)(StepLabelIconContainer, {
       className: classes.iconContainer,
       ownerState: ownerState,
@@ -249,6 +256,7 @@ process.env.NODE_ENV !== "production" ? StepLabel.propTypes /* remove-proptypes
    */
   slotProps: _propTypes.default.shape({
     label: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object]),
+    root: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object]),
     stepIcon: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object])
   }),
   /**
@@ -257,6 +265,7 @@ process.env.NODE_ENV !== "production" ? StepLabel.propTypes /* remove-proptypes
    */
   slots: _propTypes.default.shape({
     label: _propTypes.default.elementType,
+    root: _propTypes.default.elementType,
     stepIcon: _propTypes.default.elementType
   }),
   /**

package/node/Switch/Switch.js

@@ -21,6 +21,7 @@ var _zeroStyled = require("../zero-styled");
 var _memoTheme = _interopRequireDefault(require("../utils/memoTheme"));
 var _DefaultPropsProvider = require("../DefaultPropsProvider");
 var _switchClasses = _interopRequireWildcard(require("./switchClasses"));
+var _useSlot = _interopRequireDefault(require("../utils/useSlot"));
 var _jsxRuntime = require("react/jsx-runtime");
 const useUtilityClasses = ownerState => {
   const {
@@ -219,6 +220,8 @@ const Switch = /*#__PURE__*/React.forwardRef(function Switch(inProps, ref) {
     edge = false,
     size = 'medium',
     sx,
+    slots = {},
+    slotProps = {},
     ...other
   } = props;
   const ownerState = {
@@ -228,14 +231,36 @@ const Switch = /*#__PURE__*/React.forwardRef(function Switch(inProps, ref) {
     size
   };
   const classes = useUtilityClasses(ownerState);
-  const icon = /*#__PURE__*/(0, _jsxRuntime.jsx)(SwitchThumb, {
+  const externalForwardedProps = {
+    slots,
+    slotProps
+  };
+  const [RootSlot, rootSlotProps] = (0, _useSlot.default)('root', {
+    className: (0, _clsx.default)(classes.root, className),
+    elementType: SwitchRoot,
+    externalForwardedProps,
+    ownerState,
+    additionalProps: {
+      sx
+    }
+  });
+  const [ThumbSlot, thumbSlotProps] = (0, _useSlot.default)('thumb', {
     className: classes.thumb,
-    ownerState: ownerState
+    elementType: SwitchThumb,
+    externalForwardedProps,
+    ownerState
   });
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(SwitchRoot, {
-    className: (0, _clsx.default)(classes.root, className),
-    sx: sx,
-    ownerState: ownerState,
+  const icon = /*#__PURE__*/(0, _jsxRuntime.jsx)(ThumbSlot, {
+    ...thumbSlotProps
+  });
+  const [TrackSlot, trackSlotProps] = (0, _useSlot.default)('track', {
+    className: classes.track,
+    elementType: SwitchTrack,
+    externalForwardedProps,
+    ownerState
+  });
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(RootSlot, {
+    ...rootSlotProps,
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(SwitchSwitchBase, {
       type: "checkbox",
       icon: icon,
@@ -246,10 +271,25 @@ const Switch = /*#__PURE__*/React.forwardRef(function Switch(inProps, ref) {
       classes: {
         ...classes,
         root: classes.switchBase
+      },
+      slots: {
+        ...(slots.switchBase && {
+          root: slots.switchBase
+        }),
+        ...(slots.input && {
+          input: slots.input
+        })
+      },
+      slotProps: {
+        ...(slotProps.switchBase && {
+          root: typeof slotProps.switchBase === 'function' ? slotProps.switchBase(ownerState) : slotProps.switchBase
+        }),
+        ...(slotProps.input && {
+          input: typeof slotProps.input === 'function' ? slotProps.input(ownerState) : slotProps.input
+        })
       }
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(SwitchTrack, {
-      className: classes.track,
-      ownerState: ownerState
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(TrackSlot, {
+      ...trackSlotProps
     })]
   });
 });
@@ -339,6 +379,28 @@ process.env.NODE_ENV !== "production" ? Switch.propTypes /* remove-proptypes */
    * @default 'medium'
    */
   size: _propTypes.default /* @typescript-to-proptypes-ignore */.oneOfType([_propTypes.default.oneOf(['medium', 'small']), _propTypes.default.string]),
+  /**
+   * The props used for each slot inside.
+   * @default {}
+   */
+  slotProps: _propTypes.default.shape({
+    input: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object]),
+    root: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object]),
+    switchBase: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object]),
+    thumb: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object]),
+    track: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object])
+  }),
+  /**
+   * The components used for each slot inside.
+   * @default {}
+   */
+  slots: _propTypes.default.shape({
+    input: _propTypes.default.elementType,
+    root: _propTypes.default.elementType,
+    switchBase: _propTypes.default.elementType,
+    thumb: _propTypes.default.elementType,
+    track: _propTypes.default.elementType
+  }),
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */

package/node/Tabs/Tabs.js

@@ -700,6 +700,10 @@ const Tabs = /*#__PURE__*/React.forwardRef(function Tabs(inProps, ref) {
     });
   });
   const handleKeyDown = event => {
+    // Check if a modifier key (Alt, Shift, Ctrl, Meta) is pressed
+    if (event.altKey || event.shiftKey || event.ctrlKey || event.metaKey) {
+      return;
+    }
     const list = tabListRef.current;
     const currentFocus = (0, _ownerDocument.default)(list).activeElement;
     // Keyboard navigation assumes that [role="tab"] are siblings

package/node/TextField/TextField.js

@@ -167,6 +167,25 @@ const TextField = /*#__PURE__*/React.forwardRef(function TextField(inProps, ref)
     }
     inputAdditionalProps['aria-describedby'] = undefined;
   }
+  const [RootSlot, rootProps] = (0, _useSlot.default)('root', {
+    elementType: TextFieldRoot,
+    shouldForwardComponentProp: true,
+    externalForwardedProps: {
+      ...externalForwardedProps,
+      ...other
+    },
+    ownerState,
+    className: (0, _clsx.default)(classes.root, className),
+    ref,
+    additionalProps: {
+      disabled,
+      error,
+      fullWidth,
+      required,
+      color,
+      variant
+    }
+  });
   const [InputSlot, inputProps] = (0, _useSlot.default)('input', {
     elementType: InputComponent,
     externalForwardedProps,
@@ -218,17 +237,8 @@ const TextField = /*#__PURE__*/React.forwardRef(function TextField(inProps, ref)
     },
     ...inputProps
   });
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(TextFieldRoot, {
-    className: (0, _clsx.default)(classes.root, className),
-    disabled: disabled,
-    error: error,
-    fullWidth: fullWidth,
-    ref: ref,
-    required: required,
-    color: color,
-    variant: variant,
-    ownerState: ownerState,
-    ...other,
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(RootSlot, {
+    ...rootProps,
     children: [label != null && label !== '' && /*#__PURE__*/(0, _jsxRuntime.jsx)(InputLabelSlot, {
       htmlFor: id,
       id: inputLabelId,
@@ -430,6 +440,7 @@ process.env.NODE_ENV !== "production" ? TextField.propTypes /* remove-proptypes
     htmlInput: _propTypes.default.elementType,
     input: _propTypes.default.elementType,
     inputLabel: _propTypes.default.elementType,
+    root: _propTypes.default.elementType,
     select: _propTypes.default.elementType
   }),
   /**