@skbkontur/react-ui 0.0.0-3c309a601b → 0.0.0-3dbb8bef27

package/components/MaskedInput/MaskedInput/MaskedInput.js

@@ -1,10 +1,16 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-var _excluded = ["mask", "maskChar", "formatChars", "alwaysShowMask", "placeholder"];
-import React, { useImperativeHandle, useRef, useState } from 'react';
-import { Input } from "../../Input";
-import { MaskedInputElement } from "../../../internal/MaskedInputElement";
+var _excluded = ["mask", "maskChar", "formatChars", "alwaysShowMask", "colored", "imaskProps", "unmask", "onValueChange", "onUnexpectedInput", "onChange", "element", "className"];
+import React, { useImperativeHandle, useRef, useState, useEffect } from 'react';
 import { forwardRefAndName } from "../../../lib/forwardRefAndName";
+import { cx } from "../../../lib/theming/Emotion";
+import { uiFontGlobalClasses } from "../../../lib/styles/UiFont";
+import { Input } from "../../Input";
+import { isKeyBackspace, isKeyDelete } from "../../../lib/events/keyboard/identifiers";
+import { globalClasses } from "../MaskedInput.styles";
+import { getDefinitions, getMaskChar } from "../MaskedInput.helpers";
+import { ColorableInputElement } from "../ColorableInputElement";
+import { FixedIMaskInput } from "../FixedIMaskInput";
 
 /**
  * Интерфейс пропсов наследуется от `Input`.
@@ -14,47 +20,146 @@ export var MaskedInput = forwardRefAndName('MaskedInput', function MaskedInput(p
   var mask = props.mask,
     maskChar = props.maskChar,
     formatChars = props.formatChars,
-    alwaysShowMask = props.alwaysShowMask,
-    placeholder = props.placeholder,
+    _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 = _objectWithoutPropertiesLoose(props, _excluded);
+  var inputRef = useRef(null);
   var _useState = useState(false),
     focused = _useState[0],
     setFocused = _useState[1];
-  var showPlaceholder = !(alwaysShowMask || focused);
-  var innerRef = useRef(null);
+  var prevValue = useRef(props.value || String(props.defaultValue) || '');
+  var prevSelectionStart = useRef(null);
   useImperativeHandle(ref, function () {
-    return innerRef.current;
-  });
+    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();
+      }
+    });
+  }, []);
+  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();
   return /*#__PURE__*/(
     React.createElement(Input, _extends({
-      ref: innerRef
+      ref: inputRef
     }, inputProps, {
-      placeholder: showPlaceholder ? placeholder : undefined,
       onFocus: handleFocus,
       onBlur: handleBlur,
-      element: /*#__PURE__*/
-      React.createElement(MaskedInputElement, {
-        mask: mask,
-        maskChar: maskChar,
-        formatChars: formatChars,
-        alwaysShowMask: alwaysShowMask,
-        onUnexpectedInput: handleUnexpectedInput
-      })
+      onInput: handleInput,
+      onKeyDown: handleKeyDown,
+      className: cx(globalClasses.root, uiFontGlobalClasses.root, className),
+      element: colored ? /*#__PURE__*/
+      React.createElement(ColorableInputElement, {
+        showOnFocus: false
+      }, /*#__PURE__*/
+      React.createElement(FixedIMaskInput, _extends({}, imaskProps, {
+        onAccept: handleAccept
+      }))) : /*#__PURE__*/
+
+      React.createElement(FixedIMaskInput, _extends({}, imaskProps, {
+        onAccept: handleAccept
+      }))
     }))
   );
