@base-ui/react 1.6.0 → 1.8.0

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

@@ -1,26 +1,27 @@
 "use strict";
 'use client';
 
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.useRegisterFieldControl = useRegisterFieldControl;
-var React = _interopRequireWildcard(require("react"));
 var _useIsoLayoutEffect = require("@base-ui/utils/useIsoLayoutEffect");
+var _useRefWithInit = require("@base-ui/utils/useRefWithInit");
 var _FieldRootContext = require("../field-root-context/FieldRootContext");
 function useRegisterFieldControl(controlRef, id, value, getFormValueOverride, enabled = true, name) {
   const {
     registerFieldControl
   } = (0, _FieldRootContext.useFieldRootContext)();
-  const sourceRef = React.useRef(null);
-  if (!sourceRef.current) {
-    sourceRef.current = Symbol();
-  }
+  const sourceRef = (0, _useRefWithInit.useRefWithInit)(() => Symbol());
+
+  // Re-register without unregistering first: re-registration with the same id updates the
+  // form's fields Map entry in place, while a delete + re-add would move the field to the
+  // end of the Map every time its value changes.
   (0, _useIsoLayoutEffect.useIsoLayoutEffect)(() => {
     const source = sourceRef.current;
-    if (!source || !enabled) {
-      return undefined;
+    if (!enabled) {
+      registerFieldControl(source, undefined);
+      return;
     }
     const registration = {
       controlRef,
@@ -30,8 +31,11 @@ function useRegisterFieldControl(controlRef, id, value, getFormValueOverride, en
       value
     };
     registerFieldControl(source, registration);
+  }, [controlRef, enabled, getFormValueOverride, id, name, registerFieldControl, sourceRef, value]);
+  (0, _useIsoLayoutEffect.useIsoLayoutEffect)(() => {
+    const source = sourceRef.current;
     return () => {
       registerFieldControl(source, undefined);
     };
-  }, [controlRef, enabled, getFormValueOverride, id, name, registerFieldControl, value]);
+  }, [registerFieldControl, sourceRef]);
 }

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

@@ -1,20 +1,22 @@
 'use client';
 
-import * as React from 'react';
 import { useIsoLayoutEffect } from '@base-ui/utils/useIsoLayoutEffect';
+import { useRefWithInit } from '@base-ui/utils/useRefWithInit';
 import { useFieldRootContext } from "../field-root-context/FieldRootContext.mjs";
 export function useRegisterFieldControl(controlRef, id, value, getFormValueOverride, enabled = true, name) {
   const {
     registerFieldControl
   } = useFieldRootContext();
-  const sourceRef = React.useRef(null);
-  if (!sourceRef.current) {
-    sourceRef.current = Symbol();
-  }
+  const sourceRef = useRefWithInit(() => Symbol());
+
+  // Re-register without unregistering first: re-registration with the same id updates the
+  // form's fields Map entry in place, while a delete + re-add would move the field to the
+  // end of the Map every time its value changes.
   useIsoLayoutEffect(() => {
     const source = sourceRef.current;
-    if (!source || !enabled) {
-      return undefined;
+    if (!enabled) {
+      registerFieldControl(source, undefined);
+      return;
     }
     const registration = {
       controlRef,
@@ -24,8 +26,11 @@ export function useRegisterFieldControl(controlRef, id, value, getFormValueOverr
       value
     };
     registerFieldControl(source, registration);
+  }, [controlRef, enabled, getFormValueOverride, id, name, registerFieldControl, sourceRef, value]);
+  useIsoLayoutEffect(() => {
+    const source = sourceRef.current;
     return () => {
       registerFieldControl(source, undefined);
     };
-  }, [controlRef, enabled, getFormValueOverride, id, name, registerFieldControl, value]);
+  }, [registerFieldControl, sourceRef]);
 }

package/internals/field-root-context/FieldRootContext.d.mts

@@ -9,20 +9,13 @@ export interface FieldRootContext {
   validityData: FieldValidityData;
   setValidityData: React.Dispatch<React.SetStateAction<FieldValidityData>>;
   disabled: boolean | undefined;
-  touched: boolean;
   setTouched: React.Dispatch<React.SetStateAction<boolean>>;
-  dirty: boolean;
   setDirty: React.Dispatch<React.SetStateAction<boolean>>;
-  filled: boolean;
   setFilled: React.Dispatch<React.SetStateAction<boolean>>;
-  focused: boolean;
   setFocused: React.Dispatch<React.SetStateAction<boolean>>;
-  validate: (value: unknown, formValues: Record<string, unknown>) => string | string[] | null | Promise<string | string[] | null>;
   validationMode: Form.ValidationMode;
-  validationDebounceTime: number;
   shouldValidateOnChange: () => boolean;
   state: FieldRootState;
-  markedDirtyRef: React.RefObject<boolean>;
   registerFieldControl: (source: symbol, registration: FieldControlRegistration | undefined) => void;
   validation: UseFieldValidationReturnValue;
 }

