@mui/material 5.11.4 → 5.11.6

package/Slider/Slider.js

@@ -1,19 +1,26 @@
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["component", "components", "componentsProps", "color", "size", "slotProps", "slots"];
+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"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
-import { chainPropTypes, unstable_generateUtilityClasses as generateUtilityClasses } from '@mui/utils';
-import SliderUnstyled, { SliderValueLabelUnstyled, sliderUnstyledClasses, getSliderUtilityClass } from '@mui/base/SliderUnstyled';
+import { chainPropTypes } from '@mui/utils';
+import { isHostComponent, useSlotProps, unstable_composeClasses as composeClasses } from '@mui/base';
+import { useSlider } from '@mui/base/SliderUnstyled';
 import { alpha, lighten, darken } from '@mui/system';
 import useThemeProps from '../styles/useThemeProps';
 import styled, { slotShouldForwardProp } from '../styles/styled';
 import useTheme from '../styles/useTheme';
 import shouldSpreadAdditionalProps from '../utils/shouldSpreadAdditionalProps';
 import capitalize from '../utils/capitalize';
+import SliderValueLabel from './SliderValueLabel';
+import sliderClasses, { getSliderUtilityClass } from './sliderClasses';
 import { jsx as _jsx } from "react/jsx-runtime";
-export const sliderClasses = _extends({}, sliderUnstyledClasses, generateUtilityClasses('MuiSlider', ['colorPrimary', 'colorSecondary', 'thumbColorPrimary', 'thumbColorSecondary', 'sizeSmall', 'thumbSizeSmall']));
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const valueToPercent = (value, min, max) => (value - min) * 100 / (max - min);
+function Identity(x) {
+  return x;
+}
 const SliderRoot = styled('span', {
   name: 'MuiSlider',
   slot: 'Root',
@@ -254,7 +261,7 @@ process.env.NODE_ENV !== "production" ? SliderThumb.propTypes /* remove-proptype
   children: PropTypes.node
 } : void 0;
 export { SliderThumb };
-const SliderValueLabel = styled(SliderValueLabelUnstyled, {
+const StyledSliderValueLabel = styled(SliderValueLabel, {
   name: 'MuiSlider',
   slot: 'ValueLabel',
   overridesResolver: (props, styles) => styles.valueLabel
@@ -312,7 +319,7 @@ 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" ? StyledSliderValueLabel.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"     |
@@ -322,7 +329,7 @@ process.env.NODE_ENV !== "production" ? SliderValueLabel.propTypes /* remove-pro
    */
   children: PropTypes.node
 } : void 0;
-export { SliderValueLabel };
+export { StyledSliderValueLabel as SliderValueLabel };
 const SliderMark = styled('span', {
   name: 'MuiSlider',
   slot: 'Mark',
@@ -403,19 +410,38 @@ process.env.NODE_ENV !== "production" ? SliderMarkLabel.propTypes /* remove-prop
   children: PropTypes.node
 } : void 0;
 export { SliderMarkLabel };
-const extendUtilityClasses = ownerState => {
+const useUtilityClasses = ownerState => {
   const {
+    disabled,
+    dragging,
+    marked,
+    orientation,
+    track,
+    classes,
     color,
-    size,
-    classes = {}
+    size
   } = ownerState;
-  return _extends({}, classes, {
-    root: clsx(classes.root, getSliderUtilityClass(`color${capitalize(color)}`), classes[`color${capitalize(color)}`], size && [getSliderUtilityClass(`size${capitalize(size)}`), classes[`size${capitalize(size)}`]]),
-    thumb: clsx(classes.thumb, getSliderUtilityClass(`thumbColor${capitalize(color)}`), classes[`thumbColor${capitalize(color)}`], size && [getSliderUtilityClass(`thumbSize${capitalize(size)}`), classes[`thumbSize${capitalize(size)}`]])
-  });
+  const slots = {
+    root: ['root', disabled && 'disabled', dragging && 'dragging', marked && 'marked', orientation === 'vertical' && 'vertical', track === 'inverted' && 'trackInverted', track === false && 'trackFalse', color && `color${capitalize(color)}`, size && `size${capitalize(size)}`],
+    rail: ['rail'],
+    track: ['track'],
+    mark: ['mark'],
+    markActive: ['markActive'],
+    markLabel: ['markLabel'],
+    markLabelActive: ['markLabelActive'],
+    valueLabel: ['valueLabel'],
+    thumb: ['thumb', disabled && 'disabled', size && `thumbSize${capitalize(size)}`, color && `thumbColor${capitalize(color)}`],
+    active: ['active'],
+    disabled: ['disabled'],
+    focusVisible: ['focusVisible']
+  };
+  return composeClasses(slots, getSliderUtilityClass, classes);
 };
+const Forward = ({
+  children
+}) => children;
 const Slider = /*#__PURE__*/React.forwardRef(function Slider(inputProps, ref) {
-  var _ref, _slots$root, _ref2, _slots$rail, _ref3, _slots$track, _ref4, _slots$thumb, _ref5, _slots$valueLabel, _ref6, _slots$mark, _ref7, _slots$markLabel, _slots$input, _slotProps$root, _slotProps$rail, _slotProps$track, _slotProps$thumb, _slotProps$valueLabel, _slotProps$mark, _slotProps$markLabel, _slotProps$input;
+  var _ref, _slots$root, _ref2, _slots$rail, _ref3, _slots$track, _ref4, _slots$thumb, _ref5, _slots$valueLabel, _ref6, _slots$mark, _ref7, _slots$markLabel, _ref8, _slots$input, _slotProps$root, _slotProps$rail, _slotProps$track, _slotProps$thumb, _slotProps$valueLabel, _slotProps$mark, _slotProps$markLabel, _slotProps$input;
   const props = useThemeProps({
     props: inputProps,
     name: 'MuiSlider'
@@ -423,31 +449,84 @@ const Slider = /*#__PURE__*/React.forwardRef(function Slider(inputProps, ref) {
   const theme = useTheme();
   const isRtl = theme.direction === 'rtl';
   const {
+      'aria-label': ariaLabel,
+      'aria-valuetext': ariaValuetext,
+      'aria-labelledby': ariaLabelledby,
       // eslint-disable-next-line react/prop-types
       component = 'span',
       components = {},
       componentsProps = {},
       color = 'primary',
+      classes: classesProp,
+      // eslint-disable-next-line react/prop-types
+      className,
+      disableSwap = false,
+      disabled = false,
+      getAriaLabel,
+      getAriaValueText,
+      marks: marksProp = false,
+      max = 100,
+      min = 0,
+      orientation = 'horizontal',
       size = 'medium',
+      step = 1,
+      scale = Identity,
       slotProps,
-      slots
+      slots,
+      track = 'normal',
+      valueLabelDisplay = 'off',
+      valueLabelFormat = Identity
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
   const ownerState = _extends({}, props, {
+    isRtl,
+    max,
+    min,
+    classes: classesProp,
+    disabled,
+    disableSwap,
+    orientation,
+    marks: marksProp,
     color,
-    size
+    size,
+    step,
+    scale,
+    track,
+    valueLabelDisplay,
+    valueLabelFormat
   });
-  const classes = extendUtilityClasses(ownerState);
+  const {
+    axisProps,
+    getRootProps,
+    getHiddenInputProps,
+    getThumbProps,
+    open,
+    active,
+    axis,
+    focusedThumbIndex,
+    range,
+    dragging,
+    marks,
+    values,
+    trackOffset,
+    trackLeap
+  } = useSlider(_extends({}, ownerState, {
+    ref
+  }));
+  ownerState.marked = marks.length > 0 && marks.some(mark => mark.label);
+  ownerState.dragging = dragging;
+  ownerState.focusedThumbIndex = focusedThumbIndex;
+  const classes = useUtilityClasses(ownerState);
 
   // 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 : SliderRoot;
   const RailSlot = (_ref2 = (_slots$rail = slots == null ? void 0 : slots.rail) != null ? _slots$rail : components.Rail) != null ? _ref2 : SliderRail;
   const TrackSlot = (_ref3 = (_slots$track = slots == null ? void 0 : slots.track) != null ? _slots$track : components.Track) != null ? _ref3 : SliderTrack;
   const ThumbSlot = (_ref4 = (_slots$thumb = slots == null ? void 0 : slots.thumb) != null ? _slots$thumb : components.Thumb) != null ? _ref4 : SliderThumb;
-  const ValueLabelSlot = (_ref5 = (_slots$valueLabel = slots == null ? void 0 : slots.valueLabel) != null ? _slots$valueLabel : components.ValueLabel) != null ? _ref5 : SliderValueLabel;
+  const ValueLabelSlot = (_ref5 = (_slots$valueLabel = slots == null ? void 0 : slots.valueLabel) != null ? _slots$valueLabel : components.ValueLabel) != null ? _ref5 : StyledSliderValueLabel;
   const MarkSlot = (_ref6 = (_slots$mark = slots == null ? void 0 : slots.mark) != null ? _slots$mark : components.Mark) != null ? _ref6 : SliderMark;
   const MarkLabelSlot = (_ref7 = (_slots$markLabel = slots == null ? void 0 : slots.markLabel) != null ? _slots$markLabel : components.MarkLabel) != null ? _ref7 : SliderMarkLabel;
-  const InputSlot = (_slots$input = slots == null ? void 0 : slots.input) != null ? _slots$input : components.Input;
+  const InputSlot = (_ref8 = (_slots$input = slots == null ? void 0 : slots.input) != null ? _slots$input : components.Input) != null ? _ref8 : 'input';
   const rootSlotProps = (_slotProps$root = slotProps == null ? void 0 : slotProps.root) != null ? _slotProps$root : componentsProps.root;
   const railSlotProps = (_slotProps$rail = slotProps == null ? void 0 : slotProps.rail) != null ? _slotProps$rail : componentsProps.rail;
   const trackSlotProps = (_slotProps$track = slotProps == null ? void 0 : slotProps.track) != null ? _slotProps$track : componentsProps.track;
@@ -456,51 +535,123 @@ const Slider = /*#__PURE__*/React.forwardRef(function Slider(inputProps, ref) {
   const markSlotProps = (_slotProps$mark = slotProps == null ? void 0 : slotProps.mark) != null ? _slotProps$mark : componentsProps.mark;
   const markLabelSlotProps = (_slotProps$markLabel = slotProps == null ? void 0 : slotProps.markLabel) != null ? _slotProps$markLabel : componentsProps.markLabel;
   const inputSlotProps = (_slotProps$input = slotProps == null ? void 0 : slotProps.input) != null ? _slotProps$input : componentsProps.input;
-  return /*#__PURE__*/_jsx(SliderUnstyled, _extends({}, other, {
-    isRtl: isRtl,
-    slots: {
-      root: RootSlot,
-      rail: RailSlot,
-      track: TrackSlot,
-      thumb: ThumbSlot,
-      valueLabel: ValueLabelSlot,
-      mark: MarkSlot,
-      markLabel: MarkLabelSlot,
-      input: InputSlot
-    },
-    slotProps: _extends({}, componentsProps, {
-      root: _extends({}, rootSlotProps, shouldSpreadAdditionalProps(RootSlot) && {
-        as: component,
-        ownerState: _extends({}, rootSlotProps == null ? void 0 : rootSlotProps.ownerState, {
-          color,
-          size
-        })
-      }),
-      rail: railSlotProps,
-      thumb: _extends({}, thumbSlotProps, shouldSpreadAdditionalProps(ThumbSlot) && {
-        ownerState: _extends({}, thumbSlotProps == null ? void 0 : thumbSlotProps.ownerState, {
-          color,
-          size
-        })
-      }),
-      track: _extends({}, trackSlotProps, shouldSpreadAdditionalProps(TrackSlot) && {
-        ownerState: _extends({}, trackSlotProps == null ? void 0 : trackSlotProps.ownerState, {
-          color,
-          size
-        })
-      }),
-      valueLabel: _extends({}, valueLabelSlotProps, shouldSpreadAdditionalProps(ValueLabelSlot) && {
-        ownerState: _extends({}, valueLabelSlotProps == null ? void 0 : valueLabelSlotProps.ownerState, {
-          color,
-          size
-        })
-      }),
-      mark: markSlotProps,
-      markLabel: markLabelSlotProps,
-      input: inputSlotProps
+  const rootProps = useSlotProps({
+    elementType: RootSlot,
+    getSlotProps: getRootProps,
+    externalSlotProps: rootSlotProps,
+    externalForwardedProps: other,
+    additionalProps: _extends({}, shouldSpreadAdditionalProps(RootSlot) && {
+      as: component
     }),
-    classes: classes,
-    ref: ref
+    ownerState: _extends({}, ownerState, rootSlotProps == null ? void 0 : rootSlotProps.ownerState),
+    className: [classes.root, className]
+  });
+  const railProps = useSlotProps({
+    elementType: RailSlot,
+    externalSlotProps: railSlotProps,
+    ownerState,
+    className: classes.rail
+  });
+  const trackProps = useSlotProps({
+    elementType: TrackSlot,
+    externalSlotProps: trackSlotProps,
+    additionalProps: {
+      style: _extends({}, axisProps[axis].offset(trackOffset), axisProps[axis].leap(trackLeap))
+    },
+    ownerState: _extends({}, ownerState, trackSlotProps == null ? void 0 : trackSlotProps.ownerState),
+    className: classes.track
+  });
+  const thumbProps = useSlotProps({
+    elementType: ThumbSlot,
+    getSlotProps: getThumbProps,
+    externalSlotProps: thumbSlotProps,
+    ownerState: _extends({}, ownerState, thumbSlotProps == null ? void 0 : thumbSlotProps.ownerState)
+  });
+  const valueLabelProps = useSlotProps({
+    elementType: ValueLabelSlot,
+    externalSlotProps: valueLabelSlotProps,
+    ownerState: _extends({}, ownerState, valueLabelSlotProps == null ? void 0 : valueLabelSlotProps.ownerState),
+    className: classes.valueLabel
+  });
+  const markProps = useSlotProps({
+    elementType: MarkSlot,
+    externalSlotProps: markSlotProps,
+    ownerState,
+    className: classes.mark
+  });
+  const markLabelProps = useSlotProps({
+    elementType: MarkLabelSlot,
+    externalSlotProps: markLabelSlotProps,
+    ownerState
+  });
+  const inputSliderProps = useSlotProps({
+    elementType: InputSlot,
+    getSlotProps: getHiddenInputProps,
+    externalSlotProps: inputSlotProps,
+    ownerState
+  });
+  return /*#__PURE__*/_jsxs(RootSlot, _extends({}, rootProps, {
+    children: [/*#__PURE__*/_jsx(RailSlot, _extends({}, railProps)), /*#__PURE__*/_jsx(TrackSlot, _extends({}, trackProps)), marks.filter(mark => mark.value >= min && mark.value <= max).map((mark, index) => {
+      const percent = valueToPercent(mark.value, min, max);
+      const style = axisProps[axis].offset(percent);
+      let markActive;
+      if (track === false) {
+        markActive = values.indexOf(mark.value) !== -1;
+      } else {
+        markActive = track === 'normal' && (range ? mark.value >= values[0] && mark.value <= values[values.length - 1] : mark.value <= values[0]) || track === 'inverted' && (range ? mark.value <= values[0] || mark.value >= values[values.length - 1] : mark.value >= values[0]);
+      }
+      return /*#__PURE__*/_jsxs(React.Fragment, {
+        children: [/*#__PURE__*/_jsx(MarkSlot, _extends({
+          "data-index": index
+        }, markProps, !isHostComponent(MarkSlot) && {
+          markActive
+        }, {
+          style: _extends({}, style, markProps.style),
+          className: clsx(markProps.className, markActive && classes.markActive)
+        })), mark.label != null ? /*#__PURE__*/_jsx(MarkLabelSlot, _extends({
+          "aria-hidden": true,
+          "data-index": index
+        }, markLabelProps, !isHostComponent(MarkLabelSlot) && {
+          markLabelActive: markActive
+        }, {
+          style: _extends({}, style, markLabelProps.style),
+          className: clsx(classes.markLabel, markLabelProps.className, markActive && classes.markLabelActive),
+          children: mark.label
+        })) : null]
+      }, index);
+    }), values.map((value, index) => {
+      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) && {
+          valueLabelFormat,
+          valueLabelDisplay,
+          value: typeof valueLabelFormat === 'function' ? valueLabelFormat(scale(value), index) : valueLabelFormat,
+          index,
+          open: open === index || active === index || valueLabelDisplay === 'on',
+          disabled
+        }, valueLabelProps, {
+          children: /*#__PURE__*/_jsx(ThumbSlot, _extends({
+            "data-index": index,
+            "data-focusvisible": focusedThumbIndex === index
+          }, thumbProps, {
+            className: clsx(classes.thumb, thumbProps.className, active === index && classes.active, focusedThumbIndex === index && classes.focusVisible),
+            style: _extends({}, style, {
+              pointerEvents: disableSwap && active !== index ? 'none' : undefined
+            }, thumbProps.style),
+            children: /*#__PURE__*/_jsx(InputSlot, _extends({
+              "data-index": index,
+              "aria-label": getAriaLabel ? getAriaLabel(index) : ariaLabel,
+              "aria-valuenow": scale(value),
+              "aria-labelledby": ariaLabelledby,
+              "aria-valuetext": getAriaValueText ? getAriaValueText(scale(value), index) : ariaValuetext,
+              value: values[index]
+            }, inputSliderProps))
+          }))
+        }))
+      }, index);
+    })]
   }));
 });
 process.env.NODE_ENV !== "production" ? Slider.propTypes /* remove-proptypes */ = {
@@ -670,7 +821,11 @@ process.env.NODE_ENV !== "production" ? Slider.propTypes /* remove-proptypes */
   orientation: PropTypes.oneOf(['horizontal', 'vertical']),
   /**
    * A transformation function, to change the scale of the slider.
-   * @default (x) => x
+   * @param {any} x
+   * @returns {any}
+   * @default function Identity(x) {
+   *   return x;
+   * }
    */
   scale: PropTypes.func,
   /**
@@ -761,7 +916,11 @@ process.env.NODE_ENV !== "production" ? Slider.propTypes /* remove-proptypes */
    *
    * - {number} value The value label's value to format
    * - {number} index The value label's index to format
-   * @default (x) => x
+   * @param {any} x
+   * @returns {any}
+   * @default function Identity(x) {
+   *   return x;
+   * }
    */
   valueLabelFormat: PropTypes.oneOfType([PropTypes.func, PropTypes.string])
 } : void 0;

package/Slider/SliderValueLabel.d.ts

@@ -0,0 +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;

package/Slider/SliderValueLabel.js

@@ -0,0 +1,52 @@
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import clsx from 'clsx';
+import sliderClasses from './sliderClasses';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const useValueLabelClasses = props => {
+  const {
+    open
+  } = props;
+  const utilityClasses = {
+    offset: clsx(open && sliderClasses.valueLabelOpen),
+    circle: sliderClasses.valueLabelCircle,
+    label: sliderClasses.valueLabelLabel
+  };
+  return utilityClasses;
+};
+
+/**
+ * @ignore - internal component.
+ */
+export default function SliderValueLabel(props) {
+  const {
+    children,
+    className,
+    value
+  } = props;
+  const classes = useValueLabelClasses(props);
+  if (!children) {
+    return null;
+  }
+  return /*#__PURE__*/React.cloneElement(children, {
+    className: clsx(children.props.className)
+  }, /*#__PURE__*/_jsxs(React.Fragment, {
+    children: [children.props.children, /*#__PURE__*/_jsx("span", {
+      className: clsx(classes.offset, className),
+      "aria-hidden": true,
+      children: /*#__PURE__*/_jsx("span", {
+        className: classes.circle,
+        children: /*#__PURE__*/_jsx("span", {
+          className: classes.label,
+          children: value
+        })
+      })
+    })]
+  }));
+}
+process.env.NODE_ENV !== "production" ? SliderValueLabel.propTypes = {
+  children: PropTypes.element.isRequired,
+  className: PropTypes.string,
+  value: PropTypes.node
+} : void 0;

package/Slider/SliderValueLabel.types.d.ts

@@ -0,0 +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';
+}

package/Slider/SliderValueLabel.types.js

@@ -0,0 +1 @@
+export {};

package/Slider/index.d.ts

@@ -1,2 +1,5 @@
 export { default } from './Slider';
 export * from './Slider';
+
+export { default as sliderClasses } from './sliderClasses';
+export * from './sliderClasses';

package/Slider/index.js

@@ -1,2 +1,4 @@
 export { default } from './Slider';
-export * from './Slider';
+export * from './Slider';
+export { default as sliderClasses } from './sliderClasses';
+export * from './sliderClasses';

package/Slider/sliderClasses.d.ts

@@ -0,0 +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;

package/Slider/sliderClasses.js

@@ -0,0 +1,7 @@
+import { unstable_generateUtilityClasses as generateUtilityClasses } from '@mui/utils';
+import generateUtilityClass from '../generateUtilityClass';
+export function getSliderUtilityClass(slot) {
+  return generateUtilityClass('MuiSlider', slot);
+}
+const sliderClasses = generateUtilityClasses('MuiSlider', ['root', 'active', 'colorPrimary', 'colorSecondary', 'disabled', 'dragging', 'focusVisible', 'mark', 'markActive', 'marked', 'markLabel', 'markLabelActive', 'rail', 'sizeSmall', 'thumb', 'thumbColorPrimary', 'thumbColorSecondary', 'track', 'trackInverted', 'trackFalse', 'thumbSizeSmall', 'valueLabel', 'valueLabelOpen', 'valueLabelCircle', 'valueLabelLabel', 'vertical']);
+export default sliderClasses;

package/SwipeableDrawer/SwipeableDrawer.d.ts

@@ -2,6 +2,21 @@ import * as React from 'react';
 import { DrawerProps } from '../Drawer';
 
 export interface SwipeableDrawerProps extends Omit<DrawerProps, 'onClose' | 'open'> {
+  /**
+   * If set to true, the swipe event will open the drawer even if the user begins the swipe on one of the drawer's children.
+   * This can be useful in scenarios where the drawer is partially visible.
+   * You can customize it further with a callback that determines which children the user can drag over to open the drawer
+   * (for example, to ignore other elements that handle touch move events, like sliders).
+   *
+   * @param {TouchEvent} event The 'touchstart' event
+   * @param {HTMLDivElement} swipeArea The swipe area element
+   * @param {HTMLDivElement} paper The drawer's paper element
+   *
+   * @default false
+   */
+  allowSwipeInChildren?:
+    | boolean
+    | ((e: TouchEvent, swipeArea: HTMLDivElement, paper: HTMLDivElement) => boolean);
   /**
    * Disable the backdrop transition.
    * This can improve the FPS on low-end devices.