@mui/material 5.11.5 → 5.11.6

package/node/SwipeableDrawer/SwipeableDrawer.js

@@ -25,7 +25,7 @@ var _utils2 = require("../transitions/utils");
 var _SwipeArea = _interopRequireDefault(require("./SwipeArea"));
 var _jsxRuntime = require("react/jsx-runtime");
 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"];
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 // This value is closed to what browsers are using internally to
@@ -141,6 +141,7 @@ const SwipeableDrawer = /*#__PURE__*/React.forwardRef(function SwipeableDrawer(i
       disableSwipeToOpen = iOS,
       hideBackdrop,
       hysteresis = 0.52,
+      allowSwipeInChildren = false,
       minFlingVelocity = 450,
       ModalProps: {
         BackdropProps
@@ -260,6 +261,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)) {
+        (0, _reactDom.flushSync)(() => {
+          setMaybeSwiping(true);
+        });
+      }
+      const horizontalSwipe = (0, _Drawer.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 = (0, _useEventCallback.default)(nativeEvent => {
     // the ref may be null when a parent component updates while swiping
     if (!paperRef.current || !touchDetected.current) {
@@ -270,6 +295,7 @@ const SwipeableDrawer = /*#__PURE__*/React.forwardRef(function SwipeableDrawer(i
     if (claimedSwipeInstance !== null && claimedSwipeInstance !== swipeInstance.current) {
       return;
     }
+    startMaybeSwiping(true);
     const anchorRtl = (0, _Drawer.getAnchor)(theme, anchor);
     const horizontalSwipe = (0, _Drawer.isHorizontal)(anchor);
     const currentX = calculateCurrentX(anchorRtl, nativeEvent.touches, (0, _ownerDocument.default)(nativeEvent.currentTarget));
@@ -380,7 +406,12 @@ const SwipeableDrawer = /*#__PURE__*/React.forwardRef(function SwipeableDrawer(i
     const currentX = calculateCurrentX(anchorRtl, nativeEvent.touches, (0, _ownerDocument.default)(nativeEvent.currentTarget));
     const currentY = calculateCurrentY(anchorRtl, nativeEvent.touches, (0, _ownerWindow.default)(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) {
@@ -395,20 +426,7 @@ const SwipeableDrawer = /*#__PURE__*/React.forwardRef(function SwipeableDrawer(i
     claimedSwipeInstance = null;
     swipeInstance.current.startX = currentX;
     swipeInstance.current.startY = currentY;
-    (0, _reactDom.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') {
@@ -456,7 +474,7 @@ const SwipeableDrawer = /*#__PURE__*/React.forwardRef(function SwipeableDrawer(i
       hideBackdrop: hideBackdrop,
       PaperProps: (0, _extends2.default)({}, PaperProps, {
         style: (0, _extends2.default)({
-          pointerEvents: variant === 'temporary' && !open ? 'none' : ''
+          pointerEvents: variant === 'temporary' && !open && !allowSwipeInChildren ? 'none' : ''
         }, PaperProps.style),
         ref: handleRef
       }),
@@ -478,6 +496,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.default.oneOfType([_propTypes.default.bool, _propTypes.default.func]),
   /**
    * @ignore
    */

package/node/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/material v5.11.5
+ * @mui/material v5.11.6
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/material",
-  "version": "5.11.5",
+  "version": "5.11.6",
   "private": false,
   "author": "MUI Team",
   "description": "React components that implement Google's Material Design.",
@@ -46,8 +46,8 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.20.7",
-    "@mui/base": "5.0.0-alpha.114",
-    "@mui/core-downloads-tracker": "^5.11.5",
+    "@mui/base": "5.0.0-alpha.115",
+    "@mui/core-downloads-tracker": "^5.11.6",
     "@mui/system": "^5.11.5",
     "@mui/types": "^7.2.3",
     "@mui/utils": "^5.11.2",

package/styles/CssVarsProvider.d.ts

@@ -1,16 +1,16 @@
-/// <reference types="react" />
-import { SupportedColorScheme } from './experimental_extendTheme';
-declare const shouldSkipGeneratingVar: (keys: string[]) => boolean;
-declare const CssVarsProvider: (props: import("react").PropsWithChildren<Partial<import("@mui/system").CssVarsProviderConfig<SupportedColorScheme>> & {
-    theme?: {
-        cssVarPrefix?: string | undefined;
-        colorSchemes: Record<SupportedColorScheme, Record<string, any>>;
-    } | undefined;
-    documentNode?: Document | null | undefined;
-    colorSchemeNode?: Element | null | undefined;
-    colorSchemeSelector?: string | undefined;
-    storageWindow?: Window | null | undefined;
-    disableNestedContext?: boolean | undefined;
-    disableStyleSheetGeneration?: boolean | undefined;
-}>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>, useColorScheme: () => import("@mui/system").ColorSchemeContextValue<SupportedColorScheme>, getInitColorSchemeScript: typeof import("@mui/system").getInitColorSchemeScript;
-export { useColorScheme, getInitColorSchemeScript, shouldSkipGeneratingVar, CssVarsProvider as Experimental_CssVarsProvider, };
+/// <reference types="react" />
+import { SupportedColorScheme } from './experimental_extendTheme';
+declare const shouldSkipGeneratingVar: (keys: string[]) => boolean;
+declare const CssVarsProvider: (props: import("react").PropsWithChildren<Partial<import("@mui/system").CssVarsProviderConfig<SupportedColorScheme>> & {
+    theme?: {
+        cssVarPrefix?: string | undefined;
+        colorSchemes: Record<SupportedColorScheme, Record<string, any>>;
+    } | undefined;
+    documentNode?: Document | null | undefined;
+    colorSchemeNode?: Element | null | undefined;
+    colorSchemeSelector?: string | undefined;
+    storageWindow?: Window | null | undefined;
+    disableNestedContext?: boolean | undefined;
+    disableStyleSheetGeneration?: boolean | undefined;
+}>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>, useColorScheme: () => import("@mui/system").ColorSchemeContextValue<SupportedColorScheme>, getInitColorSchemeScript: typeof import("@mui/system").getInitColorSchemeScript;
+export { useColorScheme, getInitColorSchemeScript, shouldSkipGeneratingVar, CssVarsProvider as Experimental_CssVarsProvider, };

package/styles/excludeVariablesFromRoot.d.ts

@@ -1,5 +1,5 @@
-/**
- * @internal These variables should not appear in the :root stylesheet when the `defaultMode="dark"`
- */
-declare const excludeVariablesFromRoot: (cssVarPrefix: string) => string[];
-export default excludeVariablesFromRoot;
+/**
+ * @internal These variables should not appear in the :root stylesheet when the `defaultMode="dark"`
+ */
+declare const excludeVariablesFromRoot: (cssVarPrefix: string) => string[];
+export default excludeVariablesFromRoot;

package/styles/getOverlayAlpha.d.ts

@@ -1,2 +1,2 @@
-declare const getOverlayAlpha: (elevation: number) => string;
-export default getOverlayAlpha;
+declare const getOverlayAlpha: (elevation: number) => string;
+export default getOverlayAlpha;

package/transitions/index.d.ts

@@ -1 +1 @@
-export * from './transition';
+export * from './transition';

package/transitions/transition.d.ts

@@ -1,13 +1,13 @@
-import { TransitionProps as _TransitionProps, TransitionActions } from 'react-transition-group/Transition';
-import * as React from 'react';
-export type TransitionHandlerKeys = 'onEnter' | 'onEntering' | 'onEntered' | 'onExit' | 'onExiting' | 'onExited';
-export type TransitionHandlerProps = Pick<_TransitionProps, TransitionHandlerKeys>;
-export interface EasingProps {
-    easing: string | {
-        enter?: string;
-        exit?: string;
-    };
-}
-export type TransitionKeys = 'in' | 'mountOnEnter' | 'unmountOnExit' | 'timeout' | 'easing' | 'addEndListener' | TransitionHandlerKeys;
-export interface TransitionProps extends TransitionActions, Partial<Pick<_TransitionProps & EasingProps, TransitionKeys>>, React.HTMLAttributes<HTMLElement> {
-}
+import { TransitionProps as _TransitionProps, TransitionActions } from 'react-transition-group/Transition';
+import * as React from 'react';
+export type TransitionHandlerKeys = 'onEnter' | 'onEntering' | 'onEntered' | 'onExit' | 'onExiting' | 'onExited';
+export type TransitionHandlerProps = Pick<_TransitionProps, TransitionHandlerKeys>;
+export interface EasingProps {
+    easing: string | {
+        enter?: string;
+        exit?: string;
+    };
+}
+export type TransitionKeys = 'in' | 'mountOnEnter' | 'unmountOnExit' | 'timeout' | 'easing' | 'addEndListener' | TransitionHandlerKeys;
+export interface TransitionProps extends TransitionActions, Partial<Pick<_TransitionProps & EasingProps, TransitionKeys>>, React.HTMLAttributes<HTMLElement> {
+}

package/transitions/utils.d.ts

@@ -1,23 +1,23 @@
-import * as React from 'react';
-export declare const reflow: (node: Element) => number;
-interface ComponentProps {
-    easing: string | {
-        enter?: string;
-        exit?: string;
-    } | undefined;
-    style: React.CSSProperties | undefined;
-    timeout: number | {
-        enter?: number;
-        exit?: number;
-    };
-}
-interface Options {
-    mode: 'enter' | 'exit';
-}
-interface TransitionProps {
-    duration: string | number;
-    easing: string | undefined;
-    delay: string | undefined;
-}
-export declare function getTransitionProps(props: ComponentProps, options: Options): TransitionProps;
-export {};
+import * as React from 'react';
+export declare const reflow: (node: Element) => number;
+interface ComponentProps {
+    easing: string | {
+        enter?: string;
+        exit?: string;
+    } | undefined;
+    style: React.CSSProperties | undefined;
+    timeout: number | {
+        enter?: number;
+        exit?: number;
+    };
+}
+interface Options {
+    mode: 'enter' | 'exit';
+}
+interface TransitionProps {
+    duration: string | number;
+    easing: string | undefined;
+    delay: string | undefined;
+}
+export declare function getTransitionProps(props: ComponentProps, options: Options): TransitionProps;
+export {};

package/types/OverridableComponentAugmentation.d.ts

@@ -1,31 +1,31 @@
-import * as React from 'react';
-import { DistributiveOmit } from '@mui/types';
-declare module '@mui/material/OverridableComponent' {
-    /**
-     * A component whose root component can be controlled via a `component` prop.
-     *
-     * Adjusts valid props based on the type of `component`.
-     */
-    interface OverridableComponent<M extends OverridableTypeMap> {
-        <C extends React.ElementType>(props: {
-            /**
-             * The component used for the root node.
-             * Either a string to use a HTML element or a component.
-             */
-            component: C;
-        } & OverridePropsVer2<M, C>): JSX.Element;
-        (props: DefaultComponentPropsVer2<M>): JSX.Element;
-    }
-    /**
-     * Props of the component if `component={Component}` is used.
-     */
-    type OverridePropsVer2<M extends OverridableTypeMap, C extends React.ElementType> = (BaseProps<M> & DistributiveOmit<React.ComponentPropsWithoutRef<C>, keyof BaseProps<M>> & {
-        ref?: React.Ref<Element>;
-    });
-    /**
-     * Props if `component={Component}` is NOT used.
-     */
-    type DefaultComponentPropsVer2<M extends OverridableTypeMap> = BaseProps<M> & DistributiveOmit<React.ComponentPropsWithoutRef<M['defaultComponent']>, keyof BaseProps<M>> & {
-        ref?: React.Ref<Element>;
-    };
-}
+import * as React from 'react';
+import { DistributiveOmit } from '@mui/types';
+declare module '@mui/material/OverridableComponent' {
+    /**
+     * A component whose root component can be controlled via a `component` prop.
+     *
+     * Adjusts valid props based on the type of `component`.
+     */
+    interface OverridableComponent<M extends OverridableTypeMap> {
+        <C extends React.ElementType>(props: {
+            /**
+             * The component used for the root node.
+             * Either a string to use a HTML element or a component.
+             */
+            component: C;
+        } & OverridePropsVer2<M, C>): JSX.Element;
+        (props: DefaultComponentPropsVer2<M>): JSX.Element;
+    }
+    /**
+     * Props of the component if `component={Component}` is used.
+     */
+    type OverridePropsVer2<M extends OverridableTypeMap, C extends React.ElementType> = (BaseProps<M> & DistributiveOmit<React.ComponentPropsWithoutRef<C>, keyof BaseProps<M>> & {
+        ref?: React.Ref<Element>;
+    });
+    /**
+     * Props if `component={Component}` is NOT used.
+     */
+    type DefaultComponentPropsVer2<M extends OverridableTypeMap> = BaseProps<M> & DistributiveOmit<React.ComponentPropsWithoutRef<M['defaultComponent']>, keyof BaseProps<M>> & {
+        ref?: React.Ref<Element>;
+    };
+}

package/umd/material-ui.development.js

@@ -1,5 +1,5 @@
 /**
- * @mui/material v5.11.5
+ * @mui/material v5.11.6
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the
@@ -15086,12 +15086,6 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     NoSsr['propTypes' + ''] = exactProp(NoSsr.propTypes);
   }
 
-  function getSliderUtilityClass(slot) {
-    return generateUtilityClass('MuiSlider', slot);
-  }
-  const sliderUnstyledClasses = generateUtilityClasses('MuiSlider', ['root', 'active', 'focusVisible', 'disabled', 'dragging', 'marked', 'vertical', 'trackInverted', 'trackFalse', 'rail', 'track', 'mark', 'markActive', 'markLabel', 'markLabelActive', 'thumb', 'valueLabel', 'valueLabelOpen', 'valueLabelCircle', 'valueLabelLabel']);
-  var sliderUnstyledClasses$1 = sliderUnstyledClasses;
-
   const INTENTIONAL_DRAG_COUNT_THRESHOLD = 2;
   function asc(a, b) {
     return a - b;
@@ -24516,8 +24510,6 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
         color: (theme.vars || theme).palette.action.disabled
       }, ownerState.variant === 'outlined' && {
         border: `1px solid ${(theme.vars || theme).palette.action.disabledBackground}`
-      }, ownerState.variant === 'outlined' && ownerState.color === 'secondary' && {
-        border: `1px solid ${(theme.vars || theme).palette.action.disabled}`
       }, ownerState.variant === 'contained' && {
         color: (theme.vars || theme).palette.action.disabled,
         boxShadow: (theme.vars || theme).shadows[0],
@@ -39728,7 +39720,10 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   } ;
   var Skeleton$1 = Skeleton;
 
-  const sliderClasses = _extends({}, sliderUnstyledClasses$1, generateUtilityClasses('MuiSlider', ['colorPrimary', 'colorSecondary', 'thumbColorPrimary', 'thumbColorSecondary', 'sizeSmall', 'thumbSizeSmall']));
+  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']);
   var sliderClasses$1 = sliderClasses;
 
   const useValueLabelClasses = props => {
@@ -39746,13 +39741,16 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   /**
    * @ignore - internal component.
    */
-  function SliderValueLabel$1(props) {
+  function SliderValueLabel(props) {
     const {
       children,
       className,
       value
     } = props;
     const classes = useValueLabelClasses(props);
+    if (!children) {
+      return null;
+    }
     return /*#__PURE__*/React__namespace.cloneElement(children, {
       className: clsx(children.props.className)
     }, /*#__PURE__*/jsxRuntime_2(React__namespace.Fragment, {
@@ -39769,7 +39767,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       })]
     }));
   }
-  SliderValueLabel$1.propTypes = {
+  SliderValueLabel.propTypes = {
     children: PropTypes.element.isRequired,
     className: PropTypes.string,
     value: PropTypes.node
@@ -40016,7 +40014,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
      */
     children: PropTypes.node
   } ;
-  const SliderValueLabel = styled$1(SliderValueLabel$1, {
+  const StyledSliderValueLabel = styled$1(SliderValueLabel, {
     name: 'MuiSlider',
     slot: 'ValueLabel',
     overridesResolver: (props, styles) => styles.valueLabel
@@ -40074,7 +40072,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     fontSize: theme.typography.pxToRem(12),
     padding: '0.25rem 0.5rem'
   }));
-  SliderValueLabel.propTypes /* remove-proptypes */ = {
+  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"     |
@@ -40275,7 +40273,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     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';
@@ -44347,7 +44345,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   var SwipeArea$1 = SwipeArea;
 
   const _excluded$k = ["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"];
   const UNCERTAINTY_THRESHOLD = 3; // px
 
   // This is the part of the drawer displayed on touch start.
@@ -44452,6 +44450,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
         disableSwipeToOpen = iOS,
         hideBackdrop,
         hysteresis = 0.52,
+        allowSwipeInChildren = false,
         minFlingVelocity = 450,
         ModalProps: {
           BackdropProps
@@ -44571,6 +44570,30 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
         });
       }
     });
+    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)) {
+          ReactDOM.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) {
@@ -44581,6 +44604,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       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));
@@ -44691,7 +44715,12 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       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) {
@@ -44706,20 +44735,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       claimedSwipeInstance = null;
       swipeInstance.current.startX = currentX;
       swipeInstance.current.startY = currentY;
-      ReactDOM.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__namespace.useEffect(() => {
       if (variant === 'temporary') {
@@ -44767,7 +44783,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
         hideBackdrop: hideBackdrop,
         PaperProps: _extends({}, PaperProps, {
           style: _extends({
-            pointerEvents: variant === 'temporary' && !open ? 'none' : ''
+            pointerEvents: variant === 'temporary' && !open && !allowSwipeInChildren ? 'none' : ''
           }, PaperProps.style),
           ref: handleRef
         }),
@@ -44789,6 +44805,19 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     // | 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
      */
@@ -48930,7 +48959,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   exports.SliderRoot = SliderRoot;
   exports.SliderThumb = SliderThumb;
   exports.SliderTrack = SliderTrack;
-  exports.SliderValueLabel = SliderValueLabel;
+  exports.SliderValueLabel = StyledSliderValueLabel;
   exports.Snackbar = Snackbar$1;
   exports.SnackbarContent = SnackbarContent$1;
   exports.SpeedDial = SpeedDial$1;
@@ -49126,6 +49155,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   exports.getScopedCssBaselineUtilityClass = getScopedCssBaselineUtilityClass;
   exports.getSelectUtilityClasses = getSelectUtilityClasses;
   exports.getSkeletonUtilityClass = getSkeletonUtilityClass;
+  exports.getSliderUtilityClass = getSliderUtilityClass;
   exports.getSnackbarContentUtilityClass = getSnackbarContentUtilityClass;
   exports.getSnackbarUtilityClass = getSnackbarUtilityClass;
   exports.getSpeedDialActionUtilityClass = getSpeedDialActionUtilityClass;