@mui/material 5.11.10 → 5.11.11

package/Rating/Rating.js

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

package/Rating/ratingClasses.d.ts

@@ -1,40 +1,40 @@
-export interface RatingClasses {
-    /** Styles applied to the root element. */
-    root: string;
-    /** Styles applied to the root element if `size="small"`. */
-    sizeSmall: string;
-    /** Styles applied to the root element if `size="medium"`. */
-    sizeMedium: string;
-    /** Styles applied to the root element if `size="large"`. */
-    sizeLarge: string;
-    /** Styles applied to the root element if `readOnly={true}`. */
-    readOnly: string;
-    /** State class applied to the root element if `disabled={true}`. */
-    disabled: string;
-    /** State class applied to the root element if keyboard focused. */
-    focusVisible: string;
-    /** Visually hide an element. */
-    visuallyHidden: string;
-    /** Styles applied to the label elements. */
-    label: string;
-    /** Styles applied to the label of the "no value" input when it is active. */
-    labelEmptyValueActive: string;
-    /** Styles applied to the icon wrapping elements. */
-    icon: string;
-    /** Styles applied to the icon wrapping elements when empty. */
-    iconEmpty: string;
-    /** Styles applied to the icon wrapping elements when filled. */
-    iconFilled: string;
-    /** Styles applied to the icon wrapping elements when hover. */
-    iconHover: string;
-    /** Styles applied to the icon wrapping elements when focus. */
-    iconFocus: string;
-    /** Styles applied to the icon wrapping elements when active. */
-    iconActive: string;
-    /** Styles applied to the icon wrapping elements when decimals are necessary. */
-    decimal: string;
-}
-export type RatingClassKey = keyof RatingClasses;
-export declare function getRatingUtilityClass(slot: string): string;
-declare const ratingClasses: RatingClasses;
-export default ratingClasses;
+export interface RatingClasses {
+    /** Styles applied to the root element. */
+    root: string;
+    /** Styles applied to the root element if `size="small"`. */
+    sizeSmall: string;
+    /** Styles applied to the root element if `size="medium"`. */
+    sizeMedium: string;
+    /** Styles applied to the root element if `size="large"`. */
+    sizeLarge: string;
+    /** Styles applied to the root element if `readOnly={true}`. */
+    readOnly: string;
+    /** State class applied to the root element if `disabled={true}`. */
+    disabled: string;
+    /** State class applied to the root element if keyboard focused. */
+    focusVisible: string;
+    /** Visually hide an element. */
+    visuallyHidden: string;
+    /** Styles applied to the label elements. */
+    label: string;
+    /** Styles applied to the label of the "no value" input when it is active. */
+    labelEmptyValueActive: string;
+    /** Styles applied to the icon wrapping elements. */
+    icon: string;
+    /** Styles applied to the icon wrapping elements when empty. */
+    iconEmpty: string;
+    /** Styles applied to the icon wrapping elements when filled. */
+    iconFilled: string;
+    /** Styles applied to the icon wrapping elements when hover. */
+    iconHover: string;
+    /** Styles applied to the icon wrapping elements when focus. */
+    iconFocus: string;
+    /** Styles applied to the icon wrapping elements when active. */
+    iconActive: string;
+    /** Styles applied to the icon wrapping elements when decimals are necessary. */
+    decimal: string;
+}
+export type RatingClassKey = keyof RatingClasses;
+export declare function getRatingUtilityClass(slot: string): string;
+declare const ratingClasses: RatingClasses;
+export default ratingClasses;

package/ScopedCssBaseline/scopedCssBaselineClasses.d.ts

@@ -1,8 +1,8 @@
-export interface ScopedCssBaselineClasses {
-    /** Styles applied to the root element. */
-    root: string;
-}
-export type ScopedCssBaselineClassKey = keyof ScopedCssBaselineClasses;
-export declare function getScopedCssBaselineUtilityClass(slot: string): string;
-declare const scopedCssBaselineClasses: Record<"root", string>;
-export default scopedCssBaselineClasses;
+export interface ScopedCssBaselineClasses {
+    /** Styles applied to the root element. */
+    root: string;
+}
+export type ScopedCssBaselineClassKey = keyof ScopedCssBaselineClasses;
+export declare function getScopedCssBaselineUtilityClass(slot: string): string;
+declare const scopedCssBaselineClasses: Record<"root", string>;
+export default scopedCssBaselineClasses;

