@mui/material 5.6.3 → 5.8.0

package/modern/TablePagination/TablePagination.js

@@ -30,7 +30,7 @@ const TablePaginationRoot = styled(TableCell, {
   theme
 }) => ({
   overflow: 'auto',
-  color: theme.palette.text.primary,
+  color: (theme.vars || theme).palette.text.primary,
   fontSize: theme.typography.pxToRem(14),
   // Increase the specificity to override TableCell.
   '&:last-child': {

package/modern/TableRow/TableRow.js

@@ -44,12 +44,12 @@ const TableRowRoot = styled('tr', {
   // We disable the focus ring for mouse, touch and keyboard users.
   outline: 0,
   [`&.${tableRowClasses.hover}:hover`]: {
-    backgroundColor: theme.palette.action.hover
+    backgroundColor: (theme.vars || theme).palette.action.hover
   },
   [`&.${tableRowClasses.selected}`]: {
-    backgroundColor: alpha(theme.palette.primary.main, theme.palette.action.selectedOpacity),
+    backgroundColor: theme.vars ? `rgba(${theme.vars.palette.primary.mainChannel} / ${theme.vars.palette.action.selectedOpacity})` : alpha(theme.palette.primary.main, theme.palette.action.selectedOpacity),
     '&:hover': {
-      backgroundColor: alpha(theme.palette.primary.main, theme.palette.action.selectedOpacity + theme.palette.action.hoverOpacity)
+      backgroundColor: theme.vars ? `rgba(${theme.vars.palette.primary.mainChannel} / calc(${theme.vars.palette.action.selectedOpacity} + ${theme.vars.palette.action.hoverOpacity}))` : alpha(theme.palette.primary.main, theme.palette.action.selectedOpacity + theme.palette.action.hoverOpacity)
     }
   }
 }));

package/modern/TableSortLabel/TableSortLabel.js

@@ -45,19 +45,19 @@ const TableSortLabelRoot = styled(ButtonBase, {
   flexDirection: 'inherit',
   alignItems: 'center',
   '&:focus': {
-    color: theme.palette.text.secondary
+    color: (theme.vars || theme).palette.text.secondary
   },
   '&:hover': {
-    color: theme.palette.text.secondary,
+    color: (theme.vars || theme).palette.text.secondary,
     [`& .${tableSortLabelClasses.icon}`]: {
       opacity: 0.5
     }
   },
   [`&.${tableSortLabelClasses.active}`]: {
-    color: theme.palette.text.primary,
+    color: (theme.vars || theme).palette.text.primary,
     [`& .${tableSortLabelClasses.icon}`]: {
       opacity: 1,
-      color: theme.palette.text.secondary
+      color: (theme.vars || theme).palette.text.secondary
     }
   }
 }));

package/modern/Tabs/Tabs.js

@@ -193,9 +193,9 @@ const TabsIndicator = styled('span', {
   width: '100%',
   transition: theme.transitions.create()
 }, ownerState.indicatorColor === 'primary' && {
-  backgroundColor: theme.palette.primary.main
+  backgroundColor: (theme.vars || theme).palette.primary.main
 }, ownerState.indicatorColor === 'secondary' && {
-  backgroundColor: theme.palette.secondary.main
+  backgroundColor: (theme.vars || theme).palette.secondary.main
 }, ownerState.vertical && {
   height: '100%',
   width: 2,

package/modern/ToggleButton/ToggleButton.js

@@ -42,35 +42,42 @@ const ToggleButtonRoot = styled(ButtonBase, {
   theme,
   ownerState
 }) => {
-  const selectedColor = ownerState.color === 'standard' ? theme.palette.text.primary : theme.palette[ownerState.color].main;
+  let selectedColor = ownerState.color === 'standard' ? theme.palette.text.primary : theme.palette[ownerState.color].main;
+  let selectedColorChannel;
+
+  if (theme.vars) {
+    selectedColor = ownerState.color === 'standard' ? theme.vars.palette.text.primary : theme.vars.palette[ownerState.color].main;
+    selectedColorChannel = ownerState.color === 'standard' ? theme.vars.palette.text.primaryChannel : theme.vars.palette[ownerState.color].mainChannel;
+  }
+
   return _extends({}, theme.typography.button, {
-    borderRadius: theme.shape.borderRadius,
+    borderRadius: (theme.vars || theme).shape.borderRadius,
     padding: 11,
-    border: `1px solid ${theme.palette.divider}`,
-    color: theme.palette.action.active
+    border: `1px solid ${(theme.vars || theme).palette.divider}`,
+    color: (theme.vars || theme).palette.action.active
   }, ownerState.fullWidth && {
     width: '100%'
   }, {
     [`&.${toggleButtonClasses.disabled}`]: {
-      color: theme.palette.action.disabled,
-      border: `1px solid ${theme.palette.action.disabledBackground}`
+      color: (theme.vars || theme).palette.action.disabled,
+      border: `1px solid ${(theme.vars || theme).palette.action.disabledBackground}`
     },
     '&:hover': {
       textDecoration: 'none',
       // Reset on mouse devices
-      backgroundColor: alpha(theme.palette.text.primary, theme.palette.action.hoverOpacity),
+      backgroundColor: theme.vars ? `rgba(${theme.vars.palette.text.primaryChannel} / ${theme.vars.palette.action.hoverOpacity})` : alpha(theme.palette.text.primary, theme.palette.action.hoverOpacity),
       '@media (hover: none)': {
         backgroundColor: 'transparent'
       }
     },
     [`&.${toggleButtonClasses.selected}`]: {
       color: selectedColor,
-      backgroundColor: alpha(selectedColor, theme.palette.action.selectedOpacity),
+      backgroundColor: theme.vars ? `rgba(${selectedColorChannel} / ${theme.vars.palette.action.selectedOpacity})` : alpha(selectedColor, theme.palette.action.selectedOpacity),
       '&:hover': {
-        backgroundColor: alpha(selectedColor, theme.palette.action.selectedOpacity + theme.palette.action.hoverOpacity),
+        backgroundColor: theme.vars ? `rgba(${selectedColorChannel} / calc(${theme.vars.palette.action.selectedOpacity} + ${theme.vars.palette.action.hoverOpacity}))` : alpha(selectedColor, theme.palette.action.selectedOpacity + theme.palette.action.hoverOpacity),
         // Reset on touch devices, it doesn't add specificity
         '@media (hover: none)': {
-          backgroundColor: alpha(selectedColor, theme.palette.action.selectedOpacity)
+          backgroundColor: theme.vars ? `rgba(${selectedColorChannel} / ${theme.vars.palette.action.selectedOpacity})` : alpha(selectedColor, theme.palette.action.selectedOpacity)
         }
       }
     }

package/modern/ToggleButtonGroup/ToggleButtonGroup.js

@@ -45,7 +45,7 @@ const ToggleButtonGroupRoot = styled('div', {
   theme
 }) => _extends({
   display: 'inline-flex',
-  borderRadius: theme.shape.borderRadius
+  borderRadius: (theme.vars || theme).shape.borderRadius
 }, ownerState.orientation === 'vertical' && {
   flexDirection: 'column'
 }, ownerState.fullWidth && {

package/modern/Tooltip/Tooltip.js

@@ -56,7 +56,7 @@ const TooltipPopper = styled(Popper, {
   ownerState,
   open
 }) => _extends({
-  zIndex: theme.zIndex.tooltip,
+  zIndex: (theme.vars || theme).zIndex.tooltip,
   pointerEvents: 'none'
 }, !ownerState.disableInteractive && {
   pointerEvents: 'auto'
@@ -117,9 +117,9 @@ const TooltipTooltip = styled('div', {
   theme,
   ownerState
 }) => _extends({
-  backgroundColor: alpha(theme.palette.grey[700], 0.92),
-  borderRadius: theme.shape.borderRadius,
-  color: theme.palette.common.white,
+  backgroundColor: theme.vars ? `rgba(${theme.vars.palette.grey.darkChannel} / 0.92)` : alpha(theme.palette.grey[700], 0.92),
+  borderRadius: (theme.vars || theme).shape.borderRadius,
+  color: (theme.vars || theme).palette.common.white,
   fontFamily: theme.typography.fontFamily,
   padding: '4px 8px',
   fontSize: theme.typography.pxToRem(11),
@@ -185,7 +185,7 @@ const TooltipArrow = styled('span', {
   /* = width / sqrt(2) = (length of the hypotenuse) */
   ,
   boxSizing: 'border-box',
-  color: alpha(theme.palette.grey[700], 0.9),
+  color: theme.vars ? `rgba(${theme.vars.palette.grey.darkChannel} / 0.9)` : alpha(theme.palette.grey[700], 0.9),
   '&::before': {
     content: '""',
     margin: 'auto',

package/modern/className/index.js

@@ -1,9 +1,2 @@
-/**
- * Caution! this module must not include unstyled components import from `@mui/base`, otherwise, it will break the ClassNameGenerator.
- * ❌ import { ... } from '@mui/base';
- * ✅ import { ... } from '@mui/base/utils'; // must be specific base module
- *
- * Issue: https://github.com/mui/material-ui/issues/30011#issuecomment-1024993401
- */
 // eslint-disable-next-line import/prefer-default-export
-export { unstable_ClassNameGenerator } from '@mui/base/className';
+export { unstable_ClassNameGenerator } from '@mui/utils';

package/modern/index.js

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

package/modern/locale/index.js

@@ -82,26 +82,26 @@ export const arEG = {
   components: {
     MuiBreadcrumbs: {
       defaultProps: {
-        expandText: 'ظهر العنوان'
+        expandText: 'إظهار المسار'
       }
     },
     MuiTablePagination: {
       defaultProps: {
         getItemAriaLabel: type => {
           if (type === 'first') {
-            return 'امش للصفحة الأولى';
+            return 'انتقل إلى الصفحة الأولى';
           }
 
           if (type === 'last') {
-            return 'امش للصفحة الأخيرة';
+            return 'انتقل إلى الصفحة الأخيرة';
           }
 
           if (type === 'next') {
-            return 'امش للصفحة التالية';
+            return 'انتقل إلى الصفحة التالية';
           } // if (type === 'previous') {
 
 
-          return 'امش للصفحة السابقة';
+          return 'انتقل إلى الصفحة السابقة';
         },
         labelRowsPerPage: 'عدد الصفوف في الصفحة:',
         labelDisplayedRows: ({
@@ -121,7 +121,7 @@ export const arEG = {
       defaultProps: {
         clearText: 'مسح',
         closeText: 'إغلاق',
-        loadingText: 'يتم التحميل…',
+        loadingText: 'جار التحميل...',
         noOptionsText: 'لا يوجد خيارات',
         openText: 'فتح'
       }
@@ -136,23 +136,23 @@ export const arEG = {
         'aria-label': 'التنقل عبر الصفحات',
         getItemAriaLabel: (type, page, selected) => {
           if (type === 'page') {
-            return `${selected ? '' : 'امش إلى '} صفحة ${page}`;
+            return `${selected ? '' : 'انتقل إلى '} صفحة ${page}`;
           }
 
           if (type === 'first') {
-            return 'امش للصفحة الأولى';
+            return 'انتقل إلى الصفحة الأولى';
           }
 
           if (type === 'last') {
-            return 'امش للصفحة الأخيرة';
+            return 'انتقل إلى الصفحة الأخيرة';
           }
 
           if (type === 'next') {
-            return 'امش للصفحة التالية';
+            return 'انتقل إلى الصفحة التالية';
           } // if (type === 'previous') {
 
 
-          return 'امش  للصفحة السابقة';
+          return 'انتقل  إلى الصفحة السابقة';
         }
       }
     }
@@ -162,26 +162,26 @@ export const arSD = {
   components: {
     MuiBreadcrumbs: {
       defaultProps: {
-        expandText: 'إظهر العنوان'
+        expandText: 'إظهار المسار'
       }
     },
     MuiTablePagination: {
       defaultProps: {
         getItemAriaLabel: type => {
           if (type === 'first') {
-            return 'إذهب الى الصفحة الأولى';
+            return 'انتقل إلى الصفحة الأولى';
           }
 
           if (type === 'last') {
-            return 'إذهب الي الصفحة الأخيرة';
+            return 'انتقل إلى الصفحة الأخيرة';
           }
 
           if (type === 'next') {
-            return 'إذهب الى الصفحة التالية';
+            return 'انتقل إلى الصفحة التالية';
           } // if (type === 'previous') {
 
 
-          return 'إذهب الى الصفحة السابقة';
+          return 'انتقل إلى الصفحة السابقة';
         },
         labelRowsPerPage: 'عدد الصفوف في الصفحة:',
         labelDisplayedRows: ({
@@ -201,7 +201,7 @@ export const arSD = {
       defaultProps: {
         clearText: 'مسح',
         closeText: 'إغلاق',
-        loadingText: 'يتم التحميل…',
+        loadingText: 'جار التحميل...',
         noOptionsText: 'لا يوجد خيارات',
         openText: 'فتح'
       }
@@ -216,23 +216,23 @@ export const arSD = {
         'aria-label': 'التنقل عبر الصفحات',
         getItemAriaLabel: (type, page, selected) => {
           if (type === 'page') {
-            return `${selected ? '' : 'إذهب إلى '} صفحة ${page}`;
+            return `${selected ? '' : 'انتقل إلى '} صفحة ${page}`;
           }
 
           if (type === 'first') {
-            return 'إذهب الى الصفحة الأولى';
+            return 'انتقل إلى الصفحة الأولى';
           }
 
           if (type === 'last') {
-            return 'إذهب الي الصفحة الأخيرة';
+            return 'انتقل الي الصفحة الأخيرة';
           }
 
           if (type === 'next') {
-            return 'إذهب الى الصفحة التالية';
+            return 'انتقل إلى الصفحة التالية';
           } // if (type === 'previous') {
 
 
-          return 'إذهب الى الصفحة السابقة';
+          return 'انتقل إلى الصفحة السابقة';
         }
       }
     }
@@ -619,7 +619,7 @@ export const csCZ = {
         'aria-label': 'Navigace stránkováním',
         getItemAriaLabel: (type, page, selected) => {
           if (type === 'page') {
-            return `${selected ? '' : 'Jít na '}${page} stránku`;
+            return `${selected ? '' : 'Jít na '}${page}. stránku`;
           }
 
           if (type === 'first') {

package/modern/styles/createMixins.js

@@ -1,5 +1,5 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
-export default function createMixins(breakpoints, spacing, mixins) {
+export default function createMixins(breakpoints, mixins) {
   return _extends({
     toolbar: {
       minHeight: 56,

package/modern/styles/createPalette.js

@@ -278,7 +278,8 @@ const theme2 = createTheme({ palette: {
 
   const paletteOutput = deepmerge(_extends({
     // A collection of common colors.
-    common,
+    common: _extends({}, common),
+    // prevent mutable object.
     // The palette mode, can be light or dark.
     mode,
     // The colors used to represent primary interface elements for a user.

package/modern/styles/createTheme.js

@@ -23,7 +23,7 @@ function createTheme(options = {}, ...args) {
   const palette = createPalette(paletteInput);
   const systemTheme = systemCreateTheme(options);
   let muiTheme = deepmerge(systemTheme, {
-    mixins: createMixins(systemTheme.breakpoints, systemTheme.spacing, mixinsInput),
+    mixins: createMixins(systemTheme.breakpoints, mixinsInput),
     palette,
     // Don't use [...shadows] until you've verified its transpiled code is not invoking the iterator protocol.
     shadows: shadows.slice(),

package/modern/styles/experimental_extendTheme.js

@@ -1,34 +1,23 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["colorSchemes", "opacity"],
+const _excluded = ["colorSchemes"],
       _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) {
+export default function extendTheme(options = {}, ...args) {
   const {
-    colorSchemes: colorSchemesInput = {},
-    opacity: opacityInput = {}
+    colorSchemes: colorSchemesInput = {}
   } = options,
-        input = _objectWithoutPropertiesLoose(options, _excluded); // eslint-disable-next-line prefer-const
-
+        input = _objectWithoutPropertiesLoose(options, _excluded);
 
-  let _createThemeWithoutVa = createThemeWithoutVars(_extends({}, input, colorSchemesInput.light && {
+  const _createThemeWithoutVa = createThemeWithoutVars(_extends({}, input, colorSchemesInput.light && {
     palette: colorSchemesInput.light?.palette
   })),
-      {
+        {
     palette: lightPalette
   } = _createThemeWithoutVa,
-      muiTheme = _objectWithoutPropertiesLoose(_createThemeWithoutVa, _excluded2);
+        muiTheme = _objectWithoutPropertiesLoose(_createThemeWithoutVa, _excluded2);
 
   const {
     palette: darkPalette
@@ -37,17 +26,48 @@ function createTheme(options = {}, ...args) {
       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);
+
+  let theme = _extends({}, muiTheme, {
+    colorSchemes: _extends({}, colorSchemesInput, {
+      light: _extends({}, colorSchemesInput.light, {
+        palette: lightPalette,
+        opacity: _extends({
+          placeholder: 0.42,
+          inputTouchBottomLine: 0.42
+        }, colorSchemesInput.light?.opacity)
+      }),
+      dark: _extends({}, colorSchemesInput.dark, {
+        palette: darkPalette,
+        opacity: _extends({
+          placeholder: 0.5,
+          inputTouchBottomLine: 0.7
+        }, colorSchemesInput.dark?.opacity)
+      })
+    })
+  });
+
+  Object.keys(theme.colorSchemes).forEach(key => {
+    const palette = theme.colorSchemes[key].palette; // attach black & white channels to common node
+
+    if (key === 'dark') {
+      palette.common.background = palette.common.background || '#000';
+      palette.common.onBackground = palette.common.onBackground || '#fff';
+    } else {
+      palette.common.background = palette.common.background || '#fff';
+      palette.common.onBackground = palette.common.onBackground || '#000';
+    }
+
+    palette.common.backgroundChannel = colorChannel(palette.common.background);
+    palette.common.onBackgroundChannel = colorChannel(palette.common.onBackground);
+    palette.dividerChannel = colorChannel(palette.divider); // special token for Tooltip
+    // TODO: consider adding `main`, and `light` to palette.grey to make it consistent.
+
+    if (!palette.grey.dark) {
+      palette.grey.dark = palette.grey[700];
+    }
+
     Object.keys(palette).forEach(color => {
-      const colors = palette[color];
+      const colors = palette[color]; // Color palettes: primary, secondary, error, info, success, and warning
 
       if (colors.main) {
         palette[color].mainChannel = colorChannel(colors.main);
@@ -61,6 +81,11 @@ function createTheme(options = {}, ...args) {
         palette[color].darkChannel = colorChannel(colors.dark);
       }
 
+      if (colors.contrastText) {
+        palette[color].contrastTextChannel = colorChannel(colors.contrastText);
+      } // Text colors: text.primary, text.secondary
+
+
       if (colors.primary) {
         palette[color].primaryChannel = colorChannel(colors.primary);
       }
@@ -68,22 +93,8 @@ function createTheme(options = {}, ...args) {
       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;
+  theme = args.reduce((acc, argument) => deepmerge(acc, argument), theme);
+  return theme;
+}

package/node/Accordion/Accordion.js

@@ -90,7 +90,7 @@ const AccordionRoot = (0, _styled.default)(_Paper.default, {
       height: 1,
       content: '""',
       opacity: 1,
-      backgroundColor: theme.palette.divider,
+      backgroundColor: (theme.vars || theme).palette.divider,
       transition: theme.transitions.create(['opacity', 'background-color'], transition)
     },
     '&:first-of-type': {
@@ -115,7 +115,7 @@ const AccordionRoot = (0, _styled.default)(_Paper.default, {
       }
     },
     [`&.${_accordionClasses.default.disabled}`]: {
-      backgroundColor: theme.palette.action.disabledBackground
+      backgroundColor: (theme.vars || theme).palette.action.disabledBackground
     }
   };
 }, ({
@@ -124,12 +124,12 @@ const AccordionRoot = (0, _styled.default)(_Paper.default, {
 }) => (0, _extends2.default)({}, !ownerState.square && {
   borderRadius: 0,
   '&:first-of-type': {
-    borderTopLeftRadius: theme.shape.borderRadius,
-    borderTopRightRadius: theme.shape.borderRadius
+    borderTopLeftRadius: (theme.vars || theme).shape.borderRadius,
+    borderTopRightRadius: (theme.vars || theme).shape.borderRadius
   },
   '&:last-of-type': {
-    borderBottomLeftRadius: theme.shape.borderRadius,
-    borderBottomRightRadius: theme.shape.borderRadius,
+    borderBottomLeftRadius: (theme.vars || theme).shape.borderRadius,
+    borderBottomRightRadius: (theme.vars || theme).shape.borderRadius,
     // Fix a rendering issue on Edge
     '@supports (-ms-ime-align: auto)': {
       borderBottomLeftRadius: 0,

package/node/AccordionSummary/AccordionSummary.js

@@ -70,10 +70,10 @@ const AccordionSummaryRoot = (0, _styled.default)(_ButtonBase.default, {
     padding: theme.spacing(0, 2),
     transition: theme.transitions.create(['min-height', 'background-color'], transition),
     [`&.${_accordionSummaryClasses.default.focusVisible}`]: {
-      backgroundColor: theme.palette.action.focus
+      backgroundColor: (theme.vars || theme).palette.action.focus
     },
     [`&.${_accordionSummaryClasses.default.disabled}`]: {
-      opacity: theme.palette.action.disabledOpacity
+      opacity: (theme.vars || theme).palette.action.disabledOpacity
     },
     [`&:hover:not(.${_accordionSummaryClasses.default.disabled})`]: {
       cursor: 'pointer'
@@ -111,7 +111,7 @@ const AccordionSummaryExpandIconWrapper = (0, _styled.default)('div', {
   theme
 }) => ({
   display: 'flex',
-  color: theme.palette.action.active,
+  color: (theme.vars || theme).palette.action.active,
   transform: 'rotate(0deg)',
   transition: theme.transitions.create('transform', {
     duration: theme.transitions.duration.shortest