@mui/material 5.11.5 → 5.11.7

package/umd/material-ui.development.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
@@ -10216,7 +10216,9 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
 
   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$1 = extendTheme();
   const {
@@ -10585,20 +10587,6 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
         onInputChange(event, newInputValue, 'reset');
       }
     }, [getOptionLabel, inputValue, multiple, onInputChange, setInputValueState, clearOnBlur, value]);
-    const prevValue = React__namespace.useRef();
-    React__namespace.useEffect(() => {
-      const valueChange = value !== prevValue.current;
-      prevValue.current = value;
-      if (focused && !valueChange) {
-        return;
-      }
-
-      // Only reset the input's value when freeSolo if the component's value changes.
-      if (freeSolo && !valueChange) {
-        return;
-      }
-      resetInputValue(null, value);
-    }, [value, resetInputValue, focused, prevValue, freeSolo]);
     const [open, setOpenState] = useControlled({
       controlled: openProp,
       default: false,
@@ -10620,6 +10608,22 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       inputValue: inputValueIsSelectedValue && inputPristine ? '' : inputValue,
       getOptionLabel
     }) : [];
+    const previousProps = usePreviousProps$1({
+      filteredOptions,
+      value
+    });
+    React__namespace.useEffect(() => {
+      const valueChange = value !== previousProps.value;
+      if (focused && !valueChange) {
+        return;
+      }
+
+      // Only reset the input's value when freeSolo if the component's value changes.
+      if (freeSolo && !valueChange) {
+        return;
+      }
+      resetInputValue(null, value);
+    }, [value, resetInputValue, focused, previousProps.value, freeSolo]);
     const listboxAvailable = open && filteredOptions.length > 0 && !readOnly;
     {
       if (value !== null && !freeSolo && options.length > 0) {
@@ -10790,10 +10794,31 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
         }
       }
     });
+    const checkHighlightedOptionExists = () => {
+      var _previousProps$value;
+      if (highlightedIndexRef.current !== -1 && previousProps.filteredOptions && previousProps.filteredOptions.length !== filteredOptions.length && (multiple ? previousProps.value.every((val, i) => getOptionLabel(value[i]) === getOptionLabel(val)) : getOptionLabel((_previousProps$value = previousProps.value) != null ? _previousProps$value : '') === getOptionLabel(value != null ? value : ''))) {
+        const previousHighlightedOption = previousProps.filteredOptions[highlightedIndexRef.current];
+        if (previousHighlightedOption) {
+          const previousHighlightedOptionExists = filteredOptions.some(option => {
+            return getOptionLabel(option) === getOptionLabel(previousHighlightedOption);
+          });
+          if (previousHighlightedOptionExists) {
+            return true;
+          }
+        }
+      }
+      return false;
+    };
     const syncHighlightedIndex = React__namespace.useCallback(() => {
       if (!popupOpen) {
         return;
       }
+
+      // Check if the previously highlighted option still exists in the updated filtered options list and if the value hasn't changed
+      // If it exists and the value hasn't changed, return, otherwise continue execution
+      if (checkHighlightedOptionExists()) {
+        return;
+      }
       const valueItem = multiple ? value[0] : value;
 
       // The popup is empty, reset
@@ -15086,12 +15111,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 +24535,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],
@@ -25763,7 +25780,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
         onChange,
         onFocus,
         readOnly,
-        required,
+        required = false,
         tabIndex,
         type,
         value
@@ -26103,10 +26120,12 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     defaultChecked: PropTypes.bool,
     /**
      * If `true`, the component is disabled.
+     * @default false
      */
     disabled: PropTypes.bool,
     /**
      * If `true`, the ripple effect is disabled.
+     * @default false
      */
     disableRipple: PropTypes.bool,
     /**
@@ -26148,6 +26167,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     onChange: PropTypes.func,
     /**
      * If `true`, the `input` element is required.
+     * @default false
      */
     required: PropTypes.bool,
     /**
@@ -37734,6 +37754,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     disabled: PropTypes.bool,
     /**
      * If `true`, the ripple effect is disabled.
+     * @default false
      */
     disableRipple: PropTypes.bool,
     /**
@@ -37767,6 +37788,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     onChange: PropTypes.func,
     /**
      * If `true`, the `input` element is required.
+     * @default false
      */
     required: PropTypes.bool,
     /**
@@ -39728,7 +39750,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 +39771,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 +39797,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 +40044,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 +40102,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 +40303,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';
@@ -42069,6 +42097,10 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   }));
   let hystersisOpen = false;
   let hystersisTimer = null;
+  let cursorPosition = {
+    x: 0,
+    y: 0
+  };
   function composeEventHandler(handler, eventHandler) {
     return event => {
       if (eventHandler) {
@@ -42306,17 +42338,13 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     if (!title && title !== 0) {
       open = false;
     }
-    const positionRef = React__namespace.useRef({
-      x: 0,
-      y: 0
-    });
     const popperRef = React__namespace.useRef();
     const handleMouseMove = event => {
       const childrenProps = children.props;
       if (childrenProps.onMouseMove) {
         childrenProps.onMouseMove(event);
       }
-      positionRef.current = {
+      cursorPosition = {
         x: event.clientX,
         y: event.clientY
       };
@@ -42422,10 +42450,10 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
         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
           })
@@ -44347,7 +44375,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 +44480,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 +44600,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 +44634,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 +44745,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 +44765,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 +44813,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 +44835,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
      */
@@ -45144,6 +45203,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     disabled: PropTypes.bool,
     /**
      * If `true`, the ripple effect is disabled.
+     * @default false
      */
     disableRipple: PropTypes.bool,
     /**
@@ -45180,6 +45240,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     onChange: PropTypes.func,
     /**
      * If `true`, the `input` element is required.
+     * @default false
      */
     required: PropTypes.bool,
     /**
@@ -47200,6 +47261,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     direction: PropTypes.oneOf(['left', 'right']).isRequired,
     /**
      * If `true`, the component is disabled.
+     * @default false
      */
     disabled: PropTypes.bool,
     /**
@@ -48930,7 +48992,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 +49188,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;