@dynatrace/strato-components 3.7.1 → 3.9.0

package/esm/forms/forms-core/contexts/FormFieldContext.js

@@ -1,12 +1,22 @@
 import { createContext } from "react";
-const _FormFieldContext = createContext({
+const defaultFormFieldContext = {
   controlId: void 0,
+  formFieldId: void 0,
+  formControlId: void 0,
+  memberFormControlIds: [],
+  registerFormControlId: () => () => void 0,
+  registerMemberFormControlId: () => () => void 0,
+  formFieldLabelId: void 0,
+  registerFormFieldLabelId: () => () => void 0,
   required: void 0,
   disabled: void 0,
   ariaDisabled: void 0,
   dispatch: void 0,
   readOnly: void 0
-});
+};
+const _FormFieldContext = createContext(
+  defaultFormFieldContext
+);
 export {
   _FormFieldContext
 };

package/esm/forms/forms-core/contexts/FormFieldContext.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/forms/forms-core/contexts/FormFieldContext.ts"],
-  "sourcesContent": ["import { type Dispatch, createContext } from 'react';\n\nimport { FormFieldReducerAction } from '../state/formfield-state-reducer.js';\nimport type { SharedFormFieldProps } from '../types/formfield.types.js';\n\n/**\n * @public\n */\nexport interface SharedFormFieldContextProps extends SharedFormFieldProps {\n  dispatch?: Dispatch<FormFieldReducerAction>;\n}\n\n/**\n * @internal\n * Context provider for `FormField` props meant to be provided to all its input-related child nodes.\n */\nexport const _FormFieldContext = createContext<SharedFormFieldContextProps>({\n  controlId: undefined,\n  required: undefined,\n  disabled: undefined,\n  ariaDisabled: undefined,\n  dispatch: undefined,\n  readOnly: undefined,\n});\n"],
-  "mappings": "AAAA,SAAwB,qBAAqB;AAgBtC,MAAM,oBAAoB,cAA2C;AAAA,EAC1E,WAAW;AAAA,EACX,UAAU;AAAA,EACV,UAAU;AAAA,EACV,cAAc;AAAA,EACd,UAAU;AAAA,EACV,UAAU;AACZ,CAAC;",
+  "sourcesContent": ["import { type Dispatch, createContext } from 'react';\n\nimport { FormFieldReducerAction } from '../state/formfield-state-reducer.js';\nimport type { SharedFormFieldProps } from '../types/formfield.types.js';\n\n/**\n * @public\n */\nexport interface SharedFormFieldContextProps extends SharedFormFieldProps {\n  // eslint-disable-next-line @typescript-eslint/no-deprecated -- APPDEV-18321\n  dispatch?: Dispatch<FormFieldReducerAction>;\n  /** @internal */\n  formFieldId?: string;\n  /**\n   * Logical form-control id registered against this FormField.\n   * @internal\n   */\n  formControlId?: string;\n  /**\n   * Native/member input ids belonging to the logical form control.\n   * @internal\n   */\n  memberFormControlIds?: string[];\n  /**\n   * Registers a logical form-control id and returns an unregister callback for\n   * React effect cleanup. Custom context consumers may omit this \u2014\n   * `useFormFieldContext` falls back to a noop.\n   * @internal\n   */\n  registerFormControlId?: (id: string) => () => void;\n  /**\n   * Registers a native/member input id and returns an unregister callback for\n   * React effect cleanup. Custom context consumers may omit this \u2014\n   * `useFormFieldContext` falls back to a noop.\n   * @internal\n   */\n  registerMemberFormControlId?: (id: string) => () => void;\n  /** @internal */\n  formFieldLabelId?: string;\n  /**\n   * Registers a label id and returns an unregister callback for React effect\n   * cleanup. Custom context consumers may omit this \u2014 `useFormFieldContext`\n   * falls back to a noop.\n   * @internal\n   */\n  registerFormFieldLabelId?: (id: string) => () => void;\n}\n\nconst defaultFormFieldContext: SharedFormFieldContextProps = {\n  controlId: undefined,\n  formFieldId: undefined,\n  formControlId: undefined,\n  memberFormControlIds: [],\n  registerFormControlId: () => () => undefined,\n  registerMemberFormControlId: () => () => undefined,\n  formFieldLabelId: undefined,\n  registerFormFieldLabelId: () => () => undefined,\n  required: undefined,\n  disabled: undefined,\n  ariaDisabled: undefined,\n  dispatch: undefined,\n  readOnly: undefined,\n};\n\n/**\n * @internal\n * Context provider for `FormField` props meant to be provided to all its input-related child nodes.\n */\nexport const _FormFieldContext = createContext<SharedFormFieldContextProps>(\n  defaultFormFieldContext,\n);\n"],
+  "mappings": "AAAA,SAAwB,qBAAqB;AAgD7C,MAAM,0BAAuD;AAAA,EAC3D,WAAW;AAAA,EACX,aAAa;AAAA,EACb,eAAe;AAAA,EACf,sBAAsB,CAAC;AAAA,EACvB,uBAAuB,MAAM,MAAM;AAAA,EACnC,6BAA6B,MAAM,MAAM;AAAA,EACzC,kBAAkB;AAAA,EAClB,0BAA0B,MAAM,MAAM;AAAA,EACtC,UAAU;AAAA,EACV,UAAU;AAAA,EACV,cAAc;AAAA,EACd,UAAU;AAAA,EACV,UAAU;AACZ;AAMO,MAAM,oBAAoB;AAAA,EAC/B;AACF;",
   "names": []
 }

package/esm/forms/forms-core/hooks/useFormControl.js

@@ -0,0 +1,143 @@
+import {
+  useCallback,
+  useEffect,
+  useMemo,
+  useState
+} from "react";
+import { useFormFieldContext } from "./useFormFieldContext.js";
+import { useFormFieldMessagesContext } from "./useFormFieldMessagesContext.js";
+import { useFormControlState } from "../../../core/hooks/useFormControlState.js";
+import { useId } from "../../../core/hooks/useId.js";
+import { parseBoolean } from "../../../core/utils/parse-boolean.js";
+import {
+  FormFieldMessagesAction
+} from "../state/formfield-messages-state-reducer.js";
+import { FormFieldAction } from "../state/formfield-state-reducer.js";
+function useFormControl({
+  propId,
+  propDisabled,
+  propAriaDisabled,
+  propRequired,
+  propReadOnly,
+  controlState,
+  validationVisibility = "immediate",
+  hasValidationError = false
+}) {
+  const uniqueId = useId();
+  const {
+    // eslint-disable-next-line @typescript-eslint/no-deprecated
+    controlId,
+    formFieldId,
+    required: contextRequired,
+    disabled: contextDisabled,
+    ariaDisabled: contextAriaDisabled,
+    readOnly: contextReadOnly,
+    dispatch: formFieldDispatch,
+    registerFormControlId
+  } = useFormFieldContext();
+  const { state: messageState, dispatch: messageDispatch } = useFormFieldMessagesContext();
+  const disabled = propDisabled ?? contextDisabled;
+  const ariaDisabled = parseBoolean(propAriaDisabled) ?? contextAriaDisabled;
+  const required = propRequired ?? contextRequired;
+  const readOnly = propReadOnly ?? contextReadOnly;
+  const legacyFallbackId = formFieldId ?? controlId;
+  const id = propId || legacyFallbackId || uniqueId;
+  useEffect(() => {
+    formFieldDispatch?.({
+      type: FormFieldAction.UPDATE,
+      payload: {
+        disabled: propDisabled,
+        required: propRequired,
+        ariaDisabled: parseBoolean(propAriaDisabled),
+        readOnly: propReadOnly
+      }
+    });
+  }, [
+    formFieldDispatch,
+    propDisabled,
+    propRequired,
+    propAriaDisabled,
+    propReadOnly
+  ]);
+  useEffect(() => {
+    messageDispatch?.({
+      type: FormFieldMessagesAction.DISABLEMESSAGE,
+      payload: { isDisabled: disabled }
+    });
+  }, [disabled, messageDispatch]);
+  useEffect(() => registerFormControlId(id), [id, registerFormControlId]);
+  useEffect(() => {
+    messageDispatch?.({
+      type: FormFieldMessagesAction.SETFORMCONTROLID,
+      payload: { formControlId: id }
+    });
+  }, [messageDispatch, id]);
+  const [hasLegacyHintError, hint] = useFormControlState(controlState);
+  const isAfterBlur = validationVisibility === "after-blur";
+  const [hasFocusWithin, setHasFocusWithin] = useState(false);
+  const [revealed, setRevealed] = useState(false);
+  const hasAnyError = messageState.showError || hasLegacyHintError || isAfterBlur && hasValidationError;
+  let nextRevealed = revealed;
+  if (isAfterBlur) {
+    if (revealed && !hasAnyError) {
+      nextRevealed = false;
+    } else if (!hasFocusWithin && (messageState.isTouched ?? false) && hasAnyError) {
+      nextRevealed = true;
+    }
+    if (nextRevealed !== revealed) {
+      setRevealed(nextRevealed);
+    }
+  }
+  const showValidationError = isAfterBlur ? hasAnyError && nextRevealed : messageState.showError;
+  const showError = !disabled && (showValidationError || hasLegacyHintError);
+  const hintId = useId();
+  const inputProps = {
+    "aria-describedby": hint ? hintId : void 0,
+    "aria-invalid": showValidationError || hasLegacyHintError
+  };
+  const hintProps = { id: hintId, "aria-live": "polite" };
+  const focusHandlers = useMemo(
+    () => isAfterBlur ? {
+      onFocus: () => setHasFocusWithin(true),
+      onBlur: (event) => {
+        if (!event.currentTarget.contains(event.relatedTarget)) {
+          setHasFocusWithin(false);
+          messageDispatch?.({
+            type: FormFieldMessagesAction.SETISTOUCHED,
+            payload: { isTouched: true }
+          });
+        }
+      }
+    } : {},
+    [isAfterBlur, messageDispatch]
+  );
+  const markTouched = useCallback(() => {
+    if (!isAfterBlur) {
+      return;
+    }
+    messageDispatch?.({
+      type: FormFieldMessagesAction.SETISTOUCHED,
+      payload: { isTouched: true }
+    });
+    setRevealed(true);
+  }, [isAfterBlur, messageDispatch]);
+  return {
+    id,
+    disabled,
+    required,
+    readOnly,
+    ariaDisabled,
+    inputProps,
+    hintProps,
+    hint,
+    showError,
+    messageState,
+    messageDispatch,
+    focusHandlers,
+    markTouched
+  };
+}
+export {
+  useFormControl
+};
+//# sourceMappingURL=useFormControl.js.map

