@dynatrace/strato-components 3.7.0 → 3.8.0

package/esm/forms/radio/RadioGroup.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/forms/radio/RadioGroup.tsx"],
-  "sourcesContent": ["import clsx from 'clsx';\nimport {\n  type FocusEvent,\n  forwardRef,\n  useImperativeHandle,\n  useMemo,\n  useRef,\n} from 'react';\n\nimport { RadioGroupContext } from './RadioGroupContext.js';\nimport * as styles from './styles.sty.js';\nimport { useControllableState } from '../../core/hooks/useControllableState.js';\nimport { useFormControlState } from '../../core/hooks/useFormControlState.js';\nimport { DataTestId } from '../../core/types/data-props.js';\nimport type { FormControlProps } from '../../core/types/form-control-props.js';\nimport { MaskingProps } from '../../core/types/masking-props.js';\nimport { StylingProps } from '../../core/types/styling-props.js';\nimport { WithChildren } from '../../core/types/with-children.js';\nimport { isDev } from '../../core/utils/is-node-environment.js';\nimport { Flex } from '../../layouts/flex/Flex.js';\nimport { withFormFieldMessageContextProvider } from '../forms-core/components/form-field/FormFieldMessageContextProvider.js';\nimport { InternalBaseItem as BaseItem } from '../forms-core/components/form-field-messages/FormFieldMessageBaseItem.js';\nimport { useFormFieldMessagesContext } from '../forms-core/hooks/useFormFieldMessagesContext.js';\nimport { useSyncedFormControlProps } from '../forms-core/hooks/useSyncedFormControlProps.js';\nimport { FormFieldMessagesAction } from '../forms-core/state/formfield-messages-state-reducer.js';\nimport { useInputHint } from '../hooks/useInputHint.js';\nimport type { FormControlRef } from '../shared-types.js';\n\n// #region Typings\n/**\n * Properties for the RadioGroup component\n * @public\n */\nexport type RadioGroupProps = FormControlProps<\n  string,\n  (value: string, event?: FocusEvent<HTMLInputElement>) => void | never\n> &\n  StylingProps &\n  WithChildren &\n  DataTestId &\n  MaskingProps;\n// #endregion\n\nconst RadioGroupRoot = /* @__PURE__ */ forwardRef<\n  FormControlRef,\n  RadioGroupProps\n>((props, forwardedRef) => {\n  const {\n    children,\n    id: propId,\n    disabled: propDisabled,\n    value,\n    name,\n    defaultValue,\n    controlState,\n    onChange,\n    readOnly: propReadOnly,\n    required: propRequired,\n    'aria-disabled': propAriaDisabled,\n    'aria-describedby': ariaDescribedby,\n    className: consumerClassName,\n    style: consumerStyle,\n    'data-testid': dataTestId,\n    'data-dtrum-mask': dataDtrumMask,\n    'data-dtrum-allow': dataDtrumAllow,\n    ...remainingProps\n  }: RadioGroupProps = props;\n\n  const {\n    disabled,\n    required,\n    id,\n    ariaDisabled,\n    readOnly: _readOnly,\n  } = useSyncedFormControlProps({\n    propDisabled,\n    propRequired,\n    propId,\n    propAriaDisabled,\n    propReadOnly,\n  });\n  const readOnly = !!_readOnly;\n\n  const { state: messagesContextState, dispatch: messagesContextDispatch } =\n    useFormFieldMessagesContext();\n  const [controlStateHasError, hint] = useFormControlState(controlState);\n\n  const hasError = controlState\n    ? controlStateHasError\n    : messagesContextState.showError;\n\n  // _useInputHint will be replaced with new validation concept. APPDEV-8298\n  // eslint-disable-next-line @typescript-eslint/no-deprecated\n  const { inputProps, hintProps } = useInputHint({\n    ariaDescribedby,\n    hint,\n    hasError,\n  });\n\n  const [controllableState, setControllableState] = useControllableState({\n    defaultValue,\n    value,\n    onChange,\n  });\n\n  const wrapperRef = useRef<HTMLDivElement>(null);\n\n  useImperativeHandle(forwardedRef, (): FormControlRef<HTMLDivElement> => {\n    return {\n      element: wrapperRef.current,\n      focus() {\n        const checkedInput = wrapperRef.current?.querySelector(\n          'input:checked',\n        ) as HTMLInputElement;\n        (\n          checkedInput ??\n          (wrapperRef.current?.querySelector('input') as HTMLInputElement)\n        )?.focus();\n      },\n      validate() {\n        if (controlState !== undefined) {\n          return;\n        }\n\n        const inputs = wrapperRef.current?.querySelectorAll('input');\n        inputs?.forEach((input) => {\n          input?.checkValidity();\n        });\n\n        messagesContextDispatch?.({\n          type: FormFieldMessagesAction.SETISTOUCHED,\n          payload: { isTouched: true },\n        });\n      },\n    };\n  });\n\n  if (isDev() && name === undefined) {\n    // eslint-disable-next-line no-console\n    console.warn(\n      'RadioGroup: The \"name\" prop is missing, which is necessary to link the radio buttons correctly.',\n    );\n  }\n\n  const radioGroupContextValue = useMemo(\n    () => ({\n      name,\n      isDisabled: disabled,\n      ariaDisabled,\n      hasError,\n      value: controllableState,\n      onChange: setControllableState,\n      readOnly,\n      required,\n      controlState,\n    }),\n    [\n      name,\n      disabled,\n      ariaDisabled,\n      hasError,\n      controllableState,\n      setControllableState,\n      readOnly,\n      required,\n      controlState,\n    ],\n  );\n\n  return (\n    <div\n      data-testid={dataTestId}\n      data-dtrum-mask={dataDtrumMask}\n      data-dtrum-allow={dataDtrumAllow}\n      aria-orientation=\"vertical\"\n      role=\"radiogroup\"\n      aria-live=\"polite\"\n      aria-disabled={propAriaDisabled}\n      ref={wrapperRef}\n      className={clsx(consumerClassName, styles.group, {\n        [styles.readOnly]: readOnly,\n        [styles.hasError]: hasError,\n      })}\n      style={consumerStyle}\n      id={id}\n      {...inputProps}\n      {...remainingProps}\n    >\n      <RadioGroupContext.Provider value={radioGroupContextValue}>\n        <Flex flexDirection=\"column\" gap={8}>\n          {children}\n        </Flex>\n      </RadioGroupContext.Provider>\n      {hint && (\n        <BaseItem\n          variant={hasError ? 'error' : 'hint'}\n          disabled={disabled || ariaDisabled}\n          {...hintProps}\n        >\n          {hint}\n        </BaseItem>\n      )}\n    </div>\n  );\n});\n\n/**\n * Radio buttons allow users to select one option from\n * a group of related options. To group options, wrap the\n * `Radio` components inside a 'RadioGroup' component.\n * @public\n */\nexport const RadioGroup = withFormFieldMessageContextProvider<\n  RadioGroupProps,\n  FormControlRef\n>(RadioGroupRoot);\n\n(RadioGroup as typeof RadioGroup & { displayName: string }).displayName =\n  'RadioGroup';\n"],
-  "mappings": "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",
+  "sourcesContent": ["\uFEFFimport clsx from 'clsx';\nimport {\n  type FocusEvent,\n  forwardRef,\n  useImperativeHandle,\n  useMemo,\n  useRef,\n} from 'react';\nimport { useIntl } from 'react-intl';\n\nimport { RadioGroupContext } from './RadioGroupContext.js';\nimport * as styles from './styles.sty.js';\nimport { useControllableState } from '../../core/hooks/useControllableState.js';\nimport { useFormControlState } from '../../core/hooks/useFormControlState.js';\nimport { DataTestId } from '../../core/types/data-props.js';\nimport type { FormControlProps } from '../../core/types/form-control-props.js';\nimport { MaskingProps } from '../../core/types/masking-props.js';\nimport { StylingProps } from '../../core/types/styling-props.js';\nimport { WithChildren } from '../../core/types/with-children.js';\nimport { isDev } from '../../core/utils/is-node-environment.js';\nimport { Flex } from '../../layouts/flex/Flex.js';\nimport { withFormFieldMessageContextProvider } from '../forms-core/components/form-field/FormFieldMessageContextProvider.js';\nimport { InternalBaseItem as BaseItem } from '../forms-core/components/form-field-messages/FormFieldMessageBaseItem.js';\nimport { useFormFieldMessagesContext } from '../forms-core/hooks/useFormFieldMessagesContext.js';\nimport { getI18nValidationState } from '../forms-core/hooks/useFormFieldValidation.js';\nimport { useSyncedFormControlProps } from '../forms-core/hooks/useSyncedFormControlProps.js';\nimport { FormFieldMessagesAction } from '../forms-core/state/formfield-messages-state-reducer.js';\nimport { useInputHint } from '../hooks/useInputHint.js';\nimport type { FormControlRef } from '../shared-types.js';\nimport { useCustomMessageEmitter } from '../validation/useCustomMessageEmitter.js';\nimport { useValidationStateEmitter } from '../validation/useValidationStateEmitter.js';\n\n// #region Typings\n/**\n * Properties for the RadioGroup component\n * @public\n */\nexport type RadioGroupProps = FormControlProps<\n  string,\n  (value: string, event?: FocusEvent<HTMLInputElement>) => void | never\n> &\n  StylingProps &\n  WithChildren &\n  DataTestId &\n  MaskingProps;\n// #endregion\n\nconst RadioGroupRoot = /* @__PURE__ */ forwardRef<\n  FormControlRef,\n  RadioGroupProps\n>((props, forwardedRef) => {\n  const {\n    children,\n    id: propId,\n    disabled: propDisabled,\n    value,\n    name,\n    defaultValue,\n    controlState,\n    onChange,\n    onValidityChange,\n    readOnly: propReadOnly,\n    required: propRequired,\n    'aria-disabled': propAriaDisabled,\n    'aria-describedby': ariaDescribedby,\n    className: consumerClassName,\n    style: consumerStyle,\n    'data-testid': dataTestId,\n    'data-dtrum-mask': dataDtrumMask,\n    'data-dtrum-allow': dataDtrumAllow,\n    ...remainingProps\n  }: RadioGroupProps = props;\n\n  const {\n    disabled,\n    required,\n    id,\n    ariaDisabled,\n    readOnly: _readOnly,\n  } = useSyncedFormControlProps({\n    propDisabled,\n    propRequired,\n    propId,\n    propAriaDisabled,\n    propReadOnly,\n  });\n  const readOnly = !!_readOnly;\n\n  const { state: messagesContextState, dispatch: messagesContextDispatch } =\n    useFormFieldMessagesContext();\n  const [controlStateHasError, hint] = useFormControlState(controlState);\n\n  const hasError = controlState\n    ? controlStateHasError\n    : messagesContextState.showError;\n\n  // _useInputHint will be replaced with new validation concept. APPDEV-8298\n  // eslint-disable-next-line @typescript-eslint/no-deprecated\n  const { inputProps, hintProps } = useInputHint({\n    ariaDescribedby,\n    hint,\n    hasError,\n  });\n\n  const [controllableState, setControllableState] = useControllableState({\n    defaultValue,\n    value,\n    onChange,\n  });\n\n  const intl = useIntl();\n  const wrapperRef = useRef<HTMLDivElement>(null);\n  const _emitValidationState = useValidationStateEmitter(onValidityChange);\n  const emitValidationState = useCustomMessageEmitter(\n    _emitValidationState,\n    () =>\n      getI18nValidationState(\n        intl,\n        wrapperRef.current?.querySelector('input'),\n        'manual',\n      ),\n  );\n\n  useImperativeHandle(forwardedRef, (): FormControlRef<HTMLDivElement> => {\n    return {\n      element: wrapperRef.current,\n      focus() {\n        const checkedInput = wrapperRef.current?.querySelector(\n          'input:checked',\n        ) as HTMLInputElement;\n        (\n          checkedInput ??\n          (wrapperRef.current?.querySelector('input') as HTMLInputElement)\n        )?.focus();\n      },\n      validate() {\n        if (controlState !== undefined) {\n          return;\n        }\n        wrapperRef.current\n          ?.querySelectorAll('input')\n          ?.forEach((i) => i.checkValidity());\n        messagesContextDispatch?.({\n          type: FormFieldMessagesAction.SETISTOUCHED,\n          payload: { isTouched: true },\n        });\n        const firstInput = wrapperRef.current?.querySelector(\n          'input',\n        ) as HTMLInputElement | null;\n        emitValidationState(getI18nValidationState(intl, firstInput, 'manual'));\n      },\n      // DEPRECATION: [APPDEV-18178] BREAKING-CHANGE: Remove validateAsync() and change validate() to return Promise<ValidationState>.\n      validateAsync: async () => {\n        const firstInput = wrapperRef.current?.querySelector(\n          'input',\n        ) as HTMLInputElement | null;\n        if (controlState !== undefined) {\n          return emitValidationState(\n            getI18nValidationState(intl, firstInput, 'manual'),\n          );\n        }\n        wrapperRef.current\n          ?.querySelectorAll('input')\n          ?.forEach((i) => i.checkValidity());\n        messagesContextDispatch?.({\n          type: FormFieldMessagesAction.SETISTOUCHED,\n          payload: { isTouched: true },\n        });\n        return emitValidationState(\n          getI18nValidationState(intl, firstInput, 'manual'),\n        );\n      },\n    };\n  });\n\n  if (isDev() && name === undefined) {\n    // eslint-disable-next-line no-console\n    console.warn(\n      'RadioGroup: The \"name\" prop is missing, which is necessary to link the radio buttons correctly.',\n    );\n  }\n\n  const radioGroupContextValue = useMemo(\n    () => ({\n      name,\n      isDisabled: disabled,\n      ariaDisabled,\n      hasError,\n      value: controllableState,\n      onChange: setControllableState,\n      readOnly,\n      required,\n      controlState,\n      onValidityChange: emitValidationState,\n    }),\n    [\n      name,\n      disabled,\n      ariaDisabled,\n      hasError,\n      controllableState,\n      setControllableState,\n      readOnly,\n      required,\n      controlState,\n      emitValidationState,\n    ],\n  );\n\n  return (\n    <div\n      data-testid={dataTestId}\n      data-dtrum-mask={dataDtrumMask}\n      data-dtrum-allow={dataDtrumAllow}\n      aria-orientation=\"vertical\"\n      role=\"radiogroup\"\n      aria-live=\"polite\"\n      aria-disabled={propAriaDisabled}\n      ref={wrapperRef}\n      className={clsx(consumerClassName, styles.group, {\n        [styles.readOnly]: readOnly,\n        [styles.hasError]: hasError,\n      })}\n      style={consumerStyle}\n      id={id}\n      {...inputProps}\n      {...remainingProps}\n    >\n      <RadioGroupContext.Provider value={radioGroupContextValue}>\n        <Flex flexDirection=\"column\" gap={8}>\n          {children}\n        </Flex>\n      </RadioGroupContext.Provider>\n      {hint && (\n        <BaseItem\n          variant={hasError ? 'error' : 'hint'}\n          disabled={disabled || ariaDisabled}\n          {...hintProps}\n        >\n          {hint}\n        </BaseItem>\n      )}\n    </div>\n  );\n});\n\n/**\n * Radio buttons allow users to select one option from\n * a group of related options. To group options, wrap the\n * `Radio` components inside a 'RadioGroup' component.\n * @public\n */\nexport const RadioGroup = withFormFieldMessageContextProvider<\n  RadioGroupProps,\n  FormControlRef\n>(RadioGroupRoot);\n\n(RadioGroup as typeof RadioGroup & { displayName: string }).displayName =\n  'RadioGroup';\n"],
+  "mappings": "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",
   "names": []
 }

