@skbkontur/react-ui 0.0.0-e66a3400ba → 0.0.0-eab52adf66

package/cjs/components/MaskedInput/MaskedInput.d.ts

@@ -0,0 +1,43 @@
+import type { IMaskInputProps } from '@skbkontur/react-imask';
+import type { InputProps, InputType } from '../Input';
+import { Input } from '../Input';
+export interface MaskedProps {
+    /** Паттерн маски */
+    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 символы, не введённые пользователем
+     * @default false */
+    unmask?: boolean;
+    /** Раскрашивает символы маски.
+     * @default true
+     * @ignore */
+    colored?: boolean;
+    /** Задает пропы для компонента `IMaskInput`. Необходимы для юнит-тестов
+     * @ignore */
+    imaskProps?: IMaskInputProps<HTMLInputElement>;
+}
+export type MaskInputType = Exclude<InputType, 'number' | 'date' | 'time' | 'password'>;
+export interface MaskedInputProps extends MaskedProps, Omit<InputProps, 'showClearIcon' | 'mask' | 'maxLength' | 'type' | 'alwaysShowMask' | 'onUnexpectedInput' | 'maskChar'> {
+    type?: MaskInputType;
+}
+/**
+ * Интерфейс пропсов наследуется от `Input`.
+ * Из пропсов `Input` исключены некоторые не применимые к полю с маской пропсы и сокращен список возможных значений в type.
+ */
+export declare const MaskedInput: import("../../lib/forwardRefAndName").ReactUIComponentWithRef<Input, MaskedInputProps> & Record<never, never>;

package/cjs/components/MaskedInput/MaskedInput.helpers.d.ts

@@ -0,0 +1,9 @@
+import { type Definitions } from '@skbkontur/imask';
+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/cjs/components/MaskedInput/MaskedInput.helpers.js

@@ -0,0 +1,24 @@
+"use strict";exports.__esModule = true;exports.DEFINITIONS = exports.DEFAULT_MASK_CHAR = void 0;exports.getDefinitions = getDefinitions;exports.getMaskChar = getMaskChar;
+
+var _utils = require("../../lib/utils");
+
+var DEFAULT_MASK_CHAR = exports.DEFAULT_MASK_CHAR = '_';
+var DEFINITIONS = exports.DEFINITIONS = Object.freeze({ '9': /[0-9]/, a: /[A-Za-z]/, '*': /[A-Za-z0-9]/ });
+
+function getDefinitions(formatChars) {
+  if ((0, _utils.isNonNullable)(formatChars)) {
+    var chars = {};
+
+    for (var key in formatChars) {
+      chars[key] = new RegExp(formatChars[key]);
+    }
+
+    return chars;
+  }
+
+  return DEFINITIONS;
+}
+
+function getMaskChar(maskChar) {
+  return !maskChar ? DEFAULT_MASK_CHAR : maskChar;
+}

package/cjs/components/MaskedInput/MaskedInput.helpers.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_utils","require","DEFAULT_MASK_CHAR","exports","DEFINITIONS","Object","freeze","a","getDefinitions","formatChars","isNonNullable","chars","key","RegExp","getMaskChar","maskChar"],"sources":["MaskedInput.helpers.ts"],"sourcesContent":["import { type Definitions } from '@skbkontur/imask';\n\nimport { isNonNullable } from '../../lib/utils';\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"],"mappings":";;AAEA,IAAAA,MAAA,GAAAC,OAAA;;AAEO,IAAMC,iBAAiB,GAAAC,OAAA,CAAAD,iBAAA,GAAG,GAAG;AAC7B,IAAME,WAAW,GAAAD,OAAA,CAAAC,WAAA,GAAGC,MAAM,CAACC,MAAM,CAAC,EAAE,GAAG,EAAE,OAAO,EAAEC,CAAC,EAAE,UAAU,EAAE,GAAG,EAAE,aAAa,CAAC,CAAC,CAAC;;AAEtF,SAASC,cAAcA,CAACC,WAA+C,EAAe;EAC3F,IAAI,IAAAC,oBAAa,EAACD,WAAW,CAAC,EAAE;IAC9B,IAAME,KAA6B,GAAG,CAAC,CAAC;;IAExC,KAAK,IAAMC,GAAG,IAAIH,WAAW,EAAE;MAC7BE,KAAK,CAACC,GAAG,CAAC,GAAG,IAAIC,MAAM,CAACJ,WAAW,CAACG,GAAG,CAAC,CAAC;IAC3C;;IAEA,OAAOD,KAAK;EACd;;EAEA,OAAOP,WAAW;AACpB;;AAEO,SAASU,WAAWA,CAACC,QAA4B,EAAU;EAChE,OAAO,CAACA,QAAQ,GAAGb,iBAAiB,GAAGa,QAAQ;AACjD","ignoreList":[]}