package/esm/forms/forms-core/hooks/useFormControl.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/forms/forms-core/hooks/useFormControl.ts"],
+  "sourcesContent": ["import {\n  useCallback,\n  useEffect,\n  useMemo,\n  useState,\n  type Dispatch,\n  type FocusEventHandler,\n  type ReactNode,\n} from 'react';\n\nimport { useFormFieldContext } from './useFormFieldContext.js';\nimport { useFormFieldMessagesContext } from './useFormFieldMessagesContext.js';\nimport { useFormControlState } from '../../../core/hooks/useFormControlState.js';\nimport { useId } from '../../../core/hooks/useId.js';\n// eslint-disable-next-line @typescript-eslint/no-deprecated\nimport type { FormControlState } from '../../../core/types/form-control-state.js';\nimport { parseBoolean } from '../../../core/utils/parse-boolean.js';\nimport {\n  FormFieldMessagesAction,\n  type FormFieldMessagesReducerAction,\n} from '../state/formfield-messages-state-reducer.js';\nimport { FormFieldAction } from '../state/formfield-state-reducer.js';\nimport type { FormFieldMessageContextState } from '../types/formfield-messages.types.js';\n\n/**\n * When validation errors first become visible.\n * - `'immediate'` (default): an error is surfaced as soon as it exists (after\n *   the field is touched). It stays visible and updates live while the user is\n *   editing.\n * - `'after-blur'`: an error becomes visible on blur. While the user is editing\n *   (focus inside), a shown error stays visible until all errors are resolved,\n *   then clears; a new error raised while editing is held back until the next\n *   blur. Used by complex inputs (e.g. `FilterField`) where intermediate values\n *   are expected to be invalid.\n *\n * See `forms/validation/api-proposals/validation-visibility.md`.\n * @internal\n */\nexport type ValidationVisibility = 'immediate' | 'after-blur';\n\n/**\n * Props for `useFormControl`. Mirrors the inputs of the legacy form-control\n * hook stack that Strato controls used to call individually.\n * @internal \u2014 Strato controls only.\n */\nexport interface UseFormControlProps {\n  /** Control id passed directly to the form control. */\n  propId?: string;\n  /** Disabled state passed directly to the form control. */\n  propDisabled?: boolean;\n  /** Aria-disabled state passed directly to the form control. */\n  propAriaDisabled?: boolean | 'true' | 'false';\n  /** Required state passed directly to the form control. */\n  propRequired?: boolean;\n  /** Read-only state passed directly to the form control. */\n  propReadOnly?: boolean;\n  /**\n   * Legacy `controlState` plumbing for hint/error.\n   * Removed by APPDEV-8298.\n   */\n  // eslint-disable-next-line @typescript-eslint/no-deprecated\n  controlState?: FormControlState;\n  /**\n   * When validation errors first become visible. Defaults to `'immediate'`.\n   * @internal\n   */\n  validationVisibility?: ValidationVisibility;\n  /**\n   * Control-local validation state used by complex controls while their\n   * message-context update has not rendered yet. This does not replace the\n   * message context; it only lets after-blur visibility react in the same\n   * render as the control's own validation state.\n   * Ignored when `validationVisibility === 'immediate'`.\n   * @internal\n   */\n  hasValidationError?: boolean;\n}\n\n/** @internal */\nexport interface UseFormControlReturnType {\n  id: string;\n  disabled: boolean | undefined;\n  required: boolean | undefined;\n  readOnly: boolean | undefined;\n  ariaDisabled: boolean | undefined;\n  inputProps: { 'aria-describedby'?: string; 'aria-invalid': boolean };\n  hintProps: { id: string; 'aria-live': 'polite' };\n  /** Hint content from the legacy `controlState` prop, if any. */\n  hint: ReactNode;\n  /** True if the control should render error styling right now. Disabled-gated. */\n  showError: boolean;\n  /** Always present (defaults to empty state when no FormField wraps). */\n  messageState: FormFieldMessageContextState;\n  /** Undefined when no FormField wraps the control. */\n  messageDispatch: Dispatch<FormFieldMessagesReducerAction> | undefined;\n  /**\n   * Focus handlers for the element that defines \"the field\". Only\n   * meaningful in `'after-blur'` mode; an empty object otherwise, so callers\n   * can spread it unconditionally.\n   * @internal\n   */\n  focusHandlers: {\n    onFocus?: FocusEventHandler;\n    onBlur?: FocusEventHandler;\n  };\n  /**\n   * Mark the field touched and reveal any error immediately, ignoring focus.\n   * Wire to a control's imperative `validate()` so parent-driven validation\n   * paints the error even while focus is still inside the field. No-op in\n   * `'immediate'` mode.\n   * @internal\n   */\n  markTouched: () => void;\n}\n\n/**\n * Single entry point for Strato controls to wire id, disabled/required/readOnly\n * synchronisation with the FormField context, error/hint plumbing, and ARIA\n * attributes. Has no knowledge of `_Form`; that wiring lives in\n * `useStratoFormControl`.\n * @internal \u2014 Strato controls only.\n */\nexport function useFormControl({\n  propId,\n  propDisabled,\n  propAriaDisabled,\n  propRequired,\n  propReadOnly,\n  controlState,\n  validationVisibility = 'immediate',\n  hasValidationError = false,\n}: UseFormControlProps): UseFormControlReturnType {\n  const uniqueId = useId();\n  const {\n    // eslint-disable-next-line @typescript-eslint/no-deprecated\n    controlId,\n    formFieldId,\n    required: contextRequired,\n    disabled: contextDisabled,\n    ariaDisabled: contextAriaDisabled,\n    readOnly: contextReadOnly,\n    dispatch: formFieldDispatch,\n    registerFormControlId,\n  } = useFormFieldContext();\n\n  const { state: messageState, dispatch: messageDispatch } =\n    useFormFieldMessagesContext();\n\n  const disabled = propDisabled ?? contextDisabled;\n  const ariaDisabled = parseBoolean(propAriaDisabled) ?? contextAriaDisabled;\n  const required = propRequired ?? contextRequired;\n  const readOnly = propReadOnly ?? contextReadOnly;\n  const legacyFallbackId = formFieldId ?? controlId;\n  const id = propId || legacyFallbackId || uniqueId;\n\n  useEffect(() => {\n    formFieldDispatch?.({\n      type: FormFieldAction.UPDATE,\n      payload: {\n        disabled: propDisabled,\n        required: propRequired,\n        ariaDisabled: parseBoolean(propAriaDisabled),\n        readOnly: propReadOnly,\n      },\n    });\n  }, [\n    formFieldDispatch,\n    propDisabled,\n    propRequired,\n    propAriaDisabled,\n    propReadOnly,\n  ]);\n\n  useEffect(() => {\n    messageDispatch?.({\n      type: FormFieldMessagesAction.DISABLEMESSAGE,\n      payload: { isDisabled: disabled },\n    });\n  }, [disabled, messageDispatch]);\n\n  useEffect(() => registerFormControlId(id), [id, registerFormControlId]);\n\n  useEffect(() => {\n    messageDispatch?.({\n      type: FormFieldMessagesAction.SETFORMCONTROLID,\n      payload: { formControlId: id },\n    });\n  }, [messageDispatch, id]);\n\n  const [hasLegacyHintError, hint] = useFormControlState(controlState);\n\n  const isAfterBlur = validationVisibility === 'after-blur';\n\n  // `after-blur` state machine \u2014 ported from FilterField. `revealed` is sticky:\n  // once an error is shown on blur it stays visible while the user edits, until\n  // every error is resolved; a new error that appears while editing is held\n  // back until the next blur (re-reveal). `markTouched` forces a reveal now,\n  // ignoring focus.\n  const [hasFocusWithin, setHasFocusWithin] = useState(false);\n  const [revealed, setRevealed] = useState(false);\n\n  const hasAnyError =\n    messageState.showError ||\n    hasLegacyHintError ||\n    (isAfterBlur && hasValidationError);\n\n  // Adjust `revealed` during render (React's \"adjusting state on prop change\"\n  // pattern) rather than in an effect, so the visible state is correct on the\n  // same render \u2014 no lag and no race with a `markTouched()` that runs in the\n  // same batch as the error being added.\n  let nextRevealed = revealed;\n  if (isAfterBlur) {\n    if (revealed && !hasAnyError) {\n      nextRevealed = false;\n    } else if (\n      !hasFocusWithin &&\n      (messageState.isTouched ?? false) &&\n      hasAnyError\n    ) {\n      nextRevealed = true;\n    }\n    // The `nextRevealed !== revealed` guard is required because this setter is\n    // called during render (the \"adjusting state on prop change\" pattern above),\n    // NOT from an event handler or effect. React's Object.is bail-out inside\n    // `dispatchSetState` only runs for updates dispatched outside of render;\n    // render-phase updates take a different code path that always schedules\n    // another render pass and never compares against the current state. Calling\n    // `setRevealed(nextRevealed)` unconditionally therefore re-schedules on\n    // every render and trips the \"Too many re-renders\" bail-out. FilterField is\n    // the only `after-blur` consumer and reproduces this immediately on mount.\n    if (nextRevealed !== revealed) {\n      setRevealed(nextRevealed);\n    }\n  }\n\n  const showValidationError = isAfterBlur\n    ? hasAnyError && nextRevealed\n    : messageState.showError;\n\n  // Legacy `controlState` has always been an explicit consumer-controlled\n  // visual state. Keep it outside the after-blur reveal gate so existing\n  // consumers can still force an error immediately, even for complex controls.\n  const showError = !disabled && (showValidationError || hasLegacyHintError);\n\n  const hintId = useId();\n  const inputProps = {\n    'aria-describedby': hint ? hintId : undefined,\n    'aria-invalid': showValidationError || hasLegacyHintError,\n  };\n  const hintProps = { id: hintId, 'aria-live': 'polite' as const };\n\n  const focusHandlers = useMemo<UseFormControlReturnType['focusHandlers']>(\n    () =>\n      isAfterBlur\n        ? {\n            onFocus: () => setHasFocusWithin(true),\n            onBlur: (event) => {\n              if (!event.currentTarget.contains(event.relatedTarget)) {\n                setHasFocusWithin(false);\n                messageDispatch?.({\n                  type: FormFieldMessagesAction.SETISTOUCHED,\n                  payload: { isTouched: true },\n                });\n              }\n            },\n          }\n        : {},\n    [isAfterBlur, messageDispatch],\n  );\n\n  const markTouched = useCallback(() => {\n    if (!isAfterBlur) {\n      return;\n    }\n    messageDispatch?.({\n      type: FormFieldMessagesAction.SETISTOUCHED,\n      payload: { isTouched: true },\n    });\n    setRevealed(true);\n  }, [isAfterBlur, messageDispatch]);\n\n  return {\n    id,\n    disabled,\n    required,\n    readOnly,\n    ariaDisabled,\n    inputProps,\n    hintProps,\n    hint,\n    showError,\n    messageState,\n    messageDispatch,\n    focusHandlers,\n    markTouched,\n  };\n}\n"],
+  "mappings": "AAAA;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OAIK;AAEP,SAAS,2BAA2B;AACpC,SAAS,mCAAmC;AAC5C,SAAS,2BAA2B;AACpC,SAAS,aAAa;AAGtB,SAAS,oBAAoB;AAC7B;AAAA,EACE;AAAA,OAEK;AACP,SAAS,uBAAuB;AAqGzB,SAAS,eAAe;AAAA,EAC7B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,uBAAuB;AAAA,EACvB,qBAAqB;AACvB,GAAkD;AAChD,QAAM,WAAW,MAAM;AACvB,QAAM;AAAA;AAAA,IAEJ;AAAA,IACA;AAAA,IACA,UAAU;AAAA,IACV,UAAU;AAAA,IACV,cAAc;AAAA,IACd,UAAU;AAAA,IACV,UAAU;AAAA,IACV;AAAA,EACF,IAAI,oBAAoB;AAExB,QAAM,EAAE,OAAO,cAAc,UAAU,gBAAgB,IACrD,4BAA4B;AAE9B,QAAM,WAAW,gBAAgB;AACjC,QAAM,eAAe,aAAa,gBAAgB,KAAK;AACvD,QAAM,WAAW,gBAAgB;AACjC,QAAM,WAAW,gBAAgB;AACjC,QAAM,mBAAmB,eAAe;AACxC,QAAM,KAAK,UAAU,oBAAoB;AAEzC,YAAU,MAAM;AACd,wBAAoB;AAAA,MAClB,MAAM,gBAAgB;AAAA,MACtB,SAAS;AAAA,QACP,UAAU;AAAA,QACV,UAAU;AAAA,QACV,cAAc,aAAa,gBAAgB;AAAA,QAC3C,UAAU;AAAA,MACZ;AAAA,IACF,CAAC;AAAA,EACH,GAAG;AAAA,IACD;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAED,YAAU,MAAM;AACd,sBAAkB;AAAA,MAChB,MAAM,wBAAwB;AAAA,MAC9B,SAAS,EAAE,YAAY,SAAS;AAAA,IAClC,CAAC;AAAA,EACH,GAAG,CAAC,UAAU,eAAe,CAAC;AAE9B,YAAU,MAAM,sBAAsB,EAAE,GAAG,CAAC,IAAI,qBAAqB,CAAC;AAEtE,YAAU,MAAM;AACd,sBAAkB;AAAA,MAChB,MAAM,wBAAwB;AAAA,MAC9B,SAAS,EAAE,eAAe,GAAG;AAAA,IAC/B,CAAC;AAAA,EACH,GAAG,CAAC,iBAAiB,EAAE,CAAC;AAExB,QAAM,CAAC,oBAAoB,IAAI,IAAI,oBAAoB,YAAY;AAEnE,QAAM,cAAc,yBAAyB;AAO7C,QAAM,CAAC,gBAAgB,iBAAiB,IAAI,SAAS,KAAK;AAC1D,QAAM,CAAC,UAAU,WAAW,IAAI,SAAS,KAAK;AAE9C,QAAM,cACJ,aAAa,aACb,sBACC,eAAe;AAMlB,MAAI,eAAe;AACnB,MAAI,aAAa;AACf,QAAI,YAAY,CAAC,aAAa;AAC5B,qBAAe;AAAA,IACjB,WACE,CAAC,mBACA,aAAa,aAAa,UAC3B,aACA;AACA,qBAAe;AAAA,IACjB;AAUA,QAAI,iBAAiB,UAAU;AAC7B,kBAAY,YAAY;AAAA,IAC1B;AAAA,EACF;AAEA,QAAM,sBAAsB,cACxB,eAAe,eACf,aAAa;AAKjB,QAAM,YAAY,CAAC,aAAa,uBAAuB;AAEvD,QAAM,SAAS,MAAM;AACrB,QAAM,aAAa;AAAA,IACjB,oBAAoB,OAAO,SAAS;AAAA,IACpC,gBAAgB,uBAAuB;AAAA,EACzC;AACA,QAAM,YAAY,EAAE,IAAI,QAAQ,aAAa,SAAkB;AAE/D,QAAM,gBAAgB;AAAA,IACpB,MACE,cACI;AAAA,MACE,SAAS,MAAM,kBAAkB,IAAI;AAAA,MACrC,QAAQ,CAAC,UAAU;AACjB,YAAI,CAAC,MAAM,cAAc,SAAS,MAAM,aAAa,GAAG;AACtD,4BAAkB,KAAK;AACvB,4BAAkB;AAAA,YAChB,MAAM,wBAAwB;AAAA,YAC9B,SAAS,EAAE,WAAW,KAAK;AAAA,UAC7B,CAAC;AAAA,QACH;AAAA,MACF;AAAA,IACF,IACA,CAAC;AAAA,IACP,CAAC,aAAa,eAAe;AAAA,EAC/B;AAEA,QAAM,cAAc,YAAY,MAAM;AACpC,QAAI,CAAC,aAAa;AAChB;AAAA,IACF;AACA,sBAAkB;AAAA,MAChB,MAAM,wBAAwB;AAAA,MAC9B,SAAS,EAAE,WAAW,KAAK;AAAA,IAC7B,CAAC;AACD,gBAAY,IAAI;AAAA,EAClB,GAAG,CAAC,aAAa,eAAe,CAAC;AAEjC,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF;",
+  "names": []
+}

