@skbkontur/react-ui 4.25.2 → 4.26.0-MaskedInput-2nd.7

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`.
  * Из пропсов `Input` исключены некоторые не применимые к полю с маской пропсы и сокращен список возможных значений в type.
@@ -14,49 +20,151 @@ 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: inputRef.current.delaySelectAll
+    });
+  }, []);
+  useEffect(function () {
+    var _inputRef$current; // Для корректной работы onUnexpectedInput надо знать предыдущий value,
+    // но imask при монтировании не вызывает onAccept, если value невалиден или laze=false.
+    // Поэтому актуальный value при монтировании надо получать вручную
+
+
+    if ((_inputRef$current = inputRef.current) != null && _inputRef$current.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 ? void 0 : props.onInput(e);
   }
 
   function handleFocus(e) {
+    var _inputRef$current2;
+
     setFocused(true);
-    props.onFocus && props.onFocus(e);
+    props.onFocus == null ? void 0 : props.onFocus(e); // Если value из пропов отличается от value, которое получит input после обработки,
+    // то imask будет ставить каретку за последним валидным символом.
+
+    props.selectAllOnFocus && ((_inputRef$current2 = inputRef.current) == null ? void 0 : _inputRef$current2.delaySelectAll());
+  }
+
+  function handleUnexpectedInput(value) {
+    var _inputRef$current3;
+
+    var blink = ((_inputRef$current3 = inputRef.current) == null ? void 0 : _inputRef$current3.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 ? void 0 : 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 ? void 0 : props.onKeyDown(e);
   }
 });

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

@@ -1 +1 @@
-{"version":3,"sources":["MaskedInput.tsx"],"names":["React","useImperativeHandle","useRef","useState","Input","MaskedInputElement","forwardRefAndName","MaskedInput","props","ref","mask","maskChar","formatChars","alwaysShowMask","placeholder","inputProps","focused","setFocused","showPlaceholder","innerRef","current","undefined","handleFocus","handleBlur","handleUnexpectedInput","value","onUnexpectedInput","blink","e","onFocus","onBlur"],"mappings":"mPAAA,OAAOA,KAAP,IAAqBC,mBAArB,EAA0CC,MAA1C,EAAkDC,QAAlD,QAAkE,OAAlE;;AAEA,SAASC,KAAT,QAA6C,UAA7C;;AAEA,SAASC,kBAAT,QAAmC,mCAAnC;AACA,SAASC,iBAAT,QAAkC,6BAAlC;;;;;;;;;;;;;;;;;;;;;;AAsBA;AACA;AACA;AACA;AACA,OAAO,IAAMC,WAAW,GAAGD,iBAAiB;AAC1C,aAD0C;AAE1C,SAASC,WAAT,CAAqBC,KAArB,EAA8CC,GAA9C,EAAsE;AACpE,MAAQC,IAAR,GAAoFF,KAApF,CAAQE,IAAR,CAAcC,QAAd,GAAoFH,KAApF,CAAcG,QAAd,CAAwBC,WAAxB,GAAoFJ,KAApF,CAAwBI,WAAxB,CAAqCC,cAArC,GAAoFL,KAApF,CAAqCK,cAArC,CAAqDC,WAArD,GAAoFN,KAApF,CAAqDM,WAArD,CAAqEC,UAArE,iCAAoFP,KAApF;AACA,kBAA8BL,QAAQ,CAAC,KAAD,CAAtC,CAAOa,OAAP,gBAAgBC,UAAhB;AACA,MAAMC,eAAe,GAAG,EAAEL,cAAc,IAAIG,OAApB,CAAxB;AACA,MAAMG,QAAQ,GAAGjB,MAAM,CAAQ,IAAR,CAAvB;;AAEAD,EAAAA,mBAAmB,CAACQ,GAAD,EAAM,oBAAMU,QAAQ,CAACC,OAAf,EAAN,CAAnB;;AAEA;AACE,wBAAC,KAAD;AACE,MAAA,GAAG,EAAED,QADP;AAEMJ,IAAAA,UAFN;AAGE,MAAA,WAAW,EAAEG,eAAe,GAAGJ,WAAH,GAAiBO,SAH/C;AAIE,MAAA,OAAO,EAAEC,WAJX;AAKE,MAAA,MAAM,EAAEC,UALV;AAME,MAAA,OAAO;AACL,0BAAC,kBAAD;AACE,QAAA,IAAI,EAAEb,IADR;AAEE,QAAA,QAAQ,EAAEC,QAFZ;AAGE,QAAA,WAAW,EAAEC,WAHf;AAIE,QAAA,cAAc,EAAEC,cAJlB;AAKE,QAAA,iBAAiB,EAAEW,qBALrB,GAPJ,IADF;;;;;;AAmBA,WAASA,qBAAT,CAA+BC,KAA/B,EAA8C;AAC5C,QAAIjB,KAAK,CAACkB,iBAAV,EAA6B;AAC3BlB,MAAAA,KAAK,CAACkB,iBAAN,CAAwBD,KAAxB;AACD,KAFD,MAEO,IAAIN,QAAQ,CAACC,OAAb,EAAsB;AAC3BD,MAAAA,QAAQ,CAACC,OAAT,CAAiBO,KAAjB;AACD;AACF;;AAED,WAASL,WAAT,CAAqBM,CAArB,EAA4D;AAC1DX,IAAAA,UAAU,CAAC,IAAD,CAAV;AACAT,IAAAA,KAAK,CAACqB,OAAN,IAAiBrB,KAAK,CAACqB,OAAN,CAAcD,CAAd,CAAjB;AACD;;AAED,WAASL,UAAT,CAAoBK,CAApB,EAA2D;AACzDX,IAAAA,UAAU,CAAC,KAAD,CAAV;AACAT,IAAAA,KAAK,CAACsB,MAAN,IAAgBtB,KAAK,CAACsB,MAAN,CAAaF,CAAb,CAAhB;AACD;AACF,CA9CyC,CAArC","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"]}
+{"version":3,"sources":["MaskedInput.tsx"],"names":["React","useImperativeHandle","useRef","useState","useEffect","forwardRefAndName","cx","uiFontGlobalClasses","Input","isKeyBackspace","isKeyDelete","globalClasses","getDefinitions","getMaskChar","ColorableInputElement","FixedIMaskInput","MaskedInput","props","ref","mask","maskChar","formatChars","alwaysShowMask","colored","imaskProps","customIMaskProps","unmask","onValueChange","onUnexpectedInput","onChange","element","className","inputProps","inputRef","focused","setFocused","prevValue","value","String","defaultValue","prevSelectionStart","current","Object","assign","selectAll","delaySelectAll","input","selectionStart","getCompatibleIMaskProps","handleFocus","handleBlur","handleInput","handleKeyDown","root","handleAccept","replace","placeholderChar","definitions","eager","overwrite","lazy","disabled","args","e","currentTarget","handleUnexpectedInput","onInput","onFocus","selectAllOnFocus","blink","bind","undefined","onBlur","selectionEnd","length","onKeyDown"],"mappings":"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","sourcesContent":["import React, { Ref, useImperativeHandle, useRef, useState, useEffect } from 'react';\nimport { IMaskInputProps } from 'react-imask';\n\nimport { Nullable } from '../../typings/utility-types';\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   *\n   * @default _\n   */\n  maskChar?: Nullable<string>;\n  /**\n   * Словарь символов-регулярок для маски\n   *\n   * @default { '9': '[0-9]', 'a': '[A-Za-z]', '*': '[A-Za-z0-9]' }\n   */\n  formatChars?: Record<string, string>;\n  /**\n   * Всегда показывать символы маски\n   *\n   * @default false\n   */\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   * Убирать из value символы, не введённые пользователем\n   *\n   * @default false\n   */\n  unmask?: boolean;\n  /**\n   * Раскрашивать символы маски\n   *\n   * @default true\n   * @ignore\n   */\n  colored?: boolean;\n  /**\n   * Пропы для компонента `IMaskInput`. Необходимы для юнит-тестов\n   *\n   * @ignore\n   */\n  imaskProps?: IMaskInputProps<HTMLInputElement>;\n}\n\nexport type MaskInputType = Exclude<InputType, 'number' | 'date' | 'time' | 'password'>;\n\nexport interface MaskedInputProps\n  extends MaskedProps,\n    Omit<InputProps, 'mask' | 'maxLength' | 'type' | 'alwaysShowMask' | 'onUnexpectedInput'> {\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: inputRef.current.delaySelectAll,\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"]}

package/components/MaskedInput/MaskedInput.d.ts

@@ -1,20 +1,59 @@
-import { Input, InputProps, InputType } from '../Input';
+import { IMaskInputProps } from 'react-imask';
 import { Nullable } from '../../typings/utility-types';
+import { Input, InputProps, InputType } from '../Input';
 export interface MaskedProps {
     /** Паттерн маски */
     mask: string;
-    /** Символ маски */
+    /**
+     * Символ маски
+     *
+     * @default _
+     */
     maskChar?: Nullable<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 declare 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, 'mask' | 'maxLength' | 'type' | 'alwaysShowMask' | 'onUnexpectedInput'> {
     type?: MaskInputType;
 }
 /**

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

@@ -0,0 +1,27 @@
+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) {
+  if (maskChar === null) {
+    return '';
+  }
+
+  return maskChar === undefined ? DEFAULT_MASK_CHAR : maskChar;
+}

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

@@ -0,0 +1 @@
+{"version":3,"sources":["MaskedInput.helpers.ts"],"names":["isNonNullable","DEFAULT_MASK_CHAR","DEFINITIONS","Object","freeze","a","getDefinitions","formatChars","chars","key","RegExp","getMaskChar","maskChar","undefined"],"mappings":";;AAEA,SAASA,aAAT,QAA8B,iBAA9B;;;;AAIA,OAAO,IAAMC,iBAAiB,GAAG,GAA1B;AACP,OAAO,IAAMC,WAAW,GAAGC,MAAM,CAACC,MAAP,CAAc,EAAE,KAAK,OAAP,EAAgBC,CAAC,EAAE,UAAnB,EAA+B,KAAK,aAApC,EAAd,CAApB;;AAEP,OAAO,SAASC,cAAT,CAAwBC,WAAxB,EAAsF;AAC3F,MAAIP,aAAa,CAACO,WAAD,CAAjB,EAAgC;AAC9B,QAAMC,KAA6B,GAAG,EAAtC;;AAEA,SAAK,IAAMC,GAAX,IAAkBF,WAAlB,EAA+B;AAC7BC,MAAAA,KAAK,CAACC,GAAD,CAAL,GAAa,IAAIC,MAAJ,CAAWH,WAAW,CAACE,GAAD,CAAtB,CAAb;AACD;;AAED,WAAOD,KAAP;AACD;;AAED,SAAON,WAAP;AACD;;AAED,OAAO,SAASS,WAAT,CAAqBC,QAArB,EAAkE;AACvE,MAAIA,QAAQ,KAAK,IAAjB,EAAuB;AACrB,WAAO,EAAP;AACD;;AAED,SAAOA,QAAQ,KAAKC,SAAb,GAAyBZ,iBAAzB,GAA6CW,QAApD;AACD","sourcesContent":["import IMask, { Definitions } from 'imask';\n\nimport { isNonNullable } from '../../lib/utils';\n\nexport type AnyIMaskType = ReturnType<typeof IMask.createMask>;\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 | null | undefined): string {\n  if (maskChar === null) {\n    return '';\n  }\n\n  return maskChar === undefined ? DEFAULT_MASK_CHAR : maskChar;\n}\n"]}

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,10 @@
+import IMask, { Definitions } from 'imask';
+export declare type AnyIMaskType = ReturnType<typeof IMask.createMask>;
+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 | null | undefined): string;

package/components/MaskedInput/MaskedInput.md

@@ -1,21 +1,112 @@
+#### `mask`
+
+Паттерн ввода. Пример с номером телефона.
+
 ```jsx harmony