package/cjs/components/MaskedInput/MaskedInput.js

@@ -0,0 +1,227 @@
+"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;exports.__esModule = true;exports.MaskedInput = void 0;var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));var _react = _interopRequireWildcard(require("react"));
+
+
+
+var _forwardRefAndName = require("../../lib/forwardRefAndName");
+var _Emotion = require("../../lib/theming/Emotion");
+
+var _Input = require("../Input");
+var _identifiers = require("../../lib/events/keyboard/identifiers");
+var _ThemeContext = require("../../lib/theming/ThemeContext");
+
+var _MaskedInput = require("./MaskedInput.styles");
+var _MaskedInput2 = require("./MaskedInput.helpers");
+var _ColorableInputElement = require("./ColorableInputElement");
+var _FixedIMaskInput = require("./FixedIMaskInput");var _excluded = ["mask", "maskChar", "formatChars", "alwaysShowMask", "colored", "imaskProps", "unmask", "onValueChange", "onUnexpectedInput", "onChange", "element", "className"];
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+/**
+ * Интерфейс пропсов наследуется от `Input`.
+ * Из пропсов `Input` исключены некоторые не применимые к полю с маской пропсы и сокращен список возможных значений в type.
+ */
+var MaskedInput = exports.MaskedInput = (0, _forwardRefAndName.forwardRefAndName)(
+  'MaskedInput',
+  function MaskedInput(props, ref) {
+    var
+      mask =
+
+
+
+
+
+
+
+
+
+
+
+
+      props.mask,maskChar = props.maskChar,formatChars = props.formatChars,_props$alwaysShowMask = props.alwaysShowMask,alwaysShowMask = _props$alwaysShowMask === void 0 ? false : _props$alwaysShowMask,_props$colored = props.colored,colored = _props$colored === void 0 ? true : _props$colored,_props$imaskProps = props.imaskProps,customIMaskProps = _props$imaskProps === void 0 ? {} : _props$imaskProps,_props$unmask = props.unmask,unmask = _props$unmask === void 0 ? false : _props$unmask,onValueChange = props.onValueChange,onUnexpectedInput = props.onUnexpectedInput,onChange = props.onChange,element = props.element,className = props.className,inputProps = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
+    var theme = (0, _react.useContext)(_ThemeContext.ThemeContext);
+
+    var inputRef = (0, _react.useRef)(null);
+
+    var _useState = (0, _react.useState)(false),focused = _useState[0],setFocused = _useState[1];
+    var prevValue = (0, _react.useRef)(props.value || String(props.defaultValue) || '');
+    var prevSelectionStart = (0, _react.useRef)(null);
+
+    (0, _react.useImperativeHandle)(
+      ref,
+      function () {return (
+          inputRef.current &&
+          Object.assign(inputRef.current, {
+            selectAll: function selectAll() {var _inputRef$current, _inputRef$current2;
+              (_inputRef$current = inputRef.current) == null || _inputRef$current.focus();
+              (_inputRef$current2 = inputRef.current) == null || _inputRef$current2.delaySelectAll();
+            }
+          }));},
+      []
+    );
+
+    (0, _react.useEffect)(function () {var _inputRef$current3;
+      // Для корректной работы onUnexpectedInput надо знать предыдущий value,
+      // но imask при монтировании не вызывает onAccept, если value невалиден или laze=false.
+      // Поэтому актуальный value при монтировании надо получать вручную
+      if ((_inputRef$current3 = inputRef.current) != null && _inputRef$current3.input) {
+        prevValue.current = inputRef.current.input.value;
+        prevSelectionStart.current = inputRef.current.input.selectionStart;
+      }
+    }, []);
+
+    var imaskProps = getCompatibleIMaskProps();
+
+    // TODO: Удалить в следующем мажоре
+    // Селекторы могут ожидать определённый порядок классов
+    var uiFontGlobalClassesRoot = 'react-ui-ui-font-root';
+
+    return /*#__PURE__*/(
+      _react.default.createElement(_Input.Input, (0, _extends2.default)({
+        ref: inputRef },
+      inputProps, {
+        onFocus: handleFocus,
+        onBlur: handleBlur,
+        onInput: handleInput,
+        onKeyDown: handleKeyDown,
+        className: (0, _Emotion.cx)(_MaskedInput.globalClasses.root, uiFontGlobalClassesRoot, className, _MaskedInput.styles.root(theme)),
+        element:
+        colored ? /*#__PURE__*/
+        _react.default.createElement(_ColorableInputElement.ColorableInputElement, { showOnFocus: false }, /*#__PURE__*/
+        _react.default.createElement(_FixedIMaskInput.FixedIMaskInput, (0, _extends2.default)({}, imaskProps, { onAccept: handleAccept }))
+        ) : /*#__PURE__*/
+
+        _react.default.createElement(_FixedIMaskInput.FixedIMaskInput, (0, _extends2.default)({}, imaskProps, { onAccept: handleAccept })) })
+
+
+      ));
+
+
+    function getCompatibleIMaskProps() {
+      return (0, _extends2.default)({
+        mask: mask.replace(/0/g, '{\\0}'),
+        placeholderChar: (0, _MaskedInput2.getMaskChar)(maskChar),
+        definitions: (0, _MaskedInput2.getDefinitions)(formatChars),
+        // FIXME: Должно быть eager=true, но в imask ломается удаление по delete
+        eager: 'append',
+        overwrite: 'shift',
+        lazy: !alwaysShowMask && (props.disabled || !focused),
+        unmask: unmask },
+      customIMaskProps);
+
+    }
+
+    function handleAccept() {for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {args[_key] = arguments[_key];}
+      var value = args[0],e = args[2];
+
+      // Метод onAccept может вызываться при монтировании, если не задан проп defaultValue.
+      // Но нативный input никогда не вызывает onChange при монтировании.
+      // Наше событие onValueChange в Input вывается в тех же случаях, что и нативный onChange,
+      // поэтому чтобы сохранить консинстентность будем ориентироваться на наличие аргумента e.
+      // Он содержит нативное событие, вызвавшее изменение.
+      e && (onValueChange == null ? void 0 : onValueChange(value));
+      !e && (prevValue.current = value);
+    }
+
+    /**
+     * Отслеживаем неожиданные нажатия
+     * handleAccept не вызывается когда значение с маской не меняется
+     * Сначала вызывается handleAccept, затем handleInput
+     */
+    function handleInput(e) {
+      var _e$currentTarget = e.currentTarget,value = _e$currentTarget.value,selectionStart = _e$currentTarget.selectionStart;
+
+      // При вводе неожиданных символов или удалении каретка может перепрыгивать фиксированные символы.
+      // Такие случаи не расцениваем как неожиданный ввод, т.к. пользователь может намеренно их вводить.
+      if (prevValue.current === value && selectionStart === prevSelectionStart.current) {
+        handleUnexpectedInput(value);
+      }
+      prevValue.current = value;
+      prevSelectionStart.current = selectionStart;
+
+      props.onInput == null || props.onInput(e);
+    }
+
+    function handleFocus(e) {var _inputRef$current4;
+      setFocused(true);
+      props.onFocus == null || props.onFocus(e);
+
+      // Если value из пропов отличается от value, которое получит input после обработки,
+      // то imask будет ставить каретку за последним валидным символом.
+      props.selectAllOnFocus && ((_inputRef$current4 = inputRef.current) == null ? void 0 : _inputRef$current4.delaySelectAll());
+    }
+
+    function handleUnexpectedInput(value) {var _inputRef$current5;
+      var blink = ((_inputRef$current5 = inputRef.current) == null ? void 0 : _inputRef$current5.blink.bind(inputRef.current)) || function () {return undefined;};
+      onUnexpectedInput ? onUnexpectedInput(value, blink) : blink();
+    }
+
+    function handleBlur(e) {
+      setFocused(false);
+      props.onBlur == null || props.onBlur(e);
+    }
+
+    function handleKeyDown(e) {
+      var _e$currentTarget2 = e.currentTarget,value = _e$currentTarget2.value,selectionStart = _e$currentTarget2.selectionStart,selectionEnd = _e$currentTarget2.selectionEnd;
+
+      if (
+      (0, _identifiers.isKeyBackspace)(e) && selectionStart === 0 && selectionEnd === 0 ||
+      (0, _identifiers.isKeyDelete)(e) && prevSelectionStart.current === value.length)
+      {
+        // Случаи, когда нажатие клавиш не тригерит `onInput`
+        handleUnexpectedInput(value);
+        prevValue.current = e.currentTarget.value;
+      }
+      prevSelectionStart.current = selectionStart;
+
+      props.onKeyDown == null || props.onKeyDown(e);
+    }
+  }
+);

