@dynatrace/strato-components 3.7.1 → 3.9.0

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

@@ -22,4 +22,15 @@ __export(useFormFieldContext_exports, {
 module.exports = __toCommonJS(useFormFieldContext_exports);
 var import_react = require("react");
 var import_FormFieldContext = require("../contexts/FormFieldContext.js");
-const useFormFieldContext = () => (0, import_react.useContext)(import_FormFieldContext._FormFieldContext);
+const useFormFieldContext = () => {
+  const context = (0, import_react.useContext)(
+    import_FormFieldContext._FormFieldContext
+  );
+  return {
+    memberFormControlIds: [],
+    registerFormControlId: () => () => void 0,
+    registerMemberFormControlId: () => () => void 0,
+    registerFormFieldLabelId: () => () => void 0,
+    ...context
+  };
+};

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;

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

@@ -20,6 +20,8 @@ __export(useFormFieldValidation_exports, {
   getCombinedAriaProps: () => getCombinedAriaProps,
   getErrorType: () => getErrorType,
   getI18nErrorMessage: () => getI18nErrorMessage,
+  getI18nValidationMessage: () => getI18nValidationMessage,
+  getI18nValidationState: () => getI18nValidationState,
   useFormFieldValidation: () => useFormFieldValidation,
   useFormFieldValidationAriaProps: () => useFormFieldValidationAriaProps
 });
@@ -30,6 +32,8 @@ var import_react_intl = require("react-intl");
 var import_useFormFieldMessagesContext = require("./useFormFieldMessagesContext.js");
 var import_useId = require("../../../core/hooks/useId.js");
 var import_Text = require("../../../typography/text/Text.js");
+var import_useCustomMessageEmitter = require("../../validation/useCustomMessageEmitter.js");
+var import_validation_builders = require("../../validation/validation-builders.js");
 var import_formfield_messages_state_reducer = require("../state/formfield-messages-state-reducer.js");
 function getErrorType(validityState) {
   if (!validityState) {
@@ -64,33 +68,64 @@ function getErrorType(validityState) {
   }
   return null;
 }
+const validationMessages = (0, import_react_intl.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__ */ (0, import_jsx_runtime.jsx)(
-        import_react_intl.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__ */ (0, import_jsx_runtime.jsx)(import_react_intl.FormattedMessage, { ...validationMessages.badInput });
     case "patternMismatch":
-      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-        import_react_intl.FormattedMessage,
-        {
-          id: "qPeX7AgKbKzBFqGZ",
-          defaultMessage: "Please match the format requested.",
-          description: "Error message for input that doesn't follow the requested pattern."
-        }
-      );
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_intl.FormattedMessage, { ...validationMessages.patternMismatch });
     case "rangeOverflow":
       return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
         import_react_intl.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") }
         }
       );
@@ -98,9 +133,7 @@ function getI18nErrorMessage(key, ref) {
       return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
         import_react_intl.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") }
         }
       );
@@ -108,9 +141,7 @@ function getI18nErrorMessage(key, ref) {
       return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
         import_react_intl.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"
@@ -121,9 +152,7 @@ function getI18nErrorMessage(key, ref) {
       return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
         import_react_intl.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") }
         }
       );
@@ -131,9 +160,7 @@ function getI18nErrorMessage(key, ref) {
       return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
         import_react_intl.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") }
         }
       );
