@skbkontur/react-ui 4.25.1-MaskedInput-2nd.5 → 4.25.1-MaskedInput-2nd.6

package/cjs/components/MaskedInput/ColorableInputElement/ColorableInputElement.js

@@ -7,19 +7,13 @@ var _ThemeContext = require("../../../lib/theming/ThemeContext");
 var _forwardRefAndName = require("../../../lib/forwardRefAndName");
 var _Emotion = require("../../../lib/theming/Emotion");
 
-var _ColorableInputElement = require("./ColorableInputElement.styles");var _excluded = ["children", "onInput", "onFocus", "onBlur"];
+var _ColorableInputElement = require("./ColorableInputElement.styles");var _excluded = ["children", "onInput", "onFocus", "onBlur", "showOnFocus"];
 
 
 
 
 
 
-var dictionary = new Map();
-var paintText = function paintText(entries) {
-  entries.forEach(function (entry) {var _dictionary$get;return (_dictionary$get = dictionary.get(entry.target)) == null ? void 0 : _dictionary$get();});
-};
-var resizeObserver = _globalObject.globalObject.ResizeObserver ? new _globalObject.globalObject.ResizeObserver((0, _lodash.default)(paintText)) : null;
-
 // Возможно придётся включить.
 // Иногда, на тяжёлых страницах, текст рендерится итеративно.
 // Из-за этого могут оставаться артефакты при покраске компонента, которые пропадут только после фокуса.
