@mui/material 7.0.0-beta.4 → 7.0.0

package/useAutocomplete/useAutocomplete.d.ts

@@ -223,7 +223,7 @@ export interface UseAutocompleteProps<Value, Multiple extends boolean | undefine
    *
    * @param {React.SyntheticEvent} event The event source of the callback.
    * @param {Value} option The highlighted option.
-   * @param {string} reason Can be: `"keyboard"`, `"auto"`, `"mouse"`, `"touch"`.
+   * @param {string} reason Can be: `"keyboard"`, `"mouse"`, `"touch"`.
    */
   onHighlightChange?: (event: React.SyntheticEvent, option: Value | null, reason: AutocompleteHighlightChangeReason) => void;
   /**
@@ -274,7 +274,7 @@ export interface UseAutocompleteProps<Value, Multiple extends boolean | undefine
   value?: AutocompleteValue<Value, Multiple, DisableClearable, FreeSolo>;
 }
 export interface UseAutocompleteParameters<Value, Multiple extends boolean | undefined, DisableClearable extends boolean | undefined, FreeSolo extends boolean | undefined> extends UseAutocompleteProps<Value, Multiple, DisableClearable, FreeSolo> {}
-export type AutocompleteHighlightChangeReason = 'keyboard' | 'mouse' | 'auto' | 'touch';
+export type AutocompleteHighlightChangeReason = 'keyboard' | 'mouse' | 'touch';
 export type AutocompleteChangeReason = 'createOption' | 'selectOption' | 'removeOption' | 'clear' | 'blur';
 export interface AutocompleteChangeDetails<Value = string> {
   option: Value;

package/useAutocomplete/useAutocomplete.js

@@ -244,7 +244,7 @@ function useAutocomplete(props) {
   const setHighlightedIndex = (0, _utils.unstable_useEventCallback)(({
     event,
     index,
-    reason = 'auto'
+    reason
   }) => {
     highlightedIndexRef.current = index;
 
@@ -254,7 +254,7 @@ function useAutocomplete(props) {
     } else {
       inputRef.current.setAttribute('aria-activedescendant', `${id}-option-${index}`);
     }
-    if (onHighlightChange) {
+    if (onHighlightChange && ['mouse', 'keyboard', 'touch'].includes(reason)) {
       onHighlightChange(event, index === -1 ? null : filteredOptions[index], reason);
     }
     if (!listboxRef.current) {
@@ -307,7 +307,7 @@ function useAutocomplete(props) {
     event,
     diff,
     direction = 'next',
-    reason = 'auto'
+    reason
   }) => {
     if (!popupOpen) {
       return;

package/utils/mergeSlotProps.js

@@ -6,10 +6,30 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = mergeSlotProps;
 var _clsx = _interopRequireDefault(require("clsx"));
+// Brought from [Base UI](https://github.com/mui/base-ui/blob/master/packages/react/src/merge-props/mergeProps.ts#L119)
+// Use it directly from Base UI once it's a package dependency.
+function isEventHandler(key, value) {
+  // This approach is more efficient than using a regex.
+  const thirdCharCode = key.charCodeAt(2);
+  return key[0] === 'o' && key[1] === 'n' && thirdCharCode >= 65 /* A */ && thirdCharCode <= 90 /* Z */ && typeof value === 'function';
+}
 function mergeSlotProps(externalSlotProps, defaultSlotProps) {
   if (!externalSlotProps) {
     return defaultSlotProps;
   }
+  function extractHandlers(externalSlotPropsValue, defaultSlotPropsValue) {
+    const handlers = {};
+    Object.keys(defaultSlotPropsValue).forEach(key => {
+      if (isEventHandler(key, defaultSlotPropsValue[key]) && typeof externalSlotPropsValue[key] === 'function') {
+        // only compose the handlers if both default and external slot props match the event handler
+        handlers[key] = (...args) => {
+          externalSlotPropsValue[key](...args);
+          defaultSlotPropsValue[key](...args);
+        };
+      }
+    });
+    return handlers;
+  }
   if (typeof externalSlotProps === 'function' || typeof defaultSlotProps === 'function') {
     return ownerState => {
       const defaultSlotPropsValue = typeof defaultSlotProps === 'function' ? defaultSlotProps(ownerState) : defaultSlotProps;
@@ -18,9 +38,11 @@ function mergeSlotProps(externalSlotProps, defaultSlotProps) {
         ...defaultSlotPropsValue
       }) : externalSlotProps;
       const className = (0, _clsx.default)(ownerState?.className, defaultSlotPropsValue?.className, externalSlotPropsValue?.className);
+      const handlers = extractHandlers(externalSlotPropsValue, defaultSlotPropsValue);
       return {
         ...defaultSlotPropsValue,
         ...externalSlotPropsValue,
+        ...handlers,
         ...(!!className && {
           className
         }),
@@ -37,10 +59,12 @@ function mergeSlotProps(externalSlotProps, defaultSlotProps) {
     };
   }
   const typedDefaultSlotProps = defaultSlotProps;
+  const handlers = extractHandlers(externalSlotProps, typedDefaultSlotProps);
   const className = (0, _clsx.default)(typedDefaultSlotProps?.className, externalSlotProps?.className);
   return {
     ...defaultSlotProps,
     ...externalSlotProps,
+    ...handlers,
     ...(!!className && {
       className
     }),

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 = "7.0.0-beta.4";
+const version = exports.version = "7.0.0";
 const major = exports.major = Number("7");
 const minor = exports.minor = Number("0");
 const patch = exports.patch = Number("0");
-const prerelease = exports.prerelease = "beta.4";
+const prerelease = exports.prerelease = undefined;
 var _default = exports.default = version;