@mui/material 5.10.7 → 5.10.9

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,122 @@
 # [Versions](https://mui.com/versions/)
 
+## 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 -->

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/Fab/Fab.js

@@ -27,7 +27,7 @@ var _useThemeProps = _interopRequireDefault(require("../styles/useThemeProps"));
 
 var _fabClasses = _interopRequireWildcard(require("./fabClasses"));
 
-var _styled = _interopRequireDefault(require("../styles/styled"));
+var _styled = _interopRequireWildcard(require("../styles/styled"));
 
 var _jsxRuntime = require("react/jsx-runtime");
 
@@ -47,12 +47,14 @@ const useUtilityClasses = ownerState => {
   const slots = {
     root: ['root', variant, `size${(0, _capitalize.default)(size)}`, color === 'inherit' ? 'colorInherit' : color]
   };
-  return (0, _base.unstable_composeClasses)(slots, _fabClasses.getFabUtilityClass, classes);
+  const composedClasses = (0, _base.unstable_composeClasses)(slots, _fabClasses.getFabUtilityClass, classes);
+  return (0, _extends2.default)({}, classes, composedClasses);
 };
 
 const FabRoot = (0, _styled.default)(_ButtonBase.default, {
   name: 'MuiFab',
   slot: 'Root',
+  shouldForwardProp: prop => (0, _styled.rootShouldForwardProp)(prop) || prop === 'classes',
   overridesResolver: (props, styles) => {
     const {
       ownerState
@@ -175,6 +177,7 @@ const Fab = /*#__PURE__*/React.forwardRef(function Fab(inProps, ref) {
     ownerState: ownerState,
     ref: ref
   }, other, {
+    classes: classes,
     children: children
   }));
 });

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/FormControlLabel/FormControlLabel.d.ts

@@ -21,7 +21,7 @@ export interface FormControlLabelProps
   componentsProps?: {
     /**
      * Props applied to the Typography wrapper of the passed label.
-     * This is unused if disableTpography is true.
+     * This is unused if disableTypography is true.
      * @default {}
      */
     typography?: TypographyProps;

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

@@ -352,6 +352,7 @@ const Popover = /*#__PURE__*/React.forwardRef(function Popover(inProps, ref) {
       }, PaperProps, {
         ref: handlePaperRef,
         className: (0, _clsx.default)(classes.paper, PaperProps.className),
+        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/Fab/Fab.js

@@ -9,7 +9,7 @@ import ButtonBase from '../ButtonBase';
 import capitalize from '../utils/capitalize';
 import useThemeProps from '../styles/useThemeProps';
 import fabClasses, { getFabUtilityClass } from './fabClasses';
-import styled from '../styles/styled';
+import styled, { rootShouldForwardProp } from '../styles/styled';
 import { jsx as _jsx } from "react/jsx-runtime";
 
 const useUtilityClasses = ownerState => {
@@ -22,12 +22,14 @@ const useUtilityClasses = ownerState => {
   const slots = {
     root: ['root', variant, `size${capitalize(size)}`, color === 'inherit' ? 'colorInherit' : color]
   };
-  return composeClasses(slots, getFabUtilityClass, classes);
+  const composedClasses = composeClasses(slots, getFabUtilityClass, classes);
+  return _extends({}, classes, composedClasses);
 };
 
 const FabRoot = styled(ButtonBase, {
   name: 'MuiFab',
   slot: 'Root',
+  shouldForwardProp: prop => rootShouldForwardProp(prop) || prop === 'classes',
   overridesResolver: (props, styles) => {
     const {
       ownerState
@@ -153,6 +155,7 @@ const Fab = /*#__PURE__*/React.forwardRef(function Fab(inProps, ref) {
     ownerState: ownerState,
     ref: ref
   }, other, {
+    classes: classes,
     children: children
   }));
 });

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

@@ -321,6 +321,7 @@ const Popover = /*#__PURE__*/React.forwardRef(function Popover(inProps, ref) {
       }, PaperProps, {
         ref: handlePaperRef,
         className: clsx(classes.paper, PaperProps.className),
+        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({

package/esm/Slide/Slide.js

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

package/esm/Tooltip/Tooltip.js

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

package/esm/Zoom/Zoom.js

@@ -50,8 +50,7 @@ const Zoom = /*#__PURE__*/React.forwardRef(function Zoom(props, ref) {
         other = _objectWithoutPropertiesLoose(props, _excluded);
 
   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/locale/index.js

@@ -158,6 +158,86 @@ export const arEG = {
     }
   }
 };
+export const arSA = {
+  components: {
+    MuiBreadcrumbs: {
+      defaultProps: {
+        expandText: 'إظهار المسار'
+      }
+    },
+    MuiTablePagination: {
+      defaultProps: {
+        getItemAriaLabel: type => {
+          if (type === 'first') {
+            return 'الانتقال إلى الصفحة الأولى';
+          }
+
+          if (type === 'last') {
+            return 'الانتقال إلى الصفحة الأخيرة';
+          }
+
+          if (type === 'next') {
+            return 'الانتقال إلى الصفحة التالية';
+          } // if (type === 'previous') {
+
+
+          return 'الانتقال إلى الصفحة السابقة';
+        },
+        labelRowsPerPage: 'عدد الصفوف في الصفحة:',
+        labelDisplayedRows: ({
+          from,
+          to,
+          count
+        }) => `${from}–${to} من ${count !== -1 ? count : ` أكثر من${to}`}`
+      }
+    },
+    MuiRating: {
+      defaultProps: {
+        getLabelText: value => `${value} ${value !== 1 ? 'نجوم' : 'نجمة'}`,
+        emptyLabelText: 'فارغ'
+      }
+    },
+    MuiAutocomplete: {
+      defaultProps: {
+        clearText: 'مسح',
+        closeText: 'إغلاق',
+        loadingText: 'جار التحميل...',
+        noOptionsText: 'لا توجد خيارات',
+        openText: 'فتح'
+      }
+    },
+    MuiAlert: {
+      defaultProps: {
+        closeText: 'إغلاق'
+      }
+    },
+    MuiPagination: {
+      defaultProps: {
+        'aria-label': 'التنقل عبر الصفحات',
+        getItemAriaLabel: (type, page, selected) => {
+          if (type === 'page') {
+            return `${selected ? '' : 'الانتقال إلى '} صفحة ${page}`;
+          }
+
+          if (type === 'first') {
+            return 'الانتقال إلى الصفحة الأولى';
+          }
+
+          if (type === 'last') {
+            return 'الانتقال الي الصفحة الأخيرة';
+          }
+
+          if (type === 'next') {
+            return 'الانتقال إلى الصفحة التالية';
+          } // if (type === 'previous') {
+
+
+          return 'الانتقال إلى الصفحة السابقة';
+        }
+      }
+    }
+  }
+};
 export const arSD = {
   components: {
     MuiBreadcrumbs: {
@@ -3752,7 +3832,7 @@ export const zhTW = {
 
           return '上一頁';
         },
-        labelRowsPerPage: '每行行數:',
+        labelRowsPerPage: '每頁行數:',
         labelDisplayedRows: ({
           from,
           to,

package/index.js

@@ -1,4 +1,4 @@
-/** @license MUI v5.10.7
+/** @license MUI v5.10.9
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.

package/legacy/ButtonBase/ButtonBase.js

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