package/esm/forms/radio/RadioGroupContext.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/forms/radio/RadioGroupContext.tsx"],
-  "sourcesContent": ["import { type FocusEvent, createContext } from 'react';\n\nimport type { FormControlState } from '../../core/types/form-control-state.js';\n\ntype RadioGroupContextType = {\n  /** The name of the radio group. */\n  name?: string;\n  /** Whether the radio group is invalid. */\n  hasError?: boolean;\n  /** The currently selected value. */\n  value: string | undefined | null;\n  /** Whether the radio group is disabled. */\n  isDisabled?: boolean;\n  /** Whether the radio group is aria-disabled. */\n  ariaDisabled?: boolean;\n  /** Whether the radio group is readOnly. */\n  readOnly?: boolean;\n  /**\n   * Whether the radio group is required.\n   * @defaultValue false\n   * */\n  required?: boolean;\n  /** Handler that is called when the value of the group changes. */\n  onChange?: (value: string, event?: FocusEvent<HTMLInputElement>) => void;\n  /** Describes an enhanced representation of a control validity state and hints about its error for the end user. */\n  controlState?: FormControlState;\n};\n\n/** Context describing the state of a RadioGroup */\nexport const RadioGroupContext = createContext<\n  RadioGroupContextType | undefined\n>(undefined);\n"],
-  "mappings": "AAAA,SAA0B,qBAAqB;AA6BxC,MAAM,oBAAoB,cAE/B,MAAS;",
+  "sourcesContent": ["\uFEFFimport { type FocusEvent, createContext } from 'react';\n\nimport type { FormControlState } from '../../core/types/form-control-state.js';\nimport type { ValidationState } from '../validation/types.js';\n\ntype RadioGroupContextType = {\n  /** The name of the radio group. */\n  name?: string;\n  /** Whether the radio group is invalid. */\n  hasError?: boolean;\n  /** The currently selected value. */\n  value: string | undefined | null;\n  /** Whether the radio group is disabled. */\n  isDisabled?: boolean;\n  /** Whether the radio group is aria-disabled. */\n  ariaDisabled?: boolean;\n  /** Whether the radio group is readOnly. */\n  readOnly?: boolean;\n  /**\n   * Whether the radio group is required.\n   * @defaultValue false\n   * */\n  required?: boolean;\n  /** Handler that is called when the value of the group changes. */\n  onChange?: (value: string, event?: FocusEvent<HTMLInputElement>) => void;\n  /** Describes an enhanced representation of a control validity state and hints about its error for the end user. */\n  controlState?: FormControlState;\n  /**\n   * Called when validation state changes. Fires automatically on blur or change,\n   * and when triggered manually via `validate()` or `validateAsync()`.\n   */\n  onValidityChange?: (state: ValidationState) => void;\n};\n\n/** Context describing the state of a RadioGroup */\nexport const RadioGroupContext = createContext<\n  RadioGroupContextType | undefined\n>(undefined);\n"],
+  "mappings": "AAAC,SAA0B,qBAAqB;AAmCzC,MAAM,oBAAoB,cAE/B,MAAS;",
   "names": []
 }