@@ -36,7 +30,7 @@ function ColorableInputElement(props, ref) {
   var debouncedPaintText = (0, _react.useCallback)((0, _lodash.default)(paintText), []);
   var _useState = (0, _react.useState)(true),active = _useState[0],setActive = _useState[1];
 
-  var children = props.children,onInput = props.onInput,onFocus = props.onFocus,onBlur = props.onBlur,inputProps = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
+  var children = props.children,onInput = props.onInput,onFocus = props.onFocus,onBlur = props.onBlur,showOnFocus = props.showOnFocus,inputProps = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
 
   (0, _react.useImperativeHandle)(
   ref,
@@ -47,26 +41,12 @@ function ColorableInputElement(props, ref) {
   []);
 
 
-  (0, _react.useEffect)(function () {
-    updateActive();
-
-    if (inputRef.current) {
-      dictionary.set(inputRef.current, debouncedPaintText);
-      resizeObserver == null ? void 0 : resizeObserver.observe(inputRef.current);
-    }
-
-    return function () {
-      if (inputRef.current) {
-        dictionary.delete(inputRef.current);
-        resizeObserver == null ? void 0 : resizeObserver.unobserve(inputRef.current);
-      }
-    };
-  }, []);
+  (0, _react.useEffect)(updateActive, []);
 
   (0, _react.useEffect)(function () {
     activation(props);
     updateActive();
-  }, [active, props.showOnFocus, props.value, props.defaultValue, props.disabled, focused.current]);
+  }, [active, showOnFocus, props.value, props.defaultValue, props.disabled, focused.current]);
 
   (0, _react.useEffect)(function () {
     if (inputRef.current) {

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

@@ -1 +1 @@
-{"version":3,"sources":["ColorableInputElement.tsx"],"names":["dictionary","Map","paintText","entries","forEach","entry","get","target","resizeObserver","globalObject","ResizeObserver","ColorableInputElement","props","ref","inputRef","spanRef","focused","inputStyle","React","useRef","theme","ThemeContext","debouncedPaintText","active","setActive","children","onInput","onFocus","onBlur","inputProps","input","current","getRootNode","updateActive","set","observe","delete","unobserve","activation","showOnFocus","value","defaultValue","disabled","getComputedStyle","cloneElement","handleInput","handleFocus","handleBlur","className","globalClasses","visibility","position","whiteSpace","e","isActive","parentElement","querySelector","setTimeout","cancel","style","backgroundImage","classList","remove","_props","add","shadow","shadowRoot","typedValueElement","getElementById","attachShadow","mode","document","createElement","setAttribute","appendChild","textContent","getAttribute","inputRect","getBoundingClientRect","filledRect","threshold","width","degree","fontStyle","typedValueColor","inputTextColor","maskColor","inputPlaceholderColor","inputTextColorDisabled"],"mappings":"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","sourcesContent":["import React, { ForwardedRef, useContext, useEffect, useImperativeHandle, useRef, useCallback, useState } from 'react';\nimport { globalObject, isBrowser } from '@skbkontur/global-object';\nimport debounce from 'lodash.debounce';\n\nimport { ThemeContext } from '../../../lib/theming/ThemeContext';\nimport { InputElement, InputElementProps } from '../../Input';\nimport { forwardRefAndName } from '../../../lib/forwardRefAndName';\nimport { cx } from '../../../lib/theming/Emotion';\n\nimport { globalClasses } from './ColorableInputElement.styles';\n\nexport type ColorableInputElementProps = InputElementProps & {\n  showOnFocus?: boolean;\n  children: React.ReactElement;\n};\n\nconst dictionary = new Map<Element, () => void>();\nconst paintText: ResizeObserverCallback = (entries) => {\n  entries.forEach((entry) => dictionary.get(entry.target)?.());\n};\nconst resizeObserver = globalObject.ResizeObserver ? new globalObject.ResizeObserver(debounce(paintText)) : null;\n\n// Возможно придётся включить.\n// Иногда, на тяжёлых страницах, текст рендерится итеративно.\n// Из-за этого могут оставаться артефакты при покраске компонента, которые пропадут только после фокуса.\n// setInterval(() => window.requestAnimationFrame(() => dictionary.forEach((paint) => paint())), 1000);\n\nexport const ColorableInputElement = forwardRefAndName(\n  'ColorableInputElement',\n  function ColorableInputElement(props: ColorableInputElementProps, ref: ForwardedRef<InputElement>) {\n    const inputRef = useRef<HTMLInputElement | null>(null);\n    const spanRef = useRef<HTMLSpanElement | null>(null);\n    const focused = useRef(false);\n    const inputStyle = React.useRef<CSSStyleDeclaration>();\n    const theme = useContext(ThemeContext);\n    const debouncedPaintText = useCallback(debounce(paintText), []);\n    const [active, setActive] = useState(true);\n\n    const { children, onInput, onFocus, onBlur, ...inputProps } = props;\n\n    useImperativeHandle(\n      ref,\n      () => ({\n        input: inputRef.current,\n        getRootNode: () => inputRef.current,\n      }),\n      [],\n    );\n\n    useEffect(() => {\n      updateActive();\n\n      if (inputRef.current) {\n        dictionary.set(inputRef.current, debouncedPaintText);\n        resizeObserver?.observe(inputRef.current);\n      }\n\n      return () => {\n        if (inputRef.current) {\n          dictionary.delete(inputRef.current);\n          resizeObserver?.unobserve(inputRef.current);\n        }\n      };\n    }, []);\n\n    useEffect(() => {\n      activation(props);\n      updateActive();\n    }, [active, props.showOnFocus, props.value, props.defaultValue, props.disabled, focused.current]);\n\n    useEffect(() => {\n      if (inputRef.current) {\n        inputStyle.current = getComputedStyle(inputRef.current);\n      }\n    });\n\n    return (\n      <>\n        {React.cloneElement(children, {\n          ...inputProps,\n          onInput: handleInput,\n          onFocus: handleFocus,\n          onBlur: handleBlur,\n          inputRef,\n          className: cx(props.className, active && globalClasses.input),\n        })}\n        {active && <span style={{ visibility: 'hidden', position: 'absolute', whiteSpace: 'pre' }} ref={spanRef} />}\n      </>\n    );\n\n    function handleInput(e: React.ChangeEvent<HTMLInputElement>) {\n      const isActive = !inputRef.current?.parentElement?.querySelector(':placeholder-shown');\n      setActive(isActive);\n\n      activation(props);\n\n      onInput?.(e);\n    }\n\n    function handleFocus(e: React.FocusEvent<HTMLInputElement>) {\n      setTimeout(updateActive);\n\n      focused.current = true;\n\n      onFocus?.(e);\n    }\n\n    function handleBlur(e: React.FocusEvent<HTMLInputElement>) {\n      updateActive();\n\n      focused.current = false;\n\n      onBlur?.(e);\n    }\n\n    function updateActive() {\n      setTimeout(() => {\n        setActive(!inputRef.current?.parentElement?.querySelector(':placeholder-shown'));\n      });\n    }\n\n    function activation(props: ColorableInputElementProps) {\n      if (active) {\n        debouncedPaintText(props);\n      } else {\n        debouncedPaintText.cancel();\n        inputRef.current && (inputRef.current.style.backgroundImage = '');\n        inputRef.current?.classList.remove(globalClasses.input);\n      }\n    }\n\n    function paintText(_props: Partial<ColorableInputElementProps> = props) {\n      if (!spanRef.current || !inputRef.current || !inputStyle.current || !isBrowser(globalObject)) {\n        return;\n      }\n\n      inputRef.current?.classList.add(globalClasses.input);\n\n      let shadow = spanRef.current.shadowRoot;\n      let typedValueElement = shadow?.getElementById('span');\n\n      if (!typedValueElement) {\n        shadow = spanRef.current.attachShadow({ mode: 'open' });\n\n        typedValueElement = globalObject.document.createElement('span');\n        typedValueElement.setAttribute('id', 'span');\n\n        shadow.appendChild(typedValueElement);\n      }\n\n      const style = inputStyle.current;\n\n      typedValueElement.textContent = inputRef.current.getAttribute('data-typed-value') || '';\n\n      const inputRect = inputRef.current.getBoundingClientRect();\n      const filledRect = spanRef.current.getBoundingClientRect();\n\n      const threshold = filledRect.width / (inputRect.width / 100);\n      const degree = style.fontStyle === 'italic' ? 100 : 90;\n\n      let typedValueColor = theme.inputTextColor;\n      let maskColor = theme.inputPlaceholderColor;\n      if (_props.disabled) {\n        typedValueColor = theme.inputTextColorDisabled;\n        maskColor = theme.inputTextColorDisabled;\n      }\n      if (_props.showOnFocus) {\n        maskColor = focused.current ? maskColor : 'transparent';\n      }\n\n      inputRef.current.style.backgroundImage = `\n      linear-gradient(\n          ${degree}deg,\n          ${typedValueColor} ${threshold}%,\n          ${maskColor} ${threshold}%\n      )`;\n    }\n  },\n);\n"]}
+{"version":3,"sources":["ColorableInputElement.tsx"],"names":["ColorableInputElement","props","ref","inputRef","spanRef","focused","inputStyle","React","useRef","theme","ThemeContext","debouncedPaintText","paintText","active","setActive","children","onInput","onFocus","onBlur","showOnFocus","inputProps","input","current","getRootNode","updateActive","activation","value","defaultValue","disabled","getComputedStyle","cloneElement","handleInput","handleFocus","handleBlur","className","globalClasses","visibility","position","whiteSpace","e","isActive","parentElement","querySelector","setTimeout","cancel","style","backgroundImage","classList","remove","_props","globalObject","add","shadow","shadowRoot","typedValueElement","getElementById","attachShadow","mode","document","createElement","setAttribute","appendChild","textContent","getAttribute","inputRect","getBoundingClientRect","filledRect","threshold","width","degree","fontStyle","typedValueColor","inputTextColor","maskColor","inputPlaceholderColor","inputTextColorDisabled"],"mappings":"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","sourcesContent":["import React, { ForwardedRef, useContext, useEffect, useImperativeHandle, useRef, useCallback, useState } from 'react';\nimport { globalObject, isBrowser } from '@skbkontur/global-object';\nimport debounce from 'lodash.debounce';\n\nimport { ThemeContext } from '../../../lib/theming/ThemeContext';\nimport { InputElement, InputElementProps } from '../../Input';\nimport { forwardRefAndName } from '../../../lib/forwardRefAndName';\nimport { cx } from '../../../lib/theming/Emotion';\n\nimport { globalClasses } from './ColorableInputElement.styles';\n\nexport type ColorableInputElementProps = InputElementProps & {\n  showOnFocus?: boolean;\n  children: React.ReactElement;\n};\n\n// Возможно придётся включить.\n// Иногда, на тяжёлых страницах, текст рендерится итеративно.\n// Из-за этого могут оставаться артефакты при покраске компонента, которые пропадут только после фокуса.\n// setInterval(() => window.requestAnimationFrame(() => dictionary.forEach((paint) => paint())), 1000);\n\nexport const ColorableInputElement = forwardRefAndName(\n  'ColorableInputElement',\n  function ColorableInputElement(props: ColorableInputElementProps, ref: ForwardedRef<InputElement>) {\n    const inputRef = useRef<HTMLInputElement | null>(null);\n    const spanRef = useRef<HTMLSpanElement | null>(null);\n    const focused = useRef(false);\n    const inputStyle = React.useRef<CSSStyleDeclaration>();\n    const theme = useContext(ThemeContext);\n    const debouncedPaintText = useCallback(debounce(paintText), []);\n    const [active, setActive] = useState(true);\n\n    const { children, onInput, onFocus, onBlur, showOnFocus, ...inputProps } = props;\n\n    useImperativeHandle(\n      ref,\n      () => ({\n        input: inputRef.current,\n        getRootNode: () => inputRef.current,\n      }),\n      [],\n    );\n\n    useEffect(updateActive, []);\n\n    useEffect(() => {\n      activation(props);\n      updateActive();\n    }, [active, showOnFocus, props.value, props.defaultValue, props.disabled, focused.current]);\n\n    useEffect(() => {\n      if (inputRef.current) {\n        inputStyle.current = getComputedStyle(inputRef.current);\n      }\n    });\n\n    return (\n      <>\n        {React.cloneElement(children, {\n          ...inputProps,\n          onInput: handleInput,\n          onFocus: handleFocus,\n          onBlur: handleBlur,\n          inputRef,\n          className: cx(props.className, active && globalClasses.input),\n        })}\n        {active && <span style={{ visibility: 'hidden', position: 'absolute', whiteSpace: 'pre' }} ref={spanRef} />}\n      </>\n    );\n\n    function handleInput(e: React.ChangeEvent<HTMLInputElement>) {\n      const isActive = !inputRef.current?.parentElement?.querySelector(':placeholder-shown');\n      setActive(isActive);\n\n      activation(props);\n\n      onInput?.(e);\n    }\n\n    function handleFocus(e: React.FocusEvent<HTMLInputElement>) {\n      setTimeout(updateActive);\n\n      focused.current = true;\n\n      onFocus?.(e);\n    }\n\n    function handleBlur(e: React.FocusEvent<HTMLInputElement>) {\n      updateActive();\n\n      focused.current = false;\n\n      onBlur?.(e);\n    }\n\n    function updateActive() {\n      setTimeout(() => {\n        setActive(!inputRef.current?.parentElement?.querySelector(':placeholder-shown'));\n      });\n    }\n\n    function activation(props: ColorableInputElementProps) {\n      if (active) {\n        debouncedPaintText(props);\n      } else {\n        debouncedPaintText.cancel();\n        inputRef.current && (inputRef.current.style.backgroundImage = '');\n        inputRef.current?.classList.remove(globalClasses.input);\n      }\n    }\n\n    function paintText(_props: Partial<ColorableInputElementProps> = props) {\n      if (!spanRef.current || !inputRef.current || !inputStyle.current || !isBrowser(globalObject)) {\n        return;\n      }\n\n      inputRef.current?.classList.add(globalClasses.input);\n\n      let shadow = spanRef.current.shadowRoot;\n      let typedValueElement = shadow?.getElementById('span');\n\n      if (!typedValueElement) {\n        shadow = spanRef.current.attachShadow({ mode: 'open' });\n\n        typedValueElement = globalObject.document.createElement('span');\n        typedValueElement.setAttribute('id', 'span');\n\n        shadow.appendChild(typedValueElement);\n      }\n\n      const style = inputStyle.current;\n\n      typedValueElement.textContent = inputRef.current.getAttribute('data-typed-value') || '';\n\n      const inputRect = inputRef.current.getBoundingClientRect();\n      const filledRect = spanRef.current.getBoundingClientRect();\n\n      const threshold = filledRect.width / (inputRect.width / 100);\n      const degree = style.fontStyle === 'italic' ? 100 : 90;\n\n      let typedValueColor = theme.inputTextColor;\n      let maskColor = theme.inputPlaceholderColor;\n      if (_props.disabled) {\n        typedValueColor = theme.inputTextColorDisabled;\n        maskColor = theme.inputTextColorDisabled;\n      }\n      if (_props.showOnFocus) {\n        maskColor = focused.current ? maskColor : 'transparent';\n      }\n\n      inputRef.current.style.backgroundImage = `\n      linear-gradient(\n          ${degree}deg,\n          ${typedValueColor} ${threshold}%,\n          ${maskColor} ${threshold}%\n      )`;\n    }\n  },\n);\n"]}

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

@@ -4,5 +4,5 @@ var globalClasses = (0, _Emotion.prefix)('colorable')({
   input: 'input' });exports.globalClasses = globalClasses;
 
 
-(0, _Emotion.injectGlobal)(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2.default)(["\n  input.", " {\n    display: inline-block;\n    background-color: transparent;\n    background-size: 100%;\n    background-repeat: repeat;\n    background-clip: text;\n    -webkit-text-fill-color: transparent;\n\n    transition: background-color 1s;\n  }\n"])),
+(0, _Emotion.injectGlobal)(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2.default)(["\n  input.", " {\n    display: inline-block;\n    background-color: transparent;\n    background-size: 100%;\n    background-repeat: repeat;\n    background-clip: text;\n    -webkit-text-fill-color: transparent;\n  }\n"])),
 globalClasses.input);

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

