@skbkontur/react-ui 6.1.4-05b51.0 → 6.1.4-ff219.0

package/components/MaskedInput/MaskedInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"MaskedInput.js","sourceRoot":"","sources":["MaskedInput.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { IMaskInputProps } from '@skbkontur/react-imask';\nimport React, { useContext, useEffect, useImperativeHandle, useRef, useState } from 'react';\nimport type { Ref } from 'react';\n\nimport { isKeyBackspace, isKeyDelete } from '../../lib/events/keyboard/identifiers.js';\nimport { forwardRefAndName } from '../../lib/forwardRefAndName.js';\nimport { useEmotion, useStyles } from '../../lib/renderEnvironment/index.js';\nimport { ThemeContext } from '../../lib/theming/ThemeContext.js';\nimport type { InputProps, InputType } from '../Input/index.js';\nimport { Input } from '../Input/index.js';\nimport { ColorableInputElement } from './ColorableInputElement/index.js';\nimport { FixedIMaskInput } from './FixedIMaskInput.js';\nimport { getDefinitions, getMaskChar } from './MaskedInput.helpers.js';\nimport { getStyles, globalClasses } from './MaskedInput.styles.js';\n\nexport type MaskedInputOnBeforePasteValue = (value: string) => string;\n\nexport interface MaskedProps {\n  /** Шаблон ввода, определяющий допустимые символы. */\n  mask: string;\n\n  /** Плейсхолдер, который отображается на месте ещё не введённых пользователем символов.\n   * @default _ */\n  maskChar?: string;\n\n  /** Словарь правил для настройки маски, где:\n   * ключ — символ для использования в маске;\n   * значение — регулярка-правило.\n   * @default { '9': '[0-9]', 'a': '[A-Za-z]', '*': '[A-Za-z0-9]' } */\n  formatChars?: Record<string, string>;\n\n  /** Всегда показывать символы маски, независимо от фокуса в поле.\n   * @default false */\n  alwaysShowMask?: boolean;\n\n  /** Событие некорректного ввода.\n   * Вторым аргументом передаётся метод вспыхивания рамки поля.\n   *\n   * Если обработчик не задан, то при событии рамка всегда вспыхивает.\n   *\n   * @param value значение поля\n   * @param blink метод вспыхивания рамки поля\n   */\n  onUnexpectedInput?: (value: string, blink: () => void) => void;\n\n  /**\n   * Событие перед вставкой текста в поле.\n   * Вызывается с аргументом value — текст из буфера.\n   *\n   * Обработчик должен вернуть текст — он попадёт в поле.\n   *\n   * @param value значение вставки.\n   */\n  onBeforePasteValue?: MaskedInputOnBeforePasteValue;\n\n  /** Убирает из value символы маски, которые пользователь не вводил.\n   * @default false */\n  unmask?: boolean;\n\n  /** Раскрашивает символы маски.\n   * @default true\n   * @ignore */\n  colored?: boolean;\n\n  /** Задает пропсы для компонента `IMaskInput`. Необходимы для юнит-тестов\n   * @ignore */\n  imaskProps?: IMaskInputProps<HTMLInputElement>;\n}\n\nexport type MaskInputType = Exclude<InputType, 'number' | 'date' | 'time' | 'password'>;\n\nexport const getSafeMaskInputType = (type?: InputType): MaskInputType | undefined => {\n  if (!type) {\n    return type;\n  }\n\n  switch (type) {\n    case 'number':\n    case 'date':\n    case 'time':\n    case 'password':\n      return 'text';\n    default:\n      return type;\n  }\n};\n\nexport interface MaskedInputProps\n  extends\n    MaskedProps,\n    Omit<\n      InputProps,\n      'showClearIcon' | 'mask' | 'maxLength' | 'type' | 'alwaysShowMask' | 'onUnexpectedInput' | 'maskChar'\n    > {\n  type?: MaskInputType;\n}\n\n/** Поле ввода, которое ограничивает формат вводимого значения по заданной маске. Такое поле облегчает пользователю ввод и снижает количество ошибок.\n */\nexport const MaskedInput = forwardRefAndName(\n  'MaskedInput',\n  function MaskedInput(props: MaskedInputProps, ref: Ref<Input | null>) {\n    const {\n      mask,\n      maskChar,\n      formatChars,\n      alwaysShowMask = false,\n      colored = true,\n      imaskProps: customIMaskProps = {},\n      unmask = false,\n      onValueChange,\n      onUnexpectedInput,\n      onChange,\n      onBeforePasteValue,\n      element,\n      className,\n      // @ts-expect-error: могут передавать игнорируя ошибку\n      maxLength,\n      ...inputProps\n    } = props;\n    const theme = useContext(ThemeContext);\n    const { cx } = useEmotion();\n    const styles = useStyles(getStyles);\n\n    const inputRef = useRef<Input>(null);\n\n    const [focused, setFocused] = useState(false);\n    const prevValue = useRef<string>(props.value || String(props.defaultValue) || '');\n    const prevSelectionStart = useRef<number | null>(null);\n\n    useImperativeHandle<typeof inputRef.current, typeof inputRef.current>(\n      ref,\n      () =>\n        inputRef.current &&\n        Object.assign(inputRef.current, {\n          selectAll: () => {\n            inputRef.current?.focus();\n            inputRef.current?.delaySelectAll();\n          },\n        }),\n      [],\n    );\n\n    useEffect(() => {\n      // Для корректной работы onUnexpectedInput надо знать предыдущий value,\n      // но imask при монтировании не вызывает onAccept, если value невалиден или laze=false.\n      // Поэтому актуальный value при монтировании надо получать вручную\n      if (inputRef.current?.input) {\n        prevValue.current = inputRef.current.input.value;\n        prevSelectionStart.current = inputRef.current.input.selectionStart;\n      }\n    }, []);\n\n    const imaskProps = getCompatibleIMaskProps();\n\n    return (\n      <Input\n        ref={inputRef}\n        {...inputProps}\n        onFocus={handleFocus}\n        onBlur={handleBlur}\n        onInput={handleInput}\n        onKeyDown={handleKeyDown}\n        onPaste={handlePaste}\n        className={cx(globalClasses.root, className, styles.root(theme))}\n        element={\n          colored ? (\n            <ColorableInputElement showOnFocus={false} alwaysShowMask={alwaysShowMask}>\n              <FixedIMaskInput {...imaskProps} onAccept={handleAccept} />\n            </ColorableInputElement>\n          ) : (\n            <FixedIMaskInput {...imaskProps} onAccept={handleAccept} />\n          )\n        }\n      />\n    );\n\n    function handlePaste(event: React.ClipboardEvent<HTMLInputElement>) {\n      if (onBeforePasteValue && onValueChange) {\n        event.preventDefault();\n        onValueChange?.(onBeforePasteValue(event.clipboardData?.getData('text') ?? ''));\n      }\n\n      props.onPaste?.(event);\n    }\n\n    function getCompatibleIMaskProps(): IMaskInputProps<HTMLInputElement> {\n      return {\n        mask: mask.replace(/0/g, '{\\\\0}') as any,\n        placeholderChar: getMaskChar(maskChar),\n        definitions: getDefinitions(formatChars),\n        // FIXME: Должно быть eager=true, но в imask ломается удаление по delete\n        eager: 'append',\n        overwrite: 'shift',\n        lazy: !alwaysShowMask && (props.disabled || !focused),\n        unmask,\n        ...customIMaskProps,\n      } as IMaskInputProps<HTMLInputElement>;\n    }\n\n    function handleAccept(...args: Parameters<Required<IMaskInputProps<HTMLInputElement>>['onAccept']>) {\n      const [value, , e] = args;\n\n      // Метод onAccept может вызываться при монтировании, если не задан проп defaultValue.\n      // Но нативный input никогда не вызывает onChange при монтировании.\n      // Наше событие onValueChange в Input вывается в тех же случаях, что и нативный onChange,\n      // поэтому чтобы сохранить консинстентность будем ориентироваться на наличие аргумента e.\n      // Он содержит нативное событие, вызвавшее изменение.\n      e && onValueChange?.(value);\n      !e && (prevValue.current = value);\n    }\n\n    /**\n     * Отслеживаем неожиданные нажатия\n     * handleAccept не вызывается когда значение с маской не меняется\n     * Сначала вызывается handleAccept, затем handleInput\n     */\n    function handleInput(e: React.ChangeEvent<HTMLInputElement>) {\n      const { value, selectionStart } = e.currentTarget;\n\n      // При вводе неожиданных символов или удалении каретка может перепрыгивать фиксированные символы.\n      // Такие случаи не расцениваем как неожиданный ввод, т.к. пользователь может намеренно их вводить.\n      if (prevValue.current === value && selectionStart === prevSelectionStart.current) {\n        handleUnexpectedInput(value);\n      }\n      prevValue.current = value;\n      prevSelectionStart.current = selectionStart;\n\n      props.onInput?.(e);\n    }\n\n    function handleFocus(e: React.FocusEvent<HTMLInputElement>) {\n      setFocused(true);\n      props.onFocus?.(e);\n\n      // Если value из пропсов отличается от value, которое получит input после обработки,\n      // то imask будет ставить каретку за последним валидным символом.\n      props.selectAllOnFocus && inputRef.current?.delaySelectAll();\n    }\n\n    function handleUnexpectedInput(value: string) {\n      const blink = inputRef.current?.blink.bind(inputRef.current) || (() => undefined);\n      onUnexpectedInput ? onUnexpectedInput(value, blink) : blink();\n    }\n\n    function handleBlur(e: React.FocusEvent<HTMLInputElement>) {\n      setFocused(false);\n      props.onBlur?.(e);\n    }\n\n    function handleKeyDown(e: React.KeyboardEvent<HTMLInputElement>) {\n      const { value, selectionStart, selectionEnd } = e.currentTarget;\n\n      if (\n        (isKeyBackspace(e) && selectionStart === 0 && selectionEnd === 0) ||\n        (isKeyDelete(e) && prevSelectionStart.current === value.length)\n      ) {\n        // Случаи, когда нажатие клавиш не тригерит `onInput`\n        handleUnexpectedInput(value);\n        prevValue.current = e.currentTarget.value;\n      }\n      prevSelectionStart.current = selectionStart;\n\n      props.onKeyDown?.(e);\n    }\n  },\n);\n"]}
+{"version":3,"file":"MaskedInput.js","sourceRoot":"","sources":["MaskedInput.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { IMaskInputProps } from '@skbkontur/react-imask';\nimport React, { useContext, useEffect, useImperativeHandle, useRef, useState } from 'react';\nimport type { Ref } from 'react';\nimport warning from 'warning';\n\nimport { isKeyBackspace, isKeyDelete } from '../../lib/events/keyboard/identifiers.js';\nimport { forwardRefAndName } from '../../lib/forwardRefAndName.js';\nimport { useEmotion, useStyles } from '../../lib/renderEnvironment/index.js';\nimport { ThemeContext } from '../../lib/theming/ThemeContext.js';\nimport type { InputProps, InputType } from '../Input/index.js';\nimport { Input } from '../Input/index.js';\nimport { ColorableInputElement } from './ColorableInputElement/index.js';\nimport { FixedIMaskInput } from './FixedIMaskInput.js';\nimport { getDefinitions, getMaskChar } from './MaskedInput.helpers.js';\nimport { getStyles, globalClasses } from './MaskedInput.styles.js';\n\nexport type MaskedInputOnBeforePasteValue = (value: string) => string;\n\nexport interface MaskedProps {\n  /** Шаблон ввода, определяющий допустимые символы. */\n  mask: string;\n\n  /** Плейсхолдер, который отображается на месте ещё не введённых пользователем символов.\n   * @default _ */\n  maskChar?: string;\n\n  /** Словарь правил для настройки маски, где:\n   * ключ — символ для использования в маске;\n   * значение — регулярка-правило.\n   * @default { '9': '[0-9]', 'a': '[A-Za-z]', '*': '[A-Za-z0-9]' } */\n  formatChars?: Record<string, string>;\n\n  /** Всегда показывать символы маски, независимо от фокуса в поле.\n   * @default false */\n  alwaysShowMask?: boolean;\n\n  /** Событие некорректного ввода.\n   * Вторым аргументом передаётся метод вспыхивания рамки поля.\n   *\n   * Если обработчик не задан, то при событии рамка всегда вспыхивает.\n   *\n   * @param value значение поля\n   * @param blink метод вспыхивания рамки поля\n   */\n  onUnexpectedInput?: (value: string, blink: () => void) => void;\n\n  /**\n   * Событие перед вставкой текста в поле.\n   * Вызывается с аргументом value — текст из буфера.\n   *\n   * Обработчик должен вернуть текст — он попадёт в поле.\n   *\n   * @param value значение вставки.\n   */\n  onBeforePasteValue?: MaskedInputOnBeforePasteValue;\n\n  /** Убирает из value символы маски, которые пользователь не вводил.\n   * @default false */\n  unmask?: boolean;\n\n  /** Раскрашивает символы маски.\n   * @default true\n   * @ignore */\n  colored?: boolean;\n\n  /** Задает пропсы для компонента `IMaskInput`. Необходимы для юнит-тестов\n   * @ignore */\n  imaskProps?: IMaskInputProps<HTMLInputElement>;\n}\n\nexport type MaskInputType = Exclude<InputType, 'number' | 'date' | 'time' | 'password'>;\n\nexport const getSafeMaskInputType = (type?: InputType): MaskInputType | undefined => {\n  if (!type) {\n    return type;\n  }\n\n  switch (type) {\n    case 'number':\n    case 'date':\n    case 'time':\n    case 'password':\n      return 'text';\n    default:\n      return type;\n  }\n};\n\nexport interface MaskedInputProps\n  extends\n    MaskedProps,\n    Omit<\n      InputProps,\n      'showClearIcon' | 'mask' | 'maxLength' | 'type' | 'alwaysShowMask' | 'onUnexpectedInput' | 'maskChar'\n    > {\n  type?: MaskInputType;\n}\n\n/** Поле ввода, которое ограничивает формат вводимого значения по заданной маске. Такое поле облегчает пользователю ввод и снижает количество ошибок.\n *\n * @deprecated Используйте {@link MaskedInputV2}. Будет удалён в `7.0`.\n */\nexport const MaskedInput = forwardRefAndName(\n  'MaskedInput',\n  function MaskedInput(props: MaskedInputProps, ref: Ref<Input | null>) {\n    const {\n      mask,\n      maskChar,\n      formatChars,\n      alwaysShowMask = false,\n      colored = true,\n      imaskProps: customIMaskProps = {},\n      unmask = false,\n      onValueChange,\n      onUnexpectedInput,\n      onChange,\n      onBeforePasteValue,\n      element,\n      className,\n      // @ts-expect-error: могут передавать игнорируя ошибку\n      maxLength,\n      ...inputProps\n    } = props;\n    const theme = useContext(ThemeContext);\n    const { cx } = useEmotion();\n    const styles = useStyles(getStyles);\n\n    const inputRef = useRef<Input>(null);\n\n    const [focused, setFocused] = useState(false);\n    const prevValue = useRef<string>(props.value || String(props.defaultValue) || '');\n    const prevSelectionStart = useRef<number | null>(null);\n\n    useImperativeHandle<typeof inputRef.current, typeof inputRef.current>(\n      ref,\n      () =>\n        inputRef.current &&\n        Object.assign(inputRef.current, {\n          selectAll: () => {\n            inputRef.current?.focus();\n            inputRef.current?.delaySelectAll();\n          },\n        }),\n      [],\n    );\n\n    useEffect(() => {\n      warning(false, '[MaskedInput]: компонент устарел. Используйте MaskedInputV2.');\n    }, []);\n\n    useEffect(() => {\n      // Для корректной работы onUnexpectedInput надо знать предыдущий value,\n      // но imask при монтировании не вызывает onAccept, если value невалиден или laze=false.\n      // Поэтому актуальный value при монтировании надо получать вручную\n      if (inputRef.current?.input) {\n        prevValue.current = inputRef.current.input.value;\n        prevSelectionStart.current = inputRef.current.input.selectionStart;\n      }\n    }, []);\n\n    const imaskProps = getCompatibleIMaskProps();\n\n    return (\n      <Input\n        ref={inputRef}\n        {...inputProps}\n        onFocus={handleFocus}\n        onBlur={handleBlur}\n        onInput={handleInput}\n        onKeyDown={handleKeyDown}\n        onPaste={handlePaste}\n        className={cx(globalClasses.root, className, styles.root(theme))}\n        element={\n          colored ? (\n            <ColorableInputElement showOnFocus={false} alwaysShowMask={alwaysShowMask}>\n              <FixedIMaskInput {...imaskProps} onAccept={handleAccept} />\n            </ColorableInputElement>\n          ) : (\n            <FixedIMaskInput {...imaskProps} onAccept={handleAccept} />\n          )\n        }\n      />\n    );\n\n    function handlePaste(event: React.ClipboardEvent<HTMLInputElement>) {\n      if (onBeforePasteValue && onValueChange) {\n        event.preventDefault();\n        onValueChange?.(onBeforePasteValue(event.clipboardData?.getData('text') ?? ''));\n      }\n\n      props.onPaste?.(event);\n    }\n\n    function getCompatibleIMaskProps(): IMaskInputProps<HTMLInputElement> {\n      return {\n        mask: mask.replace(/0/g, '{\\\\0}') as any,\n        placeholderChar: getMaskChar(maskChar),\n        definitions: getDefinitions(formatChars),\n        // FIXME: Должно быть eager=true, но в imask ломается удаление по delete\n        eager: 'append',\n        overwrite: 'shift',\n        lazy: !alwaysShowMask && (props.disabled || !focused),\n        unmask,\n        ...customIMaskProps,\n      } as IMaskInputProps<HTMLInputElement>;\n    }\n\n    function handleAccept(...args: Parameters<Required<IMaskInputProps<HTMLInputElement>>['onAccept']>) {\n      const [value, , e] = args;\n\n      // Метод onAccept может вызываться при монтировании, если не задан проп defaultValue.\n      // Но нативный input никогда не вызывает onChange при монтировании.\n      // Наше событие onValueChange в Input вывается в тех же случаях, что и нативный onChange,\n      // поэтому чтобы сохранить консинстентность будем ориентироваться на наличие аргумента e.\n      // Он содержит нативное событие, вызвавшее изменение.\n      e && onValueChange?.(value);\n      !e && (prevValue.current = value);\n    }\n\n    /**\n     * Отслеживаем неожиданные нажатия\n     * handleAccept не вызывается когда значение с маской не меняется\n     * Сначала вызывается handleAccept, затем handleInput\n     */\n    function handleInput(e: React.ChangeEvent<HTMLInputElement>) {\n      const { value, selectionStart } = e.currentTarget;\n\n      // При вводе неожиданных символов или удалении каретка может перепрыгивать фиксированные символы.\n      // Такие случаи не расцениваем как неожиданный ввод, т.к. пользователь может намеренно их вводить.\n      if (prevValue.current === value && selectionStart === prevSelectionStart.current) {\n        handleUnexpectedInput(value);\n      }\n      prevValue.current = value;\n      prevSelectionStart.current = selectionStart;\n\n      props.onInput?.(e);\n    }\n\n    function handleFocus(e: React.FocusEvent<HTMLInputElement>) {\n      setFocused(true);\n      props.onFocus?.(e);\n\n      // Если value из пропсов отличается от value, которое получит input после обработки,\n      // то imask будет ставить каретку за последним валидным символом.\n      props.selectAllOnFocus && inputRef.current?.delaySelectAll();\n    }\n\n    function handleUnexpectedInput(value: string) {\n      const blink = inputRef.current?.blink.bind(inputRef.current) || (() => undefined);\n      onUnexpectedInput ? onUnexpectedInput(value, blink) : blink();\n    }\n\n    function handleBlur(e: React.FocusEvent<HTMLInputElement>) {\n      setFocused(false);\n      props.onBlur?.(e);\n    }\n\n    function handleKeyDown(e: React.KeyboardEvent<HTMLInputElement>) {\n      const { value, selectionStart, selectionEnd } = e.currentTarget;\n\n      if (\n        (isKeyBackspace(e) && selectionStart === 0 && selectionEnd === 0) ||\n        (isKeyDelete(e) && prevSelectionStart.current === value.length)\n      ) {\n        // Случаи, когда нажатие клавиш не тригерит `onInput`\n        handleUnexpectedInput(value);\n        prevValue.current = e.currentTarget.value;\n      }\n      prevSelectionStart.current = selectionStart;\n\n      props.onKeyDown?.(e);\n    }\n  },\n);\n"]}

