@base-ui/react 1.2.0 → 1.4.0

package/field/root/FieldRoot.js

@@ -15,6 +15,7 @@ var _FormContext = require("../../form/FormContext");
 var _labelableProvider = require("../../labelable-provider");
 var _useRenderElement = require("../../utils/useRenderElement");
 var _useFieldValidation = require("./useFieldValidation");
+var _useFieldControlRegistration = require("./useFieldControlRegistration");
 var _jsxRuntime = require("react/jsx-runtime");
 /**
  * @internal
@@ -36,6 +37,7 @@ var _jsxRuntime = require("react/jsx-runtime");
     dirty: dirtyProp,
     touched: touchedProp,
     actionsRef,
+    style,
     ...elementProps
   } = componentProps;
   const {
@@ -66,7 +68,8 @@ var _jsxRuntime = require("react/jsx-runtime");
     setTouchedUnwrapped(value);
   });
   const shouldValidateOnChange = (0, _useStableCallback.useStableCallback)(() => validationMode === 'onChange' || validationMode === 'onSubmit' && submitAttemptedRef.current);
-  const invalid = Boolean(invalidProp || name && {}.hasOwnProperty.call(errors, name) && errors[name] !== undefined);
+  const hasFormError = !!name && Object.hasOwn(errors, name) && errors[name] !== undefined;
+  const invalid = invalidProp === true || hasFormError;
   const [validityData, setValidityData] = React.useState({
     state: _constants.DEFAULT_VALIDITY_STATE,
     error: '',
@@ -98,6 +101,14 @@ var _jsxRuntime = require("react/jsx-runtime");
     markedDirtyRef.current = true;
     validation.commit(validityData.value);
   }, [validation, validityData]);
+  const registerFieldControl = (0, _useFieldControlRegistration.useFieldControlRegistration)({
+    commit: validation.commit,
+    invalid,
+    markedDirtyRef,
+    name,
+    setValidityData,
+    validityData
+  });
   React.useImperativeHandle(actionsRef, () => ({
     validate: handleImperativeValidate
   }), [handleImperativeValidate]);
@@ -121,8 +132,9 @@ var _jsxRuntime = require("react/jsx-runtime");
     shouldValidateOnChange,
     state,
     markedDirtyRef,
+    registerFieldControl,
     validation
-  }), [invalid, name, validityData, disabled, touched, setTouched, dirty, setDirty, filled, setFilled, focused, setFocused, validate, validationMode, validationDebounceTime, shouldValidateOnChange, state, validation]);
+  }), [invalid, name, validityData, disabled, touched, setTouched, dirty, setDirty, filled, setFilled, focused, setFocused, validate, validationMode, validationDebounceTime, shouldValidateOnChange, state, registerFieldControl, validation]);
   const element = (0, _useRenderElement.useRenderElement)('div', componentProps, {
     ref: forwardedRef,
     state,

package/field/root/FieldRootContext.d.ts

@@ -1,7 +1,8 @@
 import * as React from 'react';
-import type { FieldRoot, FieldValidityData } from "./FieldRoot.js";
+import type { FieldValidityData, FieldRootState } from "./FieldRoot.js";
 import type { Form } from "../../form/index.js";
 import type { UseFieldValidationReturnValue } from "./useFieldValidation.js";
+import type { FieldControlRegistration } from "./useFieldControlRegistration.js";
 export interface FieldRootContext {
   invalid: boolean | undefined;
   name: string | undefined;
@@ -20,8 +21,9 @@ export interface FieldRootContext {
   validationMode: Form.ValidationMode;
   validationDebounceTime: number;
   shouldValidateOnChange: () => boolean;
-  state: FieldRoot.State;
+  state: FieldRootState;
   markedDirtyRef: React.RefObject<boolean>;
+  registerFieldControl: (source: symbol, registration: FieldControlRegistration | undefined) => void;
   validation: UseFieldValidationReturnValue;
 }
 export declare const FieldRootContext: React.Context<FieldRootContext>;

package/field/root/FieldRootContext.js

@@ -25,29 +25,23 @@ const FieldRootContext = exports.FieldRootContext = /*#__PURE__*/React.createCon
   },
   setValidityData: _noop.NOOP,
   disabled: undefined,
-  touched: false,
+  touched: _constants.DEFAULT_FIELD_STATE_ATTRIBUTES.touched,
   setTouched: _noop.NOOP,
-  dirty: false,
+  dirty: _constants.DEFAULT_FIELD_STATE_ATTRIBUTES.dirty,
   setDirty: _noop.NOOP,
