@dynatrace/strato-components 3.7.0 → 3.8.0

package/forms/radio/Radio.js

@@ -46,6 +46,7 @@ var import_Text = require("../../typography/text/Text.js");
 var import_useFormFieldMessagesContext = require("../forms-core/hooks/useFormFieldMessagesContext.js");
 var import_useFormFieldValidation = require("../forms-core/hooks/useFormFieldValidation.js");
 var import_formfield_messages_state_reducer = require("../forms-core/state/formfield-messages-state-reducer.js");
+var import_validation_builders = require("../validation/validation-builders.js");
 const COMPONENT_NAME = "Radio";
 const Radio = /* @__PURE__ */ (0, import_react.forwardRef)(
   (props, forwardedRef) => {
@@ -81,7 +82,8 @@ const Radio = /* @__PURE__ */ (0, import_react.forwardRef)(
       name: groupName,
       required: groupRequired,
       value: groupValue,
-      onChange
+      onChange,
+      onValidityChange
     } = radioGroupContext || {};
     const radioLabelRef = (0, import_react.useRef)(null);
     const inputRef = (0, import_react.useRef)(null);
@@ -101,6 +103,18 @@ const Radio = /* @__PURE__ */ (0, import_react.forwardRef)(
             type: import_formfield_messages_state_reducer.FormFieldMessagesAction.SETISTOUCHED,
             payload: { isTouched: true }
           });
+        },
+        // DEPRECATION: [APPDEV-18178] BREAKING-CHANGE: Remove validateAsync() and change validate() to return Promise<ValidationState>.
+        validateAsync: async () => {
+          if (controlState !== void 0) {
+            return (0, import_validation_builders.getValidationState)(inputRef.current, "manual");
+          }
+          inputRef.current?.checkValidity();
+          messagesContextDispatch?.({
+            type: import_formfield_messages_state_reducer.FormFieldMessagesAction.SETISTOUCHED,
+            payload: { isTouched: true }
+          });
+          return (0, import_validation_builders.getValidationState)(inputRef.current, "manual");
         }
       };
     });
