@mui/material 5.5.0 → 5.5.3

package/locale/index.js

@@ -2281,6 +2281,90 @@ export const kzKZ = {
       }
     }
   }
+}; // Macedonian - Македонски
+
+export const mkMK = {
+  components: {
+    MuiBreadcrumbs: {
+      defaultProps: {
+        expandText: 'Прикажи патека'
+      }
+    },
+    MuiTablePagination: {
+      defaultProps: {
+        getItemAriaLabel: type => {
+          if (type === 'first') {
+            return 'Оди на прва страница';
+          }
+
+          if (type === 'last') {
+            return 'Оди на последна страница';
+          }
+
+          if (type === 'next') {
+            return 'Оди на следна страница';
+          } // if (type === 'previous') {
+
+
+          return 'Оди на предходна страница';
+        },
+        labelRowsPerPage: 'Редови по страница:',
+        labelDisplayedRows: ({
+          from,
+          to,
+          count
+        }) => `${from}–${to} од ${count !== -1 ? count : `повеќе од ${to}`}`
+      }
+    },
+    MuiRating: {
+      defaultProps: {
+        getLabelText: value => {
+          const lastDigit = value % 10;
+          return `${value} Ѕвезд${lastDigit === 1 ? 'а' : 'и'}`;
+        },
+        emptyLabelText: 'Празно'
+      }
+    },
+    MuiAutocomplete: {
+      defaultProps: {
+        clearText: 'Избриши',
+        closeText: 'Затвори',
+        loadingText: 'Се презема',
+        noOptionsText: 'Нема опција',
+        openText: 'Отвори'
+      }
+    },
+    MuiAlert: {
+      defaultProps: {
+        closeText: 'Затвори'
+      }
+    },
+    MuiPagination: {
+      defaultProps: {
+        'aria-label': 'Навигација низ страници',
+        getItemAriaLabel: (type, page, selected) => {
+          if (type === 'page') {
+            return `${selected ? '' : 'Оди на '}страница ${page}`;
+          }
+
+          if (type === 'first') {
+            return 'Оди на прва страница';
+          }
+
+          if (type === 'last') {
+            return 'Оди на последна страница';
+          }
+
+          if (type === 'next') {
+            return 'Оди на следна страница';
+          } // if (type === 'previous') {
+
+
+          return 'Оди на предходна страница';
+        }
+      }
+    }
+  }
 };
 export const nbNO = {
   components: {

package/modern/Alert/Alert.js

@@ -219,7 +219,9 @@ process.env.NODE_ENV !== "production" ? Alert.propTypes
   closeText: PropTypes.string,
 
   /**
-   * The main color for the alert. Unless provided, the value is taken from the `severity` prop.
+   * The color of the component. Unless provided, the value is taken from the `severity` prop.
+   * It supports both default and custom theme colors, which can be added as shown in the
+   * [palette customization guide](https://mui.com/customization/palette/#adding-new-colors).
    */
   color: PropTypes
   /* @typescript-to-proptypes-ignore */

package/modern/AppBar/AppBar.js

@@ -144,7 +144,9 @@ process.env.NODE_ENV !== "production" ? AppBar.propTypes
   className: PropTypes.string,
 
   /**
-   * The color of the component. It supports those theme colors that make sense for this component.
+   * The color of the component.
+   * It supports both default and custom theme colors, which can be added as shown in the
+   * [palette customization guide](https://mui.com/customization/palette/#adding-new-colors).
    * @default 'primary'
    */
   color: PropTypes

package/modern/Autocomplete/Autocomplete.js

@@ -756,7 +756,7 @@ process.env.NODE_ENV !== "production" ? Autocomplete.propTypes
   disablePortal: PropTypes.bool,
 
   /**
-   * A filter function that determines the options that are eligible.
+   * A function that determines the filtered options to be rendered on search.
    *
    * @param {T[]} options The options to render.
    * @param {object} state The state of the component.

package/modern/Backdrop/Backdrop.js

@@ -1,21 +1,25 @@
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["children", "components", "componentsProps", "className", "invisible", "open", "transitionDuration", "TransitionComponent"];
+const _excluded = ["children", "component", "components", "componentsProps", "className", "invisible", "open", "transitionDuration", "TransitionComponent"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { isHostComponent } from '@mui/base';
-import BackdropUnstyled, { backdropUnstyledClasses } from '@mui/base/BackdropUnstyled';
+import clsx from 'clsx';
+import { unstable_composeClasses as composeClasses } from '@mui/base';
 import styled from '../styles/styled';
 import useThemeProps from '../styles/useThemeProps';
 import Fade from '../Fade';
+import { getBackdropUtilityClass } from './backdropClasses';
 import { jsx as _jsx } from "react/jsx-runtime";
-export const backdropClasses = backdropUnstyledClasses;
 
-const extendUtilityClasses = ownerState => {
+const useUtilityClasses = ownerState => {
   const {
-    classes
+    classes,
+    invisible
   } = ownerState;
-  return classes;
+  const slots = {
+    root: ['root', invisible && 'invisible']
+  };
+  return composeClasses(slots, getBackdropUtilityClass, classes);
 };
 
 const BackdropRoot = styled('div', {
@@ -51,6 +55,7 @@ const Backdrop = /*#__PURE__*/React.forwardRef(function Backdrop(inProps, ref) {
 
   const {
     children,
+    component = 'div',
     components = {},
     componentsProps = {},
     className,
@@ -63,25 +68,20 @@ const Backdrop = /*#__PURE__*/React.forwardRef(function Backdrop(inProps, ref) {
         other = _objectWithoutPropertiesLoose(props, _excluded);
 
   const ownerState = _extends({}, props, {
+    component,
     invisible
   });
 
-  const classes = extendUtilityClasses(ownerState);
+  const classes = useUtilityClasses(ownerState);
   return /*#__PURE__*/_jsx(TransitionComponent, _extends({
     in: open,
     timeout: transitionDuration
   }, other, {
-    children: /*#__PURE__*/_jsx(BackdropUnstyled, {
-      className: className,
-      invisible: invisible,
-      components: _extends({
-        Root: BackdropRoot
-      }, components),
-      componentsProps: {
-        root: _extends({}, componentsProps.root, (!components.Root || !isHostComponent(components.Root)) && {
-          ownerState: _extends({}, componentsProps.root?.ownerState)
-        })
-      },
+    children: /*#__PURE__*/_jsx(BackdropRoot, {
+      "aria-hidden": true,
+      as: components.Root ?? component,
+      className: clsx(classes.root, className),
+      ownerState: _extends({}, ownerState, componentsProps.root?.ownerState),
       classes: classes,
       ref: ref,
       children: children
@@ -111,6 +111,12 @@ process.env.NODE_ENV !== "production" ? Backdrop.propTypes
    */
   className: PropTypes.string,
 
+  /**
+   * The component used for the root node.
+   * Either a string to use a HTML element or a component.
+   */
+  component: PropTypes.elementType,
+
   /**
    * The components used for each slot inside the Backdrop.
    * Either a string to use a HTML element or a component.

package/modern/Backdrop/backdropClasses.js

@@ -0,0 +1,6 @@
+import { generateUtilityClass, generateUtilityClasses } from '@mui/base';
+export function getBackdropUtilityClass(slot) {
+  return generateUtilityClass('MuiBackdrop', slot);
+}
+const backdropClasses = generateUtilityClasses('MuiBackdrop', ['root', 'invisible']);
+export default backdropClasses;

package/modern/Backdrop/index.js

@@ -1,2 +1,3 @@
 export { default } from './Backdrop';
-export * from './Backdrop';
+export { default as backdropClasses } from './backdropClasses';
+export * from './backdropClasses';

package/modern/Badge/Badge.js

@@ -267,7 +267,9 @@ process.env.NODE_ENV !== "production" ? Badge.propTypes
   classes: PropTypes.object,
 
   /**
-   * The color of the component. It supports those theme colors that make sense for this component.
+   * The color of the component.
+   * It supports both default and custom theme colors, which can be added as shown in the
+   * [palette customization guide](https://mui.com/customization/palette/#adding-new-colors).
    * @default 'default'
    */
   color: PropTypes

package/modern/Button/Button.js

@@ -305,7 +305,9 @@ process.env.NODE_ENV !== "production" ? Button.propTypes
   className: PropTypes.string,
 
   /**
-   * The color of the component. It supports those theme colors that make sense for this component.
+   * The color of the component.
+   * It supports both default and custom theme colors, which can be added as shown in the
+   * [palette customization guide](https://mui.com/customization/palette/#adding-new-colors).
    * @default 'primary'
    */
   color: PropTypes

package/modern/ButtonBase/ButtonBase.js

@@ -144,11 +144,16 @@ const ButtonBase = /*#__PURE__*/React.forwardRef(function ButtonBase(inProps, re
       buttonRef.current.focus();
     }
   }), []);
+  const [mountedState, setMountedState] = React.useState(false);
+  React.useEffect(() => {
+    setMountedState(true);
+  }, []);
+  const enableTouchRipple = mountedState && !disableRipple && !disabled;
   React.useEffect(() => {
-    if (focusVisible && focusRipple && !disableRipple) {
+    if (focusVisible && focusRipple && !disableRipple && mountedState) {
       rippleRef.current.pulsate();
     }
-  }, [disableRipple, focusRipple, focusVisible]);
+  }, [disableRipple, focusRipple, focusVisible, mountedState]);
 
   function useRippleHandler(rippleAction, eventCallback, skipRippleAction = disableTouchRipple) {
     return useEventCallback(event => {
@@ -292,11 +297,6 @@ const ButtonBase = /*#__PURE__*/React.forwardRef(function ButtonBase(inProps, re
 
   const handleOwnRef = useForkRef(focusVisibleRef, buttonRef);
   const handleRef = useForkRef(ref, handleOwnRef);
-  const [mountedState, setMountedState] = React.useState(false);
-  React.useEffect(() => {
-    setMountedState(true);
-  }, []);
-  const enableTouchRipple = mountedState && !disableRipple && !disabled;
 
   if (process.env.NODE_ENV !== 'production') {
     // eslint-disable-next-line react-hooks/rules-of-hooks

package/modern/ButtonGroup/ButtonGroup.js

@@ -205,7 +205,9 @@ process.env.NODE_ENV !== "production" ? ButtonGroup.propTypes
   className: PropTypes.string,
 
   /**
-   * The color of the component. It supports those theme colors that make sense for this component.
+   * The color of the component.
+   * It supports both default and custom theme colors, which can be added as shown in the
+   * [palette customization guide](https://mui.com/customization/palette/#adding-new-colors).
    * @default 'primary'
    */
   color: PropTypes

package/modern/Checkbox/Checkbox.js

@@ -136,7 +136,9 @@ process.env.NODE_ENV !== "production" ? Checkbox.propTypes
   classes: PropTypes.object,
 
   /**
-   * The color of the component. It supports those theme colors that make sense for this component.
+   * The color of the component.
+   * It supports both default and custom theme colors, which can be added as shown in the
+   * [palette customization guide](https://mui.com/customization/palette/#adding-new-colors).
    * @default 'primary'
    */
   color: PropTypes

package/modern/Chip/Chip.js

@@ -450,7 +450,9 @@ process.env.NODE_ENV !== "production" ? Chip.propTypes
   clickable: PropTypes.bool,
 
   /**
-   * The color of the component. It supports those theme colors that make sense for this component.
+   * The color of the component.
+   * It supports both default and custom theme colors, which can be added as shown in the
+   * [palette customization guide](https://mui.com/customization/palette/#adding-new-colors).
    * @default 'default'
    */
   color: PropTypes

package/modern/CircularProgress/CircularProgress.js

@@ -205,7 +205,9 @@ process.env.NODE_ENV !== "production" ? CircularProgress.propTypes
   className: PropTypes.string,
 
   /**
-   * The color of the component. It supports those theme colors that make sense for this component.
+   * The color of the component.
+   * It supports both default and custom theme colors, which can be added as shown in the
+   * [palette customization guide](https://mui.com/customization/palette/#adding-new-colors).
    * @default 'primary'
    */
   color: PropTypes

package/modern/Fab/Fab.js

@@ -47,6 +47,7 @@ const FabRoot = styled(ButtonBase, {
   minWidth: 0,
   width: 56,
   height: 56,
+  zIndex: theme.zIndex.fab,
   boxShadow: theme.shadows[6],
   '&:active': {
     boxShadow: theme.shadows[12]
@@ -175,7 +176,9 @@ process.env.NODE_ENV !== "production" ? Fab.propTypes
   className: PropTypes.string,
 
   /**
-   * The color of the component. It supports those theme colors that make sense for this component.
+   * The color of the component.
+   * It supports both default and custom theme colors, which can be added as shown in the
+   * [palette customization guide](https://mui.com/customization/palette/#adding-new-colors).
    * @default 'default'
    */
   color: PropTypes.oneOf(['default', 'error', 'info', 'inherit', 'primary', 'secondary', 'success', 'warning']),

package/modern/FilledInput/FilledInput.js

@@ -236,7 +236,9 @@ process.env.NODE_ENV !== "production" ? FilledInput.propTypes
   classes: PropTypes.object,
 
   /**
-   * The color of the component. It supports those theme colors that make sense for this component.
+   * The color of the component.
+   * It supports both default and custom theme colors, which can be added as shown in the
+   * [palette customization guide](https://mui.com/customization/palette/#adding-new-colors).
    * The prop defaults to the value (`'primary'`) inherited from the parent FormControl component.
    */
   color: PropTypes
@@ -344,7 +346,7 @@ process.env.NODE_ENV !== "production" ? FilledInput.propTypes
   minRows: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
 
   /**
-   * If `true`, a `textarea` element is rendered.
+   * If `true`, a [TextareaAutosize](/components/textarea-autosize/) element is rendered.
    * @default false
    */
   multiline: PropTypes.bool,

package/modern/FormControl/FormControl.js

@@ -247,7 +247,9 @@ process.env.NODE_ENV !== "production" ? FormControl.propTypes
   className: PropTypes.string,
 
   /**
-   * The color of the component. It supports those theme colors that make sense for this component.
+   * The color of the component.
+   * It supports both default and custom theme colors, which can be added as shown in the
+   * [palette customization guide](https://mui.com/customization/palette/#adding-new-colors).
    * @default 'primary'
    */
   color: PropTypes

package/modern/FormControlLabel/FormControlLabel.js

@@ -92,7 +92,7 @@ const FormControlLabel = /*#__PURE__*/React.forwardRef(function FormControlLabel
     control,
     disabled: disabledProp,
     disableTypography,
-    label,
+    label: labelProp,
     labelPlacement = 'end'
   } = props,
         other = _objectWithoutPropertiesLoose(props, _excluded);
@@ -124,23 +124,28 @@ const FormControlLabel = /*#__PURE__*/React.forwardRef(function FormControlLabel
 
   const ownerState = _extends({}, props, {
     disabled,
-    label,
     labelPlacement,
     error: fcs.error
   });
 
   const classes = useUtilityClasses(ownerState);
+  let label = labelProp;
+
+  if (label != null && label.type !== Typography && !disableTypography) {
+    label = /*#__PURE__*/_jsx(Typography, _extends({
+      component: "span",
+      className: classes.label
+    }, componentsProps.typography, {
+      children: label
+    }));
+  }
+
   return /*#__PURE__*/_jsxs(FormControlLabelRoot, _extends({
     className: clsx(classes.root, className),
     ownerState: ownerState,
     ref: ref
   }, other, {
-    children: [/*#__PURE__*/React.cloneElement(control, controlProps), label.type === Typography || disableTypography ? label : /*#__PURE__*/_jsx(Typography, _extends({
-      component: "span",
-      className: classes.label
-    }, componentsProps.typography, {
-      children: label
-    }))]
+    children: [/*#__PURE__*/React.cloneElement(control, controlProps), label]
   }));
 });
 process.env.NODE_ENV !== "production" ? FormControlLabel.propTypes
@@ -197,7 +202,7 @@ process.env.NODE_ENV !== "production" ? FormControlLabel.propTypes
   /**
    * A text or an element to be used in an enclosing label element.
    */
-  label: PropTypes.oneOfType([PropTypes.element, PropTypes.number, PropTypes.string]).isRequired,
+  label: PropTypes.node,
 
   /**
    * The position of the label.

package/modern/FormLabel/FormLabel.js

@@ -137,7 +137,9 @@ process.env.NODE_ENV !== "production" ? FormLabel.propTypes
   className: PropTypes.string,
 
   /**
-   * The color of the component. It supports those theme colors that make sense for this component.
+   * The color of the component.
+   * It supports both default and custom theme colors, which can be added as shown in the
+   * [palette customization guide](https://mui.com/customization/palette/#adding-new-colors).
    */
   color: PropTypes
   /* @typescript-to-proptypes-ignore */

package/modern/Grid/Grid.js

@@ -314,10 +314,9 @@ const Grid = /*#__PURE__*/React.forwardRef(function Grid(inProps, ref) {
 
   const rowSpacing = rowSpacingProp || spacing;
   const columnSpacing = columnSpacingProp || spacing;
-  const columnsContext = React.useContext(GridContext); // setting prop before context to accomodate nesting
-  // colums set with default breakpoint unit of 12
+  const columnsContext = React.useContext(GridContext); // columns set with default breakpoint unit of 12
 
-  const columns = columnsProp || columnsContext || 12;
+  const columns = container ? columnsProp || 12 : columnsContext;
 
   const ownerState = _extends({}, props, {
     columns,
@@ -336,18 +335,15 @@ const Grid = /*#__PURE__*/React.forwardRef(function Grid(inProps, ref) {
   });
 
   const classes = useUtilityClasses(ownerState);
-
-  const wrapChild = element => columns !== 12 ? /*#__PURE__*/_jsx(GridContext.Provider, {
+  return /*#__PURE__*/_jsx(GridContext.Provider, {
     value: columns,
-    children: element
-  }) : element;
-
-  return wrapChild( /*#__PURE__*/_jsx(GridRoot, _extends({
-    ownerState: ownerState,
-    className: clsx(classes.root, className),
-    as: component,
-    ref: ref
-  }, other)));
+    children: /*#__PURE__*/_jsx(GridRoot, _extends({
+      ownerState: ownerState,
+      className: clsx(classes.root, className),
+      as: component,
+      ref: ref
+    }, other))
+  });
 });
 process.env.NODE_ENV !== "production" ? Grid.propTypes
 /* remove-proptypes */

package/modern/Grow/Grow.js

@@ -6,7 +6,7 @@ import PropTypes from 'prop-types';
 import { elementAcceptingRef } from '@mui/utils';
 import { Transition } from 'react-transition-group';
 import useTheme from '../styles/useTheme';
-import { reflow, getTransitionProps } from '../transitions/utils';
+import { getTransitionProps, reflow } from '../transitions/utils';
 import useForkRef from '../utils/useForkRef';
 import { jsx as _jsx } from "react/jsx-runtime";
 
@@ -24,6 +24,12 @@ const styles = {
     transform: 'none'
   }
 };
+/**
+ * Conditionally apply a workaround for the CSS transition bug in Safari 15.4.
+ * Remove this workaround once the Safari bug is fixed.
+ */
+
+const isSafari154 = typeof navigator !== 'undefined' && /^((?!chrome|android).)*safari/i.test(navigator.userAgent) && /version\/15\.[4-9]/i.test(navigator.userAgent);
 /**
  * The Grow transition is used by the [Tooltip](/components/tooltips/) and
  * [Popover](/components/popover/) components.
@@ -97,7 +103,7 @@ const Grow = /*#__PURE__*/React.forwardRef(function Grow(props, ref) {
       duration,
       delay
     }), theme.transitions.create('transform', {
-      duration: duration * 0.666,
+      duration: isSafari154 ? duration : duration * 0.666,
       delay,
       easing: transitionTimingFunction
     })].join(',');
@@ -133,11 +139,11 @@ const Grow = /*#__PURE__*/React.forwardRef(function Grow(props, ref) {
       duration,
       delay
     }), theme.transitions.create('transform', {
-      duration: duration * 0.666,
-      delay: delay || duration * 0.333,
+      duration: isSafari154 ? duration : duration * 0.666,
+      delay: isSafari154 ? delay : delay || duration * 0.333,
       easing: transitionTimingFunction
     })].join(',');
-    node.style.opacity = '0';
+    node.style.opacity = 0;
     node.style.transform = getScale(0.75);
 
     if (onExit) {

package/modern/Icon/Icon.js

@@ -130,7 +130,9 @@ process.env.NODE_ENV !== "production" ? Icon.propTypes
   className: PropTypes.string,
 
   /**
-   * The color of the component. It supports those theme colors that make sense for this component.
+   * The color of the component.
+   * It supports both default and custom theme colors, which can be added as shown in the
+   * [palette customization guide](https://mui.com/customization/palette/#adding-new-colors).
    * @default 'inherit'
    */
   color: PropTypes

package/modern/IconButton/IconButton.js

@@ -165,7 +165,9 @@ process.env.NODE_ENV !== "production" ? IconButton.propTypes
   className: PropTypes.string,
 
   /**
-   * The color of the component. It supports those theme colors that make sense for this component.
+   * The color of the component.
+   * It supports both default and custom theme colors, which can be added as shown in the
+   * [palette customization guide](https://mui.com/customization/palette/#adding-new-colors).
    * @default 'default'
    */
   color: PropTypes

package/modern/Input/Input.js

@@ -171,7 +171,9 @@ process.env.NODE_ENV !== "production" ? Input.propTypes
   classes: PropTypes.object,
 
   /**
-   * The color of the component. It supports those theme colors that make sense for this component.
+   * The color of the component.
+   * It supports both default and custom theme colors, which can be added as shown in the
+   * [palette customization guide](https://mui.com/customization/palette/#adding-new-colors).
    * The prop defaults to the value (`'primary'`) inherited from the parent FormControl component.
    */
   color: PropTypes
@@ -271,7 +273,7 @@ process.env.NODE_ENV !== "production" ? Input.propTypes
   minRows: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
 
   /**
-   * If `true`, a `textarea` element is rendered.
+   * If `true`, a [TextareaAutosize](/components/textarea-autosize/) element is rendered.
    * @default false
    */
   multiline: PropTypes.bool,

package/modern/InputBase/InputBase.js

@@ -531,7 +531,9 @@ process.env.NODE_ENV !== "production" ? InputBase.propTypes
   className: PropTypes.string,
 
   /**
-   * The color of the component. It supports those theme colors that make sense for this component.
+   * The color of the component.
+   * It supports both default and custom theme colors, which can be added as shown in the
+   * [palette customization guide](https://mui.com/customization/palette/#adding-new-colors).
    * The prop defaults to the value (`'primary'`) inherited from the parent FormControl component.
    */
   color: PropTypes
@@ -633,7 +635,7 @@ process.env.NODE_ENV !== "production" ? InputBase.propTypes
   minRows: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
 
   /**
-   * If `true`, a `textarea` element is rendered.
+   * If `true`, a [TextareaAutosize](/components/textarea-autosize/) element is rendered.
    * @default false
    */
   multiline: PropTypes.bool,

package/modern/InputLabel/InputLabel.js

@@ -164,7 +164,9 @@ process.env.NODE_ENV !== "production" ? InputLabel.propTypes
   classes: PropTypes.object,
 
   /**
-   * The color of the component. It supports those theme colors that make sense for this component.
+   * The color of the component.
+   * It supports both default and custom theme colors, which can be added as shown in the
+   * [palette customization guide](https://mui.com/customization/palette/#adding-new-colors).
    */
   color: PropTypes
   /* @typescript-to-proptypes-ignore */

package/modern/LinearProgress/LinearProgress.js

@@ -328,7 +328,9 @@ process.env.NODE_ENV !== "production" ? LinearProgress.propTypes
   className: PropTypes.string,
 
   /**
-   * The color of the component. It supports those theme colors that make sense for this component.
+   * The color of the component.
+   * It supports both default and custom theme colors, which can be added as shown in the
+   * [palette customization guide](https://mui.com/customization/palette/#adding-new-colors).
    * @default 'primary'
    */
   color: PropTypes

package/modern/OutlinedInput/NotchedOutline.js

@@ -58,7 +58,9 @@ const NotchedOutlineLegend = styled('legend')(({
   '& > span': {
     paddingLeft: 5,
     paddingRight: 5,
-    display: 'inline-block'
+    display: 'inline-block',
+    opacity: 0,
+    visibility: 'visible'
   }
 }, ownerState.notched && {
   maxWidth: '100%',