@base-ui/react 1.0.0 → 1.2.0

package/esm/floating-ui-react/hooks/useTypeahead.js

@@ -1,9 +1,10 @@
+'use client';
+
 import * as React from 'react';
 import { useStableCallback } from '@base-ui/utils/useStableCallback';
 import { useIsoLayoutEffect } from '@base-ui/utils/useIsoLayoutEffect';
 import { useTimeout } from '@base-ui/utils/useTimeout';
-import { stopEvent } from "../utils.js";
-import { EMPTY_ARRAY } from "../../utils/constants.js";
+import { contains, stopEvent } from "../utils.js";
 /**
  * Provides a matching callback that can be used to focus an item as the user
  * types, often used in tandem with `useListNavigation()`.
@@ -11,17 +12,15 @@ import { EMPTY_ARRAY } from "../../utils/constants.js";
  */
 export function useTypeahead(context, props) {
   const store = 'rootStore' in context ? context.rootStore : context;
-  const open = store.useState('open');
   const dataRef = store.context.dataRef;
+  const open = store.useState('open');
   const {
     listRef,
     activeIndex,
     onMatch: onMatchProp,
     onTypingChange,
     enabled = true,
-    findMatch = null,
     resetMs = 750,
-    ignoreKeys = EMPTY_ARRAY,
     selectedIndex = null
   } = props;
   const timeout = useTimeout();
@@ -29,12 +28,15 @@ export function useTypeahead(context, props) {
   const prevIndexRef = React.useRef(selectedIndex ?? activeIndex ?? -1);
   const matchIndexRef = React.useRef(null);
   useIsoLayoutEffect(() => {
-    if (open) {
-      timeout.clear();
-      matchIndexRef.current = null;
+    if (!open && selectedIndex !== null) {
+      return;
+    }
+    timeout.clear();
+    matchIndexRef.current = null;
+    if (stringRef.current !== '') {
       stringRef.current = '';
     }
-  }, [open, timeout]);
+  }, [open, selectedIndex, timeout]);
   useIsoLayoutEffect(() => {
     // Sync arrow key navigation but not typeahead navigation.
     if (open && stringRef.current === '') {
@@ -54,7 +56,7 @@ export function useTypeahead(context, props) {
   });
   const onKeyDown = useStableCallback(event => {
     function getMatchingIndex(list, orderedList, string) {
-      const str = findMatch ? findMatch(orderedList, string) : orderedList.find(text => text?.toLocaleLowerCase().indexOf(string.toLocaleLowerCase()) === 0);
+      const str = orderedList.find(text => text?.toLocaleLowerCase().indexOf(string.toLocaleLowerCase()) === 0);
       return str ? list.indexOf(str) : -1;
     }
     const listContent = listRef.current;
@@ -65,7 +67,7 @@ export function useTypeahead(context, props) {
         stopEvent(event);
       }
     }
-    if (listContent == null || ignoreKeys.includes(event.key) ||
+    if (listContent == null ||
     // Character key.
     event.key.length !== 1 ||
     // Modifier key.
@@ -77,6 +79,12 @@ export function useTypeahead(context, props) {
       setTypingChange(true);
     }
 
+    // Capture whether this is a new typing session before mutating the string.
+    const isNewSession = stringRef.current === '';
+    if (isNewSession) {
+      prevIndexRef.current = selectedIndex ?? activeIndex ?? -1;
+    }
+
     // Bail out if the list contains a word like "llama" or "aaron". TODO:
     // allow it in this case, too.
     const allowRapidSuccessionOfFirstLetter = listContent.every(text => text ? text[0]?.toLocaleLowerCase() !== text[1]?.toLocaleLowerCase() : true);
@@ -93,7 +101,11 @@ export function useTypeahead(context, props) {
       prevIndexRef.current = matchIndexRef.current;
       setTypingChange(false);
     });
-    const prevIndex = prevIndexRef.current;
+
+    // Compute the starting index for this search.
+    // If this is a new typing session (string is empty), base it on the current
+    // selection/active item; otherwise continue from the last matched index.
+    const prevIndex = isNewSession ? selectedIndex ?? activeIndex ?? -1 : prevIndexRef.current;
     const index = getMatchingIndex(listContent, [...listContent.slice((prevIndex || 0) + 1), ...listContent.slice(0, (prevIndex || 0) + 1)], stringRef.current);
     if (index !== -1) {
       onMatchProp?.(index);
@@ -103,9 +115,28 @@ export function useTypeahead(context, props) {
       setTypingChange(false);
     }
   });
+  const onBlur = useStableCallback(event => {
+    const next = event.relatedTarget;
+    const currentDomReferenceElement = store.select('domReferenceElement');
+    const currentFloatingElement = store.select('floatingElement');
+    const withinReference = contains(currentDomReferenceElement, next);
+    const withinFloating = contains(currentFloatingElement, next);
+
+    // Keep the session if focus moves within the composite (reference <-> floating).
+    if (withinReference || withinFloating) {
+      return;
+    }
+
+    // End the current typing session when focus leaves the composite entirely.
+    timeout.clear();
+    stringRef.current = '';
+    prevIndexRef.current = matchIndexRef.current;
+    setTypingChange(false);
+  });
   const reference = React.useMemo(() => ({
-    onKeyDown
-  }), [onKeyDown]);
+    onKeyDown,
+    onBlur
+  }), [onKeyDown, onBlur]);
   const floating = React.useMemo(() => {
     return {
       onKeyDown,
@@ -113,9 +144,10 @@ export function useTypeahead(context, props) {
         if (event.key === ' ') {
           setTypingChange(false);
         }
-      }
+      },
+      onBlur
     };
-  }, [onKeyDown, setTypingChange]);
+  }, [onKeyDown, onBlur, setTypingChange]);
   return React.useMemo(() => enabled ? {
     reference,
     floating

package/esm/floating-ui-react/middleware/arrow.d.ts

@@ -10,7 +10,7 @@ export interface ArrowOptions {
    * Useful when the floating element has rounded corners.
    * @default 0
    */
-  padding?: Padding;
+  padding?: Padding | undefined;
   /**
    * Which element to use as the offset parent.
    * @default 'real'

package/esm/floating-ui-react/safePolygon.d.ts

@@ -1,8 +1,8 @@
 import type { HandleClose } from "./hooks/useHover.js";
 export interface SafePolygonOptions {
-  buffer?: number;
-  blockPointerEvents?: boolean;
-  requireIntent?: boolean;
+  buffer?: number | undefined;
+  blockPointerEvents?: boolean | undefined;
+  requireIntent?: boolean | undefined;
 }
 /**
  * Generates a safe polygon area that the user can traverse without closing the

package/esm/floating-ui-react/types.d.ts

@@ -48,10 +48,10 @@ export interface FloatingEvents {
   off(event: string, handler: (data: any) => void): void;
 }
 export interface ContextData {
-  openEvent?: Event;
-  floatingContext?: FloatingContext;
+  openEvent?: Event | undefined;
+  floatingContext?: FloatingContext | undefined;
   /** @deprecated use `onTypingChange` prop in `useTypeahead` */
-  typing?: boolean;
+  typing?: boolean | undefined;
   [key: string]: any;
 }
 export type FloatingRootContext = FloatingRootStore;
@@ -69,14 +69,14 @@ export type FloatingContext = Omit<UsePositionFloatingReturn<ReferenceType>, 're
 export interface FloatingNodeType {
   id: string | undefined;
   parentId: string | null;
-  context?: FloatingContext;
+  context?: FloatingContext | undefined;
 }
 export type FloatingTreeType = FloatingTreeStore;
 export interface ElementProps {
-  reference?: React.HTMLProps<Element>;
-  floating?: React.HTMLProps<HTMLElement>;
-  item?: React.HTMLProps<HTMLElement> | ((props: ExtendedUserProps) => React.HTMLProps<HTMLElement>);
-  trigger?: React.HTMLProps<Element>;
+  reference?: React.HTMLProps<Element> | undefined;
+  floating?: React.HTMLProps<HTMLElement> | undefined;
+  item?: (React.HTMLProps<HTMLElement> | ((props: ExtendedUserProps) => React.HTMLProps<HTMLElement>)) | undefined;
+  trigger?: React.HTMLProps<Element> | undefined;
 }
 export type ReferenceType = Element | VirtualElement;
 export type UseFloatingData = Prettify<UseFloatingReturn>;
@@ -92,7 +92,7 @@ export type UseFloatingReturn = Prettify<UsePositionFloatingReturn & {
   elements: ExtendedElements;
 }>;
 export interface UseFloatingOptions extends Omit<UsePositionOptions, 'elements'> {
-  rootContext?: FloatingRootContext;
+  rootContext?: FloatingRootContext | undefined;
   /**
    * Object of external elements as an alternative to the `refs` object setters.
    */
@@ -100,12 +100,12 @@ export interface UseFloatingOptions extends Omit<UsePositionOptions, 'elements'>
     /**
      * Externally passed reference element. Store in state.
      */
-    reference?: ReferenceType | null;
+    reference?: (ReferenceType | null) | undefined;
     /**
      * Externally passed floating element. Store in state.
      */
-    floating?: HTMLElement | null;
-  };
+    floating?: (HTMLElement | null) | undefined;
+  } | undefined;
   /**
    * An event callback that is invoked when the floating element is opened or
    * closed.
@@ -114,9 +114,9 @@ export interface UseFloatingOptions extends Omit<UsePositionOptions, 'elements'>
   /**
    * Unique node id when using `FloatingTree`.
    */
-  nodeId?: string;
+  nodeId?: string | undefined;
   /**
    * External FlatingTree to use when the one provided by context can't be used.
    */
-  externalTree?: FloatingTreeStore;
+  externalTree?: FloatingTreeStore | undefined;
 }

