[Tabs] Refactor to `useRenderElement` #1881

mj12albert · 2025-05-07T10:00:20Z

I have followed (at least) the PR section of the contributing guide.

pkg-pr-new · 2025-05-07T10:01:31Z

npm i https://pkg.pr.new/@base-ui-components/react@1881

commit: fb51e1b

netlify · 2025-05-07T10:02:58Z

✅ Deploy Preview for base-ui ready!

Name	Link
🔨 Latest commit	`fb51e1b`
🔍 Latest deploy log	https://app.netlify.com/projects/base-ui/deploys/683846239a07a6000863dd04
😎 Deploy Preview	https://deploy-preview-1881--base-ui.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

michaldudak · 2025-05-07T12:02:24Z

packages/react/src/tabs/indicator/TabsIndicator.tsx

@@ -94,12 +203,12 @@ export const TabsIndicator = React.forwardRef(function TabIndicator(

 export namespace TabsIndicator {
  export interface State extends TabsRoot.State {
-    selectedTabPosition: ActiveTabPosition | null;
-    selectedTabSize: ActiveTabSize | null;
+    selectedTabPosition: TabPosition | null;


The TabPosition and TabSize types should be publicly exported as they can be used in a render function

michaldudak · 2025-05-07T12:03:52Z

packages/react/src/tabs/list/TabsList.tsx

 import { TabsListContext } from './TabsListContext';

 const EMPTY_ARRAY: number[] = [];

+function getInset(tab: HTMLElement, tabsList: HTMLElement) {


nit: could you move these helper functions below the component? This way, while reading the code we'll go from high to low level details.

michaldudak · 2025-05-07T12:04:40Z

packages/react/src/tabs/list/TabsList.tsx

@@ -104,7 +202,7 @@ export const TabsList = React.forwardRef(function TabsList(
 export namespace TabsList {
  export type State = TabsRoot.State;

-  export interface Props extends BaseUIComponentProps<'div', TabsList.State> {
+  export interface Props extends BaseUIComponentProps<'div', TabsRoot.State> {


Suggested change

export interface Props extends BaseUIComponentProps<'div', TabsRoot.State> {

export interface Props extends BaseUIComponentProps<'div', State> {

…lement

mj12albert · 2025-05-07T13:02:13Z

Fixed the comments ~ @michaldudak

michaldudak · 2025-05-08T07:38:20Z

packages/react/src/tabs/root/TabsRoot.tsx

 export type TabActivationDirection = 'left' | 'right' | 'up' | 'down' | 'none';
 export type TabValue = any | null;

 export namespace TabsRoot {
  export type State = {
-    orientation: TabsOrientation;
+    orientation: Orientation;


IMO we could re-export Orientation in the TabsRoot namespace, so types are colocated from devs' point of view.

Makes sense, should types like TabValue/TabActivationDirection be namespaced under the root too then? (or the most suitable part) @michaldudak

Yes, I'd do it as well. However, currently the docs generator doesn't handle such cases well, but I'm going to spend some time on it next week and solve this issue.

Updated and used the @type annotation for value, the other changes didn't afffect the props table

…lement

michaldudak · 2025-05-27T08:53:27Z

packages/react/src/tabs/panel/TabsPanel.tsx

-    propGetter: getRootProps,
-    render: render ?? 'div',
-    className,
+  const renderElement = useRenderElement('div', componentProps, {


We usually call the returned var element. Also, in line 92, it should not be called but returned directly (same in other files).

…lement

michaldudak · 2025-05-29T06:08:58Z

packages/react/src/tabs/root/TabsRoot.tsx

@@ -121,7 +212,7 @@ export namespace TabsRoot {
     * The component orientation (layout flow direction).
     * @default 'horizontal'
     */
-    orientation?: TabsOrientation;
+    orientation?: Orientation;


Due to a current limitation of API extractor, we have to manually override the type with a @type JSDoc tag:

@type Tabs.Root.Orientation

michaldudak · 2025-05-29T06:10:42Z

packages/react/src/tabs/tab/TabsTab.tsx

+        'aria-controls': tabPanelId,
+        'aria-selected': selected,
+        id,
+        onClick(event: React.MouseEvent<HTMLButtonElement>) {


Let's wrap these in useEventCallback so they are stable between renders.

…lement

mui-bot · 2025-05-29T09:58:32Z

Bundle size report

Total Size Change:^{${\tiny{\color{green}▼}}$}-4.68KB^(-0.32%) - Total Gzip Change:^{${\tiny{\color{green}▼}}$}-944B^(-0.19%)
Files: 41 total (0 added, 0 removed, 2 changed)

@base-ui-components/react/tabs parsed:^{${\tiny{\color{green}▼}}$}-2.48KB^(-9.34%) gzip:^{${\tiny{\color{green}▼}}$}-514B^(-5.62%)
@base-ui-components/react parsed:^{${\tiny{\color{green}▼}}$}-2.2KB^(-0.72%) gzip:^{${\tiny{\color{green}▼}}$}-430B^(-0.46%)

Details of bundle changes

Generated by 🚫 dangerJS against fb51e1b

mj12albert added 5 commits May 7, 2025 17:58

TabsList

320b2c0

TabsTab

7003bd9

TabsIndicator

16f5537

TabsPanel

3bf90ed

TabsRoot

3650d79

mj12albert added core DO NOT USE. This label has been deprecated and replaced by `all components` and `internal`. component: tabs labels May 7, 2025

mj12albert marked this pull request as ready for review May 7, 2025 10:34

mj12albert requested review from atomiks, colmtuite and michaldudak as code owners May 7, 2025 10:34

michaldudak reviewed May 7, 2025

View reviewed changes

mj12albert added 2 commits May 7, 2025 20:44

fixes

280a0ea

Merge remote-tracking branch 'upstream/master' into tabs/use-render-e…

87c9d5a

…lement

mj12albert force-pushed the tabs/use-render-element branch from 71d70d4 to 87c9d5a Compare May 7, 2025 12:53

mj12albert requested a review from michaldudak May 7, 2025 13:01

michaldudak reviewed May 8, 2025

View reviewed changes

mj12albert added 3 commits May 9, 2025 11:41

Put orientation type under tabs namespace

c3446b4

Merge remote-tracking branch 'upstream/master' into tabs/use-render-e…

8149d53

…lement

docs:api

ee93106

github-actions bot added the PR: out-of-date The pull request has merge conflicts and can't be merged label May 9, 2025

Merge remote-tracking branch 'upstream/master' into tabs/use-render-e…

f5f06f5

…lement

github-actions bot removed the PR: out-of-date The pull request has merge conflicts and can't be merged label May 13, 2025

Merge branch 'master' into tabs/use-render-element

8c50112

mj12albert requested a review from michaldudak May 20, 2025 08:08

michaldudak reviewed May 27, 2025

View reviewed changes

Merge remote-tracking branch 'upstream/master' into tabs/use-render-e…

f0df8be

…lement

Fix renderElement

a0aa25c

michaldudak reviewed May 29, 2025

View reviewed changes

michaldudak added internal and removed core DO NOT USE. This label has been deprecated and replaced by `all components` and `internal`. labels May 29, 2025

mj12albert added 2 commits May 29, 2025 17:56

Fix comments

4fe98d1

Merge remote-tracking branch 'upstream/master' into tabs/use-render-e…

6e96b99

…lement

Move types to namespaces

c901040

mj12albert requested a review from michaldudak May 29, 2025 10:44

michaldudak approved these changes May 29, 2025

View reviewed changes

Merge branch 'master' into tabs/use-render-element

fb51e1b

mj12albert merged commit 82baf05 into mui:master May 29, 2025
22 checks passed

mj12albert deleted the tabs/use-render-element branch May 29, 2025 11:48

oliviertassinari added core DO NOT USE. This label has been deprecated and replaced by `all components` and `internal`. and removed internal labels May 29, 2025

	export interface Props extends BaseUIComponentProps<'div', TabsRoot.State> {
	export interface Props extends BaseUIComponentProps<'div', State> {

Uh oh!

[Tabs] Refactor to useRenderElement #1881

[Tabs] Refactor to useRenderElement #1881

Uh oh!

Conversation

mj12albert commented May 7, 2025

Uh oh!

pkg-pr-new bot commented May 7, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

netlify bot commented May 7, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Deploy Preview for base-ui ready!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

mj12albert commented May 7, 2025

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

mui-bot commented May 29, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Bundle size report

Uh oh!

Uh oh!

Uh oh!

[Tabs] Refactor to `useRenderElement` #1881

[Tabs] Refactor to `useRenderElement` #1881

pkg-pr-new bot commented May 7, 2025 •

edited

Loading

netlify bot commented May 7, 2025 •

edited

Loading

mui-bot commented May 29, 2025 •

edited

Loading