@skbkontur/react-ui 4.25.0 → 4.25.1-MaskedInput-fix.0

package/cjs/components/MaskedInput/MaskedInput.js

@@ -1,9 +1,38 @@
 "use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;exports.__esModule = true;exports.MaskedInput = void 0;var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));var _react = _interopRequireWildcard(require("react"));
 
-var _Input = require("../Input");
+var _reactImask = require("react-imask");
+var _globalObject = require("@skbkontur/global-object");
+
 
 var _MaskedInputElement = require("../../internal/MaskedInputElement");
-var _forwardRefAndName = require("../../lib/forwardRefAndName");var _excluded = ["mask", "maskChar", "formatChars", "alwaysShowMask", "placeholder"];
+var _forwardRefAndName = require("../../lib/forwardRefAndName");
+var _Emotion = require("../../lib/theming/Emotion");
+var _UiFont = require("../../lib/styles/UiFont");
+var _Input = require("../Input");
+var _identifiers = require("../../lib/events/keyboard/identifiers");
+var _isInstanceOf = require("../../lib/isInstanceOf");
+
+var _MaskedInput = require("./MaskedInput.styles");
+var _MaskedInput2 = require("./MaskedInput.helpers");var _excluded = ["onAccept"],_excluded2 = ["mask", "maskChar", "formatChars", "alwaysShowMask", "imaskProps", "placeholder", "onValueChange", "onUnexpectedInput", "onKeyDownCapture", "onChange", "element"];
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
 
 
 
@@ -32,47 +61,188 @@ var _forwardRefAndName = require("../../lib/forwardRefAndName");var _excluded =
 var MaskedInput = (0, _forwardRefAndName.forwardRefAndName)(
 'MaskedInput',
 function MaskedInput(props, ref) {
-  var mask = props.mask,maskChar = props.maskChar,formatChars = props.formatChars,alwaysShowMask = props.alwaysShowMask,placeholder = props.placeholder,inputProps = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
+  var
+  mask =
+
+
+
+
+
+
+
+
+
+
+
+  props.mask,maskChar = props.maskChar,formatChars = props.formatChars,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),placeholder = props.placeholder,onValueChange = props.onValueChange,onUnexpectedInput = props.onUnexpectedInput,onKeyDownCapture = props.onKeyDownCapture,onChange = props.onChange,element = props.element,inputProps = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded2);
+
+  var inputRef = (0, _react.useRef)(null);
+  var imaskRef = (0, _react.useRef)(null);
+
   var _useState = (0, _react.useState)(false),focused = _useState[0],setFocused = _useState[1];
+  var prevValue = (0, _react.useRef)(props.value || String(props.defaultValue) || '');
+  var prevSelectionStart = (0, _react.useRef)(null);
+
   var showPlaceholder = !(alwaysShowMask || focused);
-  var innerRef = (0, _react.useRef)(null);
 
-  (0, _react.useImperativeHandle)(ref, function () {return innerRef.current;});
+  (0, _react.useImperativeHandle)(
+  ref,
+  function () {return (
+      inputRef.current &&
+      Object.assign(inputRef.current, {
+        selectAll: inputRef.current.delaySelectAll }));},
+
+  []);
+
+
+  (0, _react.useEffect)(function () {var _inputRef$current;
+    /**
+     * Для корректной работы `onUnexpectedInput` надо знать предыдущий `value`,
+     * но `imask` при монтировании не вызывает `onAccept`, если `value` невалиден или `laze=false`
+     * Поэтому актуальный `value` при монтировании надо получать вручную
+     */
+    if ((_inputRef$current = inputRef.current) != null && _inputRef$current.input) {
+      prevValue.current = inputRef.current.input.value;
+      prevSelectionStart.current = inputRef.current.input.selectionStart;
+    }
+  }, []);
+
+  // useEffect(() => {
+  //   inputRef.current &&
+  //     (inputRef.current.selectAll = () => {
+  //       setTimeout(() => {
+  //         inputRef.current?.setSelectionRange(0, 999);
+  //       });
+  //     });
+  // }, []);
+
+  var imaskProps = getCompatibleIMaskProps();
 
   return /*#__PURE__*/(
     _react.default.createElement(_Input.Input, (0, _extends2.default)({
-      ref: innerRef },
+      ref: inputRef },
     inputProps, {
       placeholder: showPlaceholder ? placeholder : undefined,
       onFocus: handleFocus,
       onBlur: handleBlur,
+      onInput: handleInput,
+      onMouseUp: handleSelect,
+      onKeyDownCapture: handleKeyDownCapture,
+      className: (0, _Emotion.cx)(_MaskedInput.globalClasses.root, _UiFont.uiFontGlobalClasses.root),
+      "data-tid": _MaskedInputElement.MaskedInputElementDataTids.root,
       element: /*#__PURE__*/
-      _react.default.createElement(_MaskedInputElement.MaskedInputElement, {
-        mask: mask,
-        maskChar: maskChar,
-        formatChars: formatChars,
-        alwaysShowMask: alwaysShowMask,
-        onUnexpectedInput: handleUnexpectedInput }) })));
+      _react.default.createElement(_MaskedInputElement.MaskedInputElement, { maskChars: getMaskChars(imaskProps) }, /*#__PURE__*/
+      _react.default.createElement(_reactImask.IMaskInput, (0, _extends2.default)({ ref: imaskRef }, imaskProps, { onAccept: handleAccept }))) })));
 
 
 
 
 
