) {
return otherTabPanelValues.size;
}
-function useTabPanel(parameters: UseTabPanelParameters): UseTabPanelReturnValue {
+function useTabPanel(parameters: useTabPanel.Parameters): useTabPanel.ReturnValue {
const { value: valueParam, id: idParam, rootRef: externalRef } = parameters;
const {
value: selectedTabValue,
@@ -19,7 +19,7 @@ function useTabPanel(parameters: UseTabPanelParameters): UseTabPanelReturnValue
orientation,
direction,
tabActivationDirection,
- } = useTabsContext();
+ } = useTabsRootContext();
const id = useId(idParam);
const ref = React.useRef
(null);
@@ -58,4 +58,40 @@ function useTabPanel(parameters: UseTabPanelParameters): UseTabPanelReturnValue
};
}
+namespace useTabPanel {
+ export interface Parameters {
+ /**
+ * The id of the TabPanel.
+ */
+ id?: string;
+ /**
+ * The ref of the TabPanel.
+ */
+ rootRef?: React.Ref;
+ /**
+ * The value of the TabPanel. It will be shown when the Tab with the corresponding value is selected.
+ */
+ value?: any;
+ }
+
+ export interface ReturnValue {
+ /**
+ * If `true`, it indicates that the tab panel will be hidden.
+ */
+ hidden: boolean;
+ /**
+ * Resolver for the root slot's props.
+ * @param externalProps additional props for the root slot
+ * @returns props that should be spread on the root slot
+ */
+ getRootProps: (
+ externalProps?: React.ComponentPropsWithRef<'div'>,
+ ) => React.ComponentPropsWithRef<'div'>;
+ rootRef: React.RefCallback | null;
+ orientation: TabsOrientation;
+ direction: TabsDirection;
+ tabActivationDirection: TabActivationDirection;
+ }
+}
+
export { useTabPanel };
diff --git a/packages/mui-base/src/Tabs/TabsList/TabsList.test.tsx b/packages/mui-base/src/Tabs/TabsList/TabsList.test.tsx
index 1979841892..3c38e7ff34 100644
--- a/packages/mui-base/src/Tabs/TabsList/TabsList.test.tsx
+++ b/packages/mui-base/src/Tabs/TabsList/TabsList.test.tsx
@@ -2,8 +2,8 @@ import * as React from 'react';
import { expect } from 'chai';
import { act } from '@mui/internal-test-utils';
import * as Tabs from '@base_ui/react/Tabs';
-import { TabsContext } from '@base_ui/react/Tabs';
import { createRenderer, describeConformance } from '#test-utils';
+import { TabsRootContext } from '../Root/TabsRootContext';
describe('', () => {
const { render } = createRenderer();
@@ -11,7 +11,7 @@ describe('', () => {
describeConformance(, () => ({
render: (node) => {
return render(
- {},
@@ -24,7 +24,7 @@ describe('', () => {
}}
>
{node}
- ,
+ ,
);
},
refInstanceof: window.HTMLDivElement,
diff --git a/packages/mui-base/src/Tabs/TabsList/TabsList.tsx b/packages/mui-base/src/Tabs/TabsList/TabsList.tsx
index 7cc96d2771..140f0a8d9d 100644
--- a/packages/mui-base/src/Tabs/TabsList/TabsList.tsx
+++ b/packages/mui-base/src/Tabs/TabsList/TabsList.tsx
@@ -1,11 +1,12 @@
'use client';
import * as React from 'react';
import PropTypes from 'prop-types';
-import { TabsListOwnerState, TabsListProps } from './TabsList.types';
import { useTabsList } from './useTabsList';
import { TabsListProvider } from './TabsListProvider';
import { tabsStyleHookMapping } from '../Root/styleHooks';
import { useComponentRenderer } from '../../utils/useComponentRenderer';
+import { TabsRoot } from '../Root/TabsRoot';
+import { BaseUIComponentProps } from '../../utils/types';
/**
*
@@ -18,7 +19,7 @@ import { useComponentRenderer } from '../../utils/useComponentRenderer';
* - [TabsList API](https://base-ui.netlify.app/components/react-tabs/#api-reference-TabsList)
*/
const TabsList = React.forwardRef(function TabsList(
- props: TabsListProps,
+ props: TabsList.Props,
forwardedRef: React.ForwardedRef,
) {
const { activateOnFocus = true, className, loop = true, render, ...other } = props;
@@ -30,7 +31,7 @@ const TabsList = React.forwardRef(function TabsList(
activateOnFocus,
});
- const ownerState: TabsListOwnerState = React.useMemo(
+ const ownerState: TabsList.OwnerState = React.useMemo(
() => ({
direction,
orientation,
@@ -51,6 +52,26 @@ const TabsList = React.forwardRef(function TabsList(
return {renderElement()};
});
+namespace TabsList {
+ export type OwnerState = TabsRoot.OwnerState;
+
+ export interface Props extends BaseUIComponentProps<'div', TabsList.OwnerState> {
+ /**
+ * If `true`, the tab will be activated whenever it is focused.
+ * Otherwise, it has to be activated by clicking or pressing the Enter or Space key.
+ *
+ * @default true
+ */
+ activateOnFocus?: boolean;
+ /**
+ * If `true`, using keyboard navigation will wrap focus to the other end of the list once the end is reached.
+ *
+ * @default true
+ */
+ loop?: boolean;
+ }
+}
+
TabsList.propTypes /* remove-proptypes */ = {
// ┌────────────────────────────── Warning ──────────────────────────────┐
// │ These PropTypes are generated from the TypeScript type definitions. │
diff --git a/packages/mui-base/src/Tabs/TabsList/TabsList.types.ts b/packages/mui-base/src/Tabs/TabsList/TabsList.types.ts
deleted file mode 100644
index 22d8c8bc3f..0000000000
--- a/packages/mui-base/src/Tabs/TabsList/TabsList.types.ts
+++ /dev/null
@@ -1,90 +0,0 @@
-import { TabsListProviderValue } from './TabsListProvider';
-import {
- TabActivationDirection,
- TabsDirection,
- TabsOrientation,
- TabsRootOwnerState,
-} from '../Root/TabsRoot.types';
-import { ListAction } from '../../useList';
-import { BaseUIComponentProps } from '../../utils/types';
-
-export type TabsListOwnerState = TabsRootOwnerState;
-
-export interface TabsListProps extends BaseUIComponentProps<'div', TabsListOwnerState> {
- /**
- * If `true`, the tab will be activated whenever it is focused.
- * Otherwise, it has to be activated by clicking or pressing the Enter or Space key.
- *
- * @default true
- */
- activateOnFocus?: boolean;
- /**
- * If `true`, using keyboard navigation will wrap focus to the other end of the list once the end is reached.
- *
- * @default true
- */
- loop?: boolean;
-}
-
-export interface UseTabsListParameters {
- /**
- * If `true`, the tab will be activated whenever it is focused.
- * Otherwise, it has to be activated by clicking or pressing the Enter or Space key.
- */
- activateOnFocus: boolean;
- /**
- * If `true`, using keyboard navigation will wrap focus to the other end of the list once the end is reached.
- */
- loop: boolean;
- /**
- * Ref to the root element.
- */
- rootRef: React.Ref;
-}
-
-export interface UseTabsListReturnValue {
- /**
- * The value to be passed to the TabListProvider above all the tabs.
- */
- contextValue: TabsListProviderValue;
- /**
- * Action dispatcher for the tabs list component.
- * Allows to programmatically control the tabs list.
- */
- dispatch: (action: ListAction) => void;
- /**
- * Resolver for the root slot's props.
- * @param externalProps props for the root slot
- * @returns props that should be spread on the root slot
- */
- getRootProps: (
- externalProps?: React.ComponentPropsWithRef<'div'>,
- ) => React.ComponentPropsWithRef<'div'>;
- /**
- * The value of the currently highlighted tab.
- */
- highlightedValue: any | null;
- /**
- * If `true`, it will indicate that the text's direction in right-to-left.
- */
- direction: TabsDirection;
- /**
- * The component orientation (layout flow direction).
- */
- orientation: TabsOrientation;
- rootRef: React.RefCallback | null;
- /**
- * The value of the currently selected tab.
- */
- selectedValue: any | null;
- tabActivationDirection: TabActivationDirection;
-}
-
-export const TabsListActionTypes = {
- valueChange: 'valueChange',
-} as const;
-
-export interface ValueChangeAction {
- type: typeof TabsListActionTypes.valueChange;
- value: any | null;
-}
diff --git a/packages/mui-base/src/Tabs/TabsList/TabsListContext.ts b/packages/mui-base/src/Tabs/TabsList/TabsListContext.ts
index c8d8a6ddf1..9b2833529d 100644
--- a/packages/mui-base/src/Tabs/TabsList/TabsListContext.ts
+++ b/packages/mui-base/src/Tabs/TabsList/TabsListContext.ts
@@ -1,13 +1,13 @@
'use client';
import * as React from 'react';
-export type TabsListContextValue = {
+export interface TabsListContext {
activateOnFocus: boolean;
getTabElement: (value: any) => HTMLElement | null;
tabsListRef: React.RefObject;
-};
+}
-export const TabsListContext = React.createContext(undefined);
+export const TabsListContext = React.createContext(undefined);
export function useTabsListContext() {
const context = React.useContext(TabsListContext);
diff --git a/packages/mui-base/src/Tabs/TabsList/TabsListProvider.tsx b/packages/mui-base/src/Tabs/TabsList/TabsListProvider.tsx
index a7e042824f..1e2a319e92 100644
--- a/packages/mui-base/src/Tabs/TabsList/TabsListProvider.tsx
+++ b/packages/mui-base/src/Tabs/TabsList/TabsListProvider.tsx
@@ -1,7 +1,7 @@
'use client';
import * as React from 'react';
import PropTypes from 'prop-types';
-import { TabsListContext, TabsListContextValue } from './TabsListContext';
+import { TabsListContext } from './TabsListContext';
import { TabMetadata } from '../Root/useTabsRoot';
import { ListContext, ListContextValue } from '../../useList/ListContext';
import { CompoundComponentContext, CompoundComponentContextValue } from '../../useCompound';
@@ -9,7 +9,7 @@ import { refType } from '../../utils/proptypes';
export type TabsListProviderValue = CompoundComponentContextValue &
ListContextValue &
- TabsListContextValue;
+ TabsListContext;
export interface TabsListProviderProps {
value: TabsListProviderValue;
@@ -53,7 +53,7 @@ function TabsListProvider(props: TabsListProviderProps) {
[registerItem, getItemIndex, totalSubitemCount],
);
- const tabsListContextValue: TabsListContextValue = React.useMemo(
+ const tabsListContextValue: TabsListContext = React.useMemo(
() => ({ activateOnFocus, getTabElement, tabsListRef }),
[activateOnFocus, getTabElement, tabsListRef],
);
diff --git a/packages/mui-base/src/Tabs/TabsList/tabsListReducer.ts b/packages/mui-base/src/Tabs/TabsList/tabsListReducer.ts
index e337803e9c..903bed29a6 100644
--- a/packages/mui-base/src/Tabs/TabsList/tabsListReducer.ts
+++ b/packages/mui-base/src/Tabs/TabsList/tabsListReducer.ts
@@ -1,4 +1,3 @@
-import { TabsListActionTypes, ValueChangeAction } from './TabsList.types';
import {
ListState,
ListAction,
@@ -13,6 +12,15 @@ export type TabsListActionContext = ListActionContext & {
activateOnFocus: boolean;
};
+export const TabsListActionTypes = {
+ valueChange: 'valueChange',
+} as const;
+
+export interface ValueChangeAction {
+ type: typeof TabsListActionTypes.valueChange;
+ value: any | null;
+}
+
export function tabsListReducer(
state: ListState,
action: ActionWithContext | ValueChangeAction, TabsListActionContext>,
diff --git a/packages/mui-base/src/Tabs/TabsList/useTabsList.ts b/packages/mui-base/src/Tabs/TabsList/useTabsList.ts
index 07fe4272f6..5ecbbbb81f 100644
--- a/packages/mui-base/src/Tabs/TabsList/useTabsList.ts
+++ b/packages/mui-base/src/Tabs/TabsList/useTabsList.ts
@@ -1,22 +1,18 @@
'use client';
import * as React from 'react';
-import {
- TabsListActionTypes,
- type UseTabsListParameters,
- type UseTabsListReturnValue,
- type ValueChangeAction,
-} from './TabsList.types';
-import { tabsListReducer } from './tabsListReducer';
-import { useTabsContext } from '../Root/TabsContext';
+import { TabsListActionTypes, tabsListReducer, ValueChangeAction } from './tabsListReducer';
+import { useTabsRootContext } from '../Root/TabsRootContext';
import { type TabMetadata } from '../Root/useTabsRoot';
-import { type TabsOrientation, type TabActivationDirection } from '../Root/TabsRoot.types';
+import { type TabsOrientation, type TabActivationDirection } from '../Root/TabsRoot';
import { useCompoundParent } from '../../useCompound';
-import { useList, ListState, UseListParameters } from '../../useList';
+import { useList, ListState, UseListParameters, ListAction } from '../../useList';
import { useForkRef } from '../../utils/useForkRef';
import { mergeReactProps } from '../../utils/mergeReactProps';
import { useEnhancedEffect } from '../../utils/useEnhancedEffect';
+import { TabsDirection } from '../Root/TabsRoot';
+import { TabsListProviderValue } from './TabsListProvider';
-function useTabsList(parameters: UseTabsListParameters): UseTabsListReturnValue {
+function useTabsList(parameters: useTabsList.Parameters): useTabsList.ReturnValue {
const { rootRef: externalRef, loop, activateOnFocus } = parameters;
const {
@@ -26,7 +22,7 @@ function useTabsList(parameters: UseTabsListParameters): UseTabsListReturnValue
value,
registerTabIdLookup,
tabActivationDirection,
- } = useTabsContext();
+ } = useTabsRootContext();
const { subitems, contextValue: compoundComponentContextValue } = useCompoundParent<
any,
@@ -263,4 +259,60 @@ function useActivationDirectionDetector(
);
}
+namespace useTabsList {
+ export interface Parameters {
+ /**
+ * If `true`, the tab will be activated whenever it is focused.
+ * Otherwise, it has to be activated by clicking or pressing the Enter or Space key.
+ */
+ activateOnFocus: boolean;
+ /**
+ * If `true`, using keyboard navigation will wrap focus to the other end of the list once the end is reached.
+ */
+ loop: boolean;
+ /**
+ * Ref to the root element.
+ */
+ rootRef: React.Ref;
+ }
+
+ export interface ReturnValue {
+ /**
+ * The value to be passed to the TabListProvider above all the tabs.
+ */
+ contextValue: TabsListProviderValue;
+ /**
+ * Action dispatcher for the tabs list component.
+ * Allows to programmatically control the tabs list.
+ */
+ dispatch: (action: ListAction) => void;
+ /**
+ * Resolver for the root slot's props.
+ * @param externalProps props for the root slot
+ * @returns props that should be spread on the root slot
+ */
+ getRootProps: (
+ externalProps?: React.ComponentPropsWithRef<'div'>,
+ ) => React.ComponentPropsWithRef<'div'>;
+ /**
+ * The value of the currently highlighted tab.
+ */
+ highlightedValue: any | null;
+ /**
+ * If `true`, it will indicate that the text's direction in right-to-left.
+ */
+ direction: TabsDirection;
+ /**
+ * The component orientation (layout flow direction).
+ */
+ orientation: TabsOrientation;
+ rootRef: React.RefCallback | null;
+ /**
+ * The value of the currently selected tab.
+ */
+ selectedValue: any | null;
+ tabActivationDirection: TabActivationDirection;
+ }
+}
+
export { useTabsList };
diff --git a/packages/mui-base/src/Tabs/index.barrel.ts b/packages/mui-base/src/Tabs/index.barrel.ts
index 04656786ba..d8c499e9e6 100644
--- a/packages/mui-base/src/Tabs/index.barrel.ts
+++ b/packages/mui-base/src/Tabs/index.barrel.ts
@@ -1,43 +1,5 @@
export { TabsRoot } from './Root/TabsRoot';
-export type {
- TabsRootOwnerState,
- TabsRootProps,
- TabsDirection,
- TabsOrientation,
- UseTabsParameters,
- UseTabsReturnValue,
-} from './Root/TabsRoot.types';
-export { useTabsRoot } from './Root/useTabsRoot';
-export { TabsContext, type TabsContextValue, useTabsContext } from './Root/TabsContext';
-export * from './Root/TabsProvider';
-
export { Tab } from './Tab/Tab';
-export type { TabOwnerState, TabProps, UseTabParameters, UseTabReturnValue } from './Tab/Tab.types';
-export { useTab } from './Tab/useTab';
-
export { TabIndicator } from './TabIndicator/TabIndicator';
-export type {
- TabIndicatorOwnerState,
- TabIndicatorProps,
- UseTabIndicatorReturnValue,
-} from './TabIndicator/TabIndicator.types';
-export { useTabIndicator } from './TabIndicator/useTabIndicator';
-
export { TabPanel } from './TabPanel/TabPanel';
-export type {
- TabPanelOwnerState,
- TabPanelProps,
- UseTabPanelParameters,
- UseTabPanelReturnValue,
-} from './TabPanel/TabPanel.types';
-export { useTabPanel } from './TabPanel/useTabPanel';
-
export { TabsList } from './TabsList/TabsList';
-export type {
- TabsListOwnerState,
- TabsListProps,
- UseTabsListParameters,
- UseTabsListReturnValue,
-} from './TabsList/TabsList.types';
-export * from './TabsList/TabsListProvider';
-export { useTabsList } from './TabsList/useTabsList';
diff --git a/packages/mui-base/src/Tabs/index.ts b/packages/mui-base/src/Tabs/index.ts
index a204765d0d..acb9d122d3 100644
--- a/packages/mui-base/src/Tabs/index.ts
+++ b/packages/mui-base/src/Tabs/index.ts
@@ -1,43 +1,5 @@
export { TabsRoot as Root } from './Root/TabsRoot';
-export type {
- TabsRootOwnerState as RootOwnerState,
- TabsRootProps as RootProps,
- TabsDirection as Direction,
- TabsOrientation as Orientation,
- UseTabsParameters,
- UseTabsReturnValue,
-} from './Root/TabsRoot.types';
-export { useTabsRoot } from './Root/useTabsRoot';
-export { TabsContext, type TabsContextValue, useTabsContext } from './Root/TabsContext';
-export * from './Root/TabsProvider';
-
export { Tab } from './Tab/Tab';
-export type { TabOwnerState, TabProps, UseTabParameters, UseTabReturnValue } from './Tab/Tab.types';
-export { useTab } from './Tab/useTab';
-
export { TabIndicator as Indicator } from './TabIndicator/TabIndicator';
-export type {
- TabIndicatorOwnerState as IndicatorOwnerState,
- TabIndicatorProps as IndicatorProps,
- UseTabIndicatorReturnValue,
-} from './TabIndicator/TabIndicator.types';
-export { useTabIndicator } from './TabIndicator/useTabIndicator';
-
export { TabPanel as Panel } from './TabPanel/TabPanel';
-export type {
- TabPanelOwnerState as PanelOwnerState,
- TabPanelProps as PanelProps,
- UseTabPanelParameters,
- UseTabPanelReturnValue,
-} from './TabPanel/TabPanel.types';
-export { useTabPanel } from './TabPanel/useTabPanel';
-
export { TabsList as List } from './TabsList/TabsList';
-export type {
- TabsListOwnerState as ListOwnerState,
- TabsListProps as ListProps,
- UseTabsListParameters,
- UseTabsListReturnValue,
-} from './TabsList/TabsList.types';
-export * from './TabsList/TabsListProvider';
-export { useTabsList } from './TabsList/useTabsList';