@dynatrace/strato-components 3.8.0 → 3.9.0

package/esm/forms/number-input/NumberInputBase.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/forms/number-input/NumberInputBase.tsx"],
-  "sourcesContent": ["/* eslint-disable @typescript-eslint/no-deprecated */\nimport { useNumberField } from '@react-aria/numberfield';\nimport { useNumberFieldState } from '@react-stately/numberfield';\nimport clsx from 'clsx';\nimport {\n  type ChangeEvent,\n  type KeyboardEvent,\n  type KeyboardEventHandler,\n  forwardRef,\n  useImperativeHandle,\n  useMemo,\n  useRef,\n} from 'react';\nimport { useIntl } from 'react-intl';\n\nimport { useAriaLabelingProps } from '../../core/hooks/useAriaLabelingProps.js';\nimport { useBehavioralTrackingProps } from '../../core/hooks/useBehavioralTrackingProps.js';\nimport { useControllableState } from '../../core/hooks/useControllableState.js';\nimport { useFocusRing } from '../../core/hooks/useFocusRing.js';\nimport { useFormControlState } from '../../core/hooks/useFormControlState.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 as _mergeProps } from '../../core/utils/merge-props.js';\nimport { Flex } from '../../layouts/flex/Flex.js';\nimport { inputGroupClassName } from '../../layouts/input-group/InputGroup.sty.js';\nimport type { BaseInputProps } from '../_base-input/base-input.types.js';\nimport * as styles from '../_base-input/BaseInput.sty.js';\nimport { InternalBaseItem as BaseItem } from '../forms-core/components/form-field-messages/FormFieldMessageBaseItem.js';\nimport { useSyncedFormControlProps } from '../forms-core/hooks/useSyncedFormControlProps.js';\nimport { getSafeRegionalFormat } from '../forms-core/time/helpers.js';\nimport { autofillCSS } from '../hooks/useAutofillEvent.sty.js';\nimport { useAutofillEvent } from '../hooks/useAutofillEvent.js';\nimport { useInputHint } from '../hooks/useInputHint.js';\nimport type { FormControlRef } from '../shared-types.js';\n\n// #region Typings\n/**\n * The properties of the NumberInput component.\n * @public\n * @deprecated This type is deprecated and will be removed in a future release. Please use the NumberInputV2Props instead.\n */\nexport type NumberInputProps = Pick<\n  BaseInputProps,\n  | 'autoComplete'\n  | 'placeholder'\n  | 'minLength'\n  | 'maxLength'\n  | 'pattern'\n  | 'onKeyUp'\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  FocusEvents &\n  BehaviorTrackingProps & {\n    /** Handler that is called when a key is pressed. */\n    onKeyDown?: KeyboardEventHandler<HTMLInputElement>;\n    /** Minimum amount of the input. */\n    min?: number | string;\n    /** Maximum amount of the input. */\n    max?: number | string;\n    /** Defines the step size in which increments/decrements can be performed on the input. */\n    step?: number;\n  };\n// #endregion\n\n/**\n * NumberInputBase component. This is necessary in order to correctly call onChange with undefined on blur, which is otherwise set to NaN by react-stately.\n * @public\n */\nexport const NumberInputBase = /* @__PURE__ */ forwardRef<\n  Omit<FormControlRef<HTMLDivElement>, 'validate'>,\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    id: propId,\n    defaultValue,\n    value,\n    name,\n    onChange,\n    disabled: propDisabled,\n    readOnly: propReadOnly,\n    required: propRequired,\n    min: minValueNumberLike,\n    max: maxValueNumberLike,\n    step,\n    placeholder = defaultPlaceholder,\n    controlState,\n    onKeyUp,\n    onKeyDown,\n    onBlur,\n    onFocus,\n    onFocusChange,\n    className: consumerClassName,\n    style: consumerStyle,\n    'data-testid': dataTestId,\n    'data-dtrum-mask': dataDtrumMask,\n    'data-dtrum-allow': dataDtrumAllow,\n    'aria-disabled': ariaDisabledProp,\n    ...remainingProps\n  }: NumberInputProps = props;\n\n  const [behavioralTrackingProps, restProps] =\n    useBehavioralTrackingProps(remainingProps);\n\n  const componentName = (restProps as Record<string, unknown>)[\n    'data-dt-component'\n  ];\n\n  const { 'aria-labelledby': ariaLabelledBy, ...remainingAriaProps } =\n    useAriaLabelingProps(restProps);\n  const locale = useMemo(() => getSafeRegionalFormat(), []);\n\n  // Cast min and max to number since we accept string as well to better match native number inputs\n  const minValue = !isNaN(Number(minValueNumberLike))\n    ? Number(minValueNumberLike)\n    : undefined;\n  const maxValue = !isNaN(Number(maxValueNumberLike))\n    ? Number(maxValueNumberLike)\n    : undefined;\n\n  const numberInputValue = value ?? NaN; // necessary so we can clear the inputValue; otherwise, it snaps back to the previously valid inputValue\n\n  const {\n    disabled,\n    required,\n    id: contextId,\n    ariaDisabled,\n    readOnly: isReadOnly,\n  } = useSyncedFormControlProps({\n    propDisabled,\n    propRequired,\n    propId,\n    propAriaDisabled: ariaDisabledProp,\n    propReadOnly,\n  });\n  const disabledOrAriaDisabled = disabled || ariaDisabled || false;\n\n  const state = useNumberFieldState({\n    value: numberInputValue,\n    onChange,\n    placeholder,\n    minValue,\n    maxValue,\n    step,\n    isDisabled: disabled,\n    isReadOnly,\n    isRequired: required,\n    locale,\n  });\n\n  const inputRef = useRef<HTMLInputElement | null>(null);\n  const wrapperRef = useRef<HTMLDivElement | null>(null);\n\n  useImperativeHandle(\n    forwardedRef,\n    (): Omit<FormControlRef<HTMLDivElement>, 'validate'> => ({\n      element: wrapperRef.current,\n      inputRef: inputRef.current,\n      focus() {\n        inputRef.current?.focus();\n      },\n    }),\n    [],\n  );\n\n  const { inputProps } = useNumberField(\n    {\n      value: numberInputValue,\n      onChange,\n      id: contextId,\n      placeholder,\n      minValue,\n      maxValue,\n      step,\n      isDisabled: disabled,\n      isReadOnly,\n      isRequired: required,\n      onKeyUp,\n      onKeyDown,\n      onBlur,\n      onFocus,\n      onFocusChange,\n      // we pass the aria-labelledBy only if there's no aria-label, because the useNumberField would add aria-labelledby\n      // with 2 ids and append the input text to its aria-label otherwise, breaking the getByLabelText selectors in tests otherwise\n      'aria-labelledby': remainingAriaProps['aria-label']\n        ? undefined\n        : ariaLabelledBy,\n\n      ...remainingAriaProps, // passing the aria props here prevents unnecessary react-aria warnings when aria-labelling props are already set\n    },\n    state,\n    // eslint-disable-next-line @typescript-eslint/prefer-ts-expect-error, @typescript-eslint/ban-ts-comment\n    // @ts-ignore React 19 - proper overlap for the ref is no longer there. It should be fine, but the Numberfield will be reworked anyways\n    inputRef,\n  );\n  let inputDefaultValue: string | undefined;\n\n  if (defaultValue !== null && defaultValue !== undefined) {\n    inputDefaultValue = defaultValue.toString();\n  } else {\n    inputDefaultValue =\n      value === undefined && !onChange\n        ? '' // this prevents warnings about switching from uncontrolled to controlled inputs when no value or defaultValue is set, but onChange used without a value/defaultValue will still throw it\n        : undefined;\n  }\n\n  const {\n    value: inputPropsValue,\n    type,\n    id,\n    readOnly = false,\n    role,\n    onKeyDown: onKeyDownReactAria,\n    ...remainingInputProps\n  } = inputProps;\n\n  const [inputValue, setInputValue] = useControllableState({\n    defaultValue: inputDefaultValue,\n    value: inputPropsValue?.toString(),\n  });\n\n  const [hasError, hint] = useFormControlState(controlState);\n  // _useInputHint will be replaced with new validation concept. APPDEV-8298\n  // eslint-disable-next-line @typescript-eslint/no-deprecated\n  const { inputProps: inputHintAriaProps, hintProps } = useInputHint({\n    hint,\n    hasError,\n  });\n\n  const { isAutoFilled, onAnimationStart } = useAutofillEvent();\n\n  const handleInputChange = (event: ChangeEvent<HTMLInputElement>) => {\n    remainingInputProps?.onChange?.(event);\n    setInputValue(event.target.value);\n  };\n\n  const { focusProps, focusClassName } = useFocusRing({\n    color: hasError && !(disabled || ariaDisabled) ? 'critical' : 'neutral',\n    ignoreModality: true,\n    disabled,\n  });\n\n  //TODO: replace this with the BaseInput once the rework is done and we no longer depend on react-aria. This introduced the limitation of passing the inputRef from the BaseInput to the NumberInputBase, as it's initially null and useNumberField instantly breaks instead of waiting for failing gracefully and then resetting the ref on the next render\n  return (\n    <Flex\n      gap={4}\n      flexDirection=\"column\"\n      data-testid={dataTestId}\n      data-dtrum-mask={dataDtrumMask}\n      data-dtrum-allow={dataDtrumAllow}\n      ref={wrapperRef}\n      className={consumerClassName}\n      style={consumerStyle}\n      {...behavioralTrackingProps}\n      data-dt-component={componentName}\n    >\n      <Flex\n        gap={2}\n        alignItems=\"center\"\n        className={clsx(styles.wrapper, styles.variant['default'], {\n          [styles.hasError]: hasError,\n          [styles.disabled]: disabledOrAriaDisabled,\n          [styles.readOnly]: readOnly,\n        })}\n      >\n        <div\n          className={clsx(\n            styles.container,\n            inputGroupClassName,\n            focusClassName,\n            {\n              [styles.isAutoFilled]: isAutoFilled,\n            },\n          )}\n        >\n          <input\n            id={id}\n            ref={inputRef}\n            type=\"text\"\n            role={role}\n            onChange={handleInputChange}\n            onAnimationStart={onAnimationStart}\n            disabled={disabled}\n            className={clsx(styles.input, autofillCSS)}\n            readOnly={readOnly}\n            {...(_mergeProps(\n              remainingInputProps,\n              restProps,\n              focusProps,\n              inputHintAriaProps,\n            ) as unknown as Record<string, unknown>)}\n            name={name}\n            required={required} // react-aria only sets aria-required in the remainingInputProps, so we need to override it with the context prop here\n            value={inputValue}\n            aria-disabled={ariaDisabled}\n            // react-aria prevents default events, so it behaves differently from our TextInput, which has some undesired issues - see ADES-3971 and https://github.com/adobe/react-spectrum/issues/2803\n            onKeyDown={(e: KeyboardEvent<HTMLInputElement>) => {\n              if (\n                (e.key === 'Home' && minValue === undefined) ||\n                (e.key === 'End' && maxValue === undefined)\n              ) {\n                onKeyDown?.(e);\n                return; // opt out of using react-aria's keydown logic in this case, because it would prevent default behavior (moving the cursor to the front/end with Home/End)\n              }\n\n              onKeyDownReactAria?.(e); // we still need to use react aria's events when we do have a min/max (then the value will be snapped to these when pressing Home/End) or for incrementing/decrementing the value on pressing Up/Down keys, but these will no longer be necessary as soon as we implement the spin button\n            }}\n          />\n        </div>\n      </Flex>\n      {hint && (\n        <BaseItem\n          variant={hasError ? 'error' : 'hint'}\n          disabled={disabled || ariaDisabled}\n          {...hintProps}\n        >\n          {hint}\n        </BaseItem>\n      )}\n    </Flex>\n  );\n});\n\n(\n  NumberInputBase as typeof NumberInputBase & { displayName: string }\n).displayName = 'NumberInputBase';\n"],
-  "mappings": "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",
+  "sourcesContent": ["/* eslint-disable @typescript-eslint/no-deprecated */\nimport { useNumberField } from '@react-aria/numberfield';\nimport { useNumberFieldState } from '@react-stately/numberfield';\nimport clsx from 'clsx';\nimport {\n  type ChangeEvent,\n  type KeyboardEvent,\n  type KeyboardEventHandler,\n  forwardRef,\n  useImperativeHandle,\n  useMemo,\n  useRef,\n} from 'react';\nimport { useIntl } from 'react-intl';\n\nimport { useAriaLabelingProps } from '../../core/hooks/useAriaLabelingProps.js';\nimport { useBehavioralTrackingProps } from '../../core/hooks/useBehavioralTrackingProps.js';\nimport { useControllableState } from '../../core/hooks/useControllableState.js';\nimport { useFocusRing } from '../../core/hooks/useFocusRing.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 as _mergeProps } from '../../core/utils/merge-props.js';\nimport { Flex } from '../../layouts/flex/Flex.js';\nimport { inputGroupClassName } from '../../layouts/input-group/InputGroup.sty.js';\nimport type { BaseInputProps } from '../_base-input/base-input.types.js';\nimport * as styles from '../_base-input/BaseInput.sty.js';\nimport { InternalBaseItem as BaseItem } from '../forms-core/components/form-field-messages/FormFieldMessageBaseItem.js';\nimport { useFormControl } from '../forms-core/hooks/useFormControl.js';\nimport { getSafeRegionalFormat } from '../forms-core/time/helpers.js';\nimport { autofillCSS } from '../hooks/useAutofillEvent.sty.js';\nimport { useAutofillEvent } from '../hooks/useAutofillEvent.js';\nimport type { FormControlRef } from '../shared-types.js';\n\n// #region Typings\n/**\n * The properties of the NumberInput component.\n * @public\n * @deprecated This type is deprecated and will be removed in a future release. Please use the NumberInputV2Props instead.\n */\nexport type NumberInputProps = Pick<\n  BaseInputProps,\n  | 'autoComplete'\n  | 'placeholder'\n  | 'minLength'\n  | 'maxLength'\n  | 'pattern'\n  | 'onKeyUp'\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  FocusEvents &\n  BehaviorTrackingProps & {\n    /** Handler that is called when a key is pressed. */\n    onKeyDown?: KeyboardEventHandler<HTMLInputElement>;\n    /** Minimum amount of the input. */\n    min?: number | string;\n    /** Maximum amount of the input. */\n    max?: number | string;\n    /** Defines the step size in which increments/decrements can be performed on the input. */\n    step?: number;\n  };\n// #endregion\n\n/**\n * NumberInputBase component. This is necessary in order to correctly call onChange with undefined on blur, which is otherwise set to NaN by react-stately.\n * @public\n */\nexport const NumberInputBase = /* @__PURE__ */ forwardRef<\n  Omit<FormControlRef<HTMLDivElement>, 'validate'>,\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    id: propId,\n    defaultValue,\n    value,\n    name,\n    onChange,\n    disabled: propDisabled,\n    readOnly: propReadOnly,\n    required: propRequired,\n    min: minValueNumberLike,\n    max: maxValueNumberLike,\n    step,\n    placeholder = defaultPlaceholder,\n    controlState,\n    onKeyUp,\n    onKeyDown,\n    onBlur,\n    onFocus,\n    onFocusChange,\n    className: consumerClassName,\n    style: consumerStyle,\n    'data-testid': dataTestId,\n    'data-dtrum-mask': dataDtrumMask,\n    'data-dtrum-allow': dataDtrumAllow,\n    'aria-disabled': ariaDisabledProp,\n    ...remainingProps\n  }: NumberInputProps = props;\n\n  const [behavioralTrackingProps, restProps] =\n    useBehavioralTrackingProps(remainingProps);\n\n  const componentName = (restProps as Record<string, unknown>)[\n    'data-dt-component'\n  ];\n\n  const { 'aria-labelledby': ariaLabelledBy, ...remainingAriaProps } =\n    useAriaLabelingProps(restProps);\n  const locale = useMemo(() => getSafeRegionalFormat(), []);\n\n  // Cast min and max to number since we accept string as well to better match native number inputs\n  const minValue = !isNaN(Number(minValueNumberLike))\n    ? Number(minValueNumberLike)\n    : undefined;\n  const maxValue = !isNaN(Number(maxValueNumberLike))\n    ? Number(maxValueNumberLike)\n    : undefined;\n\n  const numberInputValue = value ?? NaN; // necessary so we can clear the inputValue; otherwise, it snaps back to the previously valid inputValue\n\n  const {\n    disabled,\n    required,\n    id: contextId,\n    ariaDisabled,\n    readOnly: isReadOnly,\n    inputProps: inputHintAriaProps,\n    hintProps,\n    hint,\n    showError: hasError,\n  } = useFormControl({\n    propDisabled,\n    propRequired,\n    propId,\n    propAriaDisabled: ariaDisabledProp,\n    propReadOnly,\n    controlState,\n    validationVisibility: 'immediate',\n  });\n  const disabledOrAriaDisabled = disabled || ariaDisabled || false;\n\n  const state = useNumberFieldState({\n    value: numberInputValue,\n    onChange,\n    placeholder,\n    minValue,\n    maxValue,\n    step,\n    isDisabled: disabled,\n    isReadOnly,\n    isRequired: required,\n    locale,\n  });\n\n  const inputRef = useRef<HTMLInputElement | null>(null);\n  const wrapperRef = useRef<HTMLDivElement | null>(null);\n\n  useImperativeHandle(\n    forwardedRef,\n    (): Omit<FormControlRef<HTMLDivElement>, 'validate'> => ({\n      element: wrapperRef.current,\n      inputRef: inputRef.current,\n      focus() {\n        inputRef.current?.focus();\n      },\n    }),\n    [],\n  );\n\n  const { inputProps } = useNumberField(\n    {\n      value: numberInputValue,\n      onChange,\n      id: contextId,\n      placeholder,\n      minValue,\n      maxValue,\n      step,\n      isDisabled: disabled,\n      isReadOnly,\n      isRequired: required,\n      onKeyUp,\n      onKeyDown,\n      onBlur,\n      onFocus,\n      onFocusChange,\n      // we pass the aria-labelledBy only if there's no aria-label, because the useNumberField would add aria-labelledby\n      // with 2 ids and append the input text to its aria-label otherwise, breaking the getByLabelText selectors in tests otherwise\n      'aria-labelledby': remainingAriaProps['aria-label']\n        ? undefined\n        : ariaLabelledBy,\n\n      ...remainingAriaProps, // passing the aria props here prevents unnecessary react-aria warnings when aria-labelling props are already set\n    },\n    state,\n    // eslint-disable-next-line @typescript-eslint/prefer-ts-expect-error, @typescript-eslint/ban-ts-comment\n    // @ts-ignore React 19 - proper overlap for the ref is no longer there. It should be fine, but the Numberfield will be reworked anyways\n    inputRef,\n  );\n  let inputDefaultValue: string | undefined;\n\n  if (defaultValue !== null && defaultValue !== undefined) {\n    inputDefaultValue = defaultValue.toString();\n  } else {\n    inputDefaultValue =\n      value === undefined && !onChange\n        ? '' // this prevents warnings about switching from uncontrolled to controlled inputs when no value or defaultValue is set, but onChange used without a value/defaultValue will still throw it\n        : undefined;\n  }\n\n  const {\n    value: inputPropsValue,\n    type,\n    id,\n    readOnly = false,\n    role,\n    onKeyDown: onKeyDownReactAria,\n    ...remainingInputProps\n  } = inputProps;\n\n  const [inputValue, setInputValue] = useControllableState({\n    defaultValue: inputDefaultValue,\n    value: inputPropsValue?.toString(),\n  });\n\n  const { isAutoFilled, onAnimationStart } = useAutofillEvent();\n\n  const handleInputChange = (event: ChangeEvent<HTMLInputElement>) => {\n    remainingInputProps?.onChange?.(event);\n    setInputValue(event.target.value);\n  };\n\n  const { focusProps, focusClassName } = useFocusRing({\n    color: hasError && !(disabled || ariaDisabled) ? 'critical' : 'neutral',\n    ignoreModality: true,\n    disabled,\n  });\n\n  //TODO: replace this with the BaseInput once the rework is done and we no longer depend on react-aria. This introduced the limitation of passing the inputRef from the BaseInput to the NumberInputBase, as it's initially null and useNumberField instantly breaks instead of waiting for failing gracefully and then resetting the ref on the next render\n  return (\n    <Flex\n      gap={4}\n      flexDirection=\"column\"\n      data-testid={dataTestId}\n      data-dtrum-mask={dataDtrumMask}\n      data-dtrum-allow={dataDtrumAllow}\n      ref={wrapperRef}\n      className={consumerClassName}\n      style={consumerStyle}\n      {...behavioralTrackingProps}\n      data-dt-component={componentName}\n    >\n      <Flex\n        gap={2}\n        alignItems=\"center\"\n        className={clsx(styles.wrapper, styles.variant['default'], {\n          [styles.hasError]: hasError,\n          [styles.disabled]: disabledOrAriaDisabled,\n          [styles.readOnly]: readOnly,\n        })}\n      >\n        <div\n          className={clsx(\n            styles.container,\n            inputGroupClassName,\n            focusClassName,\n            {\n              [styles.isAutoFilled]: isAutoFilled,\n            },\n          )}\n        >\n          <input\n            id={id}\n            ref={inputRef}\n            type=\"text\"\n            role={role}\n            onChange={handleInputChange}\n            onAnimationStart={onAnimationStart}\n            disabled={disabled}\n            className={clsx(styles.input, autofillCSS)}\n            readOnly={readOnly}\n            {...(_mergeProps(\n              remainingInputProps,\n              restProps,\n              focusProps,\n              inputHintAriaProps,\n            ) as unknown as Record<string, unknown>)}\n            name={name}\n            required={required} // react-aria only sets aria-required in the remainingInputProps, so we need to override it with the context prop here\n            value={inputValue}\n            aria-disabled={ariaDisabled}\n            // react-aria prevents default events, so it behaves differently from our TextInput, which has some undesired issues - see ADES-3971 and https://github.com/adobe/react-spectrum/issues/2803\n            onKeyDown={(e: KeyboardEvent<HTMLInputElement>) => {\n              if (\n                (e.key === 'Home' && minValue === undefined) ||\n                (e.key === 'End' && maxValue === undefined)\n              ) {\n                onKeyDown?.(e);\n                return; // opt out of using react-aria's keydown logic in this case, because it would prevent default behavior (moving the cursor to the front/end with Home/End)\n              }\n\n              onKeyDownReactAria?.(e); // we still need to use react aria's events when we do have a min/max (then the value will be snapped to these when pressing Home/End) or for incrementing/decrementing the value on pressing Up/Down keys, but these will no longer be necessary as soon as we implement the spin button\n            }}\n          />\n        </div>\n      </Flex>\n      {hint && (\n        <BaseItem\n          variant={hasError ? 'error' : 'hint'}\n          disabled={disabled || ariaDisabled}\n          {...hintProps}\n        >\n          {hint}\n        </BaseItem>\n      )}\n    </Flex>\n  );\n});\n\n(\n  NumberInputBase as typeof NumberInputBase & { displayName: string }\n).displayName = 'NumberInputBase';\n"],
+  "mappings": "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",
   "names": []
 }

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