package/cjs/components/MaskedInput/MaskedInput.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_react","_interopRequireWildcard","require","_forwardRefAndName","_Emotion","_Input","_identifiers","_ThemeContext","_MaskedInput","_MaskedInput2","_ColorableInputElement","_FixedIMaskInput","_excluded","MaskedInput","exports","forwardRefAndName","props","ref","mask","maskChar","formatChars","_props$alwaysShowMask","alwaysShowMask","_props$colored","colored","_props$imaskProps","imaskProps","customIMaskProps","_props$unmask","unmask","onValueChange","onUnexpectedInput","onChange","element","className","inputProps","_objectWithoutPropertiesLoose2","default","theme","useContext","ThemeContext","inputRef","useRef","_useState","useState","focused","setFocused","prevValue","value","String","defaultValue","prevSelectionStart","useImperativeHandle","current","Object","assign","selectAll","_inputRef$current","_inputRef$current2","focus","delaySelectAll","useEffect","_inputRef$current3","input","selectionStart","getCompatibleIMaskProps","uiFontGlobalClassesRoot","createElement","Input","_extends2","onFocus","handleFocus","onBlur","handleBlur","onInput","handleInput","onKeyDown","handleKeyDown","cx","globalClasses","root","styles","ColorableInputElement","showOnFocus","FixedIMaskInput","onAccept","handleAccept","replace","placeholderChar","getMaskChar","definitions","getDefinitions","eager","overwrite","lazy","disabled","_len","arguments","length","args","Array","_key","e","_e$currentTarget","currentTarget","handleUnexpectedInput","_inputRef$current4","selectAllOnFocus","_inputRef$current5","blink","bind","undefined","_e$currentTarget2","selectionEnd","isKeyBackspace","isKeyDelete"],"sources":["MaskedInput.tsx"],"sourcesContent":["import React, { useImperativeHandle, useRef, useState, useEffect, useContext } from 'react';\nimport type { IMaskInputProps } from '@skbkontur/react-imask';\nimport type { Ref } from 'react';\n\nimport { forwardRefAndName } from '../../lib/forwardRefAndName';\nimport { cx } from '../../lib/theming/Emotion';\nimport type { InputProps, InputType } from '../Input';\nimport { Input } from '../Input';\nimport { isKeyBackspace, isKeyDelete } from '../../lib/events/keyboard/identifiers';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\n\nimport { globalClasses, styles } from './MaskedInput.styles';\nimport { getDefinitions, getMaskChar } from './MaskedInput.helpers';\nimport { ColorableInputElement } from './ColorableInputElement';\nimport { FixedIMaskInput } from './FixedIMaskInput';\n\nexport interface MaskedProps {\n  /** Паттерн маски */\n  mask: string;\n\n  /** Устанавливает символ маски\n   * @default _ */\n  maskChar?: string;\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   * @param value значение инпута.\n   * @param blink вспыхнуть акцентным цвтетом.\n   */\n  onUnexpectedInput?: (value: string, blink: () => void) => void;\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 interface MaskedInputProps\n  extends MaskedProps,\n    Omit<\n      InputProps,\n      'showClearIcon' | 'mask' | 'maxLength' | 'type' | 'alwaysShowMask' | 'onUnexpectedInput' | 'maskChar'\n    > {\n  type?: MaskInputType;\n}\n\n/**\n * Интерфейс пропсов наследуется от `Input`.\n * Из пропсов `Input` исключены некоторые не применимые к полю с маской пропсы и сокращен список возможных значений в type.\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      element,\n      className,\n      ...inputProps\n    } = props;\n    const theme = useContext(ThemeContext);\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(\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    // TODO: Удалить в следующем мажоре\n    // Селекторы могут ожидать определённый порядок классов\n    const uiFontGlobalClassesRoot = 'react-ui-ui-font-root';\n\n    return (\n      <Input\n        ref={inputRef}\n        {...inputProps}\n        onFocus={handleFocus}\n        onBlur={handleBlur}\n        onInput={handleInput}\n        onKeyDown={handleKeyDown}\n        className={cx(globalClasses.root, uiFontGlobalClassesRoot, className, styles.root(theme))}\n        element={\n          colored ? (\n            <ColorableInputElement showOnFocus={false}>\n              <FixedIMaskInput {...imaskProps} onAccept={handleAccept} />\n            </ColorableInputElement>\n          ) : (\n            <FixedIMaskInput {...imaskProps} onAccept={handleAccept} />\n          )\n        }\n      />\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"],"mappings":"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","ignoreList":[]}

package/cjs/components/MaskedInput/MaskedInput.md

@@ -0,0 +1,114 @@
+### Проп `mask`
+
+Паттерн ввода. Пример с номером телефона.
+
+```jsx harmony
+const [value, setValue] = React.useState('');
+
+<>
+  <span>value: "{value}"</span>
+  <br />
+  <br />
+  <MaskedInput
+    mask="+7 (999) 999-99-99"
+    placeholder="Номер телефона"
+    value={value}
+    onValueChange={setValue}
+  />
+</>
+```
+
+### Проп `alwaysShowMask`
+
+Показывает маску всегда.
+
+```jsx harmony
+<MaskedInput mask="+7 (999) 999-99-99" alwaysShowMask />
+```
+
+### Проп `maskChar`
+
+Символом маски может быть любой символ.
+
+```jsx harmony
+const [value, setValue] = React.useState('');
+
+<>
+  <span>value: "{value}"</span>
+  <br />
+  <br />
+  <MaskedInput
+    mask="9999 9999 9999 9999"
+    maskChar="X"
+    placeholder="Номер карты"
+    alwaysShowMask
+    value={value}
+    onValueChange={setValue}
+  />
+</>
+```
+
+### Проп `formatChars`
+
+При необходимости можно настроить собственный словарь.
+
+```jsx harmony
+const [value, setValue] = React.useState('');
+
+<MaskedInput
+  mask="Hh:Mm:Ss"
+  alwaysShowMask
+  formatChars={{
+    H: '[0-2]',
+    h: value.startsWith('2') ? '[0-3]' : '[0-9]',
+    M: '[0-5]',
+    m: '[0-9]',
+    S: '[0-5]',
+    s: '[0-9]',
+  }}
+  value={value}
+  onValueChange={setValue}
+/>
+```
+
+### Проп `unmask`
+
+Можно сразу получать очищенный value, содержащий только введённый пользователем символы.
+
+```jsx harmony
+const [value, setValue] = React.useState('');
+
+<>
+  <span>value: "{value}"</span>
+  <br />
+  <br />
+  <MaskedInput
+    mask="+7 (999) 999-99-99"
+    unmask
+    alwaysShowMask
+    value={value}
+    onValueChange={setValue}
+  />
+</>
+```
+
+### Проп `unmask` с фигурными скобками
+
+Если обернуть фиксированные символы в фигурные скобки, то они попадут в `value` при `unmask = true`.
+
+```jsx harmony
+const [value, setValue] = React.useState('');
+
+<>
+  <span>value: "{value}"</span>
+  <br />
+  <br />
+  <MaskedInput
+    mask="+{7} (999) 999-99-99"
+    unmask
+    alwaysShowMask
+    value={value}
+    onValueChange={setValue}
+  />
+</>
+```

package/cjs/components/MaskedInput/MaskedInput.styles.d.ts

@@ -0,0 +1,7 @@
+import type { Theme } from '../../lib/theming/Theme';
+export declare const globalClasses: {
+    root: string;
+};
+export declare const styles: {
+    root(t: Theme): string;
+};

package/cjs/components/MaskedInput/MaskedInput.styles.js

@@ -0,0 +1,16 @@
+"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;exports.__esModule = true;exports.styles = exports.globalClasses = void 0;var _taggedTemplateLiteralLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteralLoose"));var _Emotion = require("../../lib/theming/Emotion");
+
+var _UiFont = require("../../lib/styles/UiFont");var _templateObject;
+
+var globalClasses = exports.globalClasses = (0, _Emotion.prefix)('masked-input')({
+  root: 'root'
+});
+
+var styles = exports.styles = (0, _Emotion.memoizeStyle)({
+  root: function root(t) {
+    return (0, _Emotion.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2.default)(["\n      font-family: ", ", ", ";\n      font-variant-numeric: tabular-nums;\n    "])),
+    _UiFont.UI_FONT_NAME, t.baseFontFamily);
+
+
+  }
+});

package/cjs/components/MaskedInput/MaskedInput.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_Emotion","require","_UiFont","_templateObject","globalClasses","exports","prefix","root","styles","memoizeStyle","t","css","_taggedTemplateLiteralLoose2","default","UI_FONT_NAME","baseFontFamily"],"sources":["MaskedInput.styles.ts"],"sourcesContent":["import { css, memoizeStyle, prefix } from '../../lib/theming/Emotion';\nimport type { Theme } from '../../lib/theming/Theme';\nimport { UI_FONT_NAME } from '../../lib/styles/UiFont';\n\nexport const globalClasses = prefix('masked-input')({\n  root: 'root',\n});\n\nexport const styles = memoizeStyle({\n  root(t: Theme) {\n    return css`\n      font-family: ${UI_FONT_NAME}, ${t.baseFontFamily};\n      font-variant-numeric: tabular-nums;\n    `;\n  },\n});\n"],"mappings":"4SAAA,IAAAA,QAAA,GAAAC,OAAA;;AAEA,IAAAC,OAAA,GAAAD,OAAA,4BAAuD,IAAAE,eAAA;;AAEhD,IAAMC,aAAa,GAAAC,OAAA,CAAAD,aAAA,GAAG,IAAAE,eAAM,EAAC,cAAc,CAAC,CAAC;EAClDC,IAAI,EAAE;AACR,CAAC,CAAC;;AAEK,IAAMC,MAAM,GAAAH,OAAA,CAAAG,MAAA,GAAG,IAAAC,qBAAY,EAAC;EACjCF,IAAI,WAAAA,KAACG,CAAQ,EAAE;IACb,WAAOC,YAAG,EAAAR,eAAA,KAAAA,eAAA,OAAAS,4BAAA,CAAAC,OAAA;IACOC,oBAAY,EAAKJ,CAAC,CAACK,cAAc;;;EAGpD;AACF,CAAC,CAAC","ignoreList":[]}