@@ -141,27 +168,63 @@ function getI18nErrorMessage(key, ref) {
       return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
         import_react_intl.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__ */ (0, import_jsx_runtime.jsx)(
-        import_react_intl.FormattedMessage,
-        {
-          id: "laIylhVFbIvEZrxt",
-          defaultMessage: "Please fill in this field.",
-          description: "Error message for missing input."
-        }
-      );
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_intl.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 (0, import_validation_builders.getValidationState)(
+    element,
+    trigger,
+    errorType ? getI18nValidationMessage(intl, errorType, element) : void 0
+  );
+}
 function useFormFieldValidationAriaProps(ariaLabelingProps = {}) {
   const { state } = (0, import_useFormFieldMessagesContext.useFormFieldMessagesContext)();
   const _ariaProps = (0, import_react.useMemo)(() => {
@@ -181,8 +244,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 } = (0, import_useFormFieldMessagesContext.useFormFieldMessagesContext)();
+  const intl = (0, import_react_intl.useIntl)();
   const errorId = (0, import_useId.useId)();
   const ariaProps = useFormFieldValidationAriaProps(ariaLabelingProps);
   const formControlMessagesRef = (0, import_react.useRef)(state.formControlMessages);
@@ -226,21 +290,32 @@ function useFormFieldValidation(ref, validationDeps = {}, ariaLabelingProps = {}
     },
     [dispatch, updateErrorMessages]
   );
+  const emitValidationState = (0, import_useCustomMessageEmitter.useCustomMessageEmitter)(
+    emitValidationStateProp,
+    () => getI18nValidationState(intl, ref.current, "manual")
+  );
   const onBlur = (0, import_react.useCallback)(() => {
     ref.current?.reportValidity();
     dispatch?.({
       type: import_formfield_messages_state_reducer.FormFieldMessagesAction.SETISTOUCHED,
       payload: { isTouched: true }
     });
-  }, [dispatch, ref]);
+    if (!state.isTouched) {
+      emitValidationState(getI18nValidationState(intl, ref.current, "blur"));
+    }
+  }, [dispatch, emitValidationState, intl, ref, state.isTouched]);
+  const onChange = (0, import_react.useCallback)(() => {
+    updateErrorMessages();
+    emitValidationState(getI18nValidationState(intl, ref.current, "change"));
+  }, [updateErrorMessages, emitValidationState, intl, ref]);
   const validationDepsKey = JSON.stringify(validationDeps);
   (0, import_react.useEffect)(() => {
-    updateErrorMessages();
-  }, [validationDepsKey, updateErrorMessages]);
+    onChange();
+  }, [validationDepsKey, onChange]);
   return {
     ariaProps,
     onInvalid,
-    onChange: updateErrorMessages,
+    onChange,
     onBlur
   };
 }

package/forms/forms-core/state/formfield-messages-state-reducer.d.ts

@@ -4,13 +4,15 @@ export declare const enum FormFieldMessagesAction {
     REMOVEMESSAGE = "removemessage",
     DISABLEMESSAGE = "disablemessage",
     SETISTOUCHED = "setistouched",
-    ADDFORMCONTROLID = "addformcontrolid",
-    REMOVEFORMCONTROLID = "removeformcontrolid"
+    SETFORMCONTROLID = "setformcontrolid",
+    ADDMEMBERFORMCONTROLID = "addmemberformcontrolid",
+    REMOVEMEMBERFORMCONTROLID = "removememberformcontrolid"
 }
 export type FormFieldMessagesReducerAction = {
     type: FormFieldMessagesAction.ADDMESSAGE;
     payload: (Omit<FormFieldControlMessage, 'id'> | FormFieldCustomMessage) & {
         showError?: boolean;
+        messageText?: string;
     };
 } | {
     type: FormFieldMessagesAction.REMOVEMESSAGE;
@@ -26,14 +28,19 @@ export type FormFieldMessagesReducerAction = {
         isTouched: boolean;
     };
 } | {
-    type: FormFieldMessagesAction.ADDFORMCONTROLID;
+    type: FormFieldMessagesAction.SETFORMCONTROLID;
     payload: {
-        controlId: string;
+        formControlId: string | undefined;
     };
 } | {
-    type: FormFieldMessagesAction.REMOVEFORMCONTROLID;
+    type: FormFieldMessagesAction.ADDMEMBERFORMCONTROLID;
     payload: {
-        controlId: string;
+        formControlId: string;
+    };
+} | {
+    type: FormFieldMessagesAction.REMOVEMEMBERFORMCONTROLID;
+    payload: {
+        formControlId: string;
     };
 };
 /** FormFieldMessage reducer function used for managing FormFieldMessages and FormFieldCustomMessages. */

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

