@mui/material 5.2.6 → 5.3.1

package/locale/index.js

@@ -1206,9 +1206,12 @@ export const fiFI = {
 
           return 'Mene edelliselle sivulle';
         },
-        labelRowsPerPage: 'Rivejä per sivu:' // labelDisplayedRows: ({ from, to, count }) =>
-        //   `${from}–${to} / ${count !== -1 ? count : `more than ${to}`}`,
-
+        labelRowsPerPage: 'Rivejä per sivu:',
+        labelDisplayedRows: ({
+          from,
+          to,
+          count
+        }) => `${from}–${to} / ${count !== -1 ? count : `enemmän kuin ${to}`}`
       }
     },
     MuiRating: {
@@ -3266,26 +3269,29 @@ export const ukUA = {
 };
 export const viVN = {
   components: {
-    // MuiBreadcrumbs: {
-    //   defaultProps: {
-    //     expandText: 'Show path',
-    //   },
-    // },
+    MuiBreadcrumbs: {
+      defaultProps: {
+        expandText: 'Mở ra'
+      }
+    },
     MuiTablePagination: {
       defaultProps: {
-        // getItemAriaLabel: (type) => {
-        //   if (type === 'first') {
-        //     return 'Go to first page';
-        //   }
-        //   if (type === 'last') {
-        //     return 'Go to last page';
-        //   }
-        //   if (type === 'next') {
-        //     return 'Go to next page';
-        //   }
-        //   // if (type === 'previous') {
-        //   return 'Go to previous page';
-        // },
+        getItemAriaLabel: type => {
+          if (type === 'first') {
+            return 'Tới trang đầu tiên';
+          }
+
+          if (type === 'last') {
+            return 'Tới trang cuối cùng';
+          }
+
+          if (type === 'next') {
+            return 'Tới trang tiếp theo';
+          } // if (type === 'previous') {
+
+
+          return 'Về trang trước đó';
+        },
         labelRowsPerPage: 'Số hàng mỗi trang:',
         labelDisplayedRows: ({
           from,
@@ -3297,7 +3303,7 @@ export const viVN = {
     MuiRating: {
       defaultProps: {
         getLabelText: value => `${value} sao`,
-        emptyLabelText: 'Trống'
+        emptyLabelText: 'Không có dữ liệu'
       }
     },
     MuiAutocomplete: {
@@ -3305,7 +3311,7 @@ export const viVN = {
         clearText: 'Xóa',
         closeText: 'Đóng',
         loadingText: 'Đang tải…',
-        noOptionsText: 'Không có lựa chọn',
+        noOptionsText: 'Không có lựa chọn nào',
         openText: 'Mở'
       }
     },
@@ -3313,28 +3319,32 @@ export const viVN = {
       defaultProps: {
         closeText: 'Đóng'
       }
-    } // MuiPagination: {
-    //   defaultProps: {
-    //     'aria-label': 'Pagination navigation',
-    //     getItemAriaLabel: (type, page, selected) => {
-    //       if (type === 'page') {
-    //         return `${selected ? '' : 'Go to '}page ${page}`;
-    //       }
-    //       if (type === 'first') {
-    //         return 'Go to first page';
-    //       }
-    //       if (type === 'last') {
-    //         return 'Go to last page';
-    //       }
-    //       if (type === 'next') {
-    //         return 'Go to next page';
-    //       }
-    //       // if (type === 'previous') {
-    //       return 'Go to previous page';
-    //     },
-    //   },
-    // },
+    },
+    MuiPagination: {
+      defaultProps: {
+        'aria-label': 'Thanh điều khiển trang',
+        getItemAriaLabel: (type, page, selected) => {
+          if (type === 'page') {
+            return `${selected ? '' : 'Tới '}trang ${page}`;
+          }
+
+          if (type === 'first') {
+            return 'Tới trang đầu tiên';
+          }
 
+          if (type === 'last') {
+            return 'Tới trang cuối cùng';
+          }
+
+          if (type === 'next') {
+            return 'Tới trang tiếp theo';
+          } // if (type === 'previous') {
+
+
+          return 'Về trang trước đó';
+        }
+      }
+    }
   }
 };
 export const zhCN = {

package/modern/Autocomplete/Autocomplete.js

@@ -564,10 +564,11 @@ const Autocomplete = /*#__PURE__*/React.forwardRef(function Autocomplete(inProps
       role: "presentation",
       anchorEl: anchorEl,
       open: true,
-      children: /*#__PURE__*/_jsxs(AutocompletePaper, {
-        as: PaperComponent,
-        className: classes.paper,
+      children: /*#__PURE__*/_jsxs(AutocompletePaper, _extends({
         ownerState: ownerState,
+        as: PaperComponent
+      }, componentsProps.paper, {
+        className: clsx(classes.paper, componentsProps.paper?.className),
         children: [loading && groupedOptions.length === 0 ? /*#__PURE__*/_jsx(AutocompleteLoading, {
           className: classes.loading,
           ownerState: ownerState,
@@ -598,7 +599,7 @@ const Autocomplete = /*#__PURE__*/React.forwardRef(function Autocomplete(inProps
             return renderListOption(option, index);
           })
         })) : null]
-      })
+      }))
     }) : null]
   });
 });