package/esm/floating-ui-react/utils/composite.d.ts

@@ -10,10 +10,10 @@ export declare function findNonDisabledListIndex(listRef: React.RefObject<Readon
   disabledIndices,
   amount
 }?: {
-  startingIndex?: number;
-  decrement?: boolean;
-  disabledIndices?: DisabledIndices;
-  amount?: number;
+  startingIndex?: number | undefined;
+  decrement?: boolean | undefined;
+  disabledIndices?: DisabledIndices | undefined;
+  amount?: number | undefined;
 }): number;
 export declare function getGridNavigatedIndex(listRef: React.RefObject<Array<HTMLElement | null>>, {
   event,
@@ -36,7 +36,7 @@ export declare function getGridNavigatedIndex(listRef: React.RefObject<Array<HTM
   minIndex: number;
   maxIndex: number;
   prevIndex: number;
-  stopEvent?: boolean;
+  stopEvent?: boolean | undefined;
 }): number;
 /** For each cell index, gets the item index that occupies that cell */
 export declare function createGridCellMap(sizes: Dimensions[], cols: number, dense: boolean): (number | undefined)[];

package/esm/floating-ui-react/utils/composite.js

@@ -1,4 +1,3 @@
-import _formatErrorMessage from "@base-ui/utils/formatErrorMessage";
 import { floor } from '@floating-ui/utils';
 import { stopEvent } from "./event.js";
 import { ARROW_DOWN, ARROW_LEFT, ARROW_RIGHT, ARROW_UP } from "./constants.js";
@@ -274,7 +273,7 @@ export function createGridCellMap(sizes, cols, dense) {
   }, index) => {
     if (width > cols) {
       if (process.env.NODE_ENV !== 'production') {
-        throw new Error(process.env.NODE_ENV !== "production" ? `[Floating UI]: Invalid grid - item width at index ${index} is greater than grid columns` : _formatErrorMessage(29, index));
+        throw new Error(`[Floating UI]: Invalid grid - item width at index ${index} is greater than grid columns`);
       }
     }
     let itemPlaced = false;

package/esm/floating-ui-react/utils/element.d.ts

@@ -1,9 +1,10 @@
+import { type PopupTriggerMap } from "../../utils/popups/index.js";
 export declare function activeElement(doc: Document): Element | null;
 export declare function contains(parent?: Element | null, child?: Element | null): boolean;
+export declare function isTargetInsideEnabledTrigger(target: EventTarget | null, triggerElements: PopupTriggerMap): boolean;
 export declare function getTarget(event: Event): EventTarget | null;
 export declare function isEventTargetWithin(event: Event, node: Node | null | undefined): boolean;
 export declare function isRootElement(element: Element): boolean;
-export declare function getDocument(node: Element | null): Document;
 export declare function isTypeableElement(element: unknown): boolean;
 export declare function isTypeableCombobox(element: Element | null): boolean;
 export declare function matchesFocusVisible(element: Element | null): boolean;

package/esm/floating-ui-react/utils/element.js

@@ -1,4 +1,4 @@
-import { isHTMLElement, isShadowRoot } from '@floating-ui/utils/dom';
+import { isElement, isHTMLElement, isShadowRoot } from '@floating-ui/utils/dom';
 import { isJSDOM } from '@base-ui/utils/detectBrowser';
 import { FOCUSABLE_ATTRIBUTE, TYPEABLE_SELECTOR } from "./constants.js";
 export function activeElement(doc) {
@@ -33,6 +33,21 @@ export function contains(parent, child) {
   // Give up, the result is false
   return false;
 }
+export function isTargetInsideEnabledTrigger(target, triggerElements) {
+  if (!isElement(target)) {
+    return false;
+  }
+  const targetElement = target;
+  if (triggerElements.hasElement(targetElement)) {
+    return !targetElement.hasAttribute('data-trigger-disabled');
+  }
+  for (const [, trigger] of triggerElements.entries()) {
+    if (contains(trigger, targetElement)) {
+      return !trigger.hasAttribute('data-trigger-disabled');
+    }
+  }
+  return false;
+}
 export function getTarget(event) {
   if ('composedPath' in event) {
     return event.composedPath()[0];
@@ -57,9 +72,6 @@ export function isEventTargetWithin(event, node) {
 export function isRootElement(element) {
   return element.matches('html,body');
 }
-export function getDocument(node) {
-  return node?.ownerDocument || document;
-}
 export function isTypeableElement(element) {
   return isHTMLElement(element) && element.matches(TYPEABLE_SELECTOR);
 }

package/esm/floating-ui-react/utils/enqueueFocus.d.ts

@@ -1,8 +1,8 @@
 import type { FocusableElement } from 'tabbable';
 interface Options {
-  preventScroll?: boolean;
-  cancelPrevious?: boolean;
-  sync?: boolean;
+  preventScroll?: boolean | undefined;
+  cancelPrevious?: boolean | undefined;
+  sync?: boolean | undefined;
 }
 export declare function enqueueFocus(el: FocusableElement | null, options?: Options): void;
 export {};

package/esm/floating-ui-react/utils/event.js

@@ -7,11 +7,9 @@ export function isReactEvent(event) {
   return 'nativeEvent' in event;
 }
 
-// License: https://github.com/adobe/react-spectrum/blob/b35d5c02fe900badccd0cf1a8f23bb593419f238/packages/@react-aria/utils/src/isVirtualEvent.ts
+// License: https://github.com/adobe/react-spectrum/blob/main/packages/@react-aria/utils/src/isVirtualEvent.ts
 export function isVirtualClick(event) {
-  // FIXME: Firefox is now emitting a deprecation warning for `mozInputSource`.
-  // Try to find a workaround for this. `react-aria` source still has the check.
-  if (event.mozInputSource === 0 && event.isTrusted) {
+  if (event.pointerType === '' && event.isTrusted) {
     return true;
   }
   if (isAndroid && event.pointerType) {

package/esm/floating-ui-react/utils/markOthers.js

@@ -1,7 +1,7 @@
 // Modified to add conditional `aria-hidden` support:
 // https://github.com/theKashey/aria-hidden/blob/9220c8f4a4fd35f63bee5510a9f41a37264382d4/src/index.ts
 import { getNodeName } from '@floating-ui/utils/dom';
-import { getDocument } from "./element.js";
+import { ownerDocument } from '@base-ui/utils/owner';
 const counters = {
   inert: new WeakMap(),
   'aria-hidden': new WeakMap(),
@@ -116,6 +116,6 @@ function applyAttributeToOthers(uncorrectedAvoidElements, body, ariaHidden, iner
   };
 }
 export function markOthers(avoidElements, ariaHidden = false, inert = false) {
-  const body = getDocument(avoidElements[0]).body;
+  const body = ownerDocument(avoidElements[0]).body;
   return applyAttributeToOthers(avoidElements.concat(Array.from(body.querySelectorAll('[aria-live]'))), body, ariaHidden, inert);
 }

package/esm/floating-ui-react/utils/tabbable.js

@@ -1,5 +1,6 @@
 import { tabbable } from 'tabbable';
-import { activeElement, contains, getDocument } from "./element.js";
+import { ownerDocument } from '@base-ui/utils/owner';
+import { activeElement, contains } from "./element.js";
 export const getTabbableOptions = () => ({
   getShadowRoot: true,
   displayCheck:
@@ -14,23 +15,23 @@ function getTabbableIn(container, dir) {
   if (len === 0) {
     return undefined;
   }
-  const active = activeElement(getDocument(container));
+  const active = activeElement(ownerDocument(container));
   const index = list.indexOf(active);
   // eslint-disable-next-line no-nested-ternary
   const nextIndex = index === -1 ? dir === 1 ? 0 : len - 1 : index + dir;
   return list[nextIndex];
 }
 export function getNextTabbable(referenceElement) {
-  return getTabbableIn(getDocument(referenceElement).body, 1) || referenceElement;
+  return getTabbableIn(ownerDocument(referenceElement).body, 1) || referenceElement;
 }
 export function getPreviousTabbable(referenceElement) {
-  return getTabbableIn(getDocument(referenceElement).body, -1) || referenceElement;
+  return getTabbableIn(ownerDocument(referenceElement).body, -1) || referenceElement;
 }
 function getTabbableNearElement(referenceElement, dir) {
   if (!referenceElement) {
     return null;
   }
-  const list = tabbable(getDocument(referenceElement).body, getTabbableOptions());
+  const list = tabbable(ownerDocument(referenceElement).body, getTabbableOptions());
   const elementCount = list.length;
   if (elementCount === 0) {
     return null;

package/esm/form/Form.d.ts

@@ -11,11 +11,15 @@ import { FormContext } from "./FormContext.js";
  */
 export declare const Form: {
   <FormValues extends Record<string, any> = Record<string, any>>(props: Form.Props<FormValues> & {
-    ref?: React.Ref<HTMLFormElement>;
+    ref?: React.Ref<HTMLFormElement> | undefined;
   }): React.JSX.Element;
 };
 export type FormSubmitEventReason = typeof REASONS.none;
 export type FormSubmitEventDetails = BaseUIGenericEventDetails<Form.SubmitEventReason>;
+export type FormValidationMode = 'onSubmit' | 'onBlur' | 'onChange';
+export interface FormActions {
+  validate: (fieldName?: string | undefined) => void;
+}
 export interface FormState {}
 export interface FormProps<FormValues extends Record<string, any> = Record<string, any>> extends BaseUIComponentProps<'form', Form.State> {
   /**
@@ -28,23 +32,36 @@ export interface FormProps<FormValues extends Record<string, any> = Record<strin
    *
    * @default 'onSubmit'
    */
-  validationMode?: FormValidationMode;
+  validationMode?: FormValidationMode | undefined;
   /**
    * Validation errors returned externally, typically after submission by a server or a form action.
    * This should be an object where keys correspond to the `name` attribute on `<Field.Root>`,
    * and values correspond to error(s) related to that field.
    */
-  errors?: FormContext['errors'];
+  errors?: FormContext['errors'] | undefined;
   /**
    * Event handler called when the form is submitted.
    * `preventDefault()` is called on the native submit event when used.
    */
-  onFormSubmit?: (formValues: FormValues, eventDetails: Form.SubmitEventDetails) => void;
+  onFormSubmit?: ((formValues: FormValues, eventDetails: Form.SubmitEventDetails) => void) | undefined;
+  /**
+   * A ref to imperative actions.
+   * - `validate`: Validates all fields when called. Optionally pass a field name to validate a single field.
+   * @example
+   * ```tsx
+   * // validate all fields
+   * actionsRef.current.validate();
+   *
+   * // validate one field
+   * actionsRef.current.validate('email');
+   * ```
+   */
+  actionsRef?: React.RefObject<Form.Actions | null> | undefined;
 }
-export type FormValidationMode = 'onSubmit' | 'onBlur' | 'onChange';
 export declare namespace Form {
   type Props<FormValues extends Record<string, any> = Record<string, any>> = FormProps<FormValues>;
   type State = FormState;
+  type Actions = FormActions;
   type ValidationMode = FormValidationMode;
   type SubmitEventReason = FormSubmitEventReason;
   type SubmitEventDetails = FormSubmitEventDetails;

package/esm/form/Form.js

@@ -24,6 +24,7 @@ export const Form = /*#__PURE__*/React.forwardRef(function Form(componentProps,
     errors: externalErrors,
     onSubmit,
     onFormSubmit,
+    actionsRef,
     ...elementProps
   } = componentProps;
   const formRef = React.useRef({
@@ -54,6 +55,22 @@ export const Form = /*#__PURE__*/React.forwardRef(function Form(componentProps,
       focusControl(invalidFields[0].controlRef.current);
     }
   }, [errors, focusControl]);
+  const handleImperativeValidate = React.useCallback(fieldName => {
+    const values = Array.from(formRef.current.fields.values());
+    if (fieldName) {
+      const namedField = values.find(field => field.name === fieldName);
+      if (namedField) {
+        namedField.validate(false);
+      }
+    } else {
+      values.forEach(field => {
+        field.validate(false);
+      });
+    }
+  }, []);
+  React.useImperativeHandle(actionsRef, () => ({
+    validate: handleImperativeValidate
+  }), [handleImperativeValidate]);
   const element = useRenderElement('form', componentProps, {
     ref: forwardedRef,
     props: [{

package/esm/form/FormContext.d.ts

@@ -8,7 +8,7 @@ export interface FormContext {
   formRef: React.RefObject<{
     fields: Map<string, {
       name: string | undefined;
-      validate: () => void;
+      validate: (flushSync?: boolean | undefined) => void;
       validityData: FieldValidityData;
       controlRef: React.RefObject<HTMLElement | null>;
       getValue: () => unknown;

package/esm/index.d.ts

@@ -8,8 +8,10 @@ export * from "./checkbox-group/index.js";
 export * from "./collapsible/index.js";
 export * from "./combobox/index.js";
 export * from "./context-menu/index.js";
+export * from "./csp-provider/index.js";
 export * from "./dialog/index.js";
 export * from "./direction-provider/index.js";
+export * from "./drawer/index.js";
 export * from "./field/index.js";
 export * from "./fieldset/index.js";
 export * from "./form/index.js";

package/esm/index.js

@@ -1,5 +1,5 @@
 /**
- * @base-ui/react v1.0.0
+ * @base-ui/react v1.2.0
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the
@@ -15,8 +15,10 @@ export * from "./checkbox-group/index.js";
 export * from "./collapsible/index.js";
 export * from "./combobox/index.js";
 export * from "./context-menu/index.js";
+export * from "./csp-provider/index.js";
 export * from "./dialog/index.js";
 export * from "./direction-provider/index.js";
+export * from "./drawer/index.js";
 export * from "./field/index.js";
 export * from "./fieldset/index.js";
 export * from "./form/index.js";

package/esm/input/Input.d.ts

@@ -7,13 +7,13 @@ import { Field } from "../field/index.js";
  *
  * Documentation: [Base UI Input](https://base-ui.com/react/components/input)
  */
-export declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;
+export declare const Input: React.ForwardRefExoticComponent<Omit<InputProps, "ref"> & React.RefAttributes<HTMLElement>>;
 export interface InputProps extends BaseUIComponentProps<'input', Input.State> {
   /**
    * Callback fired when the `value` changes. Use when controlled.
    */
-  onValueChange?: Field.Control.Props['onValueChange'];
-  defaultValue?: Field.Control.Props['defaultValue'];
+  onValueChange?: Field.Control.Props['onValueChange'] | undefined;
+  defaultValue?: Field.Control.Props['defaultValue'] | undefined;
 }
 export interface InputState extends Field.Control.State {}
 export type InputChangeEventReason = Field.Control.ChangeEventReason;

package/esm/labelable-provider/LabelableContext.d.ts

@@ -6,7 +6,7 @@ export interface LabelableContext {
    * When `null` the association is implicit.
    */
   controlId: string | null | undefined;
-  setControlId: React.Dispatch<React.SetStateAction<string | null | undefined>>;
+  registerControlId: (source: symbol, id: string | null | undefined) => void;
   /**
    * The `id` of the label.
    */

package/esm/labelable-provider/LabelableContext.js

@@ -8,7 +8,7 @@ import { NOOP } from "../utils/noop.js";
  */
 export const LabelableContext = /*#__PURE__*/React.createContext({
   controlId: undefined,
-  setControlId: NOOP,
+  registerControlId: NOOP,
   labelId: undefined,
   setLabelId: NOOP,
   messageIds: [],

package/esm/labelable-provider/LabelableProvider.js

@@ -1,6 +1,8 @@
 'use client';
 
 import * as React from 'react';
+import { useStableCallback } from '@base-ui/utils/useStableCallback';
+import { useRefWithInit } from '@base-ui/utils/useRefWithInit';
 import { mergeProps } from "../merge-props/index.js";
 import { useBaseUiId } from "../utils/useBaseUiId.js";
 import { LabelableContext, useLabelableContext } from "./LabelableContext.js";
@@ -11,12 +13,40 @@ import { LabelableContext, useLabelableContext } from "./LabelableContext.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 export const LabelableProvider = function LabelableProvider(props) {
   const defaultId = useBaseUiId();
-  const [controlId, setControlId] = React.useState(props.initialControlId === undefined ? defaultId : props.initialControlId);
+  const [controlId, setControlIdState] = React.useState(props.initialControlId === undefined ? defaultId : props.initialControlId);
   const [labelId, setLabelId] = React.useState(undefined);
   const [messageIds, setMessageIds] = React.useState([]);
+  const registrationsRef = useRefWithInit(() => new Map());
   const {
     messageIds: parentMessageIds
   } = useLabelableContext();
+  const registerControlId = useStableCallback((source, nextId) => {
+    const registrations = registrationsRef.current;
+    if (nextId === undefined) {
+      registrations.delete(source);
+      return;
+    }
+    registrations.set(source, nextId);
+
+    // Only flush when registering, not when unregistering.
+    // This prevents loops during rapid unmount/remount cycles (e.g. React Activity).
+    // The next registration will pick up the correct state.
+    setControlIdState(prev => {
+      if (registrations.size === 0) {
+        return undefined;
+      }
+      let nextControlId;
+      for (const id of registrations.values()) {
+        if (prev !== undefined && id === prev) {
+          return prev;
+        }
+        if (nextControlId === undefined) {
+          nextControlId = id;
+        }
+      }
+      return nextControlId;
+    });
+  });
   const getDescriptionProps = React.useCallback(externalProps => {
     return mergeProps({
       'aria-describedby': parentMessageIds.concat(messageIds).join(' ') || undefined
@@ -24,13 +54,13 @@ export const LabelableProvider = function LabelableProvider(props) {
   }, [parentMessageIds, messageIds]);
   const contextValue = React.useMemo(() => ({
     controlId,
-    setControlId,
+    registerControlId,
     labelId,
     setLabelId,
     messageIds,
     setMessageIds,
     getDescriptionProps
-  }), [controlId, setControlId, labelId, setLabelId, messageIds, setMessageIds, getDescriptionProps]);
+  }), [controlId, registerControlId, labelId, setLabelId, messageIds, setMessageIds, getDescriptionProps]);
   return /*#__PURE__*/_jsx(LabelableContext.Provider, {
     value: contextValue,
     children: props.children

package/esm/labelable-provider/useLabelableId.d.ts

@@ -1,3 +1,4 @@
+import * as React from 'react';
 export declare function useLabelableId(params?: useLabelableId.Parameters): string | undefined;
 export interface UseLabelableIdParameters {
   id?: string | undefined;
@@ -5,11 +6,11 @@ export interface UseLabelableIdParameters {
    * Whether implicit labelling is supported.
    * @default false
    */
-  implicit?: boolean;
+  implicit?: boolean | undefined;
   /**
    * A ref to an element that can be implicitly labelled.
    */
-  controlRef?: React.RefObject<HTMLElement | null>;
+  controlRef?: React.RefObject<HTMLElement | null> | undefined;
 }
 export type UseLabelableIdReturnValue = string;
 export declare namespace useLabelableId {