@@ -26,8 +26,9 @@ var FormFieldMessagesAction = /* @__PURE__ */ ((FormFieldMessagesAction2) => {
   FormFieldMessagesAction2["REMOVEMESSAGE"] = "removemessage";
   FormFieldMessagesAction2["DISABLEMESSAGE"] = "disablemessage";
   FormFieldMessagesAction2["SETISTOUCHED"] = "setistouched";
-  FormFieldMessagesAction2["ADDFORMCONTROLID"] = "addformcontrolid";
-  FormFieldMessagesAction2["REMOVEFORMCONTROLID"] = "removeformcontrolid";
+  FormFieldMessagesAction2["SETFORMCONTROLID"] = "setformcontrolid";
+  FormFieldMessagesAction2["ADDMEMBERFORMCONTROLID"] = "addmemberformcontrolid";
+  FormFieldMessagesAction2["REMOVEMEMBERFORMCONTROLID"] = "removememberformcontrolid";
   return FormFieldMessagesAction2;
 })(FormFieldMessagesAction || {});
 function isFormControlPayload(payload, messageType) {
@@ -42,6 +43,15 @@ function setHTMLElementValidity(id, isValid) {
     element.setCustomValidity(isValid ? "" : " ");
   }
 }
+function pickNativeValidityTargets(state) {
+  if (state.memberFormControlIds && state.memberFormControlIds.length > 0) {
+    return state.memberFormControlIds;
+  }
+  if (state.formControlId !== void 0) {
+    return [state.formControlId];
+  }
+  return void 0;
+}
 function updateValidity(state, explicitControlId) {
   const { customMessages, formControlMessages, isTouched, isDisabled } = state;
   const hasCustomError = customMessages.some(
@@ -64,7 +74,8 @@ function updateValidity(state, explicitControlId) {
       showError: newShowError
     };
   }
-  state.controlIds?.forEach(
+  const targetControlIds = pickNativeValidityTargets(state);
+  targetControlIds?.forEach(
     (id) => setHTMLElementValidity(id, nativeValidityIsValid)
   );
   return {
@@ -114,6 +125,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;
@@ -139,6 +156,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;
@@ -153,20 +174,25 @@ function formFieldMessagesReducer(state, action) {
     const { payload } = action;
     newState.isTouched = payload.isTouched;
   }
-  if (action.type === "addformcontrolid" /* ADDFORMCONTROLID */) {
+  if (action.type === "setformcontrolid" /* SETFORMCONTROLID */) {
+    newState.formControlId = action.payload.formControlId;
+  }
+  if (action.type === "addmemberformcontrolid" /* ADDMEMBERFORMCONTROLID */) {
     const {
-      payload: { controlId }
+      payload: { formControlId }
     } = action;
-    newState.controlIds ??= [];
-    if (!newState.controlIds.includes(controlId)) {
-      newState.controlIds.push(controlId);
+    newState.memberFormControlIds ??= [];
+    if (!newState.memberFormControlIds.includes(formControlId)) {
+      newState.memberFormControlIds.push(formControlId);
     }
   }
-  if (action.type === "removeformcontrolid" /* REMOVEFORMCONTROLID */) {
+  if (action.type === "removememberformcontrolid" /* REMOVEMEMBERFORMCONTROLID */) {
     const {
-      payload: { controlId }
+      payload: { formControlId }
     } = action;
-    newState.controlIds = state.controlIds?.filter((id) => id !== controlId);
+    newState.memberFormControlIds = state.memberFormControlIds?.filter(
+      (id) => id !== formControlId
+    );
   }
   return updateValidity(newState);
 }

package/forms/forms-core/state/formfield-state-reducer.d.ts

@@ -6,16 +6,28 @@ export declare const enum FormFieldAction {
     UPDATE = "update"
 }
 /**
+ * @deprecated The FormField reducer is internal state — consumers should not
+ * dispatch against it. This type and every field on it will be removed with
+ * APPDEV-18318. Set `disabled` / `required` / `readOnly` / `aria-disabled` on
+ * the form control directly, and pass `id` to the control rather than the
+ * FormField.
  * @public
  */
 export type FormFieldReducerActionPayload = {
+    /** @deprecated Removed with APPDEV-18318. Pass `id` to the form control instead. */
     id?: string;
+    /** @deprecated Removed with APPDEV-18318. Set on the form control directly. */
     disabled?: boolean;
+    /** @deprecated Removed with APPDEV-18318. Set on the form control directly. */
     required?: boolean;
+    /** @deprecated Removed with APPDEV-18318. Set `aria-disabled` on the form control directly. */
     ariaDisabled?: boolean;
+    /** @deprecated Removed with APPDEV-18318. Set on the form control directly. */
     readOnly?: boolean;
 };
 /**
+ * @deprecated The FormField reducer is internal state — consumers should not
+ * dispatch against it. Removed with APPDEV-18318.
  * @public
  */
 export type FormFieldReducerAction = {

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

@@ -29,11 +29,26 @@ function _formFieldReducer(state, action) {
   const { type, payload } = action;
   if (type === "update" /* UPDATE */) {
     return {
-      controlId: payload.id || state.controlId,
-      required: payload.required !== void 0 ? payload.required : state.required,
-      disabled: payload.disabled !== void 0 ? payload.disabled : state.disabled,
-      ariaDisabled: payload.ariaDisabled !== void 0 ? payload.ariaDisabled : state.ariaDisabled,
-      readOnly: payload.readOnly !== void 0 ? payload.readOnly : state.readOnly
+      ...state,
+      required: (
+        // eslint-disable-next-line @typescript-eslint/no-deprecated -- APPDEV-18321
+        payload.required !== void 0 ? payload.required : state.required
+      ),
+      disabled: (
+        // eslint-disable-next-line @typescript-eslint/no-deprecated -- APPDEV-18321
+        payload.disabled !== void 0 ? payload.disabled : state.disabled
+      ),
+      ariaDisabled: (
+        // eslint-disable-next-line @typescript-eslint/no-deprecated -- APPDEV-18321
+        payload.ariaDisabled !== void 0 ? (
+          // eslint-disable-next-line @typescript-eslint/no-deprecated -- APPDEV-18321
+          payload.ariaDisabled
+        ) : state.ariaDisabled
+      ),
+      readOnly: (
+        // eslint-disable-next-line @typescript-eslint/no-deprecated -- APPDEV-18321
+        payload.readOnly !== void 0 ? payload.readOnly : state.readOnly
+      )
     };
   }
   return state;

package/forms/forms-core/time/helpers.js

@@ -109,7 +109,7 @@ function getSafeRegionalFormat() {
   const modifiedRegion = removeProblematicLanguagesFromRegion(region);
   try {
     new Intl.Locale(modifiedRegion);
-    if (Intl.DisplayNames.supportedLocalesOf([modifiedRegion]).length === 0) {
+    if (typeof Intl.DisplayNames.supportedLocalesOf === "function" && Intl.DisplayNames.supportedLocalesOf([modifiedRegion]).length === 0) {
       throw new Error(
         `Locale "${modifiedRegion}" is not supported by Intl.DisplayNames.`
       );

package/forms/forms-core/types/formfield-messages.types.d.ts

@@ -29,8 +29,15 @@ export type FormFieldMessage = FormFieldCustomMessage | FormFieldControlMessage;
 export interface FormFieldMessageContextState {
     formControlMessages: FormFieldControlMessage[];
     customMessages: FormFieldCustomMessage[];
+    /** Plain-string content for each custom message, keyed by id. */
+    customMessageTexts?: Record<string, string>;
     isTouched?: boolean;
-    controlIds?: string[];
+    /** @internal */
+    formFieldId?: string;
+    /** @internal */
+    formControlId?: string;
+    /** @internal */
+    memberFormControlIds?: string[];
     isDisabled?: boolean;
     showError: boolean;
     isValid?: boolean;

package/forms/forms-core/types/formfield.types.d.ts

@@ -3,7 +3,12 @@
  * @public
  */
 export interface SharedFormFieldProps {
-    /** An id for the form control (also needed to link the label). */
+    /**
+     * An id for the form control (also needed to link the label).
+     *
+     * @deprecated This prop is legacy and does not affect `FormField` itself.
+     * Pass `id` to the form control instead.
+     */
     controlId?: string;
     /**
      * Defines if any form control within the FormField is required.

package/forms/hooks/useAutofillEvent.css

@@ -1,20 +1,20 @@
-@keyframes _yfwka31-3-7-1 {
+@keyframes _yfwka31-3-9-0 {
 
 }
-@keyframes _yfwka32-3-7-1 {
+@keyframes _yfwka32-3-9-0 {
 
 }
-._yfwka33-3-7-1:-webkit-autofill:is(._yfwka33-3-7-1,:hover,:focus) {
+._yfwka33-3-9-0:-webkit-autofill:is(._yfwka33-3-9-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-9-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-9-0:-webkit-autofill {
+  animation-name: _yfwka31-3-9-0;
   animation-duration: 0.001s;
 }
-._yfwka33-3-7-1:not(:-webkit-autofill) {
-  animation-name: _yfwka32-3-7-1;
+._yfwka33-3-9-0:not(:-webkit-autofill) {
+  animation-name: _yfwka32-3-9-0;
   animation-duration: 0.001s;
 }
 input:-webkit-autofill::spelling-error {

package/forms/hooks/useAutofillEvent.sty.js

@@ -24,7 +24,7 @@ __export(useAutofillEvent_css_exports, {
 });
 module.exports = __toCommonJS(useAutofillEvent_css_exports);
 var import_useAutofillEvent_css_ts_vanilla = require("./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-9-0)";
+var autofillCSS = "_yfwka33-3-9-0";
+var end = "_yfwka32-3-9-0";
+var start = "_yfwka31-3-9-0";

package/forms/index.d.ts

@@ -68,6 +68,8 @@ export type { SelectTriggerProps } from './select/SelectTrigger.js';
 export type { SelectContentWidthOptionsType, SelectTriggerWidthOptionsType, SelectMultiValue, SelectSingleValue, } from './select/types.js';
 export { isFormControlRef as _isFormControlRef, isFormControlWithOverlayRef as _isFormControlWithOverlayRef, } from './shared-types.js';
 export type { FormControlRef, FormControlWithOverlayRef, TimeRangePickerRef, } from './shared-types.js';
+export { NativeValidityStateKeys, StratoValidityStateKeys, ValidationError, ValidityStateKey, } from './validation/types.js';
+export type { NativeValidityStateKey, StratoValidityStateKey, ValidationErrorOptions, ValidationErrorSource, ValidationState, ValidationStatus, ValidationTrigger, } from './validation/types.js';
 export { NumberSpinButton as _NumberSpinButton } from './spin-buttons/number-spin-button/NumberSpinButton.js';
 export type { NumberSpinButtonDisplayFormat as _NumberSpinButtonDisplayFormat, NumberSpinButtonProps as _NumberSpinButtonProps, NumberSpinButtonRef as _NumberSpinButtonRef, } from './spin-buttons/number-spin-button/types.js';
 export { SpinButtonGroup as _SpinButtonGroup } from './spin-buttons/spin-button-group/SpinButtonGroup.js';