@base-ui/react 1.6.0 → 1.8.0

package/tabs/tab/TabsTab.mjs

@@ -3,11 +3,13 @@
 import * as React from 'react';
 import { ownerDocument } from '@base-ui/utils/owner';
 import { useIsoLayoutEffect } from '@base-ui/utils/useIsoLayoutEffect';
+import { useStableCallback } from '@base-ui/utils/useStableCallback';
 import { useBaseUiId } from "../../internals/useBaseUiId.mjs";
 import { useRenderElement } from "../../internals/useRenderElement.mjs";
 import { useButton } from "../../internals/use-button/index.mjs";
 import { ACTIVE_COMPOSITE_ITEM } from "../../internals/composite/constants.mjs";
 import { useCompositeItem } from "../../internals/composite/item/useCompositeItem.mjs";
+import { useCompositeRootContext } from "../../internals/composite/root/CompositeRootContext.mjs";
 import { useTabsRootContext } from "../root/TabsRootContext.mjs";
 import { tabsStateAttributesMapping } from "../root/stateAttributesMapping.mjs";
 import { useTabsListContext } from "../list/TabsListContext.mjs";
@@ -35,17 +37,19 @@ export const TabsTab = /*#__PURE__*/React.forwardRef(function TabsTab(componentP
   const {
     value: activeTabValue,
     getTabPanelIdByValue,
+    onValueChange,
     orientation,
     tabActivationDirection
   } = useTabsRootContext();
   const {
     activateOnFocus,
-    highlightedTabIndex,
-    onTabActivation,
     registerTabResizeObserverElement,
-    setHighlightedTabIndex,
     tabsListElement
   } = useTabsListContext();
+  const {
+    highlightedIndex,
+    onHighlightedIndexChange
+  } = useCompositeRootContext();
   const id = useBaseUiId(idProp);
   const tabMetadata = React.useMemo(() => ({
     disabled,
@@ -63,14 +67,14 @@ export const TabsTab = /*#__PURE__*/React.forwardRef(function TabsTab(componentP
   });
   const active = value === activeTabValue;
   const isNavigatingRef = React.useRef(false);
-  const tabElementRef = React.useRef(null);
-  useIsoLayoutEffect(() => {
-    const tabElement = tabElementRef.current;
-    if (!tabElement) {
-      return undefined;
-    }
-    return registerTabResizeObserverElement(tabElement);
-  }, [registerTabResizeObserverElement]);
+  const unobserveTabElementRef = React.useRef(null);
+
+  // Registered from the ref callback rather than an effect so the observer
+  // follows the rendered element when the `render` prop swaps the host element.
+  const observeTabElement = useStableCallback(element => {
+    unobserveTabElementRef.current?.();
+    unobserveTabElementRef.current = element ? registerTabResizeObserverElement(element) : null;
+  });
 
   // Keep the highlighted item in sync with the currently active tab
   // when the value prop changes externally (controlled mode)
@@ -79,7 +83,7 @@ export const TabsTab = /*#__PURE__*/React.forwardRef(function TabsTab(componentP
       isNavigatingRef.current = false;
       return;
     }
-    if (!(active && index > -1 && highlightedTabIndex !== index)) {
+    if (!(active && index > -1 && highlightedIndex !== index)) {
       return;
     }
 
@@ -97,9 +101,9 @@ export const TabsTab = /*#__PURE__*/React.forwardRef(function TabsTab(componentP
     // Don't highlight disabled tabs to prevent them from interfering with keyboard navigation.
     // Keyboard focus (tabIndex) should remain on an enabled tab even when a disabled tab is selected.
     if (!disabled) {
-      setHighlightedTabIndex(index);
+      onHighlightedIndexChange(index);
     }
-  }, [active, index, highlightedTabIndex, setHighlightedTabIndex, disabled, tabsListElement]);
+  }, [active, index, highlightedIndex, onHighlightedIndexChange, disabled, tabsListElement]);
   const {
     getButtonProps,
     buttonRef
@@ -111,33 +115,28 @@ export const TabsTab = /*#__PURE__*/React.forwardRef(function TabsTab(componentP
   const tabPanelId = getTabPanelIdByValue(value);
   const isPressingRef = React.useRef(false);
   const isMainButtonRef = React.useRef(false);
+
+  // Both callers guard on `!active`, so the current value is never re-committed.
+  function activate(event) {
+    onValueChange(value, createChangeEventDetails(REASONS.none, event.nativeEvent, undefined, {
+      activationDirection: 'none'
+    }));
+  }
   function onClick(event) {
     if (active || disabled) {
       return;
     }
-    onTabActivation(value, createChangeEventDetails(REASONS.none, event.nativeEvent, undefined, {
-      activationDirection: 'none'
-    }));
+    activate(event);
   }
   function onFocus(event) {
-    if (active) {
-      return;
-    }
-
-    // Only highlight enabled tabs when focused (disabled tabs remain focusable via focusableWhenDisabled).
-    if (index > -1 && !disabled) {
-      setHighlightedTabIndex(index);
-    }
-    if (disabled) {
+    if (active || disabled) {
       return;
     }
     if (activateOnFocus && (!isPressingRef.current ||
     // keyboard or touch focus
-    isPressingRef.current && isMainButtonRef.current) // mouse focus
+    isMainButtonRef.current) // main mouse button focus
     ) {
-      onTabActivation(value, createChangeEventDetails(REASONS.none, event.nativeEvent, undefined, {
-        activationDirection: 'none'
-      }));
+      activate(event);
     }
   }
   function onPointerDown(event) {
@@ -145,17 +144,21 @@ export const TabsTab = /*#__PURE__*/React.forwardRef(function TabsTab(componentP
       return;
     }
     isPressingRef.current = true;
-    function handlePointerUp() {
+    // Secondary presses (context menu, middle click) may focus the tab, but
+    // must not activate it with `activateOnFocus`.
+    isMainButtonRef.current = event.button === 0;
+
+    // Registered for every button so a secondary press doesn't leave the tab
+    // stuck in the pressing state, which would suppress later focus activation.
+    const doc = ownerDocument(event.currentTarget);
+    function handlePointerEnd() {
       isPressingRef.current = false;
       isMainButtonRef.current = false;
+      doc.removeEventListener('pointerup', handlePointerEnd);
+      doc.removeEventListener('pointercancel', handlePointerEnd);
     }
-    if (!event.button || event.button === 0) {
-      isMainButtonRef.current = true;
-      const doc = ownerDocument(event.currentTarget);
-      doc.addEventListener('pointerup', handlePointerUp, {
-        once: true
-      });
-    }
+    doc.addEventListener('pointerup', handlePointerEnd);
+    doc.addEventListener('pointercancel', handlePointerEnd);
   }
   const state = {
     disabled,
@@ -165,7 +168,7 @@ export const TabsTab = /*#__PURE__*/React.forwardRef(function TabsTab(componentP
   };
   const element = useRenderElement('button', componentProps, {
     state,
-    ref: [forwardedRef, buttonRef, compositeRef, tabElementRef],
+    ref: [forwardedRef, buttonRef, compositeRef, observeTabElement],
     props: [compositeProps, {
       role: 'tab',
       'aria-controls': tabPanelId,

package/tabs/tab/TabsTabDataAttributes.d.mts

@@ -1,20 +1,18 @@
-export declare enum TabsTabDataAttributes {
-  /**
-   * Indicates the direction of the activation (based on the previous active tab).
-   * @type {'left' | 'right' | 'up' | 'down' | 'none'}
-   */
-  activationDirection = "data-activation-direction",
-  /**
-   * Indicates the orientation of the tabs.
-   * @type {'horizontal' | 'vertical'}
-   */
-  orientation = "data-orientation",
-  /**
-   * Present when the tab is disabled.
-   */
-  disabled = "data-disabled",
-  /**
-   * Present when the tab is active.
-   */
-  active = "data-active",
-}
+/**
+ * Indicates the direction of the activation (based on the previous active tab).
+ * @type {'left' | 'right' | 'up' | 'down' | 'none'}
+ */
+export declare const activationDirection = "data-activation-direction";
+/**
+ * Indicates the orientation of the tabs.
+ * @type {'horizontal' | 'vertical'}
+ */
+export declare const orientation = "data-orientation";
+/**
+ * Present when the tab is disabled.
+ */
+export declare const disabled = "data-disabled";
+/**
+ * Present when the tab is active.
+ */
+export declare const active = "data-active";

package/tabs/tab/TabsTabDataAttributes.d.ts

@@ -1,20 +1,18 @@
-export declare enum TabsTabDataAttributes {
-  /**
-   * Indicates the direction of the activation (based on the previous active tab).
-   * @type {'left' | 'right' | 'up' | 'down' | 'none'}
-   */
-  activationDirection = "data-activation-direction",
-  /**
-   * Indicates the orientation of the tabs.
-   * @type {'horizontal' | 'vertical'}
-   */
-  orientation = "data-orientation",
-  /**
-   * Present when the tab is disabled.
-   */
-  disabled = "data-disabled",
-  /**
-   * Present when the tab is active.
-   */
-  active = "data-active",
-}
+/**
+ * Indicates the direction of the activation (based on the previous active tab).
+ * @type {'left' | 'right' | 'up' | 'down' | 'none'}
+ */
+export declare const activationDirection = "data-activation-direction";
+/**
+ * Indicates the orientation of the tabs.
+ * @type {'horizontal' | 'vertical'}
+ */
+export declare const orientation = "data-orientation";
+/**
+ * Present when the tab is disabled.
+ */
+export declare const disabled = "data-disabled";
+/**
+ * Present when the tab is active.
+ */
+export declare const active = "data-active";

package/tabs/tab/TabsTabDataAttributes.js

@@ -3,25 +3,22 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.TabsTabDataAttributes = void 0;
-let TabsTabDataAttributes = exports.TabsTabDataAttributes = /*#__PURE__*/function (TabsTabDataAttributes) {
-  /**
-   * Indicates the direction of the activation (based on the previous active tab).
-   * @type {'left' | 'right' | 'up' | 'down' | 'none'}
-   */
-  TabsTabDataAttributes["activationDirection"] = "data-activation-direction";
-  /**
-   * Indicates the orientation of the tabs.
-   * @type {'horizontal' | 'vertical'}
-   */
-  TabsTabDataAttributes["orientation"] = "data-orientation";
-  /**
-   * Present when the tab is disabled.
-   */
-  TabsTabDataAttributes["disabled"] = "data-disabled";
-  /**
-   * Present when the tab is active.
-   */
-  TabsTabDataAttributes["active"] = "data-active";
-  return TabsTabDataAttributes;
-}({});
+exports.orientation = exports.disabled = exports.active = exports.activationDirection = void 0;
+/**
+ * Indicates the direction of the activation (based on the previous active tab).
+ * @type {'left' | 'right' | 'up' | 'down' | 'none'}
+ */
+const activationDirection = exports.activationDirection = 'data-activation-direction';
+/**
+ * Indicates the orientation of the tabs.
+ * @type {'horizontal' | 'vertical'}
+ */
+const orientation = exports.orientation = 'data-orientation';
+/**
+ * Present when the tab is disabled.
+ */
+const disabled = exports.disabled = 'data-disabled';
+/**
+ * Present when the tab is active.
+ */
+const active = exports.active = 'data-active';

package/tabs/tab/TabsTabDataAttributes.mjs

@@ -1,21 +1,18 @@
-export let TabsTabDataAttributes = /*#__PURE__*/function (TabsTabDataAttributes) {
-  /**
-   * Indicates the direction of the activation (based on the previous active tab).
-   * @type {'left' | 'right' | 'up' | 'down' | 'none'}
-   */
-  TabsTabDataAttributes["activationDirection"] = "data-activation-direction";
-  /**
-   * Indicates the orientation of the tabs.
-   * @type {'horizontal' | 'vertical'}
-   */
-  TabsTabDataAttributes["orientation"] = "data-orientation";
-  /**
-   * Present when the tab is disabled.
-   */
-  TabsTabDataAttributes["disabled"] = "data-disabled";
-  /**
-   * Present when the tab is active.
-   */
-  TabsTabDataAttributes["active"] = "data-active";
-  return TabsTabDataAttributes;
-}({});
+/**
+ * Indicates the direction of the activation (based on the previous active tab).
+ * @type {'left' | 'right' | 'up' | 'down' | 'none'}
+ */
+export const activationDirection = 'data-activation-direction';
+/**
+ * Indicates the orientation of the tabs.
+ * @type {'horizontal' | 'vertical'}
+ */
+export const orientation = 'data-orientation';
+/**
+ * Present when the tab is disabled.
+ */
+export const disabled = 'data-disabled';
+/**
+ * Present when the tab is active.
+ */
+export const active = 'data-active';

package/toast/action/ToastAction.js

@@ -10,6 +10,7 @@ var React = _interopRequireWildcard(require("react"));
 var _ToastRootContext = require("../root/ToastRootContext");
 var _useButton = require("../../internals/use-button/useButton");
 var _useRenderElement = require("../../internals/useRenderElement");
+var _isRenderableNode = require("../utils/isRenderableNode");
 /**
  * Performs an action when clicked.
  * Renders a `<button>` element.
@@ -29,7 +30,6 @@ const ToastAction = exports.ToastAction = /*#__PURE__*/React.forwardRef(function
     toast
   } = (0, _ToastRootContext.useToastRootContext)();
   const computedChildren = toast.actionProps?.children ?? elementProps.children;
-  const shouldRender = Boolean(computedChildren);
   const {
     getButtonProps,
     buttonRef
@@ -47,9 +47,6 @@ const ToastAction = exports.ToastAction = /*#__PURE__*/React.forwardRef(function
       children: computedChildren
     }]
   });
-  if (!shouldRender) {
-    return null;
-  }
-  return element;
+  return (0, _isRenderableNode.hasRenderableChildren)(element) ? element : null;
 });
 if (process.env.NODE_ENV !== "production") ToastAction.displayName = "ToastAction";

package/toast/action/ToastAction.mjs

@@ -4,6 +4,7 @@ import * as React from 'react';
 import { useToastRootContext } from "../root/ToastRootContext.mjs";
 import { useButton } from "../../internals/use-button/useButton.mjs";
 import { useRenderElement } from "../../internals/useRenderElement.mjs";
+import { hasRenderableChildren } from "../utils/isRenderableNode.mjs";
 
 /**
  * Performs an action when clicked.
@@ -24,7 +25,6 @@ export const ToastAction = /*#__PURE__*/React.forwardRef(function ToastAction(co
     toast
   } = useToastRootContext();
   const computedChildren = toast.actionProps?.children ?? elementProps.children;
-  const shouldRender = Boolean(computedChildren);
   const {
     getButtonProps,
     buttonRef
@@ -42,9 +42,6 @@ export const ToastAction = /*#__PURE__*/React.forwardRef(function ToastAction(co
       children: computedChildren
     }]
   });
-  if (!shouldRender) {
-    return null;
-  }
-  return element;
+  return hasRenderableChildren(element) ? element : null;
 });
 if (process.env.NODE_ENV !== "production") ToastAction.displayName = "ToastAction";

package/toast/action/ToastActionDataAttributes.d.mts

@@ -1,7 +1,5 @@
-export declare enum ToastActionDataAttributes {
-  /**
-   * The type of the toast.
-   * @type {string}
-   */
-  type = "data-type",
-}
+/**
+ * The type of the toast.
+ * @type {string}
+ */
+export declare const type = "data-type";

package/toast/action/ToastActionDataAttributes.d.ts

@@ -1,7 +1,5 @@
-export declare enum ToastActionDataAttributes {
-  /**
-   * The type of the toast.
-   * @type {string}
-   */
-  type = "data-type",
-}
+/**
+ * The type of the toast.
+ * @type {string}
+ */
+export declare const type = "data-type";

package/toast/action/ToastActionDataAttributes.js

@@ -3,12 +3,9 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.ToastActionDataAttributes = void 0;
-let ToastActionDataAttributes = exports.ToastActionDataAttributes = /*#__PURE__*/function (ToastActionDataAttributes) {
-  /**
-   * The type of the toast.
-   * @type {string}
-   */
-  ToastActionDataAttributes["type"] = "data-type";
-  return ToastActionDataAttributes;
-}({});
+exports.type = void 0;
+/**
+ * The type of the toast.
+ * @type {string}
+ */
+const type = exports.type = 'data-type';

package/toast/action/ToastActionDataAttributes.mjs

@@ -1,8 +1,5 @@
-export let ToastActionDataAttributes = /*#__PURE__*/function (ToastActionDataAttributes) {
-  /**
-   * The type of the toast.
-   * @type {string}
-   */
-  ToastActionDataAttributes["type"] = "data-type";
-  return ToastActionDataAttributes;
-}({});
+/**
+ * The type of the toast.
+ * @type {string}
+ */
+export const type = 'data-type';

package/toast/arrow/ToastArrow.d.mts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import type { BaseUIComponentProps } from "../../internals/types.mjs";
-import type { Side, Align } from "../../utils/useAnchorPositioning.mjs";
+import type { Side, Align } from "../../internals/useAnchorPositioning.mjs";
 /**
  * Displays an element positioned against the toast anchor.
  * Renders a `<div>` element.

package/toast/arrow/ToastArrow.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import type { BaseUIComponentProps } from "../../internals/types.js";
-import type { Side, Align } from "../../utils/useAnchorPositioning.js";
+import type { Side, Align } from "../../internals/useAnchorPositioning.js";
 /**
  * Displays an element positioned against the toast anchor.
  * Renders a `<div>` element.

package/toast/arrow/ToastArrow.js

@@ -34,7 +34,7 @@ const ToastArrow = exports.ToastArrow = /*#__PURE__*/React.forwardRef(function T
     align,
     uncentered: arrowUncentered
   };
-  const element = (0, _useRenderElement.useRenderElement)('div', componentProps, {
+  return (0, _useRenderElement.useRenderElement)('div', componentProps, {
     state,
     ref: [forwardedRef, arrowRef],
     props: [{
@@ -42,6 +42,5 @@ const ToastArrow = exports.ToastArrow = /*#__PURE__*/React.forwardRef(function T
       'aria-hidden': true
     }, elementProps]
   });
-  return element;
 });
 if (process.env.NODE_ENV !== "production") ToastArrow.displayName = "ToastArrow";

package/toast/arrow/ToastArrow.mjs

@@ -29,7 +29,7 @@ export const ToastArrow = /*#__PURE__*/React.forwardRef(function ToastArrow(comp
     align,
     uncentered: arrowUncentered
   };
-  const element = useRenderElement('div', componentProps, {
+  return useRenderElement('div', componentProps, {
     state,
     ref: [forwardedRef, arrowRef],
     props: [{
@@ -37,6 +37,5 @@ export const ToastArrow = /*#__PURE__*/React.forwardRef(function ToastArrow(comp
       'aria-hidden': true
     }, elementProps]
   });
-  return element;
 });
 if (process.env.NODE_ENV !== "production") ToastArrow.displayName = "ToastArrow";

package/toast/arrow/ToastArrowDataAttributes.d.mts

@@ -1,16 +1,14 @@
-export declare enum ToastArrowDataAttributes {
-  /**
-   * Indicates which side the toast is positioned relative to the anchor.
-   * @type {'top' | 'bottom' | 'left' | 'right' | 'inline-end' | 'inline-start'}
-   */
-  side = "data-side",
-  /**
-   * Indicates how the toast is aligned relative to specified side.
-   * @type {'start' | 'center' | 'end'}
-   */
-  align = "data-align",
-  /**
-   * Present when the toast arrow is uncentered.
-   */
-  uncentered = "data-uncentered",
-}
+/**
+ * Indicates which side the toast is positioned relative to the anchor.
+ * @type {'top' | 'bottom' | 'left' | 'right' | 'inline-end' | 'inline-start'}
+ */
+export declare const side = "data-side";
+/**
+ * Indicates how the toast is aligned relative to specified side.
+ * @type {'start' | 'center' | 'end'}
+ */
+export declare const align = "data-align";
+/**
+ * Present when the toast arrow is uncentered.
+ */
+export declare const uncentered = "data-uncentered";

package/toast/arrow/ToastArrowDataAttributes.d.ts

@@ -1,16 +1,14 @@
-export declare enum ToastArrowDataAttributes {
-  /**
-   * Indicates which side the toast is positioned relative to the anchor.
-   * @type {'top' | 'bottom' | 'left' | 'right' | 'inline-end' | 'inline-start'}
-   */
-  side = "data-side",
-  /**
-   * Indicates how the toast is aligned relative to specified side.
-   * @type {'start' | 'center' | 'end'}
-   */
-  align = "data-align",
-  /**
-   * Present when the toast arrow is uncentered.
-   */
-  uncentered = "data-uncentered",
-}
+/**
+ * Indicates which side the toast is positioned relative to the anchor.
+ * @type {'top' | 'bottom' | 'left' | 'right' | 'inline-end' | 'inline-start'}
+ */
+export declare const side = "data-side";
+/**
+ * Indicates how the toast is aligned relative to specified side.
+ * @type {'start' | 'center' | 'end'}
+ */
+export declare const align = "data-align";
+/**
+ * Present when the toast arrow is uncentered.
+ */
+export declare const uncentered = "data-uncentered";

package/toast/arrow/ToastArrowDataAttributes.js

@@ -3,22 +3,19 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.ToastArrowDataAttributes = void 0;
+exports.uncentered = exports.side = exports.align = void 0;
 var _popupStateMapping = require("../../utils/popupStateMapping");
-let ToastArrowDataAttributes = exports.ToastArrowDataAttributes = function (ToastArrowDataAttributes) {
-  /**
-   * Indicates which side the toast is positioned relative to the anchor.
-   * @type {'top' | 'bottom' | 'left' | 'right' | 'inline-end' | 'inline-start'}
-   */
-  ToastArrowDataAttributes[ToastArrowDataAttributes["side"] = _popupStateMapping.CommonPopupDataAttributes.side] = "side";
-  /**
-   * Indicates how the toast is aligned relative to specified side.
-   * @type {'start' | 'center' | 'end'}
-   */
-  ToastArrowDataAttributes[ToastArrowDataAttributes["align"] = _popupStateMapping.CommonPopupDataAttributes.align] = "align";
-  /**
-   * Present when the toast arrow is uncentered.
-   */
-  ToastArrowDataAttributes["uncentered"] = "data-uncentered";
-  return ToastArrowDataAttributes;
-}({});
+/**
+ * Indicates which side the toast is positioned relative to the anchor.
+ * @type {'top' | 'bottom' | 'left' | 'right' | 'inline-end' | 'inline-start'}
+ */
+const side = exports.side = _popupStateMapping.CommonPopupDataAttributes.side;
+/**
+ * Indicates how the toast is aligned relative to specified side.
+ * @type {'start' | 'center' | 'end'}
+ */
+const align = exports.align = _popupStateMapping.CommonPopupDataAttributes.align;
+/**
+ * Present when the toast arrow is uncentered.
+ */
+const uncentered = exports.uncentered = 'data-uncentered';

package/toast/arrow/ToastArrowDataAttributes.mjs

@@ -1,18 +1,16 @@
 import { CommonPopupDataAttributes } from "../../utils/popupStateMapping.mjs";
-export let ToastArrowDataAttributes = function (ToastArrowDataAttributes) {
-  /**
-   * Indicates which side the toast is positioned relative to the anchor.
-   * @type {'top' | 'bottom' | 'left' | 'right' | 'inline-end' | 'inline-start'}
-   */
-  ToastArrowDataAttributes[ToastArrowDataAttributes["side"] = CommonPopupDataAttributes.side] = "side";
-  /**
-   * Indicates how the toast is aligned relative to specified side.
-   * @type {'start' | 'center' | 'end'}
-   */
-  ToastArrowDataAttributes[ToastArrowDataAttributes["align"] = CommonPopupDataAttributes.align] = "align";
-  /**
-   * Present when the toast arrow is uncentered.
-   */
-  ToastArrowDataAttributes["uncentered"] = "data-uncentered";
-  return ToastArrowDataAttributes;
-}({});
+
+/**
+ * Indicates which side the toast is positioned relative to the anchor.
+ * @type {'top' | 'bottom' | 'left' | 'right' | 'inline-end' | 'inline-start'}
+ */
+export const side = CommonPopupDataAttributes.side;
+/**
+ * Indicates how the toast is aligned relative to specified side.
+ * @type {'start' | 'center' | 'end'}
+ */
+export const align = CommonPopupDataAttributes.align;
+/**
+ * Present when the toast arrow is uncentered.
+ */
+export const uncentered = 'data-uncentered';