@base-ui/react 1.7.0 → 1.8.0

package/internals/composite/root/useCompositeRoot.mjs

@@ -5,10 +5,10 @@ import { isElementDisabled } from '@base-ui/utils/isElementDisabled';
 import { useStableCallback } from '@base-ui/utils/useStableCallback';
 import { useMergedRefs } from '@base-ui/utils/useMergedRefs';
 import { useIsoLayoutEffect } from '@base-ui/utils/useIsoLayoutEffect';
+import { EMPTY_ARRAY } from '@base-ui/utils/empty';
 import { COMPOSITE_KEYS, ARROW_DOWN, ARROW_LEFT, ARROW_RIGHT, ARROW_UP, END, HOME, MODIFIER_KEYS, findNonDisabledListIndex, getMaxListIndex, getMinListIndex, isListIndexDisabled, isIndexOutOfListBounds, isNativeInput, scrollIntoViewIfNeeded } from "../composite.mjs";
 import { ACTIVE_COMPOSITE_ITEM } from "../constants.mjs";
 import { getTarget } from "../../../floating-ui-react/utils.mjs";
-const EMPTY_ARRAY = [];
 export function useCompositeRoot(params) {
   const {
     loopFocus = true,
@@ -30,8 +30,10 @@ export function useCompositeRoot(params) {
   const mergedRef = useMergedRefs(rootRef, externalRef);
   const elementsRef = React.useRef([]);
   const hasSetDefaultIndexRef = React.useRef(false);
+  const highlightedElementRef = React.useRef(null);
   const highlightedIndex = externalHighlightedIndex ?? internalHighlightedIndex;
   const onHighlightedIndexChange = useStableCallback((index, shouldScrollIntoView = false) => {
+    highlightedElementRef.current = elementsRef.current[index] ?? null;
     (externalSetHighlightedIndex ?? internalSetHighlightedIndex)(index);
     if (shouldScrollIntoView) {
       const newActiveItem = elementsRef.current[index];
@@ -39,7 +41,27 @@ export function useCompositeRoot(params) {
     }
   });
   const onMapChange = useStableCallback(map => {
-    if (map.size === 0 || hasSetDefaultIndexRef.current) {
+    if (map.size === 0) {
+      return;
+    }
+    if (hasSetDefaultIndexRef.current) {
+      const elements = elementsRef.current;
+      // Items added or removed around the highlighted one shift its index, so the tab stop would
+      // otherwise move to a different item and navigation would resume from the wrong position.
+      const nextIndex = elements.indexOf(highlightedElementRef.current);
+      if (nextIndex === -1) {
+        // A replacement at the same index can keep the tab stop. Otherwise move it to an
+        // eligible item so a missing, hidden, or disabled replacement does not take the
+        // composite out of the tab order.
+        const replacement = elements[highlightedIndex];
+        if (!replacement || isListIndexDisabled(elements, highlightedIndex, disabledIndices)) {
+          onHighlightedIndexChange(getFallbackIndex(elements, disabledIndices));
+        } else {
+          highlightedElementRef.current = replacement;
+        }
+      } else if (nextIndex !== highlightedIndex) {
+        onHighlightedIndexChange(nextIndex);
+      }
       return;
     }
     hasSetDefaultIndexRef.current = true;
@@ -212,6 +234,26 @@ export function useCompositeRoot(params) {
     relayKeyboardEvent: onKeyDown
   };
 }
+
+// Resolves the item that should hold the tab stop: the active item when it can take focus,
+// otherwise the first item that can. Falls back to index 0 so an all-disabled composite keeps the
+// index in range and regains a tab stop as soon as one of its items becomes focusable.
+function getFallbackIndex(elements, disabledIndices) {
+  let fallbackIndex = -1;
+  for (let index = 0; index < elements.length; index += 1) {
+    const element = elements[index];
+    if (!element || isListIndexDisabled(elements, index, disabledIndices)) {
+      continue;
+    }
+    if (element.hasAttribute(ACTIVE_COMPOSITE_ITEM)) {
+      return index;
+    }
+    if (fallbackIndex === -1) {
+      fallbackIndex = index;
+    }
+  }
+  return Math.max(fallbackIndex, 0);
+}
 function isModifierKeySet(event, ignoredModifierKeys) {
   for (const key of MODIFIER_KEYS) {
     if (ignoredModifierKeys.includes(key)) {

package/internals/field-constants/constants.js

@@ -1,9 +1,11 @@
 "use strict";
 
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.fieldValidityMapping = exports.DEFAULT_VALIDITY_STATE = exports.DEFAULT_FIELD_STATE_ATTRIBUTES = exports.DEFAULT_FIELD_ROOT_STATE = void 0;
+var FieldControlDataAttributes = _interopRequireWildcard(require("../../field/control/FieldControlDataAttributes"));
 const DEFAULT_VALIDITY_STATE = exports.DEFAULT_VALIDITY_STATE = {
   badInput: false,
   customError: false,
@@ -35,11 +37,11 @@ const fieldValidityMapping = exports.fieldValidityMapping = {
     }
     if (value) {
       return {
-        'data-valid': ''
+        [FieldControlDataAttributes.valid]: ''
       };
     }
     return {
-      'data-invalid': ''
+      [FieldControlDataAttributes.invalid]: ''
     };
   }
 };

package/internals/field-constants/constants.mjs

@@ -1,3 +1,4 @@
+import * as FieldControlDataAttributes from "../../field/control/FieldControlDataAttributes.mjs";
 export const DEFAULT_VALIDITY_STATE = {
   badInput: false,
   customError: false,
@@ -29,11 +30,11 @@ export const fieldValidityMapping = {
     }
     if (value) {
       return {
-        'data-valid': ''
+        [FieldControlDataAttributes.valid]: ''
       };
     }
     return {
-      'data-invalid': ''
+      [FieldControlDataAttributes.invalid]: ''
     };
   }
 };

package/internals/field-register-control/useFieldControlRegistration.d.mts

@@ -9,6 +9,7 @@ export interface FieldControlRegistration {
 }
 export declare function useFieldControlRegistration(params: UseFieldControlRegistrationParameters): readonly [() => void, (source: symbol, registration: FieldControlRegistration | undefined) => void];
 export interface UseFieldControlRegistrationParameters {
+  change: (value: unknown, cancelPending?: boolean) => void;
   commit: (value: unknown) => void;
   invalid: boolean;
   markedDirtyRef: React.RefObject<boolean>;

package/internals/field-register-control/useFieldControlRegistration.d.ts

@@ -9,6 +9,7 @@ export interface FieldControlRegistration {
 }
 export declare function useFieldControlRegistration(params: UseFieldControlRegistrationParameters): readonly [() => void, (source: symbol, registration: FieldControlRegistration | undefined) => void];
 export interface UseFieldControlRegistrationParameters {
+  change: (value: unknown, cancelPending?: boolean) => void;
   commit: (value: unknown) => void;
   invalid: boolean;
   markedDirtyRef: React.RefObject<boolean>;

package/internals/field-register-control/useFieldControlRegistration.js

@@ -13,6 +13,7 @@ var _getCombinedFieldValidityData = require("../../field/utils/getCombinedFieldV
 var _FormContext = require("../form-context/FormContext");
 function useFieldControlRegistration(params) {
   const {
+    change,
     commit,
     invalid,
     markedDirtyRef,
@@ -113,6 +114,7 @@ function useFieldControlRegistration(params) {
     if (!registration) {
       if (activeFieldControlSourceRef.current === source) {
         activeFieldControlSourceRef.current = null;
+        change(undefined, true);
         deleteRegistration();
         registrationRef.current = null;
         setRegisteredFieldName(undefined);
@@ -121,6 +123,12 @@ function useFieldControlRegistration(params) {
       return;
     }
     const previousId = registrationRef.current?.id;
+    const previousSource = activeFieldControlSourceRef.current;
+
+    // Drop work owned by a replaced control, but not on first registration.
+    if (previousSource && previousSource !== source) {
+      change(undefined, true);
+    }
     activeFieldControlSourceRef.current = source;
     registrationRef.current = registration;
     if (!name) {

package/internals/field-register-control/useFieldControlRegistration.mjs

@@ -7,6 +7,7 @@ import { getCombinedFieldValidityData } from "../../field/utils/getCombinedField
 import { useFormContext } from "../form-context/FormContext.mjs";
 export function useFieldControlRegistration(params) {
   const {
+    change,
     commit,
     invalid,
     markedDirtyRef,
@@ -107,6 +108,7 @@ export function useFieldControlRegistration(params) {
     if (!registration) {
       if (activeFieldControlSourceRef.current === source) {
         activeFieldControlSourceRef.current = null;
+        change(undefined, true);
         deleteRegistration();
         registrationRef.current = null;
         setRegisteredFieldName(undefined);
@@ -115,6 +117,12 @@ export function useFieldControlRegistration(params) {
       return;
     }
     const previousId = registrationRef.current?.id;
+    const previousSource = activeFieldControlSourceRef.current;
+
+    // Drop work owned by a replaced control, but not on first registration.
+    if (previousSource && previousSource !== source) {
+      change(undefined, true);
+    }
     activeFieldControlSourceRef.current = source;
     registrationRef.current = registration;
     if (!name) {

package/internals/filter.js

@@ -4,8 +4,8 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.getFilter = getFilter;
+var _stringifyLocale = require("@base-ui/utils/stringifyLocale");
 var _resolveValueLabel = require("./resolveValueLabel");
-var _stringifyLocale = require("../utils/stringifyLocale");
 const filterCache = new Map();
 function getFilter(options = {}) {
   const mergedOptions = {

package/internals/filter.mjs

@@ -1,5 +1,5 @@
+import { stringifyLocale } from '@base-ui/utils/stringifyLocale';
 import { stringifyAsLabel } from "./resolveValueLabel.mjs";
-import { stringifyLocale } from "../utils/stringifyLocale.mjs";
 const filterCache = new Map();
 export function getFilter(options = {}) {
   const mergedOptions = {

package/internals/form-context/FormContext.d.mts

@@ -20,7 +20,7 @@ export interface FormContext {
     }>;
   }>;
   validationMode: Form.ValidationMode;
-  submitAttemptedRef: React.RefObject<boolean>;
+  submitCountRef: React.RefObject<number>;
 }
 export declare const FormContext: React.Context<FormContext>;
 export declare function useFormContext(): FormContext;

package/internals/form-context/FormContext.d.ts

@@ -20,7 +20,7 @@ export interface FormContext {
     }>;
   }>;
   validationMode: Form.ValidationMode;
-  submitAttemptedRef: React.RefObject<boolean>;
+  submitCountRef: React.RefObject<number>;
 }
 export declare const FormContext: React.Context<FormContext>;
 export declare function useFormContext(): FormContext;

package/internals/form-context/FormContext.js

@@ -21,8 +21,8 @@ const FormContext = exports.FormContext = /*#__PURE__*/React.createContext({
   errors: {},
   clearErrors: _noop.NOOP,
   validationMode: 'onSubmit',
-  submitAttemptedRef: {
-    current: false
+  submitCountRef: {
+    current: 0
   }
 });
 if (process.env.NODE_ENV !== "production") FormContext.displayName = "FormContext";

package/internals/form-context/FormContext.mjs

@@ -14,8 +14,8 @@ export const FormContext = /*#__PURE__*/React.createContext({
   errors: {},
   clearErrors: NOOP,
   validationMode: 'onSubmit',
-  submitAttemptedRef: {
-    current: false
+  submitCountRef: {
+    current: 0
   }
 });
 if (process.env.NODE_ENV !== "production") FormContext.displayName = "FormContext";

package/internals/itemEquality.d.mts

@@ -1,7 +1,10 @@
 export type ItemEqualityComparer<Item = any, Value = Item> = (itemValue: Item, selectedValue: Value) => boolean;
 export declare const defaultItemEquality: ItemEqualityComparer;
 export declare function compareItemEquality<Item, Value>(itemValue: Item, selectedValue: Value, comparer: ItemEqualityComparer<Item, Value>): boolean;
+export declare function isSelectedValueDirty(currentValue: unknown, initialValue: unknown, comparer: ItemEqualityComparer): boolean;
 export declare function selectedValueIncludes<Item, Value>(selectedValues: readonly Item[] | undefined | null, itemValue: Value, comparer: ItemEqualityComparer<Value, Item>): boolean;
 export declare function findItemIndex<Item, Value>(itemValues: readonly Item[] | undefined | null, selectedValue: Value, comparer: ItemEqualityComparer<Item, Value>): number;
-export declare function findSelectionIndex<Item, Value>(itemValues: readonly Item[] | undefined | null, selectedValue: Value | readonly Value[] | null | undefined, comparer: ItemEqualityComparer<Item, Value>, multiple: boolean): number | null;
+export declare function findSelectionIndex<Item, Value>(itemValues: readonly Item[], selectedValue: Value | readonly Value[] | null | undefined, comparer: ItemEqualityComparer<Item, Value>, multiple: boolean): number | null;
+/** Resolves the first selected index as items register or change. */
+export declare function resolveSelectedIndex<Item, Value>(index: number, itemValue: Item, registry: readonly Item[], selectedValues: readonly Value[], comparer: ItemEqualityComparer<Item, Value>, currentIndex: number | null): number | null;
 export declare function removeItem<Item, Value>(selectedValues: readonly Item[], itemValue: Value, comparer: ItemEqualityComparer<Value, Item>): Item[];

package/internals/itemEquality.d.ts

@@ -1,7 +1,10 @@
 export type ItemEqualityComparer<Item = any, Value = Item> = (itemValue: Item, selectedValue: Value) => boolean;
 export declare const defaultItemEquality: ItemEqualityComparer;
 export declare function compareItemEquality<Item, Value>(itemValue: Item, selectedValue: Value, comparer: ItemEqualityComparer<Item, Value>): boolean;
+export declare function isSelectedValueDirty(currentValue: unknown, initialValue: unknown, comparer: ItemEqualityComparer): boolean;
 export declare function selectedValueIncludes<Item, Value>(selectedValues: readonly Item[] | undefined | null, itemValue: Value, comparer: ItemEqualityComparer<Value, Item>): boolean;
 export declare function findItemIndex<Item, Value>(itemValues: readonly Item[] | undefined | null, selectedValue: Value, comparer: ItemEqualityComparer<Item, Value>): number;
-export declare function findSelectionIndex<Item, Value>(itemValues: readonly Item[] | undefined | null, selectedValue: Value | readonly Value[] | null | undefined, comparer: ItemEqualityComparer<Item, Value>, multiple: boolean): number | null;
+export declare function findSelectionIndex<Item, Value>(itemValues: readonly Item[], selectedValue: Value | readonly Value[] | null | undefined, comparer: ItemEqualityComparer<Item, Value>, multiple: boolean): number | null;
+/** Resolves the first selected index as items register or change. */
+export declare function resolveSelectedIndex<Item, Value>(index: number, itemValue: Item, registry: readonly Item[], selectedValues: readonly Value[], comparer: ItemEqualityComparer<Item, Value>, currentIndex: number | null): number | null;
 export declare function removeItem<Item, Value>(selectedValues: readonly Item[], itemValue: Value, comparer: ItemEqualityComparer<Value, Item>): Item[];

package/internals/itemEquality.js

@@ -7,8 +7,12 @@ exports.compareItemEquality = compareItemEquality;
 exports.defaultItemEquality = void 0;
 exports.findItemIndex = findItemIndex;
 exports.findSelectionIndex = findSelectionIndex;
+exports.isSelectedValueDirty = isSelectedValueDirty;
 exports.removeItem = removeItem;
+exports.resolveSelectedIndex = resolveSelectedIndex;
 exports.selectedValueIncludes = selectedValueIncludes;
+var _areArraysEqual = require("@base-ui/utils/areArraysEqual");
+// Compared by identity in `findSelectionIndex`; don't wrap it.
 const defaultItemEquality = (itemValue, selectedValue) => Object.is(itemValue, selectedValue);
 exports.defaultItemEquality = defaultItemEquality;
 function compareItemEquality(itemValue, selectedValue, comparer) {
@@ -17,8 +21,14 @@ function compareItemEquality(itemValue, selectedValue, comparer) {
   }
   return comparer(itemValue, selectedValue);
 }
+function isSelectedValueDirty(currentValue, initialValue, comparer) {
+  if (Array.isArray(currentValue) && Array.isArray(initialValue)) {
+    return !(0, _areArraysEqual.areArraysEqual)(currentValue, initialValue, (itemValue, initialItemValue) => compareItemEquality(itemValue, initialItemValue, comparer));
+  }
+  return currentValue !== initialValue;
+}
 function selectedValueIncludes(selectedValues, itemValue, comparer) {
-  if (!selectedValues || selectedValues.length === 0) {
+  if (!selectedValues) {
     return false;
   }
   return selectedValues.some(selectedValue => {
@@ -29,7 +39,7 @@ function selectedValueIncludes(selectedValues, itemValue, comparer) {
   });
 }
 function findItemIndex(itemValues, selectedValue, comparer) {
-  if (!itemValues || itemValues.length === 0) {
+  if (!itemValues) {
     return -1;
   }
   return itemValues.findIndex(itemValue => {
@@ -39,12 +49,37 @@ function findItemIndex(itemValues, selectedValue, comparer) {
     return compareItemEquality(itemValue, selectedValue, comparer);
   });
 }
+
+// The default comparer is `Object.is`, so the values can be indexed instead of rescanned
+// for every item. A custom comparer may match values that don't hash alike.
+function createSelectionMatcher(selectedValues, comparer) {
+  if (comparer !== defaultItemEquality) {
+    return itemValue => selectedValueIncludes(selectedValues, itemValue, comparer);
+  }
+  const index = new Set(selectedValues);
+  index.delete(undefined);
+  // `Set` treats +0 and -0 as equal; `Object.is` does not.
+  return itemValue => index.has(itemValue) && (itemValue !== 0 || selectedValues.some(v => Object.is(itemValue, v)));
+}
 function findSelectionIndex(itemValues, selectedValue, comparer, multiple) {
-  // Only unwrap in multiple mode: an array can itself be a valid single-select value.
-  const lastValue = multiple && Array.isArray(selectedValue) ? selectedValue[selectedValue.length - 1] : selectedValue;
-  const index = findItemIndex(itemValues, lastValue, comparer);
+  // Only treat the value as a list in multiple mode: an array can itself be a valid
+  // single-select value.
+  const index = multiple && Array.isArray(selectedValue) ?
+  // Anchor to the first selected item in rendered order so the index does not depend
+  // on the order in which the values were added to the array.
+  itemValues.findIndex(createSelectionMatcher(selectedValue, comparer)) : findItemIndex(itemValues, selectedValue, comparer);
   return index === -1 ? null : index;
 }
+
+/** Resolves the first selected index as items register or change. */
+function resolveSelectedIndex(index, itemValue, registry, selectedValues, comparer, currentIndex) {
+  if (selectedValueIncludes(selectedValues, itemValue, comparer)) {
+    // A later item only takes over once the current anchor stops being selected.
+    return currentIndex != null && index > currentIndex && selectedValueIncludes(selectedValues, registry[currentIndex], comparer) ? currentIndex : index;
+  }
+  // The holder re-elects the anchor once it stops being selected.
+  return index === currentIndex ? findSelectionIndex(registry, selectedValues, comparer, true) : currentIndex;
+}
 function removeItem(selectedValues, itemValue, comparer) {
   return selectedValues.filter(selectedValue => !compareItemEquality(itemValue, selectedValue, comparer));
 }

package/internals/itemEquality.mjs

@@ -1,3 +1,5 @@
+import { areArraysEqual } from '@base-ui/utils/areArraysEqual';
+// Compared by identity in `findSelectionIndex`; don't wrap it.
 export const defaultItemEquality = (itemValue, selectedValue) => Object.is(itemValue, selectedValue);
 export function compareItemEquality(itemValue, selectedValue, comparer) {
   if (itemValue == null || selectedValue == null) {
@@ -5,8 +7,14 @@ export function compareItemEquality(itemValue, selectedValue, comparer) {
   }
   return comparer(itemValue, selectedValue);
 }
+export function isSelectedValueDirty(currentValue, initialValue, comparer) {
+  if (Array.isArray(currentValue) && Array.isArray(initialValue)) {
+    return !areArraysEqual(currentValue, initialValue, (itemValue, initialItemValue) => compareItemEquality(itemValue, initialItemValue, comparer));
+  }
+  return currentValue !== initialValue;
+}
 export function selectedValueIncludes(selectedValues, itemValue, comparer) {
-  if (!selectedValues || selectedValues.length === 0) {
+  if (!selectedValues) {
     return false;
   }
   return selectedValues.some(selectedValue => {
@@ -17,7 +25,7 @@ export function selectedValueIncludes(selectedValues, itemValue, comparer) {
   });
 }
 export function findItemIndex(itemValues, selectedValue, comparer) {
-  if (!itemValues || itemValues.length === 0) {
+  if (!itemValues) {
     return -1;
   }
   return itemValues.findIndex(itemValue => {
@@ -27,12 +35,37 @@ export function findItemIndex(itemValues, selectedValue, comparer) {
     return compareItemEquality(itemValue, selectedValue, comparer);
   });
 }
+
+// The default comparer is `Object.is`, so the values can be indexed instead of rescanned
+// for every item. A custom comparer may match values that don't hash alike.
+function createSelectionMatcher(selectedValues, comparer) {
+  if (comparer !== defaultItemEquality) {
+    return itemValue => selectedValueIncludes(selectedValues, itemValue, comparer);
+  }
+  const index = new Set(selectedValues);
+  index.delete(undefined);
+  // `Set` treats +0 and -0 as equal; `Object.is` does not.
+  return itemValue => index.has(itemValue) && (itemValue !== 0 || selectedValues.some(v => Object.is(itemValue, v)));
+}
 export function findSelectionIndex(itemValues, selectedValue, comparer, multiple) {
-  // Only unwrap in multiple mode: an array can itself be a valid single-select value.
-  const lastValue = multiple && Array.isArray(selectedValue) ? selectedValue[selectedValue.length - 1] : selectedValue;
-  const index = findItemIndex(itemValues, lastValue, comparer);
+  // Only treat the value as a list in multiple mode: an array can itself be a valid
+  // single-select value.
+  const index = multiple && Array.isArray(selectedValue) ?
+  // Anchor to the first selected item in rendered order so the index does not depend
+  // on the order in which the values were added to the array.
+  itemValues.findIndex(createSelectionMatcher(selectedValue, comparer)) : findItemIndex(itemValues, selectedValue, comparer);
   return index === -1 ? null : index;
 }
+
+/** Resolves the first selected index as items register or change. */
+export function resolveSelectedIndex(index, itemValue, registry, selectedValues, comparer, currentIndex) {
+  if (selectedValueIncludes(selectedValues, itemValue, comparer)) {
+    // A later item only takes over once the current anchor stops being selected.
+    return currentIndex != null && index > currentIndex && selectedValueIncludes(selectedValues, registry[currentIndex], comparer) ? currentIndex : index;
+  }
+  // The holder re-elects the anchor once it stops being selected.
+  return index === currentIndex ? findSelectionIndex(registry, selectedValues, comparer, true) : currentIndex;
+}
 export function removeItem(selectedValues, itemValue, comparer) {
   return selectedValues.filter(selectedValue => !compareItemEquality(itemValue, selectedValue, comparer));
 }

package/internals/labelable-provider/LabelableContext.d.mts

@@ -3,10 +3,12 @@ import { HTMLProps } from "../types.mjs";
 export interface LabelableContext {
   /**
    * The `id` of the labelable element.
-   * When `null` the association is implicit.
+   * When `null` the label omits `htmlFor`, either because the association is implicit or
+   * because the control takes its name from `aria-labelledby`.
    */
   controlId: string | null | undefined;
   registerControlId: (source: symbol, id: string | null | undefined) => void;
+  resetControlId: () => void;
   /**
    * The `id` of the label.
    */

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

@@ -3,10 +3,12 @@ import { HTMLProps } from "../types.js";
 export interface LabelableContext {
   /**
    * The `id` of the labelable element.
-   * When `null` the association is implicit.
+   * When `null` the label omits `htmlFor`, either because the association is implicit or
+   * because the control takes its name from `aria-labelledby`.
    */
   controlId: string | null | undefined;
   registerControlId: (source: symbol, id: string | null | undefined) => void;
+  resetControlId: () => void;
   /**
    * The `id` of the label.
    */

package/internals/labelable-provider/LabelableContext.js

@@ -16,6 +16,7 @@ var _noop = require("../noop");
 const LabelableContext = exports.LabelableContext = /*#__PURE__*/React.createContext({
   controlId: undefined,
   registerControlId: _noop.NOOP,
+  resetControlId: _noop.NOOP,
   labelId: undefined,
   setLabelId: _noop.NOOP,
   messageIds: [],

package/internals/labelable-provider/LabelableContext.mjs

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

package/internals/labelable-provider/LabelableProvider.d.mts

@@ -2,8 +2,6 @@ import * as React from 'react';
 export declare const LabelableProvider: React.FC<LabelableProvider.Props>;
 export interface LabelableProviderState {}
 export interface LabelableProviderProps {
-  controlId?: string | null | undefined;
-  labelId?: string | undefined;
   children?: React.ReactNode;
 }
 export declare namespace LabelableProvider {

package/internals/labelable-provider/LabelableProvider.d.ts

@@ -2,8 +2,6 @@ import * as React from 'react';
 export declare const LabelableProvider: React.FC<LabelableProvider.Props>;
 export interface LabelableProviderState {}
 export interface LabelableProviderProps {
-  controlId?: string | null | undefined;
-  labelId?: string | undefined;
   children?: React.ReactNode;
 }
 export declare namespace LabelableProvider {

package/internals/labelable-provider/LabelableProvider.js

@@ -14,10 +14,13 @@ var _LabelableContext = require("./LabelableContext");
 var _jsxRuntime = require("react/jsx-runtime");
 const LabelableProvider = exports.LabelableProvider = function LabelableProvider(props) {
   const defaultId = (0, _useBaseUiId.useBaseUiId)();
-  const initialControlId = props.controlId === undefined ? defaultId : props.controlId;
-  const [controlId, setControlIdState] = React.useState(initialControlId);
-  const [labelId, setLabelId] = React.useState(props.labelId);
+  const [controlIdState, setControlIdState] = React.useState(defaultId);
+  const [labelId, setLabelId] = React.useState();
   const [messageIds, setMessageIds] = React.useState([]);
+
+  // `undefined` only survives until the React 17 fallback id is assigned. Do not use `??`:
+  // `null` deliberately suppresses `htmlFor`.
+  const controlId = controlIdState === undefined ? defaultId : controlIdState;
   const registrationsRef = (0, _useRefWithInit.useRefWithInit)(() => new Map());
   const {
     messageIds: parentMessageIds
@@ -26,20 +29,20 @@ const LabelableProvider = exports.LabelableProvider = function LabelableProvider
     const registrations = registrationsRef.current;
     if (nextId === undefined) {
       registrations.delete(source);
-      return;
+    } else {
+      registrations.set(source, nextId);
     }
-    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;
+        // A hidden subtree (React Activity, a re-suspending Suspense) destroys effects but keeps
+        // its DOM, so preserve its selected control.
+        return prev;
       }
       let nextControlId;
       for (const id of registrations.values()) {
-        if (prev !== undefined && id === prev) {
+        // Keep the current selection while it is still registered, so rapid unmount/remount
+        // cycles don't churn it.
+        if (id === prev) {
           return prev;
         }
         if (nextControlId === undefined) {
@@ -49,6 +52,11 @@ const LabelableProvider = exports.LabelableProvider = function LabelableProvider
       return nextControlId;
     });
   });
+  const resetControlId = (0, _useStableCallback.useStableCallback)(() => {
+    if (registrationsRef.current.size === 0) {
+      setControlIdState(defaultId);
+    }
+  });
   const getDescriptionProps = React.useCallback(externalProps => {
     const ids = externalProps['aria-describedby'] ? externalProps['aria-describedby'].split(' ') : [];
     ids.push(...parentMessageIds, ...messageIds);
@@ -60,12 +68,13 @@ const LabelableProvider = exports.LabelableProvider = function LabelableProvider
   const contextValue = React.useMemo(() => ({
     controlId,
     registerControlId,
+    resetControlId,
     labelId,
     setLabelId,
     messageIds,
     setMessageIds,
     getDescriptionProps
-  }), [controlId, registerControlId, labelId, setLabelId, messageIds, setMessageIds, getDescriptionProps]);
+  }), [controlId, registerControlId, resetControlId, labelId, setLabelId, messageIds, setMessageIds, getDescriptionProps]);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_LabelableContext.LabelableContext.Provider, {
     value: contextValue,
     children: props.children