package/esm/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/esm/forms/radio/styles.sty.js

@@ -2,14 +2,14 @@ import "../../core/components/app-root/AppRoot.css";
 import "../../styles/field.css";
 import "./styles.css";
 import { createRuntimeFn as _7a468 } from "@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 = _7a468({ 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 = _7a468({ 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";
 export {
   checked,
   disabled,

package/esm/forms/radio/styles.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/forms/radio/styles.css.ts"],
-  "sourcesContent": ["import '../../core/components/app-root/AppRoot.css';\nimport '../../styles/field.css';\nimport './styles.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var checked = '_h96idu4-3-7-0';\nexport var disabled = '_h96idu3-3-7-0';\nexport var group = '_h96idu0-3-7-0';\nexport var hasError = '_h96idu2-3-7-0';\nexport var innerKnob = '_h96iduk-3-7-0';\nexport var knob = _7a468({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']]});\nexport var label = '_h96idu5-3-7-0';\nexport var readOnly = '_h96idu1-3-7-0';"],
+  "sourcesContent": ["import '../../core/components/app-root/AppRoot.css';\nimport '../../styles/field.css';\nimport './styles.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var checked = '_h96idu4-3-8-0';\nexport var disabled = '_h96idu3-3-8-0';\nexport var group = '_h96idu0-3-8-0';\nexport var hasError = '_h96idu2-3-8-0';\nexport var innerKnob = '_h96iduk-3-8-0';\nexport var knob = _7a468({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']]});\nexport var label = '_h96idu5-3-8-0';\nexport var readOnly = '_h96idu1-3-8-0';"],
   "mappings": "AAAA,OAAO;AACP,OAAO;AACP,OAAO;AACP,SAAS,mBAAmB,cAAc;AACnC,IAAI,UAAU;AACd,IAAI,WAAW;AACf,IAAI,QAAQ;AACZ,IAAI,WAAW;AACf,IAAI,YAAY;AAChB,IAAI,OAAO,OAAO,EAAC,kBAAiB,kBAAiB,mBAAkB,EAAC,UAAS,EAAC,MAAK,iBAAgB,GAAE,SAAQ,EAAC,MAAK,kBAAiB,OAAM,iBAAgB,GAAE,UAAS,EAAC,MAAK,kBAAiB,OAAM,iBAAgB,GAAE,gBAAe,EAAC,MAAK,kBAAiB,OAAM,iBAAgB,GAAE,UAAS,EAAC,MAAK,kBAAiB,OAAM,iBAAgB,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,CAAC,EAAC,SAAQ,OAAM,UAAS,MAAK,gBAAe,OAAM,UAAS,OAAM,UAAS,MAAK,GAAE,gBAAgB,GAAE,CAAC,EAAC,SAAQ,OAAM,UAAS,OAAM,gBAAe,OAAM,UAAS,OAAM,UAAS,MAAK,GAAE,gBAAgB,GAAE,CAAC,EAAC,UAAS,MAAK,UAAS,MAAK,GAAE,gBAAgB,GAAE,CAAC,EAAC,UAAS,MAAK,UAAS,MAAK,UAAS,MAAK,GAAE,gBAAgB,CAAC,EAAC,CAAC;AAChrB,IAAI,QAAQ;AACZ,IAAI,WAAW;",
   "names": []
 }