-<MaskedInput mask={'+7 999 999-99-99'} placeholder={"Номер телефона"} />
+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={'9999 9999 9999 9999'} maskChar={'X'} placeholder={"Номер карты"}  />
+<MaskedInput mask="+7 (999) 999-99-99" alwaysShowMask />
 ```
 
-**alwaysShowMask** позволяет показывать маску всегда. Placeholder в этом случае игнорируется.
+#### `maskChar`
+
+Символом маски может быть любой символ.
+
 ```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="9999 9999 9999 9999"
+    maskChar="X"
+    placeholder="Номер карты"
+    alwaysShowMask
+    value={value}
+    onValueChange={setValue}
+  />
+</>
 ```
 
-Для форматирования по маске используется пакет [iMask](https://imask.js.org/). Используйте особенности пакета принимая всю ответственность на себя.
+#### `formatChars`
 
-`MaskedInput` гарантирует поддержку работы 3 пропов:  **mask**, **maskChar**, **alwaysShowMask** с заданными по-умолчанию **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}
+/>
+```
 
-Например, iMask [позволяет добавлять](https://imask.js.org/guide.html#masked-pattern) в значения без форматирования константы с помощью фигурных скобок. Использовать этот вариант **НЕ РЕКОМЕНДУЕТСЯ**.
+#### `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}
+  />
+</>
+```
+
+Если обернуть фиксированные символы в фигурные скобки, то они попадут в `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/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,"sources":["MaskedInput.styles.ts"],"names":["prefix","globalClasses","root"],"mappings":"AAAA,SAASA,MAAT,QAAuB,2BAAvB;;AAEA,OAAO,IAAMC,aAAa,GAAGD,MAAM,CAAC,cAAD,CAAN,CAAuB;AAClDE,EAAAA,IAAI,EAAE,MAD4C,EAAvB,CAAtB","sourcesContent":["import { prefix } from '../../lib/theming/Emotion';\n\nexport const globalClasses = prefix('masked-input')({\n  root: 'root',\n});\n"]}

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;
+};

