@mui/material 5.10.12 → 5.10.14

package/modern/Slider/Slider.js

@@ -76,14 +76,11 @@ const SliderRoot = styled('span', {
     }
   }
 }));
-process.env.NODE_ENV !== "production" ? SliderRoot.propTypes
-/* remove-proptypes */
-= {
+process.env.NODE_ENV !== "production" ? SliderRoot.propTypes /* remove-proptypes */ = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |
   // |     To update them edit the d.ts file and run "yarn proptypes"     |
   // ----------------------------------------------------------------------
-
   /**
    * @ignore
    */
@@ -115,14 +112,11 @@ const SliderRail = styled('span', {
 }, ownerState.track === 'inverted' && {
   opacity: 1
 }));
-process.env.NODE_ENV !== "production" ? SliderRail.propTypes
-/* remove-proptypes */
-= {
+process.env.NODE_ENV !== "production" ? SliderRail.propTypes /* remove-proptypes */ = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |
   // |     To update them edit the d.ts file and run "yarn proptypes"     |
   // ----------------------------------------------------------------------
-
   /**
    * @ignore
    */
@@ -137,7 +131,8 @@ const SliderTrack = styled('span', {
   theme,
   ownerState
 }) => {
-  const color = // Same logic as the LinearProgress track color
+  const color =
+  // Same logic as the LinearProgress track color
   theme.palette.mode === 'light' ? lighten(theme.palette[ownerState.color].main, 0.62) : darken(theme.palette[ownerState.color].main, 0.5);
   return _extends({
     display: 'block',
@@ -165,14 +160,11 @@ const SliderTrack = styled('span', {
     borderColor: theme.vars ? theme.vars.palette.Slider[`${ownerState.color}Track`] : color
   });
 });
-process.env.NODE_ENV !== "production" ? SliderTrack.propTypes
-/* remove-proptypes */
-= {
+process.env.NODE_ENV !== "production" ? SliderTrack.propTypes /* remove-proptypes */ = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |
   // |     To update them edit the d.ts file and run "yarn proptypes"     |
   // ----------------------------------------------------------------------
-
   /**
    * @ignore
    */
@@ -251,14 +243,11 @@ const SliderThumb = styled('span', {
     }
   }
 }));
-process.env.NODE_ENV !== "production" ? SliderThumb.propTypes
-/* remove-proptypes */
-= {
+process.env.NODE_ENV !== "production" ? SliderThumb.propTypes /* remove-proptypes */ = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |
   // |     To update them edit the d.ts file and run "yarn proptypes"     |
   // ----------------------------------------------------------------------
-
   /**
    * @ignore
    */
@@ -323,14 +312,11 @@ const SliderValueLabel = styled(SliderValueLabelUnstyled, {
   fontSize: theme.typography.pxToRem(12),
   padding: '0.25rem 0.5rem'
 }));
-process.env.NODE_ENV !== "production" ? SliderValueLabel.propTypes
-/* remove-proptypes */
-= {
+process.env.NODE_ENV !== "production" ? SliderValueLabel.propTypes /* remove-proptypes */ = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |
   // |     To update them edit the d.ts file and run "yarn proptypes"     |
   // ----------------------------------------------------------------------
-
   /**
    * @ignore
    */
@@ -362,14 +348,11 @@ const SliderMark = styled('span', {
   backgroundColor: (theme.vars || theme).palette.background.paper,
   opacity: 0.8
 }));
-process.env.NODE_ENV !== "production" ? SliderMark.propTypes
-/* remove-proptypes */
-= {
+process.env.NODE_ENV !== "production" ? SliderMark.propTypes /* remove-proptypes */ = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |
   // |     To update them edit the d.ts file and run "yarn proptypes"     |
   // ----------------------------------------------------------------------
-
   /**
    * @ignore
    */
@@ -404,21 +387,17 @@ const SliderMarkLabel = styled('span', {
 }, markLabelActive && {
   color: (theme.vars || theme).palette.text.primary
 }));
-process.env.NODE_ENV !== "production" ? SliderMarkLabel.propTypes
-/* remove-proptypes */
-= {
+process.env.NODE_ENV !== "production" ? SliderMarkLabel.propTypes /* remove-proptypes */ = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |
   // |     To update them edit the d.ts file and run "yarn proptypes"     |
   // ----------------------------------------------------------------------
-
   /**
    * @ignore
    */
   children: PropTypes.node
 } : void 0;
 export { SliderMarkLabel };
-
 const extendUtilityClasses = ownerState => {
   const {
     color,
@@ -430,7 +409,6 @@ const extendUtilityClasses = ownerState => {
     thumb: clsx(classes.thumb, getSliderUtilityClass(`thumbColor${capitalize(color)}`), classes[`thumbColor${capitalize(color)}`], size && [getSliderUtilityClass(`thumbSize${capitalize(size)}`), classes[`thumbSize${capitalize(size)}`]])
   });
 };
