@mui/material 5.1.1 → 5.2.0

package/node/IconButton/IconButton.js

@@ -78,7 +78,8 @@ const IconButtonRoot = (0, _styled.default)(_ButtonBase.default, {
   color: theme.palette.action.active,
   transition: theme.transitions.create('background-color', {
     duration: theme.transitions.duration.shortest
-  }),
+  })
+}, !ownerState.disableRipple && {
   '&:hover': {
     backgroundColor: (0, _system.alpha)(theme.palette.action.active, theme.palette.action.hoverOpacity),
     // Reset on touch devices, it doesn't add specificity
@@ -95,8 +96,9 @@ const IconButtonRoot = (0, _styled.default)(_ButtonBase.default, {
   ownerState
 }) => (0, _extends2.default)({}, ownerState.color === 'inherit' && {
   color: 'inherit'
-}, ownerState.color !== 'inherit' && ownerState.color !== 'default' && {
-  color: theme.palette[ownerState.color].main,
+}, ownerState.color !== 'inherit' && ownerState.color !== 'default' && (0, _extends2.default)({
+  color: theme.palette[ownerState.color].main
+}, !ownerState.disableRipple && {
   '&:hover': {
     backgroundColor: (0, _system.alpha)(theme.palette[ownerState.color].main, theme.palette.action.hoverOpacity),
     // Reset on touch devices, it doesn't add specificity
@@ -104,7 +106,7 @@ const IconButtonRoot = (0, _styled.default)(_ButtonBase.default, {
       backgroundColor: 'transparent'
     }
   }
-}, ownerState.size === 'small' && {
+}), ownerState.size === 'small' && {
   padding: 5,
   fontSize: theme.typography.pxToRem(18)
 }, ownerState.size === 'large' && {

package/node/Popper/Popper.js

@@ -45,11 +45,6 @@ const Popper = /*#__PURE__*/React.forwardRef(function Popper(props, ref) {
     ref: ref
   }));
 });
-
-function resolveAnchorEl(anchorEl) {
-  return typeof anchorEl === 'function' ? anchorEl() : anchorEl;
-}
-
 process.env.NODE_ENV !== "production" ? Popper.propTypes
 /* remove-proptypes */
 = {
@@ -64,23 +59,9 @@ process.env.NODE_ENV !== "production" ? Popper.propTypes
    * It's used to set the position of the popper.
    * The return value will passed as the reference object of the Popper instance.
    */
-  anchorEl: (0, _utils.chainPropTypes)(_propTypes.default.oneOfType([_utils.HTMLElementType, _propTypes.default.object, _propTypes.default.func]), props => {
-    if (props.open) {
-      const resolvedAnchorEl = resolveAnchorEl(props.anchorEl);
-
-      if (resolvedAnchorEl && resolvedAnchorEl.nodeType === 1) {
-        const box = resolvedAnchorEl.getBoundingClientRect();
-
-        if (process.env.NODE_ENV !== 'test' && box.top === 0 && box.left === 0 && box.right === 0 && box.bottom === 0) {
-          return new Error(['MUI: The `anchorEl` prop provided to the component is invalid.', 'The anchor element should be part of the document layout.', "Make sure the element is present in the document or that it's not display none."].join('\n'));
-        }
-      } else if (!resolvedAnchorEl || typeof resolvedAnchorEl.getBoundingClientRect !== 'function' || resolvedAnchorEl.contextElement != null && resolvedAnchorEl.contextElement.nodeType !== 1) {
-        return new Error(['MUI: The `anchorEl` prop provided to the component is invalid.', 'It should be an HTML element instance or a virtualElement ', '(https://popper.js.org/docs/v2/virtual-elements/).'].join('\n'));
-      }
-    }
-
-    return null;
-  }),
+  anchorEl: _propTypes.default
+  /* @typescript-to-proptypes-ignore */
+  .oneOfType([_utils.HTMLElementType, _propTypes.default.object, _propTypes.default.func]),
 
   /**
    * Popper render function or node.

package/node/Select/SelectInput.js

@@ -399,7 +399,7 @@ const SelectInput = /*#__PURE__*/React.forwardRef(function SelectInput(props, re
     }
 
     return /*#__PURE__*/React.cloneElement(child, {
-      'aria-selected': selected ? 'true' : undefined,
+      'aria-selected': selected ? 'true' : 'false',
       onClick: handleItemClick(child),
       onKeyUp: event => {
         if (event.key === ' ') {

package/node/index.js

@@ -1,4 +1,4 @@
-/** @license MUI v5.1.1
+/** @license MUI v5.2.0
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.

package/node/locale/index.js

@@ -3,7 +3,88 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.zhTW = exports.zhHK = exports.zhCN = exports.viVN = exports.ukUA = exports.trTR = exports.thTH = exports.svSE = exports.skSK = exports.siLK = exports.ruRU = exports.roRO = exports.ptPT = exports.ptBR = exports.plPL = exports.nlNL = exports.kzKZ = exports.koKR = exports.khKH = exports.jaJP = exports.itIT = exports.isIS = exports.idID = exports.hyAM = exports.huHU = exports.hiIN = exports.heIL = exports.frFR = exports.fiFI = exports.faIR = exports.etEE = exports.esES = exports.enUS = exports.elGR = exports.deDE = exports.csCZ = exports.caES = exports.bnBD = exports.bgBG = exports.azAZ = exports.arSD = exports.arEG = void 0;
+exports.zhTW = exports.zhHK = exports.zhCN = exports.viVN = exports.ukUA = exports.trTR = exports.thTH = exports.svSE = exports.skSK = exports.siLK = exports.ruRU = exports.roRO = exports.ptPT = exports.ptBR = exports.plPL = exports.nlNL = exports.kzKZ = exports.koKR = exports.khKH = exports.jaJP = exports.itIT = exports.isIS = exports.idID = exports.hyAM = exports.huHU = exports.hiIN = exports.heIL = exports.frFR = exports.fiFI = exports.faIR = exports.etEE = exports.esES = exports.enUS = exports.elGR = exports.deDE = exports.csCZ = exports.caES = exports.bnBD = exports.bgBG = exports.azAZ = exports.arSD = exports.arEG = exports.amET = void 0;
+const amET = {
+  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 => `${value} ኮከ${value !== 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}${selected ? '' : ' ሂድ'}`;
+          }
+
+          if (type === 'first') {
+            return 'ወደ መጀመሪያው ገጽ ይሂዱ';
+          }
+
+          if (type === 'last') {
+            return 'ወደ መጨረሻው ገጽ ይሂዱ';
+          }
+
+          if (type === 'next') {
+            return 'ወደ ቀጣዩ ገጽ ይሂዱ';
+          } // if (type === 'previous') {
+
+
+          return 'ወደ ቀዳሚው ገጽ ይሂዱ';
+        }
+      }
+    }
+  }
+};
+exports.amET = amET;
 const arEG = {
   components: {
     MuiBreadcrumbs: {

package/node/useMediaQuery/useMediaQuery.js

@@ -17,32 +17,8 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 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; }
 
-function useMediaQuery(queryInput, options = {}) {
-  const theme = (0, _system.useThemeWithoutDefault)(); // Wait for jsdom to support the match media feature.
-  // All the browsers MUI support have this built-in.
-  // This defensive check is here for simplicity.
-  // Most of the time, the match media logic isn't central to people tests.
-
+function useMediaQueryOld(query, defaultMatches, matchMedia, ssrMatchMedia, noSsr) {
   const supportMatchMedia = typeof window !== 'undefined' && typeof window.matchMedia !== 'undefined';
-  const {
-    defaultMatches = false,
-    matchMedia = supportMatchMedia ? window.matchMedia : null,
-    noSsr = false,
-    ssrMatchMedia = null
-  } = (0, _system.getThemeProps)({
-    name: 'MuiUseMediaQuery',
-    props: options,
-    theme
-  });
-
-  if (process.env.NODE_ENV !== 'production') {
-    if (typeof queryInput === 'function' && theme === null) {
-      console.error(['MUI: The `query` argument provided is invalid.', 'You are providing a function without a theme in the context.', 'One of the parent elements needs to use a ThemeProvider.'].join('\n'));
-    }
-  }
-
-  let query = typeof queryInput === 'function' ? queryInput(theme) : queryInput;
-  query = query.replace(/^@media( ?)/m, '');
   const [match, setMatch] = React.useState(() => {
     if (noSsr && supportMatchMedia) {
       return matchMedia(query).matches;
@@ -74,13 +50,76 @@ function useMediaQuery(queryInput, options = {}) {
       }
     };
 
-    updateMatch();
+    updateMatch(); // TODO: Use `addEventListener` once support for Safari < 14 is dropped
+
     queryList.addListener(updateMatch);
     return () => {
       active = false;
       queryList.removeListener(updateMatch);
     };
   }, [query, matchMedia, supportMatchMedia]);
+  return match;
+}
+
+function useMediaQueryNew(query, defaultMatches, matchMedia, ssrMatchMedia) {
+  const getDefaultSnapshot = React.useCallback(() => defaultMatches, [defaultMatches]);
+  const getServerSnapshot = React.useMemo(() => {
+    if (ssrMatchMedia !== null) {
+      const {
+        matches
+      } = ssrMatchMedia(query);
+      return () => matches;
+    }
+
+    return getDefaultSnapshot;
+  }, [getDefaultSnapshot, query, ssrMatchMedia]);
+  const [getSnapshot, subscribe] = React.useMemo(() => {
+    if (matchMedia === null) {
+      return [getDefaultSnapshot, () => () => {}];
+    }
+
+    const mediaQueryList = matchMedia(query);
+    return [() => mediaQueryList.matches, notify => {
+      // TODO: Use `addEventListener` once support for Safari < 14 is dropped
+      mediaQueryList.addListener(notify);
+      return () => {
+        mediaQueryList.removeListener(notify);
+      };
+    }];
+  }, [getDefaultSnapshot, matchMedia, query]);
+  const match = React.useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
+  return match;
+}
+
+function useMediaQuery(queryInput, options = {}) {
+  const theme = (0, _system.useThemeWithoutDefault)(); // Wait for jsdom to support the match media feature.
+  // All the browsers MUI support have this built-in.
+  // This defensive check is here for simplicity.
+  // Most of the time, the match media logic isn't central to people tests.
+
+  const supportMatchMedia = typeof window !== 'undefined' && typeof window.matchMedia !== 'undefined';
+  const {
+    defaultMatches = false,
+    matchMedia = supportMatchMedia ? window.matchMedia : null,
+    ssrMatchMedia = null,
+    noSsr
+  } = (0, _system.getThemeProps)({
+    name: 'MuiUseMediaQuery',
+    props: options,
+    theme
+  });
+
+  if (process.env.NODE_ENV !== 'production') {
+    if (typeof queryInput === 'function' && theme === null) {
+      console.error(['MUI: The `query` argument provided is invalid.', 'You are providing a function without a theme in the context.', 'One of the parent elements needs to use a ThemeProvider.'].join('\n'));
+    }
+  }
+
+  let query = typeof queryInput === 'function' ? queryInput(theme) : queryInput;
+  query = query.replace(/^@media( ?)/m, ''); // TODO: Drop `useMediaQueryOld` and use  `use-sync-external-store` shim in `useMediaQueryNew` once the package is stable
+
+  const useMediaQueryImplementation = React.useSyncExternalStore !== undefined ? useMediaQueryNew : useMediaQueryOld;
+  const match = useMediaQueryImplementation(query, defaultMatches, matchMedia, ssrMatchMedia, noSsr);
 
   if (process.env.NODE_ENV !== 'production') {
     // eslint-disable-next-line react-hooks/rules-of-hooks

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/material",
-  "version": "5.1.1",
+  "version": "5.2.0",
   "private": false,
   "author": "MUI Team",
   "description": "Quickly build beautiful React apps. MUI is a simple and customizable component library to build faster, beautiful, and more accessible React applications. Follow your own design system, or start with Material Design.",
@@ -46,13 +46,13 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.16.3",
-    "@mui/base": "5.0.0-alpha.55",
-    "@mui/system": "^5.1.1",
+    "@mui/base": "5.0.0-alpha.56",
+    "@mui/system": "^5.2.0",
     "@mui/types": "^7.1.0",
-    "@mui/utils": "^5.1.1",
+    "@mui/utils": "^5.2.0",
     "@types/react-transition-group": "^4.4.4",
     "clsx": "^1.1.1",
-    "csstype": "^3.0.9",
+    "csstype": "^3.0.10",
     "hoist-non-react-statics": "^3.3.2",
     "prop-types": "^15.7.2",
     "react-is": "^17.0.2",

package/styles/variants.d.ts

@@ -1,9 +1,10 @@
-import { CSSInterpolation } from '@mui/system';
+import { Interpolation } from '@mui/system';
+import { Theme } from './createTheme';
 import { ComponentsPropsList } from './props';
 
 export type ComponentsVariants = {
   [Name in keyof ComponentsPropsList]?: Array<{
     props: Partial<ComponentsPropsList[Name]>;
-    style: CSSInterpolation;
+    style: Interpolation<{ theme: Theme }>;
   }>;
 };

package/transitions/index.d.ts

@@ -1 +1 @@
-export * from './transition';
+export * from './transition';

package/transitions/transition.d.ts

@@ -1,14 +1,14 @@
-import { TransitionProps as _TransitionProps, TransitionActions } from 'react-transition-group/Transition';
-import * as React from 'react';
-export declare type TransitionHandlerKeys = 'onEnter' | 'onEntering' | 'onEntered' | 'onExit' | 'onExiting' | 'onExited';
-export declare type TransitionHandlerProps = Pick<_TransitionProps, TransitionHandlerKeys>;
-export interface EasingProps {
-    easing: string | {
-        enter?: string;
-        exit?: string;
-    };
-}
-export declare type TransitionKeys = 'in' | 'mountOnEnter' | 'unmountOnExit' | 'timeout' | 'easing' | 'addEndListener' | TransitionHandlerKeys;
-export interface TransitionProps extends TransitionActions, Partial<Pick<_TransitionProps & EasingProps, TransitionKeys>> {
-    style?: React.CSSProperties;
-}
+import { TransitionProps as _TransitionProps, TransitionActions } from 'react-transition-group/Transition';
+import * as React from 'react';
+export declare type TransitionHandlerKeys = 'onEnter' | 'onEntering' | 'onEntered' | 'onExit' | 'onExiting' | 'onExited';
+export declare type TransitionHandlerProps = Pick<_TransitionProps, TransitionHandlerKeys>;
+export interface EasingProps {
+    easing: string | {
+        enter?: string;
+        exit?: string;
+    };
+}
+export declare type TransitionKeys = 'in' | 'mountOnEnter' | 'unmountOnExit' | 'timeout' | 'easing' | 'addEndListener' | TransitionHandlerKeys;
+export interface TransitionProps extends TransitionActions, Partial<Pick<_TransitionProps & EasingProps, TransitionKeys>> {
+    style?: React.CSSProperties;
+}

package/transitions/utils.d.ts

@@ -1,23 +1,23 @@
-import * as React from 'react';
-export declare const reflow: (node: Element) => number;
-interface ComponentProps {
-    easing: string | {
-        enter?: string;
-        exit?: string;
-    } | undefined;
-    style: React.CSSProperties | undefined;
-    timeout: number | {
-        enter?: number;
-        exit?: number;
-    };
-}
-interface Options {
-    mode: 'enter' | 'exit';
-}
-interface TransitionProps {
-    duration: string | number;
-    easing: string | undefined;
-    delay: string | undefined;
-}
-export declare function getTransitionProps(props: ComponentProps, options: Options): TransitionProps;
-export {};
+import * as React from 'react';
+export declare const reflow: (node: Element) => number;
+interface ComponentProps {
+    easing: string | {
+        enter?: string;
+        exit?: string;
+    } | undefined;
+    style: React.CSSProperties | undefined;
+    timeout: number | {
+        enter?: number;
+        exit?: number;
+    };
+}
+interface Options {
+    mode: 'enter' | 'exit';
+}
+interface TransitionProps {
+    duration: string | number;
+    easing: string | undefined;
+    delay: string | undefined;
+}
+export declare function getTransitionProps(props: ComponentProps, options: Options): TransitionProps;
+export {};