@base-ui/react 1.7.0 → 1.8.0

package/field/root/FieldRoot.d.mts

@@ -70,11 +70,12 @@ export interface FieldRootProps extends BaseUIComponentProps<'div', FieldRootSta
   name?: string | undefined;
   /**
    * A function for custom validation. Return a string or an array of strings with
-   * the error message(s) if the value is invalid, or `null` if the value is valid.
+   * the error message(s) if the value is invalid. Returning nothing, `null`, an empty
+   * string, or an empty array means the value is valid.
    * Asynchronous functions are supported, but they do not prevent form submission
    * when using `validationMode="onSubmit"`.
    */
-  validate?: ((value: unknown, formValues: Form.Values) => string | string[] | null | Promise<string | string[] | null>) | undefined;
+  validate?: ((value: unknown, formValues: Form.Values) => string | string[] | null | void | Promise<string | string[] | null | void>) | undefined;
   /**
    * Determines when the field should be validated.
    * This takes precedence over the `validationMode` prop on `<Form>`.

package/field/root/FieldRoot.d.ts

@@ -70,11 +70,12 @@ export interface FieldRootProps extends BaseUIComponentProps<'div', FieldRootSta
   name?: string | undefined;
   /**
    * A function for custom validation. Return a string or an array of strings with
-   * the error message(s) if the value is invalid, or `null` if the value is valid.
+   * the error message(s) if the value is invalid. Returning nothing, `null`, an empty
+   * string, or an empty array means the value is valid.
    * Asynchronous functions are supported, but they do not prevent form submission
    * when using `validationMode="onSubmit"`.
    */
