@dynatrace/strato-components 3.7.1 → 3.8.0

package/esm/forms/forms-core/components/form-field-messages/FormFieldMessageItem.sty.js

@@ -1,7 +1,7 @@
 import "./FormFieldMessageItem.css";
 import { createRuntimeFn as _7a468 } from "@vanilla-extract/recipes/createRuntimeFn";
-var formFieldMessageItem = _7a468({ defaultClassName: "_16z6rg10-3-7-1", variantClassNames: { variant: { hint: "_16z6rg11-3-7-1", error: "_16z6rg12-3-7-1" }, disabled: { true: "_16z6rg13-3-7-1" } }, defaultVariants: { variant: "hint", disabled: false }, compoundVariants: [] });
-var formFieldMessageItemText = "_16z6rg14-3-7-1";
+var formFieldMessageItem = _7a468({ defaultClassName: "_16z6rg10-3-8-0", variantClassNames: { variant: { hint: "_16z6rg11-3-8-0", error: "_16z6rg12-3-8-0" }, disabled: { true: "_16z6rg13-3-8-0" } }, defaultVariants: { variant: "hint", disabled: false }, compoundVariants: [] });
+var formFieldMessageItemText = "_16z6rg14-3-8-0";
 export {
   formFieldMessageItem,
   formFieldMessageItemText

package/esm/forms/forms-core/components/form-field-messages/FormFieldMessageItem.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/forms/forms-core/components/form-field-messages/FormFieldMessageItem.css.ts"],
-  "sourcesContent": ["import './FormFieldMessageItem.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var formFieldMessageItem = _7a468({defaultClassName:'_16z6rg10-3-7-1',variantClassNames:{variant:{hint:'_16z6rg11-3-7-1',error:'_16z6rg12-3-7-1'},disabled:{true:'_16z6rg13-3-7-1'}},defaultVariants:{variant:'hint',disabled:false},compoundVariants:[]});\nexport var formFieldMessageItemText = '_16z6rg14-3-7-1';"],
+  "sourcesContent": ["import './FormFieldMessageItem.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var formFieldMessageItem = _7a468({defaultClassName:'_16z6rg10-3-8-0',variantClassNames:{variant:{hint:'_16z6rg11-3-8-0',error:'_16z6rg12-3-8-0'},disabled:{true:'_16z6rg13-3-8-0'}},defaultVariants:{variant:'hint',disabled:false},compoundVariants:[]});\nexport var formFieldMessageItemText = '_16z6rg14-3-8-0';"],
   "mappings": "AAAA,OAAO;AACP,SAAS,mBAAmB,cAAc;AACnC,IAAI,uBAAuB,OAAO,EAAC,kBAAiB,mBAAkB,mBAAkB,EAAC,SAAQ,EAAC,MAAK,mBAAkB,OAAM,kBAAiB,GAAE,UAAS,EAAC,MAAK,kBAAiB,EAAC,GAAE,iBAAgB,EAAC,SAAQ,QAAO,UAAS,MAAK,GAAE,kBAAiB,CAAC,EAAC,CAAC;AACzP,IAAI,2BAA2B;",
   "names": []
 }

package/esm/forms/forms-core/components/form-field-messages/FormFieldMessages.sty.js

@@ -1,5 +1,5 @@
 import "./FormFieldMessages.css";
-var formFieldMessages = "_1l9bja60-3-7-1";
+var formFieldMessages = "_1l9bja60-3-8-0";
 export {
   formFieldMessages
 };

package/esm/forms/forms-core/components/form-field-messages/FormFieldMessages.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/forms/forms-core/components/form-field-messages/FormFieldMessages.css.ts"],
-  "sourcesContent": ["import './FormFieldMessages.css';\nexport var formFieldMessages = '_1l9bja60-3-7-1';"],
+  "sourcesContent": ["import './FormFieldMessages.css';\nexport var formFieldMessages = '_1l9bja60-3-8-0';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,oBAAoB;",
   "names": []
 }

