@mui/material 7.3.0 → 7.3.1

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # [Versions](https://mui.com/versions/)
 
+## 7.3.1
+
+<!-- generated comparing v7.3.0..master -->
+
+_Aug 6, 2025_
+
+A big thanks to the 2 contributors who made this release possible.
+
+### `@mui/material@7.3.1`
+
+- [PaginationItem] Fix inheritance of component (#46666) @sai6855
+- [Select] Revert - Implement pointer cancellation PR 45789 (#46672) @ZeeshanTamboli
+
+All contributors of this release in alphabetical order: @sai6855, @ZeeshanTamboli
+
 ## 7.3.0
 
 <!-- generated comparing v7.2.0..master -->

package/PaginationItem/PaginationItem.d.ts

@@ -102,6 +102,7 @@ export interface PaginationItemTypeMap<AdditionalProps = {}, RootComponent exten
  * API:
  *
  * - [PaginationItem API](https://mui.com/material-ui/api/pagination-item/)
+ * - inherits [ButtonBase API](https://mui.com/material-ui/api/button-base/)
  */
 declare const PaginationItem: OverridableComponent<PaginationItemTypeMap>;
 export type PaginationItemProps<RootComponent extends React.ElementType = PaginationItemTypeMap['defaultComponent'], AdditionalProps = {}> = OverrideProps<PaginationItemTypeMap<AdditionalProps, RootComponent>, RootComponent> & {

package/Select/SelectInput.js

@@ -160,27 +160,12 @@ const SelectInput = /*#__PURE__*/React.forwardRef(function SelectInput(props, re
   });
   const inputRef = React.useRef(null);
   const displayRef = React.useRef(null);
-  const paperRef = React.useRef(null);
-  const didPointerDownRef = React.useRef(false);
   const [displayNode, setDisplayNode] = React.useState(null);
   const {
     current: isOpenControlled
   } = React.useRef(openProp != null);
   const [menuMinWidthState, setMenuMinWidthState] = React.useState();
-  const open = displayNode !== null && openState;
-  const ownerState = {
-    ...props,
-    variant,
-    value,
-    open,
-    error
-  };
-  const paperProps = {
-    ...MenuProps.PaperProps,
-    ...(typeof MenuProps.slotProps?.paper === 'function' ? MenuProps.slotProps.paper(ownerState) : MenuProps.slotProps?.paper)
-  };
   const handleRef = (0, _useForkRef.default)(ref, inputRefProp);
-  const handlePaperRef = (0, _useForkRef.default)(paperProps.ref, paperRef);
   const handleDisplayRef = React.useCallback(node => {
     displayRef.current = node;
     if (node) {
@@ -230,8 +215,8 @@ const SelectInput = /*#__PURE__*/React.forwardRef(function SelectInput(props, re
     }
     return undefined;
   }, [labelId]);
-  const update = (openParam, event) => {
-    if (openParam) {
+  const update = (open, event) => {
+    if (open) {
       if (onOpen) {
         onOpen(event);
       }
@@ -240,7 +225,7 @@ const SelectInput = /*#__PURE__*/React.forwardRef(function SelectInput(props, re
     }
     if (!isOpenControlled) {
       setMenuMinWidthState(autoWidth ? null : anchorElement.clientWidth);
-      setOpenState(openParam);
+      setOpenState(open);
     }
   };
   const handleMouseDown = event => {
@@ -251,31 +236,6 @@ const SelectInput = /*#__PURE__*/React.forwardRef(function SelectInput(props, re
     // Hijack the default focus behavior.
     event.preventDefault();
     displayRef.current.focus();
-    const doc = (0, _ownerDocument.default)(event.currentTarget);
-    function handleMouseUp(mouseEvent) {
-      if (!displayRef.current) {
-        return;
-      }
-
-      // mouse is over the options/menuitem, don't close the menu
-      if (paperRef.current.contains(mouseEvent.target)) {
-        return;
-      }
-      const triggerElement = displayRef.current.getBoundingClientRect();
-
-      // mouse is inside the trigger, don't close the menu
-      if (mouseEvent.clientX >= triggerElement.left && mouseEvent.clientX <= triggerElement.right && mouseEvent.clientY >= triggerElement.top && mouseEvent.clientY <= triggerElement.bottom) {
-        return;
-      }
-
-      // close the menu
-      update(false, mouseEvent);
-    }
-
-    // `{ once: true }` to automatically remove the listener, see https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener#once
-    doc.addEventListener('mouseup', handleMouseUp, {
-      once: true
-    });
     update(true, event);
   };
   const handleClose = event => {
@@ -294,7 +254,7 @@ const SelectInput = /*#__PURE__*/React.forwardRef(function SelectInput(props, re
       onChange(event, child);
     }
   };
-  const handleItemSelect = child => event => {
+  const handleItemClick = child => event => {
     let newValue;
 
     // We use the tabindex attribute to signal the available options.
@@ -312,6 +272,9 @@ const SelectInput = /*#__PURE__*/React.forwardRef(function SelectInput(props, re
     } else {
       newValue = child.props.value;
     }
+    if (child.props.onClick) {
+      child.props.onClick(event);
+    }
     if (value !== newValue) {
       setValueState(newValue);
       if (onChange) {
@@ -347,6 +310,7 @@ const SelectInput = /*#__PURE__*/React.forwardRef(function SelectInput(props, re
       }
     }
   };
+  const open = displayNode !== null && openState;
   const handleBlur = event => {
     // if open event.stopImmediatePropagation
     if (!open && onBlur) {
@@ -407,26 +371,7 @@ const SelectInput = /*#__PURE__*/React.forwardRef(function SelectInput(props, re
     }
     return /*#__PURE__*/React.cloneElement(child, {
       'aria-selected': selected ? 'true' : 'false',
-      onPointerDown: () => {
-        didPointerDownRef.current = true;
-      },
-      onClick: event => {
-        didPointerDownRef.current = false;
-        if (child.props.onClick) {
-          child.props.onClick(event);
-        }
-        handleItemSelect(child)(event);
-      },
-      onMouseUp: event => {
-        if (didPointerDownRef.current) {
-          didPointerDownRef.current = false;
-          return;
-        }
-        if (child.props.onMouseUp) {
-          child.props.onMouseUp(event);
-        }
-        handleItemSelect(child)(event);
-      },
+      onClick: handleItemClick(child),
       onKeyUp: event => {
         if (event.key === ' ') {
           // otherwise our MenuItems dispatches a click event
@@ -485,7 +430,18 @@ const SelectInput = /*#__PURE__*/React.forwardRef(function SelectInput(props, re
     tabIndex = disabled ? null : 0;
   }
   const buttonId = SelectDisplayProps.id || (name ? `mui-component-select-${name}` : undefined);
+  const ownerState = {
+    ...props,
+    variant,
+    value,
+    open,
+    error
+  };
   const classes = useUtilityClasses(ownerState);
+  const paperProps = {
+    ...MenuProps.PaperProps,
+    ...(typeof MenuProps.slotProps?.paper === 'function' ? MenuProps.slotProps.paper(ownerState) : MenuProps.slotProps?.paper)
+  };
   const listProps = {
     ...MenuProps.MenuListProps,
     ...(typeof MenuProps.slotProps?.list === 'function' ? MenuProps.slotProps.list(ownerState) : MenuProps.slotProps?.list)
@@ -566,7 +522,6 @@ const SelectInput = /*#__PURE__*/React.forwardRef(function SelectInput(props, re
         },
         paper: {
           ...paperProps,
-          ref: handlePaperRef,
           style: {
             minWidth: menuMinWidth,
             ...(paperProps != null ? paperProps.style : null)

package/esm/PaginationItem/PaginationItem.d.ts

@@ -102,6 +102,7 @@ export interface PaginationItemTypeMap<AdditionalProps = {}, RootComponent exten
  * API:
  *
  * - [PaginationItem API](https://mui.com/material-ui/api/pagination-item/)
+ * - inherits [ButtonBase API](https://mui.com/material-ui/api/button-base/)
  */
 declare const PaginationItem: OverridableComponent<PaginationItemTypeMap>;
 export type PaginationItemProps<RootComponent extends React.ElementType = PaginationItemTypeMap['defaultComponent'], AdditionalProps = {}> = OverrideProps<PaginationItemTypeMap<AdditionalProps, RootComponent>, RootComponent> & {

package/esm/Select/SelectInput.js

@@ -153,27 +153,12 @@ const SelectInput = /*#__PURE__*/React.forwardRef(function SelectInput(props, re
   });
   const inputRef = React.useRef(null);
   const displayRef = React.useRef(null);
-  const paperRef = React.useRef(null);
-  const didPointerDownRef = React.useRef(false);
   const [displayNode, setDisplayNode] = React.useState(null);
   const {
     current: isOpenControlled
   } = React.useRef(openProp != null);
   const [menuMinWidthState, setMenuMinWidthState] = React.useState();
-  const open = displayNode !== null && openState;
-  const ownerState = {
-    ...props,
-    variant,
-    value,
-    open,
-    error
-  };
-  const paperProps = {
-    ...MenuProps.PaperProps,
-    ...(typeof MenuProps.slotProps?.paper === 'function' ? MenuProps.slotProps.paper(ownerState) : MenuProps.slotProps?.paper)
-  };
   const handleRef = useForkRef(ref, inputRefProp);
-  const handlePaperRef = useForkRef(paperProps.ref, paperRef);
   const handleDisplayRef = React.useCallback(node => {
     displayRef.current = node;
     if (node) {
@@ -223,8 +208,8 @@ const SelectInput = /*#__PURE__*/React.forwardRef(function SelectInput(props, re
     }
     return undefined;
   }, [labelId]);
-  const update = (openParam, event) => {
-    if (openParam) {
+  const update = (open, event) => {
+    if (open) {
       if (onOpen) {
         onOpen(event);
       }
@@ -233,7 +218,7 @@ const SelectInput = /*#__PURE__*/React.forwardRef(function SelectInput(props, re
     }
     if (!isOpenControlled) {
       setMenuMinWidthState(autoWidth ? null : anchorElement.clientWidth);
-      setOpenState(openParam);
+      setOpenState(open);
     }
   };
   const handleMouseDown = event => {
@@ -244,31 +229,6 @@ const SelectInput = /*#__PURE__*/React.forwardRef(function SelectInput(props, re
     // Hijack the default focus behavior.
     event.preventDefault();
     displayRef.current.focus();
-    const doc = ownerDocument(event.currentTarget);
-    function handleMouseUp(mouseEvent) {
-      if (!displayRef.current) {
-        return;
-      }
-
-      // mouse is over the options/menuitem, don't close the menu
-      if (paperRef.current.contains(mouseEvent.target)) {
-        return;
-      }
-      const triggerElement = displayRef.current.getBoundingClientRect();
-
-      // mouse is inside the trigger, don't close the menu
-      if (mouseEvent.clientX >= triggerElement.left && mouseEvent.clientX <= triggerElement.right && mouseEvent.clientY >= triggerElement.top && mouseEvent.clientY <= triggerElement.bottom) {
-        return;
-      }
-
-      // close the menu
-      update(false, mouseEvent);
-    }
-
-    // `{ once: true }` to automatically remove the listener, see https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener#once
-    doc.addEventListener('mouseup', handleMouseUp, {
-      once: true
-    });
     update(true, event);
   };
   const handleClose = event => {
@@ -287,7 +247,7 @@ const SelectInput = /*#__PURE__*/React.forwardRef(function SelectInput(props, re
       onChange(event, child);
     }
   };
-  const handleItemSelect = child => event => {
+  const handleItemClick = child => event => {
     let newValue;
 
     // We use the tabindex attribute to signal the available options.
@@ -305,6 +265,9 @@ const SelectInput = /*#__PURE__*/React.forwardRef(function SelectInput(props, re
     } else {
       newValue = child.props.value;
     }
+    if (child.props.onClick) {
+      child.props.onClick(event);
+    }
     if (value !== newValue) {
       setValueState(newValue);
       if (onChange) {
@@ -340,6 +303,7 @@ const SelectInput = /*#__PURE__*/React.forwardRef(function SelectInput(props, re
       }
     }
   };
+  const open = displayNode !== null && openState;
   const handleBlur = event => {
     // if open event.stopImmediatePropagation
     if (!open && onBlur) {
@@ -400,26 +364,7 @@ const SelectInput = /*#__PURE__*/React.forwardRef(function SelectInput(props, re
     }
     return /*#__PURE__*/React.cloneElement(child, {
       'aria-selected': selected ? 'true' : 'false',
-      onPointerDown: () => {
-        didPointerDownRef.current = true;
-      },
-      onClick: event => {
-        didPointerDownRef.current = false;
-        if (child.props.onClick) {
-          child.props.onClick(event);
-        }
-        handleItemSelect(child)(event);
-      },
-      onMouseUp: event => {
-        if (didPointerDownRef.current) {
-          didPointerDownRef.current = false;
-          return;
-        }
-        if (child.props.onMouseUp) {
-          child.props.onMouseUp(event);
-        }
-        handleItemSelect(child)(event);
-      },
+      onClick: handleItemClick(child),
       onKeyUp: event => {
         if (event.key === ' ') {
           // otherwise our MenuItems dispatches a click event
@@ -478,7 +423,18 @@ const SelectInput = /*#__PURE__*/React.forwardRef(function SelectInput(props, re
     tabIndex = disabled ? null : 0;
   }
   const buttonId = SelectDisplayProps.id || (name ? `mui-component-select-${name}` : undefined);
+  const ownerState = {
+    ...props,
+    variant,
+    value,
+    open,
+    error
+  };
   const classes = useUtilityClasses(ownerState);
+  const paperProps = {
+    ...MenuProps.PaperProps,
+    ...(typeof MenuProps.slotProps?.paper === 'function' ? MenuProps.slotProps.paper(ownerState) : MenuProps.slotProps?.paper)
+  };
   const listProps = {
     ...MenuProps.MenuListProps,
     ...(typeof MenuProps.slotProps?.list === 'function' ? MenuProps.slotProps.list(ownerState) : MenuProps.slotProps?.list)
@@ -559,7 +515,6 @@ const SelectInput = /*#__PURE__*/React.forwardRef(function SelectInput(props, re
         },
         paper: {
           ...paperProps,
-          ref: handlePaperRef,
           style: {
             minWidth: menuMinWidth,
             ...(paperProps != null ? paperProps.style : null)

package/esm/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/material v7.3.0
+ * @mui/material v7.3.1
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/esm/version/index.js

@@ -1,6 +1,6 @@
-export const version = "7.3.0";
+export const version = "7.3.1";
 export const major = Number("7");
 export const minor = Number("3");
-export const patch = Number("0");
+export const patch = Number("1");
 export const prerelease = undefined;
 export default version;

package/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/material v7.3.0
+ * @mui/material v7.3.1
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/material",
-  "version": "7.3.0",
+  "version": "7.3.1",
   "author": "MUI Team",
   "description": "Material UI is an open-source React component library that implements Google's Material Design. It's comprehensive and can be used in production out of the box.",
   "main": "./index.js",
@@ -34,10 +34,10 @@
     "prop-types": "^15.8.1",
     "react-is": "^19.1.1",
     "react-transition-group": "^4.4.5",
-    "@mui/system": "^7.3.0",
+    "@mui/system": "^7.3.1",
     "@mui/types": "^7.4.5",
-    "@mui/utils": "^7.3.0",
-    "@mui/core-downloads-tracker": "^7.3.0"
+    "@mui/core-downloads-tracker": "^7.3.1",
+    "@mui/utils": "^7.3.1"
   },
   "peerDependencies": {
     "@emotion/react": "^11.5.0",
@@ -45,7 +45,7 @@
     "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0",
     "react": "^17.0.0 || ^18.0.0 || ^19.0.0",
     "react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0",
-    "@mui/material-pigment-css": "^7.3.0"
+    "@mui/material-pigment-css": "^7.3.1"
   },
   "peerDependenciesMeta": {
     "@types/react": {

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