= {
anchorEl: PopperUnstyledProps['anchorEl'];
- children?: React.ReactNode;
+ children?: PopperUnstyledProps['children'];
className: string | undefined;
disablePortal: PopperUnstyledProps['disablePortal'];
open: boolean;
diff --git a/packages/mui-base/src/TabsUnstyled/TabsUnstyled.types.ts b/packages/mui-base/src/TabsUnstyled/TabsUnstyled.types.ts
index d612133cc94dff..a56a801ec5dcb9 100644
--- a/packages/mui-base/src/TabsUnstyled/TabsUnstyled.types.ts
+++ b/packages/mui-base/src/TabsUnstyled/TabsUnstyled.types.ts
@@ -50,7 +50,7 @@ export interface TabsUnstyledOwnProps {
/**
* Callback invoked when new value is being set.
*/
- onChange?: (event: React.SyntheticEvent, value: number | string) => void;
+ onChange?: (event: React.SyntheticEvent, value: number | string | boolean) => void;
/**
* If `true` the selected tab changes on focus. Otherwise it only
* changes on activation.
diff --git a/packages/mui-base/src/TabsUnstyled/useTabs.ts b/packages/mui-base/src/TabsUnstyled/useTabs.ts
index b7ea9dc957813f..ca27bb92cf0961 100644
--- a/packages/mui-base/src/TabsUnstyled/useTabs.ts
+++ b/packages/mui-base/src/TabsUnstyled/useTabs.ts
@@ -24,7 +24,7 @@ export interface UseTabsParameters {
/**
* Callback invoked when new value is being set.
*/
- onChange?: (event: React.SyntheticEvent, value: number | string) => void;
+ onChange?: (event: React.SyntheticEvent, value: number | string | boolean) => void;
/**
* If `true` the selected tab changes on focus. Otherwise it only
* changes on activation.
@@ -52,7 +52,7 @@ const useTabs = (parameters: UseTabsParameters) => {
const idPrefix = useId();
const onSelected = React.useCallback(
- (e, newValue) => {
+ (e: React.SyntheticEvent, newValue: string | number | false) => {
setValue(newValue);
if (onChange) {
onChange(e, newValue);
diff --git a/packages/mui-base/src/TextareaAutosize/TextareaAutosize.js b/packages/mui-base/src/TextareaAutosize/TextareaAutosize.js
index f3e4cdbc222e1e..360d6433ab91dd 100644
--- a/packages/mui-base/src/TextareaAutosize/TextareaAutosize.js
+++ b/packages/mui-base/src/TextareaAutosize/TextareaAutosize.js
@@ -1,5 +1,6 @@
import * as React from 'react';
import PropTypes from 'prop-types';
+import { flushSync } from 'react-dom';
import {
unstable_debounce as debounce,
unstable_useForkRef as useForkRef,
@@ -27,6 +28,10 @@ const styles = {
},
};
+function isEmpty(obj) {
+ return obj === undefined || obj === null || Object.keys(obj).length === 0;
+}
+
const TextareaAutosize = React.forwardRef(function TextareaAutosize(props, ref) {
const { onChange, maxRows, minRows = 1, style, value, ...other } = props;
@@ -37,14 +42,14 @@ const TextareaAutosize = React.forwardRef(function TextareaAutosize(props, ref)
const renders = React.useRef(0);
const [state, setState] = React.useState({});
- const syncHeight = React.useCallback(() => {
+ const getUpdatedState = React.useCallback(() => {
const input = inputRef.current;
const containerWindow = ownerWindow(input);
const computedStyle = containerWindow.getComputedStyle(input);
// If input's width is shrunk and it's not visible, don't sync height.
if (computedStyle.width === '0px') {
- return;
+ return {};
}
const inputShallow = shadowRef.current;
@@ -86,41 +91,80 @@ const TextareaAutosize = React.forwardRef(function TextareaAutosize(props, ref)
const outerHeightStyle = outerHeight + (boxSizing === 'border-box' ? padding + border : 0);
const overflow = Math.abs(outerHeight - innerHeight) <= 1;
- setState((prevState) => {
- // Need a large enough difference to update the height.
- // This prevents infinite rendering loop.
- if (
- renders.current < 20 &&
- ((outerHeightStyle > 0 &&
- Math.abs((prevState.outerHeightStyle || 0) - outerHeightStyle) > 1) ||
- prevState.overflow !== overflow)
- ) {
- renders.current += 1;
- return {
- overflow,
- outerHeightStyle,
- };
- }
+ return { outerHeightStyle, overflow };
+ }, [maxRows, minRows, props.placeholder]);
- if (process.env.NODE_ENV !== 'production') {
- if (renders.current === 20) {
- console.error(
- [
- 'MUI: Too many re-renders. The layout is unstable.',
- 'TextareaAutosize limits the number of renders to prevent an infinite loop.',
- ].join('\n'),
- );
- }
+ const updateState = (prevState, newState) => {
+ const { outerHeightStyle, overflow } = newState;
+ // Need a large enough difference to update the height.
+ // This prevents infinite rendering loop.
+ if (
+ renders.current < 20 &&
+ ((outerHeightStyle > 0 &&
+ Math.abs((prevState.outerHeightStyle || 0) - outerHeightStyle) > 1) ||
+ prevState.overflow !== overflow)
+ ) {
+ renders.current += 1;
+ return {
+ overflow,
+ outerHeightStyle,
+ };
+ }
+ if (process.env.NODE_ENV !== 'production') {
+ if (renders.current === 20) {
+ console.error(
+ [
+ 'MUI: Too many re-renders. The layout is unstable.',
+ 'TextareaAutosize limits the number of renders to prevent an infinite loop.',
+ ].join('\n'),
+ );
}
+ }
+ return prevState;
+ };
+
+ const syncHeight = React.useCallback(() => {
+ const newState = getUpdatedState();
+
+ if (isEmpty(newState)) {
+ return;
+ }
- return prevState;
+ setState((prevState) => {
+ return updateState(prevState, newState);
});
- }, [maxRows, minRows, props.placeholder]);
+ }, [getUpdatedState]);
+
+ const syncHeightWithFlushSycn = () => {
+ const newState = getUpdatedState();
+
+ if (isEmpty(newState)) {
+ return;
+ }
+
+ // 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
+ flushSync(() => {
+ setState((prevState) => {
+ return updateState(prevState, newState);
+ });
+ });
+ };
React.useEffect(() => {
const handleResize = debounce(() => {
renders.current = 0;
- syncHeight();
+
+ // If the TextareaAutosize component is replaced by Suspense with a fallback, the last
+ // ResizeObserver's handler that runs because of the change in the layout is trying to
+ // access a dom node that is no longer there (as the fallback component is being shown instead).
+ // See https://github.com/mui/material-ui/issues/32640
+ // TODO: Add tests that will ensure the component is not failing when
+ // replaced by Suspense with a fallback, once React is updated to version 18
+ if (inputRef.current) {
+ syncHeightWithFlushSycn();
+ }
});
const containerWindow = ownerWindow(inputRef.current);
containerWindow.addEventListener('resize', handleResize);
@@ -138,7 +182,7 @@ const TextareaAutosize = React.forwardRef(function TextareaAutosize(props, ref)
resizeObserver.disconnect();
}
};
- }, [syncHeight]);
+ });
useEnhancedEffect(() => {
syncHeight();
diff --git a/packages/mui-codemod/package.json b/packages/mui-codemod/package.json
index 32c5c5044362a2..fdbd36447d1451 100644
--- a/packages/mui-codemod/package.json
+++ b/packages/mui-codemod/package.json
@@ -1,6 +1,6 @@
{
"name": "@mui/codemod",
- "version": "5.8.4",
+ "version": "5.8.5",
"bin": "./codemod.js",
"private": false,
"author": "MUI Team",
diff --git a/packages/mui-joy/package.json b/packages/mui-joy/package.json
index 8880ee8ca14d82..e8fff2870d6fd7 100644
--- a/packages/mui-joy/package.json
+++ b/packages/mui-joy/package.json
@@ -1,6 +1,6 @@
{
"name": "@mui/joy",
- "version": "5.0.0-alpha.32",
+ "version": "5.0.0-alpha.33",
"private": false,
"author": "MUI Team",
"description": "A library of beautifully designed React UI components.",
@@ -57,8 +57,8 @@
},
"dependencies": {
"@babel/runtime": "^7.17.2",
- "@mui/base": "5.0.0-alpha.85",
- "@mui/system": "^5.8.4",
+ "@mui/base": "5.0.0-alpha.86",
+ "@mui/system": "^5.8.5",
"@mui/types": "^7.1.4",
"@mui/utils": "^5.8.4",
"clsx": "^1.1.1",
diff --git a/packages/mui-joy/src/AspectRatio/aspectRatioClasses.ts b/packages/mui-joy/src/AspectRatio/aspectRatioClasses.ts
index 72118bcdac3cc5..e1b1034503222d 100644
--- a/packages/mui-joy/src/AspectRatio/aspectRatioClasses.ts
+++ b/packages/mui-joy/src/AspectRatio/aspectRatioClasses.ts
@@ -1,4 +1,4 @@
-import { generateUtilityClass, generateUtilityClasses } from '@mui/base';
+import { generateUtilityClass, generateUtilityClasses } from '../className';
export interface AspectRatioClasses {
/** Styles applied to the root element. */
diff --git a/packages/mui-joy/src/Avatar/avatarClasses.ts b/packages/mui-joy/src/Avatar/avatarClasses.ts
index d4ce28452fb641..4d42d4c9d2d8ea 100644
--- a/packages/mui-joy/src/Avatar/avatarClasses.ts
+++ b/packages/mui-joy/src/Avatar/avatarClasses.ts
@@ -1,4 +1,4 @@
-import { generateUtilityClass, generateUtilityClasses } from '@mui/base';
+import { generateUtilityClass, generateUtilityClasses } from '../className';
export interface AvatarClasses {
/** Styles applied to the root element. */
diff --git a/packages/mui-joy/src/AvatarGroup/avatarGroupClasses.ts b/packages/mui-joy/src/AvatarGroup/avatarGroupClasses.ts
index bd724ea5924659..3ac0acdd62d454 100644
--- a/packages/mui-joy/src/AvatarGroup/avatarGroupClasses.ts
+++ b/packages/mui-joy/src/AvatarGroup/avatarGroupClasses.ts
@@ -1,4 +1,4 @@
-import { generateUtilityClass, generateUtilityClasses } from '@mui/base';
+import { generateUtilityClass, generateUtilityClasses } from '../className';
export interface AvatarGroupClasses {
/** Styles applied to the root element. */
diff --git a/packages/mui-joy/src/Badge/badgeClasses.ts b/packages/mui-joy/src/Badge/badgeClasses.ts
index 6dc62ce22a71ae..aba4663a19aba5 100644
--- a/packages/mui-joy/src/Badge/badgeClasses.ts
+++ b/packages/mui-joy/src/Badge/badgeClasses.ts
@@ -1,4 +1,4 @@
-import { generateUtilityClass, generateUtilityClasses } from '@mui/base';
+import { generateUtilityClass, generateUtilityClasses } from '../className';
export interface BadgeClasses {
/** Class name applied to the root element. */
diff --git a/packages/mui-joy/src/Button/buttonClasses.ts b/packages/mui-joy/src/Button/buttonClasses.ts
index 5ef5369398782b..6f72ab08ef4961 100644
--- a/packages/mui-joy/src/Button/buttonClasses.ts
+++ b/packages/mui-joy/src/Button/buttonClasses.ts
@@ -1,4 +1,4 @@
-import { generateUtilityClass, generateUtilityClasses } from '@mui/base';
+import { generateUtilityClass, generateUtilityClasses } from '../className';
export interface ButtonClasses {
/** Styles applied to the root element. */
diff --git a/packages/mui-joy/src/Card/cardClasses.ts b/packages/mui-joy/src/Card/cardClasses.ts
index 85daa83d8e466d..687062fdf18d50 100644
--- a/packages/mui-joy/src/Card/cardClasses.ts
+++ b/packages/mui-joy/src/Card/cardClasses.ts
@@ -1,4 +1,4 @@
-import { generateUtilityClass, generateUtilityClasses } from '@mui/base';
+import { generateUtilityClass, generateUtilityClasses } from '../className';
export interface CardClasses {
/** Styles applied to the root element. */
diff --git a/packages/mui-joy/src/CardContent/cardContentClasses.ts b/packages/mui-joy/src/CardContent/cardContentClasses.ts
index 467c0cb3c648bd..0cda1a38dd9bd9 100644
--- a/packages/mui-joy/src/CardContent/cardContentClasses.ts
+++ b/packages/mui-joy/src/CardContent/cardContentClasses.ts
@@ -1,4 +1,4 @@
-import { generateUtilityClass, generateUtilityClasses } from '@mui/base';
+import { generateUtilityClass, generateUtilityClasses } from '../className';
export interface CardContentClasses {
/** Styles applied to the root element. */
diff --git a/packages/mui-joy/src/CardCover/cardCoverClasses.ts b/packages/mui-joy/src/CardCover/cardCoverClasses.ts
index 391abcadc19e3c..382f467d22b39b 100644
--- a/packages/mui-joy/src/CardCover/cardCoverClasses.ts
+++ b/packages/mui-joy/src/CardCover/cardCoverClasses.ts
@@ -1,4 +1,4 @@
-import { generateUtilityClass, generateUtilityClasses } from '@mui/base';
+import { generateUtilityClass, generateUtilityClasses } from '../className';
export interface CardCoverClasses {
/** Styles applied to the root element. */
diff --git a/packages/mui-joy/src/CardOverflow/cardOverflowClasses.ts b/packages/mui-joy/src/CardOverflow/cardOverflowClasses.ts
index 173a0cae896add..dd445e4e83e4d2 100644
--- a/packages/mui-joy/src/CardOverflow/cardOverflowClasses.ts
+++ b/packages/mui-joy/src/CardOverflow/cardOverflowClasses.ts
@@ -1,4 +1,4 @@
-import { generateUtilityClass, generateUtilityClasses } from '@mui/base';
+import { generateUtilityClass, generateUtilityClasses } from '../className';
export interface CardOverflowClasses {
/** Styles applied to the root element. */
diff --git a/packages/mui-joy/src/Checkbox/Checkbox.tsx b/packages/mui-joy/src/Checkbox/Checkbox.tsx
index 80291ec996682d..fd134f48ee9d49 100644
--- a/packages/mui-joy/src/Checkbox/Checkbox.tsx
+++ b/packages/mui-joy/src/Checkbox/Checkbox.tsx
@@ -59,12 +59,12 @@ const CheckboxRoot = styled('span', {
display: 'inline-flex',
fontFamily: theme.vars.fontFamily.body,
lineHeight: 'var(--Checkbox-size)', // prevent label from having larger height than the checkbox
- '&.Mui-disabled': {
+ [`&.${checkboxClasses.disabled}`]: {
color: theme.vars.palette[ownerState.color!]?.plainDisabledColor,
},
...(ownerState.disableIcon && {
color: theme.vars.palette[ownerState.color!]?.[`${ownerState.variant!}Color`],
- '&.Mui-disabled': {
+ [`&.${checkboxClasses.disabled}`]: {
color: theme.vars.palette[ownerState.color!]?.[`${ownerState.variant!}DisabledColor`],
},
}),
diff --git a/packages/mui-joy/src/Checkbox/checkboxClasses.ts b/packages/mui-joy/src/Checkbox/checkboxClasses.ts
index 469d7c3e234074..41c5a8725fdfcb 100644
--- a/packages/mui-joy/src/Checkbox/checkboxClasses.ts
+++ b/packages/mui-joy/src/Checkbox/checkboxClasses.ts
@@ -1,4 +1,4 @@
-import { generateUtilityClass, generateUtilityClasses } from '@mui/base';
+import { generateUtilityClass, generateUtilityClasses } from '../className';
export interface CheckboxClasses {
/** Styles applied to the root element. */
diff --git a/packages/mui-joy/src/Chip/chipClasses.ts b/packages/mui-joy/src/Chip/chipClasses.ts
index 4619b7ffa4c3de..ef79e47e44af79 100644
--- a/packages/mui-joy/src/Chip/chipClasses.ts
+++ b/packages/mui-joy/src/Chip/chipClasses.ts
@@ -1,4 +1,4 @@
-import { generateUtilityClass, generateUtilityClasses } from '@mui/base';
+import { generateUtilityClass, generateUtilityClasses } from '../className';
export interface ChipClasses {
/** Styles applied to the root element. */
diff --git a/packages/mui-joy/src/ChipDelete/chipDeleteClasses.ts b/packages/mui-joy/src/ChipDelete/chipDeleteClasses.ts
index fce130dbc7652b..6b44ed513cc84e 100644
--- a/packages/mui-joy/src/ChipDelete/chipDeleteClasses.ts
+++ b/packages/mui-joy/src/ChipDelete/chipDeleteClasses.ts
@@ -1,4 +1,4 @@
-import { generateUtilityClass, generateUtilityClasses } from '@mui/base';
+import { generateUtilityClass, generateUtilityClasses } from '../className';
export interface ChipDeleteClasses {
/** Styles applied to the root element. */
diff --git a/packages/mui-joy/src/Container/containerClasses.ts b/packages/mui-joy/src/Container/containerClasses.ts
index df3cff6f60208a..cc6ae505c27b0f 100644
--- a/packages/mui-joy/src/Container/containerClasses.ts
+++ b/packages/mui-joy/src/Container/containerClasses.ts
@@ -1,5 +1,5 @@
-import { generateUtilityClass, generateUtilityClasses } from '@mui/base';
import { ContainerClasses } from '@mui/system';
+import { generateUtilityClass, generateUtilityClasses } from '../className';
export type { ContainerClassKey } from '@mui/system';
export type { ContainerClasses };
diff --git a/packages/mui-joy/src/FormHelperText/formHelperTextClasses.ts b/packages/mui-joy/src/FormHelperText/formHelperTextClasses.ts
index bd61b0ae42fd1c..c9a2e633615d08 100644
--- a/packages/mui-joy/src/FormHelperText/formHelperTextClasses.ts
+++ b/packages/mui-joy/src/FormHelperText/formHelperTextClasses.ts
@@ -1,4 +1,4 @@
-import { generateUtilityClass, generateUtilityClasses } from '@mui/base';
+import { generateUtilityClass, generateUtilityClasses } from '../className';
export interface FormHelperTextClasses {
/** Styles applied to the root element. */
diff --git a/packages/mui-joy/src/FormLabel/formLabelClasses.ts b/packages/mui-joy/src/FormLabel/formLabelClasses.ts
index 1b5a13c5cfe680..b2624a7ef4c39a 100644
--- a/packages/mui-joy/src/FormLabel/formLabelClasses.ts
+++ b/packages/mui-joy/src/FormLabel/formLabelClasses.ts
@@ -1,4 +1,4 @@
-import { generateUtilityClass, generateUtilityClasses } from '@mui/base';
+import { generateUtilityClass, generateUtilityClasses } from '../className';
export interface FormLabelClasses {
/** Styles applied to the root element. */
diff --git a/packages/mui-joy/src/IconButton/iconButtonClasses.ts b/packages/mui-joy/src/IconButton/iconButtonClasses.ts
index 72722ead0e3191..2d89f71fc67376 100644
--- a/packages/mui-joy/src/IconButton/iconButtonClasses.ts
+++ b/packages/mui-joy/src/IconButton/iconButtonClasses.ts
@@ -1,4 +1,4 @@
-import { generateUtilityClass, generateUtilityClasses } from '@mui/base';
+import { generateUtilityClass, generateUtilityClasses } from '../className';
export interface IconButtonClasses {
/** Styles applied to the root element. */
diff --git a/packages/mui-joy/src/Input/inputClasses.ts b/packages/mui-joy/src/Input/inputClasses.ts
index 1e378534359e7d..6f853d154ba8ee 100644
--- a/packages/mui-joy/src/Input/inputClasses.ts
+++ b/packages/mui-joy/src/Input/inputClasses.ts
@@ -1,4 +1,4 @@
-import { generateUtilityClass, generateUtilityClasses } from '@mui/base';
+import { generateUtilityClass, generateUtilityClasses } from '../className';
export interface InputClasses {
/** Styles applied to the root element. */
diff --git a/packages/mui-joy/src/Link/Link.tsx b/packages/mui-joy/src/Link/Link.tsx
index 3dd57cf0cf1fbf..30e88ba4003d15 100644
--- a/packages/mui-joy/src/Link/Link.tsx
+++ b/packages/mui-joy/src/Link/Link.tsx
@@ -103,7 +103,7 @@ const LinkRoot = styled('a', {
: {
color: `rgba(${theme.vars.palette[ownerState.color!]?.mainChannel} / 1)`,
cursor: 'pointer',
- '&.Mui-disabled': {
+ [`&.${linkClasses.disabled}`]: {
pointerEvents: 'none',
color: `rgba(${theme.vars.palette[ownerState.color!]?.mainChannel} / 0.6)`,
},
diff --git a/packages/mui-joy/src/Link/linkClasses.ts b/packages/mui-joy/src/Link/linkClasses.ts
index ec49fc9537c79a..0fa388bdc91d78 100644
--- a/packages/mui-joy/src/Link/linkClasses.ts
+++ b/packages/mui-joy/src/Link/linkClasses.ts
@@ -1,4 +1,4 @@
-import { generateUtilityClass, generateUtilityClasses } from '@mui/base';
+import { generateUtilityClass, generateUtilityClasses } from '../className';
export interface LinkClasses {
/** Styles applied to the root element. */
diff --git a/packages/mui-joy/src/List/listClasses.ts b/packages/mui-joy/src/List/listClasses.ts
index 173f5975b918b6..bf6a8b5293e342 100644
--- a/packages/mui-joy/src/List/listClasses.ts
+++ b/packages/mui-joy/src/List/listClasses.ts
@@ -1,4 +1,4 @@
-import { generateUtilityClass, generateUtilityClasses } from '@mui/base';
+import { generateUtilityClass, generateUtilityClasses } from '../className';
export interface ListClasses {
/** Styles applied to the root element. */
diff --git a/packages/mui-joy/src/ListDivider/listDividerClasses.ts b/packages/mui-joy/src/ListDivider/listDividerClasses.ts
index cbec7d500527c6..7ed0ad0b202fd6 100644
--- a/packages/mui-joy/src/ListDivider/listDividerClasses.ts
+++ b/packages/mui-joy/src/ListDivider/listDividerClasses.ts
@@ -1,4 +1,4 @@
-import { generateUtilityClass, generateUtilityClasses } from '@mui/base';
+import { generateUtilityClass, generateUtilityClasses } from '../className';
export interface ListDividerClasses {
/** Styles applied to the root element. */
diff --git a/packages/mui-joy/src/ListItem/listItemClasses.ts b/packages/mui-joy/src/ListItem/listItemClasses.ts
index beb041b8d3fdf0..5d7049737e097f 100644
--- a/packages/mui-joy/src/ListItem/listItemClasses.ts
+++ b/packages/mui-joy/src/ListItem/listItemClasses.ts
@@ -1,4 +1,4 @@
-import { generateUtilityClass, generateUtilityClasses } from '@mui/base';
+import { generateUtilityClass, generateUtilityClasses } from '../className';
export interface ListItemClasses {
/** Styles applied to the root element. */
diff --git a/packages/mui-joy/src/ListItemButton/listItemButtonClasses.ts b/packages/mui-joy/src/ListItemButton/listItemButtonClasses.ts
index d870153e5e1860..639cf7a5b1ce5a 100644
--- a/packages/mui-joy/src/ListItemButton/listItemButtonClasses.ts
+++ b/packages/mui-joy/src/ListItemButton/listItemButtonClasses.ts
@@ -1,4 +1,4 @@
-import { generateUtilityClass, generateUtilityClasses } from '@mui/base';
+import { generateUtilityClass, generateUtilityClasses } from '../className';
export interface ListItemButtonClasses {
/** Styles applied to the root element. */
diff --git a/packages/mui-joy/src/ListItemContent/listItemContentClasses.ts b/packages/mui-joy/src/ListItemContent/listItemContentClasses.ts
index 8788b63ba39f78..02ce494988f50f 100644
--- a/packages/mui-joy/src/ListItemContent/listItemContentClasses.ts
+++ b/packages/mui-joy/src/ListItemContent/listItemContentClasses.ts
@@ -1,4 +1,4 @@
-import { generateUtilityClass, generateUtilityClasses } from '@mui/base';
+import { generateUtilityClass, generateUtilityClasses } from '../className';
export interface ListItemContentClasses {
/** Styles applied to the root element. */
diff --git a/packages/mui-joy/src/ListItemDecorator/listItemDecoratorClasses.ts b/packages/mui-joy/src/ListItemDecorator/listItemDecoratorClasses.ts
index 41e15419519f66..3a06f107e9c91c 100644
--- a/packages/mui-joy/src/ListItemDecorator/listItemDecoratorClasses.ts
+++ b/packages/mui-joy/src/ListItemDecorator/listItemDecoratorClasses.ts
@@ -1,4 +1,4 @@
-import { generateUtilityClass, generateUtilityClasses } from '@mui/base';
+import { generateUtilityClass, generateUtilityClasses } from '../className';
export interface ListItemDecoratorClasses {
/** Styles applied to the root element. */
diff --git a/packages/mui-joy/src/Radio/Radio.tsx b/packages/mui-joy/src/Radio/Radio.tsx
index dbdfc44d1c0634..055c6a34f5c9a3 100644
--- a/packages/mui-joy/src/Radio/Radio.tsx
+++ b/packages/mui-joy/src/Radio/Radio.tsx
@@ -71,12 +71,12 @@ const RadioRoot = styled('span', {
minWidth: 0,
fontFamily: theme.vars.fontFamily.body,
lineHeight: 'var(--Radio-size)', // prevent label from having larger height than the checkbox
- '&.Mui-disabled': {
+ [`&.${radioClasses.disabled}`]: {
color: theme.vars.palette[ownerState.color!]?.plainDisabledColor,
},
...(ownerState.disableIcon && {
color: theme.vars.palette[ownerState.color!]?.[`${ownerState.variant!}Color`],
- '&.Mui-disabled': {
+ [`&.${radioClasses.disabled}`]: {
color: theme.vars.palette[ownerState.color!]?.[`${ownerState.variant!}DisabledColor`],
},
}),
diff --git a/packages/mui-joy/src/Radio/radioClasses.ts b/packages/mui-joy/src/Radio/radioClasses.ts
index fe7ca089d90bae..6e26201525ea6a 100644
--- a/packages/mui-joy/src/Radio/radioClasses.ts
+++ b/packages/mui-joy/src/Radio/radioClasses.ts
@@ -1,4 +1,4 @@
-import { generateUtilityClass, generateUtilityClasses } from '@mui/base';
+import { generateUtilityClass, generateUtilityClasses } from '../className';
export interface RadioClasses {
/** Styles applied to the root element. */
diff --git a/packages/mui-joy/src/RadioGroup/radioGroupClasses.ts b/packages/mui-joy/src/RadioGroup/radioGroupClasses.ts
index d490e4a587493c..55c9494c11f7be 100644
--- a/packages/mui-joy/src/RadioGroup/radioGroupClasses.ts
+++ b/packages/mui-joy/src/RadioGroup/radioGroupClasses.ts
@@ -1,4 +1,4 @@
-import { generateUtilityClass, generateUtilityClasses } from '@mui/base';
+import { generateUtilityClass, generateUtilityClasses } from '../className';
export interface RadioGroupClasses {
/** Styles applied to the root element. */
diff --git a/packages/mui-joy/src/Sheet/Sheet.spec.tsx b/packages/mui-joy/src/Sheet/Sheet.spec.tsx
index 9191bd58531f69..cd6a10f90b2e2e 100644
--- a/packages/mui-joy/src/Sheet/Sheet.spec.tsx
+++ b/packages/mui-joy/src/Sheet/Sheet.spec.tsx
@@ -19,18 +19,8 @@ import * as React from 'react';
;
;
-// `elevation`
-;
-;
-;
-;
-;
-
// @ts-expect-error there is no variant `filled`
;
// @ts-expect-error there is no color `secondary`
;
-
-// @ts-expect-error there is no elevation `xl2`
-;
diff --git a/packages/mui-joy/src/Sheet/Sheet.test.js b/packages/mui-joy/src/Sheet/Sheet.test.js
index 187fa4eaf49f24..dac9eb34a6265d 100644
--- a/packages/mui-joy/src/Sheet/Sheet.test.js
+++ b/packages/mui-joy/src/Sheet/Sheet.test.js
@@ -59,27 +59,4 @@ describe('', () => {
});
});
});
-
- describe('prop: elevation', () => {
- it('undefined by default', () => {
- const { getByTestId } = render(Hello World);
-
- expect(getByTestId('root')).not.to.have.class(classes.elevationXs);
- expect(getByTestId('root')).not.to.have.class(classes.elevationSm);
- expect(getByTestId('root')).not.to.have.class(classes.elevationMd);
- expect(getByTestId('root')).not.to.have.class(classes.elevationLg);
- expect(getByTestId('root')).not.to.have.class(classes.elevationXl);
- });
- ['xs', 'sm', 'md', 'lg', 'xl'].forEach((elevation) => {
- it(`should render ${elevation}`, () => {
- const { getByTestId } = render(
-
- Hello World
- ,
- );
-
- expect(getByTestId('root')).to.have.class(classes[`elevation${capitalize(elevation)}`]);
- });
- });
- });
});
diff --git a/packages/mui-joy/src/Sheet/Sheet.tsx b/packages/mui-joy/src/Sheet/Sheet.tsx
index 6897817704629b..4bf85e258c184f 100644
--- a/packages/mui-joy/src/Sheet/Sheet.tsx
+++ b/packages/mui-joy/src/Sheet/Sheet.tsx
@@ -5,20 +5,19 @@ import clsx from 'clsx';
import PropTypes from 'prop-types';
import * as React from 'react';
import { useThemeProps } from '../styles';
-import { resolveSxValue } from '../styles/styleUtils';
import styled from '../styles/styled';
+import { resolveSxValue } from '../styles/styleUtils';
import { getSheetUtilityClass } from './sheetClasses';
import { SheetProps, SheetTypeMap } from './SheetProps';
const useUtilityClasses = (ownerState: SheetProps) => {
- const { elevation, variant, color } = ownerState;
+ const { variant, color } = ownerState;
const slots = {
root: [
'root',
variant && `variant${capitalize(variant)}`,
color && `color${capitalize(color)}`,
- elevation && `elevation${capitalize(elevation)}`,
],
};
@@ -43,7 +42,6 @@ const SheetRoot = styled('div', {
// TODO: discuss the theme transition.
// This value is copied from mui-material Sheet.
transition: 'box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms',
- boxShadow: theme.vars.shadow[ownerState.elevation!],
backgroundColor: theme.vars.palette.background.body,
position: 'relative',
},
@@ -57,20 +55,12 @@ const Sheet = React.forwardRef(function Sheet(inProps, ref) {
name: 'JoySheet',
});
- const {
- className,
- color = 'neutral',
- component = 'div',
- variant = 'plain',
- elevation,
- ...other
- } = props;
+ const { className, color = 'neutral', component = 'div', variant = 'plain', ...other } = props;
const ownerState = {
...props,
color,
component,
- elevation,
variant,
};
@@ -113,14 +103,6 @@ Sheet.propTypes /* remove-proptypes */ = {
* Either a string to use a HTML element or a component.
*/
component: PropTypes.elementType,
- /**
- * Shadow depth, corresponds to the `theme.shadow` scale.
- * It accepts theme values between 'xs' and 'xl'.
- */
- elevation: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([
- PropTypes.oneOf(['lg', 'md', 'sm', 'xl', 'xs']),
- PropTypes.string,
- ]),
/**
* The system prop that allows defining system overrides as well as additional CSS styles.
*/
diff --git a/packages/mui-joy/src/Sheet/SheetProps.ts b/packages/mui-joy/src/Sheet/SheetProps.ts
index fcd5258f073e18..993305b7657764 100644
--- a/packages/mui-joy/src/Sheet/SheetProps.ts
+++ b/packages/mui-joy/src/Sheet/SheetProps.ts
@@ -1,6 +1,6 @@
import { OverridableStringUnion, OverrideProps } from '@mui/types';
import * as React from 'react';
-import { ColorPaletteProp, VariantProp, SxProps } from '../styles/types';
+import { ColorPaletteProp, SxProps, VariantProp } from '../styles/types';
export type SheetSlot = 'root';
@@ -18,11 +18,6 @@ export interface SheetTypeMap {
* @default 'neutral'
*/
color?: OverridableStringUnion;
- /**
- * Shadow depth, corresponds to the `theme.shadow` scale.
- * It accepts theme values between 'xs' and 'xl'.
- */
- elevation?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
/**
* The system prop that allows defining system overrides as well as additional CSS styles.
*/
diff --git a/packages/mui-joy/src/Sheet/sheetClasses.ts b/packages/mui-joy/src/Sheet/sheetClasses.ts
index a4f7d8cb2839f6..7e255adfd4659e 100644
--- a/packages/mui-joy/src/Sheet/sheetClasses.ts
+++ b/packages/mui-joy/src/Sheet/sheetClasses.ts
@@ -1,4 +1,4 @@
-import { generateUtilityClass, generateUtilityClasses } from '@mui/base';
+import { generateUtilityClass, generateUtilityClasses } from '../className';
export interface SheetClasses {
/** Styles applied to the root element. */
@@ -23,16 +23,6 @@ export interface SheetClasses {
variantSoft: string;
/** Styles applied to the root element if `variant="solid"`. */
variantSolid: string;
- /** Styles applied to the root element if `elevation="xs"`. */
- elevationXs: string;
- /** Styles applied to the root element if `elevation="sm"`. */
- elevationSm: string;
- /** Styles applied to the root element if `elevation="md"`. */
- elevationMd: string;
- /** Styles applied to the root element if `elevation="lg"`. */
- elevationLg: string;
- /** Styles applied to the root element if `elevation="xl"`. */
- elevationXl: string;
}
export type SheetClassKey = keyof SheetClasses;
@@ -53,11 +43,6 @@ const sheetClasses: SheetClasses = generateUtilityClasses('JoySheet', [
'variantOutlined',
'variantSoft',
'variantSolid',
- 'elevationXs',
- 'elevationSm',
- 'elevationMd',
- 'elevationLg',
- 'elevationXl',
]);
export default sheetClasses;
diff --git a/packages/mui-joy/src/Slider/Slider.tsx b/packages/mui-joy/src/Slider/Slider.tsx
index 4499cd86d4329b..8f3cf7570e699b 100644
--- a/packages/mui-joy/src/Slider/Slider.tsx
+++ b/packages/mui-joy/src/Slider/Slider.tsx
@@ -633,7 +633,10 @@ Slider.propTypes /* remove-proptypes */ = {
* The color of the component. It supports those theme colors that make sense for this component.
* @default 'primary'
*/
- color: PropTypes.oneOf(['danger', 'info', 'neutral', 'primary', 'success', 'warning']),
+ color: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([
+ PropTypes.oneOf(['danger', 'info', 'neutral', 'primary', 'success', 'warning']),
+ PropTypes.string,
+ ]),
/**
* The component used for the root node.
* Either a string to use a HTML element or a component.
@@ -767,7 +770,10 @@ Slider.propTypes /* remove-proptypes */ = {
* It accepts theme values between 'sm' and 'lg'.
* @default 'md'
*/
- size: PropTypes.oneOf(['sm', 'md', 'lg']),
+ size: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([
+ PropTypes.oneOf(['sm', 'md', 'lg']),
+ PropTypes.string,
+ ]),
/**
* The granularity with which the slider can step through values. (A "discrete" slider.)
* The `min` prop serves as the origin for the valid values.
diff --git a/packages/mui-joy/src/Slider/sliderClasses.ts b/packages/mui-joy/src/Slider/sliderClasses.ts
index 8ab9451a2a23f1..8270536f911901 100644
--- a/packages/mui-joy/src/Slider/sliderClasses.ts
+++ b/packages/mui-joy/src/Slider/sliderClasses.ts
@@ -1,4 +1,4 @@
-import { generateUtilityClass, generateUtilityClasses } from '@mui/base';
+import { generateUtilityClass, generateUtilityClasses } from '../className';
export interface SliderClasses {
/** Class name applied to the root element. */
diff --git a/packages/mui-joy/src/SvgIcon/svgIconClasses.ts b/packages/mui-joy/src/SvgIcon/svgIconClasses.ts
index 903da31cc73940..69a3ac7895e944 100644
--- a/packages/mui-joy/src/SvgIcon/svgIconClasses.ts
+++ b/packages/mui-joy/src/SvgIcon/svgIconClasses.ts
@@ -1,4 +1,4 @@
-import { generateUtilityClass, generateUtilityClasses } from '@mui/base';
+import { generateUtilityClass, generateUtilityClasses } from '../className';
export interface SvgIconClasses {
/** Styles applied to the root element. */
diff --git a/packages/mui-joy/src/Switch/switchClasses.ts b/packages/mui-joy/src/Switch/switchClasses.ts
index ddf8a57f112596..3593ae58fa310c 100644
--- a/packages/mui-joy/src/Switch/switchClasses.ts
+++ b/packages/mui-joy/src/Switch/switchClasses.ts
@@ -1,4 +1,4 @@
-import { generateUtilityClass, generateUtilityClasses } from '@mui/base';
+import { generateUtilityClass, generateUtilityClasses } from '../className';
export interface SwitchClasses {
/** Styles applied to the root element. */
diff --git a/packages/mui-joy/src/TextField/textFieldClasses.ts b/packages/mui-joy/src/TextField/textFieldClasses.ts
index 2d07bb289a5136..018c4fe5aaca91 100644
--- a/packages/mui-joy/src/TextField/textFieldClasses.ts
+++ b/packages/mui-joy/src/TextField/textFieldClasses.ts
@@ -1,4 +1,4 @@
-import { generateUtilityClass, generateUtilityClasses } from '@mui/base';
+import { generateUtilityClass, generateUtilityClasses } from '../className';
export interface TextFieldClasses {
/** Styles applied to the root element. */
diff --git a/packages/mui-joy/src/Typography/typographyClasses.ts b/packages/mui-joy/src/Typography/typographyClasses.ts
index e007d51c4d8e8e..57edadf5315222 100644
--- a/packages/mui-joy/src/Typography/typographyClasses.ts
+++ b/packages/mui-joy/src/Typography/typographyClasses.ts
@@ -1,4 +1,4 @@
-import { generateUtilityClass, generateUtilityClasses } from '@mui/base';
+import { generateUtilityClass, generateUtilityClasses } from '../className';
export interface TypographyClasses {
/** Styles applied to the root element. */
diff --git a/packages/mui-joy/src/className/index.ts b/packages/mui-joy/src/className/index.ts
index ac4bb27c3b0d48..1d47a7d752fa78 100644
--- a/packages/mui-joy/src/className/index.ts
+++ b/packages/mui-joy/src/className/index.ts
@@ -1,10 +1,9 @@
-/**
- * Caution! this module must not include unstyled components import from `@mui/base`, otherwise, it will break the ClassNameGenerator.
- * ❌ import { ... } from '@mui/base';
- * ✅ import { ... } from '@mui/base/utils'; // must be specific base module
- *
- * Issue: https://github.com/mui/material-ui/issues/30011#issuecomment-1024993401
- */
+import { unstable_generateUtilityClass, unstable_generateUtilityClasses } from '@mui/utils';
-// eslint-disable-next-line import/prefer-default-export
-export { unstable_ClassNameGenerator } from '@mui/base/className';
+export { unstable_ClassNameGenerator } from '@mui/utils';
+
+export const generateUtilityClass = (componentName: string, slot: string) =>
+ unstable_generateUtilityClass(componentName, slot, 'Joy');
+
+export const generateUtilityClasses = (componentName: string, slots: Array) =>
+ unstable_generateUtilityClasses(componentName, slots, 'Joy');
diff --git a/packages/mui-joy/src/styles/extendTheme.ts b/packages/mui-joy/src/styles/extendTheme.ts
index 0617111bf1c49a..b0f48cc833e474 100644
--- a/packages/mui-joy/src/styles/extendTheme.ts
+++ b/packages/mui-joy/src/styles/extendTheme.ts
@@ -16,6 +16,7 @@ import { TypographySystem, FontSize } from './types/typography';
import { Variants } from './types/variants';
import { Theme, ThemeCSSVar, ThemeScales } from './types';
import { Components } from './components';
+import { generateUtilityClass } from '../className';
type CSSProperties = CSS.Properties;
@@ -360,7 +361,7 @@ export default function extendTheme(themeInput?: ThemeInput): Theme {
xl3: 900,
},
focus: {
- selector: '&.Mui-focusVisible, &:focus-visible',
+ selector: `&.${generateUtilityClass('', 'focusVisible')}, &:focus-visible`,
default: {
outlineOffset: 'var(--joy-focus-outlineOffset, 0px)', // reset user agent stylesheet
outline: '4px solid var(--joy-palette-focusVisible)',
diff --git a/packages/mui-lab/package.json b/packages/mui-lab/package.json
index 43c6c990fb829e..f65c3576e711cd 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.86",
+ "version": "5.0.0-alpha.87",
"private": false,
"author": "MUI Team",
"description": "Laboratory for new MUI modules.",
@@ -77,8 +77,8 @@
},
"dependencies": {
"@babel/runtime": "^7.17.2",
- "@mui/base": "5.0.0-alpha.85",
- "@mui/system": "^5.8.4",
+ "@mui/base": "5.0.0-alpha.86",
+ "@mui/system": "^5.8.5",
"@mui/utils": "^5.8.4",
"@mui/x-date-pickers": "5.0.0-alpha.1",
"clsx": "^1.1.1",
diff --git a/packages/mui-material-next/package.json b/packages/mui-material-next/package.json
index 226db73b919b40..6bf1258daea12b 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.40",
+ "version": "6.0.0-alpha.41",
"private": false,
"author": "MUI Team",
"description": "v6-alpha: React components that implement Google's Material Design",
@@ -59,9 +59,9 @@
},
"dependencies": {
"@babel/runtime": "^7.17.2",
- "@mui/base": "5.0.0-alpha.85",
- "@mui/material": "^5.8.4",
- "@mui/system": "^5.8.4",
+ "@mui/base": "5.0.0-alpha.86",
+ "@mui/material": "^5.8.5",
+ "@mui/system": "^5.8.5",
"@mui/types": "^7.1.4",
"@mui/utils": "^5.8.4",
"@popperjs/core": "^2.11.5",
diff --git a/packages/mui-material/package.json b/packages/mui-material/package.json
index 34e35970a2379d..94264e51abf313 100644
--- a/packages/mui-material/package.json
+++ b/packages/mui-material/package.json
@@ -1,6 +1,6 @@
{
"name": "@mui/material",
- "version": "5.8.4",
+ "version": "5.8.5",
"private": false,
"author": "MUI Team",
"description": "React components that implement Google's Material Design.",
@@ -61,8 +61,8 @@
},
"dependencies": {
"@babel/runtime": "^7.17.2",
- "@mui/base": "5.0.0-alpha.85",
- "@mui/system": "^5.8.4",
+ "@mui/base": "5.0.0-alpha.86",
+ "@mui/system": "^5.8.5",
"@mui/types": "^7.1.4",
"@mui/utils": "^5.8.4",
"@types/react-transition-group": "^4.4.4",
diff --git a/packages/mui-material/src/Alert/Alert.js b/packages/mui-material/src/Alert/Alert.js
index 3d1195f9305e24..5cfcd0492e59e0 100644
--- a/packages/mui-material/src/Alert/Alert.js
+++ b/packages/mui-material/src/Alert/Alert.js
@@ -52,28 +52,55 @@ const AlertRoot = styled(Paper, {
padding: '6px 16px',
...(color &&
ownerState.variant === 'standard' && {
- color: getColor(theme.palette[color].light, 0.6),
- backgroundColor: getBackgroundColor(theme.palette[color].light, 0.9),
- [`& .${alertClasses.icon}`]: {
- color:
- theme.palette.mode === 'dark' ? theme.palette[color].main : theme.palette[color].light,
- },
+ color: theme.vars
+ ? theme.vars.palette.Alert[`${color}Color`]
+ : getColor(theme.palette[color].light, 0.6),
+ backgroundColor: theme.vars
+ ? theme.vars.palette.Alert[`${color}StandardBg`]
+ : getBackgroundColor(theme.palette[color].light, 0.9),
+ [`& .${alertClasses.icon}`]: theme.vars
+ ? { color: theme.vars.palette.Alert[`${color}IconColor`] }
+ : {
+ color:
+ theme.palette.mode === 'dark'
+ ? theme.palette[color].main
+ : theme.palette[color].light,
+ },
}),
...(color &&
ownerState.variant === 'outlined' && {
- color: getColor(theme.palette[color].light, 0.6),
- border: `1px solid ${theme.palette[color].light}`,
- [`& .${alertClasses.icon}`]: {
- color:
- theme.palette.mode === 'dark' ? theme.palette[color].main : theme.palette[color].light,
- },
+ color: theme.vars
+ ? theme.vars.palette.Alert[`${color}Color`]
+ : getColor(theme.palette[color].light, 0.6),
+ border: `1px solid ${(theme.vars || theme).palette[color].light}`,
+ [`& .${alertClasses.icon}`]: theme.vars
+ ? { color: theme.vars.palette.Alert[`${color}IconColor`] }
+ : {
+ color:
+ theme.palette.mode === 'dark'
+ ? theme.palette[color].main
+ : theme.palette[color].light,
+ },
}),
...(color &&
ownerState.variant === 'filled' && {
- color: '#fff',
fontWeight: theme.typography.fontWeightMedium,
- backgroundColor:
- theme.palette.mode === 'dark' ? theme.palette[color].dark : theme.palette[color].main,
+ ...(theme.vars
+ ? {
+ color: theme.vars.palette.Alert[`${color}FilledColor`],
+ backgroundColor: theme.vars.palette.Alert[`${color}FilledBg`],
+ }
+ : {
+ backgroundColor:
+ theme.palette.mode === 'dark'
+ ? theme.palette[color].dark
+ : theme.palette[color].main,
+ color: theme.palette.getContrastText(
+ theme.palette.mode === 'dark'
+ ? theme.palette[color].dark
+ : theme.palette[color].main,
+ ),
+ }),
}),
};
});
diff --git a/packages/mui-material/src/FilledInput/FilledInput.js b/packages/mui-material/src/FilledInput/FilledInput.js
index a772873cc6b478..e694645c49adf8 100644
--- a/packages/mui-material/src/FilledInput/FilledInput.js
+++ b/packages/mui-material/src/FilledInput/FilledInput.js
@@ -98,7 +98,7 @@ const FilledInputRoot = styled(InputBaseRoot, {
'&:before': {
borderBottom: `1px solid ${
theme.vars
- ? `rgba(${theme.vars.palette.common.onBackgroundChannel} / ${theme.vars.opacity.inputTouchBottomLine})`
+ ? `rgba(${theme.vars.palette.common.onBackgroundChannel} / ${theme.vars.opacity.inputUnderline})`
: bottomLineColor
}`,
left: 0,
diff --git a/packages/mui-material/src/Input/Input.js b/packages/mui-material/src/Input/Input.js
index ccec45f3f3255a..644764c9de882e 100644
--- a/packages/mui-material/src/Input/Input.js
+++ b/packages/mui-material/src/Input/Input.js
@@ -45,7 +45,7 @@ const InputRoot = styled(InputBaseRoot, {
const light = theme.palette.mode === 'light';
let bottomLineColor = light ? 'rgba(0, 0, 0, 0.42)' : 'rgba(255, 255, 255, 0.7)';
if (theme.vars) {
- bottomLineColor = `rgba(${theme.vars.palette.common.onBackgroundChannel} / ${theme.vars.opacity.inputTouchBottomLine})`;
+ bottomLineColor = `rgba(${theme.vars.palette.common.onBackgroundChannel} / ${theme.vars.opacity.inputUnderline})`;
}
return {
position: 'relative',
diff --git a/packages/mui-material/src/OutlinedInput/OutlinedInput.js b/packages/mui-material/src/OutlinedInput/OutlinedInput.js
index 1b4c9fcf574295..2f8700425494dc 100644
--- a/packages/mui-material/src/OutlinedInput/OutlinedInput.js
+++ b/packages/mui-material/src/OutlinedInput/OutlinedInput.js
@@ -155,11 +155,26 @@ const OutlinedInput = React.forwardRef(function OutlinedInput(inProps, ref) {
states: ['required'],
});
+ const ownerState = {
+ ...props,
+ color: fcs.color || 'primary',
+ disabled: fcs.disabled,
+ error: fcs.error,
+ focused: fcs.focused,
+ formControl: muiFormControl,
+ fullWidth,
+ hiddenLabel: fcs.hiddenLabel,
+ multiline,
+ size: fcs.size,
+ type,
+ };
+
return (
(
', () => {
);
expect(document.querySelector('[data-test=test]')).toHaveComputedStyle({ marginTop: '10px' });
});
+
+ it('should have ownerState in the theme style overrides', () => {
+ expect(() =>
+ render(
+ ({
+ // test that ownerState is not undefined
+ ...(ownerState.disabled && {}),
+ }),
+ },
+ },
+ },
+ })}
+ >
+
+ ,
+ ),
+ ).not.to.throw();
+ });
});
diff --git a/packages/mui-material/src/Tabs/Tabs.js b/packages/mui-material/src/Tabs/Tabs.js
index d9a85d0668a69e..a9623d9f7afc25 100644
--- a/packages/mui-material/src/Tabs/Tabs.js
+++ b/packages/mui-material/src/Tabs/Tabs.js
@@ -562,8 +562,16 @@ const Tabs = React.forwardRef(function Tabs(inProps, ref) {
React.useEffect(() => {
const handleResize = debounce(() => {
- updateIndicatorState();
- updateScrollButtonState();
+ // If the Tabs component is replaced by Suspense with a fallback, the last
+ // ResizeObserver's handler that runs because of the change in the layout is trying to
+ // access a dom node that is no longer there (as the fallback component is being shown instead).
+ // See https://github.com/mui/material-ui/issues/33276
+ // TODO: Add tests that will ensure the component is not failing when
+ // replaced by Suspense with a fallback, once React is updated to version 18
+ if (tabsRef.current) {
+ updateIndicatorState();
+ updateScrollButtonState();
+ }
});
const win = ownerWindow(tabsRef.current);
win.addEventListener('resize', handleResize);
diff --git a/packages/mui-material/src/styles/CssVarsProvider.d.ts b/packages/mui-material/src/styles/CssVarsProvider.d.ts
deleted file mode 100644
index 158de8ddee8ecf..00000000000000
--- a/packages/mui-material/src/styles/CssVarsProvider.d.ts
+++ /dev/null
@@ -1,28 +0,0 @@
-/* eslint-disable @typescript-eslint/naming-convention */
-import { CreateCssVarsProviderResult } from '@mui/system';
-import { ThemeOptions, SupportedColorScheme } from './experimental_extendTheme';
-import { PaletteWithChannels } from './createPalette';
-
-export interface ThemeInput extends Omit {
- colorSchemes: Partial<
- Record<
- SupportedColorScheme,
- {
- palette: PaletteWithChannels;
- }
- >
- >;
-}
-
-type MDCreateCssVarsProviderResult = CreateCssVarsProviderResult;
-
-declare const useColorScheme: MDCreateCssVarsProviderResult['useColorScheme'];
-declare const getInitColorSchemeScript: MDCreateCssVarsProviderResult['getInitColorSchemeScript'];
-
-/**
- * This component is an experimental Theme Provider that generates CSS variabels out of the theme tokens.
- * It should preferably be used at **the root of your component tree**.
- */
-declare const Experimental_CssVarsProvider: MDCreateCssVarsProviderResult['CssVarsProvider'];
-
-export { useColorScheme, getInitColorSchemeScript, Experimental_CssVarsProvider };
diff --git a/packages/mui-material/src/styles/CssVarsProvider.spec.tsx b/packages/mui-material/src/styles/CssVarsProvider.spec.tsx
new file mode 100644
index 00000000000000..f55a5d7b79341f
--- /dev/null
+++ b/packages/mui-material/src/styles/CssVarsProvider.spec.tsx
@@ -0,0 +1,72 @@
+import * as React from 'react';
+import {
+ experimental_extendTheme as extendTheme,
+ Experimental_CssVarsProvider as CssVarsProvider,
+ styled,
+ useTheme,
+ Overlays,
+} from '@mui/material/styles';
+import type {} from '@mui/material/themeCssVarsAugmentation';
+
+const customTheme = extendTheme({
+ colorSchemes: {
+ light: {
+ opacity: {
+ inputPlaceholder: 0.1,
+ inputUnderline: 0.1,
+ },
+ overlays: Array(25).fill('') as Overlays,
+ palette: {
+ AppBar: {
+ darkBg: '',
+ darkColor: '',
+ defaultBg: '',
+ },
+ // @ts-expect-error
+ mode: '',
+ getContrastText: () => '',
+ tonalOffset: 1,
+ },
+ },
+ dark: {
+ opacity: {},
+ palette: {},
+ },
+ },
+ components: {
+ MuiButton: {
+ styleOverrides: {
+ root: ({ theme }) => ({
+ color: theme.vars.palette.primary.main,
+ }),
+ },
+ },
+ },
+});
+
+const TestStyled = styled('div')(({ theme }) => ({
+ // test that `theme.vars` works
+ color: theme.vars.palette.primary.main,
+ // test that `theme.getColorSchemeSelector` works
+ [theme.getColorSchemeSelector('dark')]: {
+ color: theme.vars.palette.common.onBackground,
+ },
+}));
+
+const TestUseTheme = () => {
+ const theme = useTheme();
+ // test that `theme` from useTheme has access to CSS vars
+ return test
;
+};
+
+
+ ({
+ // test that `theme` in sx has access to CSS vars
+ [theme.getColorSchemeSelector('dark')]: {
+ border: '1px solid',
+ borderColor: theme.vars.palette.divider,
+ },
+ })}
+ />
+;
diff --git a/packages/mui-material/src/styles/CssVarsProvider.test.js b/packages/mui-material/src/styles/CssVarsProvider.test.js
index a796f1b7daa8fb..369244261f757c 100644
--- a/packages/mui-material/src/styles/CssVarsProvider.test.js
+++ b/packages/mui-material/src/styles/CssVarsProvider.test.js
@@ -200,7 +200,7 @@ describe('[Material UI] CssVarsProvider', () => {
expect(screen.getByTestId('opacity').textContent).to.equal(
JSON.stringify({
inputPlaceholder: 'var(--mui-opacity-inputPlaceholder)',
- inputTouchBottomLine: 'var(--mui-opacity-inputTouchBottomLine)',
+ inputUnderline: 'var(--mui-opacity-inputUnderline)',
switchTrackDisabled: 'var(--mui-opacity-switchTrackDisabled)',
switchTrack: 'var(--mui-opacity-switchTrack)',
}),
diff --git a/packages/mui-material/src/styles/CssVarsProvider.js b/packages/mui-material/src/styles/CssVarsProvider.tsx
similarity index 76%
rename from packages/mui-material/src/styles/CssVarsProvider.js
rename to packages/mui-material/src/styles/CssVarsProvider.tsx
index b1708765bd6b89..76df9707a2f323 100644
--- a/packages/mui-material/src/styles/CssVarsProvider.js
+++ b/packages/mui-material/src/styles/CssVarsProvider.tsx
@@ -1,6 +1,9 @@
/* eslint-disable @typescript-eslint/naming-convention */
import { unstable_createCssVarsProvider as createCssVarsProvider } from '@mui/system';
-import experimental_extendTheme from './experimental_extendTheme';
+import experimental_extendTheme, {
+ SupportedColorScheme,
+ CssVarsTheme,
+} from './experimental_extendTheme';
import createTypography from './createTypography';
const defaultTheme = experimental_extendTheme();
@@ -9,7 +12,7 @@ const {
CssVarsProvider: Experimental_CssVarsProvider,
useColorScheme,
getInitColorSchemeScript,
-} = createCssVarsProvider({
+} = createCssVarsProvider({
theme: defaultTheme,
attribute: 'data-mui-color-scheme',
modeStorageKey: 'mui-mode',
@@ -28,7 +31,8 @@ const {
return newTheme;
},
shouldSkipGeneratingVar: (keys) =>
- !!keys[0].match(/(typography|mixins|breakpoints|direction|transitions)/),
+ !!keys[0].match(/(typography|mixins|breakpoints|direction|transitions)/) ||
+ (keys[0] === 'palette' && !!keys[1]?.match(/(mode|contrastThreshold|tonalOffset)/)),
});
export { useColorScheme, getInitColorSchemeScript, Experimental_CssVarsProvider };
diff --git a/packages/mui-material/src/styles/createPalette.d.ts b/packages/mui-material/src/styles/createPalette.d.ts
index 22fe76f2500fae..5e28388e36a8bb 100644
--- a/packages/mui-material/src/styles/createPalette.d.ts
+++ b/packages/mui-material/src/styles/createPalette.d.ts
@@ -105,95 +105,6 @@ export interface Channels {
contrastTextChannel: string;
}
-export interface PaletteWithChannels {
- common: CommonColors & {
- background: string;
- onBackground: string;
- backgroundChannel: string;
- onBackgroundChannel: string;
- };
- mode: PaletteMode;
- contrastThreshold: number;
- tonalOffset: PaletteTonalOffset;
- primary: PaletteColor & Channels;
- secondary: PaletteColor & Channels;
- error: PaletteColor & Channels;
- warning: PaletteColor & Channels;
- info: PaletteColor & Channels;
- success: PaletteColor & Channels;
- grey: Color & { darkChannel: string };
- text: TypeText & { primaryChannel: string; secondaryChannel: string };
- divider: TypeDivider;
- dividerChannel: TypeDivider;
- action: TypeAction & { activeChannel: string; selectedChannel: string };
- background: TypeBackground;
- getContrastText: (background: string) => string;
- augmentColor: (options: PaletteAugmentColorOptions) => PaletteColor;
- // component tokens
- AppBar: {
- defaultBg: string;
- darkBg: string;
- darkColor: string;
- };
- Avatar: {
- defaultBg: string;
- };
- Chip: {
- defaultBorder: string;
- defaultAvatarColor: string;
- defaultIconColor: string;
- };
- FilledInput: {
- bg: string;
- hoverBg: string;
- disabledBg: string;
- };
- LinearProgress: {
- primaryBg: string;
- secondaryBg: string;
- errorBg: string;
- infoBg: string;
- successBg: string;
- warningBg: string;
- };
- Slider: {
- primaryTrack: string;
- secondaryTrack: string;
- errorTrack: string;
- infoTrack: string;
- successTrack: string;
- warningTrack: string;
- };
- SnackbarContent: {
- bg: string;
- };
- SpeedDialAction: {
- fabHoverBg: string;
- };
- StepConnector: {
- border: string;
- };
- StepContent: {
- border: string;
- };
- Switch: {
- defaultColor: string;
- defaultDisabledColor: string;
- primaryDisabledColor: string;
- secondaryDisabledColor: string;
- errorDisabledColor: string;
- infoDisabledColor: string;
- successDisabledColor: string;
- warningDisabledColor: string;
- };
- TableCell: {
- border: string;
- };
- Tooltip: {
- bg: string;
- };
-}
-
export type PartialTypeObject = { [P in keyof TypeObject]?: Partial };
export interface PaletteOptions {
diff --git a/packages/mui-material/src/styles/createPalette.spec.ts b/packages/mui-material/src/styles/createPalette.spec.ts
index e7d73a2ed7e770..1bcfc61c8cd254 100644
--- a/packages/mui-material/src/styles/createPalette.spec.ts
+++ b/packages/mui-material/src/styles/createPalette.spec.ts
@@ -17,5 +17,5 @@ import { createTheme, Theme } from '@mui/material/styles';
}
{
- const themeCommons: Theme['palette']['common'] = common;
+ const themeCommons: Pick = common;
}
diff --git a/packages/mui-material/src/styles/experimental_extendTheme.d.ts b/packages/mui-material/src/styles/experimental_extendTheme.d.ts
index 94e49691f1aa05..a8af5506ca007f 100644
--- a/packages/mui-material/src/styles/experimental_extendTheme.d.ts
+++ b/packages/mui-material/src/styles/experimental_extendTheme.d.ts
@@ -1,12 +1,9 @@
/* eslint-disable @typescript-eslint/naming-convention */
-import { ThemeOptions as SystemThemeOptions, Theme as SystemTheme } from '@mui/system';
import { OverridableStringUnion } from '@mui/types';
-import { Mixins, MixinsOptions } from './createMixins';
+import { ThemeOptions, Theme } from './createTheme';
import { Palette, PaletteOptions } from './createPalette';
-import { Typography, TypographyOptions } from './createTypography';
import { Shadows } from './shadows';
-import { Transitions, TransitionsOptions } from './createTransitions';
-import { ZIndex, ZIndexOptions } from './zIndex';
+import { ZIndex } from './zIndex';
import { Components } from './components';
/**
@@ -35,8 +32,8 @@ export type ExtendedColorScheme = OverridableStringUnion {
- mixins?: MixinsOptions;
- components?: Components;
- colorSchemes?: Record<
- SupportedColorScheme,
- {
- palette?: PaletteOptions;
- opacity?: Partial;
- overlays?: Overlays;
- }
- >;
- shadows?: Shadows;
- transitions?: TransitionsOptions;
- typography?: TypographyOptions | ((palette: Palette) => TypographyOptions);
- zIndex?: ZIndexOptions;
- unstable_strictMode?: boolean;
+export interface PaletteCommonChannel {
+ background: string;
+ backgroundChannel: string;
+ onBackground: string;
+ onBackgroundChannel: string;
+}
+
+export interface PaletteColorChannel {
+ mainChannel: string;
+ lightChannel: string;
+ darkChannel: string;
+ contrastTextChannel: string;
+}
+
+export interface PaletteActionChannel {
+ activeChannel: string;
+ selectedChannel: string;
+}
+
+export interface PaletteTextChannel {
+ primaryChannel: string;
+ secondaryChannel: string;
+}
+
+export interface PaletteAlert {
+ errorColor: string;
+ infoColor: string;
+ successColor: string;
+ warningColor: string;
+ errorFilledBg: string;
+ infoFilledBg: string;
+ successFilledBg: string;
+ warningFilledBg: string;
+ errorFilledColor: string;
+ infoFilledColor: string;
+ successFilledColor: string;
+ warningFilledColor: string;
+ errorStandardBg: string;
+ infoStandardBg: string;
+ successStandardBg: string;
+ warningStandardBg: string;
+ errorIconColor: string;
+ infoIconColor: string;
+ successIconColor: string;
+ warningIconColor: string;
+}
+
+export interface PaletteAppBar {
+ defaultBg: string;
+ darkBg: string;
+ darkColor: string;
+}
+
+export interface PaletteAvatar {
+ defaultBg: string;
+}
+
+export interface PaletteChip {
+ defaultBorder: string;
+ defaultAvatarColor: string;
+ defaultIconColor: string;
+}
+
+export interface PaletteFilledInput {
+ bg: string;
+ hoverBg: string;
+ disabledBg: string;
+}
+
+export interface PaletteLinearProgress {
+ primaryBg: string;
+ secondaryBg: string;
+ errorBg: string;
+ infoBg: string;
+ successBg: string;
+ warningBg: string;
+}
+
+export interface PaletteSkeleton {
+ bg: string;
+}
+
+export interface PaletteSlider {
+ primaryTrack: string;
+ secondaryTrack: string;
+ errorTrack: string;
+ infoTrack: string;
+ successTrack: string;
+ warningTrack: string;
+}
+
+export interface PaletteSnackbarContent {
+ bg: string;
+}
+
+export interface PaletteSpeedDialAction {
+ fabHoverBg: string;
+}
+
+export interface PaletteStepConnector {
+ border: string;
+}
+
+export interface PaletteStepContent {
+ border: string;
+}
+
+export interface PaletteSwitch {
+ defaultColor: string;
+ defaultDisabledColor: string;
+ primaryDisabledColor: string;
+ secondaryDisabledColor: string;
+ errorDisabledColor: string;
+ infoDisabledColor: string;
+ successDisabledColor: string;
+ warningDisabledColor: string;
+}
+
+export interface PaletteTableCell {
+ border: string;
+}
+
+export interface PaletteTooltip {
+ bg: string;
+}
+
+// The Palette should be sync with `../themeCssVarsAugmentation/index.d.ts`
+export interface ColorSystemOptions {
+ palette?: Omit & {
+ common?: Partial;
+ primary?: Partial;
+ secondary?: Partial;
+ error?: Partial;
+ info?: Partial;
+ success?: Partial;
+ text?: Partial;
+ dividerChannel?: Partial;
+ action?: Partial;
+ Alert?: Partial;
+ AppBar?: Partial;
+ Avatar?: Partial;
+ Chip?: Partial;
+ FilledInput?: Partial;
+ LinearProgress?: Partial;
+ Skeleton?: Partial;
+ Slider?: Partial;
+ SnackbarContent?: Partial;
+ SpeedDialAction?: Partial;
+ StepConnector?: Partial;
+ StepContent?: Partial;
+ Switch?: Partial;
+ TableCell?: Partial;
+ Tooltip?: Partial;
+ };
+ opacity?: Partial;
+ overlays?: Overlays;
+}
+
+// The Palette should be sync with `../themeCssVarsAugmentation/index.d.ts`
+export interface ColorSystem {
+ palette: Palette & {
+ colorScheme: SupportedColorScheme;
+ common: PaletteCommonChannel;
+ primary: PaletteColorChannel;
+ secondary: PaletteColorChannel;
+ error: PaletteColorChannel;
+ info: PaletteColorChannel;
+ success: PaletteColorChannel;
+ text: PaletteTextChannel;
+ dividerChannel: string;
+ action: PaletteActionChannel;
+ Alert: PaletteAlert;
+ AppBar: PaletteAppBar;
+ Avatar: PaletteAvatar;
+ Chip: PaletteChip;
+ FilledInput: PaletteFilledInput;
+ LinearProgress: PaletteLinearProgress;
+ Skeleton: PaletteSkeleton;
+ Slider: PaletteSlider;
+ SnackbarContent: PaletteSnackbarContent;
+ SpeedDialAction: PaletteSpeedDialAction;
+ StepConnector: PaletteStepConnector;
+ StepContent: PaletteStepContent;
+ Switch: PaletteSwitch;
+ TableCell: PaletteTableCell;
+ Tooltip: PaletteTooltip;
+ };
+ opacity: Opacity;
+ overlays: Overlays;
+}
+
+export interface CssVarsThemeOptions extends Omit {
+ components?: Components>;
+ colorSchemes?: Partial>;
}
-interface BaseTheme extends SystemTheme {
- mixins: Mixins;
- palette: Palette;
+// should not include keys defined in `shouldSkipGeneratingVar` and have value typeof function
+interface ThemeVars {
+ palette: Omit<
+ ColorSystem['palette'],
+ | 'colorScheme'
+ | 'mode'
+ | 'contrastThreshold'
+ | 'tonalOffset'
+ | 'getContrastText'
+ | 'augmentColor'
+ >;
opacity: Opacity;
overlays: Overlays;
shadows: Shadows;
- transitions: Transitions;
- typography: Typography;
zIndex: ZIndex;
- unstable_strictMode?: boolean;
- colorSchemes: Record;
+ shape: Theme['shape'];
}
-// shut off automatic exporting for the `BaseTheme` above
+// shut off automatic exporting for the `ThemeVars` above
export {};
-/**
- * Our [TypeScript guide on theme customization](https://mui.com/material-ui/guides/typescript/#customization-of-theme) explains in detail how you would add custom properties.
- */
-export interface Theme extends BaseTheme {
- components?: Components;
+export interface CssVarsTheme extends Omit, ColorSystem {
+ components?: Components>;
+ colorSchemes: Record;
+ prefix: string;
+ vars: ThemeVars;
+ getCssVar: (
+ field: string | CustomVar,
+ ...vars: Array
+ ) => string;
+ getColorSchemeSelector: (colorScheme: SupportedColorScheme) => string;
}
/**
@@ -114,4 +299,7 @@ export interface Theme extends BaseTheme {
* @param args Deep merge the arguments with the about to be returned theme.
* @returns A complete, ready-to-use theme object.
*/
-export default function experimental_extendTheme(options?: ThemeOptions, ...args: object[]): Theme;
+export default function experimental_extendTheme(
+ options?: CssVarsThemeOptions,
+ ...args: object[]
+): CssVarsTheme;
diff --git a/packages/mui-material/src/styles/experimental_extendTheme.js b/packages/mui-material/src/styles/experimental_extendTheme.js
index 3ca76fa36c4bf1..d2184c2ad5eed8 100644
--- a/packages/mui-material/src/styles/experimental_extendTheme.js
+++ b/packages/mui-material/src/styles/experimental_extendTheme.js
@@ -43,7 +43,7 @@ export default function extendTheme(options = {}, ...args) {
palette: lightPalette,
opacity: {
inputPlaceholder: 0.42,
- inputTouchBottomLine: 0.42,
+ inputUnderline: 0.42,
switchTrackDisabled: 0.12,
switchTrack: 0.38,
...colorSchemesInput.light?.opacity,
@@ -55,7 +55,7 @@ export default function extendTheme(options = {}, ...args) {
palette: darkPalette,
opacity: {
inputPlaceholder: 0.5,
- inputTouchBottomLine: 0.7,
+ inputUnderline: 0.7,
switchTrackDisabled: 0.2,
switchTrack: 0.3,
...colorSchemesInput.dark?.opacity,
@@ -79,6 +79,7 @@ export default function extendTheme(options = {}, ...args) {
// assign component variables
assignNode(palette, [
+ 'Alert',
'AppBar',
'Avatar',
'Chip',
@@ -95,6 +96,34 @@ export default function extendTheme(options = {}, ...args) {
'Tooltip',
]);
if (key === 'light') {
+ setColor(palette.Alert, 'errorColor', darken(palette.error.light, 0.6));
+ setColor(palette.Alert, 'infoColor', darken(palette.info.light, 0.6));
+ setColor(palette.Alert, 'successColor', darken(palette.success.light, 0.6));
+ setColor(palette.Alert, 'warningColor', darken(palette.warning.light, 0.6));
+ setColor(palette.Alert, 'errorFilledBg', 'var(--mui-palette-error-main)');
+ setColor(palette.Alert, 'infoFilledBg', 'var(--mui-palette-info-main)');
+ setColor(palette.Alert, 'successFilledBg', 'var(--mui-palette-success-main)');
+ setColor(palette.Alert, 'warningFilledBg', 'var(--mui-palette-warning-main)');
+ setColor(palette.Alert, 'errorFilledColor', lightPalette.getContrastText(palette.error.main));
+ setColor(palette.Alert, 'infoFilledColor', lightPalette.getContrastText(palette.info.main));
+ setColor(
+ palette.Alert,
+ 'successFilledColor',
+ lightPalette.getContrastText(palette.success.main),
+ );
+ setColor(
+ palette.Alert,
+ 'warningFilledColor',
+ lightPalette.getContrastText(palette.warning.main),
+ );
+ setColor(palette.Alert, 'errorStandardBg', lighten(palette.error.light, 0.9));
+ setColor(palette.Alert, 'infoStandardBg', lighten(palette.info.light, 0.9));
+ setColor(palette.Alert, 'successStandardBg', lighten(palette.success.light, 0.9));
+ setColor(palette.Alert, 'warningStandardBg', lighten(palette.warning.light, 0.9));
+ setColor(palette.Alert, 'errorIconColor', 'var(--mui-palette-error-light)');
+ setColor(palette.Alert, 'infoIconColor', 'var(--mui-palette-info-light)');
+ setColor(palette.Alert, 'successIconColor', 'var(--mui-palette-success-light)');
+ setColor(palette.Alert, 'warningIconColor', 'var(--mui-palette-warning-light)');
setColor(palette.AppBar, 'defaultBg', 'var(--mui-palette-grey-100)');
setColor(palette.Avatar, 'defaultBg', 'var(--mui-palette-grey-400)');
setColor(palette.Chip, 'defaultBorder', 'var(--mui-palette-grey-400)');
@@ -131,6 +160,34 @@ export default function extendTheme(options = {}, ...args) {
setColor(palette.TableCell, 'border', lighten(alpha(palette.divider, 1), 0.88));
setColor(palette.Tooltip, 'bg', alpha(palette.grey[700], 0.92));
} else {
+ setColor(palette.Alert, 'errorColor', lighten(palette.error.light, 0.6));
+ setColor(palette.Alert, 'infoColor', lighten(palette.info.light, 0.6));
+ setColor(palette.Alert, 'successColor', lighten(palette.success.light, 0.6));
+ setColor(palette.Alert, 'warningColor', lighten(palette.warning.light, 0.6));
+ setColor(palette.Alert, 'errorFilledBg', 'var(--mui-palette-error-dark)');
+ setColor(palette.Alert, 'infoFilledBg', 'var(--mui-palette-info-dark)');
+ setColor(palette.Alert, 'successFilledBg', 'var(--mui-palette-success-dark)');
+ setColor(palette.Alert, 'warningFilledBg', 'var(--mui-palette-warning-dark)');
+ setColor(palette.Alert, 'errorFilledColor', darkPalette.getContrastText(palette.error.dark));
+ setColor(palette.Alert, 'infoFilledColor', darkPalette.getContrastText(palette.info.dark));
+ setColor(
+ palette.Alert,
+ 'successFilledColor',
+ darkPalette.getContrastText(palette.success.dark),
+ );
+ setColor(
+ palette.Alert,
+ 'warningFilledColor',
+ darkPalette.getContrastText(palette.warning.dark),
+ );
+ setColor(palette.Alert, 'errorStandardBg', darken(palette.error.light, 0.9));
+ setColor(palette.Alert, 'infoStandardBg', darken(palette.info.light, 0.9));
+ setColor(palette.Alert, 'successStandardBg', darken(palette.success.light, 0.9));
+ setColor(palette.Alert, 'warningStandardBg', darken(palette.warning.light, 0.9));
+ setColor(palette.Alert, 'errorIconColor', 'var(--mui-palette-error-main)');
+ setColor(palette.Alert, 'infoIconColor', 'var(--mui-palette-info-main)');
+ setColor(palette.Alert, 'successIconColor', 'var(--mui-palette-success-main)');
+ setColor(palette.Alert, 'warningIconColor', 'var(--mui-palette-warning-main)');
setColor(palette.AppBar, 'defaultBg', 'var(--mui-palette-grey-900)');
setColor(palette.AppBar, 'darkBg', 'var(--mui-palette-background-paper)'); // specific for dark mode
setColor(palette.AppBar, 'darkColor', 'var(--mui-palette-text-primary)'); // specific for dark mode
diff --git a/packages/mui-material/src/styles/experimental_extendTheme.test.js b/packages/mui-material/src/styles/experimental_extendTheme.test.js
index a0c27dd65e8d13..57dd62f51bc7f5 100644
--- a/packages/mui-material/src/styles/experimental_extendTheme.test.js
+++ b/packages/mui-material/src/styles/experimental_extendTheme.test.js
@@ -203,13 +203,13 @@ describe('experimental_extendTheme', () => {
const theme = extendTheme();
expect(theme.colorSchemes.light.opacity).to.deep.equal({
inputPlaceholder: 0.42,
- inputTouchBottomLine: 0.42,
+ inputUnderline: 0.42,
switchTrackDisabled: 0.12,
switchTrack: 0.38,
});
expect(theme.colorSchemes.dark.opacity).to.deep.equal({
inputPlaceholder: 0.5,
- inputTouchBottomLine: 0.7,
+ inputUnderline: 0.7,
switchTrackDisabled: 0.2,
switchTrack: 0.3,
});
@@ -232,11 +232,11 @@ describe('experimental_extendTheme', () => {
});
expect(theme.colorSchemes.light.opacity).to.deep.include({
inputPlaceholder: 1,
- inputTouchBottomLine: 0.42,
+ inputUnderline: 0.42,
});
expect(theme.colorSchemes.dark.opacity).to.deep.include({
inputPlaceholder: 0.2,
- inputTouchBottomLine: 0.7,
+ inputUnderline: 0.7,
});
});
});
diff --git a/packages/mui-material/src/styles/index.d.ts b/packages/mui-material/src/styles/index.d.ts
index eb9d652af76161..19c63d6e1dabde 100644
--- a/packages/mui-material/src/styles/index.d.ts
+++ b/packages/mui-material/src/styles/index.d.ts
@@ -94,4 +94,27 @@ export { default as withTheme } from './withTheme';
export * from './CssVarsProvider';
export { default as experimental_extendTheme } from './experimental_extendTheme';
-export * from './experimental_extendTheme';
+export type {
+ ColorSchemeOverrides,
+ SupportedColorScheme,
+ Opacity,
+ Overlays,
+ PaletteActionChannel,
+ PaletteAppBar,
+ PaletteAvatar,
+ PaletteChip,
+ PaletteColorChannel,
+ PaletteCommonChannel,
+ PaletteFilledInput,
+ PaletteLinearProgress,
+ PaletteSlider,
+ PaletteSnackbarContent,
+ PaletteStepConnector,
+ PaletteStepContent,
+ PaletteSwitch,
+ PaletteTableCell,
+ PaletteTextChannel,
+ PaletteTooltip,
+ CssVarsThemeOptions,
+ CssVarsTheme,
+} from './experimental_extendTheme';
diff --git a/packages/mui-material/src/themeCssVarsAugmentation/index.d.ts b/packages/mui-material/src/themeCssVarsAugmentation/index.d.ts
new file mode 100644
index 00000000000000..6941f947756341
--- /dev/null
+++ b/packages/mui-material/src/themeCssVarsAugmentation/index.d.ts
@@ -0,0 +1,61 @@
+import type {
+ CssVarsTheme,
+ ColorSystem,
+ PaletteCommonChannel,
+ PaletteColorChannel,
+ PaletteTextChannel,
+ PaletteActionChannel,
+ PaletteAppBar,
+ PaletteAvatar,
+ PaletteChip,
+ PaletteFilledInput,
+ PaletteLinearProgress,
+ PaletteSlider,
+ PaletteSnackbarContent,
+ PaletteStepConnector,
+ PaletteStepContent,
+ PaletteSwitch,
+ PaletteTableCell,
+ PaletteTooltip,
+} from '../styles/experimental_extendTheme';
+
+/**
+ * Enhance the theme types to include new properties from the CssVarsProvider.
+ * The theme is typed with CSS variables in `styled`, `sx`, `useTheme`, etc.
+ */
+declare module '@mui/material/styles' {
+ // The palette must be extended in each node.
+ interface Theme extends Omit {
+ prefix: string;
+ vars: CssVarsTheme['vars'];
+ getCssVar: CssVarsTheme['getCssVar'];
+ getColorSchemeSelector: CssVarsTheme['getColorSchemeSelector'];
+ }
+
+ // The extended Palette should be in sync with `extendTheme`
+ interface Palette {
+ dividerChannel: string;
+ AppBar: PaletteAppBar;
+ Avatar: PaletteAvatar;
+ Chip: PaletteChip;
+ FilledInput: PaletteFilledInput;
+ LinearProgress: PaletteLinearProgress;
+ Slider: PaletteSlider;
+ SnackbarContent: PaletteSnackbarContent;
+ StepConnector: PaletteStepConnector;
+ StepContent: PaletteStepContent;
+ Switch: PaletteSwitch;
+ TableCell: PaletteTableCell;
+ Tooltip: PaletteTooltip;
+ }
+}
+
+declare module '@mui/material/styles/createPalette' {
+ interface CommonColors extends PaletteCommonChannel {}
+
+ interface PaletteColor extends PaletteColorChannel {}
+
+ interface TypeText extends PaletteTextChannel {}
+
+ interface TypeAction extends PaletteActionChannel {}
+}
diff --git a/packages/mui-material/test/typescript/moduleAugmentation/themeCssVariables.spec.tsx b/packages/mui-material/test/typescript/moduleAugmentation/themeCssVariables.spec.tsx
new file mode 100644
index 00000000000000..089272e6e61d38
--- /dev/null
+++ b/packages/mui-material/test/typescript/moduleAugmentation/themeCssVariables.spec.tsx
@@ -0,0 +1,45 @@
+// testing docs/src/pages/customization/theme-components/theme-components.md
+import { styled, experimental_extendTheme as extendTheme } from '@mui/material/styles';
+import type {} from '@mui/material/themeCssVarsAugmentation';
+
+declare module '@mui/material/styles' {
+ interface PaletteOptions {
+ gradient: {
+ default: string;
+ };
+ }
+
+ interface Palette {
+ gradient: {
+ default: string;
+ };
+ }
+}
+
+const StyledComponent = styled('button')(({ theme }) => ({
+ background: theme.vars.palette.gradient.default,
+}));
+
+const StyledComponent2 = styled('button')(({ theme }) => ({
+ // @ts-expect-error `default2` is not defined
+ background: theme.vars.palette.gradient.default2,
+}));
+
+const theme = extendTheme({
+ colorSchemes: {
+ light: {
+ palette: {
+ gradient: {
+ default: '',
+ },
+ },
+ },
+ dark: {
+ palette: {
+ gradient: {
+ default: '',
+ },
+ },
+ },
+ },
+});
diff --git a/packages/mui-material/test/typescript/moduleAugmentation/themeCssVariables.tsconfig.json b/packages/mui-material/test/typescript/moduleAugmentation/themeCssVariables.tsconfig.json
new file mode 100644
index 00000000000000..46d8e363821a69
--- /dev/null
+++ b/packages/mui-material/test/typescript/moduleAugmentation/themeCssVariables.tsconfig.json
@@ -0,0 +1,4 @@
+{
+ "extends": "../../../../../tsconfig",
+ "files": ["themeCssVariables.spec.tsx"]
+}
diff --git a/packages/mui-system/package.json b/packages/mui-system/package.json
index 98a13aa22815a6..742f0747298699 100644
--- a/packages/mui-system/package.json
+++ b/packages/mui-system/package.json
@@ -1,6 +1,6 @@
{
"name": "@mui/system",
- "version": "5.8.4",
+ "version": "5.8.5",
"private": false,
"author": "MUI Team",
"description": "CSS utilities for rapidly laying out custom designs.",
diff --git a/packages/mui-system/src/cssVars/createCssVarsProvider.js b/packages/mui-system/src/cssVars/createCssVarsProvider.js
index 8bdc1b88d46ea8..a6046484906089 100644
--- a/packages/mui-system/src/cssVars/createCssVarsProvider.js
+++ b/packages/mui-system/src/cssVars/createCssVarsProvider.js
@@ -305,6 +305,7 @@ export default function createCssVarsProvider(options) {
attribute: defaultAttribute,
colorSchemeStorageKey: defaultColorSchemeStorageKey,
modeStorageKey: defaultModeStorageKey,
+ enableColorScheme: designSystemEnableColorScheme,
...params,
});
diff --git a/packages/mui-system/src/cssVars/getInitColorSchemeScript.tsx b/packages/mui-system/src/cssVars/getInitColorSchemeScript.tsx
index 7660a81d353582..100e04d2d2937a 100644
--- a/packages/mui-system/src/cssVars/getInitColorSchemeScript.tsx
+++ b/packages/mui-system/src/cssVars/getInitColorSchemeScript.tsx
@@ -5,6 +5,11 @@ export const DEFAULT_COLOR_SCHEME_STORAGE_KEY = 'color-scheme';
export const DEFAULT_ATTRIBUTE = 'data-color-scheme';
export interface GetInitColorSchemeScriptOptions {
+ /**
+ * Indicate to the browser which color scheme is used (light or dark) for rendering built-in UI
+ * @default true
+ */
+ enableColorScheme?: boolean;
/**
* If `true`, the initial color scheme is set to the user's prefers-color-scheme mode
* @default false
@@ -42,6 +47,7 @@ export interface GetInitColorSchemeScriptOptions {
export default function getInitColorSchemeScript(options?: GetInitColorSchemeScriptOptions) {
const {
+ enableColorScheme = true,
enableSystem = false,
defaultLightColorScheme = 'light',
defaultDarkColorScheme = 'dark',
@@ -56,13 +62,16 @@ export default function getInitColorSchemeScript(options?: GetInitColorSchemeScr
dangerouslySetInnerHTML={{
__html: `(function() { try {
var mode = localStorage.getItem('${modeStorageKey}');
+ var cssColorScheme = mode;
var colorScheme = '';
if (mode === 'system' || (!mode && !!${enableSystem})) {
// handle system mode
var mql = window.matchMedia('(prefers-color-scheme: dark)');
if (mql.matches) {
+ cssColorScheme = 'dark';
colorScheme = localStorage.getItem('${colorSchemeStorageKey}-dark') || '${defaultDarkColorScheme}';
} else {
+ cssColorScheme = 'light';
colorScheme = localStorage.getItem('${colorSchemeStorageKey}-light') || '${defaultLightColorScheme}';
}
}
@@ -75,6 +84,9 @@ export default function getInitColorSchemeScript(options?: GetInitColorSchemeScr
if (colorScheme) {
${colorSchemeNode}.setAttribute('${attribute}', colorScheme);
}
+ if (${enableColorScheme} && !!cssColorScheme) {
+ ${colorSchemeNode}.style.setProperty('color-scheme', cssColorScheme);
+ }
} catch (e) {} })();`,
}}
/>
diff --git a/packages/mui-utils/src/generateUtilityClass/generateUtilityClass.test.ts b/packages/mui-utils/src/generateUtilityClass/generateUtilityClass.test.ts
index ec4a28cb0b510b..acf655563d8925 100644
--- a/packages/mui-utils/src/generateUtilityClass/generateUtilityClass.test.ts
+++ b/packages/mui-utils/src/generateUtilityClass/generateUtilityClass.test.ts
@@ -48,4 +48,8 @@ describe('generateUtilityClass', () => {
expect(generateUtilityClass('MuiTest', 'selected')).to.equal('Mui-selected');
});
});
+
+ it('custom state prefix', () => {
+ expect(generateUtilityClass('JoyButton', 'focusVisible', 'Joy')).to.equal('Joy-focusVisible');
+ });
});
diff --git a/packages/mui-utils/src/generateUtilityClass/generateUtilityClass.ts b/packages/mui-utils/src/generateUtilityClass/generateUtilityClass.ts
index 711436453acfe3..4d5def219b690c 100644
--- a/packages/mui-utils/src/generateUtilityClass/generateUtilityClass.ts
+++ b/packages/mui-utils/src/generateUtilityClass/generateUtilityClass.ts
@@ -13,19 +13,25 @@ export type GlobalStateSlot =
| 'selected';
const globalStateClassesMapping: Record = {
- active: 'Mui-active',
- checked: 'Mui-checked',
- completed: 'Mui-completed',
- disabled: 'Mui-disabled',
- error: 'Mui-error',
- expanded: 'Mui-expanded',
- focused: 'Mui-focused',
- focusVisible: 'Mui-focusVisible',
- required: 'Mui-required',
- selected: 'Mui-selected',
+ active: 'active',
+ checked: 'checked',
+ completed: 'completed',
+ disabled: 'disabled',
+ error: 'error',
+ expanded: 'expanded',
+ focused: 'focused',
+ focusVisible: 'focusVisible',
+ required: 'required',
+ selected: 'selected',
};
-export default function generateUtilityClass(componentName: string, slot: string): string {
+export default function generateUtilityClass(
+ componentName: string,
+ slot: string,
+ globalStatePrefix = 'Mui',
+): string {
const globalStateClass = globalStateClassesMapping[slot as GlobalStateSlot];
- return globalStateClass || `${ClassNameGenerator.generate(componentName)}-${slot}`;
+ return globalStateClass
+ ? `${globalStatePrefix}-${globalStateClass}`
+ : `${ClassNameGenerator.generate(componentName)}-${slot}`;
}
diff --git a/packages/mui-utils/src/generateUtilityClasses/generateUtilityClasses.ts b/packages/mui-utils/src/generateUtilityClasses/generateUtilityClasses.ts
index 61973f3aa9a26c..235916d2ea8f1e 100644
--- a/packages/mui-utils/src/generateUtilityClasses/generateUtilityClasses.ts
+++ b/packages/mui-utils/src/generateUtilityClasses/generateUtilityClasses.ts
@@ -3,11 +3,12 @@ import generateUtilityClass from '../generateUtilityClass';
export default function generateUtilityClasses(
componentName: string,
slots: T[],
+ globalStatePrefix = 'Mui',
): Record {
const result: Record = {};
slots.forEach((slot) => {
- result[slot] = generateUtilityClass(componentName, slot);
+ result[slot] = generateUtilityClass(componentName, slot, globalStatePrefix);
});
return result;
diff --git a/packages/typescript-to-proptypes/package.json b/packages/typescript-to-proptypes/package.json
index cc0748b0867a5d..9cc9040d47100d 100644
--- a/packages/typescript-to-proptypes/package.json
+++ b/packages/typescript-to-proptypes/package.json
@@ -23,7 +23,7 @@
"@types/babel__core": "^7.1.19",
"@types/doctrine": "^0.0.5",
"@types/lodash": "^4.14.182",
- "@types/node": "^16.11.39",
+ "@types/node": "^16.11.41",
"@types/prettier": "^2.6.3",
"@types/react": "^17.0.45",
"@types/uuid": "^8.3.4",
diff --git a/test/utils/createDOM.js b/test/utils/createDOM.js
index 050e84a9bad60a..7a54d74d369f91 100644
--- a/test/utils/createDOM.js
+++ b/test/utils/createDOM.js
@@ -16,6 +16,7 @@ const whitelist = [
'Node',
'Performance',
'document',
+ 'DocumentFragment',
];
const blacklist = ['sessionStorage', 'localStorage'];
diff --git a/yarn.lock b/yarn.lock
index e302f39171b588..5b427ae4c7f549 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1212,62 +1212,54 @@
resolved "https://registry.yarnpkg.com/@bcoe/v8-coverage/-/v8-coverage-0.2.3.tgz#75a2e8b51cb758a7553d6804a5932d7aace75c39"
integrity sha512-0hYQ8SB4Db5zvZB4axdMHGwEaQjkZzFjQiN9LVYvIFB2nSUHW9tYpxWriPrWDASIxiaXax83REcLxuSdnGPZtw==
-"@chakra-ui/color-mode@1.4.8":
- version "1.4.8"
- resolved "https://registry.yarnpkg.com/@chakra-ui/color-mode/-/color-mode-1.4.8.tgz#e5367b909f5b4c782b239f9d37d4cf1a44c28559"
- integrity sha512-iD4126DVQi06c6ARr3uf3R2rtEu8aBVjW8rhZ+lOsV26Z15iCJA7OAut13Xu06fcZvgjSB/ChDy6Sx9sV9UjHA==
+"@chakra-ui/color-mode@2.0.4":
+ version "2.0.4"
+ resolved "https://registry.yarnpkg.com/@chakra-ui/color-mode/-/color-mode-2.0.4.tgz#143c1c0baa5f8b21a491776fc58107675075c5f8"
+ integrity sha512-DIR6CSPlkmi92LDR3IhjIediLk7GFWttlTUvJQP06ZUvN+iCpd5TjgchxOYzqlP4T9W0L62eZXsluOxmRF/JSQ==
dependencies:
- "@chakra-ui/hooks" "1.9.1"
- "@chakra-ui/react-env" "1.1.6"
- "@chakra-ui/utils" "1.10.4"
+ "@chakra-ui/hooks" "2.0.2"
+ "@chakra-ui/utils" "2.0.2"
-"@chakra-ui/hooks@1.9.1":
- version "1.9.1"
- resolved "https://registry.yarnpkg.com/@chakra-ui/hooks/-/hooks-1.9.1.tgz#7a00659e6bb4d56cf56022071eca0b77a7df1ac1"
- integrity sha512-SEeh1alDKzrP9gMLWMnXOUDBQDKF/URL6iTmkumTn6vhawWNla6sPrcMyoCzWdMzwUhZp3QNtCKbUm7dxBXvPw==
+"@chakra-ui/hooks@2.0.2":
+ version "2.0.2"
+ resolved "https://registry.yarnpkg.com/@chakra-ui/hooks/-/hooks-2.0.2.tgz#6153f33957f23b8f156b7ce4ce1605f89e67c1b5"
+ integrity sha512-3B4zsl51tevmO6T6xUKcclwxf4FClKtScaNvb8jMmVczTGRL7WhZ6LxXeYUJMms11C8W9uZczE5yXSP0qweeAw==
dependencies:
- "@chakra-ui/react-utils" "1.2.3"
- "@chakra-ui/utils" "1.10.4"
+ "@chakra-ui/react-utils" "2.0.1"
+ "@chakra-ui/utils" "2.0.2"
compute-scroll-into-view "1.0.14"
copy-to-clipboard "3.3.1"
-"@chakra-ui/react-env@1.1.6":
- version "1.1.6"
- resolved "https://registry.yarnpkg.com/@chakra-ui/react-env/-/react-env-1.1.6.tgz#9915b02fd1f8ca62ccf578eaec793f1c4dea78b0"
- integrity sha512-L90LNvCfe04FTkN9OPok/o2e60zLJNBH8Im/5dUHvqy7dXLXok8ZDad5vEL46XmGbhe7O8fbxhG6FmAYdcCHrQ==
- dependencies:
- "@chakra-ui/utils" "1.10.4"
-
-"@chakra-ui/react-utils@1.2.3":
- version "1.2.3"
- resolved "https://registry.yarnpkg.com/@chakra-ui/react-utils/-/react-utils-1.2.3.tgz#3356c9299bc8faada8fac6c5886ca65ec95bb5be"
- integrity sha512-r8pUwCVVB7UPhb0AiRa9ZzSp4xkMz64yIeJ4O4aGy4WMw7TRH4j4QkbkE1YC9tQitrXrliOlvx4WWJR4VyiGpw==
+"@chakra-ui/react-utils@2.0.1":
+ version "2.0.1"
+ resolved "https://registry.yarnpkg.com/@chakra-ui/react-utils/-/react-utils-2.0.1.tgz#aebf12ee9f71fb7a27183d556131177f9ce745c8"
+ integrity sha512-xLiTn7WeUo2e3zvo8zUGpICgIGsLCPpkVbjEKhr1jAV41urqEtwlLc6uGir595OYqAC8zFDqs4HXhHouqNEtiw==
dependencies:
- "@chakra-ui/utils" "^1.10.4"
+ "@chakra-ui/utils" "^2.0.2"
-"@chakra-ui/styled-system@1.19.0":
- version "1.19.0"
- resolved "https://registry.yarnpkg.com/@chakra-ui/styled-system/-/styled-system-1.19.0.tgz#102fadaefc1a2dfd8e0c4837eafa660531a08419"
- integrity sha512-z+bMfWs6jQGkpgarge1kmk78DuDhJIXRUMyRqZ3+CiIkze88bIIsww6mV2i8tEfUfTAvALeMnlYZ1DYsHsTTJw==
+"@chakra-ui/styled-system@2.2.0":
+ version "2.2.0"
+ resolved "https://registry.yarnpkg.com/@chakra-ui/styled-system/-/styled-system-2.2.0.tgz#d7fdca558db05100ea26ae8352b13c5840da9cc3"
+ integrity sha512-5THQlrMr6CsiulNtjzZV3DqYD85eQ+S8G6rsnjAKqFVJ1G29R392RKK/67R96WIRUJRtsHPq2REeTgAxGLDhOQ==
dependencies:
- "@chakra-ui/utils" "1.10.4"
- csstype "3.0.9"
+ "@chakra-ui/utils" "2.0.2"
+ csstype "^3.0.11"
-"@chakra-ui/system@^1.12.1":
- version "1.12.1"
- resolved "https://registry.yarnpkg.com/@chakra-ui/system/-/system-1.12.1.tgz#608655ef3f7cb82eedd8f20d2546458d90d77cce"
- integrity sha512-Rp09/rMuPA3hF38OJxeQciGO9N0Ie1GxwHRAw1AFA/TY3fVyK9pNI5oN+J/1cAxq7v9yKdIr1YfnruJTI9xfEg==
+"@chakra-ui/system@^2.1.3":
+ version "2.1.3"
+ resolved "https://registry.yarnpkg.com/@chakra-ui/system/-/system-2.1.3.tgz#a140335f56087f761d0a8cef6e4c77f971f054da"
+ integrity sha512-f9GfJr7HGxxhyAbXmka/k/mPsLl8wl+5fZUWglfRg4iddmsuYQcJEYg8+ewCyr7MA1Ddw9bPVgsC5uf/KYlo3w==
dependencies:
- "@chakra-ui/color-mode" "1.4.8"
- "@chakra-ui/react-utils" "1.2.3"
- "@chakra-ui/styled-system" "1.19.0"
- "@chakra-ui/utils" "1.10.4"
+ "@chakra-ui/color-mode" "2.0.4"
+ "@chakra-ui/react-utils" "2.0.1"
+ "@chakra-ui/styled-system" "2.2.0"
+ "@chakra-ui/utils" "2.0.2"
react-fast-compare "3.2.0"
-"@chakra-ui/utils@1.10.4", "@chakra-ui/utils@^1.10.4":
- version "1.10.4"
- resolved "https://registry.yarnpkg.com/@chakra-ui/utils/-/utils-1.10.4.tgz#40a32d4efd8684b2e7432a40b285796383eacfd3"
- integrity sha512-AM91VQQxw8F4F1WDA28mqKY6NFIOuzc2Ekkna88imy2OiqqmYH0xkq8J16L2qj4cLiLozpYqba3C79pWioy6FA==
+"@chakra-ui/utils@2.0.2", "@chakra-ui/utils@^2.0.2":
+ version "2.0.2"
+ resolved "https://registry.yarnpkg.com/@chakra-ui/utils/-/utils-2.0.2.tgz#130ba1647ea2b94ad956ae4cbcf685838d350593"
+ integrity sha512-9AC/ir9zm0shgFG7kdzOKUH2Wx5VB71M3uRMEsMZf75YlhhiU7AvBNtWXnJu+CBiTi41rKa5A+2ImMOsuPfGbA==
dependencies:
"@types/lodash.mergewith" "4.6.6"
css-box-model "1.2.1"
@@ -2329,10 +2321,10 @@
dependencies:
"@types/react" "*"
-"@mdx-js/react@^2.1.1":
- version "2.1.1"
- resolved "https://registry.yarnpkg.com/@mdx-js/react/-/react-2.1.1.tgz#c59d844fd61b776fea8673fb77405d4e14db48c5"
- integrity sha512-7zlZDf5xmWH8I0kFE4DG91COOkxjaW9DX5f1HWztZpFcVua2gJgMYfIkFaDpO/DH/tWi6Mz+OheW4194r15igg==
+"@mdx-js/react@^2.1.2":
+ version "2.1.2"
+ resolved "https://registry.yarnpkg.com/@mdx-js/react/-/react-2.1.2.tgz#02972f170cd3ad9113ce448245c5f636bb3e750d"
+ integrity sha512-52e3DTJBrjsw3U51ZCdZ3N1IBaqnbzLIngCSXpKtiYiGr7PIqp3/P/+kym0MPTwBL/y9ZBmCieD8FyrXuEDrRw==
dependencies:
"@types/mdx" "^2.0.0"
"@types/react" ">=16"
@@ -3327,10 +3319,10 @@
resolved "https://registry.yarnpkg.com/@types/mocha/-/mocha-9.1.1.tgz#e7c4f1001eefa4b8afbd1eee27a237fee3bf29c4"
integrity sha512-Z61JK7DKDtdKTWwLeElSEBcWGRLY8g95ic5FoQqI9CMx0ns/Ghep3B4DfcEimiKMvtamNVULVNKEsiwV3aQmXw==
-"@types/node@*", "@types/node@>=10.0.0", "@types/node@^16.11.39":
- version "16.11.39"
- resolved "https://registry.yarnpkg.com/@types/node/-/node-16.11.39.tgz#07223cd2bc332ad9d92135e3a522eebdee3b060e"
- integrity sha512-K0MsdV42vPwm9L6UwhIxMAOmcvH/1OoVkZyCgEtVu4Wx7sElGloy/W7kMBNe/oJ7V/jW9BVt1F6RahH6e7tPXw==
+"@types/node@*", "@types/node@>=10.0.0", "@types/node@^16.11.41":
+ version "16.11.41"
+ resolved "https://registry.yarnpkg.com/@types/node/-/node-16.11.41.tgz#88eb485b1bfdb4c224d878b7832239536aa2f813"
+ integrity sha512-mqoYK2TnVjdkGk8qXAVGc/x9nSaTpSrFaGFm43BUH3IdoBV0nta6hYaGmdOvIMlbHJbUEVen3gvwpwovAZKNdQ==
"@types/node@^14.0.1", "@types/node@^14.14.35":
version "14.18.18"
@@ -5731,15 +5723,15 @@ concat-stream@^2.0.0:
readable-stream "^3.0.2"
typedarray "^0.0.6"
-concurrently@^7.2.1:
- version "7.2.1"
- resolved "https://registry.yarnpkg.com/concurrently/-/concurrently-7.2.1.tgz#88b144060443403060aad46f837dd17451f7e55e"
- integrity sha512-7cab/QyqipqghrVr9qZmoWbidu0nHsmxrpNqQ7r/67vfl1DWJElexehQnTH1p+87tDkihaAjM79xTZyBQh7HLw==
+concurrently@^7.2.2:
+ version "7.2.2"
+ resolved "https://registry.yarnpkg.com/concurrently/-/concurrently-7.2.2.tgz#4ad4a4dfd3945f668d727379de2a29502e6a531c"
+ integrity sha512-DcQkI0ruil5BA/g7Xy3EWySGrFJovF5RYAYxwGvv9Jf9q9B1v3jPFP2tl6axExNf1qgF30kjoNYrangZ0ey4Aw==
dependencies:
chalk "^4.1.0"
date-fns "^2.16.1"
lodash "^4.17.21"
- rxjs "^6.6.3"
+ rxjs "^7.0.0"
shell-quote "^1.7.3"
spawn-command "^0.0.2-1"
supports-color "^8.1.0"
@@ -6229,12 +6221,7 @@ cssstyle@^2.3.0:
dependencies:
cssom "~0.3.6"
-csstype@3.0.9:
- version "3.0.9"
- resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.0.9.tgz#6410af31b26bd0520933d02cbc64fce9ce3fbf0b"
- integrity sha512-rpw6JPxK6Rfg1zLOYCSwle2GFOOsnjmDYDaBwEcwoOg4qlsIVCN789VkBZDJAGi4T07gI4YSutR43t9Zz4Lzuw==
-
-csstype@^3.0.10, csstype@^3.0.2, csstype@^3.1.0:
+csstype@^3.0.10, csstype@^3.0.11, csstype@^3.0.2, csstype@^3.1.0:
version "3.1.0"
resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.1.0.tgz#4ddcac3718d787cf9df0d1b7d15033925c8f29f2"
integrity sha512-uX1KG+x9h5hIJsaKR9xHUeUraxf8IODOwq9JLNPq6BwB04a/xgpq3rcx47l5BZu5zBPlgD342tdke3Hom/nJRA==
@@ -9753,9 +9740,9 @@ jmespath@0.16.0:
integrity sha512-9FzQjJ7MATs1tSpnco1K6ayiYE3figslrXA72G2HQ/n76RzvYlofyi5QM+iX4YRs/pu3yzxlVQSST23+dMDknw==
jpeg-js@^0.4.2:
- version "0.4.3"
- resolved "https://registry.yarnpkg.com/jpeg-js/-/jpeg-js-0.4.3.tgz#6158e09f1983ad773813704be80680550eff977b"
- integrity sha512-ru1HWKek8octvUHFHvE5ZzQ1yAsJmIvRdGWvSoKV52XKyuyYA437QWDttXT8eZXDSbuMpHlLzPDZUPd6idIz+Q==
+ version "0.4.4"
+ resolved "https://registry.yarnpkg.com/jpeg-js/-/jpeg-js-0.4.4.tgz#a9f1c6f1f9f0fa80cdb3484ed9635054d28936aa"
+ integrity sha512-WZzeDOEtTOBK4Mdsar0IqEU5sMr3vSV2RqkAIzUEV2BHnUfKGyswWFPFwK5EeDo93K3FohSHbLAjj0s1Wzd+dg==
"js-tokens@^3.0.0 || ^4.0.0", js-tokens@^4.0.0:
version "4.0.0"
@@ -14020,10 +14007,10 @@ rollup-pluginutils@^2.3.1, rollup-pluginutils@^2.8.1:
dependencies:
estree-walker "^0.6.1"
-rollup@^2.70.2:
- version "2.70.2"
- resolved "https://registry.yarnpkg.com/rollup/-/rollup-2.70.2.tgz#808d206a8851628a065097b7ba2053bd83ba0c0d"
- integrity sha512-EitogNZnfku65I1DD5Mxe8JYRUCy0hkK5X84IlDtUs+O6JRMpRciXTzyCUuX11b5L5pvjH+OmFXiQ3XjabcXgg==
+rollup@^2.75.7:
+ version "2.75.7"
+ resolved "https://registry.yarnpkg.com/rollup/-/rollup-2.75.7.tgz#221ff11887ae271e37dcc649ba32ce1590aaa0b9"
+ integrity sha512-VSE1iy0eaAYNCxEXaleThdFXqZJ42qDBatAwrfnPlENEZ8erQ+0LYX4JXOLPceWfZpV1VtZwZ3dFCuOZiSyFtQ==
optionalDependencies:
fsevents "~2.3.2"
@@ -14064,13 +14051,20 @@ run-parallel@^1.1.9:
dependencies:
queue-microtask "^1.2.2"
-rxjs@^6.6.0, rxjs@^6.6.3:
+rxjs@^6.6.0:
version "6.6.6"
resolved "https://registry.yarnpkg.com/rxjs/-/rxjs-6.6.6.tgz#14d8417aa5a07c5e633995b525e1e3c0dec03b70"
integrity sha512-/oTwee4N4iWzAMAL9xdGKjkEHmIwupR3oXbQjCKywF1BeFohswF3vZdogbmEF6pZkOsXTzWkrZszrWpQTByYVg==
dependencies:
tslib "^1.9.0"
+rxjs@^7.0.0:
+ version "7.5.5"
+ resolved "https://registry.yarnpkg.com/rxjs/-/rxjs-7.5.5.tgz#2ebad89af0f560f460ad5cc4213219e1f7dd4e9f"
+ integrity sha512-sy+H0pQofO95VDmFLzyaw9xNJU4KTRSwQIGM6+iG3SypAtCiLDzpeG8sJrNCWn2Up9km+KhkvTdbkrdy+yzZdw==
+ dependencies:
+ tslib "^2.1.0"
+
safe-buffer@5.1.2, safe-buffer@~5.1.0, safe-buffer@~5.1.1:
version "5.1.2"
resolved "https://registry.yarnpkg.com/safe-buffer/-/safe-buffer-5.1.2.tgz#991ec69d296e0313747d59bdfd2b745c35f8828d"