@base-ui/react 1.1.0 → 1.2.0

package/esm/tabs/panel/TabsPanel.js

@@ -1,13 +1,21 @@
 'use client';
 
 import * as React from 'react';
+import { inertValue } from '@base-ui/utils/inertValue';
 import { useIsoLayoutEffect } from '@base-ui/utils/useIsoLayoutEffect';
 import { useBaseUiId } from "../../utils/useBaseUiId.js";
+import { transitionStatusMapping } from "../../utils/stateAttributesMapping.js";
+import { useOpenChangeComplete } from "../../utils/useOpenChangeComplete.js";
+import { useTransitionStatus } from "../../utils/useTransitionStatus.js";
 import { useRenderElement } from "../../utils/useRenderElement.js";
 import { useCompositeListItem } from "../../composite/list/useCompositeListItem.js";
 import { tabsStateAttributesMapping } from "../root/stateAttributesMapping.js";
 import { useTabsRootContext } from "../root/TabsRootContext.js";
 import { TabsPanelDataAttributes } from "./TabsPanelDataAttributes.js";
+const stateAttributesMapping = {
+  ...tabsStateAttributesMapping,
+  ...transitionStatusMapping
+};
 
 /**
  * A panel displayed when the corresponding tab is active.
@@ -42,25 +50,43 @@ export const TabsPanel = /*#__PURE__*/React.forwardRef(function TabPanel(compone
   } = useCompositeListItem({
     metadata
   });
-  const hidden = value !== selectedValue;
+  const open = value === selectedValue;
+  const {
+    mounted,
+    transitionStatus,
+    setMounted
+  } = useTransitionStatus(open);
+  const hidden = !mounted;
   const correspondingTabId = getTabIdByPanelValue(value);
-  const state = React.useMemo(() => ({
+  const state = {
     hidden,
     orientation,
-    tabActivationDirection
-  }), [hidden, orientation, tabActivationDirection]);
+    tabActivationDirection,
+    transitionStatus
+  };
+  const panelRef = React.useRef(null);
   const element = useRenderElement('div', componentProps, {
     state,
-    ref: [forwardedRef, listItemRef],
+    ref: [forwardedRef, listItemRef, panelRef],
     props: [{
       'aria-labelledby': correspondingTabId,
       hidden,
-      id: id ?? undefined,
+      id,
       role: 'tabpanel',
-      tabIndex: hidden ? -1 : 0,
+      tabIndex: open ? 0 : -1,
+      inert: inertValue(!open),
       [TabsPanelDataAttributes.index]: index
     }, elementProps],
-    stateAttributesMapping: tabsStateAttributesMapping
+    stateAttributesMapping
+  });
+  useOpenChangeComplete({
+    open,
+    ref: panelRef,
+    onComplete() {
+      if (!open) {
+        setMounted(false);
+      }
+    }
   });
   useIsoLayoutEffect(() => {
     if (hidden && !keepMounted) {
@@ -74,7 +100,7 @@ export const TabsPanel = /*#__PURE__*/React.forwardRef(function TabPanel(compone
       unregisterMountedTabPanel(value, id);
     };
   }, [hidden, keepMounted, value, id, registerMountedTabPanel, unregisterMountedTabPanel]);
-  const shouldRender = !hidden || keepMounted;
+  const shouldRender = keepMounted || mounted;
   if (!shouldRender) {
     return null;
   }

package/esm/tabs/root/TabsRoot.d.ts

@@ -20,22 +20,22 @@ export interface TabsRootProps extends BaseUIComponentProps<'div', TabsRoot.Stat
    * The value of the currently active `Tab`. Use when the component is controlled.
    * When the value is `null`, no Tab will be active.
    */
-  value?: TabsTab.Value;
+  value?: TabsTab.Value | undefined;
   /**
    * The default value. Use when the component is not controlled.
    * When the value is `null`, no Tab will be active.
    * @default 0
    */
-  defaultValue?: TabsTab.Value;
+  defaultValue?: TabsTab.Value | undefined;
   /**
    * The component orientation (layout flow direction).
    * @default 'horizontal'
    */
-  orientation?: TabsRoot.Orientation;
+  orientation?: TabsRoot.Orientation | undefined;
   /**
    * Callback invoked when new value is being set.
    */
-  onValueChange?: (value: TabsTab.Value, eventDetails: TabsRoot.ChangeEventDetails) => void;
+  onValueChange?: ((value: TabsTab.Value, eventDetails: TabsRoot.ChangeEventDetails) => void) | undefined;
 }
 export type TabsRootChangeEventReason = typeof REASONS.none;
 export type TabsRootChangeEventDetails = BaseUIChangeEventDetails<TabsRoot.ChangeEventReason, {

package/esm/tabs/root/TabsRootContext.d.ts

@@ -30,7 +30,7 @@ export interface TabsRootContext {
   getTabPanelIdByValue: (tabValue: TabsTab.Value) => string | undefined;
   registerMountedTabPanel: (panelValue: TabsTab.Value | number, panelId: string) => void;
   setTabMap: (map: Map<Node, (TabsTab.Metadata & {
-    index?: number | null;
+    index?: (number | null) | undefined;
   }) | null>) => void;
   unregisterMountedTabPanel: (panelValue: TabsTab.Value | number, panelId: string) => void;
   /**

package/esm/tabs/tab/TabsTab.d.ts

@@ -47,7 +47,7 @@ export interface TabsTabProps extends NativeButtonProps, BaseUIComponentProps<'b
    * during pre-rendering which Tabs are disabled.
    * To work around it, ensure that `defaultValue` or `value` on `<Tabs.Root>` is set to an enabled Tab's value.
    */
-  disabled?: boolean;
+  disabled?: boolean | undefined;
 }
 export declare namespace TabsTab {
   type Value = TabsTabValue;

package/esm/tabs/tab/TabsTab.js

@@ -145,11 +145,11 @@ export const TabsTab = /*#__PURE__*/React.forwardRef(function TabsTab(componentP
       });
     }
   }
-  const state = React.useMemo(() => ({
+  const state = {
     disabled,
     active,
     orientation
-  }), [disabled, active, orientation]);
+  };
   const element = useRenderElement('button', componentProps, {
     state,
     ref: [forwardedRef, buttonRef, compositeRef],

package/esm/toast/action/ToastAction.js

@@ -31,9 +31,9 @@ export const ToastAction = /*#__PURE__*/React.forwardRef(function ToastAction(co
     disabled,
     native: nativeButton
   });
-  const state = React.useMemo(() => ({
+  const state = {
     type: toast.type
-  }), [toast.type]);
+  };
   const element = useRenderElement('button', componentProps, {
     ref: [forwardedRef, buttonRef],
     state,

package/esm/toast/arrow/ToastArrow.js

@@ -23,11 +23,11 @@ export const ToastArrow = /*#__PURE__*/React.forwardRef(function ToastArrow(comp
     arrowUncentered,
     arrowStyles
   } = useToastPositionerContext();
-  const state = React.useMemo(() => ({
+  const state = {
     side,
     align,
     uncentered: arrowUncentered
-  }), [side, align, arrowUncentered]);
+  };
   const element = useRenderElement('div', componentProps, {
     state,
     ref: [forwardedRef, arrowRef],

package/esm/toast/arrow/ToastArrowDataAttributes.js

@@ -1,14 +1,15 @@
-export let ToastArrowDataAttributes = /*#__PURE__*/function (ToastArrowDataAttributes) {
+import { CommonPopupDataAttributes } from "../../utils/popupStateMapping.js";
+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["side"] = "data-side";
+  ToastArrowDataAttributes[ToastArrowDataAttributes["side"] = CommonPopupDataAttributes.side] = "side";
   /**
    * Indicates how the toast is aligned relative to specified side.
    * @type {'start' | 'center' | 'end'}
    */
-  ToastArrowDataAttributes["align"] = "data-align";
+  ToastArrowDataAttributes[ToastArrowDataAttributes["align"] = CommonPopupDataAttributes.align] = "align";
   /**
    * Present when the toast arrow is uncentered.
    */

package/esm/toast/close/ToastClose.js

@@ -2,7 +2,7 @@
 
 import * as React from 'react';
 import { useToastRootContext } from "../root/ToastRootContext.js";
-import { useToastContext } from "../provider/ToastProviderContext.js";
+import { useToastProviderContext } from "../provider/ToastProviderContext.js";
 import { useButton } from "../../use-button/useButton.js";
 import { useRenderElement } from "../../utils/useRenderElement.js";
 
@@ -20,13 +20,11 @@ export const ToastClose = /*#__PURE__*/React.forwardRef(function ToastClose(comp
     nativeButton = true,
     ...elementProps
   } = componentProps;
-  const {
-    close,
-    expanded
-  } = useToastContext();
+  const store = useToastProviderContext();
   const {
     toast
   } = useToastRootContext();
+  const expanded = store.useState('expanded');
   const [hasFocus, setHasFocus] = React.useState(false);
   const {
     getButtonProps,
@@ -35,16 +33,16 @@ export const ToastClose = /*#__PURE__*/React.forwardRef(function ToastClose(comp
     disabled,
     native: nativeButton
   });
-  const state = React.useMemo(() => ({
+  const state = {
     type: toast.type
-  }), [toast.type]);
+  };
   const element = useRenderElement('button', componentProps, {
     ref: [forwardedRef, buttonRef],
     state,
     props: [{
       'aria-hidden': !expanded && !hasFocus,
       onClick() {
-        close(toast.id);
+        store.closeToast(toast.id);
       },
       onFocus() {
         setHasFocus(true);

package/esm/toast/content/ToastContent.js

@@ -46,10 +46,10 @@ export const ToastContent = /*#__PURE__*/React.forwardRef(function ToastContent(
     };
   }, [recalculateHeight]);
   const behind = visibleIndex > 0;
-  const state = React.useMemo(() => ({
+  const state = {
     expanded,
     behind
-  }), [expanded, behind]);
+  };
   const element = useRenderElement('div', componentProps, {
     ref: [forwardedRef, contentRef],
     state,

package/esm/toast/createToastManager.d.ts

@@ -2,13 +2,13 @@ import type { ToastManagerAddOptions, ToastManagerPromiseOptions, ToastManagerUp
 /**
  * Creates a new toast manager.
  */
-export declare function createToastManager(): ToastManager;
-export interface ToastManager {
+export declare function createToastManager<Data extends object = any>(): ToastManager<Data>;
+export interface ToastManager<Data extends object = any> {
   ' subscribe': (listener: (data: ToastManagerEvent) => void) => () => void;
-  add: <Data extends object>(options: ToastManagerAddOptions<Data>) => string;
+  add: <T extends Data = Data>(options: ToastManagerAddOptions<T>) => string;
   close: (id: string) => void;
-  update: <Data extends object>(id: string, updates: ToastManagerUpdateOptions<Data>) => void;
-  promise: <Value, Data extends object>(promiseValue: Promise<Value>, options: ToastManagerPromiseOptions<Value, Data>) => Promise<Value>;
+  update: <T extends Data = Data>(id: string, updates: ToastManagerUpdateOptions<T>) => void;
+  promise: <Value, T extends Data = Data>(promiseValue: Promise<Value>, options: ToastManagerPromiseOptions<Value, T>) => Promise<Value>;
 }
 export interface ToastManagerEvent {
   action: 'add' | 'close' | 'update' | 'promise';

package/esm/toast/createToastManager.js

@@ -3,7 +3,7 @@ import { generateId } from '@base-ui/utils/generateId';
  * Creates a new toast manager.
  */
 export function createToastManager() {
-  const listeners = [];
+  const listeners = new Set();
   function emit(data) {
     listeners.forEach(listener => listener(data));
   }
@@ -11,12 +11,9 @@ export function createToastManager() {
     // This should be private aside from ToastProvider needing to access it.
     // https://x.com/drosenwasser/status/1816947740032872664
     ' subscribe': function subscribe(listener) {
-      listeners.push(listener);
+      listeners.add(listener);
       return () => {
-        const index = listeners.indexOf(listener);
-        if (index !== -1) {
-          listeners.splice(index, 1);
-        }
+        listeners.delete(listener);
       };
     },
     add(options) {

package/esm/toast/description/ToastDescription.js

@@ -22,14 +22,12 @@ export const ToastDescription = /*#__PURE__*/React.forwardRef(function ToastDesc
     ...elementProps
   } = componentProps;
   const {
-    toast
+    toast,
+    setDescriptionId
   } = useToastRootContext();
   const children = childrenProp ?? toast.description;
   const shouldRender = Boolean(children);
   const id = useId(idProp);
-  const {
-    setDescriptionId
-  } = useToastRootContext();
   useIsoLayoutEffect(() => {
     if (!shouldRender) {
       return undefined;
@@ -39,9 +37,9 @@ export const ToastDescription = /*#__PURE__*/React.forwardRef(function ToastDesc
       setDescriptionId(undefined);
     };
   }, [shouldRender, id, setDescriptionId]);
-  const state = React.useMemo(() => ({
+  const state = {
     type: toast.type
-  }), [toast.type]);
+  };
   const element = useRenderElement('p', componentProps, {
     ref: forwardedRef,
     state,

package/esm/toast/positioner/ToastPositioner.d.ts

@@ -18,13 +18,13 @@ export interface ToastPositionerProps extends BaseUIComponentProps<'div', ToastP
   /**
    * An element to position the toast against.
    */
-  anchor?: Element | null;
+  anchor?: (Element | null) | undefined;
   /**
    * Which side of the anchor element to align the toast against.
    * May automatically change to avoid collisions.
    * @default 'top'
    */
-  side?: Side;
+  side?: Side | undefined;
   /**
    * The toast object associated with the positioner.
    */

package/esm/toast/positioner/ToastPositioner.js

@@ -6,11 +6,12 @@ import { useAnchorPositioning } from "../../utils/useAnchorPositioning.js";
 import { popupStateMapping } from "../../utils/popupStateMapping.js";
 import { useRenderElement } from "../../utils/useRenderElement.js";
 import { EMPTY_OBJECT, POPUP_COLLISION_AVOIDANCE } from "../../utils/constants.js";
+import { getDisabledMountTransitionStyles } from "../../utils/getDisabledMountTransitionStyles.js";
 import { ToastPositionerContext } from "./ToastPositionerContext.js";
 import { useFloatingRootContext } from "../../floating-ui-react/index.js";
 import { NOOP } from "../../utils/noop.js";
 import { ToastRootCssVars } from "../root/ToastRootCssVars.js";
-import { useToastContext } from "../provider/ToastProviderContext.js";
+import { useToastProviderContext } from "../provider/ToastProviderContext.js";
 
 /**
  * Positions the toast against the anchor.
@@ -24,9 +25,7 @@ export const ToastPositioner = /*#__PURE__*/React.forwardRef(function ToastPosit
     toast,
     ...props
   } = componentProps;
-  const {
-    toasts
-  } = useToastContext();
+  const store = useToastProviderContext();
   const positionerProps = toast.positionerProps ?? EMPTY_OBJECT;
   const {
     render,
@@ -46,8 +45,8 @@ export const ToastPositioner = /*#__PURE__*/React.forwardRef(function ToastPosit
     ...elementProps
   } = props;
   const [positionerElement, setPositionerElement] = React.useState(null);
-  const domIndex = React.useMemo(() => toasts.indexOf(toast), [toast, toasts]);
-  const visibleIndex = React.useMemo(() => toasts.filter(t => t.transitionStatus !== 'ending').indexOf(toast), [toast, toasts]);
+  const domIndex = store.useState('toastIndex', toast.id);
+  const visibleIndex = store.useState('toastVisibleIndex', toast.id);
   const anchor = isElement(anchorProp) ? anchorProp : null;
   const floatingRootContext = useFloatingRootContext({
     open: true,
@@ -98,7 +97,7 @@ export const ToastPositioner = /*#__PURE__*/React.forwardRef(function ToastPosit
   }), [state, positioning.arrowRef, positioning.arrowStyles, positioning.arrowUncentered]);
   const element = useRenderElement('div', componentProps, {
     state,
-    props: [defaultProps, elementProps],
+    props: [defaultProps, getDisabledMountTransitionStyles(toast.transitionStatus), elementProps],
     ref: [forwardedRef, setPositionerElement],
     stateAttributesMapping: popupStateMapping
   });

package/esm/toast/positioner/ToastPositionerDataAttributes.js

@@ -8,11 +8,11 @@ export let ToastPositionerDataAttributes = function (ToastPositionerDataAttribut
    * Indicates which side the toast is positioned relative to the trigger.
    * @type {'top' | 'bottom' | 'left' | 'right' | 'inline-end' | 'inline-start'}
    */
-  ToastPositionerDataAttributes["side"] = "data-side";
+  ToastPositionerDataAttributes[ToastPositionerDataAttributes["side"] = CommonPopupDataAttributes.side] = "side";
   /**
    * Indicates how the toast is aligned relative to specified side.
    * @type {'start' | 'center' | 'end'}
    */
-  ToastPositionerDataAttributes["align"] = "data-align";
+  ToastPositionerDataAttributes[ToastPositionerDataAttributes["align"] = CommonPopupDataAttributes.align] = "align";
   return ToastPositionerDataAttributes;
 }({});

package/esm/toast/provider/ToastProvider.d.ts

@@ -13,17 +13,17 @@ export interface ToastProviderProps {
    * A value of `0` will prevent the toast from being dismissed automatically.
    * @default 5000
    */
-  timeout?: number;
+  timeout?: number | undefined;
   /**
    * The maximum number of toasts that can be displayed at once.
    * When the limit is reached, the oldest toast will be removed to make room for the new one.
    * @default 3
    */
-  limit?: number;
+  limit?: number | undefined;
   /**
    * A global manager for toasts to use outside of a React component.
    */
-  toastManager?: ToastManager;
+  toastManager?: ToastManager | undefined;
 }
 export declare namespace ToastProvider {
   type Props = ToastProviderProps;