@@ -668,7 +669,7 @@ process.env.NODE_ENV !== "production" ? Autocomplete.propTypes
    * If `true`, the input's text is cleared on blur if no value is selected.
    *
    * Set to `true` if you want to help the user enter a new value.
-   * Set to `false` if you want to help the user resume his search.
+   * Set to `false` if you want to help the user resume their search.
    * @default !props.freeSolo
    */
   clearOnBlur: PropTypes.bool,
@@ -699,7 +700,10 @@ process.env.NODE_ENV !== "production" ? Autocomplete.propTypes
    * The props used for each slot inside.
    * @default {}
    */
-  componentsProps: PropTypes.object,
+  componentsProps: PropTypes.shape({
+    clearIndicator: PropTypes.object,
+    paper: PropTypes.object
+  }),
 
   /**
    * The default value. Use when the component is not controlled.

package/modern/Backdrop/Backdrop.js

@@ -124,7 +124,9 @@ process.env.NODE_ENV !== "production" ? Backdrop.propTypes
    * The props used for each slot inside the Backdrop.
    * @default {}
    */
-  componentsProps: PropTypes.object,
+  componentsProps: PropTypes.shape({
+    root: PropTypes.object
+  }),
 
   /**
    * If `true`, the backdrop is invisible.

package/modern/Badge/Badge.js

@@ -5,10 +5,11 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import { usePreviousProps } from '@mui/utils';
-import { generateUtilityClasses, isHostComponent } from '@mui/base';
+import { generateUtilityClasses } from '@mui/base';
 import BadgeUnstyled, { badgeUnstyledClasses, getBadgeUtilityClass } from '@mui/base/BadgeUnstyled';
 import styled from '../styles/styled';
 import useThemeProps from '../styles/useThemeProps';
+import shouldSpreadAdditionalProps from '../utils/shouldSpreadAdditionalProps';
 import capitalize from '../utils/capitalize';
 import { jsx as _jsx } from "react/jsx-runtime";
 export const badgeClasses = _extends({}, badgeUnstyledClasses, generateUtilityClasses('MuiBadge', ['colorError', 'colorInfo', 'colorPrimary', 'colorSecondary', 'colorSuccess', 'colorWarning', 'overlapRectangular', 'overlapCircular', // TODO: v6 remove the overlap value from these class keys
@@ -152,11 +153,6 @@ const BadgeBadge = styled('span', {
     duration: theme.transitions.duration.leavingScreen
   })
 }));
-
-const shouldSpreadAdditionalProps = Slot => {
-  return !Slot || !isHostComponent(Slot);
-};
-
 const Badge = /*#__PURE__*/React.forwardRef(function Badge(inProps, ref) {
   const props = useThemeProps({
     props: inProps,
@@ -298,7 +294,10 @@ process.env.NODE_ENV !== "production" ? Badge.propTypes
    * The props used for each slot inside the Badge.
    * @default {}
    */
-  componentsProps: PropTypes.object,
+  componentsProps: PropTypes.shape({
+    badge: PropTypes.object,
+    root: PropTypes.object
+  }),
 
   /**
    * If `true`, the badge is invisible.

package/modern/FilledInput/FilledInput.js

@@ -257,7 +257,10 @@ process.env.NODE_ENV !== "production" ? FilledInput.propTypes
    * The props used for each slot inside the Input.
    * @default {}
    */
-  componentsProps: PropTypes.object,
+  componentsProps: PropTypes.shape({
+    input: PropTypes.object,
+    root: PropTypes.object
+  }),
 
   /**
    * The default value. Use when the component is not controlled.

package/modern/FormControlLabel/FormControlLabel.js

@@ -162,7 +162,9 @@ process.env.NODE_ENV !== "production" ? FormControlLabel.propTypes
    * The props used for each slot inside.
    * @default {}
    */
-  componentsProps: PropTypes.object,
+  componentsProps: PropTypes.shape({
+    typography: PropTypes.object
+  }),
 
   /**
    * A control element. For instance, it can be a `Radio`, a `Switch` or a `Checkbox`.

package/modern/Input/Input.js

@@ -192,7 +192,10 @@ process.env.NODE_ENV !== "production" ? Input.propTypes
    * The props used for each slot inside the Input.
    * @default {}
    */
-  componentsProps: PropTypes.object,
+  componentsProps: PropTypes.shape({
+    input: PropTypes.object,
+    root: PropTypes.object
+  }),
 
   /**
    * The default value. Use when the component is not controlled.

package/modern/InputBase/InputBase.js

@@ -552,7 +552,10 @@ process.env.NODE_ENV !== "production" ? InputBase.propTypes
    * The props used for each slot inside the Input.
    * @default {}
    */
-  componentsProps: PropTypes.object,
+  componentsProps: PropTypes.shape({
+    input: PropTypes.object,
+    root: PropTypes.object
+  }),
 
   /**
    * The default value. Use when the component is not controlled.

package/modern/InputLabel/InputLabel.js

@@ -82,6 +82,8 @@ const InputLabelRoot = styled(FormLabel, {
 }, ownerState.size === 'small' && {
   transform: 'translate(12px, 13px) scale(1)'
 }, ownerState.shrink && _extends({
+  userSelect: 'none',
+  pointerEvents: 'auto',
   transform: 'translate(12px, 7px) scale(0.75)',
   maxWidth: 'calc(133% - 24px)'
 }, ownerState.size === 'small' && {
@@ -95,6 +97,8 @@ const InputLabelRoot = styled(FormLabel, {
 }, ownerState.size === 'small' && {
   transform: 'translate(14px, 9px) scale(1)'
 }, ownerState.shrink && {
+  userSelect: 'none',
+  pointerEvents: 'auto',
   maxWidth: 'calc(133% - 24px)',
   transform: 'translate(14px, -9px) scale(0.75)'
 })));

package/modern/ListItem/ListItem.js

@@ -346,7 +346,9 @@ process.env.NODE_ENV !== "production" ? ListItem.propTypes
    * The props used for each slot inside the Input.
    * @default {}
    */
-  componentsProps: PropTypes.object,
+  componentsProps: PropTypes.shape({
+    root: PropTypes.object
+  }),
 
   /**
    * The container component used when a `ListItemSecondaryAction` is the last child.

package/modern/Modal/Modal.js

@@ -177,7 +177,9 @@ process.env.NODE_ENV !== "production" ? Modal.propTypes
    * The props used for each slot inside the Modal.
    * @default {}
    */
-  componentsProps: PropTypes.object,
+  componentsProps: PropTypes.shape({
+    root: PropTypes.object
+  }),
 
   /**
    * An HTML element or function that returns one.

package/modern/Select/Select.js

@@ -3,7 +3,7 @@ import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWith
 
 var _Input, _FilledInput;
 
-const _excluded = ["autoWidth", "children", "classes", "className", "displayEmpty", "IconComponent", "id", "input", "inputProps", "label", "labelId", "MenuProps", "multiple", "native", "onClose", "onOpen", "open", "renderValue", "SelectDisplayProps", "variant"];
+const _excluded = ["autoWidth", "children", "classes", "className", "defaultOpen", "displayEmpty", "IconComponent", "id", "input", "inputProps", "label", "labelId", "MenuProps", "multiple", "native", "onClose", "onOpen", "open", "renderValue", "SelectDisplayProps", "variant"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
@@ -38,6 +38,7 @@ const Select = /*#__PURE__*/React.forwardRef(function Select(inProps, ref) {
     children,
     classes: classesProp = {},
     className,
+    defaultOpen = false,
     displayEmpty = false,
     IconComponent = ArrowDropDownIcon,
     id,
@@ -94,6 +95,7 @@ const Select = /*#__PURE__*/React.forwardRef(function Select(inProps, ref) {
       id
     } : {
       autoWidth,
+      defaultOpen,
       displayEmpty,
       labelId,
       MenuProps,
@@ -148,6 +150,13 @@ process.env.NODE_ENV !== "production" ? Select.propTypes
    */
   className: PropTypes.string,
 
+  /**
+   * If `true`, the component is initially open. Use when the component open state is not controlled (i.e. the `open` prop is not defined).
+   * You can only use it when the `native` prop is `false` (default).
+   * @default false
+   */
+  defaultOpen: PropTypes.bool,
+
   /**
    * The default value. Use when the component is not controlled.
    */

package/modern/Select/SelectInput.js

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import { formatMuiErrorMessage as _formatMuiErrorMessage } from "@mui/utils";
-const _excluded = ["aria-describedby", "aria-label", "autoFocus", "autoWidth", "children", "className", "defaultValue", "disabled", "displayEmpty", "IconComponent", "inputRef", "labelId", "MenuProps", "multiple", "name", "onBlur", "onChange", "onClose", "onFocus", "onOpen", "open", "readOnly", "renderValue", "SelectDisplayProps", "tabIndex", "type", "value", "variant"];
+const _excluded = ["aria-describedby", "aria-label", "autoFocus", "autoWidth", "children", "className", "defaultOpen", "defaultValue", "disabled", "displayEmpty", "IconComponent", "inputRef", "labelId", "MenuProps", "multiple", "name", "onBlur", "onChange", "onClose", "onFocus", "onOpen", "open", "readOnly", "renderValue", "SelectDisplayProps", "tabIndex", "type", "value", "variant"];
 import * as React from 'react';
 import { isFragment } from 'react-is';
 import PropTypes from 'prop-types';
@@ -113,6 +113,7 @@ const SelectInput = /*#__PURE__*/React.forwardRef(function SelectInput(props, re
     autoWidth,
     children,
     className,
+    defaultOpen,
     defaultValue,
     disabled,
     displayEmpty,
@@ -142,6 +143,11 @@ const SelectInput = /*#__PURE__*/React.forwardRef(function SelectInput(props, re
     default: defaultValue,
     name: 'Select'
   });
+  const [openState, setOpenState] = useControlled({
+    controlled: openProp,
+    default: defaultOpen,
+    name: 'Select'
+  });
   const inputRef = React.useRef(null);
   const displayRef = React.useRef(null);
   const [displayNode, setDisplayNode] = React.useState(null);
@@ -149,7 +155,6 @@ const SelectInput = /*#__PURE__*/React.forwardRef(function SelectInput(props, re
     current: isOpenControlled
   } = React.useRef(openProp != null);
   const [menuMinWidthState, setMenuMinWidthState] = React.useState();
-  const [openState, setOpenState] = React.useState(false);
   const handleRef = useForkRef(ref, inputRefProp);
   const handleDisplayRef = React.useCallback(node => {
     displayRef.current = node;
@@ -164,7 +169,17 @@ const SelectInput = /*#__PURE__*/React.forwardRef(function SelectInput(props, re
     },
     node: inputRef.current,
     value
-  }), [value]);
+  }), [value]); // Resize menu on `defaultOpen` automatic toggle.
+
+  React.useEffect(() => {
+    if (defaultOpen && openState && displayNode && !isOpenControlled) {
+      setMenuMinWidthState(autoWidth ? null : displayNode.clientWidth);
+      displayRef.current.focus();
+    } // eslint-disable-next-line react-hooks/exhaustive-deps
+
+  }, [displayNode, autoWidth]); // `isOpenControlled` is ignored because the component should never switch between controlled and uncontrolled modes.
+  // `defaultOpen` and `openState` are ignored to avoid unnecessary callbacks.
+
   React.useEffect(() => {
     if (autoFocus) {
       displayRef.current.focus();
@@ -300,7 +315,7 @@ const SelectInput = /*#__PURE__*/React.forwardRef(function SelectInput(props, re
     }
   };
 
-  const open = displayNode !== null && (isOpenControlled ? openProp : openState);
+  const open = displayNode !== null && openState;
 
   const handleBlur = event => {
     // if open event.stopImmediatePropagation
@@ -559,6 +574,12 @@ process.env.NODE_ENV !== "production" ? SelectInput.propTypes = {
    */
   className: PropTypes.string,
 
+  /**
+   * If `true`, the component is toggled on mount. Use when the component open state is not controlled.
+   * You can only use it when the `native` prop is `false` (default).
+   */
+  defaultOpen: PropTypes.bool,
+
   /**
    * The default value. Use when the component is not controlled.
    */