;
IconButton.propTypes /* remove-proptypes */ = {
@@ -276,6 +319,17 @@ IconButton.propTypes /* remove-proptypes */ = {
* if needed.
*/
focusVisibleClassName: PropTypes.string,
+ /**
+ * If `true`, the loading indicator is shown and the icon button becomes disabled.
+ * @default false
+ */
+ loading: PropTypes.bool,
+ /**
+ * The node should contain an element with `role="progressbar"` with an accessible name.
+ * By default we render a `CircularProgress` that is labelled by the button itself.
+ * @default
+ */
+ loadingIndicator: PropTypes.node,
/**
* @ignore
*/
@@ -293,6 +347,7 @@ IconButton.propTypes /* remove-proptypes */ = {
* @default {}
*/
slotProps: PropTypes.shape({
+ loadingIndicator: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
root: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
}),
/**
@@ -300,6 +355,7 @@ IconButton.propTypes /* remove-proptypes */ = {
* @default {}
*/
slots: PropTypes.shape({
+ loadingIndicator: PropTypes.elementType,
root: PropTypes.elementType,
}),
/**
diff --git a/packages/mui-joy/src/IconButton/IconButtonProps.ts b/packages/mui-joy/src/IconButton/IconButtonProps.ts
index 8eddbb07650457..69479718836f3d 100644
--- a/packages/mui-joy/src/IconButton/IconButtonProps.ts
+++ b/packages/mui-joy/src/IconButton/IconButtonProps.ts
@@ -8,7 +8,7 @@ import {
import { ColorPaletteProp, VariantProp, SxProps, ApplyColorInversion } from '../styles/types';
import { SlotProps, CreateSlotsAndSlotProps } from '../utils/types';
-export type IconButtonSlot = 'root';
+export type IconButtonSlot = 'root' | 'loadingIndicator';
export interface IconButtonSlots {
/**
@@ -16,12 +16,18 @@ export interface IconButtonSlots {
* @default 'button'
*/
root?: React.ElementType;
+ /**
+ * The component that renders the loading indicator.
+ * @default 'span'
+ */
+ loadingIndicator?: React.ElementType;
}
export type IconButtonSlotsAndSlotProps = CreateSlotsAndSlotProps<
IconButtonSlots,
{
root: SlotProps<'button', {}, IconButtonOwnerState>;
+ loadingIndicator: SlotProps<'span', {}, IconButtonOwnerState>;
}
>;
@@ -74,6 +80,17 @@ export interface IconButtonTypeMap;
+ /**
+ * If `true`, the loading indicator is shown and the icon button becomes disabled.
+ * @default false
+ */
+ loading?: boolean;
+ /**
+ * The node should contain an element with `role="progressbar"` with an accessible name.
+ * By default we render a `CircularProgress` that is labelled by the button itself.
+ * @default
+ */
+ loadingIndicator?: React.ReactNode;
} & IconButtonSlotsAndSlotProps;
defaultComponent: D;
}
diff --git a/packages/mui-joy/src/IconButton/iconButtonClasses.ts b/packages/mui-joy/src/IconButton/iconButtonClasses.ts
index 6063c7a9420321..e5b0bb21c27918 100644
--- a/packages/mui-joy/src/IconButton/iconButtonClasses.ts
+++ b/packages/mui-joy/src/IconButton/iconButtonClasses.ts
@@ -33,6 +33,10 @@ export interface IconButtonClasses {
sizeMd: string;
/** Class name applied to the root element if `size="lg"`. */
sizeLg: string;
+ /** Class name applied to the root element if `loading={true}`. */
+ loading: string;
+ /** Class name applied to the loading indicator slot element. */
+ loadingIndicator: string;
}
export type IconButtonClassKey = keyof IconButtonClasses;
@@ -58,6 +62,8 @@ const iconButtonClasses: IconButtonClasses = generateUtilityClasses('MuiIconButt
'sizeSm',
'sizeMd',
'sizeLg',
+ 'loading',
+ 'loadingIndicator',
]);
export default iconButtonClasses;
diff --git a/packages/mui-joy/src/Input/Input.test.tsx b/packages/mui-joy/src/Input/Input.test.tsx
index c13f3fe3915441..8bd2a8d9cac635 100644
--- a/packages/mui-joy/src/Input/Input.test.tsx
+++ b/packages/mui-joy/src/Input/Input.test.tsx
@@ -1,16 +1,11 @@
import * as React from 'react';
import { expect } from 'chai';
import { spy } from 'sinon';
-import {
- describeConformance,
- createRenderer,
- screen,
- act,
- fireEvent,
-} from '@mui-internal/test-utils';
+import { createRenderer, screen, act, fireEvent } from '@mui-internal/test-utils';
import Input, { inputClasses as classes } from '@mui/joy/Input';
import { ThemeProvider, extendTheme } from '@mui/joy/styles';
import FormControl from '@mui/joy/FormControl';
+import describeConformance from '../../test/describeConformance';
describe('Joy ', () => {
const { render } = createRenderer();
diff --git a/packages/mui-joy/src/Input/Input.tsx b/packages/mui-joy/src/Input/Input.tsx
index 740ad1bc128f2d..4c78559dbb456e 100644
--- a/packages/mui-joy/src/Input/Input.tsx
+++ b/packages/mui-joy/src/Input/Input.tsx
@@ -31,105 +31,106 @@ const useUtilityClasses = (ownerState: InputOwnerState) => {
return composeClasses(slots, getInputUtilityClass, {});
};
-export const StyledInputRoot = styled('div')<{ ownerState: InputOwnerState }>(
- ({ theme, ownerState }) => {
- const variantStyle = theme.variants[`${ownerState.variant!}`]?.[ownerState.color!];
- return [
- {
- '--Input-radius': theme.vars.radius.sm,
- '--Input-gap': '0.5rem',
- '--Input-placeholderColor': 'inherit',
- '--Input-placeholderOpacity': 0.64,
- '--Input-decoratorColor': theme.vars.palette.text.icon,
- '--Input-focused': '0',
- '--Input-focusedThickness': theme.vars.focus.thickness,
- '--Input-focusedHighlight':
- theme.vars.palette[ownerState.color === 'neutral' ? 'primary' : ownerState.color!]?.[500],
- [`&:not([${INVERTED_COLORS_ATTR}])`]: {
- ...(ownerState.instanceColor && {
- '--_Input-focusedHighlight':
- theme.vars.palette[
- ownerState.instanceColor === 'neutral' ? 'primary' : ownerState.instanceColor
- ]?.[500],
- }),
- '--Input-focusedHighlight': `var(--_Input-focusedHighlight, ${theme.vars.palette.focusVisible})`,
- },
- ...(ownerState.size === 'sm' && {
- '--Input-minHeight': '2rem',
- '--Input-paddingInline': '0.5rem',
- '--Input-decoratorChildHeight': 'min(1.5rem, var(--Input-minHeight))',
- '--Icon-fontSize': theme.vars.fontSize.xl,
+export const StyledInputRoot = styled('div')<{ ownerState: InputOwnerState }>(({
+ theme,
+ ownerState,
+}) => {
+ const variantStyle = theme.variants[`${ownerState.variant!}`]?.[ownerState.color!];
+ return [
+ {
+ '--Input-radius': theme.vars.radius.sm,
+ '--Input-gap': '0.5rem',
+ '--Input-placeholderColor': 'inherit',
+ '--Input-placeholderOpacity': 0.64,
+ '--Input-decoratorColor': theme.vars.palette.text.icon,
+ '--Input-focused': '0',
+ '--Input-focusedThickness': theme.vars.focus.thickness,
+ '--Input-focusedHighlight':
+ theme.vars.palette[ownerState.color === 'neutral' ? 'primary' : ownerState.color!]?.[500],
+ [`&:not([${INVERTED_COLORS_ATTR}])`]: {
+ ...(ownerState.instanceColor && {
+ '--_Input-focusedHighlight':
+ theme.vars.palette[
+ ownerState.instanceColor === 'neutral' ? 'primary' : ownerState.instanceColor
+ ]?.[500],
}),
- ...(ownerState.size === 'md' && {
- '--Input-minHeight': '2.25rem',
- '--Input-paddingInline': '0.75rem',
- '--Input-decoratorChildHeight': 'min(1.75rem, var(--Input-minHeight))',
- '--Icon-fontSize': theme.vars.fontSize.xl2,
- }),
- ...(ownerState.size === 'lg' && {
- '--Input-minHeight': '2.75rem',
- '--Input-paddingInline': '1rem',
- '--Input-gap': '0.75rem',
- '--Input-decoratorChildHeight': 'min(2.25rem, var(--Input-minHeight))',
- '--Icon-fontSize': theme.vars.fontSize.xl2,
- }),
- // variables for controlling child components
- '--Input-decoratorChildOffset':
- 'min(calc(var(--Input-paddingInline) - (var(--Input-minHeight) - 2 * var(--variant-borderWidth, 0px) - var(--Input-decoratorChildHeight)) / 2), var(--Input-paddingInline))',
- '--_Input-paddingBlock':
- 'max((var(--Input-minHeight) - 2 * var(--variant-borderWidth, 0px) - var(--Input-decoratorChildHeight)) / 2, 0px)',
- '--Input-decoratorChildRadius':
- 'max(var(--Input-radius) - var(--variant-borderWidth, 0px) - var(--_Input-paddingBlock), min(var(--_Input-paddingBlock) + var(--variant-borderWidth, 0px), var(--Input-radius) / 2))',
- '--Button-minHeight': 'var(--Input-decoratorChildHeight)',
- '--Button-paddingBlock': '0px', // to ensure that the height of the button is equal to --Button-minHeight
- '--IconButton-size': 'var(--Input-decoratorChildHeight)',
- '--Button-radius': 'var(--Input-decoratorChildRadius)',
- '--IconButton-radius': 'var(--Input-decoratorChildRadius)',
+ '--Input-focusedHighlight': `var(--_Input-focusedHighlight, ${theme.vars.palette.focusVisible})`,
+ },
+ ...(ownerState.size === 'sm' && {
+ '--Input-minHeight': '2rem',
+ '--Input-paddingInline': '0.5rem',
+ '--Input-decoratorChildHeight': 'min(1.5rem, var(--Input-minHeight))',
+ '--Icon-fontSize': theme.vars.fontSize.xl,
+ }),
+ ...(ownerState.size === 'md' && {
+ '--Input-minHeight': '2.25rem',
+ '--Input-paddingInline': '0.75rem',
+ '--Input-decoratorChildHeight': 'min(1.75rem, var(--Input-minHeight))',
+ '--Icon-fontSize': theme.vars.fontSize.xl2,
+ }),
+ ...(ownerState.size === 'lg' && {
+ '--Input-minHeight': '2.75rem',
+ '--Input-paddingInline': '1rem',
+ '--Input-gap': '0.75rem',
+ '--Input-decoratorChildHeight': 'min(2.25rem, var(--Input-minHeight))',
+ '--Icon-fontSize': theme.vars.fontSize.xl2,
+ }),
+ // variables for controlling child components
+ '--Input-decoratorChildOffset':
+ 'min(calc(var(--Input-paddingInline) - (var(--Input-minHeight) - 2 * var(--variant-borderWidth, 0px) - var(--Input-decoratorChildHeight)) / 2), var(--Input-paddingInline))',
+ '--_Input-paddingBlock':
+ 'max((var(--Input-minHeight) - 2 * var(--variant-borderWidth, 0px) - var(--Input-decoratorChildHeight)) / 2, 0px)',
+ '--Input-decoratorChildRadius':
+ 'max(var(--Input-radius) - var(--variant-borderWidth, 0px) - var(--_Input-paddingBlock), min(var(--_Input-paddingBlock) + var(--variant-borderWidth, 0px), var(--Input-radius) / 2))',
+ '--Button-minHeight': 'var(--Input-decoratorChildHeight)',
+ '--Button-paddingBlock': '0px', // to ensure that the height of the button is equal to --Button-minHeight
+ '--IconButton-size': 'var(--Input-decoratorChildHeight)',
+ '--Button-radius': 'var(--Input-decoratorChildRadius)',
+ '--IconButton-radius': 'var(--Input-decoratorChildRadius)',
+ boxSizing: 'border-box',
+ ...(ownerState.variant !== 'plain' && {
+ boxShadow: theme.shadow.xs,
+ }),
+ minWidth: 0,
+ minHeight: 'var(--Input-minHeight)',
+ ...(ownerState.fullWidth && {
+ width: '100%',
+ }),
+ cursor: 'text',
+ position: 'relative',
+ display: 'flex',
+ paddingInline: `var(--Input-paddingInline)`,
+ borderRadius: 'var(--Input-radius)',
+ ...theme.typography[`body-${ownerState.size!}`],
+ ...variantStyle,
+ backgroundColor: variantStyle?.backgroundColor ?? theme.vars.palette.background.surface,
+ '&::before': {
boxSizing: 'border-box',
- ...(ownerState.variant !== 'plain' && {
- boxShadow: theme.shadow.xs,
- }),
- minWidth: 0,
- minHeight: 'var(--Input-minHeight)',
- ...(ownerState.fullWidth && {
- width: '100%',
- }),
- cursor: 'text',
- position: 'relative',
- display: 'flex',
- paddingInline: `var(--Input-paddingInline)`,
- borderRadius: 'var(--Input-radius)',
- ...theme.typography[`body-${ownerState.size!}`],
- ...variantStyle,
- backgroundColor: variantStyle?.backgroundColor ?? theme.vars.palette.background.surface,
- '&::before': {
- boxSizing: 'border-box',
- content: '""',
- display: 'block',
- position: 'absolute',
- pointerEvents: 'none',
- top: 0,
- left: 0,
- right: 0,
- bottom: 0,
- zIndex: 1,
- borderRadius: 'inherit',
- margin: 'calc(var(--variant-borderWidth, 0px) * -1)', // for outlined variant
- boxShadow: `var(--Input-focusedInset, inset) 0 0 0 calc(var(--Input-focused) * var(--Input-focusedThickness)) var(--Input-focusedHighlight)`,
- },
- } as const,
- {
- '&:hover': {
- ...theme.variants[`${ownerState.variant!}Hover`]?.[ownerState.color!],
- backgroundColor: null, // it is not common to change background on hover for Input
- },
- [`&.${inputClasses.disabled}`]:
- theme.variants[`${ownerState.variant!}Disabled`]?.[ownerState.color!],
- '&:focus-within::before': { '--Input-focused': '1' },
+ content: '""',
+ display: 'block',
+ position: 'absolute',
+ pointerEvents: 'none',
+ top: 0,
+ left: 0,
+ right: 0,
+ bottom: 0,
+ zIndex: 1,
+ borderRadius: 'inherit',
+ margin: 'calc(var(--variant-borderWidth, 0px) * -1)', // for outlined variant
+ boxShadow: `var(--Input-focusedInset, inset) 0 0 0 calc(var(--Input-focused) * var(--Input-focusedThickness)) var(--Input-focusedHighlight)`,
},
- ];
- },
-);
+ } as const,
+ {
+ '&:hover': {
+ ...theme.variants[`${ownerState.variant!}Hover`]?.[ownerState.color!],
+ backgroundColor: null, // it is not common to change background on hover for Input
+ },
+ [`&.${inputClasses.disabled}`]:
+ theme.variants[`${ownerState.variant!}Disabled`]?.[ownerState.color!],
+ '&:focus-within::before': { '--Input-focused': '1' },
+ },
+ ];
+});
export const StyledInputHtml = styled('input')<{ ownerState: InputOwnerState }>(
({ ownerState }) => ({
diff --git a/packages/mui-joy/src/LinearProgress/LinearProgress.test.tsx b/packages/mui-joy/src/LinearProgress/LinearProgress.test.tsx
index 5a976b191e5386..30c719e00ebb68 100644
--- a/packages/mui-joy/src/LinearProgress/LinearProgress.test.tsx
+++ b/packages/mui-joy/src/LinearProgress/LinearProgress.test.tsx
@@ -1,9 +1,10 @@
import * as React from 'react';
import { expect } from 'chai';
-import { createRenderer, describeConformance } from '@mui-internal/test-utils';
+import { createRenderer } from '@mui-internal/test-utils';
import { unstable_capitalize as capitalize } from '@mui/utils';
import { ThemeProvider } from '@mui/joy/styles';
import LinearProgress, { linearProgressClasses as classes } from '@mui/joy/LinearProgress';
+import describeConformance from '../../test/describeConformance';
describe('', () => {
const { render } = createRenderer();
diff --git a/packages/mui-joy/src/Link/Link.test.tsx b/packages/mui-joy/src/Link/Link.test.tsx
index 5271fe9a682422..ebc39e477aa134 100644
--- a/packages/mui-joy/src/Link/Link.test.tsx
+++ b/packages/mui-joy/src/Link/Link.test.tsx
@@ -1,11 +1,12 @@
import * as React from 'react';
import { expect } from 'chai';
import { SinonSpy, spy } from 'sinon';
-import { act, createRenderer, fireEvent, describeConformance } from '@mui-internal/test-utils';
+import { act, createRenderer, fireEvent } from '@mui-internal/test-utils';
import { unstable_capitalize as capitalize } from '@mui/utils';
import Link, { LinkClassKey, linkClasses as classes } from '@mui/joy/Link';
import Typography from '@mui/joy/Typography';
import { ThemeProvider, TypographySystem } from '@mui/joy/styles';
+import describeConformance from '../../test/describeConformance';
function focusVisible(element: HTMLAnchorElement | null) {
act(() => {
@@ -50,10 +51,13 @@ describe('', () => {
it('should fire event callbacks', () => {
const events = ['onBlur', 'onFocus'];
- const handlers = events.reduce((result, n) => {
- result[n] = spy();
- return result;
- }, {} as Record);
+ const handlers = events.reduce(
+ (result, n) => {
+ result[n] = spy();
+ return result;
+ },
+ {} as Record,
+ );
const { container } = render(
diff --git a/packages/mui-joy/src/List/ComponentListContext.ts b/packages/mui-joy/src/List/ComponentListContext.ts
index a8c889f3f05761..aff97dca3a362d 100644
--- a/packages/mui-joy/src/List/ComponentListContext.ts
+++ b/packages/mui-joy/src/List/ComponentListContext.ts
@@ -2,4 +2,8 @@ import * as React from 'react';
const ComponentListContext = React.createContext(undefined);
+if (process.env.NODE_ENV !== 'production') {
+ ComponentListContext.displayName = 'ComponentListContext';
+}
+
export default ComponentListContext;
diff --git a/packages/mui-joy/src/List/GroupListContext.ts b/packages/mui-joy/src/List/GroupListContext.ts
index 0f6584855e2355..e4298395f6472d 100644
--- a/packages/mui-joy/src/List/GroupListContext.ts
+++ b/packages/mui-joy/src/List/GroupListContext.ts
@@ -2,4 +2,8 @@ import * as React from 'react';
const GroupListContext = React.createContext(undefined);
+if (process.env.NODE_ENV !== 'production') {
+ GroupListContext.displayName = 'GroupListContext';
+}
+
export default GroupListContext;
diff --git a/packages/mui-joy/src/List/List.test.tsx b/packages/mui-joy/src/List/List.test.tsx
index 8fe2fa12f5b6a2..e3c3d81246da7c 100644
--- a/packages/mui-joy/src/List/List.test.tsx
+++ b/packages/mui-joy/src/List/List.test.tsx
@@ -1,6 +1,6 @@
import * as React from 'react';
import { expect } from 'chai';
-import { describeConformance, createRenderer, screen } from '@mui-internal/test-utils';
+import { createRenderer, screen } from '@mui-internal/test-utils';
import { ThemeProvider } from '@mui/joy/styles';
import List, { listClasses as classes } from '@mui/joy/List';
import ListItem from '@mui/joy/ListItem';
@@ -8,6 +8,7 @@ import MenuList from '@mui/joy/MenuList';
import Menu from '@mui/joy/Menu';
import Select from '@mui/joy/Select';
import RadioGroup from '@mui/joy/RadioGroup';
+import describeConformance from '../../test/describeConformance';
describe('Joy
', () => {
const { render } = createRenderer();
diff --git a/packages/mui-joy/src/List/NestedListContext.ts b/packages/mui-joy/src/List/NestedListContext.ts
index 02d171d438d444..f898ff83b51610 100644
--- a/packages/mui-joy/src/List/NestedListContext.ts
+++ b/packages/mui-joy/src/List/NestedListContext.ts
@@ -2,4 +2,8 @@ import * as React from 'react';
const NestedListContext = React.createContext(false);
+if (process.env.NODE_ENV !== 'production') {
+ NestedListContext.displayName = 'NestedListContext';
+}
+
export default NestedListContext;
diff --git a/packages/mui-joy/src/List/RowListContext.ts b/packages/mui-joy/src/List/RowListContext.ts
index 34f73a18906b28..ab535324f9b37c 100644
--- a/packages/mui-joy/src/List/RowListContext.ts
+++ b/packages/mui-joy/src/List/RowListContext.ts
@@ -2,4 +2,8 @@ import * as React from 'react';
const RowListContext = React.createContext(false);
+if (process.env.NODE_ENV !== 'production') {
+ RowListContext.displayName = 'RowListContext';
+}
+
export default RowListContext;
diff --git a/packages/mui-joy/src/List/WrapListContext.ts b/packages/mui-joy/src/List/WrapListContext.ts
index 702eb5b96cf811..9624e8a69a0926 100644
--- a/packages/mui-joy/src/List/WrapListContext.ts
+++ b/packages/mui-joy/src/List/WrapListContext.ts
@@ -2,4 +2,8 @@ import * as React from 'react';
const WrapListContext = React.createContext(false);
+if (process.env.NODE_ENV !== 'production') {
+ WrapListContext.displayName = 'WrapListContext';
+}
+
export default WrapListContext;
diff --git a/packages/mui-joy/src/ListDivider/ListDivider.test.tsx b/packages/mui-joy/src/ListDivider/ListDivider.test.tsx
index 1a6515afaa5d73..e958c94631f13e 100644
--- a/packages/mui-joy/src/ListDivider/ListDivider.test.tsx
+++ b/packages/mui-joy/src/ListDivider/ListDivider.test.tsx
@@ -1,9 +1,10 @@
import * as React from 'react';
import { expect } from 'chai';
-import { describeConformance, createRenderer, screen } from '@mui-internal/test-utils';
+import { createRenderer, screen } from '@mui-internal/test-utils';
import { ThemeProvider } from '@mui/joy/styles';
import List from '@mui/joy/List';
import ListDivider, { listDividerClasses as classes } from '@mui/joy/ListDivider';
+import describeConformance from '../../test/describeConformance';
describe('Joy ', () => {
const { render } = createRenderer();
diff --git a/packages/mui-joy/src/ListItem/ListItem.test.tsx b/packages/mui-joy/src/ListItem/ListItem.test.tsx
index e627bc6fa25599..03b1217c2b298a 100644
--- a/packages/mui-joy/src/ListItem/ListItem.test.tsx
+++ b/packages/mui-joy/src/ListItem/ListItem.test.tsx
@@ -1,11 +1,12 @@
import * as React from 'react';
import { expect } from 'chai';
-import { describeConformance, createRenderer, screen } from '@mui-internal/test-utils';
+import { createRenderer, screen } from '@mui-internal/test-utils';
import { ThemeProvider } from '@mui/joy/styles';
import MenuList from '@mui/joy/MenuList';
import List from '@mui/joy/List';
import ListItem, { listItemClasses as classes } from '@mui/joy/ListItem';
import ListSubheader from '@mui/joy/ListSubheader';
+import describeConformance from '../../test/describeConformance';
describe('Joy ', () => {
const { render } = createRenderer();
diff --git a/packages/mui-joy/src/ListItem/ListItem.tsx b/packages/mui-joy/src/ListItem/ListItem.tsx
index 339d2463cc57d0..b195625fd273d8 100644
--- a/packages/mui-joy/src/ListItem/ListItem.tsx
+++ b/packages/mui-joy/src/ListItem/ListItem.tsx
@@ -17,7 +17,7 @@ import NestedListContext from '../List/NestedListContext';
import RowListContext from '../List/RowListContext';
import WrapListContext from '../List/WrapListContext';
import ComponentListContext from '../List/ComponentListContext';
-import ListSubheaderDispatch from '../ListSubheader/ListSubheaderContext';
+import ListSubheaderContext from '../ListSubheader/ListSubheaderContext';
import GroupListContext from '../List/GroupListContext';
const useUtilityClasses = (ownerState: ListItemOwnerState) => {
@@ -244,7 +244,7 @@ const ListItem = React.forwardRef(function ListItem(inProps, ref) {
});
return (
-
+
{startAction && {startAction}}
@@ -265,7 +265,7 @@ const ListItem = React.forwardRef(function ListItem(inProps, ref) {
{endAction && {endAction}}
-
+
);
}) as OverridableComponent;
diff --git a/packages/mui-joy/src/ListItemButton/ListItemButton.test.tsx b/packages/mui-joy/src/ListItemButton/ListItemButton.test.tsx
index 22b43ce0f88bef..723a21bba45a0b 100644
--- a/packages/mui-joy/src/ListItemButton/ListItemButton.test.tsx
+++ b/packages/mui-joy/src/ListItemButton/ListItemButton.test.tsx
@@ -1,8 +1,9 @@
import * as React from 'react';
import { expect } from 'chai';
-import { describeConformance, createRenderer, act, fireEvent } from '@mui-internal/test-utils';
+import { createRenderer, act, fireEvent } from '@mui-internal/test-utils';
import { ThemeProvider } from '@mui/joy/styles';
import ListItemButton, { listItemButtonClasses as classes } from '@mui/joy/ListItemButton';
+import describeConformance from '../../test/describeConformance';
describe('Joy ', () => {
const { render } = createRenderer();
diff --git a/packages/mui-joy/src/ListItemButton/ListItemButtonOrientationContext.ts b/packages/mui-joy/src/ListItemButton/ListItemButtonOrientationContext.ts
index 94065dbc891508..b2e7380dae11b1 100644
--- a/packages/mui-joy/src/ListItemButton/ListItemButtonOrientationContext.ts
+++ b/packages/mui-joy/src/ListItemButton/ListItemButtonOrientationContext.ts
@@ -4,4 +4,8 @@ const ListItemButtonOrientationContext = React.createContext<'horizontal' | 'ver
'horizontal',
);
+if (process.env.NODE_ENV !== 'production') {
+ ListItemButtonOrientationContext.displayName = 'ListItemButtonOrientationContext';
+}
+
export default ListItemButtonOrientationContext;
diff --git a/packages/mui-joy/src/ListItemContent/ListItemContent.test.tsx b/packages/mui-joy/src/ListItemContent/ListItemContent.test.tsx
index 5727a4fecda71b..3d7af18633f725 100644
--- a/packages/mui-joy/src/ListItemContent/ListItemContent.test.tsx
+++ b/packages/mui-joy/src/ListItemContent/ListItemContent.test.tsx
@@ -1,8 +1,9 @@
import * as React from 'react';
import { expect } from 'chai';
-import { describeConformance, createRenderer } from '@mui-internal/test-utils';
+import { createRenderer } from '@mui-internal/test-utils';
import { ThemeProvider } from '@mui/joy/styles';
import ListItemContent, { listItemContentClasses as classes } from '@mui/joy/ListItemContent';
+import describeConformance from '../../test/describeConformance';
describe('Joy ', () => {
const { render } = createRenderer();
diff --git a/packages/mui-joy/src/ListItemDecorator/ListItemDecorator.test.tsx b/packages/mui-joy/src/ListItemDecorator/ListItemDecorator.test.tsx
index 1b0bad3280aaa8..2f756156c88743 100644
--- a/packages/mui-joy/src/ListItemDecorator/ListItemDecorator.test.tsx
+++ b/packages/mui-joy/src/ListItemDecorator/ListItemDecorator.test.tsx
@@ -1,8 +1,9 @@
import * as React from 'react';
import { expect } from 'chai';
-import { describeConformance, createRenderer } from '@mui-internal/test-utils';
+import { createRenderer } from '@mui-internal/test-utils';
import { ThemeProvider } from '@mui/joy/styles';
import ListItemDecorator, { listItemDecoratorClasses as classes } from '@mui/joy/ListItemDecorator';
+import describeConformance from '../../test/describeConformance';
describe('Joy ', () => {
const { render } = createRenderer();
diff --git a/packages/mui-joy/src/ListSubheader/ListSubheader.test.tsx b/packages/mui-joy/src/ListSubheader/ListSubheader.test.tsx
index b49ab8229acd86..6af9deba3d4a54 100644
--- a/packages/mui-joy/src/ListSubheader/ListSubheader.test.tsx
+++ b/packages/mui-joy/src/ListSubheader/ListSubheader.test.tsx
@@ -1,10 +1,11 @@
import * as React from 'react';
import { expect } from 'chai';
import { spy } from 'sinon';
-import { describeConformance, createRenderer } from '@mui-internal/test-utils';
+import { createRenderer } from '@mui-internal/test-utils';
import { ThemeProvider } from '@mui/joy/styles';
import ListSubheader, { listSubheaderClasses as classes } from '@mui/joy/ListSubheader';
-import ListSubheaderDispatch from './ListSubheaderContext';
+import ListSubheaderContext from './ListSubheaderContext';
+import describeConformance from '../../test/describeConformance';
describe('Joy ', () => {
const { render } = createRenderer();
@@ -49,9 +50,9 @@ describe('Joy ', () => {
it('should call dispatch context with the generated id', () => {
const dispatch = spy();
const { container } = render(
-
+
- ,
+ ,
);
// @ts-ignore
diff --git a/packages/mui-joy/src/ListSubheader/ListSubheader.tsx b/packages/mui-joy/src/ListSubheader/ListSubheader.tsx
index 070e599fcc41c7..e880abf242adcf 100644
--- a/packages/mui-joy/src/ListSubheader/ListSubheader.tsx
+++ b/packages/mui-joy/src/ListSubheader/ListSubheader.tsx
@@ -8,7 +8,7 @@ import { unstable_composeClasses as composeClasses } from '@mui/base/composeClas
import { styled, useThemeProps } from '../styles';
import { ListSubheaderOwnerState, ListSubheaderTypeMap } from './ListSubheaderProps';
import { getListSubheaderUtilityClass } from './listSubheaderClasses';
-import ListSubheaderDispatch from './ListSubheaderContext';
+import ListSubheaderContext from './ListSubheaderContext';
import useSlot from '../utils/useSlot';
import { INVERTED_COLORS_ATTR } from '../colorInversion/colorInversionUtils';
@@ -88,7 +88,7 @@ const ListSubheader = React.forwardRef(function ListSubheader(inProps, ref) {
...other
} = props;
const id = useId(idOverride);
- const setSubheaderId = React.useContext(ListSubheaderDispatch);
+ const setSubheaderId = React.useContext(ListSubheaderContext);
React.useEffect(() => {
if (setSubheaderId) {
diff --git a/packages/mui-joy/src/ListSubheader/ListSubheaderContext.ts b/packages/mui-joy/src/ListSubheader/ListSubheaderContext.ts
index 1d9258302a4fd6..b7705c35b1bfc7 100644
--- a/packages/mui-joy/src/ListSubheader/ListSubheaderContext.ts
+++ b/packages/mui-joy/src/ListSubheader/ListSubheaderContext.ts
@@ -1,7 +1,11 @@
import * as React from 'react';
-const ListSubheaderDispatch = React.createContext<
+const ListSubheaderContext = React.createContext<
undefined | React.Dispatch>
>(undefined);
-export default ListSubheaderDispatch;
+if (process.env.NODE_ENV !== 'production') {
+ ListSubheaderContext.displayName = 'ListSubheaderContext';
+}
+
+export default ListSubheaderContext;
diff --git a/packages/mui-joy/src/Menu/Menu.test.tsx b/packages/mui-joy/src/Menu/Menu.test.tsx
index 6d2e67fc43cd7f..d6969b30334951 100644
--- a/packages/mui-joy/src/Menu/Menu.test.tsx
+++ b/packages/mui-joy/src/Menu/Menu.test.tsx
@@ -1,13 +1,7 @@
import * as React from 'react';
import { spy } from 'sinon';
import { expect } from 'chai';
-import {
- act,
- createRenderer,
- describeConformance,
- screen,
- fireEvent,
-} from '@mui-internal/test-utils';
+import { act, createRenderer, screen, fireEvent } from '@mui-internal/test-utils';
import { Popper as PopperUnstyled } from '@mui/base/Popper';
import { DropdownContext, DropdownContextValue } from '@mui/base/useDropdown';
import { ThemeProvider } from '@mui/joy/styles';
@@ -15,6 +9,7 @@ import Menu, { menuClasses as classes } from '@mui/joy/Menu';
import Dropdown from '@mui/joy/Dropdown';
import MenuItem from '@mui/joy/MenuItem';
import MenuButton from '@mui/joy/MenuButton';
+import describeConformance from '../../test/describeConformance';
const testContext: DropdownContextValue = {
dispatch: () => {},
diff --git a/packages/mui-joy/src/MenuButton/MenuButton.test.tsx b/packages/mui-joy/src/MenuButton/MenuButton.test.tsx
index bb12143611c677..92052dba8ebc6d 100644
--- a/packages/mui-joy/src/MenuButton/MenuButton.test.tsx
+++ b/packages/mui-joy/src/MenuButton/MenuButton.test.tsx
@@ -1,10 +1,11 @@
import * as React from 'react';
import { expect } from 'chai';
import { spy } from 'sinon';
-import { createRenderer, describeConformance } from '@mui-internal/test-utils';
+import { createRenderer } from '@mui-internal/test-utils';
import { DropdownContext, DropdownContextValue } from '@mui/base/useDropdown';
import { ThemeProvider } from '@mui/joy/styles';
import MenuButton, { menuButtonClasses as classes } from '@mui/joy/MenuButton';
+import describeConformance from '../../test/describeConformance';
const testContext: DropdownContextValue = {
dispatch: () => {},
diff --git a/packages/mui-joy/src/MenuItem/MenuItem.test.tsx b/packages/mui-joy/src/MenuItem/MenuItem.test.tsx
index 71561e6befaa29..7492c1e39340e3 100644
--- a/packages/mui-joy/src/MenuItem/MenuItem.test.tsx
+++ b/packages/mui-joy/src/MenuItem/MenuItem.test.tsx
@@ -1,17 +1,12 @@
import * as React from 'react';
import { expect } from 'chai';
import { spy } from 'sinon';
-import {
- act,
- describeConformance,
- createRenderer,
- fireEvent,
- screen,
-} from '@mui-internal/test-utils';
+import { act, createRenderer, fireEvent, screen } from '@mui-internal/test-utils';
import { MenuProvider, MenuProviderValue } from '@mui/base/useMenu';
import { ThemeProvider } from '@mui/joy/styles';
import MenuItem, { menuItemClasses as classes } from '@mui/joy/MenuItem';
import ListItemButton from '@mui/joy/ListItemButton';
+import describeConformance from '../../test/describeConformance';
const testContext: MenuProviderValue = {
registerItem: () => ({ id: '0', deregister: () => {} }),
diff --git a/packages/mui-joy/src/MenuList/MenuList.test.tsx b/packages/mui-joy/src/MenuList/MenuList.test.tsx
index a34765831c5d4f..f9b58f914c8a15 100644
--- a/packages/mui-joy/src/MenuList/MenuList.test.tsx
+++ b/packages/mui-joy/src/MenuList/MenuList.test.tsx
@@ -1,8 +1,9 @@
import * as React from 'react';
import { expect } from 'chai';
-import { describeConformance, createRenderer, screen } from '@mui-internal/test-utils';
+import { createRenderer, screen } from '@mui-internal/test-utils';
import { ThemeProvider } from '@mui/joy/styles';
import MenuList, { menuListClasses as classes } from '@mui/joy/MenuList';
+import describeConformance from '../../test/describeConformance';
describe('Joy ', () => {
const { render } = createRenderer();
diff --git a/packages/mui-joy/src/Modal/CloseModalContext.ts b/packages/mui-joy/src/Modal/CloseModalContext.ts
index 487543623efe95..372a18b97d395c 100644
--- a/packages/mui-joy/src/Modal/CloseModalContext.ts
+++ b/packages/mui-joy/src/Modal/CloseModalContext.ts
@@ -3,4 +3,8 @@ import { ModalProps } from './ModalProps';
const CloseModalContext = React.createContext(undefined);
+if (process.env.NODE_ENV !== 'production') {
+ CloseModalContext.displayName = 'CloseModalContext';
+}
+
export default CloseModalContext;
diff --git a/packages/mui-joy/src/Modal/Modal.test.tsx b/packages/mui-joy/src/Modal/Modal.test.tsx
index 9fc9e945b954b5..e597c4197cf9ab 100644
--- a/packages/mui-joy/src/Modal/Modal.test.tsx
+++ b/packages/mui-joy/src/Modal/Modal.test.tsx
@@ -2,15 +2,10 @@ import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { spy } from 'sinon';
import { expect } from 'chai';
-import {
- createRenderer,
- describeConformance,
- act,
- fireEvent,
- within,
-} from '@mui-internal/test-utils';
+import { createRenderer, act, fireEvent, within } from '@mui-internal/test-utils';
import { ThemeProvider } from '@mui/joy/styles';
import Modal, { modalClasses as classes, ModalProps } from '@mui/joy/Modal';
+import describeConformance from '../../test/describeConformance';
describe('', () => {
const { clock, render } = createRenderer();
diff --git a/packages/mui-joy/src/ModalClose/ModalClose.test.tsx b/packages/mui-joy/src/ModalClose/ModalClose.test.tsx
index 983515365110b1..86a7548a4b94f7 100644
--- a/packages/mui-joy/src/ModalClose/ModalClose.test.tsx
+++ b/packages/mui-joy/src/ModalClose/ModalClose.test.tsx
@@ -1,12 +1,13 @@
import * as React from 'react';
import { expect } from 'chai';
import { spy } from 'sinon';
-import { createRenderer, describeConformance, fireEvent } from '@mui-internal/test-utils';
+import { createRenderer, fireEvent } from '@mui-internal/test-utils';
import { unstable_capitalize as capitalize } from '@mui/utils';
import { ThemeProvider } from '@mui/joy/styles';
import Modal from '@mui/joy/Modal';
import ModalDialog from '@mui/joy/ModalDialog';
import ModalClose, { modalCloseClasses as classes } from '@mui/joy/ModalClose';
+import describeConformance from '../../test/describeConformance';
describe('', () => {
const { render } = createRenderer();
diff --git a/packages/mui-joy/src/ModalDialog/ModalDialog.test.tsx b/packages/mui-joy/src/ModalDialog/ModalDialog.test.tsx
index 3c9c5ac5f38838..701f04b771835b 100644
--- a/packages/mui-joy/src/ModalDialog/ModalDialog.test.tsx
+++ b/packages/mui-joy/src/ModalDialog/ModalDialog.test.tsx
@@ -1,9 +1,10 @@
import * as React from 'react';
import { expect } from 'chai';
-import { createRenderer, describeConformance } from '@mui-internal/test-utils';
+import { createRenderer } from '@mui-internal/test-utils';
import { unstable_capitalize as capitalize } from '@mui/utils';
import { ThemeProvider } from '@mui/joy/styles';
import ModalDialog, { modalDialogClasses as classes } from '@mui/joy/ModalDialog';
+import describeConformance from '../../test/describeConformance';
describe('', () => {
const { render } = createRenderer();
diff --git a/packages/mui-joy/src/ModalDialog/ModalDialogSizeContext.ts b/packages/mui-joy/src/ModalDialog/ModalDialogSizeContext.ts
index 061e784aaf6436..927f009620b383 100644
--- a/packages/mui-joy/src/ModalDialog/ModalDialogSizeContext.ts
+++ b/packages/mui-joy/src/ModalDialog/ModalDialogSizeContext.ts
@@ -3,4 +3,8 @@ import { ModalDialogProps } from './ModalDialogProps';
const ModalDialogSizeContext = React.createContext(undefined);
+if (process.env.NODE_ENV !== 'production') {
+ ModalDialogSizeContext.displayName = 'ModalDialogSizeContext';
+}
+
export default ModalDialogSizeContext;
diff --git a/packages/mui-joy/src/ModalDialog/ModalDialogVariantColorContext.ts b/packages/mui-joy/src/ModalDialog/ModalDialogVariantColorContext.ts
index b028adfe78e17d..b4f7e01137c04f 100644
--- a/packages/mui-joy/src/ModalDialog/ModalDialogVariantColorContext.ts
+++ b/packages/mui-joy/src/ModalDialog/ModalDialogVariantColorContext.ts
@@ -6,4 +6,8 @@ const ModalDialogVariantColorContext = React.createContext<
| (Pick & { labelledBy?: string; describedBy?: string })
>(undefined);
+if (process.env.NODE_ENV !== 'production') {
+ ModalDialogVariantColorContext.displayName = 'ModalDialogVariantColorContext';
+}
+
export default ModalDialogVariantColorContext;
diff --git a/packages/mui-joy/src/ModalOverflow/ModalOverflow.test.tsx b/packages/mui-joy/src/ModalOverflow/ModalOverflow.test.tsx
index 4b33be3c56985f..4c46778eda25a1 100644
--- a/packages/mui-joy/src/ModalOverflow/ModalOverflow.test.tsx
+++ b/packages/mui-joy/src/ModalOverflow/ModalOverflow.test.tsx
@@ -1,7 +1,8 @@
import * as React from 'react';
-import { createRenderer, describeConformance } from '@mui-internal/test-utils';
+import { createRenderer } from '@mui-internal/test-utils';
import { ThemeProvider } from '@mui/joy/styles';
import ModalOverflow, { modalOverflowClasses as classes } from '@mui/joy/ModalOverflow';
+import describeConformance from '../../test/describeConformance';
describe('', () => {
const { render } = createRenderer();
diff --git a/packages/mui-joy/src/Radio/Radio.test.tsx b/packages/mui-joy/src/Radio/Radio.test.tsx
index d03876d4775886..471918c6ecc3ff 100644
--- a/packages/mui-joy/src/Radio/Radio.test.tsx
+++ b/packages/mui-joy/src/Radio/Radio.test.tsx
@@ -1,10 +1,11 @@
import * as React from 'react';
import { expect } from 'chai';
-import { describeConformance, act, createRenderer, fireEvent } from '@mui-internal/test-utils';
+import { act, createRenderer, fireEvent } from '@mui-internal/test-utils';
import Radio, { radioClasses as classes } from '@mui/joy/Radio';
import { ThemeProvider, extendTheme } from '@mui/joy/styles';
import FormControl from '@mui/joy/FormControl';
import RadioGroup from '@mui/joy/RadioGroup';
+import describeConformance from '../../test/describeConformance';
describe('', () => {
const { render } = createRenderer();
diff --git a/packages/mui-joy/src/Radio/Radio.tsx b/packages/mui-joy/src/Radio/Radio.tsx
index 100b84c8edfeca..70207ef81727a6 100644
--- a/packages/mui-joy/src/Radio/Radio.tsx
+++ b/packages/mui-joy/src/Radio/Radio.tsx
@@ -369,6 +369,7 @@ const Radio = React.forwardRef(function Radio(inProps, ref) {
const [SlotInput, inputProps] = useSlot('input', {
additionalProps: {
type: 'radio',
+ role: undefined,
id,
name,
readOnly,
diff --git a/packages/mui-joy/src/RadioGroup/RadioGroup.test.tsx b/packages/mui-joy/src/RadioGroup/RadioGroup.test.tsx
index 1c622252b9cff3..22f32cf05c664e 100644
--- a/packages/mui-joy/src/RadioGroup/RadioGroup.test.tsx
+++ b/packages/mui-joy/src/RadioGroup/RadioGroup.test.tsx
@@ -2,16 +2,11 @@ import * as React from 'react';
import PropTypes from 'prop-types';
import { expect } from 'chai';
import { spy } from 'sinon';
-import {
- describeConformance,
- act,
- createRenderer,
- fireEvent,
- screen,
-} from '@mui-internal/test-utils';
+import { act, createRenderer, fireEvent, screen } from '@mui-internal/test-utils';
import RadioGroup, { radioGroupClasses as classes, RadioGroupProps } from '@mui/joy/RadioGroup';
import Radio from '@mui/joy/Radio';
import { ThemeProvider } from '@mui/joy/styles';
+import describeConformance from '../../test/describeConformance';
describe('', () => {
const { render } = createRenderer();
diff --git a/packages/mui-joy/src/ScopedCssBaseline/ScopedCssBaseline.test.tsx b/packages/mui-joy/src/ScopedCssBaseline/ScopedCssBaseline.test.tsx
index 064797f0a7a41d..37ad4fed32befc 100644
--- a/packages/mui-joy/src/ScopedCssBaseline/ScopedCssBaseline.test.tsx
+++ b/packages/mui-joy/src/ScopedCssBaseline/ScopedCssBaseline.test.tsx
@@ -1,7 +1,8 @@
import * as React from 'react';
-import { createRenderer, describeConformance } from '@mui-internal/test-utils';
+import { createRenderer } from '@mui-internal/test-utils';
import { ThemeProvider } from '@mui/joy/styles';
import ScopedCssBaseline, { scopedCssBaselineClasses as classes } from '@mui/joy/ScopedCssBaseline';
+import describeConformance from '../../test/describeConformance';
describe('', () => {
const { render } = createRenderer();
diff --git a/packages/mui-joy/src/Select/Select.test.tsx b/packages/mui-joy/src/Select/Select.test.tsx
index b30442f6237587..6f04051bea4e26 100644
--- a/packages/mui-joy/src/Select/Select.test.tsx
+++ b/packages/mui-joy/src/Select/Select.test.tsx
@@ -1,19 +1,14 @@
import * as React from 'react';
import { expect } from 'chai';
import { spy, stub } from 'sinon';
-import {
- describeConformance,
- act,
- createRenderer,
- fireEvent,
- screen,
-} from '@mui-internal/test-utils';
+import { act, createRenderer, fireEvent, screen } from '@mui-internal/test-utils';
import { ThemeProvider } from '@mui/joy/styles';
import Select, { selectClasses as classes, SelectOption } from '@mui/joy/Select';
import Option from '@mui/joy/Option';
import List from '@mui/joy/List';
import ListItem from '@mui/joy/ListItem';
import ListDivider from '@mui/joy/ListDivider';
+import describeConformance from '../../test/describeConformance';
describe('Joy ', () => {
const { render } = createRenderer({ clock: 'fake' });
diff --git a/packages/mui-joy/src/Sheet/Sheet.test.tsx b/packages/mui-joy/src/Sheet/Sheet.test.tsx
index 98b0b264b8d67c..5019044fe05f1a 100644
--- a/packages/mui-joy/src/Sheet/Sheet.test.tsx
+++ b/packages/mui-joy/src/Sheet/Sheet.test.tsx
@@ -1,9 +1,10 @@
import * as React from 'react';
import { expect } from 'chai';
-import { createRenderer, describeConformance } from '@mui-internal/test-utils';
+import { createRenderer } from '@mui-internal/test-utils';
import { unstable_capitalize as capitalize } from '@mui/utils';
import { ThemeProvider } from '@mui/joy/styles';
import Sheet, { sheetClasses as classes, SheetClassKey } from '@mui/joy/Sheet';
+import describeConformance from '../../test/describeConformance';
describe('', () => {
const { render } = createRenderer();
diff --git a/packages/mui-joy/src/Skeleton/Skeleton.test.tsx b/packages/mui-joy/src/Skeleton/Skeleton.test.tsx
index 854409169b2710..ea32bc9be607ef 100644
--- a/packages/mui-joy/src/Skeleton/Skeleton.test.tsx
+++ b/packages/mui-joy/src/Skeleton/Skeleton.test.tsx
@@ -1,8 +1,9 @@
import * as React from 'react';
import { expect } from 'chai';
-import { createRenderer, describeConformance } from '@mui-internal/test-utils';
+import { createRenderer } from '@mui-internal/test-utils';
import { ThemeProvider } from '@mui/joy/styles';
import Skeleton, { skeletonClasses as classes } from '@mui/joy/Skeleton';
+import describeConformance from '../../test/describeConformance';
describe('', () => {
const { render } = createRenderer();
diff --git a/packages/mui-joy/src/Slider/Slider.test.tsx b/packages/mui-joy/src/Slider/Slider.test.tsx
index 378a67d41e163b..23c22a222d3c82 100644
--- a/packages/mui-joy/src/Slider/Slider.test.tsx
+++ b/packages/mui-joy/src/Slider/Slider.test.tsx
@@ -1,8 +1,9 @@
import * as React from 'react';
import { expect } from 'chai';
-import { describeConformance, createRenderer } from '@mui-internal/test-utils';
+import { createRenderer } from '@mui-internal/test-utils';
import Slider, { sliderClasses as classes } from '@mui/joy/Slider';
import { ThemeProvider } from '@mui/joy/styles';
+import describeConformance from '../../test/describeConformance';
describe('', () => {
const { render } = createRenderer();
diff --git a/packages/mui-joy/src/Slider/Slider.tsx b/packages/mui-joy/src/Slider/Slider.tsx
index d5e7a3763c7307..0ecbcd057d368b 100644
--- a/packages/mui-joy/src/Slider/Slider.tsx
+++ b/packages/mui-joy/src/Slider/Slider.tsx
@@ -421,6 +421,7 @@ const Slider = React.forwardRef(function Slider(inProps, ref) {
onChangeCommitted,
onMouseDown,
orientation = 'horizontal',
+ shiftStep = 10,
scale = Identity,
step = 1,
tabIndex,
@@ -449,6 +450,7 @@ const Slider = React.forwardRef(function Slider(inProps, ref) {
max,
min,
orientation,
+ shiftStep,
scale,
step,
track,
@@ -793,6 +795,11 @@ Slider.propTypes /* remove-proptypes */ = {
* }
*/
scale: PropTypes.func,
+ /**
+ * The granularity with which the slider can step through values when using Page Up/Page Down or Shift + Arrow Up/Arrow Down.
+ * @default 10
+ */
+ shiftStep: PropTypes.number,
/**
* The size of the component.
* It accepts theme values between 'sm' and 'lg'.
diff --git a/packages/mui-joy/src/Snackbar/Snackbar.test.tsx b/packages/mui-joy/src/Snackbar/Snackbar.test.tsx
index b8c12d8535e237..e0041cbe6e5ab1 100644
--- a/packages/mui-joy/src/Snackbar/Snackbar.test.tsx
+++ b/packages/mui-joy/src/Snackbar/Snackbar.test.tsx
@@ -1,9 +1,10 @@
import * as React from 'react';
import { expect } from 'chai';
import { spy } from 'sinon';
-import { describeConformance, createRenderer, fireEvent, act } from '@mui-internal/test-utils';
+import { createRenderer, fireEvent, act } from '@mui-internal/test-utils';
import Snackbar, { snackbarClasses as classes } from '@mui/joy/Snackbar';
import { ThemeProvider } from '@mui/joy/styles';
+import describeConformance from '../../test/describeConformance';
describe('Joy ', () => {
const { render: clientRender, clock } = createRenderer({ clock: 'fake' });
diff --git a/packages/mui-joy/src/Stack/Stack.test.tsx b/packages/mui-joy/src/Stack/Stack.test.tsx
index bf4552bd2abe00..35ba54915ca1a4 100644
--- a/packages/mui-joy/src/Stack/Stack.test.tsx
+++ b/packages/mui-joy/src/Stack/Stack.test.tsx
@@ -1,8 +1,9 @@
import * as React from 'react';
import { expect } from 'chai';
-import { describeConformance, createRenderer } from '@mui-internal/test-utils';
+import { createRenderer } from '@mui-internal/test-utils';
import { ThemeProvider } from '@mui/joy/styles';
import Stack, { stackClasses as classes } from '@mui/joy/Stack';
+import describeConformance from '../../test/describeConformance';
describe('Joy ', () => {
const { render } = createRenderer();
diff --git a/packages/mui-joy/src/Step/Step.test.tsx b/packages/mui-joy/src/Step/Step.test.tsx
index ca7753d4212168..131a79d8445332 100644
--- a/packages/mui-joy/src/Step/Step.test.tsx
+++ b/packages/mui-joy/src/Step/Step.test.tsx
@@ -1,8 +1,9 @@
import * as React from 'react';
import { expect } from 'chai';
-import { createRenderer, describeConformance } from '@mui-internal/test-utils';
+import { createRenderer } from '@mui-internal/test-utils';
import { ThemeProvider } from '@mui/joy/styles';
import Step, { stepClasses as classes } from '@mui/joy/Step';
+import describeConformance from '../../test/describeConformance';
describe('', () => {
const { render } = createRenderer();
diff --git a/packages/mui-joy/src/StepButton/StepButton.test.tsx b/packages/mui-joy/src/StepButton/StepButton.test.tsx
index 2bf98f766e9c56..6b2f4c14661447 100644
--- a/packages/mui-joy/src/StepButton/StepButton.test.tsx
+++ b/packages/mui-joy/src/StepButton/StepButton.test.tsx
@@ -1,7 +1,8 @@
import * as React from 'react';
-import { createRenderer, describeConformance } from '@mui-internal/test-utils';
+import { createRenderer } from '@mui-internal/test-utils';
import { ThemeProvider } from '@mui/joy/styles';
import StepButton, { stepButtonClasses as classes } from '@mui/joy/StepButton';
+import describeConformance from '../../test/describeConformance';
describe('', () => {
const { render } = createRenderer();
diff --git a/packages/mui-joy/src/StepIndicator/StepIndicator.test.tsx b/packages/mui-joy/src/StepIndicator/StepIndicator.test.tsx
index 40366ea2b775a2..b063de785f46b8 100644
--- a/packages/mui-joy/src/StepIndicator/StepIndicator.test.tsx
+++ b/packages/mui-joy/src/StepIndicator/StepIndicator.test.tsx
@@ -1,9 +1,10 @@
import * as React from 'react';
import { expect } from 'chai';
import { unstable_capitalize as capitalize } from '@mui/utils';
-import { createRenderer, describeConformance } from '@mui-internal/test-utils';
+import { createRenderer } from '@mui-internal/test-utils';
import { ThemeProvider } from '@mui/joy/styles';
import StepIndicator, { stepIndicatorClasses as classes } from '@mui/joy/StepIndicator';
+import describeConformance from '../../test/describeConformance';
describe('', () => {
const { render } = createRenderer();
diff --git a/packages/mui-joy/src/Stepper/Stepper.test.tsx b/packages/mui-joy/src/Stepper/Stepper.test.tsx
index d918143833dc0a..ec1dcf56f4a6a1 100644
--- a/packages/mui-joy/src/Stepper/Stepper.test.tsx
+++ b/packages/mui-joy/src/Stepper/Stepper.test.tsx
@@ -1,8 +1,9 @@
import * as React from 'react';
import { expect } from 'chai';
-import { createRenderer, describeConformance } from '@mui-internal/test-utils';
+import { createRenderer } from '@mui-internal/test-utils';
import { ThemeProvider } from '@mui/joy/styles';
import Stepper, { stepperClasses as classes } from '@mui/joy/Stepper';
+import describeConformance from '../../test/describeConformance';
describe('', () => {
const { render } = createRenderer();
diff --git a/packages/mui-joy/src/SvgIcon/SvgIcon.test.tsx b/packages/mui-joy/src/SvgIcon/SvgIcon.test.tsx
index 47f169e59abf0f..6d540c947fbf11 100644
--- a/packages/mui-joy/src/SvgIcon/SvgIcon.test.tsx
+++ b/packages/mui-joy/src/SvgIcon/SvgIcon.test.tsx
@@ -1,6 +1,6 @@
import * as React from 'react';
import { expect } from 'chai';
-import { createRenderer, describeConformance } from '@mui-internal/test-utils';
+import { createRenderer } from '@mui-internal/test-utils';
import { unstable_capitalize as capitalize } from '@mui/utils';
import SvgIcon, {
svgIconClasses as classes,
@@ -8,6 +8,7 @@ import SvgIcon, {
SvgIconProps,
} from '@mui/joy/SvgIcon';
import { ThemeProvider } from '@mui/joy/styles';
+import describeConformance from '../../test/describeConformance';
describe('', () => {
const { render } = createRenderer();
diff --git a/packages/mui-joy/src/Switch/Switch.test.tsx b/packages/mui-joy/src/Switch/Switch.test.tsx
index 7516d4b6fbe5e7..fa849dc389e9fb 100644
--- a/packages/mui-joy/src/Switch/Switch.test.tsx
+++ b/packages/mui-joy/src/Switch/Switch.test.tsx
@@ -1,14 +1,9 @@
import * as React from 'react';
import { expect } from 'chai';
-import {
- describeConformance,
- act,
- createRenderer,
- fireEvent,
- screen,
-} from '@mui-internal/test-utils';
+import { act, createRenderer, fireEvent, screen } from '@mui-internal/test-utils';
import Switch, { switchClasses as classes } from '@mui/joy/Switch';
import { ThemeProvider } from '@mui/joy/styles';
+import describeConformance from '../../test/describeConformance';
describe('', () => {
const { render } = createRenderer();
@@ -72,28 +67,28 @@ describe('', () => {
expect(switchComponent.childNodes[0]).to.have.class(classes.track);
});
- it('renders a `role="checkbox"` with the Unchecked state by default', () => {
+ it('renders a `role="switch"` with the Off state by default', () => {
const { getByRole } = render();
- expect(getByRole('checkbox')).to.have.property('checked', false);
+ expect(getByRole('switch')).to.have.property('checked', false);
});
- it('renders a checkbox with the Checked state when checked', () => {
+ it('renders a switch with the Checked state when On', () => {
const { getByRole } = render();
- expect(getByRole('checkbox')).to.have.property('checked', true);
+ expect(getByRole('switch')).to.have.property('checked', true);
});
it('the switch can be disabled', () => {
const { getByRole } = render();
- expect(getByRole('checkbox')).to.have.property('disabled', true);
+ expect(getByRole('switch')).to.have.property('disabled', true);
});
it('the switch can be readonly', () => {
const { getByRole } = render();
- expect(getByRole('checkbox')).to.have.property('readOnly', true);
+ expect(getByRole('switch')).to.have.property('readOnly', true);
});
it('the Checked state changes after change events', () => {
@@ -101,11 +96,11 @@ describe('', () => {
// how a user would trigger it
act(() => {
- getByRole('checkbox').click();
- fireEvent.change(getByRole('checkbox'), { target: { checked: '' } });
+ getByRole('switch').click();
+ fireEvent.change(getByRole('switch'), { target: { checked: '' } });
});
- expect(getByRole('checkbox')).to.have.property('checked', false);
+ expect(getByRole('switch')).to.have.property('checked', false);
});
describe('decorator', () => {
@@ -130,8 +125,8 @@ describe('', () => {
// how a user would trigger it
act(() => {
- getByRole('checkbox').click();
- fireEvent.change(getByRole('checkbox'), { target: { checked: '' } });
+ getByRole('switch').click();
+ fireEvent.change(getByRole('switch'), { target: { checked: '' } });
});
expect(getByText('On')).toBeVisible();
@@ -146,8 +141,8 @@ describe('', () => {
// how a user would trigger it
act(() => {
- getByRole('checkbox').click();
- fireEvent.change(getByRole('checkbox'), { target: { checked: '' } });
+ getByRole('switch').click();
+ fireEvent.change(getByRole('switch'), { target: { checked: '' } });
});
expect(getByText('On')).toBeVisible();
diff --git a/packages/mui-joy/src/Tab/Tab.test.tsx b/packages/mui-joy/src/Tab/Tab.test.tsx
index 2ec71a128f0ec8..37113dc2be0e6e 100644
--- a/packages/mui-joy/src/Tab/Tab.test.tsx
+++ b/packages/mui-joy/src/Tab/Tab.test.tsx
@@ -1,11 +1,12 @@
import * as React from 'react';
import { expect } from 'chai';
-import { describeConformance, createRenderer, screen } from '@mui-internal/test-utils';
+import { createRenderer, screen } from '@mui-internal/test-utils';
import { TabsProps } from '@mui/base/Tabs';
import { useTabs, TabsProvider as BaseTabsProvider } from '@mui/base/useTabs';
import { useTabsList, TabsListProvider as BaseTabsListProvider } from '@mui/base/useTabsList';
import { ThemeProvider } from '@mui/joy/styles';
import Tab, { tabClasses as classes } from '@mui/joy/Tab';
+import describeConformance from '../../test/describeConformance';
function TabsListProvider({ children }: React.PropsWithChildren<{}>) {
const { contextValue: tabsListContextValue } = useTabsList({
diff --git a/packages/mui-joy/src/TabList/TabList.test.tsx b/packages/mui-joy/src/TabList/TabList.test.tsx
index 5934491c8255f6..515450dbed9eef 100644
--- a/packages/mui-joy/src/TabList/TabList.test.tsx
+++ b/packages/mui-joy/src/TabList/TabList.test.tsx
@@ -1,12 +1,13 @@
import * as React from 'react';
import { expect } from 'chai';
-import { describeConformance, createRenderer, screen } from '@mui-internal/test-utils';
+import { createRenderer, screen } from '@mui-internal/test-utils';
import { TabsProps } from '@mui/base/Tabs';
import { useTabs, TabsProvider as BaseTabsProvider } from '@mui/base/useTabs';
import { ThemeProvider } from '@mui/joy/styles';
import Tabs from '@mui/joy/Tabs';
import TabList, { tabListClasses as classes } from '@mui/joy/TabList';
import RowListContext from '../List/RowListContext';
+import describeConformance from '../../test/describeConformance';
function TabsProvider({ children, ...props }: TabsProps) {
const { contextValue } = useTabs(props);
diff --git a/packages/mui-joy/src/TabPanel/TabPanel.test.tsx b/packages/mui-joy/src/TabPanel/TabPanel.test.tsx
index cab2e72d8dd44b..9bf7a615fde964 100644
--- a/packages/mui-joy/src/TabPanel/TabPanel.test.tsx
+++ b/packages/mui-joy/src/TabPanel/TabPanel.test.tsx
@@ -1,11 +1,12 @@
import * as React from 'react';
import { expect } from 'chai';
-import { describeConformance, createRenderer, screen } from '@mui-internal/test-utils';
+import { createRenderer, screen } from '@mui-internal/test-utils';
import { TabsProps } from '@mui/base/Tabs';
import { useTabs, TabsProvider as BaseTabsProvider } from '@mui/base/useTabs';
import { ThemeProvider } from '@mui/joy/styles';
import Tabs from '@mui/joy/Tabs';
import TabPanel, { tabPanelClasses as classes } from '@mui/joy/TabPanel';
+import describeConformance from '../../test/describeConformance';
function TabsProvider({ children, ...props }: TabsProps) {
const { contextValue } = useTabs(props);
diff --git a/packages/mui-joy/src/Table/Table.test.tsx b/packages/mui-joy/src/Table/Table.test.tsx
index 37909e8f400ba6..6be49bb54cb8a8 100644
--- a/packages/mui-joy/src/Table/Table.test.tsx
+++ b/packages/mui-joy/src/Table/Table.test.tsx
@@ -1,9 +1,10 @@
import * as React from 'react';
import { expect } from 'chai';
-import { createRenderer, describeConformance } from '@mui-internal/test-utils';
+import { createRenderer } from '@mui-internal/test-utils';
import { unstable_capitalize as capitalize } from '@mui/utils';
import { ThemeProvider } from '@mui/joy/styles';
import Table, { tableClasses as classes } from '@mui/joy/Table';
+import describeConformance from '../../test/describeConformance';
describe('', () => {
const { render } = createRenderer();
diff --git a/packages/mui-joy/src/Tabs/SizeTabsContext.ts b/packages/mui-joy/src/Tabs/SizeTabsContext.ts
index 4d69a43cf37e4b..340b7ed4d358bf 100644
--- a/packages/mui-joy/src/Tabs/SizeTabsContext.ts
+++ b/packages/mui-joy/src/Tabs/SizeTabsContext.ts
@@ -3,4 +3,8 @@ import { TabsProps } from './TabsProps';
const SizeTabsContext = React.createContext>('md');
+if (process.env.NODE_ENV !== 'production') {
+ SizeTabsContext.displayName = 'SizeTabsContext';
+}
+
export default SizeTabsContext;
diff --git a/packages/mui-joy/src/Tabs/Tabs.test.tsx b/packages/mui-joy/src/Tabs/Tabs.test.tsx
index b7951b0200d184..da7a8b3b2e1a98 100644
--- a/packages/mui-joy/src/Tabs/Tabs.test.tsx
+++ b/packages/mui-joy/src/Tabs/Tabs.test.tsx
@@ -1,9 +1,10 @@
import * as React from 'react';
import { expect } from 'chai';
-import { describeConformance, createRenderer, screen } from '@mui-internal/test-utils';
+import { createRenderer, screen } from '@mui-internal/test-utils';
import { ThemeProvider } from '@mui/joy/styles';
import Tabs, { tabsClasses as classes } from '@mui/joy/Tabs';
import SizeTabsContext from './SizeTabsContext';
+import describeConformance from '../../test/describeConformance';
describe('Joy ', () => {
const { render } = createRenderer();
diff --git a/packages/mui-joy/src/Textarea/Textarea.test.tsx b/packages/mui-joy/src/Textarea/Textarea.test.tsx
index 5edf08bfee175e..60cc2e70934025 100644
--- a/packages/mui-joy/src/Textarea/Textarea.test.tsx
+++ b/packages/mui-joy/src/Textarea/Textarea.test.tsx
@@ -1,15 +1,10 @@
import * as React from 'react';
import { expect } from 'chai';
import { spy } from 'sinon';
-import {
- describeConformance,
- createRenderer,
- screen,
- act,
- fireEvent,
-} from '@mui-internal/test-utils';
+import { createRenderer, screen, act, fireEvent } from '@mui-internal/test-utils';
import Textarea, { textareaClasses as classes } from '@mui/joy/Textarea';
import { ThemeProvider } from '@mui/joy/styles';
+import describeConformance from '../../test/describeConformance';
describe('Joy ', () => {
const { render } = createRenderer();
diff --git a/packages/mui-joy/src/ToggleButtonGroup/ToggleButtonGroup.test.tsx b/packages/mui-joy/src/ToggleButtonGroup/ToggleButtonGroup.test.tsx
index d988ecd42e9709..2f5777f4fd4209 100644
--- a/packages/mui-joy/src/ToggleButtonGroup/ToggleButtonGroup.test.tsx
+++ b/packages/mui-joy/src/ToggleButtonGroup/ToggleButtonGroup.test.tsx
@@ -1,12 +1,13 @@
import * as React from 'react';
import { expect } from 'chai';
import { spy } from 'sinon';
-import { act, createRenderer, describeConformance, screen } from '@mui-internal/test-utils';
+import { act, createRenderer, screen } from '@mui-internal/test-utils';
import { ThemeProvider } from '@mui/joy/styles';
import ToggleButtonGroup, { toggleButtonGroupClasses as classes } from '@mui/joy/ToggleButtonGroup';
import Button from '@mui/joy/Button';
import IconButton from '@mui/joy/IconButton';
import Tooltip from '@mui/joy/Tooltip';
+import describeConformance from '../../test/describeConformance';
describe('', () => {
const { render } = createRenderer();
diff --git a/packages/mui-joy/src/ToggleButtonGroup/ToggleButtonGroupContext.tsx b/packages/mui-joy/src/ToggleButtonGroup/ToggleButtonGroupContext.tsx
index 4ac127761679ee..d580c18ee818f0 100644
--- a/packages/mui-joy/src/ToggleButtonGroup/ToggleButtonGroupContext.tsx
+++ b/packages/mui-joy/src/ToggleButtonGroup/ToggleButtonGroupContext.tsx
@@ -17,4 +17,8 @@ const ToggleButtonGroupContext = React.createContext', () => {
const { render } = createRenderer();
diff --git a/packages/mui-joy/src/Tooltip/Tooltip.tsx b/packages/mui-joy/src/Tooltip/Tooltip.tsx
index 00aa8a51f00c63..d8ca461789e0b6 100644
--- a/packages/mui-joy/src/Tooltip/Tooltip.tsx
+++ b/packages/mui-joy/src/Tooltip/Tooltip.tsx
@@ -302,7 +302,7 @@ const Tooltip = React.forwardRef(function Tooltip(inProps, ref) {
});
});
- const handleEnter = (event: React.MouseEvent) => {
+ const handleMouseOver = (event: React.MouseEvent) => {
if (ignoreNonTouchEvents.current && event.type !== 'touchstart') {
return;
}
@@ -325,7 +325,7 @@ const Tooltip = React.forwardRef(function Tooltip(inProps, ref) {
}
};
- const handleLeave = (event: React.MouseEvent) => {
+ const handleMouseLeave = (event: React.MouseEvent) => {
enterTimer.clear();
leaveTimer.start(leaveDelay, () => {
handleClose(event);
@@ -345,7 +345,7 @@ const Tooltip = React.forwardRef(function Tooltip(inProps, ref) {
handleBlurVisible(event as React.FocusEvent);
if (isFocusVisibleRef.current === false) {
setChildIsFocusVisible(false);
- handleLeave(event as React.MouseEvent);
+ handleMouseLeave(event as React.MouseEvent);
}
};
@@ -360,7 +360,7 @@ const Tooltip = React.forwardRef(function Tooltip(inProps, ref) {
handleFocusVisible(event as React.FocusEvent);
if (isFocusVisibleRef.current === true) {
setChildIsFocusVisible(true);
- handleEnter(event as React.MouseEvent);
+ handleMouseOver(event as React.MouseEvent);
}
};
@@ -373,9 +373,6 @@ const Tooltip = React.forwardRef(function Tooltip(inProps, ref) {
}
};
- const handleMouseOver = handleEnter;
- const handleMouseLeave = handleLeave;
-
const handleTouchStart = (event: React.TouchEvent) => {
detectTouchStart(event);
leaveTimer.clear();
@@ -391,7 +388,7 @@ const Tooltip = React.forwardRef(function Tooltip(inProps, ref) {
touchTimer.start(enterTouchDelay, () => {
(document.body.style as unknown as { WebkitUserSelect?: string }).WebkitUserSelect =
prevUserSelect.current;
- handleEnter(event as unknown as React.MouseEvent);
+ handleMouseOver(event as unknown as React.MouseEvent);
});
};
@@ -569,7 +566,7 @@ const Tooltip = React.forwardRef(function Tooltip(inProps, ref) {
bottom: cursorPosition.y,
width: 0,
height: 0,
- } as DOMRect),
+ }) as DOMRect,
}
: childNode,
open: childNode ? open : false,
diff --git a/packages/mui-joy/src/Typography/Typography.test.tsx b/packages/mui-joy/src/Typography/Typography.test.tsx
index 88548fe665a28c..e407bc7e8a12d0 100644
--- a/packages/mui-joy/src/Typography/Typography.test.tsx
+++ b/packages/mui-joy/src/Typography/Typography.test.tsx
@@ -1,8 +1,9 @@
import * as React from 'react';
import { expect } from 'chai';
-import { createRenderer, describeConformance } from '@mui-internal/test-utils';
+import { createRenderer } from '@mui-internal/test-utils';
import Typography, { typographyClasses as classes, TypographyProps } from '@mui/joy/Typography';
import { ThemeProvider } from '@mui/joy/styles';
+import describeConformance from '../../test/describeConformance';
describe('', () => {
const { render } = createRenderer();
diff --git a/packages/mui-joy/src/Typography/Typography.tsx b/packages/mui-joy/src/Typography/Typography.tsx
index 8a84dad92a2327..6e22027df5ad1f 100644
--- a/packages/mui-joy/src/Typography/Typography.tsx
+++ b/packages/mui-joy/src/Typography/Typography.tsx
@@ -22,6 +22,10 @@ import { TypographySystem } from '../styles/types';
*/
export const TypographyNestedContext = React.createContext(false);
+if (process.env.NODE_ENV !== 'production') {
+ TypographyNestedContext.displayName = 'TypographyNestedContext';
+}
+
/**
* @internal
* Typography's level will be inherit within this context unless an explicit `level` prop is provided.
@@ -30,6 +34,10 @@ export const TypographyNestedContext = React.createContext(false);
*/
export const TypographyInheritContext = React.createContext(false);
+if (process.env.NODE_ENV !== 'production') {
+ TypographyInheritContext.displayName = 'TypographyInheritContext';
+}
+
const useUtilityClasses = (ownerState: TypographyOwnerState) => {
const { gutterBottom, noWrap, level, color, variant } = ownerState;
diff --git a/packages/mui-joy/src/colorInversion/colorInversionUtils.ts b/packages/mui-joy/src/colorInversion/colorInversionUtils.ts
index 685cac37156151..fb56a45f8d0382 100644
--- a/packages/mui-joy/src/colorInversion/colorInversionUtils.ts
+++ b/packages/mui-joy/src/colorInversion/colorInversionUtils.ts
@@ -59,69 +59,49 @@ export const skipInvertedColors = (theme: ThemeFragment) => {
'--Badge-ringColor': 'var(--Badge-ringColor) !important',
colorScheme: 'unset',
[theme.getColorSchemeSelector('light')]: {
- [prefixVar(
- '--palette-focusVisible',
- )]: `${theme.colorSchemes.light?.palette.focusVisible} !important`,
- [prefixVar(
- '--palette-background-body',
- )]: `${theme.colorSchemes.light?.palette.background.body} !important`,
- [prefixVar(
- '--palette-background-surface',
- )]: `${theme.colorSchemes.light?.palette.background.surface} !important`,
- [prefixVar(
- '--palette-background-popup',
- )]: `${theme.colorSchemes.light?.palette.background.popup} !important`,
- [prefixVar(
- '--palette-background-level1',
- )]: `${theme.colorSchemes.light?.palette.background.level1} !important`,
- [prefixVar(
- '--palette-background-level2',
- )]: `${theme.colorSchemes.light?.palette.background.level2} !important`,
- [prefixVar(
- '--palette-background-level3',
- )]: `${theme.colorSchemes.light?.palette.background.level3} !important`,
- [prefixVar(
- '--palette-text-primary',
- )]: `${theme.colorSchemes.light?.palette.text.primary} !important`,
- [prefixVar(
- '--palette-text-secondary',
- )]: `${theme.colorSchemes.light?.palette.text.secondary} !important`,
- [prefixVar(
- '--palette-text-tertiary',
- )]: `${theme.colorSchemes.light?.palette.text.tertiary} !important`,
+ [prefixVar('--palette-focusVisible')]:
+ `${theme.colorSchemes.light?.palette.focusVisible} !important`,
+ [prefixVar('--palette-background-body')]:
+ `${theme.colorSchemes.light?.palette.background.body} !important`,
+ [prefixVar('--palette-background-surface')]:
+ `${theme.colorSchemes.light?.palette.background.surface} !important`,
+ [prefixVar('--palette-background-popup')]:
+ `${theme.colorSchemes.light?.palette.background.popup} !important`,
+ [prefixVar('--palette-background-level1')]:
+ `${theme.colorSchemes.light?.palette.background.level1} !important`,
+ [prefixVar('--palette-background-level2')]:
+ `${theme.colorSchemes.light?.palette.background.level2} !important`,
+ [prefixVar('--palette-background-level3')]:
+ `${theme.colorSchemes.light?.palette.background.level3} !important`,
+ [prefixVar('--palette-text-primary')]:
+ `${theme.colorSchemes.light?.palette.text.primary} !important`,
+ [prefixVar('--palette-text-secondary')]:
+ `${theme.colorSchemes.light?.palette.text.secondary} !important`,
+ [prefixVar('--palette-text-tertiary')]:
+ `${theme.colorSchemes.light?.palette.text.tertiary} !important`,
[prefixVar('--palette-divider')]: `${theme.colorSchemes.light?.palette.divider} !important`,
},
[theme.getColorSchemeSelector('dark')]: {
- [prefixVar(
- '--palette-focusVisible',
- )]: `${theme.colorSchemes.dark?.palette.focusVisible} !important`,
- [prefixVar(
- '--palette-background-body',
- )]: `${theme.colorSchemes.dark?.palette.background.body} !important`,
- [prefixVar(
- '--palette-background-surface',
- )]: `${theme.colorSchemes.dark?.palette.background.surface} !important`,
- [prefixVar(
- '--palette-background-popup',
- )]: `${theme.colorSchemes.dark?.palette.background.popup} !important`,
- [prefixVar(
- '--palette-background-level1',
- )]: `${theme.colorSchemes.dark?.palette.background.level1} !important`,
- [prefixVar(
- '--palette-background-level2',
- )]: `${theme.colorSchemes.dark?.palette.background.level2} !important`,
- [prefixVar(
- '--palette-background-level3',
- )]: `${theme.colorSchemes.dark?.palette.background.level3} !important`,
- [prefixVar(
- '--palette-text-primary',
- )]: `${theme.colorSchemes.dark?.palette.text.primary} !important`,
- [prefixVar(
- '--palette-text-secondary',
- )]: `${theme.colorSchemes.dark?.palette.text.secondary} !important`,
- [prefixVar(
- '--palette-text-tertiary',
- )]: `${theme.colorSchemes.dark?.palette.text.tertiary} !important`,
+ [prefixVar('--palette-focusVisible')]:
+ `${theme.colorSchemes.dark?.palette.focusVisible} !important`,
+ [prefixVar('--palette-background-body')]:
+ `${theme.colorSchemes.dark?.palette.background.body} !important`,
+ [prefixVar('--palette-background-surface')]:
+ `${theme.colorSchemes.dark?.palette.background.surface} !important`,
+ [prefixVar('--palette-background-popup')]:
+ `${theme.colorSchemes.dark?.palette.background.popup} !important`,
+ [prefixVar('--palette-background-level1')]:
+ `${theme.colorSchemes.dark?.palette.background.level1} !important`,
+ [prefixVar('--palette-background-level2')]:
+ `${theme.colorSchemes.dark?.palette.background.level2} !important`,
+ [prefixVar('--palette-background-level3')]:
+ `${theme.colorSchemes.dark?.palette.background.level3} !important`,
+ [prefixVar('--palette-text-primary')]:
+ `${theme.colorSchemes.dark?.palette.text.primary} !important`,
+ [prefixVar('--palette-text-secondary')]:
+ `${theme.colorSchemes.dark?.palette.text.secondary} !important`,
+ [prefixVar('--palette-text-tertiary')]:
+ `${theme.colorSchemes.dark?.palette.text.tertiary} !important`,
[prefixVar('--palette-divider')]: `${theme.colorSchemes.dark?.palette.divider} !important`,
},
};
diff --git a/packages/mui-joy/src/styles/CssVarsProvider.test.tsx b/packages/mui-joy/src/styles/CssVarsProvider.test.tsx
index 6bf22459d370ba..16791f6cc7784c 100644
--- a/packages/mui-joy/src/styles/CssVarsProvider.test.tsx
+++ b/packages/mui-joy/src/styles/CssVarsProvider.test.tsx
@@ -23,7 +23,7 @@ describe('[Joy] CssVarsProvider', () => {
({
addListener: () => {},
removeListener: () => {},
- } as unknown as MediaQueryList);
+ }) as unknown as MediaQueryList;
});
afterEach(() => {
window.matchMedia = originalMatchmedia;
diff --git a/packages/mui-joy/src/styles/extendTheme.spec.ts b/packages/mui-joy/src/styles/extendTheme.spec.ts
index 816d3a03d91464..5a92786a1926e1 100644
--- a/packages/mui-joy/src/styles/extendTheme.spec.ts
+++ b/packages/mui-joy/src/styles/extendTheme.spec.ts
@@ -701,6 +701,10 @@ extendTheme({
expectType, typeof ownerState>(ownerState);
return {};
},
+ loadingIndicator: ({ ownerState }) => {
+ expectType, typeof ownerState>(ownerState);
+ return {};
+ },
},
},
JoyInput: {
diff --git a/packages/mui-joy/src/styles/types/theme.ts b/packages/mui-joy/src/styles/types/theme.ts
index 9d94dfc53113d1..8bc87c637edd05 100644
--- a/packages/mui-joy/src/styles/types/theme.ts
+++ b/packages/mui-joy/src/styles/types/theme.ts
@@ -32,15 +32,16 @@ type Split = K extends string | number
? { [k in K]: Exclude }
: never;
-type ConcatDeep = T extends Record
- ? keyof T extends string | number
- ? V extends string | number
- ? keyof T
- : keyof V extends string | number
- ? `${keyof T}${D}${ConcatDeep, D>}`
+type ConcatDeep =
+ T extends Record
+ ? keyof T extends string | number
+ ? V extends string | number
+ ? keyof T
+ : keyof V extends string | number
+ ? `${keyof T}${D}${ConcatDeep, D>}`
+ : never
: never
- : never
- : never;
+ : never;
/**
* Does not work for these cases:
diff --git a/packages/mui-joy/src/styles/variantColorInheritance.tsx b/packages/mui-joy/src/styles/variantColorInheritance.tsx
index 08bf2298c1f488..f15ea4c85ec58c 100644
--- a/packages/mui-joy/src/styles/variantColorInheritance.tsx
+++ b/packages/mui-joy/src/styles/variantColorInheritance.tsx
@@ -3,6 +3,10 @@ import { ColorPaletteProp, VariantProp } from '@mui/joy/styles/types';
const VariantColorContext = React.createContext(undefined);
+if (process.env.NODE_ENV !== 'production') {
+ VariantColorContext.displayName = 'VariantColorContext';
+}
+
/**
* @internal For internal usage only.
*
diff --git a/packages/mui-joy/test/describeConformance.ts b/packages/mui-joy/test/describeConformance.ts
new file mode 100644
index 00000000000000..f82c1e1e0215b7
--- /dev/null
+++ b/packages/mui-joy/test/describeConformance.ts
@@ -0,0 +1,21 @@
+import {
+ describeConformance as baseDescribeConformance,
+ ConformanceOptions,
+} from '@mui-internal/test-utils';
+import { ThemeProvider } from '@mui/joy/styles';
+import { createTheme } from '@mui/system';
+
+export default function describeConformance(
+ minimalElement: React.ReactElement,
+ getOptions: () => ConformanceOptions,
+) {
+ function getOptionsWithDefaults() {
+ return {
+ ThemeProvider,
+ createTheme,
+ ...getOptions(),
+ };
+ }
+
+ return baseDescribeConformance(minimalElement, getOptionsWithDefaults);
+}
diff --git a/packages/mui-lab/package.json b/packages/mui-lab/package.json
index e53ae68ca62f53..2b00ba123f521d 100644
--- a/packages/mui-lab/package.json
+++ b/packages/mui-lab/package.json
@@ -1,6 +1,6 @@
{
"name": "@mui/lab",
- "version": "5.0.0-alpha.162",
+ "version": "5.0.0-alpha.165",
"private": false,
"author": "MUI Team",
"description": "Laboratory for new MUI modules.",
@@ -53,8 +53,8 @@
"@mui-internal/test-utils": "workspace:^",
"@types/chai": "^4.3.11",
"@types/prop-types": "^15.7.11",
- "@types/react": "^18.2.48",
- "@types/react-dom": "^18.2.18",
+ "@types/react": "^18.2.55",
+ "@types/react-dom": "^18.2.19",
"@types/sinon": "^10.0.20",
"chai": "^4.4.1",
"react": "^18.2.0",
diff --git a/packages/mui-lab/src/LoadingButton/LoadingButton.test.js b/packages/mui-lab/src/LoadingButton/LoadingButton.test.js
index cb32edf6a9b436..fc959d6bea21e3 100644
--- a/packages/mui-lab/src/LoadingButton/LoadingButton.test.js
+++ b/packages/mui-lab/src/LoadingButton/LoadingButton.test.js
@@ -1,9 +1,10 @@
import * as React from 'react';
-import { createRenderer, describeConformance, screen, within } from '@mui-internal/test-utils';
+import { createRenderer, screen, within } from '@mui-internal/test-utils';
import { expect } from 'chai';
import Button, { buttonClasses } from '@mui/material/Button';
import LoadingButton, { loadingButtonClasses as classes } from '@mui/lab/LoadingButton';
import ButtonGroup, { buttonGroupClasses } from '@mui/material/ButtonGroup';
+import describeConformance from '../../test/describeConformance';
describe('', () => {
const { render } = createRenderer();
diff --git a/packages/mui-lab/src/Masonry/Masonry.d.ts b/packages/mui-lab/src/Masonry/Masonry.d.ts
index 7f338898e34051..530c4666296ca7 100644
--- a/packages/mui-lab/src/Masonry/Masonry.d.ts
+++ b/packages/mui-lab/src/Masonry/Masonry.d.ts
@@ -34,6 +34,11 @@ export interface MasonryOwnProps {
* @default 1
*/
spacing?: ResponsiveStyleValue;
+ /**
+ * Allows using sequential order rather than adding to shortest column
+ * @default false
+ */
+ sequential?: boolean;
/**
* Allows defining system overrides as well as additional CSS styles.
*/
diff --git a/packages/mui-lab/src/Masonry/Masonry.js b/packages/mui-lab/src/Masonry/Masonry.js
index c8797005e813c1..7d05bac97615e4 100644
--- a/packages/mui-lab/src/Masonry/Masonry.js
+++ b/packages/mui-lab/src/Masonry/Masonry.js
@@ -182,6 +182,7 @@ const Masonry = React.forwardRef(function Masonry(inProps, ref) {
component = 'div',
columns = 4,
spacing = 1,
+ sequential = false,
defaultColumns,
defaultHeight,
defaultSpacing,
@@ -212,71 +213,84 @@ const Masonry = React.forwardRef(function Masonry(inProps, ref) {
const classes = useUtilityClasses(ownerState);
- const handleResize = (masonryChildren) => {
- if (!masonryRef.current || !masonryChildren || masonryChildren.length === 0) {
- return;
- }
+ const handleResize = React.useCallback(
+ (masonryChildren) => {
+ if (!masonryRef.current || !masonryChildren || masonryChildren.length === 0) {
+ return;
+ }
- const masonry = masonryRef.current;
- const masonryFirstChild = masonryRef.current.firstChild;
- const parentWidth = masonry.clientWidth;
- const firstChildWidth = masonryFirstChild.clientWidth;
+ const masonry = masonryRef.current;
+ const masonryFirstChild = masonryRef.current.firstChild;
+ const parentWidth = masonry.clientWidth;
+ const firstChildWidth = masonryFirstChild.clientWidth;
- if (parentWidth === 0 || firstChildWidth === 0) {
- return;
- }
+ if (parentWidth === 0 || firstChildWidth === 0) {
+ return;
+ }
- const firstChildComputedStyle = window.getComputedStyle(masonryFirstChild);
- const firstChildMarginLeft = parseToNumber(firstChildComputedStyle.marginLeft);
- const firstChildMarginRight = parseToNumber(firstChildComputedStyle.marginRight);
+ const firstChildComputedStyle = window.getComputedStyle(masonryFirstChild);
+ const firstChildMarginLeft = parseToNumber(firstChildComputedStyle.marginLeft);
+ const firstChildMarginRight = parseToNumber(firstChildComputedStyle.marginRight);
- const currentNumberOfColumns = Math.round(
- parentWidth / (firstChildWidth + firstChildMarginLeft + firstChildMarginRight),
- );
+ const currentNumberOfColumns = Math.round(
+ parentWidth / (firstChildWidth + firstChildMarginLeft + firstChildMarginRight),
+ );
- const columnHeights = new Array(currentNumberOfColumns).fill(0);
- let skip = false;
- masonry.childNodes.forEach((child) => {
- if (child.nodeType !== Node.ELEMENT_NODE || child.dataset.class === 'line-break' || skip) {
- return;
- }
- const childComputedStyle = window.getComputedStyle(child);
- const childMarginTop = parseToNumber(childComputedStyle.marginTop);
- const childMarginBottom = parseToNumber(childComputedStyle.marginBottom);
- // if any one of children isn't rendered yet, masonry's height shouldn't be computed yet
- const childHeight = parseToNumber(childComputedStyle.height)
- ? Math.ceil(parseToNumber(childComputedStyle.height)) + childMarginTop + childMarginBottom
- : 0;
- if (childHeight === 0) {
- skip = true;
- return;
- }
- // if there is a nested image that isn't rendered yet, masonry's height shouldn't be computed yet
- for (let i = 0; i < child.childNodes.length; i += 1) {
- const nestedChild = child.childNodes[i];
- if (nestedChild.tagName === 'IMG' && nestedChild.clientHeight === 0) {
+ const columnHeights = new Array(currentNumberOfColumns).fill(0);
+ let skip = false;
+ let nextOrder = 1;
+ masonry.childNodes.forEach((child) => {
+ if (child.nodeType !== Node.ELEMENT_NODE || child.dataset.class === 'line-break' || skip) {
+ return;
+ }
+ const childComputedStyle = window.getComputedStyle(child);
+ const childMarginTop = parseToNumber(childComputedStyle.marginTop);
+ const childMarginBottom = parseToNumber(childComputedStyle.marginBottom);
+ // if any one of children isn't rendered yet, masonry's height shouldn't be computed yet
+ const childHeight = parseToNumber(childComputedStyle.height)
+ ? Math.ceil(parseToNumber(childComputedStyle.height)) + childMarginTop + childMarginBottom
+ : 0;
+ if (childHeight === 0) {
skip = true;
- break;
+ return;
}
- }
+ // if there is a nested image that isn't rendered yet, masonry's height shouldn't be computed yet
+ for (let i = 0; i < child.childNodes.length; i += 1) {
+ const nestedChild = child.childNodes[i];
+ if (nestedChild.tagName === 'IMG' && nestedChild.clientHeight === 0) {
+ skip = true;
+ break;
+ }
+ }
+ if (!skip) {
+ if (sequential) {
+ columnHeights[nextOrder - 1] += childHeight;
+ child.style.order = nextOrder;
+ nextOrder += 1;
+ if (nextOrder > currentNumberOfColumns) {
+ nextOrder = 1;
+ }
+ } else {
+ // find the current shortest column (where the current item will be placed)
+ const currentMinColumnIndex = columnHeights.indexOf(Math.min(...columnHeights));
+ columnHeights[currentMinColumnIndex] += childHeight;
+ const order = currentMinColumnIndex + 1;
+ child.style.order = order;
+ }
+ }
+ });
if (!skip) {
- // find the current shortest column (where the current item will be placed)
- const currentMinColumnIndex = columnHeights.indexOf(Math.min(...columnHeights));
- columnHeights[currentMinColumnIndex] += childHeight;
- const order = currentMinColumnIndex + 1;
- child.style.order = order;
+ // In React 18, state updates in a ResizeObserver's callback are happening after the paint which causes flickering
+ // when doing some visual updates in it. Using flushSync ensures that the dom will be painted after the states updates happen
+ // Related issue - https://github.com/facebook/react/issues/24331
+ ReactDOM.flushSync(() => {
+ setMaxColumnHeight(Math.max(...columnHeights));
+ setNumberOfLineBreaks(currentNumberOfColumns > 0 ? currentNumberOfColumns - 1 : 0);
+ });
}
- });
- if (!skip) {
- // In React 18, state updates in a ResizeObserver's callback are happening after the paint which causes flickering
- // when doing some visual updates in it. Using flushSync ensures that the dom will be painted after the states updates happen
- // Related issue - https://github.com/facebook/react/issues/24331
- ReactDOM.flushSync(() => {
- setMaxColumnHeight(Math.max(...columnHeights));
- setNumberOfLineBreaks(currentNumberOfColumns > 0 ? currentNumberOfColumns - 1 : 0);
- });
- }
- };
+ },
+ [sequential],
+ );
useEnhancedEffect(() => {
// IE and old browsers are not supported
@@ -305,7 +319,7 @@ const Masonry = React.forwardRef(function Masonry(inProps, ref) {
resizeObserver.disconnect();
}
};
- }, [columns, spacing, children]);
+ }, [columns, spacing, children, handleResize]);
const handleRef = useForkRef(ref, masonryRef);
@@ -375,6 +389,11 @@ Masonry.propTypes /* remove-proptypes */ = {
* The default spacing of the component. Like `spacing`, it is a factor of the theme's spacing. This is provided for server-side rendering.
*/
defaultSpacing: PropTypes.number,
+ /**
+ * Allows using sequential order rather than adding to shortest column
+ * @default false
+ */
+ sequential: PropTypes.bool,
/**
* Defines the space between children. It is a factor of the theme's spacing.
* @default 1
diff --git a/packages/mui-lab/src/Masonry/Masonry.test.js b/packages/mui-lab/src/Masonry/Masonry.test.js
index 7320e3aaaf49df..ae1627d641f3a9 100644
--- a/packages/mui-lab/src/Masonry/Masonry.test.js
+++ b/packages/mui-lab/src/Masonry/Masonry.test.js
@@ -1,10 +1,11 @@
import * as React from 'react';
-import { createRenderer, describeConformance } from '@mui-internal/test-utils';
+import { createRenderer } from '@mui-internal/test-utils';
import { expect } from 'chai';
import { createTheme } from '@mui/material/styles';
import defaultTheme from '@mui/material/styles/defaultTheme';
import Masonry, { masonryClasses as classes } from '@mui/lab/Masonry';
import { getStyle, parseToNumber } from './Masonry';
+import describeConformance from '../../test/describeConformance';
describe('', () => {
const { render } = createRenderer();
@@ -369,4 +370,35 @@ describe('', () => {
});
});
});
+
+ describe('prop: sequential', () => {
+ const pause = (timeout) =>
+ new Promise((resolve) => {
+ setTimeout(() => {
+ resolve();
+ }, timeout);
+ });
+
+ it('should place children in sequential order', async function test() {
+ if (/jsdom/.test(window.navigator.userAgent)) {
+ // only run on browser
+ this.skip();
+ }
+
+ const { getByTestId } = render(
+
+
+
+
+ ,
+ );
+ await pause(400); // Masonry elements aren't ordered immediately, and so we need the pause to wait for them to be ordered
+ const child1 = getByTestId('child1');
+ const child2 = getByTestId('child2');
+ const child3 = getByTestId('child3');
+ expect(window.getComputedStyle(child1).order).to.equal(`1`);
+ expect(window.getComputedStyle(child2).order).to.equal(`2`);
+ expect(window.getComputedStyle(child3).order).to.equal(`1`);
+ });
+ });
});
diff --git a/packages/mui-lab/src/TabList/TabList.test.js b/packages/mui-lab/src/TabList/TabList.test.js
index 6419a4cb31c9f6..2f34f2b0994517 100644
--- a/packages/mui-lab/src/TabList/TabList.test.js
+++ b/packages/mui-lab/src/TabList/TabList.test.js
@@ -1,11 +1,12 @@
// @ts-check
import * as React from 'react';
import { expect } from 'chai';
-import { createRenderer, describeConformance } from '@mui-internal/test-utils';
+import { createRenderer } from '@mui-internal/test-utils';
import Tab from '@mui/material/Tab';
import Tabs, { tabsClasses as classes } from '@mui/material/Tabs';
import TabList from './TabList';
import TabContext from '../TabContext';
+import describeConformance from '../../test/describeConformance';
describe('', () => {
const { render } = createRenderer();
diff --git a/packages/mui-lab/src/TabPanel/TabPanel.test.tsx b/packages/mui-lab/src/TabPanel/TabPanel.test.tsx
index 00db045f2b2a60..ba0487616e45f9 100644
--- a/packages/mui-lab/src/TabPanel/TabPanel.test.tsx
+++ b/packages/mui-lab/src/TabPanel/TabPanel.test.tsx
@@ -1,8 +1,9 @@
import * as React from 'react';
import { expect } from 'chai';
-import { createRenderer, describeConformance } from '@mui-internal/test-utils';
+import { createRenderer } from '@mui-internal/test-utils';
import TabPanel, { tabPanelClasses as classes } from '@mui/lab/TabPanel';
import TabContext from '../TabContext';
+import describeConformance from '../../test/describeConformance';
describe('', () => {
const { render } = createRenderer();
diff --git a/packages/mui-lab/src/Timeline/Timeline.test.tsx b/packages/mui-lab/src/Timeline/Timeline.test.tsx
index bdec9ccdfdd988..08df8eac324dff 100644
--- a/packages/mui-lab/src/Timeline/Timeline.test.tsx
+++ b/packages/mui-lab/src/Timeline/Timeline.test.tsx
@@ -1,7 +1,8 @@
import * as React from 'react';
import { expect } from 'chai';
-import { createRenderer, describeConformance, screen } from '@mui-internal/test-utils';
+import { createRenderer, screen } from '@mui-internal/test-utils';
import Timeline, { timelineClasses as classes } from '@mui/lab/Timeline';
+import describeConformance from '../../test/describeConformance';
describe('', () => {
const { render } = createRenderer();
diff --git a/packages/mui-lab/src/TimelineConnector/TimelineConnector.test.js b/packages/mui-lab/src/TimelineConnector/TimelineConnector.test.js
index 48bb30ebca0a27..29b157a7b929ce 100644
--- a/packages/mui-lab/src/TimelineConnector/TimelineConnector.test.js
+++ b/packages/mui-lab/src/TimelineConnector/TimelineConnector.test.js
@@ -1,6 +1,7 @@
import * as React from 'react';
-import { createRenderer, describeConformance } from '@mui-internal/test-utils';
+import { createRenderer } from '@mui-internal/test-utils';
import TimelineConnector, { timelineConnectorClasses as classes } from '@mui/lab/TimelineConnector';
+import describeConformance from '../../test/describeConformance';
describe('', () => {
const { render } = createRenderer();
diff --git a/packages/mui-lab/src/TimelineContent/TimelineContent.test.js b/packages/mui-lab/src/TimelineContent/TimelineContent.test.js
index bae2b2dd90e6c4..1c8a31f0a6e3e9 100644
--- a/packages/mui-lab/src/TimelineContent/TimelineContent.test.js
+++ b/packages/mui-lab/src/TimelineContent/TimelineContent.test.js
@@ -1,10 +1,11 @@
import * as React from 'react';
import { expect } from 'chai';
-import { createRenderer, describeConformance } from '@mui-internal/test-utils';
+import { createRenderer } from '@mui-internal/test-utils';
import Typography from '@mui/material/Typography';
import Timeline from '@mui/lab/Timeline';
import TimelineItem from '@mui/lab/TimelineItem';
import TimelineContent, { timelineContentClasses as classes } from '@mui/lab/TimelineContent';
+import describeConformance from '../../test/describeConformance';
describe('', () => {
const { render } = createRenderer();
diff --git a/packages/mui-lab/src/TimelineDot/TimelineDot.test.js b/packages/mui-lab/src/TimelineDot/TimelineDot.test.js
index 8a6619363b972a..24f5460d3d550a 100644
--- a/packages/mui-lab/src/TimelineDot/TimelineDot.test.js
+++ b/packages/mui-lab/src/TimelineDot/TimelineDot.test.js
@@ -1,7 +1,8 @@
import * as React from 'react';
import { expect } from 'chai';
-import { createRenderer, describeConformance } from '@mui-internal/test-utils';
+import { createRenderer } from '@mui-internal/test-utils';
import TimelineDot, { timelineDotClasses as classes } from '@mui/lab/TimelineDot';
+import describeConformance from '../../test/describeConformance';
describe('', () => {
const { render } = createRenderer();
diff --git a/packages/mui-lab/src/TimelineItem/TimelineItem.test.js b/packages/mui-lab/src/TimelineItem/TimelineItem.test.js
index 532af2a2fac603..72339942424918 100644
--- a/packages/mui-lab/src/TimelineItem/TimelineItem.test.js
+++ b/packages/mui-lab/src/TimelineItem/TimelineItem.test.js
@@ -1,6 +1,7 @@
import * as React from 'react';
-import { createRenderer, describeConformance } from '@mui-internal/test-utils';
+import { createRenderer } from '@mui-internal/test-utils';
import TimelineItem, { timelineItemClasses as classes } from '@mui/lab/TimelineItem';
+import describeConformance from '../../test/describeConformance';
describe('', () => {
const { render } = createRenderer();
diff --git a/packages/mui-lab/src/TimelineOppositeContent/TimelineOppositeContent.test.js b/packages/mui-lab/src/TimelineOppositeContent/TimelineOppositeContent.test.js
index 0b3087893f291e..5b4470b34f40b8 100644
--- a/packages/mui-lab/src/TimelineOppositeContent/TimelineOppositeContent.test.js
+++ b/packages/mui-lab/src/TimelineOppositeContent/TimelineOppositeContent.test.js
@@ -1,12 +1,13 @@
import * as React from 'react';
import { expect } from 'chai';
-import { createRenderer, describeConformance } from '@mui-internal/test-utils';
+import { createRenderer } from '@mui-internal/test-utils';
import Typography from '@mui/material/Typography';
import Timeline from '@mui/lab/Timeline';
import TimelineItem from '@mui/lab/TimelineItem';
import TimelineOppositeContent, {
timelineOppositeContentClasses as classes,
} from '@mui/lab/TimelineOppositeContent';
+import describeConformance from '../../test/describeConformance';
describe('', () => {
const { render } = createRenderer();
diff --git a/packages/mui-lab/src/TimelineSeparator/TimelineSeparator.test.js b/packages/mui-lab/src/TimelineSeparator/TimelineSeparator.test.js
index e2c9f61aa7d109..484bdb4db0fc6b 100644
--- a/packages/mui-lab/src/TimelineSeparator/TimelineSeparator.test.js
+++ b/packages/mui-lab/src/TimelineSeparator/TimelineSeparator.test.js
@@ -1,6 +1,7 @@
import * as React from 'react';
-import { createRenderer, describeConformance } from '@mui-internal/test-utils';
+import { createRenderer } from '@mui-internal/test-utils';
import TimelineSeparator, { timelineSeparatorClasses as classes } from '@mui/lab/TimelineSeparator';
+import describeConformance from '../../test/describeConformance';
describe('', () => {
const { render } = createRenderer();
diff --git a/packages/mui-lab/test/describeConformance.ts b/packages/mui-lab/test/describeConformance.ts
new file mode 100644
index 00000000000000..633cf72e03ebbe
--- /dev/null
+++ b/packages/mui-lab/test/describeConformance.ts
@@ -0,0 +1,20 @@
+import {
+ describeConformance as baseDescribeConformance,
+ ConformanceOptions,
+} from '@mui-internal/test-utils';
+import { ThemeProvider, createTheme } from '@mui/material/styles';
+
+export default function describeConformance(
+ minimalElement: React.ReactElement,
+ getOptions: () => ConformanceOptions,
+) {
+ function getOptionsWithDefaults() {
+ return {
+ ThemeProvider,
+ createTheme,
+ ...getOptions(),
+ };
+ }
+
+ return baseDescribeConformance(minimalElement, getOptionsWithDefaults);
+}
diff --git a/packages/mui-material-next/CONTRIBUTING.md b/packages/mui-material-next/CONTRIBUTING.md
index 44bdd82f1365a2..de6a9e7132fb68 100644
--- a/packages/mui-material-next/CONTRIBUTING.md
+++ b/packages/mui-material-next/CONTRIBUTING.md
@@ -1,6 +1,6 @@
# Contributing
-The Material 3 components are targeted for v7, so they will be developed on the `material-next` package.
+The Material Design 3 components are targeted for v7, so they will be developed on the `material-next` package.
The progress for each component will be tracked in a separate GitHub issue. If you wish to contribute to the migration go to a component's linked issue to see what tasks are missing (see progress tracker [here](https://github.com/mui/material-ui/issues/29345)).
@@ -18,7 +18,7 @@ If the issue doesn't exist, create it, name it `[][material-next]
4. Drop support for `ThemeProvider` in favor of `CssVarsProvider`. In practice, this means:
- Consuming tokens from `theme.vars` instead of `theme`
- In tests, using `CssVarsProvider` and `extendTheme` (both imported from `@mui/material-next/styles`) instead of `ThemeProvider` and `createTheme`, as well as providing the same `CssVarsProvier` and `extendTheme` to `describeConformance`'s `ThemeProvider` and `createTheme` options.
-5. Implement Material 3 design specs. Add missing tokens if necessary. Use [material-web tokens](https://github.com/material-components/material-web/tree/main/tokens) as a reference for token values
+5. Implement M3 design specs. Add missing tokens if necessary. Use [material-web tokens](https://github.com/material-components/material-web/tree/main/tokens) as a reference for token values
6. Add component playground to the docs, take the [Slider playground](https://mui.com/material-ui/react-slider/#material-3-slider) as an example
7. Refactor styles to use component CSS Variables, following [material-web tokens](https://github.com/material-components/material-web/tree/main/tokens) and Joy UI's equivalent component (if it exists) as guides.
@@ -27,7 +27,7 @@ If the issue doesn't exist, create it, name it `[][material-next]
- Except for the first step, there's no particular order to follow, but the proposed order has provided the best experience so far
- For every step, checking the components that are already in `material-next` will be really helpful
- Try to avoid breaking changes, keeping the component's API the same:
- - An exception to this is to use Material 3 nomenclature and naming conventions, even if it would be a breaking change.
+ - An exception to this is to use M3 nomenclature and naming conventions, even if it would be a breaking change.
- If breaking changes are inevitable, then document them right away in `/packages/mui-material-next/migration.md` and add the `breaking change` label to your PR.
- Divide the work in whatever way makes more sense. One PR for a few steps or one PR for each step, however keep in mind that smaller pull requests will be reviewed and merged faster
- Let everyone know what you're working on so we can keep the work coordinated and avoid overlap
diff --git a/packages/mui-material-next/README.md b/packages/mui-material-next/README.md
index 40f5948e44e8e8..3873ce85ca4d45 100644
--- a/packages/mui-material-next/README.md
+++ b/packages/mui-material-next/README.md
@@ -1,18 +1,10 @@
# @mui/material-next
-[Material 3](https://m3.material.io/) components built using [@mui/base](https://mui.com/base-ui/getting-started/overview/).
+[Material Design 3](https://m3.material.io/) components built using [`@mui/base`](https://mui.com/base-ui/getting-started/overview/) with TypeScript.
-This package is a nursery for components that will ultimately replace the @mui/material ones.
+This package is a nursery for components that will ultimately replace those found in `@mui/material`.
-## Material UI v6 changes
-
-Material UI v6's notable changes compared to v5 are:
-
-- Built using [@mui/base](https://mui.com/base-ui/getting-started/overview/)
-- Built with TypeScript.
-- Implement [Material 3](https://m3.material.io/) (Material Design 3).
-
-For migration steps when upgrading from v5, follow the [migration guide](/packages/mui-material-next/migration.md).
+Follow the [migration guide](/packages/mui-material-next/migration.md) to migrate from `@mui/material` to `@mui/material-next`.
## Contributing
diff --git a/packages/mui-material-next/migration.md b/packages/mui-material-next/migration.md
index 1ca0322d107c35..f409872beebee7 100644
--- a/packages/mui-material-next/migration.md
+++ b/packages/mui-material-next/migration.md
@@ -1,18 +1,18 @@
# Migration
-This is a reference guide on how to migrate from Material UI v5 to v6.
+This is a reference guide on how to migrate from @mui/material to @mui/material-next.
## Breaking changes: components
-This section lists all breaking changes related to components in v6 and how to address them.
+This section lists all breaking changes related to Material Design 3 (M3) components and how to address them.
## Overarching changes
-These are the changes that apply to all components
+These are the changes that apply to all components.
### Remove `components` and `componentsProps` props
-The deprecated `components` and `componentsProps` props are removed in v6.
+The deprecated `components` and `componentsProps` props are removed in `@mui/material-next`.
If you were using these, then you can use `slots` and `slotProps` props instead, which have the same functionality and API.
Here's an example of the change using the Badge component:
@@ -30,7 +30,7 @@ Here's an example of the change using the Badge component:
### Remove composed CSS classes and `styleOverrides` keys
-Classes composed of two or more existing classes are removed in v6.
+Classes composed of two or more existing classes are removed in `@mui/material-next`.
For example, the `MuiChip-filledPrimary` class is removed in favor of the `MuiChip-filled` and `MuiChip-colorPrimary` classes.
Composed `styleOverrides` keys are also removed.
Following the example above, the chip component's `filledPrimary` `styleOverrides` key is removed.
@@ -116,7 +116,7 @@ So the examples below are interchangeable for these components.
### Removed focusRipple
-The `focusRipple` prop was removed as ripples are absent in Material 3's focused states.
+The `focusRipple` prop was removed as ripples are absent in Material Design 3's focused states.
### Prevent default on `key-up` and `key-down` events
@@ -166,13 +166,13 @@ The `FormControlState` interface was renamed to `FormControlContextValue`:
### Removed the `standard` variant
-The standard variant is no longer supported in Material 3, use the `filled` or `outlined` variants instead.
+The standard variant is no longer supported in M3, use the `filled` or `outlined` variants instead.
## FormLabel
### Removed the `standard` variant
-The standard variant is no longer supported in Material 3, use the `filled` or `outlined` variants instead.
+The standard variant is no longer supported in M3, use the `filled` or `outlined` variants instead.
## InputBase
@@ -191,7 +191,7 @@ The standard variant is no longer supported in Material 3, use the `filled` or `
### Removed the `standard` variant
-The standard variant is no longer supported in Material 3, use the `filled` or `outlined` variants instead.
+The standard variant is no longer supported in M3, use the `filled` or `outlined` variants instead.
## Chip
@@ -299,10 +299,10 @@ The following example replaces the `MuiChip-filledPrimary` class using `MuiChip-
The `skipFocusWhenDisabled` prop was replaced with `focusableWhenDisabled`, which is `false` by default.
Because of this, the default behavior changed:
-- In v5, disabled chips were focusable by default
-- In v6, disabled chips are not focusable by default
+- In `@mui/material`, disabled chips are focusable by default
+- In `@mui/material-next`, disabled chips are _not_ focusable by default
-If you were using the `skipFocusWhenDisabled` prop to make disabled chips not focusable (which is v6's default behavior), then you can remove the prop as follows:
+If you were using the `skipFocusWhenDisabled` prop to make disabled chips not focusable (which is `@mui/material-next`'s default behavior), then you can remove the prop as follows:
```diff
```
-If you wish to maintain v5's default behavior, then you can achieve that as follows:
+If you wish to maintain @mui/material's default behavior, then you can achieve that as follows:
```diff
```
-This is required in v6 as it's used to apply the overlap styles to these slots. For more info take a look into [Material 3's Slider overlapping handles guidelines](https://m3.material.io/components/sliders/guidelines#ad5ceb95-a690-4ddd-8243-53a8e13bdab6).
+This is required in `@mui/material-next` as it's used to apply the overlap styles to these slots. For more info take a look into [M3's Slider overlapping handles guidelines](https://m3.material.io/components/sliders/guidelines#ad5ceb95-a690-4ddd-8243-53a8e13bdab6).
## Divider
diff --git a/packages/mui-material-next/package.json b/packages/mui-material-next/package.json
index 68fad75381ed32..e5260817da6f50 100644
--- a/packages/mui-material-next/package.json
+++ b/packages/mui-material-next/package.json
@@ -1,6 +1,6 @@
{
"name": "@mui/material-next",
- "version": "6.0.0-alpha.119",
+ "version": "6.0.0-alpha.123",
"private": false,
"author": "MUI Team",
"description": "v6-alpha: React components that implement Google's Material Design",
@@ -59,8 +59,8 @@
"@testing-library/user-event": "^14.5.2",
"@types/chai": "^4.3.11",
"@types/prop-types": "^15.7.11",
- "@types/react": "^18.2.48",
- "@types/react-dom": "^18.2.18",
+ "@types/react": "^18.2.55",
+ "@types/react-dom": "^18.2.19",
"@types/react-is": "^18.2.4",
"@types/sinon": "^10.0.20",
"chai": "^4.4.1",
diff --git a/packages/mui-material-next/src/Badge/Badge.test.tsx b/packages/mui-material-next/src/Badge/Badge.test.tsx
index 22d881a4e1a0a7..3a21443b79da0a 100644
--- a/packages/mui-material-next/src/Badge/Badge.test.tsx
+++ b/packages/mui-material-next/src/Badge/Badge.test.tsx
@@ -1,8 +1,9 @@
import * as React from 'react';
import { expect } from 'chai';
-import { createRenderer, describeConformance } from '@mui-internal/test-utils';
+import { createRenderer } from '@mui-internal/test-utils';
import Badge, { badgeClasses as classes } from '@mui/material-next/Badge';
import { CssVarsProvider, extendTheme } from '@mui/material-next/styles';
+import describeConformance from '../../test/describeConformance';
function findBadgeRoot(container: HTMLElement) {
return container?.firstChild;
diff --git a/packages/mui-material-next/src/Button/Button.test.js b/packages/mui-material-next/src/Button/Button.test.js
index 7edd62846b1603..bf13fae97f51b5 100644
--- a/packages/mui-material-next/src/Button/Button.test.js
+++ b/packages/mui-material-next/src/Button/Button.test.js
@@ -1,10 +1,11 @@
import * as React from 'react';
import { expect } from 'chai';
import { spy } from 'sinon';
-import { describeConformance, createRenderer, fireEvent, act } from '@mui-internal/test-utils';
+import { createRenderer, fireEvent, act } from '@mui-internal/test-utils';
import { camelCase } from 'lodash';
import Button, { buttonClasses as classes } from '@mui/material-next/Button';
import { CssVarsProvider, extendTheme } from '@mui/material-next/styles';
+import describeConformance from '../../test/describeConformance';
describe('', () => {
const { render, renderToString } = createRenderer();
diff --git a/packages/mui-material-next/src/Button/Button.tsx b/packages/mui-material-next/src/Button/Button.tsx
index b73377b731947f..724927f3ff6727 100644
--- a/packages/mui-material-next/src/Button/Button.tsx
+++ b/packages/mui-material-next/src/Button/Button.tsx
@@ -290,7 +290,7 @@ export const ButtonRoot = styled(ButtonBase, {
padding: '9px 23px',
}),
'--Button-gap': '0.5rem',
- // Sizes are not specified in Material You, this need to be revised
+ // Sizes are not specified in Material Design 3, this need to be revised
...(ownerState.size === 'small' && {
'--Button-gap': '0.45rem',
fontSize: theme.typography.pxToRem(theme.sys.typescale.label.large.size - 1), // the pxToRem should be moved to typescale in the future
diff --git a/packages/mui-material-next/src/ButtonBase/ButtonBase.test.tsx b/packages/mui-material-next/src/ButtonBase/ButtonBase.test.tsx
index a5ae1e5528469c..14bad4a702f6b9 100644
--- a/packages/mui-material-next/src/ButtonBase/ButtonBase.test.tsx
+++ b/packages/mui-material-next/src/ButtonBase/ButtonBase.test.tsx
@@ -4,7 +4,6 @@ import { expect } from 'chai';
import { spy, stub } from 'sinon';
import userEvent from '@testing-library/user-event';
import {
- describeConformance,
act,
createRenderer,
fireEvent,
@@ -19,6 +18,7 @@ import { CssVarsProvider, extendTheme } from '@mui/material-next/styles';
import ButtonBase, { buttonBaseClasses as classes } from '@mui/material-next/ButtonBase';
import { ButtonBaseActions } from './ButtonBase.types';
import { TouchRippleActions } from './TouchRipple.types';
+import describeConformance from '../../test/describeConformance';
// TODO v6: initialize @testing-library/user-event using userEvent.setup() instead of directly calling methods e.g. userEvent.click() for all related tests in this file
// currently the setup() method uses the ClipboardEvent constructor which is incompatible with our lowest supported version of iOS Safari (12.2) https://github.com/mui/material-ui/blob/master/.browserslistrc#L44
@@ -49,7 +49,7 @@ describe('', () => {
({
addListener: () => {},
removeListener: () => {},
- } as unknown as MediaQueryList);
+ }) as unknown as MediaQueryList;
});
afterEach(() => {
window.matchMedia = originalMatchmedia;
diff --git a/packages/mui-material-next/src/ButtonBase/Ripple.tsx b/packages/mui-material-next/src/ButtonBase/Ripple.tsx
index 753bf98dc6b63a..832a94c6829f3c 100644
--- a/packages/mui-material-next/src/ButtonBase/Ripple.tsx
+++ b/packages/mui-material-next/src/ButtonBase/Ripple.tsx
@@ -57,7 +57,6 @@ function Ripple(props: RippleProps) {
Ripple.propTypes = {
/**
* Override or extend the styles applied to the component.
- * See [CSS API](#css) below for more details.
*/
classes: PropTypes.object.isRequired,
className: PropTypes.string,
diff --git a/packages/mui-material-next/src/ButtonBase/TouchRipple.test.js b/packages/mui-material-next/src/ButtonBase/TouchRipple.test.js
index a056cea0f10d60..b47092a4efc36e 100644
--- a/packages/mui-material-next/src/ButtonBase/TouchRipple.test.js
+++ b/packages/mui-material-next/src/ButtonBase/TouchRipple.test.js
@@ -1,7 +1,8 @@
import * as React from 'react';
import { expect } from 'chai';
-import { describeConformance, act, createRenderer } from '@mui-internal/test-utils';
+import { act, createRenderer } from '@mui-internal/test-utils';
import TouchRipple, { DELAY_RIPPLE } from './TouchRipple';
+import describeConformance from '../../test/describeConformance';
const cb = () => {};
diff --git a/packages/mui-material-next/src/ButtonBase/TouchRipple.tsx b/packages/mui-material-next/src/ButtonBase/TouchRipple.tsx
index 0be23b2cebd49f..4f5025e3025ca4 100644
--- a/packages/mui-material-next/src/ButtonBase/TouchRipple.tsx
+++ b/packages/mui-material-next/src/ButtonBase/TouchRipple.tsx
@@ -83,199 +83,198 @@ export const TouchRippleRipple = styled(Ripple, {
/**
* @ignore - internal component.
*/
-const TouchRipple = React.forwardRef(function TouchRipple(
- inProps,
- ref,
-) {
- const props = useThemeProps({ props: inProps, name: 'PrivateTouchRipple' });
+const TouchRipple = React.forwardRef(
+ function TouchRipple(inProps, ref) {
+ const props = useThemeProps({ props: inProps, name: 'PrivateTouchRipple' });
- const { center: centerProp = false, classes = {}, className, ...other } = props;
- const [ripples, setRipples] = React.useState([]);
- const nextKey = React.useRef(0);
- const rippleCallback = React.useRef<(() => void) | null>();
+ const { center: centerProp = false, classes = {}, className, ...other } = props;
+ const [ripples, setRipples] = React.useState([]);
+ const nextKey = React.useRef(0);
+ const rippleCallback = React.useRef<(() => void) | null>();
- React.useEffect(() => {
- if (rippleCallback.current) {
- rippleCallback.current();
- rippleCallback.current = null;
- }
- }, [ripples]);
+ React.useEffect(() => {
+ if (rippleCallback.current) {
+ rippleCallback.current();
+ rippleCallback.current = null;
+ }
+ }, [ripples]);
- // Used to filter out mouse emulated events on mobile.
- const ignoringMouseDown = React.useRef(false);
- // We use a timer in order to only show the ripples for touch "click" like events.
- // We don't want to display the ripple for touch scroll events.
- const startTimer = useTimeout();
+ // Used to filter out mouse emulated events on mobile.
+ const ignoringMouseDown = React.useRef(false);
+ // We use a timer in order to only show the ripples for touch "click" like events.
+ // We don't want to display the ripple for touch scroll events.
+ const startTimer = useTimeout();
- // This is the hook called once the previous timeout is ready.
- const startTimerCommit = React.useRef<(() => void) | null>(null);
- const container = React.useRef(null);
+ // This is the hook called once the previous timeout is ready.
+ const startTimerCommit = React.useRef<(() => void) | null>(null);
+ const container = React.useRef(null);
- const startCommit = React.useCallback(
- (params: { rippleX: number; rippleY: number; rippleSize: number; cb: () => void }) => {
- const { rippleX, rippleY, rippleSize, cb } = params;
+ const startCommit = React.useCallback(
+ (params: { rippleX: number; rippleY: number; rippleSize: number; cb: () => void }) => {
+ const { rippleX, rippleY, rippleSize, cb } = params;
- setRipples((oldRipples) => [
- ...oldRipples,
- ,
- ]);
- nextKey.current += 1;
- rippleCallback.current = cb;
- },
- [classes],
- );
+ setRipples((oldRipples) => [
+ ...oldRipples,
+ ,
+ ]);
+ nextKey.current += 1;
+ rippleCallback.current = cb;
+ },
+ [classes],
+ );
- const start = React.useCallback(
- (event, options = {}, cb = () => {}) => {
- const {
- center = centerProp,
- // @ts-ignore For test purposes
- fakeElement = false,
- } = options;
+ const start = React.useCallback(
+ (event, options = {}, cb = () => {}) => {
+ const {
+ center = centerProp,
+ // @ts-ignore For test purposes
+ fakeElement = false,
+ } = options;
- if (event?.type === 'mousedown' && ignoringMouseDown.current) {
- ignoringMouseDown.current = false;
- return;
- }
+ if (event?.type === 'mousedown' && ignoringMouseDown.current) {
+ ignoringMouseDown.current = false;
+ return;
+ }
- if (event?.type === 'touchstart') {
- ignoringMouseDown.current = true;
- }
+ if (event?.type === 'touchstart') {
+ ignoringMouseDown.current = true;
+ }
- const element = fakeElement ? null : container.current;
- const rect = element
- ? element.getBoundingClientRect()
- : {
- width: 0,
- height: 0,
- left: 0,
- top: 0,
- };
+ const element = fakeElement ? null : container.current;
+ const rect = element
+ ? element.getBoundingClientRect()
+ : {
+ width: 0,
+ height: 0,
+ left: 0,
+ top: 0,
+ };
- // Get the size of the ripple
- let rippleX: number;
- let rippleY: number;
- let rippleSize: number;
+ // Get the size of the ripple
+ let rippleX: number;
+ let rippleY: number;
+ let rippleSize: number;
- if (
- center ||
- ((event as React.MouseEvent)?.clientX === 0 &&
- (event as React.MouseEvent)?.clientY === 0) ||
- (!(event as React.MouseEvent)?.clientX && !(event as React.TouchEvent)?.touches)
- ) {
- rippleX = Math.round(rect.width / 2);
- rippleY = Math.round(rect.height / 2);
- } else {
- const { clientX, clientY } =
- event && (event as React.TouchEvent).touches
- ? (event as React.TouchEvent).touches[0]
- : (event as React.MouseEvent);
- rippleX = Math.round(clientX - rect.left);
- rippleY = Math.round(clientY - rect.top);
- }
+ if (
+ center ||
+ ((event as React.MouseEvent)?.clientX === 0 &&
+ (event as React.MouseEvent)?.clientY === 0) ||
+ (!(event as React.MouseEvent)?.clientX && !(event as React.TouchEvent)?.touches)
+ ) {
+ rippleX = Math.round(rect.width / 2);
+ rippleY = Math.round(rect.height / 2);
+ } else {
+ const { clientX, clientY } =
+ event && (event as React.TouchEvent).touches
+ ? (event as React.TouchEvent).touches[0]
+ : (event as React.MouseEvent);
+ rippleX = Math.round(clientX - rect.left);
+ rippleY = Math.round(clientY - rect.top);
+ }
- if (center) {
- rippleSize = Math.max(rect.width, rect.height);
+ if (center) {
+ rippleSize = Math.max(rect.width, rect.height);
- // For some reason the animation is broken on Mobile Chrome if the size is even.
- if (rippleSize % 2 === 0) {
- rippleSize += 1;
+ // For some reason the animation is broken on Mobile Chrome if the size is even.
+ if (rippleSize % 2 === 0) {
+ rippleSize += 1;
+ }
+ } else {
+ const sizeX =
+ Math.max(Math.abs((element ? element.clientWidth : 0) - rippleX), rippleX) * 2 + 2;
+ const sizeY =
+ Math.max(Math.abs((element ? element.clientHeight : 0) - rippleY), rippleY) * 2 + 2;
+ rippleSize = Math.sqrt(sizeX ** 2 + sizeY ** 2);
}
- } else {
- const sizeX =
- Math.max(Math.abs((element ? element.clientWidth : 0) - rippleX), rippleX) * 2 + 2;
- const sizeY =
- Math.max(Math.abs((element ? element.clientHeight : 0) - rippleY), rippleY) * 2 + 2;
- rippleSize = Math.sqrt(sizeX ** 2 + sizeY ** 2);
- }
- // Touche devices
- if ((event as React.TouchEvent)?.touches) {
- // check that this isn't another touchstart due to multitouch
- // otherwise we will only clear a single timer when unmounting while two
- // are running
- if (startTimerCommit.current === null) {
- // Prepare the ripple effect.
- startTimerCommit.current = () => {
- startCommit({ rippleX, rippleY, rippleSize, cb });
- };
- // Delay the execution of the ripple effect.
- // We have to make a tradeoff with this delay value.
- startTimer.start(DELAY_RIPPLE, () => {
- if (startTimerCommit.current) {
- startTimerCommit.current();
- startTimerCommit.current = null;
- }
- });
+ // Touche devices
+ if ((event as React.TouchEvent)?.touches) {
+ // check that this isn't another touchstart due to multitouch
+ // otherwise we will only clear a single timer when unmounting while two
+ // are running
+ if (startTimerCommit.current === null) {
+ // Prepare the ripple effect.
+ startTimerCommit.current = () => {
+ startCommit({ rippleX, rippleY, rippleSize, cb });
+ };
+ // Delay the execution of the ripple effect.
+ // We have to make a tradeoff with this delay value.
+ startTimer.start(DELAY_RIPPLE, () => {
+ if (startTimerCommit.current) {
+ startTimerCommit.current();
+ startTimerCommit.current = null;
+ }
+ });
+ }
+ } else {
+ startCommit({ rippleX, rippleY, rippleSize, cb });
}
- } else {
- startCommit({ rippleX, rippleY, rippleSize, cb });
- }
- },
- [centerProp, startCommit, startTimer],
- );
+ },
+ [centerProp, startCommit, startTimer],
+ );
- const stop = React.useCallback(
- (event, cb) => {
- startTimer.clear();
+ const stop = React.useCallback(
+ (event, cb) => {
+ startTimer.clear();
- // The touch interaction occurs too quickly.
- // We still want to show ripple effect.
- if (event?.type === 'touchend' && startTimerCommit.current) {
- startTimerCommit.current();
- startTimerCommit.current = null;
- startTimer.start(0, () => {
- stop(event, cb);
- });
- return;
- }
+ // The touch interaction occurs too quickly.
+ // We still want to show ripple effect.
+ if (event?.type === 'touchend' && startTimerCommit.current) {
+ startTimerCommit.current();
+ startTimerCommit.current = null;
+ startTimer.start(0, () => {
+ stop(event, cb);
+ });
+ return;
+ }
- startTimerCommit.current = null;
+ startTimerCommit.current = null;
- setRipples((oldRipples) => {
- if (oldRipples.length > 0) {
- return oldRipples.slice(1);
- }
- return oldRipples;
- });
- rippleCallback.current = cb;
- },
- [startTimer],
- );
+ setRipples((oldRipples) => {
+ if (oldRipples.length > 0) {
+ return oldRipples.slice(1);
+ }
+ return oldRipples;
+ });
+ rippleCallback.current = cb;
+ },
+ [startTimer],
+ );
- React.useImperativeHandle(
- ref,
- () => ({
- start,
- stop,
- }),
- [start, stop],
- );
+ React.useImperativeHandle(
+ ref,
+ () => ({
+ start,
+ stop,
+ }),
+ [start, stop],
+ );
- return (
-
-
- {ripples}
-
-
- );
-}) as React.ForwardRefExoticComponent>;
+ return (
+
+
+ {ripples}
+
+
+ );
+ },
+) as React.ForwardRefExoticComponent>;
TouchRipple.propTypes = {
/**
@@ -285,7 +284,6 @@ TouchRipple.propTypes = {
center: PropTypes.bool,
/**
* Override or extend the styles applied to the component.
- * See [CSS API](#css) below for more details.
*/
classes: PropTypes.object,
/**
diff --git a/packages/mui-material-next/src/ButtonGroup/ButtonGroup.test.tsx b/packages/mui-material-next/src/ButtonGroup/ButtonGroup.test.tsx
index 02597a6eb0269a..27c6ae0a268273 100644
--- a/packages/mui-material-next/src/ButtonGroup/ButtonGroup.test.tsx
+++ b/packages/mui-material-next/src/ButtonGroup/ButtonGroup.test.tsx
@@ -1,10 +1,11 @@
import * as React from 'react';
import { expect } from 'chai';
-import { createRenderer, describeConformance, screen } from '@mui-internal/test-utils';
+import { createRenderer, screen } from '@mui-internal/test-utils';
import ButtonGroup, { buttonGroupClasses as classes } from '@mui/material-next/ButtonGroup';
import { CssVarsProvider, extendTheme } from '@mui/material-next/styles';
import Button, { buttonClasses } from '@mui/material-next/Button';
import ButtonGroupContext, { ButtonGroupContextType } from './ButtonGroupContext';
+import describeConformance from '../../test/describeConformance';
describe('', () => {
const { render } = createRenderer();
@@ -17,7 +18,7 @@ describe('', () => {
({
addListener: () => {},
removeListener: () => {},
- } as unknown as MediaQueryList);
+ }) as unknown as MediaQueryList;
});
afterEach(() => {
window.matchMedia = originalMatchmedia;
diff --git a/packages/mui-material-next/src/Chip/Chip.test.tsx b/packages/mui-material-next/src/Chip/Chip.test.tsx
index 5656832e68678d..1eaf75ea1b6bd0 100644
--- a/packages/mui-material-next/src/Chip/Chip.test.tsx
+++ b/packages/mui-material-next/src/Chip/Chip.test.tsx
@@ -3,7 +3,6 @@ import { expect } from 'chai';
import { spy, stub } from 'sinon';
import userEvent from '@testing-library/user-event';
import {
- describeConformance,
act,
createRenderer,
fireEvent,
@@ -19,8 +18,9 @@ import Chip, { chipClasses as classes } from '@mui/material-next/Chip';
import { CssVarsProvider, extendTheme } from '@mui/material-next/styles';
import CheckBox from '../internal/svg-icons/CheckBox';
import { ChipProps } from './Chip.types';
+import describeConformance from '../../test/describeConformance';
-// TODO: remove after migrating SvgICon to support Material You colors
+// TODO: remove after migrating SvgIcon to support Material Design 3 colors
const MaterialV5DefaultTheme = createTheme();
describe('', () => {
@@ -32,7 +32,7 @@ describe('', () => {
({
addListener: () => {},
removeListener: () => {},
- } as unknown as MediaQueryList);
+ }) as unknown as MediaQueryList;
});
afterEach(() => {
window.matchMedia = originalMatchmedia;
diff --git a/packages/mui-material-next/src/CircularProgress/CircularProgress.test.tsx b/packages/mui-material-next/src/CircularProgress/CircularProgress.test.tsx
index 64e82de41c6944..80d77d35675a24 100644
--- a/packages/mui-material-next/src/CircularProgress/CircularProgress.test.tsx
+++ b/packages/mui-material-next/src/CircularProgress/CircularProgress.test.tsx
@@ -1,10 +1,11 @@
import * as React from 'react';
import { expect } from 'chai';
-import { createRenderer, describeConformance } from '@mui-internal/test-utils';
+import { createRenderer } from '@mui-internal/test-utils';
import CircularProgress, {
circularProgressClasses as classes,
} from '@mui/material-next/CircularProgress';
import { CssVarsProvider, extendTheme } from '../styles';
+import describeConformance from '../../test/describeConformance';
describe('', () => {
const { render } = createRenderer();
diff --git a/packages/mui-material-next/src/Divider/Divider.test.tsx b/packages/mui-material-next/src/Divider/Divider.test.tsx
index 62c00bcd151a0d..4622af20f6f404 100644
--- a/packages/mui-material-next/src/Divider/Divider.test.tsx
+++ b/packages/mui-material-next/src/Divider/Divider.test.tsx
@@ -1,8 +1,9 @@
import * as React from 'react';
import { expect } from 'chai';
-import { describeConformance, createRenderer } from '@mui-internal/test-utils';
+import { createRenderer } from '@mui-internal/test-utils';
import Divider, { dividerClasses as classes } from '@mui/material-next/Divider';
import { CssVarsProvider, extendTheme } from '@mui/material-next/styles';
+import describeConformance from '../../test/describeConformance';
describe('', () => {
const { render } = createRenderer();
diff --git a/packages/mui-material-next/src/FilledInput/FilledInput.test.tsx b/packages/mui-material-next/src/FilledInput/FilledInput.test.tsx
index 35a13879c95e85..032dbf30375e1e 100644
--- a/packages/mui-material-next/src/FilledInput/FilledInput.test.tsx
+++ b/packages/mui-material-next/src/FilledInput/FilledInput.test.tsx
@@ -1,10 +1,11 @@
import * as React from 'react';
import { expect } from 'chai';
import { ClassNames } from '@emotion/react';
-import { createRenderer, describeConformance } from '@mui-internal/test-utils';
+import { createRenderer } from '@mui-internal/test-utils';
import { CssVarsProvider, extendTheme } from '@mui/material-next/styles';
import FilledInput, { filledInputClasses as classes } from '@mui/material-next/FilledInput';
import InputBase from '@mui/material-next/InputBase';
+import describeConformance from '../../test/describeConformance';
describe('', () => {
const { render } = createRenderer();
diff --git a/packages/mui-material-next/src/FormControl/FormControl.test.tsx b/packages/mui-material-next/src/FormControl/FormControl.test.tsx
index c5db1b56d1c691..e764a8181c2e73 100644
--- a/packages/mui-material-next/src/FormControl/FormControl.test.tsx
+++ b/packages/mui-material-next/src/FormControl/FormControl.test.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
import { expect } from 'chai';
import { spy } from 'sinon';
import { ClassNames } from '@emotion/react';
-import { describeConformance, act, createRenderer, fireEvent } from '@mui-internal/test-utils';
+import { act, createRenderer, fireEvent } from '@mui-internal/test-utils';
import FormControl, { formControlClasses as classes } from '@mui/material-next/FormControl';
import FilledInput from '@mui/material-next/FilledInput';
import InputBase from '@mui/material-next/InputBase';
@@ -10,6 +10,7 @@ import { CssVarsProvider, extendTheme } from '@mui/material-next/styles';
// TODO v6: replace with material-next/Select
import Select from '@mui/material/Select';
import useFormControl from './useFormControl';
+import describeConformance from '../../test/describeConformance';
type TestFormControlledComponent = {
onFilled: () => {};
diff --git a/packages/mui-material-next/src/FormHelperText/FormHelperText.test.tsx b/packages/mui-material-next/src/FormHelperText/FormHelperText.test.tsx
index 371fa7bfb329ba..06830cec394053 100644
--- a/packages/mui-material-next/src/FormHelperText/FormHelperText.test.tsx
+++ b/packages/mui-material-next/src/FormHelperText/FormHelperText.test.tsx
@@ -1,12 +1,13 @@
import * as React from 'react';
import { expect } from 'chai';
-import { createRenderer, describeConformance } from '@mui-internal/test-utils';
+import { createRenderer } from '@mui-internal/test-utils';
import FormHelperText, {
formHelperTextClasses as classes,
FormHelperTextClasses,
} from '@mui/material-next/FormHelperText';
import FormControl from '@mui/material-next/FormControl';
import { CssVarsProvider, extendTheme } from '@mui/material-next/styles';
+import describeConformance from '../../test/describeConformance';
describe('', () => {
let originalMatchmedia: typeof window.matchMedia;
@@ -17,7 +18,7 @@ describe('', () => {
({
addListener: () => {},
removeListener: () => {},
- } as unknown as MediaQueryList);
+ }) as unknown as MediaQueryList;
});
afterEach(() => {
diff --git a/packages/mui-material-next/src/FormLabel/FormLabel.test.tsx b/packages/mui-material-next/src/FormLabel/FormLabel.test.tsx
index 7cf416e88ebd29..4abf9cdc3f5291 100644
--- a/packages/mui-material-next/src/FormLabel/FormLabel.test.tsx
+++ b/packages/mui-material-next/src/FormLabel/FormLabel.test.tsx
@@ -1,10 +1,11 @@
import * as React from 'react';
import PropTypes from 'prop-types';
import { expect } from 'chai';
-import { describeConformance, act, createRenderer } from '@mui-internal/test-utils';
+import { act, createRenderer } from '@mui-internal/test-utils';
import FormLabel, { formLabelClasses as classes } from '@mui/material-next/FormLabel';
import FormControl, { useFormControl } from '@mui/material-next/FormControl';
import { CssVarsProvider, extendTheme } from '@mui/material-next/styles';
+import describeConformance from '../../test/describeConformance';
describe('', () => {
let originalMatchmedia: typeof window.matchMedia;
@@ -15,7 +16,7 @@ describe('', () => {
({
addListener: () => {},
removeListener: () => {},
- } as unknown as MediaQueryList);
+ }) as unknown as MediaQueryList;
});
afterEach(() => {
diff --git a/packages/mui-material-next/src/IconButton/IconButton.test.js b/packages/mui-material-next/src/IconButton/IconButton.test.js
index b436cfaab61374..bb8ea99d596bfc 100644
--- a/packages/mui-material-next/src/IconButton/IconButton.test.js
+++ b/packages/mui-material-next/src/IconButton/IconButton.test.js
@@ -1,13 +1,14 @@
import * as React from 'react';
import { expect } from 'chai';
import PropTypes from 'prop-types';
-import { createRenderer, describeConformance } from '@mui-internal/test-utils';
+import { createRenderer } from '@mui-internal/test-utils';
import { unstable_capitalize as capitalize } from '@mui/utils';
import Icon from '@mui/material/Icon';
import { ThemeProvider, createTheme } from '@mui/material/styles';
import ButtonBase from '@mui/material/ButtonBase';
import { iconButtonClasses as classes } from '@mui/material/IconButton';
import IconButton from '.';
+import describeConformance from '../../test/describeConformance';
describe('', () => {
const { render } = createRenderer();
diff --git a/packages/mui-material-next/src/InputAdornment/InputAdornment.test.js b/packages/mui-material-next/src/InputAdornment/InputAdornment.test.js
index 8cb9c32096e4b6..0b0ddd480fd0eb 100644
--- a/packages/mui-material-next/src/InputAdornment/InputAdornment.test.js
+++ b/packages/mui-material-next/src/InputAdornment/InputAdornment.test.js
@@ -1,15 +1,12 @@
import * as React from 'react';
import { expect } from 'chai';
-import {
- createRenderer,
- describeConformance,
- strictModeDoubleLoggingSuppressed,
-} from '@mui-internal/test-utils';
+import { createRenderer, strictModeDoubleLoggingSuppressed } from '@mui-internal/test-utils';
import { typographyClasses } from '@mui/material/Typography';
import InputAdornment, { inputAdornmentClasses as classes } from '@mui/material/InputAdornment';
import TextField from '@mui/material/TextField';
import FormControl from '@mui/material/FormControl';
import Input from '@mui/material/Input';
+import describeConformance from '../../test/describeConformance';
describe('', () => {
const { render } = createRenderer();
diff --git a/packages/mui-material-next/src/InputBase/InputBase.test.tsx b/packages/mui-material-next/src/InputBase/InputBase.test.tsx
index 2b91efb5deb026..13bd511fdcc3e2 100644
--- a/packages/mui-material-next/src/InputBase/InputBase.test.tsx
+++ b/packages/mui-material-next/src/InputBase/InputBase.test.tsx
@@ -2,13 +2,7 @@ import * as React from 'react';
import PropTypes from 'prop-types';
import { expect } from 'chai';
import { spy } from 'sinon';
-import {
- describeConformance,
- act,
- createRenderer,
- fireEvent,
- screen,
-} from '@mui-internal/test-utils';
+import { act, createRenderer, fireEvent, screen } from '@mui-internal/test-utils';
import FormControl, { useFormControl } from '@mui/material-next/FormControl';
// TODO v6: replace with material-next/InputAdornment
import InputAdornment from '@mui/material/InputAdornment';
@@ -23,6 +17,7 @@ import {
InputBaseOwnerState,
InputBaseProps,
} from './InputBase.types';
+import describeConformance from '../../test/describeConformance';
describe('', () => {
const { render } = createRenderer();
diff --git a/packages/mui-material-next/src/InputLabel/InputLabel.test.tsx b/packages/mui-material-next/src/InputLabel/InputLabel.test.tsx
index 1cb295b5df87db..f507dc6de95c42 100644
--- a/packages/mui-material-next/src/InputLabel/InputLabel.test.tsx
+++ b/packages/mui-material-next/src/InputLabel/InputLabel.test.tsx
@@ -1,13 +1,14 @@
import * as React from 'react';
import PropTypes from 'prop-types';
import { expect } from 'chai';
-import { describeConformance, act, createRenderer } from '@mui-internal/test-utils';
+import { act, createRenderer } from '@mui-internal/test-utils';
import { ClassNames } from '@emotion/react';
import { CssVarsProvider, extendTheme } from '@mui/material-next/styles';
import FormControl from '@mui/material-next/FormControl';
import FilledInput from '@mui/material-next/FilledInput';
import FormLabel from '@mui/material-next/FormLabel';
import InputLabel, { inputLabelClasses as classes } from '@mui/material-next/InputLabel';
+import describeConformance from '../../test/describeConformance';
describe('', () => {
let originalMatchmedia: typeof window.matchMedia;
@@ -18,7 +19,7 @@ describe('', () => {
({
addListener: () => {},
removeListener: () => {},
- } as unknown as MediaQueryList);
+ }) as unknown as MediaQueryList;
});
afterEach(() => {
diff --git a/packages/mui-material-next/src/LinearProgress/LinearProgress.test.tsx b/packages/mui-material-next/src/LinearProgress/LinearProgress.test.tsx
index 7e460cdab60f84..65044f08556cf4 100644
--- a/packages/mui-material-next/src/LinearProgress/LinearProgress.test.tsx
+++ b/packages/mui-material-next/src/LinearProgress/LinearProgress.test.tsx
@@ -3,7 +3,6 @@ import { expect } from 'chai';
import {
createRenderer,
screen,
- describeConformance,
strictModeDoubleLoggingSuppressed,
MuiRenderResult,
} from '@mui-internal/test-utils';
@@ -11,6 +10,7 @@ import LinearProgress, {
linearProgressClasses as classes,
} from '@mui/material-next/LinearProgress';
import { CssVarsProvider, extendTheme } from '../styles';
+import describeConformance from '../../test/describeConformance';
describe('', () => {
const { render } = createRenderer();
diff --git a/packages/mui-material-next/src/List/List.test.js b/packages/mui-material-next/src/List/List.test.js
index 3ccdf10b4f1c35..bd5e5843f1e2b6 100644
--- a/packages/mui-material-next/src/List/List.test.js
+++ b/packages/mui-material-next/src/List/List.test.js
@@ -1,9 +1,10 @@
import * as React from 'react';
import { expect } from 'chai';
-import { describeConformance, createRenderer } from '@mui-internal/test-utils';
+import { createRenderer } from '@mui-internal/test-utils';
import ListSubheader, { listSubheaderClasses } from '@mui/material-next/ListSubheader';
import ListItem, { listItemClasses } from '@mui/material-next/ListItem';
import List, { listClasses as classes } from '@mui/material-next/List';
+import describeConformance from '../../test/describeConformance';
describe('
', () => {
const { render } = createRenderer();
diff --git a/packages/mui-material-next/src/ListItem/ListItem.test.js b/packages/mui-material-next/src/ListItem/ListItem.test.js
index 1768768e0af451..abe5fb73890ecb 100644
--- a/packages/mui-material-next/src/ListItem/ListItem.test.js
+++ b/packages/mui-material-next/src/ListItem/ListItem.test.js
@@ -1,18 +1,13 @@
import * as React from 'react';
import { expect } from 'chai';
import PropTypes from 'prop-types';
-import {
- describeConformance,
- act,
- createRenderer,
- fireEvent,
- queries,
-} from '@mui-internal/test-utils';
+import { act, createRenderer, fireEvent, queries } from '@mui-internal/test-utils';
import { ThemeProvider, createTheme } from '@mui/material/styles';
import ListItemText from '@mui/material-next/ListItemText';
import ListItemSecondaryAction from '@mui/material-next/ListItemSecondaryAction';
import ListItem, { listItemClasses as classes } from '@mui/material-next/ListItem';
import ListContext from '../List/ListContext';
+import describeConformance from '../../test/describeConformance';
const NoContent = React.forwardRef(() => {
return null;
diff --git a/packages/mui-material-next/src/ListItemAvatar/ListItemAvatar.test.js b/packages/mui-material-next/src/ListItemAvatar/ListItemAvatar.test.js
index 41e35f7bf095e4..605fd1128c3587 100644
--- a/packages/mui-material-next/src/ListItemAvatar/ListItemAvatar.test.js
+++ b/packages/mui-material-next/src/ListItemAvatar/ListItemAvatar.test.js
@@ -1,8 +1,9 @@
import * as React from 'react';
-import { createRenderer, describeConformance } from '@mui-internal/test-utils';
+import { createRenderer } from '@mui-internal/test-utils';
import ListItemAvatar, {
listItemAvatarClasses as classes,
} from '@mui/material-next/ListItemAvatar';
+import describeConformance from '../../test/describeConformance';
describe('', () => {
const { render } = createRenderer();
diff --git a/packages/mui-material-next/src/ListItemButton/ListItemButton.test.js b/packages/mui-material-next/src/ListItemButton/ListItemButton.test.js
index a64fbcb88ede3a..5d317f01f10270 100644
--- a/packages/mui-material-next/src/ListItemButton/ListItemButton.test.js
+++ b/packages/mui-material-next/src/ListItemButton/ListItemButton.test.js
@@ -1,12 +1,13 @@
import * as React from 'react';
import { expect } from 'chai';
-import { describeConformance, act, createRenderer, fireEvent } from '@mui-internal/test-utils';
+import { act, createRenderer, fireEvent } from '@mui-internal/test-utils';
import ListItemButton, {
listItemButtonClasses as classes,
} from '@mui/material-next/ListItemButton';
import ButtonBase from '@mui/material-next/ButtonBase';
import { ThemeProvider, createTheme } from '@mui/material/styles';
import ListContext from '../List/ListContext';
+import describeConformance from '../../test/describeConformance';
describe('', () => {
const { render } = createRenderer();
@@ -99,7 +100,9 @@ describe('', () => {
expect(!!link).to.equal(true);
});
- it('should rendered as specifying component', () => {
+ // TODO v7: support hostElementName prop
+ // eslint-disable-next-line mocha/no-skipped-tests
+ it.skip('should be rendered as the specifed component', () => {
const { getByRole } = render();
const heading = getByRole('heading');
@@ -135,7 +138,9 @@ describe('', () => {
expect(!!link).to.equal(true);
});
- it('should rendered as specifying component', () => {
+ // TODO v7: support hostElementName prop
+ // eslint-disable-next-line mocha/no-skipped-tests
+ it.skip('should be rendered as the specifed component', () => {
const { getByRole } = render();
const heading = getByRole('heading');
@@ -152,7 +157,7 @@ describe('', () => {
return ;
});
- it('should rendered as LinkComponent when href is provided', () => {
+ it('should render as LinkComponent when href is provided', () => {
const { container, getByTestId } = render(
,
);
@@ -163,7 +168,9 @@ describe('', () => {
expect(button).to.have.attribute('href', href);
});
- it('should ignore LinkComponent is component is provided', () => {
+ // TODO v7: support hostElementName prop
+ // eslint-disable-next-line mocha/no-skipped-tests
+ it.skip('should ignore LinkComponent if component is provided', () => {
const { container, queryByTestId } = render(
,
);
@@ -174,7 +181,7 @@ describe('', () => {
expect(button).to.have.attribute('href', href);
});
- it('should rendered as LinkComponent (from theme) when href is provided', () => {
+ it('should render as LinkComponent (from theme) when href is provided', () => {
const theme = createTheme({
components: {
MuiListItemButton: {
@@ -196,7 +203,7 @@ describe('', () => {
expect(button).to.have.attribute('href', href);
});
- it('should rendered as LinkComponent (from theme MuiButtonBase) when href is provided', () => {
+ it('should render as LinkComponent (from theme MuiButtonBase) when href is provided', () => {
const theme = createTheme({
components: {
MuiButtonBase: {
diff --git a/packages/mui-material-next/src/ListItemIcon/ListItemIcon.test.js b/packages/mui-material-next/src/ListItemIcon/ListItemIcon.test.js
index 3d92b79a00a8a3..41106f2aa645f4 100644
--- a/packages/mui-material-next/src/ListItemIcon/ListItemIcon.test.js
+++ b/packages/mui-material-next/src/ListItemIcon/ListItemIcon.test.js
@@ -1,6 +1,7 @@
import * as React from 'react';
-import { createRenderer, describeConformance } from '@mui-internal/test-utils';
+import { createRenderer } from '@mui-internal/test-utils';
import ListItemIcon, { listItemIconClasses as classes } from '@mui/material-next/ListItemIcon';
+import describeConformance from '../../test/describeConformance';
describe('', () => {
const { render } = createRenderer();
diff --git a/packages/mui-material-next/src/ListItemSecondaryAction/ListItemSecondaryAction.test.js b/packages/mui-material-next/src/ListItemSecondaryAction/ListItemSecondaryAction.test.js
index 16b8b869eca9db..e98e603f109e5f 100644
--- a/packages/mui-material-next/src/ListItemSecondaryAction/ListItemSecondaryAction.test.js
+++ b/packages/mui-material-next/src/ListItemSecondaryAction/ListItemSecondaryAction.test.js
@@ -1,10 +1,11 @@
import * as React from 'react';
import { expect } from 'chai';
-import { createRenderer, describeConformance } from '@mui-internal/test-utils';
+import { createRenderer } from '@mui-internal/test-utils';
import ListItem from '@mui/material-next/ListItem';
import ListItemSecondaryAction, {
listItemSecondaryActionClasses as classes,
} from '@mui/material-next/ListItemSecondaryAction';
+import describeConformance from '../../test/describeConformance';
describe('', () => {
const { render } = createRenderer();
diff --git a/packages/mui-material-next/src/ListItemText/ListItemText.test.js b/packages/mui-material-next/src/ListItemText/ListItemText.test.js
index 07885b31d31a3b..e102c87adae328 100644
--- a/packages/mui-material-next/src/ListItemText/ListItemText.test.js
+++ b/packages/mui-material-next/src/ListItemText/ListItemText.test.js
@@ -1,9 +1,10 @@
import * as React from 'react';
import { expect } from 'chai';
-import { createRenderer, describeConformance } from '@mui-internal/test-utils';
+import { createRenderer } from '@mui-internal/test-utils';
/* TODO: change @mui/material/Typography to @mui/material-next/Typography once Typograpghy is available in @mui/material-next */
import Typography, { typographyClasses } from '@mui/material/Typography';
import ListItemText, { listItemTextClasses as classes } from '@mui/material-next/ListItemText';
+import describeConformance from '../../test/describeConformance';
describe('', () => {
const { render } = createRenderer();
diff --git a/packages/mui-material-next/src/ListSubheader/ListSubheader.test.js b/packages/mui-material-next/src/ListSubheader/ListSubheader.test.js
index 4f14442348b091..6e3d4ebc774621 100644
--- a/packages/mui-material-next/src/ListSubheader/ListSubheader.test.js
+++ b/packages/mui-material-next/src/ListSubheader/ListSubheader.test.js
@@ -1,7 +1,8 @@
import * as React from 'react';
import { expect } from 'chai';
-import { describeConformance, createRenderer } from '@mui-internal/test-utils';
+import { createRenderer } from '@mui-internal/test-utils';
import ListSubheader, { listSubheaderClasses as classes } from '@mui/material-next/ListSubheader';
+import describeConformance from '../../test/describeConformance';
describe('', () => {
const { render } = createRenderer();
diff --git a/packages/mui-material-next/src/Menu/Menu.test.tsx b/packages/mui-material-next/src/Menu/Menu.test.tsx
index 5aa5a057c42c28..4ea9d4ec28e1af 100644
--- a/packages/mui-material-next/src/Menu/Menu.test.tsx
+++ b/packages/mui-material-next/src/Menu/Menu.test.tsx
@@ -5,7 +5,6 @@ import {
act,
createRenderer,
createMount,
- describeConformance,
screen,
fireEvent,
strictModeDoubleLoggingSuppressed,
@@ -17,6 +16,7 @@ import Menu, { menuClasses as classes, MenuProps } from '@mui/material-next/Menu
import Popover from '@mui/material/Popover';
import { extendTheme, CssVarsProvider } from '@mui/material-next/styles';
import { MenuPaper } from './Menu';
+import describeConformance from '../../test/describeConformance';
describe('', () => {
const { render } = createRenderer({ clock: 'fake' });
diff --git a/packages/mui-material-next/src/Menu/Menu.tsx b/packages/mui-material-next/src/Menu/Menu.tsx
index b133c2cdb670ea..6719041fa5668e 100644
--- a/packages/mui-material-next/src/Menu/Menu.tsx
+++ b/packages/mui-material-next/src/Menu/Menu.tsx
@@ -428,7 +428,7 @@ Menu.propTypes /* remove-proptypes */ = {
]),
/**
* Props applied to the transition element.
- * By default, the element is based on this [`Transition`](http://reactcommunity.org/react-transition-group/transition/) component.
+ * By default, the element is based on this [`Transition`](https://reactcommunity.org/react-transition-group/transition/) component.
* @default {}
*/
TransitionProps: PropTypes.object,
diff --git a/packages/mui-material-next/src/Menu/Menu.types.ts b/packages/mui-material-next/src/Menu/Menu.types.ts
index 4049d6d60f23f1..49ddbfabbe9a27 100644
--- a/packages/mui-material-next/src/Menu/Menu.types.ts
+++ b/packages/mui-material-next/src/Menu/Menu.types.ts
@@ -101,7 +101,7 @@ export interface MenuTypeMap ({
disabled: false,
diff --git a/packages/mui-material-next/src/Option/Option.test.tsx b/packages/mui-material-next/src/Option/Option.test.tsx
index 07edefb60d59eb..30db120b976d9d 100644
--- a/packages/mui-material-next/src/Option/Option.test.tsx
+++ b/packages/mui-material-next/src/Option/Option.test.tsx
@@ -1,17 +1,12 @@
import * as React from 'react';
import { expect } from 'chai';
import { spy } from 'sinon';
-import {
- act,
- describeConformance,
- createRenderer,
- fireEvent,
- screen,
-} from '@mui-internal/test-utils';
+import { act, createRenderer, fireEvent, screen } from '@mui-internal/test-utils';
import { MenuProvider } from '@mui/base/useMenu';
import Option, { optionClasses as classes } from '@mui/material-next/Option';
import Menu from '@mui/material-next/Menu';
import ButtonBase from '@mui/material-next/ButtonBase';
+import describeConformance from '../../test/describeConformance';
const dummyGetItemState = () => ({
disabled: false,
diff --git a/packages/mui-material-next/src/OutlinedInput/NotchedOutline.js b/packages/mui-material-next/src/OutlinedInput/NotchedOutline.js
index 0e613bd7b9a2b8..58223da4479c8e 100644
--- a/packages/mui-material-next/src/OutlinedInput/NotchedOutline.js
+++ b/packages/mui-material-next/src/OutlinedInput/NotchedOutline.js
@@ -97,7 +97,6 @@ NotchedOutline.propTypes = {
children: PropTypes.node,
/**
* Override or extend the styles applied to the component.
- * See [CSS API](#css) below for more details.
*/
classes: PropTypes.object,
/**
diff --git a/packages/mui-material-next/src/OutlinedInput/OutlinedInput.test.js b/packages/mui-material-next/src/OutlinedInput/OutlinedInput.test.js
index 870d01a78609d7..b45720d6055341 100644
--- a/packages/mui-material-next/src/OutlinedInput/OutlinedInput.test.js
+++ b/packages/mui-material-next/src/OutlinedInput/OutlinedInput.test.js
@@ -1,9 +1,10 @@
import * as React from 'react';
import { expect } from 'chai';
-import { createRenderer, describeConformance } from '@mui-internal/test-utils';
+import { createRenderer } from '@mui-internal/test-utils';
import { ThemeProvider, createTheme } from '@mui/material/styles';
import OutlinedInput, { outlinedInputClasses as classes } from '@mui/material/OutlinedInput';
import InputBase from '@mui/material/InputBase';
+import describeConformance from '../../test/describeConformance';
describe('', () => {
const { render } = createRenderer();
diff --git a/packages/mui-material-next/src/Select/Select.d.ts b/packages/mui-material-next/src/Select/Select.d.ts
index 914afdb2376c95..d562bab14eaeba 100644
--- a/packages/mui-material-next/src/Select/Select.d.ts
+++ b/packages/mui-material-next/src/Select/Select.d.ts
@@ -1,6 +1,6 @@
import * as React from 'react';
import { SxProps } from '@mui/system';
-// TODO v6: replace material Theme with material-next Theme when Material You design is implemented
+// TODO v6: replace material Theme with material-next Theme when Material Design 3 is implemented
import { InternalStandardProps as StandardProps, Theme } from '@mui/material';
// TODO v6: replace with material-next Input components props https://github.com/mui/material-ui/pull/39188#discussion_r1339645381
import { InputProps } from '@mui/material/Input';
diff --git a/packages/mui-material-next/src/Select/Select.js b/packages/mui-material-next/src/Select/Select.js
index d9d44724534f5a..4c637ca8942744 100644
--- a/packages/mui-material-next/src/Select/Select.js
+++ b/packages/mui-material-next/src/Select/Select.js
@@ -4,7 +4,7 @@ import PropTypes from 'prop-types';
import clsx from 'clsx';
import { deepmerge, unstable_useForkRef as useForkRef } from '@mui/utils';
import NativeSelectInput from '@mui/material/NativeSelect/NativeSelectInput';
-// TODO v6: Remove Input component after implementing Material You design
+// TODO v6: Remove Input component after implementing Material Design 3
import Input from '@mui/material/Input';
// TODO v6: replace with material-next FilledInput when available https://github.com/mui/material-ui/issues/39052
import FilledInput from '@mui/material/FilledInput';
diff --git a/packages/mui-material-next/src/Select/Select.spec.tsx b/packages/mui-material-next/src/Select/Select.spec.tsx
index 0d9dc50b093893..80bc65da3c3936 100644
--- a/packages/mui-material-next/src/Select/Select.spec.tsx
+++ b/packages/mui-material-next/src/Select/Select.spec.tsx
@@ -1,7 +1,7 @@
import * as React from 'react';
// TODO v6: replace with material-next Menu when available https://github.com/mui/material-ui/pull/38934
import MenuItem from '@mui/material/MenuItem';
-// TODO v6: replace with material-next's extendTheme when implementing Material You design
+// TODO v6: replace with material-next's extendTheme when implementing Material Design 3
import { createTheme } from '@mui/material/styles';
import Select, { SelectChangeEvent } from '@mui/material-next/Select';
diff --git a/packages/mui-material-next/src/Select/Select.test.js b/packages/mui-material-next/src/Select/Select.test.js
index 3a2fb9f1a52c5c..437ca7a1f23816 100644
--- a/packages/mui-material-next/src/Select/Select.test.js
+++ b/packages/mui-material-next/src/Select/Select.test.js
@@ -1,16 +1,9 @@
import * as React from 'react';
import { expect } from 'chai';
import { spy, stub } from 'sinon';
-import {
- describeConformance,
- ErrorBoundary,
- act,
- createRenderer,
- fireEvent,
- screen,
-} from '@mui-internal/test-utils';
+import { ErrorBoundary, act, createRenderer, fireEvent, screen } from '@mui-internal/test-utils';
import { nativeSelectClasses } from '@mui/material/NativeSelect';
-// TODO v6: replace with material-next's extendTheme and provider when implementing Material You design
+// TODO v6: replace with material-next's extendTheme and provider when implementing Material Design 3
import { createTheme, ThemeProvider } from '@mui/material/styles';
// TODO v6: replace with material-next Menu components when available https://github.com/mui/material-ui/pull/38934
import MenuItem, { menuItemClasses } from '@mui/material/MenuItem';
@@ -24,6 +17,7 @@ import InputLabel from '@mui/material/InputLabel';
import Divider from '@mui/material/Divider';
import Select from '@mui/material-next/Select';
import classes from './selectClasses';
+import describeConformance from '../../test/describeConformance';
describe('', () => {
const { clock, render } = createRenderer({ clock: 'fake' });
diff --git a/packages/mui-material-next/src/Select/SelectInput.js b/packages/mui-material-next/src/Select/SelectInput.js
index bcf26aed547155..7c7bbfd9d5c3a6 100644
--- a/packages/mui-material-next/src/Select/SelectInput.js
+++ b/packages/mui-material-next/src/Select/SelectInput.js
@@ -604,7 +604,6 @@ SelectInput.propTypes = {
children: PropTypes.node,
/**
* Override or extend the styles applied to the component.
- * See [CSS API](#css) below for more details.
*/
classes: PropTypes.object,
/**
diff --git a/packages/mui-material-next/src/Slider/Slider.test.js b/packages/mui-material-next/src/Slider/Slider.test.js
index da7dc8d96917b4..3ba62a672b0f13 100644
--- a/packages/mui-material-next/src/Slider/Slider.test.js
+++ b/packages/mui-material-next/src/Slider/Slider.test.js
@@ -2,16 +2,11 @@ import * as React from 'react';
import PropTypes from 'prop-types';
import { spy, stub } from 'sinon';
import { expect } from 'chai';
-import {
- describeConformance,
- act,
- createRenderer,
- fireEvent,
- screen,
-} from '@mui-internal/test-utils';
+import { act, createRenderer, fireEvent, screen } from '@mui-internal/test-utils';
import { Slider as BaseSlider } from '@mui/base/Slider';
import { CssVarsProvider, extendTheme } from '@mui/material-next/styles';
import Slider, { sliderClasses as classes } from '@mui/material-next/Slider';
+import describeConformance from '../../test/describeConformance';
function createTouches(touches) {
return {
diff --git a/packages/mui-material-next/src/Slider/Slider.tsx b/packages/mui-material-next/src/Slider/Slider.tsx
index 80096eda911e23..89b82db9939897 100644
--- a/packages/mui-material-next/src/Slider/Slider.tsx
+++ b/packages/mui-material-next/src/Slider/Slider.tsx
@@ -369,39 +369,41 @@ export const SliderMarkLabel = styled('span', {
slot: 'MarkLabel',
shouldForwardProp: (prop) => shouldForwardProp(prop) && prop !== 'markLabelActive',
overridesResolver: (props, styles) => styles.markLabel,
-})<{ ownerState: SliderOwnerState; markLabelActive: boolean }>(
- ({ theme, ownerState, markLabelActive }) => {
- const { vars: tokens } = theme;
-
- return {
- fontFamily: tokens.sys.typescale.label.medium.family,
- lineHeight: `calc(${tokens.sys.typescale.label.medium.lineHeight} / ${tokens.sys.typescale.label.medium.size})`,
- fontWeight: tokens.sys.typescale.label.medium.weight,
- fontSize: theme.typography.pxToRem(theme.sys.typescale.label.medium.size),
- letterSpacing: tokens.sys.typescale.label.medium.tracking,
- color: tokens.sys.color.onSurfaceVariant,
- position: 'absolute',
- whiteSpace: 'nowrap',
- ...(ownerState.orientation === 'horizontal' && {
- top: 36,
- transform: 'translateX(-50%)',
- '@media (pointer: coarse)': {
- top: 44,
- },
- }),
- ...(ownerState.orientation === 'vertical' && {
- left: 36,
- transform: 'translateY(50%)',
- '@media (pointer: coarse)': {
- left: 44,
- },
- }),
- ...(markLabelActive && {
- color: tokens.sys.color.onSurface,
- }),
- };
- },
-);
+})<{ ownerState: SliderOwnerState; markLabelActive: boolean }>(({
+ theme,
+ ownerState,
+ markLabelActive,
+}) => {
+ const { vars: tokens } = theme;
+
+ return {
+ fontFamily: tokens.sys.typescale.label.medium.family,
+ lineHeight: `calc(${tokens.sys.typescale.label.medium.lineHeight} / ${tokens.sys.typescale.label.medium.size})`,
+ fontWeight: tokens.sys.typescale.label.medium.weight,
+ fontSize: theme.typography.pxToRem(theme.sys.typescale.label.medium.size),
+ letterSpacing: tokens.sys.typescale.label.medium.tracking,
+ color: tokens.sys.color.onSurfaceVariant,
+ position: 'absolute',
+ whiteSpace: 'nowrap',
+ ...(ownerState.orientation === 'horizontal' && {
+ top: 36,
+ transform: 'translateX(-50%)',
+ '@media (pointer: coarse)': {
+ top: 44,
+ },
+ }),
+ ...(ownerState.orientation === 'vertical' && {
+ left: 36,
+ transform: 'translateY(50%)',
+ '@media (pointer: coarse)': {
+ left: 44,
+ },
+ }),
+ ...(markLabelActive && {
+ color: tokens.sys.color.onSurface,
+ }),
+ };
+});
const useUtilityClasses = (ownerState: SliderOwnerState) => {
const { disabled, dragging, marked, orientation, track, classes, color, size } = ownerState;
diff --git a/packages/mui-material-next/src/Snackbar/Snackbar.d.ts b/packages/mui-material-next/src/Snackbar/Snackbar.d.ts
index 15180260abd96e..b274c35d804f0d 100644
--- a/packages/mui-material-next/src/Snackbar/Snackbar.d.ts
+++ b/packages/mui-material-next/src/Snackbar/Snackbar.d.ts
@@ -111,7 +111,7 @@ export interface SnackbarProps extends StandardProps', () => {
const { clock, render: clientRender } = createRenderer({ clock: 'fake' });
diff --git a/packages/mui-material-next/src/SnackbarContent/SnackbarContent.test.js b/packages/mui-material-next/src/SnackbarContent/SnackbarContent.test.js
index a342e72fa08676..5a43c787ffa00e 100644
--- a/packages/mui-material-next/src/SnackbarContent/SnackbarContent.test.js
+++ b/packages/mui-material-next/src/SnackbarContent/SnackbarContent.test.js
@@ -1,10 +1,11 @@
import * as React from 'react';
import { expect } from 'chai';
-import { createRenderer, describeConformance } from '@mui-internal/test-utils';
+import { createRenderer } from '@mui-internal/test-utils';
import Paper from '@mui/material/Paper';
import SnackbarContent, {
snackbarContentClasses as classes,
} from '@mui/material-next/SnackbarContent';
+import describeConformance from '../../test/describeConformance';
describe('', () => {
const { render } = createRenderer();
diff --git a/packages/mui-material-next/src/Switch/Switch.test.tsx b/packages/mui-material-next/src/Switch/Switch.test.tsx
index 7f6ede891ef45e..85cfa8c9cf8e9e 100644
--- a/packages/mui-material-next/src/Switch/Switch.test.tsx
+++ b/packages/mui-material-next/src/Switch/Switch.test.tsx
@@ -1,8 +1,9 @@
import * as React from 'react';
import { expect } from 'chai';
-import { describeConformance, act, createRenderer, fireEvent } from '@mui-internal/test-utils';
+import { act, createRenderer, fireEvent } from '@mui-internal/test-utils';
import Switch, { switchClasses as classes } from '@mui/material-next/Switch';
import FormControl from '@mui/material/FormControl';
+import describeConformance from '../../test/describeConformance';
describe('', () => {
const { render } = createRenderer();
diff --git a/packages/mui-material-next/src/Tab/Tab.test.js b/packages/mui-material-next/src/Tab/Tab.test.js
index ac5fdb6e89c8e9..24f1ac4aba1620 100644
--- a/packages/mui-material-next/src/Tab/Tab.test.js
+++ b/packages/mui-material-next/src/Tab/Tab.test.js
@@ -3,7 +3,8 @@ import Tab, { tabClasses as classes } from '@mui/material/Tab';
import { expect } from 'chai';
import * as React from 'react';
import { spy } from 'sinon';
-import { act, createRenderer, describeConformance, fireEvent } from '@mui-internal/test-utils';
+import { act, createRenderer, fireEvent } from '@mui-internal/test-utils';
+import describeConformance from '../../test/describeConformance';
describe('', () => {
const { render } = createRenderer();
diff --git a/packages/mui-material-next/src/TabScrollButton/TabScrollButton.test.js b/packages/mui-material-next/src/TabScrollButton/TabScrollButton.test.js
index ee5440fc203fd8..20032aa756f97f 100644
--- a/packages/mui-material-next/src/TabScrollButton/TabScrollButton.test.js
+++ b/packages/mui-material-next/src/TabScrollButton/TabScrollButton.test.js
@@ -1,9 +1,10 @@
import * as React from 'react';
import { expect } from 'chai';
-import { createRenderer, describeConformance } from '@mui-internal/test-utils';
+import { createRenderer } from '@mui-internal/test-utils';
import TabScrollButton, {
tabScrollButtonClasses as classes,
} from '@mui/material-next/TabScrollButton';
+import describeConformance from '../../test/describeConformance';
describe('', () => {
const defaultProps = {
diff --git a/packages/mui-material-next/src/TablePagination/TablePagination.test.js b/packages/mui-material-next/src/TablePagination/TablePagination.test.js
index 265b13954f51a6..d5faa7568d7bb4 100644
--- a/packages/mui-material-next/src/TablePagination/TablePagination.test.js
+++ b/packages/mui-material-next/src/TablePagination/TablePagination.test.js
@@ -2,13 +2,14 @@ import * as React from 'react';
import { expect } from 'chai';
import { spy } from 'sinon';
import PropTypes from 'prop-types';
-import { describeConformance, fireEvent, createRenderer } from '@mui-internal/test-utils';
+import { fireEvent, createRenderer } from '@mui-internal/test-utils';
import TableFooter from '@mui/material/TableFooter';
import TableCell from '@mui/material/TableCell';
import TableRow from '@mui/material/TableRow';
import TablePagination, {
tablePaginationClasses as classes,
} from '@mui/material-next/TablePagination';
+import describeConformance from '../../test/describeConformance';
describe('', () => {
const noop = () => {};
diff --git a/packages/mui-material-next/src/Tabs/Tabs.test.js b/packages/mui-material-next/src/Tabs/Tabs.test.js
index 085af0c5d1e9af..bb2a317cd9da8d 100644
--- a/packages/mui-material-next/src/Tabs/Tabs.test.js
+++ b/packages/mui-material-next/src/Tabs/Tabs.test.js
@@ -2,7 +2,6 @@ import * as React from 'react';
import { expect } from 'chai';
import { spy } from 'sinon';
import {
- describeConformance,
act,
createRenderer,
fireEvent,
@@ -13,6 +12,7 @@ import { createTheme, ThemeProvider } from '@mui/material/styles';
import { unstable_capitalize as capitalize } from '@mui/utils';
import Tab from '@mui/material-next/Tab';
import Tabs, { tabsClasses as classes } from '@mui/material-next/Tabs';
+import describeConformance from '../../test/describeConformance';
function findScrollButton(container, direction) {
return container.querySelector(`svg[data-testid="KeyboardArrow${capitalize(direction)}Icon"]`);
diff --git a/packages/mui-material-next/src/Tabs/TabsListContext.js b/packages/mui-material-next/src/Tabs/TabsListContext.js
index 7628450081b116..43208b9b7f0da4 100644
--- a/packages/mui-material-next/src/Tabs/TabsListContext.js
+++ b/packages/mui-material-next/src/Tabs/TabsListContext.js
@@ -3,4 +3,8 @@ import * as React from 'react';
const TabsListContext = React.createContext(null);
+if (process.env.NODE_ENV !== 'production') {
+ TabsListContext.displayName = 'TabsListContext';
+}
+
export default TabsListContext;
diff --git a/packages/mui-material-next/src/styles/extendTheme.test.ts b/packages/mui-material-next/src/styles/extendTheme.test.ts
index 421df8ba06d6f4..b72a952fe7fc2b 100644
--- a/packages/mui-material-next/src/styles/extendTheme.test.ts
+++ b/packages/mui-material-next/src/styles/extendTheme.test.ts
@@ -15,14 +15,14 @@ describe('extendTheme', () => {
it('should have the vars object', () => {
const theme = extendTheme();
const keys = [
- // MD2 specific tokens
+ // M2 specific tokens
'palette',
'shadows',
'zIndex',
'opacity',
'overlays',
'shape',
- // MD3 specific tokens
+ // M3 specific tokens
'ref',
'sys',
];
diff --git a/packages/mui-material-next/src/styles/extendTheme.ts b/packages/mui-material-next/src/styles/extendTheme.ts
index 790ce6a791c4a4..5729bf7c83a17d 100644
--- a/packages/mui-material-next/src/styles/extendTheme.ts
+++ b/packages/mui-material-next/src/styles/extendTheme.ts
@@ -84,7 +84,7 @@ export default function extendTheme(options: CssVarsThemeOptions = {}, ...args:
...muiTheme
} = createThemeWithoutVars({
...input,
- // Material You specific tokens
+ // Material Design 3 specific tokens
// @ts-ignore - it's fine, everything that is not supported will be spread
useMaterialYou: true,
ref: {
@@ -416,7 +416,7 @@ export default function extendTheme(options: CssVarsThemeOptions = {}, ...args:
}
});
- // Material You specific channels
+ // Material Design 3 specific channels
if (key === 'light') {
colorSchemeSys.color.primaryChannel = colorChannel(colorSchemeRef.palette.primary['40']);
colorSchemeSys.color.onPrimaryChannel = colorChannel(colorSchemeRef.palette.primary['100']);
diff --git a/packages/mui-material-next/test/describeConformance.ts b/packages/mui-material-next/test/describeConformance.ts
new file mode 100644
index 00000000000000..633cf72e03ebbe
--- /dev/null
+++ b/packages/mui-material-next/test/describeConformance.ts
@@ -0,0 +1,20 @@
+import {
+ describeConformance as baseDescribeConformance,
+ ConformanceOptions,
+} from '@mui-internal/test-utils';
+import { ThemeProvider, createTheme } from '@mui/material/styles';
+
+export default function describeConformance(
+ minimalElement: React.ReactElement,
+ getOptions: () => ConformanceOptions,
+) {
+ function getOptionsWithDefaults() {
+ return {
+ ThemeProvider,
+ createTheme,
+ ...getOptions(),
+ };
+ }
+
+ return baseDescribeConformance(minimalElement, getOptionsWithDefaults);
+}
diff --git a/packages/mui-material-nextjs/package.json b/packages/mui-material-nextjs/package.json
index 4210cdc12b12b6..19709d4470c0b3 100644
--- a/packages/mui-material-nextjs/package.json
+++ b/packages/mui-material-nextjs/package.json
@@ -1,6 +1,6 @@
{
"name": "@mui/material-nextjs",
- "version": "5.15.6",
+ "version": "5.15.9",
"private": false,
"author": "MUI Team",
"description": "Collection of utilities for integration between Material UI and Next.js.",
@@ -36,12 +36,15 @@
"test": "cd ../../ && cross-env NODE_ENV=test mocha 'packages/mui-material-nextjs/**/*.test.{js,ts,tsx}'",
"typescript": "tsc -p tsconfig.json"
},
+ "dependencies": {
+ "@babel/runtime": "^7.23.9"
+ },
"devDependencies": {
"@emotion/cache": "^11.11.0",
"@emotion/react": "^11.11.3",
"@emotion/server": "^11.11.0",
- "@types/react": "^18.2.48",
- "next": "13.4.19",
+ "@types/react": "^18.2.55",
+ "next": "13.5.1",
"react": "^18.2.0"
},
"peerDependencies": {
diff --git a/packages/mui-material/package.json b/packages/mui-material/package.json
index a79ce316a03768..49aa2273adbb84 100644
--- a/packages/mui-material/package.json
+++ b/packages/mui-material/package.json
@@ -1,6 +1,6 @@
{
"name": "@mui/material",
- "version": "5.15.6",
+ "version": "5.15.10",
"private": false,
"author": "MUI Team",
"description": "Material UI is an open-source React component library that implements Google's Material Design. It's comprehensive and can be used in production out of the box.",
@@ -50,7 +50,7 @@
"@mui/utils": "workspace:^",
"@types/react-transition-group": "^4.4.10",
"clsx": "^2.1.0",
- "csstype": "^3.1.2",
+ "csstype": "^3.1.3",
"prop-types": "^15.8.1",
"react-is": "^18.2.0",
"react-transition-group": "^4.4.5"
@@ -65,8 +65,8 @@
"@testing-library/user-event": "^14.5.2",
"@types/chai": "^4.3.11",
"@types/prop-types": "^15.7.11",
- "@types/react": "^18.2.48",
- "@types/react-dom": "^18.2.18",
+ "@types/react": "^18.2.55",
+ "@types/react-dom": "^18.2.19",
"@types/sinon": "^10.0.20",
"chai": "^4.4.1",
"css-mediaquery": "^0.1.2",
@@ -74,7 +74,7 @@
"fast-glob": "^3.3.2",
"fs-extra": "^11.2.0",
"lodash": "^4.17.21",
- "playwright": "^1.41.1",
+ "playwright": "^1.41.2",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-router-dom": "^6.21.3",
diff --git a/packages/mui-material/src/Accordion/Accordion.d.ts b/packages/mui-material/src/Accordion/Accordion.d.ts
index 2b6a15fbc26a37..090cc1518f5b64 100644
--- a/packages/mui-material/src/Accordion/Accordion.d.ts
+++ b/packages/mui-material/src/Accordion/Accordion.d.ts
@@ -79,15 +79,15 @@ export type AccordionTypeMap<
/**
* The component used for the transition.
* [Follow this guide](/material-ui/transitions/#transitioncomponent-prop) to learn more about the requirements for this component.
- * @deprecated Use `slots.transition` instead. This prop will be removed in v7.
+ * @deprecated Use `slots.transition` instead. This prop will be removed in v7. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/).
*/
TransitionComponent?: React.JSXElementConstructor<
TransitionProps & { children?: React.ReactElement }
>;
/**
* Props applied to the transition element.
- * By default, the element is based on this [`Transition`](http://reactcommunity.org/react-transition-group/transition/) component.
- * @deprecated Use `slotProps.transition` instead. This prop will be removed in v7.
+ * By default, the element is based on this [`Transition`](https://reactcommunity.org/react-transition-group/transition/) component.
+ * @deprecated Use `slotProps.transition` instead. This prop will be removed in v7. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/).
*/
TransitionProps?: TransitionProps;
} & AccordionSlotsAndSlotProps;
diff --git a/packages/mui-material/src/Accordion/Accordion.js b/packages/mui-material/src/Accordion/Accordion.js
index e890d2f7ad7768..d7274d92b2d1a9 100644
--- a/packages/mui-material/src/Accordion/Accordion.js
+++ b/packages/mui-material/src/Accordion/Accordion.js
@@ -3,8 +3,8 @@ import * as React from 'react';
import { isFragment } from 'react-is';
import PropTypes from 'prop-types';
import clsx from 'clsx';
-import { chainPropTypes } from '@mui/utils';
-import { unstable_composeClasses as composeClasses } from '@mui/base/composeClasses';
+import chainPropTypes from '@mui/utils/chainPropTypes';
+import composeClasses from '@mui/utils/composeClasses';
import styled from '../styles/styled';
import useThemeProps from '../styles/useThemeProps';
import Collapse from '../Collapse';
@@ -180,8 +180,6 @@ const Accordion = React.forwardRef(function Accordion(inProps, ref) {
ownerState,
});
- delete transitionProps.ownerState;
-
return (
', () => {
const { render } = createRenderer();
diff --git a/packages/mui-material/src/AccordionDetails/AccordionDetails.js b/packages/mui-material/src/AccordionDetails/AccordionDetails.js
index b9c7eefc67e1ef..d39ee3bd0b5f72 100644
--- a/packages/mui-material/src/AccordionDetails/AccordionDetails.js
+++ b/packages/mui-material/src/AccordionDetails/AccordionDetails.js
@@ -2,7 +2,7 @@
import * as React from 'react';
import PropTypes from 'prop-types';
import clsx from 'clsx';
-import { unstable_composeClasses as composeClasses } from '@mui/base/composeClasses';
+import composeClasses from '@mui/utils/composeClasses';
import styled from '../styles/styled';
import useThemeProps from '../styles/useThemeProps';
import { getAccordionDetailsUtilityClass } from './accordionDetailsClasses';
diff --git a/packages/mui-material/src/AccordionDetails/AccordionDetails.test.js b/packages/mui-material/src/AccordionDetails/AccordionDetails.test.js
index ced854a3fbbbcb..209d1a0a84e93c 100644
--- a/packages/mui-material/src/AccordionDetails/AccordionDetails.test.js
+++ b/packages/mui-material/src/AccordionDetails/AccordionDetails.test.js
@@ -1,9 +1,10 @@
import * as React from 'react';
import { expect } from 'chai';
-import { createRenderer, describeConformance } from '@mui-internal/test-utils';
+import { createRenderer } from '@mui-internal/test-utils';
import AccordionDetails, {
accordionDetailsClasses as classes,
} from '@mui/material/AccordionDetails';
+import describeConformance from '../../test/describeConformance';
describe('', () => {
const { render } = createRenderer();
diff --git a/packages/mui-material/src/AccordionSummary/AccordionSummary.js b/packages/mui-material/src/AccordionSummary/AccordionSummary.js
index b40956653b9d0d..922f9615d5d6e4 100644
--- a/packages/mui-material/src/AccordionSummary/AccordionSummary.js
+++ b/packages/mui-material/src/AccordionSummary/AccordionSummary.js
@@ -2,7 +2,7 @@
import * as React from 'react';
import PropTypes from 'prop-types';
import clsx from 'clsx';
-import { unstable_composeClasses as composeClasses } from '@mui/base/composeClasses';
+import composeClasses from '@mui/utils/composeClasses';
import styled from '../styles/styled';
import useThemeProps from '../styles/useThemeProps';
import ButtonBase from '../ButtonBase';
diff --git a/packages/mui-material/src/AccordionSummary/AccordionSummary.test.js b/packages/mui-material/src/AccordionSummary/AccordionSummary.test.js
index 8db043bb46dada..8cab6b766b5aa1 100644
--- a/packages/mui-material/src/AccordionSummary/AccordionSummary.test.js
+++ b/packages/mui-material/src/AccordionSummary/AccordionSummary.test.js
@@ -1,12 +1,13 @@
import * as React from 'react';
import { expect } from 'chai';
import { spy } from 'sinon';
-import { describeConformance, act, createRenderer, fireEvent } from '@mui-internal/test-utils';
+import { act, createRenderer, fireEvent } from '@mui-internal/test-utils';
import AccordionSummary, {
accordionSummaryClasses as classes,
} from '@mui/material/AccordionSummary';
import Accordion from '@mui/material/Accordion';
import ButtonBase from '@mui/material/ButtonBase';
+import describeConformance from '../../test/describeConformance';
describe('', () => {
const { render } = createRenderer();
diff --git a/packages/mui-material/src/AccordionSummary/accordionSummaryClasses.ts b/packages/mui-material/src/AccordionSummary/accordionSummaryClasses.ts
index 7f2c4669cb9668..82a010cb6c03de 100644
--- a/packages/mui-material/src/AccordionSummary/accordionSummaryClasses.ts
+++ b/packages/mui-material/src/AccordionSummary/accordionSummaryClasses.ts
@@ -14,7 +14,7 @@ export interface AccordionSummaryClasses {
gutters: string;
/**
* Styles applied to the children wrapper element unless `disableGutters={true}`.
- * @deprecated Combine the [.MuiAccordionSummary-gutters](/material-ui/api/accordion-summary/#AccordionSummary-classes-gutters) and [.MuiAccordionSummary-content](/material-ui/api/accordion-summary/#AccordionSummary-classes-content) classes instead.
+ * @deprecated Combine the [.MuiAccordionSummary-gutters](/material-ui/api/accordion-summary/#AccordionSummary-classes-gutters) and [.MuiAccordionSummary-content](/material-ui/api/accordion-summary/#AccordionSummary-classes-content) classes instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/).
*/
contentGutters: string;
/** Styles applied to the children wrapper element. */
diff --git a/packages/mui-material/src/Alert/Alert.d.ts b/packages/mui-material/src/Alert/Alert.d.ts
index 7fa875d665e7aa..70875f28848eea 100644
--- a/packages/mui-material/src/Alert/Alert.d.ts
+++ b/packages/mui-material/src/Alert/Alert.d.ts
@@ -4,6 +4,7 @@ import { SxProps } from '@mui/system';
import { IconButtonProps, InternalStandardProps as StandardProps, SvgIconProps, Theme } from '..';
import { PaperProps } from '../Paper';
import { AlertClasses } from './alertClasses';
+import { CreateSlotsAndSlotProps, SlotProps } from '../utils/types';
export type AlertColor = 'success' | 'info' | 'warning' | 'error';
@@ -11,6 +12,27 @@ export interface AlertPropsVariantOverrides {}
export interface AlertPropsColorOverrides {}
+export interface AlertSlots {
+ /**
+ * The component that renders the close button.
+ * @default IconButton
+ */
+ closeButton?: React.ElementType;
+ /**
+ * The component that renders the close icon.
+ * @default svg
+ */
+ closeIcon?: React.ElementType;
+}
+
+export type AlertSlotsAndSlotProps = CreateSlotsAndSlotProps<
+ AlertSlots,
+ {
+ closeButton: SlotProps, {}, AlertOwnerState>;
+ closeIcon: SlotProps, {}, AlertOwnerState>;
+ }
+>;
+
export interface AlertProps extends StandardProps {
/**
* The action to display. It renders after the message, at the end of the alert.
@@ -36,8 +58,7 @@ export interface AlertProps extends StandardProps {
/**
* 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 {}
*/
@@ -49,8 +70,7 @@ export interface AlertProps extends StandardProps {
* 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 {}
*/
@@ -94,35 +114,14 @@ export interface AlertProps extends StandardProps