package/esm/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/esm/forms/search-input/SearchInput.sty.js

@@ -1,6 +1,6 @@
 import "./SearchInput.css";
 import { createRuntimeFn as _7a468 } from "@vanilla-extract/recipes/createRuntimeFn";
-var searchInput = _7a468({ defaultClassName: "_1mumub80-3-7-0", variantClassNames: { hasStepper: { true: "_1mumub81-3-7-0" } }, defaultVariants: {}, compoundVariants: [] });
+var searchInput = _7a468({ defaultClassName: "_1mumub80-3-8-0", variantClassNames: { hasStepper: { true: "_1mumub81-3-8-0" } }, defaultVariants: {}, compoundVariants: [] });
 export {
   searchInput
 };

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/forms/search-input/SearchInput.css.ts"],
-  "sourcesContent": ["import './SearchInput.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var searchInput = _7a468({defaultClassName:'_1mumub80-3-7-0',variantClassNames:{hasStepper:{true:'_1mumub81-3-7-0'}},defaultVariants:{},compoundVariants:[]});"],
+  "sourcesContent": ["import './SearchInput.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var searchInput = _7a468({defaultClassName:'_1mumub80-3-8-0',variantClassNames:{hasStepper:{true:'_1mumub81-3-8-0'}},defaultVariants:{},compoundVariants:[]});"],
   "mappings": "AAAA,OAAO;AACP,SAAS,mBAAmB,cAAc;AACnC,IAAI,cAAc,OAAO,EAAC,kBAAiB,mBAAkB,mBAAkB,EAAC,YAAW,EAAC,MAAK,kBAAiB,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,EAAC,CAAC;",
   "names": []
 }