package/internals/field-root-context/FieldRootContext.d.ts

@@ -9,20 +9,13 @@ export interface FieldRootContext {
   validityData: FieldValidityData;
   setValidityData: React.Dispatch<React.SetStateAction<FieldValidityData>>;
   disabled: boolean | undefined;
-  touched: boolean;
   setTouched: React.Dispatch<React.SetStateAction<boolean>>;
-  dirty: boolean;
   setDirty: React.Dispatch<React.SetStateAction<boolean>>;
-  filled: boolean;
   setFilled: React.Dispatch<React.SetStateAction<boolean>>;
-  focused: boolean;
   setFocused: React.Dispatch<React.SetStateAction<boolean>>;
-  validate: (value: unknown, formValues: Record<string, unknown>) => string | string[] | null | Promise<string | string[] | null>;
   validationMode: Form.ValidationMode;
-  validationDebounceTime: number;
   shouldValidateOnChange: () => boolean;
   state: FieldRootState;
-  markedDirtyRef: React.RefObject<boolean>;
   registerFieldControl: (source: symbol, registration: FieldControlRegistration | undefined) => void;
   validation: UseFieldValidationReturnValue;
 }

package/internals/field-root-context/FieldRootContext.js

@@ -25,29 +25,22 @@ const DEFAULT_FIELD_ROOT_CONTEXT = exports.DEFAULT_FIELD_ROOT_CONTEXT = {
   },
   setValidityData: _noop.NOOP,
   disabled: undefined,
-  touched: _constants.DEFAULT_FIELD_STATE_ATTRIBUTES.touched,
   setTouched: _noop.NOOP,
-  dirty: _constants.DEFAULT_FIELD_STATE_ATTRIBUTES.dirty,
   setDirty: _noop.NOOP,
-  filled: _constants.DEFAULT_FIELD_STATE_ATTRIBUTES.filled,
   setFilled: _noop.NOOP,
-  focused: _constants.DEFAULT_FIELD_STATE_ATTRIBUTES.focused,
   setFocused: _noop.NOOP,
-  validate: () => null,
   validationMode: 'onSubmit',
-  validationDebounceTime: 0,
   shouldValidateOnChange: () => false,
   state: _constants.DEFAULT_FIELD_ROOT_STATE,
-  markedDirtyRef: {
-    current: false
-  },
   registerFieldControl: _noop.NOOP,
   validation: {
     getValidationProps: (_disabled, props = _empty.EMPTY_OBJECT) => props,
     inputRef: {
       current: null
     },
+    registeredInputs: new Map(),
     registerInput: _noop.NOOP,
+    getInputControl: () => null,
     commit: async () => {},
     change: _noop.NOOP
   }

package/internals/field-root-context/FieldRootContext.mjs

@@ -4,7 +4,7 @@ import _formatErrorMessage from "@base-ui/utils/formatErrorMessage";
 import * as React from 'react';
 import { EMPTY_OBJECT } from '@base-ui/utils/empty';
 import { NOOP } from "../noop.mjs";