package/components/MaskedInputV2/MaskedInputV2.d.ts

@@ -0,0 +1,57 @@
+import type { InputProps, InputType } from '../Input/index.js';
+import { Input } from '../Input/index.js';
+import { getDefinitions, getMaskChar } from './MaskedInputV2.helpers.js';
+import type { IMaskInputProps } from './react-imask/mixin.js';
+export type MaskedInputV2OnBeforePasteValue = (value: string) => string;
+export interface MaskedInputV2MaskedProps {
+    /** Шаблон ввода, определяющий допустимые символы. */
+    mask: string;
+    /** Плейсхолдер, который отображается на месте ещё не введённых пользователем символов.
+     * @default _ */
+    maskChar?: string;
+    /** Словарь правил для настройки маски, где:
+     * ключ — символ для использования в маске;
+     * значение — регулярка-правило.
+     * @default { '9': '[0-9]', 'a': '[A-Za-z]', '*': '[A-Za-z0-9]' } */
+    formatChars?: Record<string, string>;
+    /** Всегда показывать символы маски, независимо от фокуса в поле.
+     * @default false */
+    alwaysShowMask?: boolean;
+    /** Событие некорректного ввода.
+     * Вторым аргументом передаётся метод вспыхивания рамки поля.
+     *
+     * Если обработчик не задан, то при событии рамка всегда вспыхивает.
+     *
+     * @param value значение поля
+     * @param blink метод вспыхивания рамки поля
+     */
+    onUnexpectedInput?: (value: string, blink: () => void) => void;
+    /**
+     * Событие перед вставкой текста в поле.
+     * Вызывается с аргументом value — текст из буфера.
+     *
+     * Обработчик должен вернуть текст — он попадёт в поле.
+     *
+     * @param value значение вставки.
+     */
+    onBeforePasteValue?: MaskedInputV2OnBeforePasteValue;
+    /** Убирает из value символы маски, которые пользователь не вводил.
+     * @default false */
+    unmask?: boolean;
+    /** Раскрашивает символы маски.
+     * @default true
+     * @ignore */
+    colored?: boolean;
+    /** Задает пропсы для компонента `IMaskInput`. Необходимы для юнит-тестов
+     * @ignore */
+    imaskProps?: IMaskInputProps<HTMLInputElement>;
+}
+export type MaskInputType = Exclude<InputType, 'number' | 'date' | 'time' | 'password'>;
+export declare const getSafeMaskInputType: (type?: InputType) => MaskInputType | undefined;
+export interface MaskedInputV2Props extends MaskedInputV2MaskedProps, Omit<InputProps, 'showClearIcon' | 'mask' | 'maxLength' | 'type' | 'alwaysShowMask' | 'onUnexpectedInput' | 'maskChar'> {
+    type?: MaskInputType;
+}
+/** Поле ввода, которое ограничивает формат вводимого значения по заданной маске. Такое поле облегчает пользователю ввод и снижает количество ошибок.
+ */
+export declare const MaskedInputV2: import("../../lib/forwardRefAndName.js").ReactUIComponentWithRef<Input, MaskedInputV2Props> & Record<never, never>;
+export { getDefinitions, getMaskChar };