package/esm/forms/forms-core/hooks/useFormFieldContext.js

@@ -1,6 +1,17 @@
 import { useContext } from "react";
 import { _FormFieldContext } from "../contexts/FormFieldContext.js";
-const useFormFieldContext = () => useContext(_FormFieldContext);
+const useFormFieldContext = () => {
+  const context = useContext(
+    _FormFieldContext
+  );
+  return {
+    memberFormControlIds: [],
+    registerFormControlId: () => () => void 0,
+    registerMemberFormControlId: () => () => void 0,
+    registerFormFieldLabelId: () => () => void 0,
+    ...context
+  };
+};
 export {
   useFormFieldContext
 };

package/esm/forms/forms-core/hooks/useFormFieldContext.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/forms/forms-core/hooks/useFormFieldContext.ts"],
-  "sourcesContent": ["import { useContext } from 'react';\n\nimport { _FormFieldContext } from '../contexts/FormFieldContext.js';\nimport type { SharedFormFieldContextProps } from '../contexts/FormFieldContext.js';\n\n/**\n * @internal\n */\nexport const useFormFieldContext = (): SharedFormFieldContextProps =>\n  useContext(_FormFieldContext);\n"],
-  "mappings": "AAAA,SAAS,kBAAkB;AAE3B,SAAS,yBAAyB;AAM3B,MAAM,sBAAsB,MACjC,WAAW,iBAAiB;",
+  "sourcesContent": ["import { useContext } from 'react';\n\nimport { _FormFieldContext } from '../contexts/FormFieldContext.js';\nimport type { SharedFormFieldContextProps } from '../contexts/FormFieldContext.js';\n\n/**\n * Return type of `useFormFieldContext`. Custom context values may omit\n * registration helpers and the member-id array; the hook fills in defaults so\n * consumers can rely on them being present.\n * @internal\n */\nexport type FormFieldContextValue = SharedFormFieldContextProps & {\n  memberFormControlIds: string[];\n  registerFormControlId: (id: string) => () => void;\n  registerMemberFormControlId: (id: string) => () => void;\n  registerFormFieldLabelId: (id: string) => () => void;\n};\n\n/**\n * @internal\n */\nexport const useFormFieldContext = (): FormFieldContextValue => {\n  const context = useContext(\n    _FormFieldContext,\n  ) as Partial<SharedFormFieldContextProps>;\n\n  return {\n    memberFormControlIds: [],\n    registerFormControlId: () => () => undefined,\n    registerMemberFormControlId: () => () => undefined,\n    registerFormFieldLabelId: () => () => undefined,\n    ...context,\n  } as FormFieldContextValue;\n};\n"],
+  "mappings": "AAAA,SAAS,kBAAkB;AAE3B,SAAS,yBAAyB;AAmB3B,MAAM,sBAAsB,MAA6B;AAC9D,QAAM,UAAU;AAAA,IACd;AAAA,EACF;AAEA,SAAO;AAAA,IACL,sBAAsB,CAAC;AAAA,IACvB,uBAAuB,MAAM,MAAM;AAAA,IACnC,6BAA6B,MAAM,MAAM;AAAA,IACzC,0BAA0B,MAAM,MAAM;AAAA,IACtC,GAAG;AAAA,EACL;AACF;",
   "names": []
 }

