@mui/material 5.11.5 → 5.11.7

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/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/modern/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,
   /**

package/modern/Tooltip/Tooltip.js

@@ -193,6 +193,10 @@ const TooltipArrow = styled('span', {
 }));
 let hystersisOpen = false;
 let hystersisTimer = null;
+let cursorPosition = {
+  x: 0,
+  y: 0
+};
 export function testReset() {
   hystersisOpen = false;
   clearTimeout(hystersisTimer);
@@ -433,17 +437,13 @@ const Tooltip = /*#__PURE__*/React.forwardRef(function Tooltip(inProps, ref) {
   if (!title && title !== 0) {
     open = false;
   }
-  const positionRef = React.useRef({
-    x: 0,
-    y: 0
-  });
   const popperRef = React.useRef();
   const handleMouseMove = event => {
     const childrenProps = children.props;
     if (childrenProps.onMouseMove) {
       childrenProps.onMouseMove(event);
     }
-    positionRef.current = {
+    cursorPosition = {
       x: event.clientX,
       y: event.clientY
     };
@@ -548,10 +548,10 @@ const Tooltip = /*#__PURE__*/React.forwardRef(function Tooltip(inProps, ref) {
       placement: placement,
       anchorEl: followCursor ? {
         getBoundingClientRect: () => ({
-          top: positionRef.current.y,
-          left: positionRef.current.x,
-          right: positionRef.current.x,
-          bottom: positionRef.current.y,
+          top: cursorPosition.y,
+          left: cursorPosition.x,
+          right: cursorPosition.x,
+          bottom: cursorPosition.y,
           width: 0,
           height: 0
         })

package/modern/index.js

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

package/modern/internal/SwitchBase.js

@@ -72,7 +72,7 @@ const SwitchBase = /*#__PURE__*/React.forwardRef(function SwitchBase(props, ref)
       onChange,
       onFocus,
       readOnly,
-      required,
+      required = false,
       tabIndex,
       type,
       value

package/modern/styles/CssVarsProvider.js

@@ -3,7 +3,9 @@ import { unstable_createCssVarsProvider as createCssVarsProvider, unstable_style
 import experimental_extendTheme from './experimental_extendTheme';
 import createTypography from './createTypography';
 import excludeVariablesFromRoot from './excludeVariablesFromRoot';
-const shouldSkipGeneratingVar = keys => !!keys[0].match(/(typography|mixins|breakpoints|direction|transitions)/) || keys[0] === 'palette' && !!keys[1]?.match(/(mode|contrastThreshold|tonalOffset)/);
+const shouldSkipGeneratingVar = keys => !!keys[0].match(/(typography|mixins|breakpoints|direction|transitions)/) || !!keys[0].match(/sxConfig$/) ||
+// ends with sxConfig
+keys[0] === 'palette' && !!keys[1]?.match(/(mode|contrastThreshold|tonalOffset)/);
 const defaultTheme = experimental_extendTheme();
 const {
   CssVarsProvider,

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/Checkbox/Checkbox.js

@@ -149,10 +149,12 @@ process.env.NODE_ENV !== "production" ? Checkbox.propTypes /* remove-proptypes *
   defaultChecked: _propTypes.default.bool,
   /**
    * If `true`, the component is disabled.
+   * @default false
    */
   disabled: _propTypes.default.bool,
   /**
    * If `true`, the ripple effect is disabled.
+   * @default false
    */
   disableRipple: _propTypes.default.bool,
   /**
@@ -194,6 +196,7 @@ process.env.NODE_ENV !== "production" ? Checkbox.propTypes /* remove-proptypes *
   onChange: _propTypes.default.func,
   /**
    * If `true`, the `input` element is required.
+   * @default false
    */
   required: _propTypes.default.bool,
   /**

package/node/Radio/Radio.js

@@ -165,6 +165,7 @@ process.env.NODE_ENV !== "production" ? Radio.propTypes /* remove-proptypes */ =
   disabled: _propTypes.default.bool,
   /**
    * If `true`, the ripple effect is disabled.
+   * @default false
    */
   disableRipple: _propTypes.default.bool,
   /**
@@ -198,6 +199,7 @@ process.env.NODE_ENV !== "production" ? Radio.propTypes /* remove-proptypes */ =
   onChange: _propTypes.default.func,
   /**
    * If `true`, the `input` element is required.
+   * @default false
    */
   required: _propTypes.default.bool,
   /**

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;

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/Switch/Switch.js

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

package/node/TabScrollButton/TabScrollButton.js

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

package/node/Tooltip/Tooltip.js

@@ -202,6 +202,10 @@ const TooltipArrow = (0, _styled.default)('span', {
 }));
 let hystersisOpen = false;
 let hystersisTimer = null;
+let cursorPosition = {
+  x: 0,
+  y: 0
+};
 function testReset() {
   hystersisOpen = false;
   clearTimeout(hystersisTimer);
@@ -443,17 +447,13 @@ const Tooltip = /*#__PURE__*/React.forwardRef(function Tooltip(inProps, ref) {
   if (!title && title !== 0) {
     open = false;
   }
-  const positionRef = React.useRef({
-    x: 0,
-    y: 0
-  });
   const popperRef = React.useRef();
   const handleMouseMove = event => {
     const childrenProps = children.props;
     if (childrenProps.onMouseMove) {
       childrenProps.onMouseMove(event);
     }
-    positionRef.current = {
+    cursorPosition = {
       x: event.clientX,
       y: event.clientY
     };
@@ -559,10 +559,10 @@ const Tooltip = /*#__PURE__*/React.forwardRef(function Tooltip(inProps, ref) {
       placement: placement,
       anchorEl: followCursor ? {
         getBoundingClientRect: () => ({
-          top: positionRef.current.y,
-          left: positionRef.current.x,
-          right: positionRef.current.x,
-          bottom: positionRef.current.y,
+          top: cursorPosition.y,
+          left: cursorPosition.x,
+          right: cursorPosition.x,
+          bottom: cursorPosition.y,
           width: 0,
           height: 0
         })

package/node/index.js

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

package/node/internal/SwitchBase.js

@@ -80,7 +80,7 @@ const SwitchBase = /*#__PURE__*/React.forwardRef(function SwitchBase(props, ref)
       onChange,
       onFocus,
       readOnly,
-      required,
+      required = false,
       tabIndex,
       type,
       value

package/node/styles/CssVarsProvider.js

@@ -12,7 +12,9 @@ var _createTypography = _interopRequireDefault(require("./createTypography"));
 var _excludeVariablesFromRoot = _interopRequireDefault(require("./excludeVariablesFromRoot"));
 const shouldSkipGeneratingVar = keys => {
   var _keys$;
-  return !!keys[0].match(/(typography|mixins|breakpoints|direction|transitions)/) || keys[0] === 'palette' && !!((_keys$ = keys[1]) != null && _keys$.match(/(mode|contrastThreshold|tonalOffset)/));
+  return !!keys[0].match(/(typography|mixins|breakpoints|direction|transitions)/) || !!keys[0].match(/sxConfig$/) ||
+  // ends with sxConfig
+  keys[0] === 'palette' && !!((_keys$ = keys[1]) != null && _keys$.match(/(mode|contrastThreshold|tonalOffset)/));
 };
 exports.shouldSkipGeneratingVar = shouldSkipGeneratingVar;
 const defaultTheme = (0, _experimental_extendTheme.default)();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/material",
-  "version": "5.11.5",
+  "version": "5.11.7",
   "private": false,
   "author": "MUI Team",
   "description": "React components that implement Google's Material Design.",
@@ -46,11 +46,11 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.20.7",
-    "@mui/base": "5.0.0-alpha.114",
-    "@mui/core-downloads-tracker": "^5.11.5",
-    "@mui/system": "^5.11.5",
+    "@mui/base": "5.0.0-alpha.116",
+    "@mui/core-downloads-tracker": "^5.11.7",
+    "@mui/system": "^5.11.7",
     "@mui/types": "^7.2.3",
-    "@mui/utils": "^5.11.2",
+    "@mui/utils": "^5.11.7",
     "@types/react-transition-group": "^4.4.5",
     "clsx": "^1.2.1",
     "csstype": "^3.1.1",

package/styles/CssVarsProvider.js

@@ -5,7 +5,9 @@ import createTypography from './createTypography';
 import excludeVariablesFromRoot from './excludeVariablesFromRoot';
 const shouldSkipGeneratingVar = keys => {
   var _keys$;
-  return !!keys[0].match(/(typography|mixins|breakpoints|direction|transitions)/) || keys[0] === 'palette' && !!((_keys$ = keys[1]) != null && _keys$.match(/(mode|contrastThreshold|tonalOffset)/));
+  return !!keys[0].match(/(typography|mixins|breakpoints|direction|transitions)/) || !!keys[0].match(/sxConfig$/) ||
+  // ends with sxConfig
+  keys[0] === 'palette' && !!((_keys$ = keys[1]) != null && _keys$.match(/(mode|contrastThreshold|tonalOffset)/));
 };
 const defaultTheme = experimental_extendTheme();
 const {