package/components/MaskedInputV2/MaskedInputV2.helpers.d.ts

@@ -0,0 +1,9 @@
+import { type Definitions } from './react-imask/imask/masked/pattern.js';
+export declare const DEFAULT_MASK_CHAR = "_";
+export declare const DEFINITIONS: Readonly<{
+    '9': RegExp;
+    a: RegExp;
+    '*': RegExp;
+}>;
+export declare function getDefinitions(formatChars: Record<string, string> | undefined): Definitions;
+export declare function getMaskChar(maskChar: string | undefined): string;

package/components/MaskedInputV2/MaskedInputV2.helpers.js

@@ -0,0 +1,17 @@
+import { isNonNullable } from '../../lib/utils.js';
+export var DEFAULT_MASK_CHAR = '_';
+export var DEFINITIONS = Object.freeze({ '9': /[0-9]/, a: /[A-Za-z]/, '*': /[A-Za-z0-9]/ });
+export function getDefinitions(formatChars) {
+    if (isNonNullable(formatChars)) {
+        var chars = {};
+        for (var key in formatChars) {
+            chars[key] = new RegExp(formatChars[key]);
+        }
+        return chars;
+    }
+    return DEFINITIONS;
+}
+export function getMaskChar(maskChar) {
+    return !maskChar ? DEFAULT_MASK_CHAR : maskChar;
+}
+//# sourceMappingURL=MaskedInputV2.helpers.js.map

