@jobber/components 9.14.4 → 9.15.0

package/dist/Combobox/index.cjs

@@ -29,6 +29,7 @@ require('../Content-cjs.js');
 require('../HelperText-cjs.js');
 require('../Text-cjs.js');
 require('../FieldDescription-cjs.js');
+require('../useFieldValidation-cjs.js');
 
 
 

package/dist/Combobox/index.mjs

@@ -27,3 +27,4 @@ import '../Content-es.js';
 import '../HelperText-es.js';
 import '../Text-es.js';
 import '../FieldDescription-es.js';
+import '../useFieldValidation-es.js';

package/dist/ComboboxSeparator-es.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { bU as getGridNavigatedIndex, aO as isIndexOutOfListBounds, a7 as useDirection, v as useControlled, bV as Store, d as useStableCallback, U as useStore, w as useValueAsRef, s as useTransitionStatus, R as useOpenInteractionType, G as createGenericEventDetails, z as none, M as inputClear, O as inputChange, aE as getOverflowAncestors, i as isHTMLElement, a0 as contains, bu as escapeKey, h as createChangeEventDetails, Y as focusOut, Z as outsidePress, e as getTarget, ad as itemPress, l as useOpenChangeComplete, c as useIsoLayoutEffect, L as useValueChanged, V as useClick, bW as inputPress, W as useDismiss, F as FOCUSABLE_POPUP_PROPS, B as visuallyHiddenInput, C as visuallyHidden, P as keyboard, bX as pointer, _ as pressableTriggerOpenStateMapping, q as useTimeout, f as useButton, o as ownerDocument, aR as stopEvent, aS as listNavigation, a1 as cancelOpen, j as closePress, u as useBaseUiId, bg as android, bY as gecko, au as isElement, bv as isInteractiveElement, bZ as clearPress, t as transitionStatusMapping, be as triggerOpenStateMapping, x as ios, a2 as FloatingPortal, a6 as popupStateMapping, a3 as InternalBackdrop, a4 as inertValue, a5 as DROPDOWN_COLLISION_AVOIDANCE, n as FloatingFocusManager, S as SafeReact, r as error, b_ as chipRemovePress } from './useScrollLock-es.js';
+import { bU as getGridNavigatedIndex, aO as isIndexOutOfListBounds, a7 as useDirection, v as useControlled, bV as Store, d as useStableCallback, U as useStore, w as useValueAsRef, m as useTransitionStatus, R as useOpenInteractionType, G as createGenericEventDetails, z as none, M as inputClear, O as inputChange, aE as getOverflowAncestors, i as isHTMLElement, a0 as contains, bu as escapeKey, j as createChangeEventDetails, Y as focusOut, Z as outsidePress, e as getTarget, ad as itemPress, n as useOpenChangeComplete, c as useIsoLayoutEffect, L as useValueChanged, V as useClick, bW as inputPress, W as useDismiss, F as FOCUSABLE_POPUP_PROPS, B as visuallyHiddenInput, C as visuallyHidden, P as keyboard, bX as pointer, _ as pressableTriggerOpenStateMapping, f as useTimeout, h as useButton, o as ownerDocument, aR as stopEvent, aS as listNavigation, a1 as cancelOpen, k as closePress, u as useBaseUiId, bg as android, bY as gecko, au as isElement, bv as isInteractiveElement, bZ as clearPress, t as transitionStatusMapping, be as triggerOpenStateMapping, x as ios, a2 as FloatingPortal, a6 as popupStateMapping, a3 as InternalBackdrop, a4 as inertValue, a5 as DROPDOWN_COLLISION_AVOIDANCE, s as FloatingFocusManager, S as SafeReact, l as error, b_ as chipRemovePress } from './useScrollLock-es.js';
 import { f as formatErrorMessage, c as EMPTY_ARRAY, a as useRefWithInit, E as EMPTY_OBJECT, N as NOOP, m as mergeProps, b as useMergedRefs, u as useRenderElement } from './useRenderElement-es.js';
 import { h as hasNullItemLabel, e as compareItemEquality, n as stringifyAsLabel, a as useFormContext, b as useFieldRootContext, c as useLabelableId, E as isGroupedItems, G as findSelectionIndex, s as stringifyAsValue, d as useRegisterFieldControl, H as selectedValueIncludes, B as removeItem, i as useFloatingRootContext, j as useListNavigation, l as useOnFirstRender, m as defaultItemEquality, o as areArraysEqual, f as fieldValidityMapping, u as useLabelableContext, k as useTypeahead, r as resolveAriaLabelledBy, p as isMouseWithinBounds, F as FieldRootContext, I as DEFAULT_FIELD_ROOT_CONTEXT, J as DEFAULT_FIELD_STATE_ATTRIBUTES, C as CompositeList, w as useAnchorPositioning, v as useAnchoredPopupScrollLock, x as usePositioner, z as getDisabledMountTransitionStyles, A as useCompositeListItem, g as findItemIndex, K as getDefaultLabelId, q as resolveMultipleLabels, t as resolveSelectedLabel } from './useCompositeListItem-es.js';
 import { jsx, jsxs } from 'react/jsx-runtime';