package/esm/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/esm/forms/search-input/Stepper.sty.js

@@ -5,9 +5,9 @@ import "../hooks/useAutofillEvent.css";
 import "../_base-input/BaseInput.css";
 import "../_base-input/BaseInputContent.css";
 import "./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";
 export {
   matchPositionIndicators,
   stepperButton,

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/forms/search-input/Stepper.css.ts"],
-  "sourcesContent": ["import '../../core/components/app-root/AppRoot.css';\nimport '../../styles/field.css';\nimport '../../styles/textStyle.css';\nimport '../hooks/useAutofillEvent.css';\nimport '../_base-input/BaseInput.css';\nimport '../_base-input/BaseInputContent.css';\nimport './Stepper.css';\nexport 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';\nexport var stepperButton = '_s3yy5s2-3-7-0 _1a8lqy9e-3-7-0';\nexport var stepperButtons = '_s3yy5s1-3-7-0';"],
+  "sourcesContent": ["import '../../core/components/app-root/AppRoot.css';\nimport '../../styles/field.css';\nimport '../../styles/textStyle.css';\nimport '../hooks/useAutofillEvent.css';\nimport '../_base-input/BaseInput.css';\nimport '../_base-input/BaseInputContent.css';\nimport './Stepper.css';\nexport 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';\nexport var stepperButton = '_s3yy5s2-3-8-0 _1a8lqy9e-3-8-0';\nexport var stepperButtons = '_s3yy5s1-3-8-0';"],
   "mappings": "AAAA,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACA,IAAI,0BAA0B;AAC9B,IAAI,gBAAgB;AACpB,IAAI,iBAAiB;",
   "names": []
 }