@@ -11,7 +11,7 @@ import {
 import { useIntl } from "react-intl";
 import { applyStep } from "./utils/calculations.js";
 import { checkFormat, parseNumber } from "./utils/format.js";
-import { addError, getErrorKey } from "./utils/validation.js";
+import { getErrorKey } from "./utils/validation.js";
 import { useBehavioralTrackingProps } from "../../core/hooks/useBehavioralTrackingProps.js";
 import { useId } from "../../core/hooks/useId.js";
 import { useMergeRefs } from "../../core/hooks/useMergeRefs.js";
@@ -25,11 +25,14 @@ import {
 import { useFormFieldMessagesContext } from "../forms-core/hooks/useFormFieldMessagesContext.js";
 import {
   getErrorType,
+  getI18nErrorMessage,
   getI18nValidationMessage
 } from "../forms-core/hooks/useFormFieldValidation.js";
 import { FormFieldMessagesAction } from "../forms-core/state/formfield-messages-state-reducer.js";
 import { getSafeRegionalFormat } from "../forms-core/time/helpers.js";
-import { NativeValidityStateKeys } from "../validation/types.js";
+import {
+  NativeValidityStateKeys
+} from "../validation/types.js";
 import { useCustomMessageEmitter } from "../validation/useCustomMessageEmitter.js";
 import { useValidationStateEmitter } from "../validation/useValidationStateEmitter.js";
 import { getValidationState } from "../validation/validation-builders.js";
@@ -68,36 +71,6 @@ const NumberInputRoot = /* @__PURE__ */ forwardRef((props, forwardedRef) => {
   const [behavioralTrackingProps, restProps] = useBehavioralTrackingProps(remainingProps);
   const { dispatch } = useFormFieldMessagesContext();
   const _emitValidationState = useValidationStateEmitter(onValidityChange);
-  const emitValidationState = useCustomMessageEmitter(
-    _emitValidationState,
-    () => {
-      if (!value && value !== 0) {
-        const nativeErrorKey = getErrorType(
-          internalRef.current?.inputRef?.validity
-        );
-        const message = nativeErrorKey ? getI18nValidationMessage(
-          intl,
-          nativeErrorKey,
-          internalRef.current?.inputRef
-        ) : void 0;
-        return getValidationState(
-          internalRef.current?.inputRef,
-          "manual",
-          message
-        );
-      }
-      const errorKey = getErrorKey(value, min, max, step);
-      return errorKey ? getValidationState(
-        NativeValidityStateKeys[errorKey],
-        "manual",
-        getI18nValidationMessage(
-          intl,
-          errorKey,
-          internalRef.current?.inputRef
-        )
-      ) : getValidationState(null, "manual");
-    }
-  );
   const errorId = useId();
   const isPasted = useRef(false);
   const isInternalChanged = useRef(defaultValue !== void 0);
@@ -157,6 +130,27 @@ const NumberInputRoot = /* @__PURE__ */ forwardRef((props, forwardedRef) => {
     }).format(propValue);
     return formattedPropValue;
   }, [propValue, internalValue]);
+  const computeValidationState = useCallback(
+    (trigger) => {
+      const input = internalRef.current?.inputRef;
+      if (!value && value !== 0) {
+        const nativeErrorKey = getErrorType(input?.validity);
+        const message = nativeErrorKey ? getI18nValidationMessage(intl, nativeErrorKey, input) : void 0;
+        return getValidationState(input, trigger, message);
+      }
+      const errorKey = getErrorKey(value, min, max, step);
+      return errorKey ? getValidationState(
+        NativeValidityStateKeys[errorKey],
+        trigger,
+        getI18nValidationMessage(intl, errorKey, input)
+      ) : getValidationState(null, trigger);
+    },
+    [value, min, max, step, intl]
+  );
+  const emitValidationState = useCustomMessageEmitter(
+    _emitValidationState,
+    () => computeValidationState("manual")
+  );
   const handleChange = useCallback(
     (e) => {
       const parsedValue = checkFormat(e.target.value);
@@ -182,40 +176,10 @@ const NumberInputRoot = /* @__PURE__ */ forwardRef((props, forwardedRef) => {
   );
   const handleBlur = useCallback(
     (e) => {
-      if (!value && value !== 0) {
-        const nativeErrorKey = getErrorType(
-          internalRef.current?.inputRef?.validity
-        );
-        const message = nativeErrorKey ? getI18nValidationMessage(
-          intl,
-          nativeErrorKey,
-          internalRef.current?.inputRef
-        ) : void 0;
-        emitValidationState(
-          getValidationState(internalRef.current?.inputRef, "blur", message)
-        );
-        onBlur?.(e);
-        return;
-      }
-      const errorKey = getErrorKey(value, min, max, step);
-      if (errorKey) {
-        emitValidationState(
-          getValidationState(
-            NativeValidityStateKeys[errorKey],
-            "blur",
-            getI18nValidationMessage(
-              intl,
-              errorKey,
-              internalRef.current?.inputRef
-            )
-          )
-        );
-      } else {
-        emitValidationState(getValidationState(null, "blur"));
-      }
+      emitValidationState(computeValidationState("blur"));
       onBlur?.(e);
     },
-    [value, min, max, step, emitValidationState, onBlur]
+    [emitValidationState, computeValidationState, onBlur]
   );
   const handleStep = useCallback(
     (direction) => {
@@ -269,94 +233,49 @@ const NumberInputRoot = /* @__PURE__ */ forwardRef((props, forwardedRef) => {
   useImperativeHandle(
     forwardedRef,
     () => ({
+      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion -- internalRef.current is guaranteed by useImperativeHandle's post-mount execution
       ...internalRef.current,
       validateAsync: async () => {
         dispatch?.({
           type: FormFieldMessagesAction.SETISTOUCHED,
           payload: { isTouched: true }
         });
-        let validationState;
-        if (!value && value !== 0) {
-          const nativeErrorKey = getErrorType(
-            internalRef.current?.inputRef?.validity
-          );
-          const message = nativeErrorKey ? getI18nValidationMessage(
-            intl,
-            nativeErrorKey,
-            internalRef.current?.inputRef
-          ) : void 0;
-          validationState = getValidationState(
-            internalRef.current?.inputRef,
-            "manual",
-            message
-          );
-        } else {
-          const errorKey = getErrorKey(value, min, max, step);
-          validationState = errorKey ? getValidationState(
-            NativeValidityStateKeys[errorKey],
-            "manual",
-            getI18nValidationMessage(
-              intl,
-              errorKey,
-              internalRef.current?.inputRef
-            )
-          ) : getValidationState(null, "manual");
-        }
+        const validationState = computeValidationState("manual");
         emitValidationState(validationState);
         return validationState;
       }
     }),
-    [dispatch, value, min, max, step, emitValidationState]
+    [dispatch, computeValidationState, emitValidationState]
   );
   useEffect(() => {
-    if (!value && value !== 0) {
-      dispatch?.({
-        type: FormFieldMessagesAction.REMOVEMESSAGE,
-        payload: { id: errorId, messageType: "formcontrol" }
-      });
-      const nativeErrorKey = getErrorType(
-        internalRef.current?.inputRef?.validity
-      );
-      if (nativeErrorKey) {
-        addError(
-          nativeErrorKey,
-          errorId,
-          internalRef.current?.inputRef,
-          dispatch
-        );
-      }
-      const message = nativeErrorKey ? getI18nValidationMessage(
-        intl,
-        nativeErrorKey,
-        internalRef.current?.inputRef
-      ) : void 0;
-      emitValidationState(
-        getValidationState(internalRef.current?.inputRef, "change", message)
-      );
-      return;
-    }
-    const errorKey = getErrorKey(value, min, max, step);
-    if (errorKey) {
-      addError(errorKey, errorId, internalRef.current?.inputRef, dispatch);
-      emitValidationState(
-        getValidationState(
-          NativeValidityStateKeys[errorKey],
-          "change",
-          getI18nValidationMessage(
-            intl,
-            errorKey,
-            internalRef.current?.inputRef
-          )
-        )
-      );
-      return;
-    }
     dispatch?.({
       type: FormFieldMessagesAction.REMOVEMESSAGE,
       payload: { id: errorId, messageType: "formcontrol" }
     });
-    emitValidationState(getValidationState(null, "change"));
-  }, [value, min, max, step, dispatch, errorId, emitValidationState]);
+    const errorKey = value || value === 0 ? getErrorKey(value, min, max, step) : null;
+    if (errorKey) {
+      dispatch?.({
+        type: FormFieldMessagesAction.ADDMESSAGE,
+        payload: {
+          id: errorId,
+          message: getI18nErrorMessage(errorKey, internalRef.current?.inputRef),
+          validityStateKey: "customError",
+          messageType: "formcontrol",
+          variant: "error"
+        }
+      });
+    }
+    emitValidationState(computeValidationState("change"));
+  }, [
+    value,
+    min,
+    max,
+    step,
+    dispatch,
+    errorId,
+    emitValidationState,
+    computeValidationState
+  ]);
   return /* @__PURE__ */ jsx(
     BaseInput,
     {

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 { 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 { NativeValidityStateKeys } 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    /** 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    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 _emitValidationState = useValidationStateEmitter(onValidityChange);\n\n  const emitValidationState = useCustomMessageEmitter(\n    _emitValidationState,\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  // Programmatically sets the DOM input value and optionally notifies consumers.\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 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],\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        let 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          validationState = getValidationState(\n            internalRef.current?.inputRef,\n            'manual',\n            message,\n          );\n        } else {\n          const errorKey = getErrorKey(value, min, max, step);\n          validationState = 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        emitValidationState(validationState);\n        return validationState;\n      },\n    }),\n    [dispatch, value, min, max, step, 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(errorKey, errorId, internalRef.current?.inputRef, dispatch);\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    emitValidationState(getValidationState(null, 'change'));\n  }, [value, min, max, step, dispatch, errorId, emitValidationState]);\n\n  return (\n    <BaseInput\n      ref={inputRef}\n      {...mergeProps(restProps, behavioralTrackingProps)}\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 { 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 { useFormFieldMessagesContext } from '../forms-core/hooks/useFormFieldMessagesContext.js';\nimport {\n  getErrorType,\n  getI18nErrorMessage,\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 {\n  NativeValidityStateKeys,\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    /** 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    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 _emitValidationState = useValidationStateEmitter(onValidityChange);\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  // Programmatically sets the DOM input value and optionally notifies consumers.\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  // Single source of truth for \"what's the current validation state?\" \u2014 used by\n  // the useEffect, handleBlur, validateAsync, and the emitter's fallback. Keeps\n  // the empty-vs-native / min-max-step split in one place instead of four.\n  const computeValidationState = useCallback(\n    (trigger: ValidationTrigger) => {\n      const input = internalRef.current?.inputRef;\n      if (!value && value !== 0) {\n        const nativeErrorKey = getErrorType(input?.validity);\n        const message = nativeErrorKey\n          ? getI18nValidationMessage(intl, nativeErrorKey, input)\n          : undefined;\n        return getValidationState(input, trigger, message);\n      }\n      const errorKey = getErrorKey(value, min, max, step);\n      return errorKey\n        ? getValidationState(\n            NativeValidityStateKeys[errorKey],\n            trigger,\n            getI18nValidationMessage(intl, errorKey, input),\n          )\n        : getValidationState(null, trigger);\n    },\n    [value, min, max, step, intl],\n  );\n\n  const emitValidationState = useCustomMessageEmitter(\n    _emitValidationState,\n    () => computeValidationState('manual'),\n  );\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      emitValidationState(computeValidationState('blur'));\n      onBlur?.(e);\n    },\n    [emitValidationState, computeValidationState, onBlur],\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      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion -- internalRef.current is guaranteed by useImperativeHandle's post-mount execution\n      ...internalRef.current!,\n      validateAsync: async () => {\n        dispatch?.({\n          type: FormFieldMessagesAction.SETISTOUCHED,\n          payload: { isTouched: true },\n        });\n        const validationState = computeValidationState('manual');\n        emitValidationState(validationState);\n        return validationState;\n      },\n    }),\n    [dispatch, computeValidationState, emitValidationState],\n  );\n\n  // Manages the min/max/step layer that NumberInput adds on top of BaseInput.\n  // BaseInput's useFormFieldValidation already handles native validity (required,\n  // pattern, ...); we only own the range/step check here. Keyed as `customError`\n  // so the reducer's setCustomValidity() sync blocks form submission \u2014 the\n  // underlying input is type=\"text\" and the browser has no native knowledge of\n  // min/max/step. REMOVE + ADD on every change so a transition between error\n  // types (e.g. rangeOverflow -> rangeUnderflow) replaces the message text\n  // instead of being swallowed by the reducer's same-id dedupe.\n  useEffect(() => {\n    dispatch?.({\n      type: FormFieldMessagesAction.REMOVEMESSAGE,\n      payload: { id: errorId, messageType: 'formcontrol' },\n    });\n\n    const errorKey =\n      value || value === 0 ? getErrorKey(value, min, max, step) : null;\n\n    if (errorKey) {\n      dispatch?.({\n        type: FormFieldMessagesAction.ADDMESSAGE,\n        payload: {\n          id: errorId,\n          message: getI18nErrorMessage(errorKey, internalRef.current?.inputRef),\n          validityStateKey: 'customError',\n          messageType: 'formcontrol',\n          variant: 'error',\n        },\n      });\n    }\n\n    emitValidationState(computeValidationState('change'));\n  }, [\n    value,\n    min,\n    max,\n    step,\n    dispatch,\n    errorId,\n    emitValidationState,\n    computeValidationState,\n  ]);\n\n  return (\n    <BaseInput\n      ref={inputRef}\n      {...mergeProps(restProps, behavioralTrackingProps)}\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/number-input-v2/utils/validation.js

@@ -1,8 +1,4 @@
 import { parseNumber } from "./format.js";
-import { getI18nErrorMessage } from "../../forms-core/hooks/useFormFieldValidation.js";
-import {
-  FormFieldMessagesAction
-} from "../../forms-core/state/formfield-messages-state-reducer.js";
 function sanitizePositiveNumber(value) {
   return value !== void 0 && !Number.isNaN(value) && value > 0 ? value : 1;
 }
@@ -12,18 +8,6 @@ function isStepAligned(value, step, min = 0) {
   const tolerance = step * 1e-9;
   return Math.abs(value - roundedValue) < tolerance;
 }
-function addError(errorType, errorId, ref, dispatch) {
-  dispatch?.({
-    type: FormFieldMessagesAction.ADDMESSAGE,
-    payload: {
-      id: errorId,
-      message: getI18nErrorMessage(errorType, ref),
-      validityStateKey: errorType,
-      messageType: "formcontrol",
-      variant: "error"
-    }
-  });
-}
 function getErrorKey(value, min, max, step) {
   const parsed = parseNumber(value);
   if (min !== void 0 && parsed < min) {
@@ -38,7 +22,6 @@ function getErrorKey(value, min, max, step) {
   return null;
 }
 export {
-  addError,
   getErrorKey,
   isStepAligned,
   sanitizePositiveNumber

package/esm/forms/number-input-v2/utils/validation.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/forms/number-input-v2/utils/validation.tsx"],
-  "sourcesContent": ["import type { Dispatch } from 'react';\n\nimport { parseNumber } from './format.js';\nimport { getI18nErrorMessage } from '../../forms-core/hooks/useFormFieldValidation.js';\nimport {\n  FormFieldMessagesAction,\n  type FormFieldMessagesReducerAction,\n} from '../../forms-core/state/formfield-messages-state-reducer.js';\nimport type { NativeValidityStateKeys } from '../../validation/types.js';\n\n/**\n * Sanitizes a numeric step value, returning 1 if the value is undefined, NaN, zero, or negative.\n * @internal\n */\nexport function sanitizePositiveNumber(value: number | undefined): number {\n  return value !== undefined && !Number.isNaN(value) && value > 0 ? value : 1;\n}\n\n/**\n * Checks if the given value is aligned with the specified step and minimum value.\n * @internal\n */\nexport function isStepAligned(\n  value: number,\n  step: number,\n  min: number = 0,\n): boolean {\n  step = sanitizePositiveNumber(step);\n  const roundedValue = Math.round((value - min) / step) * step + min;\n  const tolerance = step * 1e-9;\n  return Math.abs(value - roundedValue) < tolerance;\n}\n\n/**\n * Adds an error message to the form field messages state.\n * @internal\n */\nexport function addError(\n  errorType: keyof ValidityState,\n  errorId: string,\n  ref: HTMLInputElement | HTMLSelectElement | null | undefined,\n  dispatch: Dispatch<FormFieldMessagesReducerAction> | undefined,\n): void {\n  dispatch?.({\n    type: FormFieldMessagesAction.ADDMESSAGE,\n    payload: {\n      id: errorId,\n      message: getI18nErrorMessage(errorType, ref),\n      validityStateKey: errorType,\n      messageType: 'formcontrol',\n      variant: 'error',\n    },\n  });\n}\n\n/**\n * Determines the appropriate error key based on the provided value and validation constraints (min, max, step).\n * @internal\n */\nexport function getErrorKey(\n  value: string | number,\n  min?: number,\n  max?: number,\n  step?: number,\n): keyof typeof NativeValidityStateKeys | null {\n  const parsed = parseNumber(value);\n\n  if (min !== undefined && parsed < min) {\n    return 'rangeUnderflow';\n  }\n\n  if (max !== undefined && parsed > max) {\n    return 'rangeOverflow';\n  }\n\n  if (step && step > 0 && !isStepAligned(parsed, step, min ?? 0)) {\n    return 'stepMismatch';\n  }\n  return null;\n}\n"],
-  "mappings": "AAEA,SAAS,mBAAmB;AAC5B,SAAS,2BAA2B;AACpC;AAAA,EACE;AAAA,OAEK;AAOA,SAAS,uBAAuB,OAAmC;AACxE,SAAO,UAAU,UAAa,CAAC,OAAO,MAAM,KAAK,KAAK,QAAQ,IAAI,QAAQ;AAC5E;AAMO,SAAS,cACd,OACA,MACA,MAAc,GACL;AACT,SAAO,uBAAuB,IAAI;AAClC,QAAM,eAAe,KAAK,OAAO,QAAQ,OAAO,IAAI,IAAI,OAAO;AAC/D,QAAM,YAAY,OAAO;AACzB,SAAO,KAAK,IAAI,QAAQ,YAAY,IAAI;AAC1C;AAMO,SAAS,SACd,WACA,SACA,KACA,UACM;AACN,aAAW;AAAA,IACT,MAAM,wBAAwB;AAAA,IAC9B,SAAS;AAAA,MACP,IAAI;AAAA,MACJ,SAAS,oBAAoB,WAAW,GAAG;AAAA,MAC3C,kBAAkB;AAAA,MAClB,aAAa;AAAA,MACb,SAAS;AAAA,IACX;AAAA,EACF,CAAC;AACH;AAMO,SAAS,YACd,OACA,KACA,KACA,MAC6C;AAC7C,QAAM,SAAS,YAAY,KAAK;AAEhC,MAAI,QAAQ,UAAa,SAAS,KAAK;AACrC,WAAO;AAAA,EACT;AAEA,MAAI,QAAQ,UAAa,SAAS,KAAK;AACrC,WAAO;AAAA,EACT;AAEA,MAAI,QAAQ,OAAO,KAAK,CAAC,cAAc,QAAQ,MAAM,OAAO,CAAC,GAAG;AAC9D,WAAO;AAAA,EACT;AACA,SAAO;AACT;",
+  "sourcesContent": ["import { parseNumber } from './format.js';\nimport type { NativeValidityStateKeys } from '../../validation/types.js';\n\n/**\n * Sanitizes a numeric step value, returning 1 if the value is undefined, NaN, zero, or negative.\n * @internal\n */\nexport function sanitizePositiveNumber(value: number | undefined): number {\n  return value !== undefined && !Number.isNaN(value) && value > 0 ? value : 1;\n}\n\n/**\n * Checks if the given value is aligned with the specified step and minimum value.\n * @internal\n */\nexport function isStepAligned(\n  value: number,\n  step: number,\n  min: number = 0,\n): boolean {\n  step = sanitizePositiveNumber(step);\n  const roundedValue = Math.round((value - min) / step) * step + min;\n  const tolerance = step * 1e-9;\n  return Math.abs(value - roundedValue) < tolerance;\n}\n\n/**\n * Determines the appropriate error key based on the provided value and validation constraints (min, max, step).\n * @internal\n */\nexport function getErrorKey(\n  value: string | number,\n  min?: number,\n  max?: number,\n  step?: number,\n): keyof typeof NativeValidityStateKeys | null {\n  const parsed = parseNumber(value);\n\n  if (min !== undefined && parsed < min) {\n    return 'rangeUnderflow';\n  }\n\n  if (max !== undefined && parsed > max) {\n    return 'rangeOverflow';\n  }\n\n  if (step && step > 0 && !isStepAligned(parsed, step, min ?? 0)) {\n    return 'stepMismatch';\n  }\n  return null;\n}\n"],
+  "mappings": "AAAA,SAAS,mBAAmB;AAOrB,SAAS,uBAAuB,OAAmC;AACxE,SAAO,UAAU,UAAa,CAAC,OAAO,MAAM,KAAK,KAAK,QAAQ,IAAI,QAAQ;AAC5E;AAMO,SAAS,cACd,OACA,MACA,MAAc,GACL;AACT,SAAO,uBAAuB,IAAI;AAClC,QAAM,eAAe,KAAK,OAAO,QAAQ,OAAO,IAAI,IAAI,OAAO;AAC/D,QAAM,YAAY,OAAO;AACzB,SAAO,KAAK,IAAI,QAAQ,YAAY,IAAI;AAC1C;AAMO,SAAS,YACd,OACA,KACA,KACA,MAC6C;AAC7C,QAAM,SAAS,YAAY,KAAK;AAEhC,MAAI,QAAQ,UAAa,SAAS,KAAK;AACrC,WAAO;AAAA,EACT;AAEA,MAAI,QAAQ,UAAa,SAAS,KAAK;AACrC,WAAO;AAAA,EACT;AAEA,MAAI,QAAQ,OAAO,KAAK,CAAC,cAAc,QAAQ,MAAM,OAAO,CAAC,GAAG;AAC9D,WAAO;AAAA,EACT;AACA,SAAO;AACT;",
   "names": []
 }

package/esm/forms/password-input/PasswordInput.js

@@ -40,6 +40,7 @@ const PasswordInputRoot = /* @__PURE__ */ forwardRef((props, forwardedRef) => {
     name,
     readOnly = false,
     disabled,
+    // eslint-disable-next-line @typescript-eslint/no-deprecated -- APPDEV-18321
     controlState,
     children,
     "data-testid": dataTestId,

package/esm/forms/password-input/PasswordInput.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/forms/password-input/PasswordInput.tsx"],
-  "sourcesContent": ["import {\n  type ChangeEvent,\n  type ReactNode,\n  forwardRef,\n  useState,\n  type ReactElement,\n  Children,\n} from 'react';\nimport { useIntl } from 'react-intl';\n\nimport { ViewIcon, ViewOffIcon } from '@dynatrace/strato-icons';\n\nimport {\n  PasswordInputTooltip,\n  type PasswordInputTooltipProps,\n} from './PasswordInputTooltip.js';\nimport { useBehavioralTrackingProps } from '../../core/hooks/useBehavioralTrackingProps.js';\nimport { useControllableState } from '../../core/hooks/useControllableState.js';\nimport type { BehaviorTrackingProps } from '../../core/types/behavior-tracking-props.js';\nimport type { FormControlProps } from '../../core/types/form-control-props.js';\nimport { WithChildren } from '../../core/types/with-children.js';\nimport { extractBehaviorTrackingProps } from '../../core/utils/extract-behavior-tracking-props.js';\nimport { isSlot } from '../../core/utils/is-slot.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 { getPlaceholderMessage } from '../_base-input/baseInputMessages.js';\nimport type { FormControlRef } from '../shared-types.js';\nconst COMPONENT_NAME = 'PasswordInput';\n\n//#region Typings\n/**\n * The properties of the PasswordInput component.\n * @public\n */\nexport type PasswordInputProps = Pick<\n  BaseInputProps,\n  | 'placeholder'\n  | 'autoComplete'\n  | 'minLength'\n  | 'maxLength'\n  | 'pattern'\n  | 'onFocus'\n  | 'onBlur'\n  | 'onKeyDown'\n  | 'onKeyUp'\n  | 'className'\n  | 'style'\n  | 'data-testid'\n  | 'data-dtrum-mask'\n  | 'data-dtrum-allow'\n> &\n  FormControlProps<\n    string,\n    (value: string, event?: ChangeEvent<HTMLInputElement>) => void\n  > &\n  WithChildren &\n  BehaviorTrackingProps;\n\ntype PasswordInputSlots = {\n  tooltip: ReactElement<PasswordInputTooltipProps> | null;\n};\n//#endregion Typings\n\n/** Iterates over child nodes to extract specific component slots. */\nfunction getTooltipSlot(children: ReactNode) {\n  const slots: PasswordInputSlots = {\n    tooltip: null,\n  };\n\n  for (const child of Children.toArray(children)) {\n    if (isSlot(child, PasswordInputTooltip)) {\n      slots.tooltip = child;\n    } else if (child !== null) {\n      // do nothing if the child is null (when rendered conditionally for example) and throw a warning otherwise\n      // eslint-disable-next-line no-console\n      console.warn('The used child is not supported by the PasswordInput.');\n    }\n  }\n\n  return slots;\n}\n\nconst PasswordInputRoot = /* @__PURE__ */ forwardRef<\n  FormControlRef<HTMLDivElement>,\n  PasswordInputProps\n>((props, forwardedRef) => {\n  const intl = useIntl();\n\n  const defaultPlaceholder = intl.formatMessage(\n    getPlaceholderMessage('password'),\n  );\n\n  const {\n    onChange,\n    name,\n    readOnly = false,\n    disabled,\n    controlState,\n    children,\n    'data-testid': dataTestId,\n    'data-dtrum-mask': dataDtrumMask,\n    'data-dtrum-allow': dataDtrumAllow,\n    'aria-disabled': ariaDisabledProp,\n    className: consumerClassName,\n    style: consumerStyle,\n    defaultValue,\n    value,\n    placeholder = defaultPlaceholder,\n    ...remainingProps\n  }: PasswordInputProps = props;\n\n  const [behavioralTrackingProps, restProps] =\n    useBehavioralTrackingProps(remainingProps);\n\n  const [hidden, setHidden] = useState(true);\n\n  const [internalValue, setInternalValue] = useControllableState({\n    defaultValue,\n    value,\n  });\n\n  const onInternalChange = (event: ChangeEvent<HTMLInputElement>) => {\n    onChange?.(event.target.value, event);\n    setInternalValue(event.target.value);\n  };\n\n  const { tooltip } = getTooltipSlot(children);\n  const { showText, hideText, ...remainingTooltipProps } = tooltip?.props ?? {};\n  const tooltipBehavioralTrackingProps = extractBehaviorTrackingProps(\n    remainingTooltipProps,\n  );\n\n  const showTooltipDefaultText = intl.formatMessage({\n    defaultMessage: 'Show password',\n    id: 'tgL6QEjmq+ArASFk',\n    description:\n      'Text in a tooltip shown when hovering the password input icon to show the password',\n  });\n  const hideTooltipDefaultText = intl.formatMessage({\n    defaultMessage: 'Hide password',\n    id: 'vMt3ZRHwBods5xzM',\n    description:\n      'Text in a tooltip shown when hovering the password input icon to hide the password',\n  });\n  const dataDtProperties = `value:${hidden ? 'show' : 'hide'}`;\n\n  const showTooltipText = showText ?? showTooltipDefaultText;\n  const hideTooltipText = hideText ?? hideTooltipDefaultText;\n\n  return (\n    <BaseInput\n      {...mergeProps(restProps, behavioralTrackingProps)}\n      value={internalValue}\n      role=\"textbox\"\n      controlState={controlState}\n      name={name}\n      type={hidden ? 'password' : 'text'}\n      onChange={onInternalChange}\n      data-testid={dataTestId}\n      data-dtrum-mask={dataDtrumMask}\n      data-dtrum-allow={dataDtrumAllow}\n      ref={forwardedRef}\n      className={consumerClassName}\n      style={consumerStyle}\n      readOnly={readOnly}\n      disabled={disabled}\n      aria-disabled={ariaDisabledProp}\n      data-dt-component={COMPONENT_NAME}\n      placeholder={placeholder}\n    >\n      <BaseInput.Suffix>\n        <BaseInput.Button\n          onClick={() => setHidden(!hidden)}\n          tooltipText={hidden ? showTooltipText : hideTooltipText}\n          tooltipBehavioralTrackingProps={tooltipBehavioralTrackingProps}\n          aria-label={hidden ? showTooltipText : hideTooltipText}\n          id={remainingTooltipProps.id}\n          aria-disabled={ariaDisabledProp}\n          data-dt-name=\"ShowHidePassword\"\n          data-dt-properties={dataDtProperties}\n          disabled={readOnly ? false : disabled}\n        >\n          {hidden ? <ViewIcon /> : <ViewOffIcon />}\n        </BaseInput.Button>\n      </BaseInput.Suffix>\n    </BaseInput>\n  );\n});\n\n/**\n * The `PasswordInput` component can be used to hide user input.\n * Always use a `PasswordInput` when your app asks for sensitive data,\n * such as a password. Users can click on the eye icon to hide or show their data.\n * @public\n */\nexport const PasswordInput = Object.assign(PasswordInputRoot, {\n  Tooltip: PasswordInputTooltip,\n});\n\n(PasswordInput as typeof PasswordInput & { displayName: string }).displayName =\n  COMPONENT_NAME;\n"],
-  "mappings": "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",
+  "sourcesContent": ["import {\n  type ChangeEvent,\n  type ReactNode,\n  forwardRef,\n  useState,\n  type ReactElement,\n  Children,\n} from 'react';\nimport { useIntl } from 'react-intl';\n\nimport { ViewIcon, ViewOffIcon } from '@dynatrace/strato-icons';\n\nimport {\n  PasswordInputTooltip,\n  type PasswordInputTooltipProps,\n} from './PasswordInputTooltip.js';\nimport { useBehavioralTrackingProps } from '../../core/hooks/useBehavioralTrackingProps.js';\nimport { useControllableState } from '../../core/hooks/useControllableState.js';\nimport type { BehaviorTrackingProps } from '../../core/types/behavior-tracking-props.js';\nimport type { FormControlProps } from '../../core/types/form-control-props.js';\nimport { WithChildren } from '../../core/types/with-children.js';\nimport { extractBehaviorTrackingProps } from '../../core/utils/extract-behavior-tracking-props.js';\nimport { isSlot } from '../../core/utils/is-slot.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 { getPlaceholderMessage } from '../_base-input/baseInputMessages.js';\nimport type { FormControlRef } from '../shared-types.js';\nconst COMPONENT_NAME = 'PasswordInput';\n\n//#region Typings\n/**\n * The properties of the PasswordInput component.\n * @public\n */\nexport type PasswordInputProps = Pick<\n  BaseInputProps,\n  | 'placeholder'\n  | 'autoComplete'\n  | 'minLength'\n  | 'maxLength'\n  | 'pattern'\n  | 'onFocus'\n  | 'onBlur'\n  | 'onKeyDown'\n  | 'onKeyUp'\n  | 'className'\n  | 'style'\n  | 'data-testid'\n  | 'data-dtrum-mask'\n  | 'data-dtrum-allow'\n> &\n  FormControlProps<\n    string,\n    (value: string, event?: ChangeEvent<HTMLInputElement>) => void\n  > &\n  WithChildren &\n  BehaviorTrackingProps;\n\ntype PasswordInputSlots = {\n  tooltip: ReactElement<PasswordInputTooltipProps> | null;\n};\n//#endregion Typings\n\n/** Iterates over child nodes to extract specific component slots. */\nfunction getTooltipSlot(children: ReactNode) {\n  const slots: PasswordInputSlots = {\n    tooltip: null,\n  };\n\n  for (const child of Children.toArray(children)) {\n    if (isSlot(child, PasswordInputTooltip)) {\n      slots.tooltip = child;\n    } else if (child !== null) {\n      // do nothing if the child is null (when rendered conditionally for example) and throw a warning otherwise\n      // eslint-disable-next-line no-console\n      console.warn('The used child is not supported by the PasswordInput.');\n    }\n  }\n\n  return slots;\n}\n\nconst PasswordInputRoot = /* @__PURE__ */ forwardRef<\n  FormControlRef<HTMLDivElement>,\n  PasswordInputProps\n>((props, forwardedRef) => {\n  const intl = useIntl();\n\n  const defaultPlaceholder = intl.formatMessage(\n    getPlaceholderMessage('password'),\n  );\n\n  const {\n    onChange,\n    name,\n    readOnly = false,\n    disabled,\n    // eslint-disable-next-line @typescript-eslint/no-deprecated -- APPDEV-18321\n    controlState,\n    children,\n    'data-testid': dataTestId,\n    'data-dtrum-mask': dataDtrumMask,\n    'data-dtrum-allow': dataDtrumAllow,\n    'aria-disabled': ariaDisabledProp,\n    className: consumerClassName,\n    style: consumerStyle,\n    defaultValue,\n    value,\n    placeholder = defaultPlaceholder,\n    ...remainingProps\n  }: PasswordInputProps = props;\n\n  const [behavioralTrackingProps, restProps] =\n    useBehavioralTrackingProps(remainingProps);\n\n  const [hidden, setHidden] = useState(true);\n\n  const [internalValue, setInternalValue] = useControllableState({\n    defaultValue,\n    value,\n  });\n\n  const onInternalChange = (event: ChangeEvent<HTMLInputElement>) => {\n    onChange?.(event.target.value, event);\n    setInternalValue(event.target.value);\n  };\n\n  const { tooltip } = getTooltipSlot(children);\n  const { showText, hideText, ...remainingTooltipProps } = tooltip?.props ?? {};\n  const tooltipBehavioralTrackingProps = extractBehaviorTrackingProps(\n    remainingTooltipProps,\n  );\n\n  const showTooltipDefaultText = intl.formatMessage({\n    defaultMessage: 'Show password',\n    id: 'tgL6QEjmq+ArASFk',\n    description:\n      'Text in a tooltip shown when hovering the password input icon to show the password',\n  });\n  const hideTooltipDefaultText = intl.formatMessage({\n    defaultMessage: 'Hide password',\n    id: 'vMt3ZRHwBods5xzM',\n    description:\n      'Text in a tooltip shown when hovering the password input icon to hide the password',\n  });\n  const dataDtProperties = `value:${hidden ? 'show' : 'hide'}`;\n\n  const showTooltipText = showText ?? showTooltipDefaultText;\n  const hideTooltipText = hideText ?? hideTooltipDefaultText;\n\n  return (\n    <BaseInput\n      {...mergeProps(restProps, behavioralTrackingProps)}\n      value={internalValue}\n      role=\"textbox\"\n      // eslint-disable-next-line @typescript-eslint/no-deprecated -- APPDEV-18321\n      controlState={controlState}\n      name={name}\n      type={hidden ? 'password' : 'text'}\n      onChange={onInternalChange}\n      data-testid={dataTestId}\n      data-dtrum-mask={dataDtrumMask}\n      data-dtrum-allow={dataDtrumAllow}\n      ref={forwardedRef}\n      className={consumerClassName}\n      style={consumerStyle}\n      readOnly={readOnly}\n      disabled={disabled}\n      aria-disabled={ariaDisabledProp}\n      data-dt-component={COMPONENT_NAME}\n      placeholder={placeholder}\n    >\n      <BaseInput.Suffix>\n        <BaseInput.Button\n          onClick={() => setHidden(!hidden)}\n          tooltipText={hidden ? showTooltipText : hideTooltipText}\n          tooltipBehavioralTrackingProps={tooltipBehavioralTrackingProps}\n          aria-label={hidden ? showTooltipText : hideTooltipText}\n          id={remainingTooltipProps.id}\n          aria-disabled={ariaDisabledProp}\n          data-dt-name=\"ShowHidePassword\"\n          data-dt-properties={dataDtProperties}\n          disabled={readOnly ? false : disabled}\n        >\n          {hidden ? <ViewIcon /> : <ViewOffIcon />}\n        </BaseInput.Button>\n      </BaseInput.Suffix>\n    </BaseInput>\n  );\n});\n\n/**\n * The `PasswordInput` component can be used to hide user input.\n * Always use a `PasswordInput` when your app asks for sensitive data,\n * such as a password. Users can click on the eye icon to hide or show their data.\n * @public\n */\nexport const PasswordInput = Object.assign(PasswordInputRoot, {\n  Tooltip: PasswordInputTooltip,\n});\n\n(PasswordInput as typeof PasswordInput & { displayName: string }).displayName =\n  COMPONENT_NAME;\n"],
+  "mappings": "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",
   "names": []
 }

package/esm/forms/radio/Radio.js

@@ -17,6 +17,7 @@ import { isDev } from "../../core/utils/is-node-environment.js";
 import { mergeProps as _mergeProps } from "../../core/utils/merge-props.js";
 import { fieldTokens as fieldColorsCSS } from "../../styles/field.sty.js";
 import { Text } from "../../typography/text/Text.js";
+import { useFormFieldContext } from "../forms-core/hooks/useFormFieldContext.js";
 import { useFormFieldMessagesContext } from "../forms-core/hooks/useFormFieldMessagesContext.js";
 import { useFormFieldValidation } from "../forms-core/hooks/useFormFieldValidation.js";
 import { FormFieldMessagesAction } from "../forms-core/state/formfield-messages-state-reducer.js";
@@ -41,6 +42,7 @@ const Radio = /* @__PURE__ */ forwardRef(
     } = props;
     const [behavioralTrackingProps, restProps] = useBehavioralTrackingProps(remainingProps);
     const { dispatch: messagesContextDispatch } = useFormFieldMessagesContext();
+    const { registerMemberFormControlId } = useFormFieldContext();
     const radioGroupContext = useContext(RadioGroupContext);
     if (isDev() && !radioGroupContext) {
       console.warn(
@@ -109,16 +111,20 @@ const Radio = /* @__PURE__ */ forwardRef(
       id,
       onValidityChange
     );
+    useEffect(
+      () => registerMemberFormControlId(id),
+      [id, registerMemberFormControlId]
+    );
     useEffect(() => {
       messagesContextDispatch?.({
-        type: FormFieldMessagesAction.ADDFORMCONTROLID,
-        payload: { controlId: id }
+        type: FormFieldMessagesAction.ADDMEMBERFORMCONTROLID,
+        payload: { formControlId: id }
       });
       return () => messagesContextDispatch?.({
-        type: FormFieldMessagesAction.REMOVEFORMCONTROLID,
-        payload: { controlId: id }
+        type: FormFieldMessagesAction.REMOVEMEMBERFORMCONTROLID,
+        payload: { formControlId: id }
       });
-    }, [id]);
+    }, [id, messagesContextDispatch]);
     const disabled = propDisabled ?? isDisabled;
     const disabledOrAriaDisabled = disabled || ariaDisabled || false;
     const checked = value === groupValue;