-  function handleUnexpectedInput(value) {
-    if (props.onUnexpectedInput) {
-      props.onUnexpectedInput(value);
-    } else if (innerRef.current) {
-      innerRef.current.blink();
+  function getCompatibleIMaskProps() {
+    return _extends({
+      mask: mask.replace(/0/g, '{\\0}'),
+      placeholderChar: getMaskChar(maskChar),
+      definitions: 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 && props.onFocus(e);
+    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 && props.onBlur(e);
+    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 (isKeyBackspace(e) && selectionStart === 0 && selectionEnd === 0 || isKeyDelete(e) && prevSelectionStart.current === value.length) {
+      // Случаи, когда нажатие клавиш не тригерит `onInput`
+      handleUnexpectedInput(value);
+      prevValue.current = e.currentTarget.value;
+    }
+    prevSelectionStart.current = selectionStart;
+    props.onKeyDown == null || props.onKeyDown(e);
   }
 });

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

@@ -1 +1 @@
-{"version":3,"names":["React","useImperativeHandle","useRef","useState","Input","MaskedInputElement","forwardRefAndName","MaskedInput","props","ref","mask","maskChar","formatChars","alwaysShowMask","placeholder","inputProps","_objectWithoutPropertiesLoose","_excluded","_useState","focused","setFocused","showPlaceholder","innerRef","current","createElement","_extends","undefined","onFocus","handleFocus","onBlur","handleBlur","element","onUnexpectedInput","handleUnexpectedInput","value","blink","e"],"sources":["MaskedInput.tsx"],"sourcesContent":["import React, { Ref, useImperativeHandle, useRef, useState } from 'react';\n\nimport { Input, InputProps, InputType } from '../Input';\nimport { Nullable } from '../../typings/utility-types';\nimport { MaskedInputElement } from '../../internal/MaskedInputElement';\nimport { forwardRefAndName } from '../../lib/forwardRefAndName';\n\nexport interface MaskedProps {\n  /** Паттерн маски */\n  mask: string;\n  /** Символ маски */\n  maskChar?: Nullable<string>;\n  /**\n   * Словарь символов-регулярок для маски\n   * @default { '9': '[0-9]', 'a': '[A-Za-z]', '*': '[A-Za-z0-9]' }\n   */\n  formatChars?: Record<string, string>;\n  /** Показывать символы маски */\n  alwaysShowMask?: boolean;\n}\n\nexport type MaskInputType = Exclude<InputType, 'number' | 'date' | 'time' | 'password'>;\n\nexport interface MaskedInputProps extends MaskedProps, Omit<InputProps, 'mask' | 'maxLength' | 'type' | 'element'> {\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 { mask, maskChar, formatChars, alwaysShowMask, placeholder, ...inputProps } = props;\n    const [focused, setFocused] = useState(false);\n    const showPlaceholder = !(alwaysShowMask || focused);\n    const innerRef = useRef<Input>(null);\n\n    useImperativeHandle(ref, () => innerRef.current);\n\n    return (\n      <Input\n        ref={innerRef}\n        {...inputProps}\n        placeholder={showPlaceholder ? placeholder : undefined}\n        onFocus={handleFocus}\n        onBlur={handleBlur}\n        element={\n          <MaskedInputElement\n            mask={mask}\n            maskChar={maskChar}\n            formatChars={formatChars}\n            alwaysShowMask={alwaysShowMask}\n            onUnexpectedInput={handleUnexpectedInput}\n          />\n        }\n      />\n    );\n\n    function handleUnexpectedInput(value: string) {\n      if (props.onUnexpectedInput) {\n        props.onUnexpectedInput(value);\n      } else if (innerRef.current) {\n        innerRef.current.blink();\n      }\n    }\n\n    function handleFocus(e: React.FocusEvent<HTMLInputElement>) {\n      setFocused(true);\n      props.onFocus && props.onFocus(e);\n    }\n\n    function handleBlur(e: React.FocusEvent<HTMLInputElement>) {\n      setFocused(false);\n      props.onBlur && props.onBlur(e);\n    }\n  },\n);\n"],"mappings":"mPAAA,OAAOA,KAAK,IAASC,mBAAmB,EAAEC,MAAM,EAAEC,QAAQ,QAAQ,OAAO;;AAEzE,SAASC,KAAK,QAA+B,UAAU;;AAEvD,SAASC,kBAAkB,QAAQ,mCAAmC;AACtE,SAASC,iBAAiB,QAAQ,6BAA6B;;;;;;;;;;;;;;;;;;;;;;AAsB/D;AACA;AACA;AACA;AACA,OAAO,IAAMC,WAAW,GAAGD,iBAAiB;EAC1C,aAAa;EACb,SAASC,WAAWA,CAACC,KAAuB,EAAEC,GAAsB,EAAE;IACpE,IAAQC,IAAI,GAAwEF,KAAK,CAAjFE,IAAI,CAAEC,QAAQ,GAA8DH,KAAK,CAA3EG,QAAQ,CAAEC,WAAW,GAAiDJ,KAAK,CAAjEI,WAAW,CAAEC,cAAc,GAAiCL,KAAK,CAApDK,cAAc,CAAEC,WAAW,GAAoBN,KAAK,CAApCM,WAAW,CAAKC,UAAU,GAAAC,6BAAA,CAAKR,KAAK,EAAAS,SAAA;IACzF,IAAAC,SAAA,GAA8Bf,QAAQ,CAAC,KAAK,CAAC,CAAtCgB,OAAO,GAAAD,SAAA,IAAEE,UAAU,GAAAF,SAAA;IAC1B,IAAMG,eAAe,GAAG,EAAER,cAAc,IAAIM,OAAO,CAAC;IACpD,IAAMG,QAAQ,GAAGpB,MAAM,CAAQ,IAAI,CAAC;;IAEpCD,mBAAmB,CAACQ,GAAG,EAAE,oBAAMa,QAAQ,CAACC,OAAO,GAAC;;IAEhD;MACEvB,KAAA,CAAAwB,aAAA,CAACpB,KAAK,EAAAqB,QAAA;QACJhB,GAAG,EAAEa,QAAS;MACVP,UAAU;QACdD,WAAW,EAAEO,eAAe,GAAGP,WAAW,GAAGY,SAAU;QACvDC,OAAO,EAAEC,WAAY;QACrBC,MAAM,EAAEC,UAAW;QACnBC,OAAO;QACL/B,KAAA,CAAAwB,aAAA,CAACnB,kBAAkB;UACjBK,IAAI,EAAEA,IAAK;UACXC,QAAQ,EAAEA,QAAS;UACnBC,WAAW,EAAEA,WAAY;UACzBC,cAAc,EAAEA,cAAe;UAC/BmB,iBAAiB,EAAEC,qBAAsB;QAC1C,CACF;;MACF,CAAC;;;IAGJ,SAASA,qBAAqBA,CAACC,KAAa,EAAE;MAC5C,IAAI1B,KAAK,CAACwB,iBAAiB,EAAE;QAC3BxB,KAAK,CAACwB,iBAAiB,CAACE,KAAK,CAAC;MAChC,CAAC,MAAM,IAAIZ,QAAQ,CAACC,OAAO,EAAE;QAC3BD,QAAQ,CAACC,OAAO,CAACY,KAAK,CAAC,CAAC;MAC1B;IACF;;IAEA,SAASP,WAAWA,CAACQ,CAAqC,EAAE;MAC1DhB,UAAU,CAAC,IAAI,CAAC;MAChBZ,KAAK,CAACmB,OAAO,IAAInB,KAAK,CAACmB,OAAO,CAACS,CAAC,CAAC;IACnC;;IAEA,SAASN,UAAUA,CAACM,CAAqC,EAAE;MACzDhB,UAAU,CAAC,KAAK,CAAC;MACjBZ,KAAK,CAACqB,MAAM,IAAIrB,KAAK,CAACqB,MAAM,CAACO,CAAC,CAAC;IACjC;EACF;AACF,CAAC","ignoreList":[]}
+{"version":3,"names":["React","useImperativeHandle","useRef","useState","useEffect","forwardRefAndName","cx","uiFontGlobalClasses","Input","isKeyBackspace","isKeyDelete","globalClasses","getDefinitions","getMaskChar","ColorableInputElement","FixedIMaskInput","MaskedInput","props","ref","mask","maskChar","formatChars","_props$alwaysShowMask","alwaysShowMask","_props$colored","colored","_props$imaskProps","imaskProps","customIMaskProps","_props$unmask","unmask","onValueChange","onUnexpectedInput","onChange","element","className","inputProps","_objectWithoutPropertiesLoose","_excluded","inputRef","_useState","focused","setFocused","prevValue","value","String","defaultValue","prevSelectionStart","current","Object","assign","selectAll","_inputRef$current","_inputRef$current2","focus","delaySelectAll","_inputRef$current3","input","selectionStart","getCompatibleIMaskProps","createElement","_extends","onFocus","handleFocus","onBlur","handleBlur","onInput","handleInput","onKeyDown","handleKeyDown","root","showOnFocus","onAccept","handleAccept","replace","placeholderChar","definitions","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"],"sources":["MaskedInput.tsx"],"sourcesContent":["import React, { Ref, useImperativeHandle, useRef, useState, useEffect } from 'react';\nimport { IMaskInputProps } from 'react-imask';\n\nimport { forwardRefAndName } from '../../lib/forwardRefAndName';\nimport { cx } from '../../lib/theming/Emotion';\nimport { uiFontGlobalClasses } from '../../lib/styles/UiFont';\nimport { Input, InputProps, InputType } from '../Input';\nimport { isKeyBackspace, isKeyDelete } from '../../lib/events/keyboard/identifiers';\n\nimport { globalClasses } 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\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    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, uiFontGlobalClasses.root, className)}\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/components/MaskedInput/MaskedInput.d.ts

@@ -1,20 +1,38 @@
+import { IMaskInputProps } from 'react-imask';
 import { Input, InputProps, InputType } from '../Input';
-import { Nullable } from '../../typings/utility-types';
 export interface MaskedProps {
     /** Паттерн маски */
     mask: string;
-    /** Символ маски */
-    maskChar?: Nullable<string>;
-    /**
-     * Словарь символов-регулярок для маски
-     * @default { '9': '[0-9]', 'a': '[A-Za-z]', '*': '[A-Za-z0-9]' }
-     */
+    /** Устанавливает символ маски
+     * @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, 'mask' | 'maxLength' | 'type' | 'element'> {
+export interface MaskedInputProps extends MaskedProps, Omit<InputProps, 'showClearIcon' | 'mask' | 'maxLength' | 'type' | 'alwaysShowMask' | 'onUnexpectedInput' | 'maskChar'> {
     type?: MaskInputType;
 }
 /**

package/components/MaskedInput/MaskedInput.helpers/MaskedInput.helpers.js

@@ -0,0 +1,20 @@
+import { isNonNullable } from "../../../lib/utils";
+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;
+}

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

@@ -0,0 +1 @@
+{"version":3,"names":["isNonNullable","DEFAULT_MASK_CHAR","DEFINITIONS","Object","freeze","a","getDefinitions","formatChars","chars","key","RegExp","getMaskChar","maskChar"],"sources":["MaskedInput.helpers.ts"],"sourcesContent":["import { Definitions } from '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,SAASA,aAAa,QAAQ,iBAAiB;;AAE/C,OAAO,IAAMC,iBAAiB,GAAG,GAAG;AACpC,OAAO,IAAMC,WAAW,GAAGC,MAAM,CAACC,MAAM,CAAC,EAAE,GAAG,EAAE,OAAO,EAAEC,CAAC,EAAE,UAAU,EAAE,GAAG,EAAE,aAAa,CAAC,CAAC,CAAC;;AAE7F,OAAO,SAASC,cAAcA,CAACC,WAA+C,EAAe;EAC3F,IAAIP,aAAa,CAACO,WAAW,CAAC,EAAE;IAC9B,IAAMC,KAA6B,GAAG,CAAC,CAAC;;IAExC,KAAK,IAAMC,GAAG,IAAIF,WAAW,EAAE;MAC7BC,KAAK,CAACC,GAAG,CAAC,GAAG,IAAIC,MAAM,CAACH,WAAW,CAACE,GAAG,CAAC,CAAC;IAC3C;;IAEA,OAAOD,KAAK;EACd;;EAEA,OAAON,WAAW;AACpB;;AAEA,OAAO,SAASS,WAAWA,CAACC,QAA4B,EAAU;EAChE,OAAO,CAACA,QAAQ,GAAGX,iBAAiB,GAAGW,QAAQ;AACjD","ignoreList":[]}

package/components/MaskedInput/MaskedInput.helpers/package.json

@@ -0,0 +1,6 @@
+{
+  "main": "../../../cjs/components/MaskedInput/MaskedInput.helpers.js",
+  "module": "MaskedInput.helpers",
+  "types": "../MaskedInput.helpers.d.ts",
+  "sideEffects": false
+}

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

@@ -0,0 +1,9 @@
+import { Definitions } from '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/components/MaskedInput/MaskedInput.md

@@ -1,21 +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
-<MaskedInput mask={'+7 999 999-99-99'} placeholder={"Номер телефона"} />
+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
-<MaskedInput mask={'9999 9999 9999 9999'} maskChar={'X'} placeholder={"Номер карты"}  />
+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}
+/>
 ```
 
-**alwaysShowMask** позволяет показывать маску всегда. Placeholder в этом случае игнорируется.
+### Проп `unmask`
+
+Можно сразу получать очищенный value, содержащий только введённый пользователем символы.
+
 ```jsx harmony
-<MaskedInput mask={'9999 9999 9999 9999'} alwaysShowMask maskChar={'X'} placeholder={"Номер карты"} />
+const [value, setValue] = React.useState('');
+
+<>
+  <span>value: "{value}"</span>
+  <br />
+  <br />
+  <MaskedInput
+    mask="+7 (999) 999-99-99"
+    unmask
+    alwaysShowMask
+    value={value}
+    onValueChange={setValue}
+  />
+</>
 ```
 
-Для форматирования по маске используется пакет [iMask](https://imask.js.org/). Используйте особенности пакета принимая всю ответственность на себя.
+### Проп `unmask` с фигурными скобками
 
-`MaskedInput` гарантирует поддержку работы 3 пропов:  **mask**, **maskChar**, **alwaysShowMask** с заданными по-умолчанию **formatChars**.
+Если обернуть фиксированные символы в фигурные скобки, то они попадут в `value` при `unmask = true`.
 
-Остальное поведение может меняться в мажорных релизах.
+```jsx harmony
+const [value, setValue] = React.useState('');
 
-Например, iMask [позволяет добавлять](https://imask.js.org/guide.html#masked-pattern) в значения без форматирования константы с помощью фигурных скобок. Использовать этот вариант **НЕ РЕКОМЕНДУЕТСЯ**.
+<>
+  <span>value: "{value}"</span>
+  <br />
+  <br />
+  <MaskedInput
+    mask="+{7} (999) 999-99-99"
+    unmask
+    alwaysShowMask
+    value={value}
+    onValueChange={setValue}
+  />
+</>
+```

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

@@ -0,0 +1,4 @@
+import { prefix } from "../../../lib/theming/Emotion";
+export var globalClasses = prefix('masked-input')({
+  root: 'root'
+});

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

@@ -0,0 +1 @@
+{"version":3,"names":["prefix","globalClasses","root"],"sources":["MaskedInput.styles.ts"],"sourcesContent":["import { prefix } from '../../lib/theming/Emotion';\n\nexport const globalClasses = prefix('masked-input')({\n  root: 'root',\n});\n"],"mappings":"AAAA,SAASA,MAAM,QAAQ,2BAA2B;;AAElD,OAAO,IAAMC,aAAa,GAAGD,MAAM,CAAC,cAAc,CAAC,CAAC;EAClDE,IAAI,EAAE;AACR,CAAC,CAAC","ignoreList":[]}

package/components/MaskedInput/MaskedInput.styles/package.json

@@ -0,0 +1,6 @@
+{
+  "main": "../../../cjs/components/MaskedInput/MaskedInput.styles.js",
+  "module": "MaskedInput.styles",
+  "types": "../MaskedInput.styles.d.ts",
+  "sideEffects": false
+}

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

@@ -0,0 +1,3 @@
+export declare const globalClasses: {
+    root: string;
+};