@mui/material 5.11.5 → 5.11.6

package/legacy/SwipeableDrawer/SwipeableDrawer.js

@@ -134,6 +134,8 @@ var SwipeableDrawer = /*#__PURE__*/React.forwardRef(function SwipeableDrawer(inP
     hideBackdrop = props.hideBackdrop,
     _props$hysteresis = props.hysteresis,
     hysteresis = _props$hysteresis === void 0 ? 0.52 : _props$hysteresis,
+    _props$allowSwipeInCh = props.allowSwipeInChildren,
+    allowSwipeInChildren = _props$allowSwipeInCh === void 0 ? false : _props$allowSwipeInCh,
     _props$minFlingVeloci = props.minFlingVelocity,
     minFlingVelocity = _props$minFlingVeloci === void 0 ? 450 : _props$minFlingVeloci,
     _props$ModalProps = props.ModalProps;
@@ -153,7 +155,7 @@ var SwipeableDrawer = /*#__PURE__*/React.forwardRef(function SwipeableDrawer(inP
     transitionDuration = _props$transitionDura === void 0 ? transitionDurationDefault : _props$transitionDura,
     _props$variant = props.variant,
     variant = _props$variant === void 0 ? 'temporary' : _props$variant,
-    other = _objectWithoutProperties(props, ["anchor", "disableBackdropTransition", "disableDiscovery", "disableSwipeToOpen", "hideBackdrop", "hysteresis", "minFlingVelocity", "ModalProps", "onClose", "onOpen", "open", "PaperProps", "SwipeAreaProps", "swipeAreaWidth", "transitionDuration", "variant"]);
+    other = _objectWithoutProperties(props, ["anchor", "disableBackdropTransition", "disableDiscovery", "disableSwipeToOpen", "hideBackdrop", "hysteresis", "allowSwipeInChildren", "minFlingVelocity", "ModalProps", "onClose", "onOpen", "open", "PaperProps", "SwipeAreaProps", "swipeAreaWidth", "transitionDuration", "variant"]);
   var _React$useState = React.useState(false),
     maybeSwiping = _React$useState[0],
     setMaybeSwiping = _React$useState[1];
@@ -261,6 +263,31 @@ var SwipeableDrawer = /*#__PURE__*/React.forwardRef(function SwipeableDrawer(inP
       });
     }
   });
+  var startMaybeSwiping = function startMaybeSwiping() {
+    var force = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 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(function () {
+          setMaybeSwiping(true);
+        });
+      }
+      var 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;
+    }
+  };
   var handleBodyTouchMove = useEventCallback(function (nativeEvent) {
     // the ref may be null when a parent component updates while swiping
     if (!paperRef.current || !touchDetected.current) {
@@ -271,6 +298,7 @@ var SwipeableDrawer = /*#__PURE__*/React.forwardRef(function SwipeableDrawer(inP
     if (claimedSwipeInstance !== null && claimedSwipeInstance !== swipeInstance.current) {
       return;
     }
+    startMaybeSwiping(true);
     var anchorRtl = getAnchor(theme, anchor);
     var horizontalSwipe = isHorizontal(anchor);
     var currentX = calculateCurrentX(anchorRtl, nativeEvent.touches, ownerDocument(nativeEvent.currentTarget));
@@ -381,7 +409,12 @@ var SwipeableDrawer = /*#__PURE__*/React.forwardRef(function SwipeableDrawer(inP
     var currentX = calculateCurrentX(anchorRtl, nativeEvent.touches, ownerDocument(nativeEvent.currentTarget));
     var 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) {
@@ -396,20 +429,7 @@ var SwipeableDrawer = /*#__PURE__*/React.forwardRef(function SwipeableDrawer(inP
     claimedSwipeInstance = null;
     swipeInstance.current.startX = currentX;
     swipeInstance.current.startY = currentY;
-    flushSync(function () {
-      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(function () {
     if (variant === 'temporary') {
@@ -459,7 +479,7 @@ var SwipeableDrawer = /*#__PURE__*/React.forwardRef(function SwipeableDrawer(inP
       hideBackdrop: hideBackdrop,
       PaperProps: _extends({}, PaperProps, {
         style: _extends({
-          pointerEvents: variant === 'temporary' && !open ? 'none' : ''
+          pointerEvents: variant === 'temporary' && !open && !allowSwipeInChildren ? 'none' : ''
         }, PaperProps.style),
         ref: handleRef
       }),
@@ -481,6 +501,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/legacy/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/locale/index.d.ts

@@ -1,75 +1,75 @@
-import { ComponentsPropsList } from '../styles/props';
-export interface Localization {
-    components?: {
-        MuiAlert?: {
-            defaultProps: Pick<ComponentsPropsList['MuiAlert'], 'closeText'>;
-        };
-        MuiBreadcrumbs?: {
-            defaultProps: Pick<ComponentsPropsList['MuiBreadcrumbs'], 'expandText'>;
-        };
-        MuiTablePagination?: {
-            defaultProps: Pick<ComponentsPropsList['MuiTablePagination'], 'labelRowsPerPage' | 'labelDisplayedRows' | 'getItemAriaLabel'>;
-        };
-        MuiRating?: {
-            defaultProps: Pick<ComponentsPropsList['MuiRating'], 'emptyLabelText' | 'getLabelText'>;
-        };
-        MuiAutocomplete?: {
-            defaultProps: Pick<ComponentsPropsList['MuiAutocomplete'], 'clearText' | 'closeText' | 'loadingText' | 'noOptionsText' | 'openText'>;
-        };
-        MuiPagination?: {
-            defaultProps: Pick<ComponentsPropsList['MuiPagination'], 'aria-label' | 'getItemAriaLabel'>;
-        };
-    };
-}
-export declare const amET: Localization;
-export declare const arEG: Localization;
-export declare const arSA: Localization;
-export declare const arSD: Localization;
-export declare const azAZ: Localization;
-export declare const bnBD: Localization;
-export declare const beBY: Localization;
-export declare const bgBG: Localization;
-export declare const caES: Localization;
-export declare const csCZ: Localization;
-export declare const daDK: Localization;
-export declare const deDE: Localization;
-export declare const elGR: Localization;
-export declare const enUS: Localization;
-export declare const esES: Localization;
-export declare const etEE: Localization;
-export declare const faIR: Localization;
-export declare const fiFI: Localization;
-export declare const frFR: Localization;
-export declare const heIL: Localization;
-export declare const hiIN: Localization;
-export declare const hrHR: Localization;
-export declare const huHU: Localization;
-export declare const hyAM: Localization;
-export declare const idID: Localization;
-export declare const isIS: Localization;
-export declare const itIT: Localization;
-export declare const jaJP: Localization;
-export declare const khKH: Localization;
-export declare const koKR: Localization;
-export declare const kuLatn: Localization;
-export declare const kkKZ: Localization;
-export declare const mkMK: Localization;
-export declare const nbNO: Localization;
-export declare const nlNL: Localization;
-export declare const plPL: Localization;
-export declare const ptBR: Localization;
-export declare const ptPT: Localization;
-export declare const roRO: Localization;
-export declare const srRS: Localization;
-export declare const ruRU: Localization;
-export declare const siLK: Localization;
-export declare const skSK: Localization;
-export declare const svSE: Localization;
-export declare const thTH: Localization;
-export declare const trTR: Localization;
-export declare const ukUA: Localization;
-export declare const urPK: Localization;
-export declare const viVN: Localization;
-export declare const zhCN: Localization;
-export declare const zhHK: Localization;
-export declare const zhTW: Localization;
+import { ComponentsPropsList } from '../styles/props';
+export interface Localization {
+    components?: {
+        MuiAlert?: {
+            defaultProps: Pick<ComponentsPropsList['MuiAlert'], 'closeText'>;
+        };
+        MuiBreadcrumbs?: {
+            defaultProps: Pick<ComponentsPropsList['MuiBreadcrumbs'], 'expandText'>;
+        };
+        MuiTablePagination?: {
+            defaultProps: Pick<ComponentsPropsList['MuiTablePagination'], 'labelRowsPerPage' | 'labelDisplayedRows' | 'getItemAriaLabel'>;
+        };
+        MuiRating?: {
+            defaultProps: Pick<ComponentsPropsList['MuiRating'], 'emptyLabelText' | 'getLabelText'>;
+        };
+        MuiAutocomplete?: {
+            defaultProps: Pick<ComponentsPropsList['MuiAutocomplete'], 'clearText' | 'closeText' | 'loadingText' | 'noOptionsText' | 'openText'>;
+        };
+        MuiPagination?: {
+            defaultProps: Pick<ComponentsPropsList['MuiPagination'], 'aria-label' | 'getItemAriaLabel'>;
+        };
+    };
+}
+export declare const amET: Localization;
+export declare const arEG: Localization;
+export declare const arSA: Localization;
+export declare const arSD: Localization;
+export declare const azAZ: Localization;
+export declare const bnBD: Localization;
+export declare const beBY: Localization;
+export declare const bgBG: Localization;
+export declare const caES: Localization;
+export declare const csCZ: Localization;
+export declare const daDK: Localization;
+export declare const deDE: Localization;
+export declare const elGR: Localization;
+export declare const enUS: Localization;
+export declare const esES: Localization;
+export declare const etEE: Localization;
+export declare const faIR: Localization;
+export declare const fiFI: Localization;
+export declare const frFR: Localization;
+export declare const heIL: Localization;
+export declare const hiIN: Localization;
+export declare const hrHR: Localization;
+export declare const huHU: Localization;
+export declare const hyAM: Localization;
+export declare const idID: Localization;
+export declare const isIS: Localization;
+export declare const itIT: Localization;
+export declare const jaJP: Localization;
+export declare const khKH: Localization;
+export declare const koKR: Localization;
+export declare const kuLatn: Localization;
+export declare const kkKZ: Localization;
+export declare const mkMK: Localization;
+export declare const nbNO: Localization;
+export declare const nlNL: Localization;
+export declare const plPL: Localization;
+export declare const ptBR: Localization;
+export declare const ptPT: Localization;
+export declare const roRO: Localization;
+export declare const srRS: Localization;
+export declare const ruRU: Localization;
+export declare const siLK: Localization;
+export declare const skSK: Localization;
+export declare const svSE: Localization;
+export declare const thTH: Localization;
+export declare const trTR: Localization;
+export declare const ukUA: Localization;
+export declare const urPK: Localization;
+export declare const viVN: Localization;
+export declare const zhCN: Localization;
+export declare const zhHK: Localization;
+export declare const zhTW: Localization;

package/modern/Button/Button.js

@@ -111,8 +111,6 @@ const ButtonRoot = styled(ButtonBase, {
     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],

package/modern/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',
@@ -522,7 +522,7 @@ const Slider = /*#__PURE__*/React.forwardRef(function Slider(inputProps, ref) {
   const RailSlot = slots?.rail ?? components.Rail ?? SliderRail;
   const TrackSlot = slots?.track ?? components.Track ?? SliderTrack;
   const ThumbSlot = slots?.thumb ?? components.Thumb ?? SliderThumb;
-  const ValueLabelSlot = slots?.valueLabel ?? components.ValueLabel ?? SliderValueLabel;
+  const ValueLabelSlot = slots?.valueLabel ?? components.ValueLabel ?? StyledSliderValueLabel;
   const MarkSlot = slots?.mark ?? components.Mark ?? SliderMark;
   const MarkLabelSlot = slots?.markLabel ?? components.MarkLabel ?? SliderMarkLabel;
   const InputSlot = slots?.input ?? components.Input ?? 'input';

package/modern/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/modern/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/modern/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/modern/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,11 @@ 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) {
+      // 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?.contains(nativeEvent.target) && (typeof allowSwipeInChildren === 'function' ? allowSwipeInChildren(nativeEvent, swipeAreaRef.current, paperRef.current) : allowSwipeInChildren))) {
         return;
       }
       if (horizontalSwipe) {
@@ -387,20 +417,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 +465,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 +487,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/modern/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/node/Button/Button.js

@@ -121,8 +121,6 @@ const ButtonRoot = (0, _styled.default)(_ButtonBase.default, {
       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],

package/node/Slider/Slider.js

@@ -20,7 +20,7 @@ var _useTheme = _interopRequireDefault(require("../styles/useTheme"));
 var _shouldSpreadAdditionalProps = _interopRequireDefault(require("../utils/shouldSpreadAdditionalProps"));
 var _capitalize = _interopRequireDefault(require("../utils/capitalize"));
 var _SliderValueLabel = _interopRequireDefault(require("./SliderValueLabel"));
-var _sliderClasses = _interopRequireDefault(require("./sliderClasses"));
+var _sliderClasses = _interopRequireWildcard(require("./sliderClasses"));
 var _jsxRuntime = require("react/jsx-runtime");
 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"];
 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); }
@@ -269,7 +269,7 @@ process.env.NODE_ENV !== "production" ? SliderThumb.propTypes /* remove-proptype
    */
   children: _propTypes.default.node
 } : void 0;
-const SliderValueLabel = (0, _styled.default)(_SliderValueLabel.default, {
+const StyledSliderValueLabel = (0, _styled.default)(_SliderValueLabel.default, {
   name: 'MuiSlider',
   slot: 'ValueLabel',
   overridesResolver: (props, styles) => styles.valueLabel
@@ -327,8 +327,8 @@ const SliderValueLabel = (0, _styled.default)(_SliderValueLabel.default, {
   fontSize: theme.typography.pxToRem(12),
   padding: '0.25rem 0.5rem'
 }));
-exports.SliderValueLabel = SliderValueLabel;
-process.env.NODE_ENV !== "production" ? SliderValueLabel.propTypes /* remove-proptypes */ = {
+exports.SliderValueLabel = StyledSliderValueLabel;
+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"     |
@@ -443,7 +443,7 @@ const useUtilityClasses = ownerState => {
     disabled: ['disabled'],
     focusVisible: ['focusVisible']
   };
-  return (0, _base.unstable_composeClasses)(slots, _SliderUnstyled.getSliderUtilityClass, classes);
+  return (0, _base.unstable_composeClasses)(slots, _sliderClasses.getSliderUtilityClass, classes);
 };
 const Forward = ({
   children
@@ -531,7 +531,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/node/Slider/SliderValueLabel.js

@@ -34,6 +34,9 @@ function SliderValueLabel(props) {
     value
   } = props;
   const classes = useValueLabelClasses(props);
+  if (!children) {
+    return null;
+  }
   return /*#__PURE__*/React.cloneElement(children, {
     className: (0, _clsx.default)(children.props.className)
   }, /*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, {

package/node/Slider/index.js

@@ -1,6 +1,5 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -31,6 +30,17 @@ Object.keys(_Slider).forEach(function (key) {
     }
   });
 });
-var _sliderClasses = _interopRequireDefault(require("./sliderClasses"));
+var _sliderClasses = _interopRequireWildcard(require("./sliderClasses"));
+Object.keys(_sliderClasses).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _sliderClasses[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _sliderClasses[key];
+    }
+  });
+});
 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; }

package/node/Slider/sliderClasses.js

@@ -5,9 +5,12 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+exports.getSliderUtilityClass = getSliderUtilityClass;
 var _utils = require("@mui/utils");
-var _SliderUnstyled = require("@mui/base/SliderUnstyled");
-const sliderClasses = (0, _extends2.default)({}, _SliderUnstyled.sliderUnstyledClasses, (0, _utils.unstable_generateUtilityClasses)('MuiSlider', ['colorPrimary', 'colorSecondary', 'thumbColorPrimary', 'thumbColorSecondary', 'sizeSmall', 'thumbSizeSmall']));
+var _generateUtilityClass = _interopRequireDefault(require("../generateUtilityClass"));
+function getSliderUtilityClass(slot) {
+  return (0, _generateUtilityClass.default)('MuiSlider', slot);
+}
+const sliderClasses = (0, _utils.unstable_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 _default = sliderClasses;
 exports.default = _default;