@base-ui/react 1.6.0 → 1.7.0

package/internals/composite/root/CompositeRoot.d.ts

@@ -4,9 +4,6 @@ import type { BaseUIComponentProps, BaseUIEvent } from "../../types.js";
 import type { ModifierKey } from "../composite.js";
 import type { CompositeGridNavigator } from "./gridNavigation.js";
 import { StateAttributesMapping } from "../../getStateAttributesProps.js";
-/**
- * @internal
- */
 export declare function CompositeRoot<Metadata extends {}, State extends Record<string, any>>(componentProps: CompositeRoot.Props<Metadata, State>): import("react/jsx-runtime").JSX.Element;
 export interface CompositeRootState {}
 export interface CompositeRootProps<Metadata, State extends Record<string, any>> extends Pick<BaseUIComponentProps<'div', State>, 'render' | 'className' | 'children' | 'style'> {
@@ -22,7 +19,7 @@ export interface CompositeRootProps<Metadata, State extends Record<string, any>>
   highlightedIndex?: number | undefined;
   onHighlightedIndexChange?: ((index: number) => void) | undefined;
   enableHomeAndEndKeys?: boolean | undefined;
-  onMapChange?: ((newMap: Map<Node, CompositeMetadata<Metadata> | null>) => void) | undefined;
+  onMapChange?: ((newMap: Map<Node, CompositeMetadata<Metadata>>) => void) | undefined;
   onKeyDown?: ((event: BaseUIEvent<React.KeyboardEvent>) => void) | undefined;
   stopEventPropagation?: boolean | undefined;
   rootRef?: React.RefObject<HTMLElement | null> | undefined;

package/internals/composite/root/CompositeRoot.js

@@ -14,9 +14,6 @@ var _CompositeRootContext = require("./CompositeRootContext");
 var _useRenderElement = require("../../useRenderElement");
 var _DirectionContext = require("../../direction-context/DirectionContext");
 var _jsxRuntime = require("react/jsx-runtime");
-/**
- * @internal
- */
 function CompositeRoot(componentProps) {
   const {
     render,

package/internals/composite/root/CompositeRoot.mjs

@@ -8,9 +8,6 @@ import { CompositeRootContext } from "./CompositeRootContext.mjs";
 import { useRenderElement } from "../../useRenderElement.mjs";
 import { useDirection } from "../../direction-context/DirectionContext.mjs";
 import { jsx as _jsx } from "react/jsx-runtime";
-/**
- * @internal
- */
 export function CompositeRoot(componentProps) {
   const {
     render,

package/internals/composite/root/useCompositeRoot.d.mts

@@ -42,7 +42,6 @@ export declare function useCompositeRoot(params: UseCompositeRootParameters): {
   highlightedIndex: number;
   onHighlightedIndexChange: (index: any, shouldScrollIntoView?: any) => void;
   elementsRef: React.RefObject<(HTMLElement | null)[]>;
-  disabledIndices: number[] | undefined;
   onMapChange: (map: Map<Element, CompositeMetadata<any>>) => void;
   relayKeyboardEvent: (event: React.KeyboardEvent) => void;
 };

package/internals/composite/root/useCompositeRoot.d.ts

@@ -42,7 +42,6 @@ export declare function useCompositeRoot(params: UseCompositeRootParameters): {
   highlightedIndex: number;
   onHighlightedIndexChange: (index: any, shouldScrollIntoView?: any) => void;
   elementsRef: React.RefObject<(HTMLElement | null)[]>;
-  disabledIndices: number[] | undefined;
   onMapChange: (map: Map<Element, CompositeMetadata<any>>) => void;
   relayKeyboardEvent: (event: React.KeyboardEvent) => void;
 };

package/internals/composite/root/useCompositeRoot.js

@@ -26,7 +26,7 @@ function useCompositeRoot(params) {
     onHighlightedIndexChange: externalSetHighlightedIndex,
     rootRef: externalRef,
     enableHomeAndEndKeys = false,
-    stopEventPropagation = false,
+    stopEventPropagation,
     disabledIndices,
     modifierKeys = EMPTY_ARRAY
   } = params;
@@ -51,8 +51,10 @@ function useCompositeRoot(params) {
     hasSetDefaultIndexRef.current = true;
     const sortedElements = Array.from(map.keys());
     const activeItem = sortedElements.find(compositeElement => compositeElement?.hasAttribute(_constants.ACTIVE_COMPOSITE_ITEM)) ?? null;
-    // Set the default highlighted index of an arbitrary composite item.
-    const activeIndex = activeItem ? sortedElements.indexOf(activeItem) : -1;
+    // Set the default highlighted index of an arbitrary composite item. The map value carries
+    // the item's own index, which is not its position among the keys once a list mixes explicit
+    // and automatic indexes and leaves gaps.
+    const activeIndex = activeItem ? map.get(activeItem)?.index ?? -1 : -1;
     if (activeIndex !== -1) {
       onHighlightedIndexChange(activeIndex);
     } else if ((0, _composite.isListIndexDisabled)(sortedElements, highlightedIndex, disabledIndices)) {
@@ -100,8 +102,8 @@ function useCompositeRoot(params) {
   // Stable so that `relayKeyboardEvent` does not invalidate identity-sensitive
   // consumers (the `CompositeRootContext` value and trigger data forwarding).
   const onKeyDown = (0, _useStableCallback.useStableCallback)(event => {
-    const RELEVANT_KEYS = enableHomeAndEndKeys ? _composite.COMPOSITE_KEYS : _composite.ARROW_KEYS;
-    if (!RELEVANT_KEYS.has(event.key)) {
+    const isHomeOrEnd = event.key === _composite.HOME || event.key === _composite.END;
+    if (!_composite.COMPOSITE_KEYS.has(event.key) || !enableHomeAndEndKeys && isHomeOrEnd) {
       return;
     }
     if (isModifierKeySet(event, modifierKeys)) {
@@ -113,22 +115,14 @@ function useCompositeRoot(params) {
     }
     const isRtl = direction === 'rtl';
     const horizontalForwardKey = isRtl ? _composite.ARROW_LEFT : _composite.ARROW_RIGHT;
-    const forwardKey = {
-      horizontal: horizontalForwardKey,
-      vertical: _composite.ARROW_DOWN,
-      both: horizontalForwardKey
-    }[orientation];
     const horizontalBackwardKey = isRtl ? _composite.ARROW_RIGHT : _composite.ARROW_LEFT;
-    const backwardKey = {
-      horizontal: horizontalBackwardKey,
-      vertical: _composite.ARROW_UP,
-      both: horizontalBackwardKey
-    }[orientation];
+    const forwardKey = orientation === 'vertical' ? _composite.ARROW_DOWN : horizontalForwardKey;
+    const backwardKey = orientation === 'vertical' ? _composite.ARROW_UP : horizontalBackwardKey;
     const target = (0, _utils.getTarget)(event.nativeEvent);
     if (target != null && (0, _composite.isNativeInput)(target) && !(0, _isElementDisabled.isElementDisabled)(target)) {
       const selectionStart = target.selectionStart;
       const selectionEnd = target.selectionEnd;
-      const textContent = target.value ?? '';
+      const textContent = target.value;
       // return to native textbox behavior when
       // 1 - Shift is held to make a text selection, or if there already is a text selection
       if (selectionStart == null || event.shiftKey || selectionStart !== selectionEnd) {
@@ -160,21 +154,8 @@ function useCompositeRoot(params) {
         rtl: isRtl
       });
     }
-    const forwardKeys = {
-      horizontal: [horizontalForwardKey],
-      vertical: [_composite.ARROW_DOWN],
-      both: [horizontalForwardKey, _composite.ARROW_DOWN]
-    }[orientation];
-    const backwardKeys = {
-      horizontal: [horizontalBackwardKey],
-      vertical: [_composite.ARROW_UP],
-      both: [horizontalBackwardKey, _composite.ARROW_UP]
-    }[orientation];
-    const preventedKeys = isGrid ? RELEVANT_KEYS : {
-      horizontal: enableHomeAndEndKeys ? _composite.HORIZONTAL_KEYS_WITH_EXTRA_KEYS : _composite.HORIZONTAL_KEYS,
-      vertical: enableHomeAndEndKeys ? _composite.VERTICAL_KEYS_WITH_EXTRA_KEYS : _composite.VERTICAL_KEYS,
-      both: RELEVANT_KEYS
-    }[orientation];
+    const isForwardKey = orientation !== 'vertical' && event.key === horizontalForwardKey || orientation !== 'horizontal' && event.key === _composite.ARROW_DOWN;
+    const isBackwardKey = orientation !== 'vertical' && event.key === horizontalBackwardKey || orientation !== 'horizontal' && event.key === _composite.ARROW_UP;
     if (enableHomeAndEndKeys) {
       if (event.key === _composite.HOME) {
         nextIndex = minIndex;
@@ -182,13 +163,13 @@ function useCompositeRoot(params) {
         nextIndex = maxIndex;
       }
     }
-    if (nextIndex === highlightedIndex && (forwardKeys.includes(event.key) || backwardKeys.includes(event.key))) {
-      if (loopFocus && nextIndex === maxIndex && forwardKeys.includes(event.key)) {
+    if (nextIndex === highlightedIndex && (isForwardKey || isBackwardKey)) {
+      if (loopFocus && nextIndex === maxIndex && isForwardKey) {
         nextIndex = minIndex;
         if (onLoop) {
           nextIndex = onLoop(event, highlightedIndex, nextIndex, elementsRef);
         }
-      } else if (loopFocus && nextIndex === minIndex && backwardKeys.includes(event.key)) {
+      } else if (loopFocus && nextIndex === minIndex && isBackwardKey) {
         nextIndex = maxIndex;
         if (onLoop) {
           nextIndex = onLoop(event, highlightedIndex, nextIndex, elementsRef);
@@ -196,7 +177,7 @@ function useCompositeRoot(params) {
       } else {
         nextIndex = (0, _composite.findNonDisabledListIndex)(elementsRef.current, {
           startingIndex: nextIndex,
-          decrement: backwardKeys.includes(event.key),
+          decrement: isBackwardKey,
           disabledIndices
         });
       }
@@ -205,7 +186,7 @@ function useCompositeRoot(params) {
       if (stopEventPropagation) {
         event.stopPropagation();
       }
-      if (preventedKeys.has(event.key)) {
+      if (isGrid || isHomeOrEnd || isForwardKey || isBackwardKey) {
         event.preventDefault();
       }
       onHighlightedIndexChange(nextIndex, true);
@@ -224,7 +205,7 @@ function useCompositeRoot(params) {
       if (!element || target == null || !(0, _composite.isNativeInput)(target)) {
         return;
       }
-      target.setSelectionRange(0, target.value.length ?? 0);
+      target.setSelectionRange(0, target.value.length);
     },
     onKeyDown
   };
@@ -233,13 +214,12 @@ function useCompositeRoot(params) {
     highlightedIndex,
     onHighlightedIndexChange,
     elementsRef,
-    disabledIndices,
     onMapChange,
     relayKeyboardEvent: onKeyDown
   };
 }
 function isModifierKeySet(event, ignoredModifierKeys) {
-  for (const key of _composite.MODIFIER_KEYS.values()) {
+  for (const key of _composite.MODIFIER_KEYS) {
     if (ignoredModifierKeys.includes(key)) {
       continue;
     }

package/internals/composite/root/useCompositeRoot.mjs

@@ -5,7 +5,7 @@ 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 { COMPOSITE_KEYS, ARROW_DOWN, ARROW_KEYS, ARROW_LEFT, ARROW_RIGHT, ARROW_UP, END, HOME, HORIZONTAL_KEYS, HORIZONTAL_KEYS_WITH_EXTRA_KEYS, MODIFIER_KEYS, VERTICAL_KEYS, VERTICAL_KEYS_WITH_EXTRA_KEYS, findNonDisabledListIndex, getMaxListIndex, getMinListIndex, isListIndexDisabled, isIndexOutOfListBounds, isNativeInput, scrollIntoViewIfNeeded } from "../composite.mjs";
+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 = [];
@@ -20,7 +20,7 @@ export function useCompositeRoot(params) {
     onHighlightedIndexChange: externalSetHighlightedIndex,
     rootRef: externalRef,
     enableHomeAndEndKeys = false,
-    stopEventPropagation = false,
+    stopEventPropagation,
     disabledIndices,
     modifierKeys = EMPTY_ARRAY
   } = params;
@@ -45,8 +45,10 @@ export function useCompositeRoot(params) {
     hasSetDefaultIndexRef.current = true;
     const sortedElements = Array.from(map.keys());
     const activeItem = sortedElements.find(compositeElement => compositeElement?.hasAttribute(ACTIVE_COMPOSITE_ITEM)) ?? null;
-    // Set the default highlighted index of an arbitrary composite item.
-    const activeIndex = activeItem ? sortedElements.indexOf(activeItem) : -1;
+    // Set the default highlighted index of an arbitrary composite item. The map value carries
+    // the item's own index, which is not its position among the keys once a list mixes explicit
+    // and automatic indexes and leaves gaps.
+    const activeIndex = activeItem ? map.get(activeItem)?.index ?? -1 : -1;
     if (activeIndex !== -1) {
       onHighlightedIndexChange(activeIndex);
     } else if (isListIndexDisabled(sortedElements, highlightedIndex, disabledIndices)) {
@@ -94,8 +96,8 @@ export function useCompositeRoot(params) {
   // Stable so that `relayKeyboardEvent` does not invalidate identity-sensitive
   // consumers (the `CompositeRootContext` value and trigger data forwarding).
   const onKeyDown = useStableCallback(event => {
-    const RELEVANT_KEYS = enableHomeAndEndKeys ? COMPOSITE_KEYS : ARROW_KEYS;
-    if (!RELEVANT_KEYS.has(event.key)) {
+    const isHomeOrEnd = event.key === HOME || event.key === END;
+    if (!COMPOSITE_KEYS.has(event.key) || !enableHomeAndEndKeys && isHomeOrEnd) {
       return;
     }
     if (isModifierKeySet(event, modifierKeys)) {
@@ -107,22 +109,14 @@ export function useCompositeRoot(params) {
     }
     const isRtl = direction === 'rtl';
     const horizontalForwardKey = isRtl ? ARROW_LEFT : ARROW_RIGHT;
-    const forwardKey = {
-      horizontal: horizontalForwardKey,
-      vertical: ARROW_DOWN,
-      both: horizontalForwardKey
-    }[orientation];
     const horizontalBackwardKey = isRtl ? ARROW_RIGHT : ARROW_LEFT;
-    const backwardKey = {
-      horizontal: horizontalBackwardKey,
-      vertical: ARROW_UP,
-      both: horizontalBackwardKey
-    }[orientation];
+    const forwardKey = orientation === 'vertical' ? ARROW_DOWN : horizontalForwardKey;
+    const backwardKey = orientation === 'vertical' ? ARROW_UP : horizontalBackwardKey;
     const target = getTarget(event.nativeEvent);
     if (target != null && isNativeInput(target) && !isElementDisabled(target)) {
       const selectionStart = target.selectionStart;
       const selectionEnd = target.selectionEnd;
-      const textContent = target.value ?? '';
+      const textContent = target.value;
       // return to native textbox behavior when
       // 1 - Shift is held to make a text selection, or if there already is a text selection
       if (selectionStart == null || event.shiftKey || selectionStart !== selectionEnd) {
@@ -154,21 +148,8 @@ export function useCompositeRoot(params) {
         rtl: isRtl
       });
     }
-    const forwardKeys = {
-      horizontal: [horizontalForwardKey],
-      vertical: [ARROW_DOWN],
-      both: [horizontalForwardKey, ARROW_DOWN]
-    }[orientation];
-    const backwardKeys = {
-      horizontal: [horizontalBackwardKey],
-      vertical: [ARROW_UP],
-      both: [horizontalBackwardKey, ARROW_UP]
-    }[orientation];
-    const preventedKeys = isGrid ? RELEVANT_KEYS : {
-      horizontal: enableHomeAndEndKeys ? HORIZONTAL_KEYS_WITH_EXTRA_KEYS : HORIZONTAL_KEYS,
-      vertical: enableHomeAndEndKeys ? VERTICAL_KEYS_WITH_EXTRA_KEYS : VERTICAL_KEYS,
-      both: RELEVANT_KEYS
-    }[orientation];
+    const isForwardKey = orientation !== 'vertical' && event.key === horizontalForwardKey || orientation !== 'horizontal' && event.key === ARROW_DOWN;
+    const isBackwardKey = orientation !== 'vertical' && event.key === horizontalBackwardKey || orientation !== 'horizontal' && event.key === ARROW_UP;
     if (enableHomeAndEndKeys) {
       if (event.key === HOME) {
         nextIndex = minIndex;
@@ -176,13 +157,13 @@ export function useCompositeRoot(params) {
         nextIndex = maxIndex;
       }
     }
-    if (nextIndex === highlightedIndex && (forwardKeys.includes(event.key) || backwardKeys.includes(event.key))) {
-      if (loopFocus && nextIndex === maxIndex && forwardKeys.includes(event.key)) {
+    if (nextIndex === highlightedIndex && (isForwardKey || isBackwardKey)) {
+      if (loopFocus && nextIndex === maxIndex && isForwardKey) {
         nextIndex = minIndex;
         if (onLoop) {
           nextIndex = onLoop(event, highlightedIndex, nextIndex, elementsRef);
         }
-      } else if (loopFocus && nextIndex === minIndex && backwardKeys.includes(event.key)) {
+      } else if (loopFocus && nextIndex === minIndex && isBackwardKey) {
         nextIndex = maxIndex;
         if (onLoop) {
           nextIndex = onLoop(event, highlightedIndex, nextIndex, elementsRef);
@@ -190,7 +171,7 @@ export function useCompositeRoot(params) {
       } else {
         nextIndex = findNonDisabledListIndex(elementsRef.current, {
           startingIndex: nextIndex,
-          decrement: backwardKeys.includes(event.key),
+          decrement: isBackwardKey,
           disabledIndices
         });
       }
@@ -199,7 +180,7 @@ export function useCompositeRoot(params) {
       if (stopEventPropagation) {
         event.stopPropagation();
       }
-      if (preventedKeys.has(event.key)) {
+      if (isGrid || isHomeOrEnd || isForwardKey || isBackwardKey) {
         event.preventDefault();
       }
       onHighlightedIndexChange(nextIndex, true);
@@ -218,7 +199,7 @@ export function useCompositeRoot(params) {
       if (!element || target == null || !isNativeInput(target)) {
         return;
       }
-      target.setSelectionRange(0, target.value.length ?? 0);
+      target.setSelectionRange(0, target.value.length);
     },
     onKeyDown
   };
@@ -227,13 +208,12 @@ export function useCompositeRoot(params) {
     highlightedIndex,
     onHighlightedIndexChange,
     elementsRef,
-    disabledIndices,
     onMapChange,
     relayKeyboardEvent: onKeyDown
   };
 }
 function isModifierKeySet(event, ignoredModifierKeys) {
-  for (const key of MODIFIER_KEYS.values()) {
+  for (const key of MODIFIER_KEYS) {
     if (ignoredModifierKeys.includes(key)) {
       continue;
     }

package/internals/createBaseUIEventDetails.d.mts

@@ -92,6 +92,6 @@ export type BaseUIGenericEventDetails<Reason extends string, CustomProperties ex
  * Creates a Base UI event details object with the given reason and utilities
  * for preventing Base UI's internal event handling.
  */
-export declare function createChangeEventDetails<Reason extends string, CustomProperties extends object = {}>(reason: Reason, event?: ReasonToEvent<Reason>, trigger?: HTMLElement, customProperties?: CustomProperties): BaseUIChangeEventDetails<Reason, CustomProperties>;
+export declare function createChangeEventDetails<Reason extends string, CustomProperties extends object = {}>(reason: Reason, event?: ReasonToEvent<Reason>, trigger?: Element, customProperties?: CustomProperties): BaseUIChangeEventDetails<Reason, CustomProperties>;
 export declare function createGenericEventDetails<Reason extends keyof ReasonToEventMap, CustomProperties extends object = {}>(reason: Reason, event?: ReasonToEvent<Reason>, customProperties?: CustomProperties): BaseUIGenericEventDetails<Reason, CustomProperties>;
 export {};

package/internals/createBaseUIEventDetails.d.ts

@@ -92,6 +92,6 @@ export type BaseUIGenericEventDetails<Reason extends string, CustomProperties ex
  * Creates a Base UI event details object with the given reason and utilities
  * for preventing Base UI's internal event handling.
  */
-export declare function createChangeEventDetails<Reason extends string, CustomProperties extends object = {}>(reason: Reason, event?: ReasonToEvent<Reason>, trigger?: HTMLElement, customProperties?: CustomProperties): BaseUIChangeEventDetails<Reason, CustomProperties>;
+export declare function createChangeEventDetails<Reason extends string, CustomProperties extends object = {}>(reason: Reason, event?: ReasonToEvent<Reason>, trigger?: Element, customProperties?: CustomProperties): BaseUIChangeEventDetails<Reason, CustomProperties>;
 export declare function createGenericEventDetails<Reason extends keyof ReasonToEventMap, CustomProperties extends object = {}>(reason: Reason, event?: ReasonToEvent<Reason>, customProperties?: CustomProperties): BaseUIGenericEventDetails<Reason, CustomProperties>;
 export {};

package/internals/csp-context/CSPContext.d.mts

@@ -3,11 +3,5 @@ export interface CSPContextValue {
   nonce?: string | undefined;
   disableStyleElements?: boolean | undefined;
 }
-/**
- * @internal
- */
 export declare const CSPContext: React.Context<CSPContextValue | undefined>;
-/**
- * @internal
- */
 export declare function useCSPContext(): CSPContextValue;

package/internals/csp-context/CSPContext.d.ts

@@ -3,11 +3,5 @@ export interface CSPContextValue {
   nonce?: string | undefined;
   disableStyleElements?: boolean | undefined;
 }
-/**
- * @internal
- */
 export declare const CSPContext: React.Context<CSPContextValue | undefined>;
-/**
- * @internal
- */
 export declare function useCSPContext(): CSPContextValue;

package/internals/csp-context/CSPContext.js

@@ -8,18 +8,11 @@ Object.defineProperty(exports, "__esModule", {
 exports.CSPContext = void 0;
 exports.useCSPContext = useCSPContext;
 var React = _interopRequireWildcard(require("react"));
-/**
- * @internal
- */
 const CSPContext = exports.CSPContext = /*#__PURE__*/React.createContext(undefined);
 if (process.env.NODE_ENV !== "production") CSPContext.displayName = "CSPContext";
 const DEFAULT_CSP_CONTEXT_VALUE = {
   disableStyleElements: false
 };
-
-/**
- * @internal
- */
 function useCSPContext() {
   return React.useContext(CSPContext) ?? DEFAULT_CSP_CONTEXT_VALUE;
 }

package/internals/csp-context/CSPContext.mjs

@@ -1,18 +1,11 @@
 'use client';
 
 import * as React from 'react';
-/**
- * @internal
- */
 export const CSPContext = /*#__PURE__*/React.createContext(undefined);
 if (process.env.NODE_ENV !== "production") CSPContext.displayName = "CSPContext";
 const DEFAULT_CSP_CONTEXT_VALUE = {
   disableStyleElements: false
 };
-
-/**
- * @internal
- */
 export function useCSPContext() {
   return React.useContext(CSPContext) ?? DEFAULT_CSP_CONTEXT_VALUE;
 }

package/internals/direction-context/DirectionContext.d.mts

@@ -3,8 +3,5 @@ export type TextDirection = 'ltr' | 'rtl';
 export type DirectionContext = {
   direction: TextDirection;
 };
-/**
- * @internal
- */
 export declare const DirectionContext: React.Context<DirectionContext | undefined>;
 export declare function useDirection(): TextDirection;

package/internals/direction-context/DirectionContext.d.ts

@@ -3,8 +3,5 @@ export type TextDirection = 'ltr' | 'rtl';
 export type DirectionContext = {
   direction: TextDirection;
 };
-/**
- * @internal
- */
 export declare const DirectionContext: React.Context<DirectionContext | undefined>;
 export declare function useDirection(): TextDirection;

package/internals/direction-context/DirectionContext.js

@@ -8,9 +8,6 @@ Object.defineProperty(exports, "__esModule", {
 exports.DirectionContext = void 0;
 exports.useDirection = useDirection;
 var React = _interopRequireWildcard(require("react"));
-/**
- * @internal
- */
 const DirectionContext = exports.DirectionContext = /*#__PURE__*/React.createContext(undefined);
 if (process.env.NODE_ENV !== "production") DirectionContext.displayName = "DirectionContext";
 function useDirection() {

package/internals/direction-context/DirectionContext.mjs

@@ -1,9 +1,6 @@
 'use client';
 
 import * as React from 'react';
-/**
- * @internal
- */
 export const DirectionContext = /*#__PURE__*/React.createContext(undefined);
 if (process.env.NODE_ENV !== "production") DirectionContext.displayName = "DirectionContext";
 export function useDirection() {

package/internals/field-constants/constants.js

@@ -4,7 +4,6 @@ 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 = require("../../field/control/FieldControlDataAttributes");
 const DEFAULT_VALIDITY_STATE = exports.DEFAULT_VALIDITY_STATE = {
   badInput: false,
   customError: false,
@@ -36,11 +35,11 @@ const fieldValidityMapping = exports.fieldValidityMapping = {
     }
     if (value) {
       return {
-        [_FieldControlDataAttributes.FieldControlDataAttributes.valid]: ''
+        'data-valid': ''
       };
     }
     return {
-      [_FieldControlDataAttributes.FieldControlDataAttributes.invalid]: ''
+      'data-invalid': ''
     };
   }
 };

package/internals/field-constants/constants.mjs

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

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

@@ -14,7 +14,7 @@ export interface UseFieldControlRegistrationParameters {
   markedDirtyRef: React.RefObject<boolean>;
   name: string | undefined;
   setRegisteredFieldName: (name: string | undefined) => void;
-  setRegisteredFieldId: (id: string | undefined) => void;
+  registeredFieldIdRef: React.RefObject<string | undefined>;
   setValidityData: React.Dispatch<React.SetStateAction<FieldValidityData>>;
   validityData: FieldValidityData;
 }

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

@@ -14,7 +14,7 @@ export interface UseFieldControlRegistrationParameters {
   markedDirtyRef: React.RefObject<boolean>;
   name: string | undefined;
   setRegisteredFieldName: (name: string | undefined) => void;
-  setRegisteredFieldId: (id: string | undefined) => void;
+  registeredFieldIdRef: React.RefObject<string | undefined>;
   setValidityData: React.Dispatch<React.SetStateAction<FieldValidityData>>;
   validityData: FieldValidityData;
 }

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

@@ -18,7 +18,7 @@ function useFieldControlRegistration(params) {
     markedDirtyRef,
     name,
     setRegisteredFieldName,
-    setRegisteredFieldId,
+    registeredFieldIdRef,
     setValidityData,
     validityData
   } = params;
@@ -27,7 +27,7 @@ function useFieldControlRegistration(params) {
   } = (0, _FormContext.useFormContext)();
   const activeFieldControlSourceRef = React.useRef(null);
   const registrationRef = React.useRef(null);
-  const fallbackControlRef = React.useRef(null);
+  const initialValueCapturedRef = React.useRef(false);
   const getValueForForm = (0, _useStableCallback.useStableCallback)(() => {
     const registration = registrationRef.current;
     if (!registration) {
@@ -58,7 +58,7 @@ function useFieldControlRegistration(params) {
     formRef.current.fields.set(registration.id, {
       getValue: getValueForForm,
       name: name ?? registration.name,
-      controlRef: registration.controlRef ?? fallbackControlRef,
+      controlRef: registration.controlRef,
       validityData: (0, _getCombinedFieldValidityData.getCombinedFieldValidityData)(validityData, invalid),
       validate
     });
@@ -68,18 +68,23 @@ 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
+    });
   }
   (0, _useIsoLayoutEffect.useIsoLayoutEffect)(() => {
     const registration = registrationRef.current;
@@ -90,7 +95,7 @@ function useFieldControlRegistration(params) {
     formRef.current.fields.set(registration.id, {
       getValue: getValueForForm,
       name: name ?? registration.name,
-      controlRef: registration.controlRef ?? fallbackControlRef,
+      controlRef: registration.controlRef,
       validityData: (0, _getCombinedFieldValidityData.getCombinedFieldValidityData)(validityData, invalid),
       validate
     });
@@ -111,7 +116,7 @@ function useFieldControlRegistration(params) {
         deleteRegistration();
         registrationRef.current = null;
         setRegisteredFieldName(undefined);
-        setRegisteredFieldId(undefined);
+        registeredFieldIdRef.current = undefined;
       }
       return;
     }
@@ -121,11 +126,11 @@ 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];