@mui/material 5.4.2 → 5.5.0

package/locale/index.d.ts

@@ -1,68 +1,70 @@
-import { ComponentsPropsList } from '../styles/props';
-export interface Localization {
-    components?: {
-        MuiAlert?: {
-            defaultProps: Pick<ComponentsPropsList['MuiAlert'], 'closeText'>;
-        };
-        MuiBreadcrumbs?: {
-            defaultProps: Pick<ComponentsPropsList['MuiBreadcrumbs'], 'expandText'>;
-        };
-        MuiTablePagination?: {
-            defaultProps: Pick<ComponentsPropsList['MuiTablePagination'], 'labelRowsPerPage' | 'labelDisplayedRows' | 'getItemAriaLabel'>;
-        };
-        MuiRating?: {
-            defaultProps: Pick<ComponentsPropsList['MuiRating'], 'emptyLabelText' | 'getLabelText'>;
-        };
-        MuiAutocomplete?: {
-            defaultProps: Pick<ComponentsPropsList['MuiAutocomplete'], 'clearText' | 'closeText' | 'loadingText' | 'noOptionsText' | 'openText'>;
-        };
-        MuiPagination?: {
-            defaultProps: Pick<ComponentsPropsList['MuiPagination'], 'aria-label' | 'getItemAriaLabel'>;
-        };
-    };
-}
-export declare const amET: Localization;
-export declare const arEG: Localization;
-export declare const arSD: Localization;
-export declare const azAZ: Localization;
-export declare const bnBD: Localization;
-export declare const bgBG: Localization;
-export declare const caES: Localization;
-export declare const csCZ: Localization;
-export declare const daDK: Localization;
-export declare const deDE: Localization;
-export declare const elGR: Localization;
-export declare const enUS: Localization;
-export declare const esES: Localization;
-export declare const etEE: Localization;
-export declare const faIR: Localization;
-export declare const fiFI: Localization;
-export declare const frFR: Localization;
-export declare const heIL: Localization;
-export declare const hiIN: Localization;
-export declare const huHU: Localization;
-export declare const hyAM: Localization;
-export declare const idID: Localization;
-export declare const isIS: Localization;
-export declare const itIT: Localization;
-export declare const jaJP: Localization;
-export declare const khKH: Localization;
-export declare const koKR: Localization;
-export declare const kzKZ: Localization;
-export declare const nbNO: Localization;
-export declare const nlNL: Localization;
-export declare const plPL: Localization;
-export declare const ptBR: Localization;
-export declare const ptPT: Localization;
-export declare const roRO: Localization;
-export declare const ruRU: Localization;
-export declare const siLK: Localization;
-export declare const skSK: Localization;
-export declare const svSE: Localization;
-export declare const thTH: Localization;
-export declare const trTR: Localization;
-export declare const ukUA: Localization;
-export declare const viVN: Localization;
-export declare const zhCN: Localization;
-export declare const zhHK: Localization;
-export declare const zhTW: Localization;
+import { ComponentsPropsList } from '../styles/props';
+export interface Localization {
+    components?: {
+        MuiAlert?: {
+            defaultProps: Pick<ComponentsPropsList['MuiAlert'], 'closeText'>;
+        };
+        MuiBreadcrumbs?: {
+            defaultProps: Pick<ComponentsPropsList['MuiBreadcrumbs'], 'expandText'>;
+        };
+        MuiTablePagination?: {
+            defaultProps: Pick<ComponentsPropsList['MuiTablePagination'], 'labelRowsPerPage' | 'labelDisplayedRows' | 'getItemAriaLabel'>;
+        };
+        MuiRating?: {
+            defaultProps: Pick<ComponentsPropsList['MuiRating'], 'emptyLabelText' | 'getLabelText'>;
+        };
+        MuiAutocomplete?: {
+            defaultProps: Pick<ComponentsPropsList['MuiAutocomplete'], 'clearText' | 'closeText' | 'loadingText' | 'noOptionsText' | 'openText'>;
+        };
+        MuiPagination?: {
+            defaultProps: Pick<ComponentsPropsList['MuiPagination'], 'aria-label' | 'getItemAriaLabel'>;
+        };
+    };
+}
+export declare const amET: Localization;
+export declare const arEG: Localization;
+export declare const arSD: Localization;
+export declare const azAZ: Localization;
+export declare const bnBD: Localization;
+export declare const bgBG: Localization;
+export declare const caES: Localization;
+export declare const csCZ: Localization;
+export declare const daDK: Localization;
+export declare const deDE: Localization;
+export declare const elGR: Localization;
+export declare const enUS: Localization;
+export declare const esES: Localization;
+export declare const etEE: Localization;
+export declare const faIR: Localization;
+export declare const fiFI: Localization;
+export declare const frFR: Localization;
+export declare const heIL: Localization;
+export declare const hiIN: Localization;
+export declare const hrHR: Localization;
+export declare const huHU: Localization;
+export declare const hyAM: Localization;
+export declare const idID: Localization;
+export declare const isIS: Localization;
+export declare const itIT: Localization;
+export declare const jaJP: Localization;
+export declare const khKH: Localization;
+export declare const koKR: Localization;
+export declare const kzKZ: Localization;
+export declare const nbNO: Localization;
+export declare const nlNL: Localization;
+export declare const plPL: Localization;
+export declare const ptBR: Localization;
+export declare const ptPT: Localization;
+export declare const roRO: Localization;
+export declare const srRS: Localization;
+export declare const ruRU: Localization;
+export declare const siLK: Localization;
+export declare const skSK: Localization;
+export declare const svSE: Localization;
+export declare const thTH: Localization;
+export declare const trTR: Localization;
+export declare const ukUA: Localization;
+export declare const viVN: Localization;
+export declare const zhCN: Localization;
+export declare const zhHK: Localization;
+export declare const zhTW: Localization;