-  filled: false,
+  filled: _constants.DEFAULT_FIELD_STATE_ATTRIBUTES.filled,
   setFilled: _noop.NOOP,
-  focused: false,
+  focused: _constants.DEFAULT_FIELD_STATE_ATTRIBUTES.focused,
   setFocused: _noop.NOOP,
   validate: () => null,
   validationMode: 'onSubmit',
   validationDebounceTime: 0,
   shouldValidateOnChange: () => false,
-  state: {
-    disabled: false,
-    valid: null,
-    touched: false,
-    dirty: false,
-    filled: false,
-    focused: false
-  },
+  state: _constants.DEFAULT_FIELD_ROOT_STATE,
   markedDirtyRef: {
     current: false
   },
+  registerFieldControl: _noop.NOOP,
   validation: {
     getValidationProps: (props = _constants2.EMPTY_OBJECT) => props,
     getInputValidationProps: (props = _constants2.EMPTY_OBJECT) => props,

package/field/root/useFieldControlRegistration.d.ts

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

package/field/root/useFieldControlRegistration.js

@@ -0,0 +1,131 @@
+"use strict";
+'use client';
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useFieldControlRegistration = useFieldControlRegistration;
+var React = _interopRequireWildcard(require("react"));
+var ReactDOM = _interopRequireWildcard(require("react-dom"));
+var _useIsoLayoutEffect = require("@base-ui/utils/useIsoLayoutEffect");
+var _useStableCallback = require("@base-ui/utils/useStableCallback");
+var _getCombinedFieldValidityData = require("../utils/getCombinedFieldValidityData");
+var _FormContext = require("../../form/FormContext");
+function useFieldControlRegistration(params) {
+  const {
+    commit,
+    invalid,
+    markedDirtyRef,
+    name,
+    setValidityData,
+    validityData
+  } = params;
+  const {
+    formRef
+  } = (0, _FormContext.useFormContext)();
+  const activeFieldControlSourceRef = React.useRef(null);
+  const registrationRef = React.useRef(null);
+  const fallbackControlRef = React.useRef(null);
+  const getValue = (0, _useStableCallback.useStableCallback)(() => {
+    const registration = registrationRef.current;
+    if (!registration) {
+      return undefined;
+    }
+    if (registration.getValue) {
+      return registration.getValue();
+    }
+    return registration.value;
+  });
+  const validate = (0, _useStableCallback.useStableCallback)((flushSync = true) => {
+    const registration = registrationRef.current;
+    if (!registration) {
+      return;
+    }
+    let nextValue = registration.value;
+    if (nextValue === undefined) {
+      nextValue = getValue();
+    }
+    markedDirtyRef.current = true;
+    if (!flushSync) {
+      commit(nextValue);
+    } else {
+      // Synchronously update the validity state so the submit event can be prevented.
+      ReactDOM.flushSync(() => commit(nextValue));
+    }
+  });
+  function refreshRegistration() {
+    const registration = registrationRef.current;
+    if (!registration || !registration.id) {
+      return;
+    }
+    formRef.current.fields.set(registration.id, {
+      getValue,
+      name,
+      controlRef: registration.controlRef ?? fallbackControlRef,
+      validityData: (0, _getCombinedFieldValidityData.getCombinedFieldValidityData)(validityData, invalid),
+      validate
+    });
+  }
+  function deleteRegistration(id = registrationRef.current?.id) {
+    if (id) {
+      formRef.current.fields.delete(id);
+    }
+  }
+  function syncInitialValue() {
+    const registration = registrationRef.current;
+    if (!registration) {
+      return;
+    }
+    let initialValue = registration.value;
+    if (initialValue === undefined) {
+      initialValue = getValue();
+    }
+    if (validityData.initialValue === null && initialValue !== null) {
+      setValidityData(prev => ({
+        ...prev,
+        initialValue
+      }));
+    }
+  }
+  (0, _useIsoLayoutEffect.useIsoLayoutEffect)(() => {
+    const registration = registrationRef.current;
+    if (!registration || !registration.id) {
+      return;
+    }
+    formRef.current.fields.set(registration.id, {
+      getValue,
+      name,
+      controlRef: registration.controlRef ?? fallbackControlRef,
+      validityData: (0, _getCombinedFieldValidityData.getCombinedFieldValidityData)(validityData, invalid),
+      validate
+    });
+  }, [formRef, getValue, invalid, name, validate, validityData]);
+  (0, _useIsoLayoutEffect.useIsoLayoutEffect)(() => {
+    const fields = formRef.current.fields;
+    return () => {
+      const id = registrationRef.current?.id;
+      if (id) {
+        fields.delete(id);
+      }
+    };
+  }, [formRef]);
+  return (0, _useStableCallback.useStableCallback)((source, registration) => {
+    if (!registration) {
+      if (activeFieldControlSourceRef.current === source) {
+        activeFieldControlSourceRef.current = null;
+        deleteRegistration();
+        registrationRef.current = null;
+      }
+      return;
+    }
+    const previousId = registrationRef.current?.id;
+    activeFieldControlSourceRef.current = source;
+    registrationRef.current = registration;
+    if (previousId && previousId !== registration.id) {
+      deleteRegistration(previousId);
+    }
+    syncInitialValue();
+    refreshRegistration();
+  });
+}

package/field/root/useFieldValidation.js

@@ -197,6 +197,7 @@ function useFieldValidation(params) {
       if (currentFieldData) {
         formRef.current.fields.set(controlId, {
           ...currentFieldData,
+          // Keep Form-level errors part of overall field validity for submit blocking/focus logic.
           ...(0, _getCombinedFieldValidityData.getCombinedFieldValidityData)(nextValidityData, invalid)
         });
       }
@@ -217,9 +218,9 @@ function useFieldValidation(params) {
         commit(event.currentTarget.value, true);
         return;
       }
-      if (invalid) {
-        return;
-      }
+
+      // When validating on change, run client-side validation even if
+      // externally invalid
       const element = event.currentTarget;
       if (element.value === '') {
         // Ignore the debounce time for empty values.
@@ -235,7 +236,7 @@ function useFieldValidation(params) {
         commit(element.value);
       }
     }
-  }, getValidationProps(externalProps)), [getValidationProps, clearErrors, name, timeout, commit, invalid, validationDebounceTime, shouldValidateOnChange]);
+  }, getValidationProps(externalProps)), [getValidationProps, clearErrors, name, timeout, commit, validationDebounceTime, shouldValidateOnChange]);
   return React.useMemo(() => ({
     getValidationProps,
     getInputValidationProps,

package/field/root/useRegisterFieldControl.d.ts

@@ -0,0 +1,5 @@
+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;

package/field/root/useRegisterFieldControl.js

@@ -0,0 +1,41 @@
+"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 _FieldRootContext = require("./FieldRootContext");
+function useRegisterFieldControl(controlRef, params) {
+  const {
+    enabled = true,
+    getValue,
+    id,
+    value
+  } = params;
+  const {
+    registerFieldControl
+  } = (0, _FieldRootContext.useFieldRootContext)();
+  const sourceRef = React.useRef(null);
+  if (!sourceRef.current) {
+    sourceRef.current = Symbol();
+  }
+  (0, _useIsoLayoutEffect.useIsoLayoutEffect)(() => {
+    const source = sourceRef.current;
+    if (!source || !enabled) {
+      return undefined;
+    }
+    registerFieldControl(source, {
+      controlRef,
+      getValue,
+      id,
+      value
+    });
+    return () => {
+      registerFieldControl(source, undefined);
+    };
+  }, [controlRef, enabled, getValue, id, registerFieldControl, value]);
+}

package/field/utils/constants.d.ts

@@ -1,3 +1,4 @@
+import type { FieldRootState } from "../root/FieldRoot.js";
 export declare const DEFAULT_VALIDITY_STATE: {
   badInput: boolean;
   customError: boolean;
@@ -11,6 +12,8 @@ export declare const DEFAULT_VALIDITY_STATE: {
   valid: null;
   valueMissing: boolean;
 };
+export declare const DEFAULT_FIELD_STATE_ATTRIBUTES: Pick<FieldRootState, 'valid' | 'touched' | 'dirty' | 'filled' | 'focused'>;
+export declare const DEFAULT_FIELD_ROOT_STATE: FieldRootState;
 export declare const fieldValidityMapping: {
   valid(value: boolean | null): Record<string, string> | null;
 };

package/field/utils/constants.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.fieldValidityMapping = exports.DEFAULT_VALIDITY_STATE = void 0;
+exports.fieldValidityMapping = exports.DEFAULT_VALIDITY_STATE = exports.DEFAULT_FIELD_STATE_ATTRIBUTES = exports.DEFAULT_FIELD_ROOT_STATE = void 0;
 var _FieldControlDataAttributes = require("../control/FieldControlDataAttributes");
 const DEFAULT_VALIDITY_STATE = exports.DEFAULT_VALIDITY_STATE = {
   badInput: false,
@@ -18,6 +18,17 @@ const DEFAULT_VALIDITY_STATE = exports.DEFAULT_VALIDITY_STATE = {
   valid: null,
   valueMissing: false
 };
+const DEFAULT_FIELD_STATE_ATTRIBUTES = exports.DEFAULT_FIELD_STATE_ATTRIBUTES = {
+  valid: null,
+  touched: false,
+  dirty: false,
+  filled: false,
+  focused: false
+};
+const DEFAULT_FIELD_ROOT_STATE = exports.DEFAULT_FIELD_ROOT_STATE = {
+  disabled: false,
+  ...DEFAULT_FIELD_STATE_ATTRIBUTES
+};
 const fieldValidityMapping = exports.fieldValidityMapping = {
   valid(value) {
     if (value === null) {

package/field/validity/FieldValidity.d.ts

@@ -2,14 +2,20 @@ import * as React from 'react';
 import { FieldValidityData } from "../root/FieldRoot.js";
 import { type TransitionStatus } from "../../utils/useTransitionStatus.js";
 /**
- * Used to display a custom message based on the field’s validity.
+ * Used to display a custom message based on the field's validity.
  * Requires `children` to be a function that accepts field validity state as an argument.
  *
  * Documentation: [Base UI Field](https://base-ui.com/react/components/field)
  */
 export declare const FieldValidity: React.FC<FieldValidity.Props>;
 export interface FieldValidityState extends Omit<FieldValidityData, 'state'> {
+  /**
+   * The validity state.
+   */
   validity: FieldValidityData['state'];
+  /**
+   * The transition status of the component.
+   */
   transitionStatus: TransitionStatus;
 }
 export interface FieldValidityProps {
@@ -24,7 +30,7 @@ export interface FieldValidityProps {
    * </Field.Validity>
    * ```
    */
-  children: (state: FieldValidity.State) => React.ReactNode;
+  children: (state: FieldValidityState) => React.ReactNode;
 }
 export declare namespace FieldValidity {
   type State = FieldValidityState;

package/field/validity/FieldValidity.js

@@ -12,7 +12,7 @@ var _getCombinedFieldValidityData = require("../utils/getCombinedFieldValidityDa
 var _useTransitionStatus = require("../../utils/useTransitionStatus");
 var _jsxRuntime = require("react/jsx-runtime");
 /**
- * Used to display a custom message based on the field’s validity.
+ * Used to display a custom message based on the field's validity.
  * Requires `children` to be a function that accepts field validity state as an argument.
  *
  * Documentation: [Base UI Field](https://base-ui.com/react/components/field)

package/fieldset/legend/FieldsetLegend.d.ts

@@ -13,7 +13,7 @@ export interface FieldsetLegendState {
    */
   disabled: boolean;
 }
-export interface FieldsetLegendProps extends BaseUIComponentProps<'div', FieldsetLegend.State> {}
+export interface FieldsetLegendProps extends BaseUIComponentProps<'div', FieldsetLegendState> {}
 export declare namespace FieldsetLegend {
   type State = FieldsetLegendState;
   type Props = FieldsetLegendProps;

package/fieldset/legend/FieldsetLegend.js

@@ -21,6 +21,7 @@ const FieldsetLegend = exports.FieldsetLegend = /*#__PURE__*/React.forwardRef(fu
   const {
     render,
     className,
+    style,
     id: idProp,
     ...elementProps
   } = componentProps;

package/fieldset/root/FieldsetRoot.d.ts

@@ -13,7 +13,7 @@ export interface FieldsetRootState {
    */
   disabled: boolean;
 }
-export interface FieldsetRootProps extends BaseUIComponentProps<'fieldset', FieldsetRoot.State> {}
+export interface FieldsetRootProps extends BaseUIComponentProps<'fieldset', FieldsetRootState> {}
 export declare namespace FieldsetRoot {
   type State = FieldsetRootState;
   type Props = FieldsetRootProps;

package/fieldset/root/FieldsetRoot.js

@@ -20,6 +20,7 @@ const FieldsetRoot = exports.FieldsetRoot = /*#__PURE__*/React.forwardRef(functi
   const {
     render,
     className,
+    style,
     disabled = false,
     ...elementProps
   } = componentProps;

package/floating-ui-react/components/FloatingDelayGroup.js

@@ -10,7 +10,7 @@ exports.useDelayGroup = useDelayGroup;
 var React = _interopRequireWildcard(require("react"));
 var _useTimeout = require("@base-ui/utils/useTimeout");
 var _useIsoLayoutEffect = require("@base-ui/utils/useIsoLayoutEffect");
-var _useHover = require("../hooks/useHover");
+var _useHoverShared = require("../hooks/useHoverShared");
 var _createBaseUIEventDetails = require("../../utils/createBaseUIEventDetails");
 var _reasons = require("../../utils/reasons");
 var _jsxRuntime = require("react/jsx-runtime");
@@ -138,7 +138,7 @@ function useDelayGroup(context, options = {
     currentIdRef.current = floatingId;
     delayRef.current = {
       open: 0,
-      close: (0, _useHover.getDelay)(initialDelayRef.current, 'close')
+      close: (0, _useHoverShared.getDelay)(initialDelayRef.current, 'close')
     };
     if (prevId !== null && prevId !== floatingId) {
       setIsInstantPhase(true);

package/floating-ui-react/components/FloatingFocusManager.d.ts

@@ -11,7 +11,7 @@ export interface FloatingFocusManagerProps {
   /**
    * The interaction type used to open the floating element.
    */
-  openInteractionType?: (InteractionType | null) | undefined;
+  openInteractionType?: InteractionType | null | undefined;
   /**
    * Whether or not the focus manager should be disabled. Useful to delay focus
    * management until after a transition completes or some other conditional
@@ -30,7 +30,7 @@ export interface FloatingFocusManagerProps {
    *   or `false`/`undefined` to do nothing.
    * @default true
    */
-  initialFocus?: (boolean | React.RefObject<HTMLElement | null> | ((openType: InteractionType) => boolean | HTMLElement | null | void)) | undefined;
+  initialFocus?: boolean | React.RefObject<HTMLElement | null> | ((openType: InteractionType) => boolean | HTMLElement | null | void) | undefined;
   /**
    * Determines the element to focus when the floating element is closed.
    *
@@ -42,7 +42,7 @@ export interface FloatingFocusManagerProps {
    *   or `false`/`undefined` to do nothing.
    * @default true
    */
-  returnFocus?: (boolean | React.RefObject<HTMLElement | null> | ((closeType: InteractionType) => boolean | HTMLElement | null | void)) | undefined;
+  returnFocus?: boolean | React.RefObject<HTMLElement | null> | ((closeType: InteractionType) => boolean | HTMLElement | null | void) | undefined;
   /**
    * Determines where focus should be restored if focus inside the floating element is lost
    * (such as due to the removal of the currently focused element from the DOM).
@@ -53,7 +53,7 @@ export interface FloatingFocusManagerProps {
    * - `false`: do not restore focus
    * @default false
    */
-  restoreFocus?: (boolean | 'popup') | undefined;
+  restoreFocus?: boolean | 'popup' | undefined;
   /**
    * Determines if focus is “modal”, meaning focus is fully trapped inside the
    * floating element and outside content cannot be accessed. This includes
@@ -72,20 +72,25 @@ export interface FloatingFocusManagerProps {
   /**
    * Overrides the element to focus when tabbing forward out of the floating element.
    */
-  nextFocusableElement?: (HTMLElement | React.RefObject<HTMLElement | null> | null) | undefined;
+  nextFocusableElement?: HTMLElement | React.RefObject<HTMLElement | null> | null | undefined;
   /**
    * Overrides the element to focus when tabbing backward out of the floating element.
    */
-  previousFocusableElement?: (HTMLElement | React.RefObject<HTMLElement | null> | null) | undefined;
+  previousFocusableElement?: HTMLElement | React.RefObject<HTMLElement | null> | null | undefined;
   /**
    * Ref to the focus guard preceding the floating element content.
-   * Can be useful to focus the popup progammatically.
+   * Can be useful to focus the popup programmatically.
    */
   beforeContentFocusGuardRef?: React.RefObject<HTMLSpanElement | null> | undefined;
   /**
    * External FlatingTree to use when the one provided by context can't be used.
    */
   externalTree?: FloatingTreeStore | undefined;
+  /**
+   * Additional elements that should be treated as part of the floating subtree
+   * even if they are rendered outside the floating element itself.
+   */
+  getInsideElements?: (() => Array<Element | null | undefined>) | undefined;
 }
 /**
  * Provides focus management for the floating element.