package/components/MaskedInputV2/MaskedInputV2.helpers.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MaskedInputV2.helpers.js","sourceRoot":"","sources":["MaskedInputV2.helpers.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AAGnD,MAAM,CAAC,IAAM,iBAAiB,GAAG,GAAG,CAAC;AACrC,MAAM,CAAC,IAAM,WAAW,GAAG,MAAM,CAAC,MAAM,CAAC,EAAE,GAAG,EAAE,OAAO,EAAE,CAAC,EAAE,UAAU,EAAE,GAAG,EAAE,aAAa,EAAE,CAAC,CAAC;AAE9F,MAAM,UAAU,cAAc,CAAC,WAA+C;IAC5E,IAAI,aAAa,CAAC,WAAW,CAAC,EAAE,CAAC;QAC/B,IAAM,KAAK,GAA2B,EAAE,CAAC;QAEzC,KAAK,IAAM,GAAG,IAAI,WAAW,EAAE,CAAC;YAC9B,KAAK,CAAC,GAAG,CAAC,GAAG,IAAI,MAAM,CAAC,WAAW,CAAC,GAAG,CAAC,CAAC,CAAC;QAC5C,CAAC;QAED,OAAO,KAAK,CAAC;IACf,CAAC;IAED,OAAO,WAAW,CAAC;AACrB,CAAC;AAED,MAAM,UAAU,WAAW,CAAC,QAA4B;IACtD,OAAO,CAAC,QAAQ,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,QAAQ,CAAC;AAClD,CAAC","sourcesContent":["import { isNonNullable } from '../../lib/utils.js';\nimport { type Definitions } from './react-imask/imask/masked/pattern.js';\n\nexport const DEFAULT_MASK_CHAR = '_';\nexport const DEFINITIONS = Object.freeze({ '9': /[0-9]/, a: /[A-Za-z]/, '*': /[A-Za-z0-9]/ });\n\nexport function getDefinitions(formatChars: Record<string, string> | undefined): Definitions {\n  if (isNonNullable(formatChars)) {\n    const chars: Record<string, RegExp> = {};\n\n    for (const key in formatChars) {\n      chars[key] = new RegExp(formatChars[key]);\n    }\n\n    return chars;\n  }\n\n  return DEFINITIONS;\n}\n\nexport function getMaskChar(maskChar: string | undefined): string {\n  return !maskChar ? DEFAULT_MASK_CHAR : maskChar;\n}\n"]}

package/components/MaskedInputV2/MaskedInputV2.js

