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

package/internal/MaskedInputElement/MaskedInputElement/MaskedInputElement.js

@@ -1,206 +1,147 @@
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
-var _excluded = ["mask", "maskChar", "formatChars", "alwaysShowMask", "maxLength", "onUnexpectedInput", "defaultValue", "style"];
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+var _excluded = ["children", "onInput", "onFocus", "onBlur", "maskChars"];
 import React, { useContext, useEffect, useImperativeHandle, useRef, useState } from 'react';
-import { IMaskInput, IMask } from 'react-imask';
+import { globalObject, isBrowser } from '@skbkontur/global-object';
+import debounce from 'lodash.debounce';
 import { ThemeContext } from "../../../lib/theming/ThemeContext";
-import { MaskCharLowLine } from "../../MaskCharLowLine";
-import { cx } from "../../../lib/theming/Emotion";
 import { forwardRefAndName } from "../../../lib/forwardRefAndName";
+import { cx } from "../../../lib/theming/Emotion";
 import { styles } from "../MaskedInputElement.styles";
-import { getCurrentValue, getDefinitions, getFocusPrefix, getMaskChar } from "../MaskedInputElement.helpers";
 export var MaskedInputElementDataTids = {
   root: 'MaskedInput__root'
 };
-export var MaskedInputElement = forwardRefAndName('MaskedInputElement', function MaskedInputElement(props, ref) {
-  var _useState = useState(function () {
-    var value = getValue(props);
-    return {
-      value: value,
-      originValue: value
-    };
-  }),
-      values = _useState[0],
-      setValues = _useState[1];
+var dictionary = new WeakMap();
 
-  var value = values.value,
-      originValue = values.originValue;
+var paintText = function paintText(entries) {
+  entries.forEach(function (entry) {
+    var _dictionary$get;
 
-  var _useState2 = useState(''),
-      emptyValue = _useState2[0],
-      setEmptyValue = _useState2[1];
-
-  var _useState3 = useState(false),
-      focused = _useState3[0],
-      setFocused = _useState3[1];
+    return (_dictionary$get = dictionary.get(entry.target)) == null ? void 0 : _dictionary$get();
+  });
+};
 
+var resizeObserver = globalObject.ResizeObserver ? new globalObject.ResizeObserver(debounce(paintText)) : null;
+export var MaskedInputElement = forwardRefAndName('MaskedInputElement', function MaskedInputElement(props, ref) {
   var inputRef = useRef(null);
-  var rootNodeRef = React.useRef(null);
+  var spanRef = useRef(null);
+  var focused = useRef(false);
+
+  var _useState = useState(''),
+      uncontrolledValue = _useState[0],
+      setUncontrolledValue = _useState[1];
+
+  var inputStyle = React.useRef();
   var theme = useContext(ThemeContext);
-  var expectedChangesRef = useRef(false);
-  var isFirstRender = useRef(true);
+
+  var children = props.children,
+      onInput = props.onInput,
+      onFocus = props.onFocus,
+      onBlur = props.onBlur,
+      maskChars = props.maskChars,
+      inputProps = _objectWithoutPropertiesLoose(props, _excluded);
+
   useImperativeHandle(ref, function () {
     return {
       input: inputRef.current,
       getRootNode: function getRootNode() {
-        return rootNodeRef.current;
+        return inputRef.current;
       }
     };
   }, []);
   useEffect(function () {
-    setEmptyValue(getEmptyValue(props.mask, props.maskChar, props.formatChars));
-  }, [props.mask, props.maskChar]);
-  useEffect(function () {
-    if (isFirstRender.current) {
-      return;
+    if (spanRef.current) {
+      dictionary.set(spanRef.current, paintText);
+      resizeObserver == null ? void 0 : resizeObserver.observe(spanRef.current);
     }
 
-    var value = props.value ? props.value.toString() : '';
-    setValues(function (values) {
-      return _extends({}, values, {
-        value: value
-      });
-    });
-  }, [props.value]);
-  useEffect(function () {
-    isFirstRender.current = false;
-  }, []);
+    if (inputRef.current) {
+      dictionary.set(inputRef.current, paintText);
+      resizeObserver == null ? void 0 : resizeObserver.observe(inputRef.current);
+    }
 
-  var mask = props.mask,
-      maskChar = props.maskChar,
-      formatChars = props.formatChars,
-      alwaysShowMask = props.alwaysShowMask,
-      maxLength = props.maxLength,
-      onUnexpectedInput = props.onUnexpectedInput,
-      defaultValue = props.defaultValue,
-      style = props.style,
-      inputProps = _objectWithoutPropertiesLoose(props, _excluded);
+    return function () {
+      if (spanRef.current) {
+        dictionary["delete"](spanRef.current);
+        resizeObserver == null ? void 0 : resizeObserver.unobserve(spanRef.current);
+      }
 
-  var leftClass = (style == null ? void 0 : style.textAlign) !== 'right' && styles.inputMaskLeft();
-
-  var _getCurrentValue = getCurrentValue({
-    value: value,
-    originValue: originValue,
-    emptyValue: emptyValue
-  }, focused, maskChar),
-      currentValue = _getCurrentValue[0],
-      left = _getCurrentValue[1],
-      right = _getCurrentValue[2];
-  /* В rightHelper не DEFAULT_MASK_CHAR, а специальная логика для обработки подчркивания('_').
-   * Не менять на DEFAULT_MASK_CHAR
-   */
-
-
-  var rightHelper = right.split('').map(function (_char, i) {
-    return _char === '_' ? /*#__PURE__*/React.createElement(MaskCharLowLine, {
-      key: i
-    }) : _char;
-  });
-  var leftHelper = (style == null ? void 0 : style.textAlign) !== 'right' && /*#__PURE__*/React.createElement("span", {
-    style: {
-      color: 'transparent'
+      if (inputRef.current) {
+        dictionary["delete"](inputRef.current);
+        resizeObserver == null ? void 0 : resizeObserver.unobserve(inputRef.current);
+      }
+    };
+  }, []);
+  useEffect(function () {
+    if (inputRef.current) {
+      inputStyle.current = getComputedStyle(inputRef.current);
     }
-  }, left);
-  var isMaskVisible = alwaysShowMask || focused;
-  return /*#__PURE__*/React.createElement("span", {
-    "data-tid": MaskedInputElementDataTids.root,
-    ref: rootNodeRef,
-    className: styles.container(),
-    "x-ms-format-detection": "none"
-  }, /*#__PURE__*/React.createElement(IMaskInput, _extends({}, inputProps, {
-    mask: mask,
-    definitions: getDefinitions(formatChars),
-    eager: true,
-    overwrite: 'shift',
-    onAccept: handleAccept,
+  });
+  var placeholderColor = !(props.value || props.defaultValue);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.cloneElement(children, _extends({}, inputProps, {
     onInput: handleInput,
     onFocus: handleFocus,
     onBlur: handleBlur,
-    value: currentValue,
     inputRef: inputRef,
-    style: _extends({}, style)
-  })), isMaskVisible && /*#__PURE__*/React.createElement("span", {
-    className: cx(styles.inputMask(theme), leftClass)
-  }, leftHelper, rightHelper));
-
-  function getValue(props) {
-    var _ref, _props$value;
-
-    return ((_ref = (_props$value = props.value) != null ? _props$value : props.defaultValue) != null ? _ref : '').toString();
-  }
-  /** В imask вызывается только когда значение с маской меняется*/
-
-
-  function handleAccept(value) {
-    expectedChangesRef.current = true; // Если разделить на 2 setState - между первым и вторым происходит рендер и иногда символы "съедаются"
-
-    setValues({
-      value: value,
-      originValue: value
-    });
-    setTimeout(function () {
-      /** При вводе с клавиатуры срабатывает handleAccept, за ним handleInput
-       * expectedChanges - нужен чтобы сообщить из handleAccept в handleInput, что значение с маской изменилось.
-       * Если маска не изменилась и сработал handleInput, вызываем handleUnexpectedInput. Ввели значение не по маске.
-       * setTimeout нужен чтобы сбросить expectedChanges, например, если изменилось значение в пропах.
-       * Маска изменится, вызовется handleAccept, но не handleInput
-       */
-      expectedChangesRef.current = false;
-    });
-  }
-  /** Отслеживаем неправильные нажатия,
-   * handleAccept не вызывается когда значение с маской не меняется, а handleInput вызывается
-   * Сначала вызывается handleAccept, затем handleInput
-   * */
-
+    className: cx(props.className, !props.disabled && styles.input(theme), !props.disabled && placeholderColor && styles.inputPlaceholder(theme))
+  })), /*#__PURE__*/React.createElement("span", {
+    style: {
+      visibility: 'hidden',
+      position: 'absolute'
+    },
+    ref: spanRef
+  }));
 
   function handleInput(e) {
-    var value = e.target.value;
+    setUncontrolledValue(e.target.value); // iMask может изменить value после вызова onInput
 
-    if (!expectedChangesRef.current && value === originValue) {
-      handleUnexpectedInput();
-    }
-
-    expectedChangesRef.current = false;
+    setTimeout(paintText);
+    onInput == null ? void 0 : onInput(e);
   }
 
-  function handleFocus(event) {
-    setFocused(true);
-    expectedChangesRef.current = false;
-
-    if (props.onFocus) {
-      props.onFocus(event);
-    }
+  function handleFocus(e) {
+    focused.current = true;
+    setTimeout(paintText);
+    onFocus == null ? void 0 : onFocus(e);
   }
 
-  function handleBlur(event) {
-    if (value === getFocusPrefix(emptyValue, maskChar)) {
-      setValues({
-        value: '',
-        originValue: ''
-      });
-    }
+  function handleBlur(e) {
+    focused.current = false;
+    setTimeout(paintText);
+    onBlur == null ? void 0 : onBlur(e);
+  }
 
-    setFocused(false);
+  function paintText() {
+    var _shadow, _shadow2;
 
-    if (props.onBlur) {
-      props.onBlur(event);
+    if (!spanRef.current || !inputRef.current || !inputStyle.current || !isBrowser(globalObject) || props.disabled) {
+      return;
     }
-  }
 
-  function handleUnexpectedInput() {
-    if (props.onUnexpectedInput) {
-      props.onUnexpectedInput(value);
+    var shadow = spanRef.current.shadowRoot;
+    var styleEl = (_shadow = shadow) == null ? void 0 : _shadow.getElementById('style');
+    var spanEl = (_shadow2 = shadow) == null ? void 0 : _shadow2.getElementById('span');
+
+    if (!(styleEl && spanEl)) {
+      shadow = spanRef.current.attachShadow({
+        mode: 'open'
+      });
+      styleEl = globalObject.document.createElement('style');
+      styleEl.setAttribute('id', 'style');
+      spanEl = globalObject.document.createElement('span');
+      spanEl.setAttribute('id', 'span');
+      shadow.appendChild(styleEl);
+      shadow.appendChild(spanEl);
     }
-  }
 
-  function getEmptyValue(mask, maskChar, formatChars) {
-    var maskPattern = IMask.createMask({
-      mask: mask,
-      definitions: getDefinitions(formatChars),
-      lazy: false,
-      placeholderChar: getMaskChar(maskChar)
-    });
-    return maskPattern.appendTail('').inserted;
+    var style = inputStyle.current;
+    var val = focused.current || uncontrolledValue || props.value || props.defaultValue ? inputRef.current.value.split(new RegExp(props.maskChars.join('|')))[0] || '' : '';
+    styleEl.textContent = "<style> * { font: " + style.font + "; } </style>";
+    spanEl.textContent = val;
+    var inputRect = inputRef.current.getBoundingClientRect();
+    var filledRect = spanRef.current.getBoundingClientRect();
+    var threshold = filledRect.width / (inputRect.width / 100);
+    var degree = style.fontStyle === 'italic' ? 100 : 90;
+    inputRef.current.style.backgroundImage = "\n      linear-gradient(\n          " + degree + "deg,\n          " + theme.inputTextColor + " " + threshold + "%,\n          " + theme.placeholderColor + " " + threshold + "%\n      )";
   }
 });

package/internal/MaskedInputElement/MaskedInputElement/MaskedInputElement.js.map

@@ -1 +1 @@
-{"version":3,"sources":["MaskedInputElement.tsx"],"names":["React","useContext","useEffect","useImperativeHandle","useRef","useState","IMaskInput","IMask","ThemeContext","MaskCharLowLine","cx","forwardRefAndName","styles","getCurrentValue","getDefinitions","getFocusPrefix","getMaskChar","MaskedInputElementDataTids","root","MaskedInputElement","props","ref","value","getValue","originValue","values","setValues","emptyValue","setEmptyValue","focused","setFocused","inputRef","rootNodeRef","theme","expectedChangesRef","isFirstRender","input","current","getRootNode","getEmptyValue","mask","maskChar","formatChars","toString","alwaysShowMask","maxLength","onUnexpectedInput","defaultValue","style","inputProps","leftClass","textAlign","inputMaskLeft","currentValue","left","right","rightHelper","split","map","_char","i","leftHelper","color","isMaskVisible","container","handleAccept","handleInput","handleFocus","handleBlur","inputMask","setTimeout","e","target","handleUnexpectedInput","event","onFocus","onBlur","maskPattern","createMask","definitions","lazy","placeholderChar","appendTail","inserted"],"mappings":"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","sourcesContent":["import React, { ForwardedRef, useContext, useEffect, useImperativeHandle, useRef, useState } from 'react';\nimport { IMaskInput, IMask } from 'react-imask';\n\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { MaskCharLowLine } from '../MaskCharLowLine';\nimport { cx } from '../../lib/theming/Emotion';\nimport { InputElement, InputElementProps } from '../../components/Input';\nimport { forwardRefAndName } from '../../lib/forwardRefAndName';\n\nimport { styles } from './MaskedInputElement.styles';\nimport { getCurrentValue, getDefinitions, getFocusPrefix, getMaskChar } from './MaskedInputElement.helpers';\n\nexport interface MaskedInputElementProps extends InputElementProps {\n  mask: string;\n  maskChar?: string | null;\n  formatChars?: { [key: string]: string };\n  alwaysShowMask?: boolean;\n  onUnexpectedInput: (value: string) => void;\n}\n\nexport const MaskedInputElementDataTids = {\n  root: 'MaskedInput__root',\n} as const;\n\nexport const MaskedInputElement = forwardRefAndName(\n  'MaskedInputElement',\n  function MaskedInputElement(props: MaskedInputElementProps, ref: ForwardedRef<InputElement>) {\n    const [values, setValues] = useState<{ value: string; originValue: string }>(() => {\n      const value = getValue(props);\n      return { value, originValue: value };\n    });\n    const { value, originValue } = values;\n\n    const [emptyValue, setEmptyValue] = useState('');\n    const [focused, setFocused] = useState(false);\n    const inputRef = useRef<HTMLInputElement | null>(null);\n    const rootNodeRef = React.useRef<HTMLDivElement>(null);\n    const theme = useContext(ThemeContext);\n    const expectedChangesRef = useRef(false);\n    const isFirstRender = useRef(true);\n\n    useImperativeHandle(\n      ref,\n      () => ({\n        input: inputRef.current,\n        getRootNode: () => rootNodeRef.current,\n      }),\n      [],\n    );\n\n    useEffect(() => {\n      setEmptyValue(getEmptyValue(props.mask, props.maskChar, props.formatChars));\n    }, [props.mask, props.maskChar]);\n\n    useEffect(() => {\n      if (isFirstRender.current) {\n        return;\n      }\n\n      const value = props.value ? props.value.toString() : '';\n      setValues((values) => ({ ...values, value }));\n    }, [props.value]);\n\n    useEffect(() => {\n      isFirstRender.current = false;\n    }, []);\n\n    const {\n      mask,\n      maskChar,\n      formatChars,\n      alwaysShowMask,\n      maxLength,\n      onUnexpectedInput,\n      defaultValue,\n      style,\n      ...inputProps\n    } = props;\n\n    const leftClass = style?.textAlign !== 'right' && styles.inputMaskLeft();\n    const [currentValue, left, right] = getCurrentValue({ value, originValue, emptyValue }, focused, maskChar);\n\n    /* В rightHelper не DEFAULT_MASK_CHAR, а специальная логика для обработки подчркивания('_').\n     * Не менять на DEFAULT_MASK_CHAR\n     */\n    const rightHelper = right.split('').map((_char, i) => (_char === '_' ? <MaskCharLowLine key={i} /> : _char));\n    const leftHelper = style?.textAlign !== 'right' && <span style={{ color: 'transparent' }}>{left}</span>;\n    const isMaskVisible = alwaysShowMask || focused;\n\n    return (\n      <span\n        data-tid={MaskedInputElementDataTids.root}\n        ref={rootNodeRef}\n        className={styles.container()}\n        x-ms-format-detection=\"none\"\n      >\n        <IMaskInput\n          {...inputProps}\n          mask={mask}\n          definitions={getDefinitions(formatChars)}\n          eager\n          overwrite={'shift'}\n          onAccept={handleAccept}\n          onInput={handleInput}\n          onFocus={handleFocus}\n          onBlur={handleBlur}\n          value={currentValue}\n          inputRef={inputRef}\n          style={{ ...style }}\n        />\n        {isMaskVisible && (\n          <span className={cx(styles.inputMask(theme), leftClass)}>\n            {leftHelper}\n            {rightHelper}\n          </span>\n        )}\n      </span>\n    );\n\n    function getValue(props: MaskedInputElementProps): string {\n      return (props.value ?? props.defaultValue ?? '').toString();\n    }\n\n    /** В imask вызывается только когда значение с маской меняется*/\n    function handleAccept(value: string) {\n      expectedChangesRef.current = true;\n      // Если разделить на 2 setState - между первым и вторым происходит рендер и иногда символы \"съедаются\"\n      setValues({ value, originValue: value });\n\n      setTimeout(() => {\n        /** При вводе с клавиатуры срабатывает handleAccept, за ним handleInput\n         * expectedChanges - нужен чтобы сообщить из handleAccept в handleInput, что значение с маской изменилось.\n         * Если маска не изменилась и сработал handleInput, вызываем handleUnexpectedInput. Ввели значение не по маске.\n         * setTimeout нужен чтобы сбросить expectedChanges, например, если изменилось значение в пропах.\n         * Маска изменится, вызовется handleAccept, но не handleInput\n         */\n        expectedChangesRef.current = false;\n      });\n    }\n\n    /** Отслеживаем неправильные нажатия,\n     * handleAccept не вызывается когда значение с маской не меняется, а handleInput вызывается\n     * Сначала вызывается handleAccept, затем handleInput\n     * */\n    function handleInput(e: React.ChangeEvent<HTMLInputElement>) {\n      const value = e.target.value;\n\n      if (!expectedChangesRef.current && value === originValue) {\n        handleUnexpectedInput();\n      }\n\n      expectedChangesRef.current = false;\n    }\n\n    function handleFocus(event: React.FocusEvent<HTMLInputElement>) {\n      setFocused(true);\n\n      expectedChangesRef.current = false;\n\n      if (props.onFocus) {\n        props.onFocus(event);\n      }\n    }\n\n    function handleBlur(event: React.FocusEvent<HTMLInputElement>) {\n      if (value === getFocusPrefix(emptyValue, maskChar)) {\n        setValues({ value: '', originValue: '' });\n      }\n\n      setFocused(false);\n\n      if (props.onBlur) {\n        props.onBlur(event);\n      }\n    }\n\n    function handleUnexpectedInput() {\n      if (props.onUnexpectedInput) {\n        props.onUnexpectedInput(value);\n      }\n    }\n\n    function getEmptyValue(\n      mask: MaskedInputElementProps['mask'],\n      maskChar: MaskedInputElementProps['maskChar'],\n      formatChars: MaskedInputElementProps['formatChars'],\n    ): string {\n      const maskPattern = IMask.createMask({\n        mask,\n        definitions: getDefinitions(formatChars),\n        lazy: false,\n        placeholderChar: getMaskChar(maskChar),\n      });\n      return maskPattern.appendTail('').inserted;\n    }\n  },\n);\n"]}
+{"version":3,"sources":["MaskedInputElement.tsx"],"names":["React","useContext","useEffect","useImperativeHandle","useRef","useState","globalObject","isBrowser","debounce","ThemeContext","forwardRefAndName","cx","styles","MaskedInputElementDataTids","root","dictionary","WeakMap","paintText","entries","forEach","entry","get","target","resizeObserver","ResizeObserver","MaskedInputElement","props","ref","inputRef","spanRef","focused","uncontrolledValue","setUncontrolledValue","inputStyle","theme","children","onInput","onFocus","onBlur","maskChars","inputProps","input","current","getRootNode","set","observe","unobserve","getComputedStyle","placeholderColor","value","defaultValue","cloneElement","handleInput","handleFocus","handleBlur","className","disabled","inputPlaceholder","visibility","position","e","setTimeout","shadow","shadowRoot","styleEl","getElementById","spanEl","attachShadow","mode","document","createElement","setAttribute","appendChild","style","val","split","RegExp","join","textContent","font","inputRect","getBoundingClientRect","filledRect","threshold","width","degree","fontStyle","backgroundImage","inputTextColor"],"mappings":"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","sourcesContent":["import React, { ForwardedRef, useContext, useEffect, useImperativeHandle, useRef, useState } from 'react';\nimport { IMaskInputProps } from 'react-imask';\nimport { globalObject, isBrowser } from '@skbkontur/global-object';\nimport debounce from 'lodash.debounce';\n\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { InputElement, InputElementProps } from '../../components/Input';\nimport { forwardRefAndName } from '../../lib/forwardRefAndName';\nimport { cx } from '../../lib/theming/Emotion';\n\nimport { styles } from './MaskedInputElement.styles';\n\nexport type MaskedInputElementProps = IMaskInputProps<HTMLInputElement> &\n  InputElementProps & {\n    maskChars: string[];\n    children: React.ReactElement;\n  };\n\nexport const MaskedInputElementDataTids = {\n  root: 'MaskedInput__root',\n} as const;\n\nconst dictionary = new WeakMap<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\nexport const MaskedInputElement = forwardRefAndName(\n  'MaskedInputElement',\n  function MaskedInputElement(props: MaskedInputElementProps, ref: ForwardedRef<InputElement>) {\n    const inputRef = useRef<HTMLInputElement | null>(null);\n    const spanRef = useRef<HTMLSpanElement | null>(null);\n    const focused = useRef(false);\n    const [uncontrolledValue, setUncontrolledValue] = useState('');\n    const inputStyle = React.useRef<CSSStyleDeclaration>();\n    const theme = useContext(ThemeContext);\n\n    const { children, onInput, onFocus, onBlur, maskChars, ...inputProps } = props;\n\n    useImperativeHandle(\n      ref,\n      () => ({\n        input: inputRef.current,\n        getRootNode: () => inputRef.current,\n      }),\n      [],\n    );\n\n    useEffect(() => {\n      if (spanRef.current) {\n        dictionary.set(spanRef.current, paintText);\n        resizeObserver?.observe(spanRef.current);\n      }\n      if (inputRef.current) {\n        dictionary.set(inputRef.current, paintText);\n        resizeObserver?.observe(inputRef.current);\n      }\n\n      return () => {\n        if (spanRef.current) {\n          dictionary.delete(spanRef.current);\n          resizeObserver?.unobserve(spanRef.current);\n        }\n        if (inputRef.current) {\n          dictionary.delete(inputRef.current);\n          resizeObserver?.unobserve(inputRef.current);\n        }\n      };\n    }, []);\n\n    useEffect(() => {\n      if (inputRef.current) {\n        inputStyle.current = getComputedStyle(inputRef.current);\n      }\n    });\n\n    const placeholderColor = !(props.value || props.defaultValue);\n\n    return (\n      <>\n        {React.cloneElement(children, {\n          ...inputProps,\n          onInput: handleInput,\n          onFocus: handleFocus,\n          onBlur: handleBlur,\n          inputRef,\n          className: cx(\n            props.className,\n            !props.disabled && styles.input(theme),\n            !props.disabled && placeholderColor && styles.inputPlaceholder(theme),\n          ),\n        })}\n        <span style={{ visibility: 'hidden', position: 'absolute' }} ref={spanRef} />\n      </>\n    );\n\n    function handleInput(e: React.ChangeEvent<HTMLInputElement>) {\n      setUncontrolledValue(e.target.value);\n\n      // iMask может изменить value после вызова onInput\n      setTimeout(paintText);\n\n      onInput?.(e);\n    }\n\n    function handleFocus(e: React.FocusEvent<HTMLInputElement>) {\n      focused.current = true;\n      setTimeout(paintText);\n\n      onFocus?.(e);\n    }\n\n    function handleBlur(e: React.FocusEvent<HTMLInputElement>) {\n      focused.current = false;\n      setTimeout(paintText);\n\n      onBlur?.(e);\n    }\n\n    function paintText() {\n      if (!spanRef.current || !inputRef.current || !inputStyle.current || !isBrowser(globalObject) || props.disabled) {\n        return;\n      }\n\n      let shadow = spanRef.current.shadowRoot;\n      let styleEl = shadow?.getElementById('style');\n      let spanEl = shadow?.getElementById('span');\n\n      if (!(styleEl && spanEl)) {\n        shadow = spanRef.current.attachShadow({ mode: 'open' });\n\n        styleEl = globalObject.document.createElement('style');\n        styleEl.setAttribute('id', 'style');\n\n        spanEl = globalObject.document.createElement('span');\n        spanEl.setAttribute('id', 'span');\n\n        shadow.appendChild(styleEl);\n        shadow.appendChild(spanEl);\n      }\n\n      const style = inputStyle.current;\n\n      const val =\n        focused.current || uncontrolledValue || props.value || props.defaultValue\n          ? inputRef.current.value.split(new RegExp(props.maskChars.join('|')))[0] || ''\n          : '';\n\n      styleEl.textContent = `<style> * { font: ${style.font}; } </style>`;\n      spanEl.textContent = val;\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      inputRef.current.style.backgroundImage = `\n      linear-gradient(\n          ${degree}deg,\n          ${theme.inputTextColor} ${threshold}%,\n          ${theme.placeholderColor} ${threshold}%\n      )`;\n    }\n  },\n);\n"]}

package/internal/MaskedInputElement/MaskedInputElement.d.ts

@@ -1,13 +1,10 @@
+import React from 'react';
+import { IMaskInputProps } from 'react-imask';
 import { InputElement, InputElementProps } from '../../components/Input';
-export interface MaskedInputElementProps extends InputElementProps {
-    mask: string;
-    maskChar?: string | null;
-    formatChars?: {
-        [key: string]: string;
-    };
-    alwaysShowMask?: boolean;
-    onUnexpectedInput: (value: string) => void;
-}
+export declare type MaskedInputElementProps = IMaskInputProps<HTMLInputElement> & InputElementProps & {
+    maskChars: string[];
+    children: React.ReactElement;
+};
 export declare const MaskedInputElementDataTids: {
     readonly root: "MaskedInput__root";
 };

package/internal/MaskedInputElement/MaskedInputElement.styles/MaskedInputElement.styles.js

@@ -1,16 +1,13 @@
 import _taggedTemplateLiteralLoose from "@babel/runtime/helpers/esm/taggedTemplateLiteralLoose";
 
-var _templateObject, _templateObject2, _templateObject3;
+var _templateObject, _templateObject2;
 
 import { css, memoizeStyle } from "../../../lib/theming/Emotion";
 export var styles = memoizeStyle({
-  container: function container() {
-    return css(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n      display: inline-flex;\n      position: relative;\n      font-size: inherit;\n      flex: 100% 1 1;\n    "])));
+  input: function input(t) {
+    return css(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n      display: inline-block;\n      background-color: ", ";\n      background-size: 100%;\n      background-repeat: repeat;\n      background-clip: text;\n      -webkit-text-fill-color: transparent;\n    "])), t.inputTextColor);
   },
-  inputMask: function inputMask(t) {
-    return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n      color: ", ";\n      pointer-events: none;\n      font-size: inherit;\n      z-index: 5;\n      user-select: none;\n    "])), t.placeholderColor);
-  },
-  inputMaskLeft: function inputMaskLeft() {
-    return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n      position: absolute;\n      top: 0;\n      left: 0;\n      right: 0;\n    "])));
+  inputPlaceholder: function inputPlaceholder(t) {
+    return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n      background-color: ", ";\n    "])), t.inputPlaceholderColor);
   }
 });

package/internal/MaskedInputElement/MaskedInputElement.styles/MaskedInputElement.styles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["MaskedInputElement.styles.ts"],"names":["css","memoizeStyle","styles","container","inputMask","t","placeholderColor","inputMaskLeft"],"mappings":"wJAAA,SAASA,GAAT,EAAcC,YAAd,QAAkC,2BAAlC;;;AAGA,OAAO,IAAMC,MAAM,GAAGD,YAAY,CAAC;AACjCE,EAAAA,SADiC,uBACrB;AACV,WAAOH,GAAP;;;;;;AAMD,GARgC;AASjCI,EAAAA,SATiC,qBASvBC,CATuB,EASb;AAClB,WAAOL,GAAP;AACWK,IAAAA,CAAC,CAACC,gBADb;;;;;;AAOD,GAjBgC;AAkBjCC,EAAAA,aAlBiC,2BAkBjB;AACd,WAAOP,GAAP;;;;;;AAMD,GAzBgC,EAAD,CAA3B","sourcesContent":["import { css, memoizeStyle } from '../../lib/theming/Emotion';\nimport { Theme } from '../../lib/theming/Theme';\n\nexport const styles = memoizeStyle({\n  container() {\n    return css`\n      display: inline-flex;\n      position: relative;\n      font-size: inherit;\n      flex: 100% 1 1;\n    `;\n  },\n  inputMask(t: Theme) {\n    return css`\n      color: ${t.placeholderColor};\n      pointer-events: none;\n      font-size: inherit;\n      z-index: 5;\n      user-select: none;\n    `;\n  },\n  inputMaskLeft() {\n    return css`\n      position: absolute;\n      top: 0;\n      left: 0;\n      right: 0;\n    `;\n  },\n});\n"]}
+{"version":3,"sources":["MaskedInputElement.styles.ts"],"names":["css","memoizeStyle","styles","input","t","inputTextColor","inputPlaceholder","inputPlaceholderColor"],"mappings":"sIAAA,SAASA,GAAT,EAAcC,YAAd,QAAkC,2BAAlC;;;AAGA,OAAO,IAAMC,MAAM,GAAGD,YAAY,CAAC;AACjCE,EAAAA,KADiC,iBAC3BC,CAD2B,EACjB;AACd,WAAOJ,GAAP;;AAEsBI,IAAAA,CAAC,CAACC,cAFxB;;;;;;AAQD,GAVgC;AAWjCC,EAAAA,gBAXiC,4BAWhBF,CAXgB,EAWN;AACzB,WAAOJ,GAAP;AACsBI,IAAAA,CAAC,CAACG,qBADxB;;AAGD,GAfgC,EAAD,CAA3B","sourcesContent":["import { css, memoizeStyle } from '../../lib/theming/Emotion';\nimport { Theme } from '../../lib/theming/Theme';\n\nexport const styles = memoizeStyle({\n  input(t: Theme) {\n    return css`\n      display: inline-block;\n      background-color: ${t.inputTextColor};\n      background-size: 100%;\n      background-repeat: repeat;\n      background-clip: text;\n      -webkit-text-fill-color: transparent;\n    `;\n  },\n  inputPlaceholder(t: Theme) {\n    return css`\n      background-color: ${t.inputPlaceholderColor};\n    `;\n  },\n});\n"]}

package/internal/MaskedInputElement/MaskedInputElement.styles.d.ts

@@ -1,6 +1,5 @@
 import { Theme } from '../../lib/theming/Theme';
 export declare const styles: {
-    container(): string;
-    inputMask(t: Theme): string;
-    inputMaskLeft(): string;
+    input(t: Theme): string;
+    inputPlaceholder(t: Theme): string;
 };

package/internal/ThemeShowcase/ThemeShowcase.md

@@ -1,13 +1,13 @@
-### Таблица переменных
-
-Список использующихся переменных для каждого кастомизируемого компонента.
-<br/>
-Таблица фильтруется по названию переменной.
-<br/>
-Значения в колонке `Variable name` кликабельны.
-
-```jsx harmony
-import { ThemeShowcase } from '@skbkontur/react-ui/internal/ThemeShowcase/ThemeShowcase';
-
-<ThemeShowcase />;
-```
+### Таблица переменных
+
+Список использующихся переменных для каждого кастомизируемого компонента.
+<br/>
+Таблица фильтруется по названию переменной.
+<br/>
+Значения в колонке `Variable name` кликабельны.
+
+```jsx harmony
+import { ThemeShowcase } from '@skbkontur/react-ui/internal/ThemeShowcase/ThemeShowcase';
+
+<ThemeShowcase />;
+```

package/lib/styles/HoldSelectionColor/HoldSelectionColor.js

@@ -6,4 +6,4 @@ import { injectGlobal } from "../../theming/Emotion";
 import { isChrome } from "../../client"; // This is for screenshot tests
 
 var Highlight = isChrome ? '#3390ff' : '#3399ff';
-injectGlobal(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n  *::selection {\n    background-color: ", ";\n  }\n  input::selection,\n  textarea::selection {\n    color: white;\n  }\n"])), Highlight);
+injectGlobal(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n  *::selection {\n    background-color: ", ";\n  }\n  input::selection,\n  textarea::selection {\n    color: white;\n    -webkit-text-fill-color: white;\n  }\n"])), Highlight);

package/lib/styles/HoldSelectionColor/HoldSelectionColor.js.map

@@ -1 +1 @@
-{"version":3,"sources":["HoldSelectionColor.ts"],"names":["injectGlobal","isChrome","Highlight"],"mappings":"oHAAA,SAASA,YAAT,QAA6B,oBAA7B;AACA,SAASC,QAAT,QAAyB,WAAzB;;AAEA;AACA,IAAMC,SAAS,GAAGD,QAAQ,GAAG,SAAH,GAAe,SAAzC;;AAEAD,YAAY;;AAEYE,SAFZ,CAAZ","sourcesContent":["import { injectGlobal } from '../theming/Emotion';\nimport { isChrome } from '../client';\n\n// This is for screenshot tests\nconst Highlight = isChrome ? '#3390ff' : '#3399ff';\n\ninjectGlobal`\n  *::selection {\n    background-color: ${Highlight};\n  }\n  input::selection,\n  textarea::selection {\n    color: white;\n  }\n`;\n"]}
+{"version":3,"sources":["HoldSelectionColor.ts"],"names":["injectGlobal","isChrome","Highlight"],"mappings":"oHAAA,SAASA,YAAT,QAA6B,oBAA7B;AACA,SAASC,QAAT,QAAyB,WAAzB;;AAEA;AACA,IAAMC,SAAS,GAAGD,QAAQ,GAAG,SAAH,GAAe,SAAzC;;AAEAD,YAAY;;AAEYE,SAFZ,CAAZ","sourcesContent":["import { injectGlobal } from '../theming/Emotion';\nimport { isChrome } from '../client';\n\n// This is for screenshot tests\nconst Highlight = isChrome ? '#3390ff' : '#3399ff';\n\ninjectGlobal`\n  *::selection {\n    background-color: ${Highlight};\n  }\n  input::selection,\n  textarea::selection {\n    color: white;\n    -webkit-text-fill-color: white;\n  }\n`;\n"]}

package/lib/styles/UiFont/UiFont.js

@@ -0,0 +1,30 @@
+import _taggedTemplateLiteralLoose from "@babel/runtime/helpers/esm/taggedTemplateLiteralLoose";
+
+var _templateObject, _templateObject2;
+
+import { globalObject, isBrowser } from '@skbkontur/global-object';
+import { injectGlobal, prefix } from "../../theming/Emotion";
+export var uiFontGlobalClasses = prefix('ui-font')({
+  root: 'root',
+  element: 'element'
+});
+var uiFontName = 'ui';
+injectGlobal(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n  @font-face {\n    font-family: ", ";\n    src: url('https://s.kontur.ru/common-v2/fonts/ui/ui.woff2') format('woff2'),\n      url('https://s.kontur.ru/common-v2/fonts/ui/ui.woff') format('woff');\n  }\n"])), uiFontName);
+var $this = globalObject;
+
+if (isBrowser($this)) {
+  var baseFont = function baseFont() {
+    return $this.getComputedStyle($this.document.body).fontFamily;
+  };
+
+  var injectFont = function injectFont() {
+    return injectGlobal(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n    .", ",\n    .", " > *,\n    .", " {\n        font-family: ", ", ", ";\n      }\n    "])), uiFontGlobalClasses.root, uiFontGlobalClasses.root, uiFontGlobalClasses.element, uiFontName, baseFont());
+  };
+
+  if ($this.document.fonts) {
+    $this.document.fonts.addEventListener('loading', injectFont);
+  } else {
+    // ie11
+    setTimeout(injectFont);
+  }
+}

package/lib/styles/UiFont/UiFont.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["UiFont.ts"],"names":["globalObject","isBrowser","injectGlobal","prefix","uiFontGlobalClasses","root","element","uiFontName","$this","baseFont","getComputedStyle","document","body","fontFamily","injectFont","fonts","addEventListener","setTimeout"],"mappings":"sIAAA,SAASA,YAAT,EAAuBC,SAAvB,QAAwC,0BAAxC;;AAEA,SAASC,YAAT,EAAuBC,MAAvB,QAAqC,oBAArC;;AAEA,OAAO,IAAMC,mBAAmB,GAAGD,MAAM,CAAC,SAAD,CAAN,CAAkB;AACnDE,EAAAA,IAAI,EAAE,MAD6C;AAEnDC,EAAAA,OAAO,EAAE,SAF0C,EAAlB,CAA5B;;;AAKP,IAAMC,UAAU,GAAG,IAAnB;;AAEAL,YAAY;;AAEOK,UAFP,CAAZ;;;;;;AAQA,IAAMC,KAAK,GAAGR,YAAd;;AAEA,IAAIC,SAAS,CAACO,KAAD,CAAb,EAAsB;AACpB,MAAMC,QAAQ,GAAG,SAAXA,QAAW,WAAMD,KAAK,CAACE,gBAAN,CAAuBF,KAAK,CAACG,QAAN,CAAeC,IAAtC,EAA4CC,UAAlD,EAAjB;;AAEA,MAAMC,UAAU,GAAG,SAAbA,UAAa,WAAMZ,YAAN;AACdE,IAAAA,mBAAmB,CAACC,IADN;AAEdD,IAAAA,mBAAmB,CAACC,IAFN;AAGdD,IAAAA,mBAAmB,CAACE,OAHN;AAIEC,IAAAA,UAJF,EAIiBE,QAAQ,EAJzB,GAAnB;;;;AAQA,MAAID,KAAK,CAACG,QAAN,CAAeI,KAAnB,EAA0B;AACxBP,IAAAA,KAAK,CAACG,QAAN,CAAeI,KAAf,CAAqBC,gBAArB,CAAsC,SAAtC,EAAiDF,UAAjD;AACD,GAFD,MAEO;AACL;AACAG,IAAAA,UAAU,CAACH,UAAD,CAAV;AACD;AACF","sourcesContent":["import { globalObject, isBrowser } from '@skbkontur/global-object';\n\nimport { injectGlobal, prefix } from '../theming/Emotion';\n\nexport const uiFontGlobalClasses = prefix('ui-font')({\n  root: 'root',\n  element: 'element',\n});\n\nconst uiFontName = 'ui';\n\ninjectGlobal`\n  @font-face {\n    font-family: ${uiFontName};\n    src: url('https://s.kontur.ru/common-v2/fonts/ui/ui.woff2') format('woff2'),\n      url('https://s.kontur.ru/common-v2/fonts/ui/ui.woff') format('woff');\n  }\n`;\n\nconst $this = globalObject;\n\nif (isBrowser($this)) {\n  const baseFont = () => $this.getComputedStyle($this.document.body).fontFamily;\n\n  const injectFont = () => injectGlobal`\n    .${uiFontGlobalClasses.root},\n    .${uiFontGlobalClasses.root} > *,\n    .${uiFontGlobalClasses.element} {\n        font-family: ${uiFontName}, ${baseFont()};\n      }\n    `;\n\n  if ($this.document.fonts) {\n    $this.document.fonts.addEventListener('loading', injectFont);\n  } else {\n    // ie11\n    setTimeout(injectFont);\n  }\n}\n"]}

package/lib/styles/UiFont/package.json

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

package/lib/styles/UiFont.d.ts

@@ -0,0 +1,4 @@
+export declare const uiFontGlobalClasses: {
+    root: string;
+    element: string;
+};

package/package.json

@@ -1,11 +1,11 @@
 {
   "name": "@skbkontur/react-ui",
-  "version": "4.25.0",
+  "version": "4.25.1-MaskedInput-fix.1",
   "description": "UI Components",
   "main": "cjs/index.js",
   "module": "index.js",
   "sideEffects": false,
-  "homepage": "https://tech.skbkontur.ru/react-ui/4.25.0/",
+  "homepage": "https://tech.skbkontur.ru/react-ui",
   "repository": {
     "type": "git",
     "url": "git@github.com:skbkontur/retail-ui.git"
@@ -152,8 +152,5 @@
   "peerDependencies": {
     "react": ">=16.9",
     "react-dom": ">=16.9"
-  },
-  "publishConfig": {
-    "tag": "latest"
   }
 }

package/cjs/internal/MaskedInputElement/MaskedInputElement.helpers.d.ts

@@ -1,16 +0,0 @@
-export declare const DEFAULT_MASK_CHAR = "_";
-export declare const DEFINITIONS: {
-    '9': RegExp;
-    a: RegExp;
-    '*': RegExp;
-};
-export declare function getDefinitions(formatChars: Record<string, string> | undefined): Record<string, RegExp>;
-export declare function getMaskChar(maskChar: string | null | undefined): string;
-interface MaskedInputValues {
-    originValue: string;
-    value: string;
-    emptyValue: string;
-}
-export declare function getFocusPrefix(emptyValue: string, maskChar: string | null | undefined): string;
-export declare function getCurrentValue(values: MaskedInputValues, focused: boolean, maskChar: string | null | undefined): [currentValue: string, left: string, right: string];
-export {};

package/cjs/internal/MaskedInputElement/MaskedInputElement.helpers.js

@@ -1,52 +0,0 @@
-"use strict";exports.__esModule = true;exports.DEFINITIONS = exports.DEFAULT_MASK_CHAR = void 0;exports.getCurrentValue = getCurrentValue;exports.getDefinitions = getDefinitions;exports.getFocusPrefix = getFocusPrefix;exports.getMaskChar = getMaskChar;var _utils = require("../../lib/utils");
-
-var DEFAULT_MASK_CHAR = '_';exports.DEFAULT_MASK_CHAR = DEFAULT_MASK_CHAR;
-var DEFINITIONS = { '9': /[0-9]/, a: /[A-Za-z]/, '*': /[A-Za-z0-9]/ };exports.DEFINITIONS = DEFINITIONS;
-
-function getDefinitions(formatChars) {
-  if ((0, _utils.isNonNullable)(formatChars)) {
-    var chars = {};
-
-    for (var key in formatChars) {
-      chars[key] = new RegExp(formatChars[key]);
-    }
-
-    return chars;
-  }
-
-  return DEFINITIONS;
-}
-
-function getMaskChar(maskChar) {
-  if (maskChar === null) {
-    return '';
-  }
-
-  return maskChar === undefined ? DEFAULT_MASK_CHAR : maskChar;
-}
-
-
-
-
-
-
-
-
-function getFocusPrefix(emptyValue, maskChar) {
-  return emptyValue.slice(0, emptyValue.indexOf(getMaskChar(maskChar)));
-}
-
-function getCurrentValue(
-values,
-focused,
-maskChar)
-{
-  var emptyValue = values.emptyValue,value = values.value,originValue = values.originValue;
-
-  if (focused && originValue.length === 0 && emptyValue.length > 0) {
-    var _currentValue = getFocusPrefix(emptyValue, maskChar);
-    return [_currentValue, _currentValue, emptyValue.slice(_currentValue.length)];
-  }
-
-  return [value, originValue, emptyValue.slice(originValue.length)];
-}