@jobber/components 9.14.4 → 9.15.0

package/dist/useCompositeListItem-es.js

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { useLayoutEffect } from 'react';
-import { ae as evaluate, af as getSide, ag as getSideAxis, ah as getOppositePlacement, ai as getExpandedPlacements, aj as getOppositeAxisPlacements, ak as getAlignmentSides, al as getAlignment, am as min, an as max, ao as getAlignmentAxis, ap as getPaddingObject, aa as rectToClientRect, aq as getOppositeAxis, ar as clamp, as as getAxisLength, at as getDocumentElement, au as isElement, i as isHTMLElement, av as createCoords, aw as round, ax as isTopLayer, ay as getNodeName, az as isOverflowElement, aA as getNodeScroll, I as getWindow, b as getParentNode, a as isLastTraversableNode, aB as isTableElement, aC as isContainingBlock, aD as getContainingBlock, g as getComputedStyle$1, aE as getOverflowAncestors, aF as getFrameElement, aG as isWebKit, aH as floor, aI as useId, aJ as useFloatingParentNodeId, aK as FloatingRootStore, aL as PopupTriggerMap, c as useIsoLayoutEffect, aM as useFloatingTree, $ as getFloatingFocusElement, aN as isTypeableCombobox, w as useValueAsRef, d as useStableCallback, a8 as useAnimationFrame, aO as isIndexOutOfListBounds, aP as getMinListIndex, aQ as getMaxListIndex, D as activeElement, o as ownerDocument, a0 as contains, aR as stopEvent, h as createChangeEventDetails, aS as listNavigation, aT as findNonDisabledListIndex, e as getTarget, Y as focusOut, a9 as webkit, aU as enqueueFocus, ac as isVirtualClick, aV as isVirtualPointerEvent, aW as ARROW_UP, aX as ARROW_DOWN, aY as ARROW_LEFT, aZ as ARROW_RIGHT, q as useTimeout, a_ as isElementVisible, a$ as isListIndexDisabled, u as useBaseUiId, b0 as jsdom, a7 as useDirection, b1 as DISABLED_TRANSITIONS_STYLE, a6 as popupStateMapping, b2 as useScrollLock } from './useScrollLock-es.js';
+import { ae as evaluate, af as getSide, ag as getSideAxis, ah as getOppositePlacement, ai as getExpandedPlacements, aj as getOppositeAxisPlacements, ak as getAlignmentSides, al as getAlignment, am as min, an as max, ao as getAlignmentAxis, ap as getPaddingObject, aa as rectToClientRect, aq as getOppositeAxis, ar as clamp, as as getAxisLength, at as getDocumentElement, au as isElement, i as isHTMLElement, av as createCoords, aw as round, ax as isTopLayer, ay as getNodeName, az as isOverflowElement, aA as getNodeScroll, I as getWindow, b as getParentNode, a as isLastTraversableNode, aB as isTableElement, aC as isContainingBlock, aD as getContainingBlock, g as getComputedStyle$1, aE as getOverflowAncestors, aF as getFrameElement, aG as isWebKit, aH as floor, aI as useId, aJ as useFloatingParentNodeId, aK as FloatingRootStore, aL as PopupTriggerMap, c as useIsoLayoutEffect, aM as useFloatingTree, $ as getFloatingFocusElement, aN as isTypeableCombobox, w as useValueAsRef, d as useStableCallback, a8 as useAnimationFrame, aO as isIndexOutOfListBounds, aP as getMinListIndex, aQ as getMaxListIndex, D as activeElement, o as ownerDocument, a0 as contains, aR as stopEvent, j as createChangeEventDetails, aS as listNavigation, aT as findNonDisabledListIndex, e as getTarget, Y as focusOut, a9 as webkit, aU as enqueueFocus, ac as isVirtualClick, aV as isVirtualPointerEvent, aW as ARROW_UP, aX as ARROW_DOWN, aY as ARROW_LEFT, aZ as ARROW_RIGHT, f as useTimeout, a_ as isElementVisible, a$ as isListIndexDisabled, u as useBaseUiId, b0 as jsdom, a7 as useDirection, b1 as DISABLED_TRANSITIONS_STYLE, a6 as popupStateMapping, b2 as useScrollLock } from './useScrollLock-es.js';
 import { a as useRefWithInit, c as EMPTY_ARRAY, N as NOOP, E as EMPTY_OBJECT, f as formatErrorMessage, u as useRenderElement } from './useRenderElement-es.js';
 import { jsx } from 'react/jsx-runtime';
 import * as ReactDOM from 'react-dom';

package/dist/useFieldValidation-cjs.js

