@dynatrace/strato-components 3.10.4 → 3.11.0

package/esm/forms/number-input-v2/NumberInput.js

@@ -346,18 +346,24 @@ const NumberInputRoot = /* @__PURE__ */ forwardRef((props, forwardedRef) => {
   }, [handleStep]);
   useImperativeHandle(
     forwardedRef,
-    () => ({
-      ...internalRef.current,
-      validateAsync: async () => {
-        dispatch?.({
-          type: FormFieldMessagesAction.SETISTOUCHED,
-          payload: { isTouched: true }
-        });
-        const validationState = getNumberValidationState("manual");
-        emitValidationState(validationState);
-        return validationState;
-      }
-    }),
+    () => {
+      const base = internalRef.current ?? {
+        element: null,
+        validate: () => void 0
+      };
+      return {
+        ...base,
+        validateAsync: async () => {
+          dispatch?.({
+            type: FormFieldMessagesAction.SETISTOUCHED,
+            payload: { isTouched: true }
+          });
+          const validationState = getNumberValidationState("manual");
+          emitValidationState(validationState);
+          return validationState;
+        }
+      };
+    },
     [dispatch, getNumberValidationState, emitValidationState]
   );
   useEffect(() => {

package/esm/forms/number-input-v2/NumberInput.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/forms/number-input-v2/NumberInput.tsx"],
-  "sourcesContent": ["import {\n  type ChangeEvent as ReactChangeEvent,\n  type FocusEvent as ReactFocusEvent,\n  forwardRef,\n  type KeyboardEvent,\n  type PropsWithChildren,\n  useCallback,\n  useEffect,\n  useImperativeHandle,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\nimport { useIntl } from 'react-intl';\n\nimport { applyStep } from './utils/calculations.js';\nimport { checkFormat, parseNumber } from './utils/format.js';\nimport { addError, getErrorKey } from './utils/validation.js';\nimport { useBehavioralTrackingProps } from '../../core/hooks/useBehavioralTrackingProps.js';\nimport { useId } from '../../core/hooks/useId.js';\nimport { useMergeRefs } from '../../core/hooks/useMergeRefs.js';\nimport type { BehaviorTrackingProps } from '../../core/types/behavior-tracking-props.js';\nimport type { FocusEvents } from '../../core/types/events.js';\nimport type { FormControlProps } from '../../core/types/form-control-props.js';\nimport { mergeProps } from '../../core/utils/merge-props.js';\nimport type { BaseInputProps } from '../_base-input/base-input.types.js';\nimport { BaseInput } from '../_base-input/BaseInput.js';\nimport { BaseInputButton } from '../_base-input/BaseInputButton.js';\nimport {\n  BaseInputPrefix,\n  BaseInputSuffix,\n} from '../_base-input/BaseInputContent.js';\nimport type { ValidateFieldOptions } from '../form/form.types.js';\nimport { useInternalFormRegistration } from '../form/hooks/useInternalFormRegistration.js';\nimport { useFormFieldMessagesContext } from '../forms-core/hooks/useFormFieldMessagesContext.js';\nimport {\n  getErrorType,\n  getI18nValidationMessage,\n} from '../forms-core/hooks/useFormFieldValidation.js';\nimport { FormFieldMessagesAction } from '../forms-core/state/formfield-messages-state-reducer.js';\nimport { getSafeRegionalFormat } from '../forms-core/time/helpers.js';\nimport type { FormControlRef } from '../shared-types.js';\nimport type { MessageTarget } from '../validation/message-routing.js';\nimport {\n  NativeValidityStateKeys,\n  type ValidationState,\n  type ValidationTrigger,\n} from '../validation/types.js';\nimport { useCustomMessageEmitter } from '../validation/useCustomMessageEmitter.js';\nimport { useValidationStateEmitter } from '../validation/useValidationStateEmitter.js';\nimport { getValidationState } from '../validation/validation-builders.js';\n\nconst COMPONENT_NAME = 'NumberInput';\n// Matches a fully valid number: optional sign, integer digits, optional decimal part, optional scientific notation (e.g. \"-1.5e+3\")\nconst VALID_PATTERN = '^[+\\\\-]?\\\\d+(?:[\\\\.,]\\\\d+)?(?:[eE][+\\\\-]?\\\\d+)?$';\nconst VALID_REGEXP = new RegExp(VALID_PATTERN);\n// Matches a number that may use any locale's grouping/decimal separators (spaces, dots, commas, Arabic/Unicode variants)\n// \u2014 used to detect paste-formatted input that can be normalized\nconst FORMATTABLE_PATTERN =\n  /^[-+]?[\\d.,'\\u2019 \u066B\u066C\\u00A0\\u1680\\u2000-\\u200A\\u202F\\u205F\\u3000]+(?:[eE][-+]?\\d+)?$/u;\n// Matches a number that is syntactically incomplete but still being typed:\n// digits and separators are optional so intermediate states like \"-\", \"1.\", \"1.5e\" are allowed without rejecting the input\nconst INTERMEDIATE_VALID_PATTERN = /^[+-]?\\d*(?:[.,]\\d*)?(?:[eE][+-]?\\d*)?$/;\n\n// #region Typings\n/**\n * Number inputs let users enter and edit integers and floating-point numbers.\n * @public\n */\nexport type NumberInputProps = Pick<\n  BaseInputProps,\n  | 'placeholder'\n  | 'variant'\n  | 'onKeyUp'\n  | 'onKeyDown'\n  | 'className'\n  | 'style'\n  | 'data-testid'\n  | 'data-dtrum-mask'\n  | 'data-dtrum-allow'\n> &\n  FormControlProps<number | null, (value: number | null) => void> &\n  PropsWithChildren &\n  FocusEvents &\n  BehaviorTrackingProps & {\n    /**\n     * Internal: associates this control with a `_Form` rendered outside its\n     * React subtree via the native `form` attribute. Unstable.\n     * @internal\n     */\n    _form?: string;\n    /**\n     * Internal: routes this control's native/Strato validation messages to the\n     * field outlet (default), the enclosing form's outlet, or both. Unstable.\n     * @internal\n     */\n    _messageTarget?: MessageTarget | MessageTarget[];\n    /** Minimum amount of the input.\n     * @defaultValue undefined */\n    min?: number;\n    /** Maximum amount of the input.\n     * @defaultValue undefined */\n    max?: number;\n    /** Defines the step in which increments/decrements can be performed on the input and validates the value.\n     * Must be a positive number greater than 0. Values that are negative, zero, NaN, or undefined default to 1.\n     * @defaultValue undefined */\n    step?: number;\n    /** Multiplier applied to `step` (or 1 if no `step` is set) to determine how much the value changes\n     * when using arrow keys or the scroll wheel. Must be a positive integer greater than 0.\n     * Values that are negative, zero, NaN, or undefined default to 1. Decimal values are truncated to the nearest integer.\n     * @defaultValue 1 */\n    stepMultiplier?: number;\n  };\n\n// #endregion\n\n/**\n * Number inputs let users enter and edit integers and floating-point numbers.\n * @public\n */\nconst NumberInputRoot = /* @__PURE__ */ forwardRef<\n  FormControlRef<HTMLDivElement>,\n  NumberInputProps\n>((props, forwardedRef) => {\n  const intl = useIntl();\n\n  const defaultPlaceholder = intl.formatMessage({\n    defaultMessage: 'Add number',\n    id: 'rrkUQoVNb46Jbd/8',\n    description: 'Default placeholder for the number input.',\n  });\n\n  const {\n    onChange,\n    onKeyDown,\n    onBlur,\n    id: propId,\n    name,\n    _form,\n    _messageTarget,\n    value: propValue,\n    defaultValue,\n    required,\n    readOnly = false,\n    'data-testid': dataTestId,\n    'data-dtrum-mask': dataDtrumMask,\n    'data-dtrum-allow': dataDtrumAllow,\n    'aria-disabled': ariaDisabledProp,\n    min,\n    max,\n    step,\n    stepMultiplier = 1,\n    placeholder = defaultPlaceholder,\n    onValidityChange,\n    ...remainingProps\n  }: NumberInputProps = props;\n\n  const [behavioralTrackingProps, restProps] =\n    useBehavioralTrackingProps(remainingProps);\n\n  const { dispatch } = useFormFieldMessagesContext();\n  const formValidityChangeRef = useRef<\n    ((state: ValidationState) => void) | undefined\n  >(undefined);\n  const emitBaseValidationState = useValidationStateEmitter((state) =>\n    formValidityChangeRef.current?.(state),\n  );\n\n  const emitValidationState = useCustomMessageEmitter(\n    emitBaseValidationState,\n    () => {\n      if (!value && value !== 0) {\n        const nativeErrorKey = getErrorType(\n          internalRef.current?.inputRef?.validity,\n        );\n        const message = nativeErrorKey\n          ? getI18nValidationMessage(\n              intl,\n              nativeErrorKey,\n              internalRef.current?.inputRef,\n            )\n          : undefined;\n        return getValidationState(\n          internalRef.current?.inputRef,\n          'manual',\n          message,\n        );\n      }\n      const errorKey = getErrorKey(value, min, max, step);\n      return errorKey\n        ? getValidationState(\n            NativeValidityStateKeys[errorKey],\n            'manual',\n            getI18nValidationMessage(\n              intl,\n              errorKey,\n              internalRef.current?.inputRef,\n            ),\n          )\n        : getValidationState(null, 'manual');\n    },\n  );\n  const errorId = useId();\n  const isPasted = useRef<boolean>(false);\n  const isInternalChanged = useRef<boolean>(defaultValue !== undefined);\n\n  const internalRef = useRef<FormControlRef<HTMLDivElement>>(null);\n  const inputRef = useMergeRefs([forwardedRef, internalRef]);\n\n  const [internalValue, setInternalValue] = useState<string | number | null>(\n    defaultValue ?? propValue ?? null,\n  );\n\n  // Uses the native prototype setter so React's internal value tracker stays in sync.\n  const setValueNative = useCallback(\n    (newValue: number | string | null, triggerChange: boolean = true) => {\n      const input = internalRef.current?.inputRef;\n      if (input) {\n        let stringValue: string;\n        if (newValue === null) {\n          stringValue = '';\n        } else if (typeof newValue === 'number') {\n          stringValue = new Intl.NumberFormat(getSafeRegionalFormat(), {\n            useGrouping: false,\n            maximumFractionDigits: 17,\n          }).format(newValue);\n        } else {\n          stringValue = String(newValue);\n        }\n        const desc = Object.getOwnPropertyDescriptor(\n          HTMLInputElement.prototype,\n          'value',\n        );\n        desc?.set?.call(input, stringValue);\n        input.value = stringValue;\n        if (triggerChange) {\n          const parsedValue = checkFormat(stringValue);\n          isInternalChanged.current = true;\n          setInternalValue(parsedValue || stringValue);\n          if (VALID_REGEXP.exec(parsedValue)) {\n            onChange?.(parseNumber(parsedValue));\n          } else if (parsedValue === '') {\n            onChange?.(null);\n          }\n        }\n      }\n    },\n    [onChange],\n  );\n\n  // Caching the value to keep not valid states in the input\n  const value = useMemo<string | number | null>(() => {\n    const isChanged = isInternalChanged.current;\n    isInternalChanged.current = false;\n\n    if (isChanged) {\n      return internalValue;\n    }\n\n    if (!propValue && propValue !== 0) {\n      return '';\n    }\n\n    const formattedPropValue = new Intl.NumberFormat(getSafeRegionalFormat(), {\n      useGrouping: false,\n      maximumFractionDigits: 17, // Max precision for a JS number\n    }).format(propValue);\n\n    return formattedPropValue;\n  }, [propValue, internalValue]);\n\n  const generatedId = useId();\n  const id = propId ?? generatedId;\n\n  const getNumberValidationState = useCallback(\n    (trigger: ValidationTrigger): ValidationState => {\n      if (!value && value !== 0) {\n        const nativeErrorKey = getErrorType(\n          internalRef.current?.inputRef?.validity,\n        );\n        const message = nativeErrorKey\n          ? getI18nValidationMessage(\n              intl,\n              nativeErrorKey,\n              internalRef.current?.inputRef,\n            )\n          : undefined;\n        return getValidationState(\n          internalRef.current?.inputRef,\n          trigger,\n          message,\n        );\n      }\n\n      const errorKey = getErrorKey(value, min, max, step);\n      return errorKey\n        ? getValidationState(\n            NativeValidityStateKeys[errorKey],\n            trigger,\n            getI18nValidationMessage(\n              intl,\n              errorKey,\n              internalRef.current?.inputRef,\n            ),\n            id,\n          )\n        : getValidationState(null, trigger);\n    },\n    [id, intl, max, min, step, value],\n  );\n\n  const validateField = useCallback(\n    ({ reveal, trigger }: ValidateFieldOptions): ValidationState => {\n      internalRef.current?.inputRef?.checkValidity();\n      if (reveal) {\n        dispatch?.({\n          type: FormFieldMessagesAction.SETISTOUCHED,\n          payload: { isTouched: true },\n        });\n      }\n      return emitValidationState(getNumberValidationState(trigger));\n    },\n    [dispatch, emitValidationState, getNumberValidationState],\n  );\n\n  const formControl = useInternalFormRegistration({\n    id,\n    name,\n    form: _form,\n    messageTarget: _messageTarget,\n    onValidityChange,\n    getValue: () =>\n      value === '' || value === null ? null : parseNumber(value),\n    focus: () => internalRef.current?.focus?.(),\n    validateField: (options) => Promise.resolve(validateField(options)),\n    resetValidation: () => {\n      internalRef.current?.inputRef?.setCustomValidity('');\n      dispatch?.({\n        type: FormFieldMessagesAction.SETISTOUCHED,\n        payload: { isTouched: false, resetShowError: true },\n      });\n      dispatch?.({\n        type: FormFieldMessagesAction.REMOVEMESSAGE,\n        payload: { id: errorId, messageType: 'formcontrol', controlId: id },\n      });\n    },\n  });\n  formValidityChangeRef.current = formControl.onValidityChange;\n\n  const handleChange = useCallback(\n    (e: ReactChangeEvent<HTMLInputElement>) => {\n      const parsedValue = checkFormat(e.target.value);\n\n      if (VALID_REGEXP.exec(parsedValue)) {\n        onChange?.(parseNumber(parsedValue));\n      }\n\n      if (parsedValue === '') {\n        onChange?.(null);\n      }\n\n      if (isPasted.current && FORMATTABLE_PATTERN.exec(parsedValue)) {\n        isInternalChanged.current = true;\n        setInternalValue(parsedValue);\n        setValueNative(parsedValue, false);\n      } else if (INTERMEDIATE_VALID_PATTERN.exec(e.target.value)) {\n        isInternalChanged.current = true;\n        setInternalValue(parsedValue);\n      } else {\n        setValueNative(value ?? '', false);\n      }\n      isPasted.current = false;\n    },\n    [onChange, setInternalValue, value, setValueNative],\n  );\n\n  const handleBlur = useCallback(\n    (e: ReactFocusEvent<HTMLInputElement>) => {\n      if (!value && value !== 0) {\n        const nativeErrorKey = getErrorType(\n          internalRef.current?.inputRef?.validity,\n        );\n        const message = nativeErrorKey\n          ? getI18nValidationMessage(\n              intl,\n              nativeErrorKey,\n              internalRef.current?.inputRef,\n            )\n          : undefined;\n        emitValidationState(\n          getValidationState(internalRef.current?.inputRef, 'blur', message),\n        );\n        onBlur?.(e);\n        return;\n      }\n\n      const errorKey = getErrorKey(value, min, max, step);\n      if (errorKey) {\n        emitValidationState(\n          getValidationState(\n            NativeValidityStateKeys[errorKey],\n            'blur',\n            getI18nValidationMessage(\n              intl,\n              errorKey,\n              internalRef.current?.inputRef,\n            ),\n          ),\n        );\n      } else {\n        emitValidationState(getValidationState(null, 'blur'));\n      }\n      onBlur?.(e);\n    },\n    [value, min, max, step, emitValidationState, onBlur, intl],\n  );\n\n  // Handling step changes with buttons, keyboard and wheel\n  const handleStep = useCallback(\n    (direction: 1 | -1) => {\n      setValueNative(\n        applyStep(value, step, stepMultiplier, min, max, direction),\n      );\n    },\n    [value, stepMultiplier, step, min, max, setValueNative],\n  );\n\n  // Handling keyboard input for step changes and home/end keys\n  const handleKeyDown = useCallback(\n    (e: KeyboardEvent<HTMLInputElement>) => {\n      if (readOnly) {\n        onKeyDown?.(e);\n        return;\n      }\n\n      if (e.key === 'ArrowUp') {\n        e.preventDefault();\n        handleStep(+1);\n      }\n\n      if (e.key === 'ArrowDown') {\n        e.preventDefault();\n        handleStep(-1);\n      }\n\n      if (e.key === 'Home' && min !== undefined) {\n        e.preventDefault();\n        setValueNative(min);\n      }\n\n      if (e.key === 'End' && max !== undefined) {\n        e.preventDefault();\n        setValueNative(max);\n      }\n      onKeyDown?.(e);\n    },\n    [handleStep, onKeyDown, setValueNative, min, max, readOnly],\n  );\n\n  // Handling wheel input\n  useEffect(() => {\n    const el = internalRef?.current;\n\n    if (!el) {\n      return;\n    }\n\n    const onWheel = (e: WheelEvent) => {\n      if (document.activeElement !== e.target) {\n        return;\n      }\n      e.preventDefault();\n      handleStep(e.deltaY < 0 ? +1 : -1);\n    };\n\n    // Passive event listeners do not work, because the default action needs to be prevented\n    // so we need to explicitly set passive to false\n    el.element?.addEventListener('wheel', onWheel, { passive: false });\n    return () => el.element?.removeEventListener('wheel', onWheel);\n  }, [handleStep]);\n\n  useImperativeHandle(\n    forwardedRef,\n    () => ({\n      ...internalRef.current!,\n      validateAsync: async () => {\n        dispatch?.({\n          type: FormFieldMessagesAction.SETISTOUCHED,\n          payload: { isTouched: true },\n        });\n        const validationState = getNumberValidationState('manual');\n        emitValidationState(validationState);\n        return validationState;\n      },\n    }),\n    [dispatch, getNumberValidationState, emitValidationState],\n  );\n\n  // Validating the native number input props manually, as we need to use a type=\"text\" input and can't rely on the native checks.\n  // We can't use type=\"number\" because it doesn't support all the formatting and localization features we need.\n  useEffect(() => {\n    if (!value && value !== 0) {\n      dispatch?.({\n        type: FormFieldMessagesAction.REMOVEMESSAGE,\n        payload: { id: errorId, messageType: 'formcontrol' },\n      });\n      const nativeErrorKey = getErrorType(\n        internalRef.current?.inputRef?.validity,\n      );\n      if (nativeErrorKey) {\n        addError(\n          nativeErrorKey,\n          errorId,\n          internalRef.current?.inputRef,\n          dispatch,\n        );\n      }\n      const message = nativeErrorKey\n        ? getI18nValidationMessage(\n            intl,\n            nativeErrorKey,\n            internalRef.current?.inputRef,\n          )\n        : undefined;\n      emitValidationState(\n        getValidationState(internalRef.current?.inputRef, 'change', message),\n      );\n      return;\n    }\n\n    const errorKey = getErrorKey(value, min, max, step);\n    if (errorKey) {\n      addError(\n        errorKey,\n        errorId,\n        internalRef.current?.inputRef,\n        dispatch,\n        true,\n      );\n      emitValidationState(\n        getValidationState(\n          NativeValidityStateKeys[errorKey],\n          'change',\n          getI18nValidationMessage(\n            intl,\n            errorKey,\n            internalRef.current?.inputRef,\n          ),\n        ),\n      );\n      return;\n    }\n\n    dispatch?.({\n      type: FormFieldMessagesAction.REMOVEMESSAGE,\n      payload: { id: errorId, messageType: 'formcontrol' },\n    });\n    internalRef.current?.inputRef?.setCustomValidity('');\n    emitValidationState(getValidationState(null, 'change'));\n  }, [value, min, max, step, dispatch, errorId, emitValidationState, intl]);\n\n  return (\n    <BaseInput\n      ref={inputRef}\n      {...mergeProps(restProps, behavioralTrackingProps)}\n      id={id}\n      name={name}\n      form={_form}\n      type=\"text\"\n      inputMode=\"decimal\"\n      autoComplete=\"off\"\n      value={value ?? ''}\n      required={required}\n      readOnly={readOnly}\n      onChange={handleChange}\n      onKeyDown={handleKeyDown}\n      onBlur={handleBlur}\n      onPaste={() => (isPasted.current = true)}\n      data-testid={dataTestId}\n      data-dtrum-mask={dataDtrumMask}\n      data-dtrum-allow={dataDtrumAllow}\n      aria-disabled={ariaDisabledProp}\n      data-dt-component={COMPONENT_NAME}\n      min={min}\n      max={max}\n      step={step}\n      pattern={VALID_PATTERN}\n      placeholder={placeholder}\n    />\n  );\n});\n\n/**\n * Use `NumberInputV2` to let users enter integers and floating-point numbers.\n * @public\n */\nexport const NumberInput = Object.assign(NumberInputRoot, {\n  Prefix: BaseInputPrefix,\n  Suffix: BaseInputSuffix,\n  Button: BaseInputButton,\n});\n\n(NumberInput as typeof NumberInput & { displayName: string }).displayName =\n  COMPONENT_NAME;\n"],
-  "mappings": "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",
+  "sourcesContent": ["import {\n  type ChangeEvent as ReactChangeEvent,\n  type FocusEvent as ReactFocusEvent,\n  forwardRef,\n  type KeyboardEvent,\n  type PropsWithChildren,\n  useCallback,\n  useEffect,\n  useImperativeHandle,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\nimport { useIntl } from 'react-intl';\n\nimport { applyStep } from './utils/calculations.js';\nimport { checkFormat, parseNumber } from './utils/format.js';\nimport { addError, getErrorKey } from './utils/validation.js';\nimport { useBehavioralTrackingProps } from '../../core/hooks/useBehavioralTrackingProps.js';\nimport { useId } from '../../core/hooks/useId.js';\nimport { useMergeRefs } from '../../core/hooks/useMergeRefs.js';\nimport type { BehaviorTrackingProps } from '../../core/types/behavior-tracking-props.js';\nimport type { FocusEvents } from '../../core/types/events.js';\nimport type { FormControlProps } from '../../core/types/form-control-props.js';\nimport { mergeProps } from '../../core/utils/merge-props.js';\nimport type { BaseInputProps } from '../_base-input/base-input.types.js';\nimport { BaseInput } from '../_base-input/BaseInput.js';\nimport { BaseInputButton } from '../_base-input/BaseInputButton.js';\nimport {\n  BaseInputPrefix,\n  BaseInputSuffix,\n} from '../_base-input/BaseInputContent.js';\nimport type { ValidateFieldOptions } from '../form/form.types.js';\nimport { useInternalFormRegistration } from '../form/hooks/useInternalFormRegistration.js';\nimport { useFormFieldMessagesContext } from '../forms-core/hooks/useFormFieldMessagesContext.js';\nimport {\n  getErrorType,\n  getI18nValidationMessage,\n} from '../forms-core/hooks/useFormFieldValidation.js';\nimport { FormFieldMessagesAction } from '../forms-core/state/formfield-messages-state-reducer.js';\nimport { getSafeRegionalFormat } from '../forms-core/time/helpers.js';\nimport type { FormControlRef } from '../shared-types.js';\nimport type { MessageTarget } from '../validation/message-routing.js';\nimport {\n  NativeValidityStateKeys,\n  type ValidationState,\n  type ValidationTrigger,\n} from '../validation/types.js';\nimport { useCustomMessageEmitter } from '../validation/useCustomMessageEmitter.js';\nimport { useValidationStateEmitter } from '../validation/useValidationStateEmitter.js';\nimport { getValidationState } from '../validation/validation-builders.js';\n\nconst COMPONENT_NAME = 'NumberInput';\n// Matches a fully valid number: optional sign, integer digits, optional decimal part, optional scientific notation (e.g. \"-1.5e+3\")\nconst VALID_PATTERN = '^[+\\\\-]?\\\\d+(?:[\\\\.,]\\\\d+)?(?:[eE][+\\\\-]?\\\\d+)?$';\nconst VALID_REGEXP = new RegExp(VALID_PATTERN);\n// Matches a number that may use any locale's grouping/decimal separators (spaces, dots, commas, Arabic/Unicode variants)\n// \u2014 used to detect paste-formatted input that can be normalized\nconst FORMATTABLE_PATTERN =\n  /^[-+]?[\\d.,'\\u2019 \u066B\u066C\\u00A0\\u1680\\u2000-\\u200A\\u202F\\u205F\\u3000]+(?:[eE][-+]?\\d+)?$/u;\n// Matches a number that is syntactically incomplete but still being typed:\n// digits and separators are optional so intermediate states like \"-\", \"1.\", \"1.5e\" are allowed without rejecting the input\nconst INTERMEDIATE_VALID_PATTERN = /^[+-]?\\d*(?:[.,]\\d*)?(?:[eE][+-]?\\d*)?$/;\n\n// #region Typings\n/**\n * Number inputs let users enter and edit integers and floating-point numbers.\n * @public\n */\nexport type NumberInputProps = Pick<\n  BaseInputProps,\n  | 'placeholder'\n  | 'variant'\n  | 'onKeyUp'\n  | 'onKeyDown'\n  | 'className'\n  | 'style'\n  | 'data-testid'\n  | 'data-dtrum-mask'\n  | 'data-dtrum-allow'\n> &\n  FormControlProps<number | null, (value: number | null) => void> &\n  PropsWithChildren &\n  // DEPRECATION: APPDEV-18319 - Remove deprecated `controlId`.\n  // eslint-disable-next-line @typescript-eslint/no-deprecated\n  FocusEvents &\n  BehaviorTrackingProps & {\n    /**\n     * Internal: associates this control with a `_Form` rendered outside its\n     * React subtree via the native `form` attribute. Unstable.\n     * @internal\n     */\n    _form?: string;\n    /**\n     * Internal: routes this control's native/Strato validation messages to the\n     * field outlet (default), the enclosing form's outlet, or both. Unstable.\n     * @internal\n     */\n    _messageTarget?: MessageTarget | MessageTarget[];\n    /** Minimum amount of the input.\n     * @defaultValue undefined */\n    min?: number;\n    /** Maximum amount of the input.\n     * @defaultValue undefined */\n    max?: number;\n    /** Defines the step in which increments/decrements can be performed on the input and validates the value.\n     * Must be a positive number greater than 0. Values that are negative, zero, NaN, or undefined default to 1.\n     * @defaultValue undefined */\n    step?: number;\n    /** Multiplier applied to `step` (or 1 if no `step` is set) to determine how much the value changes\n     * when using arrow keys or the scroll wheel. Must be a positive integer greater than 0.\n     * Values that are negative, zero, NaN, or undefined default to 1. Decimal values are truncated to the nearest integer.\n     * @defaultValue 1 */\n    stepMultiplier?: number;\n  };\n\n// #endregion\n\n/**\n * Number inputs let users enter and edit integers and floating-point numbers.\n * @public\n */\nconst NumberInputRoot = /* @__PURE__ */ forwardRef<\n  FormControlRef<HTMLDivElement>,\n  NumberInputProps\n>((props, forwardedRef) => {\n  const intl = useIntl();\n\n  const defaultPlaceholder = intl.formatMessage({\n    defaultMessage: 'Add number',\n    id: 'rrkUQoVNb46Jbd/8',\n    description: 'Default placeholder for the number input.',\n  });\n\n  const {\n    onChange,\n    onKeyDown,\n    onBlur,\n    id: propId,\n    name,\n    _form,\n    _messageTarget,\n    value: propValue,\n    defaultValue,\n    required,\n    readOnly = false,\n    'data-testid': dataTestId,\n    'data-dtrum-mask': dataDtrumMask,\n    'data-dtrum-allow': dataDtrumAllow,\n    'aria-disabled': ariaDisabledProp,\n    min,\n    max,\n    step,\n    stepMultiplier = 1,\n    placeholder = defaultPlaceholder,\n    onValidityChange,\n    ...remainingProps\n  }: NumberInputProps = props;\n\n  const [behavioralTrackingProps, restProps] =\n    useBehavioralTrackingProps(remainingProps);\n\n  const { dispatch } = useFormFieldMessagesContext();\n  const formValidityChangeRef = useRef<\n    ((state: ValidationState) => void) | undefined\n  >(undefined);\n  const emitBaseValidationState = useValidationStateEmitter((state) =>\n    formValidityChangeRef.current?.(state),\n  );\n\n  const emitValidationState = useCustomMessageEmitter(\n    emitBaseValidationState,\n    () => {\n      if (!value && value !== 0) {\n        const nativeErrorKey = getErrorType(\n          internalRef.current?.inputRef?.validity,\n        );\n        const message = nativeErrorKey\n          ? getI18nValidationMessage(\n              intl,\n              nativeErrorKey,\n              internalRef.current?.inputRef,\n            )\n          : undefined;\n        return getValidationState(\n          internalRef.current?.inputRef,\n          'manual',\n          message,\n        );\n      }\n      const errorKey = getErrorKey(value, min, max, step);\n      return errorKey\n        ? getValidationState(\n            NativeValidityStateKeys[errorKey],\n            'manual',\n            getI18nValidationMessage(\n              intl,\n              errorKey,\n              internalRef.current?.inputRef,\n            ),\n          )\n        : getValidationState(null, 'manual');\n    },\n  );\n  const errorId = useId();\n  const isPasted = useRef<boolean>(false);\n  const isInternalChanged = useRef<boolean>(defaultValue !== undefined);\n\n  const internalRef = useRef<FormControlRef<HTMLDivElement>>(null);\n  const inputRef = useMergeRefs([forwardedRef, internalRef]);\n\n  const [internalValue, setInternalValue] = useState<string | number | null>(\n    defaultValue ?? propValue ?? null,\n  );\n\n  // Uses the native prototype setter so React's internal value tracker stays in sync.\n  const setValueNative = useCallback(\n    (newValue: number | string | null, triggerChange: boolean = true) => {\n      const input = internalRef.current?.inputRef;\n      if (input) {\n        let stringValue: string;\n        if (newValue === null) {\n          stringValue = '';\n        } else if (typeof newValue === 'number') {\n          stringValue = new Intl.NumberFormat(getSafeRegionalFormat(), {\n            useGrouping: false,\n            maximumFractionDigits: 17,\n          }).format(newValue);\n        } else {\n          stringValue = String(newValue);\n        }\n        const desc = Object.getOwnPropertyDescriptor(\n          HTMLInputElement.prototype,\n          'value',\n        );\n        desc?.set?.call(input, stringValue);\n        input.value = stringValue;\n        if (triggerChange) {\n          const parsedValue = checkFormat(stringValue);\n          isInternalChanged.current = true;\n          setInternalValue(parsedValue || stringValue);\n          if (VALID_REGEXP.exec(parsedValue)) {\n            onChange?.(parseNumber(parsedValue));\n          } else if (parsedValue === '') {\n            onChange?.(null);\n          }\n        }\n      }\n    },\n    [onChange],\n  );\n\n  // Caching the value to keep not valid states in the input\n  const value = useMemo<string | number | null>(() => {\n    const isChanged = isInternalChanged.current;\n    isInternalChanged.current = false;\n\n    if (isChanged) {\n      return internalValue;\n    }\n\n    if (!propValue && propValue !== 0) {\n      return '';\n    }\n\n    const formattedPropValue = new Intl.NumberFormat(getSafeRegionalFormat(), {\n      useGrouping: false,\n      maximumFractionDigits: 17, // Max precision for a JS number\n    }).format(propValue);\n\n    return formattedPropValue;\n  }, [propValue, internalValue]);\n\n  const generatedId = useId();\n  const id = propId ?? generatedId;\n\n  const getNumberValidationState = useCallback(\n    (trigger: ValidationTrigger): ValidationState => {\n      if (!value && value !== 0) {\n        const nativeErrorKey = getErrorType(\n          internalRef.current?.inputRef?.validity,\n        );\n        const message = nativeErrorKey\n          ? getI18nValidationMessage(\n              intl,\n              nativeErrorKey,\n              internalRef.current?.inputRef,\n            )\n          : undefined;\n        return getValidationState(\n          internalRef.current?.inputRef,\n          trigger,\n          message,\n        );\n      }\n\n      const errorKey = getErrorKey(value, min, max, step);\n      return errorKey\n        ? getValidationState(\n            NativeValidityStateKeys[errorKey],\n            trigger,\n            getI18nValidationMessage(\n              intl,\n              errorKey,\n              internalRef.current?.inputRef,\n            ),\n            id,\n          )\n        : getValidationState(null, trigger);\n    },\n    [id, intl, max, min, step, value],\n  );\n\n  const validateField = useCallback(\n    ({ reveal, trigger }: ValidateFieldOptions): ValidationState => {\n      internalRef.current?.inputRef?.checkValidity();\n      if (reveal) {\n        dispatch?.({\n          type: FormFieldMessagesAction.SETISTOUCHED,\n          payload: { isTouched: true },\n        });\n      }\n      return emitValidationState(getNumberValidationState(trigger));\n    },\n    [dispatch, emitValidationState, getNumberValidationState],\n  );\n\n  const formControl = useInternalFormRegistration({\n    id,\n    name,\n    form: _form,\n    messageTarget: _messageTarget,\n    onValidityChange,\n    getValue: () =>\n      value === '' || value === null ? null : parseNumber(value),\n    focus: () => internalRef.current?.focus?.(),\n    validateField: (options) => Promise.resolve(validateField(options)),\n    resetValidation: () => {\n      internalRef.current?.inputRef?.setCustomValidity('');\n      dispatch?.({\n        type: FormFieldMessagesAction.SETISTOUCHED,\n        payload: { isTouched: false, resetShowError: true },\n      });\n      dispatch?.({\n        type: FormFieldMessagesAction.REMOVEMESSAGE,\n        payload: { id: errorId, messageType: 'formcontrol', controlId: id },\n      });\n    },\n  });\n  formValidityChangeRef.current = formControl.onValidityChange;\n\n  const handleChange = useCallback(\n    (e: ReactChangeEvent<HTMLInputElement>) => {\n      const parsedValue = checkFormat(e.target.value);\n\n      if (VALID_REGEXP.exec(parsedValue)) {\n        onChange?.(parseNumber(parsedValue));\n      }\n\n      if (parsedValue === '') {\n        onChange?.(null);\n      }\n\n      if (isPasted.current && FORMATTABLE_PATTERN.exec(parsedValue)) {\n        isInternalChanged.current = true;\n        setInternalValue(parsedValue);\n        setValueNative(parsedValue, false);\n      } else if (INTERMEDIATE_VALID_PATTERN.exec(e.target.value)) {\n        isInternalChanged.current = true;\n        setInternalValue(parsedValue);\n      } else {\n        setValueNative(value ?? '', false);\n      }\n      isPasted.current = false;\n    },\n    [onChange, setInternalValue, value, setValueNative],\n  );\n\n  const handleBlur = useCallback(\n    (e: ReactFocusEvent<HTMLInputElement>) => {\n      if (!value && value !== 0) {\n        const nativeErrorKey = getErrorType(\n          internalRef.current?.inputRef?.validity,\n        );\n        const message = nativeErrorKey\n          ? getI18nValidationMessage(\n              intl,\n              nativeErrorKey,\n              internalRef.current?.inputRef,\n            )\n          : undefined;\n        emitValidationState(\n          getValidationState(internalRef.current?.inputRef, 'blur', message),\n        );\n        onBlur?.(e);\n        return;\n      }\n\n      const errorKey = getErrorKey(value, min, max, step);\n      if (errorKey) {\n        emitValidationState(\n          getValidationState(\n            NativeValidityStateKeys[errorKey],\n            'blur',\n            getI18nValidationMessage(\n              intl,\n              errorKey,\n              internalRef.current?.inputRef,\n            ),\n          ),\n        );\n      } else {\n        emitValidationState(getValidationState(null, 'blur'));\n      }\n      onBlur?.(e);\n    },\n    [value, min, max, step, emitValidationState, onBlur, intl],\n  );\n\n  // Handling step changes with buttons, keyboard and wheel\n  const handleStep = useCallback(\n    (direction: 1 | -1) => {\n      setValueNative(\n        applyStep(value, step, stepMultiplier, min, max, direction),\n      );\n    },\n    [value, stepMultiplier, step, min, max, setValueNative],\n  );\n\n  // Handling keyboard input for step changes and home/end keys\n  const handleKeyDown = useCallback(\n    (e: KeyboardEvent<HTMLInputElement>) => {\n      if (readOnly) {\n        onKeyDown?.(e);\n        return;\n      }\n\n      if (e.key === 'ArrowUp') {\n        e.preventDefault();\n        handleStep(+1);\n      }\n\n      if (e.key === 'ArrowDown') {\n        e.preventDefault();\n        handleStep(-1);\n      }\n\n      if (e.key === 'Home' && min !== undefined) {\n        e.preventDefault();\n        setValueNative(min);\n      }\n\n      if (e.key === 'End' && max !== undefined) {\n        e.preventDefault();\n        setValueNative(max);\n      }\n      onKeyDown?.(e);\n    },\n    [handleStep, onKeyDown, setValueNative, min, max, readOnly],\n  );\n\n  // Handling wheel input\n  useEffect(() => {\n    const el = internalRef?.current;\n\n    if (!el) {\n      return;\n    }\n\n    const onWheel = (e: WheelEvent) => {\n      if (document.activeElement !== e.target) {\n        return;\n      }\n      e.preventDefault();\n      handleStep(e.deltaY < 0 ? +1 : -1);\n    };\n\n    // Passive event listeners do not work, because the default action needs to be prevented\n    // so we need to explicitly set passive to false\n    el.element?.addEventListener('wheel', onWheel, { passive: false });\n    return () => el.element?.removeEventListener('wheel', onWheel);\n  }, [handleStep]);\n\n  useImperativeHandle(\n    forwardedRef,\n    () => {\n      const base = internalRef.current ?? {\n        element: null,\n        validate: () => undefined,\n      };\n      return {\n        ...base,\n        validateAsync: async () => {\n          dispatch?.({\n            type: FormFieldMessagesAction.SETISTOUCHED,\n            payload: { isTouched: true },\n          });\n          const validationState = getNumberValidationState('manual');\n          emitValidationState(validationState);\n          return validationState;\n        },\n      };\n    },\n    [dispatch, getNumberValidationState, emitValidationState],\n  );\n\n  // Validating the native number input props manually, as we need to use a type=\"text\" input and can't rely on the native checks.\n  // We can't use type=\"number\" because it doesn't support all the formatting and localization features we need.\n  useEffect(() => {\n    if (!value && value !== 0) {\n      dispatch?.({\n        type: FormFieldMessagesAction.REMOVEMESSAGE,\n        payload: { id: errorId, messageType: 'formcontrol' },\n      });\n      const nativeErrorKey = getErrorType(\n        internalRef.current?.inputRef?.validity,\n      );\n      if (nativeErrorKey) {\n        addError(\n          nativeErrorKey,\n          errorId,\n          internalRef.current?.inputRef,\n          dispatch,\n        );\n      }\n      const message = nativeErrorKey\n        ? getI18nValidationMessage(\n            intl,\n            nativeErrorKey,\n            internalRef.current?.inputRef,\n          )\n        : undefined;\n      emitValidationState(\n        getValidationState(internalRef.current?.inputRef, 'change', message),\n      );\n      return;\n    }\n\n    const errorKey = getErrorKey(value, min, max, step);\n    if (errorKey) {\n      addError(\n        errorKey,\n        errorId,\n        internalRef.current?.inputRef,\n        dispatch,\n        true,\n      );\n      emitValidationState(\n        getValidationState(\n          NativeValidityStateKeys[errorKey],\n          'change',\n          getI18nValidationMessage(\n            intl,\n            errorKey,\n            internalRef.current?.inputRef,\n          ),\n        ),\n      );\n      return;\n    }\n\n    dispatch?.({\n      type: FormFieldMessagesAction.REMOVEMESSAGE,\n      payload: { id: errorId, messageType: 'formcontrol' },\n    });\n    internalRef.current?.inputRef?.setCustomValidity('');\n    emitValidationState(getValidationState(null, 'change'));\n  }, [value, min, max, step, dispatch, errorId, emitValidationState, intl]);\n\n  return (\n    <BaseInput\n      ref={inputRef}\n      {...mergeProps(restProps, behavioralTrackingProps)}\n      id={id}\n      name={name}\n      form={_form}\n      type=\"text\"\n      inputMode=\"decimal\"\n      autoComplete=\"off\"\n      value={value ?? ''}\n      required={required}\n      readOnly={readOnly}\n      onChange={handleChange}\n      onKeyDown={handleKeyDown}\n      onBlur={handleBlur}\n      onPaste={() => (isPasted.current = true)}\n      data-testid={dataTestId}\n      data-dtrum-mask={dataDtrumMask}\n      data-dtrum-allow={dataDtrumAllow}\n      aria-disabled={ariaDisabledProp}\n      data-dt-component={COMPONENT_NAME}\n      min={min}\n      max={max}\n      step={step}\n      pattern={VALID_PATTERN}\n      placeholder={placeholder}\n    />\n  );\n});\n\n/**\n * Use `NumberInputV2` to let users enter integers and floating-point numbers.\n * @public\n */\nexport const NumberInput = Object.assign(NumberInputRoot, {\n  Prefix: BaseInputPrefix,\n  Suffix: BaseInputSuffix,\n  Button: BaseInputButton,\n});\n\n(NumberInput as typeof NumberInput & { displayName: string }).displayName =\n  COMPONENT_NAME;\n"],
+  "mappings": "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",
   "names": []
 }

package/esm/forms/radio/styles.css

@@ -1,12 +1,12 @@
-._h96idu0-3-10-4 {
+._h96idu0-3-11-0 {
   display: flex;
   flex-direction: column;
   gap: var(--dt-spacings-size-4, 4px);
 }
-._h96idu1-3-10-4 {
+._h96idu1-3-11-0 {
   cursor: default;
 }
-._h96idu5-3-10-4 {
+._h96idu5-3-11-0 {
   display: flex;
   gap: var(--dt-spacings-size-8, 8px);
   position: relative;
@@ -15,14 +15,14 @@
   vertical-align: middle;
   cursor: pointer;
 }
-._h96idu5-3-10-4._h96idu3-3-10-4 {
+._h96idu5-3-11-0._h96idu3-3-11-0 {
   cursor: not-allowed;
   color: var(--dt-colors-text-neutral-disabled, #595a7d80);
 }
-._h96idu1-3-10-4 ._h96idu5-3-10-4 {
+._h96idu1-3-11-0 ._h96idu5-3-11-0 {
   cursor: default;
 }
-._h96idu6-3-10-4 {
+._h96idu6-3-11-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-10-4);
+  background-color: var(--_bx32h3-3-11-0);
 }
-._h96idu7-3-10-4 {
+._h96idu7-3-11-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-10-4 {
+._h96idue-3-11-0 {
   background-color: var(--dt-colors-background-field-neutral-disabled, #e4e5eb80);
 }
-._h96idug-3-10-4 {
+._h96idug-3-11-0 {
   box-shadow: inset 0 0 0 var(--dt-borders-width-default, 1px) var(--dt-colors-border-critical-accent, #bb0731);
 }
-._h96iduh-3-10-4 {
+._h96iduh-3-11-0 {
   box-shadow: inset 0 0 0 var(--dt-borders-width-default, 1px) var(--dt-colors-border-neutral-accent, #595a7d);
 }
-._h96idui-3-10-4 {
+._h96idui-3-11-0 {
   box-shadow: inset 0 0 0 var(--dt-borders-width-default, 1px) var(--dt-colors-border-neutral-disabled, #dadbe480);
 }
-._h96iduj-3-10-4 {
+._h96iduj-3-11-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-10-4 {
+._h96iduk-3-11-0 {
   height: 100%;
-  fill: var(--_bx32h1-3-10-4);
+  fill: var(--_bx32h1-3-11-0);
 }
-._h96idu5-3-10-4:not(._h96idu4-3-10-4) ._h96iduk-3-10-4 {
+._h96idu5-3-11-0:not(._h96idu4-3-11-0) ._h96iduk-3-11-0 {
   display: none;
 }
-._h96idu1-3-10-4 ._h96iduk-3-10-4 {
+._h96idu1-3-11-0 ._h96iduk-3-11-0 {
   fill: var(--dt-colors-icon-neutral-subdued, #595a7d);
 }
-._h96idu2-3-10-4._h96idu1-3-10-4 ._h96iduk-3-10-4 {
+._h96idu2-3-11-0._h96idu1-3-11-0 ._h96iduk-3-11-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-10-4";
-var disabled = "_h96idu3-3-10-4";
-var group = "_h96idu0-3-10-4";
-var hasError = "_h96idu2-3-10-4";
-var innerKnob = "_h96iduk-3-10-4";
-var knob = _7a468({ defaultClassName: "_h96idu6-3-10-4", variantClassNames: { disabled: { true: "_h96idu7-3-10-4" }, checked: { true: "_h96idu8-3-10-4", false: "_h96idu9-3-10-4" }, hasError: { true: "_h96idua-3-10-4", false: "_h96idub-3-10-4" }, isFocusVisible: { true: "_h96iduc-3-10-4", false: "_h96idud-3-10-4" }, readOnly: { true: "_h96idue-3-10-4", false: "_h96iduf-3-10-4" } }, defaultVariants: {}, compoundVariants: [[{ checked: false, hasError: true, isFocusVisible: false, disabled: false, readOnly: false }, "_h96idug-3-10-4"], [{ checked: false, hasError: false, isFocusVisible: false, disabled: false, readOnly: false }, "_h96iduh-3-10-4"], [{ readOnly: true, disabled: false }, "_h96idui-3-10-4"], [{ readOnly: true, hasError: true, disabled: false }, "_h96iduj-3-10-4"]] });
-var label = "_h96idu5-3-10-4";
-var readOnly = "_h96idu1-3-10-4";
+var checked = "_h96idu4-3-11-0";
+var disabled = "_h96idu3-3-11-0";
+var group = "_h96idu0-3-11-0";
+var hasError = "_h96idu2-3-11-0";
+var innerKnob = "_h96iduk-3-11-0";
+var knob = _7a468({ defaultClassName: "_h96idu6-3-11-0", variantClassNames: { disabled: { true: "_h96idu7-3-11-0" }, checked: { true: "_h96idu8-3-11-0", false: "_h96idu9-3-11-0" }, hasError: { true: "_h96idua-3-11-0", false: "_h96idub-3-11-0" }, isFocusVisible: { true: "_h96iduc-3-11-0", false: "_h96idud-3-11-0" }, readOnly: { true: "_h96idue-3-11-0", false: "_h96iduf-3-11-0" } }, defaultVariants: {}, compoundVariants: [[{ checked: false, hasError: true, isFocusVisible: false, disabled: false, readOnly: false }, "_h96idug-3-11-0"], [{ checked: false, hasError: false, isFocusVisible: false, disabled: false, readOnly: false }, "_h96iduh-3-11-0"], [{ readOnly: true, disabled: false }, "_h96idui-3-11-0"], [{ readOnly: true, hasError: true, disabled: false }, "_h96iduj-3-11-0"]] });
+var label = "_h96idu5-3-11-0";
+var readOnly = "_h96idu1-3-11-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-10-4';\nexport var disabled = '_h96idu3-3-10-4';\nexport var group = '_h96idu0-3-10-4';\nexport var hasError = '_h96idu2-3-10-4';\nexport var innerKnob = '_h96iduk-3-10-4';\nexport var knob = _7a468({defaultClassName:'_h96idu6-3-10-4',variantClassNames:{disabled:{true:'_h96idu7-3-10-4'},checked:{true:'_h96idu8-3-10-4',false:'_h96idu9-3-10-4'},hasError:{true:'_h96idua-3-10-4',false:'_h96idub-3-10-4'},isFocusVisible:{true:'_h96iduc-3-10-4',false:'_h96idud-3-10-4'},readOnly:{true:'_h96idue-3-10-4',false:'_h96iduf-3-10-4'}},defaultVariants:{},compoundVariants:[[{checked:false,hasError:true,isFocusVisible:false,disabled:false,readOnly:false},'_h96idug-3-10-4'],[{checked:false,hasError:false,isFocusVisible:false,disabled:false,readOnly:false},'_h96iduh-3-10-4'],[{readOnly:true,disabled:false},'_h96idui-3-10-4'],[{readOnly:true,hasError:true,disabled:false},'_h96iduj-3-10-4']]});\nexport var label = '_h96idu5-3-10-4';\nexport var readOnly = '_h96idu1-3-10-4';"],
+  "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-11-0';\nexport var disabled = '_h96idu3-3-11-0';\nexport var group = '_h96idu0-3-11-0';\nexport var hasError = '_h96idu2-3-11-0';\nexport var innerKnob = '_h96iduk-3-11-0';\nexport var knob = _7a468({defaultClassName:'_h96idu6-3-11-0',variantClassNames:{disabled:{true:'_h96idu7-3-11-0'},checked:{true:'_h96idu8-3-11-0',false:'_h96idu9-3-11-0'},hasError:{true:'_h96idua-3-11-0',false:'_h96idub-3-11-0'},isFocusVisible:{true:'_h96iduc-3-11-0',false:'_h96idud-3-11-0'},readOnly:{true:'_h96idue-3-11-0',false:'_h96iduf-3-11-0'}},defaultVariants:{},compoundVariants:[[{checked:false,hasError:true,isFocusVisible:false,disabled:false,readOnly:false},'_h96idug-3-11-0'],[{checked:false,hasError:false,isFocusVisible:false,disabled:false,readOnly:false},'_h96iduh-3-11-0'],[{readOnly:true,disabled:false},'_h96idui-3-11-0'],[{readOnly:true,hasError:true,disabled:false},'_h96iduj-3-11-0']]});\nexport var label = '_h96idu5-3-11-0';\nexport var readOnly = '_h96idu1-3-11-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,mBAAkB,mBAAkB,EAAC,UAAS,EAAC,MAAK,kBAAiB,GAAE,SAAQ,EAAC,MAAK,mBAAkB,OAAM,kBAAiB,GAAE,UAAS,EAAC,MAAK,mBAAkB,OAAM,kBAAiB,GAAE,gBAAe,EAAC,MAAK,mBAAkB,OAAM,kBAAiB,GAAE,UAAS,EAAC,MAAK,mBAAkB,OAAM,kBAAiB,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,CAAC,EAAC,SAAQ,OAAM,UAAS,MAAK,gBAAe,OAAM,UAAS,OAAM,UAAS,MAAK,GAAE,iBAAiB,GAAE,CAAC,EAAC,SAAQ,OAAM,UAAS,OAAM,gBAAe,OAAM,UAAS,OAAM,UAAS,MAAK,GAAE,iBAAiB,GAAE,CAAC,EAAC,UAAS,MAAK,UAAS,MAAK,GAAE,iBAAiB,GAAE,CAAC,EAAC,UAAS,MAAK,UAAS,MAAK,UAAS,MAAK,GAAE,iBAAiB,CAAC,EAAC,CAAC;AAC9rB,IAAI,QAAQ;AACZ,IAAI,WAAW;",
   "names": []
 }

package/esm/forms/search-input/SearchInput.css

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

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

@@ -81,9 +81,9 @@ const SearchInputRoot = /* @__PURE__ */ forwardRef((props, forwardedRef) => {
       onCurrentChange(current < total - 1 ? current + 1 : 0);
     }
   };
-  function onClear() {
+  const onClear = () => {
     setInternalValue("");
-  }
+  };
   const [slots] = useSlots(children, {
     stepper: Stepper
   });

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/forms/search-input/SearchInput.tsx"],
-  "sourcesContent": ["import clsx from 'clsx';\nimport {\n  type ChangeEvent,\n  type KeyboardEvent,\n  forwardRef,\n  useRef,\n} from 'react';\n\nimport { MagnifyingGlassIcon } from '@dynatrace/strato-icons';\n\nimport * as styles from './SearchInput.sty.js';\nimport { Stepper } from './Stepper.js';\nimport { useBehavioralTrackingProps } from '../../core/hooks/useBehavioralTrackingProps.js';\nimport { useControllableState } from '../../core/hooks/useControllableState.js';\nimport { useMergeRefs } from '../../core/hooks/useMergeRefs.js';\nimport { useSlots } from '../../core/hooks/useSlots.js';\nimport type { BehaviorTrackingProps } from '../../core/types/behavior-tracking-props.js';\nimport { DataTestId } from '../../core/types/data-props.js';\nimport type { FormControlProps } from '../../core/types/form-control-props.js';\nimport type { FormControlStateProps } from '../../core/types/form-control-state.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 { mergeProps } from '../../core/utils/merge-props.js';\nimport type { BaseInputProps } from '../_base-input/base-input.types.js';\nimport { BaseInput } from '../_base-input/BaseInput.js';\nimport { BaseInputButton } from '../_base-input/BaseInputButton.js';\nimport { BaseInputSuffix } from '../_base-input/BaseInputContent.js';\nimport { ClearButton } from '../_base-input/ClearButton.js';\nimport { useInternalFormRegistration } from '../form/hooks/useInternalFormRegistration.js';\nimport type { FormControlRef } from '../shared-types.js';\nimport type { MessageTarget } from '../validation/message-routing.js';\n\nconst COMPONENT_NAME = 'SearchInput';\n\n//#region Typings\n/**\n * The properties of the SearchInput component.\n * @public\n */\nexport type SearchInputProps = Pick<\n  BaseInputProps,\n  | 'variant'\n  | 'onBlur'\n  | 'autoComplete'\n  | 'placeholder'\n  | 'minLength'\n  | 'maxLength'\n> &\n  // eslint-disable-next-line @typescript-eslint/no-deprecated -- APPDEV-18321\n  FormControlStateProps &\n  WithChildren &\n  StylingProps &\n  DataTestId &\n  MaskingProps &\n  FormControlProps<string, (value: string) => void, HTMLInputElement> &\n  BehaviorTrackingProps & {\n    /**\n     * Internal: associates this control with a `_Form` rendered outside its\n     * React subtree via the native `form` attribute. Unstable.\n     * @internal\n     */\n    _form?: string;\n    /**\n     * Internal: routes this control's native/Strato validation messages to the\n     * field outlet (default), the enclosing form's outlet, or both. Unstable.\n     * @internal\n     */\n    _messageTarget?: MessageTarget | MessageTarget[];\n  };\n\n//#endregion Typings\n\nconst SearchInputRoot = /* @__PURE__ */ forwardRef<\n  FormControlRef<HTMLDivElement>,\n  SearchInputProps\n>((props, forwardedRef) => {\n  const {\n    children,\n    onChange,\n    id: propId,\n    name,\n    _form,\n    _messageTarget,\n    value,\n    defaultValue,\n    placeholder,\n    required,\n    readOnly = false,\n    'data-testid': dataTestId,\n    'data-dtrum-mask': dataDtrumMask,\n    'data-dtrum-allow': dataDtrumAllow,\n    'aria-disabled': ariaDisabledProp,\n    className: consumerClassName,\n    onValidityChange,\n    ...remainingProps\n  }: SearchInputProps = props;\n\n  const [behavioralTrackingProps, restProps] =\n    useBehavioralTrackingProps(remainingProps);\n\n  const [internalValue, setInternalValue] = useControllableState({\n    defaultValue,\n    value,\n    onChange,\n  });\n\n  const controlRef = useRef<FormControlRef<HTMLDivElement>>(null);\n  const mergedRef = useMergeRefs<FormControlRef<HTMLDivElement> | null>([\n    forwardedRef,\n    controlRef,\n  ]);\n\n  const formControl = useInternalFormRegistration({\n    id: propId,\n    name,\n    form: _form,\n    messageTarget: _messageTarget,\n    value: internalValue ?? '',\n    controlRef,\n    onValidityChange,\n  });\n\n  const handleOnChange = (e: ChangeEvent<HTMLInputElement>) => {\n    setInternalValue(e.target.value);\n    if (slots.stepper && e.target.value === '') {\n      const { onCurrentChange } = slots.stepper.props;\n      onCurrentChange(0);\n    }\n  };\n\n  const handleKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {\n    if (!slots.stepper) {\n      return;\n    }\n    if (e.key !== 'Enter') {\n      return;\n    }\n\n    e.preventDefault();\n    const { current, total, onCurrentChange } = slots.stepper.props;\n\n    if (e.shiftKey) {\n      onCurrentChange(current > 0 ? current - 1 : total - 1);\n    } else {\n      onCurrentChange(current < total - 1 ? current + 1 : 0);\n    }\n  };\n\n  function onClear() {\n    setInternalValue('');\n  }\n\n  const [slots] = useSlots(children, {\n    stepper: Stepper,\n  });\n\n  const isEmpty = internalValue === '' || internalValue === undefined;\n  const hasStepper = !!slots.stepper;\n\n  return (\n    <BaseInput\n      ref={mergedRef}\n      {...mergeProps(restProps, behavioralTrackingProps)}\n      {...(hasStepper ? { onKeyDown: handleKeyDown } : {})}\n      id={formControl.id}\n      name={name}\n      form={_form}\n      className={clsx(styles.searchInput({ hasStepper }), consumerClassName)}\n      type=\"search\"\n      value={internalValue}\n      required={required}\n      readOnly={readOnly}\n      onChange={handleOnChange}\n      onValidityChange={formControl.onValidityChange}\n      data-testid={dataTestId}\n      data-dtrum-mask={dataDtrumMask}\n      data-dtrum-allow={dataDtrumAllow}\n      aria-disabled={ariaDisabledProp}\n      placeholder={placeholder}\n      data-dt-component={COMPONENT_NAME}\n      // The width of the input is handled via CSS and the parent elements,\n      // so we set it to 0 here to prevent the default width behavior of inputs\n      size={1}\n    >\n      <BaseInput.Prefix>\n        <MagnifyingGlassIcon />\n      </BaseInput.Prefix>\n      {!isEmpty && (\n        <BaseInput.ReservedSuffix>\n          {slots.stepper}\n          <ClearButton onClear={onClear} />\n        </BaseInput.ReservedSuffix>\n      )}\n      {children}\n    </BaseInput>\n  );\n});\n\n/**\n * Use the `SearchInput` component for search queries.\n * It includes a built-in `Clear` button for quick resets.\n * @public\n */\nexport const SearchInput = Object.assign(SearchInputRoot, {\n  Suffix: BaseInputSuffix,\n  Button: BaseInputButton,\n  Stepper,\n});\n\n(SearchInput as typeof SearchInput & { displayName: string }).displayName =\n  COMPONENT_NAME;\n"],
-  "mappings": "AA0LQ,cAGA,YAHA;AA1LR,OAAO,UAAU;AACjB;AAAA,EAGE;AAAA,EACA;AAAA,OACK;AAEP,SAAS,2BAA2B;AAEpC,YAAY,YAAY;AACxB,SAAS,eAAe;AACxB,SAAS,kCAAkC;AAC3C,SAAS,4BAA4B;AACrC,SAAS,oBAAoB;AAC7B,SAAS,gBAAgB;AAQzB,SAAS,kBAAkB;AAE3B,SAAS,iBAAiB;AAC1B,SAAS,uBAAuB;AAChC,SAAS,uBAAuB;AAChC,SAAS,mBAAmB;AAC5B,SAAS,mCAAmC;AAI5C,MAAM,iBAAiB;AAwCvB,MAAM,kBAAkC,2BAGtC,CAAC,OAAO,iBAAiB;AACzB,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA,IAAI;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,WAAW;AAAA,IACX,eAAe;AAAA,IACf,mBAAmB;AAAA,IACnB,oBAAoB;AAAA,IACpB,iBAAiB;AAAA,IACjB,WAAW;AAAA,IACX;AAAA,IACA,GAAG;AAAA,EACL,IAAsB;AAEtB,QAAM,CAAC,yBAAyB,SAAS,IACvC,2BAA2B,cAAc;AAE3C,QAAM,CAAC,eAAe,gBAAgB,IAAI,qBAAqB;AAAA,IAC7D;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAED,QAAM,aAAa,OAAuC,IAAI;AAC9D,QAAM,YAAY,aAAoD;AAAA,IACpE;AAAA,IACA;AAAA,EACF,CAAC;AAED,QAAM,cAAc,4BAA4B;AAAA,IAC9C,IAAI;AAAA,IACJ;AAAA,IACA,MAAM;AAAA,IACN,eAAe;AAAA,IACf,OAAO,iBAAiB;AAAA,IACxB;AAAA,IACA;AAAA,EACF,CAAC;AAED,QAAM,iBAAiB,CAAC,MAAqC;AAC3D,qBAAiB,EAAE,OAAO,KAAK;AAC/B,QAAI,MAAM,WAAW,EAAE,OAAO,UAAU,IAAI;AAC1C,YAAM,EAAE,gBAAgB,IAAI,MAAM,QAAQ;AAC1C,sBAAgB,CAAC;AAAA,IACnB;AAAA,EACF;AAEA,QAAM,gBAAgB,CAAC,MAAuC;AAC5D,QAAI,CAAC,MAAM,SAAS;AAClB;AAAA,IACF;AACA,QAAI,EAAE,QAAQ,SAAS;AACrB;AAAA,IACF;AAEA,MAAE,eAAe;AACjB,UAAM,EAAE,SAAS,OAAO,gBAAgB,IAAI,MAAM,QAAQ;AAE1D,QAAI,EAAE,UAAU;AACd,sBAAgB,UAAU,IAAI,UAAU,IAAI,QAAQ,CAAC;AAAA,IACvD,OAAO;AACL,sBAAgB,UAAU,QAAQ,IAAI,UAAU,IAAI,CAAC;AAAA,IACvD;AAAA,EACF;AAEA,WAAS,UAAU;AACjB,qBAAiB,EAAE;AAAA,EACrB;AAEA,QAAM,CAAC,KAAK,IAAI,SAAS,UAAU;AAAA,IACjC,SAAS;AAAA,EACX,CAAC;AAED,QAAM,UAAU,kBAAkB,MAAM,kBAAkB;AAC1D,QAAM,aAAa,CAAC,CAAC,MAAM;AAE3B,SACE;AAAA,IAAC;AAAA;AAAA,MACC,KAAK;AAAA,MACJ,GAAG,WAAW,WAAW,uBAAuB;AAAA,MAChD,GAAI,aAAa,EAAE,WAAW,cAAc,IAAI,CAAC;AAAA,MAClD,IAAI,YAAY;AAAA,MAChB;AAAA,MACA,MAAM;AAAA,MACN,WAAW,KAAK,OAAO,YAAY,EAAE,WAAW,CAAC,GAAG,iBAAiB;AAAA,MACrE,MAAK;AAAA,MACL,OAAO;AAAA,MACP;AAAA,MACA;AAAA,MACA,UAAU;AAAA,MACV,kBAAkB,YAAY;AAAA,MAC9B,eAAa;AAAA,MACb,mBAAiB;AAAA,MACjB,oBAAkB;AAAA,MAClB,iBAAe;AAAA,MACf;AAAA,MACA,qBAAmB;AAAA,MAGnB,MAAM;AAAA,MAEN;AAAA,4BAAC,UAAU,QAAV,EACC,8BAAC,uBAAoB,GACvB;AAAA,QACC,CAAC,WACA,qBAAC,UAAU,gBAAV,EACE;AAAA,gBAAM;AAAA,UACP,oBAAC,eAAY,SAAkB;AAAA,WACjC;AAAA,QAED;AAAA;AAAA;AAAA,EACH;AAEJ,CAAC;AAOM,MAAM,cAAc,OAAO,OAAO,iBAAiB;AAAA,EACxD,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR;AACF,CAAC;AAEA,YAA6D,cAC5D;",
+  "sourcesContent": ["import clsx from 'clsx';\nimport {\n  type ChangeEvent,\n  type KeyboardEvent,\n  forwardRef,\n  useRef,\n} from 'react';\n\nimport { MagnifyingGlassIcon } from '@dynatrace/strato-icons';\n\nimport * as styles from './SearchInput.sty.js';\nimport { Stepper } from './Stepper.js';\nimport { useBehavioralTrackingProps } from '../../core/hooks/useBehavioralTrackingProps.js';\nimport { useControllableState } from '../../core/hooks/useControllableState.js';\nimport { useMergeRefs } from '../../core/hooks/useMergeRefs.js';\nimport { useSlots } from '../../core/hooks/useSlots.js';\nimport type { BehaviorTrackingProps } from '../../core/types/behavior-tracking-props.js';\nimport { DataTestId } from '../../core/types/data-props.js';\nimport type { FormControlProps } from '../../core/types/form-control-props.js';\nimport type { FormControlStateProps } from '../../core/types/form-control-state.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 { mergeProps } from '../../core/utils/merge-props.js';\nimport type { BaseInputProps } from '../_base-input/base-input.types.js';\nimport { BaseInput } from '../_base-input/BaseInput.js';\nimport { BaseInputButton } from '../_base-input/BaseInputButton.js';\nimport { BaseInputSuffix } from '../_base-input/BaseInputContent.js';\nimport { ClearButton } from '../_base-input/ClearButton.js';\nimport { useInternalFormRegistration } from '../form/hooks/useInternalFormRegistration.js';\nimport type { FormControlRef } from '../shared-types.js';\nimport type { MessageTarget } from '../validation/message-routing.js';\n\nconst COMPONENT_NAME = 'SearchInput';\n\n//#region Typings\n/**\n * The properties of the SearchInput component.\n * @public\n */\nexport type SearchInputProps = Pick<\n  BaseInputProps,\n  | 'variant'\n  | 'onBlur'\n  | 'autoComplete'\n  | 'placeholder'\n  | 'minLength'\n  | 'maxLength'\n> &\n  // eslint-disable-next-line @typescript-eslint/no-deprecated -- APPDEV-18321\n  FormControlStateProps &\n  WithChildren &\n  StylingProps &\n  DataTestId &\n  MaskingProps &\n  FormControlProps<string, (value: string) => void, HTMLInputElement> &\n  BehaviorTrackingProps & {\n    /**\n     * Internal: associates this control with a `_Form` rendered outside its\n     * React subtree via the native `form` attribute. Unstable.\n     * @internal\n     */\n    _form?: string;\n    /**\n     * Internal: routes this control's native/Strato validation messages to the\n     * field outlet (default), the enclosing form's outlet, or both. Unstable.\n     * @internal\n     */\n    _messageTarget?: MessageTarget | MessageTarget[];\n  };\n\n//#endregion Typings\n\nconst SearchInputRoot = /* @__PURE__ */ forwardRef<\n  FormControlRef<HTMLDivElement>,\n  SearchInputProps\n>((props, forwardedRef) => {\n  const {\n    children,\n    onChange,\n    id: propId,\n    name,\n    _form,\n    _messageTarget,\n    value,\n    defaultValue,\n    placeholder,\n    required,\n    readOnly = false,\n    'data-testid': dataTestId,\n    'data-dtrum-mask': dataDtrumMask,\n    'data-dtrum-allow': dataDtrumAllow,\n    'aria-disabled': ariaDisabledProp,\n    className: consumerClassName,\n    onValidityChange,\n    ...remainingProps\n  }: SearchInputProps = props;\n\n  const [behavioralTrackingProps, restProps] =\n    useBehavioralTrackingProps(remainingProps);\n\n  const [internalValue, setInternalValue] = useControllableState({\n    defaultValue,\n    value,\n    onChange,\n  });\n\n  const controlRef = useRef<FormControlRef<HTMLDivElement>>(null);\n  const mergedRef = useMergeRefs<FormControlRef<HTMLDivElement> | null>([\n    forwardedRef,\n    controlRef,\n  ]);\n\n  const formControl = useInternalFormRegistration({\n    id: propId,\n    name,\n    form: _form,\n    messageTarget: _messageTarget,\n    value: internalValue ?? '',\n    controlRef,\n    onValidityChange,\n  });\n\n  const handleOnChange = (e: ChangeEvent<HTMLInputElement>) => {\n    setInternalValue(e.target.value);\n    if (slots.stepper && e.target.value === '') {\n      const { onCurrentChange } = slots.stepper.props;\n      onCurrentChange(0);\n    }\n  };\n\n  const handleKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {\n    if (!slots.stepper) {\n      return;\n    }\n    if (e.key !== 'Enter') {\n      return;\n    }\n\n    e.preventDefault();\n    const { current, total, onCurrentChange } = slots.stepper.props;\n\n    if (e.shiftKey) {\n      onCurrentChange(current > 0 ? current - 1 : total - 1);\n    } else {\n      onCurrentChange(current < total - 1 ? current + 1 : 0);\n    }\n  };\n\n  const onClear = () => {\n    setInternalValue('');\n  };\n\n  const [slots] = useSlots(children, {\n    stepper: Stepper,\n  });\n\n  const isEmpty = internalValue === '' || internalValue === undefined;\n  const hasStepper = !!slots.stepper;\n\n  return (\n    <BaseInput\n      ref={mergedRef}\n      {...mergeProps(restProps, behavioralTrackingProps)}\n      {...(hasStepper ? { onKeyDown: handleKeyDown } : {})}\n      id={formControl.id}\n      name={name}\n      form={_form}\n      className={clsx(styles.searchInput({ hasStepper }), consumerClassName)}\n      type=\"search\"\n      value={internalValue}\n      required={required}\n      readOnly={readOnly}\n      onChange={handleOnChange}\n      onValidityChange={formControl.onValidityChange}\n      data-testid={dataTestId}\n      data-dtrum-mask={dataDtrumMask}\n      data-dtrum-allow={dataDtrumAllow}\n      aria-disabled={ariaDisabledProp}\n      placeholder={placeholder}\n      data-dt-component={COMPONENT_NAME}\n      // The width of the input is handled via CSS and the parent elements,\n      // so we set it to the minimum here to prevent the default width behavior of inputs\n      size={1}\n    >\n      <BaseInput.Prefix>\n        <MagnifyingGlassIcon />\n      </BaseInput.Prefix>\n      {!isEmpty && (\n        <BaseInput.ReservedSuffix>\n          {slots.stepper}\n          <ClearButton onClear={onClear} />\n        </BaseInput.ReservedSuffix>\n      )}\n      {children}\n    </BaseInput>\n  );\n});\n\n/**\n * Use the `SearchInput` component for search queries.\n * It includes a built-in `Clear` button for quick resets.\n * @public\n */\nexport const SearchInput = Object.assign(SearchInputRoot, {\n  Suffix: BaseInputSuffix,\n  Button: BaseInputButton,\n  Stepper,\n});\n\n(SearchInput as typeof SearchInput & { displayName: string }).displayName =\n  COMPONENT_NAME;\n"],
+  "mappings": "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",
   "names": []
 }

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-10-4", variantClassNames: { hasStepper: { true: "_1mumub81-3-10-4" } }, defaultVariants: {}, compoundVariants: [] });
+var searchInput = _7a468({ defaultClassName: "_1mumub80-3-11-0", variantClassNames: { hasStepper: { true: "_1mumub81-3-11-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-10-4',variantClassNames:{hasStepper:{true:'_1mumub81-3-10-4'}},defaultVariants:{},compoundVariants:[]});"],
+  "sourcesContent": ["import './SearchInput.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var searchInput = _7a468({defaultClassName:'_1mumub80-3-11-0',variantClassNames:{hasStepper:{true:'_1mumub81-3-11-0'}},defaultVariants:{},compoundVariants:[]});"],
   "mappings": "AAAA,OAAO;AACP,SAAS,mBAAmB,cAAc;AACnC,IAAI,cAAc,OAAO,EAAC,kBAAiB,oBAAmB,mBAAkB,EAAC,YAAW,EAAC,MAAK,mBAAkB,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,EAAC,CAAC;",
   "names": []
 }

package/esm/forms/search-input/Stepper.css

@@ -1,21 +1,21 @@
-._s3yy5s0-3-10-4 {
+._s3yy5s0-3-11-0 {
   display: flex;
   gap: var(--dt-spacings-size-4, 4px);
   color: var(--dt-colors-text-neutral-subdued, #595a7d);
   align-items: center;
 }
-._s3yy5s1-3-10-4 {
+._s3yy5s1-3-11-0 {
   display: flex;
   gap: var(--dt-spacings-size-0, 0);
 }
-._s3yy5s2-3-10-4 {
+._s3yy5s2-3-11-0 {
   margin: 0;
 }
-._s3yy5s1-3-10-4 > ._s3yy5s2-3-10-4:first-child {
+._s3yy5s1-3-11-0 > ._s3yy5s2-3-11-0:first-child {
   border-top-right-radius: 0;
   border-bottom-right-radius: 0;
 }
-._s3yy5s1-3-10-4 > ._s3yy5s2-3-10-4:last-child {
+._s3yy5s1-3-11-0 > ._s3yy5s2-3-11-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-10-4 _o6rxr70-3-10-4 _da9a8v0-3-10-4 _da9a8v2-3-10-4 _da9a8v3-3-10-4 _da9a8vb-3-10-4";
-var stepperButton = "_s3yy5s2-3-10-4 _1a8lqy9e-3-10-4";
-var stepperButtons = "_s3yy5s1-3-10-4";
+var matchPositionIndicators = "_s3yy5s0-3-11-0 _o6rxr70-3-11-0 _da9a8v0-3-11-0 _da9a8v2-3-11-0 _da9a8v3-3-11-0 _da9a8vb-3-11-0";
+var stepperButton = "_s3yy5s2-3-11-0 _1a8lqy9e-3-11-0";
+var stepperButtons = "_s3yy5s1-3-11-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-10-4 _o6rxr70-3-10-4 _da9a8v0-3-10-4 _da9a8v2-3-10-4 _da9a8v3-3-10-4 _da9a8vb-3-10-4';\nexport var stepperButton = '_s3yy5s2-3-10-4 _1a8lqy9e-3-10-4';\nexport var stepperButtons = '_s3yy5s1-3-10-4';"],
+  "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-11-0 _o6rxr70-3-11-0 _da9a8v0-3-11-0 _da9a8v2-3-11-0 _da9a8v3-3-11-0 _da9a8vb-3-11-0';\nexport var stepperButton = '_s3yy5s2-3-11-0 _1a8lqy9e-3-11-0';\nexport var stepperButtons = '_s3yy5s1-3-11-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

@@ -162,7 +162,7 @@ function SelectFwd(props, forwardedRef) {
     propReadOnly,
     controlState
   });
-  const { onBlur: validationOnBlur } = useFormFieldValidation(
+  useFormFieldValidation(
     hiddenSelectRef,
     { required, value: safeStringify(propsValue) },
     void 0,
@@ -185,7 +185,7 @@ function SelectFwd(props, forwardedRef) {
               type: FormFieldMessagesAction.SETISTOUCHED,
               payload: { isTouched: true }
             });
-            hiddenSelectRef.current?.reportValidity();
+            hiddenSelectRef.current?.checkValidity();
             emitValidationState(
               getValidationState(hiddenSelectRef.current, "blur")
             );
@@ -321,7 +321,7 @@ function SelectFwd(props, forwardedRef) {
         type: SelectActions.CLOSE
       }),
       validate: () => {
-        queueMicrotask(() => hiddenSelectRef.current?.reportValidity());
+        queueMicrotask(() => hiddenSelectRef.current?.checkValidity());
         messagesContextDispatch?.({
           type: FormFieldMessagesAction.SETISTOUCHED,
           payload: { isTouched: true }
@@ -331,7 +331,7 @@ function SelectFwd(props, forwardedRef) {
       },
       // DEPRECATION: [APPDEV-18178] BREAKING-CHANGE: Remove validateAsync() and change validate() to return Promise<ValidationState>.
       validateAsync: async () => {
-        queueMicrotask(() => hiddenSelectRef.current?.reportValidity());
+        queueMicrotask(() => hiddenSelectRef.current?.checkValidity());
         messagesContextDispatch?.({
           type: FormFieldMessagesAction.SETISTOUCHED,
           payload: { isTouched: true }
@@ -359,7 +359,12 @@ function SelectFwd(props, forwardedRef) {
     const movingToInternal = relatedTarget !== null && (relatedTarget === hiddenTrigger || relatedTarget === clearSelectionRef.current || relatedTarget === filterRef.current?.inputRef);
     if (!movingToInternal && isFocusWithin) {
       setIsFocusWithin(false);
-      validationOnBlur();
+      hiddenSelectRef.current?.checkValidity();
+      messagesContextDispatch?.({
+        type: FormFieldMessagesAction.SETISTOUCHED,
+        payload: { isTouched: true }
+      });
+      emitValidationState(getValidationState(hiddenSelectRef.current, "blur"));
       onBlur?.(event);
     }
   };