@jobber/components 8.23.0 → 8.23.1

package/dist/InputNumberExperimental-cjs.js

@@ -32,11 +32,16 @@ function _interopNamespaceDefault(e) {
 
 var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
 
-const FieldsetRootContext = /*#__PURE__*/React__namespace.createContext({
-  legendId: undefined,
-  setLegendId: () => {},
-  disabled: undefined
+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;
+}
+
+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);
@@ -84,9 +89,12 @@ const LabelableProvider = function LabelableProvider(props) {
     });
   });
   const getDescriptionProps = React__namespace.useCallback(externalProps => {
-    return useRenderElement.mergeProps({
-      'aria-describedby': parentMessageIds.concat(messageIds).join(' ') || undefined
-    }, 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,
@@ -104,6 +112,20 @@ const LabelableProvider = function LabelableProvider(props) {
 };
 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.
+ */
+function getCombinedFieldValidityData(validityData, invalid) {
+  return {
+    ...validityData,
+    state: {
+      ...validityData.state,
+      valid: !invalid && validityData.state.valid
+    }
+  };
+}
+
 const validityKeys = Object.keys(useLabelableId.DEFAULT_VALIDITY_STATE);
 function isOnlyValueMissing(state) {
   if (!state || state.valid || !state.valueMissing) {
@@ -116,17 +138,45 @@ function isOnlyValueMissing(state) {
     }
     if (key === 'valueMissing') {
       onlyValueMissing = state[key];
-    }
-    if (state[key]) {
+    } else if (state[key]) {
       onlyValueMissing = false;
     }
   }
   return onlyValueMissing;
 }
+
+/**
+ * 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.
+ */
+function findRepresentativeInput(inputs) {
+  let fallback = null;
+  for (const input of inputs) {
+    if (input.disabled) {
+      continue;
+    }
+    if (!input.validity.valid) {
+      return input;
+    }
+    fallback ??= input;
+  }
+  return fallback;
+}
+function clearCustomValidity(element, inputs) {
+  let didClearElement = false;
+  for (const input of inputs) {
+    input.setCustomValidity('');
+    didClearElement ||= input === element;
+  }
+  if (!didClearElement) {
+    element.setCustomValidity('');
+  }
+}
 function useFieldValidation(params) {
   const {
-    formRef,
-    clearErrors
+    formRef
   } = useLabelableId.useFormContext();
   const {
     setValidityData,
@@ -136,8 +186,8 @@ function useFieldValidation(params) {
     invalid,
     markedDirtyRef,
     state,
-    name,
-    shouldValidateOnChange
+    shouldValidateOnChange,
+    getRegisteredFieldId
   } = params;
   const {
     controlId,
@@ -145,11 +195,45 @@ function useFieldValidation(params) {
   } = useLabelableId.useLabelableContext();
   const timeout = useButton.useTimeout();
   const inputRef = React__namespace.useRef(null);
+  const registeredInputs = useRenderElement.useRefWithInit(() => new Set()).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);
+    return () => {
+      registeredInputs.delete(element);
+    };
+  }, [registeredInputs]);
   const commit = useButton.useStableCallback(async (value, revalidate = false) => {
-    const element = inputRef.current;
+    // 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;
+      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
+      });
+    }
     if (revalidate) {
       if (state.valid !== false) {
         return;
@@ -169,16 +253,10 @@ function useFieldValidation(params) {
           errors: [],
           initialValue: validityData.initialValue
         };
-        element.setCustomValidity('');
-        if (controlId) {
-          const currentFieldData = formRef.current.fields.get(controlId);
-          if (currentFieldData) {
-            formRef.current.fields.set(controlId, {
-              ...currentFieldData,
-              ...useLabelableId.getCombinedFieldValidityData(nextValidityData, false) // invalid = false
-            });
-          }
-        }
+        clearCustomValidity(element, registeredInputs);
+
+        // The required value is now present; ignore stale external invalid state for this pass.
+        updateRegisteredFieldValidity(nextValidityData, false);
         setValidityData(nextValidityData);
         return;
       }
@@ -229,8 +307,8 @@ function useFieldValidation(params) {
     let validationErrors = [];
     const nextState = getState(element);
     let defaultValidationMessage;
-    const validateOnChange = shouldValidateOnChange();
-    if (element.validationMessage && !validateOnChange) {
+    const isValidatingOnChange = shouldValidateOnChange();
+    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;
@@ -248,6 +326,9 @@ function useFieldValidation(params) {
       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;
       }
@@ -261,10 +342,10 @@ function useFieldValidation(params) {
           validationErrors = [result];
           element.setCustomValidity(result);
         }
-      } else if (validateOnChange) {
+      } else if (isValidatingOnChange) {
         // validate function returned no errors, if validating on change
         // we need to clear the custom validity state
-        element.setCustomValidity('');
+        clearCustomValidity(element, registeredInputs);
         nextState.customError = false;
         if (element.validationMessage) {
           defaultValidationMessage = element.validationMessage;
@@ -281,57 +362,153 @@ function useFieldValidation(params) {
       errors: validationErrors,
       initialValue: validityData.initialValue
     };
-    if (controlId) {
-      const currentFieldData = formRef.current.fields.get(controlId);
-      if (currentFieldData) {
-        formRef.current.fields.set(controlId, {
-          ...currentFieldData,
-          // Keep Form-level errors part of overall field validity for submit blocking/focus logic.
-          ...useLabelableId.getCombinedFieldValidityData(nextValidityData, invalid)
-        });
-      }
-    }
+
+    // Keep Form-level errors part of overall field validity for submit blocking/focus logic.
+    updateRegisteredFieldValidity(nextValidityData);
     setValidityData(nextValidityData);
   });
-  const getValidationProps = React__namespace.useCallback((externalProps = {}) => useRenderElement.mergeProps(getDescriptionProps, state.valid === false ? {
+  const change = useButton.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, externalProps), [getDescriptionProps, state.valid]);
-  const getInputValidationProps = React__namespace.useCallback((externalProps = {}) => useRenderElement.mergeProps({
-    onChange(event) {
-      // Workaround for https://github.com/facebook/react/issues/9023
-      if (event.nativeEvent.defaultPrevented) {
-        return;
-      }
-      clearErrors(name);
-      if (!shouldValidateOnChange()) {
-        commit(event.currentTarget.value, true);
-        return;
-      }
+  } : useRenderElement.EMPTY_OBJECT), [getDescriptionProps, state.disabled, state.valid]);
+  return React__namespace.useMemo(() => ({
+    getValidationProps,
+    inputRef,
+    registerInput,
+    commit,
+    change
+  }), [getValidationProps, registerInput, commit, change]);
+}
 
-      // When validating on change, run client-side validation even if
-      // externally invalid
-      const element = event.currentTarget;
-      if (element.value === '') {
-        // Ignore the debounce time for empty values.
-        commit(element.value);
-        return;
+function useFieldControlRegistration(params) {
+  const {
+    commit,
+    invalid,
+    markedDirtyRef,
+    name,
+    setRegisteredFieldName,
+    setRegisteredFieldId,
+    setValidityData,
+    validityData
+  } = params;
+  const {
+    formRef
+  } = useLabelableId.useFormContext();
+  const activeFieldControlSourceRef = React__namespace.useRef(null);
+  const registrationRef = React__namespace.useRef(null);
+  const fallbackControlRef = React__namespace.useRef(null);
+  const getValueForForm = useButton.useStableCallback(() => {
+    const registration = registrationRef.current;
+    if (!registration) {
+      return undefined;
+    }
+    if (registration.getValue) {
+      return registration.getValue();
+    }
+    return registration.value;
+  });
+  function getRegistrationValue(registration) {
+    return registration.value === undefined ? getValueForForm() : registration.value;
+  }
+  const validate = useButton.useStableCallback(() => {
+    const registration = registrationRef.current;
+    markedDirtyRef.current = true;
+    if (!registration) {
+      commit(validityData.value);
+      return;
+    }
+    commit(getRegistrationValue(registration));
+  });
+  function refreshRegistration() {
+    const registration = registrationRef.current;
+    if (!registration || !registration.id) {
+      return;
+    }
+    formRef.current.fields.set(registration.id, {
+      getValue: getValueForForm,
+      name: name ?? registration.name,
+      controlRef: registration.controlRef ?? fallbackControlRef,
+      validityData: getCombinedFieldValidityData(validityData, invalid),
+      validate
+    });
+  }
+  function deleteRegistration(id = registrationRef.current?.id) {
+    if (id) {
+      formRef.current.fields.delete(id);
+    }
+  }
+  function syncInitialValue() {
+    const registration = registrationRef.current;
+    if (!registration) {
+      return;
+    }
+    const initialValue = getRegistrationValue(registration);
+    if (validityData.initialValue === null && initialValue !== null) {
+      setValidityData(prev => ({
+        ...prev,
+        initialValue
+      }));
+    }
+  }
+  useButton.useIsoLayoutEffect(() => {
+    const registration = registrationRef.current;
+    if (!registration || !registration.id) {
+      return;
+    }
+    setRegisteredFieldName(name ? undefined : registration.name);
+    formRef.current.fields.set(registration.id, {
+      getValue: getValueForForm,
+      name: name ?? registration.name,
+      controlRef: registration.controlRef ?? fallbackControlRef,
+      validityData: getCombinedFieldValidityData(validityData, invalid),
+      validate
+    });
+  }, [formRef, getValueForForm, invalid, name, setRegisteredFieldName, validate, validityData]);
+  useButton.useIsoLayoutEffect(() => {
+    const fields = formRef.current.fields;
+    return () => {
+      const id = registrationRef.current?.id;
+      if (id) {
+        fields.delete(id);
       }
-      timeout.clear();
-      if (validationDebounceTime) {
-        timeout.start(validationDebounceTime, () => {
-          commit(element.value);
-        });
-      } else {
-        commit(element.value);
+    };
+  }, [formRef]);
+  const register = useButton.useStableCallback((source, registration) => {
+    if (!registration) {
+      if (activeFieldControlSourceRef.current === source) {
+        activeFieldControlSourceRef.current = null;
+        deleteRegistration();
+        registrationRef.current = null;
+        setRegisteredFieldName(undefined);
+        setRegisteredFieldId(undefined);
       }
+      return;
     }
-  }, getValidationProps(externalProps)), [getValidationProps, clearErrors, name, timeout, commit, validationDebounceTime, shouldValidateOnChange]);
-  return React__namespace.useMemo(() => ({
-    getValidationProps,
-    getInputValidationProps,
-    inputRef,
-    commit
-  }), [getValidationProps, getInputValidationProps, commit]);
+    const previousId = registrationRef.current?.id;
+    activeFieldControlSourceRef.current = source;
+    registrationRef.current = registration;
+    if (!name) {
+      setRegisteredFieldName(registration.name);
+    }
+    setRegisteredFieldId(registration.id);
+    if (previousId && previousId !== registration.id) {
+      deleteRegistration(previousId);
+    }
+    syncInitialValue();
+    refreshRegistration();
+  });
+  return [validate, register];
 }
 
 const FieldRootInner = /*#__PURE__*/React__namespace.forwardRef(function FieldRootInner(componentProps, forwardedRef) {
@@ -352,11 +529,10 @@ const FieldRootInner = /*#__PURE__*/React__namespace.forwardRef(function FieldRo
     dirty: dirtyProp,
     touched: touchedProp,
     actionsRef,
+    style,
     ...elementProps
   } = componentProps;
-  const {
-    disabled: disabledFieldset
-  } = useFieldsetRootContext();
+  const disabledFieldset = useFieldsetRootContext(true)?.disabled;
   const validate = useButton.useStableCallback(validateProp || (() => null));
   const disabled = disabledFieldset || disabledProp;
   const [touchedState, setTouchedUnwrapped] = React__namespace.useState(false);
@@ -365,7 +541,19 @@ const FieldRootInner = /*#__PURE__*/React__namespace.forwardRef(function FieldRo
   const [focused, setFocused] = React__namespace.useState(false);
   const dirty = dirtyProp ?? dirtyState;
   const touched = touchedProp ?? touchedState;
-  const markedDirtyRef = React__namespace.useRef(false);
+  const markedDirtyRef = React__namespace.useRef(dirty);
+  const registeredFieldIdRef = React__namespace.useRef(undefined);
+  const [registeredFieldName, setRegisteredFieldName] = React__namespace.useState();
+  const effectiveName = name ?? registeredFieldName;
+  useButton.useIsoLayoutEffect(() => {
+    if (dirtyProp !== undefined) {
+      markedDirtyRef.current = dirtyProp;
+    }
+  }, [dirtyProp]);
+  const getRegisteredFieldId = React__namespace.useCallback(() => registeredFieldIdRef.current, []);
+  const setRegisteredFieldId = React__namespace.useCallback(id => {
+    registeredFieldIdRef.current = id;
+  }, []);
   const setDirty = useButton.useStableCallback(value => {
     if (dirtyProp !== undefined) {
       return;
@@ -382,7 +570,8 @@ const FieldRootInner = /*#__PURE__*/React__namespace.forwardRef(function FieldRo
     setTouchedUnwrapped(value);
   });
   const shouldValidateOnChange = useButton.useStableCallback(() => validationMode === 'onChange' || validationMode === 'onSubmit' && submitAttemptedRef.current);
-  const hasFormError = !!name && Object.hasOwn(errors, name) && errors[name] !== undefined;
+  const formError = effectiveName && Object.hasOwn(errors, effectiveName) ? errors[effectiveName] : null;
+  const hasFormError = !!(Array.isArray(formError) ? formError.length : formError);
   const invalid = invalidProp === true || hasFormError;
   const [validityData, setValidityData] = React__namespace.useState({
     state: useLabelableId.DEFAULT_VALIDITY_STATE,
@@ -391,7 +580,7 @@ const FieldRootInner = /*#__PURE__*/React__namespace.forwardRef(function FieldRo
     value: null,
     initialValue: null
   });
-  const valid = !invalid && validityData.state.valid;
+  const valid = disabled ? null : !invalid && validityData.state.valid;
   const state = React__namespace.useMemo(() => ({
     disabled,
     touched,
@@ -408,19 +597,25 @@ const FieldRootInner = /*#__PURE__*/React__namespace.forwardRef(function FieldRo
     invalid,
     markedDirtyRef,
     state,
+    shouldValidateOnChange,
+    getRegisteredFieldId
+  });
+  const [validateFieldControl, registerFieldControl] = useFieldControlRegistration({
+    commit: validation.commit,
+    invalid,
+    markedDirtyRef,
     name,
-    shouldValidateOnChange
+    setRegisteredFieldName,
+    setRegisteredFieldId,
+    setValidityData,
+    validityData
   });
-  const handleImperativeValidate = React__namespace.useCallback(() => {
-    markedDirtyRef.current = true;
-    validation.commit(validityData.value);
-  }, [validation, validityData]);
   React__namespace.useImperativeHandle(actionsRef, () => ({
-    validate: handleImperativeValidate
-  }), [handleImperativeValidate]);
+    validate: validateFieldControl
+  }), [validateFieldControl]);
   const contextValue = React__namespace.useMemo(() => ({
     invalid,
-    name,
+    name: effectiveName,
     validityData,
     setValidityData,
     disabled,
@@ -438,8 +633,9 @@ const FieldRootInner = /*#__PURE__*/React__namespace.forwardRef(function FieldRo
     shouldValidateOnChange,
     state,
     markedDirtyRef,
+    registerFieldControl,
     validation
-  }), [invalid, name, validityData, disabled, touched, setTouched, dirty, setDirty, filled, setFilled, focused, setFocused, validate, validationMode, validationDebounceTime, shouldValidateOnChange, state, 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,
@@ -479,14 +675,20 @@ const FieldLabel = /*#__PURE__*/React__namespace.forwardRef(function FieldLabel(
   const {
     render,
     className,
+    style,
     id: idProp,
     nativeLabel = true,
     ...elementProps
   } = componentProps;
   const fieldRootContext = useLabelableId.useFieldRootContext(false);
+  const fieldItemContext = useFieldItemContext();
   const {
     labelId
   } = useLabelableId.useLabelableContext();
+  const state = {
+    ...fieldRootContext.state,
+    disabled: fieldRootContext.disabled || fieldItemContext.disabled
+  };
   const labelRef = React__namespace.useRef(null);
   const labelProps = useLabel.useLabel({
     id: labelId ?? idProp,
@@ -514,7 +716,7 @@ const FieldLabel = /*#__PURE__*/React__namespace.forwardRef(function FieldLabel(
   }
   const element = useRenderElement.useRenderElement('label', componentProps, {
     ref: [forwardedRef, labelRef],
-    state: fieldRootContext.state,
+    state,
     props: [labelProps, elementProps],
     stateAttributesMapping: useLabelableId.fieldValidityMapping
   });
@@ -539,6 +741,7 @@ const FieldError = /*#__PURE__*/React__namespace.forwardRef(function FieldError(
     id: idProp,
     className,
     match,
+    style,
     ...elementProps
   } = componentProps;
   const id = useButton.useBaseUiId(idProp);
@@ -553,14 +756,18 @@ const FieldError = /*#__PURE__*/React__namespace.forwardRef(function FieldError(
   const {
     errors
   } = useLabelableId.useFormContext();
-  const formError = name ? errors[name] : null;
+  const formError = name && Object.hasOwn(errors, name) ? errors[name] : null;
+  const hasFormError = !!(Array.isArray(formError) ? formError.length : formError);
+  const hasSpecificMatch = typeof match === 'string';
   let rendered = false;
-  if (formError || match === true) {
+  if (match === true) {
     rendered = true;
-  } else if (match) {
+  } else if (fieldState.disabled) {
+    rendered = false;
+  } else if (hasSpecificMatch) {
     rendered = Boolean(validityData.state[match]);
   } else {
-    rendered = validityData.state.valid === false;
+    rendered = hasFormError || validityData.state.valid === false;
   }
   const {
     mounted,
@@ -579,17 +786,21 @@ const FieldError = /*#__PURE__*/React__namespace.forwardRef(function FieldError(
   const errorRef = React__namespace.useRef(null);
   const [lastRenderedMessage, setLastRenderedMessage] = React__namespace.useState(null);
   const [lastRenderedMessageKey, setLastRenderedMessageKey] = React__namespace.useState(null);
-  const errorMessage = formError || (validityData.errors.length > 1 ? /*#__PURE__*/jsxRuntime.jsx("ul", {
-    children: validityData.errors.map(message => /*#__PURE__*/jsxRuntime.jsx("li", {
-      children: message
-    }, message))
-  }) : validityData.error);
-  let errorKey = validityData.error;
-  if (formError != null) {
-    errorKey = Array.isArray(formError) ? JSON.stringify(formError) : formError;
+  let error = validityData.error;
+  if (!hasSpecificMatch && hasFormError) {
+    error = formError;
   } else if (validityData.errors.length > 1) {
-    errorKey = JSON.stringify(validityData.errors);
+    error = validityData.errors;
+  }
+  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] ?? '';
   }
+  const errorKey = Array.isArray(error) ? JSON.stringify(error) : error;
   if (rendered && errorKey !== lastRenderedMessageKey) {
     setLastRenderedMessageKey(errorKey);
     setLastRenderedMessage(errorMessage);
@@ -635,13 +846,19 @@ const FieldDescription = /*#__PURE__*/React__namespace.forwardRef(function Field
     render,
     id: idProp,
     className,
+    style,
     ...elementProps
   } = componentProps;
   const id = useButton.useBaseUiId(idProp);
   const fieldRootContext = useLabelableId.useFieldRootContext(false);
+  const fieldItemContext = useFieldItemContext();
   const {
     setMessageIds
   } = useLabelableId.useLabelableContext();
+  const state = {
+    ...fieldRootContext.state,
+    disabled: fieldRootContext.disabled || fieldItemContext.disabled
+  };
   useButton.useIsoLayoutEffect(() => {
     if (!id) {
       return undefined;
@@ -653,7 +870,7 @@ const FieldDescription = /*#__PURE__*/React__namespace.forwardRef(function Field
   }, [id, setMessageIds]);
   const element = useRenderElement.useRenderElement('p', componentProps, {
     ref: forwardedRef,
-    state: fieldRootContext.state,
+    state,
     props: [{
       id
     }, elementProps],