package/esm/forms/forms-core/components/label/Label.css

@@ -1,15 +1,15 @@
-._1gxatyo0-3-7-1 {
+._1gxatyo0-3-8-0 {
   display: inline-block;
 }
-._1gxatyo1-3-7-1 {
+._1gxatyo1-3-8-0 {
   color: var(--dt-colors-text-neutral-disabled, #595a7d80);
 }
-._1gxatyo2-3-7-1:after {
+._1gxatyo2-3-8-0:after {
   content: "*" / "";
 }
-._1gxatyo3-3-7-1 {
+._1gxatyo3-3-8-0 {
   color: var(--dt-colors-text-neutral-subdued, #595a7d);
 }
-._1gxatyo4-3-7-1 {
+._1gxatyo4-3-8-0 {
   margin-left: var(--dt-spacings-size-4, 4px);
 }

package/esm/forms/forms-core/components/label/Label.sty.js

@@ -1,7 +1,7 @@
 import "./Label.css";
 import { createRuntimeFn as _7a468 } from "@vanilla-extract/recipes/createRuntimeFn";
-var label = _7a468({ defaultClassName: "_1gxatyo0-3-7-1", variantClassNames: { disabled: { true: "_1gxatyo1-3-7-1" }, required: { true: "_1gxatyo2-3-7-1" }, readOnly: { true: "_1gxatyo3-3-7-1" } }, defaultVariants: {}, compoundVariants: [] });
-var readOnlyLabel = "_1gxatyo4-3-7-1";
+var label = _7a468({ defaultClassName: "_1gxatyo0-3-8-0", variantClassNames: { disabled: { true: "_1gxatyo1-3-8-0" }, required: { true: "_1gxatyo2-3-8-0" }, readOnly: { true: "_1gxatyo3-3-8-0" } }, defaultVariants: {}, compoundVariants: [] });
+var readOnlyLabel = "_1gxatyo4-3-8-0";
 export {
   label,
   readOnlyLabel

package/esm/forms/forms-core/components/label/Label.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/forms/forms-core/components/label/Label.css.ts"],
-  "sourcesContent": ["import './Label.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var label = _7a468({defaultClassName:'_1gxatyo0-3-7-1',variantClassNames:{disabled:{true:'_1gxatyo1-3-7-1'},required:{true:'_1gxatyo2-3-7-1'},readOnly:{true:'_1gxatyo3-3-7-1'}},defaultVariants:{},compoundVariants:[]});\nexport var readOnlyLabel = '_1gxatyo4-3-7-1';"],
+  "sourcesContent": ["import './Label.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var label = _7a468({defaultClassName:'_1gxatyo0-3-8-0',variantClassNames:{disabled:{true:'_1gxatyo1-3-8-0'},required:{true:'_1gxatyo2-3-8-0'},readOnly:{true:'_1gxatyo3-3-8-0'}},defaultVariants:{},compoundVariants:[]});\nexport var readOnlyLabel = '_1gxatyo4-3-8-0';"],
   "mappings": "AAAA,OAAO;AACP,SAAS,mBAAmB,cAAc;AACnC,IAAI,QAAQ,OAAO,EAAC,kBAAiB,mBAAkB,mBAAkB,EAAC,UAAS,EAAC,MAAK,kBAAiB,GAAE,UAAS,EAAC,MAAK,kBAAiB,GAAE,UAAS,EAAC,MAAK,kBAAiB,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,EAAC,CAAC;AACxN,IAAI,gBAAgB;",
   "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": []
 }

package/esm/forms/forms-core/state/formfield-messages-state-reducer.js

@@ -91,6 +91,12 @@ function formFieldMessagesReducer(state, action) {
       (message) => message.id === remainingPayload.id
     )) {
       newState.customMessages.push(remainingPayload);
+      if (payload.messageText !== void 0) {
+        newState.customMessageTexts = {
+          ...newState.customMessageTexts ?? {},
+          [remainingPayload.id]: payload.messageText
+        };
+      }
     }
     if (remainingPayload.variant === "error") {
       newState.showError = payload.showError ?? state.showError;
@@ -116,6 +122,10 @@ function formFieldMessagesReducer(state, action) {
         }
         return message.id !== payload.id;
       });
+      if (newState.customMessageTexts?.[payload.id] !== void 0) {
+        const { [payload.id]: _, ...remaining } = newState.customMessageTexts;
+        newState.customMessageTexts = remaining;
+      }
     }
     if (!didUpdate) {
       return state;

package/esm/forms/forms-core/state/formfield-messages-state-reducer.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/forms/forms-core/state/formfield-messages-state-reducer.ts"],
-  "sourcesContent": ["import type {\n  FormFieldControlMessage,\n  FormFieldCustomMessage,\n  FormFieldMessage,\n  FormFieldMessageContextState,\n} from '../types/formfield-messages.types.js';\n\nexport const enum FormFieldMessagesAction {\n  ADDMESSAGE = 'addmessage',\n  REMOVEMESSAGE = 'removemessage',\n  DISABLEMESSAGE = 'disablemessage',\n  SETISTOUCHED = 'setistouched',\n  ADDFORMCONTROLID = 'addformcontrolid',\n  REMOVEFORMCONTROLID = 'removeformcontrolid',\n}\n\nexport type FormFieldMessagesReducerAction =\n  | {\n      type: FormFieldMessagesAction.ADDMESSAGE;\n      payload: (\n        | Omit<FormFieldControlMessage, 'id'>\n        | FormFieldCustomMessage\n      ) & { showError?: boolean };\n    }\n  | {\n      type: FormFieldMessagesAction.REMOVEMESSAGE;\n      payload: Pick<FormFieldMessage, 'id' | 'messageType' | 'controlId'>;\n    }\n  | {\n      type: FormFieldMessagesAction.DISABLEMESSAGE;\n      payload: {\n        isDisabled: boolean | undefined;\n      };\n    }\n  | {\n      type: FormFieldMessagesAction.SETISTOUCHED;\n      payload: { isTouched: boolean };\n    }\n  | {\n      type: FormFieldMessagesAction.ADDFORMCONTROLID;\n      payload: { controlId: string };\n    }\n  | {\n      type: FormFieldMessagesAction.REMOVEFORMCONTROLID;\n      payload: { controlId: string };\n    };\n\ntype HTMLFormControlElement =\n  | HTMLSelectElement\n  | HTMLInputElement\n  | HTMLTextAreaElement;\n\n/**\n * Typeguard function that will check if message is a formcontrol (internal) message.\n * @internal\n */\nfunction isFormControlPayload(\n  payload:\n    | Omit<FormFieldControlMessage, 'id'>\n    | FormFieldCustomMessage\n    | FormFieldControlMessage,\n  messageType?: 'formcontrol' | 'custom',\n): payload is FormFieldControlMessage | Omit<FormFieldControlMessage, 'id'> {\n  return messageType === 'formcontrol';\n}\n\n/**\n * Typeguard function that will check if the element is a form control.\n * @internal\n */\nfunction isHTMLFormControlElement(\n  element: null | HTMLElement,\n): element is HTMLFormControlElement {\n  return !!(element && 'setCustomValidity' in element);\n}\n\n/**\n * Set custom validity on the HTML form control element.\n * @param id\n * @param isValid\n * @internal\n */\nfunction setHTMLElementValidity(id: string, isValid: boolean) {\n  const element = document.getElementById(id);\n  if (isHTMLFormControlElement(element)) {\n    element.setCustomValidity(isValid ? '' : ' ');\n  }\n}\n\n/**\n * Function that will determine the validity of a form control.\n * @internal\n */\nfunction updateValidity(\n  state: FormFieldMessageContextState,\n  explicitControlId?: string,\n) {\n  const { customMessages, formControlMessages, isTouched, isDisabled } = state;\n\n  const hasCustomError = customMessages.some(\n    (message) => message.variant === 'error',\n  );\n\n  const hasFormControlError = formControlMessages.some(\n    (message) => message.variant === 'error',\n  );\n\n  const newIsValid = !hasCustomError && !hasFormControlError;\n  const newShowError =\n    !isDisabled && (state.showError || (isTouched ?? false)) && !newIsValid;\n\n  // Only errors the browser has no native knowledge of should be reflected via\n  // setCustomValidity(). These are:\n  //   1. Developer-added errors (customMessages)\n  //   2. Strato-internal custom errors (formControlMessages with validityStateKey 'customError'),\n  //      e.g. TimeframeSelector's 'invalidOrder'\n  //\n  // Browser-native errors (valueMissing, typeMismatch, patternMismatch, \u2026) must NOT be\n  // passed to setCustomValidity() \u2014 the browser already tracks them, and adding a\n  // redundant customError would prevent checkValidity() from returning true once\n  // the native constraint is satisfied.\n  const hasStratoCustomError = formControlMessages.some(\n    (message) =>\n      message.variant === 'error' && message.validityStateKey === 'customError',\n  );\n  const nativeValidityIsValid = !hasCustomError && !hasStratoCustomError;\n\n  if (explicitControlId) {\n    setHTMLElementValidity(explicitControlId, nativeValidityIsValid);\n\n    return {\n      ...state,\n      isValid: newIsValid,\n      showError: newShowError,\n    };\n  }\n\n  state.controlIds?.forEach((id) =>\n    setHTMLElementValidity(id, nativeValidityIsValid),\n  );\n\n  return {\n    ...state,\n    isValid: newIsValid,\n    showError: newShowError,\n  };\n}\n\n/** FormFieldMessage reducer function used for managing FormFieldMessages and FormFieldCustomMessages. */\nexport function formFieldMessagesReducer(\n  state: FormFieldMessageContextState,\n  action: FormFieldMessagesReducerAction,\n): FormFieldMessageContextState {\n  const newState = { ...state };\n\n  // handle adding of form messages\n  if (action.type === FormFieldMessagesAction.ADDMESSAGE) {\n    const { payload } = action;\n    const { messageType, ...remainingPayload } = payload;\n\n    // Is a browser/strato message\n    if (isFormControlPayload(remainingPayload, messageType)) {\n      if (\n        remainingPayload.validityStateKey === 'customError' &&\n        remainingPayload.variant === 'error' &&\n        'id' in remainingPayload\n      ) {\n        const { id: internalId, ...internalRest } =\n          remainingPayload as typeof remainingPayload & { id: string };\n\n        const customErrors = state.formControlMessages.filter(\n          (m) => m.validityStateKey === 'customError',\n        );\n\n        // If the same sole customError is already present and showError won't\n        // change, return early to keep the array reference stable and prevent\n        // a useEffect re-run \u2192 re-dispatch \u2192 infinite-render loop.\n        if (customErrors.length === 1 && customErrors[0].id === internalId) {\n          if ((payload.showError ?? state.showError) === state.showError) {\n            return state;\n          }\n        } else {\n          // Replace all existing customErrors with the new one so only one\n          // internal error is shown at a time.\n          newState.formControlMessages = [\n            ...state.formControlMessages.filter(\n              (m) => m.validityStateKey !== 'customError',\n            ),\n            { id: internalId, ...internalRest },\n          ];\n        }\n      } else {\n        // Browser validity errors are keyed by validityStateKey; only add once.\n        const isNewBrowserError =\n          remainingPayload.validityStateKey !== undefined &&\n          !state.formControlMessages.some(\n            (message) =>\n              message.validityStateKey === remainingPayload.validityStateKey,\n          );\n\n        if (!isNewBrowserError) {\n          return state;\n        }\n\n        newState.formControlMessages = [\n          ...newState.formControlMessages,\n          { id: `strato-${crypto.randomUUID()}`, ...remainingPayload },\n        ];\n      }\n\n      // Is a custom error\n    } else if (\n      'id' in remainingPayload &&\n      !state.formControlMessages.some(\n        (message) => message.id === remainingPayload.id,\n      ) &&\n      !state.customMessages.some(\n        (message) => message.id === remainingPayload.id,\n      )\n    ) {\n      newState.customMessages.push(remainingPayload);\n    }\n\n    if (remainingPayload.variant === 'error') {\n      newState.showError = payload.showError ?? state.showError;\n    }\n\n    return updateValidity(newState, payload.controlId);\n  }\n\n  if (action.type === FormFieldMessagesAction.REMOVEMESSAGE) {\n    const { payload } = action;\n    let didUpdate = false;\n\n    if (payload.messageType === 'formcontrol') {\n      newState.formControlMessages = newState.formControlMessages.filter(\n        (message) => {\n          if (message.id === payload.id) {\n            didUpdate = true;\n          }\n\n          return message.id !== payload.id;\n        },\n      );\n    } else {\n      newState.customMessages = newState.customMessages.filter((message) => {\n        if (message.id === payload.id) {\n          didUpdate = true;\n        }\n\n        return message.id !== payload.id;\n      });\n    }\n\n    // avoid unnecessary updates and possible endless loops by early escaping if nothing was removed.\n    if (!didUpdate) {\n      return state;\n    }\n\n    return updateValidity(newState, payload.controlId);\n  }\n\n  if (action.type === FormFieldMessagesAction.DISABLEMESSAGE) {\n    const { payload } = action;\n    newState.isDisabled = payload.isDisabled;\n  }\n\n  if (action.type === FormFieldMessagesAction.SETISTOUCHED) {\n    const { payload } = action;\n    newState.isTouched = payload.isTouched;\n  }\n\n  if (action.type === FormFieldMessagesAction.ADDFORMCONTROLID) {\n    const {\n      payload: { controlId },\n    } = action;\n\n    newState.controlIds ??= [];\n\n    if (!newState.controlIds.includes(controlId)) {\n      newState.controlIds.push(controlId);\n    }\n  }\n\n  if (action.type === FormFieldMessagesAction.REMOVEFORMCONTROLID) {\n    const {\n      payload: { controlId },\n    } = action;\n\n    newState.controlIds = state.controlIds?.filter((id) => id !== controlId);\n  }\n\n  return updateValidity(newState);\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["import type {\n  FormFieldControlMessage,\n  FormFieldCustomMessage,\n  FormFieldMessage,\n  FormFieldMessageContextState,\n} from '../types/formfield-messages.types.js';\n\nexport const enum FormFieldMessagesAction {\n  ADDMESSAGE = 'addmessage',\n  REMOVEMESSAGE = 'removemessage',\n  DISABLEMESSAGE = 'disablemessage',\n  SETISTOUCHED = 'setistouched',\n  ADDFORMCONTROLID = 'addformcontrolid',\n  REMOVEFORMCONTROLID = 'removeformcontrolid',\n}\n\nexport type FormFieldMessagesReducerAction =\n  | {\n      type: FormFieldMessagesAction.ADDMESSAGE;\n      payload: (\n        | Omit<FormFieldControlMessage, 'id'>\n        | FormFieldCustomMessage\n      ) & { showError?: boolean; messageText?: string };\n    }\n  | {\n      type: FormFieldMessagesAction.REMOVEMESSAGE;\n      payload: Pick<FormFieldMessage, 'id' | 'messageType' | 'controlId'>;\n    }\n  | {\n      type: FormFieldMessagesAction.DISABLEMESSAGE;\n      payload: {\n        isDisabled: boolean | undefined;\n      };\n    }\n  | {\n      type: FormFieldMessagesAction.SETISTOUCHED;\n      payload: { isTouched: boolean };\n    }\n  | {\n      type: FormFieldMessagesAction.ADDFORMCONTROLID;\n      payload: { controlId: string };\n    }\n  | {\n      type: FormFieldMessagesAction.REMOVEFORMCONTROLID;\n      payload: { controlId: string };\n    };\n\ntype HTMLFormControlElement =\n  | HTMLSelectElement\n  | HTMLInputElement\n  | HTMLTextAreaElement;\n\n/**\n * Typeguard function that will check if message is a formcontrol (internal) message.\n * @internal\n */\nfunction isFormControlPayload(\n  payload:\n    | Omit<FormFieldControlMessage, 'id'>\n    | FormFieldCustomMessage\n    | FormFieldControlMessage,\n  messageType?: 'formcontrol' | 'custom',\n): payload is FormFieldControlMessage | Omit<FormFieldControlMessage, 'id'> {\n  return messageType === 'formcontrol';\n}\n\n/**\n * Typeguard function that will check if the element is a form control.\n * @internal\n */\nfunction isHTMLFormControlElement(\n  element: null | HTMLElement,\n): element is HTMLFormControlElement {\n  return !!(element && 'setCustomValidity' in element);\n}\n\n/**\n * Set custom validity on the HTML form control element.\n * @param id\n * @param isValid\n * @internal\n */\nfunction setHTMLElementValidity(id: string, isValid: boolean) {\n  const element = document.getElementById(id);\n  if (isHTMLFormControlElement(element)) {\n    element.setCustomValidity(isValid ? '' : ' ');\n  }\n}\n\n/**\n * Function that will determine the validity of a form control.\n * @internal\n */\nfunction updateValidity(\n  state: FormFieldMessageContextState,\n  explicitControlId?: string,\n) {\n  const { customMessages, formControlMessages, isTouched, isDisabled } = state;\n\n  const hasCustomError = customMessages.some(\n    (message) => message.variant === 'error',\n  );\n\n  const hasFormControlError = formControlMessages.some(\n    (message) => message.variant === 'error',\n  );\n\n  const newIsValid = !hasCustomError && !hasFormControlError;\n  const newShowError =\n    !isDisabled && (state.showError || (isTouched ?? false)) && !newIsValid;\n\n  // Only errors the browser has no native knowledge of should be reflected via\n  // setCustomValidity(). These are:\n  //   1. Developer-added errors (customMessages)\n  //   2. Strato-internal custom errors (formControlMessages with validityStateKey 'customError'),\n  //      e.g. TimeframeSelector's 'invalidOrder'\n  //\n  // Browser-native errors (valueMissing, typeMismatch, patternMismatch, \u2026) must NOT be\n  // passed to setCustomValidity() \u2014 the browser already tracks them, and adding a\n  // redundant customError would prevent checkValidity() from returning true once\n  // the native constraint is satisfied.\n  const hasStratoCustomError = formControlMessages.some(\n    (message) =>\n      message.variant === 'error' && message.validityStateKey === 'customError',\n  );\n  const nativeValidityIsValid = !hasCustomError && !hasStratoCustomError;\n\n  if (explicitControlId) {\n    setHTMLElementValidity(explicitControlId, nativeValidityIsValid);\n\n    return {\n      ...state,\n      isValid: newIsValid,\n      showError: newShowError,\n    };\n  }\n\n  state.controlIds?.forEach((id) =>\n    setHTMLElementValidity(id, nativeValidityIsValid),\n  );\n\n  return {\n    ...state,\n    isValid: newIsValid,\n    showError: newShowError,\n  };\n}\n\n/** FormFieldMessage reducer function used for managing FormFieldMessages and FormFieldCustomMessages. */\nexport function formFieldMessagesReducer(\n  state: FormFieldMessageContextState,\n  action: FormFieldMessagesReducerAction,\n): FormFieldMessageContextState {\n  const newState = { ...state };\n\n  // handle adding of form messages\n  if (action.type === FormFieldMessagesAction.ADDMESSAGE) {\n    const { payload } = action;\n    const { messageType, ...remainingPayload } = payload;\n\n    // Is a browser/strato message\n    if (isFormControlPayload(remainingPayload, messageType)) {\n      if (\n        remainingPayload.validityStateKey === 'customError' &&\n        remainingPayload.variant === 'error' &&\n        'id' in remainingPayload\n      ) {\n        const { id: internalId, ...internalRest } =\n          remainingPayload as typeof remainingPayload & { id: string };\n\n        const customErrors = state.formControlMessages.filter(\n          (m) => m.validityStateKey === 'customError',\n        );\n\n        // If the same sole customError is already present and showError won't\n        // change, return early to keep the array reference stable and prevent\n        // a useEffect re-run \u2192 re-dispatch \u2192 infinite-render loop.\n        if (customErrors.length === 1 && customErrors[0].id === internalId) {\n          if ((payload.showError ?? state.showError) === state.showError) {\n            return state;\n          }\n        } else {\n          // Replace all existing customErrors with the new one so only one\n          // internal error is shown at a time.\n          newState.formControlMessages = [\n            ...state.formControlMessages.filter(\n              (m) => m.validityStateKey !== 'customError',\n            ),\n            { id: internalId, ...internalRest },\n          ];\n        }\n      } else {\n        // Browser validity errors are keyed by validityStateKey; only add once.\n        const isNewBrowserError =\n          remainingPayload.validityStateKey !== undefined &&\n          !state.formControlMessages.some(\n            (message) =>\n              message.validityStateKey === remainingPayload.validityStateKey,\n          );\n\n        if (!isNewBrowserError) {\n          return state;\n        }\n\n        newState.formControlMessages = [\n          ...newState.formControlMessages,\n          { id: `strato-${crypto.randomUUID()}`, ...remainingPayload },\n        ];\n      }\n\n      // Is a custom error\n    } else if (\n      'id' in remainingPayload &&\n      !state.formControlMessages.some(\n        (message) => message.id === remainingPayload.id,\n      ) &&\n      !state.customMessages.some(\n        (message) => message.id === remainingPayload.id,\n      )\n    ) {\n      newState.customMessages.push(remainingPayload);\n      if (payload.messageText !== undefined) {\n        newState.customMessageTexts = {\n          ...(newState.customMessageTexts ?? {}),\n          [remainingPayload.id]: payload.messageText,\n        };\n      }\n    }\n\n    if (remainingPayload.variant === 'error') {\n      newState.showError = payload.showError ?? state.showError;\n    }\n\n    return updateValidity(newState, payload.controlId);\n  }\n\n  if (action.type === FormFieldMessagesAction.REMOVEMESSAGE) {\n    const { payload } = action;\n    let didUpdate = false;\n\n    if (payload.messageType === 'formcontrol') {\n      newState.formControlMessages = newState.formControlMessages.filter(\n        (message) => {\n          if (message.id === payload.id) {\n            didUpdate = true;\n          }\n\n          return message.id !== payload.id;\n        },\n      );\n    } else {\n      newState.customMessages = newState.customMessages.filter((message) => {\n        if (message.id === payload.id) {\n          didUpdate = true;\n        }\n\n        return message.id !== payload.id;\n      });\n      if (newState.customMessageTexts?.[payload.id] !== undefined) {\n        const { [payload.id]: _, ...remaining } = newState.customMessageTexts;\n        newState.customMessageTexts = remaining;\n      }\n    }\n\n    // avoid unnecessary updates and possible endless loops by early escaping if nothing was removed.\n    if (!didUpdate) {\n      return state;\n    }\n\n    return updateValidity(newState, payload.controlId);\n  }\n\n  if (action.type === FormFieldMessagesAction.DISABLEMESSAGE) {\n    const { payload } = action;\n    newState.isDisabled = payload.isDisabled;\n  }\n\n  if (action.type === FormFieldMessagesAction.SETISTOUCHED) {\n    const { payload } = action;\n    newState.isTouched = payload.isTouched;\n  }\n\n  if (action.type === FormFieldMessagesAction.ADDFORMCONTROLID) {\n    const {\n      payload: { controlId },\n    } = action;\n\n    newState.controlIds ??= [];\n\n    if (!newState.controlIds.includes(controlId)) {\n      newState.controlIds.push(controlId);\n    }\n  }\n\n  if (action.type === FormFieldMessagesAction.REMOVEFORMCONTROLID) {\n    const {\n      payload: { controlId },\n    } = action;\n\n    newState.controlIds = state.controlIds?.filter((id) => id !== controlId);\n  }\n\n  return updateValidity(newState);\n}\n"],
+  "mappings": "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",
   "names": ["FormFieldMessagesAction"]
 }

package/esm/forms/hooks/useAutofillEvent.css

@@ -1,20 +1,20 @@
-@keyframes _yfwka31-3-7-1 {
+@keyframes _yfwka31-3-8-0 {
 
 }
-@keyframes _yfwka32-3-7-1 {
+@keyframes _yfwka32-3-8-0 {
 
 }
-._yfwka33-3-7-1:-webkit-autofill:is(._yfwka33-3-7-1,:hover,:focus) {
+._yfwka33-3-8-0:-webkit-autofill:is(._yfwka33-3-8-0,:hover,:focus) {
   -webkit-text-fill-color: var(--dt-colors-text-primary-default, #464cce);
-  box-shadow: 0 0 0px 1000px var(--_yfwka30-3-7-1) inset;
+  box-shadow: 0 0 0px 1000px var(--_yfwka30-3-8-0) inset;
   caret-color: var(--dt-colors-text-neutral-default, #2f2f4f);
 }
-._yfwka33-3-7-1:-webkit-autofill {
-  animation-name: _yfwka31-3-7-1;
+._yfwka33-3-8-0:-webkit-autofill {
+  animation-name: _yfwka31-3-8-0;
   animation-duration: 0.001s;
 }
-._yfwka33-3-7-1:not(:-webkit-autofill) {
-  animation-name: _yfwka32-3-7-1;
+._yfwka33-3-8-0:not(:-webkit-autofill) {
+  animation-name: _yfwka32-3-8-0;
   animation-duration: 0.001s;
 }
 input:-webkit-autofill::spelling-error {

package/esm/forms/hooks/useAutofillEvent.sty.js

@@ -1,8 +1,8 @@
 import "./useAutofillEvent.css";
-var autofillBackground = "var(--_yfwka30-3-7-1)";
-var autofillCSS = "_yfwka33-3-7-1";
-var end = "_yfwka32-3-7-1";
-var start = "_yfwka31-3-7-1";
+var autofillBackground = "var(--_yfwka30-3-8-0)";
+var autofillCSS = "_yfwka33-3-8-0";
+var end = "_yfwka32-3-8-0";
+var start = "_yfwka31-3-8-0";
 export {
   autofillBackground,
   autofillCSS,

package/esm/forms/hooks/useAutofillEvent.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/forms/hooks/useAutofillEvent.css.ts"],
-  "sourcesContent": ["import './useAutofillEvent.css';\nexport var autofillBackground = 'var(--_yfwka30-3-7-1)';\nexport var autofillCSS = '_yfwka33-3-7-1';\nexport var end = '_yfwka32-3-7-1';\nexport var start = '_yfwka31-3-7-1';"],
+  "sourcesContent": ["import './useAutofillEvent.css';\nexport var autofillBackground = 'var(--_yfwka30-3-8-0)';\nexport var autofillCSS = '_yfwka33-3-8-0';\nexport var end = '_yfwka32-3-8-0';\nexport var start = '_yfwka31-3-8-0';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,qBAAqB;AACzB,IAAI,cAAc;AAClB,IAAI,MAAM;AACV,IAAI,QAAQ;",
   "names": []
 }