@jobber/components 9.5.3 → 9.6.0

package/dist/FieldDescription-cjs.js

@@ -35,77 +35,6 @@ 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.
@@ -121,34 +50,35 @@ function getCombinedFieldValidityData(validityData, invalid) {
 }
 
 const validityKeys = Object.keys(useCompositeListItem.DEFAULT_VALIDITY_STATE);
-function isOnlyValueMissing(state) {
-  if (!state || state.valid || !state.valueMissing) {
+/**
+ * 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;
   }
-  let onlyValueMissing = false;
-  for (const key of validityKeys) {
-    if (key === 'valid') {
-      continue;
-    }
-    if (key === 'valueMissing') {
-      onlyValueMissing = state[key];
-    } else if (state[key]) {
-      onlyValueMissing = false;
-    }
+  if (!formElement || input.form === formElement) {
+    return true;
   }
-  return onlyValueMissing;
+
+  // 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 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.
+ * 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) {
+function findRepresentativeInput(inputs, formElement) {
   let fallback = null;
-  for (const input of inputs) {
-    if (input.disabled) {
+  for (const input of inputs.keys()) {
+    if (!isEligibleInput(input, formElement)) {
       continue;
     }
     if (!input.validity.valid) {
@@ -159,17 +89,14 @@ function findRepresentativeInput(inputs) {
   return fallback;
 }
 function clearCustomValidity(element, inputs) {
-  let didClearElement = false;
-  for (const input of inputs) {
+  for (const input of inputs.keys()) {
     input.setCustomValidity('');
-    didClearElement ||= input === element;
-  }
-  if (!didClearElement) {
-    element.setCustomValidity('');
   }
+  element?.setCustomValidity('');
 }
 function useFieldValidation(params) {
   const {
+    elementRef,
     formRef
   } = useCompositeListItem.useFormContext();
   const {
@@ -181,7 +108,7 @@ function useFieldValidation(params) {
     markedDirtyRef,
     state,
     shouldValidateOnChange,
-    getRegisteredFieldId
+    registeredFieldIdRef
   } = params;
   const {
     controlId,
@@ -189,32 +116,27 @@ function useFieldValidation(params) {
   } = useCompositeListItem.useLabelableContext();
   const timeout = useScrollLock.useTimeout();
   const inputRef = React__namespace.useRef(null);
-  const registeredInputs = useRenderElement.useRefWithInit(() => new Set()).current;
+  const registeredInputs = useRenderElement.useRefWithInit(() => new Map()).current;
   const validationCommitIdRef = React__namespace.useRef(0);
 
-  // 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);
+  // 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) => {
-    // 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 = getRegisteredFieldId() ?? controlId;
+      const fieldId = registeredFieldIdRef.current ?? controlId;
       if (fieldId == null) {
         return;
       }
@@ -228,8 +150,31 @@ 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) {
+      if (state.valid !== false || !element) {
         return;
       }
       const currentNativeValidity = element.validity;
@@ -237,39 +182,20 @@ 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.
-        updateRegisteredFieldValidity(nextValidityData, false);
-        setValidityData(nextValidityData);
+        publishAllValid(element, false);
         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;
+      // 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;
+        }
       }
 
-      // 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.
+      // 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) => {
@@ -299,10 +225,16 @@ function useFieldValidation(params) {
     timeout.clear();
     let result = null;
     let validationErrors = [];
-    const nextState = getState(element);
+
+    // 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.validationMessage && !isValidatingOnChange) {
+    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;
@@ -331,20 +263,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.validationMessage) {
+        if (element && element.validationMessage) {
           defaultValidationMessage = element.validationMessage;
           validationErrors = [element.validationMessage];
-        } else if (element.validity.valid && !nextState.valid) {
+        } else if ((!element || element.validity.valid) && !nextState.valid) {
           nextState.valid = true;
         }
       }
@@ -379,12 +311,85 @@ function useFieldValidation(params) {
   return React__namespace.useMemo(() => ({
     getValidationProps,
     inputRef,
+    registeredInputs,
     registerInput,
+    getInputControl,
     commit,
     change
-  }), [getValidationProps, registerInput, 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) {
+  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,
@@ -392,7 +397,7 @@ function useFieldControlRegistration(params) {
     markedDirtyRef,
     name,
     setRegisteredFieldName,
-    setRegisteredFieldId,
+    registeredFieldIdRef,
     setValidityData,
     validityData
   } = params;
@@ -401,7 +406,7 @@ function useFieldControlRegistration(params) {
   } = useCompositeListItem.useFormContext();
   const activeFieldControlSourceRef = React__namespace.useRef(null);
   const registrationRef = React__namespace.useRef(null);
-  const fallbackControlRef = React__namespace.useRef(null);
+  const initialValueCapturedRef = React__namespace.useRef(false);
   const getValueForForm = useScrollLock.useStableCallback(() => {
     const registration = registrationRef.current;
     if (!registration) {
@@ -432,7 +437,7 @@ function useFieldControlRegistration(params) {
     formRef.current.fields.set(registration.id, {
       getValue: getValueForForm,
       name: name ?? registration.name,
-      controlRef: registration.controlRef ?? fallbackControlRef,
+      controlRef: registration.controlRef,
       validityData: getCombinedFieldValidityData(validityData, invalid),
       validate
     });
@@ -442,18 +447,23 @@ function useFieldControlRegistration(params) {
       formRef.current.fields.delete(id);
     }
   }
-  function syncInitialValue() {
-    const registration = registrationRef.current;
-    if (!registration) {
+
+  // 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) {
       return;
     }
+    initialValueCapturedRef.current = true;
     const initialValue = getRegistrationValue(registration);
-    if (validityData.initialValue === null && initialValue !== null) {
-      setValidityData(prev => ({
-        ...prev,
-        initialValue
-      }));
-    }
+    setValidityData(prev => prev.initialValue === initialValue ? prev : {
+      ...prev,
+      initialValue
+    });
   }
   useScrollLock.useIsoLayoutEffect(() => {
     const registration = registrationRef.current;
@@ -464,7 +474,7 @@ function useFieldControlRegistration(params) {
     formRef.current.fields.set(registration.id, {
       getValue: getValueForForm,
       name: name ?? registration.name,
-      controlRef: registration.controlRef ?? fallbackControlRef,
+      controlRef: registration.controlRef,
       validityData: getCombinedFieldValidityData(validityData, invalid),
       validate
     });
@@ -485,7 +495,7 @@ function useFieldControlRegistration(params) {
         deleteRegistration();
         registrationRef.current = null;
         setRegisteredFieldName(undefined);
-        setRegisteredFieldId(undefined);
+        registeredFieldIdRef.current = undefined;
       }
       return;
     }
@@ -495,11 +505,11 @@ function useFieldControlRegistration(params) {
     if (!name) {
       setRegisteredFieldName(registration.name);
     }
-    setRegisteredFieldId(registration.id);
+    registeredFieldIdRef.current = registration.id;
     if (previousId && previousId !== registration.id) {
       deleteRegistration(previousId);
     }
-    syncInitialValue();
+    captureInitialValue(registration);
     refreshRegistration();
   });
   return [validate, register];
@@ -544,10 +554,6 @@ 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;
@@ -574,7 +580,11 @@ const FieldRootInner = /*#__PURE__*/React__namespace.forwardRef(function FieldRo
     value: null,
     initialValue: null
   });
-  const valid = disabled ? null : !invalid && validityData.state.valid;
+
+  // 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 state = React__namespace.useMemo(() => ({
     disabled,
     touched,
@@ -592,7 +602,7 @@ const FieldRootInner = /*#__PURE__*/React__namespace.forwardRef(function FieldRo
     markedDirtyRef,
     state,
     shouldValidateOnChange,
-    getRegisteredFieldId
+    registeredFieldIdRef
   });
   const [validateFieldControl, registerFieldControl] = useFieldControlRegistration({
     commit: validation.commit,
@@ -600,7 +610,7 @@ const FieldRootInner = /*#__PURE__*/React__namespace.forwardRef(function FieldRo
     markedDirtyRef,
     name,
     setRegisteredFieldName,
-    setRegisteredFieldId,
+    registeredFieldIdRef,
     setValidityData,
     validityData
   });
@@ -613,23 +623,16 @@ 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, touched, setTouched, dirty, setDirty, filled, setFilled, focused, setFocused, validate, validationMode, validationDebounceTime, shouldValidateOnChange, state, registerFieldControl, validation]);
+  }), [invalid, effectiveName, validityData, disabled, setTouched, setDirty, setFilled, setFocused, validationMode, shouldValidateOnChange, state, registerFieldControl, validation]);
   const element = useRenderElement.useRenderElement('div', componentProps, {
     ref: forwardedRef,
     state,
@@ -786,13 +789,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) {