package/dist/DrawerDescription-es.js

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { u as useDialogRootContext, k as useDialogPortalContext, l as dialogStateAttributesMapping, m as useRenderDialogRoot, n as createNullDialogStore } from './ScrollAreaViewport-es.js';
 import { f as formatErrorMessage, u as useRenderElement } from './useRenderElement-es.js';
-import { A as AnimationFrame, h as createChangeEventDetails, k as imperativeAction, p as popupTransitionStateMapping, u as useBaseUiId, l as useOpenChangeComplete, m as createDefaultInitialFocus, F as FOCUSABLE_POPUP_PROPS, n as FloatingFocusManager } from './useScrollLock-es.js';
+import { A as AnimationFrame, j as createChangeEventDetails, p as imperativeAction, q as popupTransitionStateMapping, u as useBaseUiId, n as useOpenChangeComplete, r as createDefaultInitialFocus, F as FOCUSABLE_POPUP_PROPS, s as FloatingFocusManager } from './useScrollLock-es.js';
 import { C as COMPOSITE_KEYS } from './scrollEdges-es.js';
 import { jsx } from 'react/jsx-runtime';
 

package/dist/DrawerTitle-es.js

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { u as useDialogRootContext } from './ScrollAreaViewport-es.js';
 import { u as useRenderElement } from './useRenderElement-es.js';
-import { f as useButton, h as createChangeEventDetails, j as closePress, u as useBaseUiId } from './useScrollLock-es.js';
+import { h as useButton, j as createChangeEventDetails, k as closePress, u as useBaseUiId } from './useScrollLock-es.js';
 
 /**
  * A button that closes the dialog.

package/dist/FieldDescription-cjs.js

@@ -4,6 +4,7 @@ var React = require('react');
 var useScrollLock = require('./useScrollLock-cjs.js');
 var useCompositeListItem = require('./useCompositeListItem-cjs.js');
 var useRenderElement = require('./useRenderElement-cjs.js');
+var useFieldValidation = require('./useFieldValidation-cjs.js');
 var jsxRuntime = require('react/jsx-runtime');
 var useLabel = require('./useLabel-cjs.js');
 
@@ -26,299 +27,6 @@ function _interopNamespaceDefault(e) {
 
 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]);
-}
-
 const FieldsetRootContext = /*#__PURE__*/React__namespace.createContext(undefined);
 if (process.env.NODE_ENV !== "production") FieldsetRootContext.displayName = "FieldsetRootContext";
 function useFieldsetRootContext(optional = false) {
@@ -438,7 +146,7 @@ function useFieldControlRegistration(params) {
       getValue: getValueForForm,
       name: name ?? registration.name,
       controlRef: registration.controlRef,
-      validityData: getCombinedFieldValidityData(validityData, invalid),
+      validityData: useFieldValidation.getCombinedFieldValidityData(validityData, invalid),
       validate
     });
   }
@@ -475,7 +183,7 @@ function useFieldControlRegistration(params) {
       getValue: getValueForForm,
       name: name ?? registration.name,
       controlRef: registration.controlRef,
-      validityData: getCombinedFieldValidityData(validityData, invalid),
+      validityData: useFieldValidation.getCombinedFieldValidityData(validityData, invalid),
       validate
     });
   }, [formRef, getValueForForm, invalid, name, setRegisteredFieldName, validate, validityData]);
@@ -593,7 +301,7 @@ const FieldRootInner = /*#__PURE__*/React__namespace.forwardRef(function FieldRo
     filled,
     focused
   }), [disabled, touched, dirty, valid, filled, focused]);
-  const validation = useFieldValidation({
+  const validation = useFieldValidation.useFieldValidation({
     setValidityData,
     validate,
     validityData,
@@ -678,7 +386,7 @@ const FieldLabel = /*#__PURE__*/React__namespace.forwardRef(function FieldLabel(
     ...elementProps
   } = componentProps;
   const fieldRootContext = useCompositeListItem.useFieldRootContext(false);
-  const fieldItemContext = useFieldItemContext();
+  const fieldItemContext = useFieldValidation.useFieldItemContext();
   const {
     labelId
   } = useCompositeListItem.useLabelableContext();
@@ -848,7 +556,7 @@ const FieldDescription = /*#__PURE__*/React__namespace.forwardRef(function Field
   } = componentProps;
   const id = useScrollLock.useBaseUiId(idProp);
   const fieldRootContext = useCompositeListItem.useFieldRootContext(false);
-  const fieldItemContext = useFieldItemContext();
+  const fieldItemContext = useFieldValidation.useFieldItemContext();
   const {
     setMessageIds
   } = useCompositeListItem.useLabelableContext();