package/locale/index.js

@@ -1500,6 +1500,96 @@ export const hiIN = {
       }
     }
   }
+}; // Croatian - Hrvatski
+
+export const hrHR = {
+  components: {
+    MuiBreadcrumbs: {
+      defaultProps: {
+        expandText: 'Pokaži putanju'
+      }
+    },
+    MuiTablePagination: {
+      defaultProps: {
+        getItemAriaLabel: type => {
+          if (type === 'first') {
+            return 'Idi na prvu stranicu';
+          }
+
+          if (type === 'last') {
+            return 'Idi na posljednju stranicu';
+          }
+
+          if (type === 'next') {
+            return 'Idi na sljedeću stranicu';
+          } // if (type === 'previous') {
+
+
+          return 'Idi na prethodnu stranicu';
+        },
+        labelRowsPerPage: 'Redova po stranici:',
+        labelDisplayedRows: ({
+          from,
+          to,
+          count
+        }) => `${from}–${to} od ${count !== -1 ? count : `više nego ${to}`}`
+      }
+    },
+    MuiRating: {
+      defaultProps: {
+        getLabelText: value => {
+          const lastDigit = value % 10;
+          const lastTwoDigits = value % 100;
+
+          if ([2, 3, 4].includes(lastDigit) && ![12, 13, 14].includes(lastTwoDigits)) {
+            return 'Zvijezde';
+          }
+
+          return 'Zvijezda';
+        },
+        emptyLabelText: 'Prazno'
+      }
+    },
+    MuiAutocomplete: {
+      defaultProps: {
+        clearText: 'Briši',
+        closeText: 'Zatvori',
+        loadingText: 'Učitavanje…',
+        noOptionsText: 'Nema opcija',
+        openText: 'Otvori'
+      }
+    },
+    MuiAlert: {
+      defaultProps: {
+        closeText: 'Zatvori'
+      }
+    },
+    MuiPagination: {
+      defaultProps: {
+        'aria-label': 'Navigacija po stranicama',
+        getItemAriaLabel: (type, page, selected) => {
+          if (type === 'page') {
+            return `${selected ? '' : 'Idi na '}stranicu ${page}`;
+          }
+
+          if (type === 'first') {
+            return 'Idi na prvu stranicu';
+          }
+
+          if (type === 'last') {
+            return 'Idi na zadnju stranicu';
+          }
+
+          if (type === 'next') {
+            return 'Idi na sljedeću stranicu';
+          } // if (type === 'previous') {
+
+
+          return 'Idi na prethodnu stranicu';
+        }
+      }
+    }
+  }
 };
 export const huHU = {
   components: {
@@ -1813,9 +1903,12 @@ export const itIT = {
 
           return 'Vai alla pagina precedente';
         },
-        labelRowsPerPage: 'Righe per pagina:' // labelDisplayedRows: ({ from, to, count }) =>
-        //   `${from}–${to} di ${count !== -1 ? count : `more than ${to}`}`,
-
+        labelRowsPerPage: 'Righe per pagina:',
+        labelDisplayedRows: ({
+          from,
+          to,
+          count
+        }) => `${from}–${to} di ${count !== -1 ? count : `più di ${to}`}`
       }
     },
     MuiRating: {
@@ -2374,9 +2467,12 @@ export const plPL = {
 
           return 'Przejdź do poprzedniej strony';
         },
-        labelRowsPerPage: 'Wierszy na stronę:' // labelDisplayedRows: ({ from, to, count }) =>
-        //   `${from}–${to} z ${count !== -1 ? count : `more than ${to}`}`,
-
+        labelRowsPerPage: 'Wierszy na stronę:',
+        labelDisplayedRows: ({
+          from,
+          to,
+          count
+        }) => `${from}–${to} z ${count !== -1 ? count : `ponad ${to}`}`
       }
     },
     MuiRating: {
@@ -2673,6 +2769,96 @@ export const roRO = {
       }
     }
   }
