@mui/material 9.0.0-alpha.4 → 9.0.0-beta.1

package/Tabs/Tabs.mjs

@@ -20,7 +20,10 @@ import tabsClasses, { getTabsUtilityClass } from "./tabsClasses.mjs";
 import ownerWindow from "../utils/ownerWindow.mjs";
 import isLayoutSupported from "../utils/isLayoutSupported.mjs";
 import useSlot from "../utils/useSlot.mjs";
-import { ownerDocument, useForkRef, getActiveElement, useRovingTabIndex } from "../utils/index.mjs";
+import getActiveElement from "../utils/getActiveElement.mjs";
+import ownerDocument from "../utils/ownerDocument.mjs";
+import useForkRef from "../utils/useForkRef.mjs";
+import { RovingTabIndexContext, useRovingTabIndexRoot } from "../utils/useRovingTabIndex.mjs";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const useUtilityClasses = ownerState => {
   const {
@@ -36,7 +39,7 @@ const useUtilityClasses = ownerState => {
   const slots = {
     root: ['root', vertical && 'vertical'],
     scroller: ['scroller', fixed && 'fixed', hideScrollbar && 'hideScrollbar', scrollableX && 'scrollableX', scrollableY && 'scrollableY'],
-    list: ['list', 'flexContainer', vertical && 'flexContainerVertical', vertical && 'vertical', centered && 'centered'],
+    list: ['list', vertical && 'vertical', centered && 'centered'],
     indicator: ['indicator'],
     scrollButtons: ['scrollButtons', scrollButtonsHideMobile && 'scrollButtonsHideMobile'],
     scrollableX: [scrollableX && 'scrollableX'],
@@ -144,7 +147,7 @@ const List = styled('div', {
     const {
       ownerState
     } = props;
-    return [styles.list, styles.flexContainer, ownerState.vertical && styles.flexContainerVertical, ownerState.centered && styles.centered];
+    return [styles.list, ownerState.centered && styles.centered];
   }
 })({
   display: 'flex',
@@ -287,6 +290,10 @@ const Tabs = /*#__PURE__*/React.forwardRef(function Tabs(inProps, ref) {
   const [displayStartScroll, setDisplayStartScroll] = React.useState(false);
   const [displayEndScroll, setDisplayEndScroll] = React.useState(false);
   const [updateScrollObserver, setUpdateScrollObserver] = React.useState(false);
+  const selectedValue = value === false ? null : value;
+  // Tracks whether DOM focus is currently inside the tab list. When it is, roving focus
+  // should follow in-list keyboard movement instead of snapping back to `selectedValue`.
+  const [isFocusWithinList, setIsFocusWithinList] = React.useState(false);
   const [scrollerStyle, setScrollerStyle] = React.useState({
     overflow: 'hidden',
     scrollbarWidth: 0
@@ -614,6 +621,12 @@ const Tabs = /*#__PURE__*/React.forwardRef(function Tabs(inProps, ref) {
   const indicator = /*#__PURE__*/_jsx(IndicatorSlot, {
     ...indicatorSlotProps
   });
+  const rovingContainer = useRovingTabIndexRoot({
+    activeItemId: isFocusWithinList ? undefined : selectedValue,
+    orientation,
+    isRtl
+  });
+  const rovingContainerProps = rovingContainer.getContainerProps();
   const validChildren = React.Children.toArray(childrenProp).filter(React.isValidElement).map((child, index) => {
     const childValue = child.props.value === undefined ? index : child.props.value;
     if (process.env.NODE_ENV !== 'production') {
@@ -628,23 +641,11 @@ const Tabs = /*#__PURE__*/React.forwardRef(function Tabs(inProps, ref) {
       childValue
     };
   });
-  const focusableIndex = valueToIndex.get(value);
-  const {
-    getContainerProps,
-    getItemProps
-  } = useRovingTabIndex({
-    focusableIndex,
-    orientation,
-    isRtl
-  });
-  const rovingTabIndexContainerProps = getContainerProps();
   const children = validChildren.map(({
     child,
-    index,
     childValue
   }) => {
     const selected = childValue === value;
-    const rovingTabIndexItemProps = getItemProps(index, child.ref);
     return /*#__PURE__*/React.cloneElement(child, {
       fullWidth: variant === 'fullWidth',
       indicator: selected && !mounted && indicator,
@@ -652,9 +653,7 @@ const Tabs = /*#__PURE__*/React.forwardRef(function Tabs(inProps, ref) {
       selectionFollowsFocus,
       onChange,
       textColor,
-      value: childValue,
-      ref: rovingTabIndexItemProps.ref,
-      tabIndex: child.props.tabIndex ?? rovingTabIndexItemProps.tabIndex
+      value: childValue
     });
   });
   const conditionalElements = getConditionalElements();
@@ -682,7 +681,7 @@ const Tabs = /*#__PURE__*/React.forwardRef(function Tabs(inProps, ref) {
       }
     }
   });
-  const mergedRef = useForkRef(rovingTabIndexContainerProps.ref, tabListRef);
+  const mergedRef = useForkRef(rovingContainerProps.ref, tabListRef);
   const handleKeyDown = event => {
     const list = tabListRef.current;
     const currentFocus = getActiveElement(ownerDocument(list));
@@ -693,22 +692,29 @@ const Tabs = /*#__PURE__*/React.forwardRef(function Tabs(inProps, ref) {
     if (role !== 'tab') {
       return;
     }
-    rovingTabIndexContainerProps.onKeyDown(event);
+    rovingContainerProps.onKeyDown(event);
   };
   const [ListSlot, listSlotProps] = useSlot('list', {
     ref: mergedRef,
-    className: clsx(classes.list, classes.flexContainer),
+    className: classes.list,
     elementType: List,
     externalForwardedProps,
     ownerState,
     getSlotProps: handlers => ({
       ...handlers,
+      onBlur: event => {
+        if (!event.currentTarget.contains(event.relatedTarget)) {
+          setIsFocusWithinList(false);
+        }
+        handlers.onBlur?.(event);
+      },
       onKeyDown: event => {
         handleKeyDown(event);
         handlers.onKeyDown?.(event);
       },
       onFocus: event => {
-        rovingTabIndexContainerProps.onFocus(event);
+        setIsFocusWithinList(true);
+        rovingContainerProps.onFocus(event);
         handlers.onFocus?.(event);
       }
     })
@@ -723,7 +729,10 @@ const Tabs = /*#__PURE__*/React.forwardRef(function Tabs(inProps, ref) {
         "aria-orientation": orientation === 'vertical' ? 'vertical' : null,
         role: "tablist",
         ...listSlotProps,
-        children: children
+        children: /*#__PURE__*/_jsx(RovingTabIndexContext.Provider, {
+          value: rovingContainer,
+          children: children
+        })
       }), mounted && indicator]
     }), conditionalElements.scrollButtonEnd]
   });

package/Tabs/tabsClasses.d.mts

@@ -3,12 +3,6 @@ export interface TabsClasses {
   root: string;
   /** Styles applied to the root element if `orientation="vertical"`. */
   vertical: string;
-  /** Styles applied to the flex container element. */
-  /** @deprecated use `list` instead. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details. */
-  flexContainer: string;
-  /** Styles applied to the flex container element if `orientation="vertical"`. */
-  /** @deprecated use a combination of `list` and `vertical` instead. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details. */
-  flexContainerVertical: string;
   /** Styles applied to the list element. */
   list: string;
   /** Styles applied to the flex container element if `centered={true}` & `!variant="scrollable"`. */

package/Tabs/tabsClasses.d.ts

@@ -3,12 +3,6 @@ export interface TabsClasses {
   root: string;
   /** Styles applied to the root element if `orientation="vertical"`. */
   vertical: string;
-  /** Styles applied to the flex container element. */
-  /** @deprecated use `list` instead. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details. */
-  flexContainer: string;
-  /** Styles applied to the flex container element if `orientation="vertical"`. */
-  /** @deprecated use a combination of `list` and `vertical` instead. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details. */
-  flexContainerVertical: string;
   /** Styles applied to the list element. */
   list: string;
   /** Styles applied to the flex container element if `centered={true}` & `!variant="scrollable"`. */

package/Tabs/tabsClasses.js

@@ -11,5 +11,5 @@ var _generateUtilityClass = _interopRequireDefault(require("@mui/utils/generateU
 function getTabsUtilityClass(slot) {
   return (0, _generateUtilityClass.default)('MuiTabs', slot);
 }
-const tabsClasses = (0, _generateUtilityClasses.default)('MuiTabs', ['root', 'vertical', 'list', 'flexContainer', 'flexContainerVertical', 'centered', 'scroller', 'fixed', 'scrollableX', 'scrollableY', 'hideScrollbar', 'scrollButtons', 'scrollButtonsHideMobile', 'indicator']);
+const tabsClasses = (0, _generateUtilityClasses.default)('MuiTabs', ['root', 'vertical', 'list', 'centered', 'scroller', 'fixed', 'scrollableX', 'scrollableY', 'hideScrollbar', 'scrollButtons', 'scrollButtonsHideMobile', 'indicator']);
 var _default = exports.default = tabsClasses;

package/Tabs/tabsClasses.mjs

@@ -3,5 +3,5 @@ import generateUtilityClass from '@mui/utils/generateUtilityClass';
 export function getTabsUtilityClass(slot) {
   return generateUtilityClass('MuiTabs', slot);
 }
-const tabsClasses = generateUtilityClasses('MuiTabs', ['root', 'vertical', 'list', 'flexContainer', 'flexContainerVertical', 'centered', 'scroller', 'fixed', 'scrollableX', 'scrollableY', 'hideScrollbar', 'scrollButtons', 'scrollButtonsHideMobile', 'indicator']);
+const tabsClasses = generateUtilityClasses('MuiTabs', ['root', 'vertical', 'list', 'centered', 'scroller', 'fixed', 'scrollableX', 'scrollableY', 'hideScrollbar', 'scrollButtons', 'scrollButtonsHideMobile', 'indicator']);
 export default tabsClasses;

package/ToggleButton/ToggleButton.js

@@ -178,6 +178,7 @@ const ToggleButton = /*#__PURE__*/React.forwardRef(function ToggleButton(inProps
   const positionClassName = toggleButtonGroupButtonContextPositionClassName || '';
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(ToggleButtonRoot, {
     className: (0, _clsx.default)(contextProps.className, classes.root, className, positionClassName),
+    internalNativeButton: true,
     disabled: disabled,
     focusRipple: !disableFocusRipple,
     ref: ref,

package/ToggleButton/ToggleButton.mjs

@@ -171,6 +171,7 @@ const ToggleButton = /*#__PURE__*/React.forwardRef(function ToggleButton(inProps
   const positionClassName = toggleButtonGroupButtonContextPositionClassName || '';
   return /*#__PURE__*/_jsx(ToggleButtonRoot, {
     className: clsx(contextProps.className, classes.root, className, positionClassName),
+    internalNativeButton: true,
     disabled: disabled,
     focusRipple: !disableFocusRipple,
     ref: ref,

package/ToggleButtonGroup/ToggleButtonGroup.js

@@ -16,7 +16,6 @@ var _getValidReactChildren = _interopRequireDefault(require("@mui/utils/getValid
 var _zeroStyled = require("../zero-styled");
 var _memoTheme = _interopRequireDefault(require("../utils/memoTheme"));
 var _DefaultPropsProvider = require("../DefaultPropsProvider");
-var _capitalize = _interopRequireDefault(require("../utils/capitalize"));
 var _toggleButtonGroupClasses = _interopRequireWildcard(require("./toggleButtonGroupClasses"));
 var _ToggleButtonGroupContext = _interopRequireDefault(require("./ToggleButtonGroupContext"));
 var _ToggleButtonGroupButtonContext = _interopRequireDefault(require("./ToggleButtonGroupButtonContext"));
@@ -31,7 +30,7 @@ const useUtilityClasses = ownerState => {
   } = ownerState;
   const slots = {
     root: ['root', orientation, fullWidth && 'fullWidth'],
-    grouped: ['grouped', `grouped${(0, _capitalize.default)(orientation)}`, disabled && 'disabled'],
+    grouped: ['grouped', disabled && 'disabled'],
     firstButton: ['firstButton'],
     lastButton: ['lastButton'],
     middleButton: ['middleButton']
@@ -47,8 +46,6 @@ const ToggleButtonGroupRoot = (0, _zeroStyled.styled)('div', {
     } = props;
     return [{
       [`& .${_toggleButtonGroupClasses.default.grouped}`]: styles.grouped
-    }, {
-      [`& .${_toggleButtonGroupClasses.default.grouped}`]: styles[`grouped${(0, _capitalize.default)(ownerState.orientation)}`]
     }, {
       [`& .${_toggleButtonGroupClasses.default.firstButton}`]: styles.firstButton
     }, {

package/ToggleButtonGroup/ToggleButtonGroup.mjs

@@ -9,7 +9,6 @@ import getValidReactChildren from '@mui/utils/getValidReactChildren';
 import { styled } from "../zero-styled/index.mjs";
 import memoTheme from "../utils/memoTheme.mjs";
 import { useDefaultProps } from "../DefaultPropsProvider/index.mjs";
-import capitalize from "../utils/capitalize.mjs";
 import toggleButtonGroupClasses, { getToggleButtonGroupUtilityClass } from "./toggleButtonGroupClasses.mjs";
 import ToggleButtonGroupContext from "./ToggleButtonGroupContext.mjs";
 import ToggleButtonGroupButtonContext from "./ToggleButtonGroupButtonContext.mjs";
@@ -24,7 +23,7 @@ const useUtilityClasses = ownerState => {
   } = ownerState;
   const slots = {
     root: ['root', orientation, fullWidth && 'fullWidth'],
-    grouped: ['grouped', `grouped${capitalize(orientation)}`, disabled && 'disabled'],
+    grouped: ['grouped', disabled && 'disabled'],
     firstButton: ['firstButton'],
     lastButton: ['lastButton'],
     middleButton: ['middleButton']
@@ -40,8 +39,6 @@ const ToggleButtonGroupRoot = styled('div', {
     } = props;
     return [{
       [`& .${toggleButtonGroupClasses.grouped}`]: styles.grouped
-    }, {
-      [`& .${toggleButtonGroupClasses.grouped}`]: styles[`grouped${capitalize(ownerState.orientation)}`]
     }, {
       [`& .${toggleButtonGroupClasses.firstButton}`]: styles.firstButton
     }, {

package/ToggleButtonGroup/toggleButtonGroupClasses.d.mts

@@ -11,14 +11,6 @@ export interface ToggleButtonGroupClasses {
   disabled: string;
   /** Styles applied to the children. */
   grouped: string;
-  /** Styles applied to the children if `orientation="horizontal"`.
-   *  @deprecated Combine the [.MuiToggleButtonGroup-horizontal](/material-ui/api/toggle-button-group/#toggle-button-group-classes-MuiToggleButtonGroup-horizontal) and [.MuiToggleButtonGroup-grouped](/material-ui/api/toggle-button-group/#toggle-button-group-classes-MuiToggleButtonGroup-grouped) classes instead. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
-   */
-  groupedHorizontal: string;
-  /** Styles applied to the children if `orientation="vertical"`.
-   * @deprecated Combine the [.MuiToggleButtonGroup-vertical](/material-ui/api/toggle-button-group/#toggle-button-group-classes-MuiToggleButtonGroup-vertical) and [.MuiToggleButtonGroup-grouped](/material-ui/api/toggle-button-group/#toggle-button-group-classes-MuiToggleButtonGroup-grouped) classes instead. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
-   */
-  groupedVertical: string;
   /** Styles applied to the root element if `fullWidth={true}`. */
   fullWidth: string;
   /** Styles applied to the first button in the toggle button group. */

package/ToggleButtonGroup/toggleButtonGroupClasses.d.ts

@@ -11,14 +11,6 @@ export interface ToggleButtonGroupClasses {
   disabled: string;
   /** Styles applied to the children. */
   grouped: string;
-  /** Styles applied to the children if `orientation="horizontal"`.
-   *  @deprecated Combine the [.MuiToggleButtonGroup-horizontal](/material-ui/api/toggle-button-group/#toggle-button-group-classes-MuiToggleButtonGroup-horizontal) and [.MuiToggleButtonGroup-grouped](/material-ui/api/toggle-button-group/#toggle-button-group-classes-MuiToggleButtonGroup-grouped) classes instead. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
-   */
-  groupedHorizontal: string;
-  /** Styles applied to the children if `orientation="vertical"`.
-   * @deprecated Combine the [.MuiToggleButtonGroup-vertical](/material-ui/api/toggle-button-group/#toggle-button-group-classes-MuiToggleButtonGroup-vertical) and [.MuiToggleButtonGroup-grouped](/material-ui/api/toggle-button-group/#toggle-button-group-classes-MuiToggleButtonGroup-grouped) classes instead. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
-   */
-  groupedVertical: string;
   /** Styles applied to the root element if `fullWidth={true}`. */
   fullWidth: string;
   /** Styles applied to the first button in the toggle button group. */

package/ToggleButtonGroup/toggleButtonGroupClasses.js

@@ -11,5 +11,5 @@ var _generateUtilityClass = _interopRequireDefault(require("@mui/utils/generateU
 function getToggleButtonGroupUtilityClass(slot) {
   return (0, _generateUtilityClass.default)('MuiToggleButtonGroup', slot);
 }
-const toggleButtonGroupClasses = (0, _generateUtilityClasses.default)('MuiToggleButtonGroup', ['root', 'selected', 'horizontal', 'vertical', 'disabled', 'grouped', 'groupedHorizontal', 'groupedVertical', 'fullWidth', 'firstButton', 'lastButton', 'middleButton']);
+const toggleButtonGroupClasses = (0, _generateUtilityClasses.default)('MuiToggleButtonGroup', ['root', 'selected', 'horizontal', 'vertical', 'disabled', 'grouped', 'fullWidth', 'firstButton', 'lastButton', 'middleButton']);
 var _default = exports.default = toggleButtonGroupClasses;

package/ToggleButtonGroup/toggleButtonGroupClasses.mjs

@@ -3,5 +3,5 @@ import generateUtilityClass from '@mui/utils/generateUtilityClass';
 export function getToggleButtonGroupUtilityClass(slot) {
   return generateUtilityClass('MuiToggleButtonGroup', slot);
 }
-const toggleButtonGroupClasses = generateUtilityClasses('MuiToggleButtonGroup', ['root', 'selected', 'horizontal', 'vertical', 'disabled', 'grouped', 'groupedHorizontal', 'groupedVertical', 'fullWidth', 'firstButton', 'lastButton', 'middleButton']);
+const toggleButtonGroupClasses = generateUtilityClasses('MuiToggleButtonGroup', ['root', 'selected', 'horizontal', 'vertical', 'disabled', 'grouped', 'fullWidth', 'firstButton', 'lastButton', 'middleButton']);
 export default toggleButtonGroupClasses;

package/Tooltip/Tooltip.d.mts

@@ -41,7 +41,7 @@ export type TooltipSlotsAndSlotProps = CreateSlotsAndSlotProps<TooltipSlots, {
    * Props forwarded to the transition slot.
    * By default, the available props are based on the [Grow](https://mui.com/material-ui/api/grow/#props) component.
    */
-  transition: SlotProps<React.ElementType, TransitionProps & TooltipTransitionSlotPropsOverrides, TooltipOwnerState>;
+  transition: SlotProps<React.ElementType<TransitionProps>, TransitionProps & TooltipTransitionSlotPropsOverrides, TooltipOwnerState>;
   /**
    * Props forwarded to the tooltip slot.
    * By default, the available props are based on the div element.

package/Tooltip/Tooltip.d.ts

@@ -41,7 +41,7 @@ export type TooltipSlotsAndSlotProps = CreateSlotsAndSlotProps<TooltipSlots, {
    * Props forwarded to the transition slot.
    * By default, the available props are based on the [Grow](https://mui.com/material-ui/api/grow/#props) component.
    */
-  transition: SlotProps<React.ElementType, TransitionProps & TooltipTransitionSlotPropsOverrides, TooltipOwnerState>;
+  transition: SlotProps<React.ElementType<TransitionProps>, TransitionProps & TooltipTransitionSlotPropsOverrides, TooltipOwnerState>;
   /**
    * Props forwarded to the tooltip slot.
    * By default, the available props are based on the div element.

package/Typography/Typography.d.mts

@@ -1,13 +1,13 @@
 import * as React from 'react';
 import { OverridableStringUnion } from '@mui/types';
-import { SxProps, SystemProps } from '@mui/system';
+import { SxProps } from '@mui/system';
 import { Theme, TypeText } from "../styles/index.mjs";
 import { OverrideProps, OverridableComponent } from "../OverridableComponent/index.mjs";
 import { TypographyVariant } from "../styles/createTypography.mjs";
 import { TypographyClasses } from "./typographyClasses.mjs";
 export interface TypographyPropsVariantOverrides {}
 export interface TypographyPropsColorOverrides {}
-export interface TypographyOwnProps extends Omit<SystemProps<Theme>, 'color'> {
+export interface TypographyOwnProps {
   /**
    * Set the text-align on the component.
    * @default 'inherit'
@@ -26,7 +26,7 @@ export interface TypographyOwnProps extends Omit<SystemProps<Theme>, 'color'> {
    * 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/#custom-colors).
    */
-  color?: OverridableStringUnion<'primary' | 'secondary' | 'success' | 'error' | 'info' | 'warning' | `text${Capitalize<keyof TypeText>}`, TypographyPropsColorOverrides> | (string & {}) | undefined; // to work with v5 color prop type which allows any string
+  color?: OverridableStringUnion<'primary' | 'secondary' | 'success' | 'error' | 'info' | 'warning' | `text${Capitalize<keyof TypeText>}`, TypographyPropsColorOverrides> | (string & {}) | undefined;
   /**
    * If `true`, the text will have a bottom margin.
    * @default false

package/Typography/Typography.d.ts

@@ -1,13 +1,13 @@
 import * as React from 'react';
 import { OverridableStringUnion } from '@mui/types';
-import { SxProps, SystemProps } from '@mui/system';
+import { SxProps } from '@mui/system';
 import { Theme, TypeText } from "../styles/index.js";
 import { OverrideProps, OverridableComponent } from "../OverridableComponent/index.js";
 import { TypographyVariant } from "../styles/createTypography.js";
 import { TypographyClasses } from "./typographyClasses.js";
 export interface TypographyPropsVariantOverrides {}
 export interface TypographyPropsColorOverrides {}
-export interface TypographyOwnProps extends Omit<SystemProps<Theme>, 'color'> {
+export interface TypographyOwnProps {
   /**
    * Set the text-align on the component.
    * @default 'inherit'
@@ -26,7 +26,7 @@ export interface TypographyOwnProps extends Omit<SystemProps<Theme>, 'color'> {
    * 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/#custom-colors).
    */
-  color?: OverridableStringUnion<'primary' | 'secondary' | 'success' | 'error' | 'info' | 'warning' | `text${Capitalize<keyof TypeText>}`, TypographyPropsColorOverrides> | (string & {}) | undefined; // to work with v5 color prop type which allows any string
+  color?: OverridableStringUnion<'primary' | 'secondary' | 'success' | 'error' | 'info' | 'warning' | `text${Capitalize<keyof TypeText>}`, TypographyPropsColorOverrides> | (string & {}) | undefined;
   /**
    * If `true`, the text will have a bottom margin.
    * @default false

package/Typography/Typography.js

@@ -18,18 +18,6 @@ var _capitalize = _interopRequireDefault(require("../utils/capitalize"));
 var _createSimplePaletteValueFilter = _interopRequireDefault(require("../utils/createSimplePaletteValueFilter"));
 var _typographyClasses = require("./typographyClasses");
 var _jsxRuntime = require("react/jsx-runtime");
-const v6Colors = {
-  primary: true,
-  secondary: true,
-  error: true,
-  info: true,
-  success: true,
-  warning: true,
-  textPrimary: true,
-  textSecondary: true,
-  textDisabled: true
-};
-const extendSxProp = (0, _zeroStyled.internal_createExtendSxProp)();
 const useUtilityClasses = ownerState => {
   const {
     align,
@@ -124,22 +112,12 @@ const defaultVariantMapping = {
   inherit: 'p'
 };
 const Typography = /*#__PURE__*/React.forwardRef(function Typography(inProps, ref) {
-  const {
-    color,
-    ...themeProps
-  } = (0, _DefaultPropsProvider.useDefaultProps)({
+  const props = (0, _DefaultPropsProvider.useDefaultProps)({
     props: inProps,
     name: 'MuiTypography'
   });
-  const isSxColor = !v6Colors[color];
-  // TODO: Remove `extendSxProp` in v7
-  const props = extendSxProp({
-    ...themeProps,
-    ...(isSxColor && {
-      color
-    })
-  });
   const {
+    color,
     align = 'inherit',
     className,
     component,

package/Typography/Typography.mjs

@@ -4,25 +4,13 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import composeClasses from '@mui/utils/composeClasses';
-import { styled, internal_createExtendSxProp } from "../zero-styled/index.mjs";
+import { styled } from "../zero-styled/index.mjs";
 import memoTheme from "../utils/memoTheme.mjs";
 import { useDefaultProps } from "../DefaultPropsProvider/index.mjs";
 import capitalize from "../utils/capitalize.mjs";
 import createSimplePaletteValueFilter from "../utils/createSimplePaletteValueFilter.mjs";
 import { getTypographyUtilityClass } from "./typographyClasses.mjs";
 import { jsx as _jsx } from "react/jsx-runtime";
-const v6Colors = {
-  primary: true,
-  secondary: true,
-  error: true,
-  info: true,
-  success: true,
-  warning: true,
-  textPrimary: true,
-  textSecondary: true,
-  textDisabled: true
-};
-const extendSxProp = internal_createExtendSxProp();
 const useUtilityClasses = ownerState => {
   const {
     align,
@@ -117,22 +105,12 @@ const defaultVariantMapping = {
   inherit: 'p'
 };
 const Typography = /*#__PURE__*/React.forwardRef(function Typography(inProps, ref) {
-  const {
-    color,
-    ...themeProps
-  } = useDefaultProps({
+  const props = useDefaultProps({
     props: inProps,
     name: 'MuiTypography'
   });
-  const isSxColor = !v6Colors[color];
-  // TODO: Remove `extendSxProp` in v7
-  const props = extendSxProp({
-    ...themeProps,
-    ...(isSxColor && {
-      color
-    })
-  });
   const {
+    color,
     align = 'inherit',
     className,
     component,

package/index.js

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

package/index.mjs

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

package/internal/SwitchBase.d.mts

@@ -20,13 +20,13 @@ type SwitchBaseSlotsAndSlotProps = CreateSlotsAndSlotProps<SwitchBaseSlots, {
    * Props forwarded to the root slot.
    * By default, the available props are based on the [ButtonBase](https://mui.com/material-ui/api/button-base/#props) component.
    */
-  root: SlotProps<React.ElementType<ButtonBaseProps>, {}, SwitchBaseOwnerState>;
+  root: SlotProps<React.ElementType<Omit<ButtonBaseProps, 'nativeButton'>>, {}, SwitchBaseOwnerState>;
   /**
    * Props forwarded to the input slot.
    */
   input: SlotProps<'input', {}, SwitchBaseOwnerState>;
 }>;
-export interface SwitchBaseProps extends StandardProps<ButtonBaseProps, 'children' | 'onChange' | 'type' | 'value'>, SwitchBaseSlotsAndSlotProps {
+export interface SwitchBaseProps extends StandardProps<Omit<ButtonBaseProps, 'nativeButton'>, 'children' | 'onChange' | 'type' | 'value'>, SwitchBaseSlotsAndSlotProps {
   autoFocus?: boolean | undefined;
   /**
    * If `true`, the component is checked.
@@ -68,16 +68,6 @@ export interface SwitchBaseProps extends StandardProps<ButtonBaseProps, 'childre
    * The id of the `input` element.
    */
   id?: string | undefined;
-  /**
-   * [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#attributes) applied to the `input` element.
-   * @deprecated Use `slotProps.input` instead. This prop will be removed in a future major release. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
-   */
-  inputProps?: React.InputHTMLAttributes<HTMLInputElement> | undefined;
-  /**
-   * Pass a ref to the `input` element.
-   * @deprecated Use `slotProps.input.ref` instead. This prop will be removed in a future major release. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
-   */
-  inputRef?: React.Ref<any> | undefined;
   /**
    * Name attribute of the `input` element.
    */

package/internal/SwitchBase.d.ts

@@ -20,13 +20,13 @@ type SwitchBaseSlotsAndSlotProps = CreateSlotsAndSlotProps<SwitchBaseSlots, {
    * Props forwarded to the root slot.
    * By default, the available props are based on the [ButtonBase](https://mui.com/material-ui/api/button-base/#props) component.
    */
-  root: SlotProps<React.ElementType<ButtonBaseProps>, {}, SwitchBaseOwnerState>;
+  root: SlotProps<React.ElementType<Omit<ButtonBaseProps, 'nativeButton'>>, {}, SwitchBaseOwnerState>;
   /**
    * Props forwarded to the input slot.
    */
   input: SlotProps<'input', {}, SwitchBaseOwnerState>;
 }>;
-export interface SwitchBaseProps extends StandardProps<ButtonBaseProps, 'children' | 'onChange' | 'type' | 'value'>, SwitchBaseSlotsAndSlotProps {
+export interface SwitchBaseProps extends StandardProps<Omit<ButtonBaseProps, 'nativeButton'>, 'children' | 'onChange' | 'type' | 'value'>, SwitchBaseSlotsAndSlotProps {
   autoFocus?: boolean | undefined;
   /**
    * If `true`, the component is checked.
@@ -68,16 +68,6 @@ export interface SwitchBaseProps extends StandardProps<ButtonBaseProps, 'childre
    * The id of the `input` element.
    */
   id?: string | undefined;
-  /**
-   * [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#attributes) applied to the `input` element.
-   * @deprecated Use `slotProps.input` instead. This prop will be removed in a future major release. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
-   */
-  inputProps?: React.InputHTMLAttributes<HTMLInputElement> | undefined;
-  /**
-   * Pass a ref to the `input` element.
-   * @deprecated Use `slotProps.input.ref` instead. This prop will be removed in a future major release. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
-   */
-  inputRef?: React.Ref<any> | undefined;
   /**
    * Name attribute of the `input` element.
    */

package/internal/SwitchBase.js

@@ -9,7 +9,6 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _refType = _interopRequireDefault(require("@mui/utils/refType"));
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
 var _capitalize = _interopRequireDefault(require("../utils/capitalize"));
 var _rootShouldForwardProp = _interopRequireDefault(require("../styles/rootShouldForwardProp"));
@@ -102,8 +101,6 @@ const SwitchBase = /*#__PURE__*/React.forwardRef(function SwitchBase(props, ref)
     edge = false,
     icon,
     id,
-    inputProps,
-    inputRef,
     name,
     onBlur,
     onChange,
@@ -117,6 +114,10 @@ const SwitchBase = /*#__PURE__*/React.forwardRef(function SwitchBase(props, ref)
     slotProps = {},
     ...other
   } = props;
+  const {
+    nativeButton,
+    ...buttonBaseProps
+  } = other;
   const [checked, setCheckedState] = (0, _useControlled.default)({
     controlled: checkedProp,
     default: Boolean(defaultChecked),
@@ -169,10 +170,7 @@ const SwitchBase = /*#__PURE__*/React.forwardRef(function SwitchBase(props, ref)
   const classes = useUtilityClasses(ownerState);
   const externalForwardedProps = {
     slots,
-    slotProps: {
-      input: inputProps,
-      ...slotProps
-    }
+    slotProps
   };
   const [RootSlot, rootSlotProps] = (0, _useSlot.default)('root', {
     ref,
@@ -182,7 +180,7 @@ const SwitchBase = /*#__PURE__*/React.forwardRef(function SwitchBase(props, ref)
     externalForwardedProps: {
       ...externalForwardedProps,
       component: 'span',
-      ...other
+      ...buttonBaseProps
     },
     getSlotProps: handlers => ({
       ...handlers,
@@ -204,7 +202,6 @@ const SwitchBase = /*#__PURE__*/React.forwardRef(function SwitchBase(props, ref)
     }
   });
   const [InputSlot, inputSlotProps] = (0, _useSlot.default)('input', {
-    ref: inputRef,
     elementType: SwitchBaseInput,
     className: classes.input,
     externalForwardedProps,
@@ -292,14 +289,6 @@ process.env.NODE_ENV !== "production" ? SwitchBase.propTypes = {
    * The id of the `input` element.
    */
   id: _propTypes.default.string,
-  /**
-   * [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#attributes) applied to the `input` element.
-   */
-  inputProps: _propTypes.default.object,
-  /**
-   * Pass a ref to the `input` element.
-   */
-  inputRef: _refType.default,
   /*
    * @ignore
    */