[Tabs] Move types to namespaces (#642)

mui · Oct 7, 2024 · b968150 · b968150
1 parent 2d71257
commit b968150
Show file tree

Hide file tree

Showing 30 changed files with 430 additions and 525 deletions.
diff --git a/docs/data/components/tabs/UnstyledTabsIntroduction/tailwind/index.tsx b/docs/data/components/tabs/UnstyledTabsIntroduction/tailwind/index.tsx
@@ -29,7 +29,7 @@ export default function UnstyledTabsIntroduction() {
   );
 }
 
-const TabsList = React.forwardRef<HTMLDivElement, Tabs.ListProps>((props, ref) => {
+const TabsList = React.forwardRef<HTMLDivElement, Tabs.List.Props>((props, ref) => {
   const { className, ...other } = props;
   return (
     <Tabs.List
@@ -43,7 +43,7 @@ const TabsList = React.forwardRef<HTMLDivElement, Tabs.ListProps>((props, ref) =
   );
 });
 
-const Tab = React.forwardRef<HTMLButtonElement, Tabs.TabProps>((props, ref) => {
+const Tab = React.forwardRef<HTMLButtonElement, Tabs.Tab.Props>((props, ref) => {
   const { className, ...other } = props;
   return (
     <Tabs.Tab
@@ -65,7 +65,7 @@ const Tab = React.forwardRef<HTMLButtonElement, Tabs.TabProps>((props, ref) => {
   );
 });
 
-const TabPanel = React.forwardRef<HTMLDivElement, Tabs.PanelProps>((props, ref) => {
+const TabPanel = React.forwardRef<HTMLDivElement, Tabs.Panel.Props>((props, ref) => {
   const { className, ...other } = props;
   return (
     <Tabs.Panel

diff --git a/docs/src/blocks/PackageManagerSnippet/PackageManagerSnippetRoot.tsx b/docs/src/blocks/PackageManagerSnippet/PackageManagerSnippetRoot.tsx
@@ -44,7 +44,7 @@ export namespace PackageManagerSnippetRoot {
   export type Props = {
     children: React.ReactNode;
     options: Array<{ value: string; label: string }>;
-    renderTab?: Tabs.TabProps['render'];
-    renderTabsList?: Tabs.ListProps['render'];
+    renderTab?: Tabs.Tab.Props['render'];
+    renderTabsList?: Tabs.List.Props['render'];
   };
 }
diff --git a/packages/mui-base/src/Tabs/Root/TabsProvider.tsx b/packages/mui-base/src/Tabs/Root/TabsProvider.tsx
@@ -1,7 +1,7 @@
 'use client';
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { TabsContext, TabsContextValue } from './TabsContext';
+import { TabsRootContext } from './TabsRootContext';
 import { CompoundComponentContext, CompoundComponentContextValue } from '../../useCompound';
 
 export type TabPanelMetadata = {
@@ -10,7 +10,7 @@ export type TabPanelMetadata = {
 };
 
 export type TabsProviderValue = CompoundComponentContextValue<any, TabPanelMetadata> &
-  TabsContextValue;
+  TabsRootContext;
 
 export interface TabsProviderProps {
   value: TabsProviderValue;
@@ -48,7 +48,7 @@ function TabsProvider(props: TabsProviderProps) {
       [registerItem, getItemIndex, totalSubitemCount],
     );
 
-  const tabsContextValue: TabsContextValue = React.useMemo(
+  const tabsContextValue: TabsRootContext = React.useMemo(
     () => ({
       direction,
       getTabId,
@@ -73,7 +73,7 @@ function TabsProvider(props: TabsProviderProps) {
 
   return (
     <CompoundComponentContext.Provider value={compoundComponentContextValue}>
-      <TabsContext.Provider value={tabsContextValue}>{children}</TabsContext.Provider>
+      <TabsRootContext.Provider value={tabsContextValue}>{children}</TabsRootContext.Provider>
     </CompoundComponentContext.Provider>
   );
 }

diff --git a/packages/mui-base/src/Tabs/Root/TabsRoot.test.tsx b/packages/mui-base/src/Tabs/Root/TabsRoot.test.tsx
@@ -280,10 +280,10 @@ describe('<Tabs.Root />', () => {
               const handleKeyDown = spy();
               const { getAllByRole } = await render(
                 <Tabs.Root
-                  direction={direction as Tabs.RootProps['direction']}
+                  direction={direction as Tabs.Root.Props['direction']}
                   onValueChange={handleChange}
                   onKeyDown={handleKeyDown}
-                  orientation={orientation as Tabs.RootProps['orientation']}
+                  orientation={orientation as Tabs.Root.Props['orientation']}
                   value={0}
                 >
                   <Tabs.List activateOnFocus={false}>
@@ -311,10 +311,10 @@ describe('<Tabs.Root />', () => {
               const handleKeyDown = spy();
               const { getAllByRole } = await render(
                 <Tabs.Root
-                  direction={direction as Tabs.RootProps['direction']}
+                  direction={direction as Tabs.Root.Props['direction']}
                   onValueChange={handleChange}
                   onKeyDown={handleKeyDown}
-                  orientation={orientation as Tabs.RootProps['orientation']}
+                  orientation={orientation as Tabs.Root.Props['orientation']}
                   value={1}
                 >
                   <Tabs.List activateOnFocus={false}>
@@ -344,10 +344,10 @@ describe('<Tabs.Root />', () => {
               const handleKeyDown = spy();
               const { getAllByRole } = await render(
                 <Tabs.Root
-                  direction={direction as Tabs.RootProps['direction']}
+                  direction={direction as Tabs.Root.Props['direction']}
                   onValueChange={handleChange}
                   onKeyDown={handleKeyDown}
-                  orientation={orientation as Tabs.RootProps['orientation']}
+                  orientation={orientation as Tabs.Root.Props['orientation']}
                   value={0}
                 >
                   <Tabs.List>
@@ -376,10 +376,10 @@ describe('<Tabs.Root />', () => {
               const handleKeyDown = spy();
               const { getAllByRole } = await render(
                 <Tabs.Root
-                  direction={direction as Tabs.RootProps['direction']}
+                  direction={direction as Tabs.Root.Props['direction']}
                   onValueChange={handleChange}
                   onKeyDown={handleKeyDown}
-                  orientation={orientation as Tabs.RootProps['orientation']}
+                  orientation={orientation as Tabs.Root.Props['orientation']}
                   value={1}
                 >
                   <Tabs.List>
@@ -408,9 +408,9 @@ describe('<Tabs.Root />', () => {
             const handleKeyDown = spy();
             const { getAllByRole } = await render(
               <Tabs.Root
-                direction={direction as Tabs.RootProps['direction']}
+                direction={direction as Tabs.Root.Props['direction']}
                 onKeyDown={handleKeyDown}
-                orientation={orientation as Tabs.RootProps['orientation']}
+                orientation={orientation as Tabs.Root.Props['orientation']}
                 value={2}
               >
                 <Tabs.List>
@@ -440,10 +440,10 @@ describe('<Tabs.Root />', () => {
               const handleKeyDown = spy();
               const { getAllByRole } = await render(
                 <Tabs.Root
-                  direction={direction as Tabs.RootProps['direction']}
+                  direction={direction as Tabs.Root.Props['direction']}
                   onValueChange={handleChange}
                   onKeyDown={handleKeyDown}
-                  orientation={orientation as Tabs.RootProps['orientation']}
+                  orientation={orientation as Tabs.Root.Props['orientation']}
                   value={2}
                 >
                   <Tabs.List activateOnFocus={false}>
@@ -471,10 +471,10 @@ describe('<Tabs.Root />', () => {
               const handleKeyDown = spy();
               const { getAllByRole } = await render(
                 <Tabs.Root
-                  direction={direction as Tabs.RootProps['direction']}
+                  direction={direction as Tabs.Root.Props['direction']}
                   onValueChange={handleChange}
                   onKeyDown={handleKeyDown}
-                  orientation={orientation as Tabs.RootProps['orientation']}
+                  orientation={orientation as Tabs.Root.Props['orientation']}
                   value={1}
                 >
                   <Tabs.List activateOnFocus={false}>
@@ -504,10 +504,10 @@ describe('<Tabs.Root />', () => {
               const handleKeyDown = spy();
               const { getAllByRole } = await render(
                 <Tabs.Root
-                  direction={direction as Tabs.RootProps['direction']}
+                  direction={direction as Tabs.Root.Props['direction']}
                   onValueChange={handleChange}
                   onKeyDown={handleKeyDown}
-                  orientation={orientation as Tabs.RootProps['orientation']}
+                  orientation={orientation as Tabs.Root.Props['orientation']}
                   value={2}
                 >
                   <Tabs.List>
@@ -536,10 +536,10 @@ describe('<Tabs.Root />', () => {
               const handleKeyDown = spy();
               const { getAllByRole } = await render(
                 <Tabs.Root
-                  direction={direction as Tabs.RootProps['direction']}
+                  direction={direction as Tabs.Root.Props['direction']}
                   onValueChange={handleChange}
                   onKeyDown={handleKeyDown}
-                  orientation={orientation as Tabs.RootProps['orientation']}
+                  orientation={orientation as Tabs.Root.Props['orientation']}
                   value={1}
                 >
                   <Tabs.List>
@@ -568,9 +568,9 @@ describe('<Tabs.Root />', () => {
             const handleKeyDown = spy();
             const { getAllByRole } = await render(
               <Tabs.Root
-                direction={direction as Tabs.RootProps['direction']}
+                direction={direction as Tabs.Root.Props['direction']}
                 onKeyDown={handleKeyDown}
-                orientation={orientation as Tabs.RootProps['orientation']}
+                orientation={orientation as Tabs.Root.Props['orientation']}
                 value={0}
               >
                 <Tabs.List>

diff --git a/packages/mui-base/src/Tabs/Root/TabsRoot.tsx b/packages/mui-base/src/Tabs/Root/TabsRoot.tsx
@@ -1,11 +1,11 @@
 'use client';
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { TabsRootOwnerState, TabsRootProps } from './TabsRoot.types';
 import { useTabsRoot } from './useTabsRoot';
 import { tabsStyleHookMapping } from './styleHooks';
 import { TabsProvider } from './TabsProvider';
 import { useComponentRenderer } from '../../utils/useComponentRenderer';
+import type { BaseUIComponentProps } from '../../utils/types';
 
 /**
  *
@@ -18,7 +18,7 @@ import { useComponentRenderer } from '../../utils/useComponentRenderer';
  * - [TabsRoot API](https://base-ui.netlify.app/components/react-tabs/#api-reference-TabsRoot)
  */
 const TabsRoot = React.forwardRef(function TabsRoot(
-  props: TabsRootProps,
+  props: TabsRoot.Props,
   forwardedRef: React.ForwardedRef<HTMLDivElement>,
 ) {
   const {
@@ -40,7 +40,7 @@ const TabsRoot = React.forwardRef(function TabsRoot(
     direction,
   });
 
-  const ownerState: TabsRootOwnerState = {
+  const ownerState: TabsRoot.OwnerState = {
     orientation,
     direction,
     tabActivationDirection,
@@ -59,6 +59,44 @@ const TabsRoot = React.forwardRef(function TabsRoot(
   return <TabsProvider value={contextValue}>{renderElement()}</TabsProvider>;
 });
 
+export type TabsOrientation = 'horizontal' | 'vertical';
+export type TabsDirection = 'ltr' | 'rtl';
+export type TabActivationDirection = 'left' | 'right' | 'up' | 'down' | 'none';
+
+namespace TabsRoot {
+  export type OwnerState = {
+    orientation: TabsOrientation;
+    direction: TabsDirection;
+    tabActivationDirection: TabActivationDirection;
+  };
+
+  export interface Props extends BaseUIComponentProps<'div', OwnerState> {
+    /**
+     * The value of the currently selected `Tab`.
+     * If you don't want any selected `Tab`, you can set this prop to `null`.
+     */
+    value?: any | null;
+    /**
+     * The default value. Use when the component is not controlled.
+     */
+    defaultValue?: any | null;
+    /**
+     * The component orientation (layout flow direction).
+     * @default 'horizontal'
+     */
+    orientation?: TabsOrientation;
+    /**
+     * The direction of the text.
+     * @default 'ltr'
+     */
+    direction?: TabsDirection;
+    /**
+     * Callback invoked when new value is being set.
+     */
+    onValueChange?: (value: any | null, event: React.SyntheticEvent | null) => void;
+  }
+}
+
 TabsRoot.propTypes /* remove-proptypes */ = {
   // ┌────────────────────────────── Warning ──────────────────────────────┐
   // │ These PropTypes are generated from the TypeScript type definitions. │

diff --git a/packages/mui-base/src/Tabs/Root/TabsRoot.types.ts b/packages/mui-base/src/Tabs/Root/TabsRoot.types.ts
diff --git a/...ges/mui-base/src/Tabs/Root/TabsContext.ts → ...mui-base/src/Tabs/Root/TabsRootContext.ts b/...ges/mui-base/src/Tabs/Root/TabsContext.ts → ...mui-base/src/Tabs/Root/TabsRootContext.ts
@@ -1,8 +1,8 @@
 'use client';
 import * as React from 'react';
-import { type TabActivationDirection } from './TabsRoot.types';
+import { type TabActivationDirection } from './TabsRoot';
 
-export interface TabsContextValue {
+export interface TabsRootContext {
   /**
    * The currently selected tab's value.
    */
@@ -46,19 +46,19 @@ export interface TabsContextValue {
 /**
  * @ignore - internal component.
  */
-const TabsContext = React.createContext<TabsContextValue | null>(null);
+const TabsRootContext = React.createContext<TabsRootContext | null>(null);
 
 if (process.env.NODE_ENV !== 'production') {
-  TabsContext.displayName = 'TabsContext';
+  TabsRootContext.displayName = 'TabsRootContext';
 }
 
-export function useTabsContext() {
-  const context = React.useContext(TabsContext);
+export function useTabsRootContext() {
+  const context = React.useContext(TabsRootContext);
   if (context == null) {
-    throw new Error('No TabsContext provided');
+    throw new Error('Base UI: No TabsRootContext provided');
   }
 
   return context;
 }
 
-export { TabsContext };
+export { TabsRootContext };