@base-ui/react 1.4.1 → 1.5.0

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

@@ -1,62 +1,34 @@
 'use client';
 
 import * as React from 'react';
-import { useStableCallback } from '@base-ui/utils/useStableCallback';
 import { useIsoLayoutEffect } from '@base-ui/utils/useIsoLayoutEffect';
+import { useStableCallback } from '@base-ui/utils/useStableCallback';
 import { useTimeout } from '@base-ui/utils/useTimeout';
+import { isElementVisible } from "../utils/composite.js";
 import { contains } from "../utils/element.js";
 import { stopEvent } from "../utils/event.js";
-import { isElementVisible } from "../utils/composite.js";
 /**
  * Provides a matching callback that can be used to focus an item as the user
  * types, often used in tandem with `useListNavigation()`.
  * @see https://floating-ui.com/docs/useTypeahead
  */
 export function useTypeahead(context, props) {
-  const store = 'rootStore' in context ? context.rootStore : context;
-  const dataRef = store.context.dataRef;
-  const open = store.useState('open');
   const {
     listRef,
     elementsRef,
     activeIndex,
     onMatch: onMatchProp,
-    onTypingChange,
+    onTyping,
     enabled = true,
     resetMs = 750,
     selectedIndex = null
   } = props;
+  const store = 'rootStore' in context ? context.rootStore : context;
+  const open = store.useState('open');
   const timeout = useTimeout();
   const stringRef = React.useRef('');
   const prevIndexRef = React.useRef(selectedIndex ?? activeIndex ?? -1);
   const matchIndexRef = React.useRef(null);
-  useIsoLayoutEffect(() => {
-    if (!open && selectedIndex !== null) {
-      return;
-    }
-    timeout.clear();
-    matchIndexRef.current = null;
-    if (stringRef.current !== '') {
-      stringRef.current = '';
-    }
-  }, [open, selectedIndex, timeout]);
-  useIsoLayoutEffect(() => {
-    // Sync arrow key navigation but not typeahead navigation.
-    if (open && stringRef.current === '') {
-      prevIndexRef.current = selectedIndex ?? activeIndex ?? -1;
-    }
-  }, [open, selectedIndex, activeIndex]);
-  const setTypingChange = useStableCallback(value => {
-    if (value) {
-      if (!dataRef.current.typing) {
-        dataRef.current.typing = value;
-        onTypingChange?.(value);
-      }
-    } else if (dataRef.current.typing) {
-      dataRef.current.typing = value;
-      onTypingChange?.(value);
-    }
-  });
   const onKeyDown = useStableCallback(event => {
     function isVisible(index) {
       const element = elementsRef?.current[index];
@@ -82,11 +54,11 @@ export function useTypeahead(context, props) {
     if (stringRef.current.length > 0 && event.key === ' ') {
       // Space should continue the in-progress typeahead session.
       stopEvent(event);
-      setTypingChange(true);
+      onTyping?.(true);
     }
     if (stringRef.current.length > 0 && stringRef.current[0] !== ' ') {
       if (getMatchingIndex(listContent, stringRef.current) === -1 && event.key !== ' ') {
-        setTypingChange(false);
+        onTyping?.(false);
       }
     }
     if (listContent == null ||
@@ -98,7 +70,7 @@ export function useTypeahead(context, props) {
     }
     if (open && event.key !== ' ') {
       stopEvent(event);
-      setTypingChange(true);
+      onTyping?.(true);
     }
 
     // Capture whether this is a new typing session before mutating the string.
@@ -121,7 +93,7 @@ export function useTypeahead(context, props) {
     timeout.start(resetMs, () => {
       stringRef.current = '';
       prevIndexRef.current = matchIndexRef.current;
-      setTypingChange(false);
+      onTyping?.(false);
     });
 
     // Compute the starting index for this search.
@@ -135,18 +107,17 @@ export function useTypeahead(context, props) {
       matchIndexRef.current = index;
     } else if (event.key !== ' ') {
       stringRef.current = '';
-      setTypingChange(false);
+      onTyping?.(false);
     }
   });
   const onBlur = useStableCallback(event => {
     const next = event.relatedTarget;
     const currentDomReferenceElement = store.select('domReferenceElement');
     const currentFloatingElement = store.select('floatingElement');
-    const withinReference = contains(currentDomReferenceElement, next);
-    const withinFloating = contains(currentFloatingElement, next);
+    const withinComposite = contains(currentDomReferenceElement, next) || contains(currentFloatingElement, next);
 
     // Keep the session if focus moves within the composite (reference <-> floating).
-    if (withinReference || withinFloating) {
+    if (withinComposite) {
       return;
     }
 
@@ -154,20 +125,30 @@ export function useTypeahead(context, props) {
     timeout.clear();
     stringRef.current = '';
     prevIndexRef.current = matchIndexRef.current;
-    setTypingChange(false);
+    onTyping?.(false);
   });
-  const reference = React.useMemo(() => ({
+  useIsoLayoutEffect(() => {
+    if (!open && selectedIndex !== null) {
+      return;
+    }
+    timeout.clear();
+    matchIndexRef.current = null;
+    if (stringRef.current !== '') {
+      stringRef.current = '';
+    }
+  }, [open, selectedIndex, timeout]);
+  useIsoLayoutEffect(() => {
+    // Sync arrow key navigation but not typeahead navigation.
+    if (open && stringRef.current === '') {
+      prevIndexRef.current = selectedIndex ?? activeIndex ?? -1;
+    }
+  }, [open, selectedIndex, activeIndex]);
+  const sharedProps = React.useMemo(() => ({
     onKeyDown,
     onBlur
   }), [onKeyDown, onBlur]);
-  const floating = React.useMemo(() => {
-    return {
-      onKeyDown,
-      onBlur
-    };
-  }, [onKeyDown, onBlur]);
   return React.useMemo(() => enabled ? {
-    reference,
-    floating
-  } : {}, [enabled, reference, floating]);
+    reference: sharedProps,
+    floating: sharedProps
+  } : {}, [enabled, sharedProps]);
 }

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

@@ -13,9 +13,7 @@ export { useFocus } from "./hooks/useFocus.js";
 export { useHoverFloatingInteraction } from "./hooks/useHoverFloatingInteraction.js";
 export { useHoverReferenceInteraction } from "./hooks/useHoverReferenceInteraction.js";
 export { useHover } from "./hooks/useHover.js";
-export { useInteractions } from "./hooks/useInteractions.js";
 export { useListNavigation } from "./hooks/useListNavigation.js";
-export { useRole } from "./hooks/useRole.js";
 export { useTypeahead } from "./hooks/useTypeahead.js";
 export { safePolygon } from "./safePolygon.js";
 export type * from "./types.js";

package/esm/floating-ui-react/index.js

@@ -13,9 +13,7 @@ export { useFocus } from "./hooks/useFocus.js";
 export { useHoverFloatingInteraction } from "./hooks/useHoverFloatingInteraction.js";
 export { useHoverReferenceInteraction } from "./hooks/useHoverReferenceInteraction.js";
 export { useHover } from "./hooks/useHover.js";
-export { useInteractions } from "./hooks/useInteractions.js";
 export { useListNavigation } from "./hooks/useListNavigation.js";
-export { useRole } from "./hooks/useRole.js";
 export { useTypeahead } from "./hooks/useTypeahead.js";
 export { safePolygon } from "./safePolygon.js";
 export { arrow, autoPlacement, autoUpdate, computePosition, detectOverflow, flip, getOverflowAncestors, hide, inline, limitShift, offset, platform, shift, size } from '@floating-ui/react-dom';

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

@@ -1,7 +1,6 @@
 import type { UseFloatingOptions as UsePositionOptions, UseFloatingReturn as UsePositionFloatingReturn, VirtualElement } from '@floating-ui/react-dom';
 import type * as React from 'react';
 import type { BaseUIChangeEventDetails } from "../internals/createBaseUIEventDetails.js";
-import type { ExtendedUserProps } from "./hooks/useInteractions.js";
 import type { FloatingTreeStore } from "./components/FloatingTreeStore.js";
 import type { FloatingRootStore } from "./components/FloatingRootStore.js";
 export * from "./index.js";
@@ -16,10 +15,8 @@ export type { HandleCloseContext, HandleClose } from "./hooks/useHoverShared.js"
 export type { UseHoverFloatingInteractionProps } from "./hooks/useHoverFloatingInteraction.js";
 export type { UseHoverReferenceInteractionProps } from "./hooks/useHoverReferenceInteraction.js";
 export type { UseListNavigationProps } from "./hooks/useListNavigation.js";
-export type { UseRoleProps } from "./hooks/useRole.js";
 export type { UseTypeaheadProps } from "./hooks/useTypeahead.js";
 export type { UseFloatingRootContextOptions } from "./hooks/useFloatingRootContext.js";
-export type { UseInteractionsReturn } from "./hooks/useInteractions.js";
 export type { SafePolygonOptions } from "./safePolygon.js";
 export type { FloatingTreeProps, FloatingNodeProps } from "./components/FloatingTree.js";
 export type { AlignedPlacement, Alignment, ArrowOptions, AutoPlacementOptions, AutoUpdateOptions, Axis, Boundary, ClientRectObject, ComputePositionConfig, ComputePositionReturn, Coords, DetectOverflowOptions, Dimensions, ElementContext, ElementRects, Elements, FlipOptions, FloatingElement, HideOptions, InlineOptions, Length, Middleware, MiddlewareArguments, MiddlewareData, MiddlewareReturn, MiddlewareState, NodeScroll, OffsetOptions, Padding, Placement, Platform, Rect, ReferenceElement, RootBoundary, ShiftOptions, Side, SideObject, SizeOptions, Strategy, VirtualElement } from '@floating-ui/react-dom';
@@ -51,8 +48,6 @@ export interface FloatingEvents {
 export interface ContextData {
   openEvent?: Event | undefined;
   floatingContext?: FloatingContext | undefined;
-  /** @deprecated use `onTypingChange` prop in `useTypeahead` */
-  typing?: boolean | undefined;
   [key: string]: any;
 }
 export type FloatingRootContext = FloatingRootStore;
@@ -76,7 +71,7 @@ export type FloatingTreeType = FloatingTreeStore;
 export interface ElementProps {
   reference?: React.HTMLProps<Element> | undefined;
   floating?: React.HTMLProps<HTMLElement> | undefined;
-  item?: React.HTMLProps<HTMLElement> | ((props: ExtendedUserProps) => React.HTMLProps<HTMLElement>) | undefined;
+  item?: React.HTMLProps<HTMLElement> | undefined;
   trigger?: React.HTMLProps<Element> | undefined;
 }
 export type ReferenceType = Element | VirtualElement;
@@ -117,7 +112,7 @@ export interface UseFloatingOptions extends Omit<UsePositionOptions, 'elements'>
    */
   nodeId?: string | undefined;
   /**
-   * External FlatingTree to use when the one provided by context can't be used.
+   * External FloatingTree to use when the one provided by context can't be used.
    */
   externalTree?: FloatingTreeStore | undefined;
 }

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

@@ -296,6 +296,8 @@ export function createGridCellMap(sizes, cols, dense) {
   }, index) => {
     if (width > cols) {
       if (process.env.NODE_ENV !== 'production') {
+        // TODO: fix mui/no-guarded-throw
+        // eslint-disable-next-line mui/no-guarded-throw
         throw new Error(`[Floating UI]: Invalid grid - item width at index ${index} is greater than grid columns`);
       }
     }

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

@@ -2,8 +2,8 @@ import { NOOP } from '@base-ui/utils/empty';
 import type { FocusableElement } from "./tabbable.js";
 interface Options {
   preventScroll?: boolean | undefined;
-  cancelPrevious?: boolean | undefined;
   sync?: boolean | undefined;
+  shouldFocus?: (() => boolean) | undefined;
 }
 export declare function enqueueFocus(el: FocusableElement | null, options?: Options): typeof NOOP;
 export {};

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

@@ -3,15 +3,18 @@ let rafId = 0;
 export function enqueueFocus(el, options = {}) {
   const {
     preventScroll = false,
-    cancelPrevious = true,
-    sync = false
+    sync = false,
+    shouldFocus
   } = options;
-  if (cancelPrevious) {
-    cancelAnimationFrame(rafId);
+  cancelAnimationFrame(rafId);
+  function exec() {
+    if (shouldFocus && !shouldFocus()) {
+      return;
+    }
+    el?.focus({
+      preventScroll
+    });
   }
-  const exec = () => el?.focus({
-    preventScroll
-  });
   if (sync) {
     exec();
     return NOOP;

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

@@ -7,7 +7,7 @@ export function getEmptyRootContext() {
     floatingElement: null,
     referenceElement: null,
     triggerElements: new PopupTriggerMap(),
-    floatingId: '',
+    floatingId: undefined,
     syncOnly: false,
     nested: false,
     onOpenChange: undefined

package/esm/form/Form.js

@@ -61,11 +61,11 @@ export const Form = /*#__PURE__*/React.forwardRef(function Form(componentProps,
     if (fieldName) {
       const namedField = values.find(field => field.name === fieldName);
       if (namedField) {
-        namedField.validate(false);
+        namedField.validate();
       }
     } else {
       values.forEach(field => {
-        field.validate(false);
+        field.validate();
       });
     }
   }, []);

package/esm/index.js

@@ -1,5 +1,5 @@
 /**
- * @base-ui/react v1.4.1
+ * @base-ui/react v1.5.0
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/esm/internals/composite/composite.d.ts

@@ -17,7 +17,6 @@ export declare const HORIZONTAL_KEYS_WITH_EXTRA_KEYS: Set<string>;
 export declare const VERTICAL_KEYS: Set<string>;
 export declare const VERTICAL_KEYS_WITH_EXTRA_KEYS: Set<string>;
 export declare const ARROW_KEYS: Set<string>;
-export declare const ALL_KEYS: Set<string>;
 export declare const COMPOSITE_KEYS: Set<string>;
 export declare const SHIFT: "Shift";
 export declare const CONTROL: "Control";

package/esm/internals/composite/composite.js

@@ -13,8 +13,7 @@ export const HORIZONTAL_KEYS_WITH_EXTRA_KEYS = new Set([ARROW_LEFT, ARROW_RIGHT,
 export const VERTICAL_KEYS = new Set([ARROW_UP, ARROW_DOWN]);
 export const VERTICAL_KEYS_WITH_EXTRA_KEYS = new Set([ARROW_UP, ARROW_DOWN, HOME, END]);
 export const ARROW_KEYS = new Set([...HORIZONTAL_KEYS, ...VERTICAL_KEYS]);
-export const ALL_KEYS = new Set([...ARROW_KEYS, HOME, END]);
-export const COMPOSITE_KEYS = new Set([ARROW_UP, ARROW_DOWN, ARROW_LEFT, ARROW_RIGHT, HOME, END]);
+export const COMPOSITE_KEYS = new Set([...ARROW_KEYS, HOME, END]);
 export const SHIFT = 'Shift';
 export const CONTROL = 'Control';
 export const ALT = 'Alt';

package/esm/internals/composite/root/useCompositeRoot.js

@@ -4,7 +4,7 @@ import * as React from 'react';
 import { isElementDisabled } from '@base-ui/utils/isElementDisabled';
 import { useStableCallback } from '@base-ui/utils/useStableCallback';
 import { useMergedRefs } from '@base-ui/utils/useMergedRefs';
-import { ALL_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, createGridCellMap, findNonDisabledListIndex, getGridCellIndexOfCorner, getGridCellIndices, getGridNavigatedIndex, getMaxListIndex, getMinListIndex, isListIndexDisabled, isIndexOutOfListBounds, isNativeInput, scrollIntoViewIfNeeded } from "../composite.js";
+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, createGridCellMap, findNonDisabledListIndex, getGridCellIndexOfCorner, getGridCellIndices, getGridNavigatedIndex, getMaxListIndex, getMinListIndex, isListIndexDisabled, isIndexOutOfListBounds, isNativeInput, scrollIntoViewIfNeeded } from "../composite.js";
 import { ACTIVE_COMPOSITE_ITEM } from "../constants.js";
 import { getTarget } from "../../../floating-ui-react/utils.js";
 const EMPTY_ARRAY = [];
@@ -71,7 +71,7 @@ export function useCompositeRoot(params) {
       target.setSelectionRange(0, target.value.length ?? 0);
     },
     onKeyDown(event) {
-      const RELEVANT_KEYS = enableHomeAndEndKeys ? ALL_KEYS : ARROW_KEYS;
+      const RELEVANT_KEYS = enableHomeAndEndKeys ? COMPOSITE_KEYS : ARROW_KEYS;
       if (!RELEVANT_KEYS.has(event.key)) {
         return;
       }

package/esm/internals/createBaseUIEventDetails.d.ts

@@ -31,6 +31,8 @@ interface ReasonToEventMap {
   [REASONS.cancelOpen]: MouseEvent;
   [REASONS.siblingOpen]: Event;
   [REASONS.disabled]: Event;
+  [REASONS.missing]: Event;
+  [REASONS.initial]: Event;
   [REASONS.imperativeAction]: Event;
   [REASONS.windowResize]: UIEvent;
 }

package/esm/internals/csp-context/index.d.ts

@@ -0,0 +1,2 @@
+export { CSPContext, useCSPContext } from "./CSPContext.js";
+export type { CSPContextValue } from "./CSPContext.js";

package/esm/internals/csp-context/index.js

@@ -0,0 +1 @@
+export { CSPContext, useCSPContext } from "./CSPContext.js";

package/esm/internals/field-register-control/index.d.ts

@@ -1,4 +1,3 @@
 export { useRegisterFieldControl } from "./useRegisterFieldControl.js";
-export type { UseRegisterFieldControlParameters } from "./useRegisterFieldControl.js";
 export { useFieldControlRegistration } from "./useFieldControlRegistration.js";
 export type { FieldControlRegistration, UseFieldControlRegistrationParameters } from "./useFieldControlRegistration.js";

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

@@ -2,8 +2,8 @@ import * as React from 'react';
 import type { FieldValidityData } from "../../field/root/FieldRoot.js";
 export interface FieldControlRegistration {
   controlRef: React.RefObject<any>;
-  getValue?: (() => unknown) | undefined;
   id: string | undefined;
+  getValue?: (() => unknown) | undefined;
   value: unknown;
 }
 export declare function useFieldControlRegistration(params: UseFieldControlRegistrationParameters): (source: symbol, registration: FieldControlRegistration | undefined) => void;
@@ -12,6 +12,7 @@ export interface UseFieldControlRegistrationParameters {
   invalid: boolean;
   markedDirtyRef: React.RefObject<boolean>;
   name: string | undefined;
+  setRegisteredFieldId: (id: string | undefined) => void;
   setValidityData: React.Dispatch<React.SetStateAction<FieldValidityData>>;
   validityData: FieldValidityData;
 }

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

@@ -1,7 +1,6 @@
 'use client';
 
 import * as React from 'react';
-import * as ReactDOM from 'react-dom';
 import { useIsoLayoutEffect } from '@base-ui/utils/useIsoLayoutEffect';
 import { useStableCallback } from '@base-ui/utils/useStableCallback';
 import { getCombinedFieldValidityData } from "../../field/utils/getCombinedFieldValidityData.js";
@@ -12,6 +11,7 @@ export function useFieldControlRegistration(params) {
     invalid,
     markedDirtyRef,
     name,
+    setRegisteredFieldId,
     setValidityData,
     validityData
   } = params;
@@ -21,7 +21,7 @@ export function useFieldControlRegistration(params) {
   const activeFieldControlSourceRef = React.useRef(null);
   const registrationRef = React.useRef(null);
   const fallbackControlRef = React.useRef(null);
-  const getValue = useStableCallback(() => {
+  const getValueForForm = useStableCallback(() => {
     const registration = registrationRef.current;
     if (!registration) {
       return undefined;
@@ -31,22 +31,17 @@ export function useFieldControlRegistration(params) {
     }
     return registration.value;
   });
-  const validate = useStableCallback((flushSync = true) => {
+  const validate = useStableCallback(() => {
     const registration = registrationRef.current;
     if (!registration) {
       return;
     }
     let nextValue = registration.value;
     if (nextValue === undefined) {
-      nextValue = getValue();
+      nextValue = getValueForForm();
     }
     markedDirtyRef.current = true;
-    if (!flushSync) {
-      commit(nextValue);
-    } else {
-      // Synchronously update the validity state so the submit event can be prevented.
-      ReactDOM.flushSync(() => commit(nextValue));
-    }
+    commit(nextValue);
   });
   function refreshRegistration() {
     const registration = registrationRef.current;
@@ -54,7 +49,7 @@ export function useFieldControlRegistration(params) {
       return;
     }
     formRef.current.fields.set(registration.id, {
-      getValue,
+      getValue: getValueForForm,
       name,
       controlRef: registration.controlRef ?? fallbackControlRef,
       validityData: getCombinedFieldValidityData(validityData, invalid),
@@ -73,7 +68,7 @@ export function useFieldControlRegistration(params) {
     }
     let initialValue = registration.value;
     if (initialValue === undefined) {
-      initialValue = getValue();
+      initialValue = getValueForForm();
     }
     if (validityData.initialValue === null && initialValue !== null) {
       setValidityData(prev => ({
@@ -88,13 +83,13 @@ export function useFieldControlRegistration(params) {
       return;
     }
     formRef.current.fields.set(registration.id, {
-      getValue,
+      getValue: getValueForForm,
       name,
       controlRef: registration.controlRef ?? fallbackControlRef,
       validityData: getCombinedFieldValidityData(validityData, invalid),
       validate
     });
-  }, [formRef, getValue, invalid, name, validate, validityData]);
+  }, [formRef, getValueForForm, invalid, name, validate, validityData]);
   useIsoLayoutEffect(() => {
     const fields = formRef.current.fields;
     return () => {
@@ -110,12 +105,14 @@ export function useFieldControlRegistration(params) {
         activeFieldControlSourceRef.current = null;
         deleteRegistration();
         registrationRef.current = null;
+        setRegisteredFieldId(undefined);
       }
       return;
     }
     const previousId = registrationRef.current?.id;
     activeFieldControlSourceRef.current = source;
     registrationRef.current = registration;
+    setRegisteredFieldId(registration.id);
     if (previousId && previousId !== registration.id) {
       deleteRegistration(previousId);
     }

package/esm/internals/field-register-control/useRegisterFieldControl.d.ts

@@ -1,5 +1,2 @@
 import type { FieldControlRegistration } from "./useFieldControlRegistration.js";
-export interface UseRegisterFieldControlParameters extends FieldControlRegistration {
-  enabled?: boolean | undefined;
-}
-export declare function useRegisterFieldControl(controlRef: FieldControlRegistration['controlRef'], params: Omit<UseRegisterFieldControlParameters, 'controlRef'>): void;
+export declare function useRegisterFieldControl(controlRef: FieldControlRegistration['controlRef'], id: FieldControlRegistration['id'], value: FieldControlRegistration['value'], getFormValueOverride?: FieldControlRegistration['getValue'], enabled?: boolean): void;

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

@@ -3,13 +3,7 @@
 import * as React from 'react';
 import { useIsoLayoutEffect } from '@base-ui/utils/useIsoLayoutEffect';
 import { useFieldRootContext } from "../field-root-context/FieldRootContext.js";
-export function useRegisterFieldControl(controlRef, params) {
-  const {
-    enabled = true,
-    getValue,
-    id,
-    value
-  } = params;
+export function useRegisterFieldControl(controlRef, id, value, getFormValueOverride, enabled = true) {
   const {
     registerFieldControl
   } = useFieldRootContext();
@@ -22,14 +16,15 @@ export function useRegisterFieldControl(controlRef, params) {
     if (!source || !enabled) {
       return undefined;
     }
-    registerFieldControl(source, {
+    const registration = {
       controlRef,
-      getValue,
+      getValue: getFormValueOverride,
       id,
       value
-    });
+    };
+    registerFieldControl(source, registration);
     return () => {
       registerFieldControl(source, undefined);
     };
-  }, [controlRef, enabled, getValue, id, registerFieldControl, value]);
+  }, [controlRef, enabled, getFormValueOverride, id, registerFieldControl, value]);
 }

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

@@ -26,5 +26,6 @@ export interface FieldRootContext {
   registerFieldControl: (source: symbol, registration: FieldControlRegistration | undefined) => void;
   validation: UseFieldValidationReturnValue;
 }
+export declare const DEFAULT_FIELD_ROOT_CONTEXT: FieldRootContext;
 export declare const FieldRootContext: React.Context<FieldRootContext>;
 export declare function useFieldRootContext(optional?: boolean): FieldRootContext;

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

@@ -5,7 +5,7 @@ import * as React from 'react';
 import { EMPTY_OBJECT } from '@base-ui/utils/empty';
 import { NOOP } from "../noop.js";
 import { DEFAULT_FIELD_ROOT_STATE, DEFAULT_FIELD_STATE_ATTRIBUTES, DEFAULT_VALIDITY_STATE } from "../field-constants/constants.js";
-export const FieldRootContext = /*#__PURE__*/React.createContext({
+export const DEFAULT_FIELD_ROOT_CONTEXT = {
   invalid: undefined,
   name: undefined,
   validityData: {
@@ -42,7 +42,8 @@ export const FieldRootContext = /*#__PURE__*/React.createContext({
     },
     commit: async () => {}
   }
-});
+};
+export const FieldRootContext = /*#__PURE__*/React.createContext(DEFAULT_FIELD_ROOT_CONTEXT);
 if (process.env.NODE_ENV !== "production") FieldRootContext.displayName = "FieldRootContext";
 export function useFieldRootContext(optional = true) {
   const context = React.useContext(FieldRootContext);

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

@@ -8,7 +8,11 @@ export interface FormContext {
   formRef: React.RefObject<{
     fields: Map<string, {
       name: string | undefined;
-      validate: (flushSync?: boolean | undefined) => void;
+      /**
+       * After this returns, the field registry entry reflects the latest synchronous
+       * validity verdict. Async validators do not block submit.
+       */
+      validate: () => void;
       validityData: FieldValidityData;
       controlRef: React.RefObject<HTMLElement | null>;
       getValue: () => unknown;

package/esm/internals/reason-parts.d.ts

@@ -28,6 +28,8 @@ export declare const scrub: "scrub";
 export declare const cancelOpen: "cancel-open";
 export declare const siblingOpen: "sibling-open";
 export declare const disabled: "disabled";
+export declare const missing: "missing";
+export declare const initial: "initial";
 export declare const imperativeAction: "imperative-action";
 export declare const swipe: "swipe";
 export declare const windowResize: "window-resize";

package/esm/internals/reason-parts.js

@@ -28,6 +28,8 @@ export const scrub = 'scrub';
 export const cancelOpen = 'cancel-open';
 export const siblingOpen = 'sibling-open';
 export const disabled = 'disabled';
+export const missing = 'missing';
+export const initial = 'initial';
 export const imperativeAction = 'imperative-action';
 export const swipe = 'swipe';
 export const windowResize = 'window-resize';

package/esm/internals/types.d.ts

@@ -1,6 +1,7 @@
 import type * as React from 'react';
 import type { BaseUIEvent, ComponentRenderFn, HTMLProps } from "../types/index.js";
 export type { HTMLProps, BaseUIEvent, ComponentRenderFn };
+export type MaybeBaseUIEvent<E extends React.SyntheticEvent<Element, Event>> = E & Partial<Pick<BaseUIEvent<E>, 'preventBaseUIHandler' | 'baseUIHandlerPrevented'>>;
 export interface FloatingUIOpenChangeDetails {
   open: boolean;
   reason: string;

package/esm/internals/use-button/useButton.js

@@ -73,9 +73,7 @@ export function useButton(parameters = {}) {
       onPointerDown: externalOnPointerDown,
       ...otherExternalProps
     } = externalProps;
-    const type = isNativeButton ? 'button' : undefined;
     return mergeProps({
-      type,
       onClick(event) {
         if (disabled) {
           event.preventDefault();
@@ -160,9 +158,11 @@ export function useButton(parameters = {}) {
         }
         externalOnPointerDown?.(event);
       }
-    }, !isNativeButton ? {
+    }, isNativeButton ? {
+      type: 'button'
+    } : {
       role: 'button'
-    } : undefined, focusableWhenDisabledProps, otherExternalProps);
+    }, focusableWhenDisabledProps, otherExternalProps);
   }, [disabled, focusableWhenDisabledProps, isCompositeItem, isNativeButton]);
   const buttonRef = useStableCallback(element => {
     elementRef.current = element;

package/esm/internals/usePressAndHold.js

@@ -55,7 +55,7 @@ export function usePressAndHold(params) {
     unsubscribeFromGlobalContextMenuRef.current();
     movesAfterTouchRef.current = 0;
   });
-  const startAutoChange = useStableCallback(triggerNativeEvent => {
+  function startAutoChange(triggerNativeEvent) {
     stopAutoChange();
     const element = elementRef.current;
     if (!element) {
@@ -87,7 +87,7 @@ export function usePressAndHold(params) {
         }
       });
     });
-  });
+  }
   React.useEffect(() => () => stopAutoChange(), [stopAutoChange]);
   const pointerHandlers = {
     onTouchStart() {