@mui/material 5.11.6 → 5.11.7

package/umd/material-ui.development.js

@@ -1,5 +1,5 @@
 /**
- * @mui/material v5.11.6
+ * @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
@@ -25755,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
@@ -26095,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,
     /**
@@ -26140,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,
     /**
@@ -37726,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,
     /**
@@ -37759,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,
     /**
@@ -42067,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) {
@@ -42304,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
       };
@@ -42420,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
           })
@@ -45173,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,
     /**
@@ -45209,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,
     /**
@@ -47229,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,
     /**