package/Select/SelectInput.js

@@ -329,8 +329,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;
     }
@@ -357,25 +356,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),
@@ -391,7 +371,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/Select/selectClasses.d.ts

@@ -1,30 +1,30 @@
-export interface SelectClasses {
-    /** Styles applied to the select component `select` class. */
-    select: string;
-    /** Styles applied to the select component if `multiple={true}`. */
-    multiple: string;
-    /** Styles applied to the select component if `variant="filled"`. */
-    filled: string;
-    /** Styles applied to the select component if `variant="outlined"`. */
-    outlined: string;
-    /** Styles applied to the select component if `variant="standard"`. */
-    standard: string;
-    /** State class applied to the select component `disabled` class. */
-    disabled: string;
-    /** Styles applied to the icon component. */
-    icon: string;
-    /** Styles applied to the icon component if the popup is open. */
-    iconOpen: string;
-    /** Styles applied to the icon component if `variant="filled"`. */
-    iconFilled: string;
-    /** Styles applied to the icon component if `variant="outlined"`. */
-    iconOutlined: string;
-    /** Styles applied to the icon component if `variant="standard"`. */
-    iconStandard: string;
-    /** Styles applied to the underlying native input component. */
-    nativeInput: string;
-}
-export type SelectClassKey = keyof SelectClasses;
-export declare function getSelectUtilityClasses(slot: string): string;
-declare const selectClasses: SelectClasses;
-export default selectClasses;
+export interface SelectClasses {
+    /** Styles applied to the select component `select` class. */
+    select: string;
+    /** Styles applied to the select component if `multiple={true}`. */
+    multiple: string;
+    /** Styles applied to the select component if `variant="filled"`. */
+    filled: string;
+    /** Styles applied to the select component if `variant="outlined"`. */
+    outlined: string;
+    /** Styles applied to the select component if `variant="standard"`. */
+    standard: string;
+    /** State class applied to the select component `disabled` class. */
+    disabled: string;
+    /** Styles applied to the icon component. */
+    icon: string;
+    /** Styles applied to the icon component if the popup is open. */
+    iconOpen: string;
+    /** Styles applied to the icon component if `variant="filled"`. */
+    iconFilled: string;
+    /** Styles applied to the icon component if `variant="outlined"`. */
+    iconOutlined: string;
+    /** Styles applied to the icon component if `variant="standard"`. */
+    iconStandard: string;
+    /** Styles applied to the underlying native input component. */
+    nativeInput: string;
+}
+export type SelectClassKey = keyof SelectClasses;
+export declare function getSelectUtilityClasses(slot: string): string;
+declare const selectClasses: SelectClasses;
+export default selectClasses;

package/Skeleton/skeletonClasses.d.ts

@@ -1,26 +1,26 @@
-export interface SkeletonClasses {
-    /** Styles applied to the root element. */
-    root: string;
-    /** Styles applied to the root element if `variant="text"`. */
-    text: string;
-    /** Styles applied to the root element if `variant="rectangular"`. */
-    rectangular: string;
-    /** Styles applied to the root element if `variant="rounded"`. */
-    rounded: string;
-    /** Styles applied to the root element if `variant="circular"`. */
-    circular: string;
-    /** Styles applied to the root element if `animation="pulse"`. */
-    pulse: string;
-    /** Styles applied to the root element if `animation="wave"`. */
-    wave: string;
-    /** Styles applied when the component is passed children. */
-    withChildren: string;
-    /** Styles applied when the component is passed children and no width. */
-    fitContent: string;
-    /** Styles applied when the component is passed children and no height. */
-    heightAuto: string;
-}
-export type SkeletonClassKey = keyof SkeletonClasses;
-export declare function getSkeletonUtilityClass(slot: string): string;
-declare const skeletonClasses: SkeletonClasses;
-export default skeletonClasses;
+export interface SkeletonClasses {
+    /** Styles applied to the root element. */
+    root: string;
+    /** Styles applied to the root element if `variant="text"`. */
+    text: string;
+    /** Styles applied to the root element if `variant="rectangular"`. */
+    rectangular: string;
+    /** Styles applied to the root element if `variant="rounded"`. */
+    rounded: string;
+    /** Styles applied to the root element if `variant="circular"`. */
+    circular: string;
+    /** Styles applied to the root element if `animation="pulse"`. */
+    pulse: string;
+    /** Styles applied to the root element if `animation="wave"`. */
+    wave: string;
+    /** Styles applied when the component is passed children. */
+    withChildren: string;
+    /** Styles applied when the component is passed children and no width. */
+    fitContent: string;
+    /** Styles applied when the component is passed children and no height. */
+    heightAuto: string;
+}
+export type SkeletonClassKey = keyof SkeletonClasses;
+export declare function getSkeletonUtilityClass(slot: string): string;
+declare const skeletonClasses: SkeletonClasses;
+export default skeletonClasses;

