@base-ui/react 1.6.0 → 1.7.0

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

@@ -12,7 +12,7 @@ export function useFieldControlRegistration(params) {
     markedDirtyRef,
     name,
     setRegisteredFieldName,
-    setRegisteredFieldId,
+    registeredFieldIdRef,
     setValidityData,
     validityData
   } = params;
@@ -21,7 +21,7 @@ export function useFieldControlRegistration(params) {
   } = useFormContext();
   const activeFieldControlSourceRef = React.useRef(null);
   const registrationRef = React.useRef(null);
-  const fallbackControlRef = React.useRef(null);
+  const initialValueCapturedRef = React.useRef(false);
   const getValueForForm = useStableCallback(() => {
     const registration = registrationRef.current;
     if (!registration) {
@@ -52,7 +52,7 @@ export function useFieldControlRegistration(params) {
     formRef.current.fields.set(registration.id, {
       getValue: getValueForForm,
       name: name ?? registration.name,
-      controlRef: registration.controlRef ?? fallbackControlRef,
+      controlRef: registration.controlRef,
       validityData: getCombinedFieldValidityData(validityData, invalid),
       validate
     });
@@ -62,18 +62,23 @@ export function useFieldControlRegistration(params) {
       formRef.current.fields.delete(id);
     }
   }
-  function syncInitialValue() {
-    const registration = registrationRef.current;
-    if (!registration) {
+
+  // The baseline belongs to the field, not to a control instance: registration re-runs on every
+  // value change, and a control that unmounts and remounts (or is swapped for another one) comes
+  // back as a brand new registration. Capturing more than once would turn whichever value the
+  // control happens to hold at that point into the initial value, so a modified field would read
+  // pristine and its real initial value would read dirty. Consumers that want a fresh baseline
+  // remount or key `<Field.Root>` itself.
+  function captureInitialValue(registration) {
+    if (initialValueCapturedRef.current) {
       return;
     }
+    initialValueCapturedRef.current = true;
     const initialValue = getRegistrationValue(registration);
-    if (validityData.initialValue === null && initialValue !== null) {
-      setValidityData(prev => ({
-        ...prev,
-        initialValue
-      }));
-    }
+    setValidityData(prev => prev.initialValue === initialValue ? prev : {
+      ...prev,
+      initialValue
+    });
   }
   useIsoLayoutEffect(() => {
     const registration = registrationRef.current;
@@ -84,7 +89,7 @@ export function useFieldControlRegistration(params) {
     formRef.current.fields.set(registration.id, {
       getValue: getValueForForm,
       name: name ?? registration.name,
-      controlRef: registration.controlRef ?? fallbackControlRef,
+      controlRef: registration.controlRef,
       validityData: getCombinedFieldValidityData(validityData, invalid),
       validate
     });
@@ -105,7 +110,7 @@ export function useFieldControlRegistration(params) {
         deleteRegistration();
         registrationRef.current = null;
         setRegisteredFieldName(undefined);
-        setRegisteredFieldId(undefined);
+        registeredFieldIdRef.current = undefined;
       }
       return;
     }
@@ -115,11 +120,11 @@ export function useFieldControlRegistration(params) {
     if (!name) {
       setRegisteredFieldName(registration.name);
     }
-    setRegisteredFieldId(registration.id);
+    registeredFieldIdRef.current = registration.id;
     if (previousId && previousId !== registration.id) {
       deleteRegistration(previousId);
     }
-    syncInitialValue();
+    captureInitialValue(registration);
     refreshRegistration();
   });
   return [validate, register];

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/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;

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;

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()

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()

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

@@ -3,4 +3,5 @@ export declare const defaultItemEquality: ItemEqualityComparer;
 export declare function compareItemEquality<Item, Value>(itemValue: Item, selectedValue: Value, comparer: ItemEqualityComparer<Item, Value>): 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 removeItem<Item, Value>(selectedValues: readonly Item[], itemValue: Value, comparer: ItemEqualityComparer<Value, Item>): Item[];

package/internals/itemEquality.d.ts

@@ -3,4 +3,5 @@ export declare const defaultItemEquality: ItemEqualityComparer;
 export declare function compareItemEquality<Item, Value>(itemValue: Item, selectedValue: Value, comparer: ItemEqualityComparer<Item, Value>): 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 removeItem<Item, Value>(selectedValues: readonly Item[], itemValue: Value, comparer: ItemEqualityComparer<Value, Item>): Item[];

package/internals/itemEquality.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.compareItemEquality = compareItemEquality;
 exports.defaultItemEquality = void 0;
 exports.findItemIndex = findItemIndex;
+exports.findSelectionIndex = findSelectionIndex;
 exports.removeItem = removeItem;
 exports.selectedValueIncludes = selectedValueIncludes;
 const defaultItemEquality = (itemValue, selectedValue) => Object.is(itemValue, selectedValue);
@@ -38,6 +39,12 @@ function findItemIndex(itemValues, selectedValue, comparer) {
     return compareItemEquality(itemValue, selectedValue, comparer);
   });
 }
+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);
+  return index === -1 ? null : index;
+}
 function removeItem(selectedValues, itemValue, comparer) {
   return selectedValues.filter(selectedValue => !compareItemEquality(itemValue, selectedValue, comparer));
 }

package/internals/itemEquality.mjs

@@ -27,6 +27,12 @@ export function findItemIndex(itemValues, selectedValue, comparer) {
     return compareItemEquality(itemValue, selectedValue, comparer);
   });
 }
