@mui/material 6.0.0-dev.240424162023-9968b4889d → 6.0.0

package/node/Radio/Radio.js

@@ -6,8 +6,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _clsx = _interopRequireDefault(require("clsx"));
@@ -20,13 +18,13 @@ var _capitalize = _interopRequireDefault(require("../utils/capitalize"));
 var _createChainedFunction = _interopRequireDefault(require("../utils/createChainedFunction"));
 var _useRadioGroup = _interopRequireDefault(require("../RadioGroup/useRadioGroup"));
 var _radioClasses = _interopRequireWildcard(require("./radioClasses"));
-var _styled = require("../styles/styled");
+var _rootShouldForwardProp = _interopRequireDefault(require("../styles/rootShouldForwardProp"));
 var _zeroStyled = require("../zero-styled");
+var _memoTheme = _interopRequireDefault(require("../utils/memoTheme"));
+var _DefaultPropsProvider = require("../DefaultPropsProvider");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["checked", "checkedIcon", "color", "icon", "name", "onChange", "size", "className"];
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-const useThemeProps = (0, _zeroStyled.createUseThemeProps)('MuiRadio');
 const useUtilityClasses = ownerState => {
   const {
     classes,
@@ -36,10 +34,13 @@ const useUtilityClasses = ownerState => {
   const slots = {
     root: ['root', `color${(0, _capitalize.default)(color)}`, size !== 'medium' && `size${(0, _capitalize.default)(size)}`]
   };
-  return (0, _extends2.default)({}, classes, (0, _composeClasses.default)(slots, _radioClasses.getRadioUtilityClass, classes));
+  return {
+    ...classes,
+    ...(0, _composeClasses.default)(slots, _radioClasses.getRadioUtilityClass, classes)
+  };
 };
 const RadioRoot = (0, _zeroStyled.styled)(_SwitchBase.default, {
-  shouldForwardProp: prop => (0, _styled.rootShouldForwardProp)(prop) || prop === 'classes',
+  shouldForwardProp: prop => (0, _rootShouldForwardProp.default)(prop) || prop === 'classes',
   name: 'MuiRadio',
   slot: 'Root',
   overridesResolver: (props, styles) => {
@@ -48,7 +49,7 @@ const RadioRoot = (0, _zeroStyled.styled)(_SwitchBase.default, {
     } = props;
     return [styles.root, ownerState.size !== 'medium' && styles[`size${(0, _capitalize.default)(ownerState.size)}`], styles[`color${(0, _capitalize.default)(ownerState.color)}`]];
   }
-})(({
+})((0, _memoTheme.default)(({
   theme
 }) => ({
   color: (theme.vars || theme).palette.text.secondary,
@@ -65,7 +66,7 @@ const RadioRoot = (0, _zeroStyled.styled)(_SwitchBase.default, {
         backgroundColor: theme.vars ? `rgba(${theme.vars.palette.action.activeChannel} / ${theme.vars.palette.action.hoverOpacity})` : (0, _colorManipulator.alpha)(theme.palette.action.active, theme.palette.action.hoverOpacity)
       }
     }
-  }, ...Object.entries(theme.palette).filter(([, palette]) => palette.main).map(([color]) => ({
+  }, ...Object.entries(theme.palette).filter(([, palette]) => palette && palette.main).map(([color]) => ({
     props: {
       color,
       disableRipple: false
@@ -75,7 +76,7 @@ const RadioRoot = (0, _zeroStyled.styled)(_SwitchBase.default, {
         backgroundColor: theme.vars ? `rgba(${theme.vars.palette[color].mainChannel} / ${theme.vars.palette.action.hoverOpacity})` : (0, _colorManipulator.alpha)(theme.palette[color].main, theme.palette.action.hoverOpacity)
       }
     }
-  })), ...Object.entries(theme.palette).filter(([, palette]) => palette.main).map(([color]) => ({
+  })), ...Object.entries(theme.palette).filter(([, palette]) => palette && palette.main).map(([color]) => ({
     props: {
       color
     },
@@ -98,7 +99,7 @@ const RadioRoot = (0, _zeroStyled.styled)(_SwitchBase.default, {
       }
     }
   }]
-}));
+})));
 function areEqualValues(a, b) {
   if (typeof b === 'object' && b !== null) {
     return a === b;
@@ -112,26 +113,28 @@ const defaultCheckedIcon = /*#__PURE__*/(0, _jsxRuntime.jsx)(_RadioButtonIcon.de
 });
 const defaultIcon = /*#__PURE__*/(0, _jsxRuntime.jsx)(_RadioButtonIcon.default, {});
 const Radio = /*#__PURE__*/React.forwardRef(function Radio(inProps, ref) {
-  var _defaultIcon$props$fo, _defaultCheckedIcon$p;
-  const props = useThemeProps({
+  const props = (0, _DefaultPropsProvider.useDefaultProps)({
     props: inProps,
     name: 'MuiRadio'
   });
   const {
-      checked: checkedProp,
-      checkedIcon = defaultCheckedIcon,
-      color = 'primary',
-      icon = defaultIcon,
-      name: nameProp,
-      onChange: onChangeProp,
-      size = 'medium',
-      className
-    } = props,
-    other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
-  const ownerState = (0, _extends2.default)({}, props, {
+    checked: checkedProp,
+    checkedIcon = defaultCheckedIcon,
+    color = 'primary',
+    icon = defaultIcon,
+    name: nameProp,
+    onChange: onChangeProp,
+    size = 'medium',
+    className,
+    disableRipple = false,
+    ...other
+  } = props;
+  const ownerState = {
+    ...props,
+    disableRipple,
     color,
     size
-  });
+  };
   const classes = useUtilityClasses(ownerState);
   const radioGroup = (0, _useRadioGroup.default)();
   let checked = checkedProp;
@@ -145,13 +148,13 @@ const Radio = /*#__PURE__*/React.forwardRef(function Radio(inProps, ref) {
       name = radioGroup.name;
     }
   }
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(RadioRoot, (0, _extends2.default)({
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(RadioRoot, {
     type: "radio",
     icon: /*#__PURE__*/React.cloneElement(icon, {
-      fontSize: (_defaultIcon$props$fo = defaultIcon.props.fontSize) != null ? _defaultIcon$props$fo : size
+      fontSize: defaultIcon.props.fontSize ?? size
     }),
     checkedIcon: /*#__PURE__*/React.cloneElement(checkedIcon, {
-      fontSize: (_defaultCheckedIcon$p = defaultCheckedIcon.props.fontSize) != null ? _defaultCheckedIcon$p : size
+      fontSize: defaultCheckedIcon.props.fontSize ?? size
     }),
     ownerState: ownerState,
     classes: classes,
@@ -159,8 +162,9 @@ const Radio = /*#__PURE__*/React.forwardRef(function Radio(inProps, ref) {
     checked: checked,
     onChange: onChange,
     ref: ref,
-    className: (0, _clsx.default)(classes.root, className)
-  }, other));
+    className: (0, _clsx.default)(classes.root, className),
+    ...other
+  });
 });
 process.env.NODE_ENV !== "production" ? Radio.propTypes /* remove-proptypes */ = {
   // ┌────────────────────────────── Warning ──────────────────────────────┐

package/node/Radio/RadioButtonIcon.js

@@ -6,18 +6,18 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _RadioButtonUnchecked = _interopRequireDefault(require("../internal/svg-icons/RadioButtonUnchecked"));
 var _RadioButtonChecked = _interopRequireDefault(require("../internal/svg-icons/RadioButtonChecked"));
-var _styled = require("../styles/styled");
+var _rootShouldForwardProp = _interopRequireDefault(require("../styles/rootShouldForwardProp"));
 var _zeroStyled = require("../zero-styled");
+var _memoTheme = _interopRequireDefault(require("../utils/memoTheme"));
 var _jsxRuntime = require("react/jsx-runtime");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 const RadioButtonIconRoot = (0, _zeroStyled.styled)('span', {
-  shouldForwardProp: _styled.rootShouldForwardProp
+  shouldForwardProp: _rootShouldForwardProp.default
 })({
   position: 'relative',
   display: 'flex'
@@ -26,7 +26,7 @@ const RadioButtonIconBackground = (0, _zeroStyled.styled)(_RadioButtonUnchecked.
   // Scale applied to prevent dot misalignment in Safari
   transform: 'scale(1)'
 });
-const RadioButtonIconDot = (0, _zeroStyled.styled)(_RadioButtonChecked.default)(({
+const RadioButtonIconDot = (0, _zeroStyled.styled)(_RadioButtonChecked.default)((0, _memoTheme.default)(({
   theme
 }) => ({
   left: 0,
@@ -48,7 +48,7 @@ const RadioButtonIconDot = (0, _zeroStyled.styled)(_RadioButtonChecked.default)(
       })
     }
   }]
-}));
+})));
 
 /**
  * @ignore - internal component.
@@ -59,9 +59,10 @@ function RadioButtonIcon(props) {
     classes = {},
     fontSize
   } = props;
-  const ownerState = (0, _extends2.default)({}, props, {
+  const ownerState = {
+    ...props,
     checked
-  });
+  };
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(RadioButtonIconRoot, {
     className: classes.root,
     ownerState: ownerState,

package/node/RadioGroup/RadioGroup.js

@@ -6,8 +6,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _clsx = _interopRequireDefault(require("clsx"));
@@ -19,7 +17,6 @@ var _useControlled = _interopRequireDefault(require("../utils/useControlled"));
 var _RadioGroupContext = _interopRequireDefault(require("./RadioGroupContext"));
 var _useId = _interopRequireDefault(require("../utils/useId"));
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["actions", "children", "className", "defaultValue", "name", "onChange", "value"];
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 const useUtilityClasses = props => {
@@ -35,17 +32,17 @@ const useUtilityClasses = props => {
 };
 const RadioGroup = /*#__PURE__*/React.forwardRef(function RadioGroup(props, ref) {
   const {
-      // private
-      // eslint-disable-next-line react/prop-types
-      actions,
-      children,
-      className,
-      defaultValue,
-      name: nameProp,
-      onChange,
-      value: valueProp
-    } = props,
-    other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
+    // private
+    // eslint-disable-next-line react/prop-types
+    actions,
+    children,
+    className,
+    defaultValue,
+    name: nameProp,
+    onChange,
+    value: valueProp,
+    ...other
+  } = props;
   const rootRef = React.useRef(null);
   const classes = useUtilityClasses(props);
   const [value, setValueState] = (0, _useControlled.default)({
@@ -78,13 +75,13 @@ const RadioGroup = /*#__PURE__*/React.forwardRef(function RadioGroup(props, ref)
   }), [name, onChange, setValueState, value]);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_RadioGroupContext.default.Provider, {
     value: contextValue,
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_FormGroup.default, (0, _extends2.default)({
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_FormGroup.default, {
       role: "radiogroup",
       ref: handleRef,
-      className: (0, _clsx.default)(classes.root, className)
-    }, other, {
+      className: (0, _clsx.default)(classes.root, className),
+      ...other,
       children: children
-    }))
+    })
   });
 });
 process.env.NODE_ENV !== "production" ? RadioGroup.propTypes /* remove-proptypes */ = {

package/node/Rating/Rating.js

@@ -6,8 +6,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _clsx = _interopRequireDefault(require("clsx"));
@@ -16,15 +14,16 @@ var _visuallyHidden = _interopRequireDefault(require("@mui/utils/visuallyHidden"
 var _chainPropTypes = _interopRequireDefault(require("@mui/utils/chainPropTypes"));
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
 var _RtlProvider = require("@mui/system/RtlProvider");
+var _isFocusVisible = _interopRequireDefault(require("@mui/utils/isFocusVisible"));
 var _utils = require("../utils");
 var _Star = _interopRequireDefault(require("../internal/svg-icons/Star"));
 var _StarBorder = _interopRequireDefault(require("../internal/svg-icons/StarBorder"));
-var _useThemeProps = _interopRequireDefault(require("../styles/useThemeProps"));
-var _styled = _interopRequireWildcard(require("../styles/styled"));
+var _zeroStyled = require("../zero-styled");
+var _memoTheme = _interopRequireDefault(require("../utils/memoTheme"));
+var _DefaultPropsProvider = require("../DefaultPropsProvider");
+var _slotShouldForwardProp = _interopRequireDefault(require("../styles/slotShouldForwardProp"));
 var _ratingClasses = _interopRequireWildcard(require("./ratingClasses"));
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["value"],
-  _excluded2 = ["className", "defaultValue", "disabled", "emptyIcon", "emptyLabelText", "getLabelText", "highlightSelectedOnly", "icon", "IconContainerComponent", "max", "name", "onChange", "onChangeActive", "onMouseLeave", "onMouseMove", "precision", "readOnly", "size", "value"];
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 function getDecimalPrecision(num) {
@@ -62,7 +61,7 @@ const useUtilityClasses = ownerState => {
   };
   return (0, _composeClasses.default)(slots, _ratingClasses.getRatingUtilityClass, classes);
 };
-const RatingRoot = (0, _styled.default)('span', {
+const RatingRoot = (0, _zeroStyled.styled)('span', {
   name: 'MuiRating',
   slot: 'Root',
   overridesResolver: (props, styles) => {
@@ -73,7 +72,7 @@ const RatingRoot = (0, _styled.default)('span', {
       [`& .${_ratingClasses.default.visuallyHidden}`]: styles.visuallyHidden
     }, styles.root, styles[`size${(0, _utils.capitalize)(ownerState.size)}`], ownerState.readOnly && styles.readOnly];
   }
-})(({
+})((0, _memoTheme.default)(({
   theme
 }) => ({
   display: 'inline-flex',
@@ -116,8 +115,8 @@ const RatingRoot = (0, _styled.default)('span', {
       pointerEvents: 'none'
     }
   }]
-}));
-const RatingLabel = (0, _styled.default)('label', {
+})));
+const RatingLabel = (0, _zeroStyled.styled)('label', {
   name: 'MuiRating',
   slot: 'Label',
   overridesResolver: ({
@@ -138,7 +137,7 @@ const RatingLabel = (0, _styled.default)('label', {
     }
   }]
 });
-const RatingIcon = (0, _styled.default)('span', {
+const RatingIcon = (0, _zeroStyled.styled)('span', {
   name: 'MuiRating',
   slot: 'Icon',
   overridesResolver: (props, styles) => {
@@ -147,7 +146,7 @@ const RatingIcon = (0, _styled.default)('span', {
     } = props;
     return [styles.icon, ownerState.iconEmpty && styles.iconEmpty, ownerState.iconFilled && styles.iconFilled, ownerState.iconHover && styles.iconHover, ownerState.iconFocus && styles.iconFocus, ownerState.iconActive && styles.iconActive];
   }
-})(({
+})((0, _memoTheme.default)(({
   theme
 }) => ({
   // Fit wrapper to actual icon size.
@@ -173,11 +172,11 @@ const RatingIcon = (0, _styled.default)('span', {
       color: (theme.vars || theme).palette.action.disabled
     }
   }]
-}));
-const RatingDecimal = (0, _styled.default)('span', {
+})));
+const RatingDecimal = (0, _zeroStyled.styled)('span', {
   name: 'MuiRating',
   slot: 'Decimal',
-  shouldForwardProp: prop => (0, _styled.slotShouldForwardProp)(prop) && prop !== 'iconActive',
+  shouldForwardProp: prop => (0, _slotShouldForwardProp.default)(prop) && prop !== 'iconActive',
   overridesResolver: (props, styles) => {
     const {
       iconActive
@@ -196,8 +195,13 @@ const RatingDecimal = (0, _styled.default)('span', {
   }]
 });
 function IconContainer(props) {
-  const other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)("span", (0, _extends2.default)({}, other));
+  const {
+    value,
+    ...other
+  } = props;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+    ...other
+  });
 }
 process.env.NODE_ENV !== "production" ? IconContainer.propTypes = {
   value: _propTypes.default.number.isRequired
@@ -235,32 +239,35 @@ function RatingItem(props) {
     as: IconContainerComponent,
     value: itemValue,
     className: (0, _clsx.default)(classes.icon, isFilled ? classes.iconFilled : classes.iconEmpty, isHovered && classes.iconHover, isFocused && classes.iconFocus, isActive && classes.iconActive),
-    ownerState: (0, _extends2.default)({}, ownerState, {
+    ownerState: {
+      ...ownerState,
       iconEmpty: !isFilled,
       iconFilled: isFilled,
       iconHover: isHovered,
       iconFocus: isFocused,
       iconActive: isActive
-    }),
+    },
     children: emptyIcon && !isFilled ? emptyIcon : icon
   });
   if (readOnly) {
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)("span", (0, _extends2.default)({}, labelProps, {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+      ...labelProps,
       children: container
-    }));
+    });
   }
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(RatingLabel, (0, _extends2.default)({
-      ownerState: (0, _extends2.default)({}, ownerState, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(RatingLabel, {
+      ownerState: {
+        ...ownerState,
         emptyValueFocused: undefined
-      }),
-      htmlFor: id
-    }, labelProps, {
+      },
+      htmlFor: id,
+      ...labelProps,
       children: [container, /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
         className: classes.visuallyHidden,
         children: getLabelText(itemValue)
       })]
-    })), /*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
       className: classes.visuallyHidden,
       onFocus: onFocus,
       onBlur: onBlur,
@@ -305,35 +312,35 @@ const defaultEmptyIcon = /*#__PURE__*/(0, _jsxRuntime.jsx)(_StarBorder.default,
   fontSize: "inherit"
 });
 function defaultLabelText(value) {
-  return `${value} Star${value !== 1 ? 's' : ''}`;
+  return `${value || '0'} Star${value !== 1 ? 's' : ''}`;
 }
 const Rating = /*#__PURE__*/React.forwardRef(function Rating(inProps, ref) {
-  const props = (0, _useThemeProps.default)({
+  const props = (0, _DefaultPropsProvider.useDefaultProps)({
     name: 'MuiRating',
     props: inProps
   });
   const {
-      className,
-      defaultValue = null,
-      disabled = false,
-      emptyIcon = defaultEmptyIcon,
-      emptyLabelText = 'Empty',
-      getLabelText = defaultLabelText,
-      highlightSelectedOnly = false,
-      icon = defaultIcon,
-      IconContainerComponent = IconContainer,
-      max = 5,
-      name: nameProp,
-      onChange,
-      onChangeActive,
-      onMouseLeave,
-      onMouseMove,
-      precision = 1,
-      readOnly = false,
-      size = 'medium',
-      value: valueProp
-    } = props,
-    other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded2);
+    className,
+    defaultValue = null,
+    disabled = false,
+    emptyIcon = defaultEmptyIcon,
+    emptyLabelText = 'Empty',
+    getLabelText = defaultLabelText,
+    highlightSelectedOnly = false,
+    icon = defaultIcon,
+    IconContainerComponent = IconContainer,
+    max = 5,
+    name: nameProp,
+    onChange,
+    onChangeActive,
+    onMouseLeave,
+    onMouseMove,
+    precision = 1,
+    readOnly = false,
+    size = 'medium',
+    value: valueProp,
+    ...other
+  } = props;
   const name = (0, _utils.unstable_useId)(nameProp);
   const [valueDerived, setValueState] = (0, _utils.useControlled)({
     controlled: valueProp,
@@ -356,15 +363,9 @@ const Rating = /*#__PURE__*/React.forwardRef(function Rating(inProps, ref) {
   if (focus !== -1) {
     value = focus;
   }
-  const {
-    isFocusVisibleRef,
-    onBlur: handleBlurVisible,
-    onFocus: handleFocusVisible,
-    ref: focusVisibleRef
-  } = (0, _utils.useIsFocusVisible)();
   const [focusVisible, setFocusVisible] = React.useState(false);
   const rootRef = React.useRef();
-  const handleRef = (0, _utils.useForkRef)(focusVisibleRef, rootRef, ref);
+  const handleRef = (0, _utils.useForkRef)(rootRef, ref);
   const handleMouseMove = event => {
     if (onMouseMove) {
       onMouseMove(event);
@@ -434,8 +435,7 @@ const Rating = /*#__PURE__*/React.forwardRef(function Rating(inProps, ref) {
     }
   };
   const handleFocus = event => {
-    handleFocusVisible(event);
-    if (isFocusVisibleRef.current === true) {
+    if ((0, _isFocusVisible.default)(event.target)) {
       setFocusVisible(true);
     }
     const newFocus = parseFloat(event.target.value);
@@ -448,8 +448,7 @@ const Rating = /*#__PURE__*/React.forwardRef(function Rating(inProps, ref) {
     if (hover !== -1) {
       return;
     }
-    handleBlurVisible(event);
-    if (isFocusVisibleRef.current === false) {
+    if (!(0, _isFocusVisible.default)(event.target)) {
       setFocusVisible(false);
     }
     const newFocus = -1;
@@ -459,7 +458,8 @@ const Rating = /*#__PURE__*/React.forwardRef(function Rating(inProps, ref) {
     }));
   };
   const [emptyValueFocused, setEmptyValueFocused] = React.useState(false);
-  const ownerState = (0, _extends2.default)({}, props, {
+  const ownerState = {
+    ...props,
     defaultValue,
     disabled,
     emptyIcon,
@@ -473,17 +473,17 @@ const Rating = /*#__PURE__*/React.forwardRef(function Rating(inProps, ref) {
     precision,
     readOnly,
     size
-  });
+  };
   const classes = useUtilityClasses(ownerState);
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(RatingRoot, (0, _extends2.default)({
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(RatingRoot, {
     ref: handleRef,
     onMouseMove: handleMouseMove,
     onMouseLeave: handleMouseLeave,
     className: (0, _clsx.default)(classes.root, className, readOnly && 'MuiRating-readOnly'),
     ownerState: ownerState,
     role: readOnly ? 'img' : null,
-    "aria-label": readOnly ? getLabelText(value) : null
-  }, other, {
+    "aria-label": readOnly ? getLabelText(value) : null,
+    ...other,
     children: [Array.from(new Array(max)).map((_, index) => {
       const itemValue = index + 1;
       const ratingItemProps = {
@@ -515,7 +515,8 @@ const Rating = /*#__PURE__*/React.forwardRef(function Rating(inProps, ref) {
           iconActive: isActive,
           children: items.map(($, indexDecimal) => {
             const itemDecimalValue = roundValueToPrecision(itemValue - 1 + (indexDecimal + 1) * precision, precision);
-            return /*#__PURE__*/(0, _jsxRuntime.jsx)(RatingItem, (0, _extends2.default)({}, ratingItemProps, {
+            return /*#__PURE__*/(0, _jsxRuntime.jsx)(RatingItem, {
+              ...ratingItemProps,
               // The icon is already displayed as active
               isActive: false,
               itemValue: itemDecimalValue,
@@ -526,14 +527,15 @@ const Rating = /*#__PURE__*/React.forwardRef(function Rating(inProps, ref) {
                   position: 'absolute'
                 }
               }
-            }), itemDecimalValue);
+            }, itemDecimalValue);
           })
         }, itemValue);
       }
-      return /*#__PURE__*/(0, _jsxRuntime.jsx)(RatingItem, (0, _extends2.default)({}, ratingItemProps, {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(RatingItem, {
+        ...ratingItemProps,
         isActive: isActive,
         itemValue: itemValue
-      }), itemValue);
+      }, itemValue);
     }), !readOnly && !disabled && /*#__PURE__*/(0, _jsxRuntime.jsxs)(RatingLabel, {
       className: (0, _clsx.default)(classes.label, classes.labelEmptyValue),
       ownerState: ownerState,
@@ -552,7 +554,7 @@ const Rating = /*#__PURE__*/React.forwardRef(function Rating(inProps, ref) {
         children: emptyLabelText
       })]
     })]
-  }));
+  });
 });
 process.env.NODE_ENV !== "production" ? Rating.propTypes /* remove-proptypes */ = {
   // ┌────────────────────────────── Warning ──────────────────────────────┐
@@ -595,7 +597,7 @@ process.env.NODE_ENV !== "production" ? Rating.propTypes /* remove-proptypes */
    * @param {number} value The rating label's value to format.
    * @returns {string}
    * @default function defaultLabelText(value) {
-   *   return `${value} Star${value !== 1 ? 's' : ''}`;
+   *   return `${value || '0'} Star${value !== 1 ? 's' : ''}`;
    * }
    */
   getLabelText: _propTypes.default.func,