@@ -1 +1 @@
-{"version":3,"sources":["ColorableInputElement.styles.ts"],"names":["globalClasses","input"],"mappings":"2RAAA,uD;;AAEO,IAAMA,aAAa,GAAG,qBAAO,WAAP,EAAoB;AAC/CC,EAAAA,KAAK,EAAE,OADwC,EAApB,CAAtB,C;;;AAIP;AACUD,aAAa,CAACC,KADxB","sourcesContent":["import { injectGlobal, prefix } from '../../../lib/theming/Emotion';\n\nexport const globalClasses = prefix('colorable')({\n  input: 'input',\n});\n\ninjectGlobal`\n  input.${globalClasses.input} {\n    display: inline-block;\n    background-color: transparent;\n    background-size: 100%;\n    background-repeat: repeat;\n    background-clip: text;\n    -webkit-text-fill-color: transparent;\n\n    transition: background-color 1s;\n  }\n`;\n"]}
+{"version":3,"sources":["ColorableInputElement.styles.ts"],"names":["globalClasses","input"],"mappings":"2RAAA,uD;;AAEO,IAAMA,aAAa,GAAG,qBAAO,WAAP,EAAoB;AAC/CC,EAAAA,KAAK,EAAE,OADwC,EAApB,CAAtB,C;;;AAIP;AACUD,aAAa,CAACC,KADxB","sourcesContent":["import { injectGlobal, prefix } from '../../../lib/theming/Emotion';\n\nexport const globalClasses = prefix('colorable')({\n  input: 'input',\n});\n\ninjectGlobal`\n  input.${globalClasses.input} {\n    display: inline-block;\n    background-color: transparent;\n    background-size: 100%;\n    background-repeat: repeat;\n    background-clip: text;\n    -webkit-text-fill-color: transparent;\n  }\n`;\n"]}

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

@@ -19,12 +19,12 @@ export interface MaskedProps {
      */
     formatChars?: Record<string, string>;
     /**
-     * Всегда показывать символы маски
+     * Показывать символы маски
      *
      * @see См. `imaskProps.lazy`
-     * @default false
+     * @default 'focus'
      */
-    alwaysShowMask?: boolean;
+    showMask?: 'always' | 'focus' | 'never';
     /**
      * Обработчик неправильного ввода.
      * Вторым агрументом будет передан метод вспыхивания акцентным цветом.

package/cjs/components/MaskedInput/MaskedInput.js

@@ -11,7 +11,7 @@ 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 = ["onAccept"],_excluded2 = ["mask", "maskChar", "formatChars", "alwaysShowMask", "imaskProps", "onValueChange", "onUnexpectedInput", "onChange", "element", "className"];
+var _FixedIMaskInput = require("./FixedIMaskInput");var _excluded = ["onAccept"],_excluded2 = ["mask", "maskChar", "formatChars", "showMask", "imaskProps", "onValueChange", "onUnexpectedInput", "onChange", "element", "className"];
 
 
 
@@ -82,7 +82,7 @@ function MaskedInput(props, ref) {
 
 
 
-  props.mask,maskChar = props.maskChar,formatChars = props.formatChars,alwaysShowMask = props.alwaysShowMask,_props$imaskProps = props.imaskProps;_props$imaskProps = _props$imaskProps === void 0 ? {} : _props$imaskProps;var onAccept = _props$imaskProps.onAccept,customIMaskProps = (0, _objectWithoutPropertiesLoose2.default)(_props$imaskProps, _excluded),onValueChange = props.onValueChange,onUnexpectedInput = props.onUnexpectedInput,onChange = props.onChange,element = props.element,className = props.className,inputProps = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded2);
+  props.mask,maskChar = props.maskChar,formatChars = props.formatChars,_props$showMask = props.showMask,showMask = _props$showMask === void 0 ? 'focus' : _props$showMask,_props$imaskProps = props.imaskProps;_props$imaskProps = _props$imaskProps === void 0 ? {} : _props$imaskProps;var onAccept = _props$imaskProps.onAccept,customIMaskProps = (0, _objectWithoutPropertiesLoose2.default)(_props$imaskProps, _excluded),onValueChange = props.onValueChange,onUnexpectedInput = props.onUnexpectedInput,onChange = props.onChange,element = props.element,className = props.className,inputProps = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded2);
 
   var inputRef = (0, _react.useRef)(null);
 
@@ -122,7 +122,7 @@ function MaskedInput(props, ref) {
       onKeyDown: handleKeyDown,
       className: (0, _Emotion.cx)(_MaskedInput.globalClasses.root, _UiFont.uiFontGlobalClasses.root, className),
       element: /*#__PURE__*/
-      _react.default.createElement(_ColorableInputElement.ColorableInputElement, { showOnFocus: !alwaysShowMask }, /*#__PURE__*/
+      _react.default.createElement(_ColorableInputElement.ColorableInputElement, { showOnFocus: false }, /*#__PURE__*/
       _react.default.createElement(_FixedIMaskInput.FixedIMaskInput, (0, _extends2.default)({}, imaskProps, { onAccept: handleAccept }))) })));
 
 
