@mui/material 5.14.16 → 5.14.18

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/material",
-  "version": "5.14.16",
+  "version": "5.14.18",
   "private": false,
   "author": "MUI Team",
   "description": "React components that implement Google's Material Design.",
@@ -28,11 +28,11 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.23.2",
-    "@mui/base": "5.0.0-beta.22",
-    "@mui/core-downloads-tracker": "^5.14.16",
-    "@mui/system": "^5.14.16",
-    "@mui/types": "^7.2.8",
-    "@mui/utils": "^5.14.16",
+    "@mui/base": "5.0.0-beta.24",
+    "@mui/core-downloads-tracker": "^5.14.18",
+    "@mui/system": "^5.14.18",
+    "@mui/types": "^7.2.9",
+    "@mui/utils": "^5.14.18",
     "@types/react-transition-group": "^4.4.8",
     "clsx": "^2.0.0",
     "csstype": "^3.1.2",

package/umd/material-ui.development.js

@@ -1,5 +1,5 @@
 /**
- * @mui/material v5.14.16
+ * @mui/material v5.14.18
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the
@@ -18658,7 +18658,9 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       // clicking a checkbox to check it, hitting a button to submit a form,
       // and hitting left arrow to move the cursor in a text input etc.
       // Only special HTML elements have these default behaviors.
-      if (event.key !== 'Escape' || !isTopModal()) {
+      if (event.key !== 'Escape' || event.which === 229 ||
+      // Wait until IME is settled.
+      !isTopModal()) {
         return;
       }
       if (!disableEscapeKeyDown) {
@@ -22422,7 +22424,8 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
 
   var _ClearIcon, _ArrowDropDownIcon;
   const _excluded$1N = ["autoComplete", "autoHighlight", "autoSelect", "blurOnSelect", "ChipProps", "className", "clearIcon", "clearOnBlur", "clearOnEscape", "clearText", "closeText", "componentsProps", "defaultValue", "disableClearable", "disableCloseOnSelect", "disabled", "disabledItemsFocusable", "disableListWrap", "disablePortal", "filterOptions", "filterSelectedOptions", "forcePopupIcon", "freeSolo", "fullWidth", "getLimitTagsText", "getOptionDisabled", "getOptionLabel", "isOptionEqualToValue", "groupBy", "handleHomeEndKeys", "id", "includeInputInList", "inputValue", "limitTags", "ListboxComponent", "ListboxProps", "loading", "loadingText", "multiple", "noOptionsText", "onChange", "onClose", "onHighlightChange", "onInputChange", "onOpen", "open", "openOnFocus", "openText", "options", "PaperComponent", "PopperComponent", "popupIcon", "readOnly", "renderGroup", "renderInput", "renderOption", "renderTags", "selectOnFocus", "size", "slotProps", "value"],
-    _excluded2$a = ["ref"];
+    _excluded2$a = ["ref"],
+    _excluded3$2 = ["key"];
   const useUtilityClasses$1x = ownerState => {
     const {
       classes,
@@ -22920,9 +22923,15 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       })]
     }, params.key);
     const renderGroup = renderGroupProp || defaultRenderGroup;
-    const defaultRenderOption = (props2, option) => /*#__PURE__*/jsxRuntime_1("li", _extends({}, props2, {
-      children: getOptionLabel(option)
-    }));
+    const defaultRenderOption = (props2, option) => {
+      const {
+          key
+        } = props2,
+        otherProps = _objectWithoutPropertiesLoose(props2, _excluded3$2);
+      return /*#__PURE__*/jsxRuntime_1("li", _extends({}, otherProps, {
+        children: getOptionLabel(option)
+      }), key);
+    };
     const renderOption = renderOptionProp || defaultRenderOption;
     const renderListOption = (option, index) => {
       const optionProps = getOptionProps({
@@ -23338,6 +23347,10 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
      * @param {string} reason Can be: `"input"` (user input), `"reset"` (programmatic change), `"clear"`.
      */
     onInputChange: PropTypes.func,
+    /**
+     * @ignore
+     */
+    onKeyDown: PropTypes.func,
     /**
      * Callback fired when the popup requests to be opened.
      * Use in controlled mode (see open).
@@ -29803,6 +29816,9 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     }, ownerState.hiddenLabel && {
       paddingTop: 16,
       paddingBottom: 17
+    }, ownerState.hiddenLabel && ownerState.size === 'small' && {
+      paddingTop: 8,
+      paddingBottom: 9
     }));
   });
   const FilledInputInput = styled$1(InputBaseComponent, {
@@ -29843,11 +29859,6 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   }, ownerState.hiddenLabel && {
     paddingTop: 16,
     paddingBottom: 17
-  }, ownerState.multiline && {
-    paddingTop: 0,
-    paddingBottom: 0,
-    paddingLeft: 0,
-    paddingRight: 0
   }, ownerState.startAdornment && {
     paddingLeft: 0
   }, ownerState.endAdornment && {
@@ -29855,6 +29866,11 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   }, ownerState.hiddenLabel && ownerState.size === 'small' && {
     paddingTop: 8,
     paddingBottom: 9
+  }, ownerState.multiline && {
+    paddingTop: 0,
+    paddingBottom: 0,
+    paddingLeft: 0,
+    paddingRight: 0
   }));
   const FilledInput = /*#__PURE__*/React__namespace.forwardRef(function FilledInput(inProps, ref) {
     var _ref, _slots$root, _ref2, _slots$input;
@@ -30585,8 +30601,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       ref: ref
     }, other, {
       children: [/*#__PURE__*/React__namespace.cloneElement(control, controlProps), required ? /*#__PURE__*/jsxRuntime_2(Stack$1, {
-        direction: "row",
-        alignItems: "center",
+        display: "block",
         children: [label, /*#__PURE__*/jsxRuntime_2(AsteriskComponent$1, {
           ownerState: ownerState,
           "aria-hidden": true,
@@ -39460,16 +39475,14 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       const rootNode = rootRef.current;
       const {
         right,
-        left
+        left,
+        width: containerWidth
       } = rootNode.getBoundingClientRect();
-      const {
-        width
-      } = rootNode.firstChild.getBoundingClientRect();
       let percent;
       if (theme.direction === 'rtl') {
-        percent = (right - event.clientX) / (width * max);
+        percent = (right - event.clientX) / containerWidth;
       } else {
-        percent = (event.clientX - left) / (width * max);
+        percent = (event.clientX - left) / containerWidth;
       }
       let newHover = roundValueToPrecision(max * percent + precision / 2, precision);
       newHover = clamp$1(newHover, precision, max);
@@ -47242,18 +47255,21 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   }), 'KeyboardArrowRight');
 
   var _LastPageIcon, _FirstPageIcon, _KeyboardArrowRight, _KeyboardArrowLeft, _KeyboardArrowLeft2, _KeyboardArrowRight2, _FirstPageIcon2, _LastPageIcon2;
-  const _excluded$a = ["backIconButtonProps", "count", "getItemAriaLabel", "nextIconButtonProps", "onPageChange", "page", "rowsPerPage", "showFirstButton", "showLastButton"];
+  const _excluded$a = ["backIconButtonProps", "count", "disabled", "getItemAriaLabel", "nextIconButtonProps", "onPageChange", "page", "rowsPerPage", "showFirstButton", "showLastButton", "slotProps"];
   const TablePaginationActions = /*#__PURE__*/React__namespace.forwardRef(function TablePaginationActions(props, ref) {
+    var _slotProps$firstButto, _slotProps$previousBu, _slotProps$nextButton, _slotProps$lastButton;
     const {
         backIconButtonProps,
         count,
+        disabled = false,
         getItemAriaLabel,
         nextIconButtonProps,
         onPageChange,
         page,
         rowsPerPage,
         showFirstButton,
-        showLastButton
+        showLastButton,
+        slotProps
       } = props,
       other = _objectWithoutPropertiesLoose(props, _excluded$a);
     const theme = useTheme();
@@ -47272,35 +47288,37 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     return /*#__PURE__*/jsxRuntime_2("div", _extends({
       ref: ref
     }, other, {
-      children: [showFirstButton && /*#__PURE__*/jsxRuntime_1(IconButton$1, {
+      children: [showFirstButton && /*#__PURE__*/jsxRuntime_1(IconButton$1, _extends({
         onClick: handleFirstPageButtonClick,
-        disabled: page === 0,
+        disabled: disabled || page === 0,
         "aria-label": getItemAriaLabel('first', page),
-        title: getItemAriaLabel('first', page),
+        title: getItemAriaLabel('first', page)
+      }, (_slotProps$firstButto = slotProps == null ? void 0 : slotProps.firstButton) != null ? _slotProps$firstButto : {}, {
         children: theme.direction === 'rtl' ? _LastPageIcon || (_LastPageIcon = /*#__PURE__*/jsxRuntime_1(LastPageIcon, {})) : _FirstPageIcon || (_FirstPageIcon = /*#__PURE__*/jsxRuntime_1(FirstPageIcon, {}))
-      }), /*#__PURE__*/jsxRuntime_1(IconButton$1, _extends({
+      })), /*#__PURE__*/jsxRuntime_1(IconButton$1, _extends({
         onClick: handleBackButtonClick,
-        disabled: page === 0,
+        disabled: disabled || page === 0,
         color: "inherit",
         "aria-label": getItemAriaLabel('previous', page),
         title: getItemAriaLabel('previous', page)
-      }, backIconButtonProps, {
+      }, (_slotProps$previousBu = slotProps == null ? void 0 : slotProps.previousButton) != null ? _slotProps$previousBu : backIconButtonProps, {
         children: theme.direction === 'rtl' ? _KeyboardArrowRight || (_KeyboardArrowRight = /*#__PURE__*/jsxRuntime_1(KeyboardArrowRight, {})) : _KeyboardArrowLeft || (_KeyboardArrowLeft = /*#__PURE__*/jsxRuntime_1(KeyboardArrowLeft, {}))
       })), /*#__PURE__*/jsxRuntime_1(IconButton$1, _extends({
         onClick: handleNextButtonClick,
-        disabled: count !== -1 ? page >= Math.ceil(count / rowsPerPage) - 1 : false,
+        disabled: disabled || (count !== -1 ? page >= Math.ceil(count / rowsPerPage) - 1 : false),
         color: "inherit",
         "aria-label": getItemAriaLabel('next', page),
         title: getItemAriaLabel('next', page)
-      }, nextIconButtonProps, {
+      }, (_slotProps$nextButton = slotProps == null ? void 0 : slotProps.nextButton) != null ? _slotProps$nextButton : nextIconButtonProps, {
         children: theme.direction === 'rtl' ? _KeyboardArrowLeft2 || (_KeyboardArrowLeft2 = /*#__PURE__*/jsxRuntime_1(KeyboardArrowLeft, {})) : _KeyboardArrowRight2 || (_KeyboardArrowRight2 = /*#__PURE__*/jsxRuntime_1(KeyboardArrowRight, {}))
-      })), showLastButton && /*#__PURE__*/jsxRuntime_1(IconButton$1, {
+      })), showLastButton && /*#__PURE__*/jsxRuntime_1(IconButton$1, _extends({
         onClick: handleLastPageButtonClick,
-        disabled: page >= Math.ceil(count / rowsPerPage) - 1,
+        disabled: disabled || page >= Math.ceil(count / rowsPerPage) - 1,
         "aria-label": getItemAriaLabel('last', page),
-        title: getItemAriaLabel('last', page),
+        title: getItemAriaLabel('last', page)
+      }, (_slotProps$lastButton = slotProps == null ? void 0 : slotProps.lastButton) != null ? _slotProps$lastButton : {}, {
         children: theme.direction === 'rtl' ? _FirstPageIcon2 || (_FirstPageIcon2 = /*#__PURE__*/jsxRuntime_1(FirstPageIcon, {})) : _LastPageIcon2 || (_LastPageIcon2 = /*#__PURE__*/jsxRuntime_1(LastPageIcon, {}))
-      })]
+      }))]
     }));
   });
   TablePaginationActions.propTypes = {
@@ -47312,6 +47330,11 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
      * The total number of rows.
      */
     count: PropTypes.number.isRequired,
+    /**
+     * If `true`, the component is disabled.
+     * @default false
+     */
+    disabled: PropTypes.bool,
     /**
      * Accepts a function which returns a string value that provides a user-friendly name for the current page.
      *
@@ -47348,7 +47371,17 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     /**
      * If `true`, show the last-page button.
      */
-    showLastButton: PropTypes.bool.isRequired
+    showLastButton: PropTypes.bool.isRequired,
+    /**
+     * The props used for each slot inside the TablePaginationActions.
+     * @default {}
+     */
+    slotProps: PropTypes.shape({
+      firstButton: PropTypes.object,
+      lastButton: PropTypes.object,
+      nextButton: PropTypes.object,
+      previousButton: PropTypes.object
+    })
   } ;
   var TablePaginationActions$1 = TablePaginationActions;
 
@@ -47359,7 +47392,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   var tablePaginationClasses$1 = tablePaginationClasses;
 
   var _InputBase;
-  const _excluded$9 = ["ActionsComponent", "backIconButtonProps", "className", "colSpan", "component", "count", "getItemAriaLabel", "labelDisplayedRows", "labelRowsPerPage", "nextIconButtonProps", "onPageChange", "onRowsPerPageChange", "page", "rowsPerPage", "rowsPerPageOptions", "SelectProps", "showFirstButton", "showLastButton"];
+  const _excluded$9 = ["ActionsComponent", "backIconButtonProps", "className", "colSpan", "component", "count", "disabled", "getItemAriaLabel", "labelDisplayedRows", "labelRowsPerPage", "nextIconButtonProps", "onPageChange", "onRowsPerPageChange", "page", "rowsPerPage", "rowsPerPageOptions", "SelectProps", "showFirstButton", "showLastButton", "slotProps"];
   const TablePaginationRoot = styled$1(TableCell$1, {
     name: 'MuiTablePagination',
     slot: 'Root',
@@ -47482,6 +47515,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
    * A `TableCell` based component for placing inside `TableFooter` for pagination.
    */
   const TablePagination = /*#__PURE__*/React__namespace.forwardRef(function TablePagination(inProps, ref) {
+    var _slotProps$select;
     const props = useThemeProps({
       props: inProps,
       name: 'MuiTablePagination'
@@ -47493,6 +47527,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
         colSpan: colSpanProp,
         component = TableCell$1,
         count,
+        disabled = false,
         getItemAriaLabel = defaultGetAriaLabel,
         labelDisplayedRows = defaultLabelDisplayedRows,
         labelRowsPerPage = 'Rows per page:',
@@ -47504,19 +47539,21 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
         rowsPerPageOptions = [10, 25, 50, 100],
         SelectProps = {},
         showFirstButton = false,
-        showLastButton = false
+        showLastButton = false,
+        slotProps
       } = props,
       other = _objectWithoutPropertiesLoose(props, _excluded$9);
     const ownerState = props;
     const classes = useUtilityClasses$7(ownerState);
-    const MenuItemComponent = SelectProps.native ? 'option' : TablePaginationMenuItem;
+    const selectProps = (_slotProps$select = slotProps == null ? void 0 : slotProps.select) != null ? _slotProps$select : SelectProps;
+    const MenuItemComponent = selectProps.native ? 'option' : TablePaginationMenuItem;
     let colSpan;
     if (component === TableCell$1 || component === 'td') {
       colSpan = colSpanProp || 1000; // col-span over everything
     }
 
-    const selectId = useId(SelectProps.id);
-    const labelId = useId(SelectProps.labelId);
+    const selectId = useId(selectProps.id);
+    const labelId = useId(selectProps.labelId);
     const getLabelDisplayedRowsTo = () => {
       if (count === -1) {
         return (page + 1) * rowsPerPage;
@@ -47540,21 +47577,22 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
           children: labelRowsPerPage
         }), rowsPerPageOptions.length > 1 && /*#__PURE__*/jsxRuntime_1(TablePaginationSelect, _extends({
           variant: "standard"
-        }, !SelectProps.variant && {
+        }, !selectProps.variant && {
           input: _InputBase || (_InputBase = /*#__PURE__*/jsxRuntime_1(InputBase$1, {}))
         }, {
           value: rowsPerPage,
           onChange: onRowsPerPageChange,
           id: selectId,
           labelId: labelId
-        }, SelectProps, {
-          classes: _extends({}, SelectProps.classes, {
+        }, selectProps, {
+          classes: _extends({}, selectProps.classes, {
             // TODO v5 remove `classes.input`
-            root: clsx(classes.input, classes.selectRoot, (SelectProps.classes || {}).root),
-            select: clsx(classes.select, (SelectProps.classes || {}).select),
+            root: clsx(classes.input, classes.selectRoot, (selectProps.classes || {}).root),
+            select: clsx(classes.select, (selectProps.classes || {}).select),
             // TODO v5 remove `selectIcon`
-            icon: clsx(classes.selectIcon, (SelectProps.classes || {}).icon)
+            icon: clsx(classes.selectIcon, (selectProps.classes || {}).icon)
           }),
+          disabled: disabled,
           children: rowsPerPageOptions.map(rowsPerPageOption => /*#__PURE__*/React.createElement(MenuItemComponent, _extends({}, !isHostComponent(MenuItemComponent) && {
             ownerState
           }, {
@@ -47580,7 +47618,9 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
           rowsPerPage: rowsPerPage,
           showFirstButton: showFirstButton,
           showLastButton: showLastButton,
-          getItemAriaLabel: getItemAriaLabel
+          slotProps: slotProps == null ? void 0 : slotProps.actions,
+          getItemAriaLabel: getItemAriaLabel,
+          disabled: disabled
         })]
       })
     }));
@@ -47598,6 +47638,9 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     ActionsComponent: PropTypes.elementType,
     /**
      * Props applied to the back arrow [`IconButton`](/material-ui/api/icon-button/) component.
+     *
+     * This prop is an alias for `slotProps.actions.previousButton` and will be overriden by it if both are used.
+     * @deprecated Use `slotProps.actions.previousButton` instead.
      */
     backIconButtonProps: PropTypes.object,
     /**
@@ -47623,6 +47666,11 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
      * To enable server side pagination for an unknown number of items, provide -1.
      */
     count: integerPropType.isRequired,
+    /**
+     * If `true`, the component is disabled.
+     * @default false
+     */
+    disabled: PropTypes.bool,
     /**
      * Accepts a function which returns a string value that provides a user-friendly name for the current page.
      * This is important for screen reader users.
@@ -47654,6 +47702,9 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     labelRowsPerPage: PropTypes.node,
     /**
      * Props applied to the next arrow [`IconButton`](/material-ui/api/icon-button/) element.
+     *
+     * This prop is an alias for `slotProps.actions.nextButton` and will be overriden by it if both are used.
+     * @deprecated Use `slotProps.actions.nextButton` instead.
      */
     nextIconButtonProps: PropTypes.object,
     /**
@@ -47705,6 +47756,10 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     })]).isRequired),
     /**
      * Props applied to the rows per page [`Select`](/material-ui/api/select/) element.
+     *
+     * This prop is an alias for `slotProps.select` and will be overriden by it if both are used.
+     * @deprecated Use `slotProps.select` instead.
+     *
      * @default {}
      */
     SelectProps: PropTypes.object,
@@ -47718,6 +47773,19 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
      * @default false
      */
     showLastButton: PropTypes.bool,
+    /**
+     * The props used for each slot inside the TablePagination.
+     * @default {}
+     */
+    slotProps: PropTypes.shape({
+      actions: PropTypes.shape({
+        firstButton: PropTypes.object,
+        lastButton: PropTypes.object,
+        nextButton: PropTypes.object,
+        previousButton: PropTypes.object
+      }),
+      select: PropTypes.object
+    }),
     /**
      * The system prop that allows defining system overrides as well as additional CSS styles.
      */