From 14fd987822f062a6cb2d3d251e9b5c873773bb49 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C5=82=20Dudak?= <michal@mui.com> Date: Fri, 6 Sep 2024 12:35:45 +0200 Subject: [PATCH] [core] Remove Material UI dependency (#585) --- .../css/index.js | 25 +- .../css/index.tsx | 25 +- .../system/index.js | 19 +- .../system/index.tsx | 19 +- .../tailwind/index.js | 27 +- .../tailwind/index.tsx | 27 +- .../UnstyledCheckboxGroupNested.js | 35 +- .../UnstyledCheckboxGroupNested.tsx | 37 +- .../checkbox/UnstyledCheckboxIndeterminate.js | 16 +- .../UnstyledCheckboxIndeterminate.tsx | 18 +- .../UnstyledCheckboxIndeterminateGroup.js | 35 +- .../UnstyledCheckboxIndeterminateGroup.tsx | 37 +- .../css-modules/index.js | 27 +- .../css-modules/index.tsx | 27 +- .../system/index.js | 19 +- .../system/index.tsx | 19 +- .../tailwind/index.js | 21 +- .../tailwind/index.tsx | 21 +- docs/next.config.mjs | 5 +- docs/package.json | 4 - docs/public/static/error-codes.json | 23 +- docs/types/icons.d.ts | 2 - docs/types/material-ui.d.ts | 28 -- package.json | 1 - packages/mui-base/package.json | 1 - pnpm-lock.yaml | 386 ------------------ scripts/buildTypes.mjs | 157 ------- scripts/sizeSnapshot/webpack.config.js | 153 +------ test/package.json | 2 - test/regressions/TestViewer.js | 73 ++-- test/regressions/webpack.config.js | 2 - 31 files changed, 434 insertions(+), 857 deletions(-) delete mode 100644 docs/types/icons.d.ts delete mode 100644 docs/types/material-ui.d.ts delete mode 100644 scripts/buildTypes.mjs diff --git a/docs/data/components/checkbox-group/UnstyledCheckboxGroupIntroduction/css/index.js b/docs/data/components/checkbox-group/UnstyledCheckboxGroupIntroduction/css/index.js index 31331694ff..4bb012eb2f 100644 --- a/docs/data/components/checkbox-group/UnstyledCheckboxGroupIntroduction/css/index.js +++ b/docs/data/components/checkbox-group/UnstyledCheckboxGroupIntroduction/css/index.js @@ -4,7 +4,6 @@ import * as React from 'react'; import * as Checkbox from '@base_ui/react/Checkbox'; import * as CheckboxGroup from '@base_ui/react/CheckboxGroup'; import * as Field from '@base_ui/react/Field'; -import Check from '@mui/icons-material/Check'; export default function UnstyledCheckboxIndeterminateGroup() { return ( @@ -16,7 +15,7 @@ export default function UnstyledCheckboxIndeterminateGroup() { <Field.Root> <Checkbox.Root className="Checkbox" name="red"> <Checkbox.Indicator className="Checkbox-indicator"> - <Check className="Check" /> + <CheckIcon className="Check" /> </Checkbox.Indicator> </Checkbox.Root> <Field.Label className="Checkbox-label">Red</Field.Label> @@ -24,7 +23,7 @@ export default function UnstyledCheckboxIndeterminateGroup() { <Field.Root> <Checkbox.Root className="Checkbox" name="green"> <Checkbox.Indicator className="Checkbox-indicator"> - <Check className="Check" /> + <CheckIcon className="Check" /> </Checkbox.Indicator> </Checkbox.Root> <Field.Label className="Checkbox-label">Green</Field.Label> @@ -32,7 +31,7 @@ export default function UnstyledCheckboxIndeterminateGroup() { <Field.Root> <Checkbox.Root className="Checkbox" name="blue"> <Checkbox.Indicator className="Checkbox-indicator"> - <Check className="Check" /> + <CheckIcon className="Check" /> </Checkbox.Indicator> </Checkbox.Root> <Field.Label className="Checkbox-label">Blue</Field.Label> @@ -150,3 +149,21 @@ function Styles() { </style> ); } + +function CheckIcon(props) { + return ( + <svg + xmlns="http://www.w3.org/2000/svg" + {...props} + width="24" + height="24" + viewBox="0 0 24 24" + fill="none" + > + <path + d="M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z" + fill="currentColor" + /> + </svg> + ); +} diff --git a/docs/data/components/checkbox-group/UnstyledCheckboxGroupIntroduction/css/index.tsx b/docs/data/components/checkbox-group/UnstyledCheckboxGroupIntroduction/css/index.tsx index 31331694ff..c535b250cc 100644 --- a/docs/data/components/checkbox-group/UnstyledCheckboxGroupIntroduction/css/index.tsx +++ b/docs/data/components/checkbox-group/UnstyledCheckboxGroupIntroduction/css/index.tsx @@ -4,7 +4,6 @@ import * as React from 'react'; import * as Checkbox from '@base_ui/react/Checkbox'; import * as CheckboxGroup from '@base_ui/react/CheckboxGroup'; import * as Field from '@base_ui/react/Field'; -import Check from '@mui/icons-material/Check'; export default function UnstyledCheckboxIndeterminateGroup() { return ( @@ -16,7 +15,7 @@ export default function UnstyledCheckboxIndeterminateGroup() { <Field.Root> <Checkbox.Root className="Checkbox" name="red"> <Checkbox.Indicator className="Checkbox-indicator"> - <Check className="Check" /> + <CheckIcon className="Check" /> </Checkbox.Indicator> </Checkbox.Root> <Field.Label className="Checkbox-label">Red</Field.Label> @@ -24,7 +23,7 @@ export default function UnstyledCheckboxIndeterminateGroup() { <Field.Root> <Checkbox.Root className="Checkbox" name="green"> <Checkbox.Indicator className="Checkbox-indicator"> - <Check className="Check" /> + <CheckIcon className="Check" /> </Checkbox.Indicator> </Checkbox.Root> <Field.Label className="Checkbox-label">Green</Field.Label> @@ -32,7 +31,7 @@ export default function UnstyledCheckboxIndeterminateGroup() { <Field.Root> <Checkbox.Root className="Checkbox" name="blue"> <Checkbox.Indicator className="Checkbox-indicator"> - <Check className="Check" /> + <CheckIcon className="Check" /> </Checkbox.Indicator> </Checkbox.Root> <Field.Label className="Checkbox-label">Blue</Field.Label> @@ -150,3 +149,21 @@ function Styles() { </style> ); } + +function CheckIcon(props: React.SVGProps<SVGSVGElement>) { + return ( + <svg + xmlns="http://www.w3.org/2000/svg" + {...props} + width="24" + height="24" + viewBox="0 0 24 24" + fill="none" + > + <path + d="M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z" + fill="currentColor" + /> + </svg> + ); +} diff --git a/docs/data/components/checkbox-group/UnstyledCheckboxGroupIntroduction/system/index.js b/docs/data/components/checkbox-group/UnstyledCheckboxGroupIntroduction/system/index.js index 26b73c5315..db2d999f1f 100644 --- a/docs/data/components/checkbox-group/UnstyledCheckboxGroupIntroduction/system/index.js +++ b/docs/data/components/checkbox-group/UnstyledCheckboxGroupIntroduction/system/index.js @@ -5,7 +5,6 @@ import { css, styled } from '@mui/system'; import * as BaseCheckbox from '@base_ui/react/Checkbox'; import * as CheckboxGroup from '@base_ui/react/CheckboxGroup'; import * as Field from '@base_ui/react/Field'; -import Check from '@mui/icons-material/Check'; export default function UnstyledCheckboxIndeterminateGroup() { return ( @@ -107,7 +106,23 @@ const Checkbox = styled(BaseCheckbox.Root)( `, ); -const CheckIcon = styled(Check)` +const CheckIcon = styled(function CheckIcon(props) { + return ( + <svg + xmlns="http://www.w3.org/2000/svg" + {...props} + width="24" + height="24" + viewBox="0 0 24 24" + fill="none" + > + <path + d="M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z" + fill="currentColor" + /> + </svg> + ); +})` height: 100%; width: 100%; `; diff --git a/docs/data/components/checkbox-group/UnstyledCheckboxGroupIntroduction/system/index.tsx b/docs/data/components/checkbox-group/UnstyledCheckboxGroupIntroduction/system/index.tsx index 26b73c5315..f1ca4892d3 100644 --- a/docs/data/components/checkbox-group/UnstyledCheckboxGroupIntroduction/system/index.tsx +++ b/docs/data/components/checkbox-group/UnstyledCheckboxGroupIntroduction/system/index.tsx @@ -5,7 +5,6 @@ import { css, styled } from '@mui/system'; import * as BaseCheckbox from '@base_ui/react/Checkbox'; import * as CheckboxGroup from '@base_ui/react/CheckboxGroup'; import * as Field from '@base_ui/react/Field'; -import Check from '@mui/icons-material/Check'; export default function UnstyledCheckboxIndeterminateGroup() { return ( @@ -107,7 +106,23 @@ const Checkbox = styled(BaseCheckbox.Root)( `, ); -const CheckIcon = styled(Check)` +const CheckIcon = styled(function CheckIcon(props: React.SVGProps<SVGSVGElement>) { + return ( + <svg + xmlns="http://www.w3.org/2000/svg" + {...props} + width="24" + height="24" + viewBox="0 0 24 24" + fill="none" + > + <path + d="M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z" + fill="currentColor" + /> + </svg> + ); +})` height: 100%; width: 100%; `; diff --git a/docs/data/components/checkbox-group/UnstyledCheckboxGroupIntroduction/tailwind/index.js b/docs/data/components/checkbox-group/UnstyledCheckboxGroupIntroduction/tailwind/index.js index 41a8de1373..36b79883be 100644 --- a/docs/data/components/checkbox-group/UnstyledCheckboxGroupIntroduction/tailwind/index.js +++ b/docs/data/components/checkbox-group/UnstyledCheckboxGroupIntroduction/tailwind/index.js @@ -6,7 +6,6 @@ import { useTheme } from '@mui/system'; import * as BaseCheckbox from '@base_ui/react/Checkbox'; import * as CheckboxGroup from '@base_ui/react/CheckboxGroup'; import * as Field from '@base_ui/react/Field'; -import Check from '@mui/icons-material/Check'; function classNames(...classes) { return classes.filter(Boolean).join(' '); @@ -41,7 +40,7 @@ export default function UnstyledCheckboxIntroduction() { <Label> <Checkbox name="red"> <Indicator> - <Check className="w-full h-full" /> + <CheckIcon className="w-full h-full" /> </Indicator> </Checkbox> Red @@ -49,7 +48,7 @@ export default function UnstyledCheckboxIntroduction() { <Label> <Checkbox name="green"> <Indicator> - <Check className="w-full h-full" /> + <CheckIcon className="w-full h-full" /> </Indicator> </Checkbox> Green @@ -57,7 +56,7 @@ export default function UnstyledCheckboxIntroduction() { <Label> <Checkbox name="blue"> <Indicator> - <Check className="w-full h-full" /> + <CheckIcon className="w-full h-full" /> </Indicator> </Checkbox> Blue @@ -113,7 +112,7 @@ const Indicator = React.forwardRef(function Indicator(props, ref) { ) } > - <Check className="w-full h-full" /> + <CheckIcon className="w-full h-full" /> </BaseCheckbox.Indicator> ); }); @@ -124,3 +123,21 @@ Indicator.propTypes = { */ className: PropTypes.oneOfType([PropTypes.func, PropTypes.string]), }; + +function CheckIcon(props) { + return ( + <svg + xmlns="http://www.w3.org/2000/svg" + {...props} + width="24" + height="24" + viewBox="0 0 24 24" + fill="none" + > + <path + d="M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z" + fill="currentColor" + /> + </svg> + ); +} diff --git a/docs/data/components/checkbox-group/UnstyledCheckboxGroupIntroduction/tailwind/index.tsx b/docs/data/components/checkbox-group/UnstyledCheckboxGroupIntroduction/tailwind/index.tsx index e6f2e72b61..d7fff1317a 100644 --- a/docs/data/components/checkbox-group/UnstyledCheckboxGroupIntroduction/tailwind/index.tsx +++ b/docs/data/components/checkbox-group/UnstyledCheckboxGroupIntroduction/tailwind/index.tsx @@ -5,7 +5,6 @@ import { useTheme } from '@mui/system'; import * as BaseCheckbox from '@base_ui/react/Checkbox'; import * as CheckboxGroup from '@base_ui/react/CheckboxGroup'; import * as Field from '@base_ui/react/Field'; -import Check from '@mui/icons-material/Check'; function classNames(...classes: Array<string | undefined | null | false>) { return classes.filter(Boolean).join(' '); @@ -40,7 +39,7 @@ export default function UnstyledCheckboxIntroduction() { <Label> <Checkbox name="red"> <Indicator> - <Check className="w-full h-full" /> + <CheckIcon className="w-full h-full" /> </Indicator> </Checkbox> Red @@ -48,7 +47,7 @@ export default function UnstyledCheckboxIntroduction() { <Label> <Checkbox name="green"> <Indicator> - <Check className="w-full h-full" /> + <CheckIcon className="w-full h-full" /> </Indicator> </Checkbox> Green @@ -56,7 +55,7 @@ export default function UnstyledCheckboxIntroduction() { <Label> <Checkbox name="blue"> <Indicator> - <Check className="w-full h-full" /> + <CheckIcon className="w-full h-full" /> </Indicator> </Checkbox> Blue @@ -108,8 +107,26 @@ const Indicator = React.forwardRef<HTMLSpanElement, BaseCheckbox.IndicatorProps> ) } > - <Check className="w-full h-full" /> + <CheckIcon className="w-full h-full" /> </BaseCheckbox.Indicator> ); }, ); + +function CheckIcon(props: React.SVGProps<SVGSVGElement>) { + return ( + <svg + xmlns="http://www.w3.org/2000/svg" + {...props} + width="24" + height="24" + viewBox="0 0 24 24" + fill="none" + > + <path + d="M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z" + fill="currentColor" + /> + </svg> + ); +} diff --git a/docs/data/components/checkbox-group/UnstyledCheckboxGroupNested.js b/docs/data/components/checkbox-group/UnstyledCheckboxGroupNested.js index d7ce96b207..fdbe3794f7 100644 --- a/docs/data/components/checkbox-group/UnstyledCheckboxGroupNested.js +++ b/docs/data/components/checkbox-group/UnstyledCheckboxGroupNested.js @@ -5,8 +5,6 @@ import * as BaseCheckbox from '@base_ui/react/Checkbox'; import * as CheckboxGroup from '@base_ui/react/CheckboxGroup'; import * as Field from '@base_ui/react/Field'; import { styled } from '@mui/system'; -import HorizontalRule from '@mui/icons-material/HorizontalRule'; -import Check from '@mui/icons-material/Check'; const colors = ['red', 'green', 'blue']; @@ -99,12 +97,41 @@ const Checkbox = styled(BaseCheckbox.Root)( `, ); -const HorizontalRuleIcon = styled(HorizontalRule)` +const HorizontalRuleIcon = styled(function HorizontalRuleIcon(props) { + return ( + <svg + xmlns="http://www.w3.org/2000/svg" + {...props} + width="24" + height="24" + viewBox="0 0 24 24" + fill="none" + > + <path d="M4 11h16v2H4z" fill="currentColor" /> + </svg> + ); +})` height: 100%; width: 100%; `; -const CheckIcon = styled(Check)` +const CheckIcon = styled(function CheckIcon(props) { + return ( + <svg + xmlns="http://www.w3.org/2000/svg" + {...props} + width="24" + height="24" + viewBox="0 0 24 24" + fill="none" + > + <path + d="M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z" + fill="currentColor" + /> + </svg> + ); +})` height: 100%; width: 100%; `; diff --git a/docs/data/components/checkbox-group/UnstyledCheckboxGroupNested.tsx b/docs/data/components/checkbox-group/UnstyledCheckboxGroupNested.tsx index a19cf961c3..509faf68b5 100644 --- a/docs/data/components/checkbox-group/UnstyledCheckboxGroupNested.tsx +++ b/docs/data/components/checkbox-group/UnstyledCheckboxGroupNested.tsx @@ -5,8 +5,6 @@ import * as BaseCheckbox from '@base_ui/react/Checkbox'; import * as CheckboxGroup from '@base_ui/react/CheckboxGroup'; import * as Field from '@base_ui/react/Field'; import { styled } from '@mui/system'; -import HorizontalRule from '@mui/icons-material/HorizontalRule'; -import Check from '@mui/icons-material/Check'; const colors = ['red', 'green', 'blue']; @@ -99,12 +97,43 @@ const Checkbox = styled(BaseCheckbox.Root)( `, ); -const HorizontalRuleIcon = styled(HorizontalRule)` +const HorizontalRuleIcon = styled(function HorizontalRuleIcon( + props: React.SVGProps<SVGSVGElement>, +) { + return ( + <svg + xmlns="http://www.w3.org/2000/svg" + {...props} + width="24" + height="24" + viewBox="0 0 24 24" + fill="none" + > + <path d="M4 11h16v2H4z" fill="currentColor" /> + </svg> + ); +})` height: 100%; width: 100%; `; -const CheckIcon = styled(Check)` +const CheckIcon = styled(function CheckIcon(props: React.SVGProps<SVGSVGElement>) { + return ( + <svg + xmlns="http://www.w3.org/2000/svg" + {...props} + width="24" + height="24" + viewBox="0 0 24 24" + fill="none" + > + <path + d="M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z" + fill="currentColor" + /> + </svg> + ); +})` height: 100%; width: 100%; `; diff --git a/docs/data/components/checkbox/UnstyledCheckboxIndeterminate.js b/docs/data/components/checkbox/UnstyledCheckboxIndeterminate.js index e8a8fe2acb..84c2d42668 100644 --- a/docs/data/components/checkbox/UnstyledCheckboxIndeterminate.js +++ b/docs/data/components/checkbox/UnstyledCheckboxIndeterminate.js @@ -3,7 +3,6 @@ import * as React from 'react'; import { styled } from '@mui/system'; import * as BaseCheckbox from '@base_ui/react/Checkbox'; -import HorizontalRule from '@mui/icons-material/HorizontalRule'; export default function UnstyledCheckboxIndeterminate() { return ( @@ -62,7 +61,20 @@ const Checkbox = styled(BaseCheckbox.Root)( `, ); -const HorizontalRuleIcon = styled(HorizontalRule)` +const HorizontalRuleIcon = styled(function HorizontalRuleIcon(props) { + return ( + <svg + xmlns="http://www.w3.org/2000/svg" + {...props} + width="24" + height="24" + viewBox="0 0 24 24" + fill="none" + > + <path d="M4 11h16v2H4z" fill="currentColor" /> + </svg> + ); +})` height: 100%; width: 100%; `; diff --git a/docs/data/components/checkbox/UnstyledCheckboxIndeterminate.tsx b/docs/data/components/checkbox/UnstyledCheckboxIndeterminate.tsx index e8a8fe2acb..e82b4c33ba 100644 --- a/docs/data/components/checkbox/UnstyledCheckboxIndeterminate.tsx +++ b/docs/data/components/checkbox/UnstyledCheckboxIndeterminate.tsx @@ -3,7 +3,6 @@ import * as React from 'react'; import { styled } from '@mui/system'; import * as BaseCheckbox from '@base_ui/react/Checkbox'; -import HorizontalRule from '@mui/icons-material/HorizontalRule'; export default function UnstyledCheckboxIndeterminate() { return ( @@ -62,7 +61,22 @@ const Checkbox = styled(BaseCheckbox.Root)( `, ); -const HorizontalRuleIcon = styled(HorizontalRule)` +const HorizontalRuleIcon = styled(function HorizontalRuleIcon( + props: React.SVGProps<SVGSVGElement>, +) { + return ( + <svg + xmlns="http://www.w3.org/2000/svg" + {...props} + width="24" + height="24" + viewBox="0 0 24 24" + fill="none" + > + <path d="M4 11h16v2H4z" fill="currentColor" /> + </svg> + ); +})` height: 100%; width: 100%; `; diff --git a/docs/data/components/checkbox/UnstyledCheckboxIndeterminateGroup.js b/docs/data/components/checkbox/UnstyledCheckboxIndeterminateGroup.js index 0cd0d808c6..c628e15173 100644 --- a/docs/data/components/checkbox/UnstyledCheckboxIndeterminateGroup.js +++ b/docs/data/components/checkbox/UnstyledCheckboxIndeterminateGroup.js @@ -3,8 +3,6 @@ import * as React from 'react'; import { styled } from '@mui/system'; import * as BaseCheckbox from '@base_ui/react/Checkbox'; -import HorizontalRule from '@mui/icons-material/HorizontalRule'; -import Check from '@mui/icons-material/Check'; const colors = ['Red', 'Green', 'Blue']; @@ -111,12 +109,41 @@ const Checkbox = styled(BaseCheckbox.Root)( `, ); -const HorizontalRuleIcon = styled(HorizontalRule)` +const HorizontalRuleIcon = styled(function HorizontalRuleIcon(props) { + return ( + <svg + xmlns="http://www.w3.org/2000/svg" + {...props} + width="24" + height="24" + viewBox="0 0 24 24" + fill="none" + > + <path d="M4 11h16v2H4z" fill="currentColor" /> + </svg> + ); +})` height: 100%; width: 100%; `; -const CheckIcon = styled(Check)` +const CheckIcon = styled(function CheckIcon(props) { + return ( + <svg + xmlns="http://www.w3.org/2000/svg" + {...props} + width="24" + height="24" + viewBox="0 0 24 24" + fill="none" + > + <path + d="M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z" + fill="currentColor" + /> + </svg> + ); +})` height: 100%; width: 100%; `; diff --git a/docs/data/components/checkbox/UnstyledCheckboxIndeterminateGroup.tsx b/docs/data/components/checkbox/UnstyledCheckboxIndeterminateGroup.tsx index 0cd0d808c6..9c49ae6938 100644 --- a/docs/data/components/checkbox/UnstyledCheckboxIndeterminateGroup.tsx +++ b/docs/data/components/checkbox/UnstyledCheckboxIndeterminateGroup.tsx @@ -3,8 +3,6 @@ import * as React from 'react'; import { styled } from '@mui/system'; import * as BaseCheckbox from '@base_ui/react/Checkbox'; -import HorizontalRule from '@mui/icons-material/HorizontalRule'; -import Check from '@mui/icons-material/Check'; const colors = ['Red', 'Green', 'Blue']; @@ -111,12 +109,43 @@ const Checkbox = styled(BaseCheckbox.Root)( `, ); -const HorizontalRuleIcon = styled(HorizontalRule)` +const HorizontalRuleIcon = styled(function HorizontalRuleIcon( + props: React.SVGProps<SVGSVGElement>, +) { + return ( + <svg + xmlns="http://www.w3.org/2000/svg" + {...props} + width="24" + height="24" + viewBox="0 0 24 24" + fill="none" + > + <path d="M4 11h16v2H4z" fill="currentColor" /> + </svg> + ); +})` height: 100%; width: 100%; `; -const CheckIcon = styled(Check)` +const CheckIcon = styled(function CheckIcon(props: React.SVGProps<SVGSVGElement>) { + return ( + <svg + xmlns="http://www.w3.org/2000/svg" + {...props} + width="24" + height="24" + viewBox="0 0 24 24" + fill="none" + > + <path + d="M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z" + fill="currentColor" + /> + </svg> + ); +})` height: 100%; width: 100%; `; diff --git a/docs/data/components/checkbox/UnstyledCheckboxIntroduction/css-modules/index.js b/docs/data/components/checkbox/UnstyledCheckboxIntroduction/css-modules/index.js index 98af321597..99c341de45 100644 --- a/docs/data/components/checkbox/UnstyledCheckboxIntroduction/css-modules/index.js +++ b/docs/data/components/checkbox/UnstyledCheckboxIntroduction/css-modules/index.js @@ -3,7 +3,6 @@ import * as React from 'react'; import * as Checkbox from '@base_ui/react/Checkbox'; import { useTheme } from '@mui/system'; -import Check from '@mui/icons-material/Check'; export default function UnstyledCheckboxIntroduction() { return ( @@ -14,7 +13,7 @@ export default function UnstyledCheckboxIntroduction() { defaultChecked > <Checkbox.Indicator className="Checkbox-indicator"> - <Check className="Checkbox-icon" /> + <CheckIcon className="Checkbox-icon" /> </Checkbox.Indicator> </Checkbox.Root> <Checkbox.Root @@ -22,7 +21,7 @@ export default function UnstyledCheckboxIntroduction() { aria-label="Basic checkbox, off by default" > <Checkbox.Indicator className="Checkbox-indicator"> - <Check className="Checkbox-icon" /> + <CheckIcon className="Checkbox-icon" /> </Checkbox.Indicator> </Checkbox.Root> <Checkbox.Root @@ -32,7 +31,7 @@ export default function UnstyledCheckboxIntroduction() { disabled > <Checkbox.Indicator className="Checkbox-indicator"> - <Check className="Checkbox-icon" /> + <CheckIcon className="Checkbox-icon" /> </Checkbox.Indicator> </Checkbox.Root> <Checkbox.Root @@ -41,7 +40,7 @@ export default function UnstyledCheckboxIntroduction() { disabled > <Checkbox.Indicator className="Checkbox-indicator"> - <Check className="Checkbox-icon" /> + <CheckIcon className="Checkbox-icon" /> </Checkbox.Indicator> </Checkbox.Root> <Styles /> @@ -137,3 +136,21 @@ function Styles() { </style> ); } + +function CheckIcon(props) { + return ( + <svg + xmlns="http://www.w3.org/2000/svg" + {...props} + width="24" + height="24" + viewBox="0 0 24 24" + fill="none" + > + <path + d="M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z" + fill="currentColor" + /> + </svg> + ); +} diff --git a/docs/data/components/checkbox/UnstyledCheckboxIntroduction/css-modules/index.tsx b/docs/data/components/checkbox/UnstyledCheckboxIntroduction/css-modules/index.tsx index 98af321597..17b6f98355 100644 --- a/docs/data/components/checkbox/UnstyledCheckboxIntroduction/css-modules/index.tsx +++ b/docs/data/components/checkbox/UnstyledCheckboxIntroduction/css-modules/index.tsx @@ -3,7 +3,6 @@ import * as React from 'react'; import * as Checkbox from '@base_ui/react/Checkbox'; import { useTheme } from '@mui/system'; -import Check from '@mui/icons-material/Check'; export default function UnstyledCheckboxIntroduction() { return ( @@ -14,7 +13,7 @@ export default function UnstyledCheckboxIntroduction() { defaultChecked > <Checkbox.Indicator className="Checkbox-indicator"> - <Check className="Checkbox-icon" /> + <CheckIcon className="Checkbox-icon" /> </Checkbox.Indicator> </Checkbox.Root> <Checkbox.Root @@ -22,7 +21,7 @@ export default function UnstyledCheckboxIntroduction() { aria-label="Basic checkbox, off by default" > <Checkbox.Indicator className="Checkbox-indicator"> - <Check className="Checkbox-icon" /> + <CheckIcon className="Checkbox-icon" /> </Checkbox.Indicator> </Checkbox.Root> <Checkbox.Root @@ -32,7 +31,7 @@ export default function UnstyledCheckboxIntroduction() { disabled > <Checkbox.Indicator className="Checkbox-indicator"> - <Check className="Checkbox-icon" /> + <CheckIcon className="Checkbox-icon" /> </Checkbox.Indicator> </Checkbox.Root> <Checkbox.Root @@ -41,7 +40,7 @@ export default function UnstyledCheckboxIntroduction() { disabled > <Checkbox.Indicator className="Checkbox-indicator"> - <Check className="Checkbox-icon" /> + <CheckIcon className="Checkbox-icon" /> </Checkbox.Indicator> </Checkbox.Root> <Styles /> @@ -137,3 +136,21 @@ function Styles() { </style> ); } + +function CheckIcon(props: React.SVGProps<SVGSVGElement>) { + return ( + <svg + xmlns="http://www.w3.org/2000/svg" + {...props} + width="24" + height="24" + viewBox="0 0 24 24" + fill="none" + > + <path + d="M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z" + fill="currentColor" + /> + </svg> + ); +} diff --git a/docs/data/components/checkbox/UnstyledCheckboxIntroduction/system/index.js b/docs/data/components/checkbox/UnstyledCheckboxIntroduction/system/index.js index 049b7a0aa5..71d289822f 100644 --- a/docs/data/components/checkbox/UnstyledCheckboxIntroduction/system/index.js +++ b/docs/data/components/checkbox/UnstyledCheckboxIntroduction/system/index.js @@ -3,7 +3,6 @@ import * as React from 'react'; import { styled } from '@mui/system'; import * as BaseCheckbox from '@base_ui/react/Checkbox'; -import Check from '@mui/icons-material/Check'; export default function UnstyledSwitchIntroduction() { return ( @@ -75,7 +74,23 @@ const Checkbox = styled(BaseCheckbox.Root)( `, ); -const CheckIcon = styled(Check)` +const CheckIcon = styled(function CheckIcon(props) { + return ( + <svg + xmlns="http://www.w3.org/2000/svg" + {...props} + width="24" + height="24" + viewBox="0 0 24 24" + fill="none" + > + <path + d="M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z" + fill="currentColor" + /> + </svg> + ); +})` width: 100%; height: 100%; `; diff --git a/docs/data/components/checkbox/UnstyledCheckboxIntroduction/system/index.tsx b/docs/data/components/checkbox/UnstyledCheckboxIntroduction/system/index.tsx index 049b7a0aa5..8ee3705017 100644 --- a/docs/data/components/checkbox/UnstyledCheckboxIntroduction/system/index.tsx +++ b/docs/data/components/checkbox/UnstyledCheckboxIntroduction/system/index.tsx @@ -3,7 +3,6 @@ import * as React from 'react'; import { styled } from '@mui/system'; import * as BaseCheckbox from '@base_ui/react/Checkbox'; -import Check from '@mui/icons-material/Check'; export default function UnstyledSwitchIntroduction() { return ( @@ -75,7 +74,23 @@ const Checkbox = styled(BaseCheckbox.Root)( `, ); -const CheckIcon = styled(Check)` +const CheckIcon = styled(function CheckIcon(props: React.SVGProps<SVGSVGElement>) { + return ( + <svg + xmlns="http://www.w3.org/2000/svg" + {...props} + width="24" + height="24" + viewBox="0 0 24 24" + fill="none" + > + <path + d="M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z" + fill="currentColor" + /> + </svg> + ); +})` width: 100%; height: 100%; `; diff --git a/docs/data/components/checkbox/UnstyledCheckboxIntroduction/tailwind/index.js b/docs/data/components/checkbox/UnstyledCheckboxIntroduction/tailwind/index.js index d3d174a4b5..6834688918 100644 --- a/docs/data/components/checkbox/UnstyledCheckboxIntroduction/tailwind/index.js +++ b/docs/data/components/checkbox/UnstyledCheckboxIntroduction/tailwind/index.js @@ -4,7 +4,6 @@ import * as React from 'react'; import PropTypes from 'prop-types'; import * as BaseCheckbox from '@base_ui/react/Checkbox'; import { useTheme } from '@mui/system'; -import Check from '@mui/icons-material/Check'; function classNames(...classes) { return classes.filter(Boolean).join(' '); @@ -85,7 +84,7 @@ const Indicator = React.forwardRef(function Indicator(props, ref) { ) } > - <Check className="w-full h-full" /> + <CheckIcon className="w-full h-full" /> </BaseCheckbox.Indicator> ); }); @@ -96,3 +95,21 @@ Indicator.propTypes = { */ className: PropTypes.oneOfType([PropTypes.func, PropTypes.string]), }; + +function CheckIcon(props) { + return ( + <svg + xmlns="http://www.w3.org/2000/svg" + {...props} + width="24" + height="24" + viewBox="0 0 24 24" + fill="none" + > + <path + d="M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z" + fill="currentColor" + /> + </svg> + ); +} diff --git a/docs/data/components/checkbox/UnstyledCheckboxIntroduction/tailwind/index.tsx b/docs/data/components/checkbox/UnstyledCheckboxIntroduction/tailwind/index.tsx index 25e27a7048..c7d4b5918c 100644 --- a/docs/data/components/checkbox/UnstyledCheckboxIntroduction/tailwind/index.tsx +++ b/docs/data/components/checkbox/UnstyledCheckboxIntroduction/tailwind/index.tsx @@ -3,7 +3,6 @@ import * as React from 'react'; import * as BaseCheckbox from '@base_ui/react/Checkbox'; import { useTheme } from '@mui/system'; -import Check from '@mui/icons-material/Check'; function classNames(...classes: Array<string | undefined | null | false>) { return classes.filter(Boolean).join(' '); @@ -80,8 +79,26 @@ const Indicator = React.forwardRef<HTMLSpanElement, BaseCheckbox.IndicatorProps> ) } > - <Check className="w-full h-full" /> + <CheckIcon className="w-full h-full" /> </BaseCheckbox.Indicator> ); }, ); + +function CheckIcon(props: React.SVGProps<SVGSVGElement>) { + return ( + <svg + xmlns="http://www.w3.org/2000/svg" + {...props} + width="24" + height="24" + viewBox="0 0 24 24" + fill="none" + > + <path + d="M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z" + fill="currentColor" + /> + </svg> + ); +} diff --git a/docs/next.config.mjs b/docs/next.config.mjs index 3eb062810f..97659e6bce 100644 --- a/docs/next.config.mjs +++ b/docs/next.config.mjs @@ -55,12 +55,15 @@ const nextConfig = { }; }, distDir: 'export', - transpilePackages: ['@mui/docs', '@mui/monorepo'], + transpilePackages: ['@mui/monorepo'], ...(process.env.NODE_ENV === 'production' ? { output: 'export', } : {}), + experimental: { + esmExternals: true, + }, }; export default withDocsInfra(nextConfig); diff --git a/docs/package.json b/docs/package.json index 2bc9c6f180..fdefa8d444 100644 --- a/docs/package.json +++ b/docs/package.json @@ -23,11 +23,7 @@ "@emotion/server": "^11.11.0", "@emotion/styled": "^11.11.5", "@mdx-js/mdx": "^3.0.1", - "@mui/docs": "6.0.2", - "@mui/icons-material": "6.0.2", - "@mui/material": "6.0.2", "@mui/system": "6.0.2", - "@mui/types": "7.2.16", "@mui/utils": "6.0.2", "@react-spring/web": "^9.7.4", "@stefanprobst/rehype-extract-toc": "^2.2.0", diff --git a/docs/public/static/error-codes.json b/docs/public/static/error-codes.json index a6486f38f4..0967ef424b 100644 --- a/docs/public/static/error-codes.json +++ b/docs/public/static/error-codes.json @@ -1,22 +1 @@ -{ - "1": "MUI: Expected valid input target. Did you use a custom `inputComponent` and forget to forward refs? See https://mui.com/r/input-component-ref-interface for more info.", - "2": "MUI: The `value` prop must be an array when using the `Select` component with `multiple`.", - "3": "MUI: Unsupported `%s` color.\nWe support the following formats: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla().", - "4": "MUI: The color provided to augmentColor(color) is invalid.\nThe color object needs to have a `main` property or a `%s` property.", - "5": "MUI: The color provided to augmentColor(color) is invalid.\n`color.main` should be a string, but `%s` was provided instead.\n\nDid you intend to use one of the following approaches?\n\nimport { green } from \"@mui/material/colors\";\n\nconst theme1 = createTheme({ palette: {\n primary: green,\n} });\n\nconst theme2 = createTheme({ palette: {\n primary: { main: green[500] },\n} });", - "6": "MUI: Unsupported non-unitless line height with grid alignment.\nUse unitless line heights instead.", - "7": "MUI: `capitalize(string)` expects a string argument.", - "8": "MUI: Unsupported `%s` color.\nWe support the following formats: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla(), color().", - "9": "MUI: Unsupported `%s` color.\nThe following formats are supported: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla(), color().", - "10": "MUI: unsupported `%s` color space.\nThe following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rgb, rec-2020.", - "11": "MUI: The color%s provided to augmentColor(color) is invalid.\nThe color object needs to have a `main` property or a `%s` property.", - "12": "MUI: The color%s provided to augmentColor(color) is invalid.\n`color.main` should be a string, but `%s` was provided instead.\n\nDid you intend to use one of the following approaches?\n\nimport { green } from \"@mui/material/colors\";\n\nconst theme1 = createTheme({ palette: {\n primary: green,\n} });\n\nconst theme2 = createTheme({ palette: {\n primary: { main: green[500] },\n} });", - "13": "Can not find utils in context. It looks like you forgot to wrap your component in LocalizationProvider, or pass dateAdapter prop directly.", - "14": "MUI: makeStyles is no longer exported from @mui/material/styles.\nYou have to import it from @mui/styles.\nSee https://mui.com/r/migration-v4/#mui-material-styles for more details.", - "15": "MUI: withStyles is no longer exported from @mui/material/styles.\nYou have to import it from @mui/styles.\nSee https://mui.com/r/migration-v4/#mui-material-styles for more details.", - "16": "MUI: withTheme is no longer exported from @mui/material/styles.\nYou have to import it from @mui/styles.\nSee https://mui.com/r/migration-v4/#mui-material-styles for more details.", - "17": "MUI: Expected valid input target. Did you use a custom `slots.input` and forget to forward refs? See https://mui.com/r/input-component-ref-interface for more info.", - "18": "MUI: `vars` is a private field used for CSS variables support.\nPlease use another name.", - "19": "MUI: `useColorScheme` must be called under <CssVarsProvider />", - "20": "MUI: The `experimental_sx` has been moved to `theme.unstable_sx`.For more details, see https://github.com/mui/material-ui/pull/35150." -} +{} diff --git a/docs/types/icons.d.ts b/docs/types/icons.d.ts deleted file mode 100644 index a233a9782c..0000000000 --- a/docs/types/icons.d.ts +++ /dev/null @@ -1,2 +0,0 @@ -declare module '@mui/icons-material'; -declare module '@mui/icons-material/*'; diff --git a/docs/types/material-ui.d.ts b/docs/types/material-ui.d.ts deleted file mode 100644 index faa100b8a8..0000000000 --- a/docs/types/material-ui.d.ts +++ /dev/null @@ -1,28 +0,0 @@ -import type { - CssVarsTheme, - CssVarsPalette, - PaletteBackgroundChannel, - PaletteCommonChannel, - PaletteColorChannel, - PaletteTextChannel, - PaletteActionChannel, -} from '@mui/material/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<CssVarsTheme, 'palette'> {} - - // Extend the type that will be used in palette - interface CommonColors extends PaletteCommonChannel {} - interface PaletteColor extends PaletteColorChannel {} - interface TypeBackground extends PaletteBackgroundChannel {} - interface TypeText extends PaletteTextChannel {} - interface TypeAction extends PaletteActionChannel {} - - // The extended Palette should be in sync with `extendTheme` - interface Palette extends CssVarsPalette {} -} diff --git a/package.json b/package.json index 1314eaff74..922e1c73f9 100644 --- a/package.json +++ b/package.json @@ -80,7 +80,6 @@ "@mui/internal-markdown": "^1.0.12", "@mui/internal-scripts": "^1.0.19", "@mui/internal-test-utils": "1.0.12", - "@mui/material": "6.0.2", "@mui/monorepo": "github:mui/material-ui#8094d0bf72a", "@mui/utils": "6.0.2", "@next/eslint-plugin-next": "^14.2.7", diff --git a/packages/mui-base/package.json b/packages/mui-base/package.json index 9fb7c50d51..e54b1dba8f 100644 --- a/packages/mui-base/package.json +++ b/packages/mui-base/package.json @@ -52,7 +52,6 @@ "use-sync-external-store": "^1.2.2" }, "devDependencies": { - "@mui/internal-babel-macros": "^1.0.1", "@mui/internal-test-utils": "1.0.12", "@testing-library/react": "^15.0.7", "@testing-library/user-event": "^14.5.2", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 3620b16c69..456e6f8c1b 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -67,9 +67,6 @@ importers: '@mui/internal-test-utils': specifier: 1.0.12 version: 1.0.12(@babel/core@7.25.2)(@types/react-dom@18.3.0)(@types/react@18.3.5)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) - '@mui/material': - specifier: 6.0.2 - version: 6.0.2(@emotion/react@11.13.3(@types/react@18.3.5)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.3(@types/react@18.3.5)(react@18.3.1))(@types/react@18.3.5)(react@18.3.1))(@types/react@18.3.5)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) '@mui/monorepo': specifier: github:mui/material-ui#8094d0bf72a version: https://codeload.github.com/mui/material-ui/tar.gz/8094d0bf72a(encoding@0.1.13) @@ -358,21 +355,9 @@ importers: '@mdx-js/mdx': specifier: ^3.0.1 version: 3.0.1 - '@mui/docs': - specifier: 6.0.2 - version: 6.0.2(k43luvnjvbukxr2uxbgmdcf32i) - '@mui/icons-material': - specifier: 6.0.2 - version: 6.0.2(@mui/material@6.0.2(@emotion/react@11.13.3(@types/react@18.3.5)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.3(@types/react@18.3.5)(react@18.3.1))(@types/react@18.3.5)(react@18.3.1))(@types/react@18.3.5)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@types/react@18.3.5)(react@18.3.1) - '@mui/material': - specifier: 6.0.2 - version: 6.0.2(@emotion/react@11.13.3(@types/react@18.3.5)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.3(@types/react@18.3.5)(react@18.3.1))(@types/react@18.3.5)(react@18.3.1))(@types/react@18.3.5)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) '@mui/system': specifier: 6.0.2 version: 6.0.2(@emotion/react@11.13.3(@types/react@18.3.5)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.3(@types/react@18.3.5)(react@18.3.1))(@types/react@18.3.5)(react@18.3.1))(@types/react@18.3.5)(react@18.3.1) - '@mui/types': - specifier: 7.2.16 - version: 7.2.16(@types/react@18.3.5) '@mui/utils': specifier: 6.0.2 version: 6.0.2(@types/react@18.3.5)(react@18.3.1) @@ -588,9 +573,6 @@ importers: specifier: ^1.2.2 version: 1.2.2(react@18.3.1) devDependencies: - '@mui/internal-babel-macros': - specifier: ^1.0.1 - version: 1.0.1(@mui/utils@6.0.2(@types/react@18.3.5)(react@18.3.1)) '@mui/internal-test-utils': specifier: 1.0.12 version: 1.0.12(@babel/core@7.25.2)(@types/react-dom@18.3.0)(@types/react@18.3.5)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) @@ -661,12 +643,6 @@ importers: '@mui/internal-test-utils': specifier: 1.0.12 version: 1.0.12(@babel/core@7.25.2)(@types/react-dom@18.3.0)(@types/react@18.3.5)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) - '@mui/joy': - specifier: 5.0.0-beta.48 - version: 5.0.0-beta.48(@emotion/react@11.13.3(@types/react@18.3.5)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.3(@types/react@18.3.5)(react@18.3.1))(@types/react@18.3.5)(react@18.3.1))(@types/react@18.3.5)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) - '@mui/material': - specifier: 6.0.2 - version: 6.0.2(@emotion/react@11.13.3(@types/react@18.3.5)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.3(@types/react@18.3.5)(react@18.3.1))(@types/react@18.3.5)(react@18.3.1))(@types/react@18.3.5)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) '@playwright/test': specifier: 1.46.1 version: 1.46.1 @@ -1936,68 +1912,6 @@ packages: peerDependencies: '@babel/core': ^7.25.2 - '@mui/base@5.0.0-beta.40': - resolution: {integrity: sha512-I/lGHztkCzvwlXpjD2+SNmvNQvB4227xBXhISPjEaJUXGImOQ9f3D2Yj/T3KasSI/h0MLWy74X0J6clhPmsRbQ==} - engines: {node: '>=12.0.0'} - peerDependencies: - '@types/react': ^18.3.5 - react: ^17.0.0 || ^18.0.0 - react-dom: ^17.0.0 || ^18.0.0 - peerDependenciesMeta: - '@types/react': - optional: true - - '@mui/base@5.0.0-beta.53': - resolution: {integrity: sha512-WeLTX9zMQPxZ7w9oitDjxOZeQYDVx8JC/I81NUTdboyI7zp+K0ktpJ79gciruKf5Z9qD01+DfwzEisY05mk3QQ==} - engines: {node: '>=12.0.0'} - peerDependencies: - '@types/react': ^18.3.5 - react: ^17.0.0 || ^18.0.0 - react-dom: ^17.0.0 || ^18.0.0 - peerDependenciesMeta: - '@types/react': - optional: true - - '@mui/core-downloads-tracker@5.16.1': - resolution: {integrity: sha512-62Jq7ACYi/55Kjkh/nVfEL3F3ytTYTsdB8MGJ9iI+eRQv+Aoem5CPUAzQihUo25qqh1VkVu9/jQn3dFbyrXHgw==} - - '@mui/core-downloads-tracker@6.0.2': - resolution: {integrity: sha512-Cg68oOlAfbJgMgvbCwcX3Y3HdygCl6X1nREYTdEWcEKUQhNarrC45Cc35mP+zA7p3ZXE/7FLiaTCCgwuSoef/Q==} - - '@mui/docs@6.0.2': - resolution: {integrity: sha512-2iEOJbelGf+44CeRT1u7GuCui925Ot6nFIEDJEzcrvJFqw9+AMvzexjWe/emGQAGFAcjU1/4wZVUNKnW8SY8PQ==} - engines: {node: '>=14.0.0'} - peerDependencies: - '@mui/base': '*' - '@mui/icons-material': ^5.0.0 || ^6.0.0 - '@mui/material': ^5.0.0 || ^6.0.0 - '@mui/system': ^5.0.0 || ^6.0.0 - '@types/react': ^18.3.5 - chai: ^4.4.1 - csstype: ^3.1.3 - next: ^13.5.1 || ^14 - react: ^17.0.0 || ^18.0.0 || ^19.0.0 - peerDependenciesMeta: - '@types/react': - optional: true - - '@mui/icons-material@6.0.2': - resolution: {integrity: sha512-WaTPSvKcx8X7NdWAHzJWDZv+YXvK0MUY8+JI/r4/q2GgIa5RW+n4+08CGX6jB7sWhU1R3zy28NfsDUwwQjOThw==} - engines: {node: '>=14.0.0'} - peerDependencies: - '@mui/material': ^6.0.2 - '@types/react': ^18.3.5 - react: ^17.0.0 || ^18.0.0 || ^19.0.0 - peerDependenciesMeta: - '@types/react': - optional: true - - '@mui/internal-babel-macros@1.0.1': - resolution: {integrity: sha512-Ixu0PibDw/i3yumvt0IY8FxmLdJy6lbfVosJ1MJymKdihhnTdOgQhyw+SHcn94ZMwJVF7E9kqPH8YmmZoGOhZA==} - engines: {node: '>=12.0.0'} - peerDependencies: - '@mui/utils': ^5.0.0 - '@mui/internal-docs-utils@1.0.12': resolution: {integrity: sha512-U5nkY88gi+a2MR6S2wXULPr7wscXFlLAatX2kn4S2bGGi/tLndSgmmzsvUKWMG/2bSnJ50F1frHnhgPkFM4znA==} @@ -2013,58 +1927,11 @@ packages: react: ^18.2.0 react-dom: ^18.2.0 - '@mui/joy@5.0.0-beta.48': - resolution: {integrity: sha512-OhTvjuGl9I5IvpBr0BQyDehIW/xb2yteW6YglHJMdOb/279nItn76X1NBtPV9ImldNlBjReGwvpOXmBTTGER9w==} - engines: {node: '>=12.0.0'} - peerDependencies: - '@emotion/react': ^11.5.0 - '@emotion/styled': ^11.3.0 - '@types/react': ^18.3.5 - react: ^17.0.0 || ^18.0.0 - react-dom: ^17.0.0 || ^18.0.0 - peerDependenciesMeta: - '@emotion/react': - optional: true - '@emotion/styled': - optional: true - '@types/react': - optional: true - - '@mui/material@6.0.2': - resolution: {integrity: sha512-KrnkJFSyhsAh8V30DNUbWyRyxMi4ZHjFg1ikQGx+mUAIffFTYIEx9Q+Kxd3vCT0FUFGOmbsuh6F6yRhpybsjkg==} - engines: {node: '>=14.0.0'} - peerDependencies: - '@emotion/react': ^11.5.0 - '@emotion/styled': ^11.3.0 - '@mui/material-pigment-css': ^6.0.2 - '@types/react': ^18.3.5 - react: ^17.0.0 || ^18.0.0 || ^19.0.0 - react-dom: ^17.0.0 || ^18.0.0 || ^19.0.0 - peerDependenciesMeta: - '@emotion/react': - optional: true - '@emotion/styled': - optional: true - '@mui/material-pigment-css': - optional: true - '@types/react': - optional: true - '@mui/monorepo@https://codeload.github.com/mui/material-ui/tar.gz/8094d0bf72a': resolution: {tarball: https://codeload.github.com/mui/material-ui/tar.gz/8094d0bf72a} version: 6.0.2 engines: {pnpm: 9.7.1} - '@mui/private-theming@5.16.1': - resolution: {integrity: sha512-2EGCKnAlq9vRIFj61jNWNXlKAxXp56577OVvsts7fAqRx+G1y6F+N7Q198SBaz8jYQeGKSz8ZMXK/M3FqjdEyw==} - engines: {node: '>=12.0.0'} - peerDependencies: - '@types/react': ^18.3.5 - react: ^17.0.0 || ^18.0.0 - peerDependenciesMeta: - '@types/react': - optional: true - '@mui/private-theming@6.0.2': resolution: {integrity: sha512-emddFcRhA0hPGVIwIbW5g0V8vtCgw2g/H/A7jTdGe7dpCWEPpp6jPIXRRKcEUWgmg91R6rBNfV+LFHxBxmZXOQ==} engines: {node: '>=14.0.0'} @@ -2075,19 +1942,6 @@ packages: '@types/react': optional: true - '@mui/styled-engine@5.16.1': - resolution: {integrity: sha512-JwWUBaYR8HHCFefSeos0z6JoTbu0MnjAuNHu4QoDgPxl2EE70XH38CsKay66Iy0QkNWmGTRXVU2sVFgUOPL/Dw==} - engines: {node: '>=12.0.0'} - peerDependencies: - '@emotion/react': ^11.4.1 - '@emotion/styled': ^11.3.0 - react: ^17.0.0 || ^18.0.0 - peerDependenciesMeta: - '@emotion/react': - optional: true - '@emotion/styled': - optional: true - '@mui/styled-engine@6.0.2': resolution: {integrity: sha512-qd3Vlhted0SYVGotnCfVNcxff7vW2WN0fclbAexff60NeNS1qs/H/CImHEHUBiUGeNWMPRochbN6VF1arQ7/jA==} engines: {node: '>=14.0.0'} @@ -2101,22 +1955,6 @@ packages: '@emotion/styled': optional: true - '@mui/system@5.16.1': - resolution: {integrity: sha512-VaFcClC+uhvIEzhzcNmh9FRBvrG9IPjsOokhj6U1HPZsFnLzHV7AD7dJcT6LxWoiIZj9Ej0GK+MGh/b8+BtSlQ==} - engines: {node: '>=12.0.0'} - peerDependencies: - '@emotion/react': ^11.5.0 - '@emotion/styled': ^11.3.0 - '@types/react': ^18.3.5 - react: ^17.0.0 || ^18.0.0 - peerDependenciesMeta: - '@emotion/react': - optional: true - '@emotion/styled': - optional: true - '@types/react': - optional: true - '@mui/system@6.0.2': resolution: {integrity: sha512-AZv1/C4PuHgWFTA8YraIzl3FTVLdRz0RIMRwEADWZBdIhnuTHS/4+r8qE9+3CcpTHg1WsEu8btaO3AhQahSM9A==} engines: {node: '>=14.0.0'} @@ -2141,26 +1979,6 @@ packages: '@types/react': optional: true - '@mui/utils@5.16.6': - resolution: {integrity: sha512-tWiQqlhxAt3KENNiSRL+DIn9H5xNVK6Jjf70x3PnfQPz1MPBdh7yyIcAyVBT9xiw7hP3SomRhPR7hzBMBCjqEA==} - engines: {node: '>=12.0.0'} - peerDependencies: - '@types/react': ^18.3.5 - react: ^17.0.0 || ^18.0.0 - peerDependenciesMeta: - '@types/react': - optional: true - - '@mui/utils@6.0.0-beta.0': - resolution: {integrity: sha512-Slu5BBN7laJI5hZSQsksNz5DGJrftaDxuJx902Utu+W6Y8mv4dawc1lpYH13PXJHdO3Jw0JjQZwmYYTqMEqN5Q==} - engines: {node: '>=12.0.0'} - peerDependencies: - '@types/react': ^18.3.5 - react: ^17.0.0 || ^18.0.0 - peerDependenciesMeta: - '@types/react': - optional: true - '@mui/utils@6.0.2': resolution: {integrity: sha512-TeFrYsxcmeoDSlkoPhX+LjIuuqC5Pyj+xz2kRceKCkUpwMNTEeVOfowXDPe+mboZwmpJ5ZxP4eiAgQMdeEasjg==} engines: {node: '>=14.0.0'} @@ -2553,9 +2371,6 @@ packages: '@polka/url@1.0.0-next.25': resolution: {integrity: sha512-j7P6Rgr3mmtdkeDGTe0E/aYyWEWVtc5yFXtHCRHs28/jptDEWfaVOc5T7cblqy1XKPPfCxJc/8DwQ5YgLOZOVQ==} - '@popperjs/core@2.11.8': - resolution: {integrity: sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==} - '@react-spring/animated@9.7.4': resolution: {integrity: sha512-7As+8Pty2QlemJ9O5ecsuPKjmO0NKvmVkRR1n6mEotFgWar8FKuQt2xgxz3RTgxcccghpx1YdS1FCdElQNexmQ==} peerDependencies: @@ -2867,9 +2682,6 @@ packages: '@types/react-is@18.3.0': resolution: {integrity: sha512-KZJpHUkAdzyKj/kUHJDc6N7KyidftICufJfOFpiG6haL/BDQNQt5i4n1XDUL/nDZAtGLHDSWRYpLzKTAKSvX6w==} - '@types/react-transition-group@4.4.11': - resolution: {integrity: sha512-RM05tAniPZ5DZPzzNFP+DmrcOdD0efDUxMy3145oljWSl3x9ZV5vhme98gTxFrj2lhXvmGNnUiuDyJgY9IKkNA==} - '@types/react@18.3.5': resolution: {integrity: sha512-WeqMfGJLGuLCqHGYRGHxnKrXcTitc6L/nBUWfWPcTarG3t9PsquqUMuVeXZeca+mglY4Vo5GZjCi0A3Or2lnxA==} @@ -4191,9 +4003,6 @@ packages: dom-converter@0.2.0: resolution: {integrity: sha512-gd3ypIPfOMr9h5jIKq8E3sHOTCjeirnl0WK5ZdS1AW0Odt0b1PaWaHdJ4Qk4klv+YB9aJBS7mESXjFoDQPu6DA==} - dom-helpers@5.2.1: - resolution: {integrity: sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==} - dom-serialize@2.2.1: resolution: {integrity: sha512-Yra4DbvoW7/Z6LBN560ZwXMjoNOSAN2wRsKFGc4iBeso+mpIA6qj1vfdf9HpMaKAqG6wXTy+1SYEzmNpKXOSsQ==} @@ -6674,9 +6483,6 @@ packages: resolution: {integrity: sha512-ppwTtiJZq0O/ai0z7yfudtBpWIoxM8yE6nHi1X47eFR2EWORqfbu6CnPlNsjeN683eT0qG6H/Pyf9fCcvjnnnQ==} engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0} - nprogress@0.2.0: - resolution: {integrity: sha512-I19aIingLgR1fmhftnbWWO3dXc0hSxqHQHQb3H8m+K3TnEn/iSeTZZOyvKXWqQESMwuUVnatlCnZdLBZZt2VSA==} - nth-check@2.1.1: resolution: {integrity: sha512-lqjrjmaOoAnWfMmBPL+XNnynZh2+swxiX3WUE0s4yEHI6m+AwrK2UZOimIRl3X/4QctVqS8AiZjFqyOGrMXb/w==} @@ -7445,12 +7251,6 @@ packages: react: '*' react-dom: '*' - react-transition-group@4.4.5: - resolution: {integrity: sha512-pZcd1MCJoiKiBR2NRxeCRg13uCXbydPnmB4EOeRrY7480qNWO8IIgQG6zlDkm6uRMsURXPuKq0GWtiM59a5Q6g==} - peerDependencies: - react: '>=16.6.0' - react-dom: '>=16.6.0' - react@18.3.1: resolution: {integrity: sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==} engines: {node: '>=0.10.0'} @@ -10357,74 +10157,6 @@ snapshots: '@babel/core': 7.25.2 '@babel/helper-plugin-utils': 7.24.8 - '@mui/base@5.0.0-beta.40(@types/react@18.3.5)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)': - dependencies: - '@babel/runtime': 7.25.0 - '@floating-ui/react-dom': 2.1.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1) - '@mui/types': 7.2.16(@types/react@18.3.5) - '@mui/utils': 5.16.6(@types/react@18.3.5)(react@18.3.1) - '@popperjs/core': 2.11.8 - clsx: 2.1.1 - prop-types: 15.8.1 - react: 18.3.1 - react-dom: 18.3.1(react@18.3.1) - optionalDependencies: - '@types/react': 18.3.5 - - '@mui/base@5.0.0-beta.53(@types/react@18.3.5)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)': - dependencies: - '@babel/runtime': 7.25.0 - '@floating-ui/react-dom': 2.1.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1) - '@mui/types': 7.2.16(@types/react@18.3.5) - '@mui/utils': 6.0.0-beta.0(@types/react@18.3.5)(react@18.3.1) - '@popperjs/core': 2.11.8 - clsx: 2.1.1 - prop-types: 15.8.1 - react: 18.3.1 - react-dom: 18.3.1(react@18.3.1) - optionalDependencies: - '@types/react': 18.3.5 - - '@mui/core-downloads-tracker@5.16.1': {} - - '@mui/core-downloads-tracker@6.0.2': {} - - '@mui/docs@6.0.2(k43luvnjvbukxr2uxbgmdcf32i)': - dependencies: - '@babel/runtime': 7.25.0 - '@mui/base': 5.0.0-beta.53(@types/react@18.3.5)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) - '@mui/icons-material': 6.0.2(@mui/material@6.0.2(@emotion/react@11.13.3(@types/react@18.3.5)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.3(@types/react@18.3.5)(react@18.3.1))(@types/react@18.3.5)(react@18.3.1))(@types/react@18.3.5)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@types/react@18.3.5)(react@18.3.1) - '@mui/internal-markdown': 1.0.12 - '@mui/material': 6.0.2(@emotion/react@11.13.3(@types/react@18.3.5)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.3(@types/react@18.3.5)(react@18.3.1))(@types/react@18.3.5)(react@18.3.1))(@types/react@18.3.5)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) - '@mui/system': 6.0.2(@emotion/react@11.13.3(@types/react@18.3.5)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.3(@types/react@18.3.5)(react@18.3.1))(@types/react@18.3.5)(react@18.3.1))(@types/react@18.3.5)(react@18.3.1) - chai: 4.5.0 - clipboard-copy: 4.0.1 - clsx: 2.1.1 - csstype: 3.1.3 - next: 14.2.7(@babel/core@7.25.2)(@opentelemetry/api@1.8.0)(@playwright/test@1.46.1)(babel-plugin-macros@3.1.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) - nprogress: 0.2.0 - prop-types: 15.8.1 - react: 18.3.1 - optionalDependencies: - '@types/react': 18.3.5 - - '@mui/icons-material@6.0.2(@mui/material@6.0.2(@emotion/react@11.13.3(@types/react@18.3.5)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.3(@types/react@18.3.5)(react@18.3.1))(@types/react@18.3.5)(react@18.3.1))(@types/react@18.3.5)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@types/react@18.3.5)(react@18.3.1)': - dependencies: - '@babel/runtime': 7.25.0 - '@mui/material': 6.0.2(@emotion/react@11.13.3(@types/react@18.3.5)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.3(@types/react@18.3.5)(react@18.3.1))(@types/react@18.3.5)(react@18.3.1))(@types/react@18.3.5)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) - react: 18.3.1 - optionalDependencies: - '@types/react': 18.3.5 - - '@mui/internal-babel-macros@1.0.1(@mui/utils@6.0.2(@types/react@18.3.5)(react@18.3.1))': - dependencies: - '@babel/helper-module-imports': 7.24.7 - '@babel/runtime': 7.25.0 - '@mui/utils': 6.0.2(@types/react@18.3.5)(react@18.3.1) - babel-plugin-macros: 3.1.0 - transitivePeerDependencies: - - supports-color - '@mui/internal-docs-utils@1.0.12': dependencies: rimraf: 5.0.10 @@ -10485,44 +10217,6 @@ snapshots: - supports-color - utf-8-validate - '@mui/joy@5.0.0-beta.48(@emotion/react@11.13.3(@types/react@18.3.5)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.3(@types/react@18.3.5)(react@18.3.1))(@types/react@18.3.5)(react@18.3.1))(@types/react@18.3.5)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)': - dependencies: - '@babel/runtime': 7.25.0 - '@mui/base': 5.0.0-beta.40(@types/react@18.3.5)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) - '@mui/core-downloads-tracker': 5.16.1 - '@mui/system': 5.16.1(@emotion/react@11.13.3(@types/react@18.3.5)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.3(@types/react@18.3.5)(react@18.3.1))(@types/react@18.3.5)(react@18.3.1))(@types/react@18.3.5)(react@18.3.1) - '@mui/types': 7.2.16(@types/react@18.3.5) - '@mui/utils': 5.16.6(@types/react@18.3.5)(react@18.3.1) - clsx: 2.1.1 - prop-types: 15.8.1 - react: 18.3.1 - react-dom: 18.3.1(react@18.3.1) - optionalDependencies: - '@emotion/react': 11.13.3(@types/react@18.3.5)(react@18.3.1) - '@emotion/styled': 11.13.0(@emotion/react@11.13.3(@types/react@18.3.5)(react@18.3.1))(@types/react@18.3.5)(react@18.3.1) - '@types/react': 18.3.5 - - '@mui/material@6.0.2(@emotion/react@11.13.3(@types/react@18.3.5)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.3(@types/react@18.3.5)(react@18.3.1))(@types/react@18.3.5)(react@18.3.1))(@types/react@18.3.5)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)': - dependencies: - '@babel/runtime': 7.25.0 - '@mui/core-downloads-tracker': 6.0.2 - '@mui/system': 6.0.2(@emotion/react@11.13.3(@types/react@18.3.5)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.3(@types/react@18.3.5)(react@18.3.1))(@types/react@18.3.5)(react@18.3.1))(@types/react@18.3.5)(react@18.3.1) - '@mui/types': 7.2.16(@types/react@18.3.5) - '@mui/utils': 6.0.2(@types/react@18.3.5)(react@18.3.1) - '@popperjs/core': 2.11.8 - '@types/react-transition-group': 4.4.11 - clsx: 2.1.1 - csstype: 3.1.3 - prop-types: 15.8.1 - react: 18.3.1 - react-dom: 18.3.1(react@18.3.1) - react-is: 18.3.1 - react-transition-group: 4.4.5(react-dom@18.3.1(react@18.3.1))(react@18.3.1) - optionalDependencies: - '@emotion/react': 11.13.3(@types/react@18.3.5)(react@18.3.1) - '@emotion/styled': 11.13.0(@emotion/react@11.13.3(@types/react@18.3.5)(react@18.3.1))(@types/react@18.3.5)(react@18.3.1) - '@types/react': 18.3.5 - '@mui/monorepo@https://codeload.github.com/mui/material-ui/tar.gz/8094d0bf72a(encoding@0.1.13)': dependencies: '@googleapis/sheets': 9.3.0(encoding@0.1.13) @@ -10537,15 +10231,6 @@ snapshots: - supports-color - utf-8-validate - '@mui/private-theming@5.16.1(@types/react@18.3.5)(react@18.3.1)': - dependencies: - '@babel/runtime': 7.25.0 - '@mui/utils': 5.16.6(@types/react@18.3.5)(react@18.3.1) - prop-types: 15.8.1 - react: 18.3.1 - optionalDependencies: - '@types/react': 18.3.5 - '@mui/private-theming@6.0.2(@types/react@18.3.5)(react@18.3.1)': dependencies: '@babel/runtime': 7.25.0 @@ -10555,17 +10240,6 @@ snapshots: optionalDependencies: '@types/react': 18.3.5 - '@mui/styled-engine@5.16.1(@emotion/react@11.13.3(@types/react@18.3.5)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.3(@types/react@18.3.5)(react@18.3.1))(@types/react@18.3.5)(react@18.3.1))(react@18.3.1)': - dependencies: - '@babel/runtime': 7.25.0 - '@emotion/cache': 11.13.1 - csstype: 3.1.3 - prop-types: 15.8.1 - react: 18.3.1 - optionalDependencies: - '@emotion/react': 11.13.3(@types/react@18.3.5)(react@18.3.1) - '@emotion/styled': 11.13.0(@emotion/react@11.13.3(@types/react@18.3.5)(react@18.3.1))(@types/react@18.3.5)(react@18.3.1) - '@mui/styled-engine@6.0.2(@emotion/react@11.13.3(@types/react@18.3.5)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.3(@types/react@18.3.5)(react@18.3.1))(@types/react@18.3.5)(react@18.3.1))(react@18.3.1)': dependencies: '@babel/runtime': 7.25.0 @@ -10577,22 +10251,6 @@ snapshots: '@emotion/react': 11.13.3(@types/react@18.3.5)(react@18.3.1) '@emotion/styled': 11.13.0(@emotion/react@11.13.3(@types/react@18.3.5)(react@18.3.1))(@types/react@18.3.5)(react@18.3.1) - '@mui/system@5.16.1(@emotion/react@11.13.3(@types/react@18.3.5)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.3(@types/react@18.3.5)(react@18.3.1))(@types/react@18.3.5)(react@18.3.1))(@types/react@18.3.5)(react@18.3.1)': - dependencies: - '@babel/runtime': 7.25.0 - '@mui/private-theming': 5.16.1(@types/react@18.3.5)(react@18.3.1) - '@mui/styled-engine': 5.16.1(@emotion/react@11.13.3(@types/react@18.3.5)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.3(@types/react@18.3.5)(react@18.3.1))(@types/react@18.3.5)(react@18.3.1))(react@18.3.1) - '@mui/types': 7.2.16(@types/react@18.3.5) - '@mui/utils': 5.16.6(@types/react@18.3.5)(react@18.3.1) - clsx: 2.1.1 - csstype: 3.1.3 - prop-types: 15.8.1 - react: 18.3.1 - optionalDependencies: - '@emotion/react': 11.13.3(@types/react@18.3.5)(react@18.3.1) - '@emotion/styled': 11.13.0(@emotion/react@11.13.3(@types/react@18.3.5)(react@18.3.1))(@types/react@18.3.5)(react@18.3.1) - '@types/react': 18.3.5 - '@mui/system@6.0.2(@emotion/react@11.13.3(@types/react@18.3.5)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.3(@types/react@18.3.5)(react@18.3.1))(@types/react@18.3.5)(react@18.3.1))(@types/react@18.3.5)(react@18.3.1)': dependencies: '@babel/runtime': 7.25.0 @@ -10613,28 +10271,6 @@ snapshots: optionalDependencies: '@types/react': 18.3.5 - '@mui/utils@5.16.6(@types/react@18.3.5)(react@18.3.1)': - dependencies: - '@babel/runtime': 7.25.0 - '@mui/types': 7.2.16(@types/react@18.3.5) - '@types/prop-types': 15.7.12 - clsx: 2.1.1 - prop-types: 15.8.1 - react: 18.3.1 - react-is: 18.3.1 - optionalDependencies: - '@types/react': 18.3.5 - - '@mui/utils@6.0.0-beta.0(@types/react@18.3.5)(react@18.3.1)': - dependencies: - '@babel/runtime': 7.25.0 - '@types/prop-types': 15.7.12 - prop-types: 15.8.1 - react: 18.3.1 - react-is: 18.3.1 - optionalDependencies: - '@types/react': 18.3.5 - '@mui/utils@6.0.2(@types/react@18.3.5)(react@18.3.1)': dependencies: '@babel/runtime': 7.25.0 @@ -11127,8 +10763,6 @@ snapshots: '@polka/url@1.0.0-next.25': {} - '@popperjs/core@2.11.8': {} - '@react-spring/animated@9.7.4(react@18.3.1)': dependencies: '@react-spring/shared': 9.7.4(react@18.3.1) @@ -11504,10 +11138,6 @@ snapshots: dependencies: '@types/react': 18.3.5 - '@types/react-transition-group@4.4.11': - dependencies: - '@types/react': 18.3.5 - '@types/react@18.3.5': dependencies: '@types/prop-types': 15.7.12 @@ -13027,11 +12657,6 @@ snapshots: dependencies: utila: 0.4.0 - dom-helpers@5.2.1: - dependencies: - '@babel/runtime': 7.25.0 - csstype: 3.1.3 - dom-serialize@2.2.1: dependencies: custom-event: 1.0.1 @@ -16397,8 +16022,6 @@ snapshots: dependencies: path-key: 4.0.0 - nprogress@0.2.0: {} - nth-check@2.1.1: dependencies: boolbase: 1.0.0 @@ -17224,15 +16847,6 @@ snapshots: react: 18.3.1 react-dom: 18.3.1(react@18.3.1) - react-transition-group@4.4.5(react-dom@18.3.1(react@18.3.1))(react@18.3.1): - dependencies: - '@babel/runtime': 7.25.0 - dom-helpers: 5.2.1 - loose-envify: 1.4.0 - prop-types: 15.8.1 - react: 18.3.1 - react-dom: 18.3.1(react@18.3.1) - react@18.3.1: dependencies: loose-envify: 1.4.0 diff --git a/scripts/buildTypes.mjs b/scripts/buildTypes.mjs deleted file mode 100644 index f2a4e0d9e4..0000000000 --- a/scripts/buildTypes.mjs +++ /dev/null @@ -1,157 +0,0 @@ -import chalk from 'chalk'; -import glob from 'fast-glob'; -import fse from 'fs-extra'; -import path from 'path'; -import yargs from 'yargs'; -import { $ } from 'execa'; - -const $$ = $({ stdio: 'inherit' }); - -/** - * Fixes a wrong import path caused by https://github.com/microsoft/TypeScript/issues/39117 - * @remarks Paths are hardcoded since it is unclear if all these broken import paths target "public paths". - * @param {string} importPath - POSIX path - */ -function rewriteImportPath(importPath) { - const coreSrcPath = path.posix.join('..', 'mui-material', 'src'); - if (importPath.startsWith(coreSrcPath)) { - return importPath.replace(coreSrcPath, '@mui/material'); - } - - const stylesSrcPath = path.posix.join('..', 'mui-styles', 'src'); - if (importPath.startsWith(stylesSrcPath)) { - return importPath.replace(stylesSrcPath, '@mui/styles'); - } - - const systemSrcPath = path.posix.join('..', 'mui-system', 'src'); - if (importPath.startsWith(systemSrcPath)) { - return importPath.replace(systemSrcPath, '@mui/system'); - } - - throw new Error(`Don't know where to rewrite '${importPath}' to`); -} - -async function rewriteImportPaths(declarationFile, publishDir) { - const code = await fse.readFile(declarationFile, { encoding: 'utf8' }); - const basename = path.basename(declarationFile); - - if ( - // Only consider React components - basename[0] === basename[0].toUpperCase() && - code.indexOf("import PropTypes from 'prop-types';") !== -1 - ) { - throw new Error( - [ - `${declarationFile} imports from 'prop-types', this is wrong.`, - "It's likely missing a cast to any on the propTypes declaration:", - 'ComponentName.propTypes = { /* prop */ } as any;', - ].join('\n'), - ); - } - - let fixedCode = code; - const changes = []; - - // find all type `import()` - // not to be confused with `import type` - const importTypeRegExp = /import\(([^)]+)\)/g; - - let importTypeMatch; - // eslint-disable-next-line no-cond-assign -- Waiting for RegExp.prototype.matchAll - while ((importTypeMatch = importTypeRegExp.exec(code)) !== null) { - // First and last character are quotes. - // TypeScript mixes single and double quotes. - const importPath = importTypeMatch[1].slice(1, -1); - // In filesystem semantics `@mui/material` is a relative path. - // But when resolving imports these specifiers are considered "bare specifiers" and work differently. - // We're only interested in imports that are considered "relative path imports". - const isBareImportSpecifier = !importPath.startsWith('.'); - if (!isBareImportSpecifier) { - const resolvedImport = path.resolve(declarationFile, importPath); - const importPathFromPublishDir = path.relative(publishDir, resolvedImport); - const isImportReachableWhenPublished = !importPathFromPublishDir.startsWith('.'); - - if (!isImportReachableWhenPublished) { - try { - const fixedImportPath = rewriteImportPath( - // ensure relative POSIX path - importPathFromPublishDir.replace(/\\/g, '/'), - ); - const originalImportType = importTypeMatch[0]; - const fixedImportType = importTypeMatch[0].replace(importPath, fixedImportPath); - - // Make it easy to visually scan for the created lines. - changes.push(`-${chalk.bgRed(originalImportType)}\n+${chalk.bgGreen(fixedImportType)}`); - fixedCode = fixedCode.replace(originalImportType, fixedImportType); - } catch (error) { - throw new Error(`${declarationFile}: ${error}`); - } - } - } - } - - const changed = changes.length > 0; - if (changed) { - await fse.writeFile(declarationFile, fixedCode); - } - - return changes; -} - -async function main() { - const packageRoot = process.cwd(); - - const tsconfigPath = path.join(packageRoot, 'tsconfig.build.json'); - if (!fse.existsSync(tsconfigPath)) { - throw new Error( - 'Unable to find a tsconfig to build this project. ' + - `The package root needs to contain a 'tsconfig.build.json'. ` + - `The package root is '${packageRoot}'`, - ); - } - - await $$`pnpm tsc -b ${tsconfigPath}`; - - const publishDir = path.join(packageRoot, 'build'); - const declarationFiles = await glob('**/*.d.ts', { absolute: true, cwd: publishDir }); - if (declarationFiles.length === 0) { - throw new Error(`Unable to find declaration files in '${publishDir}'`); - } - - let rewrittenTally = 0; - let errorTally = 0; - await Promise.all( - declarationFiles.map(async (declarationFile) => { - try { - const rewrites = await rewriteImportPaths(declarationFile, publishDir); - if (rewrites.length > 0) { - // eslint-disable-next-line no-console -- Verbose logging - console.log(`${chalk.bgYellow`FIXED`} '${declarationFile}':\n${rewrites.join('\n')}`); - rewrittenTally += 1; - } else { - // eslint-disable-next-line no-console -- Verbose logging - console.log(`${chalk.bgGreen`OK`} '${declarationFile}'`); - } - } catch (error) { - console.error(error); - errorTally += 1; - process.exitCode = 1; - } - }), - ); - - // eslint-disable-next-line no-console -- Verbose logging - console.log(`Fixed: ${rewrittenTally}\nFailed: ${errorTally}\nTotal: ${declarationFiles.length}`); -} - -yargs(process.argv.slice(2)) - .command({ - command: '$0', - description: - 'Builds a project with a fix for https://github.com/microsoft/TypeScript/issues/39117', - handler: main, - }) - .help() - .strict(true) - .version(false) - .parse(); diff --git a/scripts/sizeSnapshot/webpack.config.js b/scripts/sizeSnapshot/webpack.config.js index f6e2455d37..7531667d71 100644 --- a/scripts/sizeSnapshot/webpack.config.js +++ b/scripts/sizeSnapshot/webpack.config.js @@ -7,27 +7,8 @@ const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer'); const workspaceRoot = path.join(__dirname, '..', '..'); async function getWebpackEntries() { - const materialPackagePath = path.join(workspaceRoot, 'packages/mui-material/build'); - const materialComponents = (await glob(path.join(materialPackagePath, '([A-Z])*/index.js'))).map( - (componentPath) => { - const componentName = path.basename(path.dirname(componentPath)); - let entryName = componentName; - // adjust for legacy names - if (componentName === 'Paper') { - entryName = '@material-ui/core/Paper.esm'; - } else if (componentName === 'TextareaAutosize') { - entryName = '@material-ui/core/Textarea'; - } - - return { - id: entryName, - path: path.relative(workspaceRoot, path.dirname(componentPath)), - }; - }, - ); - - const corePackagePath = path.join(workspaceRoot, 'packages/mui-base/build'); - const coreComponents = (await glob(path.join(corePackagePath, '([A-Z])*/index.js'))).map( + const baseUiPackagePath = path.join(workspaceRoot, 'packages/mui-base/build'); + const baseUiComponents = (await glob(path.join(baseUiPackagePath, '([A-Z])*/index.js'))).map( (componentPath) => { const componentName = path.basename(path.dirname(componentPath)); @@ -38,125 +19,12 @@ async function getWebpackEntries() { }, ); - const labPackagePath = path.join(workspaceRoot, 'packages/mui-lab/build'); - const labComponents = (await glob(path.join(labPackagePath, '([A-Z])*/index.js'))).map( - (componentPath) => { - const componentName = path.basename(path.dirname(componentPath)); - - return { - id: componentName, - path: path.relative(workspaceRoot, path.dirname(componentPath)), - }; - }, - ); - - const materialNextPackagePath = path.join(workspaceRoot, 'packages/mui-material-next/build'); - const materialNextComponents = ( - await glob(path.join(materialNextPackagePath, '([A-Z])*/index.js')) - ).map((componentPath) => { - const componentName = path.basename(path.dirname(componentPath)); - - return { - id: `@mui/material-next/${componentName}`, - path: path.relative(workspaceRoot, path.dirname(componentPath)), - }; - }); - - const joyPackagePath = path.join(workspaceRoot, 'packages/mui-joy/build'); - const joyComponents = (await glob(path.join(joyPackagePath, '([A-Z])*/index.js'))).map( - (componentPath) => { - const componentName = path.basename(path.dirname(componentPath)); - - return { - id: `@mui/joy/${componentName}`, - path: path.relative(workspaceRoot, path.dirname(componentPath)), - }; - }, - ); - return [ + ...baseUiComponents, { - // WARNING: Changing the name will break tracking of bundle size over time - // If the name of the package changes, rename its display name in https://github.com/eps1lon/mui-contributor-dashboard/blob/main/src/pages/SizeComparison.tsx - id: '@material-ui/core', - path: path.join(path.relative(workspaceRoot, materialPackagePath), 'index.js'), - }, - ...materialComponents, - { - id: '@material-ui/lab', - path: path.join(path.relative(workspaceRoot, labPackagePath), 'index.js'), - }, - ...labComponents, - { - id: '@material-ui/styles', - path: 'packages/mui-styles/build/index.js', - }, - { - id: '@material-ui/private-theming', - path: 'packages/mui-private-theming/build/index.js', - }, - { - id: '@material-ui/system', - path: 'packages/mui-system/build/esm/index.js', - }, - { - id: 'createBox', - path: 'packages/mui-system/build/esm/createBox.js', - }, - { - id: 'createStyled', - path: 'packages/mui-system/build/esm/createStyled.js', - }, - { - id: '@material-ui/core/styles/createTheme', - path: 'packages/mui-material/build/styles/createTheme.js', - }, - { - id: 'colorManipulator', - path: 'packages/mui-system/build/colorManipulator.js', - }, - { - id: 'useAutocomplete', - path: 'packages/mui-lab/build/useAutocomplete/index.js', - }, - { - id: '@material-ui/core/useMediaQuery', - path: 'packages/mui-material/build/useMediaQuery/index.js', - }, - { - id: '@material-ui/core/useScrollTrigger', - path: 'packages/mui-material/build/useScrollTrigger/index.js', - }, - { - id: '@material-ui/unstyled', - path: path.join(path.relative(workspaceRoot, corePackagePath), 'index.js'), - }, - ...coreComponents, - { - id: '@material-ui/utils', - path: 'packages/mui-utils/build/index.js', - }, - // TODO: Requires webpack v5 - // Resolution of webpack/acorn to 7.x is blocked by nextjs (https://github.com/vercel/next.js/issues/11947) - // { - // id: '@material-ui/core.modern', - // webpack: true, - // path: path.join(path.relative(workspaceRoot, materialPackagePath), 'modern/index.js'), - // }, - { - id: '@material-ui/core.legacy', - path: path.join(path.relative(workspaceRoot, materialPackagePath), 'legacy/index.js'), - }, - { - id: '@mui/material-next', - path: path.join(path.relative(workspaceRoot, materialNextPackagePath), 'index.js'), - }, - ...materialNextComponents, - { - id: '@mui/joy', - path: path.join(path.relative(workspaceRoot, joyPackagePath), 'index.js'), + id: '@base_ui/react', + path: path.join(path.relative(workspaceRoot, baseUiPackagePath), 'index.js'), }, - ...joyComponents, ]; } @@ -204,18 +72,7 @@ function createWebpackConfig(entry, environment) { ], resolve: { alias: { - '@mui/material': path.join(workspaceRoot, 'packages/mui-material/build'), - '@mui/lab': path.join(workspaceRoot, 'packages/mui-lab/build'), - '@mui/styled-engine': path.join(workspaceRoot, 'packages/mui-styled-engine/build'), - '@mui/styled-engine-sc': path.join(workspaceRoot, 'packages/mui-styles-sc/build'), - '@mui/styles': path.join(workspaceRoot, 'packages/mui-styles/build'), - '@mui/system': path.join(workspaceRoot, 'packages/mui-system/build'), - '@mui/private-theming': path.join(workspaceRoot, 'packages/mui-private-theming/build'), - '@mui/utils': path.join(workspaceRoot, 'packages/mui-utils/build'), '@base_ui/react': path.join(workspaceRoot, 'packages/mui-base/build'), - '@mui/material-next': path.join(workspaceRoot, 'packages/mui-material-next/build'), - '@mui/material-nextjs': path.join(workspaceRoot, 'packages/mui-material-nextjs/build'), - '@mui/joy': path.join(workspaceRoot, 'packages/mui-joy/build'), }, }, entry: { [entry.id]: path.join(workspaceRoot, entry.path) }, diff --git a/test/package.json b/test/package.json index a1fcf58c05..b17884ebe8 100644 --- a/test/package.json +++ b/test/package.json @@ -11,8 +11,6 @@ "@emotion/cache": "^11.13.1", "@emotion/react": "^11.13.3", "@mui/internal-test-utils": "1.0.12", - "@mui/joy": "5.0.0-beta.48", - "@mui/material": "6.0.2", "@playwright/test": "1.46.1", "@testing-library/dom": "^10.4.0", "@types/chai": "^4.3.19", diff --git a/test/regressions/TestViewer.js b/test/regressions/TestViewer.js index a4985b0849..24f569d141 100644 --- a/test/regressions/TestViewer.js +++ b/test/regressions/TestViewer.js @@ -1,10 +1,6 @@ import * as React from 'react'; import PropTypes from 'prop-types'; import { useFakeTimers } from 'sinon'; -import Box from '@mui/material/Box'; -import GlobalStyles from '@mui/material/GlobalStyles'; -import JoyBox from '@mui/joy/Box'; -import { CssVarsProvider } from '@mui/joy/styles'; function TestViewer(props) { const { children } = props; @@ -48,48 +44,39 @@ function TestViewer(props) { }; }, []); + const globalStyles = ` + html { + --webkit-font-smoothing: antialiased; + --moz-osx-font-smoothing: grayscale; + /* Do the opposite of the docs in order to help catching issues. */ + box-sizing: content-box; + } + + *, *::before, *::after { + boxSizing: inherit; + /* Disable transitions to avoid flaky screenshots */ + transition: none !important; + animation: none !important; + } + + body { + margin: 0; + overflow-x: hidden; + } + `; + return ( <React.Fragment> - <GlobalStyles - styles={{ - html: { - WebkitFontSmoothing: 'antialiased', // Antialiasing. - MozOsxFontSmoothing: 'grayscale', // Antialiasing. - // Do the opposite of the docs in order to help catching issues. - boxSizing: 'content-box', - }, - '*, *::before, *::after': { - boxSizing: 'inherit', - // Disable transitions to avoid flaky screenshots - transition: 'none !important', - animation: 'none !important', - }, - body: { - margin: 0, - overflowX: 'hidden', - }, - }} - /> + {/* eslint-disable-next-line react/no-danger */} + <style dangerouslySetInnerHTML={{ __html: globalStyles }} /> <React.Suspense fallback={<div aria-busy />}> - {window.location.pathname.startsWith('/docs-joy') ? ( - <CssVarsProvider> - <JoyBox - aria-busy={!ready} - data-testid="testcase" - sx={{ bgcolor: 'background.body', display: 'inline-block', p: 1 }} - > - {children} - </JoyBox> - </CssVarsProvider> - ) : ( - <Box - aria-busy={!ready} - data-testid="testcase" - sx={{ bgcolor: 'background.default', display: 'inline-block', p: 1 }} - > - {children} - </Box> - )} + <div + aria-busy={!ready} + data-testid="testcase" + style={{ backgroundColor: '#fff', display: 'inline-block', padding: '8px' }} + > + {children} + </div> </React.Suspense> </React.Fragment> ); diff --git a/test/regressions/webpack.config.js b/test/regressions/webpack.config.js index 5be826e340..6f13887685 100644 --- a/test/regressions/webpack.config.js +++ b/test/regressions/webpack.config.js @@ -22,8 +22,6 @@ module.exports = { new HtmlWebpackPlugin({ template: path.resolve(__dirname, './template.html'), }), - // Avoid bundling the whole @mui/icons-material package. x2 the bundling speed. - new webpack.IgnorePlugin({ resourceRegExp: /material-icons\/SearchIcons\.js/ }), new webpack.ProvidePlugin({ // required by code accessing `process.env` in the browser process: 'process/browser.js',