@jobber/components 9.6.0 → 9.6.2

package/dist/FieldDescription-cjs.js

@@ -35,6 +35,77 @@ function useFieldItemContext() {
   return context;
 }
 
+const FieldsetRootContext = /*#__PURE__*/React__namespace.createContext(undefined);
+if (process.env.NODE_ENV !== "production") FieldsetRootContext.displayName = "FieldsetRootContext";
+function useFieldsetRootContext(optional = false) {
+  const context = React__namespace.useContext(FieldsetRootContext);
+  if (!context && !optional) {
+    throw new Error(process.env.NODE_ENV !== "production" ? 'Base UI: FieldsetRootContext is missing. Fieldset parts must be placed within <Fieldset.Root>.' : useRenderElement.formatErrorMessage(86));
+  }
+  return context;
+}
+
+const LabelableProvider = function LabelableProvider(props) {
+  const defaultId = useScrollLock.useBaseUiId();
+  const initialControlId = props.controlId === undefined ? defaultId : props.controlId;
+  const [controlId, setControlIdState] = React__namespace.useState(initialControlId);
+  const [labelId, setLabelId] = React__namespace.useState(props.labelId);
+  const [messageIds, setMessageIds] = React__namespace.useState([]);
+  const registrationsRef = useRenderElement.useRefWithInit(() => new Map());
+  const {
+    messageIds: parentMessageIds
+  } = useCompositeListItem.useLabelableContext();
+  const registerControlId = useScrollLock.useStableCallback((source, nextId) => {
+    const registrations = registrationsRef.current;
+    if (nextId === undefined) {
+      registrations.delete(source);
+      return;
+    }
+    registrations.set(source, nextId);
+
+    // Only flush when registering, not when unregistering.
+    // This prevents loops during rapid unmount/remount cycles (e.g. React Activity).
+    // The next registration will pick up the correct state.
+    setControlIdState(prev => {
+      if (registrations.size === 0) {
+        return undefined;
+      }
+      let nextControlId;
+      for (const id of registrations.values()) {
+        if (prev !== undefined && id === prev) {
+          return prev;
+        }
+        if (nextControlId === undefined) {
+          nextControlId = id;
+        }
+      }
+      return nextControlId;
+    });
+  });
+  const getDescriptionProps = React__namespace.useCallback(externalProps => {
+    const ids = externalProps['aria-describedby'] ? externalProps['aria-describedby'].split(' ') : [];
+    ids.push(...parentMessageIds, ...messageIds);
+    return {
+      ...externalProps,
+      'aria-describedby': Array.from(new Set(ids)).join(' ') || undefined
+    };
+  }, [parentMessageIds, messageIds]);
+  const contextValue = React__namespace.useMemo(() => ({
+    controlId,
+    registerControlId,
+    labelId,
+    setLabelId,
+    messageIds,
+    setMessageIds,
+    getDescriptionProps
+  }), [controlId, registerControlId, labelId, setLabelId, messageIds, setMessageIds, getDescriptionProps]);
+  return /*#__PURE__*/jsxRuntime.jsx(useCompositeListItem.LabelableContext.Provider, {
+    value: contextValue,
+    children: props.children
+  });
+};
+if (process.env.NODE_ENV !== "production") LabelableProvider.displayName = "LabelableProvider";
+
 /**
  * Combines the field's client-side, stateful validity data with the external invalid state to
  * determine the field's true validity.
@@ -50,35 +121,34 @@ function getCombinedFieldValidityData(validityData, invalid) {
 }
 
 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')) {
+function isOnlyValueMissing(state) {
+  if (!state || state.valid || !state.valueMissing) {
     return false;
   }
-  if (!formElement || input.form === formElement) {
-    return true;
+  let onlyValueMissing = false;
+  for (const key of validityKeys) {
+    if (key === 'valid') {
+      continue;
+    }
+    if (key === 'valueMissing') {
+      onlyValueMissing = state[key];
+    } else if (state[key]) {
+      onlyValueMissing = false;
+    }
   }
-
-  // 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');
+  return onlyValueMissing;
 }
 
 /**
  * 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.
+ * checkbox group). Prefers the first enabled currently-invalid input, where "first" follows Set
+ * insertion order (mount order), and otherwise returns the first enabled input. Disabled inputs are
+ * skipped because they don't participate in native constraint validation.
  */