@@ -0,0 +1,323 @@
+'use strict';
+
+var React = require('react');
+var useRenderElement = require('./useRenderElement-cjs.js');
+var useScrollLock = require('./useScrollLock-cjs.js');
+var useCompositeListItem = require('./useCompositeListItem-cjs.js');
+
+function _interopNamespaceDefault(e) {
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
+
+const FieldItemContext = /*#__PURE__*/React__namespace.createContext({
+  disabled: false
+});
+if (process.env.NODE_ENV !== "production") FieldItemContext.displayName = "FieldItemContext";
+function useFieldItemContext() {
+  const context = React__namespace.useContext(FieldItemContext);
+  return context;
+}
+
+/**
+ * Combines the field's client-side, stateful validity data with the external invalid state to
+ * determine the field's true validity.
+ */
+function getCombinedFieldValidityData(validityData, invalid) {
+  return {
+    ...validityData,
+    state: {
+      ...validityData.state,
+      valid: !invalid && validityData.state.valid
+    }
+  };
+}
+
+const validityKeys = Object.keys(useCompositeListItem.DEFAULT_VALIDITY_STATE);
+/**
+ * Whether an input participates in the surrounding Base UI Form. Inputs that are effectively
+ * disabled, or whose `form` attribute explicitly associates them with another form, are excluded.
+ * DOM position only matters when it associates the input with a different form. Otherwise, field
+ * registration is context-driven, so portaled inputs (for example inside a dialog) still belong to
+ * the form for both validation and values projected into `onFormSubmit`.
+ */
+function isEligibleInput(input, formElement) {
+  if (input.matches(':disabled')) {
+    return false;
+  }
+  if (!formElement || input.form === formElement) {
+    return true;
+  }
+
+  // React context crosses portal boundaries. An unassociated portaled input still participates in
+  // contextual validation, unless an explicit `form` attribute opts it out of the surrounding Form.
+  return input.form === null && !input.hasAttribute('form');
+}
+
+/**
+ * Picks the input whose native validity should represent a field that owns several inputs (such as a
+ * checkbox or radio group). Prefers the first eligible currently-invalid input, where "first" follows
+ * registration order (mount order), and otherwise returns the first eligible input.
+ */
+function findRepresentativeInput(inputs, formElement) {
+  let fallback = null;
+  for (const input of inputs.keys()) {
+    if (!isEligibleInput(input, formElement)) {
+      continue;
+    }
+    if (!input.validity.valid) {
+      return input;
+    }
+    fallback ??= input;
+  }
+  return fallback;
+}
+function clearCustomValidity(element, inputs) {
+  for (const input of inputs.keys()) {
+    input.setCustomValidity('');
+  }
+  element?.setCustomValidity('');
+}
+function useFieldValidation(params) {
+  const {
+    elementRef,
+    formRef
+  } = useCompositeListItem.useFormContext();
+  const {
+    setValidityData,
+    validate,
+    validityData,
+    validationDebounceTime,
+    invalid,
+    markedDirtyRef,
+    state,
+    shouldValidateOnChange,
+    registeredFieldIdRef
+  } = params;
+  const {
+    controlId,
+    getDescriptionProps
+  } = useCompositeListItem.useLabelableContext();
+  const timeout = useScrollLock.useTimeout();
+  const inputRef = React__namespace.useRef(null);
+  const registeredInputs = useRenderElement.useRefWithInit(() => new Map()).current;
+  const validationCommitIdRef = React__namespace.useRef(0);
+
+  // Groups register several inputs against a single field so focus, validation, and form-value
+  // projection can use the same live controls. This also ensures a `required` checkbox can't be
+  // satisfied by another input in the group, matching native per-checkbox behavior.
+  const registerInput = React__namespace.useCallback((element, registration) => {
+    registeredInputs.set(element, registration);
+    return () => {
+      registeredInputs.delete(element);
+    };
+  }, [registeredInputs]);
+  const getInputControl = useScrollLock.useStableCallback(() => {
+    const element = findRepresentativeInput(registeredInputs, elementRef.current);
+    return element && registeredInputs.get(element)?.controlRef.current || null;
+  });
+  const commit = useScrollLock.useStableCallback(async (value, revalidate = false) => {
+    validationCommitIdRef.current += 1;
+    const validationCommitId = validationCommitIdRef.current;
+    function updateRegisteredFieldValidity(nextValidityData, externalInvalid = invalid) {
+      const fieldId = registeredFieldIdRef.current ?? controlId;
+      if (fieldId == null) {
+        return;
+      }
+      const currentFieldData = formRef.current.fields.get(fieldId);
+      if (!currentFieldData) {
+        return;
+      }
+      const validityDataWithFormErrors = getCombinedFieldValidityData(nextValidityData, externalInvalid);
+      formRef.current.fields.set(fieldId, {
+        ...currentFieldData,
+        validityData: validityDataWithFormErrors
+      });
+    }
+    function publishAllValid(input, externalInvalid) {
+      const nextValidityData = {
+        value,
+        state: {
+          ...useCompositeListItem.DEFAULT_VALIDITY_STATE,
+          valid: true
+        },
+        error: '',
+        errors: [],
+        initialValue: validityData.initialValue
+      };
+      clearCustomValidity(input, registeredInputs);
+      updateRegisteredFieldValidity(nextValidityData, externalInvalid);
+      setValidityData(nextValidityData);
+    }
+
+    // A field can own several inputs (such as a checkbox or radio group), but only the last-mounted
+    // one wins the shared `inputRef`. Validate against the registry instead so every input counts;
+    // `inputRef` is the fallback only when no inputs are registered.
+    const element = registeredInputs.size > 0 ? findRepresentativeInput(registeredInputs, elementRef.current) : inputRef.current;
+    // A field with no eligible input has no native constraint, but its custom validator still
+    // applies to the logical value at the configured validation boundary.
+
+    if (revalidate) {
+      if (state.valid !== false || !element) {
+        return;
+      }
+      const currentNativeValidity = element.validity;
+      if (!currentNativeValidity.valueMissing) {
+        // The 'valueMissing' (required) condition has been resolved by the user typing.
+        // Temporarily mark the field as valid for this onChange event.
+        // Other native errors (e.g., typeMismatch) will be caught by full validation on blur or submit.
+        // The required value is now present; ignore stale external invalid state for this pass.
+        publishAllValid(element, false);
+        return;
+      }
+
+      // A stale custom error can coexist with valueMissing, but defer any other native errors.
+      for (const key of validityKeys) {
+        if (key !== 'valid' && key !== 'valueMissing' && key !== 'customError' && currentNativeValidity[key]) {
+          return;
+        }
+      }
+
+      // Value is still missing: publish the current native state so valueMissing and the changed
+      // value are observable immediately. Full custom validation still waits for its boundary.
+    }
+    function getState(el) {
+      const computedState = validityKeys.reduce((acc, key) => {
+        acc[key] = el.validity[key];
+        return acc;
+      }, {});
+      let hasOnlyValueMissingError = false;
+      for (const key of validityKeys) {
+        if (key === 'valid') {
+          continue;
+        }
+        if (key === 'valueMissing' && computedState[key]) {
+          hasOnlyValueMissingError = true;
+        } else if (computedState[key]) {
+          return computedState;
+        }
+      }
+
+      // Only make `valueMissing` mark the field invalid if it's been changed
+      // to reduce error noise.
+      if (hasOnlyValueMissingError && !markedDirtyRef.current) {
+        computedState.valid = true;
+        computedState.valueMissing = false;
+      }
+      return computedState;
+    }
+    timeout.clear();
+    let result = null;
+    let validationErrors = [];
+
+    // With no representative input the field carries no native constraint, so start from an
+    // all-valid native state and let the custom `validate` result below decide the outcome.
+    const nextState = element ? getState(element) : {
+      ...useCompositeListItem.DEFAULT_VALIDITY_STATE,
+      valid: true
+    };
+    let defaultValidationMessage;
+    const isValidatingOnChange = shouldValidateOnChange();
+    if (element && element.validationMessage && !isValidatingOnChange) {
+      // not validating on change, if there is a `validationMessage` from
+      // native validity, set errors and skip calling the custom validate fn
+      defaultValidationMessage = element.validationMessage;
+      validationErrors = [element.validationMessage];
+    } else {
+      // call the validate function because either
+      // - validating on change, or
+      // - native constraint validations passed, custom validity check is next
+      const formValues = Array.from(formRef.current.fields.values()).reduce((acc, field) => {
+        if (field.name) {
+          acc[field.name] = field.getValue();
+        }
+        return acc;
+      }, {});
+      const resultOrPromise = validate(value, formValues);
+      if (typeof resultOrPromise === 'object' && resultOrPromise !== null && 'then' in resultOrPromise) {
+        result = await resultOrPromise;
+        if (validationCommitId !== validationCommitIdRef.current) {
+          return;
+        }
+      } else {
+        result = resultOrPromise;
+      }
+      if (result !== null) {
+        nextState.valid = false;
+        nextState.customError = true;
+        if (Array.isArray(result)) {
+          validationErrors = result;
+          element?.setCustomValidity(result.join('\n'));
+        } else if (result) {
+          validationErrors = [result];
+          element?.setCustomValidity(result);
+        }
+      } else if (isValidatingOnChange) {
+        // validate function returned no errors, if validating on change
+        // we need to clear the custom validity state
+        clearCustomValidity(element, registeredInputs);
+        nextState.customError = false;
+        if (element && element.validationMessage) {
+          defaultValidationMessage = element.validationMessage;
+          validationErrors = [element.validationMessage];
+        } else if ((!element || element.validity.valid) && !nextState.valid) {
+          nextState.valid = true;
+        }
+      }
+    }
+    const nextValidityData = {
+      value,
+      state: nextState,
+      error: defaultValidationMessage ?? (Array.isArray(result) ? result[0] : result ?? ''),
+      errors: validationErrors,
+      initialValue: validityData.initialValue
+    };
+
+    // Keep Form-level errors part of overall field validity for submit blocking/focus logic.
+    updateRegisteredFieldValidity(nextValidityData);
+    setValidityData(nextValidityData);
+  });
+  const change = useScrollLock.useStableCallback(value => {
+    timeout.clear();
+    const validateOnChange = shouldValidateOnChange();
+    if (validateOnChange && value !== '' && validationDebounceTime) {
+      validationCommitIdRef.current += 1;
+      timeout.start(validationDebounceTime, () => {
+        commit(value);
+      });
+    } else {
+      commit(value, !validateOnChange);
+    }
+  });
+  const getValidationProps = React__namespace.useCallback((disabled, externalProps = {}) => useRenderElement.mergeProps(getDescriptionProps(externalProps), state.valid === false && !state.disabled && !disabled ? {
+    'aria-invalid': true
+  } : useRenderElement.EMPTY_OBJECT), [getDescriptionProps, state.disabled, state.valid]);
+  return React__namespace.useMemo(() => ({
+    getValidationProps,
+    inputRef,
+    registeredInputs,
+    registerInput,
+    getInputControl,
+    commit,
+    change
+  }), [getValidationProps, registeredInputs, registerInput, getInputControl, commit, change]);
+}
+
+exports.getCombinedFieldValidityData = getCombinedFieldValidityData;
+exports.isEligibleInput = isEligibleInput;
+exports.useFieldItemContext = useFieldItemContext;
+exports.useFieldValidation = useFieldValidation;

package/dist/useFieldValidation-es.js

@@ -0,0 +1,299 @@
+import * as React from 'react';
+import { a as useRefWithInit, m as mergeProps, E as EMPTY_OBJECT } from './useRenderElement-es.js';
+import { f as useTimeout, d as useStableCallback } from './useScrollLock-es.js';
+import { a as useFormContext, u as useLabelableContext, D as DEFAULT_VALIDITY_STATE } from './useCompositeListItem-es.js';
+
+const FieldItemContext = /*#__PURE__*/React.createContext({
+  disabled: false
+});
+if (process.env.NODE_ENV !== "production") FieldItemContext.displayName = "FieldItemContext";
+function useFieldItemContext() {
+  const context = React.useContext(FieldItemContext);
+  return context;
+}
+
+/**
+ * Combines the field's client-side, stateful validity data with the external invalid state to
+ * determine the field's true validity.
+ */
+function getCombinedFieldValidityData(validityData, invalid) {
+  return {
+    ...validityData,
+    state: {
+      ...validityData.state,
+      valid: !invalid && validityData.state.valid
+    }
+  };
+}
+
+const validityKeys = Object.keys(DEFAULT_VALIDITY_STATE);
+/**
+ * Whether an input participates in the surrounding Base UI Form. Inputs that are effectively
+ * disabled, or whose `form` attribute explicitly associates them with another form, are excluded.
+ * DOM position only matters when it associates the input with a different form. Otherwise, field
+ * registration is context-driven, so portaled inputs (for example inside a dialog) still belong to
+ * the form for both validation and values projected into `onFormSubmit`.
+ */
+function isEligibleInput(input, formElement) {
+  if (input.matches(':disabled')) {
+    return false;
+  }
+  if (!formElement || input.form === formElement) {
+    return true;
+  }
+
+  // React context crosses portal boundaries. An unassociated portaled input still participates in
+  // contextual validation, unless an explicit `form` attribute opts it out of the surrounding Form.
+  return input.form === null && !input.hasAttribute('form');
+}
+
+/**
+ * Picks the input whose native validity should represent a field that owns several inputs (such as a
+ * checkbox or radio group). Prefers the first eligible currently-invalid input, where "first" follows
+ * registration order (mount order), and otherwise returns the first eligible input.
+ */
+function findRepresentativeInput(inputs, formElement) {
+  let fallback = null;
+  for (const input of inputs.keys()) {
+    if (!isEligibleInput(input, formElement)) {
+      continue;
+    }
+    if (!input.validity.valid) {
+      return input;
+    }
+    fallback ??= input;
+  }
+  return fallback;
+}
+function clearCustomValidity(element, inputs) {
+  for (const input of inputs.keys()) {
+    input.setCustomValidity('');
+  }
+  element?.setCustomValidity('');
+}
+function useFieldValidation(params) {
+  const {
+    elementRef,
+    formRef
+  } = useFormContext();
+  const {
+    setValidityData,
+    validate,
+    validityData,
+    validationDebounceTime,
+    invalid,
+    markedDirtyRef,
+    state,
+    shouldValidateOnChange,
+    registeredFieldIdRef
+  } = params;
+  const {
+    controlId,
+    getDescriptionProps
+  } = useLabelableContext();
+  const timeout = useTimeout();
+  const inputRef = React.useRef(null);
+  const registeredInputs = useRefWithInit(() => new Map()).current;
+  const validationCommitIdRef = React.useRef(0);
+
+  // Groups register several inputs against a single field so focus, validation, and form-value
+  // projection can use the same live controls. This also ensures a `required` checkbox can't be
+  // satisfied by another input in the group, matching native per-checkbox behavior.
+  const registerInput = React.useCallback((element, registration) => {
+    registeredInputs.set(element, registration);
+    return () => {
+      registeredInputs.delete(element);
+    };
+  }, [registeredInputs]);
+  const getInputControl = useStableCallback(() => {
+    const element = findRepresentativeInput(registeredInputs, elementRef.current);
+    return element && registeredInputs.get(element)?.controlRef.current || null;
+  });
+  const commit = useStableCallback(async (value, revalidate = false) => {
+    validationCommitIdRef.current += 1;
+    const validationCommitId = validationCommitIdRef.current;
+    function updateRegisteredFieldValidity(nextValidityData, externalInvalid = invalid) {
+      const fieldId = registeredFieldIdRef.current ?? controlId;
+      if (fieldId == null) {
+        return;
+      }
+      const currentFieldData = formRef.current.fields.get(fieldId);
+      if (!currentFieldData) {
+        return;
+      }
+      const validityDataWithFormErrors = getCombinedFieldValidityData(nextValidityData, externalInvalid);
+      formRef.current.fields.set(fieldId, {
+        ...currentFieldData,
+        validityData: validityDataWithFormErrors
+      });
+    }
+    function publishAllValid(input, externalInvalid) {
+      const nextValidityData = {
+        value,
+        state: {
+          ...DEFAULT_VALIDITY_STATE,
+          valid: true
+        },
+        error: '',
+        errors: [],
+        initialValue: validityData.initialValue
+      };
+      clearCustomValidity(input, registeredInputs);
+      updateRegisteredFieldValidity(nextValidityData, externalInvalid);
+      setValidityData(nextValidityData);
+    }
+
+    // A field can own several inputs (such as a checkbox or radio group), but only the last-mounted
+    // one wins the shared `inputRef`. Validate against the registry instead so every input counts;
+    // `inputRef` is the fallback only when no inputs are registered.
+    const element = registeredInputs.size > 0 ? findRepresentativeInput(registeredInputs, elementRef.current) : inputRef.current;
+    // A field with no eligible input has no native constraint, but its custom validator still
+    // applies to the logical value at the configured validation boundary.
+
+    if (revalidate) {
+      if (state.valid !== false || !element) {
+        return;
+      }
+      const currentNativeValidity = element.validity;
+      if (!currentNativeValidity.valueMissing) {
+        // The 'valueMissing' (required) condition has been resolved by the user typing.
+        // Temporarily mark the field as valid for this onChange event.
+        // Other native errors (e.g., typeMismatch) will be caught by full validation on blur or submit.
+        // The required value is now present; ignore stale external invalid state for this pass.
+        publishAllValid(element, false);
+        return;
+      }
+
+      // A stale custom error can coexist with valueMissing, but defer any other native errors.
+      for (const key of validityKeys) {
+        if (key !== 'valid' && key !== 'valueMissing' && key !== 'customError' && currentNativeValidity[key]) {
+          return;
+        }
+      }
+
+      // Value is still missing: publish the current native state so valueMissing and the changed
+      // value are observable immediately. Full custom validation still waits for its boundary.
+    }
+    function getState(el) {
+      const computedState = validityKeys.reduce((acc, key) => {
+        acc[key] = el.validity[key];
+        return acc;
+      }, {});
+      let hasOnlyValueMissingError = false;
+      for (const key of validityKeys) {
+        if (key === 'valid') {
+          continue;
+        }
+        if (key === 'valueMissing' && computedState[key]) {
+          hasOnlyValueMissingError = true;
+        } else if (computedState[key]) {
+          return computedState;
+        }
+      }
+
+      // Only make `valueMissing` mark the field invalid if it's been changed
+      // to reduce error noise.
+      if (hasOnlyValueMissingError && !markedDirtyRef.current) {
+        computedState.valid = true;
+        computedState.valueMissing = false;
+      }
+      return computedState;
+    }
+    timeout.clear();
+    let result = null;
+    let validationErrors = [];
+
+    // With no representative input the field carries no native constraint, so start from an
+    // all-valid native state and let the custom `validate` result below decide the outcome.
+    const nextState = element ? getState(element) : {
+      ...DEFAULT_VALIDITY_STATE,
+      valid: true
+    };
+    let defaultValidationMessage;
+    const isValidatingOnChange = shouldValidateOnChange();
+    if (element && element.validationMessage && !isValidatingOnChange) {
+      // not validating on change, if there is a `validationMessage` from
+      // native validity, set errors and skip calling the custom validate fn
+      defaultValidationMessage = element.validationMessage;
+      validationErrors = [element.validationMessage];
+    } else {
+      // call the validate function because either
+      // - validating on change, or
+      // - native constraint validations passed, custom validity check is next
+      const formValues = Array.from(formRef.current.fields.values()).reduce((acc, field) => {
+        if (field.name) {
+          acc[field.name] = field.getValue();
+        }
+        return acc;
+      }, {});
+      const resultOrPromise = validate(value, formValues);
+      if (typeof resultOrPromise === 'object' && resultOrPromise !== null && 'then' in resultOrPromise) {
+        result = await resultOrPromise;
+        if (validationCommitId !== validationCommitIdRef.current) {
+          return;
+        }
+      } else {
+        result = resultOrPromise;
+      }
+      if (result !== null) {
+        nextState.valid = false;
+        nextState.customError = true;
+        if (Array.isArray(result)) {
+          validationErrors = result;
+          element?.setCustomValidity(result.join('\n'));
+        } else if (result) {
+          validationErrors = [result];
+          element?.setCustomValidity(result);
+        }
+      } else if (isValidatingOnChange) {
+        // validate function returned no errors, if validating on change
+        // we need to clear the custom validity state
+        clearCustomValidity(element, registeredInputs);
+        nextState.customError = false;
+        if (element && element.validationMessage) {
+          defaultValidationMessage = element.validationMessage;
+          validationErrors = [element.validationMessage];
+        } else if ((!element || element.validity.valid) && !nextState.valid) {
+          nextState.valid = true;
+        }
+      }
+    }
+    const nextValidityData = {
+      value,
+      state: nextState,
+      error: defaultValidationMessage ?? (Array.isArray(result) ? result[0] : result ?? ''),
+      errors: validationErrors,
+      initialValue: validityData.initialValue
+    };
+
+    // Keep Form-level errors part of overall field validity for submit blocking/focus logic.
+    updateRegisteredFieldValidity(nextValidityData);
+    setValidityData(nextValidityData);
+  });
+  const change = useStableCallback(value => {
+    timeout.clear();
+    const validateOnChange = shouldValidateOnChange();
+    if (validateOnChange && value !== '' && validationDebounceTime) {
+      validationCommitIdRef.current += 1;
+      timeout.start(validationDebounceTime, () => {
+        commit(value);
+      });
+    } else {
+      commit(value, !validateOnChange);
+    }
+  });
+  const getValidationProps = React.useCallback((disabled, externalProps = {}) => mergeProps(getDescriptionProps(externalProps), state.valid === false && !state.disabled && !disabled ? {
+    'aria-invalid': true
+  } : EMPTY_OBJECT), [getDescriptionProps, state.disabled, state.valid]);
+  return React.useMemo(() => ({
+    getValidationProps,
+    inputRef,
+    registeredInputs,
+    registerInput,
+    getInputControl,
+    commit,
+    change
+  }), [getValidationProps, registeredInputs, registerInput, getInputControl, commit, change]);
+}
+
+export { useFieldItemContext as a, getCombinedFieldValidityData as g, isEligibleInput as i, useFieldValidation as u };

package/dist/useScrollLock-es.js

@@ -5743,4 +5743,4 @@ function useScrollLock(enabled = true, referenceElement = null) {
   }, [enabled, referenceElement]);
 }
 
