[docs] Fix incorrect Tabs import instructions (#401)

Author: michaldudak

Diff for: docs/pages/base-ui/api/tab-indicator.json

@@ -5,7 +5,7 @@
     "renderBeforeHydration": { "type": { "name": "bool" }, "default": "false" }
   },
   "name": "TabIndicator",
-  "imports": ["import { TabIndicator } from '@base_ui/react/Tabs';"],
+  "imports": ["import * as Tabs from '@base_ui/react/Tabs';\nconst TabIndicator = Tabs.Indicator;"],
   "classes": [],
   "spread": true,
   "themeDefaultProps": true,

Diff for: docs/pages/base-ui/api/tab-panel.json

@@ -6,7 +6,7 @@
     "value": { "type": { "name": "any" } }
   },
   "name": "TabPanel",
-  "imports": ["import { TabPanel } from '@base_ui/react/Tabs';"],
+  "imports": ["import * as Tabs from '@base_ui/react/Tabs';\nconst TabPanel = Tabs.Panel;"],
   "classes": [],
   "spread": true,
   "themeDefaultProps": true,

Diff for: docs/pages/base-ui/api/tab.json

@@ -5,7 +5,7 @@
     "value": { "type": { "name": "any" } }
   },
   "name": "Tab",
-  "imports": ["import { Tab } from '@base_ui/react/Tabs';"],
+  "imports": ["import * as Tabs from '@base_ui/react/Tabs';\nconst Tab = Tabs.Tab;"],
   "classes": [],
   "spread": true,
   "themeDefaultProps": true,

Diff for: packages/mui-base/src/Tabs/Root/TabsRoot.tsx

@@ -106,4 +106,4 @@ TabsRoot.propTypes /* remove-proptypes */ = {
   value: PropTypes.any,
 } as any;
 
-export { TabsRoot as Tabs };
+export { TabsRoot };

Diff for: packages/mui-base/src/Tabs/index.barrel.ts

@@ -1,4 +1,4 @@
-export { Tabs } from './Root/TabsRoot';
+export { TabsRoot } from './Root/TabsRoot';
 export type {
   TabsRootOwnerState,
   TabsRootProps,

Diff for: packages/mui-base/src/Tabs/index.ts

@@ -1,4 +1,4 @@
-export { Tabs as Root } from './Root/TabsRoot';
+export { TabsRoot as Root } from './Root/TabsRoot';
 export type {
   TabsRootOwnerState as RootOwnerState,
   TabsRootProps as RootProps,

Diff for: scripts/buildApiDocs/config/getComponentImports.ts

@@ -2,6 +2,13 @@ import path from 'path';
 
 const repositoryRoot = path.resolve(__dirname, '../../..');
 
+// components which names do not start with directory name
+const componentExportExceptions: Record<string, string> = {
+  Tab: 'Tab',
+  TabIndicator: 'Indicator',
+  TabPanel: 'Panel',
+};
+
 export function getComponentImports(name: string, filename: string) {
   const relativePath = path.relative(repositoryRoot, filename);
   const directories = path.dirname(relativePath).split(path.sep);
@@ -18,6 +25,12 @@ export function getComponentImports(name: string, filename: string) {
     return [`import { ${name} } from '@base_ui/react/${name}';`];
   }
 
+  if (Object.keys(componentExportExceptions).includes(name)) {
+    return [
+      `import * as ${componentDirectory} from '@base_ui/react/${componentDirectory}';\nconst ${name} = ${componentDirectory}.${componentExportExceptions[name]};`,
+    ];
+  }
+
   if (name.startsWith(componentDirectory) && !name.startsWith('use')) {
     // cases like Switch/SwitchTrack.tsx
     const childName = name.slice(componentDirectory.length);