-function findRepresentativeInput(inputs, formElement) {
+function findRepresentativeInput(inputs) {
   let fallback = null;
-  for (const input of inputs.keys()) {
-    if (!isEligibleInput(input, formElement)) {
+  for (const input of inputs) {
+    if (input.disabled) {
       continue;
     }
     if (!input.validity.valid) {
@@ -89,14 +159,17 @@ function findRepresentativeInput(inputs, formElement) {
   return fallback;
 }
 function clearCustomValidity(element, inputs) {
-  for (const input of inputs.keys()) {
+  let didClearElement = false;
+  for (const input of inputs) {
     input.setCustomValidity('');
+    didClearElement ||= input === element;
+  }
+  if (!didClearElement) {
+    element.setCustomValidity('');
   }
-  element?.setCustomValidity('');
 }
 function useFieldValidation(params) {
   const {
-    elementRef,
     formRef
   } = useCompositeListItem.useFormContext();
   const {
@@ -108,7 +181,7 @@ function useFieldValidation(params) {
     markedDirtyRef,
     state,
     shouldValidateOnChange,
-    registeredFieldIdRef
+    getRegisteredFieldId
   } = params;
   const {
     controlId,
@@ -116,27 +189,32 @@ function useFieldValidation(params) {
   } = useCompositeListItem.useLabelableContext();
   const timeout = useScrollLock.useTimeout();
   const inputRef = React__namespace.useRef(null);
-  const registeredInputs = useRenderElement.useRefWithInit(() => new Map()).current;
+  const registeredInputs = useRenderElement.useRefWithInit(() => new Set()).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);
+  // Checkbox groups register several inputs against a single field. Track them so a `required`
+  // checkbox can't be satisfied by another input in the group, matching native per-checkbox behavior.
+  const registerInput = React__namespace.useCallback(element => {
+    if (!element) {
+      return undefined;
+    }
+    registeredInputs.add(element);
     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) => {
+    // A field can own several inputs (a checkbox 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 registered input applies (none registered, or all of them disabled).
+    const element = findRepresentativeInput(registeredInputs) ?? inputRef.current;
+    if (!element) {
+      return;
+    }
     validationCommitIdRef.current += 1;
     const validationCommitId = validationCommitIdRef.current;
     function updateRegisteredFieldValidity(nextValidityData, externalInvalid = invalid) {
-      const fieldId = registeredFieldIdRef.current ?? controlId;
+      const fieldId = getRegisteredFieldId() ?? controlId;
       if (fieldId == null) {
         return;
       }
@@ -150,31 +228,8 @@ function useFieldValidation(params) {
         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) {
+      if (state.valid !== false) {
         return;
       }
       const currentNativeValidity = element.validity;
@@ -182,20 +237,39 @@ function useFieldValidation(params) {
         // 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.
+        const nextValidityData = {
+          value,
+          state: {
+            ...useCompositeListItem.DEFAULT_VALIDITY_STATE,
+            valid: true
+          },
+          error: '',
+          errors: [],
+          initialValue: validityData.initialValue
+        };
+        clearCustomValidity(element, registeredInputs);
+
         // The required value is now present; ignore stale external invalid state for this pass.
-        publishAllValid(element, false);
+        updateRegisteredFieldValidity(nextValidityData, false);
+        setValidityData(nextValidityData);
         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, or other conditions apply.
+      // Let's use a representation of current validity for isOnlyValueMissing.
+      const currentNativeValidityObject = validityKeys.reduce((acc, key) => {
+        acc[key] = currentNativeValidity[key];
+        return acc;
+      }, {});
+
+      // If it's (still) natively invalid due to something other than just valueMissing,
+      // then bail from this revalidation on change to avoid "scolding" for other errors.
+      if (!currentNativeValidityObject.valid && !isOnlyValueMissing(currentNativeValidityObject)) {
+        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.
+      // If valueMissing is still true AND it's the only issue, or if the field is now natively valid,
+      // let it fall through to the main validation logic below.
     }
     function getState(el) {
       const computedState = validityKeys.reduce((acc, key) => {
@@ -225,16 +299,10 @@ function useFieldValidation(params) {
     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
-    };
+    const nextState = getState(element);
     let defaultValidationMessage;
     const isValidatingOnChange = shouldValidateOnChange();
-    if (element && element.validationMessage && !isValidatingOnChange) {
+    if (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;
@@ -263,20 +331,20 @@ function useFieldValidation(params) {
         nextState.customError = true;
         if (Array.isArray(result)) {
           validationErrors = result;
-          element?.setCustomValidity(result.join('\n'));
+          element.setCustomValidity(result.join('\n'));
         } else if (result) {
           validationErrors = [result];
-          element?.setCustomValidity(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) {
+        if (element.validationMessage) {
           defaultValidationMessage = element.validationMessage;
           validationErrors = [element.validationMessage];
-        } else if ((!element || element.validity.valid) && !nextState.valid) {
+        } else if (element.validity.valid && !nextState.valid) {
           nextState.valid = true;
         }
       }
@@ -311,85 +379,12 @@ function useFieldValidation(params) {
   return React__namespace.useMemo(() => ({
     getValidationProps,
     inputRef,
-    registeredInputs,
     registerInput,
-    getInputControl,
     commit,
     change
-  }), [getValidationProps, registeredInputs, registerInput, getInputControl, commit, change]);
+  }), [getValidationProps, registerInput, commit, change]);
 }
 
-const FieldsetRootContext = /*#__PURE__*/React__namespace.createContext(undefined);
-if (process.env.NODE_ENV !== "production") FieldsetRootContext.displayName = "FieldsetRootContext";
-function useFieldsetRootContext(optional = false) {
-  const context = React__namespace.useContext(FieldsetRootContext);
-  if (!context && !optional) {
-    throw new Error(process.env.NODE_ENV !== "production" ? 'Base UI: FieldsetRootContext is missing. Fieldset parts must be placed within <Fieldset.Root>.' : useRenderElement.formatErrorMessage(86));
-  }
-  return context;
-}
-
-const LabelableProvider = function LabelableProvider(props) {
-  const defaultId = useScrollLock.useBaseUiId();
-  const initialControlId = props.controlId === undefined ? defaultId : props.controlId;
-  const [controlId, setControlIdState] = React__namespace.useState(initialControlId);
-  const [labelId, setLabelId] = React__namespace.useState(props.labelId);
-  const [messageIds, setMessageIds] = React__namespace.useState([]);
-  const registrationsRef = useRenderElement.useRefWithInit(() => new Map());
-  const {
-    messageIds: parentMessageIds
-  } = useCompositeListItem.useLabelableContext();
-  const registerControlId = useScrollLock.useStableCallback((source, nextId) => {
-    const registrations = registrationsRef.current;
-    if (nextId === undefined) {
-      registrations.delete(source);
-      return;
-    }
-    registrations.set(source, nextId);
-
-    // Only flush when registering, not when unregistering.
-    // This prevents loops during rapid unmount/remount cycles (e.g. React Activity).
-    // The next registration will pick up the correct state.
-    setControlIdState(prev => {
-      if (registrations.size === 0) {
-        return undefined;
-      }
-      let nextControlId;
-      for (const id of registrations.values()) {
-        if (prev !== undefined && id === prev) {
-          return prev;
-        }
-        if (nextControlId === undefined) {
-          nextControlId = id;
-        }
-      }
-      return nextControlId;
-    });
-  });
-  const getDescriptionProps = React__namespace.useCallback(externalProps => {
-    const ids = externalProps['aria-describedby'] ? externalProps['aria-describedby'].split(' ') : [];
-    ids.push(...parentMessageIds, ...messageIds);
-    return {
-      ...externalProps,
-      'aria-describedby': Array.from(new Set(ids)).join(' ') || undefined
-    };
-  }, [parentMessageIds, messageIds]);
-  const contextValue = React__namespace.useMemo(() => ({
-    controlId,
-    registerControlId,
-    labelId,
-    setLabelId,
-    messageIds,
-    setMessageIds,
-    getDescriptionProps
-  }), [controlId, registerControlId, labelId, setLabelId, messageIds, setMessageIds, getDescriptionProps]);
-  return /*#__PURE__*/jsxRuntime.jsx(useCompositeListItem.LabelableContext.Provider, {
-    value: contextValue,
-    children: props.children
-  });
-};
-if (process.env.NODE_ENV !== "production") LabelableProvider.displayName = "LabelableProvider";
-
 function useFieldControlRegistration(params) {
   const {
     commit,
@@ -397,7 +392,7 @@ function useFieldControlRegistration(params) {
     markedDirtyRef,
     name,
     setRegisteredFieldName,
-    registeredFieldIdRef,
+    setRegisteredFieldId,
     setValidityData,
     validityData
   } = params;
@@ -406,7 +401,7 @@ function useFieldControlRegistration(params) {
   } = useCompositeListItem.useFormContext();
   const activeFieldControlSourceRef = React__namespace.useRef(null);
   const registrationRef = React__namespace.useRef(null);
-  const initialValueCapturedRef = React__namespace.useRef(false);
+  const fallbackControlRef = React__namespace.useRef(null);
   const getValueForForm = useScrollLock.useStableCallback(() => {
     const registration = registrationRef.current;
     if (!registration) {
@@ -437,7 +432,7 @@ function useFieldControlRegistration(params) {
     formRef.current.fields.set(registration.id, {
       getValue: getValueForForm,
       name: name ?? registration.name,
-      controlRef: registration.controlRef,
+      controlRef: registration.controlRef ?? fallbackControlRef,
       validityData: getCombinedFieldValidityData(validityData, invalid),
       validate
     });
@@ -447,23 +442,18 @@ function useFieldControlRegistration(params) {
       formRef.current.fields.delete(id);
     }
   }
-
-  // The baseline belongs to the field, not to a control instance: registration re-runs on every
-  // value change, and a control that unmounts and remounts (or is swapped for another one) comes
-  // back as a brand new registration. Capturing more than once would turn whichever value the
-  // control happens to hold at that point into the initial value, so a modified field would read
-  // pristine and its real initial value would read dirty. Consumers that want a fresh baseline
-  // remount or key `<Field.Root>` itself.
-  function captureInitialValue(registration) {
-    if (initialValueCapturedRef.current) {
+  function syncInitialValue() {
+    const registration = registrationRef.current;
+    if (!registration) {
       return;
     }
-    initialValueCapturedRef.current = true;
     const initialValue = getRegistrationValue(registration);
-    setValidityData(prev => prev.initialValue === initialValue ? prev : {
-      ...prev,
-      initialValue
-    });
+    if (validityData.initialValue === null && initialValue !== null) {
+      setValidityData(prev => ({
+        ...prev,
+        initialValue
+      }));
+    }
   }
   useScrollLock.useIsoLayoutEffect(() => {
     const registration = registrationRef.current;
@@ -474,7 +464,7 @@ function useFieldControlRegistration(params) {
     formRef.current.fields.set(registration.id, {
       getValue: getValueForForm,
       name: name ?? registration.name,
-      controlRef: registration.controlRef,
+      controlRef: registration.controlRef ?? fallbackControlRef,
       validityData: getCombinedFieldValidityData(validityData, invalid),
       validate
     });
@@ -495,7 +485,7 @@ function useFieldControlRegistration(params) {
         deleteRegistration();
         registrationRef.current = null;
         setRegisteredFieldName(undefined);
-        registeredFieldIdRef.current = undefined;
+        setRegisteredFieldId(undefined);
       }
       return;
     }
@@ -505,11 +495,11 @@ function useFieldControlRegistration(params) {
     if (!name) {
       setRegisteredFieldName(registration.name);
     }
-    registeredFieldIdRef.current = registration.id;
+    setRegisteredFieldId(registration.id);
     if (previousId && previousId !== registration.id) {
       deleteRegistration(previousId);
     }
-    captureInitialValue(registration);
+    syncInitialValue();
     refreshRegistration();
   });
   return [validate, register];
@@ -554,6 +544,10 @@ const FieldRootInner = /*#__PURE__*/React__namespace.forwardRef(function FieldRo
       markedDirtyRef.current = dirtyProp;
     }
   }, [dirtyProp]);
+  const getRegisteredFieldId = React__namespace.useCallback(() => registeredFieldIdRef.current, []);
+  const setRegisteredFieldId = React__namespace.useCallback(id => {
+    registeredFieldIdRef.current = id;
+  }, []);
   const setDirty = useScrollLock.useStableCallback(value => {
     if (dirtyProp !== undefined) {
       return;
@@ -580,11 +574,7 @@ const FieldRootInner = /*#__PURE__*/React__namespace.forwardRef(function FieldRo
     value: null,
     initialValue: null
   });
-
-  // App-controlled invalidity (the `invalid` prop and `<Form>` errors) keeps the field marked
-  // invalid even while disabled. Only computed validity (native constraints and `validate`)
-  // is suppressed when disabled, matching `:disabled` not participating in constraint validation.
-  const valid = !invalid && (disabled ? null : validityData.state.valid);
+  const valid = disabled ? null : !invalid && validityData.state.valid;
   const state = React__namespace.useMemo(() => ({
     disabled,
     touched,
@@ -602,7 +592,7 @@ const FieldRootInner = /*#__PURE__*/React__namespace.forwardRef(function FieldRo
     markedDirtyRef,
     state,
     shouldValidateOnChange,
-    registeredFieldIdRef
+    getRegisteredFieldId
   });
   const [validateFieldControl, registerFieldControl] = useFieldControlRegistration({
     commit: validation.commit,
@@ -610,7 +600,7 @@ const FieldRootInner = /*#__PURE__*/React__namespace.forwardRef(function FieldRo
     markedDirtyRef,
     name,
     setRegisteredFieldName,
-    registeredFieldIdRef,
+    setRegisteredFieldId,
     setValidityData,
     validityData
   });
@@ -623,16 +613,23 @@ const FieldRootInner = /*#__PURE__*/React__namespace.forwardRef(function FieldRo
     validityData,
     setValidityData,
     disabled,
+    touched,
     setTouched,
+    dirty,
     setDirty,
+    filled,
     setFilled,
+    focused,
     setFocused,
+    validate,
     validationMode,
+    validationDebounceTime,
     shouldValidateOnChange,
     state,
+    markedDirtyRef,
     registerFieldControl,
     validation
-  }), [invalid, effectiveName, validityData, disabled, setTouched, setDirty, setFilled, setFocused, validationMode, shouldValidateOnChange, state, registerFieldControl, validation]);
+  }), [invalid, effectiveName, validityData, disabled, touched, setTouched, dirty, setDirty, filled, setFilled, focused, setFocused, validate, validationMode, validationDebounceTime, shouldValidateOnChange, state, registerFieldControl, validation]);
   const element = useRenderElement.useRenderElement('div', componentProps, {
     ref: forwardedRef,
     state,
@@ -789,13 +786,13 @@ const FieldError = /*#__PURE__*/React__namespace.forwardRef(function FieldError(
   } else if (validityData.errors.length > 1) {
     error = validityData.errors;
   }
-  let errorMessage = error;
+  let errorMessage = error ?? '';
   if (Array.isArray(error)) {
     errorMessage = error.length > 1 ? /*#__PURE__*/jsxRuntime.jsx("ul", {
       children: error.map(message => /*#__PURE__*/jsxRuntime.jsx("li", {
         children: message
       }, message))
-    }) : error[0];
+    }) : error[0] ?? '';
   }
   const errorKey = Array.isArray(error) ? JSON.stringify(error) : error;
   if (rendered && errorKey !== lastRenderedMessageKey) {