@@ -130,6 +130,8 @@ function MaskedInput(props, ref) {
 
 
   function getCompatibleIMaskProps() {
+    var showMaskPlaceholder = showMask === 'always' || showMask === 'focus' && focused;
+
     return (0, _extends2.default)({
       mask: mask.replace(/0/g, '{\\0}'),
       placeholderChar: (0, _MaskedInput2.getMaskChar)(maskChar),
@@ -137,7 +139,7 @@ function MaskedInput(props, ref) {
       // FIXME: Должно быть eager=true, но в imask ломается удаление по delete
       eager: 'append',
       overwrite: 'shift',
-      lazy: !alwaysShowMask && (props.disabled || !focused) },
+      lazy: !showMaskPlaceholder },
     customIMaskProps);
 
   }
@@ -195,18 +197,17 @@ function MaskedInput(props, ref) {
   }
 
   function handleKeyDown(e) {
-    var _e$currentTarget2 = e.currentTarget,value = _e$currentTarget2.value,selectionStart = _e$currentTarget2.selectionStart;
-
-    prevSelectionStart.current = selectionStart;
+    var _e$currentTarget2 = e.currentTarget,value = _e$currentTarget2.value,selectionStart = _e$currentTarget2.selectionStart,selectionEnd = _e$currentTarget2.selectionEnd;
 
     if (
-    (0, _identifiers.isKeyBackspace)(e) && prevSelectionStart.current === 0 ||
+    (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);
   }

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

@@ -1 +1 @@
-{"version":3,"sources":["MaskedInput.tsx"],"names":["MaskedInput","props","ref","mask","maskChar","formatChars","alwaysShowMask","imaskProps","onAccept","customIMaskProps","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","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   * @see См. `imaskProps.placeholderChar`\n   * @default _\n   */\n  maskChar?: Nullable<string>;\n  /**\n   * Словарь символов-регулярок для маски\n   *\n   * @see См. `imaskProps.definitions`\n   * @default { '9': '[0-9]', 'a': '[A-Za-z]', '*': '[A-Za-z0-9]' }\n   */\n  formatChars?: Record<string, string>;\n  /**\n   * Всегда показывать символы маски\n   *\n   * @see См. `imaskProps.lazy`\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   * Пропы для компонента `IMaskInput`\n   *\n   * @see https://imask.js.org/guide.html\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,\n      imaskProps: { onAccept, ...customIMaskProps } = {},\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          <ColorableInputElement showOnFocus={!alwaysShowMask}>\n            <FixedIMaskInput {...imaskProps} onAccept={handleAccept} />\n          </ColorableInputElement>\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        ...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      onAccept?.(...args);\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 } = e.currentTarget;\n\n      prevSelectionStart.current = selectionStart;\n\n      if (\n        (isKeyBackspace(e) && prevSelectionStart.current === 0) ||\n        (isKeyDelete(e) && prevSelectionStart.current === value.length)\n      ) {\n        // Случаи, когда нажатие клавиш не тригерит `onInput`\n        handleUnexpectedInput(value);\n        prevValue.current = e.currentTarget.value;\n      }\n\n      props.onKeyDown?.(e);\n    }\n  },\n);\n"]}
+{"version":3,"sources":["MaskedInput.tsx"],"names":["MaskedInput","props","ref","mask","maskChar","formatChars","showMask","imaskProps","onAccept","customIMaskProps","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","showMaskPlaceholder","replace","placeholderChar","definitions","eager","overwrite","lazy","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   * @see См. `imaskProps.placeholderChar`\n   * @default _\n   */\n  maskChar?: Nullable<string>;\n  /**\n   * Словарь символов-регулярок для маски\n   *\n   * @see См. `imaskProps.definitions`\n   * @default { '9': '[0-9]', 'a': '[A-Za-z]', '*': '[A-Za-z0-9]' }\n   */\n  formatChars?: Record<string, string>;\n  /**\n   * Показывать символы маски\n   *\n   * @see См. `imaskProps.lazy`\n   * @default 'focus'\n   */\n  showMask?: 'always' | 'focus' | 'never';\n  /**\n   * Обработчик неправильного ввода.\n   * Вторым агрументом будет передан метод вспыхивания акцентным цветом.\n   *\n   * Если обработчик не задан, то инпут вспыхивает по-умолчанию.\n   *\n   * @param value значение инпута.\n   * @param blink вспыхнуть акцентным цвтетом.\n   */\n  onUnexpectedInput?: (value: string, blink: () => void) => void;\n  /**\n   * Пропы для компонента `IMaskInput`\n   *\n   * @see https://imask.js.org/guide.html\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      showMask = 'focus',\n      imaskProps: { onAccept, ...customIMaskProps } = {},\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          <ColorableInputElement showOnFocus={false}>\n            <FixedIMaskInput {...imaskProps} onAccept={handleAccept} />\n          </ColorableInputElement>\n        }\n      />\n    );\n\n    function getCompatibleIMaskProps(): IMaskInputProps<HTMLInputElement> {\n      const showMaskPlaceholder = showMask === 'always' || (showMask === 'focus' && focused);\n\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: !showMaskPlaceholder,\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      onAccept?.(...args);\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,73 +1,50 @@
 #### `mask`
 
-Маска телефона
+Паттерн ввода. Пример с номером телефона.
 
 ```jsx harmony
-import { Input, Checkbox } from '@skbkontur/react-ui';
-
-const [value, setValue] = React.useState('123');
-const [alwaysShowMask, setAlwaysShowMask] = React.useState(false);
-
-const listeners = {
-  ...[
-    'onKeyPress',
-    'onKeyDown',
-    'onFocus',
-    'onBlur',
-    'onInput',
-    'onChange',
-    'onCut',
-  ].reduce((list, item) => ({ ...list, [item]: (e) => console.log(item, e) }), {})
-};
+const [value, setValue] = React.useState('');
 
-listeners.onValueChange = (v) => {
-  console.log('onValue', v);
-  setValue(v);
-};
-listeners.onUnexpectedInput = (v, blink) => {
-  console.log('onUnexpectedInput', v);
-  blink();
-};
+<MaskedInput
+  mask="+7 (999) 999-99-99"
+  placeholder="Номер телефона"
+  value={value}
+  onValueChange={setValue}
+/>
+```
+
+#### `showMask`
 
+Способ отображения маски.
+
+```jsx harmony
 <>
-  <Checkbox checked={alwaysShowMask} onValueChange={setAlwaysShowMask} />
-  <MaskedInput
-    mask="9-9-9-9"
-    // placeholder="123"
-    alwaysShowMask={alwaysShowMask}
-    // alwaysShowMask
-    // defaultValue="321"
-    // {...listeners}
-  />
-  <MaskedInput
-    mask="+7 999-999-99-99"
-    alwaysShowMask={alwaysShowMask}
-    //value={value}
-    {...listeners}
-  />
-  <Input
-    mask="+7 999-999-99-99"
-    alwaysShowMask
-    value={value}
-    {...listeners}
-  />
-  <Input
-    value={value}
-    {...listeners}
-  />
+  <code>always</code>
+  <br />
+  <MaskedInput mask="+7 (999) 999-99-99" showMask="always" placeholder="Номер телефона" />
+  <br />
+  <br />
+  <code>focus</code>
+  <br />
+  <MaskedInput mask="+7 (999) 999-99-99" showMask="focus" placeholder="Номер телефона" />
+  <br />
+  <br />
+  <code>never</code>
+  <br />
+  <MaskedInput mask="+7 (999) 999-99-99" showMask="never" placeholder="Номер телефона" />
 </>
 ```
 
 #### `maskChar`
 
-может изменить символ значения с маской
+Символом маски может быть любой символ.
 
 ```jsx harmony
 <MaskedInput
   mask="9999 9999 9999 9999"
   maskChar="X"
   placeholder="Номер карты"
-  alwaysShowMask
+  showMask="always"
 />
 ```
 
@@ -82,7 +59,7 @@ const [value, setValue] = React.useState('');
 
 <MaskedInput
   mask="Hh:Mm:Ss"
-  alwaysShowMask
+  showMask="always"
   formatChars={{
     H: '[0-2]',
     h: value.startsWith('2') ? '[0-3]' : '[0-9]',
@@ -96,16 +73,6 @@ const [value, setValue] = React.useState('');
 />
 ```
 
-#### `alwaysShowMask`
-
-Показывает маску всегда. Placeholder в этом случае игнорируется. Логика немного отличается от старой реализации, из-за
-специфики iMask. Раньше маска обязательно появлялась при фокусе, но теперь чтобы маску было видно надо явно задать этот
-проп.
-
-```jsx harmony
-<MaskedInput mask="+7 (999) 999-99-99" alwaysShowMask placeholder="Номер телефона" />
-```
-
 #### `imaskProps`*
 
 Переопределяет пропы iMask.
@@ -121,18 +88,18 @@ const [value, setValue] = React.useState('');
 Конвертация пропов выглядит примерно так:
 
 ```typescript static
-mask: mask.replace(/0/g, '{\\0}'),
+mask:            mask.replace(/0/g, '{\\0}'),
 placeholderChar: props.maskChar || '_',
-definitions: props.formatChars || { '9': /[0-9]/, a: /[A-Za-z]/, '*': /[A-Za-z0-9]/ },
-eager: true,
-overwrite: 'shift',
-lazy: !alwaysShowMask,
+definitions:     props.formatChars || { '9': /[0-9]/, a: /[A-Za-z]/, '*': /[A-Za-z0-9]/ },
+eager:           'append',
+overwrite:       'shift',
+lazy:            !(showMask === 'always' || (showMask === 'focus' && focused)),
 ...props.imaskProps,
 ```
 
 ---
 
-##### `imaskProps.unmask`
+#### `imaskProps.unmask`
 
 Можно сразу получать value без фиксированных символов маски
 
@@ -147,66 +114,66 @@ const [value, setValue] = React.useState('');
     imaskProps={{
       unmask: true
     }}
-    alwaysShowMask
+    showMask="always"
     value={value}
     onValueChange={setValue}
   />
 </>
 ```
 
-##### `imaskProps.mask []`
+#### `imaskProps.mask []`
 
-Опциональные части маски
+Опциональные части маски.
 
 ```jsx harmony
+import { Checkbox } from '@skbkontur/react-ui';
+
 const [value, setValue] = React.useState('');
 const [complete, setComplete] = React.useState(false);
 
 
 <MaskedInput
   mask="99-999999[99]-99"
-  alwaysShowMask
-  rightIcon={complete ? '✅' : '⬜'}
+  showMask="never"
+  placeholder="ИНН"
+  rightIcon={<Checkbox checked={complete} style={{ pointerEvents: 'none' }} />}
+  onValueChange={setValue}
   imaskProps={{
-    onAccept: (v, imask) => {
-      setValue(v);
-      setComplete(imask.masked.isComplete);
-    }
+    onAccept: (_, imask) => setComplete(imask.masked.isComplete)
   }}
 />
 ```
 
-##### `imaskProps.mask {}`
+#### `imaskProps.mask {}`
 
 Фиксированные части маски, которые попадут в `value` при `unmask = true`. Любой невалидный символ (например`пробел`)
-переведёт каретку за фиксированный символ.
+перекинет каретку за фиксированный символ.
 
 ```jsx harmony
+import { Checkbox } from '@skbkontur/react-ui';
+
 const [value, setValue] = React.useState('');
 const [complete, setComplete] = React.useState(false);
 
-
 <>
   <span>unmask value: {value}</span>
   <br />
   <MaskedInput
     mask="aa[aaaaaaaaaaaaaaaaa]{@}aa[aaaaaaaaaaaaaaaaa]{\.}aa[aaaa]"
-    alwaysShowMask
-    rightIcon={complete ? '✅' : '⬜'}
+    showMask="always"
+    rightIcon={<Checkbox checked={complete} style={{ pointerEvents: 'none' }} />}
+    onValueChange={setValue}
     imaskProps={{
       unmask: true,
-      onAccept: (v, imask) => {
-        setValue(v);
-        setComplete(imask.masked.isComplete);
-      }
+      onAccept: (_, imask) => setComplete(imask.masked.isComplete)
     }}
   />
 </>
 ```
 
-##### `imaskProps.blocks`
+#### `imaskProps.blocks`
 
-Пример маски времени. Нажмите цифру `6`, чтобы сработало автозаполнение.
+Пример маски времени с автозаполнением.
 
 ```jsx harmony
 import IMask from 'imask';
@@ -226,6 +193,6 @@ const block = {
       SS: { ...block, to: 59, },
     }
   }}
-  alwaysShowMask
+  showMask="always"
 />
 ```

package/components/MaskedInput/ColorableInputElement/ColorableInputElement/ColorableInputElement.js

@@ -1,24 +1,13 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-var _excluded = ["children", "onInput", "onFocus", "onBlur"];
+var _excluded = ["children", "onInput", "onFocus", "onBlur", "showOnFocus"];
 import React, { useContext, useEffect, useImperativeHandle, useRef, useCallback, useState } from 'react';
 import { globalObject, isBrowser } from '@skbkontur/global-object';
 import debounce from 'lodash.debounce';
 import { ThemeContext } from "../../../../lib/theming/ThemeContext";
 import { forwardRefAndName } from "../../../../lib/forwardRefAndName";
 import { cx } from "../../../../lib/theming/Emotion";
-import { globalClasses } from "../ColorableInputElement.styles";
-var dictionary = new Map();
-
-var paintText = function paintText(entries) {
-  entries.forEach(function (entry) {
-    var _dictionary$get;
-
-    return (_dictionary$get = dictionary.get(entry.target)) == null ? void 0 : _dictionary$get();
-  });
-};
-
-var resizeObserver = globalObject.ResizeObserver ? new globalObject.ResizeObserver(debounce(paintText)) : null; // Возможно придётся включить.
+import { globalClasses } from "../ColorableInputElement.styles"; // Возможно придётся включить.
 // Иногда, на тяжёлых страницах, текст рендерится итеративно.
 // Из-за этого могут оставаться артефакты при покраске компонента, которые пропадут только после фокуса.
 // setInterval(() => window.requestAnimationFrame(() => dictionary.forEach((paint) => paint())), 1000);
@@ -39,6 +28,7 @@ export var ColorableInputElement = forwardRefAndName('ColorableInputElement', fu
       onInput = props.onInput,
       onFocus = props.onFocus,
       onBlur = props.onBlur,
+      showOnFocus = props.showOnFocus,
       inputProps = _objectWithoutPropertiesLoose(props, _excluded);
 
   useImperativeHandle(ref, function () {
@@ -49,25 +39,11 @@ export var ColorableInputElement = forwardRefAndName('ColorableInputElement', fu
       }
     };
   }, []);
-  useEffect(function () {
-    updateActive();
-
-    if (inputRef.current) {
-      dictionary.set(inputRef.current, debouncedPaintText);
-      resizeObserver == null ? void 0 : resizeObserver.observe(inputRef.current);
-    }
-
-    return function () {
-      if (inputRef.current) {
-        dictionary["delete"](inputRef.current);
-        resizeObserver == null ? void 0 : resizeObserver.unobserve(inputRef.current);
-      }
-    };
-  }, []);
+  useEffect(updateActive, []);
   useEffect(function () {
     activation(props);
     updateActive();
-  }, [active, props.showOnFocus, props.value, props.defaultValue, props.disabled, focused.current]);
+  }, [active, showOnFocus, props.value, props.defaultValue, props.disabled, focused.current]);
   useEffect(function () {
     if (inputRef.current) {
       inputStyle.current = getComputedStyle(inputRef.current);

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

@@ -1 +1 @@
-{"version":3,"sources":["ColorableInputElement.tsx"],"names":["React","useContext","useEffect","useImperativeHandle","useRef","useCallback","useState","globalObject","isBrowser","debounce","ThemeContext","forwardRefAndName","cx","globalClasses","dictionary","Map","paintText","entries","forEach","entry","get","target","resizeObserver","ResizeObserver","ColorableInputElement","props","ref","inputRef","spanRef","focused","inputStyle","theme","debouncedPaintText","active","setActive","children","onInput","onFocus","onBlur","inputProps","input","current","getRootNode","updateActive","set","observe","unobserve","activation","showOnFocus","value","defaultValue","disabled","getComputedStyle","cloneElement","handleInput","handleFocus","handleBlur","className","visibility","position","whiteSpace","e","isActive","parentElement","querySelector","setTimeout","cancel","style","backgroundImage","classList","remove","_props","add","shadow","shadowRoot","typedValueElement","getElementById","attachShadow","mode","document","createElement","setAttribute","appendChild","textContent","getAttribute","inputRect","getBoundingClientRect","filledRect","threshold","width","degree","fontStyle","typedValueColor","inputTextColor","maskColor","inputPlaceholderColor","inputTextColorDisabled"],"mappings":"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","sourcesContent":["import React, { ForwardedRef, useContext, useEffect, useImperativeHandle, useRef, useCallback, useState } from 'react';\nimport { globalObject, isBrowser } from '@skbkontur/global-object';\nimport debounce from 'lodash.debounce';\n\nimport { ThemeContext } from '../../../lib/theming/ThemeContext';\nimport { InputElement, InputElementProps } from '../../Input';\nimport { forwardRefAndName } from '../../../lib/forwardRefAndName';\nimport { cx } from '../../../lib/theming/Emotion';\n\nimport { globalClasses } from './ColorableInputElement.styles';\n\nexport type ColorableInputElementProps = InputElementProps & {\n  showOnFocus?: boolean;\n  children: React.ReactElement;\n};\n\nconst dictionary = new Map<Element, () => void>();\nconst paintText: ResizeObserverCallback = (entries) => {\n  entries.forEach((entry) => dictionary.get(entry.target)?.());\n};\nconst resizeObserver = globalObject.ResizeObserver ? new globalObject.ResizeObserver(debounce(paintText)) : null;\n\n// Возможно придётся включить.\n// Иногда, на тяжёлых страницах, текст рендерится итеративно.\n// Из-за этого могут оставаться артефакты при покраске компонента, которые пропадут только после фокуса.\n// setInterval(() => window.requestAnimationFrame(() => dictionary.forEach((paint) => paint())), 1000);\n\nexport const ColorableInputElement = forwardRefAndName(\n  'ColorableInputElement',\n  function ColorableInputElement(props: ColorableInputElementProps, ref: ForwardedRef<InputElement>) {\n    const inputRef = useRef<HTMLInputElement | null>(null);\n    const spanRef = useRef<HTMLSpanElement | null>(null);\n    const focused = useRef(false);\n    const inputStyle = React.useRef<CSSStyleDeclaration>();\n    const theme = useContext(ThemeContext);\n    const debouncedPaintText = useCallback(debounce(paintText), []);\n    const [active, setActive] = useState(true);\n\n    const { children, onInput, onFocus, onBlur, ...inputProps } = props;\n\n    useImperativeHandle(\n      ref,\n      () => ({\n        input: inputRef.current,\n        getRootNode: () => inputRef.current,\n      }),\n      [],\n    );\n\n    useEffect(() => {\n      updateActive();\n\n      if (inputRef.current) {\n        dictionary.set(inputRef.current, debouncedPaintText);\n        resizeObserver?.observe(inputRef.current);\n      }\n\n      return () => {\n        if (inputRef.current) {\n          dictionary.delete(inputRef.current);\n          resizeObserver?.unobserve(inputRef.current);\n        }\n      };\n    }, []);\n\n    useEffect(() => {\n      activation(props);\n      updateActive();\n    }, [active, props.showOnFocus, props.value, props.defaultValue, props.disabled, focused.current]);\n\n    useEffect(() => {\n      if (inputRef.current) {\n        inputStyle.current = getComputedStyle(inputRef.current);\n      }\n    });\n\n    return (\n      <>\n        {React.cloneElement(children, {\n          ...inputProps,\n          onInput: handleInput,\n          onFocus: handleFocus,\n          onBlur: handleBlur,\n          inputRef,\n          className: cx(props.className, active && globalClasses.input),\n        })}\n        {active && <span style={{ visibility: 'hidden', position: 'absolute', whiteSpace: 'pre' }} ref={spanRef} />}\n      </>\n    );\n\n    function handleInput(e: React.ChangeEvent<HTMLInputElement>) {\n      const isActive = !inputRef.current?.parentElement?.querySelector(':placeholder-shown');\n      setActive(isActive);\n\n      activation(props);\n\n      onInput?.(e);\n    }\n\n    function handleFocus(e: React.FocusEvent<HTMLInputElement>) {\n      setTimeout(updateActive);\n\n      focused.current = true;\n\n      onFocus?.(e);\n    }\n\n    function handleBlur(e: React.FocusEvent<HTMLInputElement>) {\n      updateActive();\n\n      focused.current = false;\n\n      onBlur?.(e);\n    }\n\n    function updateActive() {\n      setTimeout(() => {\n        setActive(!inputRef.current?.parentElement?.querySelector(':placeholder-shown'));\n      });\n    }\n\n    function activation(props: ColorableInputElementProps) {\n      if (active) {\n        debouncedPaintText(props);\n      } else {\n        debouncedPaintText.cancel();\n        inputRef.current && (inputRef.current.style.backgroundImage = '');\n        inputRef.current?.classList.remove(globalClasses.input);\n      }\n    }\n\n    function paintText(_props: Partial<ColorableInputElementProps> = props) {\n      if (!spanRef.current || !inputRef.current || !inputStyle.current || !isBrowser(globalObject)) {\n        return;\n      }\n\n      inputRef.current?.classList.add(globalClasses.input);\n\n      let shadow = spanRef.current.shadowRoot;\n      let typedValueElement = shadow?.getElementById('span');\n\n      if (!typedValueElement) {\n        shadow = spanRef.current.attachShadow({ mode: 'open' });\n\n        typedValueElement = globalObject.document.createElement('span');\n        typedValueElement.setAttribute('id', 'span');\n\n        shadow.appendChild(typedValueElement);\n      }\n\n      const style = inputStyle.current;\n\n      typedValueElement.textContent = inputRef.current.getAttribute('data-typed-value') || '';\n\n      const inputRect = inputRef.current.getBoundingClientRect();\n      const filledRect = spanRef.current.getBoundingClientRect();\n\n      const threshold = filledRect.width / (inputRect.width / 100);\n      const degree = style.fontStyle === 'italic' ? 100 : 90;\n\n      let typedValueColor = theme.inputTextColor;\n      let maskColor = theme.inputPlaceholderColor;\n      if (_props.disabled) {\n        typedValueColor = theme.inputTextColorDisabled;\n        maskColor = theme.inputTextColorDisabled;\n      }\n      if (_props.showOnFocus) {\n        maskColor = focused.current ? maskColor : 'transparent';\n      }\n\n      inputRef.current.style.backgroundImage = `\n      linear-gradient(\n          ${degree}deg,\n          ${typedValueColor} ${threshold}%,\n          ${maskColor} ${threshold}%\n      )`;\n    }\n  },\n);\n"]}
+{"version":3,"sources":["ColorableInputElement.tsx"],"names":["React","useContext","useEffect","useImperativeHandle","useRef","useCallback","useState","globalObject","isBrowser","debounce","ThemeContext","forwardRefAndName","cx","globalClasses","ColorableInputElement","props","ref","inputRef","spanRef","focused","inputStyle","theme","debouncedPaintText","paintText","active","setActive","children","onInput","onFocus","onBlur","showOnFocus","inputProps","input","current","getRootNode","updateActive","activation","value","defaultValue","disabled","getComputedStyle","cloneElement","handleInput","handleFocus","handleBlur","className","visibility","position","whiteSpace","e","isActive","parentElement","querySelector","setTimeout","cancel","style","backgroundImage","classList","remove","_props","add","shadow","shadowRoot","typedValueElement","getElementById","attachShadow","mode","document","createElement","setAttribute","appendChild","textContent","getAttribute","inputRect","getBoundingClientRect","filledRect","threshold","width","degree","fontStyle","typedValueColor","inputTextColor","maskColor","inputPlaceholderColor","inputTextColorDisabled"],"mappings":"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","sourcesContent":["import React, { ForwardedRef, useContext, useEffect, useImperativeHandle, useRef, useCallback, useState } from 'react';\nimport { globalObject, isBrowser } from '@skbkontur/global-object';\nimport debounce from 'lodash.debounce';\n\nimport { ThemeContext } from '../../../lib/theming/ThemeContext';\nimport { InputElement, InputElementProps } from '../../Input';\nimport { forwardRefAndName } from '../../../lib/forwardRefAndName';\nimport { cx } from '../../../lib/theming/Emotion';\n\nimport { globalClasses } from './ColorableInputElement.styles';\n\nexport type ColorableInputElementProps = InputElementProps & {\n  showOnFocus?: boolean;\n  children: React.ReactElement;\n};\n\n// Возможно придётся включить.\n// Иногда, на тяжёлых страницах, текст рендерится итеративно.\n// Из-за этого могут оставаться артефакты при покраске компонента, которые пропадут только после фокуса.\n// setInterval(() => window.requestAnimationFrame(() => dictionary.forEach((paint) => paint())), 1000);\n\nexport const ColorableInputElement = forwardRefAndName(\n  'ColorableInputElement',\n  function ColorableInputElement(props: ColorableInputElementProps, ref: ForwardedRef<InputElement>) {\n    const inputRef = useRef<HTMLInputElement | null>(null);\n    const spanRef = useRef<HTMLSpanElement | null>(null);\n    const focused = useRef(false);\n    const inputStyle = React.useRef<CSSStyleDeclaration>();\n    const theme = useContext(ThemeContext);\n    const debouncedPaintText = useCallback(debounce(paintText), []);\n    const [active, setActive] = useState(true);\n\n    const { children, onInput, onFocus, onBlur, showOnFocus, ...inputProps } = props;\n\n    useImperativeHandle(\n      ref,\n      () => ({\n        input: inputRef.current,\n        getRootNode: () => inputRef.current,\n      }),\n      [],\n    );\n\n    useEffect(updateActive, []);\n\n    useEffect(() => {\n      activation(props);\n      updateActive();\n    }, [active, showOnFocus, props.value, props.defaultValue, props.disabled, focused.current]);\n\n    useEffect(() => {\n      if (inputRef.current) {\n        inputStyle.current = getComputedStyle(inputRef.current);\n      }\n    });\n\n    return (\n      <>\n        {React.cloneElement(children, {\n          ...inputProps,\n          onInput: handleInput,\n          onFocus: handleFocus,\n          onBlur: handleBlur,\n          inputRef,\n          className: cx(props.className, active && globalClasses.input),\n        })}\n        {active && <span style={{ visibility: 'hidden', position: 'absolute', whiteSpace: 'pre' }} ref={spanRef} />}\n      </>\n    );\n\n    function handleInput(e: React.ChangeEvent<HTMLInputElement>) {\n      const isActive = !inputRef.current?.parentElement?.querySelector(':placeholder-shown');\n      setActive(isActive);\n\n      activation(props);\n\n      onInput?.(e);\n    }\n\n    function handleFocus(e: React.FocusEvent<HTMLInputElement>) {\n      setTimeout(updateActive);\n\n      focused.current = true;\n\n      onFocus?.(e);\n    }\n\n    function handleBlur(e: React.FocusEvent<HTMLInputElement>) {\n      updateActive();\n\n      focused.current = false;\n\n      onBlur?.(e);\n    }\n\n    function updateActive() {\n      setTimeout(() => {\n        setActive(!inputRef.current?.parentElement?.querySelector(':placeholder-shown'));\n      });\n    }\n\n    function activation(props: ColorableInputElementProps) {\n      if (active) {\n        debouncedPaintText(props);\n      } else {\n        debouncedPaintText.cancel();\n        inputRef.current && (inputRef.current.style.backgroundImage = '');\n        inputRef.current?.classList.remove(globalClasses.input);\n      }\n    }\n\n    function paintText(_props: Partial<ColorableInputElementProps> = props) {\n      if (!spanRef.current || !inputRef.current || !inputStyle.current || !isBrowser(globalObject)) {\n        return;\n      }\n\n      inputRef.current?.classList.add(globalClasses.input);\n\n      let shadow = spanRef.current.shadowRoot;\n      let typedValueElement = shadow?.getElementById('span');\n\n      if (!typedValueElement) {\n        shadow = spanRef.current.attachShadow({ mode: 'open' });\n\n        typedValueElement = globalObject.document.createElement('span');\n        typedValueElement.setAttribute('id', 'span');\n\n        shadow.appendChild(typedValueElement);\n      }\n\n      const style = inputStyle.current;\n\n      typedValueElement.textContent = inputRef.current.getAttribute('data-typed-value') || '';\n\n      const inputRect = inputRef.current.getBoundingClientRect();\n      const filledRect = spanRef.current.getBoundingClientRect();\n\n      const threshold = filledRect.width / (inputRect.width / 100);\n      const degree = style.fontStyle === 'italic' ? 100 : 90;\n\n      let typedValueColor = theme.inputTextColor;\n      let maskColor = theme.inputPlaceholderColor;\n      if (_props.disabled) {\n        typedValueColor = theme.inputTextColorDisabled;\n        maskColor = theme.inputTextColorDisabled;\n      }\n      if (_props.showOnFocus) {\n        maskColor = focused.current ? maskColor : 'transparent';\n      }\n\n      inputRef.current.style.backgroundImage = `\n      linear-gradient(\n          ${degree}deg,\n          ${typedValueColor} ${threshold}%,\n          ${maskColor} ${threshold}%\n      )`;\n    }\n  },\n);\n"]}

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

@@ -6,4 +6,4 @@ import { injectGlobal, prefix } from "../../../../lib/theming/Emotion";
 export var globalClasses = prefix('colorable')({
   input: 'input'
 });
-injectGlobal(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n  input.", " {\n    display: inline-block;\n    background-color: transparent;\n    background-size: 100%;\n    background-repeat: repeat;\n    background-clip: text;\n    -webkit-text-fill-color: transparent;\n\n    transition: background-color 1s;\n  }\n"])), globalClasses.input);
+injectGlobal(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n  input.", " {\n    display: inline-block;\n    background-color: transparent;\n    background-size: 100%;\n    background-repeat: repeat;\n    background-clip: text;\n    -webkit-text-fill-color: transparent;\n  }\n"])), globalClasses.input);

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

@@ -1 +1 @@
-{"version":3,"sources":["ColorableInputElement.styles.ts"],"names":["injectGlobal","prefix","globalClasses","input"],"mappings":"oHAAA,SAASA,YAAT,EAAuBC,MAAvB,QAAqC,8BAArC;;AAEA,OAAO,IAAMC,aAAa,GAAGD,MAAM,CAAC,WAAD,CAAN,CAAoB;AAC/CE,EAAAA,KAAK,EAAE,OADwC,EAApB,CAAtB;;;AAIPH,YAAY;AACFE,aAAa,CAACC,KADZ,CAAZ","sourcesContent":["import { injectGlobal, prefix } from '../../../lib/theming/Emotion';\n\nexport const globalClasses = prefix('colorable')({\n  input: 'input',\n});\n\ninjectGlobal`\n  input.${globalClasses.input} {\n    display: inline-block;\n    background-color: transparent;\n    background-size: 100%;\n    background-repeat: repeat;\n    background-clip: text;\n    -webkit-text-fill-color: transparent;\n\n    transition: background-color 1s;\n  }\n`;\n"]}
+{"version":3,"sources":["ColorableInputElement.styles.ts"],"names":["injectGlobal","prefix","globalClasses","input"],"mappings":"oHAAA,SAASA,YAAT,EAAuBC,MAAvB,QAAqC,8BAArC;;AAEA,OAAO,IAAMC,aAAa,GAAGD,MAAM,CAAC,WAAD,CAAN,CAAoB;AAC/CE,EAAAA,KAAK,EAAE,OADwC,EAApB,CAAtB;;;AAIPH,YAAY;AACFE,aAAa,CAACC,KADZ,CAAZ","sourcesContent":["import { injectGlobal, prefix } from '../../../lib/theming/Emotion';\n\nexport const globalClasses = prefix('colorable')({\n  input: 'input',\n});\n\ninjectGlobal`\n  input.${globalClasses.input} {\n    display: inline-block;\n    background-color: transparent;\n    background-size: 100%;\n    background-repeat: repeat;\n    background-clip: text;\n    -webkit-text-fill-color: transparent;\n  }\n`;\n"]}

package/components/MaskedInput/MaskedInput/MaskedInput.js

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 var _excluded = ["onAccept"],
-    _excluded2 = ["mask", "maskChar", "formatChars", "alwaysShowMask", "imaskProps", "onValueChange", "onUnexpectedInput", "onChange", "element", "className"];
+    _excluded2 = ["mask", "maskChar", "formatChars", "showMask", "imaskProps", "onValueChange", "onUnexpectedInput", "onChange", "element", "className"];
 import React, { useImperativeHandle, useRef, useState, useEffect } from 'react';
 import { forwardRefAndName } from "../../../lib/forwardRefAndName";
 import { cx } from "../../../lib/theming/Emotion";
@@ -21,7 +21,8 @@ export var MaskedInput = forwardRefAndName('MaskedInput', function MaskedInput(p
   var mask = props.mask,
       maskChar = props.maskChar,
       formatChars = props.formatChars,
-      alwaysShowMask = props.alwaysShowMask,
+      _props$showMask = props.showMask,
+      showMask = _props$showMask === void 0 ? 'focus' : _props$showMask,
       _props$imaskProps = props.imaskProps;
   _props$imaskProps = _props$imaskProps === void 0 ? {} : _props$imaskProps;
 
@@ -68,13 +69,14 @@ export var MaskedInput = forwardRefAndName('MaskedInput', function MaskedInput(p
     onKeyDown: handleKeyDown,
     className: cx(globalClasses.root, uiFontGlobalClasses.root, className),
     element: /*#__PURE__*/React.createElement(ColorableInputElement, {
-      showOnFocus: !alwaysShowMask
+      showOnFocus: false
     }, /*#__PURE__*/React.createElement(FixedIMaskInput, _extends({}, imaskProps, {
       onAccept: handleAccept
     })))
   }));
 
   function getCompatibleIMaskProps() {
+    var showMaskPlaceholder = showMask === 'always' || showMask === 'focus' && focused;
     return _extends({
       mask: mask.replace(/0/g, '{\\0}'),
       placeholderChar: getMaskChar(maskChar),
@@ -82,7 +84,7 @@ export var MaskedInput = forwardRefAndName('MaskedInput', function MaskedInput(p
       // FIXME: Должно быть eager=true, но в imask ломается удаление по delete
       eager: 'append',
       overwrite: 'shift',
-      lazy: !alwaysShowMask && (props.disabled || !focused)
+      lazy: !showMaskPlaceholder
     }, customIMaskProps);
   }
 
@@ -152,15 +154,16 @@ export var MaskedInput = forwardRefAndName('MaskedInput', function MaskedInput(p
   function handleKeyDown(e) {
     var _e$currentTarget2 = e.currentTarget,
         value = _e$currentTarget2.value,
-        selectionStart = _e$currentTarget2.selectionStart;
-    prevSelectionStart.current = selectionStart;
+        selectionStart = _e$currentTarget2.selectionStart,
+        selectionEnd = _e$currentTarget2.selectionEnd;
 
-    if (isKeyBackspace(e) && prevSelectionStart.current === 0 || isKeyDelete(e) && prevSelectionStart.current === value.length) {
+    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","useEffect","forwardRefAndName","cx","uiFontGlobalClasses","Input","isKeyBackspace","isKeyDelete","globalClasses","getDefinitions","getMaskChar","ColorableInputElement","FixedIMaskInput","MaskedInput","props","ref","mask","maskChar","formatChars","alwaysShowMask","imaskProps","onAccept","customIMaskProps","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","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   * @see См. `imaskProps.placeholderChar`\n   * @default _\n   */\n  maskChar?: Nullable<string>;\n  /**\n   * Словарь символов-регулярок для маски\n   *\n   * @see См. `imaskProps.definitions`\n   * @default { '9': '[0-9]', 'a': '[A-Za-z]', '*': '[A-Za-z0-9]' }\n   */\n  formatChars?: Record<string, string>;\n  /**\n   * Всегда показывать символы маски\n   *\n   * @see См. `imaskProps.lazy`\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   * Пропы для компонента `IMaskInput`\n   *\n   * @see https://imask.js.org/guide.html\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,\n      imaskProps: { onAccept, ...customIMaskProps } = {},\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          <ColorableInputElement showOnFocus={!alwaysShowMask}>\n            <FixedIMaskInput {...imaskProps} onAccept={handleAccept} />\n          </ColorableInputElement>\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        ...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      onAccept?.(...args);\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 } = e.currentTarget;\n\n      prevSelectionStart.current = selectionStart;\n\n      if (\n        (isKeyBackspace(e) && prevSelectionStart.current === 0) ||\n        (isKeyDelete(e) && prevSelectionStart.current === value.length)\n      ) {\n        // Случаи, когда нажатие клавиш не тригерит `onInput`\n        handleUnexpectedInput(value);\n        prevValue.current = e.currentTarget.value;\n      }\n\n      props.onKeyDown?.(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","showMask","imaskProps","onAccept","customIMaskProps","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","showMaskPlaceholder","replace","placeholderChar","definitions","eager","overwrite","lazy","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   * @see См. `imaskProps.placeholderChar`\n   * @default _\n   */\n  maskChar?: Nullable<string>;\n  /**\n   * Словарь символов-регулярок для маски\n   *\n   * @see См. `imaskProps.definitions`\n   * @default { '9': '[0-9]', 'a': '[A-Za-z]', '*': '[A-Za-z0-9]' }\n   */\n  formatChars?: Record<string, string>;\n  /**\n   * Показывать символы маски\n   *\n   * @see См. `imaskProps.lazy`\n   * @default 'focus'\n   */\n  showMask?: 'always' | 'focus' | 'never';\n  /**\n   * Обработчик неправильного ввода.\n   * Вторым агрументом будет передан метод вспыхивания акцентным цветом.\n   *\n   * Если обработчик не задан, то инпут вспыхивает по-умолчанию.\n   *\n   * @param value значение инпута.\n   * @param blink вспыхнуть акцентным цвтетом.\n   */\n  onUnexpectedInput?: (value: string, blink: () => void) => void;\n  /**\n   * Пропы для компонента `IMaskInput`\n   *\n   * @see https://imask.js.org/guide.html\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      showMask = 'focus',\n      imaskProps: { onAccept, ...customIMaskProps } = {},\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          <ColorableInputElement showOnFocus={false}>\n            <FixedIMaskInput {...imaskProps} onAccept={handleAccept} />\n          </ColorableInputElement>\n        }\n      />\n    );\n\n    function getCompatibleIMaskProps(): IMaskInputProps<HTMLInputElement> {\n      const showMaskPlaceholder = showMask === 'always' || (showMask === 'focus' && focused);\n\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: !showMaskPlaceholder,\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      onAccept?.(...args);\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

@@ -19,12 +19,12 @@ export interface MaskedProps {
      */
     formatChars?: Record<string, string>;
     /**
-     * Всегда показывать символы маски
+     * Показывать символы маски
      *
      * @see См. `imaskProps.lazy`
-     * @default false
+     * @default 'focus'
      */
-    alwaysShowMask?: boolean;
+    showMask?: 'always' | 'focus' | 'never';
     /**
      * Обработчик неправильного ввода.
      * Вторым агрументом будет передан метод вспыхивания акцентным цветом.

package/components/MaskedInput/MaskedInput.md

@@ -1,73 +1,50 @@
 #### `mask`
 
-Маска телефона
+Паттерн ввода. Пример с номером телефона.
 
 ```jsx harmony
-import { Input, Checkbox } from '@skbkontur/react-ui';
-
-const [value, setValue] = React.useState('123');
-const [alwaysShowMask, setAlwaysShowMask] = React.useState(false);
-
-const listeners = {
-  ...[
-    'onKeyPress',
-    'onKeyDown',
-    'onFocus',
-    'onBlur',
-    'onInput',
-    'onChange',
-    'onCut',
-  ].reduce((list, item) => ({ ...list, [item]: (e) => console.log(item, e) }), {})
-};
+const [value, setValue] = React.useState('');
 
-listeners.onValueChange = (v) => {
-  console.log('onValue', v);
-  setValue(v);
-};
-listeners.onUnexpectedInput = (v, blink) => {
-  console.log('onUnexpectedInput', v);
-  blink();
-};
+<MaskedInput
+  mask="+7 (999) 999-99-99"
+  placeholder="Номер телефона"
+  value={value}
+  onValueChange={setValue}
+/>
+```
+
+#### `showMask`
 
+Способ отображения маски.
+
+```jsx harmony
 <>
-  <Checkbox checked={alwaysShowMask} onValueChange={setAlwaysShowMask} />
-  <MaskedInput
-    mask="9-9-9-9"
-    // placeholder="123"
-    alwaysShowMask={alwaysShowMask}
-    // alwaysShowMask
-    // defaultValue="321"
-    // {...listeners}
-  />
-  <MaskedInput
-    mask="+7 999-999-99-99"
-    alwaysShowMask={alwaysShowMask}
-    //value={value}
-    {...listeners}
-  />
-  <Input
-    mask="+7 999-999-99-99"
-    alwaysShowMask
-    value={value}
-    {...listeners}
-  />
-  <Input
-    value={value}
-    {...listeners}
-  />
+  <code>always</code>
+  <br />
+  <MaskedInput mask="+7 (999) 999-99-99" showMask="always" placeholder="Номер телефона" />
+  <br />
+  <br />
+  <code>focus</code>
+  <br />
+  <MaskedInput mask="+7 (999) 999-99-99" showMask="focus" placeholder="Номер телефона" />
+  <br />
+  <br />
+  <code>never</code>
+  <br />
+  <MaskedInput mask="+7 (999) 999-99-99" showMask="never" placeholder="Номер телефона" />
 </>
 ```
 
 #### `maskChar`
 
-может изменить символ значения с маской
+Символом маски может быть любой символ.
 
 ```jsx harmony
 <MaskedInput
   mask="9999 9999 9999 9999"
   maskChar="X"
   placeholder="Номер карты"
-  alwaysShowMask
+  showMask="always"
 />
 ```
 
@@ -82,7 +59,7 @@ const [value, setValue] = React.useState('');
 
 <MaskedInput
   mask="Hh:Mm:Ss"
-  alwaysShowMask
+  showMask="always"
   formatChars={{
     H: '[0-2]',
     h: value.startsWith('2') ? '[0-3]' : '[0-9]',
@@ -96,16 +73,6 @@ const [value, setValue] = React.useState('');
 />
 ```
 
-#### `alwaysShowMask`
-
-Показывает маску всегда. Placeholder в этом случае игнорируется. Логика немного отличается от старой реализации, из-за
-специфики iMask. Раньше маска обязательно появлялась при фокусе, но теперь чтобы маску было видно надо явно задать этот
-проп.
-
-```jsx harmony
-<MaskedInput mask="+7 (999) 999-99-99" alwaysShowMask placeholder="Номер телефона" />
-```
-
 #### `imaskProps`*
 
 Переопределяет пропы iMask.
@@ -121,18 +88,18 @@ const [value, setValue] = React.useState('');
 Конвертация пропов выглядит примерно так:
 
 ```typescript static
-mask: mask.replace(/0/g, '{\\0}'),
+mask:            mask.replace(/0/g, '{\\0}'),
 placeholderChar: props.maskChar || '_',
-definitions: props.formatChars || { '9': /[0-9]/, a: /[A-Za-z]/, '*': /[A-Za-z0-9]/ },
-eager: true,
-overwrite: 'shift',
-lazy: !alwaysShowMask,
+definitions:     props.formatChars || { '9': /[0-9]/, a: /[A-Za-z]/, '*': /[A-Za-z0-9]/ },
+eager:           'append',
+overwrite:       'shift',
+lazy:            !(showMask === 'always' || (showMask === 'focus' && focused)),
 ...props.imaskProps,
 ```
 
 ---
 
-##### `imaskProps.unmask`
+#### `imaskProps.unmask`
 
 Можно сразу получать value без фиксированных символов маски
 
@@ -147,66 +114,66 @@ const [value, setValue] = React.useState('');
     imaskProps={{
       unmask: true
     }}
-    alwaysShowMask
+    showMask="always"
     value={value}
     onValueChange={setValue}
   />
 </>
 ```
 
-##### `imaskProps.mask []`
+#### `imaskProps.mask []`
 
-Опциональные части маски
+Опциональные части маски.
 
 ```jsx harmony
+import { Checkbox } from '@skbkontur/react-ui';
+
 const [value, setValue] = React.useState('');
 const [complete, setComplete] = React.useState(false);
 
 
 <MaskedInput
   mask="99-999999[99]-99"
-  alwaysShowMask
-  rightIcon={complete ? '✅' : '⬜'}
+  showMask="never"
+  placeholder="ИНН"
+  rightIcon={<Checkbox checked={complete} style={{ pointerEvents: 'none' }} />}
+  onValueChange={setValue}
   imaskProps={{
-    onAccept: (v, imask) => {
-      setValue(v);
-      setComplete(imask.masked.isComplete);
-    }
+    onAccept: (_, imask) => setComplete(imask.masked.isComplete)
   }}
 />
 ```
 
-##### `imaskProps.mask {}`
+#### `imaskProps.mask {}`
 
 Фиксированные части маски, которые попадут в `value` при `unmask = true`. Любой невалидный символ (например`пробел`)
-переведёт каретку за фиксированный символ.
+перекинет каретку за фиксированный символ.
 
 ```jsx harmony
+import { Checkbox } from '@skbkontur/react-ui';
+
 const [value, setValue] = React.useState('');
 const [complete, setComplete] = React.useState(false);
 
-
 <>
   <span>unmask value: {value}</span>
   <br />
   <MaskedInput
     mask="aa[aaaaaaaaaaaaaaaaa]{@}aa[aaaaaaaaaaaaaaaaa]{\.}aa[aaaa]"
-    alwaysShowMask
-    rightIcon={complete ? '✅' : '⬜'}
+    showMask="always"
+    rightIcon={<Checkbox checked={complete} style={{ pointerEvents: 'none' }} />}
+    onValueChange={setValue}
     imaskProps={{
       unmask: true,
-      onAccept: (v, imask) => {
-        setValue(v);
-        setComplete(imask.masked.isComplete);
-      }
+      onAccept: (_, imask) => setComplete(imask.masked.isComplete)
     }}
   />
 </>
 ```
 
-##### `imaskProps.blocks`
+#### `imaskProps.blocks`
 
-Пример маски времени. Нажмите цифру `6`, чтобы сработало автозаполнение.
+Пример маски времени с автозаполнением.
 
 ```jsx harmony
 import IMask from 'imask';
@@ -226,6 +193,6 @@ const block = {
       SS: { ...block, to: 59, },
     }
   }}
-  alwaysShowMask
+  showMask="always"
 />
 ```

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skbkontur/react-ui",
-  "version": "4.25.1-MaskedInput-2nd.5",
+  "version": "4.25.1-MaskedInput-2nd.6",
   "description": "UI Components",
   "main": "cjs/index.js",
   "module": "index.js",
@@ -40,7 +40,7 @@
     "fix:prettier": "yarn prettier --write .",
     "test": "jest --detectOpenHandles",
     "test:watch": "yarn test --watch",
-    "creevey": "wait-on -t 300000 http-get://localhost:6060/ && cross-env BABEL_ENV=cjs creevey -c .creevey/config.js",
+    "creevey": "wait-on -t 300000 http-get://localhost:6061/ && cross-env BABEL_ENV=cjs creevey -c .creevey/config.js",
     "creevey:update": "cross-env BABEL_ENV=cjs creevey -c .creevey/config.js --update",
     "creevey:ui": "yarn creevey --ui",
     "report:eslint": "yarn eslint -f eslint-html-reporter/reporter.js -o reports/eslint/index.html"