@@ -0,0 +1,234 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React, { useContext, useEffect, useImperativeHandle, useLayoutEffect, useMemo, useRef, useState } from 'react';
+import { forwardRefAndName } from '../../lib/forwardRefAndName.js';
+import { useEmotion, useStyles } from '../../lib/renderEnvironment/index.js';
+import { ThemeContext } from '../../lib/theming/ThemeContext.js';
+import { Input } from '../Input/index.js';
+import { extractRaw, findNearestRawLeft } from './internal/helpers.js';
+import { MaskedCore } from './internal/MaskedCore.js';
+import { useMaskEngine } from './internal/useMaskEngine.js';
+import { getDefinitions, getMaskChar } from './MaskedInputV2.helpers.js';
+import { getStyles, globalClasses } from './MaskedInputV2.styles.js';
+var EMPTY_IMASK_PROPS = {};
+export var getSafeMaskInputType = function (type) {
+    if (!type) {
+        return type;
+    }
+    switch (type) {
+        case 'number':
+        case 'date':
+        case 'time':
+        case 'password':
+            return 'text';
+        default:
+            return type;
+    }
+};
+/** Поле ввода, которое ограничивает формат вводимого значения по заданной маске. Такое поле облегчает пользователю ввод и снижает количество ошибок.
+ */
+export var MaskedInputV2 = forwardRefAndName('MaskedInputV2', function MaskedInputV2(props, ref) {
+    var mask = props.mask, maskChar = props.maskChar, formatChars = props.formatChars, _a = props.alwaysShowMask, alwaysShowMask = _a === void 0 ? false : _a, _b = props.colored, colored = _b === void 0 ? true : _b, _c = props.imaskProps, customIMaskProps = _c === void 0 ? EMPTY_IMASK_PROPS : _c, _d = props.unmask, unmask = _d === void 0 ? false : _d, onValueChange = props.onValueChange, onUnexpectedInput = props.onUnexpectedInput, onBeforePasteValue = props.onBeforePasteValue, _element = props.element, className = props.className, 
+    // @ts-expect-error: могут передавать игнорируя ошибку
+    maxLength = props.maxLength, 
+    // @ts-expect-error: могут передавать игнорируя ошибку
+    _showClearIcon = props.showClearIcon, inputProps = __rest(props, ["mask", "maskChar", "formatChars", "alwaysShowMask", "colored", "imaskProps", "unmask", "onValueChange", "onUnexpectedInput", "onBeforePasteValue", "element", "className", "maxLength", "showClearIcon"]);
+    var theme = useContext(ThemeContext);
+    var cx = useEmotion().cx;
+    var styles = useStyles(getStyles);
+    var inputRef = useRef(null);
+    var coreInputRef = useRef(null);
+    var _e = useState(false), focused = _e[0], setFocused = _e[1];
+    var prevMaskRef = useRef(props.mask);
+    var pendingCursorRestoreRef = useRef(null);
+    var historyRef = useRef([]);
+    var historyIndexRef = useRef(-1);
+    // Сохраняем позицию курсора перед сменой маски (render-phase read of stable ref).
+    // При коммите DOM браузер сбросит курсор в конец из-за изменения value,
+    // поэтому восстанавливаем его синхронно в useLayoutEffect ниже.
+    if (prevMaskRef.current !== props.mask && coreInputRef.current) {
+        pendingCursorRestoreRef.current = coreInputRef.current.selectionStart;
+        prevMaskRef.current = props.mask;
+        historyRef.current = [];
+        historyIndexRef.current = -1;
+    }
+    // Движок: IMask как чистый калькулятор, не привязанный к DOM
+    var engine = useMaskEngine({
+        mask: mask,
+        maskChar: maskChar,
+        formatChars: formatChars,
+        unmask: unmask,
+        alwaysShowMask: alwaysShowMask,
+        imaskProps: customIMaskProps,
+    });
+    // Единственный источник истины — raw (только то, что ввёл пользователь, без маски)
+    var _f = useState(function () { var _a; return extractRaw(((_a = props.value) !== null && _a !== void 0 ? _a : props.defaultValue), engine); }), raw = _f[0], setRaw = _f[1];
+    // MaskState вычисляется синхронно из raw — оба визуальных слоя читают из него
+    var maskState = useMemo(function () { return engine.compute(raw, focused); }, [raw, focused, engine]);
+    // Контролируемый режим: синхронизировать raw при изменении props.value
+    useEffect(function () {
+        if (props.value !== undefined) {
+            setRaw(extractRaw(props.value, engine));
+        }
+    }, [props.value]);
+    // Вызывать onValueChange только при реальном изменении outputValue,
+    // и НЕ при первом рендере (воспроизводит нативное поведение onChange)
+    var isFirstRender = useRef(true);
+    var prevOutputValue = useRef(maskState.outputValue);
+    useEffect(function () {
+        if (isFirstRender.current) {
+            isFirstRender.current = false;
+            prevOutputValue.current = maskState.outputValue;
+            return;
+        }
+        if (maskState.outputValue !== prevOutputValue.current) {
+            prevOutputValue.current = maskState.outputValue;
+            onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange(maskState.outputValue);
+        }
+    }, [maskState.outputValue]);
+    useImperativeHandle(ref, function () {
+        if (!inputRef.current) {
+            return null;
+        }
+        return Object.assign(inputRef.current, {
+            selectAll: function () {
+                var _a;
+                (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+                // pendingCursorRef в MaskedCore может перекрыть setSelectionRange,
+                // поэтому откладываем установку selection за один tick
+                setTimeout(function () {
+                    var _a;
+                    (_a = coreInputRef.current) === null || _a === void 0 ? void 0 : _a.setSelectionRange(0, maskState.typedLength);
+                }, 0);
+            },
+        });
+    }, [maskState.typedLength]);
+    useLayoutEffect(function () {
+        if (pendingCursorRestoreRef.current !== null && coreInputRef.current) {
+            coreInputRef.current.setSelectionRange(pendingCursorRestoreRef.current, pendingCursorRestoreRef.current);
+            pendingCursorRestoreRef.current = null;
+        }
+    });
+    return (React.createElement(Input, __assign({ ref: inputRef }, inputProps, { onFocus: handleFocus, onBlur: handleBlur, className: cx(globalClasses.root, className, styles.root(theme)), element: React.createElement(MaskedCore, { maskState: maskState, slotMap: engine.slotMap, engine: engine, focused: focused, currentRaw: raw, onRawChange: handleRawChange, onUnexpectedInput: triggerUnexpectedInput, onUndo: handleUndo, onRedo: handleRedo, coreInputRef: coreInputRef, colored: colored }) })));
+    function handleRawChange(input, source, cursorPos) {
+        if (source === 'paste') {
+            handlePasteChange(input, cursorPos);
+        }
+        else {
+            if (input !== raw && cursorPos !== undefined) {
+                pushHistory(input, cursorPos);
+            }
+            setRaw(input);
+        }
+    }
+    function handlePasteChange(pasted, cursorPos) {
+        var _a;
+        var el = coreInputRef.current;
+        var selectionStart = (_a = el === null || el === void 0 ? void 0 : el.selectionStart) !== null && _a !== void 0 ? _a : 0;
+        // Находим rawPos по maskedPos курсора
+        var rawCursorPos = engine.slotMap.maskedToRaw[selectionStart] !== null && engine.slotMap.maskedToRaw[selectionStart] !== undefined
+            ? engine.slotMap.maskedToRaw[selectionStart]
+            : findNearestRawLeft(selectionStart, engine.slotMap);
+        var transformed = onBeforePasteValue ? onBeforePasteValue(pasted) : pasted;
+        var result = engine.applyPaste(raw, rawCursorPos, transformed);
+        if (result.overflow) {
+            // IF-1157: paste с overflow → onUnexpectedInput
+            triggerUnexpectedInput();
+        }
+        if (result.raw !== raw) {
+            var postPasteMaskState = engine.compute(result.raw, true);
+            pushHistory(result.raw, cursorPos !== null && cursorPos !== void 0 ? cursorPos : postPasteMaskState.typedLength);
+        }
+        setRaw(result.raw);
+        if (onBeforePasteValue && onValueChange) {
+            // Legacy-контракт: при кастомной вставке наружу уходит результат onBeforePasteValue,
+            // а не masked/unmasked outputValue (нужно для ComboBox и совместимости с IMaskInput).
+            prevOutputValue.current = engine.compute(result.raw, focused).outputValue;
+            onValueChange(transformed);
+        }
+    }
+    function pushHistory(newRaw, cursorPos) {
+        var MAX_HISTORY_LENGTH = 100;
+        if (historyRef.current.length === 0) {
+            historyRef.current.push({ raw: raw, cursorPos: 0 });
+            historyIndexRef.current = 0;
+        }
+        if (historyIndexRef.current < historyRef.current.length - 1) {
+            historyRef.current = historyRef.current.slice(0, historyIndexRef.current + 1);
+        }
+        historyRef.current.push({ raw: newRaw, cursorPos: cursorPos });
+        if (historyRef.current.length > MAX_HISTORY_LENGTH) {
+            historyRef.current.shift();
+        }
+        historyIndexRef.current = historyRef.current.length - 1;
+    }
+    function handleUndo() {
+        if (historyRef.current.length === 0) {
+            return;
+        }
+        var nextIndex = Math.max(0, historyIndexRef.current - 1);
+        if (nextIndex !== historyIndexRef.current) {
+            historyIndexRef.current = nextIndex;
+            var state = historyRef.current[nextIndex];
+            setRaw(state.raw);
+            pendingCursorRestoreRef.current = state.cursorPos;
+        }
+    }
+    function handleRedo() {
+        if (historyRef.current.length === 0) {
+            return;
+        }
+        var nextIndex = Math.min(historyRef.current.length - 1, historyIndexRef.current + 1);
+        if (nextIndex !== historyIndexRef.current) {
+            historyIndexRef.current = nextIndex;
+            var state = historyRef.current[nextIndex];
+            setRaw(state.raw);
+            pendingCursorRestoreRef.current = state.cursorPos;
+        }
+    }
+    function triggerUnexpectedInput() {
+        var _a, _b;
+        var blink = (_b = (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.blink.bind(inputRef.current)) !== null && _b !== void 0 ? _b : (function () { return undefined; });
+        onUnexpectedInput ? onUnexpectedInput(maskState.outputValue, blink) : blink();
+    }
+    function handleFocus(e) {
+        var _a;
+        setFocused(true);
+        (_a = props.onFocus) === null || _a === void 0 ? void 0 : _a.call(props, e);
+        if (props.selectAllOnFocus) {
+            // Даём React время перерендериться с focused=true (обновится typedLength)
+            setTimeout(function () {
+                var _a;
+                (_a = coreInputRef.current) === null || _a === void 0 ? void 0 : _a.setSelectionRange(0, maskState.typedLength);
+            }, 0);
+        }
+    }
+    function handleBlur(e) {
+        var _a;
+        setFocused(false);
+        (_a = props.onBlur) === null || _a === void 0 ? void 0 : _a.call(props, e);
+    }
+});
+// Вспомогательные функции для совместимости (используются в стори и тестах)
+export { getDefinitions, getMaskChar };
+//# sourceMappingURL=MaskedInputV2.js.map

package/components/MaskedInputV2/MaskedInputV2.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MaskedInputV2.js","sourceRoot":"","sources":["MaskedInputV2.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { useContext, useEffect, useImperativeHandle, useLayoutEffect, useMemo, useRef, useState } from 'react';\nimport type { Ref } from 'react';\n\nimport { forwardRefAndName } from '../../lib/forwardRefAndName.js';\nimport { useEmotion, useStyles } from '../../lib/renderEnvironment/index.js';\nimport { ThemeContext } from '../../lib/theming/ThemeContext.js';\nimport type { InputProps, InputType } from '../Input/index.js';\nimport { Input } from '../Input/index.js';\nimport { extractRaw, findNearestRawLeft } from './internal/helpers.js';\nimport { MaskedCore } from './internal/MaskedCore.js';\nimport { useMaskEngine } from './internal/useMaskEngine.js';\nimport { getDefinitions, getMaskChar } from './MaskedInputV2.helpers.js';\nimport { getStyles, globalClasses } from './MaskedInputV2.styles.js';\nimport type { IMaskInputProps } from './react-imask/mixin.js';\n\nexport type MaskedInputV2OnBeforePasteValue = (value: string) => string;\n\nexport interface MaskedInputV2MaskedProps {\n  /** Шаблон ввода, определяющий допустимые символы. */\n  mask: string;\n\n  /** Плейсхолдер, который отображается на месте ещё не введённых пользователем символов.\n   * @default _ */\n  maskChar?: string;\n\n  /** Словарь правил для настройки маски, где:\n   * ключ — символ для использования в маске;\n   * значение — регулярка-правило.\n   * @default { '9': '[0-9]', 'a': '[A-Za-z]', '*': '[A-Za-z0-9]' } */\n  formatChars?: Record<string, string>;\n\n  /** Всегда показывать символы маски, независимо от фокуса в поле.\n   * @default false */\n  alwaysShowMask?: boolean;\n\n  /** Событие некорректного ввода.\n   * Вторым аргументом передаётся метод вспыхивания рамки поля.\n   *\n   * Если обработчик не задан, то при событии рамка всегда вспыхивает.\n   *\n   * @param value значение поля\n   * @param blink метод вспыхивания рамки поля\n   */\n  onUnexpectedInput?: (value: string, blink: () => void) => void;\n\n  /**\n   * Событие перед вставкой текста в поле.\n   * Вызывается с аргументом value — текст из буфера.\n   *\n   * Обработчик должен вернуть текст — он попадёт в поле.\n   *\n   * @param value значение вставки.\n   */\n  onBeforePasteValue?: MaskedInputV2OnBeforePasteValue;\n\n  /** Убирает из value символы маски, которые пользователь не вводил.\n   * @default false */\n  unmask?: boolean;\n\n  /** Раскрашивает символы маски.\n   * @default true\n   * @ignore */\n  colored?: boolean;\n\n  /** Задает пропсы для компонента `IMaskInput`. Необходимы для юнит-тестов\n   * @ignore */\n  imaskProps?: IMaskInputProps<HTMLInputElement>;\n}\n\nexport type MaskInputType = Exclude<InputType, 'number' | 'date' | 'time' | 'password'>;\n\nconst EMPTY_IMASK_PROPS = {};\n\nexport const getSafeMaskInputType = (type?: InputType): MaskInputType | undefined => {\n  if (!type) {\n    return type;\n  }\n\n  switch (type) {\n    case 'number':\n    case 'date':\n    case 'time':\n    case 'password':\n      return 'text';\n    default:\n      return type;\n  }\n};\n\nexport interface MaskedInputV2Props\n  extends\n    MaskedInputV2MaskedProps,\n    Omit<\n      InputProps,\n      'showClearIcon' | 'mask' | 'maxLength' | 'type' | 'alwaysShowMask' | 'onUnexpectedInput' | 'maskChar'\n    > {\n  type?: MaskInputType;\n}\n\n/** Поле ввода, которое ограничивает формат вводимого значения по заданной маске. Такое поле облегчает пользователю ввод и снижает количество ошибок.\n */\nexport const MaskedInputV2 = forwardRefAndName(\n  'MaskedInputV2',\n  function MaskedInputV2(props: MaskedInputV2Props, ref: Ref<Input | null>) {\n    const {\n      mask,\n      maskChar,\n      formatChars,\n      alwaysShowMask = false,\n      colored = true,\n      imaskProps: customIMaskProps = EMPTY_IMASK_PROPS,\n      unmask = false,\n      onValueChange,\n      onUnexpectedInput,\n      onBeforePasteValue,\n      element: _element,\n      className,\n      // @ts-expect-error: могут передавать игнорируя ошибку\n      maxLength,\n      // @ts-expect-error: могут передавать игнорируя ошибку\n      showClearIcon: _showClearIcon,\n      ...inputProps\n    } = props;\n\n    const theme = useContext(ThemeContext);\n    const { cx } = useEmotion();\n    const styles = useStyles(getStyles);\n\n    const inputRef = useRef<Input>(null);\n    const coreInputRef = useRef<HTMLInputElement>(null);\n\n    const [focused, setFocused] = useState(false);\n\n    const prevMaskRef = useRef(props.mask);\n    const pendingCursorRestoreRef = useRef<number | null>(null);\n\n    const historyRef = useRef<Array<{ raw: string; cursorPos: number }>>([]);\n    const historyIndexRef = useRef(-1);\n\n    // Сохраняем позицию курсора перед сменой маски (render-phase read of stable ref).\n    // При коммите DOM браузер сбросит курсор в конец из-за изменения value,\n    // поэтому восстанавливаем его синхронно в useLayoutEffect ниже.\n    if (prevMaskRef.current !== props.mask && coreInputRef.current) {\n      pendingCursorRestoreRef.current = coreInputRef.current.selectionStart;\n      prevMaskRef.current = props.mask;\n      historyRef.current = [];\n      historyIndexRef.current = -1;\n    }\n\n    // Движок: IMask как чистый калькулятор, не привязанный к DOM\n    const engine = useMaskEngine({\n      mask,\n      maskChar,\n      formatChars,\n      unmask,\n      alwaysShowMask,\n      imaskProps: customIMaskProps,\n    });\n\n    // Единственный источник истины — raw (только то, что ввёл пользователь, без маски)\n    const [raw, setRaw] = useState<string>(() =>\n      extractRaw((props.value ?? props.defaultValue) as string | number | undefined, engine),\n    );\n\n    // MaskState вычисляется синхронно из raw — оба визуальных слоя читают из него\n    const maskState = useMemo(() => engine.compute(raw, focused), [raw, focused, engine]);\n\n    // Контролируемый режим: синхронизировать raw при изменении props.value\n    useEffect(() => {\n      if (props.value !== undefined) {\n        setRaw(extractRaw(props.value, engine));\n      }\n    }, [props.value]);\n\n    // Вызывать onValueChange только при реальном изменении outputValue,\n    // и НЕ при первом рендере (воспроизводит нативное поведение onChange)\n    const isFirstRender = useRef(true);\n    const prevOutputValue = useRef<string>(maskState.outputValue);\n    useEffect(() => {\n      if (isFirstRender.current) {\n        isFirstRender.current = false;\n        prevOutputValue.current = maskState.outputValue;\n        return;\n      }\n      if (maskState.outputValue !== prevOutputValue.current) {\n        prevOutputValue.current = maskState.outputValue;\n        onValueChange?.(maskState.outputValue);\n      }\n    }, [maskState.outputValue]);\n\n    useImperativeHandle<Input | null, (Input & { selectAll: () => void }) | null>(ref, () => {\n      if (!inputRef.current) {\n        return null;\n      }\n      return Object.assign(inputRef.current, {\n        selectAll: () => {\n          inputRef.current?.focus();\n          // pendingCursorRef в MaskedCore может перекрыть setSelectionRange,\n          // поэтому откладываем установку selection за один tick\n          setTimeout(() => {\n            coreInputRef.current?.setSelectionRange(0, maskState.typedLength);\n          }, 0);\n        },\n      });\n    }, [maskState.typedLength]);\n\n    useLayoutEffect(() => {\n      if (pendingCursorRestoreRef.current !== null && coreInputRef.current) {\n        coreInputRef.current.setSelectionRange(pendingCursorRestoreRef.current, pendingCursorRestoreRef.current);\n        pendingCursorRestoreRef.current = null;\n      }\n    });\n\n    return (\n      <Input\n        ref={inputRef}\n        {...inputProps}\n        onFocus={handleFocus}\n        onBlur={handleBlur}\n        className={cx(globalClasses.root, className, styles.root(theme))}\n        element={\n          <MaskedCore\n            maskState={maskState}\n            slotMap={engine.slotMap}\n            engine={engine}\n            focused={focused}\n            currentRaw={raw}\n            onRawChange={handleRawChange}\n            onUnexpectedInput={triggerUnexpectedInput}\n            onUndo={handleUndo}\n            onRedo={handleRedo}\n            coreInputRef={coreInputRef}\n            colored={colored}\n          />\n        }\n      />\n    );\n\n    function handleRawChange(input: string, source: 'input' | 'paste', cursorPos?: number) {\n      if (source === 'paste') {\n        handlePasteChange(input, cursorPos);\n      } else {\n        if (input !== raw && cursorPos !== undefined) {\n          pushHistory(input, cursorPos);\n        }\n        setRaw(input);\n      }\n    }\n\n    function handlePasteChange(pasted: string, cursorPos?: number) {\n      const el = coreInputRef.current;\n      const selectionStart = el?.selectionStart ?? 0;\n\n      // Находим rawPos по maskedPos курсора\n      const rawCursorPos =\n        engine.slotMap.maskedToRaw[selectionStart] !== null && engine.slotMap.maskedToRaw[selectionStart] !== undefined\n          ? (engine.slotMap.maskedToRaw[selectionStart] as number)\n          : findNearestRawLeft(selectionStart, engine.slotMap);\n\n      const transformed = onBeforePasteValue ? onBeforePasteValue(pasted) : pasted;\n      const result = engine.applyPaste(raw, rawCursorPos, transformed);\n\n      if (result.overflow) {\n        // IF-1157: paste с overflow → onUnexpectedInput\n        triggerUnexpectedInput();\n      }\n\n      if (result.raw !== raw) {\n        const postPasteMaskState = engine.compute(result.raw, true);\n        pushHistory(result.raw, cursorPos ?? postPasteMaskState.typedLength);\n      }\n\n      setRaw(result.raw);\n\n      if (onBeforePasteValue && onValueChange) {\n        // Legacy-контракт: при кастомной вставке наружу уходит результат onBeforePasteValue,\n        // а не masked/unmasked outputValue (нужно для ComboBox и совместимости с IMaskInput).\n        prevOutputValue.current = engine.compute(result.raw, focused).outputValue;\n        onValueChange(transformed);\n      }\n    }\n\n    function pushHistory(newRaw: string, cursorPos: number) {\n      const MAX_HISTORY_LENGTH = 100;\n\n      if (historyRef.current.length === 0) {\n        historyRef.current.push({ raw, cursorPos: 0 });\n        historyIndexRef.current = 0;\n      }\n\n      if (historyIndexRef.current < historyRef.current.length - 1) {\n        historyRef.current = historyRef.current.slice(0, historyIndexRef.current + 1);\n      }\n\n      historyRef.current.push({ raw: newRaw, cursorPos });\n      if (historyRef.current.length > MAX_HISTORY_LENGTH) {\n        historyRef.current.shift();\n      }\n      historyIndexRef.current = historyRef.current.length - 1;\n    }\n\n    function handleUndo() {\n      if (historyRef.current.length === 0) {\n        return;\n      }\n      const nextIndex = Math.max(0, historyIndexRef.current - 1);\n      if (nextIndex !== historyIndexRef.current) {\n        historyIndexRef.current = nextIndex;\n        const state = historyRef.current[nextIndex];\n        setRaw(state.raw);\n        pendingCursorRestoreRef.current = state.cursorPos;\n      }\n    }\n\n    function handleRedo() {\n      if (historyRef.current.length === 0) {\n        return;\n      }\n      const nextIndex = Math.min(historyRef.current.length - 1, historyIndexRef.current + 1);\n      if (nextIndex !== historyIndexRef.current) {\n        historyIndexRef.current = nextIndex;\n        const state = historyRef.current[nextIndex];\n        setRaw(state.raw);\n        pendingCursorRestoreRef.current = state.cursorPos;\n      }\n    }\n\n    function triggerUnexpectedInput() {\n      const blink = inputRef.current?.blink.bind(inputRef.current) ?? (() => undefined);\n      onUnexpectedInput ? onUnexpectedInput(maskState.outputValue, blink) : blink();\n    }\n\n    function handleFocus(e: React.FocusEvent<HTMLInputElement>) {\n      setFocused(true);\n      props.onFocus?.(e);\n\n      if (props.selectAllOnFocus) {\n        // Даём React время перерендериться с focused=true (обновится typedLength)\n        setTimeout(() => {\n          coreInputRef.current?.setSelectionRange(0, maskState.typedLength);\n        }, 0);\n      }\n    }\n\n    function handleBlur(e: React.FocusEvent<HTMLInputElement>) {\n      setFocused(false);\n      props.onBlur?.(e);\n    }\n  },\n);\n\n// Вспомогательные функции для совместимости (используются в стори и тестах)\nexport { getDefinitions, getMaskChar };\n"]}

package/{internal/TimeInput/TimeInput.styles.d.ts → components/MaskedInputV2/MaskedInputV2.styles.d.ts}

@@ -1,6 +1,7 @@
 import type { Theme } from '../../lib/theming/Theme.js';
+export declare const globalClasses: {
+    root: string;
+};
 export declare const getStyles: import("../../lib/theming/Emotion.js").StylesGetter<{
-    rightIcon(): string;
-    rightIconInteractive(): string;
-    rightIconDefault(t: Theme): string;
+    root(t: Theme): string;
 }>;

package/components/MaskedInputV2/MaskedInputV2.styles.js

@@ -0,0 +1,19 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import { UI_FONT_NAME, injectGlobalFont } from '../../lib/styles/UiFont.js';
+import { memoizeGetStyles, prefix } from '../../lib/theming/Emotion.js';
+export var globalClasses = prefix('masked-input-v2')({
+    root: 'root',
+});
+export var getStyles = memoizeGetStyles(function (emotion) {
+    injectGlobalFont(emotion);
+    return {
+        root: function (t) {
+            return emotion.css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n        font-family: ", ", ", ";\n        font-variant-numeric: tabular-nums;\n      "], ["\n        font-family: ", ", ", ";\n        font-variant-numeric: tabular-nums;\n      "])), UI_FONT_NAME, t.baseFontFamily);
+        },
+    };
+});
+var templateObject_1;
+//# sourceMappingURL=MaskedInputV2.styles.js.map

package/components/MaskedInputV2/MaskedInputV2.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MaskedInputV2.styles.js","sourceRoot":"","sources":["MaskedInputV2.styles.ts"],"names":[],"mappings":";;;;AAEA,OAAO,EAAE,YAAY,EAAE,gBAAgB,EAAE,MAAM,4BAA4B,CAAC;AAC5E,OAAO,EAAE,gBAAgB,EAAE,MAAM,EAAE,MAAM,8BAA8B,CAAC;AAGxE,MAAM,CAAC,IAAM,aAAa,GAAG,MAAM,CAAC,iBAAiB,CAAC,CAAC;IACrD,IAAI,EAAE,MAAM;CACb,CAAC,CAAC;AAEH,MAAM,CAAC,IAAM,SAAS,GAAG,gBAAgB,CAAC,UAAC,OAAgB;IACzD,gBAAgB,CAAC,OAAO,CAAC,CAAC;IAC1B,OAAO;QACL,IAAI,YAAC,CAAQ;YACX,OAAO,OAAO,CAAC,GAAG,4JAAA,yBACD,EAAY,IAAK,EAAgB,wDAEjD,KAFgB,YAAY,EAAK,CAAC,CAAC,cAAc,EAEhD;QACJ,CAAC;KACF,CAAC;AACJ,CAAC,CAAC,CAAC","sourcesContent":["import type { Emotion } from '@emotion/css/create-instance';\n\nimport { UI_FONT_NAME, injectGlobalFont } from '../../lib/styles/UiFont.js';\nimport { memoizeGetStyles, prefix } from '../../lib/theming/Emotion.js';\nimport type { Theme } from '../../lib/theming/Theme.js';\n\nexport const globalClasses = prefix('masked-input-v2')({\n  root: 'root',\n});\n\nexport const getStyles = memoizeGetStyles((emotion: Emotion) => {\n  injectGlobalFont(emotion);\n  return {\n    root(t: Theme) {\n      return emotion.css`\n        font-family: ${UI_FONT_NAME}, ${t.baseFontFamily};\n        font-variant-numeric: tabular-nums;\n      `;\n    },\n  };\n});\n"]}

package/components/MaskedInputV2/index.d.ts

@@ -0,0 +1 @@
+export { MaskedInputV2, getSafeMaskInputType, type MaskedInputV2Props, type MaskedInputV2OnBeforePasteValue, type MaskInputType, } from './MaskedInputV2.js';

package/components/MaskedInputV2/index.js

@@ -0,0 +1,2 @@
+export { MaskedInputV2, getSafeMaskInputType, } from './MaskedInputV2.js';
+//# sourceMappingURL=index.js.map

package/components/MaskedInputV2/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,aAAa,EACb,oBAAoB,GAIrB,MAAM,oBAAoB,CAAC","sourcesContent":["export {\n  MaskedInputV2,\n  getSafeMaskInputType,\n  type MaskedInputV2Props,\n  type MaskedInputV2OnBeforePasteValue,\n  type MaskInputType,\n} from './MaskedInputV2.js';\n"]}

package/components/MaskedInputV2/internal/MaskOverlay.d.ts

@@ -0,0 +1,19 @@
+import React from 'react';
+interface MaskOverlayProps {
+    typedValue: string;
+    displayValue: string;
+    selectionStart: number;
+    selectionEnd: number;
+    disabled?: boolean;
+    textAlign?: React.CSSProperties['textAlign'];
+    containerRef?: React.RefObject<HTMLSpanElement | null>;
+    colored?: boolean;
+}
+/**
+ * Абсолютно позиционированный слой над <input>.
+ * Input делается прозрачным (color: transparent), а весь текст
+ * (typedValue + maskPart) рендерится здесь с раскраской.
+ * Так textAlign input'а и overlay совпадают идеально.
+ */
+export declare function MaskOverlay({ typedValue, displayValue, selectionStart, selectionEnd, disabled, textAlign, containerRef, colored, }: MaskOverlayProps): React.JSX.Element | null;
+export {};

package/components/MaskedInputV2/internal/MaskOverlay.js

@@ -0,0 +1,54 @@
+import { cx } from '@emotion/css';
+import React, { useContext } from 'react';
+import { useStyles } from '../../../lib/renderEnvironment/index.js';
+import { ThemeContext } from '../../../lib/theming/ThemeContext.js';
+import { getStyles, globalClasses } from './MaskedInternal.styles.js';
+function splitTextBySelection(text, textStartOffset, selectionStart, selectionEnd) {
+    if (selectionStart === selectionEnd) {
+        return [text, '', ''];
+    }
+    var localStart = Math.max(0, selectionStart - textStartOffset);
+    var localEnd = Math.min(text.length, selectionEnd - textStartOffset);
+    if (localEnd <= localStart) {
+        return [text, '', ''];
+    }
+    return [text.slice(0, localStart), text.slice(localStart, localEnd), text.slice(localEnd)];
+}
+/**
+ * Абсолютно позиционированный слой над <input>.
+ * Input делается прозрачным (color: transparent), а весь текст
+ * (typedValue + maskPart) рендерится здесь с раскраской.
+ * Так textAlign input'а и overlay совпадают идеально.
+ */
+export function MaskOverlay(_a) {
+    var typedValue = _a.typedValue, displayValue = _a.displayValue, selectionStart = _a.selectionStart, selectionEnd = _a.selectionEnd, disabled = _a.disabled, textAlign = _a.textAlign, containerRef = _a.containerRef, _b = _a.colored, colored = _b === void 0 ? true : _b;
+    var theme = useContext(ThemeContext);
+    var styles = useStyles(getStyles);
+    var maskPart = displayValue.slice(typedValue.length);
+    var disabledClass = disabled && globalClasses.disabled;
+    var coloredClass = colored && globalClasses.colored;
+    var selectedSegmentClass = styles.selectedSegment();
+    if (!typedValue && !maskPart) {
+        return null;
+    }
+    function renderSegment(text, offset, segmentClassName) {
+        var _a = splitTextBySelection(text, offset, selectionStart, selectionEnd), before = _a[0], selected = _a[1], after = _a[2];
+        return (React.createElement(React.Fragment, null,
+            before ? React.createElement("span", { className: segmentClassName }, before) : null,
+            selected ? React.createElement("span", { className: selectedSegmentClass }, selected) : null,
+            after ? React.createElement("span", { className: segmentClassName }, after) : null));
+    }
+    return (React.createElement("span", { ref: containerRef, "aria-hidden": "true", className: styles.overlay() },
+        React.createElement("span", { "data-tid": "masked-input-overlay", style: {
+                display: 'inline-block',
+                width: '100%',
+                whiteSpace: 'nowrap',
+                textAlign: textAlign,
+                lineHeight: 'inherit',
+            } },
+            typedValue ? renderSegment(typedValue, 0, cx(styles.typed(theme), disabledClass, coloredClass)) : null,
+            maskPart
+                ? renderSegment(maskPart, typedValue.length, cx(styles.mask(theme), disabledClass, coloredClass))
+                : null)));
+}
+//# sourceMappingURL=MaskOverlay.js.map

package/components/MaskedInputV2/internal/MaskOverlay.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MaskOverlay.js","sourceRoot":"","sources":["MaskOverlay.tsx"],"names":[],"mappings":"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","sourcesContent":["import { cx } from '@emotion/css';\nimport React, { useContext } from 'react';\n\nimport { useStyles } from '../../../lib/renderEnvironment/index.js';\nimport { ThemeContext } from '../../../lib/theming/ThemeContext.js';\nimport { getStyles, globalClasses } from './MaskedInternal.styles.js';\n\ninterface MaskOverlayProps {\n  typedValue: string;\n  displayValue: string;\n  selectionStart: number;\n  selectionEnd: number;\n  disabled?: boolean;\n  textAlign?: React.CSSProperties['textAlign'];\n  containerRef?: React.RefObject<HTMLSpanElement | null>;\n  colored?: boolean;\n}\n\nfunction splitTextBySelection(\n  text: string,\n  textStartOffset: number,\n  selectionStart: number,\n  selectionEnd: number,\n): [string, string, string] {\n  if (selectionStart === selectionEnd) {\n    return [text, '', ''];\n  }\n\n  const localStart = Math.max(0, selectionStart - textStartOffset);\n  const localEnd = Math.min(text.length, selectionEnd - textStartOffset);\n\n  if (localEnd <= localStart) {\n    return [text, '', ''];\n  }\n\n  return [text.slice(0, localStart), text.slice(localStart, localEnd), text.slice(localEnd)];\n}\n\n/**\n * Абсолютно позиционированный слой над <input>.\n * Input делается прозрачным (color: transparent), а весь текст\n * (typedValue + maskPart) рендерится здесь с раскраской.\n * Так textAlign input'а и overlay совпадают идеально.\n */\nexport function MaskOverlay({\n  typedValue,\n  displayValue,\n  selectionStart,\n  selectionEnd,\n  disabled,\n  textAlign,\n  containerRef,\n  colored = true,\n}: MaskOverlayProps) {\n  const theme = useContext(ThemeContext);\n  const styles = useStyles(getStyles);\n  const maskPart = displayValue.slice(typedValue.length);\n\n  const disabledClass = disabled && globalClasses.disabled;\n  const coloredClass = colored && globalClasses.colored;\n  const selectedSegmentClass = styles.selectedSegment();\n\n  if (!typedValue && !maskPart) {\n    return null;\n  }\n\n  function renderSegment(text: string, offset: number, segmentClassName: string) {\n    const [before, selected, after] = splitTextBySelection(text, offset, selectionStart, selectionEnd);\n\n    return (\n      <>\n        {before ? <span className={segmentClassName}>{before}</span> : null}\n        {selected ? <span className={selectedSegmentClass}>{selected}</span> : null}\n        {after ? <span className={segmentClassName}>{after}</span> : null}\n      </>\n    );\n  }\n\n  return (\n    <span ref={containerRef} aria-hidden=\"true\" className={styles.overlay()}>\n      <span\n        data-tid=\"masked-input-overlay\"\n        style={{\n          display: 'inline-block',\n          width: '100%',\n          whiteSpace: 'nowrap',\n          textAlign,\n          lineHeight: 'inherit',\n        }}\n      >\n        {typedValue ? renderSegment(typedValue, 0, cx(styles.typed(theme), disabledClass, coloredClass)) : null}\n        {maskPart\n          ? renderSegment(maskPart, typedValue.length, cx(styles.mask(theme), disabledClass, coloredClass))\n          : null}\n      </span>\n    </span>\n  );\n}\n"]}

package/components/MaskedInputV2/internal/MaskedCore.d.ts

@@ -0,0 +1,8 @@
+import type { InputElement } from '../../Input/Input.typings.js';
+import type { MaskedCoreProps } from './MaskedCore.types.js';
+export type { MaskedCoreProps } from './MaskedCore.types.js';
+/**
+ * Headless-слой MaskedInputV2: прозрачный `<input>` для ввода и {@link MaskOverlay} для отображения маски.
+ * Управляется через {@link useMaskedCoreHandlers}.
+ */
+export declare const MaskedCore: import("../../../lib/forwardRefAndName.js").ReactUIComponentWithRef<InputElement | null, MaskedCoreProps> & Record<never, never>;