@base-ui/react 1.6.0 → 1.7.0

package/combobox/trigger/ComboboxTrigger.js

@@ -26,8 +26,7 @@ var _floatingUiReact = require("../../floating-ui-react");
 var _useLabelableId = require("../../internals/labelable-provider/useLabelableId");
 var _resolveAriaLabelledBy = require("../../utils/resolveAriaLabelledBy");
 var _utils2 = require("../root/utils");
-const BOUNDARY_OFFSET = 2;
-
+var _parts = require("../utils/parts");
 /**
  * A button that opens the popup.
  * Renders a `<button>` element.
@@ -56,20 +55,14 @@ const ComboboxTrigger = exports.ComboboxTrigger = /*#__PURE__*/React.forwardRef(
     labelId: fieldLabelId
   } = (0, _LabelableContext.useLabelableContext)();
   const store = (0, _ComboboxRootContext.useComboboxRootContext)();
-  const {
-    filteredItems
-  } = (0, _ComboboxRootContext.useComboboxDerivedItemsContext)();
   const selectionMode = (0, _store.useStore)(store, _store2.selectors.selectionMode);
   const comboboxDisabled = (0, _store.useStore)(store, _store2.selectors.disabled);
   const readOnly = (0, _store.useStore)(store, _store2.selectors.readOnly);
   const required = (0, _store.useStore)(store, _store2.selectors.required);
-  const mounted = (0, _store.useStore)(store, _store2.selectors.mounted);
-  const popupSideValue = (0, _store.useStore)(store, _store2.selectors.popupSide);
   const positionerElement = (0, _store.useStore)(store, _store2.selectors.positionerElement);
   const listElement = (0, _store.useStore)(store, _store2.selectors.listElement);
   const storedPopupId = (0, _store.useStore)(store, _store2.selectors.popupId);
   const triggerProps = (0, _store.useStore)(store, _store2.selectors.triggerProps);
-  const triggerElement = (0, _store.useStore)(store, _store2.selectors.triggerElement);
   const inputInsidePopup = (0, _store.useStore)(store, _store2.selectors.inputInsidePopup);
   const rootId = (0, _store.useStore)(store, _store2.selectors.id);
   const comboboxLabelId = (0, _store.useStore)(store, _store2.selectors.labelId);
