@mui/material 9.0.0 → 9.1.0

package/MenuList/MenuList.mjs

@@ -3,6 +3,7 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { isItemFocusable } from '@mui/utils/useRovingTabIndex';
+import contains from "../utils/contains.mjs";
 import ownerDocument from "../utils/ownerDocument.mjs";
 import getActiveElement from "../utils/getActiveElement.mjs";
 import getScrollbarSize from "../utils/getScrollbarSize.mjs";
@@ -178,7 +179,7 @@ const MenuList = /*#__PURE__*/React.forwardRef(function MenuList(props, ref) {
         return null;
       }
       const currentFocus = getActiveElement(ownerDocument(listRef.current));
-      if (currentFocus && listRef.current.contains(currentFocus)) {
+      if (currentFocus && contains(listRef.current, currentFocus)) {
         return currentFocus;
       }
       return focusInitialTarget(true);

package/MobileStepper/MobileStepper.js

@@ -21,6 +21,7 @@ var _DefaultPropsProvider = require("../DefaultPropsProvider");
 var _slotShouldForwardProp = _interopRequireDefault(require("../styles/slotShouldForwardProp"));
 var _mobileStepperClasses = require("./mobileStepperClasses");
 var _useSlot = _interopRequireDefault(require("../utils/useSlot"));
+var _utils = require("../transitions/utils");
 var _jsxRuntime = require("react/jsx-runtime");
 const useUtilityClasses = ownerState => {
   const {
@@ -112,7 +113,7 @@ const MobileStepperDot = (0, _zeroStyled.styled)('div', {
       variant: 'dots'
     },
     style: {
-      transition: theme.transitions.create('background-color', {
+      ...(0, _utils.getTransitionStyles)(theme, 'background-color', {
         duration: theme.transitions.duration.shortest
       }),
       backgroundColor: (theme.vars || theme).palette.action.disabled,

package/MobileStepper/MobileStepper.mjs

@@ -14,6 +14,7 @@ import { useDefaultProps } from "../DefaultPropsProvider/index.mjs";
 import slotShouldForwardProp from "../styles/slotShouldForwardProp.mjs";
 import { getMobileStepperUtilityClass } from "./mobileStepperClasses.mjs";
 import useSlot from "../utils/useSlot.mjs";
+import { getTransitionStyles } from "../transitions/utils.mjs";
 import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
 const useUtilityClasses = ownerState => {
   const {
@@ -105,7 +106,7 @@ const MobileStepperDot = styled('div', {
       variant: 'dots'
     },
     style: {
-      transition: theme.transitions.create('background-color', {
+      ...getTransitionStyles(theme, 'background-color', {
         duration: theme.transitions.duration.shortest
       }),
       backgroundColor: (theme.vars || theme).palette.action.disabled,

package/NativeSelect/NativeSelect.js

@@ -12,8 +12,7 @@ var _clsx = _interopRequireDefault(require("clsx"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
 var _NativeSelectInput = _interopRequireDefault(require("./NativeSelectInput"));
-var _formControlState = _interopRequireDefault(require("../FormControl/formControlState"));
-var _useFormControl = _interopRequireDefault(require("../FormControl/useFormControl"));
+var _useFormControl = require("../FormControl/useFormControl");
 var _ArrowDropDown = _interopRequireDefault(require("../internal/svg-icons/ArrowDropDown"));
 var _Input = _interopRequireDefault(require("../Input"));
 var _DefaultPropsProvider = require("../DefaultPropsProvider");
@@ -47,10 +46,8 @@ const NativeSelect = /*#__PURE__*/React.forwardRef(function NativeSelect(inProps
     variant,
     ...other
   } = props;
-  const muiFormControl = (0, _useFormControl.default)();
-  const fcs = (0, _formControlState.default)({
+  const [fcs] = (0, _useFormControl.useFormControlState)({
     props,
-    muiFormControl,
     states: ['variant']
   });
   const ownerState = {

package/NativeSelect/NativeSelect.mjs

@@ -5,8 +5,7 @@ import clsx from 'clsx';
 import PropTypes from 'prop-types';
 import composeClasses from '@mui/utils/composeClasses';
 import NativeSelectInput from "./NativeSelectInput.mjs";
-import formControlState from "../FormControl/formControlState.mjs";
-import useFormControl from "../FormControl/useFormControl.mjs";
+import { useFormControlState } from "../FormControl/useFormControl.mjs";
 import ArrowDropDownIcon from "../internal/svg-icons/ArrowDropDown.mjs";
 import Input from "../Input/index.mjs";
 import { useDefaultProps } from "../DefaultPropsProvider/index.mjs";
@@ -40,10 +39,8 @@ const NativeSelect = /*#__PURE__*/React.forwardRef(function NativeSelect(inProps
     variant,
     ...other
   } = props;
-  const muiFormControl = useFormControl();
-  const fcs = formControlState({
+  const [fcs] = useFormControlState({
     props,
-    muiFormControl,
     states: ['variant']
   });
   const ownerState = {

package/OutlinedInput/NotchedOutline.js

@@ -10,6 +10,7 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _rootShouldForwardProp = _interopRequireDefault(require("../styles/rootShouldForwardProp"));
 var _zeroStyled = require("../zero-styled");
 var _memoTheme = _interopRequireDefault(require("../utils/memoTheme"));
+var _utils = require("../transitions/utils");
 var _jsxRuntime = require("react/jsx-runtime");
 var _span;
 const NotchedOutlineRoot = (0, _zeroStyled.styled)('fieldset', {
@@ -51,7 +52,7 @@ const NotchedOutlineLegend = (0, _zeroStyled.styled)('legend', {
       padding: 0,
       lineHeight: '11px',
       // sync with `height` in `legend` styles
-      transition: theme.transitions.create('width', {
+      ...(0, _utils.getTransitionStyles)(theme, 'width', {
         duration: 150,
         easing: theme.transitions.easing.easeOut
       })
@@ -69,7 +70,7 @@ const NotchedOutlineLegend = (0, _zeroStyled.styled)('legend', {
       fontSize: '0.75em',
       visibility: 'hidden',
       maxWidth: 0.01,
-      transition: theme.transitions.create('max-width', {
+      ...(0, _utils.getTransitionStyles)(theme, 'max-width', {
         duration: 50,
         easing: theme.transitions.easing.easeOut
       }),
@@ -88,7 +89,7 @@ const NotchedOutlineLegend = (0, _zeroStyled.styled)('legend', {
     }) => ownerState.withLabel && ownerState.notched,
     style: {
       maxWidth: '100%',
-      transition: theme.transitions.create('max-width', {
+      ...(0, _utils.getTransitionStyles)(theme, 'max-width', {
         duration: 100,
         easing: theme.transitions.easing.easeOut,
         delay: 50

package/OutlinedInput/NotchedOutline.mjs

@@ -5,6 +5,7 @@ import PropTypes from 'prop-types';
 import rootShouldForwardProp from "../styles/rootShouldForwardProp.mjs";
 import { styled } from "../zero-styled/index.mjs";
 import memoTheme from "../utils/memoTheme.mjs";
+import { getTransitionStyles } from "../transitions/utils.mjs";
 import { jsx as _jsx } from "react/jsx-runtime";
 const NotchedOutlineRoot = styled('fieldset', {
   name: 'MuiNotchedOutlined',
@@ -45,7 +46,7 @@ const NotchedOutlineLegend = styled('legend', {
       padding: 0,
       lineHeight: '11px',
       // sync with `height` in `legend` styles
-      transition: theme.transitions.create('width', {
+      ...getTransitionStyles(theme, 'width', {
         duration: 150,
         easing: theme.transitions.easing.easeOut
       })
@@ -63,7 +64,7 @@ const NotchedOutlineLegend = styled('legend', {
       fontSize: '0.75em',
       visibility: 'hidden',
       maxWidth: 0.01,
-      transition: theme.transitions.create('max-width', {
+      ...getTransitionStyles(theme, 'max-width', {
         duration: 50,
         easing: theme.transitions.easing.easeOut
       }),
@@ -82,7 +83,7 @@ const NotchedOutlineLegend = styled('legend', {
     }) => ownerState.withLabel && ownerState.notched,
     style: {
       maxWidth: '100%',
-      transition: theme.transitions.create('max-width', {
+      ...getTransitionStyles(theme, 'max-width', {
         duration: 100,
         easing: theme.transitions.easing.easeOut,
         delay: 50

package/OutlinedInput/OutlinedInput.js

@@ -12,8 +12,7 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _refType = _interopRequireDefault(require("@mui/utils/refType"));
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
 var _NotchedOutline = _interopRequireDefault(require("./NotchedOutline"));
-var _useFormControl = _interopRequireDefault(require("../FormControl/useFormControl"));
-var _formControlState = _interopRequireDefault(require("../FormControl/formControlState"));
+var _useFormControl = require("../FormControl/useFormControl");
 var _rootShouldForwardProp = _interopRequireDefault(require("../styles/rootShouldForwardProp"));
 var _zeroStyled = require("../zero-styled");
 var _memoTheme = _interopRequireDefault(require("../utils/memoTheme"));
@@ -134,26 +133,19 @@ const OutlinedInputInput = (0, _zeroStyled.styled)(_InputBase.InputBaseInput, {
   theme
 }) => ({
   padding: '16.5px 14px',
-  ...(!theme.vars && {
-    '&:-webkit-autofill': {
+  '&:-webkit-autofill': {
+    ...(!theme.vars && {
       WebkitBoxShadow: theme.palette.mode === 'light' ? null : '0 0 0 100px #266798 inset',
       WebkitTextFillColor: theme.palette.mode === 'light' ? null : '#fff',
-      caretColor: theme.palette.mode === 'light' ? null : '#fff',
-      borderRadius: 'inherit'
-    }
-  }),
-  ...(theme.vars && {
-    '&:-webkit-autofill': {
-      borderRadius: 'inherit'
-    },
-    [theme.getColorSchemeSelector('dark')]: {
-      '&:-webkit-autofill': {
-        WebkitBoxShadow: '0 0 0 100px #266798 inset',
-        WebkitTextFillColor: '#fff',
-        caretColor: '#fff'
-      }
-    }
-  }),
+      caretColor: theme.palette.mode === 'light' ? null : '#fff'
+    }),
+    borderRadius: 'inherit',
+    ...(theme.vars && theme.applyStyles('dark', {
+      WebkitBoxShadow: '0 0 0 100px #266798 inset',
+      WebkitTextFillColor: '#fff',
+      caretColor: '#fff'
+    }))
+  },
   variants: [{
     props: {
       size: 'small'
@@ -201,10 +193,8 @@ const OutlinedInput = /*#__PURE__*/React.forwardRef(function OutlinedInput(inPro
     ...other
   } = props;
   const classes = useUtilityClasses(props);
-  const muiFormControl = (0, _useFormControl.default)();
-  const fcs = (0, _formControlState.default)({
+  const [fcs, muiFormControl] = (0, _useFormControl.useFormControlState)({
     props,
-    muiFormControl,
     states: ['color', 'disabled', 'error', 'focused', 'hiddenLabel', 'size', 'required']
   });
   const ownerState = {

package/OutlinedInput/OutlinedInput.mjs

@@ -5,8 +5,7 @@ import PropTypes from 'prop-types';
 import refType from '@mui/utils/refType';
 import composeClasses from '@mui/utils/composeClasses';
 import NotchedOutline from "./NotchedOutline.mjs";
-import useFormControl from "../FormControl/useFormControl.mjs";
-import formControlState from "../FormControl/formControlState.mjs";
+import { useFormControlState } from "../FormControl/useFormControl.mjs";
 import rootShouldForwardProp from "../styles/rootShouldForwardProp.mjs";
 import { styled } from "../zero-styled/index.mjs";
 import memoTheme from "../utils/memoTheme.mjs";
@@ -127,26 +126,19 @@ const OutlinedInputInput = styled(InputBaseInput, {
   theme
 }) => ({
   padding: '16.5px 14px',
-  ...(!theme.vars && {
-    '&:-webkit-autofill': {
+  '&:-webkit-autofill': {
+    ...(!theme.vars && {
       WebkitBoxShadow: theme.palette.mode === 'light' ? null : '0 0 0 100px #266798 inset',
       WebkitTextFillColor: theme.palette.mode === 'light' ? null : '#fff',
-      caretColor: theme.palette.mode === 'light' ? null : '#fff',
-      borderRadius: 'inherit'
-    }
-  }),
-  ...(theme.vars && {
-    '&:-webkit-autofill': {
-      borderRadius: 'inherit'
-    },
-    [theme.getColorSchemeSelector('dark')]: {
-      '&:-webkit-autofill': {
-        WebkitBoxShadow: '0 0 0 100px #266798 inset',
-        WebkitTextFillColor: '#fff',
-        caretColor: '#fff'
-      }
-    }
-  }),
+      caretColor: theme.palette.mode === 'light' ? null : '#fff'
+    }),
+    borderRadius: 'inherit',
+    ...(theme.vars && theme.applyStyles('dark', {
+      WebkitBoxShadow: '0 0 0 100px #266798 inset',
+      WebkitTextFillColor: '#fff',
+      caretColor: '#fff'
+    }))
+  },
   variants: [{
     props: {
       size: 'small'
@@ -194,10 +186,8 @@ const OutlinedInput = /*#__PURE__*/React.forwardRef(function OutlinedInput(inPro
     ...other
   } = props;
   const classes = useUtilityClasses(props);
-  const muiFormControl = useFormControl();
-  const fcs = formControlState({
+  const [fcs, muiFormControl] = useFormControlState({
     props,
-    muiFormControl,
     states: ['color', 'disabled', 'error', 'focused', 'hiddenLabel', 'size', 'required']
   });
   const ownerState = {

package/PaginationItem/PaginationItem.js

@@ -24,6 +24,7 @@ var _useSlot = _interopRequireDefault(require("../utils/useSlot"));
 var _zeroStyled = require("../zero-styled");
 var _memoTheme = _interopRequireDefault(require("../utils/memoTheme"));
 var _DefaultPropsProvider = require("../DefaultPropsProvider");
+var _utils = require("../transitions/utils");
 var _jsxRuntime = require("react/jsx-runtime");
 const overridesResolver = (props, styles) => {
   const {
@@ -119,7 +120,7 @@ const PaginationItemPage = (0, _zeroStyled.styled)(_ButtonBase.default, {
   [`&.${_paginationItemClasses.default.disabled}`]: {
     opacity: (theme.vars || theme).palette.action.disabledOpacity
   },
-  transition: theme.transitions.create(['color', 'background-color'], {
+  ...(0, _utils.getTransitionStyles)(theme, ['color', 'background-color'], {
     duration: theme.transitions.duration.short
   }),
   '&:hover': {

package/PaginationItem/PaginationItem.mjs

@@ -17,6 +17,7 @@ import useSlot from "../utils/useSlot.mjs";
 import { styled } from "../zero-styled/index.mjs";
 import memoTheme from "../utils/memoTheme.mjs";
 import { useDefaultProps } from "../DefaultPropsProvider/index.mjs";
+import { getTransitionStyles } from "../transitions/utils.mjs";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const overridesResolver = (props, styles) => {
   const {
@@ -112,7 +113,7 @@ const PaginationItemPage = styled(ButtonBase, {
   [`&.${paginationItemClasses.disabled}`]: {
     opacity: (theme.vars || theme).palette.action.disabledOpacity
   },
-  transition: theme.transitions.create(['color', 'background-color'], {
+  ...getTransitionStyles(theme, ['color', 'background-color'], {
     duration: theme.transitions.duration.short
   }),
   '&:hover': {

package/Paper/Paper.js

@@ -19,6 +19,7 @@ var _memoTheme = _interopRequireDefault(require("../utils/memoTheme"));
 var _DefaultPropsProvider = require("../DefaultPropsProvider");
 var _getOverlayAlpha = _interopRequireDefault(require("../styles/getOverlayAlpha"));
 var _paperClasses = require("./paperClasses");
+var _utils = require("../transitions/utils");
 var _jsxRuntime = require("react/jsx-runtime");
 const useUtilityClasses = ownerState => {
   const {
@@ -46,7 +47,7 @@ const PaperRoot = (0, _zeroStyled.styled)('div', {
 }) => ({
   backgroundColor: (theme.vars || theme).palette.background.paper,
   color: (theme.vars || theme).palette.text.primary,
-  transition: theme.transitions.create('box-shadow'),
+  ...(0, _utils.getTransitionStyles)(theme, 'box-shadow'),
   variants: [{
     props: ({
       ownerState

package/Paper/Paper.mjs

@@ -12,6 +12,7 @@ import memoTheme from "../utils/memoTheme.mjs";
 import { useDefaultProps } from "../DefaultPropsProvider/index.mjs";
 import getOverlayAlpha from "../styles/getOverlayAlpha.mjs";
 import { getPaperUtilityClass } from "./paperClasses.mjs";
+import { getTransitionStyles } from "../transitions/utils.mjs";
 import { jsx as _jsx } from "react/jsx-runtime";
 const useUtilityClasses = ownerState => {
   const {
@@ -39,7 +40,7 @@ const PaperRoot = styled('div', {
 }) => ({
   backgroundColor: (theme.vars || theme).palette.background.paper,
   color: (theme.vars || theme).palette.text.primary,
-  transition: theme.transitions.create('box-shadow'),
+  ...getTransitionStyles(theme, 'box-shadow'),
   variants: [{
     props: ({
       ownerState

package/PigmentContainer/PigmentContainer.js

@@ -59,7 +59,6 @@ const PigmentContainer = /*#__PURE__*/React.forwardRef(function PigmentContainer
     fixed: fixed,
     maxWidth: maxWidth,
     ...props,
-    // @ts-ignore
     ref: ref
   });
 });

package/PigmentContainer/PigmentContainer.mjs

@@ -51,7 +51,6 @@ const PigmentContainer = /*#__PURE__*/React.forwardRef(function PigmentContainer
     fixed: fixed,
     maxWidth: maxWidth,
     ...props,
-    // @ts-ignore
     ref: ref
   });
 });

package/Popover/Popover.d.mts

@@ -6,7 +6,7 @@ import { Theme } from "../styles/index.mjs";
 import { InternalStandardProps as StandardProps } from "../internal/index.mjs";
 import { PaperProps } from "../Paper/index.mjs";
 import { ModalProps } from "../Modal/index.mjs";
-import { TransitionProps } from "../transitions/transition.mjs";
+import { TransitionProps } from "../transitions/types.mjs";
 import { PopoverClasses } from "./popoverClasses.mjs";
 import { CreateSlotsAndSlotProps, SlotProps } from "../utils/types.mjs";
 export interface PopoverSlots {

package/Popover/Popover.d.ts

@@ -6,7 +6,7 @@ import { Theme } from "../styles/index.js";
 import { InternalStandardProps as StandardProps } from "../internal/index.js";
 import { PaperProps } from "../Paper/index.js";
 import { ModalProps } from "../Modal/index.js";
-import { TransitionProps } from "../transitions/transition.js";
+import { TransitionProps } from "../transitions/types.js";
 import { PopoverClasses } from "./popoverClasses.js";
 import { CreateSlotsAndSlotProps, SlotProps } from "../utils/types.js";
 export interface PopoverSlots {

package/Popper/BasePopper.js

@@ -150,8 +150,30 @@ const PopperTooltip = /*#__PURE__*/React.forwardRef(function PopperTooltip(props
       modifiers: popperModifiers
     });
     handlePopperRefRef.current(popper);
+    const popperElement = tooltipRef.current;
     return () => {
-      popper.destroy();
+      // popper.destroy() clears all inline positioning via the applyStyles
+      // modifier cleanup, which causes the element to jump to its static
+      // position. Snapshot and restore only the positioning properties so the
+      // element stays in place during the destroy/recreate gap (prevents scroll
+      // jumps when a child focuses between the two).
+      // https://github.com/mui/mui-x/issues/21839
+      if (popperElement) {
+        const {
+          style
+        } = popperElement;
+        const position = style.position;
+        const top = style.top;
+        const left = style.left;
+        const transform = style.transform;
+        popper.destroy();
+        style.position = position;
+        style.top = top;
+        style.left = left;
+        style.transform = transform;
+      } else {
+        popper.destroy();
+      }
       handlePopperRefRef.current(null);
     };
   }, [resolvedAnchorElement, disablePortal, modifiers, open, popperOptions, rtlPlacement]);

package/Popper/BasePopper.mjs

@@ -143,8 +143,30 @@ const PopperTooltip = /*#__PURE__*/React.forwardRef(function PopperTooltip(props
       modifiers: popperModifiers
     });
     handlePopperRefRef.current(popper);
+    const popperElement = tooltipRef.current;
     return () => {
-      popper.destroy();
+      // popper.destroy() clears all inline positioning via the applyStyles
+      // modifier cleanup, which causes the element to jump to its static
+      // position. Snapshot and restore only the positioning properties so the
+      // element stays in place during the destroy/recreate gap (prevents scroll
+      // jumps when a child focuses between the two).
+      // https://github.com/mui/mui-x/issues/21839
+      if (popperElement) {
+        const {
+          style
+        } = popperElement;
+        const position = style.position;
+        const top = style.top;
+        const left = style.left;
+        const transform = style.transform;
+        popper.destroy();
+        style.position = position;
+        style.top = top;
+        style.left = left;
+        style.transform = transform;
+      } else {
+        popper.destroy();
+      }
       handlePopperRefRef.current(null);
     };
   }, [resolvedAnchorElement, disablePortal, modifiers, open, popperOptions, rtlPlacement]);

package/README.md

@@ -1,7 +1,8 @@
 <!-- #host-reference -->
-<!-- markdownlint-disable-next-line -->
+<!-- lint disable mui-first-block-heading -->
+
 <p align="center">
-  <a href="https://mui.com/material-ui/" rel="noopener" target="_blank"><img width="150" height="133" src="https://mui.com/static/logo.svg" alt="Material UI logo"></a>
+  <a href="https://mui.com/material-ui/" target="_blank"><img width="150" height="133" src="https://mui.com/static/logo.svg" alt="Material UI logo"></a>
 </p>
 
 <h1 align="center">Material UI</h1>

package/Radio/RadioButtonIcon.js

@@ -12,6 +12,7 @@ var _RadioButtonChecked = _interopRequireDefault(require("../internal/svg-icons/
 var _rootShouldForwardProp = _interopRequireDefault(require("../styles/rootShouldForwardProp"));
 var _zeroStyled = require("../zero-styled");
 var _memoTheme = _interopRequireDefault(require("../utils/memoTheme"));
+var _utils = require("../transitions/utils");
 var _jsxRuntime = require("react/jsx-runtime");
 const RadioButtonIconRoot = (0, _zeroStyled.styled)('span', {
   name: 'MuiRadioButtonIcon',
@@ -34,7 +35,7 @@ const RadioButtonIconDot = (0, _zeroStyled.styled)(_RadioButtonChecked.default,
   left: 0,
   position: 'absolute',
   transform: 'scale(0)',
-  transition: theme.transitions.create('transform', {
+  ...(0, _utils.getTransitionStyles)(theme, 'transform', {
     easing: theme.transitions.easing.easeIn,
     duration: theme.transitions.duration.shortest
   }),
@@ -44,7 +45,7 @@ const RadioButtonIconDot = (0, _zeroStyled.styled)(_RadioButtonChecked.default,
     },
     style: {
       transform: 'scale(1)',
-      transition: theme.transitions.create('transform', {
+      ...(0, _utils.getTransitionStyles)(theme, 'transform', {
         easing: theme.transitions.easing.easeOut,
         duration: theme.transitions.duration.shortest
       })

package/Radio/RadioButtonIcon.mjs

@@ -6,6 +6,7 @@ import RadioButtonCheckedIcon from "../internal/svg-icons/RadioButtonChecked.mjs
 import rootShouldForwardProp from "../styles/rootShouldForwardProp.mjs";
 import { styled } from "../zero-styled/index.mjs";
 import memoTheme from "../utils/memoTheme.mjs";
+import { getTransitionStyles } from "../transitions/utils.mjs";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const RadioButtonIconRoot = styled('span', {
   name: 'MuiRadioButtonIcon',
@@ -28,7 +29,7 @@ const RadioButtonIconDot = styled(RadioButtonCheckedIcon, {
   left: 0,
   position: 'absolute',
   transform: 'scale(0)',
-  transition: theme.transitions.create('transform', {
+  ...getTransitionStyles(theme, 'transform', {
     easing: theme.transitions.easing.easeIn,
     duration: theme.transitions.duration.shortest
   }),
@@ -38,7 +39,7 @@ const RadioButtonIconDot = styled(RadioButtonCheckedIcon, {
     },
     style: {
       transform: 'scale(1)',
-      transition: theme.transitions.create('transform', {
+      ...getTransitionStyles(theme, 'transform', {
         easing: theme.transitions.easing.easeOut,
         duration: theme.transitions.duration.shortest
       })

package/Rating/Rating.js

@@ -26,6 +26,7 @@ var _DefaultPropsProvider = require("../DefaultPropsProvider");
 var _slotShouldForwardProp = _interopRequireDefault(require("../styles/slotShouldForwardProp"));
 var _ratingClasses = _interopRequireWildcard(require("./ratingClasses"));
 var _useSlot = _interopRequireDefault(require("../utils/useSlot"));
+var _utils2 = require("../transitions/utils");
 var _jsxRuntime = require("react/jsx-runtime");
 function getDecimalPrecision(num) {
   const decimalPart = num.toString().split('.')[1];
@@ -152,7 +153,7 @@ const RatingIcon = (0, _zeroStyled.styled)('span', {
 }) => ({
   // Fit wrapper to actual icon size.
   display: 'flex',
-  transition: theme.transitions.create('transform', {
+  ...(0, _utils2.getTransitionStyles)(theme, 'transform', {
     duration: theme.transitions.duration.shortest
   }),
   // Fix mouseLeave issue.

package/Rating/Rating.mjs

@@ -18,6 +18,7 @@ import { useDefaultProps } from "../DefaultPropsProvider/index.mjs";
 import slotShouldForwardProp from "../styles/slotShouldForwardProp.mjs";
 import ratingClasses, { getRatingUtilityClass } from "./ratingClasses.mjs";
 import useSlot from "../utils/useSlot.mjs";
+import { getTransitionStyles } from "../transitions/utils.mjs";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { createElement as _createElement } from "react";
 function getDecimalPrecision(num) {
@@ -145,7 +146,7 @@ const RatingIcon = styled('span', {
 }) => ({
   // Fit wrapper to actual icon size.
   display: 'flex',
-  transition: theme.transitions.create('transform', {
+  ...getTransitionStyles(theme, 'transform', {
     duration: theme.transitions.duration.shortest
   }),
   // Fix mouseLeave issue.

package/Select/Select.js

@@ -14,8 +14,7 @@ var _deepmerge = _interopRequireDefault(require("@mui/utils/deepmerge"));
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
 var _getReactElementRef = _interopRequireDefault(require("@mui/utils/getReactElementRef"));
 var _SelectInput = _interopRequireDefault(require("./SelectInput"));
-var _formControlState = _interopRequireDefault(require("../FormControl/formControlState"));
-var _useFormControl = _interopRequireDefault(require("../FormControl/useFormControl"));
+var _useFormControl = require("../FormControl/useFormControl");
 var _ArrowDropDown = _interopRequireDefault(require("../internal/svg-icons/ArrowDropDown"));
 var _Input = _interopRequireDefault(require("../Input"));
 var _NativeSelectInput = _interopRequireDefault(require("../NativeSelect/NativeSelectInput"));
@@ -78,10 +77,8 @@ const Select = /*#__PURE__*/React.forwardRef(function Select(inProps, ref) {
     ...other
   } = props;
   const inputComponent = native ? _NativeSelectInput.default : _SelectInput.default;
-  const muiFormControl = (0, _useFormControl.default)();
-  const fcs = (0, _formControlState.default)({
+  const [fcs] = (0, _useFormControl.useFormControlState)({
     props,
-    muiFormControl,
     states: ['variant', 'error']
   });
   const variant = fcs.variant || variantProp;

package/Select/Select.mjs

@@ -7,8 +7,7 @@ import deepmerge from '@mui/utils/deepmerge';
 import composeClasses from '@mui/utils/composeClasses';
 import getReactElementRef from '@mui/utils/getReactElementRef';
 import SelectInput from "./SelectInput.mjs";
-import formControlState from "../FormControl/formControlState.mjs";
-import useFormControl from "../FormControl/useFormControl.mjs";
+import { useFormControlState } from "../FormControl/useFormControl.mjs";
 import ArrowDropDownIcon from "../internal/svg-icons/ArrowDropDown.mjs";
 import Input from "../Input/index.mjs";
 import NativeSelectInput from "../NativeSelect/NativeSelectInput.mjs";
@@ -71,10 +70,8 @@ const Select = /*#__PURE__*/React.forwardRef(function Select(inProps, ref) {
     ...other
   } = props;
   const inputComponent = native ? NativeSelectInput : SelectInput;
-  const muiFormControl = useFormControl();
-  const fcs = formControlState({
+  const [fcs] = useFormControlState({
     props,
-    muiFormControl,
     states: ['variant', 'error']
   });
   const variant = fcs.variant || variantProp;