@base-ui/react 1.6.0 → 1.7.0

package/tabs/panel/TabsPanel.mjs

@@ -11,7 +11,6 @@ import { useRenderElement } from "../../internals/useRenderElement.mjs";
 import { useCompositeListItem } from "../../internals/composite/list/useCompositeListItem.mjs";
 import { tabsStateAttributesMapping } from "../root/stateAttributesMapping.mjs";
 import { useTabsRootContext } from "../root/TabsRootContext.mjs";
-import { TabsPanelDataAttributes } from "./TabsPanelDataAttributes.mjs";
 const stateAttributesMapping = {
   ...tabsStateAttributesMapping,
   ...transitionStatusMapping
@@ -37,20 +36,13 @@ export const TabsPanel = /*#__PURE__*/React.forwardRef(function TabsPanel(compon
     getTabIdByPanelValue,
     orientation,
     tabActivationDirection,
-    registerMountedTabPanel,
-    unregisterMountedTabPanel
+    registerMountedTabPanel
   } = useTabsRootContext();
   const id = useBaseUiId();
-  const metadata = React.useMemo(() => ({
-    id,
-    value
-  }), [id, value]);
   const {
     ref: listItemRef,
     index
-  } = useCompositeListItem({
-    metadata
-  });
+  } = useCompositeListItem();
   const open = value === selectedValue;
   const {
     mounted,
@@ -76,7 +68,8 @@ export const TabsPanel = /*#__PURE__*/React.forwardRef(function TabsPanel(compon
       role: 'tabpanel',
       tabIndex: open ? 0 : -1,
       inert: inertValue(!open),
-      [TabsPanelDataAttributes.index]: index
+      // Computed key: a plain literal key fails the DOM-props excess property check.
+      ['data-index']: index
     }, elementProps],
     stateAttributesMapping
   });
