@mui/material 5.5.2 → 5.6.1

package/modern/locale/index.js

@@ -1047,9 +1047,12 @@ export const etEE = {
 
           return 'Vali eelmine lehekülg';
         },
-        labelRowsPerPage: 'Ridu leheküljel:' // labelDisplayedRows: ({ from, to, count }) =>
-        //   `${from}–${to} / ${count !== -1 ? count : `more than ${to}`}`,
-
+        labelRowsPerPage: 'Ridu leheküljel:',
+        labelDisplayedRows: ({
+          from,
+          to,
+          count
+        }) => `${from}–${to} / ${count !== -1 ? count : `rohkem kui ${to}`}`
       }
     },
     MuiRating: {

package/modern/styles/CssVarsProvider.js

@@ -0,0 +1,28 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+
+/* eslint-disable @typescript-eslint/naming-convention */
+import { unstable_createCssVarsProvider as createCssVarsProvider } from '@mui/system';
+import experimental_extendTheme from './experimental_extendTheme';
+import createTypography from './createTypography';
+const defaultTheme = experimental_extendTheme();
+const {
+  CssVarsProvider: Experimental_CssVarsProvider,
+  useColorScheme,
+  getInitColorSchemeScript
+} = createCssVarsProvider({
+  theme: defaultTheme,
+  defaultColorScheme: {
+    light: 'light',
+    dark: 'dark'
+  },
+  prefix: 'md',
+  resolveTheme: theme => {
+    const newTheme = _extends({}, theme, {
+      typography: createTypography(theme.palette, theme.typography)
+    });
+
+    return newTheme;
+  },
+  shouldSkipGeneratingVar: keys => !!keys[0].match(/(typography|mixins|breakpoints|direction|transitions)/)
+});
+export { useColorScheme, getInitColorSchemeScript, Experimental_CssVarsProvider };

package/modern/styles/experimental_extendTheme.js

@@ -0,0 +1,89 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+const _excluded = ["colorSchemes", "opacity"],
+      _excluded2 = ["palette"];
+import { deepmerge } from '@mui/utils';
+import { colorChannel } from '@mui/system';
+import createThemeWithoutVars from './createTheme';
+import createPalette from './createPalette';
+export const defaultOpacity = {
+  active: 0.54,
+  hover: 0.04,
+  selected: 0.08,
+  disabled: 0.26,
+  focus: 0.12
+};
+
+function createTheme(options = {}, ...args) {
+  const {
+    colorSchemes: colorSchemesInput = {},
+    opacity: opacityInput = {}
+  } = options,
+        input = _objectWithoutPropertiesLoose(options, _excluded); // eslint-disable-next-line prefer-const
+
+
+  let _createThemeWithoutVa = createThemeWithoutVars(_extends({}, input, colorSchemesInput.light && {
+    palette: colorSchemesInput.light?.palette
+  })),
+      {
+    palette: lightPalette
+  } = _createThemeWithoutVa,
+      muiTheme = _objectWithoutPropertiesLoose(_createThemeWithoutVa, _excluded2);
+
+  const {
+    palette: darkPalette
+  } = createThemeWithoutVars({
+    palette: _extends({
+      mode: 'dark'
+    }, colorSchemesInput.dark?.palette)
+  });
+  colorSchemesInput.light = {
+    palette: lightPalette
+  };
+  colorSchemesInput.dark = {
+    palette: darkPalette
+  };
+  const colorSchemes = {};
+  Object.keys(colorSchemesInput).forEach(key => {
+    const palette = createPalette(colorSchemesInput[key].palette);
+    Object.keys(palette).forEach(color => {
+      const colors = palette[color];
+
+      if (colors.main) {
+        palette[color].mainChannel = colorChannel(colors.main);
+      }
+
+      if (colors.light) {
+        palette[color].lightChannel = colorChannel(colors.light);
+      }
+
+      if (colors.dark) {
+        palette[color].darkChannel = colorChannel(colors.dark);
+      }
+
+      if (colors.primary) {
+        palette[color].primaryChannel = colorChannel(colors.primary);
+      }
+
+      if (colors.secondary) {
+        palette[color].secondaryChannel = colorChannel(colors.secondary);
+      }
+
+      if (colors.disabled) {
+        palette[color].disabledChannel = colorChannel(colors.disabled);
+      }
+    });
+    colorSchemes[key] = {
+      palette
+    };
+  });
+
+  const opacity = _extends({}, defaultOpacity, opacityInput);
+
+  muiTheme.colorSchemes = colorSchemes;
+  muiTheme.opacity = opacity;
+  muiTheme = args.reduce((acc, argument) => deepmerge(acc, argument), muiTheme);
+  return muiTheme;
+}
+
+export default createTheme;

package/modern/styles/index.js

@@ -16,4 +16,6 @@ export { StyledEngineProvider } from '@mui/system'; // The legacy utilities from
 
 export { default as makeStyles } from './makeStyles';
 export { default as withStyles } from './withStyles';
-export { default as withTheme } from './withTheme';
+export { default as withTheme } from './withTheme';
+export * from './CssVarsProvider';
+export { default as experimental_extendTheme } from './experimental_extendTheme';

package/node/Accordion/Accordion.js

@@ -289,7 +289,7 @@ process.env.NODE_ENV !== "production" ? Accordion.propTypes
 
   /**
    * The component used for the transition.
-   * [Follow this guide](/components/transitions/#transitioncomponent-prop) to learn more about the requirements for this component.
+   * [Follow this guide](/material-ui/transitions/#transitioncomponent-prop) to learn more about the requirements for this component.
    * @default Collapse
    */
   TransitionComponent: _propTypes.default.elementType,

package/node/Alert/Alert.js

@@ -240,13 +240,15 @@ process.env.NODE_ENV !== "production" ? Alert.propTypes
   /**
    * Override the default label for the *close popup* icon button.
    *
-   * For localization purposes, you can use the provided [translations](/guides/localization/).
+   * For localization purposes, you can use the provided [translations](/material-ui/guides/localization/).
    * @default 'Close'
    */
   closeText: _propTypes.default.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/material-ui/customization/palette/#adding-new-colors).
    */
   color: _propTypes.default
   /* @typescript-to-proptypes-ignore */

package/node/AppBar/AppBar.js

@@ -166,7 +166,9 @@ process.env.NODE_ENV !== "production" ? AppBar.propTypes
   className: _propTypes.default.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/material-ui/customization/palette/#adding-new-colors).
    * @default 'primary'
    */
   color: _propTypes.default

package/node/Autocomplete/Autocomplete.js

@@ -690,7 +690,7 @@ process.env.NODE_ENV !== "production" ? Autocomplete.propTypes
   blurOnSelect: _propTypes.default.oneOfType([_propTypes.default.oneOf(['mouse', 'touch']), _propTypes.default.bool]),
 
   /**
-   * Props applied to the [`Chip`](/api/chip/) element.
+   * Props applied to the [`Chip`](/material-ui/api/chip/) element.
    */
   ChipProps: _propTypes.default.object,
 
@@ -728,7 +728,7 @@ process.env.NODE_ENV !== "production" ? Autocomplete.propTypes
   /**
    * Override the default text for the *clear* icon button.
    *
-   * For localization purposes, you can use the provided [translations](/guides/localization/).
+   * For localization purposes, you can use the provided [translations](/material-ui/guides/localization/).
    * @default 'Clear'
    */
   clearText: _propTypes.default.string,
@@ -736,7 +736,7 @@ process.env.NODE_ENV !== "production" ? Autocomplete.propTypes
   /**
    * Override the default text for the *close popup* icon button.
    *
-   * For localization purposes, you can use the provided [translations](/guides/localization/).
+   * For localization purposes, you can use the provided [translations](/material-ui/guides/localization/).
    * @default 'Close'
    */
   closeText: _propTypes.default.string,
@@ -799,7 +799,7 @@ process.env.NODE_ENV !== "production" ? Autocomplete.propTypes
   disablePortal: _propTypes.default.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.
@@ -930,7 +930,7 @@ process.env.NODE_ENV !== "production" ? Autocomplete.propTypes
   /**
    * Text to display when in a loading state.
    *
-   * For localization purposes, you can use the provided [translations](/guides/localization/).
+   * For localization purposes, you can use the provided [translations](/material-ui/guides/localization/).
    * @default 'Loading…'
    */
   loadingText: _propTypes.default.node,
@@ -944,7 +944,7 @@ process.env.NODE_ENV !== "production" ? Autocomplete.propTypes
   /**
    * Text to display when there are no options.
    *
-   * For localization purposes, you can use the provided [translations](/guides/localization/).
+   * For localization purposes, you can use the provided [translations](/material-ui/guides/localization/).
    * @default 'No options'
    */
   noOptionsText: _propTypes.default.node,
@@ -1008,7 +1008,7 @@ process.env.NODE_ENV !== "production" ? Autocomplete.propTypes
   /**
    * Override the default text for the *open popup* icon button.
    *
-   * For localization purposes, you can use the provided [translations](/guides/localization/).
+   * For localization purposes, you can use the provided [translations](/material-ui/guides/localization/).
    * @default 'Open'
    */
   openText: _propTypes.default.string,

package/node/Backdrop/Backdrop.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.backdropClasses = void 0;
+exports.default = void 0;
 
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 
@@ -15,9 +15,9 @@ var React = _interopRequireWildcard(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _base = require("@mui/base");
+var _clsx = _interopRequireDefault(require("clsx"));
 
-var _BackdropUnstyled = _interopRequireWildcard(require("@mui/base/BackdropUnstyled"));
+var _base = require("@mui/base");
 
 var _styled = _interopRequireDefault(require("../styles/styled"));
 
@@ -25,22 +25,25 @@ var _useThemeProps = _interopRequireDefault(require("../styles/useThemeProps"));
 
 var _Fade = _interopRequireDefault(require("../Fade"));
 
+var _backdropClasses = require("./backdropClasses");
+
 var _jsxRuntime = require("react/jsx-runtime");
 
-const _excluded = ["children", "components", "componentsProps", "className", "invisible", "open", "transitionDuration", "TransitionComponent"];
+const _excluded = ["children", "component", "components", "componentsProps", "className", "invisible", "open", "transitionDuration", "TransitionComponent"];
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-const backdropClasses = _BackdropUnstyled.backdropUnstyledClasses;
-exports.backdropClasses = backdropClasses;
-
-const extendUtilityClasses = ownerState => {
+const useUtilityClasses = ownerState => {
   const {
-    classes
+    classes,
+    invisible
   } = ownerState;
-  return classes;
+  const slots = {
+    root: ['root', invisible && 'invisible']
+  };
+  return (0, _base.unstable_composeClasses)(slots, _backdropClasses.getBackdropUtilityClass, classes);
 };
 
 const BackdropRoot = (0, _styled.default)('div', {
@@ -69,7 +72,7 @@ const BackdropRoot = (0, _styled.default)('div', {
   backgroundColor: 'transparent'
 }));
 const Backdrop = /*#__PURE__*/React.forwardRef(function Backdrop(inProps, ref) {
-  var _componentsProps$root;
+  var _components$Root, _componentsProps$root;
 
   const props = (0, _useThemeProps.default)({
     props: inProps,
@@ -77,6 +80,7 @@ const Backdrop = /*#__PURE__*/React.forwardRef(function Backdrop(inProps, ref) {
   });
   const {
     children,
+    component = 'div',
     components = {},
     componentsProps = {},
     className,
@@ -88,24 +92,19 @@ const Backdrop = /*#__PURE__*/React.forwardRef(function Backdrop(inProps, ref) {
   } = props,
         other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const ownerState = (0, _extends2.default)({}, props, {
+    component,
     invisible
   });
-  const classes = extendUtilityClasses(ownerState);
+  const classes = useUtilityClasses(ownerState);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(TransitionComponent, (0, _extends2.default)({
     in: open,
     timeout: transitionDuration
   }, other, {
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_BackdropUnstyled.default, {
-      className: className,
-      invisible: invisible,
-      components: (0, _extends2.default)({
-        Root: BackdropRoot
-      }, components),
-      componentsProps: {
-        root: (0, _extends2.default)({}, componentsProps.root, (!components.Root || !(0, _base.isHostComponent)(components.Root)) && {
-          ownerState: (0, _extends2.default)({}, (_componentsProps$root = componentsProps.root) == null ? void 0 : _componentsProps$root.ownerState)
-        })
-      },
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(BackdropRoot, {
+      "aria-hidden": true,
+      as: (_components$Root = components.Root) != null ? _components$Root : component,
+      className: (0, _clsx.default)(classes.root, className),
+      ownerState: (0, _extends2.default)({}, ownerState, (_componentsProps$root = componentsProps.root) == null ? void 0 : _componentsProps$root.ownerState),
       classes: classes,
       ref: ref,
       children: children
@@ -135,6 +134,12 @@ process.env.NODE_ENV !== "production" ? Backdrop.propTypes
    */
   className: _propTypes.default.string,
 
+  /**
+   * The component used for the root node.
+   * Either a string to use a HTML element or a component.
+   */
+  component: _propTypes.default.elementType,
+
   /**
    * The components used for each slot inside the Backdrop.
    * Either a string to use a HTML element or a component.

package/node/Backdrop/backdropClasses.js

@@ -0,0 +1,17 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+exports.getBackdropUtilityClass = getBackdropUtilityClass;
+
+var _base = require("@mui/base");
+
+function getBackdropUtilityClass(slot) {
+  return (0, _base.generateUtilityClass)('MuiBackdrop', slot);
+}
+
+const backdropClasses = (0, _base.generateUtilityClasses)('MuiBackdrop', ['root', 'invisible']);
+var _default = backdropClasses;
+exports.default = _default;

package/node/Backdrop/index.js

@@ -1,9 +1,19 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-var _exportNames = {};
+var _exportNames = {
+  backdropClasses: true
+};
+Object.defineProperty(exports, "backdropClasses", {
+  enumerable: true,
+  get: function () {
+    return _backdropClasses.default;
+  }
+});
 Object.defineProperty(exports, "default", {
   enumerable: true,
   get: function () {
@@ -11,16 +21,18 @@ Object.defineProperty(exports, "default", {
   }
 });
 
-var _Backdrop = _interopRequireWildcard(require("./Backdrop"));
+var _Backdrop = _interopRequireDefault(require("./Backdrop"));
+
+var _backdropClasses = _interopRequireWildcard(require("./backdropClasses"));
 
-Object.keys(_Backdrop).forEach(function (key) {
+Object.keys(_backdropClasses).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
-  if (key in exports && exports[key] === _Backdrop[key]) return;
+  if (key in exports && exports[key] === _backdropClasses[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
     get: function () {
-      return _Backdrop[key];
+      return _backdropClasses[key];
     }
   });
 });