-import { DEFAULT_FIELD_ROOT_STATE, DEFAULT_FIELD_STATE_ATTRIBUTES, DEFAULT_VALIDITY_STATE } from "../field-constants/constants.mjs";
+import { DEFAULT_FIELD_ROOT_STATE, DEFAULT_VALIDITY_STATE } from "../field-constants/constants.mjs";
 export const DEFAULT_FIELD_ROOT_CONTEXT = {
   invalid: undefined,
   name: undefined,
@@ -17,29 +17,22 @@ export const DEFAULT_FIELD_ROOT_CONTEXT = {
   },
   setValidityData: NOOP,
   disabled: undefined,
-  touched: DEFAULT_FIELD_STATE_ATTRIBUTES.touched,
   setTouched: NOOP,
-  dirty: DEFAULT_FIELD_STATE_ATTRIBUTES.dirty,
   setDirty: NOOP,
-  filled: DEFAULT_FIELD_STATE_ATTRIBUTES.filled,
   setFilled: NOOP,
-  focused: DEFAULT_FIELD_STATE_ATTRIBUTES.focused,
   setFocused: NOOP,
-  validate: () => null,
   validationMode: 'onSubmit',
-  validationDebounceTime: 0,
   shouldValidateOnChange: () => false,
   state: DEFAULT_FIELD_ROOT_STATE,
-  markedDirtyRef: {
-    current: false
-  },
   registerFieldControl: NOOP,
   validation: {
     getValidationProps: (_disabled, props = EMPTY_OBJECT) => props,
     inputRef: {
       current: null
     },
+    registeredInputs: new Map(),
     registerInput: NOOP,
+    getInputControl: () => null,
     commit: async () => {},
     change: NOOP
   }

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

@@ -5,6 +5,7 @@ export type Errors = Record<string, string | string[]>;
 export interface FormContext {
   errors: Errors;
   clearErrors: (name: string | undefined) => void;
+  elementRef: React.RefObject<HTMLFormElement | null>;
   formRef: React.RefObject<{
     fields: Map<string, {
       name: string | undefined;
@@ -19,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

@@ -5,6 +5,7 @@ export type Errors = Record<string, string | string[]>;
 export interface FormContext {
   errors: Errors;
   clearErrors: (name: string | undefined) => void;
+  elementRef: React.RefObject<HTMLFormElement | null>;
   formRef: React.RefObject<{
     fields: Map<string, {
       name: string | undefined;
@@ -19,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

@@ -10,6 +10,9 @@ exports.useFormContext = useFormContext;
 var React = _interopRequireWildcard(require("react"));
 var _noop = require("../noop");
 const FormContext = exports.FormContext = /*#__PURE__*/React.createContext({
+  elementRef: {
+    current: null
+  },
   formRef: {
     current: {
       fields: new Map()
@@ -18,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

@@ -3,6 +3,9 @@
 import * as React from 'react';
 import { NOOP } from "../noop.mjs";
 export const FormContext = /*#__PURE__*/React.createContext({
+  elementRef: {
+    current: null
+  },
   formRef: {
     current: {
       fields: new Map()
@@ -11,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/{utils → internals}/getDisabledMountTransitionStyles.d.mts

@@ -1,4 +1,4 @@
-import type { TransitionStatus } from "../internals/useTransitionStatus.mjs";
+import type { TransitionStatus } from "./useTransitionStatus.mjs";
 export declare function getDisabledMountTransitionStyles(transitionStatus: TransitionStatus): {
   style?: React.CSSProperties | undefined;
 };

package/{utils → internals}/getDisabledMountTransitionStyles.d.ts

@@ -1,4 +1,4 @@
-import type { TransitionStatus } from "../internals/useTransitionStatus.js";
+import type { TransitionStatus } from "./useTransitionStatus.js";
 export declare function getDisabledMountTransitionStyles(transitionStatus: TransitionStatus): {
   style?: React.CSSProperties | undefined;
 };

package/{utils → internals}/getDisabledMountTransitionStyles.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.getDisabledMountTransitionStyles = getDisabledMountTransitionStyles;
 var _empty = require("@base-ui/utils/empty");
-var _constants = require("../internals/constants");
+var _constants = require("./constants");
 function getDisabledMountTransitionStyles(transitionStatus) {
   return transitionStatus === 'starting' ? _constants.DISABLED_TRANSITIONS_STYLE : _empty.EMPTY_OBJECT;
 }

package/{utils → internals}/getDisabledMountTransitionStyles.mjs

@@ -1,5 +1,5 @@
 import { EMPTY_OBJECT } from '@base-ui/utils/empty';
-import { DISABLED_TRANSITIONS_STYLE } from "../internals/constants.mjs";
+import { DISABLED_TRANSITIONS_STYLE } from "./constants.mjs";
 export function getDisabledMountTransitionStyles(transitionStatus) {
   return transitionStatus === 'starting' ? DISABLED_TRANSITIONS_STYLE : EMPTY_OBJECT;
 }

package/internals/itemEquality.d.mts

@@ -1,6 +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[], 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,6 +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[], 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

@@ -6,8 +6,13 @@ Object.defineProperty(exports, "__esModule", {
 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) {
@@ -16,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 => {
@@ -28,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 => {
@@ -38,6 +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 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,6 +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 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

@@ -1,12 +1,7 @@
 import * as React from 'react';
-/**
- * @internal
- */
 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

@@ -1,12 +1,7 @@
 import * as React from 'react';
-/**
- * @internal
- */
 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 {