[docs] Cleanup @mui/base

docs/data/material/components/autocomplete/autocomplete.md

@@ -179,12 +179,6 @@ It accepts almost the same options as the Autocomplete component minus all the p
 related to the rendering of JSX.
 The Autocomplete component is built on this hook.
 
-```tsx
-import { useAutocomplete } from '@mui/base/useAutocomplete';
-```
-
-The `useAutocomplete` hook is also reexported from @mui/material for convenience and backward compatibility.
-
 ```tsx
 import useAutocomplete from '@mui/material/useAutocomplete';
 ```

docs/package.json

@@ -19,7 +19,7 @@
   "dependencies": {
     "@babel/core": "^7.29.0",
     "@babel/runtime": "^7.29.2",
-    "@base-ui/react": "^1.3.0",
+    "@base-ui/react": "catalog:docs",
     "@docsearch/react": "^3.9.0",
     "@emotion/cache": "catalog:docs",
     "@emotion/react": "catalog:docs",
@@ -28,7 +28,6 @@
     "@fortawesome/fontawesome-svg-core": "^6.7.2",
     "@fortawesome/free-solid-svg-icons": "^6.7.2",
     "@fortawesome/react-fontawesome": "^0.2.6",
-    "@mui/base": "5.0.0-beta.70",
     "@mui/internal-core-docs": "workspace:^",
     "@mui/icons-material": "workspace:^",
     "@mui/internal-markdown": "workspace:^",

docs/pages/performance/slider-emotion.js

@@ -1,4 +1,4 @@
-import { NoSsr } from '@mui/base/NoSsr';
+import NoSsr from '@mui/material/NoSsr';
 import Slider from '@mui/material/Slider';
 
 const data = {

docs/pages/performance/slider-jss.js

@@ -1,4 +1,4 @@
-import { NoSsr } from '@mui/base/NoSsr';
+import NoSsr from '@mui/material/NoSsr';
 import Slider from '@mui/material/Slider';
 
 const data = {

docs/pages/performance/system.js

@@ -1,4 +1,4 @@
-import { NoSsr } from '@mui/base/NoSsr';
+import NoSsr from '@mui/material/NoSsr';
 import Box from '@mui/material/Box';
 
 export default function SxPropBoxMaterialUI() {

docs/pages/performance/table-component.js

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { NoSsr } from '@mui/base/NoSsr';
+import NoSsr from '@mui/material/NoSsr';
 
 const createComponent = (defaultComponent) => {
   const MyComponent = React.forwardRef(function MyComponent(props, ref) {

docs/pages/performance/table-emotion.js

@@ -2,7 +2,7 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import styled from '@emotion/styled';
 // import { styled } from '@mui/material/styles';
-import { NoSsr } from '@mui/base/NoSsr';
+import NoSsr from '@mui/material/NoSsr';
 
 const createComponent = (defaultComponent) => {
   const Root = styled('div')`

docs/pages/performance/table-mui.js

@@ -1,4 +1,4 @@
-import { NoSsr } from '@mui/base/NoSsr';
+import NoSsr from '@mui/material/NoSsr';
 import Table from '@mui/material/Table';
 import TableBody from '@mui/material/TableBody';
 import TableCell from '@mui/material/TableCell';

docs/pages/performance/table-raw.js

@@ -1,4 +1,4 @@
-import { NoSsr } from '@mui/base/NoSsr';
+import NoSsr from '@mui/material/NoSsr';
 
 const data = { name: 'Frozen yoghurt', calories: 159, fat: 6.0, carbs: 24, protein: 4.0 };
 const rows = Array.from(new Array(100)).map(() => data);

docs/pages/performance/table-styled-components.js

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
-import { NoSsr } from '@mui/base/NoSsr';
+import NoSsr from '@mui/material/NoSsr';
 
 const createComponent = (defaultComponent) => {
   const MyComponent = React.forwardRef(function MyComponent(props, ref) {

docs/src/components/header/HeaderNavDropdown.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { styled } from '@mui/material/styles';
 import Box from '@mui/material/Box';
 import Collapse from '@mui/material/Collapse';
-import { ClickAwayListener } from '@mui/base/ClickAwayListener';
+import ClickAwayListener from '@mui/material/ClickAwayListener';
 import IconButton from '@mui/material/IconButton';
 import Typography from '@mui/material/Typography';
 import KeyboardArrowDownRounded from '@mui/icons-material/KeyboardArrowDownRounded';

packages-internal/core-docs/package.json

@@ -57,7 +57,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": "catalog:docs",
     "@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",

packages-internal/core-docs/src/AppLayout/components/LogoWithCopyMenu.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import copy from 'clipboard-copy';
-import { Portal } from '@mui/base/Portal';
+import Portal from '@mui/material/Portal';
 import Box from '@mui/material/Box';
 import Snackbar from '@mui/material/Snackbar';
 import Menu from '@mui/material/Menu';

packages-internal/core-docs/src/AppLayout/layout/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';

packages-internal/core-docs/src/ComponentLinkHeader/ComponentLinkHeader.tsx

@@ -38,7 +38,6 @@ const Root = styled('ul')(({ theme }) => ({
 const defaultPackageNames: Record<string, string | undefined> = {
   'material-ui': '@mui/material',
   'joy-ui': '@mui/joy',
-  'base-ui': '@mui/base',
   system: '@mui/system',
 };
 

packages-internal/core-docs/src/Demo/Demo.tsx

@@ -2,8 +2,7 @@ import * as React from 'react';
 import copy from 'clipboard-copy';
 import { debounce } from '@mui/material/utils';
 import { alpha, styled } from '@mui/material/styles';
-import { Tabs } from '@mui/base/Tabs';
-import { TabPanel } from '@mui/base/TabPanel';
+import { Tabs } from '@base-ui/react/tabs';
 import { unstable_useId as useId } from '@mui/utils';
 import IconButton from '@mui/material/IconButton';
 import type { ButtonBaseActions } from '@mui/material/ButtonBase';
@@ -327,7 +326,7 @@ const InitialFocus = styled(IconButton)(({ theme }) => ({
 
 const selectionOverride = (theme: any) => ({
   cursor: 'pointer',
-  '&.base--selected': {
+  '&[data-active]': {
     color: (theme.vars || theme).palette.primary[700],
     backgroundColor: (theme.vars || theme).palette.primary[50],
     borderColor: (theme.vars || theme).palette.primary[200],
@@ -558,11 +557,8 @@ export function Demo(props: DemoProps) {
   });
 
   const [activeTab, setActiveTab] = React.useState(0);
-  const handleTabChange = (
-    _event: React.SyntheticEvent | null,
-    newValue: string | number | null,
-  ) => {
-    setActiveTab(newValue as number);
+  const handleTabChange: NonNullable<Tabs.Root.Props['onValueChange']> = (value) => {
+    setActiveTab(value as number);
   };
   const ownerState = { mounted: true, contained: true };
 
@@ -670,7 +666,7 @@ export function Demo(props: DemoProps) {
               <DemoToolbarFallback />
             )}
           </DemoToolbarRoot>
-          <Tabs value={activeTab} onChange={handleTabChange}>
+          <Tabs.Root value={activeTab} onValueChange={handleTabChange}>
             {demoData.relativeModules && openDemoSource && !editorCode.isPreview ? (
               <CodeTabList ownerState={ownerState}>
                 {tabs.map((tab, index) => (
@@ -689,7 +685,7 @@ export function Demo(props: DemoProps) {
               {/* A limitation from https://github.com/nihgwu/react-runner,
                 we can't inject the `window` of the iframe so we need a disableLiveEdit option. */}
               {tabs.map((tab, index) => (
-                <TabPanel value={index} key={index}>
+                <Tabs.Panel value={index} key={index}>
                   {demoOptions.disableLiveEdit || index > 0 ? (
                     <DemoCodeViewer
                       key={index}
@@ -749,10 +745,10 @@ export function Demo(props: DemoProps) {
                       <DemoEditorError>{debouncedError}</DemoEditorError>
                     </DemoEditor>
                   )}
-                </TabPanel>
+                </Tabs.Panel>
               ))}
             </Collapse>
-          </Tabs>
+          </Tabs.Root>
           {/* AI Suggestion Hero UI */}
           {demoOptions.aiSuggestion ? (
             <DemoAiSuggestionHero

packages-internal/core-docs/src/Demo/DemoEditor.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import SimpleCodeEditor from 'react-simple-code-editor';
 import Box from '@mui/material/Box';
-import { NoSsr } from '@mui/base/NoSsr';
+import NoSsr from '@mui/material/NoSsr';
 import { styled, alpha, useTheme } from '@mui/material/styles';
 import { visuallyHidden } from '@mui/utils';
 import prism from '@mui/internal-markdown/prism';

packages-internal/core-docs/src/Demo/sandbox/Dependencies.test.js

@@ -19,7 +19,6 @@ 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 FooBar, { Qux } from '@foo-bar/bip';
 const styles = theme => ({
   container: {
@@ -42,7 +41,6 @@ const styles = theme => ({
       '@foo-bar/bip': 'latest',
       // #npm-tag-reference
       '@mui/material': 'latest',
-      '@mui/base': 'latest',
       'prop-types': 'latest',
     });
   });
@@ -152,7 +150,6 @@ import 'exceljs';
       '@foo-bar/bip': 'latest',
       // #npm-tag-reference
       '@mui/material': 'latest',
-      '@mui/base': 'latest',
       typescript: 'latest',
     });
 
@@ -235,7 +232,6 @@ 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 IconsMaterial from '@mui/icons-material';
 import * as Lab from '@mui/lab';
 import * as System from '@mui/system';
@@ -265,8 +261,6 @@ 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',
     });
   });
 

packages-internal/core-docs/src/Demo/sandbox/Dependencies.ts

@@ -55,7 +55,7 @@ export function SandboxDependencies(
       commitRef === undefined ||
       process.env.SOURCE_CODE_REPO !== 'https://github.com/mui/material-ui'
     ) {
-      if (['joy', 'base'].includes(packageName)) {
+      if (packageName === 'joy') {
         return 'latest';
       }
       // #npm-tag-reference
@@ -107,7 +107,6 @@ export function SandboxDependencies(
       '@mui/system': getMuiPackageVersion('system'),
       '@mui/private-theming': getMuiPackageVersion('theming'),
       '@mui/private-classnames': getMuiPackageVersion('classnames'),
-      '@mui/base': getMuiPackageVersion('base'),
       '@mui/utils': getMuiPackageVersion('utils'),
       '@mui/material-nextjs': getMuiPackageVersion('material-nextjs'),
     };

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';