-
-
-
+
diff --git a/docs/src/modules/components/Notifications.tsx b/docs/src/modules/components/Notifications.tsx
index 1745991834c372..48c665a14e1309 100644
--- a/docs/src/modules/components/Notifications.tsx
+++ b/docs/src/modules/components/Notifications.tsx
@@ -9,7 +9,7 @@ import Typography from '@mui/material/Typography';
import Popper from '@mui/material/Popper';
import Grow from '@mui/material/Grow';
import MuiPaper from '@mui/material/Paper';
-import { ClickAwayListener } from '@mui/base/ClickAwayListener';
+import ClickAwayListener from '@mui/material/ClickAwayListener';
import MuiList from '@mui/material/List';
import MuiListItem from '@mui/material/ListItem';
import MuiDivider from '@mui/material/Divider';
diff --git a/docs/src/modules/sandbox/Dependencies.test.js b/docs/src/modules/sandbox/Dependencies.test.js
index d1a794f3185311..362f8c63199b76 100644
--- a/docs/src/modules/sandbox/Dependencies.test.js
+++ b/docs/src/modules/sandbox/Dependencies.test.js
@@ -19,7 +19,7 @@ import InputLabel from '@mui/material/InputLabel';
import FormControl from '@mui/material/FormControl';
import FormHelperText from '@mui/material/FormHelperText';
import Select from '@mui/material/Select';
-import { SliderUnstyled } from '@mui/base/SliderUnstyled';
+import { Slider } from '@base-ui/react/slider';
import FooBar, { Qux } from '@foo-bar/bip';
const styles = theme => ({
container: {
@@ -42,7 +42,7 @@ const styles = theme => ({
'@foo-bar/bip': 'latest',
// #npm-tag-reference
'@mui/material': 'next',
- '@mui/base': 'latest',
+ '@base-ui/react': 'latest',
'prop-types': 'latest',
});
});
@@ -152,7 +152,7 @@ import 'exceljs';
'@foo-bar/bip': 'latest',
// #npm-tag-reference
'@mui/material': 'next',
- '@mui/base': 'latest',
+ '@base-ui/react': 'latest',
typescript: 'latest',
});
@@ -235,7 +235,7 @@ import lab from '@mui/lab';
it('can use codesandbox deploys if a commit is given', () => {
const source = `
import * as Material from '@mui/material';
-import * as Base from '@mui/base';
+import * as Base from '@base-ui/react';
import * as IconsMaterial from '@mui/icons-material';
import * as Lab from '@mui/lab';
import * as System from '@mui/system';
@@ -265,8 +265,7 @@ import * as Utils from '@mui/utils';
'https://pkg.pr.new/mui/material-ui/@mui/system@2d0e8b4daf20b7494c818b6f8c4cc8423bc99d6f',
'@mui/utils':
'https://pkg.pr.new/mui/material-ui/@mui/utils@2d0e8b4daf20b7494c818b6f8c4cc8423bc99d6f',
- '@mui/base':
- 'https://pkg.pr.new/mui/material-ui/@mui/base@2d0e8b4daf20b7494c818b6f8c4cc8423bc99d6f',
+ '@base-ui/react': 'latest',
});
});
diff --git a/packages-internal/core-docs/package.json b/packages-internal/core-docs/package.json
index 8523bcc9345e09..831849005f3de2 100644
--- a/packages-internal/core-docs/package.json
+++ b/packages-internal/core-docs/package.json
@@ -56,7 +56,7 @@
"@emotion/cache": "catalog:docs",
"@emotion/react": "catalog:docs",
"@emotion/styled": "catalog:docs",
- "@mui/base": "^5.0.0 || ^5.0.0-beta || ^7.0.0 || ^7.0.0-beta",
+ "@base-ui/react": "^1.3.0",
"@mui/icons-material": "^5.0.0 || ^6.0.0 || ^7.0.0 || ^9.0.0 || ^9.0.0-alpha || ^9.0.0-beta",
"@mui/material": "^5.0.0 || ^6.0.0 || ^7.0.0 || ^9.0.0 || ^9.0.0-alpha || ^9.0.0-beta",
"@mui/material-nextjs": "^5.0.0 || ^6.0.0 || ^7.0.0 || ^9.0.0 || ^9.0.0-alpha || ^9.0.0-beta",
diff --git a/packages-internal/core-docs/src/CodeCopy/CodeCopyButton.tsx b/packages-internal/core-docs/src/CodeCopy/CodeCopyButton.tsx
index 611dd6f77ed258..a077130fa95e4c 100644
--- a/packages-internal/core-docs/src/CodeCopy/CodeCopyButton.tsx
+++ b/packages-internal/core-docs/src/CodeCopy/CodeCopyButton.tsx
@@ -8,7 +8,8 @@ export function CodeCopyButton(props: CodeCopyButtonProps) {
const { code, ...other } = props;
const { copy, isCopied } = useClipboardCopy();
// This component is designed to be wrapped in NoSsr
- const macOS = window.navigator.platform.toUpperCase().includes('MAC');
+ const macOS =
+ typeof window !== 'undefined' && window.navigator.platform.toUpperCase().includes('MAC');
const key = macOS ? '⌘' : 'Ctrl + ';
return (
diff --git a/packages-internal/core-docs/src/HighlightedCode/HighlightedCode.tsx b/packages-internal/core-docs/src/HighlightedCode/HighlightedCode.tsx
index 5f1496e45e4877..92adb0c2fb441f 100644
--- a/packages-internal/core-docs/src/HighlightedCode/HighlightedCode.tsx
+++ b/packages-internal/core-docs/src/HighlightedCode/HighlightedCode.tsx
@@ -1,6 +1,6 @@
import * as React from 'react';
import prism from '@mui/internal-markdown/prism';
-import { NoSsr } from '@mui/base/NoSsr';
+import NoSsr from '@mui/material/NoSsr';
import { ButtonProps } from '@mui/material/Button';
import { SxProps, styled } from '@mui/material/styles';
import { useCodeCopy, CodeCopyButton } from '../CodeCopy';
diff --git a/packages-internal/core-docs/src/HighlightedCodeWithTabs/HighlightedCodeWithTabs.tsx b/packages-internal/core-docs/src/HighlightedCodeWithTabs/HighlightedCodeWithTabs.tsx
index cfa181cdd49efd..cb64a96a585f06 100644
--- a/packages-internal/core-docs/src/HighlightedCodeWithTabs/HighlightedCodeWithTabs.tsx
+++ b/packages-internal/core-docs/src/HighlightedCodeWithTabs/HighlightedCodeWithTabs.tsx
@@ -1,19 +1,18 @@
import * as React from 'react';
import { styled, alpha } from '@mui/material/styles';
-import { Tabs, TabsOwnProps } from '@mui/base/Tabs';
-import { TabsList as TabsListBase } from '@mui/base/TabsList';
-import { TabPanel as TabPanelBase } from '@mui/base/TabPanel';
-import { Tab as TabBase } from '@mui/base/Tab';
+import { Tabs } from '@base-ui/react/tabs';
import useLocalStorageState from '@mui/utils/useLocalStorageState';
import { HighlightedCode } from '../HighlightedCode';
+interface TabOwnerState {
+ ownerState: { mounted: boolean; contained?: boolean };
+}
+
const PACKAGE_MANAGER_ORDER = new Map(
['npm', 'pnpm', 'yarn'].map((manager, index) => [manager, index]),
);
-export const CodeTabList = styled(TabsListBase)<{
- ownerState: { mounted: boolean; contained?: boolean };
-}>(({ theme }) => ({
+export const CodeTabList = styled(Tabs.List)(({ theme }) => ({
display: 'flex',
gap: theme.spacing(0.5),
borderLeft: '1px solid',
@@ -24,85 +23,85 @@ export const CodeTabList = styled(TabsListBase)<{
}),
variants: [
{
- props: ({ ownerState }) => ownerState?.contained,
+ props: ({ ownerState }: TabOwnerState) => ownerState?.contained,
style: {
padding: theme.spacing(1.5, 1),
},
},
{
- props: ({ ownerState }) => !ownerState?.contained,
+ props: ({ ownerState }: TabOwnerState) => !ownerState?.contained,
style: {
padding: theme.spacing(1),
},
},
{
- props: ({ ownerState }) => ownerState?.contained,
+ props: ({ ownerState }: TabOwnerState) => ownerState?.contained,
style: {
borderTop: 'none',
},
},
{
- props: ({ ownerState }) => !ownerState?.contained,
+ props: ({ ownerState }: TabOwnerState) => !ownerState?.contained,
style: {
borderTop: '1px solid',
},
},
{
- props: ({ ownerState }) => ownerState?.contained,
+ props: ({ ownerState }: TabOwnerState) => ownerState?.contained,
style: {
borderBottom: 'none',
},
},
{
- props: ({ ownerState }) => !ownerState?.contained,
+ props: ({ ownerState }: TabOwnerState) => !ownerState?.contained,
style: {
borderBottom: '1px solid',
},
},
{
- props: ({ ownerState }) => ownerState?.contained,
+ props: ({ ownerState }: TabOwnerState) => ownerState?.contained,
style: {
borderTopLeftRadius: 0,
},
},
{
- props: ({ ownerState }) => !ownerState?.contained,
+ props: ({ ownerState }: TabOwnerState) => !ownerState?.contained,
style: {
borderTopLeftRadius: (theme.vars || theme).shape.borderRadius,
},
},
{
- props: ({ ownerState }) => ownerState?.contained,
+ props: ({ ownerState }: TabOwnerState) => ownerState?.contained,
style: {
borderTopRightRadius: 0,
},
},
{
- props: ({ ownerState }) => !ownerState?.contained,
+ props: ({ ownerState }: TabOwnerState) => !ownerState?.contained,
style: {
borderTopRightRadius: (theme.vars || theme).shape.borderRadius,
},
},
{
- props: ({ ownerState }) => ownerState?.contained,
+ props: ({ ownerState }: TabOwnerState) => ownerState?.contained,
style: {
borderColor: (theme.vars || theme).palette.divider,
},
},
{
- props: ({ ownerState }) => !ownerState?.contained,
+ props: ({ ownerState }: TabOwnerState) => !ownerState?.contained,
style: {
borderColor: (theme.vars || theme).palette.primaryDark[700],
},
},
{
- props: ({ ownerState }) => ownerState?.contained,
+ props: ({ ownerState }: TabOwnerState) => ownerState?.contained,
style: {
backgroundColor: alpha(theme.palette.grey[50], 0.2),
},
},
{
- props: ({ ownerState }) => !ownerState?.contained,
+ props: ({ ownerState }: TabOwnerState) => !ownerState?.contained,
style: {
backgroundColor: (theme.vars || theme).palette.primaryDark[900],
},
@@ -110,9 +109,7 @@ export const CodeTabList = styled(TabsListBase)<{
],
}));
-export const CodeTabPanel = styled(TabPanelBase)<{
- ownerState: { mounted: boolean; contained?: boolean };
-}>({
+export const CodeTabPanel = styled(Tabs.Panel)(() => ({
'& pre': {
borderTopLeftRadius: 0,
borderTopRightRadius: 0,
@@ -120,19 +117,19 @@ export const CodeTabPanel = styled(TabPanelBase)<{
},
variants: [
{
- props: ({ ownerState }) => ownerState?.contained,
+ props: ({ ownerState }: TabOwnerState) => !!ownerState?.contained,
style: {
marginTop: -1,
},
},
{
- props: ({ ownerState }) => !ownerState?.contained,
+ props: ({ ownerState }: TabOwnerState) => !ownerState?.contained,
style: {
marginTop: 0,
},
},
{
- props: ({ ownerState }) => ownerState?.contained,
+ props: ({ ownerState }: TabOwnerState) => !!ownerState?.contained,
style: {
'& pre': {
marginTop: 0,
@@ -140,7 +137,7 @@ export const CodeTabPanel = styled(TabPanelBase)<{
},
},
{
- props: ({ ownerState }) => !ownerState?.contained,
+ props: ({ ownerState }: TabOwnerState) => !ownerState?.contained,
style: {
'& pre': {
marginTop: -1,
@@ -148,7 +145,7 @@ export const CodeTabPanel = styled(TabPanelBase)<{
},
},
{
- props: ({ ownerState }) => ownerState.mounted,
+ props: ({ ownerState }: TabOwnerState) => ownerState.mounted,
style: {
'& pre': {
'& code': {
@@ -158,7 +155,7 @@ export const CodeTabPanel = styled(TabPanelBase)<{
},
},
{
- props: ({ ownerState }) => !ownerState.mounted,
+ props: ({ ownerState }: TabOwnerState) => !ownerState.mounted,
style: {
'& pre': {
'& code': {
@@ -168,75 +165,75 @@ export const CodeTabPanel = styled(TabPanelBase)<{
},
},
],
-});
+}));
-export const CodeTab = styled(TabBase)<{ ownerState: { mounted: boolean; contained?: boolean } }>(
+export const CodeTab = styled(Tabs.Tab)<{ ownerState: { mounted: boolean; contained?: boolean } }>(
({ theme }) => ({
variants: [
{
- props: ({ ownerState }) => ownerState?.contained,
+ props: ({ ownerState }: TabOwnerState) => ownerState?.contained,
style: {
border: '1px solid transparent',
fontSize: theme.typography.pxToRem(13),
},
},
{
- props: ({ ownerState }) => !ownerState?.contained,
+ props: ({ ownerState }: TabOwnerState) => !ownerState?.contained,
style: {
border: 'none',
fontSize: theme.typography.pxToRem(12),
},
},
{
- props: ({ ownerState }) => ownerState?.contained,
+ props: ({ ownerState }: TabOwnerState) => ownerState?.contained,
style: {
color: (theme.vars || theme).palette.text.tertiary,
},
},
{
- props: ({ ownerState }) => !ownerState?.contained,
+ props: ({ ownerState }: TabOwnerState) => !ownerState?.contained,
style: {
color: (theme.vars || theme).palette.grey[500],
},
},
{
- props: ({ ownerState }) => ownerState?.contained,
+ props: ({ ownerState }: TabOwnerState) => ownerState?.contained,
style: {
fontFamily: theme.typography.fontFamily,
},
},
{
- props: ({ ownerState }) => !ownerState?.contained,
+ props: ({ ownerState }: TabOwnerState) => !ownerState?.contained,
style: {
fontFamily: theme.typography.fontFamilyCode,
},
},
{
- props: ({ ownerState }) => ownerState?.contained,
+ props: ({ ownerState }: TabOwnerState) => ownerState?.contained,
style: {
fontWeight: theme.typography.fontWeightMedium,
},
},
{
- props: ({ ownerState }) => !ownerState?.contained,
+ props: ({ ownerState }: TabOwnerState) => !ownerState?.contained,
style: {
fontWeight: theme.typography.fontWeightBold,
},
},
{
- props: ({ ownerState }) => ownerState?.contained,
+ props: ({ ownerState }: TabOwnerState) => ownerState?.contained,
style: {
transition: 'background, color, 100ms ease',
},
},
{
- props: ({ ownerState }) => !ownerState?.contained,
+ props: ({ ownerState }: TabOwnerState) => !ownerState?.contained,
style: {
transition: 'unset',
},
},
{
- props: ({ ownerState }) => !ownerState?.contained,
+ props: ({ ownerState }: TabOwnerState) => !ownerState?.contained,
style: {
'&:hover': {
backgroundColor: alpha(theme.palette.primaryDark[500], 0.5),
@@ -245,7 +242,7 @@ export const CodeTab = styled(TabBase)<{ ownerState: { mounted: boolean; contain
},
},
{
- props: ({ ownerState }) => !ownerState?.contained && ownerState.mounted,
+ props: ({ ownerState }: TabOwnerState) => !ownerState?.contained && ownerState.mounted,
style: {
'&.base--selected': {
color: '#FFF',
@@ -318,14 +315,15 @@ export function HighlightedCodeWithTabs(
setMounted(true);
}, []);
- const handleChange: TabsOwnProps['onChange'] = (event, newValue) => {
+ const handleChange = (newValue: any) => {
setActiveTab(newValue as string);
};
const ownerState = { mounted };
return (
-
-
+
+ {/* selectionFollowsFocus was moved to the List and renamed to activateOnFocus */}
+
{tabs.map(({ tab }) => (
{tab}
@@ -340,6 +338,6 @@ export function HighlightedCodeWithTabs(
/>
))}
-
+
);
}
diff --git a/packages-internal/core-docs/src/NextNProgressBar/NProgressBar.js b/packages-internal/core-docs/src/NextNProgressBar/NProgressBar.js
index fca15b8707d76b..30e297dedc4410 100644
--- a/packages-internal/core-docs/src/NextNProgressBar/NProgressBar.js
+++ b/packages-internal/core-docs/src/NextNProgressBar/NProgressBar.js
@@ -1,6 +1,6 @@
import PropTypes from 'prop-types';
import NProgress from 'nprogress';
-import { NoSsr } from '@mui/base/NoSsr';
+import NoSsr from '@mui/material/NoSsr';
import exactProp from '@mui/utils/exactProp';
import GlobalStyles from '@mui/material/GlobalStyles';
import { keyframes } from '@mui/material/styles';
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 00d82ace7bb0c8..f9ff7ee92cd257 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -278,6 +278,9 @@ importers:
'@babel/runtime':
specifier: ^7.29.2
version: 7.29.2
+ '@base-ui-components/react':
+ specifier: 1.0.0-rc.0
+ version: 1.0.0-rc.0(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
'@base-ui/react':
specifier: ^1.3.0
version: 1.3.0(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
@@ -305,9 +308,6 @@ importers:
'@fortawesome/react-fontawesome':
specifier: ^0.2.6
version: 0.2.6(@fortawesome/fontawesome-svg-core@6.7.2)(react@19.2.4)
- '@mui/base':
- specifier: 5.0.0-beta.70
- version: 5.0.0-beta.70(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
'@mui/icons-material':
specifier: workspace:*
version: link:../packages/mui-icons-material/build
@@ -728,6 +728,9 @@ importers:
'@babel/runtime':
specifier: ^7.29.2
version: 7.29.2
+ '@base-ui/react':
+ specifier: ^1.3.0
+ version: 1.3.0(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
'@emotion/cache':
specifier: catalog:docs
version: 11.14.0
@@ -737,9 +740,6 @@ importers:
'@emotion/styled':
specifier: catalog:docs
version: 11.14.1(@emotion/react@11.14.0(@types/react@19.2.14)(react@19.2.4))(@types/react@19.2.14)(react@19.2.4)
- '@mui/base':
- specifier: ^5.0.0 || ^5.0.0-beta || ^7.0.0 || ^7.0.0-beta
- version: 5.0.0-beta.70(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
'@mui/internal-markdown':
specifier: workspace:^
version: link:../markdown
@@ -2587,6 +2587,29 @@ packages:
resolution: {integrity: sha512-LwdZHpScM4Qz8Xw2iKSzS+cfglZzJGvofQICy7W7v4caru4EaAmyUuO6BGrbyQ2mYV11W0U8j5mBhd14dd3B0A==}
engines: {node: '>=6.9.0'}
+ '@base-ui-components/react@1.0.0-rc.0':
+ resolution: {integrity: sha512-9lhUFbJcbXvc9KulLev1WTFxS/alJRBWDH/ibKSQaNvmDwMFS2gKp1sTeeldYSfKuS/KC1w2MZutc0wHu2hRHQ==}
+ engines: {node: '>=14.0.0'}
+ deprecated: Package was renamed to @base-ui/react
+ peerDependencies:
+ '@types/react': ^17 || ^18 || ^19
+ react: ^17 || ^18 || ^19
+ react-dom: ^17 || ^18 || ^19
+ peerDependenciesMeta:
+ '@types/react':
+ optional: true
+
+ '@base-ui-components/utils@0.2.2':
+ resolution: {integrity: sha512-rNJCD6TFy3OSRDKVHJDzLpxO3esTV1/drRtWNUpe7rCpPN9HZVHUCuP+6rdDYDGWfXnQHbqi05xOyRP2iZAlkw==}
+ deprecated: Package was renamed to @base-ui/utils
+ peerDependencies:
+ '@types/react': ^17 || ^18 || ^19
+ react: ^17 || ^18 || ^19
+ react-dom: ^17 || ^18 || ^19
+ peerDependenciesMeta:
+ '@types/react':
+ optional: true
+
'@base-ui/react@1.3.0':
resolution: {integrity: sha512-FwpKqZbPz14AITp1CVgf4AjhKPe1OeeVKSBMdgD10zbFlj3QSWelmtCMLi2+/PFZZcIm3l87G7rwtCZJwHyXWA==}
engines: {node: '>=14.0.0'}
@@ -13761,6 +13784,31 @@ snapshots:
'@babel/helper-string-parser': 7.27.1
'@babel/helper-validator-identifier': 7.28.5
+ '@base-ui-components/react@1.0.0-rc.0(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)':
+ dependencies:
+ '@babel/runtime': 7.29.2
+ '@base-ui-components/utils': 0.2.2(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+ '@floating-ui/react-dom': 2.1.8(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+ '@floating-ui/utils': 0.2.11
+ react: 19.2.4
+ react-dom: 19.2.4(react@19.2.4)
+ reselect: 5.1.1
+ tabbable: 6.4.0
+ use-sync-external-store: 1.6.0(react@19.2.4)
+ optionalDependencies:
+ '@types/react': 19.2.14
+
+ '@base-ui-components/utils@0.2.2(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)':
+ dependencies:
+ '@babel/runtime': 7.29.2
+ '@floating-ui/utils': 0.2.11
+ react: 19.2.4
+ react-dom: 19.2.4(react@19.2.4)
+ reselect: 5.1.1
+ use-sync-external-store: 1.6.0(react@19.2.4)
+ optionalDependencies:
+ '@types/react': 19.2.14
+
'@base-ui/react@1.3.0(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)':
dependencies:
'@babel/runtime': 7.29.2