@mui/material 9.0.1 → 9.1.0

package/transitions/utils.mjs

@@ -1,8 +1,12 @@
+import { defaultStyles, resolveReducedMotionStyles } from "../styles/reducedMotion.mjs";
 export const reflow = node => node.scrollTop;
 const DEFAULT_TRANSLATE_OFFSET = {
   offsetX: 0,
   offsetY: 0
 };
+const EMPTY_STYLE = {};
+const DEFAULT_TRANSITION_PROPS = ['all'];
+const EMPTY_OPTIONS = {};
 const transformOffsetIndexes = {
   matrix: [4, 5],
   matrix3d: [12, 13],
@@ -66,7 +70,7 @@ export function normalizedTransitionCallback(nodeRef, callback) {
   return maybeIsAppearing => {
     if (callback) {
       const node = nodeRef.current;
-      // onEnterXxx and onExitXxx callbacks have a different arguments.length value.
+      // Enter callbacks receive isAppearing; exit callbacks do not.
       if (maybeIsAppearing === undefined) {
         callback(node);
       } else {
@@ -76,8 +80,8 @@ export function normalizedTransitionCallback(nodeRef, callback) {
   };
 }
 /**
- * Computes the child style for a transition component, reusing existing
- * references when possible to preserve referential equality for React.memo.
+ * Return the child style for a transition. Reuse predefined style objects when
+ * no custom styles are present so memoized children see the same object.
  */
 export function getTransitionChildStyle(state, inProp, baseStyles, hiddenStyles, styleProp, childStyle) {
   const base = state === 'exited' && !inProp ? hiddenStyles : baseStyles[state] || baseStyles.exited;
@@ -91,11 +95,34 @@ export function getTransitionProps(props, options) {
   const {
     timeout,
     easing,
-    style = {}
+    style = EMPTY_STYLE
   } = props;
   return {
     duration: style.transitionDuration ?? (typeof timeout === 'number' ? timeout : timeout[options.mode] || 0),
     easing: style.transitionTimingFunction ?? (typeof easing === 'object' ? easing[options.mode] : easing),
     delay: style.transitionDelay
   };
+}
+
+/**
+ * Returns CSS that disables component-owned transitions when reduced motion is active.
+ * Pass custom styles only when the default `transition: none` reset is not enough.
+ */
+export function getReducedMotionStyles(theme, styles) {
+  const resolvedStyles = styles ?? defaultStyles;
+  return resolveReducedMotionStyles(theme.motion?.reducedMotion, resolvedStyles);
+}
+export function getTransitionStyles(theme, props = DEFAULT_TRANSITION_PROPS, options = EMPTY_OPTIONS) {
+  const transition = theme.transitions?.create?.(props, options);
+  const reducedMotionStyles = getReducedMotionStyles(theme);
+  if (transition === undefined) {
+    return reducedMotionStyles ?? EMPTY_STYLE;
+  }
+  const transitionStyles = {
+    transition
+  };
+  return reducedMotionStyles ? {
+    ...transitionStyles,
+    ...reducedMotionStyles
+  } : transitionStyles;
 }

package/useAutocomplete/useAutocomplete.d.mts

@@ -260,6 +260,12 @@ export interface UseAutocompleteProps<Value, Multiple extends boolean | undefine
    * @default false
    */
   readOnly?: boolean | undefined;
+  /**
+   * If `true`, clears an option highlighted by mouse movement when the mouse leaves the listbox.
+   * This behavior will be enabled by default in the next major version.
+   * @default false
+   */
+  resetHighlightOnMouseLeave?: boolean | undefined;
   /**
    * If `true`, the input's text is selected on focus.
    * It helps the user clear the selected value.
@@ -347,9 +353,10 @@ export interface UseAutocompleteReturnValue<Value, Multiple extends boolean | un
   getPopupIndicatorProps: () => React.HTMLAttributes<HTMLButtonElement>;
   /**
    * Resolver for the listbox component's props.
+   * @param externalProps props for the listbox component
    * @returns props that should be spread on the listbox component
    */
-  getListboxProps: () => React.HTMLAttributes<HTMLUListElement>;
+  getListboxProps: (externalProps?: any) => React.HTMLAttributes<HTMLUListElement>;
   /**
    * Resolver for the rendered option element's props.
    * @param renderedOption option rendered on the Autocomplete

package/useAutocomplete/useAutocomplete.d.ts

@@ -260,6 +260,12 @@ export interface UseAutocompleteProps<Value, Multiple extends boolean | undefine
    * @default false
    */
   readOnly?: boolean | undefined;
+  /**
+   * If `true`, clears an option highlighted by mouse movement when the mouse leaves the listbox.
+   * This behavior will be enabled by default in the next major version.
+   * @default false
+   */
+  resetHighlightOnMouseLeave?: boolean | undefined;
   /**
    * If `true`, the input's text is selected on focus.
    * It helps the user clear the selected value.
@@ -347,9 +353,10 @@ export interface UseAutocompleteReturnValue<Value, Multiple extends boolean | un
   getPopupIndicatorProps: () => React.HTMLAttributes<HTMLButtonElement>;
   /**
    * Resolver for the listbox component's props.
+   * @param externalProps props for the listbox component
    * @returns props that should be spread on the listbox component
    */
-  getListboxProps: () => React.HTMLAttributes<HTMLUListElement>;
+  getListboxProps: (externalProps?: any) => React.HTMLAttributes<HTMLUListElement>;
   /**
    * Resolver for the rendered option element's props.
    * @param renderedOption option rendered on the Autocomplete

package/useAutocomplete/useAutocomplete.js

@@ -116,6 +116,7 @@ function useAutocomplete(props) {
     options,
     readOnly = false,
     renderValue,
+    resetHighlightOnMouseLeave = false,
     selectOnFocus = !props.freeSolo,
     value: valueProp
   } = props;
@@ -136,6 +137,9 @@ function useAutocomplete(props) {
   const firstFocus = React.useRef(true);
   const inputRef = React.useRef(null);
   const listboxRef = React.useRef(null);
+  // VoiceOver synthesises a spurious Backspace on the input after a chip
+  // deletion moves DOM focus back to it. This flag suppresses that one event.
+  const ignoreNextBackspaceRef = React.useRef(false);
   const windowLostFocus = React.useRef(false);
   const [anchorEl, setAnchorEl] = React.useState(null);
   const [focusedItem, setFocusedItem] = React.useState(-1);
@@ -243,8 +247,10 @@ function useAutocomplete(props) {
       return;
     }
 
-    // Only reset the input's value when freeSolo if the component's value changes.
-    if (freeSolo && !valueChange) {
+    // In freeSolo mode, only reset the input after a real value change.
+    // Also prevent the initial default value of `null` from clearing controlled values.
+    const shouldSkipFreeSoloReset = freeSolo && (!valueChange || value == null && previousProps.value === undefined);
+    if (shouldSkipFreeSoloReset) {
       return;
     }
     resetInputValue(null, value, 'reset');
@@ -300,6 +306,12 @@ function useAutocomplete(props) {
     reason,
     preserveScroll = false
   }) => {
+    // React can clear refs before pending passive effects run during unmount.
+    // If both refs are gone, there is no DOM left to sync.
+    if (inputRef.current == null && listboxRef.current == null) {
+      return;
+    }
+
     // does the index exist?
     if (index === -1) {
       inputRef.current.removeAttribute('aria-activedescendant');
@@ -898,6 +910,10 @@ function useAutocomplete(props) {
           break;
         case 'Backspace':
           // Remove the value on the left of the "cursor"
+          if (ignoreNextBackspaceRef.current) {
+            ignoreNextBackspaceRef.current = false;
+            break;
+          }
           if (multiple && !readOnly && inputValue === '' && value.length > 0) {
             const index = focusedItem === -1 ? value.length - 1 : focusedItem;
             const newValue = value.slice();
@@ -905,6 +921,18 @@ function useAutocomplete(props) {
             handleValue(event, newValue, 'removeOption', {
               option: value[index]
             });
+            if (focusedItem !== -1) {
+              // Suppress the spurious Backspace VoiceOver synthesises on the
+              // input after focus returns to it. Clear it shortly after
+              // deletion so a later real Backspace is not ignored if the
+              // synthetic follow-up event never arrives.
+              ignoreNextBackspaceRef.current = true;
+              setTimeout(() => {
+                if (ignoreNextBackspaceRef.current) {
+                  ignoreNextBackspaceRef.current = false;
+                }
+              }, 0);
+            }
           }
           if (!multiple && renderValue && !readOnly && inputValue === '') {
             handleValue(event, null, 'removeOption', {
@@ -1030,6 +1058,17 @@ function useAutocomplete(props) {
       touchScrolledRef.current = false;
     }
   };
+  const handleListboxMouseLeave = event => {
+    if (!resetHighlightOnMouseLeave || highlightedIndexRef.current === -1 || highlightReasonRef.current !== 'mouse' || isTouchRef.current) {
+      return;
+    }
+    setHighlightedIndex({
+      event,
+      index: -1,
+      reason: 'mouse',
+      preserveScroll: true
+    });
+  };
   const handleOptionTouchStart = event => {
     touchScrolledRef.current = false;
     setHighlightedIndex({
@@ -1183,6 +1222,12 @@ function useAutocomplete(props) {
       }),
       'data-item-index': index,
       tabIndex: -1,
+      onFocus: () => {
+        // If focus on the item doesn't come from keyboard events, we update the state via onFocus.
+        if (focusedItem !== index) {
+          setFocusedItem(index);
+        }
+      },
       ...(!readOnly && {
         onDelete: multiple ? handleItemDelete(index) : handleSingleItemDelete
       })
@@ -1192,20 +1237,37 @@ function useAutocomplete(props) {
       type: 'button',
       onClick: handlePopupIndicator
     }),
-    getListboxProps: () => ({
+    getListboxProps: (other = {}) => ({
+      ...other,
       role: 'listbox',
       id: `${id}-listbox`,
       'aria-labelledby': `${id}-label`,
       'aria-multiselectable': multiple || undefined,
       ref: handleListboxRef,
       onMouseDown: event => {
+        other.onMouseDown?.(event);
+        if (event.defaultMuiPrevented) {
+          return;
+        }
+
         // Prevent blur
         event.preventDefault();
       },
-      onScroll: () => {
+      onScroll: event => {
+        other.onScroll?.(event);
+        if (event.defaultMuiPrevented) {
+          return;
+        }
         if (isTouchRef.current) {
           touchScrolledRef.current = true;
         }
+      },
+      onMouseLeave: event => {
+        other.onMouseLeave?.(event);
+        if (event.defaultMuiPrevented) {
+          return;
+        }
+        handleListboxMouseLeave(event);
       }
     }),
     getOptionProps: ({

package/useAutocomplete/useAutocomplete.mjs

@@ -108,6 +108,7 @@ function useAutocomplete(props) {
     options,
     readOnly = false,
     renderValue,
+    resetHighlightOnMouseLeave = false,
     selectOnFocus = !props.freeSolo,
     value: valueProp
   } = props;
@@ -128,6 +129,9 @@ function useAutocomplete(props) {
   const firstFocus = React.useRef(true);
   const inputRef = React.useRef(null);
   const listboxRef = React.useRef(null);
+  // VoiceOver synthesises a spurious Backspace on the input after a chip
+  // deletion moves DOM focus back to it. This flag suppresses that one event.
+  const ignoreNextBackspaceRef = React.useRef(false);
   const windowLostFocus = React.useRef(false);
   const [anchorEl, setAnchorEl] = React.useState(null);
   const [focusedItem, setFocusedItem] = React.useState(-1);
@@ -235,8 +239,10 @@ function useAutocomplete(props) {
       return;
     }
 
-    // Only reset the input's value when freeSolo if the component's value changes.
-    if (freeSolo && !valueChange) {
+    // In freeSolo mode, only reset the input after a real value change.
+    // Also prevent the initial default value of `null` from clearing controlled values.
+    const shouldSkipFreeSoloReset = freeSolo && (!valueChange || value == null && previousProps.value === undefined);
+    if (shouldSkipFreeSoloReset) {
       return;
     }
     resetInputValue(null, value, 'reset');
@@ -292,6 +298,12 @@ function useAutocomplete(props) {
     reason,
     preserveScroll = false
   }) => {
+    // React can clear refs before pending passive effects run during unmount.
+    // If both refs are gone, there is no DOM left to sync.
+    if (inputRef.current == null && listboxRef.current == null) {
+      return;
+    }
+
     // does the index exist?
     if (index === -1) {
       inputRef.current.removeAttribute('aria-activedescendant');
@@ -890,6 +902,10 @@ function useAutocomplete(props) {
           break;
         case 'Backspace':
           // Remove the value on the left of the "cursor"
+          if (ignoreNextBackspaceRef.current) {
+            ignoreNextBackspaceRef.current = false;
+            break;
+          }
           if (multiple && !readOnly && inputValue === '' && value.length > 0) {
             const index = focusedItem === -1 ? value.length - 1 : focusedItem;
             const newValue = value.slice();
@@ -897,6 +913,18 @@ function useAutocomplete(props) {
             handleValue(event, newValue, 'removeOption', {
               option: value[index]
             });
+            if (focusedItem !== -1) {
+              // Suppress the spurious Backspace VoiceOver synthesises on the
+              // input after focus returns to it. Clear it shortly after
+              // deletion so a later real Backspace is not ignored if the
+              // synthetic follow-up event never arrives.
+              ignoreNextBackspaceRef.current = true;
+              setTimeout(() => {
+                if (ignoreNextBackspaceRef.current) {
+                  ignoreNextBackspaceRef.current = false;
+                }
+              }, 0);
+            }
           }
           if (!multiple && renderValue && !readOnly && inputValue === '') {
             handleValue(event, null, 'removeOption', {
@@ -1022,6 +1050,17 @@ function useAutocomplete(props) {
       touchScrolledRef.current = false;
     }
   };
+  const handleListboxMouseLeave = event => {
+    if (!resetHighlightOnMouseLeave || highlightedIndexRef.current === -1 || highlightReasonRef.current !== 'mouse' || isTouchRef.current) {
+      return;
+    }
+    setHighlightedIndex({
+      event,
+      index: -1,
+      reason: 'mouse',
+      preserveScroll: true
+    });
+  };
   const handleOptionTouchStart = event => {
     touchScrolledRef.current = false;
     setHighlightedIndex({
@@ -1175,6 +1214,12 @@ function useAutocomplete(props) {
       }),
       'data-item-index': index,
       tabIndex: -1,
+      onFocus: () => {
+        // If focus on the item doesn't come from keyboard events, we update the state via onFocus.
+        if (focusedItem !== index) {
+          setFocusedItem(index);
+        }
+      },
       ...(!readOnly && {
         onDelete: multiple ? handleItemDelete(index) : handleSingleItemDelete
       })
@@ -1184,20 +1229,37 @@ function useAutocomplete(props) {
       type: 'button',
       onClick: handlePopupIndicator
     }),
-    getListboxProps: () => ({
+    getListboxProps: (other = {}) => ({
+      ...other,
       role: 'listbox',
       id: `${id}-listbox`,
       'aria-labelledby': `${id}-label`,
       'aria-multiselectable': multiple || undefined,
       ref: handleListboxRef,
       onMouseDown: event => {
+        other.onMouseDown?.(event);
+        if (event.defaultMuiPrevented) {
+          return;
+        }
+
         // Prevent blur
         event.preventDefault();
       },
-      onScroll: () => {
+      onScroll: event => {
+        other.onScroll?.(event);
+        if (event.defaultMuiPrevented) {
+          return;
+        }
         if (isTouchRef.current) {
           touchScrolledRef.current = true;
         }
+      },
+      onMouseLeave: event => {
+        other.onMouseLeave?.(event);
+        if (event.defaultMuiPrevented) {
+          return;
+        }
+        handleListboxMouseLeave(event);
       }
     }),
     getOptionProps: ({

package/version/index.js

@@ -4,9 +4,9 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.version = exports.prerelease = exports.patch = exports.minor = exports.major = exports.default = void 0;
-const version = exports.version = "9.0.1";
+const version = exports.version = "9.1.0";
 const major = exports.major = Number("9");
-const minor = exports.minor = Number("0");
-const patch = exports.patch = Number("1");
+const minor = exports.minor = Number("1");
+const patch = exports.patch = Number("0");
 const prerelease = exports.prerelease = undefined;
 var _default = exports.default = version;

package/version/index.mjs

@@ -1,6 +1,6 @@
-export const version = "9.0.1";
+export const version = "9.1.0";
 export const major = Number("9");
-export const minor = Number("0");
-export const patch = Number("1");
+export const minor = Number("1");
+export const patch = Number("0");
 export const prerelease = undefined;
 export default version;