-export { getFloatingFocusElement as $, AnimationFrame as A, visuallyHiddenInput as B, visuallyHidden as C, activeElement as D, wheel as E, FOCUSABLE_POPUP_PROPS as F, createGenericEventDetails as G, useOnMount as H, getWindow as I, incrementPress as J, decrementPress as K, useValueChanged as L, inputClear as M, inputBlur as N, inputChange as O, keyboard as P, inputPaste as Q, useOpenInteractionType as R, SafeReact as S, Timeout as T, useStore as U, useClick as V, useDismiss as W, ReactStore as X, focusOut as Y, outsidePress as Z, pressableTriggerOpenStateMapping as _, isLastTraversableNode as a, isListIndexDisabled as a$, contains as a0, cancelOpen as a1, FloatingPortal as a2, InternalBackdrop as a3, inertValue as a4, DROPDOWN_COLLISION_AVOIDANCE as a5, popupStateMapping as a6, useDirection as a7, useAnimationFrame as a8, webkit as a9, getNodeScroll as aA, isTableElement as aB, isContainingBlock as aC, getContainingBlock as aD, getOverflowAncestors as aE, getFrameElement as aF, isWebKit as aG, floor as aH, useId as aI, useFloatingParentNodeId as aJ, FloatingRootStore as aK, PopupTriggerMap as aL, useFloatingTree as aM, isTypeableCombobox as aN, isIndexOutOfListBounds as aO, getMinListIndex as aP, getMaxListIndex as aQ, stopEvent as aR, listNavigation as aS, findNonDisabledListIndex as aT, enqueueFocus as aU, isVirtualPointerEvent as aV, ARROW_UP as aW, ARROW_DOWN as aX, ARROW_LEFT as aY, ARROW_RIGHT as aZ, isElementVisible as a_, rectToClientRect as aa, windowResize as ab, isVirtualClick as ac, itemPress as ad, evaluate as ae, getSide as af, getSideAxis as ag, getOppositePlacement as ah, getExpandedPlacements as ai, getOppositeAxisPlacements as aj, getAlignmentSides as ak, getAlignment as al, min as am, max as an, getAlignmentAxis as ao, getPaddingObject as ap, getOppositeAxis as aq, clamp as ar, getAxisLength as as, getDocumentElement as at, isElement as au, createCoords as av, round as aw, isTopLayer as ax, getNodeName as ay, isOverflowElement as az, getParentNode as b, scrub as b$, jsdom as b0, DISABLED_TRANSITIONS_STYLE as b1, useScrollLock as b2, shimExports as b3, usePopupInteractionProps as b4, setPopupOpenState as b5, usePopupRootStore as b6, usePopupRootSync as b7, useImplicitActiveTrigger as b8, useOpenStateTransitions as b9, POPUP_COLLISION_AVOIDANCE as bA, FloatingNode as bB, siblingOpen as bC, FloatingTreeStore as bD, fastComponent as bE, useFloatingNodeId as bF, attachPreventUnmountOnClose as bG, useSyncedFloatingRootContext as bH, TYPEAHEAD_RESET_MS as bI, FloatingTree as bJ, useCompositeRootContext as bK, getTabbableBeforeElement as bL, isOutsideEvent as bM, getTabbableAfterElement as bN, getNextTabbable as bO, fastComponentRef as bP, FocusGuard as bQ, PATIENT_CLICK_THRESHOLD as bR, useTriggerRegistration as bS, voiceOver as bT, getGridNavigatedIndex as bU, Store as bV, inputPress as bW, pointer as bX, gecko as bY, clearPress as bZ, chipRemovePress as b_, PopupHandleAttachment as ba, useTriggerDataForwarding as bb, useOpenMethodTriggerProps as bc, CLICK_TRIGGER_IDENTIFIER as bd, triggerOpenStateMapping as be, CommonPopupDataAttributes as bf, android as bg, closeWatcher as bh, TransitionStatusDataAttributes as bi, swipe as bj, BASE_UI_SWIPE_IGNORE_SELECTOR as bk, isMouseLikePointerType as bl, mergeCleanups as bm, isTypeableElement as bn, matchesFocusVisible as bo, isTargetInsideEnabledTrigger as bp, triggerFocus as bq, createAttribute as br, mac as bs, triggerPress as bt, escapeKey as bu, isInteractiveElement as bv, getNodeChildren as bw, triggerHover as bx, dispatchClickWithModifiers as by, useAnimationsFinished as bz, useIsoLayoutEffect as c, useStableCallback as d, getTarget as e, useButton as f, getComputedStyle as g, createChangeEventDetails as h, isHTMLElement as i, closePress as j, imperativeAction as k, useOpenChangeComplete as l, createDefaultInitialFocus as m, FloatingFocusManager as n, ownerDocument as o, popupTransitionStateMapping as p, useTimeout as q, error as r, useTransitionStatus as s, transitionStatusMapping as t, useBaseUiId as u, useControlled as v, useValueAsRef as w, ios as x, addEventListener as y, none as z };
+export { getFloatingFocusElement as $, AnimationFrame as A, visuallyHiddenInput as B, visuallyHidden as C, activeElement as D, wheel as E, FOCUSABLE_POPUP_PROPS as F, createGenericEventDetails as G, useOnMount as H, getWindow as I, incrementPress as J, decrementPress as K, useValueChanged as L, inputClear as M, inputBlur as N, inputChange as O, keyboard as P, inputPaste as Q, useOpenInteractionType as R, SafeReact as S, Timeout as T, useStore as U, useClick as V, useDismiss as W, ReactStore as X, focusOut as Y, outsidePress as Z, pressableTriggerOpenStateMapping as _, isLastTraversableNode as a, isListIndexDisabled as a$, contains as a0, cancelOpen as a1, FloatingPortal as a2, InternalBackdrop as a3, inertValue as a4, DROPDOWN_COLLISION_AVOIDANCE as a5, popupStateMapping as a6, useDirection as a7, useAnimationFrame as a8, webkit as a9, getNodeScroll as aA, isTableElement as aB, isContainingBlock as aC, getContainingBlock as aD, getOverflowAncestors as aE, getFrameElement as aF, isWebKit as aG, floor as aH, useId as aI, useFloatingParentNodeId as aJ, FloatingRootStore as aK, PopupTriggerMap as aL, useFloatingTree as aM, isTypeableCombobox as aN, isIndexOutOfListBounds as aO, getMinListIndex as aP, getMaxListIndex as aQ, stopEvent as aR, listNavigation as aS, findNonDisabledListIndex as aT, enqueueFocus as aU, isVirtualPointerEvent as aV, ARROW_UP as aW, ARROW_DOWN as aX, ARROW_LEFT as aY, ARROW_RIGHT as aZ, isElementVisible as a_, rectToClientRect as aa, windowResize as ab, isVirtualClick as ac, itemPress as ad, evaluate as ae, getSide as af, getSideAxis as ag, getOppositePlacement as ah, getExpandedPlacements as ai, getOppositeAxisPlacements as aj, getAlignmentSides as ak, getAlignment as al, min as am, max as an, getAlignmentAxis as ao, getPaddingObject as ap, getOppositeAxis as aq, clamp as ar, getAxisLength as as, getDocumentElement as at, isElement as au, createCoords as av, round as aw, isTopLayer as ax, getNodeName as ay, isOverflowElement as az, getParentNode as b, scrub as b$, jsdom as b0, DISABLED_TRANSITIONS_STYLE as b1, useScrollLock as b2, shimExports as b3, usePopupInteractionProps as b4, setPopupOpenState as b5, usePopupRootStore as b6, usePopupRootSync as b7, useImplicitActiveTrigger as b8, useOpenStateTransitions as b9, POPUP_COLLISION_AVOIDANCE as bA, FloatingNode as bB, siblingOpen as bC, FloatingTreeStore as bD, fastComponent as bE, useFloatingNodeId as bF, attachPreventUnmountOnClose as bG, useSyncedFloatingRootContext as bH, TYPEAHEAD_RESET_MS as bI, FloatingTree as bJ, useCompositeRootContext as bK, getTabbableBeforeElement as bL, isOutsideEvent as bM, getTabbableAfterElement as bN, getNextTabbable as bO, fastComponentRef as bP, FocusGuard as bQ, PATIENT_CLICK_THRESHOLD as bR, useTriggerRegistration as bS, voiceOver as bT, getGridNavigatedIndex as bU, Store as bV, inputPress as bW, pointer as bX, gecko as bY, clearPress as bZ, chipRemovePress as b_, PopupHandleAttachment as ba, useTriggerDataForwarding as bb, useOpenMethodTriggerProps as bc, CLICK_TRIGGER_IDENTIFIER as bd, triggerOpenStateMapping as be, CommonPopupDataAttributes as bf, android as bg, closeWatcher as bh, TransitionStatusDataAttributes as bi, swipe as bj, BASE_UI_SWIPE_IGNORE_SELECTOR as bk, isMouseLikePointerType as bl, mergeCleanups as bm, isTypeableElement as bn, matchesFocusVisible as bo, isTargetInsideEnabledTrigger as bp, triggerFocus as bq, createAttribute as br, mac as bs, triggerPress as bt, escapeKey as bu, isInteractiveElement as bv, getNodeChildren as bw, triggerHover as bx, dispatchClickWithModifiers as by, useAnimationsFinished as bz, useIsoLayoutEffect as c, useStableCallback as d, getTarget as e, useTimeout as f, getComputedStyle as g, useButton as h, isHTMLElement as i, createChangeEventDetails as j, closePress as k, error as l, useTransitionStatus as m, useOpenChangeComplete as n, ownerDocument as o, imperativeAction as p, popupTransitionStateMapping as q, createDefaultInitialFocus as r, FloatingFocusManager as s, transitionStatusMapping as t, useBaseUiId as u, useControlled as v, useValueAsRef as w, ios as x, addEventListener as y, none as z };