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

package/cjs/components/MaskedInput/MaskedInput.js

@@ -1,9 +1,57 @@
 "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 _UiFont = require("../../lib/styles/UiFont");
 var _Input = require("../Input");
+var _identifiers = require("../../lib/events/keyboard/identifiers");
+
+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"];
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
 
-var _MaskedInputElement = require("../../internal/MaskedInputElement");
-var _forwardRefAndName = require("../../lib/forwardRefAndName");var _excluded = ["mask", "maskChar", "formatChars", "alwaysShowMask", "placeholder"];
 
 
 
@@ -32,47 +80,148 @@ var _forwardRefAndName = require("../../lib/forwardRefAndName");var _excluded =
 var MaskedInput = (0, _forwardRefAndName.forwardRefAndName)(
 'MaskedInput',
 function MaskedInput(props, ref) {
-  var mask = props.mask,maskChar = props.maskChar,formatChars = props.formatChars,alwaysShowMask = props.alwaysShowMask,placeholder = props.placeholder,inputProps = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
+  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 inputRef = (0, _react.useRef)(null);
+
   var _useState = (0, _react.useState)(false),focused = _useState[0],setFocused = _useState[1];
-  var showPlaceholder = !(alwaysShowMask || focused);
-  var innerRef = (0, _react.useRef)(null);
+  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: inputRef.current.delaySelectAll }));},
+
+  []);
+
+
+  (0, _react.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;
+    }
+  }, []);
 
-  (0, _react.useImperativeHandle)(ref, function () {return innerRef.current;});
+  var imaskProps = getCompatibleIMaskProps();
 
   return /*#__PURE__*/(
     _react.default.createElement(_Input.Input, (0, _extends2.default)({
-      ref: innerRef },
+      ref: inputRef },
     inputProps, {
-      placeholder: showPlaceholder ? placeholder : undefined,
       onFocus: handleFocus,
       onBlur: handleBlur,
-      element: /*#__PURE__*/
-      _react.default.createElement(_MaskedInputElement.MaskedInputElement, {
-        mask: mask,
-        maskChar: maskChar,
-        formatChars: formatChars,
-        alwaysShowMask: alwaysShowMask,
-        onUnexpectedInput: handleUnexpectedInput }) })));
+      onInput: handleInput,
+      onKeyDown: handleKeyDown,
+      className: (0, _Emotion.cx)(_MaskedInput.globalClasses.root, _UiFont.uiFontGlobalClasses.root, className),
+      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);
+  }
 
-  function handleUnexpectedInput(value) {
-    if (props.onUnexpectedInput) {
-      props.onUnexpectedInput(value);
-    } else if (innerRef.current) {
-      innerRef.current.blink();
+  /**
+   * Отслеживаем неожиданные нажатия
+   * 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) {
+  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 (
+    (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 ? void 0 : props.onKeyDown(e);
   }
 });exports.MaskedInput = MaskedInput;

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

@@ -1 +1 @@
-{"version":3,"sources":["MaskedInput.tsx"],"names":["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":"8cAAA;;AAEA;;AAEA;AACA,gE;;;;;;;;;;;;;;;;;;;;;;AAsBA;AACA;AACA;AACA;AACO,IAAMA,WAAW,GAAG;AACzB,aADyB;AAEzB,SAASA,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,+CAAoFP,KAApF;AACA,kBAA8B,qBAAS,KAAT,CAA9B,CAAOQ,OAAP,gBAAgBC,UAAhB;AACA,MAAMC,eAAe,GAAG,EAAEL,cAAc,IAAIG,OAApB,CAAxB;AACA,MAAMG,QAAQ,GAAG,mBAAc,IAAd,CAAjB;;AAEA,kCAAoBV,GAApB,EAAyB,oBAAMU,QAAQ,CAACC,OAAf,EAAzB;;AAEA;AACE,iCAAC,YAAD;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,mCAAC,sCAAD;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,CA9CwB,CAApB,C","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":["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","globalClasses","root","uiFontGlobalClasses","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/cjs/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/cjs/components/MaskedInput/MaskedInput.styles.d.ts

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

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

@@ -0,0 +1,4 @@
+"use strict";exports.__esModule = true;exports.globalClasses = void 0;var _Emotion = require("../../lib/theming/Emotion");
+
+var globalClasses = (0, _Emotion.prefix)('masked-input')({
+  root: 'root' });exports.globalClasses = globalClasses;

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

@@ -0,0 +1 @@
+{"version":3,"sources":["MaskedInput.styles.ts"],"names":["globalClasses","root"],"mappings":"sEAAA;;AAEO,IAAMA,aAAa,GAAG,qBAAO,cAAP,EAAuB;AAClDC,EAAAA,IAAI,EAAE,MAD4C,EAAvB,CAAtB,C","sourcesContent":["import { prefix } from '../../lib/theming/Emotion';\n\nexport const globalClasses = prefix('masked-input')({\n  root: 'root',\n});\n"]}

package/cjs/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/cjs/components/ScrollContainer/ScrollContainer.d.ts

@@ -59,6 +59,7 @@ export interface ScrollContainerProps extends CommonProps {
      * Отключить анимации
      */
     disableAnimations?: boolean;
+    scrollRef?: React.Ref<HTMLDivElement | null>;
 }
 export declare const ScrollContainerDataTids: {
     readonly root: "ScrollContainer__root";

package/cjs/components/ScrollContainer/ScrollContainer.js

@@ -13,6 +13,7 @@ var _rootNode = require("../../lib/rootNode");
 var _getDOMRect = require("../../lib/dom/getDOMRect");
 var _createPropsGetter = require("../../lib/createPropsGetter");
 var _currentEnvironment = require("../../lib/currentEnvironment");
+var _callChildRef = require("../../lib/callChildRef/callChildRef");
 
 var _ScrollContainer = require("./ScrollContainer.styles");
 var _ScrollContainer2 = require("./ScrollContainer.constants");
@@ -81,6 +82,7 @@ var _ScrollBar = require("./ScrollBar");var _class, _class2, _temp;
 
 
 
+
 
 
 var ScrollContainerDataTids = {
@@ -344,6 +346,10 @@ ScrollContainer = (0, _rootNode.rootNode)(_class = (_temp = _class2 = /*#__PURE_
         _this.inner.removeEventListener('wheel', _this.handleInnerScrollWheel);
       }
       _this.inner = element;
+
+      if (_this.props.scrollRef) {
+        (0, _callChildRef.callChildRef)(_this.props.scrollRef, element);
+      }
     };_this.
 
     handleNativeScroll = function (event) {var _this$scrollY, _this$scrollX;