@mui/material 6.0.0-alpha.8 → 6.0.0-beta.0

package/Tab/Tab.js

@@ -6,11 +6,11 @@ import clsx from 'clsx';
 import composeClasses from '@mui/utils/composeClasses';
 import ButtonBase from '../ButtonBase';
 import capitalize from '../utils/capitalize';
-import { styled, createUseThemeProps } from '../zero-styled';
+import { styled } from '../zero-styled';
+import { useDefaultProps } from '../DefaultPropsProvider';
 import unsupportedProp from '../utils/unsupportedProp';
 import tabClasses, { getTabUtilityClass } from './tabClasses';
 import { jsxs as _jsxs } from "react/jsx-runtime";
-const useThemeProps = createUseThemeProps('MuiTab');
 const useUtilityClasses = ownerState => {
   const {
     classes,
@@ -24,7 +24,7 @@ const useUtilityClasses = ownerState => {
   } = ownerState;
   const slots = {
     root: ['root', icon && label && 'labelIcon', `textColor${capitalize(textColor)}`, fullWidth && 'fullWidth', wrapped && 'wrapped', selected && 'selected', disabled && 'disabled'],
-    iconWrapper: ['iconWrapper']
+    icon: ['iconWrapper', 'icon']
   };
   return composeClasses(slots, getTabUtilityClass, classes);
 };
@@ -35,7 +35,11 @@ const TabRoot = styled(ButtonBase, {
     const {
       ownerState
     } = props;
-    return [styles.root, ownerState.label && ownerState.icon && styles.labelIcon, styles[`textColor${capitalize(ownerState.textColor)}`], ownerState.fullWidth && styles.fullWidth, ownerState.wrapped && styles.wrapped];
+    return [styles.root, ownerState.label && ownerState.icon && styles.labelIcon, styles[`textColor${capitalize(ownerState.textColor)}`], ownerState.fullWidth && styles.fullWidth, ownerState.wrapped && styles.wrapped, {
+      [`& .${tabClasses.iconWrapper}`]: styles.iconWrapper
+    }, {
+      [`& .${tabClasses.icon}`]: styles.icon
+    }];
   }
 })(({
   theme
@@ -80,7 +84,7 @@ const TabRoot = styled(ButtonBase, {
       iconPosition
     }) => ownerState.icon && ownerState.label && iconPosition === 'top',
     style: {
-      [`& > .${tabClasses.iconWrapper}`]: {
+      [`& > .${tabClasses.icon}`]: {
         marginBottom: 6
       }
     }
@@ -90,7 +94,7 @@ const TabRoot = styled(ButtonBase, {
       iconPosition
     }) => ownerState.icon && ownerState.label && iconPosition === 'bottom',
     style: {
-      [`& > .${tabClasses.iconWrapper}`]: {
+      [`& > .${tabClasses.icon}`]: {
         marginTop: 6
       }
     }
@@ -100,7 +104,7 @@ const TabRoot = styled(ButtonBase, {
       iconPosition
     }) => ownerState.icon && ownerState.label && iconPosition === 'start',
     style: {
-      [`& > .${tabClasses.iconWrapper}`]: {
+      [`& > .${tabClasses.icon}`]: {
         marginRight: theme.spacing(1)
       }
     }
@@ -110,7 +114,7 @@ const TabRoot = styled(ButtonBase, {
       iconPosition
     }) => ownerState.icon && ownerState.label && iconPosition === 'end',
     style: {
-      [`& > .${tabClasses.iconWrapper}`]: {
+      [`& > .${tabClasses.icon}`]: {
         marginLeft: theme.spacing(1)
       }
     }
@@ -175,7 +179,7 @@ const TabRoot = styled(ButtonBase, {
   }]
 }));
 const Tab = /*#__PURE__*/React.forwardRef(function Tab(inProps, ref) {
-  const props = useThemeProps({
+  const props = useDefaultProps({
     props: inProps,
     name: 'MuiTab'
   });
@@ -217,7 +221,7 @@ const Tab = /*#__PURE__*/React.forwardRef(function Tab(inProps, ref) {
   };
   const classes = useUtilityClasses(ownerState);
   const icon = iconProp && label && /*#__PURE__*/React.isValidElement(iconProp) ? /*#__PURE__*/React.cloneElement(iconProp, {
-    className: clsx(classes.iconWrapper, iconProp.props.className)
+    className: clsx(classes.icon, iconProp.props.className)
   }) : iconProp;
   const handleClick = event => {
     if (!selected && onChange) {

package/Tab/tabClasses.d.ts

@@ -17,8 +17,12 @@ export interface TabClasses {
     fullWidth: string;
     /** Styles applied to the root element if `wrapped={true}`. */
     wrapped: string;
-    /** Styles applied to the wrapper element of `icon` if `icon` is provided. */
+    /** Styles applied to the `icon` HTML element if both `icon` and `label` are provided.
+     * @deprecated Use `icon` class instead. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details
+     */
     iconWrapper: string;
+    /** Styles applied to the `icon` HTML element if both `icon` and `label` are provided. */
+    icon: string;
 }
 export type TabClassKey = keyof TabClasses;
 export declare function getTabUtilityClass(slot: string): string;

package/Tab/tabClasses.js

@@ -3,5 +3,5 @@ import generateUtilityClass from '@mui/utils/generateUtilityClass';
 export function getTabUtilityClass(slot) {
   return generateUtilityClass('MuiTab', slot);
 }
-const tabClasses = generateUtilityClasses('MuiTab', ['root', 'labelIcon', 'textColorInherit', 'textColorPrimary', 'textColorSecondary', 'selected', 'disabled', 'fullWidth', 'wrapped', 'iconWrapper']);
+const tabClasses = generateUtilityClasses('MuiTab', ['root', 'labelIcon', 'textColorInherit', 'textColorPrimary', 'textColorSecondary', 'selected', 'disabled', 'fullWidth', 'wrapped', 'iconWrapper', 'icon']);
 export default tabClasses;

package/TabScrollButton/TabScrollButton.d.ts

@@ -69,10 +69,10 @@ export interface TabScrollButtonProps extends ButtonBaseProps {
  *
  * Demos:
  *
- * - [Tabs](https://mui.com/material-ui/react-tabs/)
+ * - [Tabs](https://next.mui.com/material-ui/react-tabs/)
  *
  * API:
  *
- * - [TabScrollButton API](https://mui.com/material-ui/api/tab-scroll-button/)
+ * - [TabScrollButton API](https://next.mui.com/material-ui/api/tab-scroll-button/)
  */
-export default function TabScrollButton(props: TabScrollButtonProps): JSX.Element;
+export default function TabScrollButton(props: TabScrollButtonProps): React.JSX.Element;

package/TabScrollButton/TabScrollButton.js

@@ -10,10 +10,10 @@ import { useRtl } from '@mui/system/RtlProvider';
 import KeyboardArrowLeft from '../internal/svg-icons/KeyboardArrowLeft';
 import KeyboardArrowRight from '../internal/svg-icons/KeyboardArrowRight';
 import ButtonBase from '../ButtonBase';
-import { styled, createUseThemeProps } from '../zero-styled';
+import { styled } from '../zero-styled';
+import { useDefaultProps } from '../DefaultPropsProvider';
 import tabScrollButtonClasses, { getTabScrollButtonUtilityClass } from './tabScrollButtonClasses';
 import { jsx as _jsx } from "react/jsx-runtime";
-const useThemeProps = createUseThemeProps('MuiTabScrollButton');
 const useUtilityClasses = ownerState => {
   const {
     classes,
@@ -55,7 +55,7 @@ const TabScrollButtonRoot = styled(ButtonBase, {
   }]
 });
 const TabScrollButton = /*#__PURE__*/React.forwardRef(function TabScrollButton(inProps, ref) {
-  const props = useThemeProps({
+  const props = useDefaultProps({
     props: inProps,
     name: 'MuiTabScrollButton'
   });

package/Table/Table.d.ts

@@ -48,11 +48,11 @@ export interface TableTypeMap<
  *
  * Demos:
  *
- * - [Table](https://mui.com/material-ui/react-table/)
+ * - [Table](https://next.mui.com/material-ui/react-table/)
  *
  * API:
  *
- * - [Table API](https://mui.com/material-ui/api/table/)
+ * - [Table API](https://next.mui.com/material-ui/api/table/)
  */
 declare const Table: OverridableComponent<TableTypeMap>;
 

package/Table/Table.js

@@ -5,10 +5,10 @@ import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import composeClasses from '@mui/utils/composeClasses';
 import TableContext from './TableContext';
-import { styled, createUseThemeProps } from '../zero-styled';
+import { styled } from '../zero-styled';
+import { useDefaultProps } from '../DefaultPropsProvider';
 import { getTableUtilityClass } from './tableClasses';
 import { jsx as _jsx } from "react/jsx-runtime";
-const useThemeProps = createUseThemeProps('MuiTable');
 const useUtilityClasses = ownerState => {
   const {
     classes,
@@ -53,7 +53,7 @@ const TableRoot = styled('table', {
 }));
 const defaultComponent = 'table';
 const Table = /*#__PURE__*/React.forwardRef(function Table(inProps, ref) {
-  const props = useThemeProps({
+  const props = useDefaultProps({
     props: inProps,
     name: 'MuiTable'
   });

package/TableBody/TableBody.d.ts

@@ -30,11 +30,11 @@ export interface TableBodyTypeMap<
  *
  * Demos:
  *
- * - [Table](https://mui.com/material-ui/react-table/)
+ * - [Table](https://next.mui.com/material-ui/react-table/)
  *
  * API:
  *
- * - [TableBody API](https://mui.com/material-ui/api/table-body/)
+ * - [TableBody API](https://next.mui.com/material-ui/api/table-body/)
  */
 declare const TableBody: OverridableComponent<TableBodyTypeMap>;
 

package/TableBody/TableBody.js

@@ -5,10 +5,10 @@ import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import composeClasses from '@mui/utils/composeClasses';
 import Tablelvl2Context from '../Table/Tablelvl2Context';
-import { styled, createUseThemeProps } from '../zero-styled';
+import { styled } from '../zero-styled';
+import { useDefaultProps } from '../DefaultPropsProvider';
 import { getTableBodyUtilityClass } from './tableBodyClasses';
 import { jsx as _jsx } from "react/jsx-runtime";
-const useThemeProps = createUseThemeProps('MuiTableBody');
 const useUtilityClasses = ownerState => {
   const {
     classes
@@ -30,7 +30,7 @@ const tablelvl2 = {
 };
 const defaultComponent = 'tbody';
 const TableBody = /*#__PURE__*/React.forwardRef(function TableBody(inProps, ref) {
-  const props = useThemeProps({
+  const props = useDefaultProps({
     props: inProps,
     name: 'MuiTableBody'
   });

package/TableCell/TableCell.d.ts

@@ -77,10 +77,10 @@ export type SortDirection = 'asc' | 'desc' | false;
  *
  * Demos:
  *
- * - [Table](https://mui.com/material-ui/react-table/)
+ * - [Table](https://next.mui.com/material-ui/react-table/)
  *
  * API:
  *
- * - [TableCell API](https://mui.com/material-ui/api/table-cell/)
+ * - [TableCell API](https://next.mui.com/material-ui/api/table-cell/)
  */
-export default function TableCell(props: TableCellProps): JSX.Element;
+export default function TableCell(props: TableCellProps): React.JSX.Element;

package/TableCell/TableCell.js

@@ -8,10 +8,10 @@ import { darken, alpha, lighten } from '@mui/system/colorManipulator';
 import capitalize from '../utils/capitalize';
 import TableContext from '../Table/TableContext';
 import Tablelvl2Context from '../Table/Tablelvl2Context';
-import { styled, createUseThemeProps } from '../zero-styled';
+import { styled } from '../zero-styled';
+import { useDefaultProps } from '../DefaultPropsProvider';
 import tableCellClasses, { getTableCellUtilityClass } from './tableCellClasses';
 import { jsx as _jsx } from "react/jsx-runtime";
-const useThemeProps = createUseThemeProps('MuiTableCell');
 const useUtilityClasses = ownerState => {
   const {
     classes,
@@ -150,7 +150,7 @@ const TableCellRoot = styled('td', {
  * or otherwise a `<td>` element.
  */
 const TableCell = /*#__PURE__*/React.forwardRef(function TableCell(inProps, ref) {
-  const props = useThemeProps({
+  const props = useDefaultProps({
     props: inProps,
     name: 'MuiTableCell'
   });

package/TableContainer/TableContainer.d.ts

@@ -30,11 +30,11 @@ export interface TableContainerTypeMap<
  *
  * Demos:
  *
- * - [Table](https://mui.com/material-ui/react-table/)
+ * - [Table](https://next.mui.com/material-ui/react-table/)
  *
  * API:
  *
- * - [TableContainer API](https://mui.com/material-ui/api/table-container/)
+ * - [TableContainer API](https://next.mui.com/material-ui/api/table-container/)
  */
 declare const TableContainer: OverridableComponent<TableContainerTypeMap>;
 

package/TableContainer/TableContainer.js

@@ -4,10 +4,10 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import composeClasses from '@mui/utils/composeClasses';
-import { styled, createUseThemeProps } from '../zero-styled';
+import { styled } from '../zero-styled';
+import { useDefaultProps } from '../DefaultPropsProvider';
 import { getTableContainerUtilityClass } from './tableContainerClasses';
 import { jsx as _jsx } from "react/jsx-runtime";
-const useThemeProps = createUseThemeProps('MuiTableContainer');
 const useUtilityClasses = ownerState => {
   const {
     classes
@@ -26,7 +26,7 @@ const TableContainerRoot = styled('div', {
   overflowX: 'auto'
 });
 const TableContainer = /*#__PURE__*/React.forwardRef(function TableContainer(inProps, ref) {
-  const props = useThemeProps({
+  const props = useDefaultProps({
     props: inProps,
     name: 'MuiTableContainer'
   });

package/TableFooter/TableFooter.d.ts

@@ -30,11 +30,11 @@ export interface TableFooterTypeMap<
  *
  * Demos:
  *
- * - [Table](https://mui.com/material-ui/react-table/)
+ * - [Table](https://next.mui.com/material-ui/react-table/)
  *
  * API:
  *
- * - [TableFooter API](https://mui.com/material-ui/api/table-footer/)
+ * - [TableFooter API](https://next.mui.com/material-ui/api/table-footer/)
  */
 declare const TableFooter: OverridableComponent<TableFooterTypeMap>;
 

package/TableFooter/TableFooter.js

@@ -5,10 +5,10 @@ import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import composeClasses from '@mui/utils/composeClasses';
 import Tablelvl2Context from '../Table/Tablelvl2Context';
-import { styled, createUseThemeProps } from '../zero-styled';
+import { styled } from '../zero-styled';
+import { useDefaultProps } from '../DefaultPropsProvider';
 import { getTableFooterUtilityClass } from './tableFooterClasses';
 import { jsx as _jsx } from "react/jsx-runtime";
-const useThemeProps = createUseThemeProps('MuiTableFooter');
 const useUtilityClasses = ownerState => {
   const {
     classes
@@ -30,7 +30,7 @@ const tablelvl2 = {
 };
 const defaultComponent = 'tfoot';
 const TableFooter = /*#__PURE__*/React.forwardRef(function TableFooter(inProps, ref) {
-  const props = useThemeProps({
+  const props = useDefaultProps({
     props: inProps,
     name: 'MuiTableFooter'
   });

package/TableHead/TableHead.d.ts

@@ -30,11 +30,11 @@ export interface TableHeadTypeMap<
  *
  * Demos:
  *
- * - [Table](https://mui.com/material-ui/react-table/)
+ * - [Table](https://next.mui.com/material-ui/react-table/)
  *
  * API:
  *
- * - [TableHead API](https://mui.com/material-ui/api/table-head/)
+ * - [TableHead API](https://next.mui.com/material-ui/api/table-head/)
  */
 declare const TableHead: OverridableComponent<TableHeadTypeMap>;
 

package/TableHead/TableHead.js

@@ -5,10 +5,10 @@ import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import composeClasses from '@mui/utils/composeClasses';
 import Tablelvl2Context from '../Table/Tablelvl2Context';
-import { styled, createUseThemeProps } from '../zero-styled';
+import { styled } from '../zero-styled';
+import { useDefaultProps } from '../DefaultPropsProvider';
 import { getTableHeadUtilityClass } from './tableHeadClasses';
 import { jsx as _jsx } from "react/jsx-runtime";
-const useThemeProps = createUseThemeProps('MuiTableHead');
 const useUtilityClasses = ownerState => {
   const {
     classes
@@ -30,7 +30,7 @@ const tablelvl2 = {
 };
 const defaultComponent = 'thead';
 const TableHead = /*#__PURE__*/React.forwardRef(function TableHead(inProps, ref) {
-  const props = useThemeProps({
+  const props = useDefaultProps({
     props: inProps,
     name: 'MuiTableHead'
   });

package/TablePagination/TablePagination.d.ts

@@ -166,13 +166,13 @@ export interface TablePaginationTypeMap<AdditionalProps, RootComponent extends R
  *
  * Demos:
  *
- * - [Pagination](https://mui.com/material-ui/react-pagination/)
- * - [Table](https://mui.com/material-ui/react-table/)
+ * - [Pagination](https://next.mui.com/material-ui/react-pagination/)
+ * - [Table](https://next.mui.com/material-ui/react-table/)
  *
  * API:
  *
- * - [TablePagination API](https://mui.com/material-ui/api/table-pagination/)
- * - inherits [TableCell API](https://mui.com/material-ui/api/table-cell/)
+ * - [TablePagination API](https://next.mui.com/material-ui/api/table-pagination/)
+ * - inherits [TableCell API](https://next.mui.com/material-ui/api/table-cell/)
  */
 declare const TablePagination: OverridableComponent<
   TablePaginationTypeMap<{}, React.JSXElementConstructor<TablePaginationBaseProps>>

package/TablePagination/TablePagination.js

@@ -8,7 +8,8 @@ import integerPropType from '@mui/utils/integerPropType';
 import chainPropTypes from '@mui/utils/chainPropTypes';
 import { isHostComponent } from '@mui/base/utils';
 import composeClasses from '@mui/utils/composeClasses';
-import { styled, createUseThemeProps } from '../zero-styled';
+import { styled } from '../zero-styled';
+import { useDefaultProps } from '../DefaultPropsProvider';
 import InputBase from '../InputBase';
 import MenuItem from '../MenuItem';
 import Select from '../Select';
@@ -19,7 +20,6 @@ import useId from '../utils/useId';
 import tablePaginationClasses, { getTablePaginationUtilityClass } from './tablePaginationClasses';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { createElement as _createElement } from "react";
-const useThemeProps = createUseThemeProps('MuiTablePagination');
 const TablePaginationRoot = styled(TableCell, {
   name: 'MuiTablePagination',
   slot: 'Root',
@@ -146,7 +146,7 @@ const useUtilityClasses = ownerState => {
  * A `TableCell` based component for placing inside `TableFooter` for pagination.
  */
 const TablePagination = /*#__PURE__*/React.forwardRef(function TablePagination(inProps, ref) {
-  const props = useThemeProps({
+  const props = useDefaultProps({
     props: inProps,
     name: 'MuiTablePagination'
   });

package/TableRow/TableRow.d.ts

@@ -42,11 +42,11 @@ export interface TableRowTypeMap<
  *
  * Demos:
  *
- * - [Table](https://mui.com/material-ui/react-table/)
+ * - [Table](https://next.mui.com/material-ui/react-table/)
  *
  * API:
  *
- * - [TableRow API](https://mui.com/material-ui/api/table-row/)
+ * - [TableRow API](https://next.mui.com/material-ui/api/table-row/)
  */
 declare const TableRow: OverridableComponent<TableRowTypeMap>;
 

package/TableRow/TableRow.js

@@ -6,10 +6,10 @@ import clsx from 'clsx';
 import composeClasses from '@mui/utils/composeClasses';
 import { alpha } from '@mui/system/colorManipulator';
 import Tablelvl2Context from '../Table/Tablelvl2Context';
-import { styled, createUseThemeProps } from '../zero-styled';
+import { styled } from '../zero-styled';
+import { useDefaultProps } from '../DefaultPropsProvider';
 import tableRowClasses, { getTableRowUtilityClass } from './tableRowClasses';
 import { jsx as _jsx } from "react/jsx-runtime";
-const useThemeProps = createUseThemeProps('MuiTableRow');
 const useUtilityClasses = ownerState => {
   const {
     classes,
@@ -56,7 +56,7 @@ const defaultComponent = 'tr';
  * based on the material table element parent (head, body, etc).
  */
 const TableRow = /*#__PURE__*/React.forwardRef(function TableRow(inProps, ref) {
-  const props = useThemeProps({
+  const props = useDefaultProps({
     props: inProps,
     name: 'MuiTableRow'
   });

package/TableSortLabel/TableSortLabel.d.ts

@@ -55,12 +55,12 @@ export type TableSortLabelTypeMap<
  *
  * Demos:
  *
- * - [Table](https://mui.com/material-ui/react-table/)
+ * - [Table](https://next.mui.com/material-ui/react-table/)
  *
  * API:
  *
- * - [TableSortLabel API](https://mui.com/material-ui/api/table-sort-label/)
- * - inherits [ButtonBase API](https://mui.com/material-ui/api/button-base/)
+ * - [TableSortLabel API](https://next.mui.com/material-ui/api/table-sort-label/)
+ * - inherits [ButtonBase API](https://next.mui.com/material-ui/api/button-base/)
  */
 declare const TableSortLabel: ExtendButtonBase<TableSortLabelTypeMap>;
 

package/TableSortLabel/TableSortLabel.js

@@ -6,11 +6,11 @@ import PropTypes from 'prop-types';
 import * as React from 'react';
 import ButtonBase from '../ButtonBase';
 import ArrowDownwardIcon from '../internal/svg-icons/ArrowDownward';
-import { styled, createUseThemeProps } from '../zero-styled';
+import { styled } from '../zero-styled';
+import { useDefaultProps } from '../DefaultPropsProvider';
 import capitalize from '../utils/capitalize';
 import tableSortLabelClasses, { getTableSortLabelUtilityClass } from './tableSortLabelClasses';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const useThemeProps = createUseThemeProps('MuiTableSortLabel');
 const useUtilityClasses = ownerState => {
   const {
     classes,
@@ -18,7 +18,7 @@ const useUtilityClasses = ownerState => {
     active
   } = ownerState;
   const slots = {
-    root: ['root', active && 'active'],
+    root: ['root', active && 'active', `direction${capitalize(direction)}`],
     icon: ['icon', `iconDirection${capitalize(direction)}`]
   };
   return composeClasses(slots, getTableSortLabelUtilityClass, classes);
@@ -98,7 +98,7 @@ const TableSortLabelIcon = styled('span', {
  * A button based label for placing inside `TableCell` for column sorting.
  */
 const TableSortLabel = /*#__PURE__*/React.forwardRef(function TableSortLabel(inProps, ref) {
-  const props = useThemeProps({
+  const props = useDefaultProps({
     props: inProps,
     name: 'MuiTableSortLabel'
   });

package/TableSortLabel/tableSortLabelClasses.d.ts

@@ -1,13 +1,21 @@
 export interface TableSortLabelClasses {
     /** Styles applied to the root element. */
     root: string;
+    /** Styles applied to the root element if `direction="desc"`. */
+    directionDesc: string;
+    /** Styles applied to the root element if `direction="asc"`. */
+    directionAsc: string;
     /** State class applied to the root element if `active={true}`. */
     active: string;
     /** Styles applied to the icon component. */
     icon: string;
-    /** Styles applied to the icon component if `direction="desc"`. */
+    /** Styles applied to the icon component if `direction="desc"`.
+     * @deprecated Combine the [.MuiTableSortLabel-icon](/material-ui/api/table-sort-label/#table-sort-label-classes-icon) and [.MuiTableSortLabel-directionDesc](/material-ui/api/table-sort-label/#table-sort-label-classes-direction-desc) classes instead. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
+     */
     iconDirectionDesc: string;
-    /** Styles applied to the icon component if `direction="asc"`. */
+    /** Styles applied to the icon component if `direction="asc"`.
+     * @deprecated Combine the [.MuiTableSortLabel-icon](/material-ui/api/table-sort-label/#table-sort-label-classes-icon) and [.MuiTableSortLabel-directionAsc](/material-ui/api/table-sort-label/#table-sort-label-classes-direction-asc) classes instead. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
+     */
     iconDirectionAsc: string;
 }
 export type TableSortLabelClassKey = keyof TableSortLabelClasses;

package/TableSortLabel/tableSortLabelClasses.js

@@ -3,5 +3,5 @@ import generateUtilityClass from '@mui/utils/generateUtilityClass';
 export function getTableSortLabelUtilityClass(slot) {
   return generateUtilityClass('MuiTableSortLabel', slot);
 }
-const tableSortLabelClasses = generateUtilityClasses('MuiTableSortLabel', ['root', 'active', 'icon', 'iconDirectionDesc', 'iconDirectionAsc']);
+const tableSortLabelClasses = generateUtilityClasses('MuiTableSortLabel', ['root', 'active', 'icon', 'iconDirectionDesc', 'iconDirectionAsc', 'directionDesc', 'directionAsc']);
 export default tableSortLabelClasses;

package/Tabs/Tabs.d.ts

@@ -185,11 +185,11 @@ export interface TabsTypeMap<
  *
  * Demos:
  *
- * - [Tabs](https://mui.com/material-ui/react-tabs/)
+ * - [Tabs](https://next.mui.com/material-ui/react-tabs/)
  *
  * API:
  *
- * - [Tabs API](https://mui.com/material-ui/api/tabs/)
+ * - [Tabs API](https://next.mui.com/material-ui/api/tabs/)
  */
 declare const Tabs: OverridableComponent<TabsTypeMap>;
 

package/Tabs/Tabs.js

@@ -8,10 +8,9 @@ import refType from '@mui/utils/refType';
 import { useSlotProps } from '@mui/base/utils';
 import composeClasses from '@mui/utils/composeClasses';
 import { useRtl } from '@mui/system/RtlProvider';
-import { styled, createUseThemeProps } from '../zero-styled';
-import useTheme from '../styles/useTheme';
+import { styled, useTheme } from '../zero-styled';
+import { useDefaultProps } from '../DefaultPropsProvider';
 import debounce from '../utils/debounce';
-import { getNormalizedScrollLeft, detectScrollType } from '../utils/scrollLeft';
 import animate from '../internal/animate';
 import ScrollbarSize from './ScrollbarSize';
 import TabScrollButton from '../TabScrollButton';
@@ -20,7 +19,6 @@ import tabsClasses, { getTabsUtilityClass } from './tabsClasses';
 import ownerDocument from '../utils/ownerDocument';
 import ownerWindow from '../utils/ownerWindow';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const useThemeProps = createUseThemeProps('MuiTabs');
 const nextItem = (list, item) => {
   if (list === item) {
     return list.firstChild;
@@ -254,7 +252,7 @@ const TabsScrollbarSize = styled(ScrollbarSize)({
 const defaultIndicatorStyle = {};
 let warnedOnceTabPresent = false;
 const Tabs = /*#__PURE__*/React.forwardRef(function Tabs(inProps, ref) {
-  const props = useThemeProps({
+  const props = useDefaultProps({
     props: inProps,
     name: 'MuiTabs'
   });
@@ -348,7 +346,6 @@ const Tabs = /*#__PURE__*/React.forwardRef(function Tabs(inProps, ref) {
         clientWidth: tabsNode.clientWidth,
         scrollLeft: tabsNode.scrollLeft,
         scrollTop: tabsNode.scrollTop,
-        scrollLeftNormalized: getNormalizedScrollLeft(tabsNode, isRtl ? 'rtl' : 'ltr'),
         scrollWidth: tabsNode.scrollWidth,
         top: rect.top,
         bottom: rect.bottom,
@@ -398,8 +395,7 @@ const Tabs = /*#__PURE__*/React.forwardRef(function Tabs(inProps, ref) {
     } else {
       startIndicator = isRtl ? 'right' : 'left';
       if (tabMeta && tabsMeta) {
-        const correction = isRtl ? tabsMeta.scrollLeftNormalized + tabsMeta.clientWidth - tabsMeta.scrollWidth : tabsMeta.scrollLeft;
-        startValue = (isRtl ? -1 : 1) * (tabMeta[startIndicator] - tabsMeta[startIndicator] + correction);
+        startValue = (isRtl ? -1 : 1) * (tabMeta[startIndicator] - tabsMeta[startIndicator] + tabsMeta.scrollLeft);
       }
     }
     const newIndicatorStyle = {
@@ -407,10 +403,7 @@ const Tabs = /*#__PURE__*/React.forwardRef(function Tabs(inProps, ref) {
       // May be wrong until the font is loaded.
       [size]: tabMeta ? tabMeta[size] : 0
     };
-
-    // IE11 support, replace with Number.isNaN
-    // eslint-disable-next-line no-restricted-globals
-    if (isNaN(indicatorStyle[startIndicator]) || isNaN(indicatorStyle[size])) {
+    if (typeof indicatorStyle[startIndicator] !== 'number' || typeof indicatorStyle[size] !== 'number') {
       setIndicatorStyle(newIndicatorStyle);
     } else {
       const dStart = Math.abs(indicatorStyle[startIndicator] - newIndicatorStyle[startIndicator]);
@@ -437,8 +430,6 @@ const Tabs = /*#__PURE__*/React.forwardRef(function Tabs(inProps, ref) {
       scrollValue += delta;
     } else {
       scrollValue += delta * (isRtl ? -1 : 1);
-      // Fix for Edge
-      scrollValue *= isRtl && detectScrollType() === 'reverse' ? -1 : 1;
     }
     scroll(scrollValue);
   };