-
 const Slider = /*#__PURE__*/React.forwardRef(function Slider(inputProps, ref) {
   const props = useThemeProps({
     props: inputProps,
@@ -438,26 +416,24 @@ const Slider = /*#__PURE__*/React.forwardRef(function Slider(inputProps, ref) {
   });
   const theme = useTheme();
   const isRtl = theme.direction === 'rtl';
-
   const {
-    // eslint-disable-next-line react/prop-types
-    component = 'span',
-    components = {},
-    componentsProps = {},
-    color = 'primary',
-    size = 'medium',
-    slotProps,
-    slots
-  } = props,
-        other = _objectWithoutPropertiesLoose(props, _excluded);
-
+      // eslint-disable-next-line react/prop-types
+      component = 'span',
+      components = {},
+      componentsProps = {},
+      color = 'primary',
+      size = 'medium',
+      slotProps,
+      slots
+    } = props,
+    other = _objectWithoutPropertiesLoose(props, _excluded);
   const ownerState = _extends({}, props, {
     color,
     size
   });
+  const classes = extendUtilityClasses(ownerState);
 
-  const classes = extendUtilityClasses(ownerState); // support both `slots` and `components` for backward compatibility
-
+  // support both `slots` and `components` for backward compatibility
   const RootSlot = slots?.root ?? components.Root ?? SliderRoot;
   const RailSlot = slots?.rail ?? components.Rail ?? SliderRail;
   const TrackSlot = slots?.track ?? components.Track ?? SliderTrack;
@@ -521,68 +497,56 @@ const Slider = /*#__PURE__*/React.forwardRef(function Slider(inputProps, ref) {
     ref: ref
   }));
 });
-process.env.NODE_ENV !== "production" ? Slider.propTypes
-/* remove-proptypes */
-= {
+process.env.NODE_ENV !== "production" ? Slider.propTypes /* remove-proptypes */ = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |
   // |     To update them edit the d.ts file and run "yarn proptypes"     |
   // ----------------------------------------------------------------------
-
   /**
    * The label of the slider.
    */
   'aria-label': chainPropTypes(PropTypes.string, props => {
     const range = Array.isArray(props.value || props.defaultValue);
-
     if (range && props['aria-label'] != null) {
       return new Error('MUI: You need to use the `getAriaLabel` prop instead of `aria-label` when using a range slider.');
     }
-
     return null;
   }),
-
   /**
    * The id of the element containing a label for the slider.
    */
   'aria-labelledby': PropTypes.string,
-
   /**
    * A string value that provides a user-friendly name for the current value of the slider.
    */
   'aria-valuetext': chainPropTypes(PropTypes.string, props => {
     const range = Array.isArray(props.value || props.defaultValue);
-
     if (range && props['aria-valuetext'] != null) {
       return new Error('MUI: You need to use the `getAriaValueText` prop instead of `aria-valuetext` when using a range slider.');
     }
-
     return null;
   }),
-
   /**
    * @ignore
    */
   children: PropTypes.node,
-
   /**
    * Override or extend the styles applied to the component.
    */
   classes: PropTypes.object,
-
   /**
    * The color of the component.
    * It supports both default and custom theme colors, which can be added as shown in the
    * [palette customization guide](https://mui.com/material-ui/customization/palette/#adding-new-colors).
    * @default 'primary'
    */
-  color: PropTypes
-  /* @typescript-to-proptypes-ignore */
-  .oneOfType([PropTypes.oneOf(['primary', 'secondary']), PropTypes.string]),
-
+  color: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.oneOf(['primary', 'secondary']), PropTypes.string]),
   /**
-   * The components used for each slot inside the Slider.
-   * Either a string to use a HTML element or a component.
+   * The components used for each slot inside.
+   *
+   * This prop is an alias for the `slots` prop.
+   * It's recommended to use the `slots` prop instead.
+   *
    * @default {}
    */
   components: PropTypes.shape({
@@ -595,9 +559,14 @@ process.env.NODE_ENV !== "production" ? Slider.propTypes
     Track: PropTypes.elementType,
     ValueLabel: PropTypes.elementType
   }),
-
   /**
-   * @ignore
+   * The extra props for the slot components.
+   * You can override the existing props or add new ones.
+   *
+   * This prop is an alias for the `slotProps` prop.
+   * It's recommended to use the `slotProps` prop instead, as `componentsProps` will be deprecated in the future.
+   *
+   * @default {}
    */
   componentsProps: PropTypes.shape({
     input: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
@@ -616,24 +585,20 @@ process.env.NODE_ENV !== "production" ? Slider.propTypes
       valueLabelDisplay: PropTypes.oneOf(['auto', 'off', 'on'])
     })])
   }),