@@ -90,17 +83,14 @@ export const TabsPanel = /*#__PURE__*/React.forwardRef(function TabsPanel(compon
     }
   });
   useIsoLayoutEffect(() => {
-    if (hidden && !keepMounted) {
-      return undefined;
-    }
-    if (id == null) {
+    // On React 17 `useId` resolves in a passive effect, so `id` is still
+    // undefined during this layout effect on the first commit. Skip the
+    // registration until the effect re-runs with the resolved id.
+    if (id == null || hidden && !keepMounted) {
       return undefined;
     }
-    registerMountedTabPanel(value, id);
-    return () => {
-      unregisterMountedTabPanel(value, id);
-    };
-  }, [hidden, keepMounted, value, id, registerMountedTabPanel, unregisterMountedTabPanel]);
+    return registerMountedTabPanel(value, id);
+  }, [hidden, keepMounted, value, id, registerMountedTabPanel]);
   const shouldRender = keepMounted || mounted;
   if (!shouldRender) {
     return null;

package/tabs/panel/TabsPanelDataAttributes.d.mts

@@ -18,7 +18,7 @@ export declare enum TabsPanelDataAttributes {
    */
   hidden = "data-hidden",
   /**
-   * Present when the panel is animating in.
+   * Present when the panel begins animating in.
    */
   startingStyle = "data-starting-style",
   /**

package/tabs/panel/TabsPanelDataAttributes.d.ts

@@ -18,7 +18,7 @@ export declare enum TabsPanelDataAttributes {
    */
   hidden = "data-hidden",
   /**
-   * Present when the panel is animating in.
+   * Present when the panel begins animating in.
    */
   startingStyle = "data-starting-style",
   /**

package/tabs/panel/TabsPanelDataAttributes.js

@@ -25,7 +25,7 @@ let TabsPanelDataAttributes = exports.TabsPanelDataAttributes = function (TabsPa
    */
   TabsPanelDataAttributes["hidden"] = "data-hidden";
   /**
-   * Present when the panel is animating in.
+   * Present when the panel begins animating in.
    */
   TabsPanelDataAttributes[TabsPanelDataAttributes["startingStyle"] = _stateAttributesMapping.TransitionStatusDataAttributes.startingStyle] = "startingStyle";
   /**

package/tabs/panel/TabsPanelDataAttributes.mjs

@@ -19,7 +19,7 @@ export let TabsPanelDataAttributes = function (TabsPanelDataAttributes) {
    */
   TabsPanelDataAttributes["hidden"] = "data-hidden";
   /**
-   * Present when the panel is animating in.
+   * Present when the panel begins animating in.
    */
   TabsPanelDataAttributes[TabsPanelDataAttributes["startingStyle"] = TransitionStatusDataAttributes.startingStyle] = "startingStyle";
   /**

package/tabs/root/TabsRoot.js

@@ -51,17 +51,7 @@ const TabsRoot = exports.TabsRoot = /*#__PURE__*/React.forwardRef(function TabsR
   const lastKnownTabElementRef = React.useRef(undefined);
 
   // Used for activation direction detection via tab element positions.
-  const getTabElementBySelectedValue = React.useCallback(selectedValue => {
-    if (selectedValue === undefined) {
-      return null;
-    }
-    for (const [tabElement, tabMetadata] of tabMap.entries()) {
-      if (tabMetadata != null && selectedValue === (tabMetadata.value ?? tabMetadata.index)) {
-        return tabElement;
-      }
-    }
-    return null;
-  }, [tabMap]);
+  const getTabElementBySelectedValue = React.useCallback(selectedValue => findTabElement(tabMap, selectedValue), [tabMap]);
   const [activationDirectionState, setActivationDirectionState] = React.useState(() => ({
     previousValue: value,
     tabActivationDirection: 'none'
@@ -113,23 +103,22 @@ const TabsRoot = exports.TabsRoot = /*#__PURE__*/React.forwardRef(function TabsR
   });
   const registerMountedTabPanel = (0, _useStableCallback.useStableCallback)((panelValue, panelId) => {
     setMountedTabPanels(prev => {
-      if (prev.get(panelValue) === panelId) {
-        return prev;
-      }
       const next = new Map(prev);
       next.set(panelValue, panelId);
       return next;
     });
-  });
-  const unregisterMountedTabPanel = (0, _useStableCallback.useStableCallback)((panelValue, panelId) => {
-    setMountedTabPanels(prev => {
-      if (!prev.has(panelValue) || prev.get(panelValue) !== panelId) {
-        return prev;
-      }
-      const next = new Map(prev);
-      next.delete(panelValue);
-      return next;
-    });
+    return () => {
+      setMountedTabPanels(prev => {
+        // Another panel with the same value took ownership in the meantime;
+        // leave its registration in place.
+        if (prev.get(panelValue) !== panelId) {
+          return prev;
+        }
+        const next = new Map(prev);
+        next.delete(panelValue);
+        return next;
+      });
+    };
   });
 
   // get the `id` attribute of <Tabs.Panel> to set as the value of `aria-controls` on <Tabs.Tab>
@@ -140,8 +129,8 @@ const TabsRoot = exports.TabsRoot = /*#__PURE__*/React.forwardRef(function TabsR
   // get the `id` attribute of <Tabs.Tab> to set as the value of `aria-labelledby` on <Tabs.Panel>
   const getTabIdByPanelValue = React.useCallback(tabPanelValue => {
     for (const tabMetadata of tabMap.values()) {
-      if (tabPanelValue === tabMetadata?.value) {
-        return tabMetadata?.id;
+      if (tabPanelValue === tabMetadata.value) {
+        return tabMetadata.id;
       }
     }
     return undefined;
@@ -154,13 +143,12 @@ const TabsRoot = exports.TabsRoot = /*#__PURE__*/React.forwardRef(function TabsR
     orientation,
     registerMountedTabPanel,
     setTabMap,
-    unregisterMountedTabPanel,
     tabActivationDirection,
     value
-  }), [getTabElementBySelectedValue, getTabIdByPanelValue, getTabPanelIdByValue, onValueChange, orientation, registerMountedTabPanel, setTabMap, unregisterMountedTabPanel, tabActivationDirection, value]);
+  }), [getTabElementBySelectedValue, getTabIdByPanelValue, getTabPanelIdByValue, onValueChange, orientation, registerMountedTabPanel, setTabMap, tabActivationDirection, value]);
   const selectedTabMetadata = React.useMemo(() => {
     for (const tabMetadata of tabMap.values()) {
-      if (tabMetadata != null && tabMetadata.value === value) {
+      if (tabMetadata.value === value) {
         return tabMetadata;
       }
     }
@@ -171,7 +159,7 @@ const TabsRoot = exports.TabsRoot = /*#__PURE__*/React.forwardRef(function TabsR
   // Used as a fallback when the current selection is disabled or missing.
   const firstEnabledTabValue = React.useMemo(() => {
     for (const tabMetadata of tabMap.values()) {
-      if (tabMetadata != null && !tabMetadata.disabled) {
+      if (!tabMetadata.disabled) {
         return tabMetadata.value;
       }
     }
@@ -199,14 +187,9 @@ const TabsRoot = exports.TabsRoot = /*#__PURE__*/React.forwardRef(function TabsR
       setValue(fallbackValue);
       // Automatic fallbacks are not directional transitions; reset the direction
       // alongside the value so the batched commit keeps both in sync.
-      setActivationDirectionState(prev => {
-        if (prev.previousValue === fallbackValue && prev.tabActivationDirection === 'none') {
-          return prev;
-        }
-        return {
-          previousValue: fallbackValue,
-          tabActivationDirection: 'none'
-        };
+      setActivationDirectionState({
+        previousValue: fallbackValue,
+        tabActivationDirection: 'none'
       });
       notifyAutomaticValueChange(fallbackValue, fallbackReason);
       // Mark the initial notification as delivered only after the consumer
@@ -274,55 +257,37 @@ const TabsRoot = exports.TabsRoot = /*#__PURE__*/React.forwardRef(function TabsR
   });
 });
 if (process.env.NODE_ENV !== "production") TabsRoot.displayName = "TabsRoot";
+function findTabElement(tabMap, value) {
+  for (const [tabElement, tabMetadata] of tabMap.entries()) {
+    if (value === tabMetadata.value) {
+      return tabElement;
+    }
+  }
+  return null;
+}
 function computeActivationDirection(oldValue, newValue, orientation, tabMap) {
   if (oldValue == null || newValue == null) {
     return 'none';
   }
-  let oldTab = null;
-  let newTab = null;
-  for (const [tabElement, tabMetadata] of tabMap.entries()) {
-    if (tabMetadata == null) {
-      continue;
-    }
-    const tabValue = tabMetadata.value ?? tabMetadata.index;
-    if (oldValue === tabValue) {
-      oldTab = tabElement;
-    }
-    if (newValue === tabValue) {
-      newTab = tabElement;
-    }
-    if (oldTab != null && newTab != null) {
-      break;
-    }
-  }
+  const [positionProp, backward, forward] = orientation === 'horizontal' ? ['left', 'left', 'right'] : ['top', 'up', 'down'];
+  const oldTab = findTabElement(tabMap, oldValue);
+  const newTab = findTabElement(tabMap, newValue);
   if (oldTab == null || newTab == null) {
     // Fallback for dynamic tabs: when a tab element isn't registered yet
     // (e.g. added and selected in the same update), infer direction from
     // the values themselves. Works for comparable types (numbers, strings).
     if (oldTab !== newTab && (typeof oldValue === 'number' || typeof oldValue === 'string') && typeof oldValue === typeof newValue) {
-      if (orientation === 'horizontal') {
-        return newValue > oldValue ? 'right' : 'left';
-      }
-      return newValue > oldValue ? 'down' : 'up';
+      return newValue > oldValue ? forward : backward;
     }
     return 'none';
   }
-  const oldRect = oldTab.getBoundingClientRect();
-  const newRect = newTab.getBoundingClientRect();
-  if (orientation === 'horizontal') {
-    if (newRect.left < oldRect.left) {
-      return 'left';
-    }
-    if (newRect.left > oldRect.left) {
-      return 'right';
-    }
-  } else {
-    if (newRect.top < oldRect.top) {
-      return 'up';
-    }
-    if (newRect.top > oldRect.top) {
-      return 'down';
-    }
+  const oldPosition = oldTab.getBoundingClientRect()[positionProp];
+  const newPosition = newTab.getBoundingClientRect()[positionProp];
+  if (newPosition < oldPosition) {
+    return backward;
+  }
+  if (newPosition > oldPosition) {
+    return forward;
   }
   return 'none';
 }

package/tabs/root/TabsRoot.mjs

@@ -46,17 +46,7 @@ export const TabsRoot = /*#__PURE__*/React.forwardRef(function TabsRoot(componen
   const lastKnownTabElementRef = React.useRef(undefined);
 
   // Used for activation direction detection via tab element positions.
-  const getTabElementBySelectedValue = React.useCallback(selectedValue => {
-    if (selectedValue === undefined) {
-      return null;
-    }
-    for (const [tabElement, tabMetadata] of tabMap.entries()) {
-      if (tabMetadata != null && selectedValue === (tabMetadata.value ?? tabMetadata.index)) {
-        return tabElement;
-      }
-    }
-    return null;
-  }, [tabMap]);
+  const getTabElementBySelectedValue = React.useCallback(selectedValue => findTabElement(tabMap, selectedValue), [tabMap]);
   const [activationDirectionState, setActivationDirectionState] = React.useState(() => ({
     previousValue: value,
     tabActivationDirection: 'none'
@@ -108,23 +98,22 @@ export const TabsRoot = /*#__PURE__*/React.forwardRef(function TabsRoot(componen
   });
   const registerMountedTabPanel = useStableCallback((panelValue, panelId) => {
     setMountedTabPanels(prev => {
-      if (prev.get(panelValue) === panelId) {
-        return prev;
-      }
       const next = new Map(prev);
       next.set(panelValue, panelId);
       return next;
     });
-  });
-  const unregisterMountedTabPanel = useStableCallback((panelValue, panelId) => {
-    setMountedTabPanels(prev => {
-      if (!prev.has(panelValue) || prev.get(panelValue) !== panelId) {
-        return prev;
-      }
-      const next = new Map(prev);
-      next.delete(panelValue);
-      return next;
-    });
+    return () => {
+      setMountedTabPanels(prev => {
+        // Another panel with the same value took ownership in the meantime;
+        // leave its registration in place.
+        if (prev.get(panelValue) !== panelId) {
+          return prev;
+        }
+        const next = new Map(prev);
+        next.delete(panelValue);
+        return next;
+      });
+    };
   });
 
   // get the `id` attribute of <Tabs.Panel> to set as the value of `aria-controls` on <Tabs.Tab>
@@ -135,8 +124,8 @@ export const TabsRoot = /*#__PURE__*/React.forwardRef(function TabsRoot(componen
   // get the `id` attribute of <Tabs.Tab> to set as the value of `aria-labelledby` on <Tabs.Panel>
   const getTabIdByPanelValue = React.useCallback(tabPanelValue => {
     for (const tabMetadata of tabMap.values()) {
-      if (tabPanelValue === tabMetadata?.value) {
-        return tabMetadata?.id;
+      if (tabPanelValue === tabMetadata.value) {
+        return tabMetadata.id;
       }
     }
     return undefined;
@@ -149,13 +138,12 @@ export const TabsRoot = /*#__PURE__*/React.forwardRef(function TabsRoot(componen
     orientation,
     registerMountedTabPanel,
     setTabMap,
-    unregisterMountedTabPanel,
     tabActivationDirection,
     value
-  }), [getTabElementBySelectedValue, getTabIdByPanelValue, getTabPanelIdByValue, onValueChange, orientation, registerMountedTabPanel, setTabMap, unregisterMountedTabPanel, tabActivationDirection, value]);
+  }), [getTabElementBySelectedValue, getTabIdByPanelValue, getTabPanelIdByValue, onValueChange, orientation, registerMountedTabPanel, setTabMap, tabActivationDirection, value]);
   const selectedTabMetadata = React.useMemo(() => {
     for (const tabMetadata of tabMap.values()) {
-      if (tabMetadata != null && tabMetadata.value === value) {
+      if (tabMetadata.value === value) {
         return tabMetadata;
       }
     }
@@ -166,7 +154,7 @@ export const TabsRoot = /*#__PURE__*/React.forwardRef(function TabsRoot(componen
   // Used as a fallback when the current selection is disabled or missing.
   const firstEnabledTabValue = React.useMemo(() => {
     for (const tabMetadata of tabMap.values()) {
-      if (tabMetadata != null && !tabMetadata.disabled) {
+      if (!tabMetadata.disabled) {
         return tabMetadata.value;
       }
     }
@@ -194,14 +182,9 @@ export const TabsRoot = /*#__PURE__*/React.forwardRef(function TabsRoot(componen
       setValue(fallbackValue);
       // Automatic fallbacks are not directional transitions; reset the direction
       // alongside the value so the batched commit keeps both in sync.
-      setActivationDirectionState(prev => {
-        if (prev.previousValue === fallbackValue && prev.tabActivationDirection === 'none') {
-          return prev;
-        }
-        return {
-          previousValue: fallbackValue,
-          tabActivationDirection: 'none'
-        };
+      setActivationDirectionState({
+        previousValue: fallbackValue,
+        tabActivationDirection: 'none'
       });
       notifyAutomaticValueChange(fallbackValue, fallbackReason);
       // Mark the initial notification as delivered only after the consumer
@@ -269,55 +252,37 @@ export const TabsRoot = /*#__PURE__*/React.forwardRef(function TabsRoot(componen
   });
 });
 if (process.env.NODE_ENV !== "production") TabsRoot.displayName = "TabsRoot";
+function findTabElement(tabMap, value) {
+  for (const [tabElement, tabMetadata] of tabMap.entries()) {
+    if (value === tabMetadata.value) {
+      return tabElement;
+    }
+  }
+  return null;
+}
 function computeActivationDirection(oldValue, newValue, orientation, tabMap) {
   if (oldValue == null || newValue == null) {
     return 'none';
   }
-  let oldTab = null;
-  let newTab = null;
-  for (const [tabElement, tabMetadata] of tabMap.entries()) {
-    if (tabMetadata == null) {
-      continue;
-    }
-    const tabValue = tabMetadata.value ?? tabMetadata.index;
-    if (oldValue === tabValue) {
-      oldTab = tabElement;
-    }
-    if (newValue === tabValue) {
-      newTab = tabElement;
-    }
-    if (oldTab != null && newTab != null) {
-      break;
-    }
-  }
+  const [positionProp, backward, forward] = orientation === 'horizontal' ? ['left', 'left', 'right'] : ['top', 'up', 'down'];
+  const oldTab = findTabElement(tabMap, oldValue);
+  const newTab = findTabElement(tabMap, newValue);
   if (oldTab == null || newTab == null) {
     // Fallback for dynamic tabs: when a tab element isn't registered yet
     // (e.g. added and selected in the same update), infer direction from
     // the values themselves. Works for comparable types (numbers, strings).
     if (oldTab !== newTab && (typeof oldValue === 'number' || typeof oldValue === 'string') && typeof oldValue === typeof newValue) {
-      if (orientation === 'horizontal') {
-        return newValue > oldValue ? 'right' : 'left';
-      }
-      return newValue > oldValue ? 'down' : 'up';
+      return newValue > oldValue ? forward : backward;
     }
     return 'none';
   }
-  const oldRect = oldTab.getBoundingClientRect();
-  const newRect = newTab.getBoundingClientRect();
-  if (orientation === 'horizontal') {
-    if (newRect.left < oldRect.left) {
-      return 'left';
-    }
-    if (newRect.left > oldRect.left) {
-      return 'right';
-    }
-  } else {
-    if (newRect.top < oldRect.top) {
-      return 'up';
-    }
-    if (newRect.top > oldRect.top) {
-      return 'down';
-    }
+  const oldPosition = oldTab.getBoundingClientRect()[positionProp];
+  const newPosition = newTab.getBoundingClientRect()[positionProp];
+  if (newPosition < oldPosition) {
+    return backward;
+  }
+  if (newPosition > oldPosition) {
+    return forward;
   }
   return 'none';
 }

package/tabs/root/TabsRootContext.d.mts

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import type { CompositeMetadata } from "../../internals/composite/list/CompositeList.mjs";
 import type { TabsTab } from "../tab/TabsTab.mjs";
 import type { TabsRoot } from "./TabsRoot.mjs";
 export interface TabsRootContext {
@@ -17,7 +17,7 @@ export interface TabsRootContext {
   /**
    * Gets the element of the Tab with the given value.
    */
-  getTabElementBySelectedValue: (selectedValue: TabsTab.Value | undefined) => HTMLElement | null;
+  getTabElementBySelectedValue: (selectedValue: TabsTab.Value) => HTMLElement | null;
   /**
    * Gets the `id` attribute of the Tab that corresponds to the given TabPanel value.
    */
@@ -26,18 +26,11 @@ export interface TabsRootContext {
    * Gets the `id` attribute of the TabPanel that corresponds to the given Tab value.
    */
   getTabPanelIdByValue: (tabValue: TabsTab.Value) => string | undefined;
-  registerMountedTabPanel: (panelValue: TabsTab.Value | number, panelId: string) => void;
-  setTabMap: (map: Map<Node, (TabsTab.Metadata & {
-    index?: number | null | undefined;
-  }) | null>) => void;
-  unregisterMountedTabPanel: (panelValue: TabsTab.Value | number, panelId: string) => void;
+  registerMountedTabPanel: (panelValue: TabsTab.Value, panelId: string) => () => void;
+  setTabMap: (map: Map<Node, CompositeMetadata<TabsTab.Metadata>>) => void;
   /**
    * The position of the active tab relative to the previously active tab.
    */
   tabActivationDirection: TabsTab.ActivationDirection;
 }
-/**
- * @internal
- */
-export declare const TabsRootContext: React.Context<TabsRootContext | undefined>;
 export declare function useTabsRootContext(): TabsRootContext;

package/tabs/root/TabsRootContext.d.ts

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import type { CompositeMetadata } from "../../internals/composite/list/CompositeList.js";
 import type { TabsTab } from "../tab/TabsTab.js";
 import type { TabsRoot } from "./TabsRoot.js";
 export interface TabsRootContext {
@@ -17,7 +17,7 @@ export interface TabsRootContext {
   /**
    * Gets the element of the Tab with the given value.
    */
-  getTabElementBySelectedValue: (selectedValue: TabsTab.Value | undefined) => HTMLElement | null;
+  getTabElementBySelectedValue: (selectedValue: TabsTab.Value) => HTMLElement | null;
   /**
    * Gets the `id` attribute of the Tab that corresponds to the given TabPanel value.
    */
@@ -26,18 +26,11 @@ export interface TabsRootContext {
    * Gets the `id` attribute of the TabPanel that corresponds to the given Tab value.
    */
   getTabPanelIdByValue: (tabValue: TabsTab.Value) => string | undefined;
-  registerMountedTabPanel: (panelValue: TabsTab.Value | number, panelId: string) => void;
-  setTabMap: (map: Map<Node, (TabsTab.Metadata & {
-    index?: number | null | undefined;
-  }) | null>) => void;
-  unregisterMountedTabPanel: (panelValue: TabsTab.Value | number, panelId: string) => void;
+  registerMountedTabPanel: (panelValue: TabsTab.Value, panelId: string) => () => void;
+  setTabMap: (map: Map<Node, CompositeMetadata<TabsTab.Metadata>>) => void;
   /**
    * The position of the active tab relative to the previously active tab.
    */
   tabActivationDirection: TabsTab.ActivationDirection;
 }
-/**
- * @internal
- */
-export declare const TabsRootContext: React.Context<TabsRootContext | undefined>;
 export declare function useTabsRootContext(): TabsRootContext;

package/tabs/root/stateAttributesMapping.js

@@ -4,9 +4,8 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.tabsStateAttributesMapping = void 0;
-var _TabsRootDataAttributes = require("./TabsRootDataAttributes");
 const tabsStateAttributesMapping = exports.tabsStateAttributesMapping = {
   tabActivationDirection: dir => ({
-    [_TabsRootDataAttributes.TabsRootDataAttributes.activationDirection]: dir
+    'data-activation-direction': dir
   })
 };

package/tabs/root/stateAttributesMapping.mjs

@@ -1,6 +1,5 @@
-import { TabsRootDataAttributes } from "./TabsRootDataAttributes.mjs";
 export const tabsStateAttributesMapping = {
   tabActivationDirection: dir => ({
-    [TabsRootDataAttributes.activationDirection]: dir
+    'data-activation-direction': dir
   })
 };