@mui/material 5.11.5 → 5.11.7

package/Slider/Slider.d.ts

@@ -1,24 +1,39 @@
 import * as React from 'react';
-import {
-  ExtendSliderUnstyledTypeMap,
-  ExtendSliderUnstyled,
-  SliderUnstyledTypeMap,
-  SliderValueLabelProps,
-} from '@mui/base/SliderUnstyled';
+import { SlotComponentProps } from '@mui/base';
+import { Mark } from '@mui/base/SliderUnstyled';
 import { SxProps } from '@mui/system';
 import { OverridableStringUnion } from '@mui/types';
 import { Theme } from '../styles';
-import { OverrideProps } from '../OverridableComponent';
+import { OverrideProps, OverridableComponent } from '../OverridableComponent';
+import SliderValueLabelComponent from './SliderValueLabel';
+import { SliderClasses } from './sliderClasses';
 
 export interface SliderPropsColorOverrides {}
 
 export interface SliderPropsSizeOverrides {}
 
-export type SliderTypeMap<
-  D extends React.ElementType = 'span',
-  P = {},
-> = ExtendSliderUnstyledTypeMap<{
+export interface SliderComponentsPropsOverrides {}
+
+export interface SliderOwnerState extends SliderProps {
+  dragging: boolean;
+  marked: boolean;
+  focusedThumbIndex: number;
+}
+
+export interface SliderTypeMap<D extends React.ElementType = 'span', P = {}> {
   props: P & {
+    /**
+     * The label of the slider.
+     */
+    'aria-label'?: string;
+    /**
+     * The id of the element containing a label for the slider.
+     */
+    'aria-labelledby'?: string;
+    /**
+     * A string value that provides a user-friendly name for the current value of the slider.
+     */
+    'aria-valuetext'?: string;
     /**
      * The color of the component.
      * It supports both default and custom theme colors, which can be added as shown in the
@@ -53,38 +68,209 @@ export type SliderTypeMap<
      *
      * @default {}
      */
-    componentsProps?: SliderUnstyledTypeMap['props']['slotProps'];
+    componentsProps?: {
+      root?: SlotComponentProps<'span', SliderComponentsPropsOverrides, SliderOwnerState>;
+      track?: SlotComponentProps<'span', SliderComponentsPropsOverrides, SliderOwnerState>;
+      rail?: SlotComponentProps<'span', SliderComponentsPropsOverrides, SliderOwnerState>;
+      thumb?: SlotComponentProps<'span', SliderComponentsPropsOverrides, SliderOwnerState>;
+      mark?: SlotComponentProps<'span', SliderComponentsPropsOverrides, SliderOwnerState>;
+      markLabel?: SlotComponentProps<'span', SliderComponentsPropsOverrides, SliderOwnerState>;
+      valueLabel?: SlotComponentProps<
+        typeof SliderValueLabelComponent,
+        SliderComponentsPropsOverrides,
+        SliderOwnerState
+      >;
+      input?: SlotComponentProps<'input', SliderComponentsPropsOverrides, SliderOwnerState>;
+    };
     /**
      * Override or extend the styles applied to the component.
      */
-    classes?: SliderUnstyledTypeMap['props']['classes'] & {
-      /** 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 `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;
-    };
+    classes?: Partial<SliderClasses>;
+    /**
+     * The default value. Use when the component is not controlled.
+     */
+    defaultValue?: number | number[];
+    /**
+     * If `true`, the component is disabled.
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * If `true`, the active thumb doesn't swap when moving pointer over a thumb while dragging another thumb.
+     * @default false
+     */
+    disableSwap?: boolean;
+    /**
+     * 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.
+     * @param {number} index The thumb label's index to format.
+     * @returns {string}
+     */
+    getAriaLabel?: (index: number) => string;
+    /**
+     * 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.
+     * @param {number} value The thumb label's value to format.
+     * @param {number} index The thumb label's index to format.
+     * @returns {string}
+     */
+    getAriaValueText?: (value: number, index: number) => string;
+    /**
+     * 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.
+     * If an array, it should contain objects with `value` and an optional `label` keys.
+     * @default false
+     */
+    marks?: boolean | Mark[];
+    /**
+     * The maximum allowed value of the slider.
+     * Should not be equal to min.
+     * @default 100
+     */
+    max?: number;
+    /**
+     * The minimum allowed value of the slider.
+     * Should not be equal to max.
+     * @default 0
+     */
+    min?: number;
+    /**
+     * Name attribute of the hidden `input` element.
+     */
+    name?: string;
+    /**
+     * Callback function that is fired when the slider's value changed.
+     *
+     * @param {Event} event The event source of the callback.
+     * You can pull out the new value by accessing `event.target.value` (any).
+     * **Warning**: This is a generic event not a change event.
+     * @param {number | number[]} value The new value.
+     * @param {number} activeThumb Index of the currently moved thumb.
+     */
+    onChange?: (event: Event, value: number | number[], activeThumb: number) => void;
+    /**
+     * Callback function that is fired when the `mouseup` is triggered.
+     *
+     * @param {React.SyntheticEvent | Event} event The event source of the callback. **Warning**: This is a generic event not a change event.
+     * @param {number | number[]} value The new value.
+     */
+    onChangeCommitted?: (event: React.SyntheticEvent | Event, value: number | number[]) => void;
+    /**
+     * The component orientation.
+     * @default 'horizontal'
+     */
+    orientation?: 'horizontal' | 'vertical';
+    /**
+     * A transformation function, to change the scale of the slider.
+     * @param {any} x
+     * @returns {any}
+     * @default function Identity(x) {
+     *   return x;
+     * }
+     */
+    scale?: (value: number) => number;
     /**
      * The size of the slider.
      * @default 'medium'
      */
     size?: OverridableStringUnion<'small' | 'medium', SliderPropsSizeOverrides>;
+    /**
+     * The props used for each slot inside the Slider.
+     * @default {}
+     */
+    slotProps?: {
+      root?: SlotComponentProps<'span', SliderComponentsPropsOverrides, SliderOwnerState>;
+      track?: SlotComponentProps<'span', SliderComponentsPropsOverrides, SliderOwnerState>;
+      rail?: SlotComponentProps<'span', SliderComponentsPropsOverrides, SliderOwnerState>;
+      thumb?: SlotComponentProps<'span', SliderComponentsPropsOverrides, SliderOwnerState>;
+      mark?: SlotComponentProps<'span', SliderComponentsPropsOverrides, SliderOwnerState>;
+      markLabel?: SlotComponentProps<'span', SliderComponentsPropsOverrides, SliderOwnerState>;
+      valueLabel?: SlotComponentProps<
+        typeof SliderValueLabelComponent,
+        SliderComponentsPropsOverrides,
+        SliderOwnerState
+      >;
+      input?: SlotComponentProps<'input', SliderComponentsPropsOverrides, SliderOwnerState>;
+    };
+    /**
+     * The components used for each slot inside the Slider.
+     * Either a string to use a HTML element or a component.
+     * @default {}
+     */
+    slots?: {
+      root?: React.ElementType;
+      track?: React.ElementType;
+      rail?: React.ElementType;
+      thumb?: React.ElementType;
+      mark?: React.ElementType;
+      markLabel?: React.ElementType;
+      valueLabel?: React.ElementType;
+      input?: React.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.
+     * We recommend (max - min) to be evenly divisible by the step.
+     *
+     * When step is `null`, the thumb can only be slid onto marks provided with the `marks` prop.
+     * @default 1
+     */
+    step?: number | null;
     /**
      * The system prop that allows defining system overrides as well as additional CSS styles.
      */
     sx?: SxProps<Theme>;
+    /**
+     * Tab index attribute of the hidden `input` element.
+     */
+    tabIndex?: number;
+    /**
+     * The track presentation:
+     *
+     * - `normal` the track will render a bar representing the slider value.
+     * - `inverted` the track will render a bar representing the remaining slider value.
+     * - `false` the track will render without a bar.
+     * @default 'normal'
+     */
+    track?: 'normal' | false | 'inverted';
+    /**
+     * The value of the slider.
+     * For ranged sliders, provide an array with two values.
+     */
+    value?: number | 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';
+    /**
+     * The format function the value label's value.
+     *
+     * When a function is provided, it should have the following signature:
+     *
+     * - {number} value The value label's value to format
+     * - {number} index The value label's index to format
+     * @param {any} x
+     * @returns {any}
+     * @default function Identity(x) {
+     *   return x;
+     * }
+     */
+    valueLabelFormat?: string | ((value: number, index: number) => React.ReactNode);
   };
   defaultComponent: D;
-}>;
+}
 
-export { SliderValueLabelProps };
+export interface SliderValueLabelProps extends React.HTMLAttributes<HTMLSpanElement> {
+  children: React.ReactElement;
+  index: number;
+  open: boolean;
+  value: number;
+}
 
 type SliderRootProps = NonNullable<SliderTypeMap['props']['componentsProps']>['root'];
 type SliderMarkProps = NonNullable<SliderTypeMap['props']['componentsProps']>['mark'];
@@ -111,17 +297,11 @@ export declare const SliderValueLabel: React.FC<SliderValueLabelProps>;
  *
  * - [Slider API](https://mui.com/material-ui/api/slider/)
  */
-declare const Slider: ExtendSliderUnstyled<SliderTypeMap>;
-
-export type SliderClassKey = keyof NonNullable<SliderTypeMap['props']['classes']>;
+declare const Slider: OverridableComponent<SliderTypeMap>;
 
 export type SliderProps<
   D extends React.ElementType = SliderTypeMap['defaultComponent'],
   P = {},
 > = OverrideProps<SliderTypeMap<D, P>, D>;
 
-export type SliderClasses = Record<SliderClassKey, string>;
-
-export declare const sliderClasses: SliderClasses;
-
 export default Slider;

package/Slider/Slider.js

@@ -6,15 +6,15 @@ 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, getSliderUtilityClass } from '@mui/base/SliderUnstyled';
+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 SliderValueLabelComponent from './SliderValueLabel';
-import sliderClasses from './sliderClasses';
+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);
@@ -261,7 +261,7 @@ process.env.NODE_ENV !== "production" ? SliderThumb.propTypes /* remove-proptype
   children: PropTypes.node
 } : void 0;
 export { SliderThumb };
-const SliderValueLabel = styled(SliderValueLabelComponent, {
+const StyledSliderValueLabel = styled(SliderValueLabel, {
   name: 'MuiSlider',
   slot: 'ValueLabel',
   overridesResolver: (props, styles) => styles.valueLabel
@@ -319,7 +319,7 @@ const SliderValueLabel = styled(SliderValueLabelComponent, {
   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"     |
@@ -329,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',
@@ -523,7 +523,7 @@ const Slider = /*#__PURE__*/React.forwardRef(function Slider(inputProps, ref) {
   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 = (_ref8 = (_slots$input = slots == null ? void 0 : slots.input) != null ? _slots$input : components.Input) != null ? _ref8 : 'input';

package/Slider/SliderValueLabel.d.ts

@@ -4,7 +4,7 @@ import { SliderValueLabelProps } from './SliderValueLabel.types';
 /**
  * @ignore - internal component.
  */
-declare function SliderValueLabel(props: SliderValueLabelProps): React.ReactElement<any, string | React.JSXElementConstructor<any>>;
+declare function SliderValueLabel(props: SliderValueLabelProps): React.ReactElement<any, string | React.JSXElementConstructor<any>> | null;
 declare namespace SliderValueLabel {
     var propTypes: {
         children: PropTypes.Validator<PropTypes.ReactElementLike>;

package/Slider/SliderValueLabel.js

@@ -26,6 +26,9 @@ export default function SliderValueLabel(props) {
     value
   } = props;
   const classes = useValueLabelClasses(props);
+  if (!children) {
+    return null;
+  }
   return /*#__PURE__*/React.cloneElement(children, {
     className: clsx(children.props.className)
   }, /*#__PURE__*/_jsxs(React.Fragment, {

package/Slider/SliderValueLabel.types.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 export interface SliderValueLabelProps {
-    children: React.ReactElement;
+    children?: React.ReactElement;
     className?: string;
     style?: React.CSSProperties;
     /**

package/Slider/index.d.ts

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

package/Slider/index.js

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

package/Slider/sliderClasses.d.ts

@@ -1,29 +1,58 @@
-declare const 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;
-    sizeSmall: string;
-    thumbColorPrimary: string;
-    thumbColorSecondary: string;
-    thumbSizeSmall: string;
-    root: 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;
-    valueLabel: string;
-    valueLabelOpen: string;
-    valueLabelCircle: string;
-    valueLabelLabel: 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

@@ -1,5 +1,7 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
 import { unstable_generateUtilityClasses as generateUtilityClasses } from '@mui/utils';
-import { sliderUnstyledClasses } from '@mui/base/SliderUnstyled';
-const sliderClasses = _extends({}, sliderUnstyledClasses, generateUtilityClasses('MuiSlider', ['colorPrimary', 'colorSecondary', 'thumbColorPrimary', 'thumbColorSecondary', 'sizeSmall', 'thumbSizeSmall']));
+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.

package/SwipeableDrawer/SwipeableDrawer.js

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 const _excluded = ["BackdropProps"],
-  _excluded2 = ["anchor", "disableBackdropTransition", "disableDiscovery", "disableSwipeToOpen", "hideBackdrop", "hysteresis", "minFlingVelocity", "ModalProps", "onClose", "onOpen", "open", "PaperProps", "SwipeAreaProps", "swipeAreaWidth", "transitionDuration", "variant"];
+  _excluded2 = ["anchor", "disableBackdropTransition", "disableDiscovery", "disableSwipeToOpen", "hideBackdrop", "hysteresis", "allowSwipeInChildren", "minFlingVelocity", "ModalProps", "onClose", "onOpen", "open", "PaperProps", "SwipeAreaProps", "swipeAreaWidth", "transitionDuration", "variant"];
 import * as React from 'react';
 import { flushSync } from 'react-dom';
 import PropTypes from 'prop-types';
@@ -133,6 +133,7 @@ const SwipeableDrawer = /*#__PURE__*/React.forwardRef(function SwipeableDrawer(i
       disableSwipeToOpen = iOS,
       hideBackdrop,
       hysteresis = 0.52,
+      allowSwipeInChildren = false,
       minFlingVelocity = 450,
       ModalProps: {
         BackdropProps
@@ -252,6 +253,30 @@ const SwipeableDrawer = /*#__PURE__*/React.forwardRef(function SwipeableDrawer(i
       });
     }
   });
+  const startMaybeSwiping = (force = false) => {
+    if (!maybeSwiping) {
+      // on Safari Mobile, if you want to be able to have the 'click' event fired on child elements, nothing in the DOM can be changed.
+      // this is because Safari Mobile will not fire any mouse events (still fires touch though) if the DOM changes during mousemove.
+      // so do this change on first touchmove instead of touchstart
+      if (force || !(disableDiscovery && allowSwipeInChildren)) {
+        flushSync(() => {
+          setMaybeSwiping(true);
+        });
+      }
+      const horizontalSwipe = isHorizontal(anchor);
+      if (!open && paperRef.current) {
+        // The ref may be null when a parent component updates while swiping.
+        setPosition(getMaxTranslate(horizontalSwipe, paperRef.current) + (disableDiscovery ? 15 : -DRAG_STARTED_SIGNAL), {
+          changeTransition: false
+        });
+      }
+      swipeInstance.current.velocity = 0;
+      swipeInstance.current.lastTime = null;
+      swipeInstance.current.lastTranslate = null;
+      swipeInstance.current.paperHit = false;
+      touchDetected.current = true;
+    }
+  };
   const handleBodyTouchMove = useEventCallback(nativeEvent => {
     // the ref may be null when a parent component updates while swiping
     if (!paperRef.current || !touchDetected.current) {
@@ -262,6 +287,7 @@ const SwipeableDrawer = /*#__PURE__*/React.forwardRef(function SwipeableDrawer(i
     if (claimedSwipeInstance !== null && claimedSwipeInstance !== swipeInstance.current) {
       return;
     }
+    startMaybeSwiping(true);
     const anchorRtl = getAnchor(theme, anchor);
     const horizontalSwipe = isHorizontal(anchor);
     const currentX = calculateCurrentX(anchorRtl, nativeEvent.touches, ownerDocument(nativeEvent.currentTarget));
@@ -372,7 +398,12 @@ const SwipeableDrawer = /*#__PURE__*/React.forwardRef(function SwipeableDrawer(i
     const currentX = calculateCurrentX(anchorRtl, nativeEvent.touches, ownerDocument(nativeEvent.currentTarget));
     const currentY = calculateCurrentY(anchorRtl, nativeEvent.touches, ownerWindow(nativeEvent.currentTarget));
     if (!open) {
-      if (disableSwipeToOpen || nativeEvent.target !== swipeAreaRef.current) {
+      var _paperRef$current;
+      // logic for if swipe should be ignored:
+      // if disableSwipeToOpen
+      // if target != swipeArea, and target is not a child of paper ref
+      // if is a child of paper ref, and `allowSwipeInChildren` does not allow it
+      if (disableSwipeToOpen || !(nativeEvent.target === swipeAreaRef.current || (_paperRef$current = paperRef.current) != null && _paperRef$current.contains(nativeEvent.target) && (typeof allowSwipeInChildren === 'function' ? allowSwipeInChildren(nativeEvent, swipeAreaRef.current, paperRef.current) : allowSwipeInChildren))) {
         return;
       }
       if (horizontalSwipe) {
@@ -387,20 +418,7 @@ const SwipeableDrawer = /*#__PURE__*/React.forwardRef(function SwipeableDrawer(i
     claimedSwipeInstance = null;
     swipeInstance.current.startX = currentX;
     swipeInstance.current.startY = currentY;
-    flushSync(() => {
-      setMaybeSwiping(true);
-    });
-    if (!open && paperRef.current) {
-      // The ref may be null when a parent component updates while swiping.
-      setPosition(getMaxTranslate(horizontalSwipe, paperRef.current) + (disableDiscovery ? 15 : -DRAG_STARTED_SIGNAL), {
-        changeTransition: false
-      });
-    }
-    swipeInstance.current.velocity = 0;
-    swipeInstance.current.lastTime = null;
-    swipeInstance.current.lastTranslate = null;
-    swipeInstance.current.paperHit = false;
-    touchDetected.current = true;
+    startMaybeSwiping();
   });
   React.useEffect(() => {
     if (variant === 'temporary') {
@@ -448,7 +466,7 @@ const SwipeableDrawer = /*#__PURE__*/React.forwardRef(function SwipeableDrawer(i
       hideBackdrop: hideBackdrop,
       PaperProps: _extends({}, PaperProps, {
         style: _extends({
-          pointerEvents: variant === 'temporary' && !open ? 'none' : ''
+          pointerEvents: variant === 'temporary' && !open && !allowSwipeInChildren ? 'none' : ''
         }, PaperProps.style),
         ref: handleRef
       }),
@@ -470,6 +488,19 @@ process.env.NODE_ENV !== "production" ? SwipeableDrawer.propTypes /* remove-prop
   // | These PropTypes are generated from the TypeScript type definitions |
   // |     To update them edit the d.ts file and run "yarn proptypes"     |
   // ----------------------------------------------------------------------
+  /**
+   * 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: PropTypes.oneOfType([PropTypes.bool, PropTypes.func]),
   /**
    * @ignore
    */

package/Switch/Switch.js

@@ -258,6 +258,7 @@ process.env.NODE_ENV !== "production" ? Switch.propTypes /* remove-proptypes */
   disabled: PropTypes.bool,
   /**
    * If `true`, the ripple effect is disabled.
+   * @default false
    */
   disableRipple: PropTypes.bool,
   /**
@@ -294,6 +295,7 @@ process.env.NODE_ENV !== "production" ? Switch.propTypes /* remove-proptypes */
   onChange: PropTypes.func,
   /**
    * If `true`, the `input` element is required.
+   * @default false
    */
   required: PropTypes.bool,
   /**

package/TabScrollButton/TabScrollButton.d.ts

@@ -18,6 +18,7 @@ export interface TabScrollButtonProps extends StandardProps<React.HTMLAttributes
   direction: 'left' | 'right';
   /**
    * If `true`, the component is disabled.
+   * @default false
    */
   disabled?: boolean;
   /**

package/TabScrollButton/TabScrollButton.js

@@ -105,6 +105,7 @@ process.env.NODE_ENV !== "production" ? TabScrollButton.propTypes /* remove-prop
   direction: PropTypes.oneOf(['left', 'right']).isRequired,
   /**
    * If `true`, the component is disabled.
+   * @default false
    */
   disabled: PropTypes.bool,
   /**