-  function handleUnexpectedInput(value) {
-    if (props.onUnexpectedInput) {
-      props.onUnexpectedInput(value);
-    } else if (innerRef.current) {
-      innerRef.current.blink();
+  function handleSelect(e) {var _inputRef$current2;
+    if (
+    (0, _isInstanceOf.isInstanceOf)(e.target, _globalObject.globalObject.HTMLInputElement) &&
+    e.target === ((_inputRef$current2 = inputRef.current) == null ? void 0 : _inputRef$current2.input) &&
+    e.target.closest('.react-ui-masked-input-root'))
+    {var _imaskRef$current;
+      var nearest = (_imaskRef$current = imaskRef.current) == null ? void 0 : _imaskRef$current.maskRef.masked.nearestInputPos(e.target.value.length, 'LEFT');
+      if (
+      typeof e.target.selectionStart === 'number' &&
+      typeof nearest === 'number' &&
+      e.target.selectionStart >= nearest)
+      {
+        e.target.selectionStart = nearest;
+        e.target.selectionEnd = nearest;
+      }
     }
   }
 
-  function handleFocus(e) {
+  function getCompatibleIMaskProps() {
+    return (0, _extends2.default)({
+      mask: mask.replace(/0/g, '{\\0}'),
+      placeholderChar: (0, _MaskedInput2.getMaskChar)(maskChar),
+      definitions: (0, _MaskedInput2.getDefinitions)(formatChars),
+      eager: true,
+      overwrite: 'shift',
+      lazy: alwaysShowMask === null ? true : !(alwaysShowMask || focused) },
+    customIMaskProps);
+
+  }
+
+  function getMaskChars(imaskProps) {
+    var imaskPropsFix = imaskProps;
+    var maskChars = [imaskPropsFix.placeholderChar];
+    if (imaskPropsFix.blocks) {
+      Object.values(imaskPropsFix.blocks).forEach(
+      function (_ref) {var placeholderChar = _ref.placeholderChar;return placeholderChar && maskChars.push(placeholderChar);});
+
+    }
+
+    return maskChars;
+  }
+
+  function handleAccept() {for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {args[_key] = arguments[_key];}
+    var value = args[0],e = args[2];
+
+    onAccept == null ? void 0 : onAccept.apply(void 0, args);
+
+    /**
+     * Метод `onAccept` может вызываться при монтировании, если не задан проп `defaultValue`.
+     * Но нативный `input` никогда не вызывает `onChange` при монтировании.
+     * Наше событие `onValueChange` в `Input` вывается в тех же случаях, что и нативный `onChange`,
+     * поэтому чтобы сохранить консинстентность будем ориентироваться на наличие аргумента `e`.
+     * Он содержит нативное событие, вызвавшее изменение.
+     * Если его нет, значит `imask` вызывал `onAccept` по некой собственной логике.
+     */
+    e && (onValueChange == null ? void 0 : onValueChange(value));
+  }
+
+  /**
+   * Отслеживаем неожиданные нажатия
+   * handleAccept не вызывается когда значение с маской не меняется
+   * Сначала вызывается handleAccept, затем handleInput
+   */
+  function handleInput(e) {
+    if (prevValue.current === e.target.value && prevSelectionStart.current === e.target.selectionStart) {
+      handleUnexpectedInput(e.target.value);
+    }
+
+    prevValue.current = e.target.value;
+
+    props.onInput == null ? void 0 : props.onInput(e);
+  }
+
+  function handleFocus(e) {var _inputRef$current3;
     setFocused(true);
-    props.onFocus && props.onFocus(e);
+    props.onFocus == null ? void 0 : props.onFocus(e);
+
+    // если `value` из пропов отличается от `value`, которое получит `input` после обработки,
+    // то `imask` будет ставить курсор за последним валидным символом.
+    props.selectAllOnFocus && ((_inputRef$current3 = inputRef.current) == null ? void 0 : _inputRef$current3.delaySelectAll());
+  }
+
+  function handleUnexpectedInput(value) {if (value === void 0) {value = '';}
+    if (onUnexpectedInput) {
+      onUnexpectedInput(value);
+    } else if (inputRef.current) {
+      inputRef.current.blink();
+    }
   }
 
   function handleBlur(e) {
     setFocused(false);
-    props.onBlur && props.onBlur(e);
+    props.onBlur == null ? void 0 : props.onBlur(e);
+  }
+
+  function handleKeyDownCapture(e) {
+    var isDeleteKey = (0, _identifiers.someKeys)(_identifiers.isKeyBackspace, _identifiers.isKeyDelete)(e);
+
+    prevSelectionStart.current = e.currentTarget.selectionStart;
+
+    if (!e.currentTarget.value && isDeleteKey && !e.repeat) {
+      handleUnexpectedInput(e.currentTarget.value);
+      prevValue.current = e.currentTarget.value;
+    }
+
+    onKeyDownCapture == null ? void 0 : onKeyDownCapture(e);
   }
 });exports.MaskedInput = MaskedInput;

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

@@ -1 +1 @@
-{"version":3,"sources":["MaskedInput.tsx"],"names":["MaskedInput","props","ref","mask","maskChar","formatChars","alwaysShowMask","placeholder","inputProps","focused","setFocused","showPlaceholder","innerRef","current","undefined","handleFocus","handleBlur","handleUnexpectedInput","value","onUnexpectedInput","blink","e","onFocus","onBlur"],"mappings":"8cAAA;;AAEA;;AAEA;AACA,gE;;;;;;;;;;;;;;;;;;;;;;AAsBA;AACA;AACA;AACA;AACO,IAAMA,WAAW,GAAG;AACzB,aADyB;AAEzB,SAASA,WAAT,CAAqBC,KAArB,EAA8CC,GAA9C,EAAsE;AACpE,MAAQC,IAAR,GAAoFF,KAApF,CAAQE,IAAR,CAAcC,QAAd,GAAoFH,KAApF,CAAcG,QAAd,CAAwBC,WAAxB,GAAoFJ,KAApF,CAAwBI,WAAxB,CAAqCC,cAArC,GAAoFL,KAApF,CAAqCK,cAArC,CAAqDC,WAArD,GAAoFN,KAApF,CAAqDM,WAArD,CAAqEC,UAArE,+CAAoFP,KAApF;AACA,kBAA8B,qBAAS,KAAT,CAA9B,CAAOQ,OAAP,gBAAgBC,UAAhB;AACA,MAAMC,eAAe,GAAG,EAAEL,cAAc,IAAIG,OAApB,CAAxB;AACA,MAAMG,QAAQ,GAAG,mBAAc,IAAd,CAAjB;;AAEA,kCAAoBV,GAApB,EAAyB,oBAAMU,QAAQ,CAACC,OAAf,EAAzB;;AAEA;AACE,iCAAC,YAAD;AACE,MAAA,GAAG,EAAED,QADP;AAEMJ,IAAAA,UAFN;AAGE,MAAA,WAAW,EAAEG,eAAe,GAAGJ,WAAH,GAAiBO,SAH/C;AAIE,MAAA,OAAO,EAAEC,WAJX;AAKE,MAAA,MAAM,EAAEC,UALV;AAME,MAAA,OAAO;AACL,mCAAC,sCAAD;AACE,QAAA,IAAI,EAAEb,IADR;AAEE,QAAA,QAAQ,EAAEC,QAFZ;AAGE,QAAA,WAAW,EAAEC,WAHf;AAIE,QAAA,cAAc,EAAEC,cAJlB;AAKE,QAAA,iBAAiB,EAAEW,qBALrB,GAPJ,IADF;;;;;;AAmBA,WAASA,qBAAT,CAA+BC,KAA/B,EAA8C;AAC5C,QAAIjB,KAAK,CAACkB,iBAAV,EAA6B;AAC3BlB,MAAAA,KAAK,CAACkB,iBAAN,CAAwBD,KAAxB;AACD,KAFD,MAEO,IAAIN,QAAQ,CAACC,OAAb,EAAsB;AAC3BD,MAAAA,QAAQ,CAACC,OAAT,CAAiBO,KAAjB;AACD;AACF;;AAED,WAASL,WAAT,CAAqBM,CAArB,EAA4D;AAC1DX,IAAAA,UAAU,CAAC,IAAD,CAAV;AACAT,IAAAA,KAAK,CAACqB,OAAN,IAAiBrB,KAAK,CAACqB,OAAN,CAAcD,CAAd,CAAjB;AACD;;AAED,WAASL,UAAT,CAAoBK,CAApB,EAA2D;AACzDX,IAAAA,UAAU,CAAC,KAAD,CAAV;AACAT,IAAAA,KAAK,CAACsB,MAAN,IAAgBtB,KAAK,CAACsB,MAAN,CAAaF,CAAb,CAAhB;AACD;AACF,CA9CwB,CAApB,C","sourcesContent":["import React, { Ref, useImperativeHandle, useRef, useState } from 'react';\n\nimport { Input, InputProps, InputType } from '../Input';\nimport { Nullable } from '../../typings/utility-types';\nimport { MaskedInputElement } from '../../internal/MaskedInputElement';\nimport { forwardRefAndName } from '../../lib/forwardRefAndName';\n\nexport interface MaskedProps {\n  /** Паттерн маски */\n  mask: string;\n  /** Символ маски */\n  maskChar?: Nullable<string>;\n  /**\n   * Словарь символов-регулярок для маски\n   * @default { '9': '[0-9]', 'a': '[A-Za-z]', '*': '[A-Za-z0-9]' }\n   */\n  formatChars?: Record<string, string>;\n  /** Показывать символы маски */\n  alwaysShowMask?: boolean;\n}\n\nexport type MaskInputType = Exclude<InputType, 'number' | 'date' | 'time' | 'password'>;\n\nexport interface MaskedInputProps extends MaskedProps, Omit<InputProps, 'mask' | 'maxLength' | 'type' | 'element'> {\n  type?: MaskInputType;\n}\n\n/**\n * Интерфейс пропсов наследуется от `Input`.\n * Из пропсов `Input` исключены некоторые не применимые к полю с маской пропсы и сокращен список возможных значений в type.\n */\nexport const MaskedInput = forwardRefAndName(\n  'MaskedInput',\n  function MaskedInput(props: MaskedInputProps, ref: Ref<Input | null>) {\n    const { mask, maskChar, formatChars, alwaysShowMask, placeholder, ...inputProps } = props;\n    const [focused, setFocused] = useState(false);\n    const showPlaceholder = !(alwaysShowMask || focused);\n    const innerRef = useRef<Input>(null);\n\n    useImperativeHandle(ref, () => innerRef.current);\n\n    return (\n      <Input\n        ref={innerRef}\n        {...inputProps}\n        placeholder={showPlaceholder ? placeholder : undefined}\n        onFocus={handleFocus}\n        onBlur={handleBlur}\n        element={\n          <MaskedInputElement\n            mask={mask}\n            maskChar={maskChar}\n            formatChars={formatChars}\n            alwaysShowMask={alwaysShowMask}\n            onUnexpectedInput={handleUnexpectedInput}\n          />\n        }\n      />\n    );\n\n    function handleUnexpectedInput(value: string) {\n      if (props.onUnexpectedInput) {\n        props.onUnexpectedInput(value);\n      } else if (innerRef.current) {\n        innerRef.current.blink();\n      }\n    }\n\n    function handleFocus(e: React.FocusEvent<HTMLInputElement>) {\n      setFocused(true);\n      props.onFocus && props.onFocus(e);\n    }\n\n    function handleBlur(e: React.FocusEvent<HTMLInputElement>) {\n      setFocused(false);\n      props.onBlur && props.onBlur(e);\n    }\n  },\n);\n"]}
+{"version":3,"sources":["MaskedInput.tsx"],"names":["MaskedInput","props","ref","mask","maskChar","formatChars","alwaysShowMask","imaskProps","onAccept","customIMaskProps","placeholder","onValueChange","onUnexpectedInput","onKeyDownCapture","onChange","element","inputProps","inputRef","imaskRef","focused","setFocused","prevValue","value","String","defaultValue","prevSelectionStart","showPlaceholder","current","Object","assign","selectAll","delaySelectAll","input","selectionStart","getCompatibleIMaskProps","undefined","handleFocus","handleBlur","handleInput","handleSelect","handleKeyDownCapture","globalClasses","root","uiFontGlobalClasses","MaskedInputElementDataTids","getMaskChars","handleAccept","e","target","globalObject","HTMLInputElement","closest","nearest","maskRef","masked","nearestInputPos","length","selectionEnd","replace","placeholderChar","definitions","eager","overwrite","lazy","imaskPropsFix","maskChars","blocks","values","forEach","push","args","handleUnexpectedInput","onInput","onFocus","selectAllOnFocus","blink","onBlur","isDeleteKey","isKeyBackspace","isKeyDelete","currentTarget","repeat"],"mappings":"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","sourcesContent":["import React, { Ref, useImperativeHandle, useRef, useState, useEffect } from 'react';\nimport { InputMask, MaskedPatternOptions, MaskedPattern } from 'imask';\nimport { IMaskInput, IMaskInputProps } from 'react-imask';\nimport { globalObject } from '@skbkontur/global-object';\n\nimport { Nullable } from '../../typings/utility-types';\nimport { MaskedInputElement, MaskedInputElementDataTids } from '../../internal/MaskedInputElement';\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, someKeys } from '../../lib/events/keyboard/identifiers';\nimport { isInstanceOf } from '../../lib/isInstanceOf';\n\nimport { globalClasses } from './MaskedInput.styles';\nimport { getDefinitions, getMaskChar } from './MaskedInput.helpers';\n\nexport interface MaskedProps {\n  /** Паттерн маски */\n  mask: string;\n  /** Символ маски */\n  maskChar?: Nullable<string>;\n  /**\n   * Словарь символов-регулярок для маски\n   * @default { '9': '[0-9]', 'a': '[A-Za-z]', '*': '[A-Za-z0-9]' }\n   */\n  formatChars?: Record<string, string>;\n  /**\n   * Показывать символы маски\n   *\n   * null - не показывать\n   * true - показывать всегда\n   * false - показывать по фокусу\n   */\n  alwaysShowMask?: boolean | null;\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 IMaskRefType {\n  maskRef: InputMask<MaskedPatternOptions>;\n  element: HTMLInputElement;\n}\n\nexport interface MaskedInputProps\n  extends MaskedProps,\n    Omit<InputProps, 'mask' | 'maxLength' | 'type' | 'alwaysShowMask'> {\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      placeholder,\n      onValueChange,\n      onUnexpectedInput,\n      onKeyDownCapture,\n      onChange,\n      element,\n      ...inputProps\n    } = props;\n\n    const inputRef = useRef<Input>(null);\n    const imaskRef = useRef<IMaskRefType>(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    const showPlaceholder = !(alwaysShowMask || focused);\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      /**\n       * Для корректной работы `onUnexpectedInput` надо знать предыдущий `value`,\n       * но `imask` при монтировании не вызывает `onAccept`, если `value` невалиден или `laze=false`\n       * Поэтому актуальный `value` при монтировании надо получать вручную\n       */\n      if (inputRef.current?.input) {\n        prevValue.current = inputRef.current.input.value;\n        prevSelectionStart.current = inputRef.current.input.selectionStart;\n      }\n    }, []);\n\n    // useEffect(() => {\n    //   inputRef.current &&\n    //     (inputRef.current.selectAll = () => {\n    //       setTimeout(() => {\n    //         inputRef.current?.setSelectionRange(0, 999);\n    //       });\n    //     });\n    // }, []);\n\n    const imaskProps = getCompatibleIMaskProps();\n\n    return (\n      <Input\n        ref={inputRef}\n        {...inputProps}\n        placeholder={showPlaceholder ? placeholder : undefined}\n        onFocus={handleFocus}\n        onBlur={handleBlur}\n        onInput={handleInput}\n        onMouseUp={handleSelect}\n        onKeyDownCapture={handleKeyDownCapture}\n        className={cx(globalClasses.root, uiFontGlobalClasses.root)}\n        data-tid={MaskedInputElementDataTids.root}\n        element={\n          <MaskedInputElement maskChars={getMaskChars(imaskProps)}>\n            <IMaskInput ref={imaskRef} {...imaskProps} onAccept={handleAccept} />\n          </MaskedInputElement>\n        }\n      />\n    );\n\n    function handleSelect(e: React.MouseEvent<HTMLInputElement>) {\n      if (\n        isInstanceOf(e.target, globalObject.HTMLInputElement) &&\n        e.target === inputRef.current?.input &&\n        e.target.closest('.react-ui-masked-input-root')\n      ) {\n        const nearest = imaskRef.current?.maskRef.masked.nearestInputPos(e.target.value.length, 'LEFT');\n        if (\n          typeof e.target.selectionStart === 'number' &&\n          typeof nearest === 'number' &&\n          e.target.selectionStart >= nearest\n        ) {\n          e.target.selectionStart = nearest;\n          e.target.selectionEnd = nearest;\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        eager: true,\n        overwrite: 'shift',\n        lazy: alwaysShowMask === null ? true : !(alwaysShowMask || focused),\n        ...customIMaskProps,\n      } as IMaskInputProps<HTMLInputElement>;\n    }\n\n    function getMaskChars(imaskProps: IMaskInputProps<HTMLInputElement>): string[] {\n      const imaskPropsFix = imaskProps as MaskedPattern;\n      const maskChars = [imaskPropsFix.placeholderChar];\n      if (imaskPropsFix.blocks) {\n        (Object.values(imaskPropsFix.blocks) as Array<{ placeholderChar?: string }>).forEach(\n          ({ placeholderChar }) => placeholderChar && maskChars.push(placeholderChar),\n        );\n      }\n\n      return maskChars;\n    }\n\n    function handleAccept(...args: Parameters<Required<IMaskInputProps<HTMLInputElement>>['onAccept']>) {\n      const [value, , e] = args;\n\n      onAccept?.(...args);\n\n      /**\n       * Метод `onAccept` может вызываться при монтировании, если не задан проп `defaultValue`.\n       * Но нативный `input` никогда не вызывает `onChange` при монтировании.\n       * Наше событие `onValueChange` в `Input` вывается в тех же случаях, что и нативный `onChange`,\n       * поэтому чтобы сохранить консинстентность будем ориентироваться на наличие аргумента `e`.\n       * Он содержит нативное событие, вызвавшее изменение.\n       * Если его нет, значит `imask` вызывал `onAccept` по некой собственной логике.\n       */\n      e && onValueChange?.(value);\n    }\n\n    /**\n     * Отслеживаем неожиданные нажатия\n     * handleAccept не вызывается когда значение с маской не меняется\n     * Сначала вызывается handleAccept, затем handleInput\n     */\n    function handleInput(e: React.ChangeEvent<HTMLInputElement>) {\n      if (prevValue.current === e.target.value && prevSelectionStart.current === e.target.selectionStart) {\n        handleUnexpectedInput(e.target.value);\n      }\n\n      prevValue.current = e.target.value;\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 = '') {\n      if (onUnexpectedInput) {\n        onUnexpectedInput(value);\n      } else if (inputRef.current) {\n        inputRef.current.blink();\n      }\n    }\n\n    function handleBlur(e: React.FocusEvent<HTMLInputElement>) {\n      setFocused(false);\n      props.onBlur?.(e);\n    }\n\n    function handleKeyDownCapture(e: React.KeyboardEvent<HTMLInputElement>) {\n      const isDeleteKey = someKeys(isKeyBackspace, isKeyDelete)(e);\n\n      prevSelectionStart.current = e.currentTarget.selectionStart;\n\n      if (!e.currentTarget.value && isDeleteKey && !e.repeat) {\n        handleUnexpectedInput(e.currentTarget.value);\n        prevValue.current = e.currentTarget.value;\n      }\n\n      onKeyDownCapture?.(e);\n    }\n  },\n);\n"]}

package/cjs/components/MaskedInput/MaskedInput.md

@@ -1,21 +1,185 @@
+#### `mask`
+
+Маска телефона
+
+```jsx harmony
+const [value, setValue] = React.useState('123');
+
+<MaskedInput
+  mask="+7 999-999-99-99"
+  alwaysShowMask
+  value={value}
+  onValueChange={setValue}
+/>
+```
+
+#### `maskChar`
+
+может изменить символ значения с маской
+
+```jsx harmony
+<MaskedInput
+  mask="9999 9999 9999 9999"
+  maskChar="X"
+  placeholder="Номер карты"
+  alwaysShowMask
+/>
+```
+
+#### `formatChars`
+
+При необходимости можно настроить собственный словарь.
+
+Возможности `imaskProps.blocks` намного шире. Смотрите пример ниже.
+
+```jsx harmony
+const [value, setValue] = React.useState('');
+
+<MaskedInput
+  mask="Hh:Mm:Ss"
+  alwaysShowMask
+  formatChars={{
+    H: '[0-2]',
+    h: value.startsWith('2') ? '[0-3]' : '[0-9]',
+    M: '[0-5]',
+    m: '[0-9]',
+    S: '[0-5]',
+    s: '[0-9]',
+  }}
+  value={value}
+  onValueChange={setValue}
+/>
+```
+
+#### `alwaysShowMask`
+
+Показывает маску всегда. Placeholder в этом случае игнорируется.
+Логика немного отличается от старой реализации, из-за специфики iMask.
+Раньше маска обязательно появлялась при фокусе, но теперь чтобы маску было видно надо явно задать этот проп.
+
+```jsx harmony
+<MaskedInput mask="+7 (999) 999-99-99" alwaysShowMask placeholder="Номер телефона" />
+```
+
+#### `imaskProps`*
+
+Переопределяет пропы iMask.
+
+---
+
+Контрол используется внутри пакет [iMask](https://imask.js.org/). Пропы `mask`, `maskChar` и `formatChars` прокидываются
+с необходимыми доработками. Также для обратной совместимости со старым поведением добавляется несколько других пропов.
+
+Обратите внимание, что в `definitions` попадает **`0: /\d/`**. Это дефолтное поле, которое нельзя удалить. Но в старой
+реализации `0` считался фиксированным символом, из-за чего приходится немного редактировать маску.
+
+Конвертация пропов выглядит примерно так:
+
+```typescript static
+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,
+...props.imaskProps,
+```
+
+---
+
+##### `imaskProps.unmask`
+
+Можно сразу получать value без фиксированных символов маски
+
 ```jsx harmony
-<MaskedInput mask={'+7 999 999-99-99'} placeholder={"Номер телефона"} />
+const [value, setValue] = React.useState('');
+
+<>
+  <span>unmask value: {value}</span>
+  <br />
+  <MaskedInput
+    mask="+7 (999) 999-99-99"
+    imaskProps={{
+      unmask: true
+    }}
+    alwaysShowMask
+    value={value}
+    onValueChange={setValue}
+  />
+</>
 ```
 
-Можно изменить символ значения с маской
+##### `imaskProps.mask []`
+
+Опциональные части маски
+
 ```jsx harmony
-<MaskedInput mask={'9999 9999 9999 9999'} maskChar={'X'} placeholder={"Номер карты"}  />
+const [value, setValue] = React.useState('');
+const [complete, setComplete] = React.useState(false);
+
+
+<MaskedInput
+  mask="99-999999[99]-99"
+  alwaysShowMask
+  rightIcon={complete ? '✅' : '⬜'}
+  imaskProps={{
+    onAccept: (v, imask) => {
+      setValue(v);
+      setComplete(imask.masked.isComplete);
+    }
+  }}
+/>
 ```
 
-**alwaysShowMask** позволяет показывать маску всегда. Placeholder в этом случае игнорируется.
+##### `imaskProps.mask {}`
+
+Фиксированные части маски, которые попадут в `value` при `unmask = true`. Любой невалидный символ (например`пробел`) переведёт каретку за фиксированный символ.
+
 ```jsx harmony
-<MaskedInput mask={'9999 9999 9999 9999'} alwaysShowMask maskChar={'X'} placeholder={"Номер карты"} />
+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 ? '✅' : '⬜'}
+    imaskProps={{
+      unmask: true,
+      onAccept: (v, imask) => {
+        setValue(v);
+        setComplete(imask.masked.isComplete);
+      }
+    }}
+  />
+</>
 ```
 
-Для форматирования по маске используется пакет [iMask](https://imask.js.org/). Используйте особенности пакета принимая всю ответственность на себя.
+##### `imaskProps.blocks`
 
-`MaskedInput` гарантирует поддержку работы 3 пропов:  **mask**, **maskChar**, **alwaysShowMask** с заданными по-умолчанию **formatChars**.
+Пример маски времени. Нажмите цифру `6`, чтобы сработало автозаполнение.
 
-Остальное поведение может меняться в мажорных релизах.
+```jsx harmony
+import IMask from 'imask';
 
-Например, iMask [позволяет добавлять](https://imask.js.org/guide.html#masked-pattern) в значения без форматирования константы с помощью фигурных скобок. Использовать этот вариант **НЕ РЕКОМЕНДУЕТСЯ**.
+const block = {
+  mask: IMask.MaskedRange,
+  from: 0,
+  autofix: 'pad',
+};
+
+<MaskedInput
+  mask="HH:MM:SS"
+  imaskProps={{
+    blocks: {
+      HH: { ...block, to: 23, },
+      MM: { ...block, to: 59, },
+      SS: { ...block, to: 59, },
+    }
+  }}
+  alwaysShowMask
+/>
+```

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

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

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

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

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

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

package/cjs/components/RadioGroup/RadioGroup.md

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

package/cjs/index.d.ts

@@ -45,6 +45,7 @@ export * from './components/TokenInput';
 export * from './components/Tooltip';
 export * from './components/TooltipMenu';
 export * from './components/ResponsiveLayout';
+export * from './components/MaskedInput';
 export * from './lib/featureFlagsContext';
 export * from './lib/locale';
 export * from './lib/theming/ThemeContext';
@@ -55,6 +56,8 @@ export * from './lib/theming/themes/DefaultTheme8pxOld';
 export * from './lib/theming/themes/FlatTheme8pxOld';
 export * from './lib/theming/themes/Theme2022';
 export * from './lib/theming/themes/Theme2022Dark';
+export * from './lib/theming/themes/Theme2022Update2024';
+export * from './lib/theming/themes/Theme2022DarkUpdate2024';
 export * from './lib/types/props';
 export * from './internal/Popup/types';
 export * as ColorFunctions from './lib/styles/ColorFunctions';

package/cjs/index.js

@@ -45,6 +45,7 @@ var _TokenInput = require("./components/TokenInput");Object.keys(_TokenInput).fo
 var _Tooltip = require("./components/Tooltip");Object.keys(_Tooltip).forEach(function (key) {if (key === "default" || key === "__esModule") return;if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;if (key in exports && exports[key] === _Tooltip[key]) return;exports[key] = _Tooltip[key];});
 var _TooltipMenu = require("./components/TooltipMenu");Object.keys(_TooltipMenu).forEach(function (key) {if (key === "default" || key === "__esModule") return;if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;if (key in exports && exports[key] === _TooltipMenu[key]) return;exports[key] = _TooltipMenu[key];});
 var _ResponsiveLayout = require("./components/ResponsiveLayout");Object.keys(_ResponsiveLayout).forEach(function (key) {if (key === "default" || key === "__esModule") return;if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;if (key in exports && exports[key] === _ResponsiveLayout[key]) return;exports[key] = _ResponsiveLayout[key];});
+var _MaskedInput = require("./components/MaskedInput");Object.keys(_MaskedInput).forEach(function (key) {if (key === "default" || key === "__esModule") return;if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;if (key in exports && exports[key] === _MaskedInput[key]) return;exports[key] = _MaskedInput[key];});
 var _featureFlagsContext = require("./lib/featureFlagsContext");Object.keys(_featureFlagsContext).forEach(function (key) {if (key === "default" || key === "__esModule") return;if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;if (key in exports && exports[key] === _featureFlagsContext[key]) return;exports[key] = _featureFlagsContext[key];});
 var _locale = require("./lib/locale");Object.keys(_locale).forEach(function (key) {if (key === "default" || key === "__esModule") return;if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;if (key in exports && exports[key] === _locale[key]) return;exports[key] = _locale[key];});
 var _ThemeContext = require("./lib/theming/ThemeContext");Object.keys(_ThemeContext).forEach(function (key) {if (key === "default" || key === "__esModule") return;if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;if (key in exports && exports[key] === _ThemeContext[key]) return;exports[key] = _ThemeContext[key];});
@@ -55,5 +56,7 @@ var _DefaultTheme8pxOld = require("./lib/theming/themes/DefaultTheme8pxOld");Obj
 var _FlatTheme8pxOld = require("./lib/theming/themes/FlatTheme8pxOld");Object.keys(_FlatTheme8pxOld).forEach(function (key) {if (key === "default" || key === "__esModule") return;if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;if (key in exports && exports[key] === _FlatTheme8pxOld[key]) return;exports[key] = _FlatTheme8pxOld[key];});
 var _Theme = require("./lib/theming/themes/Theme2022");Object.keys(_Theme).forEach(function (key) {if (key === "default" || key === "__esModule") return;if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;if (key in exports && exports[key] === _Theme[key]) return;exports[key] = _Theme[key];});
 var _Theme2022Dark = require("./lib/theming/themes/Theme2022Dark");Object.keys(_Theme2022Dark).forEach(function (key) {if (key === "default" || key === "__esModule") return;if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;if (key in exports && exports[key] === _Theme2022Dark[key]) return;exports[key] = _Theme2022Dark[key];});
+var _Theme2022Update = require("./lib/theming/themes/Theme2022Update2024");Object.keys(_Theme2022Update).forEach(function (key) {if (key === "default" || key === "__esModule") return;if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;if (key in exports && exports[key] === _Theme2022Update[key]) return;exports[key] = _Theme2022Update[key];});
+var _Theme2022DarkUpdate = require("./lib/theming/themes/Theme2022DarkUpdate2024");Object.keys(_Theme2022DarkUpdate).forEach(function (key) {if (key === "default" || key === "__esModule") return;if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;if (key in exports && exports[key] === _Theme2022DarkUpdate[key]) return;exports[key] = _Theme2022DarkUpdate[key];});
 var _props = require("./lib/types/props");Object.keys(_props).forEach(function (key) {if (key === "default" || key === "__esModule") return;if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;if (key in exports && exports[key] === _props[key]) return;exports[key] = _props[key];});
 var _types = require("./internal/Popup/types");Object.keys(_types).forEach(function (key) {if (key === "default" || key === "__esModule") return;if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;if (key in exports && exports[key] === _types[key]) return;exports[key] = _types[key];});var _ColorFunctions = _interopRequireWildcard(require("./lib/styles/ColorFunctions"));exports.ColorFunctions = _ColorFunctions;var _DimensionFunctions = _interopRequireWildcard(require("./lib/styles/DimensionFunctions"));exports.DimensionFunctions = _DimensionFunctions;