package/esm/forms/select/Select.js

@@ -13,7 +13,11 @@ import {
 import ReactSelect, { createFilter } from "react-select";
 import { components } from "./components/components.js";
 import { SelectMenuContext } from "./contexts/SelectMenuContext.js";
-import { useSelectOptions, _isOption } from "./hooks/use-select-options.js";
+import {
+  useSelectOptions,
+  _isOption,
+  safeStringify
+} from "./hooks/use-select-options.js";
 import { useSelectSlots } from "./hooks/use-select-slots.js";
 import { useSelectValue } from "./hooks/use-select-value.js";
 import { SelectContent } from "./SelectContent.js";
@@ -38,11 +42,15 @@ import { useControllableState } from "../../core/hooks/useControllableState.js";
 import { useFormControlState } from "../../core/hooks/useFormControlState.js";
 import { createStratoLogger } from "../../core/sdk/sdk-logger.js";
 import { mergeProps } from "../../core/utils/merge-props.js";
+import { modalityStore } from "../../core/utils/modality.js";
 import { withFormFieldMessageContextProviderWithGenerics } from "../forms-core/components/form-field/FormFieldMessageContextProvider.js";
 import { useFormFieldMessagesContext } from "../forms-core/hooks/useFormFieldMessagesContext.js";
 import { useFormFieldValidation } from "../forms-core/hooks/useFormFieldValidation.js";
 import { useSyncedFormControlProps } from "../forms-core/hooks/useSyncedFormControlProps.js";
 import { FormFieldMessagesAction } from "../forms-core/state/formfield-messages-state-reducer.js";
+import { useCustomMessageEmitter } from "../validation/useCustomMessageEmitter.js";
+import { useValidationStateEmitter } from "../validation/useValidationStateEmitter.js";
+import { getValidationState } from "../validation/validation-builders.js";
 const COMPONENT_NAME = "Select";
 function getNewFocusedOption(options, focusedOptionValue) {
   for (const optionOrGroup of options) {
@@ -86,6 +94,7 @@ function SelectFwd(props, forwardedRef) {
     "data-dtrum-allow": dataDtrumAllow,
     "aria-disabled": ariaDisabledProp,
     onOpenChange,
+    onValidityChange,
     required: propsRequired,
     ...remainingProps
   } = props;
@@ -130,6 +139,11 @@ function SelectFwd(props, forwardedRef) {
     multiple: multiple === true
   });
   const hiddenSelectRef = useRef(null);
+  const _emitValidationState = useValidationStateEmitter(onValidityChange);
+  const emitValidationState = useCustomMessageEmitter(
+    _emitValidationState,
+    () => getValidationState(hiddenSelectRef.current, "manual")
+  );
   const [triggerRef, setTriggerRef] = useState(null);
   const { disabled, required, id, ariaDisabled, readOnly } = useSyncedFormControlProps({
     propDisabled: propsDisabled,
@@ -138,9 +152,14 @@ function SelectFwd(props, forwardedRef) {
     propAriaDisabled: ariaDisabledProp,
     propReadOnly
   });
-  const { onBlur: validationOnBlur } = useFormFieldValidation(hiddenSelectRef, {
-    required
-  });
+  const { onBlur: validationOnBlur } = useFormFieldValidation(
+    hiddenSelectRef,
+    { required, value: safeStringify(propsValue) },
+    void 0,
+    void 0,
+    _emitValidationState
+  );
+  const { state: messagesContextState, dispatch: messagesContextDispatch } = useFormFieldMessagesContext();
   const menuOpenReducer = useCallback(
     (state, action) => {
       if (readOnly) {
@@ -149,13 +168,31 @@ function SelectFwd(props, forwardedRef) {
       const newState = reducer(state, action);
       if (state !== newState) {
         queueMicrotask(() => {
-          newState === false && !controlState && validationOnBlur();
           onOpenChange?.(newState);
         });
+        if (state === true && newState === false) {
+          queueMicrotask(() => {
+            messagesContextDispatch?.({
+              type: FormFieldMessagesAction.SETISTOUCHED,
+              payload: { isTouched: true }
+            });
+            hiddenSelectRef.current?.reportValidity();
+            emitValidationState(
+              getValidationState(hiddenSelectRef.current, "blur")
+            );
+          });
+        }
       }
       return newState;
     },
-    [readOnly, controlState, validationOnBlur, onOpenChange]
+    [
+      readOnly,
+      controlState,
+      onOpenChange,
+      messagesContextDispatch,
+      hiddenSelectRef,
+      emitValidationState
+    ]
   );
   const [menuOpen, dispatch] = useReducer(menuOpenReducer, false);
   const [isFocusWithin, setIsFocusWithin] = useState(false);
@@ -164,7 +201,6 @@ function SelectFwd(props, forwardedRef) {
     defaultValue: filterDefaultValueProp,
     onChange: filterOnChangeProp
   });
-  const { state: messagesContextState, dispatch: messagesContextDispatch } = useFormFieldMessagesContext();
   const selectRef = useRef(null);
   const hiddenTrigger = useMemo(
     () => triggerRef?.querySelector("input"),
@@ -225,28 +261,35 @@ function SelectFwd(props, forwardedRef) {
   const containerRef = useRef(null);
   const contentRef = useRef(null);
   const menuListFunctionRef = useRef(null);
+  useEffect(() => {
+    if (menuOpen) {
+      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);
       }
     });
   };
@@ -274,9 +317,21 @@ function SelectFwd(props, forwardedRef) {
           type: FormFieldMessagesAction.SETISTOUCHED,
           payload: { isTouched: true }
         });
+        const state = 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: FormFieldMessagesAction.SETISTOUCHED,
+          payload: { isTouched: true }
+        });
+        const state = getValidationState(hiddenSelectRef.current, "manual");
+        return emitValidationState(state);
       }
     }),
-    [hiddenTrigger, messagesContextDispatch, triggerRef]
+    [hiddenTrigger, messagesContextDispatch, emitValidationState, triggerRef]
   );
   if (multiple && propsOnChange) {
     const select = selectRef.current;
@@ -299,6 +354,7 @@ function SelectFwd(props, forwardedRef) {
     ) {
       if (!menuOpen && isFocusWithin) {
         setIsFocusWithin(false);
+        validationOnBlur();
         onBlur?.(event);
       }
     }