+}; // Serbian - Srpski
+
+export const srRS = {
+  components: {
+    MuiBreadcrumbs: {
+      defaultProps: {
+        expandText: 'Pokaži putanju'
+      }
+    },
+    MuiTablePagination: {
+      defaultProps: {
+        getItemAriaLabel: type => {
+          if (type === 'first') {
+            return 'Idi na prvu stranicu';
+          }
+
+          if (type === 'last') {
+            return 'Idi na poslednju stranicu';
+          }
+
+          if (type === 'next') {
+            return 'Idi na sledeću stranicu';
+          } // if (type === 'previous') {
+
+
+          return 'Idi na prethodnu stranicu';
+        },
+        labelRowsPerPage: 'Redova po stranici:',
+        labelDisplayedRows: ({
+          from,
+          to,
+          count
+        }) => `${from}–${to} od ${count !== -1 ? count : `više nego ${to}`}`
+      }
+    },
+    MuiRating: {
+      defaultProps: {
+        getLabelText: value => {
+          const lastDigit = value % 10;
+          const lastTwoDigits = value % 100;
+
+          if ([2, 3, 4].includes(lastDigit) && ![12, 13, 14].includes(lastTwoDigits)) {
+            return 'Zvezde';
+          }
+
+          return 'Zvezda';
+        },
+        emptyLabelText: 'Prazno'
+      }
+    },
+    MuiAutocomplete: {
+      defaultProps: {
+        clearText: 'Briši',
+        closeText: 'Zatvori',
+        loadingText: 'Učitavanje…',
+        noOptionsText: 'Nema opcija',
+        openText: 'Otvori'
+      }
+    },
+    MuiAlert: {
+      defaultProps: {
+        closeText: 'Zatvori'
+      }
+    },
+    MuiPagination: {
+      defaultProps: {
+        'aria-label': 'Navigacija po stranicama',
+        getItemAriaLabel: (type, page, selected) => {
+          if (type === 'page') {
+            return `${selected ? '' : 'Idi na '}stranicu ${page}`;
+          }
+
+          if (type === 'first') {
+            return 'Idi na prvu stranicu';
+          }
+
+          if (type === 'last') {
+            return 'Idi na zadnju stranicu';
+          }
+
+          if (type === 'next') {
+            return 'Idi na sledeću stranicu';
+          } // if (type === 'previous') {
+
+
+          return 'Idi na prethodnu stranicu';
+        }
+      }
+    }
+  }
 };
 export const ruRU = {
   components: {

package/modern/AvatarGroup/AvatarGroup.js

@@ -121,11 +121,13 @@ const AvatarGroup = /*#__PURE__*/React.forwardRef(function AvatarGroup(inProps,
         marginLeft
       }, componentsProps.additionalAvatar?.style),
       children: ["+", extraAvatars]
-    })) : null, children.slice(0, maxAvatars).reverse().map(child => {
+    })) : null, children.slice(0, maxAvatars).reverse().map((child, index) => {
       return /*#__PURE__*/React.cloneElement(child, {
         className: clsx(child.props.className, classes.avatar),
         style: _extends({
-          marginLeft
+          // Consistent with "&:last-child" styling for the default spacing,
+          // we do not apply custom marginLeft spacing on the last child
+          marginLeft: index === maxAvatars - 1 ? undefined : marginLeft
         }, child.props.style),
         variant: child.props.variant || variant
       });

package/modern/Box/Box.js

@@ -1,5 +1,5 @@
 import { createBox } from '@mui/system';
-import { unstable_ClassNameGenerator as ClassNameGenerator } from '../utils';
+import { unstable_ClassNameGenerator as ClassNameGenerator } from '../className';
 import { createTheme } from '../styles';
 const defaultTheme = createTheme();
 /**

package/modern/ButtonBase/ButtonBase.js

@@ -529,7 +529,7 @@ process.env.NODE_ENV !== "production" ? ButtonBase.propTypes
   TouchRippleProps: PropTypes.object,
 
   /**
-   * A ref that points to the `TouchRippple` element.
+   * A ref that points to the `TouchRipple` element.
    */
   touchRippleRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
     current: PropTypes.shape({

package/modern/Chip/Chip.js

@@ -79,6 +79,7 @@ const ChipRoot = styled('div', {
 }) => {
   const deleteIconColor = alpha(theme.palette.text.primary, 0.26);
   return _extends({
+    maxWidth: '100%',
     fontFamily: theme.typography.fontFamily,
     fontSize: theme.typography.pxToRem(13),
     display: 'inline-flex',

package/modern/Dialog/Dialog.js

@@ -9,13 +9,13 @@ import { unstable_useId as useId } from '@mui/utils';
 import capitalize from '../utils/capitalize';
 import Modal from '../Modal';
 import Fade from '../Fade';
-import { duration } from '../styles/createTransitions';
 import Paper from '../Paper';
 import useThemeProps from '../styles/useThemeProps';
 import styled from '../styles/styled';
 import dialogClasses, { getDialogUtilityClass } from './dialogClasses';
 import DialogContext from './DialogContext';
 import Backdrop from '../Backdrop';
+import useTheme from '../styles/useTheme';
 import { jsx as _jsx } from "react/jsx-runtime";
 const DialogBackdrop = styled(Backdrop, {
   name: 'MuiDialog',
@@ -146,10 +146,6 @@ const DialogPaper = styled(Paper, {
     maxWidth: '100%'
   }
 }));
-const defaultTransitionDuration = {
-  enter: duration.enteringScreen,
-  exit: duration.leavingScreen
-};
 /**
  * Dialogs are overlaid modal paper based components with a backdrop.
  */
@@ -159,6 +155,11 @@ const Dialog = /*#__PURE__*/React.forwardRef(function Dialog(inProps, ref) {
     props: inProps,
     name: 'MuiDialog'
   });
+  const theme = useTheme();
+  const defaultTransitionDuration = {
+    enter: theme.transitions.duration.enteringScreen,
+    exit: theme.transitions.duration.leavingScreen
+  };
 
   const {
     'aria-describedby': ariaDescribedby,
@@ -399,7 +400,10 @@ process.env.NODE_ENV !== "production" ? Dialog.propTypes
   /**
    * The duration for the transition, in milliseconds.
    * You may specify a single timeout for all transitions, or individually with an object.
-   * @default { enter: duration.enteringScreen, exit: duration.leavingScreen }
+   * @default {
+   *   enter: theme.transitions.duration.enteringScreen,
+   *   exit: theme.transitions.duration.leavingScreen,
+   * }
    */
   transitionDuration: PropTypes.oneOfType([PropTypes.number, PropTypes.shape({
     appear: PropTypes.number,

package/modern/Drawer/Drawer.js

@@ -11,7 +11,6 @@ import Modal from '../Modal';
 import Slide from '../Slide';
 import Paper from '../Paper';
 import capitalize from '../utils/capitalize';
-import { duration } from '../styles/createTransitions';
 import useTheme from '../styles/useTheme';
 import useThemeProps from '../styles/useThemeProps';
 import styled, { rootShouldForwardProp } from '../styles/styled';
@@ -124,10 +123,6 @@ export function isHorizontal(anchor) {
 export function getAnchor(theme, anchor) {
   return theme.direction === 'rtl' && isHorizontal(anchor) ? oppositeDirection[anchor] : anchor;
 }
-const defaultTransitionDuration = {
-  enter: duration.enteringScreen,
-  exit: duration.leavingScreen
-};
 /**
  * The props of the [Modal](/api/modal/) component are available
  * when `variant="temporary"` is set.
@@ -138,6 +133,11 @@ const Drawer = /*#__PURE__*/React.forwardRef(function Drawer(inProps, ref) {
     props: inProps,
     name: 'MuiDrawer'
   });
+  const theme = useTheme();
+  const defaultTransitionDuration = {
+    enter: theme.transitions.duration.enteringScreen,
+    exit: theme.transitions.duration.leavingScreen
+  };
 
   const {
     anchor: anchorProp = 'left',
@@ -159,12 +159,11 @@ const Drawer = /*#__PURE__*/React.forwardRef(function Drawer(inProps, ref) {
     variant = 'temporary'
   } = props,
         ModalProps = _objectWithoutPropertiesLoose(props.ModalProps, _excluded),
-        other = _objectWithoutPropertiesLoose(props, _excluded2);
-
-  const theme = useTheme(); // Let's assume that the Drawer will always be rendered on user space.
+        other = _objectWithoutPropertiesLoose(props, _excluded2); // Let's assume that the Drawer will always be rendered on user space.
   // We use this state is order to skip the appear transition during the
   // initial mount of the component.
 
+
   const mounted = React.useRef(false);
   React.useEffect(() => {
     mounted.current = true;
@@ -318,7 +317,10 @@ process.env.NODE_ENV !== "production" ? Drawer.propTypes
   /**
    * The duration for the transition, in milliseconds.
    * You may specify a single timeout for all transitions, or individually with an object.
-   * @default { enter: duration.enteringScreen, exit: duration.leavingScreen }
+   * @default {
+   *   enter: theme.transitions.duration.enteringScreen,
+   *   exit: theme.transitions.duration.leavingScreen,
+   * }
    */
   transitionDuration: PropTypes.oneOfType([PropTypes.number, PropTypes.shape({
     appear: PropTypes.number,

package/modern/Fade/Fade.js

@@ -5,7 +5,6 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import { Transition } from 'react-transition-group';
 import { elementAcceptingRef } from '@mui/utils';
-import { duration } from '../styles/createTransitions';
 import useTheme from '../styles/useTheme';
 import { reflow, getTransitionProps } from '../transitions/utils';
 import useForkRef from '../utils/useForkRef';
@@ -18,16 +17,18 @@ const styles = {
     opacity: 1
   }
 };
-const defaultTimeout = {
-  enter: duration.enteringScreen,
-  exit: duration.leavingScreen
-};
 /**
  * The Fade transition is used by the [Modal](/components/modal/) component.
  * It uses [react-transition-group](https://github.com/reactjs/react-transition-group) internally.
  */
 
 const Fade = /*#__PURE__*/React.forwardRef(function Fade(props, ref) {
+  const theme = useTheme();
+  const defaultTimeout = {
+    enter: theme.transitions.duration.enteringScreen,
+    exit: theme.transitions.duration.leavingScreen
+  };
+
   const {
     addEndListener,
     appear = true,
@@ -47,7 +48,6 @@ const Fade = /*#__PURE__*/React.forwardRef(function Fade(props, ref) {
   } = props,
         other = _objectWithoutPropertiesLoose(props, _excluded);
 
-  const theme = useTheme();
   const enableStrictModeCompat = true;
   const nodeRef = React.useRef(null);
   const foreignRef = useForkRef(children.ref, ref);
@@ -213,8 +213,8 @@ process.env.NODE_ENV !== "production" ? Fade.propTypes
    * The duration for the transition, in milliseconds.
    * You may specify a single timeout for all transitions, or individually with an object.
    * @default {
-   *   enter: duration.enteringScreen,
-   *   exit: duration.leavingScreen,
+   *   enter: theme.transitions.duration.enteringScreen,
+   *   exit: theme.transitions.duration.leavingScreen,
    * }
    */
   timeout: PropTypes.oneOfType([PropTypes.number, PropTypes.shape({

package/modern/FilledInput/filledInputClasses.js

@@ -1,6 +1,10 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
 import { generateUtilityClasses, generateUtilityClass } from '@mui/base';
+import { inputBaseClasses } from '../InputBase';
 export function getFilledInputUtilityClass(slot) {
   return generateUtilityClass('MuiFilledInput', slot);
 }
-const filledInputClasses = generateUtilityClasses('MuiFilledInput', ['root', 'colorSecondary', 'underline', 'focused', 'disabled', 'adornedStart', 'adornedEnd', 'error', 'sizeSmall', 'multiline', 'hiddenLabel', 'input', 'inputSizeSmall', 'inputHiddenLabel', 'inputMultiline', 'inputAdornedStart', 'inputAdornedEnd']);
+
+const filledInputClasses = _extends({}, inputBaseClasses, generateUtilityClasses('MuiFilledInput', ['root', 'underline', 'input']));
+
 export default filledInputClasses;

package/modern/Input/inputClasses.js

@@ -1,6 +1,10 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
 import { generateUtilityClasses, generateUtilityClass } from '@mui/base';
+import { inputBaseClasses } from '../InputBase';
 export function getInputUtilityClass(slot) {
   return generateUtilityClass('MuiInput', slot);
 }
-const inputClasses = generateUtilityClasses('MuiInput', ['root', 'formControl', 'focused', 'disabled', 'colorSecondary', 'underline', 'error', 'sizeSmall', 'multiline', 'fullWidth', 'input', 'inputSizeSmall', 'inputMultiline', 'inputTypeSearch']);
+
+const inputClasses = _extends({}, inputBaseClasses, generateUtilityClasses('MuiInput', ['root', 'underline', 'input']));
+
 export default inputClasses;

package/modern/OutlinedInput/NotchedOutline.js

@@ -28,7 +28,9 @@ const NotchedOutlineLegend = styled('legend')(({
   ownerState,
   theme
 }) => _extends({
-  float: 'unset'
+  float: 'unset',
+  // Fix conflict with bootstrap
+  overflow: 'hidden'
 }, !ownerState.withLabel && {
   padding: 0,
   lineHeight: '11px',

package/modern/OutlinedInput/outlinedInputClasses.js

@@ -1,6 +1,10 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
 import { generateUtilityClasses, generateUtilityClass } from '@mui/base';
+import { inputBaseClasses } from '../InputBase';
 export function getOutlinedInputUtilityClass(slot) {
   return generateUtilityClass('MuiOutlinedInput', slot);
 }
-const outlinedInputClasses = generateUtilityClasses('MuiOutlinedInput', ['root', 'colorSecondary', 'focused', 'disabled', 'adornedStart', 'adornedEnd', 'error', 'sizeSmall', 'multiline', 'notchedOutline', 'input', 'inputSizeSmall', 'inputMultiline', 'inputAdornedStart', 'inputAdornedEnd']);
+
+const outlinedInputClasses = _extends({}, inputBaseClasses, generateUtilityClasses('MuiOutlinedInput', ['root', 'notchedOutline', 'input']));
+
 export default outlinedInputClasses;

package/modern/Popper/Popper.js

@@ -90,7 +90,7 @@ process.env.NODE_ENV !== "production" ? Popper.propTypes
     effect: PropTypes.func,
     enabled: PropTypes.bool,
     fn: PropTypes.func,
-    name: PropTypes.any.isRequired,
+    name: PropTypes.any,
     options: PropTypes.object,
     phase: PropTypes.oneOf(['afterMain', 'afterRead', 'afterWrite', 'beforeMain', 'beforeRead', 'beforeWrite', 'main', 'read', 'write']),
     requires: PropTypes.arrayOf(PropTypes.string),