@mui/material 5.10.8 → 5.10.10

package/ButtonBase/ButtonBase.js

@@ -321,8 +321,7 @@ const ButtonBase = /*#__PURE__*/React.forwardRef(function ButtonBase(inProps, re
     }
   }
 
-  const handleOwnRef = (0, _useForkRef.default)(focusVisibleRef, buttonRef);
-  const handleRef = (0, _useForkRef.default)(ref, handleOwnRef);
+  const handleRef = (0, _useForkRef.default)(ref, focusVisibleRef, buttonRef);
 
   if (process.env.NODE_ENV !== 'production') {
     // eslint-disable-next-line react-hooks/rules-of-hooks

package/CHANGELOG.md

@@ -1,5 +1,194 @@
 # [Versions](https://mui.com/versions/)
 
+## 5.10.10
+
+<!-- generated comparing v5.10.9..master -->
+
+_Oct 18, 2022_
+
+A big thanks to the 21 contributors who made this release possible. Here are some highlights ✨:
+
+- 🖌 Thanks to the efforts of @bharatkashyap and @nihgwu, we now have editable demos across our docs (#34454)!
+- 🚀 The Tooltip component has been added to Joy UI by @hbjORbj (#34509).
+- ⚙️ We started converting the remaining JS components in MUI Base to TypeScript.
+  @mbayucot finished the first PR with the conversion of the NoSsr code (#34735).
+- And more 🐛 bug fixes and 📚 documentation improvements.
+
+### `@mui/material@5.10.10`
+
+- [Popover] Fix paper position flash on open (#34546) @TheUnlocked
+- [SwipeableDrawer] Make component `defaultProps` overridable (#34643) @hbjORbj
+
+### `@mui/system@5.10.10`
+
+- [system] Support CSS `grey` color in `sx` (#34548) @TheUnlocked
+
+### `@mui/styles@5.10.10`
+
+- [styles] Use memoized context in StylesProvider (#34637) @mohd-akram
+
+### `@mui/joy@5.0.0-alpha.50`
+
+- [Select][joy] Added hidden input element (#34657) @zee-bit
+- [Slider][joy] Add global variant to slider (#34733) @siriwatknp
+- [Tooltip][joy] Add component (#34509) @hbjORbj
+
+### `@mui/base@5.0.0-alpha.102`
+
+- [MultiSelect][base] Prevent the renderValue prop from being propagated to the DOM (#34698) @michaldudak
+- [NoSsr] Convert code to TypeScript (#34735) @mbayucot
+
+### Docs
+
+- [docs] Fix the Autocomplete Highlighting example (#34184) @hayawata3626
+- [docs] Fix typos in Base (Menu, Tabs) and Joy UI (Chip) (#34803) @rvrvrv
+- [docs] Use new editing API in homepage demos (#34220) @m4theushw
+- [docs] Live demos (#34454) @bharatkashyap
+- [docs] Fix typos in Joy UI Switch (#34728) @ndresx
+- [docs] Avoid scrollbar in the code demos (#34741) @oliviertassinari
+- [docs] Revise the Joy UI "Automatic adjustment" page (#34614) @samuelsycamore
+- [docs] Revise and rename the Joy UI "Perfect dark mode" page (#34613) @samuelsycamore
+- [docs] Revise the Joy UI "Global variants" page (#34595) @samuelsycamore
+- [docs] Basic link verification at PR level (#34588) @alexfauquette
+- [docs] Add a missing comma in the customization example (#34617) @AbayKinayat
+- [website] Clarify Pro/Premium support (#34607) @oliviertassinari
+- [website] Fix home page dark mode flicker (#33545)
+- [website] Update the state of the date pickers on the landing page (#34750) @joserodolfofreitas
+
+### Core
+
+- [core] Clean conditionals (#34772) @pedroprado010
+- [core] Temporary remove the authorization (#34796) @siriwatknp
+- [core] Avoid slower CI run statues @oliviertassinari
+- [core] Improve the playground DX (#34739) @oliviertassinari
+- [core] Link Netlify in the danger comment (#34688) @oliviertassinari
+- [core] Fix CI after out of sync merge @oliviertassinari
+- [core] Enforce straight quote (#34686) @oliviertassinari
+- [core] Add code scanning via CodeQL (#34707) @DanailH
+- [core] Fix some upcoming eslint issues (#34727) @oliviertassinari
+- [core] Auto-fix upcoming eslint issues (#34644) @Janpot
+- [core] Move SearchIcons to docs src folder (#34802)
+- [test] Enable `react/no-unstable-nested-components` (#34518) @eps1lon
+
+All contributors of this release in alphabetical order: @AbayKinayat, @alexfauquette, @bharatkashyap, @DanailH, @eps1lon, @hayawata3626, @hbjORbj, @Janpot, @joserodolfofreitas, @m4theushw, @mbayucot, @michaldudak, @mohd-akram, @ndresx, @oliviertassinari, @pedroprado010, @rvrvrv, @samuelsycamore, @siriwatknp, @TheUnlocked, @zee-bit
+
+## 5.10.9
+
+<!-- generated comparing v5.10.8..master -->
+
+_Oct 10, 2022_
+
+A big thanks to the 7 contributors who made this release possible. Here are some highlights ✨:
+
+- 🚀 [Joy] Button loading functionality has been added by @kushagra010 (#34658)
+- And more 🐛 bug fixes and 📚 documentation improvements.
+
+### `@mui/material@5.10.9`
+
+- &#8203;<!-- 16 -->[Grid v2][system] Handle direction object prop for responsive design (#34574) @vanyaxk
+- &#8203;<!-- 03 -->[Slider] Fix unnecessary accessibility attribute in root element (#34610) @vanyaxk
+
+### `@mui/system@5.10.9`
+
+#### BREAKING CHANGE
+
+- &#8203;<!-- 17 -->[system] Fix color-scheme implementation (#34639) @siriwatknp
+
+  The `enableColorScheme` prop has been removed from `CssVarsProvider` and `getInitColorScheme` (both Material UI and Joy UI).
+
+  Migration:
+
+  - **Material UI**: you can enable the CSS color scheme via `<CssBaseline enableColorScheme />`.
+  - **Joy UI**: it is enabled automatically if you use `<CssBaseline />`, [see the docs](https://mui.com/joy-ui/react-css-baseline/).
+
+#### Changes
+
+- &#8203;<!-- 02 -->[system] Fix typo in createCssVarsProvider (#34661) @HexM7
+
+### `@mui/base@5.0.0-alpha.101`
+
+- &#8203;<!-- 01 -->[TrapFocus] Restore the previously exported type from @mui/material (#34601) @michaldudak
+
+### `@mui/joy@5.0.0-alpha.49`
+
+- &#8203;<!-- 04 -->[Joy] Add button loading functionality (#34658) @kushagra010
+
+### Docs
+
+- &#8203;<!-- 18 -->[docs] Revert #34541 (#34700) @michaldudak
+- &#8203;<!-- 15 -->[blog] Blog post for MUI X v6 alpha zero (#34424) @joserodolfofreitas
+- &#8203;<!-- 09 -->[docs] Improve Joy UI tutorial demo (#34653) @oliviertassinari
+- &#8203;<!-- 08 -->[docs] Explain how SelectUnstyled renders a hidden input (#34638) @michaldudak
+- &#8203;<!-- 07 -->[docs] Fix Taiwan description (#34611) @oliviertassinari
+- &#8203;<!-- 06 -->[docs] Fix codesandbox export with dayjs (#34619) @oliviertassinari
+- &#8203;<!-- 05 -->[docs] Explain the purpose of renderGroup prop (#34066) @michaldudak
+
+### Core
+
+- &#8203;<!-- 14 -->[core] Make useForkRef variadic (#27939) @michaldudak
+- &#8203;<!-- 13 -->[core] Speedup of yarn install in the CI (#34632) @oliviertassinari
+- &#8203;<!-- 12 -->[core] Fix markdown loader on Windows (#34623) @michaldudak
+- &#8203;<!-- 11 -->[core] Update changelog for version v5.10.8 (#34593) @mnajdova
+- &#8203;<!-- 10 -->[core] Update root package.json version (#34592) @mnajdova
+
+All contributors of this release in alphabetical order: @HexM7, @joserodolfofreitas, @kushagra010, @michaldudak, @mnajdova, @oliviertassinari, @vanyaxk
+
+## 5.10.8
+
+<!-- generated comparing v5.10.7..master -->
+
+_Oct 3, 2022_
+
+A big thanks to the 18 contributors who made this release possible. Here are some highlights ✨:
+
+- 🚀 [SnackbarUnstyled](https://mui.com/base/react-snackbar/) component & headless hook are added to MUI Base (#33227) @ZeeshanTamboli
+- 📚 [CSS variables documentation](https://mui.com/material-ui/experimental-api/css-theme-variables/overview/) for Material UI has been added by @siriwatknp (#33958)
+- And more 🐛 bug fixes and 📚 documentation improvements.
+
+### `@mui/material@5.10.8`
+
+- &#8203;<!-- 28 -->[Autocomplete] Skip filtering when list of options is loading (#33278) @ndebeiss
+- &#8203;<!-- 13 -->[Fab] Add `disabled` class to FAB button (#34245) @meenarama
+- &#8203;<!-- 09 -->[l10n] Add Arabic Saudi Arabia (ar-SA) locale (#33340) @rolule
+- &#8203;<!-- 08 -->[l10n] zhTW refinement (#33391) @Aporim2051
+- &#8203;<!-- 07 -->[Popover] Add `ownerState` on the paper slot (#34445) @kabernardes
+- &#8203;<!-- 05 -->[Slider] Fixed incorrect marks displayed due to duplicate keys in range (#33526) @kskd1804
+- &#8203;<!-- 03 -->[TextField] Fix typo in FormControlLabel declaration file (#34535) @hghmn
+
+### `@mui/base@5.0.0-alpha.100`
+
+- &#8203;<!-- 04 -->[SnackbarUnstyled] Create component and `useSnackbar` hook (#33227) @ZeeshanTamboli
+
+### `@mui/joy@5.0.0-alpha.48`
+
+- &#8203;<!-- 12 -->[Joy] Fix `variantPlain` classname missing in few components (#34534) @hbjORbj
+- &#8203;<!-- 11 -->[Joy] Fix input decorator color and list padding (#34586) @siriwatknp
+- &#8203;<!-- 10 -->[Joy] Miscellaneous fixes (#34492) @siriwatknp
+
+### Docs
+
+- &#8203;<!-- 27 -->[blog] Fix 404 link in base introduction @oliviertassinari
+- &#8203;<!-- 21 -->[docs] Fix CI build (#34589) @mnajdova
+- &#8203;<!-- 20 -->[docs] Temporary remove date picker from home page (#34541) @siriwatknp
+- &#8203;<!-- 19 -->[docs] Revise and expand Joy UI "Tutorial" doc (#34569) @samuelsycamore
+- &#8203;<!-- 18 -->[docs] Fix SEO issues (#34537) @oliviertassinari
+- &#8203;<!-- 17 -->[docs] Add CSS variables documentation for Material UI (#33958) @siriwatknp
+- &#8203;<!-- 16 -->[docs] Capitalize Material Design on the Breakpoints page (#34481) @Dustin-Digitar
+- &#8203;<!-- 15 -->[docs] Able to load doc components inside markdown files (#34243) @flaviendelangle
+- &#8203;<!-- 14 -->[docs] Use mouse pointer on esc button in the search modal (#34485) @minkyngkm
+- &#8203;<!-- 02 -->[website] Fix typo in pricing FAQ @oliviertassinari
+- &#8203;<!-- 01 -->[website] Move the React Engineer role from open to next (#34494) @mnajdova
+
+### Core
+
+- &#8203;<!-- 26 -->[core] Update root package.json version (#34592) @mnajdova
+- &#8203;<!-- 25 -->[core] Remove useless comment in fixtures (#34581) @Garz4
+- &#8203;<!-- 24 -->[core] Fix link to CODE_OF_CONDUCT.md (#34543) @peippo
+- &#8203;<!-- 23 -->[core] Remove outdated docsearch.js dependency (#34421) @oliviertassinari
+- &#8203;<!-- 22 -->[core] Add `newFeature` to the typing of MuiPage (#34511) @flaviendelangle
+
+All contributors of this release in alphabetical order: @Aporim2051, @Dustin-Digitar, @flaviendelangle, @Garz4, @hbjORbj, @hghmn, @kabernardes, @kskd1804, @meenarama, @minkyngkm, @mnajdova, @ndebeiss, @oliviertassinari, @peippo, @rolule, @samuelsycamore, @siriwatknp, @ZeeshanTamboli
+
 ## 5.10.7
 
 <!-- generated comparing v5.10.6..master -->
@@ -37,8 +226,8 @@ A big thanks to the 21 contributors who made this release possible. Here are som
 - [TrapFocus] Rename TrapFocus to FocusTrap (#34216) @kabernardes
 
   ```diff
-  - import TrapFocus from ‘@mui/base/TrapFocus’;
-  + import FocusTrap from ‘@mui/base/FocusTrap’;
+  -import TrapFocus from '@mui/base/TrapFocus';
+  +import FocusTrap from '@mui/base/FocusTrap';
   ```
 
 #### Changes
@@ -320,7 +509,7 @@ _Aug 22, 2022_
 
 A big thanks to the 11 contributors who made this release possible. Here are some highlights ✨:
 
-- ✨ @michaldudak synced the Material Icons set with the latest from Google (#33988).  
+- ✨ @michaldudak synced the Material Icons set with the latest from Google (#33988).\
   A couple of icons changed their appearance. See the difference [on this Argos build](https://app.argos-ci.com/mui/material-ui/builds/4428]).
 
 ### `@mui/material@5.10.2`
@@ -1910,8 +2099,8 @@ A big thanks to the 16 contributors who made this release possible. Here are som
   `unstable_ClassNameGenerator` has been moved from `utils` to `className` folder to prevent all MUI Base module imports. If you use the module, please update the import as suggested in the diff below:
 
   ```diff
-  - import { unstable_ClassNameGenerator } from '@mui/material/utils';
-  + import { unstable_ClassNameGenerator } from '@mui/material/className';
+  -import { unstable_ClassNameGenerator } from '@mui/material/utils';
+  +import { unstable_ClassNameGenerator } from '@mui/material/className';
   ```
 
 #### Changes
@@ -2253,8 +2442,8 @@ A big thanks to the 22 contributors who made this release possible. Here are som
   3. Change the import paths of unstyled components from @mui/material to @mui/base, e.g.:
 
   ```diff
-  - @import ButtonUnstyled from '@mui/material/ButtonUnstyled';
-  + @import ButtonUnstyled from '@mui/base/ButtonUnstyled';
+  -import ButtonUnstyled from '@mui/material/ButtonUnstyled';
+  +import ButtonUnstyled from '@mui/base/ButtonUnstyled';
   ```
 
 #### Changes
@@ -4297,12 +4486,12 @@ A big thanks to the 13 contributors who made this release possible. Here are som
   `span` element that wraps children has been removed. `wrapper` classKey is also removed. More details about [this change](https://github.com/mui/material-ui/pull/26666).
 
   ```diff
-  <button class="MuiTab-root">
-  - <span class="MuiTab-wrapper">
+   <button class="MuiTab-root">
+  -  <span class="MuiTab-wrapper">
       {icon}
       {label}
-  - </span>
-  </button>
+  -  </span>
+   </button>
   ```
 
 - [BottomNavigation] Remove wrapper from BottomNavigationAction (#26923) @siriwatknp
@@ -4310,14 +4499,14 @@ A big thanks to the 13 contributors who made this release possible. Here are som
   `span` element that wraps children has been removed. `wrapper` classKey is also removed. More details about [this change](https://github.com/mui/material-ui/pull/26666).
 
   ```diff
-  <button class="MuiBottomNavigationAction-root">
-  - <span class="MuiBottomNavigationAction-wrapper">
-      {icon}
-      <span class="MuiBottomNavigationAction-label">
-        {label}
-      </span>
-  - </span>
-  </button>
+   <button class="MuiBottomNavigationAction-root">
+  -  <span class="MuiBottomNavigationAction-wrapper">
+       {icon}
+       <span class="MuiBottomNavigationAction-label">
+         {label}
+       </span>
+  -  </span>
+   </button>
   ```
 
 #### Changes

package/CssBaseline/CssBaseline.js

@@ -33,7 +33,7 @@ const html = (theme, enableColorScheme) => (0, _extends2.default)({
   boxSizing: 'border-box',
   // Fix font resize problem in iOS
   WebkitTextSizeAdjust: '100%'
-}, enableColorScheme && {
+}, enableColorScheme && !theme.vars && {
   colorScheme: theme.palette.mode
 });
 
@@ -54,7 +54,19 @@ exports.body = body;
 const styles = (theme, enableColorScheme = false) => {
   var _theme$components, _theme$components$Mui;
 
-  let defaultStyles = {
+  const colorSchemeStyles = {};
+
+  if (enableColorScheme && theme.colorSchemes) {
+    Object.entries(theme.colorSchemes).forEach(([key, scheme]) => {
+      var _scheme$palette;
+
+      colorSchemeStyles[theme.getColorSchemeSelector(key).replace(/\s*&/, '')] = {
+        colorScheme: (_scheme$palette = scheme.palette) == null ? void 0 : _scheme$palette.mode
+      };
+    });
+  }
+
+  let defaultStyles = (0, _extends2.default)({
     html: html(theme, enableColorScheme),
     '*, *::before, *::after': {
       boxSizing: 'inherit'
@@ -71,7 +83,7 @@ const styles = (theme, enableColorScheme = false) => {
         backgroundColor: (theme.vars || theme).palette.background.default
       }
     })
-  };
+  }, colorSchemeStyles);
   const themeOverrides = (_theme$components = theme.components) == null ? void 0 : (_theme$components$Mui = _theme$components.MuiCssBaseline) == null ? void 0 : _theme$components$Mui.styleOverrides;
 
   if (themeOverrides) {

package/Fade/Fade.js

@@ -72,8 +72,7 @@ const Fade = /*#__PURE__*/React.forwardRef(function Fade(props, ref) {
         other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const enableStrictModeCompat = true;
   const nodeRef = React.useRef(null);
-  const foreignRef = (0, _useForkRef.default)(children.ref, ref);
-  const handleRef = (0, _useForkRef.default)(nodeRef, foreignRef);
+  const handleRef = (0, _useForkRef.default)(nodeRef, children.ref, ref);
 
   const normalizedTransitionCallback = callback => maybeIsAppearing => {
     if (callback) {

package/Grow/Grow.js

@@ -82,8 +82,7 @@ const Grow = /*#__PURE__*/React.forwardRef(function Grow(props, ref) {
   const autoTimeout = React.useRef();
   const theme = (0, _useTheme.default)();
   const nodeRef = React.useRef(null);
-  const foreignRef = (0, _useForkRef.default)(children.ref, ref);
-  const handleRef = (0, _useForkRef.default)(nodeRef, foreignRef);
+  const handleRef = (0, _useForkRef.default)(nodeRef, children.ref, ref);
 
   const normalizedTransitionCallback = callback => maybeIsAppearing => {
     if (callback) {

package/InputBase/InputBase.js

@@ -300,9 +300,7 @@ const InputBase = /*#__PURE__*/React.forwardRef(function InputBase(inProps, ref)
       }
     }
   }, []);
-  const handleInputPropsRefProp = (0, _useForkRef.default)(inputPropsProp.ref, handleInputRefWarning);
-  const handleInputRefProp = (0, _useForkRef.default)(inputRefProp, handleInputPropsRefProp);
-  const handleInputRef = (0, _useForkRef.default)(inputRef, handleInputRefProp);
+  const handleInputRef = (0, _useForkRef.default)(inputRef, inputRefProp, inputPropsProp.ref, handleInputRefWarning);
   const [focused, setFocused] = React.useState(false);
   const muiFormControl = (0, _useFormControl.default)();
 

package/Popover/Popover.js

@@ -268,6 +268,7 @@ const Popover = /*#__PURE__*/React.forwardRef(function Popover(inProps, ref) {
       transformOrigin: getTransformOriginValue(elemTransformOrigin)
     };
   }, [anchorEl, anchorReference, getAnchorOffset, getTransformOrigin, marginThreshold]);
+  const [isPositioned, setIsPositioned] = React.useState(open);
   const setPositioningStyles = React.useCallback(() => {
     const element = paperRef.current;
 
@@ -286,6 +287,7 @@ const Popover = /*#__PURE__*/React.forwardRef(function Popover(inProps, ref) {
     }
 
     element.style.transformOrigin = positioning.transformOrigin;
+    setIsPositioned(true);
   }, [getPositioningStyle]);
 
   const handleEntering = (element, isAppearing) => {
@@ -296,6 +298,10 @@ const Popover = /*#__PURE__*/React.forwardRef(function Popover(inProps, ref) {
     setPositioningStyles();
   };
 
+  const handleExited = () => {
+    setIsPositioned(false);
+  };
+
   React.useEffect(() => {
     if (open) {
       setPositioningStyles();
@@ -345,13 +351,19 @@ const Popover = /*#__PURE__*/React.forwardRef(function Popover(inProps, ref) {
       appear: true,
       in: open,
       onEntering: handleEntering,
+      onExited: handleExited,
       timeout: transitionDuration
     }, TransitionProps, {
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(PopoverPaper, (0, _extends2.default)({
         elevation: elevation
       }, PaperProps, {
         ref: handlePaperRef,
-        className: (0, _clsx.default)(classes.paper, PaperProps.className),
+        className: (0, _clsx.default)(classes.paper, PaperProps.className)
+      }, isPositioned ? undefined : {
+        style: (0, _extends2.default)({}, PaperProps.style, {
+          opacity: 0
+        })
+      }, {
         ownerState: ownerState,
         children: children
       }))

package/Rating/Rating.js

@@ -371,8 +371,7 @@ const Rating = /*#__PURE__*/React.forwardRef(function Rating(inProps, ref) {
   } = (0, _utils2.useIsFocusVisible)();
   const [focusVisible, setFocusVisible] = React.useState(false);
   const rootRef = React.useRef();
-  const handleFocusRef = (0, _utils2.useForkRef)(focusVisibleRef, rootRef);
-  const handleRef = (0, _utils2.useForkRef)(handleFocusRef, ref);
+  const handleRef = (0, _utils2.useForkRef)(focusVisibleRef, rootRef, ref);
 
   const handleMouseMove = event => {
     if (onMouseMove) {

package/ScopedCssBaseline/ScopedCssBaseline.js

@@ -53,6 +53,18 @@ const ScopedCssBaselineRoot = (0, _styled.default)('div', {
   theme,
   ownerState
 }) => {
+  const colorSchemeStyles = {};
+
+  if (ownerState.enableColorScheme && theme.colorSchemes) {
+    Object.entries(theme.colorSchemes).forEach(([key, scheme]) => {
+      var _scheme$palette;
+
+      colorSchemeStyles[`&${theme.getColorSchemeSelector(key).replace(/\s*&/, '')}`] = {
+        colorScheme: (_scheme$palette = scheme.palette) == null ? void 0 : _scheme$palette.mode
+      };
+    });
+  }
+
   return (0, _extends2.default)({}, (0, _CssBaseline.html)(theme, ownerState.enableColorScheme), (0, _CssBaseline.body)(theme), {
     '& *, & *::before, & *::after': {
       boxSizing: 'inherit'
@@ -60,7 +72,7 @@ const ScopedCssBaselineRoot = (0, _styled.default)('div', {
     '& strong, & b': {
       fontWeight: theme.typography.fontWeightBold
     }
-  });
+  }, colorSchemeStyles);
 });
 const ScopedCssBaseline = /*#__PURE__*/React.forwardRef(function ScopedCssBaseline(inProps, ref) {
   const props = (0, _useThemeProps.default)({

package/Slide/Slide.js

@@ -144,8 +144,7 @@ const Slide = /*#__PURE__*/React.forwardRef(function Slide(props, ref) {
   } = props,
         other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const childrenRef = React.useRef(null);
-  const handleRefIntermediary = (0, _useForkRef.default)(children.ref, childrenRef);
-  const handleRef = (0, _useForkRef.default)(handleRefIntermediary, ref);
+  const handleRef = (0, _useForkRef.default)(children.ref, childrenRef, ref);
 
   const normalizedTransitionCallback = callback => isAppearing => {
     if (callback) {

package/Tooltip/Tooltip.js

@@ -494,9 +494,7 @@ const Tooltip = /*#__PURE__*/React.forwardRef(function Tooltip(inProps, ref) {
       document.removeEventListener('keydown', handleKeyDown);
     };
   }, [handleClose, open]);
-  const handleUseRef = (0, _useForkRef.default)(setChildNode, ref);
-  const handleFocusRef = (0, _useForkRef.default)(focusVisibleRef, handleUseRef);
-  const handleRef = (0, _useForkRef.default)(children.ref, handleFocusRef); // There is no point in displaying an empty tooltip.
+  const handleRef = (0, _useForkRef.default)(children.ref, focusVisibleRef, setChildNode, ref); // There is no point in displaying an empty tooltip.
 
   if (typeof title !== 'number' && !title) {
     open = false;

package/Unstable_TrapFocus/index.d.ts

@@ -1,2 +1,2 @@
 export { default } from '@mui/base/FocusTrap';
-export * from '@mui/base/FocusTrap';
+export { FocusTrapProps as TrapFocusProps } from '@mui/base/FocusTrap';

package/Zoom/Zoom.js

@@ -72,8 +72,7 @@ const Zoom = /*#__PURE__*/React.forwardRef(function Zoom(props, ref) {
   } = props,
         other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const nodeRef = React.useRef(null);
-  const foreignRef = (0, _useForkRef.default)(children.ref, ref);
-  const handleRef = (0, _useForkRef.default)(nodeRef, foreignRef);
+  const handleRef = (0, _useForkRef.default)(nodeRef, children.ref, ref);
 
   const normalizedTransitionCallback = callback => maybeIsAppearing => {
     if (callback) {

package/esm/ButtonBase/ButtonBase.js

@@ -295,8 +295,7 @@ const ButtonBase = /*#__PURE__*/React.forwardRef(function ButtonBase(inProps, re
     }
   }
 
-  const handleOwnRef = useForkRef(focusVisibleRef, buttonRef);
-  const handleRef = useForkRef(ref, handleOwnRef);
+  const handleRef = useForkRef(ref, focusVisibleRef, buttonRef);
 
   if (process.env.NODE_ENV !== 'production') {
     // eslint-disable-next-line react-hooks/rules-of-hooks

package/esm/CssBaseline/CssBaseline.js

@@ -15,7 +15,7 @@ export const html = (theme, enableColorScheme) => _extends({
   boxSizing: 'border-box',
   // Fix font resize problem in iOS
   WebkitTextSizeAdjust: '100%'
-}, enableColorScheme && {
+}, enableColorScheme && !theme.vars && {
   colorScheme: theme.palette.mode
 });
 export const body = theme => _extends({
@@ -30,7 +30,19 @@ export const body = theme => _extends({
 export const styles = (theme, enableColorScheme = false) => {
   var _theme$components, _theme$components$Mui;
 
-  let defaultStyles = {
+  const colorSchemeStyles = {};
+
+  if (enableColorScheme && theme.colorSchemes) {
+    Object.entries(theme.colorSchemes).forEach(([key, scheme]) => {
+      var _scheme$palette;
+
+      colorSchemeStyles[theme.getColorSchemeSelector(key).replace(/\s*&/, '')] = {
+        colorScheme: (_scheme$palette = scheme.palette) == null ? void 0 : _scheme$palette.mode
+      };
+    });
+  }
+
+  let defaultStyles = _extends({
     html: html(theme, enableColorScheme),
     '*, *::before, *::after': {
       boxSizing: 'inherit'
@@ -47,7 +59,8 @@ export const styles = (theme, enableColorScheme = false) => {
         backgroundColor: (theme.vars || theme).palette.background.default
       }
     })
-  };
+  }, colorSchemeStyles);
+
   const themeOverrides = (_theme$components = theme.components) == null ? void 0 : (_theme$components$Mui = _theme$components.MuiCssBaseline) == null ? void 0 : _theme$components$Mui.styleOverrides;
 
   if (themeOverrides) {

package/esm/Fade/Fade.js

@@ -50,8 +50,7 @@ const Fade = /*#__PURE__*/React.forwardRef(function Fade(props, ref) {
 
   const enableStrictModeCompat = true;
   const nodeRef = React.useRef(null);
-  const foreignRef = useForkRef(children.ref, ref);
-  const handleRef = useForkRef(nodeRef, foreignRef);
+  const handleRef = useForkRef(nodeRef, children.ref, ref);
 
   const normalizedTransitionCallback = callback => maybeIsAppearing => {
     if (callback) {

package/esm/Grow/Grow.js

@@ -60,8 +60,7 @@ const Grow = /*#__PURE__*/React.forwardRef(function Grow(props, ref) {
   const autoTimeout = React.useRef();
   const theme = useTheme();
   const nodeRef = React.useRef(null);
-  const foreignRef = useForkRef(children.ref, ref);
-  const handleRef = useForkRef(nodeRef, foreignRef);
+  const handleRef = useForkRef(nodeRef, children.ref, ref);
 
   const normalizedTransitionCallback = callback => maybeIsAppearing => {
     if (callback) {

package/esm/InputBase/InputBase.js

@@ -268,9 +268,7 @@ const InputBase = /*#__PURE__*/React.forwardRef(function InputBase(inProps, ref)
       }
     }
   }, []);
-  const handleInputPropsRefProp = useForkRef(inputPropsProp.ref, handleInputRefWarning);
-  const handleInputRefProp = useForkRef(inputRefProp, handleInputPropsRefProp);
-  const handleInputRef = useForkRef(inputRef, handleInputRefProp);
+  const handleInputRef = useForkRef(inputRef, inputRefProp, inputPropsProp.ref, handleInputRefWarning);
   const [focused, setFocused] = React.useState(false);
   const muiFormControl = useFormControl();
 

package/esm/Popover/Popover.js

@@ -237,6 +237,7 @@ const Popover = /*#__PURE__*/React.forwardRef(function Popover(inProps, ref) {
       transformOrigin: getTransformOriginValue(elemTransformOrigin)
     };
   }, [anchorEl, anchorReference, getAnchorOffset, getTransformOrigin, marginThreshold]);
+  const [isPositioned, setIsPositioned] = React.useState(open);
   const setPositioningStyles = React.useCallback(() => {
     const element = paperRef.current;
 
@@ -255,6 +256,7 @@ const Popover = /*#__PURE__*/React.forwardRef(function Popover(inProps, ref) {
     }
 
     element.style.transformOrigin = positioning.transformOrigin;
+    setIsPositioned(true);
   }, [getPositioningStyle]);
 
   const handleEntering = (element, isAppearing) => {
@@ -265,6 +267,10 @@ const Popover = /*#__PURE__*/React.forwardRef(function Popover(inProps, ref) {
     setPositioningStyles();
   };
 
+  const handleExited = () => {
+    setIsPositioned(false);
+  };
+
   React.useEffect(() => {
     if (open) {
       setPositioningStyles();
@@ -314,13 +320,19 @@ const Popover = /*#__PURE__*/React.forwardRef(function Popover(inProps, ref) {
       appear: true,
       in: open,
       onEntering: handleEntering,
+      onExited: handleExited,
       timeout: transitionDuration
     }, TransitionProps, {
       children: /*#__PURE__*/_jsx(PopoverPaper, _extends({
         elevation: elevation
       }, PaperProps, {
         ref: handlePaperRef,
-        className: clsx(classes.paper, PaperProps.className),
+        className: clsx(classes.paper, PaperProps.className)
+      }, isPositioned ? undefined : {
+        style: _extends({}, PaperProps.style, {
+          opacity: 0
+        })
+      }, {
         ownerState: ownerState,
         children: children
       }))

package/esm/Rating/Rating.js

@@ -350,8 +350,7 @@ const Rating = /*#__PURE__*/React.forwardRef(function Rating(inProps, ref) {
   } = useIsFocusVisible();
   const [focusVisible, setFocusVisible] = React.useState(false);
   const rootRef = React.useRef();
-  const handleFocusRef = useForkRef(focusVisibleRef, rootRef);
-  const handleRef = useForkRef(handleFocusRef, ref);
+  const handleRef = useForkRef(focusVisibleRef, rootRef, ref);
 
   const handleMouseMove = event => {
     if (onMouseMove) {

package/esm/ScopedCssBaseline/ScopedCssBaseline.js

@@ -29,6 +29,18 @@ const ScopedCssBaselineRoot = styled('div', {
   theme,
   ownerState
 }) => {
+  const colorSchemeStyles = {};
+
+  if (ownerState.enableColorScheme && theme.colorSchemes) {
+    Object.entries(theme.colorSchemes).forEach(([key, scheme]) => {
+      var _scheme$palette;
+
+      colorSchemeStyles[`&${theme.getColorSchemeSelector(key).replace(/\s*&/, '')}`] = {
+        colorScheme: (_scheme$palette = scheme.palette) == null ? void 0 : _scheme$palette.mode
+      };
+    });
+  }
+
   return _extends({}, html(theme, ownerState.enableColorScheme), body(theme), {
     '& *, & *::before, & *::after': {
       boxSizing: 'inherit'
@@ -36,7 +48,7 @@ const ScopedCssBaselineRoot = styled('div', {
     '& strong, & b': {
       fontWeight: theme.typography.fontWeightBold
     }
-  });
+  }, colorSchemeStyles);
 });
 const ScopedCssBaseline = /*#__PURE__*/React.forwardRef(function ScopedCssBaseline(inProps, ref) {
   const props = useThemeProps({