@@ -82,8 +75,8 @@ const ComboboxTrigger = exports.ComboboxTrigger = /*#__PURE__*/React.forwardRef(
   const inputValue = (0, _ComboboxRootContext.useComboboxInputValueContext)();
   const focusTimeout = (0, _useTimeout.useTimeout)();
   const disabled = fieldDisabled || comboboxDisabled || disabledProp;
-  const listEmpty = filteredItems.length === 0;
-  const popupSide = mounted && positionerElement ? popupSideValue : null;
+  const listEmpty = (0, _parts.useListEmpty)();
+  const popupSide = (0, _parts.usePopupSide)(store);
   (0, _useLabelableId.useLabelableId)({
     id: inputInsidePopup ? idProp : undefined
   });
@@ -101,18 +94,6 @@ const ComboboxTrigger = exports.ComboboxTrigger = /*#__PURE__*/React.forwardRef(
   function trackPointerType(event) {
     currentPointerTypeRef.current = event.pointerType;
   }
-  const domReference = floatingRootContext.useState('domReferenceElement');
-
-  // Update the floating root context to use the trigger element when it differs from the current reference.
-  // This ensures useClick and useTypeahead attach handlers to the correct element.
-  React.useEffect(() => {
-    if (!inputInsidePopup) {
-      return;
-    }
-    if (triggerElement && triggerElement !== domReference) {
-      floatingRootContext.set('domReferenceElement', triggerElement);
-    }
-  }, [triggerElement, domReference, floatingRootContext, inputInsidePopup]);
   const {
     reference: triggerTypeaheadProps
   } = (0, _floatingUiReact.useTypeahead)(floatingRootContext, {
@@ -123,7 +104,7 @@ const ComboboxTrigger = exports.ComboboxTrigger = /*#__PURE__*/React.forwardRef(
     onMatch(index) {
       const nextSelectedValue = store.state.valuesRef.current[index];
       if (nextSelectedValue !== undefined) {
-        store.state.setSelectedValue(nextSelectedValue, (0, _createBaseUIEventDetails.createChangeEventDetails)('none'));
+        store.state.setSelectedValue(nextSelectedValue, (0, _createBaseUIEventDetails.createChangeEventDetails)(_reasons.REASONS.none));
       }
     }
   });
@@ -158,7 +139,7 @@ const ComboboxTrigger = exports.ComboboxTrigger = /*#__PURE__*/React.forwardRef(
       id,
       tabIndex: inputInsidePopup ? 0 : -1,
       role: inputInsidePopup ? 'combobox' : undefined,
-      'aria-expanded': open ? 'true' : 'false',
+      'aria-expanded': open,
       'aria-haspopup': inputInsidePopup ? 'dialog' : 'listbox',
       'aria-controls': ariaControls,
       'aria-required': inputInsidePopup ? required || undefined : undefined,
@@ -205,22 +186,20 @@ const ComboboxTrigger = exports.ComboboxTrigger = /*#__PURE__*/React.forwardRef(
         }
         const doc = (0, _owner.ownerDocument)(event.currentTarget);
         function handleMouseUp(mouseEvent) {
-          if (!triggerElement) {
+          const currentTriggerElement = store.state.triggerElement;
+          if (!currentTriggerElement) {
             return;
           }
           const mouseUpTarget = (0, _utils.getTarget)(mouseEvent);
           const positioner = store.state.positionerElement;
           const list = store.state.listElement;
-          if ((0, _utils.contains)(triggerElement, mouseUpTarget) || (0, _utils.contains)(positioner, mouseUpTarget) || (0, _utils.contains)(list, mouseUpTarget) || mouseUpTarget === triggerElement) {
+          if ((0, _utils.contains)(currentTriggerElement, mouseUpTarget) || (0, _utils.contains)(positioner, mouseUpTarget) || (0, _utils.contains)(list, mouseUpTarget)) {
             return;
           }
-          const bounds = (0, _getPseudoElementBounds.getPseudoElementBounds)(triggerElement);
-          const withinHorizontal = mouseEvent.clientX >= bounds.left - BOUNDARY_OFFSET && mouseEvent.clientX <= bounds.right + BOUNDARY_OFFSET;
-          const withinVertical = mouseEvent.clientY >= bounds.top - BOUNDARY_OFFSET && mouseEvent.clientY <= bounds.bottom + BOUNDARY_OFFSET;
-          if (withinHorizontal && withinVertical) {
+          if ((0, _getPseudoElementBounds.isMouseWithinBounds)(mouseEvent, currentTriggerElement)) {
             return;
           }
-          store.state.setOpen(false, (0, _createBaseUIEventDetails.createChangeEventDetails)('cancel-open', mouseEvent));
+          store.state.setOpen(false, (0, _createBaseUIEventDetails.createChangeEventDetails)(_reasons.REASONS.cancelOpen, mouseEvent));
         }
         if (inputInsidePopup) {
           doc.addEventListener('mouseup', handleMouseUp, {
@@ -229,7 +208,7 @@ const ComboboxTrigger = exports.ComboboxTrigger = /*#__PURE__*/React.forwardRef(
         }
       },
       onKeyDown(event) {
-        if (disabled || readOnly) {
+        if (readOnly) {
           return;
         }
         if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {
@@ -238,7 +217,7 @@ const ComboboxTrigger = exports.ComboboxTrigger = /*#__PURE__*/React.forwardRef(
           store.state.inputRef.current?.focus();
         }
       }
-    }, validation ? validation.getValidationProps(disabled, elementProps) : elementProps, getButtonProps],
+    }, validation.getValidationProps(disabled, elementProps), getButtonProps],
     stateAttributesMapping: _stateAttributesMapping.triggerStateAttributesMapping
   });
   return element;

package/combobox/trigger/ComboboxTrigger.mjs

@@ -7,20 +7,20 @@ import { useTimeout } from '@base-ui/utils/useTimeout';
 import { ownerDocument } from '@base-ui/utils/owner';
 import { useRenderElement } from "../../internals/useRenderElement.mjs";
 import { useButton } from "../../internals/use-button/index.mjs";
-import { useComboboxFloatingContext, useComboboxDerivedItemsContext, useComboboxInputValueContext, useComboboxRootContext } from "../root/ComboboxRootContext.mjs";
+import { useComboboxFloatingContext, useComboboxInputValueContext, useComboboxRootContext } from "../root/ComboboxRootContext.mjs";
 import { triggerStateAttributesMapping } from "../utils/stateAttributesMapping.mjs";
 import { selectors } from "../store.mjs";
 import { useFieldRootContext } from "../../internals/field-root-context/FieldRootContext.mjs";
 import { useLabelableContext } from "../../internals/labelable-provider/LabelableContext.mjs";
 import { stopEvent, contains, getTarget } from "../../floating-ui-react/utils.mjs";
-import { getPseudoElementBounds } from "../../utils/getPseudoElementBounds.mjs";
+import { isMouseWithinBounds } from "../../utils/getPseudoElementBounds.mjs";
 import { createChangeEventDetails } from "../../internals/createBaseUIEventDetails.mjs";
 import { REASONS } from "../../internals/reasons.mjs";
 import { useClick, useTypeahead } from "../../floating-ui-react/index.mjs";
 import { useLabelableId } from "../../internals/labelable-provider/useLabelableId.mjs";
 import { resolveAriaLabelledBy } from "../../utils/resolveAriaLabelledBy.mjs";
 import { getComboboxPopupId } from "../root/utils/index.mjs";
-const BOUNDARY_OFFSET = 2;
+import { useListEmpty, usePopupSide } from "../utils/parts.mjs";
 
 /**
  * A button that opens the popup.
@@ -50,20 +50,14 @@ export const ComboboxTrigger = /*#__PURE__*/React.forwardRef(function ComboboxTr
     labelId: fieldLabelId
   } = useLabelableContext();
   const store = useComboboxRootContext();
-  const {
-    filteredItems
-  } = useComboboxDerivedItemsContext();
   const selectionMode = useStore(store, selectors.selectionMode);
   const comboboxDisabled = useStore(store, selectors.disabled);
   const readOnly = useStore(store, selectors.readOnly);
   const required = useStore(store, selectors.required);
-  const mounted = useStore(store, selectors.mounted);
-  const popupSideValue = useStore(store, selectors.popupSide);
   const positionerElement = useStore(store, selectors.positionerElement);
   const listElement = useStore(store, selectors.listElement);
   const storedPopupId = useStore(store, selectors.popupId);
   const triggerProps = useStore(store, selectors.triggerProps);
-  const triggerElement = useStore(store, selectors.triggerElement);
   const inputInsidePopup = useStore(store, selectors.inputInsidePopup);
   const rootId = useStore(store, selectors.id);
   const comboboxLabelId = useStore(store, selectors.labelId);
@@ -76,8 +70,8 @@ export const ComboboxTrigger = /*#__PURE__*/React.forwardRef(function ComboboxTr
   const inputValue = useComboboxInputValueContext();
   const focusTimeout = useTimeout();
   const disabled = fieldDisabled || comboboxDisabled || disabledProp;
-  const listEmpty = filteredItems.length === 0;
-  const popupSide = mounted && positionerElement ? popupSideValue : null;
+  const listEmpty = useListEmpty();
+  const popupSide = usePopupSide(store);
   useLabelableId({
     id: inputInsidePopup ? idProp : undefined
   });
@@ -95,18 +89,6 @@ export const ComboboxTrigger = /*#__PURE__*/React.forwardRef(function ComboboxTr
   function trackPointerType(event) {
     currentPointerTypeRef.current = event.pointerType;
   }
-  const domReference = floatingRootContext.useState('domReferenceElement');
-
-  // Update the floating root context to use the trigger element when it differs from the current reference.
-  // This ensures useClick and useTypeahead attach handlers to the correct element.
-  React.useEffect(() => {
-    if (!inputInsidePopup) {
-      return;
-    }
-    if (triggerElement && triggerElement !== domReference) {
-      floatingRootContext.set('domReferenceElement', triggerElement);
-    }
-  }, [triggerElement, domReference, floatingRootContext, inputInsidePopup]);
   const {
     reference: triggerTypeaheadProps
   } = useTypeahead(floatingRootContext, {
@@ -117,7 +99,7 @@ export const ComboboxTrigger = /*#__PURE__*/React.forwardRef(function ComboboxTr
     onMatch(index) {
       const nextSelectedValue = store.state.valuesRef.current[index];
       if (nextSelectedValue !== undefined) {
-        store.state.setSelectedValue(nextSelectedValue, createChangeEventDetails('none'));
+        store.state.setSelectedValue(nextSelectedValue, createChangeEventDetails(REASONS.none));
       }
     }
   });
@@ -152,7 +134,7 @@ export const ComboboxTrigger = /*#__PURE__*/React.forwardRef(function ComboboxTr
       id,
       tabIndex: inputInsidePopup ? 0 : -1,
       role: inputInsidePopup ? 'combobox' : undefined,
-      'aria-expanded': open ? 'true' : 'false',
+      'aria-expanded': open,
       'aria-haspopup': inputInsidePopup ? 'dialog' : 'listbox',
       'aria-controls': ariaControls,
       'aria-required': inputInsidePopup ? required || undefined : undefined,
@@ -199,22 +181,20 @@ export const ComboboxTrigger = /*#__PURE__*/React.forwardRef(function ComboboxTr
         }
         const doc = ownerDocument(event.currentTarget);
         function handleMouseUp(mouseEvent) {
-          if (!triggerElement) {
+          const currentTriggerElement = store.state.triggerElement;
+          if (!currentTriggerElement) {
             return;
           }
           const mouseUpTarget = getTarget(mouseEvent);
           const positioner = store.state.positionerElement;
           const list = store.state.listElement;
-          if (contains(triggerElement, mouseUpTarget) || contains(positioner, mouseUpTarget) || contains(list, mouseUpTarget) || mouseUpTarget === triggerElement) {
+          if (contains(currentTriggerElement, mouseUpTarget) || contains(positioner, mouseUpTarget) || contains(list, mouseUpTarget)) {
             return;
           }
-          const bounds = getPseudoElementBounds(triggerElement);
-          const withinHorizontal = mouseEvent.clientX >= bounds.left - BOUNDARY_OFFSET && mouseEvent.clientX <= bounds.right + BOUNDARY_OFFSET;
-          const withinVertical = mouseEvent.clientY >= bounds.top - BOUNDARY_OFFSET && mouseEvent.clientY <= bounds.bottom + BOUNDARY_OFFSET;
-          if (withinHorizontal && withinVertical) {
+          if (isMouseWithinBounds(mouseEvent, currentTriggerElement)) {
             return;
           }
-          store.state.setOpen(false, createChangeEventDetails('cancel-open', mouseEvent));
+          store.state.setOpen(false, createChangeEventDetails(REASONS.cancelOpen, mouseEvent));
         }
         if (inputInsidePopup) {
           doc.addEventListener('mouseup', handleMouseUp, {
@@ -223,7 +203,7 @@ export const ComboboxTrigger = /*#__PURE__*/React.forwardRef(function ComboboxTr
         }
       },
       onKeyDown(event) {
-        if (disabled || readOnly) {
+        if (readOnly) {
           return;
         }
         if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {
@@ -232,7 +212,7 @@ export const ComboboxTrigger = /*#__PURE__*/React.forwardRef(function ComboboxTr
           store.state.inputRef.current?.focus();
         }
       }
-    }, validation ? validation.getValidationProps(disabled, elementProps) : elementProps, getButtonProps],
+    }, validation.getValidationProps(disabled, elementProps), getButtonProps],
     stateAttributesMapping: triggerStateAttributesMapping
   });
   return element;

package/combobox/utils/ComboboxInternalDismissButton.d.mts

@@ -1,5 +1 @@
-import * as React from 'react';
-/**
- * @internal
- */
-export declare const ComboboxInternalDismissButton: React.ForwardRefExoticComponent<React.RefAttributes<HTMLSpanElement>>;
+export {};

package/combobox/utils/ComboboxInternalDismissButton.d.ts

@@ -1,5 +1 @@
-import * as React from 'react';
-/**
- * @internal
- */
-export declare const ComboboxInternalDismissButton: React.ForwardRefExoticComponent<React.RefAttributes<HTMLSpanElement>>;
+export {};

package/combobox/utils/parts.d.mts

@@ -0,0 +1,24 @@
+import { type ComboboxStore } from "../store.mjs";
+import type { Side } from "../../internals/useAnchorPositioning.mjs";
+/**
+ * The popup side is only meaningful while the positioner is mounted, as the store retains the
+ * last resolved side after the popup unmounts.
+ */
+export declare function usePopupSide(store: ComboboxStore): Side | null;
+/**
+ * Whether the filtered list has no items to show.
+ */
+export declare function useListEmpty(): boolean;
+/**
+ * The arrow keys that move the chip highlight backwards and forwards, in that order.
+ */
+export declare function getChipNavigationKeys(direction: 'ltr' | 'rtl'): readonly ["ArrowLeft", "ArrowRight"] | readonly ["ArrowRight", "ArrowLeft"];
+/**
+ * Where the highlight lands once the chip at `index` is removed, or `undefined` for no highlight.
+ */
+export declare function getIndexAfterChipRemoval(index: number, chipCount: number): number | undefined;
+/**
+ * Commits the highlighted item by clicking it, tagging the originating event so the item's
+ * handler can attribute the selection to it.
+ */
+export declare function clickHighlightedItem(store: ComboboxStore, activeIndex: number, nativeEvent: KeyboardEvent): void;

package/combobox/utils/parts.d.ts

@@ -0,0 +1,24 @@
+import { type ComboboxStore } from "../store.js";
+import type { Side } from "../../internals/useAnchorPositioning.js";
+/**
+ * The popup side is only meaningful while the positioner is mounted, as the store retains the
+ * last resolved side after the popup unmounts.
+ */
+export declare function usePopupSide(store: ComboboxStore): Side | null;
+/**
+ * Whether the filtered list has no items to show.
+ */
+export declare function useListEmpty(): boolean;
+/**
+ * The arrow keys that move the chip highlight backwards and forwards, in that order.
+ */
+export declare function getChipNavigationKeys(direction: 'ltr' | 'rtl'): readonly ["ArrowLeft", "ArrowRight"] | readonly ["ArrowRight", "ArrowLeft"];
+/**
+ * Where the highlight lands once the chip at `index` is removed, or `undefined` for no highlight.
+ */
+export declare function getIndexAfterChipRemoval(index: number, chipCount: number): number | undefined;
+/**
+ * Commits the highlighted item by clicking it, tagging the originating event so the item's
+ * handler can attribute the selection to it.
+ */
+export declare function clickHighlightedItem(store: ComboboxStore, activeIndex: number, nativeEvent: KeyboardEvent): void;

package/combobox/utils/parts.js

@@ -0,0 +1,59 @@
+"use strict";
+'use client';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.clickHighlightedItem = clickHighlightedItem;
+exports.getChipNavigationKeys = getChipNavigationKeys;
+exports.getIndexAfterChipRemoval = getIndexAfterChipRemoval;
+exports.useListEmpty = useListEmpty;
+exports.usePopupSide = usePopupSide;
+var _store = require("@base-ui/utils/store");
+var _ComboboxRootContext = require("../root/ComboboxRootContext");
+var _store2 = require("../store");
+/**
+ * The popup side is only meaningful while the positioner is mounted, as the store retains the
+ * last resolved side after the popup unmounts.
+ */
+function usePopupSide(store) {
+  const mounted = (0, _store.useStore)(store, _store2.selectors.mounted);
+  const popupSide = (0, _store.useStore)(store, _store2.selectors.popupSide);
+  const positionerElement = (0, _store.useStore)(store, _store2.selectors.positionerElement);
+  return mounted && positionerElement ? popupSide : null;
+}
+
+/**
+ * Whether the filtered list has no items to show.
+ */
+function useListEmpty() {
+  return (0, _ComboboxRootContext.useComboboxDerivedItemsContext)().filteredItems.length === 0;
+}
+
+/**
+ * The arrow keys that move the chip highlight backwards and forwards, in that order.
+ */
+function getChipNavigationKeys(direction) {
+  return direction === 'rtl' ? ['ArrowRight', 'ArrowLeft'] : ['ArrowLeft', 'ArrowRight'];
+}
+
+/**
+ * Where the highlight lands once the chip at `index` is removed, or `undefined` for no highlight.
+ */
+function getIndexAfterChipRemoval(index, chipCount) {
+  const nextIndex = index >= chipCount - 1 ? chipCount - 2 : index;
+  return nextIndex >= 0 ? nextIndex : undefined;
+}
+
+/**
+ * Commits the highlighted item by clicking it, tagging the originating event so the item's
+ * handler can attribute the selection to it.
+ */
+function clickHighlightedItem(store, activeIndex, nativeEvent) {
+  const listItem = store.state.listRef.current[activeIndex];
+  if (listItem) {
+    store.state.selectionEventRef.current = nativeEvent;
+    listItem.click();
+    store.state.selectionEventRef.current = null;
+  }
+}

package/combobox/utils/parts.mjs

@@ -0,0 +1,50 @@
+'use client';
+
+import { useStore } from '@base-ui/utils/store';
+import { useComboboxDerivedItemsContext } from "../root/ComboboxRootContext.mjs";
+import { selectors } from "../store.mjs";
+/**
+ * The popup side is only meaningful while the positioner is mounted, as the store retains the
+ * last resolved side after the popup unmounts.
+ */
+export function usePopupSide(store) {
+  const mounted = useStore(store, selectors.mounted);
+  const popupSide = useStore(store, selectors.popupSide);
+  const positionerElement = useStore(store, selectors.positionerElement);
+  return mounted && positionerElement ? popupSide : null;
+}
+
+/**
+ * Whether the filtered list has no items to show.
+ */
+export function useListEmpty() {
+  return useComboboxDerivedItemsContext().filteredItems.length === 0;
+}
+
+/**
+ * The arrow keys that move the chip highlight backwards and forwards, in that order.
+ */
+export function getChipNavigationKeys(direction) {
+  return direction === 'rtl' ? ['ArrowRight', 'ArrowLeft'] : ['ArrowLeft', 'ArrowRight'];
+}
+
+/**
+ * Where the highlight lands once the chip at `index` is removed, or `undefined` for no highlight.
+ */
+export function getIndexAfterChipRemoval(index, chipCount) {
+  const nextIndex = index >= chipCount - 1 ? chipCount - 2 : index;
+  return nextIndex >= 0 ? nextIndex : undefined;
+}
+
+/**
+ * Commits the highlighted item by clicking it, tagging the originating event so the item's
+ * handler can attribute the selection to it.
+ */
+export function clickHighlightedItem(store, activeIndex, nativeEvent) {
+  const listItem = store.state.listRef.current[activeIndex];
+  if (listItem) {
+    store.state.selectionEventRef.current = nativeEvent;
+    listItem.click();
+    store.state.selectionEventRef.current = null;
+  }
+}

package/combobox/utils/stateAttributesMapping.d.mts

@@ -1,8 +1,8 @@
-import type { Side } from "../../utils/useAnchorPositioning.mjs";
+import type { Side } from "../../internals/useAnchorPositioning.mjs";
 export declare const triggerStateAttributesMapping: {
   open(value: boolean): {
-    "data-popup-open": string;
-    "data-pressed": string;
+    'data-popup-open': string;
+    'data-pressed': string;
   } | null;
   valid(value: boolean | null): Record<string, string> | null;
   popupSide: (side: Side | null) => {

package/combobox/utils/stateAttributesMapping.d.ts

@@ -1,8 +1,8 @@
-import type { Side } from "../../utils/useAnchorPositioning.js";
+import type { Side } from "../../internals/useAnchorPositioning.js";
 export declare const triggerStateAttributesMapping: {
   open(value: boolean): {
-    "data-popup-open": string;
-    "data-pressed": string;
+    'data-popup-open': string;
+    'data-pressed': string;
   } | null;
   valid(value: boolean | null): Record<string, string> | null;
   popupSide: (side: Side | null) => {

package/combobox/utils/useInitialLiveRegionTextMutation.js

@@ -42,7 +42,7 @@ function useInitialLiveRegionTextMutation() {
     if (textNode == null) {
       return undefined;
     }
-    const originalValue = textNode.nodeValue ?? '';
+    const originalValue = textNode.data;
     const markedValue = `${originalValue}${LIVE_REGION_MARKER}`;
     textNode.nodeValue = markedValue;
     timeout.start(INITIAL_LIVE_REGION_TEXT_MUTATION_RESET_DELAY, () => {

package/combobox/utils/useInitialLiveRegionTextMutation.mjs

@@ -36,7 +36,7 @@ export function useInitialLiveRegionTextMutation() {
     if (textNode == null) {
       return undefined;
     }
-    const originalValue = textNode.nodeValue ?? '';
+    const originalValue = textNode.data;
     const markedValue = `${originalValue}${LIVE_REGION_MARKER}`;
     textNode.nodeValue = markedValue;
     timeout.start(INITIAL_LIVE_REGION_TEXT_MUTATION_RESET_DELAY, () => {

package/context-menu/root/ContextMenuRoot.d.mts

@@ -1,3 +1,4 @@
+import * as React from 'react';
 import { Menu } from "../../menu/index.mjs";
 import type { BaseUIChangeEventDetails } from "../../types/index.mjs";
 import type { MenuRoot } from "../../menu/root/MenuRoot.mjs";
@@ -9,11 +10,12 @@ import type { MenuRoot } from "../../menu/root/MenuRoot.mjs";
  */
 export declare function ContextMenuRoot(props: ContextMenuRoot.Props): import("react/jsx-runtime").JSX.Element;
 export interface ContextMenuRootState {}
-export interface ContextMenuRootProps extends Omit<Menu.Root.Props, 'modal' | 'openOnHover' | 'delay' | 'closeDelay' | 'onOpenChange'> {
+export interface ContextMenuRootProps extends Omit<Menu.Root.Props, 'handle' | 'triggerId' | 'defaultTriggerId' | 'modal' | 'openOnHover' | 'delay' | 'closeDelay' | 'onOpenChange' | 'children'> {
   /**
    * Event handler called when the menu is opened or closed.
    */
   onOpenChange?: ((open: boolean, eventDetails: ContextMenuRoot.ChangeEventDetails) => void) | undefined;
+  children?: React.ReactNode | undefined;
 }
 export type ContextMenuRootActions = MenuRoot.Actions;
 export type ContextMenuRootChangeEventReason = MenuRoot.ChangeEventReason;

package/context-menu/root/ContextMenuRoot.d.ts

@@ -1,3 +1,4 @@
+import * as React from 'react';
 import { Menu } from "../../menu/index.js";
 import type { BaseUIChangeEventDetails } from "../../types/index.js";
 import type { MenuRoot } from "../../menu/root/MenuRoot.js";
@@ -9,11 +10,12 @@ import type { MenuRoot } from "../../menu/root/MenuRoot.js";
  */
 export declare function ContextMenuRoot(props: ContextMenuRoot.Props): import("react/jsx-runtime").JSX.Element;
 export interface ContextMenuRootState {}
-export interface ContextMenuRootProps extends Omit<Menu.Root.Props, 'modal' | 'openOnHover' | 'delay' | 'closeDelay' | 'onOpenChange'> {
+export interface ContextMenuRootProps extends Omit<Menu.Root.Props, 'handle' | 'triggerId' | 'defaultTriggerId' | 'modal' | 'openOnHover' | 'delay' | 'closeDelay' | 'onOpenChange' | 'children'> {
   /**
    * Event handler called when the menu is opened or closed.
    */
   onOpenChange?: ((open: boolean, eventDetails: ContextMenuRoot.ChangeEventDetails) => void) | undefined;
+  children?: React.ReactNode | undefined;
 }
 export type ContextMenuRootActions = MenuRoot.Actions;
 export type ContextMenuRootChangeEventReason = MenuRoot.ChangeEventReason;

package/context-menu/trigger/ContextMenuTrigger.js

@@ -53,6 +53,7 @@ const ContextMenuTrigger = exports.ContextMenuTrigger = /*#__PURE__*/React.forwa
   const longPressTimeout = (0, _useTimeout.useTimeout)();
   const allowMouseUpTimeout = (0, _useTimeout.useTimeout)();
   const allowMouseUpRef = React.useRef(false);
+  const mouseUpAbortControllerRef = React.useRef(null);
   function handleLongPress(x, y, event) {
     const isTouchEvent = event.type.startsWith('touch');
     initialCursorPointRef.current = {
@@ -83,7 +84,13 @@ const ContextMenuTrigger = exports.ContextMenuTrigger = /*#__PURE__*/React.forwa
     (0, _utils.stopEvent)(event);
     handleLongPress(event.clientX, event.clientY, event.nativeEvent);
     const doc = (0, _owner.ownerDocument)(triggerRef.current);
-    (0, _addEventListener.addEventListener)(doc, 'mouseup', mouseEvent => {
+
+    // Abort a listener from a previous trigger that never saw its mouseup, and scope this
+    // one to a fresh controller so it's removed on unmount if the mouseup never arrives.
+    mouseUpAbortControllerRef.current?.abort();
+    const mouseUpAbortController = new AbortController();
+    mouseUpAbortControllerRef.current = mouseUpAbortController;
+    doc.addEventListener('mouseup', mouseEvent => {
       allowMouseUpTriggerRef.current = false;
       if (!allowMouseUpRef.current) {
         return;
@@ -99,43 +106,54 @@ const ContextMenuTrigger = exports.ContextMenuTrigger = /*#__PURE__*/React.forwa
       }
       actionsRef.current?.setOpen(false, (0, _createBaseUIEventDetails.createChangeEventDetails)(_reasons.REASONS.cancelOpen, mouseEvent));
     }, {
-      once: true
+      once: true,
+      signal: mouseUpAbortController.signal
     });
   }
+  function cancelLongPress() {
+    longPressTimeout.clear();
+    touchPositionRef.current = null;
+  }
   function handleTouchStart(event) {
     if (disabled) {
+      cancelLongPress();
       return;
     }
     allowMouseUpTriggerRef.current = false;
-    if (event.touches.length === 1) {
-      event.stopPropagation();
-      const touch = event.touches[0];
-      touchPositionRef.current = {
-        x: touch.clientX,
-        y: touch.clientY
-      };
-      longPressTimeout.start(LONG_PRESS_DELAY, () => {
-        if (touchPositionRef.current) {
-          handleLongPress(touchPositionRef.current.x, touchPositionRef.current.y, event.nativeEvent);
-        }
-      });
+    if (event.touches.length !== 1) {
+      cancelLongPress();
+      return;
     }
+    event.stopPropagation();
+    const touch = event.touches[0];
+    const touchPosition = {
+      x: touch.clientX,
+      y: touch.clientY
+    };
+    touchPositionRef.current = touchPosition;
+    longPressTimeout.start(LONG_PRESS_DELAY, () => {
+      handleLongPress(touchPosition.x, touchPosition.y, event.nativeEvent);
+    });
   }
   function handleTouchMove(event) {
-    if (longPressTimeout.isStarted() && touchPositionRef.current && event.touches.length === 1) {
+    if (event.touches.length !== 1) {
+      cancelLongPress();
+      return;
+    }
+    if (longPressTimeout.isStarted() && touchPositionRef.current) {
       const touch = event.touches[0];
       const moveThreshold = 10;
       const deltaX = Math.abs(touch.clientX - touchPositionRef.current.x);
       const deltaY = Math.abs(touch.clientY - touchPositionRef.current.y);
       if (deltaX > moveThreshold || deltaY > moveThreshold) {
-        longPressTimeout.clear();
+        cancelLongPress();
       }
     }
   }
-  function handleTouchEnd() {
-    longPressTimeout.clear();
-    touchPositionRef.current = null;
-  }
+  React.useEffect(() => () => {
+    // Abort a pending mouseup listener if the trigger unmounts before it fires.
+    mouseUpAbortControllerRef.current?.abort();
+  }, []);
   React.useEffect(() => {
     function handleDocumentContextMenu(event) {
       if (disabled) {
@@ -160,8 +178,8 @@ const ContextMenuTrigger = exports.ContextMenuTrigger = /*#__PURE__*/React.forwa
       onContextMenu: handleContextMenu,
       onTouchStart: handleTouchStart,
       onTouchMove: handleTouchMove,
-      onTouchEnd: handleTouchEnd,
-      onTouchCancel: handleTouchEnd,
+      onTouchEnd: cancelLongPress,
+      onTouchCancel: cancelLongPress,
       style: {
         WebkitTouchCallout: 'none'
       }