-  validate?: ((value: unknown, formValues: Form.Values) => string | string[] | null | Promise<string | string[] | null>) | undefined;
+  validate?: ((value: unknown, formValues: Form.Values) => string | string[] | null | void | Promise<string | string[] | null | void>) | undefined;
   /**
    * Determines when the field should be validated.
    * This takes precedence over the `validationMode` prop on `<Form>`.

package/field/root/FieldRoot.js

@@ -24,7 +24,7 @@ var _jsxRuntime = require("react/jsx-runtime");
   const {
     errors,
     validationMode: formValidationMode,
-    submitAttemptedRef
+    submitCountRef
   } = (0, _FormContext.useFormContext)();
   const {
     render,
@@ -74,7 +74,7 @@ var _jsxRuntime = require("react/jsx-runtime");
     }
     setTouchedUnwrapped(value);
   });
-  const shouldValidateOnChange = (0, _useStableCallback.useStableCallback)(() => validationMode === 'onChange' || validationMode === 'onSubmit' && submitAttemptedRef.current);
+  const shouldValidateOnChange = (0, _useStableCallback.useStableCallback)(() => validationMode === 'onChange' || validationMode === 'onSubmit' && submitCountRef.current > 0);
   const formError = effectiveName && Object.hasOwn(errors, effectiveName) ? errors[effectiveName] : null;
   const hasFormError = !!(Array.isArray(formError) ? formError.length : formError);
   const invalid = invalidProp === true || hasFormError;
@@ -107,9 +107,11 @@ var _jsxRuntime = require("react/jsx-runtime");
     markedDirtyRef,
     state,
     shouldValidateOnChange,
+    validationMode,
     registeredFieldIdRef
   });
   const [validateFieldControl, registerFieldControl] = (0, _useFieldControlRegistration.useFieldControlRegistration)({
+    change: validation.change,
     commit: validation.commit,
     invalid,
     markedDirtyRef,

package/field/root/FieldRoot.mjs

@@ -20,7 +20,7 @@ const FieldRootInner = /*#__PURE__*/React.forwardRef(function FieldRootInner(com
   const {
     errors,
     validationMode: formValidationMode,
-    submitAttemptedRef
+    submitCountRef
   } = useFormContext();
   const {
     render,
@@ -70,7 +70,7 @@ const FieldRootInner = /*#__PURE__*/React.forwardRef(function FieldRootInner(com
     }
     setTouchedUnwrapped(value);
   });
-  const shouldValidateOnChange = useStableCallback(() => validationMode === 'onChange' || validationMode === 'onSubmit' && submitAttemptedRef.current);
+  const shouldValidateOnChange = useStableCallback(() => validationMode === 'onChange' || validationMode === 'onSubmit' && submitCountRef.current > 0);
   const formError = effectiveName && Object.hasOwn(errors, effectiveName) ? errors[effectiveName] : null;
   const hasFormError = !!(Array.isArray(formError) ? formError.length : formError);
   const invalid = invalidProp === true || hasFormError;
@@ -103,9 +103,11 @@ const FieldRootInner = /*#__PURE__*/React.forwardRef(function FieldRootInner(com
     markedDirtyRef,
     state,
     shouldValidateOnChange,
+    validationMode,
     registeredFieldIdRef
   });
   const [validateFieldControl, registerFieldControl] = useFieldControlRegistration({
+    change: validation.change,
     commit: validation.commit,
     invalid,
     markedDirtyRef,

package/field/root/FieldRootDataAttributes.d.mts

@@ -1,30 +1,28 @@
-export declare enum FieldRootDataAttributes {
-  /**
-   * Present when the field is disabled.
-   */
-  disabled = "data-disabled",
-  /**
-   * Present when the field has been touched.
-   */
-  touched = "data-touched",
-  /**
-   * Present when the field's value has changed.
-   */
-  dirty = "data-dirty",
-  /**
-   * Present when the field is valid.
-   */
-  valid = "data-valid",
-  /**
-   * Present when the field is invalid.
-   */
-  invalid = "data-invalid",
-  /**
-   * Present when the field is filled.
-   */
-  filled = "data-filled",
-  /**
-   * Present when the field control is focused.
-   */
-  focused = "data-focused",
-}
+/**
+ * Present when the field is disabled.
+ */
+export declare const disabled = "data-disabled";
+/**
+ * Present when the field has been touched.
+ */
+export declare const touched = "data-touched";
+/**
+ * Present when the field's value has changed.
+ */
+export declare const dirty = "data-dirty";
+/**
+ * Present when the field is valid.
+ */
+export declare const valid = "data-valid";
+/**
+ * Present when the field is invalid.
+ */
+export declare const invalid = "data-invalid";
+/**
+ * Present when the field is filled.
+ */
+export declare const filled = "data-filled";
+/**
+ * Present when the field control is focused.
+ */
+export declare const focused = "data-focused";

package/field/root/FieldRootDataAttributes.d.ts

@@ -1,30 +1,28 @@
-export declare enum FieldRootDataAttributes {
-  /**
-   * Present when the field is disabled.
-   */
-  disabled = "data-disabled",
-  /**
-   * Present when the field has been touched.
-   */
-  touched = "data-touched",
-  /**
-   * Present when the field's value has changed.
-   */
-  dirty = "data-dirty",
-  /**
-   * Present when the field is valid.
-   */
-  valid = "data-valid",
-  /**
-   * Present when the field is invalid.
-   */
-  invalid = "data-invalid",
-  /**
-   * Present when the field is filled.
-   */
-  filled = "data-filled",
-  /**
-   * Present when the field control is focused.
-   */
-  focused = "data-focused",
-}
+/**
+ * Present when the field is disabled.
+ */
+export declare const disabled = "data-disabled";
+/**
+ * Present when the field has been touched.
+ */
+export declare const touched = "data-touched";
+/**
+ * Present when the field's value has changed.
+ */
+export declare const dirty = "data-dirty";
+/**
+ * Present when the field is valid.
+ */
+export declare const valid = "data-valid";
+/**
+ * Present when the field is invalid.
+ */
+export declare const invalid = "data-invalid";
+/**
+ * Present when the field is filled.
+ */
+export declare const filled = "data-filled";
+/**
+ * Present when the field control is focused.
+ */
+export declare const focused = "data-focused";

package/field/root/FieldRootDataAttributes.js

@@ -3,35 +3,32 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.FieldRootDataAttributes = void 0;
-let FieldRootDataAttributes = exports.FieldRootDataAttributes = /*#__PURE__*/function (FieldRootDataAttributes) {
-  /**
-   * Present when the field is disabled.
-   */
-  FieldRootDataAttributes["disabled"] = "data-disabled";
-  /**
-   * Present when the field has been touched.
-   */
-  FieldRootDataAttributes["touched"] = "data-touched";
-  /**
-   * Present when the field's value has changed.
-   */
-  FieldRootDataAttributes["dirty"] = "data-dirty";
-  /**
-   * Present when the field is valid.
-   */
-  FieldRootDataAttributes["valid"] = "data-valid";
-  /**
-   * Present when the field is invalid.
-   */
-  FieldRootDataAttributes["invalid"] = "data-invalid";
-  /**
-   * Present when the field is filled.
-   */
-  FieldRootDataAttributes["filled"] = "data-filled";
-  /**
-   * Present when the field control is focused.
-   */
-  FieldRootDataAttributes["focused"] = "data-focused";
-  return FieldRootDataAttributes;
-}({});
+exports.valid = exports.touched = exports.invalid = exports.focused = exports.filled = exports.disabled = exports.dirty = void 0;
+/**
+ * Present when the field is disabled.
+ */
+const disabled = exports.disabled = 'data-disabled';
+/**
+ * Present when the field has been touched.
+ */
+const touched = exports.touched = 'data-touched';
+/**
+ * Present when the field's value has changed.
+ */
+const dirty = exports.dirty = 'data-dirty';
+/**
+ * Present when the field is valid.
+ */
+const valid = exports.valid = 'data-valid';
+/**
+ * Present when the field is invalid.
+ */
+const invalid = exports.invalid = 'data-invalid';
+/**
+ * Present when the field is filled.
+ */
+const filled = exports.filled = 'data-filled';
+/**
+ * Present when the field control is focused.
+ */
+const focused = exports.focused = 'data-focused';

package/field/root/FieldRootDataAttributes.mjs

@@ -1,31 +1,28 @@
-export let FieldRootDataAttributes = /*#__PURE__*/function (FieldRootDataAttributes) {
-  /**
-   * Present when the field is disabled.
-   */
-  FieldRootDataAttributes["disabled"] = "data-disabled";
-  /**
-   * Present when the field has been touched.
-   */
-  FieldRootDataAttributes["touched"] = "data-touched";
-  /**
-   * Present when the field's value has changed.
-   */
-  FieldRootDataAttributes["dirty"] = "data-dirty";
-  /**
-   * Present when the field is valid.
-   */
-  FieldRootDataAttributes["valid"] = "data-valid";
-  /**
-   * Present when the field is invalid.
-   */
-  FieldRootDataAttributes["invalid"] = "data-invalid";
-  /**
-   * Present when the field is filled.
-   */
-  FieldRootDataAttributes["filled"] = "data-filled";
-  /**
-   * Present when the field control is focused.
-   */
-  FieldRootDataAttributes["focused"] = "data-focused";
-  return FieldRootDataAttributes;
-}({});
+/**
+ * Present when the field is disabled.
+ */
+export const disabled = 'data-disabled';
+/**
+ * Present when the field has been touched.
+ */
+export const touched = 'data-touched';
+/**
+ * Present when the field's value has changed.
+ */
+export const dirty = 'data-dirty';
+/**
+ * Present when the field is valid.
+ */
+export const valid = 'data-valid';
+/**
+ * Present when the field is invalid.
+ */
+export const invalid = 'data-invalid';
+/**
+ * Present when the field is filled.
+ */
+export const filled = 'data-filled';
+/**
+ * Present when the field control is focused.
+ */
+export const focused = 'data-focused';

package/field/root/useFieldValidation.d.mts

@@ -18,13 +18,14 @@ export declare function isEligibleInput(input: HTMLInputElement, formElement: HT
 export declare function useFieldValidation(params: UseFieldValidationParameters): UseFieldValidationReturnValue;
 export interface UseFieldValidationParameters {
   setValidityData: (data: FieldValidityData) => void;
-  validate: (value: unknown, formValues: Form.Values) => string | string[] | null | Promise<string | string[] | null>;
+  validate: (value: unknown, formValues: Form.Values) => string | string[] | null | void | Promise<string | string[] | null | void>;
   validityData: FieldValidityData;
   validationDebounceTime: number;
   invalid: boolean;
   markedDirtyRef: React.RefObject<boolean>;
   state: FieldRootState;
   shouldValidateOnChange: () => boolean;
+  validationMode: Form.ValidationMode;
   registeredFieldIdRef: React.RefObject<string | undefined>;
 }
 export interface UseFieldValidationReturnValue {
@@ -34,5 +35,5 @@ export interface UseFieldValidationReturnValue {
   registerInput: (element: HTMLInputElement, registration: RegisteredInput) => void | (() => void);
   getInputControl: () => HTMLElement | null;
   commit: (value: unknown) => Promise<void>;
-  change: (value: unknown) => void;
+  change: (value: unknown, cancelPending?: boolean) => void;
 }

package/field/root/useFieldValidation.d.ts

@@ -18,13 +18,14 @@ export declare function isEligibleInput(input: HTMLInputElement, formElement: HT
 export declare function useFieldValidation(params: UseFieldValidationParameters): UseFieldValidationReturnValue;
 export interface UseFieldValidationParameters {
   setValidityData: (data: FieldValidityData) => void;
-  validate: (value: unknown, formValues: Form.Values) => string | string[] | null | Promise<string | string[] | null>;
+  validate: (value: unknown, formValues: Form.Values) => string | string[] | null | void | Promise<string | string[] | null | void>;
   validityData: FieldValidityData;
   validationDebounceTime: number;
   invalid: boolean;
   markedDirtyRef: React.RefObject<boolean>;
   state: FieldRootState;
   shouldValidateOnChange: () => boolean;
+  validationMode: Form.ValidationMode;
   registeredFieldIdRef: React.RefObject<string | undefined>;
 }
 export interface UseFieldValidationReturnValue {
@@ -34,5 +35,5 @@ export interface UseFieldValidationReturnValue {
   registerInput: (element: HTMLInputElement, registration: RegisteredInput) => void | (() => void);
   getInputControl: () => HTMLElement | null;
   commit: (value: unknown) => Promise<void>;
-  change: (value: unknown) => void;
+  change: (value: unknown, cancelPending?: boolean) => void;
 }