-
   /**
    * The default value. Use when the component is not controlled.
    */
   defaultValue: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.number), PropTypes.number]),
-
   /**
    * If `true`, the component is disabled.
    * @default false
    */
   disabled: PropTypes.bool,
-
   /**
    * If `true`, the active thumb doesn't swap when moving pointer over a thumb while dragging another thumb.
    * @default false
    */
   disableSwap: PropTypes.bool,
-
   /**
    * Accepts a function which returns a string value that provides a user-friendly name for the thumb labels of the slider.
    * This is important for screen reader users.
@@ -641,7 +606,6 @@ process.env.NODE_ENV !== "production" ? Slider.propTypes
    * @returns {string}
    */
   getAriaLabel: PropTypes.func,
-
   /**
    * Accepts a function which returns a string value that provides a user-friendly name for the current value of the slider.
    * This is important for screen reader users.
@@ -650,13 +614,11 @@ process.env.NODE_ENV !== "production" ? Slider.propTypes
    * @returns {string}
    */
   getAriaValueText: PropTypes.func,
-
   /**
    * Indicates whether the theme context has rtl direction. It is set automatically.
    * @default false
    */
   isRtl: PropTypes.bool,
-
   /**
    * Marks indicate predetermined values to which the user can move the slider.
    * If `true` the marks are spaced according the value of the `step` prop.
@@ -667,26 +629,22 @@ process.env.NODE_ENV !== "production" ? Slider.propTypes
     label: PropTypes.node,
     value: PropTypes.number.isRequired
   })), PropTypes.bool]),
-
   /**
    * The maximum allowed value of the slider.
    * Should not be equal to min.
    * @default 100
    */
   max: PropTypes.number,
-
   /**
    * The minimum allowed value of the slider.
    * Should not be equal to max.
    * @default 0
    */
   min: PropTypes.number,
-
   /**
    * Name attribute of the hidden `input` element.
    */
   name: PropTypes.string,
-
   /**
    * Callback function that is fired when the slider's value changed.
    *
@@ -697,7 +655,6 @@ process.env.NODE_ENV !== "production" ? Slider.propTypes
    * @param {number} activeThumb Index of the currently moved thumb.
    */
   onChange: PropTypes.func,
-
   /**
    * Callback function that is fired when the `mouseup` is triggered.
    *
@@ -705,27 +662,21 @@ process.env.NODE_ENV !== "production" ? Slider.propTypes
    * @param {number | number[]} value The new value.
    */
   onChangeCommitted: PropTypes.func,
-
   /**
    * The component orientation.
    * @default 'horizontal'
    */
   orientation: PropTypes.oneOf(['horizontal', 'vertical']),
-
   /**
    * A transformation function, to change the scale of the slider.
    * @default (x) => x
    */
   scale: PropTypes.func,
-
   /**
    * The size of the slider.
    * @default 'medium'
    */
-  size: PropTypes
-  /* @typescript-to-proptypes-ignore */
-  .oneOfType([PropTypes.oneOf(['small', 'medium']), PropTypes.string]),
-
+  size: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.oneOf(['small', 'medium']), PropTypes.string]),
   /**
    * The props used for each slot inside the Slider.
    * @default {}
@@ -747,7 +698,6 @@ process.env.NODE_ENV !== "production" ? Slider.propTypes
       valueLabelDisplay: PropTypes.oneOf(['auto', 'off', 'on'])
     })])
   }),
-
   /**
    * The components used for each slot inside the Slider.
    * Either a string to use a HTML element or a component.
@@ -763,7 +713,6 @@ process.env.NODE_ENV !== "production" ? Slider.propTypes
     track: PropTypes.elementType,
     valueLabel: PropTypes.elementType
   }),
-
   /**
    * The granularity with which the slider can step through values. (A "discrete" slider.)
    * The `min` prop serves as the origin for the valid values.
@@ -773,17 +722,14 @@ process.env.NODE_ENV !== "production" ? Slider.propTypes
    * @default 1
    */
   step: PropTypes.number,
-
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
   sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
-
   /**
    * Tab index attribute of the hidden `input` element.
    */
   tabIndex: PropTypes.number,
-
   /**
    * The track presentation:
    *
@@ -793,13 +739,11 @@ process.env.NODE_ENV !== "production" ? Slider.propTypes
    * @default 'normal'
    */
   track: PropTypes.oneOf(['inverted', 'normal', false]),
-
   /**
    * The value of the slider.
    * For ranged sliders, provide an array with two values.
    */
   value: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.number), PropTypes.number]),
-
   /**
    * Controls when the value label is displayed:
    *
@@ -809,7 +753,6 @@ process.env.NODE_ENV !== "production" ? Slider.propTypes
    * @default 'off'
    */
   valueLabelDisplay: PropTypes.oneOf(['auto', 'off', 'on']),
-
   /**
    * The format function the value label's value.
    *