package/esm/forms/forms-core/hooks/useFormFieldValidation.js

@@ -5,10 +5,16 @@ import {
   useEffect,
   useRef
 } from "react";
-import { FormattedMessage } from "react-intl";
+import {
+  FormattedMessage,
+  defineMessages,
+  useIntl
+} from "react-intl";
 import { useFormFieldMessagesContext } from "./useFormFieldMessagesContext.js";
 import { useId } from "../../../core/hooks/useId.js";
 import { Text } from "../../../typography/text/Text.js";
+import { useCustomMessageEmitter } from "../../validation/useCustomMessageEmitter.js";
+import { getValidationState } from "../../validation/validation-builders.js";
 import { FormFieldMessagesAction } from "../state/formfield-messages-state-reducer.js";
 function getErrorType(validityState) {
   if (!validityState) {
@@ -43,33 +49,64 @@ function getErrorType(validityState) {
   }
   return null;
 }
+const validationMessages = defineMessages({
+  badInput: {
+    id: "/cwiOkubC69MZmRu",
+    defaultMessage: "Please provide input in a valid format.",
+    description: "Error message for input that the browser is unable to convert, e.g. string for a number input."
+  },
+  patternMismatch: {
+    id: "qPeX7AgKbKzBFqGZ",
+    defaultMessage: "Please match the format requested.",
+    description: "Error message for input that doesn't follow the requested pattern."
+  },
+  rangeOverflow: {
+    id: "14mVeqEFpqD2fpev",
+    defaultMessage: "Value must be less or equal to {max}.",
+    description: "Error message for input that value is higher then the max."
+  },
+  rangeUnderflow: {
+    id: "5XoVjJUQ5b86MLW+",
+    defaultMessage: "Value must be higher or equal to {min}.",
+    description: "Error message for input that value is lower then the max."
+  },
+  stepMismatch: {
+    id: "MYfVMxPsAgOn8JSP",
+    defaultMessage: "Value must be a multiple of {step}, starting from {min}.",
+    description: "Only values which are a whole number of steps from the step base are valid. The step base is min if specified, value otherwise, or 0 if neither is provided."
+  },
+  tooLong: {
+    id: "JOIA3jQfIIkgnW04",
+    defaultMessage: "Please shorten this text to {maxLength} characters or less.",
+    description: "Error message for input that is shorter than the maxLength."
+  },
+  tooShort: {
+    id: "sJeuQTGrzcMvd6fY",
+    defaultMessage: "Please lengthen this text to {minLength} characters or more.",
+    description: "Error message for input that is shorter than the minLength."
+  },
+  typeMismatch: {
+    id: "fLfhKO8cXlo3vW5M",
+    defaultMessage: "Please provide a value that matches the requested type ({type}).",
+    description: "Error message for input that doesn't match the expected type."
+  },
+  valueMissing: {
+    id: "laIylhVFbIvEZrxt",
+    defaultMessage: "Please fill in this field.",
+    description: "Error message for missing input."
+  }
+});
 function getI18nErrorMessage(key, ref) {
   switch (key) {
     case "badInput":
-      return /* @__PURE__ */ jsx(
-        FormattedMessage,
-        {
-          id: "/cwiOkubC69MZmRu",
-          defaultMessage: "Please provide input in a valid format.",
-          description: "Error message for input that the browser is unable to convert, e.g. string for a number input."
-        }
-      );
+      return /* @__PURE__ */ jsx(FormattedMessage, { ...validationMessages.badInput });
     case "patternMismatch":
-      return /* @__PURE__ */ jsx(
-        FormattedMessage,
-        {
-          id: "qPeX7AgKbKzBFqGZ",
-          defaultMessage: "Please match the format requested.",
-          description: "Error message for input that doesn't follow the requested pattern."
-        }
-      );
+      return /* @__PURE__ */ jsx(FormattedMessage, { ...validationMessages.patternMismatch });
     case "rangeOverflow":
       return /* @__PURE__ */ jsx(
         FormattedMessage,
         {
-          id: "14mVeqEFpqD2fpev",
-          defaultMessage: "Value must be less or equal to {max}.",
-          description: "Error message for input that value is higher then the max.",
+          ...validationMessages.rangeOverflow,
           values: { max: ref?.getAttribute("max") }
         }
       );
@@ -77,9 +114,7 @@ function getI18nErrorMessage(key, ref) {
       return /* @__PURE__ */ jsx(
         FormattedMessage,
         {
-          id: "5XoVjJUQ5b86MLW+",
-          defaultMessage: "Value must be higher or equal to {min}.",
-          description: "Error message for input that value is lower then the max.",
+          ...validationMessages.rangeUnderflow,
           values: { min: ref?.getAttribute("min") }
         }
       );
@@ -87,9 +122,7 @@ function getI18nErrorMessage(key, ref) {
       return /* @__PURE__ */ jsx(
         FormattedMessage,
         {
-          id: "MYfVMxPsAgOn8JSP",
-          defaultMessage: "Value must be a multiple of {step}, starting from {min}.",
-          description: "Only values which are a whole number of steps from the step base are valid. The step base is min if specified, value otherwise, or 0 if neither is provided.",
+          ...validationMessages.stepMismatch,
           values: {
             step: ref?.getAttribute("step"),
             min: ref?.getAttribute("min") ?? "0"
@@ -100,9 +133,7 @@ function getI18nErrorMessage(key, ref) {
       return /* @__PURE__ */ jsx(
         FormattedMessage,
         {
-          id: "JOIA3jQfIIkgnW04",
-          defaultMessage: "Please shorten this text to {maxLength} characters or less.",
-          description: "Error message for input that is shorter than the maxLength.",
+          ...validationMessages.tooLong,
           values: { maxLength: ref?.getAttribute("maxLength") }
         }
       );
@@ -110,9 +141,7 @@ function getI18nErrorMessage(key, ref) {
       return /* @__PURE__ */ jsx(
         FormattedMessage,
         {
-          id: "sJeuQTGrzcMvd6fY",
-          defaultMessage: "Please lengthen this text to {minLength} characters or more.",
-          description: "Error message for input that is shorter than the minLength.",
+          ...validationMessages.tooShort,
           values: { minLength: ref?.getAttribute("minLength") }
         }
       );
@@ -120,27 +149,63 @@ function getI18nErrorMessage(key, ref) {
       return /* @__PURE__ */ jsx(
         FormattedMessage,
         {
-          id: "fLfhKO8cXlo3vW5M",
-          defaultMessage: "Please provide a value that matches the requested type ({type}).",
-          description: "Error message for input that doesn't match the expected type.",
+          ...validationMessages.typeMismatch,
           values: { type: ref?.getAttribute("type") }
         }
       );
     case "valueMissing":
-      return /* @__PURE__ */ jsx(
-        FormattedMessage,
-        {
-          id: "laIylhVFbIvEZrxt",
-          defaultMessage: "Please fill in this field.",
-          description: "Error message for missing input."
-        }
-      );
+      return /* @__PURE__ */ jsx(FormattedMessage, { ...validationMessages.valueMissing });
     case "customError":
     case "valid":
     default:
       return null;
   }
 }
+function getI18nValidationMessage(intl, key, ref) {
+  switch (key) {
+    case "badInput":
+      return intl.formatMessage(validationMessages.badInput);
+    case "patternMismatch":
+      return intl.formatMessage(validationMessages.patternMismatch);
+    case "rangeOverflow":
+      return intl.formatMessage(validationMessages.rangeOverflow, {
+        max: ref?.getAttribute("max")
+      });
+    case "rangeUnderflow":
+      return intl.formatMessage(validationMessages.rangeUnderflow, {
+        min: ref?.getAttribute("min")
+      });
+    case "stepMismatch":
+      return intl.formatMessage(validationMessages.stepMismatch, {
+        step: ref?.getAttribute("step"),
+        min: ref?.getAttribute("min") ?? "0"
+      });
+    case "tooLong":
+      return intl.formatMessage(validationMessages.tooLong, {
+        maxLength: ref?.getAttribute("maxLength")
+      });
+    case "tooShort":
+      return intl.formatMessage(validationMessages.tooShort, {
+        minLength: ref?.getAttribute("minLength")
+      });
+    case "typeMismatch":
+      return intl.formatMessage(validationMessages.typeMismatch, {
+        type: ref?.getAttribute("type")
+      });
+    case "valueMissing":
+      return intl.formatMessage(validationMessages.valueMissing);
+    default:
+      return "";
+  }
+}
+function getI18nValidationState(intl, element, trigger) {
+  const errorType = getErrorType(element?.validity);
+  return getValidationState(
+    element,
+    trigger,
+    errorType ? getI18nValidationMessage(intl, errorType, element) : void 0
+  );
+}
 function useFormFieldValidationAriaProps(ariaLabelingProps = {}) {
   const { state } = useFormFieldMessagesContext();
   const _ariaProps = useMemo(() => {
@@ -160,8 +225,9 @@ function useFormFieldValidationAriaProps(ariaLabelingProps = {}) {
   const ariaProps = getCombinedAriaProps(_ariaProps, ariaLabelingProps);
   return ariaProps;
 }
-function useFormFieldValidation(ref, validationDeps = {}, ariaLabelingProps = {}, controlId) {
+function useFormFieldValidation(ref, validationDeps = {}, ariaLabelingProps = {}, controlId, emitValidationStateProp) {
   const { state, dispatch } = useFormFieldMessagesContext();
+  const intl = useIntl();
   const errorId = useId();
   const ariaProps = useFormFieldValidationAriaProps(ariaLabelingProps);
   const formControlMessagesRef = useRef(state.formControlMessages);
@@ -205,21 +271,32 @@ function useFormFieldValidation(ref, validationDeps = {}, ariaLabelingProps = {}
     },
     [dispatch, updateErrorMessages]
   );
+  const emitValidationState = useCustomMessageEmitter(
+    emitValidationStateProp,
+    () => getI18nValidationState(intl, ref.current, "manual")
+  );
   const onBlur = useCallback(() => {
     ref.current?.reportValidity();
     dispatch?.({
       type: FormFieldMessagesAction.SETISTOUCHED,
       payload: { isTouched: true }
     });
-  }, [dispatch, ref]);
+    if (!state.isTouched) {
+      emitValidationState(getI18nValidationState(intl, ref.current, "blur"));
+    }
+  }, [dispatch, emitValidationState, intl, ref, state.isTouched]);
+  const onChange = useCallback(() => {
+    updateErrorMessages();
+    emitValidationState(getI18nValidationState(intl, ref.current, "change"));
+  }, [updateErrorMessages, emitValidationState, intl, ref]);
   const validationDepsKey = JSON.stringify(validationDeps);
   useEffect(() => {
-    updateErrorMessages();
-  }, [validationDepsKey, updateErrorMessages]);
+    onChange();
+  }, [validationDepsKey, onChange]);
   return {
     ariaProps,
     onInvalid,
-    onChange: updateErrorMessages,
+    onChange,
     onBlur
   };
 }
@@ -246,6 +323,8 @@ export {
   getCombinedAriaProps,
   getErrorType,
   getI18nErrorMessage,
+  getI18nValidationMessage,
+  getI18nValidationState,
   useFormFieldValidation,
   useFormFieldValidationAriaProps
 };

package/esm/forms/forms-core/hooks/useFormFieldValidation.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/forms/forms-core/hooks/useFormFieldValidation.tsx"],
-  "sourcesContent": ["import {\n  AriaAttributes,\n  type RefObject,\n  type FormEvent as ReactFormEvent,\n  type ChangeEvent,\n  type FocusEvent,\n  useCallback,\n  useMemo,\n  useEffect,\n  useRef,\n} from 'react';\nimport { FormattedMessage } from 'react-intl';\n\nimport { useFormFieldMessagesContext } from './useFormFieldMessagesContext.js';\nimport { useId } from '../../../core/hooks/useId.js';\nimport { AriaLabelingProps } from '../../../core/types/a11y-props.js';\nimport { Text } from '../../../typography/text/Text.js';\nimport { FormFieldMessagesAction } from '../state/formfield-messages-state-reducer.js';\n\n/**\n * Getter function to read the error type form the validity state.\n * The validity state values are readonly and can't therefore not be iterated but need to accessed directly instead.\n * https://stackoverflow.com/questions/20891950/html-validation-api-returns-an-empty-object-in-firefox?rq=2\n * @internal\n */\nexport function getErrorType(validityState?: ValidityState) {\n  if (!validityState) {\n    return null;\n  }\n\n  if (validityState.badInput) {\n    return 'badInput';\n  }\n  if (validityState.patternMismatch) {\n    return 'patternMismatch';\n  }\n  if (validityState.rangeOverflow) {\n    return 'rangeOverflow';\n  }\n  if (validityState.rangeUnderflow) {\n    return 'rangeUnderflow';\n  }\n  if (validityState.stepMismatch) {\n    return 'stepMismatch';\n  }\n  if (validityState.tooLong) {\n    return 'tooLong';\n  }\n  if (validityState.tooShort) {\n    return 'tooShort';\n  }\n  if (validityState.typeMismatch) {\n    return 'typeMismatch';\n  }\n  if (validityState.valueMissing) {\n    return 'valueMissing';\n  }\n  /** We don't check for custom error since those should never be automatically updated. */\n  return null;\n}\n\n/**\n * Internal getter function to return the matching formatted message for\n * each validityStateKey.\n * @internal\n */\nexport function getI18nErrorMessage(\n  key: keyof ValidityState,\n  ref?: HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement | null,\n) {\n  switch (key) {\n    case 'badInput':\n      return (\n        <FormattedMessage\n          id=\"/cwiOkubC69MZmRu\"\n          defaultMessage=\"Please provide input in a valid format.\"\n          description=\"Error message for input that the browser is unable to convert, e.g. string for a number input.\"\n        />\n      );\n    case 'patternMismatch':\n      return (\n        <FormattedMessage\n          id=\"qPeX7AgKbKzBFqGZ\"\n          defaultMessage=\"Please match the format requested.\"\n          description=\"Error message for input that doesn't follow the requested pattern.\"\n        />\n      );\n    case 'rangeOverflow':\n      return (\n        <FormattedMessage\n          id=\"14mVeqEFpqD2fpev\"\n          defaultMessage=\"Value must be less or equal to {max}.\"\n          description=\"Error message for input that value is higher then the max.\"\n          values={{ max: ref?.getAttribute('max') }}\n        />\n      );\n    case 'rangeUnderflow':\n      return (\n        <FormattedMessage\n          id=\"5XoVjJUQ5b86MLW+\"\n          defaultMessage=\"Value must be higher or equal to {min}.\"\n          description=\"Error message for input that value is lower then the max.\"\n          values={{ min: ref?.getAttribute('min') }}\n        />\n      );\n    case 'stepMismatch':\n      return (\n        <FormattedMessage\n          id=\"MYfVMxPsAgOn8JSP\"\n          defaultMessage=\"Value must be a multiple of {step}, starting from {min}.\"\n          description=\"Only values which are a whole number of steps from the step base are valid. The step base is min if specified, value otherwise, or 0 if neither is provided.\"\n          values={{\n            step: ref?.getAttribute('step'),\n            min: ref?.getAttribute('min') ?? '0',\n          }}\n        />\n      );\n    case 'tooLong':\n      return (\n        <FormattedMessage\n          id=\"JOIA3jQfIIkgnW04\"\n          defaultMessage=\"Please shorten this text to {maxLength} characters or less.\"\n          description=\"Error message for input that is shorter than the maxLength.\"\n          values={{ maxLength: ref?.getAttribute('maxLength') }}\n        />\n      );\n    case 'tooShort':\n      return (\n        <FormattedMessage\n          id=\"sJeuQTGrzcMvd6fY\"\n          defaultMessage=\"Please lengthen this text to {minLength} characters or more.\"\n          description=\"Error message for input that is shorter than the minLength.\"\n          values={{ minLength: ref?.getAttribute('minLength') }}\n        />\n      );\n    case 'typeMismatch':\n      return (\n        <FormattedMessage\n          id=\"fLfhKO8cXlo3vW5M\"\n          defaultMessage=\"Please provide a value that matches the requested type ({type}).\"\n          description=\"Error message for input that doesn't match the expected type.\"\n          values={{ type: ref?.getAttribute('type') }}\n        />\n      );\n    case 'valueMissing':\n      return (\n        <FormattedMessage\n          id=\"laIylhVFbIvEZrxt\"\n          defaultMessage=\"Please fill in this field.\"\n          description=\"Error message for missing input.\"\n        />\n      );\n\n    case 'customError':\n    case 'valid':\n    default:\n      /** Shouldn't be reached */\n      return null;\n  }\n}\n\n/** @internal */\ninterface FormFieldValidationProps {\n  ariaProps: Pick<\n    AriaAttributes,\n    'aria-errormessage' | 'aria-invalid' | 'aria-describedby'\n  >;\n  onInvalid: (\n    event: ReactFormEvent<\n      HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement\n    >,\n  ) => void;\n  onChange: (\n    event?: ChangeEvent<\n      HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement\n    >,\n  ) => void;\n  onBlur: (\n    event?: FocusEvent<\n      HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement\n    >,\n  ) => void;\n}\n\n/**\n * Hook to generate ARIA props based on the form field messages\n * @param ariaLabelingProps - ARIA labeling properties\n * @returns ARIA props for the form field\n * @internal\n */\nexport function useFormFieldValidationAriaProps(\n  ariaLabelingProps: AriaLabelingProps = {},\n) {\n  const { state } = useFormFieldMessagesContext();\n\n  const _ariaProps = useMemo(() => {\n    let messageIdsString;\n    let errorMessageIdsString;\n\n    if (\n      state.customMessages.length > 0 ||\n      state.formControlMessages.length > 0\n    ) {\n      const messages = [...state.customMessages, ...state.formControlMessages];\n      errorMessageIdsString = messages\n        .filter((msg) => msg.variant === 'error')\n        .map((msg) => msg.id)\n        .join(' ');\n\n      messageIdsString = messages.map((msg) => msg.id).join(' ');\n    }\n\n    return {\n      'aria-errormessage': state.showError ? errorMessageIdsString : undefined,\n      'aria-invalid': state.showError,\n      'aria-describedby': messageIdsString,\n    };\n  }, [state.customMessages, state.formControlMessages, state.showError]);\n  const ariaProps = getCombinedAriaProps(_ariaProps, ariaLabelingProps);\n\n  return ariaProps;\n}\n\n/**\n * @param ref - Reference to the input element\n * @param validationDeps - Values that trigger re-validation when changed (e.g., [required, min, max, pattern]).\n * @param ariaLabelingProps - ARIA labeling properties\n * @param controlId - Optional control ID for message management\n * @internal\n */\nexport function useFormFieldValidation(\n  ref: RefObject<\n    HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement | null\n  >,\n  validationDeps: Record<string, string | number | boolean | undefined> = {},\n  ariaLabelingProps: AriaLabelingProps = {},\n  controlId?: string,\n): FormFieldValidationProps {\n  const { state, dispatch } = useFormFieldMessagesContext();\n  const errorId = useId();\n\n  const ariaProps = useFormFieldValidationAriaProps(ariaLabelingProps);\n\n  // Keep a ref to the current formControlMessages so `updateErrorMessages`\n  // can read the latest list without listing it as a reactive dependency.\n  // If it were a dependency, any dispatch (add/remove message) would recreate\n  // the callback, re-trigger the useEffect below, which would dispatch again \u2014\n  // causing an infinite loop.\n  const formControlMessagesRef = useRef(state.formControlMessages);\n  formControlMessagesRef.current = state.formControlMessages;\n\n  const updateErrorMessages = useCallback(() => {\n    const errorType = getErrorType(ref.current?.validity);\n\n    formControlMessagesRef.current.forEach((message) => {\n      if (\n        message.validityStateKey !== errorType &&\n        message.validityStateKey !== 'customError'\n      ) {\n        dispatch?.({\n          type: FormFieldMessagesAction.REMOVEMESSAGE,\n          payload: {\n            id: message.id,\n            messageType: 'formcontrol',\n            controlId,\n          },\n        });\n      }\n    });\n\n    if (errorType) {\n      dispatch?.({\n        type: FormFieldMessagesAction.ADDMESSAGE,\n        payload: {\n          id: errorId,\n          message: (\n            <Text textStyle=\"small\" as=\"p\">\n              {getI18nErrorMessage(errorType, ref.current)}\n            </Text>\n          ),\n          validityStateKey: errorType,\n          messageType: 'formcontrol',\n          variant: 'error',\n          controlId,\n        },\n      });\n    }\n  }, [controlId, dispatch, errorId, ref]); // formControlMessages intentionally excluded \u2014 read via ref above\n\n  const onInvalid = useCallback(\n    (\n      event: ReactFormEvent<\n        HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement\n      >,\n    ) => {\n      updateErrorMessages();\n\n      dispatch?.({\n        type: FormFieldMessagesAction.SETISTOUCHED,\n        payload: { isTouched: true },\n      });\n\n      // Prevents the browser validation pop up.\n      event.preventDefault();\n    },\n    [dispatch, updateErrorMessages],\n  );\n\n  const onBlur = useCallback(() => {\n    ref.current?.reportValidity();\n    dispatch?.({\n      type: FormFieldMessagesAction.SETISTOUCHED,\n      payload: { isTouched: true },\n    });\n  }, [dispatch, ref]);\n\n  const validationDepsKey = JSON.stringify(validationDeps);\n\n  useEffect(() => {\n    updateErrorMessages();\n  }, [validationDepsKey, updateErrorMessages]);\n\n  return {\n    ariaProps,\n    onInvalid,\n    onChange: updateErrorMessages,\n    onBlur,\n  };\n}\n\n/* @internal - function to combine aria-labelling and validation aria-props correctly. */\nexport function getCombinedAriaProps(\n  validationAriaProps: Pick<\n    AriaAttributes,\n    'aria-errormessage' | 'aria-invalid' | 'aria-describedby'\n  >,\n  labelingProps: AriaLabelingProps,\n) {\n  const {\n    'aria-describedby': validationDescription,\n    ...remainingValidationProps\n  } = validationAriaProps;\n  const { 'aria-describedby': propDescription, ...remainingLabelingProps } =\n    labelingProps;\n\n  if (validationDescription && propDescription) {\n    return {\n      ...remainingLabelingProps,\n      ...remainingValidationProps,\n      'aria-describedby': (\n        validationDescription +\n        ' ' +\n        propDescription\n      ).trim(),\n    };\n  }\n\n  return {\n    ...remainingLabelingProps,\n    ...remainingValidationProps,\n    'aria-describedby': validationDescription ?? propDescription,\n  };\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["import {\n  AriaAttributes,\n  type RefObject,\n  type FormEvent as ReactFormEvent,\n  type ChangeEvent,\n  type FocusEvent,\n  useCallback,\n  useMemo,\n  useEffect,\n  useRef,\n} from 'react';\nimport {\n  FormattedMessage,\n  defineMessages,\n  useIntl,\n  type IntlShape,\n} from 'react-intl';\n\nimport { useFormFieldMessagesContext } from './useFormFieldMessagesContext.js';\nimport { useId } from '../../../core/hooks/useId.js';\nimport { AriaLabelingProps } from '../../../core/types/a11y-props.js';\nimport { Text } from '../../../typography/text/Text.js';\nimport type {\n  ValidationState,\n  ValidationTrigger,\n} from '../../validation/types.js';\nimport { useCustomMessageEmitter } from '../../validation/useCustomMessageEmitter.js';\nimport { getValidationState } from '../../validation/validation-builders.js';\nimport { FormFieldMessagesAction } from '../state/formfield-messages-state-reducer.js';\n\ntype FormFieldElement =\n  | HTMLInputElement\n  | HTMLSelectElement\n  | HTMLTextAreaElement;\n\n/**\n * Getter function to read the error type form the validity state.\n * The validity state values are readonly and can't therefore not be iterated but need to accessed directly instead.\n * https://stackoverflow.com/questions/20891950/html-validation-api-returns-an-empty-object-in-firefox?rq=2\n * @internal\n */\nexport function getErrorType(validityState?: ValidityState) {\n  if (!validityState) {\n    return null;\n  }\n\n  if (validityState.badInput) {\n    return 'badInput';\n  }\n  if (validityState.patternMismatch) {\n    return 'patternMismatch';\n  }\n  if (validityState.rangeOverflow) {\n    return 'rangeOverflow';\n  }\n  if (validityState.rangeUnderflow) {\n    return 'rangeUnderflow';\n  }\n  if (validityState.stepMismatch) {\n    return 'stepMismatch';\n  }\n  if (validityState.tooLong) {\n    return 'tooLong';\n  }\n  if (validityState.tooShort) {\n    return 'tooShort';\n  }\n  if (validityState.typeMismatch) {\n    return 'typeMismatch';\n  }\n  if (validityState.valueMissing) {\n    return 'valueMissing';\n  }\n  /** We don't check for custom error since those should never be automatically updated. */\n  return null;\n}\n\nconst validationMessages = defineMessages({\n  badInput: {\n    id: '/cwiOkubC69MZmRu',\n    defaultMessage: 'Please provide input in a valid format.',\n    description:\n      'Error message for input that the browser is unable to convert, e.g. string for a number input.',\n  },\n  patternMismatch: {\n    id: 'qPeX7AgKbKzBFqGZ',\n    defaultMessage: 'Please match the format requested.',\n    description:\n      \"Error message for input that doesn't follow the requested pattern.\",\n  },\n  rangeOverflow: {\n    id: '14mVeqEFpqD2fpev',\n    defaultMessage: 'Value must be less or equal to {max}.',\n    description: 'Error message for input that value is higher then the max.',\n  },\n  rangeUnderflow: {\n    id: '5XoVjJUQ5b86MLW+',\n    defaultMessage: 'Value must be higher or equal to {min}.',\n    description: 'Error message for input that value is lower then the max.',\n  },\n  stepMismatch: {\n    id: 'MYfVMxPsAgOn8JSP',\n    defaultMessage: 'Value must be a multiple of {step}, starting from {min}.',\n    description:\n      'Only values which are a whole number of steps from the step base are valid. The step base is min if specified, value otherwise, or 0 if neither is provided.',\n  },\n  tooLong: {\n    id: 'JOIA3jQfIIkgnW04',\n    defaultMessage:\n      'Please shorten this text to {maxLength} characters or less.',\n    description: 'Error message for input that is shorter than the maxLength.',\n  },\n  tooShort: {\n    id: 'sJeuQTGrzcMvd6fY',\n    defaultMessage:\n      'Please lengthen this text to {minLength} characters or more.',\n    description: 'Error message for input that is shorter than the minLength.',\n  },\n  typeMismatch: {\n    id: 'fLfhKO8cXlo3vW5M',\n    defaultMessage:\n      'Please provide a value that matches the requested type ({type}).',\n    description:\n      \"Error message for input that doesn't match the expected type.\",\n  },\n  valueMissing: {\n    id: 'laIylhVFbIvEZrxt',\n    defaultMessage: 'Please fill in this field.',\n    description: 'Error message for missing input.',\n  },\n});\n\n/**\n * Internal getter function to return the matching formatted message for\n * each validityStateKey.\n * @internal\n */\nexport function getI18nErrorMessage(\n  key: keyof ValidityState,\n  ref?: FormFieldElement | null,\n) {\n  switch (key) {\n    case 'badInput':\n      return <FormattedMessage {...validationMessages.badInput} />;\n    case 'patternMismatch':\n      return <FormattedMessage {...validationMessages.patternMismatch} />;\n    case 'rangeOverflow':\n      return (\n        <FormattedMessage\n          {...validationMessages.rangeOverflow}\n          values={{ max: ref?.getAttribute('max') }}\n        />\n      );\n    case 'rangeUnderflow':\n      return (\n        <FormattedMessage\n          {...validationMessages.rangeUnderflow}\n          values={{ min: ref?.getAttribute('min') }}\n        />\n      );\n    case 'stepMismatch':\n      return (\n        <FormattedMessage\n          {...validationMessages.stepMismatch}\n          values={{\n            step: ref?.getAttribute('step'),\n            min: ref?.getAttribute('min') ?? '0',\n          }}\n        />\n      );\n    case 'tooLong':\n      return (\n        <FormattedMessage\n          {...validationMessages.tooLong}\n          values={{ maxLength: ref?.getAttribute('maxLength') }}\n        />\n      );\n    case 'tooShort':\n      return (\n        <FormattedMessage\n          {...validationMessages.tooShort}\n          values={{ minLength: ref?.getAttribute('minLength') }}\n        />\n      );\n    case 'typeMismatch':\n      return (\n        <FormattedMessage\n          {...validationMessages.typeMismatch}\n          values={{ type: ref?.getAttribute('type') }}\n        />\n      );\n    case 'valueMissing':\n      return <FormattedMessage {...validationMessages.valueMissing} />;\n    case 'customError':\n    case 'valid':\n    default:\n      return null;\n  }\n}\n\n/**\n * Returns the translated plain-string validation message for a given validity\n * state key. Mirrors the JSX messages in {@link getI18nErrorMessage} using the\n * same descriptors so both the UI and `ValidationError.message` stay in sync.\n *\n * @internal\n */\nexport function getI18nValidationMessage(\n  intl: IntlShape,\n  key: keyof ValidityState,\n  ref?: FormFieldElement | null,\n): string {\n  switch (key) {\n    case 'badInput':\n      return intl.formatMessage(validationMessages.badInput);\n    case 'patternMismatch':\n      return intl.formatMessage(validationMessages.patternMismatch);\n    case 'rangeOverflow':\n      return intl.formatMessage(validationMessages.rangeOverflow, {\n        max: ref?.getAttribute('max'),\n      });\n    case 'rangeUnderflow':\n      return intl.formatMessage(validationMessages.rangeUnderflow, {\n        min: ref?.getAttribute('min'),\n      });\n    case 'stepMismatch':\n      return intl.formatMessage(validationMessages.stepMismatch, {\n        step: ref?.getAttribute('step'),\n        min: ref?.getAttribute('min') ?? '0',\n      });\n    case 'tooLong':\n      return intl.formatMessage(validationMessages.tooLong, {\n        maxLength: ref?.getAttribute('maxLength'),\n      });\n    case 'tooShort':\n      return intl.formatMessage(validationMessages.tooShort, {\n        minLength: ref?.getAttribute('minLength'),\n      });\n    case 'typeMismatch':\n      return intl.formatMessage(validationMessages.typeMismatch, {\n        type: ref?.getAttribute('type'),\n      });\n    case 'valueMissing':\n      return intl.formatMessage(validationMessages.valueMissing);\n    default:\n      return '';\n  }\n}\n\n/**\n * Builds a ValidationState with an i18n message for the current validity of\n * `element`, bypassing the corrupted `element.validationMessage` that\n * `setCustomValidity` produces.\n * @internal\n */\nexport function getI18nValidationState(\n  intl: IntlShape,\n  element: FormFieldElement | null | undefined,\n  trigger: ValidationTrigger,\n): ValidationState {\n  const errorType = getErrorType(element?.validity);\n  return getValidationState(\n    element,\n    trigger,\n    errorType ? getI18nValidationMessage(intl, errorType, element) : undefined,\n  );\n}\n\n/** @internal */\ninterface FormFieldValidationProps {\n  ariaProps: Pick<\n    AriaAttributes,\n    'aria-errormessage' | 'aria-invalid' | 'aria-describedby'\n  >;\n  onInvalid: (event: ReactFormEvent<FormFieldElement>) => void;\n  onChange: (event?: ChangeEvent<FormFieldElement>) => void;\n  onBlur: (event?: FocusEvent<FormFieldElement>) => void;\n}\n\n/**\n * Hook to generate ARIA props based on the form field messages\n * @param ariaLabelingProps - ARIA labeling properties\n * @returns ARIA props for the form field\n * @internal\n */\nexport function useFormFieldValidationAriaProps(\n  ariaLabelingProps: AriaLabelingProps = {},\n) {\n  const { state } = useFormFieldMessagesContext();\n\n  const _ariaProps = useMemo(() => {\n    let messageIdsString;\n    let errorMessageIdsString;\n\n    if (\n      state.customMessages.length > 0 ||\n      state.formControlMessages.length > 0\n    ) {\n      const messages = [...state.customMessages, ...state.formControlMessages];\n      errorMessageIdsString = messages\n        .filter((msg) => msg.variant === 'error')\n        .map((msg) => msg.id)\n        .join(' ');\n\n      messageIdsString = messages.map((msg) => msg.id).join(' ');\n    }\n\n    return {\n      'aria-errormessage': state.showError ? errorMessageIdsString : undefined,\n      'aria-invalid': state.showError,\n      'aria-describedby': messageIdsString,\n    };\n  }, [state.customMessages, state.formControlMessages, state.showError]);\n  const ariaProps = getCombinedAriaProps(_ariaProps, ariaLabelingProps);\n\n  return ariaProps;\n}\n\n/**\n * @param ref - Reference to the input element\n * @param validationDeps - Values that trigger re-validation when changed (e.g., [required, min, max, pattern]).\n * @param ariaLabelingProps - ARIA labeling properties\n * @param controlId - Optional control ID for message management\n * @internal\n */\nexport function useFormFieldValidation(\n  ref: RefObject<FormFieldElement | null>,\n  validationDeps: Record<string, string | number | boolean | undefined> = {},\n  ariaLabelingProps: AriaLabelingProps = {},\n  controlId?: string,\n  emitValidationStateProp?: (state: ValidationState) => void,\n): FormFieldValidationProps {\n  const { state, dispatch } = useFormFieldMessagesContext();\n  const intl = useIntl();\n  const errorId = useId();\n\n  const ariaProps = useFormFieldValidationAriaProps(ariaLabelingProps);\n\n  // Keep a ref to the current formControlMessages so `updateErrorMessages`\n  // can read the latest list without listing it as a reactive dependency.\n  // If it were a dependency, any dispatch (add/remove message) would recreate\n  // the callback, re-trigger the useEffect below, which would dispatch again \u2014\n  // causing an infinite loop.\n  const formControlMessagesRef = useRef(state.formControlMessages);\n  formControlMessagesRef.current = state.formControlMessages;\n\n  const updateErrorMessages = useCallback(() => {\n    const errorType = getErrorType(ref.current?.validity);\n\n    formControlMessagesRef.current.forEach((message) => {\n      if (\n        message.validityStateKey !== errorType &&\n        message.validityStateKey !== 'customError'\n      ) {\n        dispatch?.({\n          type: FormFieldMessagesAction.REMOVEMESSAGE,\n          payload: {\n            id: message.id,\n            messageType: 'formcontrol',\n            controlId,\n          },\n        });\n      }\n    });\n\n    if (errorType) {\n      dispatch?.({\n        type: FormFieldMessagesAction.ADDMESSAGE,\n        payload: {\n          id: errorId,\n          message: (\n            <Text textStyle=\"small\" as=\"p\">\n              {getI18nErrorMessage(errorType, ref.current)}\n            </Text>\n          ),\n          validityStateKey: errorType,\n          messageType: 'formcontrol',\n          variant: 'error',\n          controlId,\n        },\n      });\n    }\n  }, [controlId, dispatch, errorId, ref]); // formControlMessages intentionally excluded \u2014 read via ref above\n\n  const onInvalid = useCallback(\n    (event: ReactFormEvent<FormFieldElement>) => {\n      updateErrorMessages();\n\n      dispatch?.({\n        type: FormFieldMessagesAction.SETISTOUCHED,\n        payload: { isTouched: true },\n      });\n\n      // Prevents the browser validation pop up.\n      event.preventDefault();\n    },\n    [dispatch, updateErrorMessages],\n  );\n\n  const emitValidationState = useCustomMessageEmitter(\n    emitValidationStateProp,\n    () => getI18nValidationState(intl, ref.current, 'manual'),\n  );\n\n  const onBlur = useCallback(() => {\n    ref.current?.reportValidity();\n    dispatch?.({\n      type: FormFieldMessagesAction.SETISTOUCHED,\n      payload: { isTouched: true },\n    });\n    if (!state.isTouched) {\n      emitValidationState(getI18nValidationState(intl, ref.current, 'blur'));\n    }\n  }, [dispatch, emitValidationState, intl, ref, state.isTouched]);\n\n  const onChange = useCallback(() => {\n    updateErrorMessages();\n    emitValidationState(getI18nValidationState(intl, ref.current, 'change'));\n  }, [updateErrorMessages, emitValidationState, intl, ref]);\n\n  const validationDepsKey = JSON.stringify(validationDeps);\n\n  useEffect(() => {\n    onChange();\n  }, [validationDepsKey, onChange]);\n\n  return {\n    ariaProps,\n    onInvalid,\n    onChange,\n    onBlur,\n  };\n}\n\n/* @internal - function to combine aria-labelling and validation aria-props correctly. */\nexport function getCombinedAriaProps(\n  validationAriaProps: Pick<\n    AriaAttributes,\n    'aria-errormessage' | 'aria-invalid' | 'aria-describedby'\n  >,\n  labelingProps: AriaLabelingProps,\n) {\n  const {\n    'aria-describedby': validationDescription,\n    ...remainingValidationProps\n  } = validationAriaProps;\n  const { 'aria-describedby': propDescription, ...remainingLabelingProps } =\n    labelingProps;\n\n  if (validationDescription && propDescription) {\n    return {\n      ...remainingLabelingProps,\n      ...remainingValidationProps,\n      'aria-describedby': (\n        validationDescription +\n        ' ' +\n        propDescription\n      ).trim(),\n    };\n  }\n\n  return {\n    ...remainingLabelingProps,\n    ...remainingValidationProps,\n    'aria-describedby': validationDescription ?? propDescription,\n  };\n}\n"],
+  "mappings": "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",
   "names": []
 }