package/Slider/Slider.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { SlotComponentProps } from '@mui/base';
-import { Mark } from '@mui/base/SliderUnstyled';
+import { Mark } from '@mui/base/useSlider';
 import { SxProps } from '@mui/system';
 import { OverridableStringUnion } from '@mui/types';
 import { Theme } from '../styles';
@@ -86,6 +86,10 @@ export interface SliderTypeMap<D extends React.ElementType = 'span', P = {}> {
      * Override or extend the styles applied to the component.
      */
     classes?: Partial<SliderClasses>;
+    /**
+     * @ignore
+     */
+    className?: string;
     /**
      * The default value. Use when the component is not controlled.
      */

package/Slider/Slider.js

@@ -6,7 +6,7 @@ import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import { chainPropTypes } from '@mui/utils';
 import { isHostComponent, useSlotProps, unstable_composeClasses as composeClasses } from '@mui/base';
-import { useSlider } from '@mui/base/SliderUnstyled';
+import useSlider, { valueToPercent } from '@mui/base/useSlider';
 import { alpha, lighten, darken } from '@mui/system';
 import useThemeProps from '../styles/useThemeProps';
 import styled, { slotShouldForwardProp } from '../styles/styled';
@@ -17,7 +17,6 @@ import SliderValueLabel from './SliderValueLabel';
 import sliderClasses, { getSliderUtilityClass } from './sliderClasses';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-const valueToPercent = (value, min, max) => (value - min) * 100 / (max - min);
 function Identity(x) {
   return x;
 }
@@ -458,7 +457,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,
@@ -565,7 +563,8 @@ const Slider = /*#__PURE__*/React.forwardRef(function Slider(inputProps, ref) {
     elementType: ThumbSlot,
     getSlotProps: getThumbProps,
     externalSlotProps: thumbSlotProps,
-    ownerState: _extends({}, ownerState, thumbSlotProps == null ? void 0 : thumbSlotProps.ownerState)
+    ownerState: _extends({}, ownerState, thumbSlotProps == null ? void 0 : thumbSlotProps.ownerState),
+    className: classes.thumb
   });
   const valueLabelProps = useSlotProps({
     elementType: ValueLabelSlot,
@@ -582,7 +581,8 @@ const Slider = /*#__PURE__*/React.forwardRef(function Slider(inputProps, ref) {
   const markLabelProps = useSlotProps({
     elementType: MarkLabelSlot,
     externalSlotProps: markLabelSlotProps,
-    ownerState
+    ownerState,
+    className: classes.markLabel
   });
   const inputSliderProps = useSlotProps({
     elementType: InputSlot,
@@ -623,8 +623,10 @@ const Slider = /*#__PURE__*/React.forwardRef(function Slider(inputProps, ref) {
       const percent = valueToPercent(value, min, max);
       const style = axisProps[axis].offset(percent);
       const ValueLabelComponent = valueLabelDisplay === 'off' ? Forward : ValueLabelSlot;
-      return /*#__PURE__*/_jsx(React.Fragment, {
-        children: /*#__PURE__*/_jsx(ValueLabelComponent, _extends({}, !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. */
+        _jsx(ValueLabelComponent, _extends({}, !isHostComponent(ValueLabelComponent) && {
           valueLabelFormat,
           valueLabelDisplay,
           value: typeof valueLabelFormat === 'function' ? valueLabelFormat(scale(value), index) : valueLabelFormat,
@@ -633,8 +635,7 @@ const Slider = /*#__PURE__*/React.forwardRef(function Slider(inputProps, ref) {
           disabled
         }, valueLabelProps, {
           children: /*#__PURE__*/_jsx(ThumbSlot, _extends({
-            "data-index": index,
-            "data-focusvisible": focusedThumbIndex === index
+            "data-index": index
           }, thumbProps, {
             className: clsx(classes.thumb, thumbProps.className, active === index && classes.active, focusedThumbIndex === index && classes.focusVisible),
             style: _extends({}, style, {
@@ -649,8 +650,8 @@ const Slider = /*#__PURE__*/React.forwardRef(function Slider(inputProps, ref) {
               value: values[index]
             }, inputSliderProps))
           }))
-        }))
-      }, index);
+        }), index)
+      );
     })]
   }));
 });
@@ -691,6 +692,10 @@ process.env.NODE_ENV !== "production" ? Slider.propTypes /* remove-proptypes */
    * Override or extend the styles applied to the component.
    */
   classes: PropTypes.object,
+  /**
+   * @ignore
+   */
+  className: PropTypes.string,
   /**
    * The color of the component.
    * It supports both default and custom theme colors, which can be added as shown in the

package/Slider/SliderValueLabel.d.ts

@@ -1,15 +1,15 @@
-import * as React from 'react';
-import PropTypes from 'prop-types';
-import { SliderValueLabelProps } from './SliderValueLabel.types';
-/**
- * @ignore - internal component.
- */
-declare function SliderValueLabel(props: SliderValueLabelProps): React.ReactElement<any, string | React.JSXElementConstructor<any>> | null;
-declare namespace SliderValueLabel {
-    var propTypes: {
-        children: PropTypes.Validator<PropTypes.ReactElementLike>;
-        className: PropTypes.Requireable<string>;
-        value: PropTypes.Requireable<PropTypes.ReactNodeLike>;
-    };
-}
-export default SliderValueLabel;
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import { SliderValueLabelProps } from './SliderValueLabel.types';
+/**
+ * @ignore - internal component.
+ */
+declare function SliderValueLabel(props: SliderValueLabelProps): React.ReactElement<any, string | React.JSXElementConstructor<any>> | null;
+declare namespace SliderValueLabel {
+    var propTypes: {
+        children: PropTypes.Validator<PropTypes.ReactElementLike>;
+        className: PropTypes.Requireable<string>;
+        value: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+    };
+}
+export default SliderValueLabel;

package/Slider/SliderValueLabel.types.d.ts

@@ -1,24 +1,24 @@
-/// <reference types="react" />
-export interface SliderValueLabelProps {
-    children?: React.ReactElement;
-    className?: string;
-    style?: React.CSSProperties;
-    /**
-     * If `true`, the value label is visible.
-     */
-    open: boolean;
-    /**
-     * The value of the slider.
-     * For ranged sliders, provide an array with two values.
-     */
-    value: number;
-    /**
-     * Controls when the value label is displayed:
-     *
-     * - `auto` the value label will display when the thumb is hovered or focused.
-     * - `on` will display persistently.
-     * - `off` will never display.
-     * @default 'off'
-     */
-    valueLabelDisplay?: 'on' | 'auto' | 'off';
-}
+/// <reference types="react" />
+export interface SliderValueLabelProps {
+    children?: React.ReactElement;
+    className?: string;
+    style?: React.CSSProperties;
+    /**
+     * If `true`, the value label is visible.
+     */
+    open: boolean;
+    /**
+     * The value of the slider.
+     * For ranged sliders, provide an array with two values.
+     */
+    value: number;
+    /**
+     * Controls when the value label is displayed:
+     *
+     * - `auto` the value label will display when the thumb is hovered or focused.
+     * - `on` will display persistently.
+     * - `off` will never display.
+     * @default 'off'
+     */
+    valueLabelDisplay?: 'on' | 'auto' | 'off';
+}

package/Slider/sliderClasses.d.ts

@@ -1,58 +1,58 @@
-export interface SliderClasses {
-    /** Class name applied to the root element. */
-    root: string;
-    /** Class name applied to the root element if `color="primary"`. */
-    colorPrimary: string;
-    /** Class name applied to the root element if `color="secondary"`. */
-    colorSecondary: string;
-    /** Class name applied to the root element if `marks` is provided with at least one label. */
-    marked: string;
-    /** Class name applied to the root element if `orientation="vertical"`. */
-    vertical: string;
-    /** State class applied to the root and thumb element if `disabled={true}`. */
-    disabled: string;
-    /** State class applied to the root if a thumb is being dragged. */
-    dragging: string;
-    /** Class name applied to the rail element. */
-    rail: string;
-    /** Class name applied to the track element. */
-    track: string;
-    /** Class name applied to the root element if `track={false}`. */
-    trackFalse: string;
-    /** Class name applied to the root element if `track="inverted"`. */
-    trackInverted: string;
-    /** Class name applied to the thumb element. */
-    thumb: string;
-    /** State class applied to the thumb element if it's active. */
-    active: string;
-    /** State class applied to the thumb element if keyboard focused. */
-    focusVisible: string;
-    /** Class name applied to the mark element. */
-    mark: string;
-    /** Class name applied to the mark element if active (depending on the value). */
-    markActive: string;
-    /** Class name applied to the mark label element. */
-    markLabel: string;
-    /** Class name applied to the mark label element if active (depending on the value). */
-    markLabelActive: string;
-    /** Class name applied to the root element if `size="small"`. */
-    sizeSmall: string;
-    /** Class name applied to the thumb element if `color="primary"`. */
-    thumbColorPrimary: string;
-    /** Class name applied to the thumb element if `color="secondary"`. */
-    thumbColorSecondary: string;
-    /** Class name applied to the thumb element if `size="small"`. */
-    thumbSizeSmall: string;
-    /** Class name applied to the thumb label element. */
-    valueLabel: string;
-    /** Class name applied to the thumb label element if it's open. */
-    valueLabelOpen: string;
-    /** Class name applied to the thumb label's circle element. */
-    valueLabelCircle: string;
-    /** Class name applied to the thumb label's label element. */
-    valueLabelLabel: string;
-}
-export type SliderClassKey = keyof SliderClasses;
-export declare function getSliderUtilityClass(slot: string): string;
-declare const sliderClasses: SliderClasses;
-export default sliderClasses;
+export interface SliderClasses {
+    /** Class name applied to the root element. */
+    root: string;
+    /** Class name applied to the root element if `color="primary"`. */
+    colorPrimary: string;
+    /** Class name applied to the root element if `color="secondary"`. */
+    colorSecondary: string;
+    /** Class name applied to the root element if `marks` is provided with at least one label. */
+    marked: string;
+    /** Class name applied to the root element if `orientation="vertical"`. */
+    vertical: string;
+    /** State class applied to the root and thumb element if `disabled={true}`. */
+    disabled: string;
+    /** State class applied to the root if a thumb is being dragged. */
+    dragging: string;
+    /** Class name applied to the rail element. */
+    rail: string;
+    /** Class name applied to the track element. */
+    track: string;
+    /** Class name applied to the root element if `track={false}`. */
+    trackFalse: string;
+    /** Class name applied to the root element if `track="inverted"`. */
+    trackInverted: string;
+    /** Class name applied to the thumb element. */
+    thumb: string;
+    /** State class applied to the thumb element if it's active. */
+    active: string;
+    /** State class applied to the thumb element if keyboard focused. */
+    focusVisible: string;
+    /** Class name applied to the mark element. */
+    mark: string;
+    /** Class name applied to the mark element if active (depending on the value). */
+    markActive: string;
+    /** Class name applied to the mark label element. */
+    markLabel: string;
+    /** Class name applied to the mark label element if active (depending on the value). */
+    markLabelActive: string;
+    /** Class name applied to the root element if `size="small"`. */
+    sizeSmall: string;
+    /** Class name applied to the thumb element if `color="primary"`. */
+    thumbColorPrimary: string;
+    /** Class name applied to the thumb element if `color="secondary"`. */
+    thumbColorSecondary: string;
+    /** Class name applied to the thumb element if `size="small"`. */
+    thumbSizeSmall: string;
+    /** Class name applied to the thumb label element. */
+    valueLabel: string;
+    /** Class name applied to the thumb label element if it's open. */
+    valueLabelOpen: string;
+    /** Class name applied to the thumb label's circle element. */
+    valueLabelCircle: string;
+    /** Class name applied to the thumb label's label element. */
+    valueLabelLabel: string;
+}
+export type SliderClassKey = keyof SliderClasses;
+export declare function getSliderUtilityClass(slot: string): string;
+declare const sliderClasses: SliderClasses;
+export default sliderClasses;