@dynatrace/strato-components 3.7.1 → 3.8.0

package/forms/date-time-range-picker/DateTimeInput.css

@@ -1,33 +1,33 @@
-._5u9o250-3-7-1 {
+._5u9o250-3-8-0 {
   min-width: 0;
   overflow-x: auto;
   scrollbar-width: none;
 }
-._5u9o250-3-7-1::-webkit-scrollbar {
+._5u9o250-3-8-0::-webkit-scrollbar {
   display: none;
 }
-._5u9o252-3-7-1 {
+._5u9o252-3-8-0 {
   outline: none;
 }
-._5u9o252-3-7-1:not(:focus-visible) {
+._5u9o252-3-8-0:not(:focus-visible) {
   caret-color: transparent;
 }
-._5u9o252-3-7-1:empty::before {
+._5u9o252-3-8-0:empty::before {
   content: var(--data-placeholder);
   padding-top: var(--dt-spacings-size-2, 2px);
   padding-bottom: var(--dt-spacings-size-2, 2px);
   color: var(--dt-colors-text-neutral-subdued, #595a7d);
 }
-._1vlwkc21-3-7-1 ._5u9o252-3-7-1:empty::before {
+._1vlwkc21-3-8-0 ._5u9o252-3-8-0:empty::before {
   color: var(--dt-colors-text-critical-default, #bb0731);
 }
-._1vlwkc22-3-7-1 ._5u9o252-3-7-1:empty::before {
+._1vlwkc22-3-8-0 ._5u9o252-3-8-0:empty::before {
   color: var(--dt-colors-text-neutral-disabled, #595a7d80);
 }
-._1vlwkc22-3-7-1._1vlwkc21-3-7-1 ._5u9o252-3-7-1:empty::before {
+._1vlwkc22-3-8-0._1vlwkc21-3-8-0 ._5u9o252-3-8-0:empty::before {
   color: var(--dt-colors-text-critical-disabled, #595a7d80);
 }
-._5u9o252-3-7-1::selection {
-  color: var(--_1i883gj5-3-7-1);
-  background-color: var(--_1i883gj6-3-7-1);
+._5u9o252-3-8-0::selection {
+  color: var(--_1i883gj5-3-8-0);
+  background-color: var(--_1i883gj6-3-8-0);
 }

package/forms/date-time-range-picker/DateTimeInput.js

@@ -51,6 +51,7 @@ var import_useFormFieldValidation = require("../forms-core/hooks/useFormFieldVal
 var import_formfield_messages_state_reducer = require("../forms-core/state/formfield-messages-state-reducer.js");
 var import_useInputHint = require("../hooks/useInputHint.js");
 var import_SpinButtonGroup = require("../spin-buttons/spin-button-group/SpinButtonGroup.js");
+var import_validation_builders = require("../validation/validation-builders.js");
 function preventDefault(e) {
   e.preventDefault();
 }
@@ -180,14 +181,35 @@ const DateTimeInput = (0, import_react.forwardRef)(
             expectedFormat: formatString,
             valueMode: validationValueMode,
             // In single mode, required validation is handled by core time validation
-            // (singleValueMissing). Keeping native `required` here would add a second
-            // browser `valueMissing` message with identical text.
+            // (emits native valueMissing). Keeping native `required` here would add a
+            // second browser `valueMissing` message with identical text.
             required: validationValueMode === "single" ? false : required
           });
           formMessageDispatch?.({
             type: import_formfield_messages_state_reducer.FormFieldMessagesAction.SETISTOUCHED,
             payload: { isTouched: true }
           });
+        },
+        validateAsync: async () => {
+          const textContent = expressionInputRef.current?.textContent;
+          if (valueType === "expression" && !textContent) {
+            setInputValue("");
+          }
+          (0, import_validation.validate)(value ?? null, min, max, {
+            formMessageDispatch,
+            precision,
+            showError: true,
+            checkOrder: true,
+            ref: rootRef,
+            expectedFormat: formatString,
+            valueMode: validationValueMode,
+            required: validationValueMode === "single" ? false : required
+          });
+          formMessageDispatch?.({
+            type: import_formfield_messages_state_reducer.FormFieldMessagesAction.SETISTOUCHED,
+            payload: { isTouched: true }
+          });
+          return (0, import_validation_builders.getValidationState)(inputRef.current, "manual");
         }
       }),
       [
@@ -250,7 +272,7 @@ const DateTimeInput = (0, import_react.forwardRef)(
               onInvalid,
               disabled,
               tabIndex: -1,
-              required,
+              required: validationValueMode === "single" ? false : required,
               readOnly,
               "aria-disabled": ariaDisabledProp,
               ...(0, import_merge_props.mergeProps)(

package/forms/date-time-range-picker/DateTimeInput.sty.js

@@ -29,6 +29,6 @@ var import_SpinButton_css_ts_vanilla = require("../spin-buttons/SpinButton.css")
 var import_DateTimePicker_css_ts_vanilla = require("../date-time-picker/DateTimePicker.css");
 var import_DateTimeRangePicker_css_ts_vanilla = require("./DateTimeRangePicker.css");
 var import_DateTimeInput_css_ts_vanilla = require("./DateTimeInput.css");
-var dateTimeInput = "_5u9o251-3-7-1";
-var dateTimeInputRoot = "_5u9o250-3-7-1";
-var expression = "_5u9o252-3-7-1";
+var dateTimeInput = "_5u9o251-3-8-0";
+var dateTimeInputRoot = "_5u9o250-3-8-0";
+var expression = "_5u9o252-3-8-0";

package/forms/date-time-range-picker/DateTimeRangePicker.css

@@ -1,49 +1,49 @@
-._1vlwkc20-3-7-1 {
+._1vlwkc20-3-8-0 {
   transition-timing-function: var(--dt-animations-fade-out-easing, cubic-bezier(0, 0, 0.2, 1));
   transition-duration: var(--dt-animations-fade-out-duration-base, 250ms);
   transition-property: color, background-color, transform;
   padding-inline: var(--dt-spacings-size-12, 12px);
   padding-block: var(--dt-spacings-size-6, 6px);
   border-radius: var(--dt-borders-radius-field-default, 6px);
-  box-shadow: var(--_bx32h4-3-7-1);
+  box-shadow: var(--_bx32h4-3-8-0);
   white-space: nowrap;
   overflow: hidden;
-  color: var(--_bx32h0-3-7-1);
-  background: var(--_bx32h3-3-7-1);
+  color: var(--_bx32h0-3-8-0);
+  background: var(--_bx32h3-3-8-0);
   flex: 1 1 auto;
   position: relative;
 }
-._1vlwkc20-3-7-1._1vlwkc20-3-7-1 {
+._1vlwkc20-3-8-0._1vlwkc20-3-8-0 {
   gap: var(--dt-spacings-size-4, 4px);
 }
-._1vlwkc20-3-7-1:has(._1i883gjh-3-7-1) {
+._1vlwkc20-3-8-0:has(._1i883gjh-3-8-0) {
   padding-inline-end: var(--dt-spacings-size-32, 32px);
 }
-._1vlwkc20-3-7-1:has(._1i883gjh-3-7-1:hover) {
-  --_bx32h3-3-7-1: var(--_bx32h2-3-7-1);
+._1vlwkc20-3-8-0:has(._1i883gjh-3-8-0:hover) {
+  --_bx32h3-3-8-0: var(--_bx32h2-3-8-0);
 }
-._1vlwkc20-3-7-1:has(._1i883gjh-3-7-1:focus-visible) {
-  box-shadow: var(--_bx32h4-3-7-1, none);
+._1vlwkc20-3-8-0:has(._1i883gjh-3-8-0:focus-visible) {
+  box-shadow: var(--_bx32h4-3-8-0, none);
 }
-._1jgl8s50-3-7-1 ._1vlwkc20-3-7-1, ._1jgl8s50-3-7-1 ._1vlwkc20-3-7-1:hover, ._1jgl8s50-3-7-1 ._1vlwkc20-3-7-1:active {
-  --_bx32h3-3-7-1: var(--dt-colors-background-surface-default, #fff);
+._1jgl8s50-3-8-0 ._1vlwkc20-3-8-0, ._1jgl8s50-3-8-0 ._1vlwkc20-3-8-0:hover, ._1jgl8s50-3-8-0 ._1vlwkc20-3-8-0:active {
+  --_bx32h3-3-8-0: var(--dt-colors-background-surface-default, #fff);
 }
-._1vlwkc22-3-7-1 {
+._1vlwkc22-3-8-0 {
   cursor: not-allowed;
 }
-._1vlwkc23-3-7-1 {
-  --_bx32h3-3-7-1: var(--dt-colors-background-field-neutral-disabled, #e4e5eb80);
+._1vlwkc23-3-8-0 {
+  --_bx32h3-3-8-0: var(--dt-colors-background-field-neutral-disabled, #e4e5eb80);
 }
-._1jgl8s50-3-7-1 ._1vlwkc23-3-7-1, ._1jgl8s50-3-7-1 ._1vlwkc23-3-7-1:hover, ._1jgl8s50-3-7-1 ._1vlwkc23-3-7-1:active {
-  --_bx32h4-3-7-1: var(--dt-box-shadows-field-neutral-disabled, inset 0px 0px 0px 1px #2f2f4f0f, inset 0px -1px 0px #2f2f4f0a, 0px 1px 1px -1px #2d2e4e1f);
+._1jgl8s50-3-8-0 ._1vlwkc23-3-8-0, ._1jgl8s50-3-8-0 ._1vlwkc23-3-8-0:hover, ._1jgl8s50-3-8-0 ._1vlwkc23-3-8-0:active {
+  --_bx32h4-3-8-0: var(--dt-box-shadows-field-neutral-disabled, inset 0px 0px 0px 1px #2f2f4f0f, inset 0px -1px 0px #2f2f4f0a, 0px 1px 1px -1px #2d2e4e1f);
 }
-._1vlwkc24-3-7-1 {
-  --_bx32h3-3-7-1: var(--dt-colors-background-field-critical-emphasized, #f8e1e1);
+._1vlwkc24-3-8-0 {
+  --_bx32h3-3-8-0: var(--dt-colors-background-field-critical-emphasized, #f8e1e1);
 }
-._1jgl8s50-3-7-1 ._1vlwkc24-3-7-1, ._1jgl8s50-3-7-1 ._1vlwkc24-3-7-1:hover, ._1jgl8s50-3-7-1 ._1vlwkc24-3-7-1:active {
-  --_bx32h4-3-7-1: var(--dt-box-shadows-field-critical-disabled, inset 0px 0px 0px 1px #2f2f4f0f, inset 0px -1px 0px #2f2f4f0a, 0px 1px 1px -1px #2d2e4e1f);
+._1jgl8s50-3-8-0 ._1vlwkc24-3-8-0, ._1jgl8s50-3-8-0 ._1vlwkc24-3-8-0:hover, ._1jgl8s50-3-8-0 ._1vlwkc24-3-8-0:active {
+  --_bx32h4-3-8-0: var(--dt-box-shadows-field-critical-disabled, inset 0px 0px 0px 1px #2f2f4f0f, inset 0px -1px 0px #2f2f4f0a, 0px 1px 1px -1px #2d2e4e1f);
 }
-._1vlwkc25-3-7-1 {
+._1vlwkc25-3-8-0 {
   display: flex;
   flex: 1 1 auto;
   min-width: 0;
@@ -51,19 +51,19 @@
   overflow-y: hidden;
   scrollbar-width: none;
 }
-._1vlwkc25-3-7-1._1vlwkc25-3-7-1 {
+._1vlwkc25-3-8-0._1vlwkc25-3-8-0 {
   gap: var(--dt-spacings-size-4, 4px);
 }
-._1vlwkc25-3-7-1::-webkit-scrollbar {
+._1vlwkc25-3-8-0::-webkit-scrollbar {
   display: none;
 }
-._1vlwkc26-3-7-1._1vlwkc26-3-7-1 {
+._1vlwkc26-3-8-0._1vlwkc26-3-8-0 {
   flex-shrink: 0;
   overflow-x: visible;
 }
-._1vlwkc27-3-7-1 {
+._1vlwkc27-3-8-0 {
   flex-shrink: 0;
 }
-._1vlwkc27-3-7-1::selection {
+._1vlwkc27-3-8-0::selection {
   background: transparent;
 }

package/forms/date-time-range-picker/DateTimeRangePicker.sty.js

@@ -30,7 +30,7 @@ var import_SpinButton_css_ts_vanilla = require("../spin-buttons/SpinButton.css")
 var import_DateTimePicker_css_ts_vanilla = require("../date-time-picker/DateTimePicker.css");
 var import_DateTimeRangePicker_css_ts_vanilla = require("./DateTimeRangePicker.css");
 var import_createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
-var dateTimeInput = "_1vlwkc26-3-7-1";
-var dateTimeRange = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_1vlwkc20-3-7-1", variantClassNames: { showError: { true: "_1vlwkc21-3-7-1" }, disabled: { true: "_1vlwkc22-3-7-1" }, readOnly: { true: "_1vlwkc23-3-7-1" } }, defaultVariants: {}, compoundVariants: [[{ showError: true, readOnly: true }, "_1vlwkc24-3-7-1"]] });
-var scrollContainer = "_1vlwkc25-3-7-1";
-var timeframeSeparator = "_1vlwkc27-3-7-1";
+var dateTimeInput = "_1vlwkc26-3-8-0";
+var dateTimeRange = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_1vlwkc20-3-8-0", variantClassNames: { showError: { true: "_1vlwkc21-3-8-0" }, disabled: { true: "_1vlwkc22-3-8-0" }, readOnly: { true: "_1vlwkc23-3-8-0" } }, defaultVariants: {}, compoundVariants: [[{ showError: true, readOnly: true }, "_1vlwkc24-3-8-0"]] });
+var scrollContainer = "_1vlwkc25-3-8-0";
+var timeframeSeparator = "_1vlwkc27-3-8-0";

package/forms/date-time-range-picker/DateTimeRangePickerRoot.js

@@ -60,6 +60,9 @@ var import_FormFieldMessageContext = require("../forms-core/contexts/FormFieldMe
 var import_useFormFieldMessagesContext = require("../forms-core/hooks/useFormFieldMessagesContext.js");
 var import_useSyncedFormControlProps = require("../forms-core/hooks/useSyncedFormControlProps.js");
 var import_formfield_messages_state_reducer = require("../forms-core/state/formfield-messages-state-reducer.js");
+var import_useCustomMessageEmitter = require("../validation/useCustomMessageEmitter.js");
+var import_useValidationStateEmitter = require("../validation/useValidationStateEmitter.js");
+var import_validation_builders = require("../validation/validation-builders.js");
 function isInputInSelectionOrFocused(ref, preRestoreEndpoints) {
   const element = ref.current?.element;
   if (!element) {
@@ -113,6 +116,7 @@ const DateTimeRangePickerRoot = (0, import_react.forwardRef)((props, forwardedRe
     "aria-disabled": ariaDisabledProp,
     placeholder: placeholderProp,
     onBlur,
+    onValidityChange,
     ...remainingProps
   } = props;
   const [behavioralTrackingProps] = (0, import_useBehavioralTrackingProps.useBehavioralTrackingProps)(remainingProps);
@@ -153,10 +157,38 @@ const DateTimeRangePickerRoot = (0, import_react.forwardRef)((props, forwardedRe
   });
   const intl = (0, import_react_intl.useIntl)();
   const {
-    state: { showError },
+    state: { showError, isTouched },
     dispatch: formMessageDispatch
   } = (0, import_useFormFieldMessagesContext.useFormFieldMessagesContext)();
   const lastValidationErrorRef = (0, import_react.useRef)();
+  const _emitValidationState = (0, import_useValidationStateEmitter.useValidationStateEmitter)(onValidityChange);
+  const emitValidationState = (0, import_useCustomMessageEmitter.useCustomMessageEmitter)(
+    _emitValidationState,
+    () => {
+      const key = getErrorKey();
+      return (0, import_validation_builders.getValidationState)(
+        key !== void 0 ? (0, import_validation.getValidityStateKeyForTimeError)(key) : void 0,
+        "manual",
+        getValidationMessage(key),
+        id ? [id] : []
+      );
+    }
+  );
+  const getValidationMessage = (0, import_react.useCallback)(
+    (errorKey) => {
+      if (!errorKey) {
+        return void 0;
+      }
+      return (0, import_validation.formatTimeValidationMessage)(errorKey, intl, {
+        value,
+        min,
+        max,
+        precision,
+        expectedFormat: formatString
+      });
+    },
+    [intl, value, min, max, precision, formatString]
+  );
   (0, import_react.useImperativeHandle)(
     forwardedRef,
     () => ({
@@ -188,6 +220,39 @@ const DateTimeRangePickerRoot = (0, import_react.forwardRef)((props, forwardedRe
           type: import_formfield_messages_state_reducer.FormFieldMessagesAction.SETISTOUCHED,
           payload: { isTouched: true }
         });
+        emitValidationState(
+          (0, import_validation_builders.getValidationState)(
+            lastValidationErrorRef.current !== void 0 ? (0, import_validation.getValidityStateKeyForTimeError)(lastValidationErrorRef.current) : void 0,
+            "manual",
+            getValidationMessage(lastValidationErrorRef.current),
+            id ? [id] : []
+          )
+        );
+      },
+      // DEPRECATION: [APPDEV-18178] BREAKING-CHANGE: Remove validateAsync() and change validate() to return Promise<ValidationState>.
+      validateAsync: async () => {
+        lastValidationErrorRef.current = (0, import_validation.validate)(value, min, max, {
+          formMessageDispatch,
+          formerError: lastValidationErrorRef.current,
+          precision,
+          showError: true,
+          checkOrder: true,
+          ref: rootRef,
+          expectedFormat: formatString,
+          valueMode: "dateTimePicker",
+          required
+        });
+        formMessageDispatch?.({
+          type: import_formfield_messages_state_reducer.FormFieldMessagesAction.SETISTOUCHED,
+          payload: { isTouched: true }
+        });
+        const state = (0, import_validation_builders.getValidationState)(
+          lastValidationErrorRef.current !== void 0 ? (0, import_validation.getValidityStateKeyForTimeError)(lastValidationErrorRef.current) : void 0,
+          "manual",
+          getValidationMessage(lastValidationErrorRef.current),
+          id ? [id] : []
+        );
+        return emitValidationState(state);
       }
     }),
     [
@@ -198,9 +263,33 @@ const DateTimeRangePickerRoot = (0, import_react.forwardRef)((props, forwardedRe
       precision,
       formatString,
       required,
-      dateTimeFromRef
+      dateTimeFromRef,
+      emitValidationState,
+      getValidationMessage
     ]
   );
+  const getErrorKey = (0, import_react.useCallback)(
+    () => (0, import_validation.validate)(value, min, max, {
+      precision,
+      checkOrder: true,
+      ref: rootRef,
+      expectedFormat: formatString,
+      valueMode: "dateTimePicker",
+      required
+    }),
+    [value, min, max, precision, formatString, required]
+  );
+  (0, import_react.useEffect)(() => {
+    const key = getErrorKey();
+    emitValidationState(
+      (0, import_validation_builders.getValidationState)(
+        key !== void 0 ? (0, import_validation.getValidityStateKeyForTimeError)(key) : void 0,
+        "change",
+        getValidationMessage(key),
+        id ? [id] : []
+      )
+    );
+  }, [value, id, getErrorKey, emitValidationState, getValidationMessage]);
   const { focusClassName } = (0, import_useFocusRing.useFocusRing)({
     focusWithin: true,
     ignoreModality: true,
@@ -411,6 +500,20 @@ const DateTimeRangePickerRoot = (0, import_react.forwardRef)((props, forwardedRe
               requestAnimationFrame(() => {
                 onBlur?.(event);
               });
+              if (touchedContainerRef.current?.contains(event.relatedTarget)) {
+                return;
+              }
+              if (!isTouched) {
+                const blurKey = getErrorKey();
+                emitValidationState(
+                  (0, import_validation_builders.getValidationState)(
+                    blurKey !== void 0 ? (0, import_validation.getValidityStateKeyForTimeError)(blurKey) : void 0,
+                    "blur",
+                    getValidationMessage(blurKey),
+                    id ? [id] : []
+                  )
+                );
+              }
             },
             onInput: () => {
               setHasInputContent(

package/forms/forms-core/components/field-set/FieldSet.css

@@ -1,4 +1,4 @@
-._1dphm0f0-3-7-1 {
+._1dphm0f0-3-8-0 {
   appearance: none;
   margin: 0;
   border: none;
@@ -6,7 +6,7 @@
   min-width: 0;
   min-height: 0;
 }
-._1dphm0f1-3-7-1 {
+._1dphm0f1-3-8-0 {
   padding: 0;
   appearance: none;
   margin-bottom: var(--dt-spacings-size-12, 12px);

package/forms/forms-core/components/field-set/FieldSet.sty.js

@@ -22,5 +22,5 @@ __export(FieldSet_css_exports, {
 });
 module.exports = __toCommonJS(FieldSet_css_exports);
 var import_FieldSet_css_ts_vanilla = require("./FieldSet.css");
-var fieldset = "_1dphm0f0-3-7-1";
-var legend = "_1dphm0f1-3-7-1";
+var fieldset = "_1dphm0f0-3-8-0";
+var legend = "_1dphm0f1-3-8-0";

package/forms/forms-core/components/form-field/FormField.sty.js

@@ -21,4 +21,4 @@ __export(FormField_css_exports, {
 });
 module.exports = __toCommonJS(FormField_css_exports);
 var import_FormField_css_ts_vanilla = require("./FormField.css");
-var formField = "_mvcxum0-3-7-1";
+var formField = "_mvcxum0-3-8-0";

package/forms/forms-core/components/form-field-messages/FormFieldMessageItem.css

@@ -1,17 +1,17 @@
-._16z6rg10-3-7-1 {
+._16z6rg10-3-8-0 {
   font-size: var(--dt-typography-text-small-default-size, 12px);
   line-height: var(--dt-typography-text-small-default-line-height, 1.333333333);
 }
-._16z6rg11-3-7-1 {
+._16z6rg11-3-8-0 {
   color: var(--dt-colors-text-neutral-subdued, #595a7d);
 }
-._16z6rg12-3-7-1 {
+._16z6rg12-3-8-0 {
   color: var(--dt-colors-text-critical-default, #bb0731);
 }
-._16z6rg13-3-7-1 {
+._16z6rg13-3-8-0 {
   color: var(--dt-colors-text-neutral-disabled, #595a7d80);
 }
-._16z6rg14-3-7-1 {
+._16z6rg14-3-8-0 {
   min-width: 0;
   overflow-wrap: break-word;
 }

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

@@ -37,20 +37,24 @@ const FormFieldMessageItem = (props) => {
     ...remainingProps
   } = props;
   const { state, dispatch } = (0, import_useFormFieldMessagesContext.useFormFieldMessagesContext)();
+  const content = children ?? message;
+  const messageString = typeof content === "string" ? content : void 0;
   (0, import_react.useEffect)(() => {
     dispatch?.({
       type: import_formfield_messages_state_reducer.FormFieldMessagesAction.ADDMESSAGE,
-      payload: { id, variant }
+      payload: {
+        id,
+        variant,
+        ...messageString !== void 0 && { messageText: messageString }
+      }
     });
     return () => {
       dispatch?.({
         type: import_formfield_messages_state_reducer.FormFieldMessagesAction.REMOVEMESSAGE,
-        payload: {
-          id
-        }
+        payload: { id }
       });
     };
-  }, [variant, id, dispatch]);
+  }, [variant, id, dispatch, messageString]);
   if (dispatch && state.controlIds && !state.showError && variant === "error") {
     return null;
   }

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

@@ -23,5 +23,5 @@ __export(FormFieldMessageItem_css_exports, {
 module.exports = __toCommonJS(FormFieldMessageItem_css_exports);
 var import_FormFieldMessageItem_css_ts_vanilla = require("./FormFieldMessageItem.css");
 var import_createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
-var formFieldMessageItem = (0, import_createRuntimeFn.createRuntimeFn)({ 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 = (0, import_createRuntimeFn.createRuntimeFn)({ 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";

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

@@ -21,4 +21,4 @@ __export(FormFieldMessages_css_exports, {
 });
 module.exports = __toCommonJS(FormFieldMessages_css_exports);
 var import_FormFieldMessages_css_ts_vanilla = require("./FormFieldMessages.css");
-var formFieldMessages = "_1l9bja60-3-7-1";
+var formFieldMessages = "_1l9bja60-3-8-0";

package/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/forms/forms-core/components/label/Label.sty.js

@@ -23,5 +23,5 @@ __export(Label_css_exports, {
 module.exports = __toCommonJS(Label_css_exports);
 var import_Label_css_ts_vanilla = require("./Label.css");
 var import_createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
-var label = (0, import_createRuntimeFn.createRuntimeFn)({ 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 = (0, import_createRuntimeFn.createRuntimeFn)({ 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";

package/forms/forms-core/hooks/useFormFieldValidation.d.ts

@@ -1,24 +1,42 @@
 import { AriaAttributes, type RefObject, type FormEvent as ReactFormEvent, type ChangeEvent, type FocusEvent } from 'react';
+import { type IntlShape } from 'react-intl';
 import { AriaLabelingProps } from '../../../core/types/a11y-props.js';
+import type { ValidationState, ValidationTrigger } from '../../validation/types.js';
+type FormFieldElement = HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement;
 /**
  * Getter function to read the error type form the validity state.
  * The validity state values are readonly and can't therefore not be iterated but need to accessed directly instead.
  * https://stackoverflow.com/questions/20891950/html-validation-api-returns-an-empty-object-in-firefox?rq=2
  * @internal
  */
-export declare function getErrorType(validityState?: ValidityState): "badInput" | "patternMismatch" | "rangeOverflow" | "rangeUnderflow" | "stepMismatch" | "tooLong" | "tooShort" | "typeMismatch" | "valueMissing" | null;
+export declare function getErrorType(validityState?: ValidityState): "valueMissing" | "typeMismatch" | "patternMismatch" | "tooLong" | "tooShort" | "rangeUnderflow" | "rangeOverflow" | "stepMismatch" | "badInput" | null;
 /**
  * Internal getter function to return the matching formatted message for
  * each validityStateKey.
  * @internal
  */
-export declare function getI18nErrorMessage(key: keyof ValidityState, ref?: HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement | null): import("react/jsx-runtime").JSX.Element | null;
+export declare function getI18nErrorMessage(key: keyof ValidityState, ref?: FormFieldElement | null): import("react/jsx-runtime").JSX.Element | null;
+/**
+ * Returns the translated plain-string validation message for a given validity
+ * state key. Mirrors the JSX messages in {@link getI18nErrorMessage} using the
+ * same descriptors so both the UI and `ValidationError.message` stay in sync.
+ *
+ * @internal
+ */
+export declare function getI18nValidationMessage(intl: IntlShape, key: keyof ValidityState, ref?: FormFieldElement | null): string;
+/**
+ * Builds a ValidationState with an i18n message for the current validity of
+ * `element`, bypassing the corrupted `element.validationMessage` that
+ * `setCustomValidity` produces.
+ * @internal
+ */
+export declare function getI18nValidationState(intl: IntlShape, element: FormFieldElement | null | undefined, trigger: ValidationTrigger): ValidationState;
 /** @internal */
 interface FormFieldValidationProps {
     ariaProps: Pick<AriaAttributes, 'aria-errormessage' | 'aria-invalid' | 'aria-describedby'>;
-    onInvalid: (event: ReactFormEvent<HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement>) => void;
-    onChange: (event?: ChangeEvent<HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement>) => void;
-    onBlur: (event?: FocusEvent<HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement>) => void;
+    onInvalid: (event: ReactFormEvent<FormFieldElement>) => void;
+    onChange: (event?: ChangeEvent<FormFieldElement>) => void;
+    onBlur: (event?: FocusEvent<FormFieldElement>) => void;
 }
 /**
  * Hook to generate ARIA props based on the form field messages
@@ -41,7 +59,7 @@ export declare function useFormFieldValidationAriaProps(ariaLabelingProps?: Aria
  * @param controlId - Optional control ID for message management
  * @internal
  */
-export declare function useFormFieldValidation(ref: RefObject<HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement | null>, validationDeps?: Record<string, string | number | boolean | undefined>, ariaLabelingProps?: AriaLabelingProps, controlId?: string): FormFieldValidationProps;
+export declare function useFormFieldValidation(ref: RefObject<FormFieldElement | null>, validationDeps?: Record<string, string | number | boolean | undefined>, ariaLabelingProps?: AriaLabelingProps, controlId?: string, emitValidationStateProp?: (state: ValidationState) => void): FormFieldValidationProps;
 export declare function getCombinedAriaProps(validationAriaProps: Pick<AriaAttributes, 'aria-errormessage' | 'aria-invalid' | 'aria-describedby'>, labelingProps: AriaLabelingProps): {
     'aria-describedby': string | undefined;
     "aria-errormessage"?: string | undefined | undefined;