@mui/material 6.0.0-alpha.0 → 6.0.0-alpha.2

package/Select/Select.d.ts

@@ -151,7 +151,8 @@ export interface BaseSelectProps<Value = unknown>
   variant?: SelectVariants;
 }
 
-export interface FilledSelectProps extends Omit<FilledInputProps, 'value' | 'onChange'> {
+export interface FilledSelectProps
+  extends Omit<FilledInputProps, 'value' | 'onChange' | 'id' | 'classes' | 'inputProps'> {
   /**
    * The variant to use.
    * @default 'outlined'
@@ -159,7 +160,8 @@ export interface FilledSelectProps extends Omit<FilledInputProps, 'value' | 'onC
   variant: 'filled';
 }
 
-export interface StandardSelectProps extends Omit<InputProps, 'value' | 'onChange'> {
+export interface StandardSelectProps
+  extends Omit<InputProps, 'value' | 'onChange' | 'id' | 'classes' | 'inputProps'> {
   /**
    * The variant to use.
    * @default 'outlined'
@@ -167,7 +169,8 @@ export interface StandardSelectProps extends Omit<InputProps, 'value' | 'onChang
   variant: 'standard';
 }
 
-export interface OutlinedSelectProps extends Omit<OutlinedInputProps, 'value' | 'onChange'> {
+export interface OutlinedSelectProps
+  extends Omit<OutlinedInputProps, 'value' | 'onChange' | 'id' | 'classes' | 'inputProps'> {
   /**
    * The variant to use.
    * @default 'outlined'
@@ -193,8 +196,8 @@ export type SelectProps<Value = unknown> =
  * - [Select API](https://mui.com/material-ui/api/select/)
  * - inherits [OutlinedInput API](https://mui.com/material-ui/api/outlined-input/)
  */
-export default function Select<Value = unknown>(
-  props: SelectProps<Value>,
-): JSX.Element & {
+declare const Select: (<Value = unknown>(props: SelectProps<Value>) => JSX.Element) & {
   muiName: string;
 };
+
+export default Select;

package/Slider/Slider.js

@@ -279,27 +279,7 @@ export const SliderThumb = styled('span', {
       boxShadow: 'none'
     }
   },
-  variants: [...Object.keys((theme.vars ?? theme).palette).filter(key => (theme.vars ?? theme).palette[key].main).map(color => ({
-    props: {
-      color
-    },
-    style: {
-      [`&:hover, &.${sliderClasses.focusVisible}`]: _extends({}, theme.vars ? {
-        boxShadow: `0px 0px 0px 8px rgba(${theme.vars.palette[color].mainChannel} / 0.16)`
-      } : {
-        boxShadow: `0px 0px 0px 8px ${alpha(theme.palette[color].main, 0.16)}`
-      }, {
-        '@media (hover: none)': {
-          boxShadow: 'none'
-        }
-      }),
-      [`&.${sliderClasses.active}`]: _extends({}, theme.vars ? {
-        boxShadow: `0px 0px 0px 14px rgba(${theme.vars.palette[color].mainChannel} / 0.16)}`
-      } : {
-        boxShadow: `0px 0px 0px 14px ${alpha(theme.palette[color].main, 0.16)}`
-      })
-    }
-  })), {
+  variants: [{
     props: {
       size: 'small'
     },
@@ -326,7 +306,27 @@ export const SliderThumb = styled('span', {
       left: '50%',
       transform: 'translate(-50%, 50%)'
     }
-  }]
+  }, ...Object.keys((theme.vars ?? theme).palette).filter(key => (theme.vars ?? theme).palette[key].main).map(color => ({
+    props: {
+      color
+    },
+    style: {
+      [`&:hover, &.${sliderClasses.focusVisible}`]: _extends({}, theme.vars ? {
+        boxShadow: `0px 0px 0px 8px rgba(${theme.vars.palette[color].mainChannel} / 0.16)`
+      } : {
+        boxShadow: `0px 0px 0px 8px ${alpha(theme.palette[color].main, 0.16)}`
+      }, {
+        '@media (hover: none)': {
+          boxShadow: 'none'
+        }
+      }),
+      [`&.${sliderClasses.active}`]: _extends({}, theme.vars ? {
+        boxShadow: `0px 0px 0px 14px rgba(${theme.vars.palette[color].mainChannel} / 0.16)}`
+      } : {
+        boxShadow: `0px 0px 0px 14px ${alpha(theme.palette[color].main, 0.16)}`
+      })
+    }
+  }))]
 }));
 export const SliderValueLabel = styled(BaseSliderValueLabel, {
   name: 'MuiSlider',

package/Table/Table.d.ts

@@ -28,8 +28,6 @@ export interface TableOwnProps {
   size?: OverridableStringUnion<'small' | 'medium', TablePropsSizeOverrides>;
   /**
    * Set the header sticky.
-   *
-   * ⚠️ It doesn't work with IE11.
    * @default false
    */
   stickyHeader?: boolean;

package/Table/Table.js

@@ -119,8 +119,6 @@ process.env.NODE_ENV !== "production" ? Table.propTypes /* remove-proptypes */ =
   size: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.oneOf(['medium', 'small']), PropTypes.string]),
   /**
    * Set the header sticky.
-   *
-   * ⚠️ It doesn't work with IE11.
    * @default false
    */
   stickyHeader: PropTypes.bool,

package/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/material v6.0.0-alpha.0
+ * @mui/material v6.0.0-alpha.2
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/legacy/AppBar/AppBar.js

@@ -2,16 +2,17 @@
 
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 import _extends from "@babel/runtime/helpers/esm/extends";
+import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import composeClasses from '@mui/utils/composeClasses';
-import styled from '../styles/styled';
-import useThemeProps from '../styles/useThemeProps';
+import { styled, createUseThemeProps } from '../zero-styled';
 import capitalize from '../utils/capitalize';
 import Paper from '../Paper';
 import { getAppBarUtilityClass } from './appBarClasses';
 import { jsx as _jsx } from "react/jsx-runtime";
+var useThemeProps = createUseThemeProps('MuiAppBar');
 var useUtilityClasses = function useUtilityClasses(ownerState) {
   var color = ownerState.color,
     position = ownerState.position,
@@ -35,73 +36,132 @@ var AppBarRoot = styled(Paper, {
     return [styles.root, styles["position".concat(capitalize(ownerState.position))], styles["color".concat(capitalize(ownerState.color))]];
   }
 })(function (_ref) {
-  var theme = _ref.theme,
-    ownerState = _ref.ownerState;
-  var backgroundColorDefault = theme.palette.mode === 'light' ? theme.palette.grey[100] : theme.palette.grey[900];
-  return _extends({
+  var _theme$vars;
+  var theme = _ref.theme;
+  return {
     display: 'flex',
     flexDirection: 'column',
     width: '100%',
     boxSizing: 'border-box',
     // Prevent padding issue with the Modal and fixed positioned AppBar.
-    flexShrink: 0
-  }, ownerState.position === 'fixed' && {
-    position: 'fixed',
-    zIndex: (theme.vars || theme).zIndex.appBar,
-    top: 0,
-    left: 'auto',
-    right: 0,
-    '@media print': {
-      // Prevent the app bar to be visible on each printed page.
-      position: 'absolute'
-    }
-  }, ownerState.position === 'absolute' && {
-    position: 'absolute',
-    zIndex: (theme.vars || theme).zIndex.appBar,
-    top: 0,
-    left: 'auto',
-    right: 0
-  }, ownerState.position === 'sticky' && {
-    // ⚠️ sticky is not supported by IE11.
-    position: 'sticky',
-    zIndex: (theme.vars || theme).zIndex.appBar,
-    top: 0,
-    left: 'auto',
-    right: 0
-  }, ownerState.position === 'static' && {
-    position: 'static'
-  }, ownerState.position === 'relative' && {
-    position: 'relative'
-  }, !theme.vars && _extends({}, ownerState.color === 'default' && {
-    backgroundColor: backgroundColorDefault,
-    color: theme.palette.getContrastText(backgroundColorDefault)
-  }, ownerState.color && ownerState.color !== 'default' && ownerState.color !== 'inherit' && ownerState.color !== 'transparent' && {
-    backgroundColor: theme.palette[ownerState.color].main,
-    color: theme.palette[ownerState.color].contrastText
-  }, ownerState.color === 'inherit' && {
-    color: 'inherit'
-  }, theme.palette.mode === 'dark' && !ownerState.enableColorOnDark && {
-    backgroundColor: null,
-    color: null
-  }, ownerState.color === 'transparent' && _extends({
-    backgroundColor: 'transparent',
-    color: 'inherit'
-  }, theme.palette.mode === 'dark' && {
-    backgroundImage: 'none'
-  })), theme.vars && _extends({}, ownerState.color === 'default' && {
-    '--AppBar-background': ownerState.enableColorOnDark ? theme.vars.palette.AppBar.defaultBg : joinVars(theme.vars.palette.AppBar.darkBg, theme.vars.palette.AppBar.defaultBg),
-    '--AppBar-color': ownerState.enableColorOnDark ? theme.vars.palette.text.primary : joinVars(theme.vars.palette.AppBar.darkColor, theme.vars.palette.text.primary)
-  }, ownerState.color && !ownerState.color.match(/^(default|inherit|transparent)$/) && {
-    '--AppBar-background': ownerState.enableColorOnDark ? theme.vars.palette[ownerState.color].main : joinVars(theme.vars.palette.AppBar.darkBg, theme.vars.palette[ownerState.color].main),
-    '--AppBar-color': ownerState.enableColorOnDark ? theme.vars.palette[ownerState.color].contrastText : joinVars(theme.vars.palette.AppBar.darkColor, theme.vars.palette[ownerState.color].contrastText)
-  }, {
-    backgroundColor: 'var(--AppBar-background)',
-    color: ownerState.color === 'inherit' ? 'inherit' : 'var(--AppBar-color)'
-  }, ownerState.color === 'transparent' && {
-    backgroundImage: 'none',
-    backgroundColor: 'transparent',
-    color: 'inherit'
-  }));
+    flexShrink: 0,
+    variants: [{
+      props: {
+        position: 'fixed'
+      },
+      style: {
+        position: 'fixed',
+        zIndex: (theme.vars || theme).zIndex.appBar,
+        top: 0,
+        left: 'auto',
+        right: 0,
+        '@media print': {
+          // Prevent the app bar to be visible on each printed page.
+          position: 'absolute'
+        }
+      }
+    }, {
+      props: {
+        position: 'absolute'
+      },
+      style: {
+        position: 'absolute',
+        zIndex: (theme.vars || theme).zIndex.appBar,
+        top: 0,
+        left: 'auto',
+        right: 0
+      }
+    }, {
+      props: {
+        position: 'sticky'
+      },
+      style: {
+        // ⚠️ sticky is not supported by IE11.
+        position: 'sticky',
+        zIndex: (theme.vars || theme).zIndex.appBar,
+        top: 0,
+        left: 'auto',
+        right: 0
+      }
+    }, {
+      props: {
+        position: 'static'
+      },
+      style: {
+        position: 'static'
+      }
+    }, {
+      props: {
+        position: 'relative'
+      },
+      style: {
+        position: 'relative'
+      }
+    }, {
+      props: {
+        color: 'inherit'
+      },
+      style: {
+        '--AppBar-color': 'inherit'
+      }
+    }, {
+      props: {
+        color: 'default'
+      },
+      style: _extends({
+        '--AppBar-background': theme.vars ? theme.vars.palette.AppBar.defaultBg : theme.palette.grey[100],
+        '--AppBar-color': theme.vars ? theme.vars.palette.text.primary : theme.palette.getContrastText(theme.palette.grey[100])
+      }, theme.applyStyles('dark', {
+        '--AppBar-background': theme.vars ? theme.vars.palette.AppBar.defaultBg : theme.palette.grey[900],
+        '--AppBar-color': theme.vars ? theme.vars.palette.text.primary : theme.palette.getContrastText(theme.palette.grey[900])
+      }))
+    }].concat(_toConsumableArray(Object.keys(((_theme$vars = theme.vars) != null ? _theme$vars : theme).palette).filter(function (key) {
+      var _theme$vars2, _theme$vars3;
+      return ((_theme$vars2 = theme.vars) != null ? _theme$vars2 : theme).palette[key].main && ((_theme$vars3 = theme.vars) != null ? _theme$vars3 : theme).palette[key].contrastText;
+    }).map(function (color) {
+      var _theme$vars4, _theme$vars5;
+      return {
+        props: {
+          color: color
+        },
+        style: {
+          '--AppBar-background': ((_theme$vars4 = theme.vars) != null ? _theme$vars4 : theme).palette[color].main,
+          '--AppBar-color': ((_theme$vars5 = theme.vars) != null ? _theme$vars5 : theme).palette[color].contrastText
+        }
+      };
+    })), [{
+      props: {
+        enableColorOnDark: true
+      },
+      style: {
+        backgroundColor: 'var(--AppBar-background)',
+        color: 'var(--AppBar-color)'
+      }
+    }, {
+      props: {
+        enableColorOnDark: false
+      },
+      style: _extends({
+        backgroundColor: 'var(--AppBar-background)',
+        color: 'var(--AppBar-color)'
+      }, theme.applyStyles('dark', {
+        backgroundColor: theme.vars ? joinVars(theme.vars.palette.AppBar.darkBg, 'var(--AppBar-background)') : null,
+        color: theme.vars ? joinVars(theme.vars.palette.AppBar.darkColor, 'var(--AppBar-color)') : null
+      }))
+    }, {
+      props: {
+        color: 'transparent'
+      },
+      style: _extends({
+        '--AppBar-background': 'transparent',
+        '--AppBar-color': 'inherit',
+        backgroundColor: 'var(--AppBar-background)',
+        color: 'var(--AppBar-color)'
+      }, theme.applyStyles('dark', {
+        backgroundImage: 'none'
+      }))
+    }])
+  };
 });
 var AppBar = /*#__PURE__*/React.forwardRef(function AppBar(inProps, ref) {
   var props = useThemeProps({

package/legacy/Badge/Badge.js

@@ -369,8 +369,7 @@ process.env.NODE_ENV !== "production" ? Badge.propTypes /* remove-proptypes */ =
   /**
    * The components used for each slot inside.
    *
-   * This prop is an alias for the `slots` prop.
-   * It's recommended to use the `slots` prop instead.
+   * @deprecated use the `slots` prop instead. This prop will be removed in v7. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/).
    *
    * @default {}
    */
@@ -382,8 +381,7 @@ process.env.NODE_ENV !== "production" ? Badge.propTypes /* remove-proptypes */ =
    * The extra props for the slot components.
    * You can override the existing props or add new ones.
    *
-   * This prop is an alias for the `slotProps` prop.
-   * It's recommended to use the `slotProps` prop instead, as `componentsProps` will be deprecated in the future.
+   * @deprecated use the `slotProps` prop instead. This prop will be removed in v7. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/).
    *
    * @default {}
    */