@mui/material 5.11.9 → 5.11.11

package/node/Backdrop/Backdrop.js

@@ -16,7 +16,7 @@ var _useThemeProps = _interopRequireDefault(require("../styles/useThemeProps"));
 var _Fade = _interopRequireDefault(require("../Fade"));
 var _backdropClasses = require("./backdropClasses");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["children", "component", "components", "componentsProps", "className", "invisible", "open", "slotProps", "slots", "transitionDuration", "TransitionComponent"];
+const _excluded = ["children", "className", "component", "components", "componentsProps", "invisible", "open", "slotProps", "slots", "TransitionComponent", "transitionDuration"];
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 const useUtilityClasses = ownerState => {
@@ -62,17 +62,16 @@ const Backdrop = /*#__PURE__*/React.forwardRef(function Backdrop(inProps, ref) {
   });
   const {
       children,
+      className,
       component = 'div',
       components = {},
       componentsProps = {},
-      className,
       invisible = false,
       open,
       slotProps = {},
       slots = {},
-      transitionDuration,
-      // eslint-disable-next-line react/prop-types
-      TransitionComponent = _Fade.default
+      TransitionComponent = _Fade.default,
+      transitionDuration
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const ownerState = (0, _extends2.default)({}, props, {
@@ -177,6 +176,12 @@ process.env.NODE_ENV !== "production" ? Backdrop.propTypes /* remove-proptypes *
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
   sx: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object, _propTypes.default.bool])), _propTypes.default.func, _propTypes.default.object]),
+  /**
+   * The component used for the transition.
+   * [Follow this guide](/material-ui/transitions/#transitioncomponent-prop) to learn more about the requirements for this component.
+   * @default Fade
+   */
+  TransitionComponent: _propTypes.default.elementType,
   /**
    * The duration for the transition, in milliseconds.
    * You may specify a single timeout for all transitions, or individually with an object.

package/node/Badge/Badge.js

@@ -12,14 +12,14 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _clsx = _interopRequireDefault(require("clsx"));
 var _utils = require("@mui/utils");
 var _composeClasses = _interopRequireDefault(require("@mui/base/composeClasses"));
-var _BadgeUnstyled = _interopRequireDefault(require("@mui/base/BadgeUnstyled"));
+var _useBadge = _interopRequireDefault(require("@mui/base/useBadge"));
+var _base = require("@mui/base");
 var _styled = _interopRequireDefault(require("../styles/styled"));
 var _useThemeProps = _interopRequireDefault(require("../styles/useThemeProps"));
-var _shouldSpreadAdditionalProps = _interopRequireDefault(require("../utils/shouldSpreadAdditionalProps"));
 var _capitalize = _interopRequireDefault(require("../utils/capitalize"));
 var _badgeClasses = _interopRequireWildcard(require("./badgeClasses"));
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["anchorOrigin", "className", "component", "components", "componentsProps", "overlap", "color", "invisible", "max", "badgeContent", "slots", "slotProps", "showZero", "variant"];
+const _excluded = ["anchorOrigin", "className", "classes", "component", "components", "componentsProps", "children", "overlap", "color", "invisible", "max", "badgeContent", "slots", "slotProps", "showZero", "variant"];
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 const RADIUS_STANDARD = 10;
@@ -175,13 +175,14 @@ const Badge = /*#__PURE__*/React.forwardRef(function Badge(inProps, ref) {
         horizontal: 'right'
       },
       className,
-      component = 'span',
+      component,
       components = {},
       componentsProps = {},
+      children,
       overlap: overlapProp = 'rectangular',
       color: colorProp = 'default',
       invisible: invisibleProp = false,
-      max,
+      max: maxProp = 99,
       badgeContent: badgeContentProp,
       slots,
       slotProps,
@@ -189,73 +190,71 @@ const Badge = /*#__PURE__*/React.forwardRef(function Badge(inProps, ref) {
       variant: variantProp = 'standard'
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
+  const {
+    badgeContent,
+    invisible: invisibleFromHook,
+    max,
+    displayValue: displayValueFromHook
+  } = (0, _useBadge.default)({
+    max: maxProp,
+    invisible: invisibleProp,
+    badgeContent: badgeContentProp,
+    showZero
+  });
   const prevProps = (0, _utils.usePreviousProps)({
     anchorOrigin: anchorOriginProp,
     color: colorProp,
     overlap: overlapProp,
-    variant: variantProp
+    variant: variantProp,
+    badgeContent: badgeContentProp
   });
-  let invisible = invisibleProp;
-  if (invisibleProp === false && (badgeContentProp === 0 && !showZero || badgeContentProp == null && variantProp !== 'dot')) {
-    invisible = true;
-  }
+  const invisible = invisibleFromHook || badgeContent == null && variantProp !== 'dot';
   const {
     color = colorProp,
     overlap = overlapProp,
     anchorOrigin = anchorOriginProp,
     variant = variantProp
   } = invisible ? prevProps : props;
+  const displayValue = variant !== 'dot' ? displayValueFromHook : undefined;
   const ownerState = (0, _extends2.default)({}, props, {
-    anchorOrigin,
+    badgeContent,
     invisible,
+    max,
+    displayValue,
+    showZero,
+    anchorOrigin,
     color,
     overlap,
     variant
   });
   const classes = useUtilityClasses(ownerState);
-  let displayValue;
-  if (variant !== 'dot') {
-    displayValue = badgeContentProp && Number(badgeContentProp) > max ? `${max}+` : badgeContentProp;
-  }
 
   // support both `slots` and `components` for backward compatibility
   const RootSlot = (_ref = (_slots$root = slots == null ? void 0 : slots.root) != null ? _slots$root : components.Root) != null ? _ref : BadgeRoot;
   const BadgeSlot = (_ref2 = (_slots$badge = slots == null ? void 0 : slots.badge) != null ? _slots$badge : components.Badge) != null ? _ref2 : BadgeBadge;
   const rootSlotProps = (_slotProps$root = slotProps == null ? void 0 : slotProps.root) != null ? _slotProps$root : componentsProps.root;
   const badgeSlotProps = (_slotProps$badge = slotProps == null ? void 0 : slotProps.badge) != null ? _slotProps$badge : componentsProps.badge;
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_BadgeUnstyled.default, (0, _extends2.default)({
-    invisible: invisibleProp,
-    badgeContent: displayValue,
-    showZero: showZero,
-    max: max
-  }, other, {
-    slots: {
-      root: RootSlot,
-      badge: BadgeSlot
-    },
-    className: (0, _clsx.default)(rootSlotProps == null ? void 0 : rootSlotProps.className, classes.root, className),
-    slotProps: {
-      root: (0, _extends2.default)({}, rootSlotProps, (0, _shouldSpreadAdditionalProps.default)(RootSlot) && {
-        as: component,
-        ownerState: (0, _extends2.default)({}, rootSlotProps == null ? void 0 : rootSlotProps.ownerState, {
-          anchorOrigin,
-          color,
-          overlap,
-          variant
-        })
-      }),
-      badge: (0, _extends2.default)({}, badgeSlotProps, {
-        className: (0, _clsx.default)(classes.badge, badgeSlotProps == null ? void 0 : badgeSlotProps.className)
-      }, (0, _shouldSpreadAdditionalProps.default)(BadgeSlot) && {
-        ownerState: (0, _extends2.default)({}, badgeSlotProps == null ? void 0 : badgeSlotProps.ownerState, {
-          anchorOrigin,
-          color,
-          overlap,
-          variant
-        })
-      })
+  const rootProps = (0, _base.useSlotProps)({
+    elementType: RootSlot,
+    externalSlotProps: rootSlotProps,
+    externalForwardedProps: other,
+    additionalProps: {
+      ref,
+      as: component
     },
-    ref: ref
+    ownerState,
+    className: (0, _clsx.default)(rootSlotProps == null ? void 0 : rootSlotProps.className, classes.root, className)
+  });
+  const badgeProps = (0, _base.useSlotProps)({
+    elementType: BadgeSlot,
+    externalSlotProps: badgeSlotProps,
+    ownerState,
+    className: (0, _clsx.default)(classes.badge, badgeSlotProps == null ? void 0 : badgeSlotProps.className)
+  });
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(RootSlot, (0, _extends2.default)({}, rootProps, {
+    children: [children, /*#__PURE__*/(0, _jsxRuntime.jsx)(BadgeSlot, (0, _extends2.default)({}, badgeProps, {
+      children: displayValue
+    }))]
   }));
 });
 process.env.NODE_ENV !== "production" ? Badge.propTypes /* remove-proptypes */ = {

package/node/Container/Container.js

@@ -10,8 +10,6 @@ var _system = require("@mui/system");
 var _capitalize = _interopRequireDefault(require("../utils/capitalize"));
 var _styled = _interopRequireDefault(require("../styles/styled"));
 var _useThemeProps = _interopRequireDefault(require("../styles/useThemeProps"));
-/* eslint-disable material-ui/mui-name-matches-component-name */
-
 const Container = (0, _system.createContainer)({
   createStyledComponent: (0, _styled.default)('div', {
     name: 'MuiContainer',

package/node/Dialog/DialogContext.js

@@ -4,8 +4,10 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _react = require("react");
-const DialogContext = /*#__PURE__*/(0, _react.createContext)({});
+var React = _interopRequireWildcard(require("react"));
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+const DialogContext = /*#__PURE__*/React.createContext({});
 if (process.env.NODE_ENV !== 'production') {
   DialogContext.displayName = 'DialogContext';
 }

package/node/InputBase/InputBase.js

@@ -447,7 +447,7 @@ const InputBase = /*#__PURE__*/React.forwardRef(function InputBase(inProps, ref)
       ref: ref,
       onClick: handleClick
     }, other, {
-      className: (0, _clsx.default)(classes.root, rootProps.className, className),
+      className: (0, _clsx.default)(classes.root, rootProps.className, className, readOnly && 'MuiInputBase-readOnly'),
       children: [startAdornment, /*#__PURE__*/(0, _jsxRuntime.jsx)(_FormControlContext.default.Provider, {
         value: null,
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Input, (0, _extends2.default)({
@@ -474,7 +474,7 @@ const InputBase = /*#__PURE__*/React.forwardRef(function InputBase(inProps, ref)
           ownerState: (0, _extends2.default)({}, ownerState, inputProps.ownerState)
         }, {
           ref: handleInputRef,
-          className: (0, _clsx.default)(classes.input, inputProps.className),
+          className: (0, _clsx.default)(classes.input, inputProps.className, readOnly && 'MuiInputBase-readOnly'),
           onBlur: handleBlur,
           onChange: handleChange,
           onFocus: handleFocus

package/node/InputLabel/InputLabel.js

@@ -107,7 +107,9 @@ const InputLabelRoot = (0, _styled.default)(_FormLabel.default, {
 }, ownerState.shrink && {
   userSelect: 'none',
   pointerEvents: 'auto',
-  maxWidth: 'calc(133% - 24px)',
+  // Theoretically, we should have (8+5)*2/0.75 = 34px
+  // but it feels a better when it bleeds a bit on the left, so 32px.
+  maxWidth: 'calc(133% - 32px)',
   transform: 'translate(14px, -9px) scale(0.75)'
 })));
 const InputLabel = /*#__PURE__*/React.forwardRef(function InputLabel(inProps, ref) {

package/node/ListSubheader/ListSubheader.js

@@ -96,6 +96,7 @@ const ListSubheader = /*#__PURE__*/React.forwardRef(function ListSubheader(inPro
     ownerState: ownerState
   }, other));
 });
+ListSubheader.muiSkipListHighlight = true;
 process.env.NODE_ENV !== "production" ? ListSubheader.propTypes /* remove-proptypes */ = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |

package/node/MenuList/MenuList.js

@@ -203,6 +203,13 @@ const MenuList = /*#__PURE__*/React.forwardRef(function MenuList(props, ref) {
         activeItemIndex = index;
       }
     }
+    if (activeItemIndex === index && (child.props.disabled || child.props.muiSkipListHighlight || child.type.muiSkipListHighlight)) {
+      activeItemIndex += 1;
+      if (activeItemIndex >= children.length) {
+        // there are no focusable items within the list.
+        activeItemIndex = -1;
+      }
+    }
   });
   const items = React.Children.map(children, (child, index) => {
     if (index === activeItemIndex) {

package/node/Modal/Modal.js

@@ -9,6 +9,7 @@ var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runt
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
+var _clsx = _interopRequireDefault(require("clsx"));
 var _ModalUnstyled = _interopRequireWildcard(require("@mui/base/ModalUnstyled"));
 var _utils = require("@mui/base/utils");
 var _utils2 = require("@mui/utils");
@@ -16,14 +17,11 @@ var _styled = _interopRequireDefault(require("../styles/styled"));
 var _useThemeProps = _interopRequireDefault(require("../styles/useThemeProps"));
 var _Backdrop = _interopRequireDefault(require("../Backdrop"));
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["BackdropComponent", "BackdropProps", "closeAfterTransition", "children", "component", "components", "componentsProps", "disableAutoFocus", "disableEnforceFocus", "disableEscapeKeyDown", "disablePortal", "disableRestoreFocus", "disableScrollLock", "hideBackdrop", "keepMounted", "slotProps", "slots", "theme"];
+const _excluded = ["BackdropComponent", "BackdropProps", "classes", "className", "closeAfterTransition", "children", "component", "components", "componentsProps", "disableAutoFocus", "disableEnforceFocus", "disableEscapeKeyDown", "disablePortal", "disableRestoreFocus", "disableScrollLock", "hideBackdrop", "keepMounted", "slotProps", "slots", "theme"];
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 const modalClasses = _ModalUnstyled.modalUnstyledClasses;
 exports.modalClasses = modalClasses;
-const extendUtilityClasses = ownerState => {
-  return ownerState.classes;
-};
 const ModalRoot = (0, _styled.default)('div', {
   name: 'MuiModal',
   slot: 'Root',
@@ -78,6 +76,8 @@ const Modal = /*#__PURE__*/React.forwardRef(function Modal(inProps, ref) {
   const {
       BackdropComponent = ModalBackdrop,
       BackdropProps,
+      classes,
+      className,
       closeAfterTransition = false,
       children,
       component,
@@ -112,7 +112,6 @@ const Modal = /*#__PURE__*/React.forwardRef(function Modal(inProps, ref) {
   const ownerState = (0, _extends2.default)({}, props, commonProps, {
     exited
   });
-  const classes = extendUtilityClasses(ownerState);
   const RootSlot = (_ref = (_slots$root = slots == null ? void 0 : slots.root) != null ? _slots$root : components.Root) != null ? _ref : ModalRoot;
   const BackdropSlot = (_ref2 = (_slots$backdrop = slots == null ? void 0 : slots.backdrop) != null ? _slots$backdrop : components.Backdrop) != null ? _ref2 : BackdropComponent;
   const rootSlotProps = (_slotProps$root = slotProps == null ? void 0 : slotProps.root) != null ? _slotProps$root : componentsProps.root;
@@ -126,15 +125,17 @@ const Modal = /*#__PURE__*/React.forwardRef(function Modal(inProps, ref) {
       root: () => (0, _extends2.default)({}, (0, _utils.resolveComponentProps)(rootSlotProps, ownerState), !(0, _utils.isHostComponent)(RootSlot) && {
         as: component,
         theme
+      }, {
+        className: (0, _clsx.default)(className, rootSlotProps == null ? void 0 : rootSlotProps.className, classes == null ? void 0 : classes.root, !ownerState.open && ownerState.exited && (classes == null ? void 0 : classes.hidden))
       }),
-      backdrop: () => (0, _extends2.default)({}, BackdropProps, (0, _utils.resolveComponentProps)(backdropSlotProps, ownerState))
+      backdrop: () => (0, _extends2.default)({}, BackdropProps, (0, _utils.resolveComponentProps)(backdropSlotProps, ownerState), {
+        className: (0, _clsx.default)(backdropSlotProps == null ? void 0 : backdropSlotProps.className, classes == null ? void 0 : classes.backdrop)
+      })
     },
     onTransitionEnter: () => setExited(false),
     onTransitionExited: () => setExited(true),
     ref: ref
-  }, other, {
-    classes: classes
-  }, commonProps, {
+  }, other, commonProps, {
     children: children
   }));
 });
@@ -171,6 +172,10 @@ process.env.NODE_ENV !== "production" ? Modal.propTypes /* remove-proptypes */ =
    * Override or extend the styles applied to the component.
    */
   classes: _propTypes.default.object,
+  /**
+   * @ignore
+   */
+  className: _propTypes.default.string,
   /**
    * When set to true the Modal waits until a nested Transition is completed before closing.
    * @default false

package/node/OutlinedInput/OutlinedInput.js

@@ -171,7 +171,7 @@ const OutlinedInput = /*#__PURE__*/React.forwardRef(function OutlinedInput(inPro
       ownerState: ownerState,
       className: classes.notchedOutline,
       label: label != null && label !== '' && fcs.required ? _React$Fragment || (_React$Fragment = /*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
-        children: [label, "\xA0", '*']
+        children: [label, "\u2009", '*']
       })) : label,
       notched: typeof notched !== 'undefined' ? notched : Boolean(state.startAdornment || state.filled || state.focused)
     }),

package/node/Rating/Rating.js

@@ -54,7 +54,7 @@ const useUtilityClasses = ownerState => {
     focusVisible
   } = ownerState;
   const slots = {
-    root: ['root', `size${(0, _utils2.capitalize)(size)}`, disabled && 'disabled', focusVisible && 'focusVisible', readOnly && 'readyOnly'],
+    root: ['root', `size${(0, _utils2.capitalize)(size)}`, disabled && 'disabled', focusVisible && 'focusVisible', readOnly && 'readOnly'],
     label: ['label', 'pristine'],
     labelEmptyValue: [emptyValueFocused && 'labelEmptyValueActive'],
     icon: ['icon'],
@@ -452,7 +452,7 @@ const Rating = /*#__PURE__*/React.forwardRef(function Rating(inProps, ref) {
     ref: handleRef,
     onMouseMove: handleMouseMove,
     onMouseLeave: handleMouseLeave,
-    className: (0, _clsx.default)(classes.root, className),
+    className: (0, _clsx.default)(classes.root, className, readOnly && 'MuiRating-readOnly'),
     ownerState: ownerState,
     role: readOnly ? 'img' : null,
     "aria-label": readOnly ? getLabelText(value) : null

package/node/Select/SelectInput.js

@@ -336,8 +336,7 @@ const SelectInput = /*#__PURE__*/React.forwardRef(function SelectInput(props, re
       computeDisplay = true;
     }
   }
-  const items = childrenArray.map((child, index, arr) => {
-    var _arr$, _arr$$props, _arr$2, _arr$2$props;
+  const items = childrenArray.map(child => {
     if (! /*#__PURE__*/React.isValidElement(child)) {
       return null;
     }
@@ -364,25 +363,6 @@ const SelectInput = /*#__PURE__*/React.forwardRef(function SelectInput(props, re
     if (selected) {
       foundMatch = true;
     }
-    if (child.props.value === undefined) {
-      return /*#__PURE__*/React.cloneElement(child, {
-        'aria-readonly': true,
-        role: 'option'
-      });
-    }
-    const isFirstSelectableElement = () => {
-      if (value) {
-        return selected;
-      }
-      const firstSelectableElement = arr.find(item => {
-        var _item$props;
-        return (item == null ? void 0 : (_item$props = item.props) == null ? void 0 : _item$props.value) !== undefined && item.props.disabled !== true;
-      });
-      if (child === firstSelectableElement) {
-        return true;
-      }
-      return selected;
-    };
     return /*#__PURE__*/React.cloneElement(child, {
       'aria-selected': selected ? 'true' : 'false',
       onClick: handleItemClick(child),
@@ -398,7 +378,7 @@ const SelectInput = /*#__PURE__*/React.forwardRef(function SelectInput(props, re
         }
       },
       role: 'option',
-      selected: ((_arr$ = arr[0]) == null ? void 0 : (_arr$$props = _arr$.props) == null ? void 0 : _arr$$props.value) === undefined || ((_arr$2 = arr[0]) == null ? void 0 : (_arr$2$props = _arr$2.props) == null ? void 0 : _arr$2$props.disabled) === true ? isFirstSelectableElement() : selected,
+      selected,
       value: undefined,
       // The value is most likely not a valid HTML attribute.
       'data-value': child.props.value // Instead, we provide it as a data attribute.

package/node/Slider/Slider.js

@@ -12,7 +12,7 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _clsx = _interopRequireDefault(require("clsx"));
 var _utils = require("@mui/utils");
 var _base = require("@mui/base");
-var _SliderUnstyled = require("@mui/base/SliderUnstyled");
+var _useSlider = _interopRequireWildcard(require("@mui/base/useSlider"));
 var _system = require("@mui/system");
 var _useThemeProps = _interopRequireDefault(require("../styles/useThemeProps"));
 var _styled = _interopRequireWildcard(require("../styles/styled"));
@@ -25,7 +25,6 @@ var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["aria-label", "aria-valuetext", "aria-labelledby", "component", "components", "componentsProps", "color", "classes", "className", "disableSwap", "disabled", "getAriaLabel", "getAriaValueText", "marks", "max", "min", "name", "onChange", "onChangeCommitted", "orientation", "size", "step", "scale", "slotProps", "slots", "tabIndex", "track", "value", "valueLabelDisplay", "valueLabelFormat"];
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-const valueToPercent = (value, min, max) => (value - min) * 100 / (max - min);
 function Identity(x) {
   return x;
 }
@@ -466,7 +465,6 @@ const Slider = /*#__PURE__*/React.forwardRef(function Slider(inputProps, ref) {
       componentsProps = {},
       color = 'primary',
       classes: classesProp,
-      // eslint-disable-next-line react/prop-types
       className,
       disableSwap = false,
       disabled = false,
@@ -518,7 +516,7 @@ const Slider = /*#__PURE__*/React.forwardRef(function Slider(inputProps, ref) {
     values,
     trackOffset,
     trackLeap
-  } = (0, _SliderUnstyled.useSlider)((0, _extends2.default)({}, ownerState, {
+  } = (0, _useSlider.default)((0, _extends2.default)({}, ownerState, {
     ref
   }));
   ownerState.marked = marks.length > 0 && marks.some(mark => mark.label);
@@ -573,7 +571,8 @@ const Slider = /*#__PURE__*/React.forwardRef(function Slider(inputProps, ref) {
     elementType: ThumbSlot,
     getSlotProps: getThumbProps,
     externalSlotProps: thumbSlotProps,
-    ownerState: (0, _extends2.default)({}, ownerState, thumbSlotProps == null ? void 0 : thumbSlotProps.ownerState)
+    ownerState: (0, _extends2.default)({}, ownerState, thumbSlotProps == null ? void 0 : thumbSlotProps.ownerState),
+    className: classes.thumb
   });
   const valueLabelProps = (0, _base.useSlotProps)({
     elementType: ValueLabelSlot,
@@ -590,7 +589,8 @@ const Slider = /*#__PURE__*/React.forwardRef(function Slider(inputProps, ref) {
   const markLabelProps = (0, _base.useSlotProps)({
     elementType: MarkLabelSlot,
     externalSlotProps: markLabelSlotProps,
-    ownerState
+    ownerState,
+    className: classes.markLabel
   });
   const inputSliderProps = (0, _base.useSlotProps)({
     elementType: InputSlot,
@@ -600,7 +600,7 @@ const Slider = /*#__PURE__*/React.forwardRef(function Slider(inputProps, ref) {
   });
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(RootSlot, (0, _extends2.default)({}, rootProps, {
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(RailSlot, (0, _extends2.default)({}, railProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(TrackSlot, (0, _extends2.default)({}, trackProps)), marks.filter(mark => mark.value >= min && mark.value <= max).map((mark, index) => {
-      const percent = valueToPercent(mark.value, min, max);
+      const percent = (0, _useSlider.valueToPercent)(mark.value, min, max);
       const style = axisProps[axis].offset(percent);
       let markActive;
       if (track === false) {
@@ -628,11 +628,13 @@ const Slider = /*#__PURE__*/React.forwardRef(function Slider(inputProps, ref) {
         })) : null]
       }, index);
     }), values.map((value, index) => {
-      const percent = valueToPercent(value, min, max);
+      const percent = (0, _useSlider.valueToPercent)(value, min, max);
       const style = axisProps[axis].offset(percent);
       const ValueLabelComponent = valueLabelDisplay === 'off' ? Forward : ValueLabelSlot;
-      return /*#__PURE__*/(0, _jsxRuntime.jsx)(React.Fragment, {
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ValueLabelComponent, (0, _extends2.default)({}, !(0, _base.isHostComponent)(ValueLabelComponent) && {
+      return (
+        /*#__PURE__*/
+        /* TODO v6: Change component structure. It will help in avoiding the complicated React.cloneElement API added in SliderValueLabel component. Should be: Thumb -> Input, ValueLabel. Follow Joy UI's Slider structure. */
+        (0, _jsxRuntime.jsx)(ValueLabelComponent, (0, _extends2.default)({}, !(0, _base.isHostComponent)(ValueLabelComponent) && {
           valueLabelFormat,
           valueLabelDisplay,
           value: typeof valueLabelFormat === 'function' ? valueLabelFormat(scale(value), index) : valueLabelFormat,
@@ -641,8 +643,7 @@ const Slider = /*#__PURE__*/React.forwardRef(function Slider(inputProps, ref) {
           disabled
         }, valueLabelProps, {
           children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ThumbSlot, (0, _extends2.default)({
-            "data-index": index,
-            "data-focusvisible": focusedThumbIndex === index
+            "data-index": index
           }, thumbProps, {
             className: (0, _clsx.default)(classes.thumb, thumbProps.className, active === index && classes.active, focusedThumbIndex === index && classes.focusVisible),
             style: (0, _extends2.default)({}, style, {
@@ -657,8 +658,8 @@ const Slider = /*#__PURE__*/React.forwardRef(function Slider(inputProps, ref) {
               value: values[index]
             }, inputSliderProps))
           }))
-        }))
-      }, index);
+        }), index)
+      );
     })]
   }));
 });
@@ -699,6 +700,10 @@ process.env.NODE_ENV !== "production" ? Slider.propTypes /* remove-proptypes */
    * Override or extend the styles applied to the component.
    */
   classes: _propTypes.default.object,
+  /**
+   * @ignore
+   */
+  className: _propTypes.default.string,
   /**
    * The color of the component.
    * It supports both default and custom theme colors, which can be added as shown in the