package/components/RadioGroup/RadioGroup.md

@@ -1,43 +1,43 @@
-```jsx harmony
-import { Gapped, Radio } from '@skbkontur/react-ui';
-
-let items = ['One', 'Two', 'Three', 'Four'];
-
-let simpleRadioGroup = (
-  <div>
-    <h2>Numbers</h2>
-    <RadioGroup name="number-simple" items={items} defaultValue="One" />
-  </div>
-);
-
-let complexRadioGroup = (
-  <div>
-    <h2>Numbers</h2>
-    <RadioGroup name="number-complex" defaultValue="3">
-      <Gapped gap={40}>
-        <Gapped vertical gap={0}>
-          <b>Odd</b>
-          <Radio value="1">One</Radio>
-          <Radio value="3">Three</Radio>
-          <Radio value="5" disabled>
-            Five
-          </Radio>
-          <Radio value="7">Seven</Radio>
-        </Gapped>
-        <Gapped vertical gap={0}>
-          <b>Even</b>
-          <Radio value="2">Two</Radio>
-          <Radio value="4">Four</Radio>
-          <Radio value="6">Six</Radio>
-          <Radio value="8">Eight</Radio>
-        </Gapped>
-      </Gapped>
-    </RadioGroup>
-  </div>
-);
-
-<div>
-  {simpleRadioGroup}
-  {complexRadioGroup}
-</div>;
-```
+```jsx harmony
+import { Gapped, Radio } from '@skbkontur/react-ui';
+
+let items = ['One', 'Two', 'Three', 'Four'];
+
+let simpleRadioGroup = (
+  <div>
+    <h2>Numbers</h2>
+    <RadioGroup name="number-simple" items={items} defaultValue="One" />
+  </div>
+);
+
+let complexRadioGroup = (
+  <div>
+    <h2>Numbers</h2>
+    <RadioGroup name="number-complex" defaultValue="3">
+      <Gapped gap={40}>
+        <Gapped vertical gap={0}>
+          <b>Odd</b>
+          <Radio value="1">One</Radio>
+          <Radio value="3">Three</Radio>
+          <Radio value="5" disabled>
+            Five
+          </Radio>
+          <Radio value="7">Seven</Radio>
+        </Gapped>
+        <Gapped vertical gap={0}>
+          <b>Even</b>
+          <Radio value="2">Two</Radio>
+          <Radio value="4">Four</Radio>
+          <Radio value="6">Six</Radio>
+          <Radio value="8">Eight</Radio>
+        </Gapped>
+      </Gapped>
+    </RadioGroup>
+  </div>
+);
+
+<div>
+  {simpleRadioGroup}
+  {complexRadioGroup}
+</div>;
+```

package/components/ScrollContainer/ScrollContainer/ScrollContainer.js

@@ -16,6 +16,7 @@ import { rootNode } from "../../../lib/rootNode";
 import { getDOMRect } from "../../../lib/dom/getDOMRect";
 import { createPropsGetter } from "../../../lib/createPropsGetter";
 import { isTestEnv } from "../../../lib/currentEnvironment";
+import { callChildRef } from "../../../lib/callChildRef/callChildRef";
 import { styles, globalClasses } from "../ScrollContainer.styles";
 import { scrollSizeParametersNames } from "../ScrollContainer.constants";
 import { getScrollYOffset, convertScrollbarXScrollState, convertScrollbarYScrollState } from "../ScrollContainer.helpers";
@@ -146,6 +147,10 @@ export var ScrollContainer = rootNode(_class = (_temp = _class2 = /*#__PURE__*/f
       }
 
       _this.inner = element;
+
+      if (_this.props.scrollRef) {
+        callChildRef(_this.props.scrollRef, element);
+      }
     };
 
     _this.handleNativeScroll = function (event) {