+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);
+  return index === -1 ? null : index;
+}
 export function removeItem(selectedValues, itemValue, comparer) {
   return selectedValues.filter(selectedValue => !compareItemEquality(itemValue, selectedValue, comparer));
 }

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

@@ -1,7 +1,4 @@
 import * as React from 'react';
-/**
- * @internal
- */
 export declare const LabelableProvider: React.FC<LabelableProvider.Props>;
 export interface LabelableProviderState {}
 export interface LabelableProviderProps {

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

@@ -1,7 +1,4 @@
 import * as React from 'react';
-/**
- * @internal
- */
 export declare const LabelableProvider: React.FC<LabelableProvider.Props>;
 export interface LabelableProviderState {}
 export interface LabelableProviderProps {

package/internals/labelable-provider/LabelableProvider.js

@@ -12,9 +12,6 @@ var _useRefWithInit = require("@base-ui/utils/useRefWithInit");
 var _useBaseUiId = require("../useBaseUiId");
 var _LabelableContext = require("./LabelableContext");
 var _jsxRuntime = require("react/jsx-runtime");
-/**
- * @internal
- */
 const LabelableProvider = exports.LabelableProvider = function LabelableProvider(props) {
   const defaultId = (0, _useBaseUiId.useBaseUiId)();
   const initialControlId = props.controlId === undefined ? defaultId : props.controlId;

package/internals/labelable-provider/LabelableProvider.mjs

@@ -5,10 +5,6 @@ import { useStableCallback } from '@base-ui/utils/useStableCallback';
 import { useRefWithInit } from '@base-ui/utils/useRefWithInit';
 import { useBaseUiId } from "../useBaseUiId.mjs";
 import { LabelableContext, useLabelableContext } from "./LabelableContext.mjs";
-
-/**
- * @internal
- */
 import { jsx as _jsx } from "react/jsx-runtime";
 export const LabelableProvider = function LabelableProvider(props) {
   const defaultId = useBaseUiId();

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

@@ -1,7 +1,4 @@
 import * as React from 'react';
-/**
- * @internal
- */
 export declare function useAriaLabelledBy(explicitAriaLabelledBy: string | undefined, labelId: string | undefined, labelSourceRef: React.RefObject<LabelSource | null>, enableFallback?: boolean, labelSourceId?: string): string | undefined;
 type LabelSource = HTMLElement & {
   labels?: NodeListOf<HTMLLabelElement> | null | undefined;

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

@@ -1,7 +1,4 @@
 import * as React from 'react';
-/**
- * @internal
- */
 export declare function useAriaLabelledBy(explicitAriaLabelledBy: string | undefined, labelId: string | undefined, labelSourceRef: React.RefObject<LabelSource | null>, enableFallback?: boolean, labelSourceId?: string): string | undefined;
 type LabelSource = HTMLElement & {
   labels?: NodeListOf<HTMLLabelElement> | null | undefined;

package/internals/labelable-provider/useAriaLabelledBy.js

@@ -9,9 +9,6 @@ exports.useAriaLabelledBy = useAriaLabelledBy;
 var React = _interopRequireWildcard(require("react"));
 var _useIsoLayoutEffect = require("@base-ui/utils/useIsoLayoutEffect");
 var _useBaseUiId = require("../useBaseUiId");
-/**
- * @internal
- */
 function useAriaLabelledBy(explicitAriaLabelledBy, labelId, labelSourceRef, enableFallback = true, labelSourceId) {
   const [fallbackAriaLabelledBy, setFallbackAriaLabelledBy] = React.useState();
   const generatedLabelId = (0, _useBaseUiId.useBaseUiId)(labelSourceId ? `${labelSourceId}-label` : undefined);

package/internals/labelable-provider/useAriaLabelledBy.mjs

@@ -3,10 +3,6 @@
 import * as React from 'react';
 import { useIsoLayoutEffect } from '@base-ui/utils/useIsoLayoutEffect';
 import { useBaseUiId } from "../useBaseUiId.mjs";
-
-/**
- * @internal
- */
 export function useAriaLabelledBy(explicitAriaLabelledBy, labelId, labelSourceRef, enableFallback = true, labelSourceId) {
   const [fallbackAriaLabelledBy, setFallbackAriaLabelledBy] = React.useState();
   const generatedLabelId = useBaseUiId(labelSourceId ? `${labelSourceId}-label` : undefined);

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

@@ -14,7 +14,7 @@ export interface UseLabelParameters {
   /**
    * Additional callback to sync the current label id with local component state/store.
    */
-  setLabelId?: ((nextLabelId: string | undefined) => void) | undefined;
+  setLabelId?: React.Dispatch<React.SetStateAction<string | undefined>> | undefined;
   /**
    * Custom focus handler for non-native labels.
    * If omitted, focus behavior targets the resolved control id.

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

@@ -14,7 +14,7 @@ export interface UseLabelParameters {
   /**
    * Additional callback to sync the current label id with local component state/store.
    */
-  setLabelId?: ((nextLabelId: string | undefined) => void) | undefined;
+  setLabelId?: React.Dispatch<React.SetStateAction<string | undefined>> | undefined;
   /**
    * Custom focus handler for non-native labels.
    * If omitted, focus behavior targets the resolved control id.

package/internals/labelable-provider/useLabelableId.js

@@ -26,7 +26,7 @@ function useLabelableId(params = {}) {
   } = (0, _LabelableContext.useLabelableContext)();
   const defaultId = (0, _useBaseUiId.useBaseUiId)(id);
   const controlIdForEffect = implicit ? controlId : undefined;
-  const controlSourceRef = (0, _useRefWithInit.useRefWithInit)(() => Symbol('labelable-control'));
+  const controlSourceRef = (0, _useRefWithInit.useRefWithInit)(() => Symbol());
   const hasRegisteredRef = React.useRef(false);
   const hadExplicitIdRef = React.useRef(id != null);
   const unregisterControlId = (0, _useStableCallback.useStableCallback)(() => {

package/internals/labelable-provider/useLabelableId.mjs

@@ -20,7 +20,7 @@ export function useLabelableId(params = {}) {
   } = useLabelableContext();
   const defaultId = useBaseUiId(id);
   const controlIdForEffect = implicit ? controlId : undefined;
-  const controlSourceRef = useRefWithInit(() => Symbol('labelable-control'));
+  const controlSourceRef = useRefWithInit(() => Symbol());
   const hasRegisteredRef = React.useRef(false);
   const hadExplicitIdRef = React.useRef(id != null);
   const unregisterControlId = useStableCallback(() => {

package/internals/prehydrationScript.stub.d.mts

@@ -0,0 +1 @@
+export declare const script = "";

package/internals/prehydrationScript.stub.d.ts

@@ -0,0 +1 @@
+export declare const script = "";

package/internals/prehydrationScript.stub.js

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.script = void 0;
+// Shared browser-bundle replacement for the per-component `prehydrationScript.min.ts` files,
+// selected via the `browser` condition of every `#prehydration/*` entry in package.json
+// `imports`. The real scripts only ever execute from server-rendered HTML, so client bundles
+// don't need their contents. See `internals/PrehydrationScript.tsx` for why an empty script is
+// still rendered during hydration.
+const script = exports.script = '';

package/internals/prehydrationScript.stub.mjs

@@ -0,0 +1,6 @@
+// Shared browser-bundle replacement for the per-component `prehydrationScript.min.ts` files,
+// selected via the `browser` condition of every `#prehydration/*` entry in package.json
+// `imports`. The real scripts only ever execute from server-rendered HTML, so client bundles
+// don't need their contents. See `internals/PrehydrationScript.tsx` for why an empty script is
+// still rendered during hydration.
+export const script = '';

package/internals/stateAttributesMapping.d.mts

@@ -1,7 +1,7 @@
 import type { TransitionStatus } from "./useTransitionStatus.mjs";
 export declare enum TransitionStatusDataAttributes {
   /**
-   * Present when the component is animating in.
+   * Present when the component begins animating in.
    */
   startingStyle = "data-starting-style",
   /**

package/internals/stateAttributesMapping.d.ts

@@ -1,7 +1,7 @@
 import type { TransitionStatus } from "./useTransitionStatus.js";
 export declare enum TransitionStatusDataAttributes {
   /**
-   * Present when the component is animating in.
+   * Present when the component begins animating in.
    */
   startingStyle = "data-starting-style",
   /**

package/internals/stateAttributesMapping.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.transitionStatusMapping = exports.TransitionStatusDataAttributes = void 0;
 let TransitionStatusDataAttributes = exports.TransitionStatusDataAttributes = /*#__PURE__*/function (TransitionStatusDataAttributes) {
   /**
-   * Present when the component is animating in.
+   * Present when the component begins animating in.
    */
   TransitionStatusDataAttributes["startingStyle"] = "data-starting-style";
   /**
@@ -16,10 +16,10 @@ let TransitionStatusDataAttributes = exports.TransitionStatusDataAttributes = /*
   return TransitionStatusDataAttributes;
 }({});
 const STARTING_HOOK = {
-  [TransitionStatusDataAttributes.startingStyle]: ''
+  'data-starting-style': ''
 };
 const ENDING_HOOK = {
-  [TransitionStatusDataAttributes.endingStyle]: ''
+  'data-ending-style': ''
 };
 const transitionStatusMapping = exports.transitionStatusMapping = {
   transitionStatus(value) {