@mui/material 5.4.1 → 5.4.4

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),

package/modern/Select/Select.js

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 
-var _Input, _FilledInput;
+var _StyledInput, _StyledFilledInput;
 
 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';
@@ -18,6 +18,7 @@ import FilledInput from '../FilledInput';
 import OutlinedInput from '../OutlinedInput';
 import useThemeProps from '../styles/useThemeProps';
 import useForkRef from '../utils/useForkRef';
+import styled, { rootShouldForwardProp } from '../styles/styled';
 import { jsx as _jsx } from "react/jsx-runtime";
 
 const useUtilityClasses = ownerState => {
@@ -27,6 +28,15 @@ const useUtilityClasses = ownerState => {
   return classes;
 };
 
+const styledRootConfig = {
+  name: 'MuiSelect',
+  overridesResolver: (props, styles) => styles.root,
+  shouldForwardProp: prop => rootShouldForwardProp(prop) && prop !== 'variant',
+  slot: 'Root'
+};
+const StyledInput = styled(Input, styledRootConfig)('');
+const StyledOutlinedInput = styled(OutlinedInput, styledRootConfig)('');
+const StyledFilledInput = styled(FilledInput, styledRootConfig)('');
 const Select = /*#__PURE__*/React.forwardRef(function Select(inProps, ref) {
   const props = useThemeProps({
     name: 'MuiSelect',
@@ -54,7 +64,7 @@ const Select = /*#__PURE__*/React.forwardRef(function Select(inProps, ref) {
     open,
     renderValue,
     SelectDisplayProps,
-    variant: variantProps = 'outlined'
+    variant: variantProp = 'outlined'
   } = props,
         other = _objectWithoutPropertiesLoose(props, _excluded);
 
@@ -65,16 +75,17 @@ const Select = /*#__PURE__*/React.forwardRef(function Select(inProps, ref) {
     muiFormControl,
     states: ['variant']
   });
-  const variant = fcs.variant || variantProps;
+  const variant = fcs.variant || variantProp;
   const InputComponent = input || {
-    standard: _Input || (_Input = /*#__PURE__*/_jsx(Input, {})),
-    outlined: /*#__PURE__*/_jsx(OutlinedInput, {
+    standard: _StyledInput || (_StyledInput = /*#__PURE__*/_jsx(StyledInput, {})),
+    outlined: /*#__PURE__*/_jsx(StyledOutlinedInput, {
       label: label
     }),
-    filled: _FilledInput || (_FilledInput = /*#__PURE__*/_jsx(FilledInput, {}))
+    filled: _StyledFilledInput || (_StyledFilledInput = /*#__PURE__*/_jsx(StyledFilledInput, {}))
   }[variant];
 
   const ownerState = _extends({}, props, {
+    variant,
     classes: classesProp
   });
 
@@ -113,7 +124,8 @@ const Select = /*#__PURE__*/React.forwardRef(function Select(inProps, ref) {
     notched: true
   } : {}, {
     ref: inputComponentRef,
-    className: clsx(InputComponent.props.className, className)
+    className: clsx(InputComponent.props.className, className),
+    variant
   }, other));
 });
 process.env.NODE_ENV !== "production" ? Select.propTypes

package/modern/Slide/Slide.js

@@ -8,7 +8,6 @@ import { elementAcceptingRef, HTMLElementType, chainPropTypes } from '@mui/utils
 import debounce from '../utils/debounce';
 import useForkRef from '../utils/useForkRef';
 import useTheme from '../styles/useTheme';
-import { duration, easing } from '../styles/createTransitions';
 import { reflow, getTransitionProps } from '../transitions/utils';
 import { ownerWindow } from '../utils'; // Translate the node so it can't be seen on the screen.
 // Later, we're going to translate the node back to its original location with `none`.
@@ -82,20 +81,22 @@ export function setTranslateValue(direction, node, containerProp) {
     node.style.transform = transform;
   }
 }
-const defaultEasing = {
-  enter: easing.easeOut,
-  exit: easing.sharp
-};
-const defaultTimeout = {
-  enter: duration.enteringScreen,
-  exit: duration.leavingScreen
-};
 /**
  * The Slide transition is used by the [Drawer](/components/drawers/) component.
  * It uses [react-transition-group](https://github.com/reactjs/react-transition-group) internally.
  */
 
 const Slide = /*#__PURE__*/React.forwardRef(function Slide(props, ref) {
+  const theme = useTheme();
+  const defaultEasing = {
+    enter: theme.transitions.easing.easeOut,
+    exit: theme.transitions.easing.sharp
+  };
+  const defaultTimeout = {
+    enter: theme.transitions.duration.enteringScreen,
+    exit: theme.transitions.duration.leavingScreen
+  };
+
   const {
     addEndListener,
     appear = true,
@@ -117,7 +118,6 @@ const Slide = /*#__PURE__*/React.forwardRef(function Slide(props, ref) {
   } = props,
         other = _objectWithoutPropertiesLoose(props, _excluded);
 
-  const theme = useTheme();
   const childrenRef = React.useRef(null);
   const handleRefIntermediary = useForkRef(children.ref, childrenRef);
   const handleRef = useForkRef(handleRefIntermediary, ref);
@@ -305,8 +305,8 @@ process.env.NODE_ENV !== "production" ? Slide.propTypes
    * The transition timing function.
    * You may specify a single easing or a object containing enter and exit values.
    * @default {
-   *   enter: easing.easeOut,
-   *   exit: easing.sharp,
+   *   enter: theme.transitions.easing.easeOut,
+   *   exit: theme.transitions.easing.sharp,
    * }
    */
   easing: PropTypes.oneOfType([PropTypes.shape({
@@ -358,8 +358,8 @@ process.env.NODE_ENV !== "production" ? Slide.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/Snackbar/Snackbar.js

@@ -10,7 +10,6 @@ import ClickAwayListener from '@mui/base/ClickAwayListener';
 import styled from '../styles/styled';
 import useTheme from '../styles/useTheme';
 import useThemeProps from '../styles/useThemeProps';
-import { duration } from '../styles/createTransitions';
 import useEventCallback from '../utils/useEventCallback';
 import capitalize from '../utils/capitalize';
 import Grow from '../Grow';
@@ -93,6 +92,11 @@ const Snackbar = /*#__PURE__*/React.forwardRef(function Snackbar(inProps, ref) {
     props: inProps,
     name: 'MuiSnackbar'
   });
+  const theme = useTheme();
+  const defaultTransitionDuration = {
+    enter: theme.transitions.duration.enteringScreen,
+    exit: theme.transitions.duration.leavingScreen
+  };
 
   const {
     action,
@@ -118,10 +122,7 @@ const Snackbar = /*#__PURE__*/React.forwardRef(function Snackbar(inProps, ref) {
     open,
     resumeHideDuration,
     TransitionComponent = Grow,
-    transitionDuration = {
-      enter: duration.enteringScreen,
-      exit: duration.leavingScreen
-    },
+    transitionDuration = defaultTransitionDuration,
     TransitionProps: {
       onEnter,
       onExited
@@ -130,7 +131,6 @@ const Snackbar = /*#__PURE__*/React.forwardRef(function Snackbar(inProps, ref) {
         TransitionProps = _objectWithoutPropertiesLoose(props.TransitionProps, _excluded),
         other = _objectWithoutPropertiesLoose(props, _excluded2);
 
-  const theme = useTheme();
   const isRtl = theme.direction === 'rtl';
 
   const ownerState = _extends({}, props, {
@@ -449,8 +449,8 @@ process.env.NODE_ENV !== "production" ? Snackbar.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,
    * }
    */
   transitionDuration: PropTypes.oneOfType([PropTypes.number, PropTypes.shape({

package/modern/SpeedDial/SpeedDial.js

@@ -10,7 +10,7 @@ import clsx from 'clsx';
 import { unstable_composeClasses as composeClasses } from '@mui/base';
 import styled from '../styles/styled';
 import useThemeProps from '../styles/useThemeProps';
-import { duration } from '../styles/createTransitions';
+import useTheme from '../styles/useTheme';
 import Zoom from '../Zoom';
 import Fab from '../Fab';
 import capitalize from '../utils/capitalize';
@@ -137,6 +137,11 @@ const SpeedDial = /*#__PURE__*/React.forwardRef(function SpeedDial(inProps, ref)
     props: inProps,
     name: 'MuiSpeedDial'
   });
+  const theme = useTheme();
+  const defaultTransitionDuration = {
+    enter: theme.transitions.duration.enteringScreen,
+    exit: theme.transitions.duration.leavingScreen
+  };
 
   const {
     ariaLabel,
@@ -157,10 +162,7 @@ const SpeedDial = /*#__PURE__*/React.forwardRef(function SpeedDial(inProps, ref)
     onOpen,
     open: openProp,
     TransitionComponent = Zoom,
-    transitionDuration = {
-      enter: duration.enteringScreen,
-      exit: duration.leavingScreen
-    },
+    transitionDuration = defaultTransitionDuration,
     TransitionProps
   } = props,
         FabProps = _objectWithoutPropertiesLoose(props.FabProps, _excluded),
@@ -542,8 +544,8 @@ process.env.NODE_ENV !== "production" ? SpeedDial.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,
    * }
    */
   transitionDuration: PropTypes.oneOfType([PropTypes.number, PropTypes.shape({

package/modern/Step/StepContext.js

@@ -1,12 +1,20 @@
 import * as React from 'react';
+
 /**
- * @ignore - internal component.
+ * Provides information about the current step in Stepper.
  */
-
 const StepContext = /*#__PURE__*/React.createContext({});
 
 if (process.env.NODE_ENV !== 'production') {
   StepContext.displayName = 'StepContext';
 }
+/**
+ * Returns the current StepContext or an empty object if no StepContext
+ * has been defined in the component tree.
+ */
+
 
+export function useStepContext() {
+  return React.useContext(StepContext);
+}
 export default StepContext;

package/modern/Step/index.js

@@ -1,3 +1,5 @@
 export { default } from './Step';
 export { default as stepClasses } from './stepClasses';
-export * from './stepClasses';
+export * from './stepClasses';
+export { default as StepContext } from './StepContext';
+export * from './StepContext';

package/modern/SwipeableDrawer/SwipeableDrawer.js

@@ -12,7 +12,6 @@ import ownerDocument from '../utils/ownerDocument';
 import ownerWindow from '../utils/ownerWindow';
 import useEventCallback from '../utils/useEventCallback';
 import useEnhancedEffect from '../utils/useEnhancedEffect';
-import { duration } from '../styles/createTransitions';
 import useTheme from '../styles/useTheme';
 import { getTransitionProps } from '../transitions/utils';
 import SwipeArea from './SwipeArea'; // This value is closed to what browsers are using internally to
@@ -125,16 +124,16 @@ function computeHasNativeHandler({
 }
 
 const iOS = typeof navigator !== 'undefined' && /iPad|iPhone|iPod/.test(navigator.userAgent);
-const transitionDurationDefault = {
-  enter: duration.enteringScreen,
-  exit: duration.leavingScreen
-};
 const SwipeableDrawer = /*#__PURE__*/React.forwardRef(function SwipeableDrawer(inProps, ref) {
   const props = useThemeProps({
     name: 'MuiSwipeableDrawer',
     props: inProps
   });
   const theme = useTheme();
+  const transitionDurationDefault = {
+    enter: theme.transitions.duration.enteringScreen,
+    exit: theme.transitions.duration.leavingScreen
+  };
 
   const {
     anchor = 'left',
@@ -612,7 +611,10 @@ process.env.NODE_ENV !== "production" ? SwipeableDrawer.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/ToggleButton/ToggleButton.js

@@ -200,12 +200,18 @@ process.env.NODE_ENV !== "production" ? ToggleButton.propTypes
   fullWidth: PropTypes.bool,
 
   /**
-   * @ignore
+   * Callback fired when the state changes.
+   *
+   * @param {React.MouseEvent<HTMLElement>} event The event source of the callback.
+   * @param {any} value of the selected button.
    */
   onChange: PropTypes.func,
 
   /**
-   * @ignore
+   * Callback fired when the button is clicked.
+   *
+   * @param {React.MouseEvent<HTMLElement>} event The event source of the callback.
+   * @param {any} value of the selected button.
    */
   onClick: PropTypes.func,
 

package/modern/Zoom/Zoom.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,10 +17,6 @@ const styles = {
     transform: 'none'
   }
 };
-const defaultTimeout = {
-  enter: duration.enteringScreen,
-  exit: duration.leavingScreen
-};
 /**
  * The Zoom transition can be used for the floating variant of the
  * [Button](/components/buttons/#floating-action-buttons) component.
@@ -29,6 +24,12 @@ const defaultTimeout = {
  */
 
 const Zoom = /*#__PURE__*/React.forwardRef(function Zoom(props, ref) {
+  const theme = useTheme();
+  const defaultTimeout = {
+    enter: theme.transitions.duration.enteringScreen,
+    exit: theme.transitions.duration.leavingScreen
+  };
+
   const {
     addEndListener,
     appear = true,
@@ -48,7 +49,6 @@ const Zoom = /*#__PURE__*/React.forwardRef(function Zoom(props, ref) {
   } = props,
         other = _objectWithoutPropertiesLoose(props, _excluded);
 
-  const theme = useTheme();
   const nodeRef = React.useRef(null);
   const foreignRef = useForkRef(children.ref, ref);
   const handleRef = useForkRef(nodeRef, foreignRef);
@@ -213,8 +213,8 @@ process.env.NODE_ENV !== "production" ? Zoom.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/index.js

@@ -1,4 +1,4 @@
-/** @license MUI v5.4.1
+/** @license MUI v5.4.4
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
@@ -174,6 +174,8 @@ export { default as Popover } from './Popover';
 export * from './Popover';
 export { default as Popper } from './Popper';
 export * from './Popper';
+export { default as Portal } from './Portal';
+export * from './Portal';
 export { default as Radio } from './Radio';
 export * from './Radio';
 export { default as RadioGroup } from './RadioGroup';

package/modern/locale/index.js

@@ -1813,9 +1813,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 +2377,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: {

package/modern/styles/makeStyles.js

@@ -1,6 +1,6 @@
 import { formatMuiErrorMessage as _formatMuiErrorMessage } from "@mui/utils";
 export default function makeStyles() {
-  throw new Error(process.env.NODE_ENV !== "production" ? `MUI: makeStyles is not longer exported from @mui/material/styles.
+  throw new Error(process.env.NODE_ENV !== "production" ? `MUI: makeStyles is no longer exported from @mui/material/styles.
 You have to import it from @mui/styles.
 See https://mui.com/r/migration-v4/#mui-material-styles for more details.` : _formatMuiErrorMessage(14));
 }