@@ -111,13 +125,15 @@ const Radio = /* @__PURE__ */ (0, import_react.forwardRef)(
       ariaProps
     } = (0, import_useFormFieldValidation.useFormFieldValidation)(
       inputRef,
-      { groupRequired },
+      { groupRequired, groupValue: String(groupValue) },
       {
         "aria-label": ariaLabelProp,
         "aria-labelledby": ariaLabelledByProp,
         "aria-describedby": ariaDescribedByProp,
         "aria-details": ariaDetailsProp
-      }
+      },
+      id,
+      onValidityChange
     );
     (0, import_react.useEffect)(() => {
       messagesContextDispatch?.({

package/forms/radio/RadioGroup.js

@@ -33,6 +33,7 @@ module.exports = __toCommonJS(RadioGroup_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_clsx = __toESM(require("clsx"));
 var import_react = require("react");
+var import_react_intl = require("react-intl");
 var import_RadioGroupContext = require("./RadioGroupContext.js");
 var styles = __toESM(require("./styles.sty.js"));
 var import_useControllableState = require("../../core/hooks/useControllableState.js");
@@ -42,9 +43,12 @@ var import_Flex = require("../../layouts/flex/Flex.js");
 var import_FormFieldMessageContextProvider = require("../forms-core/components/form-field/FormFieldMessageContextProvider.js");
 var import_FormFieldMessageBaseItem = require("../forms-core/components/form-field-messages/FormFieldMessageBaseItem.js");
 var import_useFormFieldMessagesContext = require("../forms-core/hooks/useFormFieldMessagesContext.js");
+var import_useFormFieldValidation = require("../forms-core/hooks/useFormFieldValidation.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_useInputHint = require("../hooks/useInputHint.js");
+var import_useCustomMessageEmitter = require("../validation/useCustomMessageEmitter.js");
+var import_useValidationStateEmitter = require("../validation/useValidationStateEmitter.js");
 const RadioGroupRoot = /* @__PURE__ */ (0, import_react.forwardRef)((props, forwardedRef) => {
   const {
     children,
@@ -55,6 +59,7 @@ const RadioGroupRoot = /* @__PURE__ */ (0, import_react.forwardRef)((props, forw
     defaultValue,
     controlState,
     onChange,
+    onValidityChange,
     readOnly: propReadOnly,
     required: propRequired,
     "aria-disabled": propAriaDisabled,
@@ -93,7 +98,17 @@ const RadioGroupRoot = /* @__PURE__ */ (0, import_react.forwardRef)((props, forw
     value,
     onChange
   });
+  const intl = (0, import_react_intl.useIntl)();
   const wrapperRef = (0, import_react.useRef)(null);
+  const _emitValidationState = (0, import_useValidationStateEmitter.useValidationStateEmitter)(onValidityChange);
+  const emitValidationState = (0, import_useCustomMessageEmitter.useCustomMessageEmitter)(
+    _emitValidationState,
+    () => (0, import_useFormFieldValidation.getI18nValidationState)(
+      intl,
+      wrapperRef.current?.querySelector("input"),
+      "manual"
+    )
+  );
   (0, import_react.useImperativeHandle)(forwardedRef, () => {
     return {
       element: wrapperRef.current,
@@ -107,14 +122,34 @@ const RadioGroupRoot = /* @__PURE__ */ (0, import_react.forwardRef)((props, forw
         if (controlState !== void 0) {
           return;
         }
-        const inputs = wrapperRef.current?.querySelectorAll("input");
-        inputs?.forEach((input) => {
-          input?.checkValidity();
+        wrapperRef.current?.querySelectorAll("input")?.forEach((i) => i.checkValidity());
+        messagesContextDispatch?.({
+          type: import_formfield_messages_state_reducer.FormFieldMessagesAction.SETISTOUCHED,
+          payload: { isTouched: true }
         });
+        const firstInput = wrapperRef.current?.querySelector(
+          "input"
+        );
+        emitValidationState((0, import_useFormFieldValidation.getI18nValidationState)(intl, firstInput, "manual"));
+      },
+      // DEPRECATION: [APPDEV-18178] BREAKING-CHANGE: Remove validateAsync() and change validate() to return Promise<ValidationState>.
+      validateAsync: async () => {
+        const firstInput = wrapperRef.current?.querySelector(
+          "input"
+        );
+        if (controlState !== void 0) {
+          return emitValidationState(
+            (0, import_useFormFieldValidation.getI18nValidationState)(intl, firstInput, "manual")
+          );
+        }
+        wrapperRef.current?.querySelectorAll("input")?.forEach((i) => i.checkValidity());
         messagesContextDispatch?.({
           type: import_formfield_messages_state_reducer.FormFieldMessagesAction.SETISTOUCHED,
           payload: { isTouched: true }
         });
+        return emitValidationState(
+          (0, import_useFormFieldValidation.getI18nValidationState)(intl, firstInput, "manual")
+        );
       }
     };
   });
@@ -133,7 +168,8 @@ const RadioGroupRoot = /* @__PURE__ */ (0, import_react.forwardRef)((props, forw
       onChange: setControllableState,
       readOnly,
       required,
-      controlState
+      controlState,
+      onValidityChange: emitValidationState
     }),
     [
       name,
@@ -144,7 +180,8 @@ const RadioGroupRoot = /* @__PURE__ */ (0, import_react.forwardRef)((props, forw
       setControllableState,
       readOnly,
       required,
-      controlState
+      controlState,
+      emitValidationState
     ]
   );
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(

package/forms/radio/RadioGroupContext.d.ts

@@ -1,5 +1,6 @@
 import { type FocusEvent } from 'react';
 import type { FormControlState } from '../../core/types/form-control-state.js';
+import type { ValidationState } from '../validation/types.js';
 type RadioGroupContextType = {
     /** The name of the radio group. */
     name?: string;
@@ -22,6 +23,11 @@ type RadioGroupContextType = {
     onChange?: (value: string, event?: FocusEvent<HTMLInputElement>) => void;
     /** Describes an enhanced representation of a control validity state and hints about its error for the end user. */
     controlState?: FormControlState;
+    /**
+     * Called when validation state changes. Fires automatically on blur or change,
+     * and when triggered manually via `validate()` or `validateAsync()`.
+     */
+    onValidityChange?: (state: ValidationState) => void;
 };
 /** Context describing the state of a RadioGroup */
 export declare const RadioGroupContext: import("react").Context<RadioGroupContextType | undefined>;

package/forms/radio/styles.css

@@ -1,12 +1,12 @@
-._h96idu0-3-7-0 {
+._h96idu0-3-8-0 {
   display: flex;
   flex-direction: column;
   gap: var(--dt-spacings-size-4, 4px);
 }
-._h96idu1-3-7-0 {
+._h96idu1-3-8-0 {
   cursor: default;
 }
-._h96idu5-3-7-0 {
+._h96idu5-3-8-0 {
   display: flex;
   gap: var(--dt-spacings-size-8, 8px);
   position: relative;
@@ -15,14 +15,14 @@
   vertical-align: middle;
   cursor: pointer;
 }
-._h96idu5-3-7-0._h96idu3-3-7-0 {
+._h96idu5-3-8-0._h96idu3-3-8-0 {
   cursor: not-allowed;
   color: var(--dt-colors-text-neutral-disabled, #595a7d80);
 }
-._h96idu1-3-7-0 ._h96idu5-3-7-0 {
+._h96idu1-3-8-0 ._h96idu5-3-8-0 {
   cursor: default;
 }
-._h96idu6-3-7-0 {
+._h96idu6-3-8-0 {
   position: relative;
   display: inline-flex;
   align-items: center;
@@ -31,38 +31,38 @@
   min-width: var(--dt-spacings-size-20, 20px);
   height: var(--dt-spacings-size-20, 20px);
   border-radius: var(--dt-borders-radius-field-emphasized, 9999px);
-  background-color: var(--_bx32h3-3-7-0);
+  background-color: var(--_bx32h3-3-8-0);
 }
-._h96idu7-3-7-0 {
+._h96idu7-3-8-0 {
   background-color: var(--dt-colors-background-field-neutral-disabled, #e4e5eb80);
   box-shadow: inset 0 0 0 var(--dt-borders-width-default, 1px) var(--dt-colors-border-neutral-disabled, #dadbe480);
 }
-._h96idue-3-7-0 {
+._h96idue-3-8-0 {
   background-color: var(--dt-colors-background-field-neutral-disabled, #e4e5eb80);
 }
-._h96idug-3-7-0 {
+._h96idug-3-8-0 {
   box-shadow: inset 0 0 0 var(--dt-borders-width-default, 1px) var(--dt-colors-border-critical-accent, #bb0731);
 }
-._h96iduh-3-7-0 {
+._h96iduh-3-8-0 {
   box-shadow: inset 0 0 0 var(--dt-borders-width-default, 1px) var(--dt-colors-border-neutral-accent, #595a7d);
 }
-._h96idui-3-7-0 {
+._h96idui-3-8-0 {
   box-shadow: inset 0 0 0 var(--dt-borders-width-default, 1px) var(--dt-colors-border-neutral-disabled, #dadbe480);
 }
-._h96iduj-3-7-0 {
+._h96iduj-3-8-0 {
   background-color: var(--dt-colors-background-field-critical-emphasized, #f8e1e1);
   box-shadow: inset 0 0 0 var(--dt-borders-width-default, 1px) var(--dt-colors-border-critical-accent, #bb0731);
 }
-._h96iduk-3-7-0 {
+._h96iduk-3-8-0 {
   height: 100%;
-  fill: var(--_bx32h1-3-7-0);
+  fill: var(--_bx32h1-3-8-0);
 }
-._h96idu5-3-7-0:not(._h96idu4-3-7-0) ._h96iduk-3-7-0 {
+._h96idu5-3-8-0:not(._h96idu4-3-8-0) ._h96iduk-3-8-0 {
   display: none;
 }
-._h96idu1-3-7-0 ._h96iduk-3-7-0 {
+._h96idu1-3-8-0 ._h96iduk-3-8-0 {
   fill: var(--dt-colors-icon-neutral-subdued, #595a7d);
 }
-._h96idu2-3-7-0._h96idu1-3-7-0 ._h96iduk-3-7-0 {
+._h96idu2-3-8-0._h96idu1-3-8-0 ._h96iduk-3-8-0 {
   fill: var(--dt-colors-icon-critical-default, #bb0731);
 }

package/forms/radio/styles.sty.js

@@ -31,11 +31,11 @@ var import_AppRoot_css_ts_vanilla = require("../../core/components/app-root/AppR
 var import_field_css_ts_vanilla = require("../../styles/field.css");
 var import_styles_css_ts_vanilla = require("./styles.css");
 var import_createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
-var checked = "_h96idu4-3-7-0";
-var disabled = "_h96idu3-3-7-0";
-var group = "_h96idu0-3-7-0";
-var hasError = "_h96idu2-3-7-0";
-var innerKnob = "_h96iduk-3-7-0";
-var knob = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_h96idu6-3-7-0", variantClassNames: { disabled: { true: "_h96idu7-3-7-0" }, checked: { true: "_h96idu8-3-7-0", false: "_h96idu9-3-7-0" }, hasError: { true: "_h96idua-3-7-0", false: "_h96idub-3-7-0" }, isFocusVisible: { true: "_h96iduc-3-7-0", false: "_h96idud-3-7-0" }, readOnly: { true: "_h96idue-3-7-0", false: "_h96iduf-3-7-0" } }, defaultVariants: {}, compoundVariants: [[{ checked: false, hasError: true, isFocusVisible: false, disabled: false, readOnly: false }, "_h96idug-3-7-0"], [{ checked: false, hasError: false, isFocusVisible: false, disabled: false, readOnly: false }, "_h96iduh-3-7-0"], [{ readOnly: true, disabled: false }, "_h96idui-3-7-0"], [{ readOnly: true, hasError: true, disabled: false }, "_h96iduj-3-7-0"]] });
-var label = "_h96idu5-3-7-0";
-var readOnly = "_h96idu1-3-7-0";
+var checked = "_h96idu4-3-8-0";
+var disabled = "_h96idu3-3-8-0";
+var group = "_h96idu0-3-8-0";
+var hasError = "_h96idu2-3-8-0";
+var innerKnob = "_h96iduk-3-8-0";
+var knob = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_h96idu6-3-8-0", variantClassNames: { disabled: { true: "_h96idu7-3-8-0" }, checked: { true: "_h96idu8-3-8-0", false: "_h96idu9-3-8-0" }, hasError: { true: "_h96idua-3-8-0", false: "_h96idub-3-8-0" }, isFocusVisible: { true: "_h96iduc-3-8-0", false: "_h96idud-3-8-0" }, readOnly: { true: "_h96idue-3-8-0", false: "_h96iduf-3-8-0" } }, defaultVariants: {}, compoundVariants: [[{ checked: false, hasError: true, isFocusVisible: false, disabled: false, readOnly: false }, "_h96idug-3-8-0"], [{ checked: false, hasError: false, isFocusVisible: false, disabled: false, readOnly: false }, "_h96iduh-3-8-0"], [{ readOnly: true, disabled: false }, "_h96idui-3-8-0"], [{ readOnly: true, hasError: true, disabled: false }, "_h96iduj-3-8-0"]] });
+var label = "_h96idu5-3-8-0";
+var readOnly = "_h96idu1-3-8-0";

package/forms/search-input/SearchInput.css

@@ -1,6 +1,6 @@
-._1mumub80-3-7-0 {
+._1mumub80-3-8-0 {
   min-width: 192px;
 }
-._1mumub81-3-7-0 {
+._1mumub81-3-8-0 {
   min-width: 272px;
 }

package/forms/search-input/SearchInput.sty.js

@@ -22,4 +22,4 @@ __export(SearchInput_css_exports, {
 module.exports = __toCommonJS(SearchInput_css_exports);
 var import_SearchInput_css_ts_vanilla = require("./SearchInput.css");
 var import_createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
-var searchInput = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_1mumub80-3-7-0", variantClassNames: { hasStepper: { true: "_1mumub81-3-7-0" } }, defaultVariants: {}, compoundVariants: [] });
+var searchInput = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_1mumub80-3-8-0", variantClassNames: { hasStepper: { true: "_1mumub81-3-8-0" } }, defaultVariants: {}, compoundVariants: [] });

package/forms/search-input/Stepper.css

@@ -1,21 +1,21 @@
-._s3yy5s0-3-7-0 {
+._s3yy5s0-3-8-0 {
   display: flex;
   gap: var(--dt-spacings-size-4, 4px);
   color: var(--dt-colors-text-neutral-subdued, #595a7d);
   align-items: center;
 }
-._s3yy5s1-3-7-0 {
+._s3yy5s1-3-8-0 {
   display: flex;
   gap: var(--dt-spacings-size-0, 0);
 }
-._s3yy5s2-3-7-0 {
+._s3yy5s2-3-8-0 {
   margin: 0;
 }
-._s3yy5s1-3-7-0 > ._s3yy5s2-3-7-0:first-child {
+._s3yy5s1-3-8-0 > ._s3yy5s2-3-8-0:first-child {
   border-top-right-radius: 0;
   border-bottom-right-radius: 0;
 }
-._s3yy5s1-3-7-0 > ._s3yy5s2-3-7-0:last-child {
+._s3yy5s1-3-8-0 > ._s3yy5s2-3-8-0:last-child {
   border-top-left-radius: 0;
   border-bottom-left-radius: 0;
 }

package/forms/search-input/Stepper.sty.js

@@ -29,6 +29,6 @@ var import_useAutofillEvent_css_ts_vanilla = require("../hooks/useAutofillEvent.
 var import_BaseInput_css_ts_vanilla = require("../_base-input/BaseInput.css");
 var import_BaseInputContent_css_ts_vanilla = require("../_base-input/BaseInputContent.css");
 var import_Stepper_css_ts_vanilla = require("./Stepper.css");
-var matchPositionIndicators = "_s3yy5s0-3-7-0 _o6rxr70-3-7-0 _da9a8v0-3-7-0 _da9a8v2-3-7-0 _da9a8v3-3-7-0 _da9a8vb-3-7-0";
-var stepperButton = "_s3yy5s2-3-7-0 _1a8lqy9e-3-7-0";
-var stepperButtons = "_s3yy5s1-3-7-0";
+var matchPositionIndicators = "_s3yy5s0-3-8-0 _o6rxr70-3-8-0 _da9a8v0-3-8-0 _da9a8v2-3-8-0 _da9a8v3-3-8-0 _da9a8vb-3-8-0";
+var stepperButton = "_s3yy5s2-3-8-0 _1a8lqy9e-3-8-0";
+var stepperButtons = "_s3yy5s1-3-8-0";

package/forms/select/Select.js

@@ -56,11 +56,15 @@ var import_useControllableState = require("../../core/hooks/useControllableState
 var import_useFormControlState = require("../../core/hooks/useFormControlState.js");
 var import_sdk_logger = require("../../core/sdk/sdk-logger.js");
 var import_merge_props = require("../../core/utils/merge-props.js");
+var import_modality = require("../../core/utils/modality.js");
 var import_FormFieldMessageContextProvider = require("../forms-core/components/form-field/FormFieldMessageContextProvider.js");
 var import_useFormFieldMessagesContext = require("../forms-core/hooks/useFormFieldMessagesContext.js");
 var import_useFormFieldValidation = require("../forms-core/hooks/useFormFieldValidation.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");
 const COMPONENT_NAME = "Select";
 function getNewFocusedOption(options, focusedOptionValue) {
   for (const optionOrGroup of options) {
@@ -104,6 +108,7 @@ function SelectFwd(props, forwardedRef) {
     "data-dtrum-allow": dataDtrumAllow,
     "aria-disabled": ariaDisabledProp,
     onOpenChange,
+    onValidityChange,
     required: propsRequired,
     ...remainingProps
   } = props;
@@ -148,6 +153,11 @@ function SelectFwd(props, forwardedRef) {
     multiple: multiple === true
   });
   const hiddenSelectRef = (0, import_react.useRef)(null);
+  const _emitValidationState = (0, import_useValidationStateEmitter.useValidationStateEmitter)(onValidityChange);
+  const emitValidationState = (0, import_useCustomMessageEmitter.useCustomMessageEmitter)(
+    _emitValidationState,
+    () => (0, import_validation_builders.getValidationState)(hiddenSelectRef.current, "manual")
+  );
   const [triggerRef, setTriggerRef] = (0, import_react.useState)(null);
   const { disabled, required, id, ariaDisabled, readOnly } = (0, import_useSyncedFormControlProps.useSyncedFormControlProps)({
     propDisabled: propsDisabled,
@@ -156,9 +166,14 @@ function SelectFwd(props, forwardedRef) {
     propAriaDisabled: ariaDisabledProp,
     propReadOnly
   });
-  const { onBlur: validationOnBlur } = (0, import_useFormFieldValidation.useFormFieldValidation)(hiddenSelectRef, {
-    required
-  });
+  const { onBlur: validationOnBlur } = (0, import_useFormFieldValidation.useFormFieldValidation)(
+    hiddenSelectRef,
+    { required, value: (0, import_use_select_options.safeStringify)(propsValue) },
+    void 0,
+    void 0,
+    _emitValidationState
+  );
+  const { state: messagesContextState, dispatch: messagesContextDispatch } = (0, import_useFormFieldMessagesContext.useFormFieldMessagesContext)();
   const menuOpenReducer = (0, import_react.useCallback)(
     (state, action) => {
       if (readOnly) {
@@ -167,13 +182,31 @@ function SelectFwd(props, forwardedRef) {
       const newState = (0, import_select_menu_state_reducer.reducer)(state, action);
       if (state !== newState) {
         queueMicrotask(() => {
-          newState === false && !controlState && validationOnBlur();
           onOpenChange?.(newState);
         });
+        if (state === true && newState === false) {
+          queueMicrotask(() => {
+            messagesContextDispatch?.({
+              type: import_formfield_messages_state_reducer.FormFieldMessagesAction.SETISTOUCHED,
+              payload: { isTouched: true }
+            });
+            hiddenSelectRef.current?.reportValidity();
+            emitValidationState(
+              (0, import_validation_builders.getValidationState)(hiddenSelectRef.current, "blur")
+            );
+          });
+        }
       }
       return newState;
     },
-    [readOnly, controlState, validationOnBlur, onOpenChange]
+    [
+      readOnly,
+      controlState,
+      onOpenChange,
+      messagesContextDispatch,
+      hiddenSelectRef,
+      emitValidationState
+    ]
   );
   const [menuOpen, dispatch] = (0, import_react.useReducer)(menuOpenReducer, false);
   const [isFocusWithin, setIsFocusWithin] = (0, import_react.useState)(false);
@@ -182,7 +215,6 @@ function SelectFwd(props, forwardedRef) {
     defaultValue: filterDefaultValueProp,
     onChange: filterOnChangeProp
   });
-  const { state: messagesContextState, dispatch: messagesContextDispatch } = (0, import_useFormFieldMessagesContext.useFormFieldMessagesContext)();
   const selectRef = (0, import_react.useRef)(null);
   const hiddenTrigger = (0, import_react.useMemo)(
     () => triggerRef?.querySelector("input"),
@@ -243,28 +275,35 @@ function SelectFwd(props, forwardedRef) {
   const containerRef = (0, import_react.useRef)(null);
   const contentRef = (0, import_react.useRef)(null);
   const menuListFunctionRef = (0, import_react.useRef)(null);
+  (0, import_react.useEffect)(() => {
+    if (menuOpen) {
+      import_modality.modalityStore.setState("keyboard");
+    }
+  }, [menuOpen]);
   const handleArrowKeyOptionFocus = (key) => {
     if (key !== "ArrowUp" && key !== "ArrowDown") {
       return;
     }
     requestAnimationFrame(() => {
-      if (!contentRef.current) {
+      if (!contentRef.current || !menuListFunctionRef.current) {
         return;
       }
-      const container = contentRef.current;
-      const focusedElement = container.querySelector(
+      const focusedElement = contentRef.current.querySelector(
         ".strato-select-option--focus"
       );
-      if (focusedElement) {
-        focusedElement.scrollIntoView({
-          block: "nearest"
-        });
-      } else if (container) {
+      if (!focusedElement) {
         if (key === "ArrowDown") {
-          container.scrollTop = 0;
-        } else if (menuListFunctionRef.current) {
+          menuListFunctionRef.current.scrollToIndex(0);
+        } else {
           menuListFunctionRef.current.scrollToBottom();
         }
+        return;
+      }
+      const index = Number(
+        focusedElement.closest("[data-index]")?.getAttribute("data-index")
+      );
+      if (!isNaN(index)) {
+        menuListFunctionRef.current.scrollToIndex(index);
       }
     });
   };
@@ -292,9 +331,21 @@ function SelectFwd(props, forwardedRef) {
           type: import_formfield_messages_state_reducer.FormFieldMessagesAction.SETISTOUCHED,
           payload: { isTouched: true }
         });
+        const state = (0, import_validation_builders.getValidationState)(hiddenSelectRef.current, "manual");
+        emitValidationState(state);
+      },
+      // DEPRECATION: [APPDEV-18178] BREAKING-CHANGE: Remove validateAsync() and change validate() to return Promise<ValidationState>.
+      validateAsync: async () => {
+        queueMicrotask(() => hiddenSelectRef.current?.reportValidity());
+        messagesContextDispatch?.({
+          type: import_formfield_messages_state_reducer.FormFieldMessagesAction.SETISTOUCHED,
+          payload: { isTouched: true }
+        });
+        const state = (0, import_validation_builders.getValidationState)(hiddenSelectRef.current, "manual");
+        return emitValidationState(state);
       }
     }),
-    [hiddenTrigger, messagesContextDispatch, triggerRef]
+    [hiddenTrigger, messagesContextDispatch, emitValidationState, triggerRef]
   );
   if (multiple && propsOnChange) {
     const select = selectRef.current;
@@ -317,6 +368,7 @@ function SelectFwd(props, forwardedRef) {
     ) {
       if (!menuOpen && isFocusWithin) {
         setIsFocusWithin(false);
+        validationOnBlur();
         onBlur?.(event);
       }
     }

package/forms/select/components/Control.d.ts

@@ -1,4 +1,4 @@
-import type { GroupBase, ControlProps as ReactSelectControlProps } from 'react-select';
+import type { ControlProps as ReactSelectControlProps, GroupBase } from 'react-select';
 type ControlProps<OptionValue, isMulti extends boolean, Group extends GroupBase<OptionValue>> = ReactSelectControlProps<OptionValue, isMulti, Group>;
 export declare function Control<OptionValue, isMulti extends boolean, Group extends GroupBase<OptionValue>>(props: Readonly<ControlProps<OptionValue, isMulti, Group>>): import("react/jsx-runtime").JSX.Element;
 export {};

package/forms/select/components/Control.js

@@ -41,8 +41,8 @@ var import_useFocusRing = require("../../../core/hooks/useFocusRing.js");
 var import_useFormControlState = require("../../../core/hooks/useFormControlState.js");
 var import_useId = require("../../../core/hooks/useId.js");
 var import_useMergeRefs = require("../../../core/hooks/useMergeRefs.js");
+var import_useVisualRefreshEnabled = require("../../../core/hooks/useVisualRefreshEnabled.js");
 var import_OverlayStackingProvider = require("../../../core/providers/OverlayStackingProvider.js");
-var import_is_visual_refresh_enabled = require("../../../core/utils/is-visual-refresh-enabled.js");
 var import_merge_props = require("../../../core/utils/merge-props.js");
 var import_Flex = require("../../../layouts/flex/Flex.js");
 var import_FormFieldMessageBaseItem = require("../../forms-core/components/form-field-messages/FormFieldMessageBaseItem.js");
@@ -83,7 +83,7 @@ function Control(props) {
     selectProps.controlState
   );
   const showError = selectProps.controlState ? hasFormControlError : state.showError;
-  const isCritical = (0, import_is_visual_refresh_enabled.isVisualRefreshEnabled)() ? showError && !isDisabled : showError;
+  const isCritical = (0, import_useVisualRefreshEnabled.useVisualRefreshEnabled)() ? showError && !isDisabled : showError;
   const hiddenReactSelectInput = Array.isArray(valueContainer.props.children) ? valueContainer.props.children[1] : null;
   const id = selectProps["selectInputId"];
   const hiddenInput = (0, import_react.useMemo)(

package/forms/select/components/HiddenSelect.js

@@ -41,12 +41,6 @@ const HiddenSelect = (0, import_react.forwardRef)(
     const multiple = Array.isArray(selectedValues);
     const id = (0, import_useId.useId)();
     const ref = (0, import_react.useRef)(null);
-    const { ariaProps, onBlur, onChange, onInvalid } = (0, import_useFormFieldValidation.useFormFieldValidation)(
-      ref,
-      {},
-      {},
-      id
-    );
     const selectedValuesArray = (0, import_react.useMemo)(() => {
       const extractValue = (val) => {
         return val?.textValue ?? "";
@@ -63,6 +57,14 @@ const HiddenSelect = (0, import_react.forwardRef)(
       }
       return [];
     }, [multiple, selectedValues]);
+    const { ariaProps, onBlur, onChange, onInvalid } = (0, import_useFormFieldValidation.useFormFieldValidation)(
+      ref,
+      // selectedValuesArray already contains only plain strings, so it is safe
+      // to join for a dep key — no risk of BigInt or circular-reference errors.
+      { selectedValues: selectedValuesArray.join(",") },
+      {},
+      id
+    );
     const value = (0, import_react.useMemo)(() => {
       if (multiple) {
         return selectedValuesArray;

package/forms/select/components/MenuList.d.ts

@@ -6,6 +6,8 @@ import type { BaseGroup, BaseOption } from '../types.js';
 export interface MenuListFunctionRefObject {
     /** Function to scroll to the last option. */
     scrollToBottom: () => void;
+    /** Function to scroll to a specific virtualizer index. */
+    scrollToIndex: (index: number) => void;
 }
 type MenuListProps<OptionValue, isMulti extends boolean, Group extends GroupBase<OptionValue>> = ReactSelectMenuListProps<OptionValue, isMulti, Group>;
 export declare function MenuList<OptionValue, isMulti extends boolean, Group extends BaseGroup<OptionValue>>(props: Readonly<MenuListProps<BaseOption<OptionValue>, isMulti, Group>>): import("react/jsx-runtime").JSX.Element;

package/forms/select/components/MenuList.js

@@ -78,12 +78,17 @@ function MenuList(props) {
     () => ({
       scrollToBottom: () => {
         optionVirtualizer.scrollToIndex(childrenArray.length);
+      },
+      scrollToIndex: (index) => {
+        optionVirtualizer.scrollToIndex(index);
       }
     })
   );
   (0, import_react.useEffect)(() => {
     requestAnimationFrame(() => {
-      optionVirtualizer.measure();
+      optionVirtualizer.elementsCache.forEach((element) => {
+        optionVirtualizer.measureElement(element);
+      });
     });
   }, [notifyParentRefChange, childrenArray.length]);
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(

package/forms/select/components/Option.js

@@ -35,7 +35,9 @@ var import_clsx = __toESM(require("clsx"));
 var import_strato_icons = require("@dynatrace/strato-icons");
 var import_TextEllipsisAroundChildren = require("../../../core/components/TextEllipsisAroundChildren.js");
 var import_useBehavioralTrackingProps = require("../../../core/hooks/useBehavioralTrackingProps.js");
+var import_useModality = require("../../../core/hooks/useModality.js");
 var import_getVirtualFocusStyles = require("../../../core/utils/getVirtualFocusStyles.js");
+var import_modality = require("../../../core/utils/modality.js");
 var import_Flex = require("../../../layouts/flex/Flex.js");
 var import_use_select_menu_context = require("../hooks/use-select-menu-context.js");
 var import_select_menu_state_reducer = require("../state/select-menu-state-reducer.js");
@@ -44,7 +46,11 @@ function Option(props) {
   const {
     children,
     isSelected,
-    innerProps,
+    innerProps: {
+      onMouseMove: _onMouseMove,
+      onMouseOver: _onMouseOver,
+      ...innerProps
+    },
     isFocused,
     isDisabled,
     isMulti,
@@ -65,8 +71,9 @@ function Option(props) {
   const [suffixTrackingProps] = (0, import_useBehavioralTrackingProps.useBehavioralTrackingProps)(
     suffix.componentProps ?? {}
   );
+  const modality = (0, import_useModality.useModality)();
   const { dispatch } = (0, import_use_select_menu_context.useSelectMenuContext)();
-  const isVirtuallyFocused = selectProps.focusOnOption && isFocused;
+  const isVirtuallyFocused = modality === "keyboard" && selectProps.focusOnOption && isFocused;
   const { className: virtualFocusClassName } = (0, import_getVirtualFocusStyles.getVirtualFocusStyles)(
     isVirtuallyFocused,
     isSelected && !isMulti ? "primary" : "neutral"
@@ -77,13 +84,15 @@ function Option(props) {
       "data-testid": dataTestId,
       role: "option",
       ...innerProps,
+      onMouseMove: () => import_modality.modalityStore.setState("pointer"),
       className: (0, import_clsx.default)(
         "strato-select-option",
         isMulti === true ? styles.selectOptionMulti : styles.selectOptionSingle,
         virtualFocusClassName,
         {
           "strato-select-option--selected": isSelected,
-          "strato-select-option--disabled": isDisabled
+          "strato-select-option--disabled": isDisabled,
+          "strato-select-option--focus": isVirtuallyFocused
         },
         consumerClassName
       ),