@skbkontur/react-ui 0.0.0-044e274f2c → 0.0.0-07d08325b0

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

@@ -1,4 +1,5 @@
-"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;exports.__esModule = true;exports.ColorableInputElement = void 0;var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));var _react = _interopRequireWildcard(require("react"));
+"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;exports.__esModule = true;exports.ColorableInputElement = void 0;var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+var _react = _interopRequireWildcard(require("react"));
 var _globalObject = require("@skbkontur/global-object");
 var _lodash = _interopRequireDefault(require("lodash.debounce"));
 
@@ -7,7 +8,7 @@ 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", "showOnFocus"];
+var _ColorableInputElement = require("./ColorableInputElement.styles");var _excluded = ["children", "onInput", "onFocus", "onBlur", "showOnFocus"]; /* eslint react-hooks/exhaustive-deps: 2 */
 
 
 
@@ -27,9 +28,6 @@ var ColorableInputElement = exports.ColorableInputElement = (0, _forwardRefAndNa
     var focused = (0, _react.useRef)(false);
     var inputStyle = _react.default.useRef();
     var theme = (0, _react.useContext)(_ThemeContext.ThemeContext);
-    var emotion = (0, _react.useContext)(_Emotion.EmotionContext);
-    var styles = (0, _ColorableInputElement.getStyles)(emotion);
-    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,showOnFocus = props.showOnFocus,inputProps = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
@@ -45,10 +43,78 @@ var ColorableInputElement = exports.ColorableInputElement = (0, _forwardRefAndNa
 
     (0, _react.useEffect)(updateActive, []);
 
+    var paintText = (0, _react.useCallback)(function () {var _inputRef$current, _shadow;
+      if (!spanRef.current || !inputRef.current || !inputStyle.current || !(0, _globalObject.isBrowser)(_globalObject.globalObject)) {
+        return;
+      }
+
+      (_inputRef$current = inputRef.current) == null || _inputRef$current.classList.add(_ColorableInputElement.globalClasses.input);
+
+      var shadow = spanRef.current.shadowRoot;
+      var typedValueElement = (_shadow = shadow) == null ? void 0 : _shadow.getElementById('span');
+
+      if (!typedValueElement) {
+        shadow = spanRef.current.attachShadow({ mode: 'open' });
+
+        typedValueElement = _globalObject.globalObject.document.createElement('span');
+        typedValueElement.setAttribute('id', 'span');
+
+        shadow.appendChild(typedValueElement);
+      }
+
+      var style = inputStyle.current;
+
+      typedValueElement.textContent =
+      (inputRef.current.getAttribute('data-unmasked-value') || focused.current) &&
+      inputRef.current.getAttribute('data-typed-value') ||
+      '';
+
+      var inputRect = inputRef.current.getBoundingClientRect();
+      var filledRect = spanRef.current.getBoundingClientRect();
+
+      var threshold = filledRect.width / (inputRect.width / 100);
+      var degree = style.fontStyle === 'italic' ? 100 : 90;
+
+      var typedValueColor = theme.inputTextColor;
+      var maskColor = theme.inputPlaceholderColor;
+      if (props.disabled) {
+        typedValueColor = theme.inputTextColorDisabled;
+        maskColor = theme.inputTextColorDisabled;
+      }
+      if (props.showOnFocus) {
+        maskColor = focused.current ? maskColor : 'transparent';
+      }
+
+      inputRef.current.style.backgroundImage = "\n      linear-gradient(\n          " +
+
+      degree + "deg,\n          " +
+      typedValueColor + " " + threshold + "%,\n          " +
+      maskColor + " " + threshold + "%\n      )";
+
+    }, [
+    props.showOnFocus,
+    props.disabled,
+    theme.inputTextColor,
+    theme.inputPlaceholderColor,
+    theme.inputTextColorDisabled]
+    );
+
+    var debouncedPaintText = (0, _react.useCallback)(function () {return (0, _lodash.default)(paintText);}, [paintText])();
+
+    var activation = (0, _react.useCallback)(function () {
+      if (active) {
+        debouncedPaintText();
+      } else {var _inputRef$current2;
+        debouncedPaintText.cancel();
+        inputRef.current && (inputRef.current.style.backgroundImage = '');
+        (_inputRef$current2 = inputRef.current) == null || _inputRef$current2.classList.remove(_ColorableInputElement.globalClasses.input);
+      }
+    }, [debouncedPaintText, active]);
+
     (0, _react.useEffect)(function () {
-      activation(props);
+      activation();
       updateActive();
-    }, [active, showOnFocus, props.value, props.defaultValue, props.disabled, focused.current]);
+    }, [props.value, props.defaultValue, theme, activation]);
 
     (0, _react.useEffect)(function () {
       if (inputRef.current) {
@@ -64,22 +130,17 @@ var ColorableInputElement = exports.ColorableInputElement = (0, _forwardRefAndNa
         onFocus: handleFocus,
         onBlur: handleBlur,
         inputRef: inputRef,
-        className: emotion.cx(props.className, active && styles.input()),
-        style: (0, _extends2.default)({},
-        inputProps.style, {
-          WebkitBackgroundClip: 'text',
-          backgroundClip: 'text' }) })
-
+        className: (0, _Emotion.cx)(props.className, active && _ColorableInputElement.globalClasses.input) })
       ),
       active && /*#__PURE__*/_react.default.createElement("span", { style: { visibility: 'hidden', position: 'absolute', whiteSpace: 'pre' }, ref: spanRef })
       ));
 
 
-    function handleInput(e) {var _inputRef$current;
-      var isActive = !((_inputRef$current = inputRef.current) != null && (_inputRef$current = _inputRef$current.parentElement) != null && _inputRef$current.querySelector(':placeholder-shown'));
+    function handleInput(e) {var _inputRef$current3;
+      var isActive = !((_inputRef$current3 = inputRef.current) != null && (_inputRef$current3 = _inputRef$current3.parentElement) != null && _inputRef$current3.querySelector(':placeholder-shown'));
       setActive(isActive);
 
-      activation(props);
+      activation();
 
       onInput == null || onInput(e);
     }
@@ -101,69 +162,9 @@ var ColorableInputElement = exports.ColorableInputElement = (0, _forwardRefAndNa
     }
 
     function updateActive() {
-      setTimeout(function () {var _inputRef$current2;
-        setActive(!((_inputRef$current2 = inputRef.current) != null && (_inputRef$current2 = _inputRef$current2.parentElement) != null && _inputRef$current2.querySelector(':placeholder-shown')));
+      setTimeout(function () {var _inputRef$current4;
+        setActive(!((_inputRef$current4 = inputRef.current) != null && (_inputRef$current4 = _inputRef$current4.parentElement) != null && _inputRef$current4.querySelector(':placeholder-shown')));
       });
     }
-
-    function activation(props) {
-      if (active) {
-        debouncedPaintText(props);
-      } else {var _inputRef$current3;
-        debouncedPaintText.cancel();
-        inputRef.current && (inputRef.current.style.backgroundImage = '');
-        (_inputRef$current3 = inputRef.current) == null || _inputRef$current3.classList.remove(_ColorableInputElement.globalClasses.input);
-      }
-    }
-
-    function paintText(_props) {var _inputRef$current4, _shadow;if (_props === void 0) {_props = props;}
-      if (!spanRef.current || !inputRef.current || !inputStyle.current || !(0, _globalObject.isBrowser)(_globalObject.globalObject)) {
-        return;
-      }
-
-      (_inputRef$current4 = inputRef.current) == null || _inputRef$current4.classList.add(_ColorableInputElement.globalClasses.input);
-
-      var shadow = spanRef.current.shadowRoot;
-      var typedValueElement = (_shadow = shadow) == null ? void 0 : _shadow.getElementById('span');
-
-      if (!typedValueElement) {
-        shadow = spanRef.current.attachShadow({ mode: 'open' });
-
-        typedValueElement = _globalObject.globalObject.document.createElement('span');
-        typedValueElement.setAttribute('id', 'span');
-
-        shadow.appendChild(typedValueElement);
-      }
-
-      var style = inputStyle.current;
-
-      typedValueElement.textContent =
-      (inputRef.current.getAttribute('data-unmasked-value') || focused.current) &&
-      inputRef.current.getAttribute('data-typed-value') ||
-      '';
-
-      var inputRect = inputRef.current.getBoundingClientRect();
-      var filledRect = spanRef.current.getBoundingClientRect();
-
-      var threshold = filledRect.width / (inputRect.width / 100);
-      var degree = style.fontStyle === 'italic' ? 100 : 90;
-
-      var typedValueColor = theme.inputTextColor;
-      var maskColor = theme.inputPlaceholderColor;
-      if (_props.disabled) {
-        typedValueColor = theme.inputTextColorDisabled;
-        maskColor = theme.inputTextColorDisabled;
-      }
-      if (_props.showOnFocus) {
-        maskColor = focused.current ? maskColor : 'transparent';
-      }
-
-      inputRef.current.style.backgroundImage = "\n      linear-gradient(\n          " +
-
-      degree + "deg,\n          " +
-      typedValueColor + " " + threshold + "%,\n          " +
-      maskColor + " " + threshold + "%\n      )";
-
-    }
   }
 );

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

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireWildcard","require","_globalObject","_lodash","_interopRequireDefault","_ThemeContext","_forwardRefAndName","_Emotion","_ColorableInputElement","_excluded","ColorableInputElement","exports","forwardRefAndName","props","ref","inputRef","useRef","spanRef","focused","inputStyle","React","theme","useContext","ThemeContext","emotion","EmotionContext","styles","getStyles","debouncedPaintText","useCallback","debounce","paintText","_useState","useState","active","setActive","children","onInput","onFocus","onBlur","showOnFocus","inputProps","_objectWithoutPropertiesLoose2","default","useImperativeHandle","input","current","getRootNode","useEffect","updateActive","activation","value","defaultValue","disabled","getComputedStyle","createElement","Fragment","cloneElement","_extends2","handleInput","handleFocus","handleBlur","className","cx","style","WebkitBackgroundClip","backgroundClip","visibility","position","whiteSpace","e","_inputRef$current","isActive","parentElement","querySelector","setTimeout","_inputRef$current2","_inputRef$current3","cancel","backgroundImage","classList","remove","globalClasses","_props","_inputRef$current4","_shadow","isBrowser","globalObject","add","shadow","shadowRoot","typedValueElement","getElementById","attachShadow","mode","document","setAttribute","appendChild","textContent","getAttribute","inputRect","getBoundingClientRect","filledRect","threshold","width","degree","fontStyle","typedValueColor","inputTextColor","maskColor","inputPlaceholderColor","inputTextColorDisabled"],"sources":["ColorableInputElement.tsx"],"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 { EmotionContext } from '../../../lib/theming/Emotion';\n\nimport { getStyles, 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 emotion = useContext(EmotionContext);\n    const styles = getStyles(emotion);\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: emotion.cx(props.className, active && styles.input()),\n          style: {\n            ...inputProps.style,\n            WebkitBackgroundClip: 'text',\n            backgroundClip: 'text',\n          },\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 =\n        ((inputRef.current.getAttribute('data-unmasked-value') || focused.current) &&\n          inputRef.current.getAttribute('data-typed-value')) ||\n        '';\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"],"mappings":"wdAAA,IAAAA,MAAA,GAAAC,uBAAA,CAAAC,OAAA;AACA,IAAAC,aAAA,GAAAD,OAAA;AACA,IAAAE,OAAA,GAAAC,sBAAA,CAAAH,OAAA;;AAEA,IAAAI,aAAA,GAAAJ,OAAA;;AAEA,IAAAK,kBAAA,GAAAL,OAAA;AACA,IAAAM,QAAA,GAAAN,OAAA;;AAEA,IAAAO,sBAAA,GAAAP,OAAA,mCAA0E,IAAAQ,SAAA;;;;;;;AAO1E;AACA;AACA;AACA;;AAEO,IAAMC,qBAAqB,GAAAC,OAAA,CAAAD,qBAAA,GAAG,IAAAE,oCAAiB;EACpD,uBAAuB;EACvB,SAASF,qBAAqBA,CAACG,KAAiC,EAAEC,GAA+B,EAAE;IACjG,IAAMC,QAAQ,GAAG,IAAAC,aAAM,EAA0B,IAAI,CAAC;IACtD,IAAMC,OAAO,GAAG,IAAAD,aAAM,EAAyB,IAAI,CAAC;IACpD,IAAME,OAAO,GAAG,IAAAF,aAAM,EAAC,KAAK,CAAC;IAC7B,IAAMG,UAAU,GAAGC,cAAK,CAACJ,MAAM,CAAsB,CAAC;IACtD,IAAMK,KAAK,GAAG,IAAAC,iBAAU,EAACC,0BAAY,CAAC;IACtC,IAAMC,OAAO,GAAG,IAAAF,iBAAU,EAACG,uBAAc,CAAC;IAC1C,IAAMC,MAAM,GAAG,IAAAC,gCAAS,EAACH,OAAO,CAAC;IACjC,IAAMI,kBAAkB,GAAG,IAAAC,kBAAW,EAAC,IAAAC,eAAQ,EAACC,SAAS,CAAC,EAAE,EAAE,CAAC;IAC/D,IAAAC,SAAA,GAA4B,IAAAC,eAAQ,EAAC,IAAI,CAAC,CAAnCC,MAAM,GAAAF,SAAA,IAAEG,SAAS,GAAAH,SAAA;;IAExB,IAAQI,QAAQ,GAA2DvB,KAAK,CAAxEuB,QAAQ,CAAEC,OAAO,GAAkDxB,KAAK,CAA9DwB,OAAO,CAAEC,OAAO,GAAyCzB,KAAK,CAArDyB,OAAO,CAAEC,MAAM,GAAiC1B,KAAK,CAA5C0B,MAAM,CAAEC,WAAW,GAAoB3B,KAAK,CAApC2B,WAAW,CAAKC,UAAU,OAAAC,8BAAA,CAAAC,OAAA,EAAK9B,KAAK,EAAAJ,SAAA;;IAEhF,IAAAmC,0BAAmB;MACjB9B,GAAG;MACH,oBAAO;UACL+B,KAAK,EAAE9B,QAAQ,CAAC+B,OAAO;UACvBC,WAAW,EAAE,SAAAA,YAAA,UAAMhC,QAAQ,CAAC+B,OAAO;QACrC,CAAC,EAAC;MACF;IACF,CAAC;;IAED,IAAAE,gBAAS,EAACC,YAAY,EAAE,EAAE,CAAC;;IAE3B,IAAAD,gBAAS,EAAC,YAAM;MACdE,UAAU,CAACrC,KAAK,CAAC;MACjBoC,YAAY,CAAC,CAAC;IAChB,CAAC,EAAE,CAACf,MAAM,EAAEM,WAAW,EAAE3B,KAAK,CAACsC,KAAK,EAAEtC,KAAK,CAACuC,YAAY,EAAEvC,KAAK,CAACwC,QAAQ,EAAEnC,OAAO,CAAC4B,OAAO,CAAC,CAAC;;IAE3F,IAAAE,gBAAS,EAAC,YAAM;MACd,IAAIjC,QAAQ,CAAC+B,OAAO,EAAE;QACpB3B,UAAU,CAAC2B,OAAO,GAAGQ,gBAAgB,CAACvC,QAAQ,CAAC+B,OAAO,CAAC;MACzD;IACF,CAAC,CAAC;;IAEF;MACE/C,MAAA,CAAA4C,OAAA,CAAAY,aAAA,CAAAxD,MAAA,CAAA4C,OAAA,CAAAa,QAAA;MACGpC,cAAK,CAACqC,YAAY,CAACrB,QAAQ,MAAAsB,SAAA,CAAAf,OAAA;MACvBF,UAAU;QACbJ,OAAO,EAAEsB,WAAW;QACpBrB,OAAO,EAAEsB,WAAW;QACpBrB,MAAM,EAAEsB,UAAU;QAClB9C,QAAQ,EAARA,QAAQ;QACR+C,SAAS,EAAEtC,OAAO,CAACuC,EAAE,CAAClD,KAAK,CAACiD,SAAS,EAAE5B,MAAM,IAAIR,MAAM,CAACmB,KAAK,CAAC,CAAC,CAAC;QAChEmB,KAAK,MAAAN,SAAA,CAAAf,OAAA;QACAF,UAAU,CAACuB,KAAK;UACnBC,oBAAoB,EAAE,MAAM;UAC5BC,cAAc,EAAE,MAAM,GACvB;;MACF,CAAC;MACDhC,MAAM,iBAAInC,MAAA,CAAA4C,OAAA,CAAAY,aAAA,WAAMS,KAAK,EAAE,EAAEG,UAAU,EAAE,QAAQ,EAAEC,QAAQ,EAAE,UAAU,EAAEC,UAAU,EAAE,KAAK,CAAC,CAAE,EAACvD,GAAG,EAAEG,OAAQ,EAAE;MAC1G,CAAC;;;IAGL,SAAS0C,WAAWA,CAACW,CAAsC,EAAE,KAAAC,iBAAA;MAC3D,IAAMC,QAAQ,GAAG,GAAAD,iBAAA,GAACxD,QAAQ,CAAC+B,OAAO,cAAAyB,iBAAA,GAAhBA,iBAAA,CAAkBE,aAAa,aAA/BF,iBAAA,CAAiCG,aAAa,CAAC,oBAAoB,CAAC;MACtFvC,SAAS,CAACqC,QAAQ,CAAC;;MAEnBtB,UAAU,CAACrC,KAAK,CAAC;;MAEjBwB,OAAO,YAAPA,OAAO,CAAGiC,CAAC,CAAC;IACd;;IAEA,SAASV,WAAWA,CAACU,CAAqC,EAAE;MAC1DK,UAAU,CAAC1B,YAAY,CAAC;;MAExB/B,OAAO,CAAC4B,OAAO,GAAG,IAAI;;MAEtBR,OAAO,YAAPA,OAAO,CAAGgC,CAAC,CAAC;IACd;;IAEA,SAAST,UAAUA,CAACS,CAAqC,EAAE;MACzDrB,YAAY,CAAC,CAAC;;MAEd/B,OAAO,CAAC4B,OAAO,GAAG,KAAK;;MAEvBP,MAAM,YAANA,MAAM,CAAG+B,CAAC,CAAC;IACb;;IAEA,SAASrB,YAAYA,CAAA,EAAG;MACtB0B,UAAU,CAAC,YAAM,KAAAC,kBAAA;QACfzC,SAAS,CAAC,GAAAyC,kBAAA,GAAC7D,QAAQ,CAAC+B,OAAO,cAAA8B,kBAAA,GAAhBA,kBAAA,CAAkBH,aAAa,aAA/BG,kBAAA,CAAiCF,aAAa,CAAC,oBAAoB,CAAC,EAAC;MAClF,CAAC,CAAC;IACJ;;IAEA,SAASxB,UAAUA,CAACrC,KAAiC,EAAE;MACrD,IAAIqB,MAAM,EAAE;QACVN,kBAAkB,CAACf,KAAK,CAAC;MAC3B,CAAC,MAAM,KAAAgE,kBAAA;QACLjD,kBAAkB,CAACkD,MAAM,CAAC,CAAC;QAC3B/D,QAAQ,CAAC+B,OAAO,KAAK/B,QAAQ,CAAC+B,OAAO,CAACkB,KAAK,CAACe,eAAe,GAAG,EAAE,CAAC;QACjE,CAAAF,kBAAA,GAAA9D,QAAQ,CAAC+B,OAAO,aAAhB+B,kBAAA,CAAkBG,SAAS,CAACC,MAAM,CAACC,oCAAa,CAACrC,KAAK,CAAC;MACzD;IACF;;IAEA,SAASd,SAASA,CAACoD,MAA2C,EAAU,KAAAC,kBAAA,EAAAC,OAAA,KAArDF,MAA2C,cAA3CA,MAA2C,GAAGtE,KAAK;MACpE,IAAI,CAACI,OAAO,CAAC6B,OAAO,IAAI,CAAC/B,QAAQ,CAAC+B,OAAO,IAAI,CAAC3B,UAAU,CAAC2B,OAAO,IAAI,CAAC,IAAAwC,uBAAS,EAACC,0BAAY,CAAC,EAAE;QAC5F;MACF;;MAEA,CAAAH,kBAAA,GAAArE,QAAQ,CAAC+B,OAAO,aAAhBsC,kBAAA,CAAkBJ,SAAS,CAACQ,GAAG,CAACN,oCAAa,CAACrC,KAAK,CAAC;;MAEpD,IAAI4C,MAAM,GAAGxE,OAAO,CAAC6B,OAAO,CAAC4C,UAAU;MACvC,IAAIC,iBAAiB,IAAAN,OAAA,GAAGI,MAAM,qBAANJ,OAAA,CAAQO,cAAc,CAAC,MAAM,CAAC;;MAEtD,IAAI,CAACD,iBAAiB,EAAE;QACtBF,MAAM,GAAGxE,OAAO,CAAC6B,OAAO,CAAC+C,YAAY,CAAC,EAAEC,IAAI,EAAE,MAAM,CAAC,CAAC,CAAC;;QAEvDH,iBAAiB,GAAGJ,0BAAY,CAACQ,QAAQ,CAACxC,aAAa,CAAC,MAAM,CAAC;QAC/DoC,iBAAiB,CAACK,YAAY,CAAC,IAAI,EAAE,MAAM,CAAC;;QAE5CP,MAAM,CAACQ,WAAW,CAACN,iBAAiB,CAAC;MACvC;;MAEA,IAAM3B,KAAK,GAAG7C,UAAU,CAAC2B,OAAO;;MAEhC6C,iBAAiB,CAACO,WAAW;MAC1B,CAACnF,QAAQ,CAAC+B,OAAO,CAACqD,YAAY,CAAC,qBAAqB,CAAC,IAAIjF,OAAO,CAAC4B,OAAO;MACvE/B,QAAQ,CAAC+B,OAAO,CAACqD,YAAY,CAAC,kBAAkB,CAAC;MACnD,EAAE;;MAEJ,IAAMC,SAAS,GAAGrF,QAAQ,CAAC+B,OAAO,CAACuD,qBAAqB,CAAC,CAAC;MAC1D,IAAMC,UAAU,GAAGrF,OAAO,CAAC6B,OAAO,CAACuD,qBAAqB,CAAC,CAAC;;MAE1D,IAAME,SAAS,GAAGD,UAAU,CAACE,KAAK,IAAIJ,SAAS,CAACI,KAAK,GAAG,GAAG,CAAC;MAC5D,IAAMC,MAAM,GAAGzC,KAAK,CAAC0C,SAAS,KAAK,QAAQ,GAAG,GAAG,GAAG,EAAE;;MAEtD,IAAIC,eAAe,GAAGtF,KAAK,CAACuF,cAAc;MAC1C,IAAIC,SAAS,GAAGxF,KAAK,CAACyF,qBAAqB;MAC3C,IAAI3B,MAAM,CAAC9B,QAAQ,EAAE;QACnBsD,eAAe,GAAGtF,KAAK,CAAC0F,sBAAsB;QAC9CF,SAAS,GAAGxF,KAAK,CAAC0F,sBAAsB;MAC1C;MACA,IAAI5B,MAAM,CAAC3C,WAAW,EAAE;QACtBqE,SAAS,GAAG3F,OAAO,CAAC4B,OAAO,GAAG+D,SAAS,GAAG,aAAa;MACzD;;MAEA9F,QAAQ,CAAC+B,OAAO,CAACkB,KAAK,CAACe,eAAe;;MAEhC0B,MAAM;MACNE,eAAe,SAAIJ,SAAS;MAC5BM,SAAS,SAAIN,SAAS,eAC1B;;IACJ;EACF;AACF,CAAC","ignoreList":[]}
+{"version":3,"names":["_react","_interopRequireWildcard","require","_globalObject","_lodash","_interopRequireDefault","_ThemeContext","_forwardRefAndName","_Emotion","_ColorableInputElement","_excluded","ColorableInputElement","exports","forwardRefAndName","props","ref","inputRef","useRef","spanRef","focused","inputStyle","React","theme","useContext","ThemeContext","_useState","useState","active","setActive","children","onInput","onFocus","onBlur","showOnFocus","inputProps","_objectWithoutPropertiesLoose2","default","useImperativeHandle","input","current","getRootNode","useEffect","updateActive","paintText","useCallback","_inputRef$current","_shadow","isBrowser","globalObject","classList","add","globalClasses","shadow","shadowRoot","typedValueElement","getElementById","attachShadow","mode","document","createElement","setAttribute","appendChild","style","textContent","getAttribute","inputRect","getBoundingClientRect","filledRect","threshold","width","degree","fontStyle","typedValueColor","inputTextColor","maskColor","inputPlaceholderColor","disabled","inputTextColorDisabled","backgroundImage","debouncedPaintText","debounce","activation","_inputRef$current2","cancel","remove","value","defaultValue","getComputedStyle","Fragment","cloneElement","_extends2","handleInput","handleFocus","handleBlur","className","cx","visibility","position","whiteSpace","e","_inputRef$current3","isActive","parentElement","querySelector","setTimeout","_inputRef$current4"],"sources":["ColorableInputElement.tsx"],"sourcesContent":["/* eslint react-hooks/exhaustive-deps: 2 */\nimport 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 [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    const paintText = useCallback(() => {\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 =\n        ((inputRef.current.getAttribute('data-unmasked-value') || focused.current) &&\n          inputRef.current.getAttribute('data-typed-value')) ||\n        '';\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      props.showOnFocus,\n      props.disabled,\n      theme.inputTextColor,\n      theme.inputPlaceholderColor,\n      theme.inputTextColorDisabled,\n    ]);\n\n    const debouncedPaintText = useCallback(() => debounce(paintText), [paintText])();\n\n    const activation = useCallback(() => {\n      if (active) {\n        debouncedPaintText();\n      } else {\n        debouncedPaintText.cancel();\n        inputRef.current && (inputRef.current.style.backgroundImage = '');\n        inputRef.current?.classList.remove(globalClasses.input);\n      }\n    }, [debouncedPaintText, active]);\n\n    useEffect(() => {\n      activation();\n      updateActive();\n    }, [props.value, props.defaultValue, theme, activation]);\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();\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);\n"],"mappings":"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","ignoreList":[]}

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

@@ -1,7 +1,3 @@
-import type { Emotion } from '@emotion/css/create-instance';
 export declare const globalClasses: {
     input: string;
 };
-export declare const getStyles: (emotion: Emotion) => {
-    input(): string;
-};

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

@@ -1,23 +1,8 @@
-"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;exports.__esModule = true;exports.globalClasses = exports.getStyles = void 0;var _taggedTemplateLiteralLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteralLoose"));
-
-var _Emotion = require("../../../lib/theming/Emotion");var _templateObject;
+"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;exports.__esModule = true;exports.globalClasses = void 0;var _taggedTemplateLiteralLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteralLoose"));var _Emotion = require("../../../lib/theming/Emotion");var _templateObject;
 
 var globalClasses = exports.globalClasses = (0, _Emotion.prefix)('colorable')({
   input: 'input'
 });
 
-var getStyles = exports.getStyles = function getStyles(emotion) {return (
-    (0, _Emotion.memoizeStyle)({
-      input: function input() {
-        return emotion.css(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2.default)(["\n        &.", " {\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);
-
-
-
-
-
-
-
-
-      }
-    }));};
+(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,"names":["_Emotion","require","_templateObject","globalClasses","exports","prefix","input","getStyles","emotion","memoizeStyle","css","_taggedTemplateLiteralLoose2","default"],"sources":["ColorableInputElement.styles.ts"],"sourcesContent":["import type { Emotion } from '@emotion/css/create-instance';\n\nimport { memoizeStyle, prefix } from '../../../lib/theming/Emotion';\n\nexport const globalClasses = prefix('colorable')({\n  input: 'input',\n});\n\nexport const getStyles = (emotion: Emotion) =>\n  memoizeStyle({\n    input() {\n      return emotion.css`\n        &.${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    },\n  });\n"],"mappings":";;AAEA,IAAAA,QAAA,GAAAC,OAAA,iCAAoE,IAAAC,eAAA;;AAE7D,IAAMC,aAAa,GAAAC,OAAA,CAAAD,aAAA,GAAG,IAAAE,eAAM,EAAC,WAAW,CAAC,CAAC;EAC/CC,KAAK,EAAE;AACT,CAAC,CAAC;;AAEK,IAAMC,SAAS,GAAAH,OAAA,CAAAG,SAAA,GAAG,SAAZA,SAASA,CAAIC,OAAgB;IACxC,IAAAC,qBAAY,EAAC;MACXH,KAAK,WAAAA,MAAA,EAAG;QACN,OAAOE,OAAO,CAACE,GAAG,CAAAR,eAAA,KAAAA,eAAA,OAAAS,4BAAA,CAAAC,OAAA;QACZT,aAAa,CAACG,KAAK;;;;;;;;;MAS3B;IACF,CAAC,CAAC","ignoreList":[]}
+{"version":3,"names":["_Emotion","require","_templateObject","globalClasses","exports","prefix","input","injectGlobal","_taggedTemplateLiteralLoose2","default"],"sources":["ColorableInputElement.styles.ts"],"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"],"mappings":"2RAAA,IAAAA,QAAA,GAAAC,OAAA,iCAAoE,IAAAC,eAAA;;AAE7D,IAAMC,aAAa,GAAAC,OAAA,CAAAD,aAAA,GAAG,IAAAE,eAAM,EAAC,WAAW,CAAC,CAAC;EAC/CC,KAAK,EAAE;AACT,CAAC,CAAC;;AAEF,IAAAC,qBAAY,EAAAL,eAAA,KAAAA,eAAA,OAAAM,4BAAA,CAAAC,OAAA;AACFN,aAAa,CAACG,KAAK","ignoreList":[]}

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

@@ -3,56 +3,36 @@ import { Input, InputProps, InputType } from '../Input';
 export interface MaskedProps {
     /** Паттерн маски */
     mask: string;
-    /**
-     * Символ маски
-     *
-     * @default _
-     */
+    /** Устанавливает символ маски
+     * @default _ */
     maskChar?: string;
-    /**
-     * Словарь символов-регулярок для маски
-     *
-     * @default { '9': '[0-9]', 'a': '[A-Za-z]', '*': '[A-Za-z0-9]' }
-     */
+    /** Задает словарь символов-регулярок для задания маски.
+     * @default { '9': '[0-9]', 'a': '[A-Za-z]', '*': '[A-Za-z0-9]' } */
     formatChars?: Record<string, string>;
-    /**
-     * Всегда показывать символы маски
-     *
-     * @default false
-     */
+    /** Включает показ символов маски.
+     * @default false */
     alwaysShowMask?: boolean;
-    /**
-     * Обработчик неправильного ввода.
+    /** Задает обработчик неправильного ввода.
      * Вторым агрументом будет передан метод вспыхивания акцентным цветом.
      *
      * Если обработчик не задан, то инпут вспыхивает по-умолчанию.
-     *
      * @param value значение инпута.
      * @param blink вспыхнуть акцентным цвтетом.
      */
     onUnexpectedInput?: (value: string, blink: () => void) => void;
-    /**
-     * Убирать из value символы, не введённые пользователем
-     *
-     * @default false
-     */
+    /** Убирает из value символы, не введённые пользователем
+     * @default false */
     unmask?: boolean;
-    /**
-     * Раскрашивать символы маски
-     *
+    /** Раскрашивает символы маски.
      * @default true
-     * @ignore
-     */
+     * @ignore */
     colored?: boolean;
-    /**
-     * Пропы для компонента `IMaskInput`. Необходимы для юнит-тестов
-     *
-     * @ignore
-     */
+    /** Задает пропы для компонента `IMaskInput`. Необходимы для юнит-тестов
+     * @ignore */
     imaskProps?: IMaskInputProps<HTMLInputElement>;
 }
 export type MaskInputType = Exclude<InputType, 'number' | 'date' | 'time' | 'password'>;
-export interface MaskedInputProps extends MaskedProps, Omit<InputProps, 'mask' | 'maxLength' | 'type' | 'alwaysShowMask' | 'onUnexpectedInput' | 'maskChar'> {
+export interface MaskedInputProps extends MaskedProps, Omit<InputProps, 'showClearIcon' | 'mask' | 'maxLength' | 'type' | 'alwaysShowMask' | 'onUnexpectedInput' | 'maskChar'> {
     type?: MaskInputType;
 }
 /**

package/cjs/components/MaskedInput/MaskedInput.js

@@ -2,10 +2,10 @@
 
 
 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 _Emotion = require("../../lib/theming/Emotion");
 
 var _MaskedInput = require("./MaskedInput.styles");
 var _MaskedInput2 = require("./MaskedInput.helpers");
@@ -51,16 +51,6 @@ var _FixedIMaskInput = require("./FixedIMaskInput");var _excluded = ["mask", "ma
 
 
 
-
-
-
-
-
-
-
-
-
-
 
 
 
@@ -95,7 +85,6 @@ var MaskedInput = exports.MaskedInput = (0, _forwardRefAndName.forwardRefAndName
 
       props.mask,maskChar = props.maskChar,formatChars = props.formatChars,_props$alwaysShowMask = props.alwaysShowMask,alwaysShowMask = _props$alwaysShowMask === void 0 ? false : _props$alwaysShowMask,_props$colored = props.colored,colored = _props$colored === void 0 ? true : _props$colored,_props$imaskProps = props.imaskProps,customIMaskProps = _props$imaskProps === void 0 ? {} : _props$imaskProps,_props$unmask = props.unmask,unmask = _props$unmask === void 0 ? false : _props$unmask,onValueChange = props.onValueChange,onUnexpectedInput = props.onUnexpectedInput,onChange = props.onChange,element = props.element,className = props.className,inputProps = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
 
-    var emotion = (0, _react.useContext)(_Emotion.EmotionContext);
     var inputRef = (0, _react.useRef)(null);
 
     var _useState = (0, _react.useState)(false),focused = _useState[0],setFocused = _useState[1];
@@ -135,7 +124,7 @@ var MaskedInput = exports.MaskedInput = (0, _forwardRefAndName.forwardRefAndName
         onBlur: handleBlur,
         onInput: handleInput,
         onKeyDown: handleKeyDown,
-        className: emotion.cx(_MaskedInput.globalClasses.root, _UiFont.uiFontGlobalClasses.root, className),
+        className: (0, _Emotion.cx)(_MaskedInput.globalClasses.root, _UiFont.uiFontGlobalClasses.root, className),
         element:
         colored ? /*#__PURE__*/
         _react.default.createElement(_ColorableInputElement.ColorableInputElement, { showOnFocus: false }, /*#__PURE__*/

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

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireWildcard","require","_forwardRefAndName","_UiFont","_Input","_identifiers","_Emotion","_MaskedInput","_MaskedInput2","_ColorableInputElement","_FixedIMaskInput","_excluded","MaskedInput","exports","forwardRefAndName","props","ref","mask","maskChar","formatChars","_props$alwaysShowMask","alwaysShowMask","_props$colored","colored","_props$imaskProps","imaskProps","customIMaskProps","_props$unmask","unmask","onValueChange","onUnexpectedInput","onChange","element","className","inputProps","_objectWithoutPropertiesLoose2","default","emotion","useContext","EmotionContext","inputRef","useRef","_useState","useState","focused","setFocused","prevValue","value","String","defaultValue","prevSelectionStart","useImperativeHandle","current","Object","assign","selectAll","_inputRef$current","_inputRef$current2","focus","delaySelectAll","useEffect","_inputRef$current3","input","selectionStart","getCompatibleIMaskProps","createElement","Input","_extends2","onFocus","handleFocus","onBlur","handleBlur","onInput","handleInput","onKeyDown","handleKeyDown","cx","globalClasses","root","uiFontGlobalClasses","ColorableInputElement","showOnFocus","FixedIMaskInput","onAccept","handleAccept","replace","placeholderChar","getMaskChar","definitions","getDefinitions","eager","overwrite","lazy","disabled","_len","arguments","length","args","Array","_key","e","_e$currentTarget","currentTarget","handleUnexpectedInput","_inputRef$current4","selectAllOnFocus","_inputRef$current5","blink","bind","undefined","_e$currentTarget2","selectionEnd","isKeyBackspace","isKeyDelete"],"sources":["MaskedInput.tsx"],"sourcesContent":["import React, { Ref, useImperativeHandle, useRef, useState, useEffect, useContext } from 'react';\nimport { IMaskInputProps } from 'react-imask';\n\nimport { forwardRefAndName } from '../../lib/forwardRefAndName';\nimport { uiFontGlobalClasses } from '../../lib/styles/UiFont';\nimport { Input, InputProps, InputType } from '../Input';\nimport { isKeyBackspace, isKeyDelete } from '../../lib/events/keyboard/identifiers';\nimport { EmotionContext } from '../../lib/theming/Emotion';\n\nimport { globalClasses } from './MaskedInput.styles';\nimport { getDefinitions, getMaskChar } from './MaskedInput.helpers';\nimport { ColorableInputElement } from './ColorableInputElement';\nimport { FixedIMaskInput } from './FixedIMaskInput';\n\nexport interface MaskedProps {\n  /** Паттерн маски */\n  mask: string;\n  /**\n   * Символ маски\n   *\n   * @default _\n   */\n  maskChar?: string;\n  /**\n   * Словарь символов-регулярок для маски\n   *\n   * @default { '9': '[0-9]', 'a': '[A-Za-z]', '*': '[A-Za-z0-9]' }\n   */\n  formatChars?: Record<string, string>;\n  /**\n   * Всегда показывать символы маски\n   *\n   * @default false\n   */\n  alwaysShowMask?: boolean;\n  /**\n   * Обработчик неправильного ввода.\n   * Вторым агрументом будет передан метод вспыхивания акцентным цветом.\n   *\n   * Если обработчик не задан, то инпут вспыхивает по-умолчанию.\n   *\n   * @param value значение инпута.\n   * @param blink вспыхнуть акцентным цвтетом.\n   */\n  onUnexpectedInput?: (value: string, blink: () => void) => void;\n  /**\n   * Убирать из value символы, не введённые пользователем\n   *\n   * @default false\n   */\n  unmask?: boolean;\n  /**\n   * Раскрашивать символы маски\n   *\n   * @default true\n   * @ignore\n   */\n  colored?: boolean;\n  /**\n   * Пропы для компонента `IMaskInput`. Необходимы для юнит-тестов\n   *\n   * @ignore\n   */\n  imaskProps?: IMaskInputProps<HTMLInputElement>;\n}\n\nexport type MaskInputType = Exclude<InputType, 'number' | 'date' | 'time' | 'password'>;\n\nexport interface MaskedInputProps\n  extends MaskedProps,\n    Omit<InputProps, 'mask' | 'maxLength' | 'type' | 'alwaysShowMask' | 'onUnexpectedInput' | 'maskChar'> {\n  type?: MaskInputType;\n}\n\n/**\n * Интерфейс пропсов наследуется от `Input`.\n * Из пропсов `Input` исключены некоторые не применимые к полю с маской пропсы и сокращен список возможных значений в type.\n */\nexport const MaskedInput = forwardRefAndName(\n  'MaskedInput',\n  function MaskedInput(props: MaskedInputProps, ref: Ref<Input | null>) {\n    const {\n      mask,\n      maskChar,\n      formatChars,\n      alwaysShowMask = false,\n      colored = true,\n      imaskProps: customIMaskProps = {},\n      unmask = false,\n      onValueChange,\n      onUnexpectedInput,\n      onChange,\n      element,\n      className,\n      ...inputProps\n    } = props;\n\n    const emotion = useContext(EmotionContext);\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: () => {\n            inputRef.current?.focus();\n            inputRef.current?.delaySelectAll();\n          },\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={emotion.cx(globalClasses.root, uiFontGlobalClasses.root, className)}\n        element={\n          colored ? (\n            <ColorableInputElement showOnFocus={false}>\n              <FixedIMaskInput {...imaskProps} onAccept={handleAccept} />\n            </ColorableInputElement>\n          ) : (\n            <FixedIMaskInput {...imaskProps} onAccept={handleAccept} />\n          )\n        }\n      />\n    );\n\n    function getCompatibleIMaskProps(): IMaskInputProps<HTMLInputElement> {\n      return {\n        mask: mask.replace(/0/g, '{\\\\0}') as any,\n        placeholderChar: getMaskChar(maskChar),\n        definitions: getDefinitions(formatChars),\n        // FIXME: Должно быть eager=true, но в imask ломается удаление по delete\n        eager: 'append',\n        overwrite: 'shift',\n        lazy: !alwaysShowMask && (props.disabled || !focused),\n        unmask,\n        ...customIMaskProps,\n      } as IMaskInputProps<HTMLInputElement>;\n    }\n\n    function handleAccept(...args: Parameters<Required<IMaskInputProps<HTMLInputElement>>['onAccept']>) {\n      const [value, , e] = args;\n\n      // Метод onAccept может вызываться при монтировании, если не задан проп defaultValue.\n      // Но нативный input никогда не вызывает onChange при монтировании.\n      // Наше событие onValueChange в Input вывается в тех же случаях, что и нативный onChange,\n      // поэтому чтобы сохранить консинстентность будем ориентироваться на наличие аргумента e.\n      // Он содержит нативное событие, вызвавшее изменение.\n      e && onValueChange?.(value);\n      !e && (prevValue.current = value);\n    }\n\n    /**\n     * Отслеживаем неожиданные нажатия\n     * handleAccept не вызывается когда значение с маской не меняется\n     * Сначала вызывается handleAccept, затем handleInput\n     */\n    function handleInput(e: React.ChangeEvent<HTMLInputElement>) {\n      const { value, selectionStart } = e.currentTarget;\n\n      // При вводе неожиданных символов или удалении каретка может перепрыгивать фиксированные символы.\n      // Такие случаи не расцениваем как неожиданный ввод, т.к. пользователь может намеренно их вводить.\n      if (prevValue.current === value && selectionStart === prevSelectionStart.current) {\n        handleUnexpectedInput(value);\n      }\n      prevValue.current = value;\n      prevSelectionStart.current = selectionStart;\n\n      props.onInput?.(e);\n    }\n\n    function handleFocus(e: React.FocusEvent<HTMLInputElement>) {\n      setFocused(true);\n      props.onFocus?.(e);\n\n      // Если value из пропов отличается от value, которое получит input после обработки,\n      // то imask будет ставить каретку за последним валидным символом.\n      props.selectAllOnFocus && inputRef.current?.delaySelectAll();\n    }\n\n    function handleUnexpectedInput(value: string) {\n      const blink = inputRef.current?.blink.bind(inputRef.current) || (() => undefined);\n      onUnexpectedInput ? onUnexpectedInput(value, blink) : blink();\n    }\n\n    function handleBlur(e: React.FocusEvent<HTMLInputElement>) {\n      setFocused(false);\n      props.onBlur?.(e);\n    }\n\n    function handleKeyDown(e: React.KeyboardEvent<HTMLInputElement>) {\n      const { value, selectionStart, selectionEnd } = e.currentTarget;\n\n      if (\n        (isKeyBackspace(e) && selectionStart === 0 && selectionEnd === 0) ||\n        (isKeyDelete(e) && prevSelectionStart.current === value.length)\n      ) {\n        // Случаи, когда нажатие клавиш не тригерит `onInput`\n        handleUnexpectedInput(value);\n        prevValue.current = e.currentTarget.value;\n      }\n      prevSelectionStart.current = selectionStart;\n\n      props.onKeyDown?.(e);\n    }\n  },\n);\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["_react","_interopRequireWildcard","require","_forwardRefAndName","_Emotion","_UiFont","_Input","_identifiers","_MaskedInput","_MaskedInput2","_ColorableInputElement","_FixedIMaskInput","_excluded","MaskedInput","exports","forwardRefAndName","props","ref","mask","maskChar","formatChars","_props$alwaysShowMask","alwaysShowMask","_props$colored","colored","_props$imaskProps","imaskProps","customIMaskProps","_props$unmask","unmask","onValueChange","onUnexpectedInput","onChange","element","className","inputProps","_objectWithoutPropertiesLoose2","default","inputRef","useRef","_useState","useState","focused","setFocused","prevValue","value","String","defaultValue","prevSelectionStart","useImperativeHandle","current","Object","assign","selectAll","_inputRef$current","_inputRef$current2","focus","delaySelectAll","useEffect","_inputRef$current3","input","selectionStart","getCompatibleIMaskProps","createElement","Input","_extends2","onFocus","handleFocus","onBlur","handleBlur","onInput","handleInput","onKeyDown","handleKeyDown","cx","globalClasses","root","uiFontGlobalClasses","ColorableInputElement","showOnFocus","FixedIMaskInput","onAccept","handleAccept","replace","placeholderChar","getMaskChar","definitions","getDefinitions","eager","overwrite","lazy","disabled","_len","arguments","length","args","Array","_key","e","_e$currentTarget","currentTarget","handleUnexpectedInput","_inputRef$current4","selectAllOnFocus","_inputRef$current5","blink","bind","undefined","_e$currentTarget2","selectionEnd","isKeyBackspace","isKeyDelete"],"sources":["MaskedInput.tsx"],"sourcesContent":["import React, { Ref, useImperativeHandle, useRef, useState, useEffect } from 'react';\nimport { IMaskInputProps } from 'react-imask';\n\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   * @default _ */\n  maskChar?: string;\n\n  /** Задает словарь символов-регулярок для задания маски.\n   * @default { '9': '[0-9]', 'a': '[A-Za-z]', '*': '[A-Za-z0-9]' } */\n  formatChars?: Record<string, string>;\n\n  /** Включает показ символов маски.\n   * @default false */\n  alwaysShowMask?: boolean;\n\n  /** Задает обработчик неправильного ввода.\n   * Вторым агрументом будет передан метод вспыхивания акцентным цветом.\n   *\n   * Если обработчик не задан, то инпут вспыхивает по-умолчанию.\n   * @param value значение инпута.\n   * @param blink вспыхнуть акцентным цвтетом.\n   */\n  onUnexpectedInput?: (value: string, blink: () => void) => void;\n\n  /** Убирает из value символы, не введённые пользователем\n   * @default false */\n  unmask?: boolean;\n\n  /** Раскрашивает символы маски.\n   * @default true\n   * @ignore */\n  colored?: boolean;\n\n  /** Задает пропы для компонента `IMaskInput`. Необходимы для юнит-тестов\n   * @ignore */\n  imaskProps?: IMaskInputProps<HTMLInputElement>;\n}\n\nexport type MaskInputType = Exclude<InputType, 'number' | 'date' | 'time' | 'password'>;\n\nexport interface MaskedInputProps\n  extends MaskedProps,\n    Omit<\n      InputProps,\n      'showClearIcon' | 'mask' | 'maxLength' | 'type' | 'alwaysShowMask' | 'onUnexpectedInput' | 'maskChar'\n    > {\n  type?: MaskInputType;\n}\n\n/**\n * Интерфейс пропсов наследуется от `Input`.\n * Из пропсов `Input` исключены некоторые не применимые к полю с маской пропсы и сокращен список возможных значений в type.\n */\nexport const MaskedInput = forwardRefAndName(\n  'MaskedInput',\n  function MaskedInput(props: MaskedInputProps, ref: Ref<Input | null>) {\n    const {\n      mask,\n      maskChar,\n      formatChars,\n      alwaysShowMask = false,\n      colored = true,\n      imaskProps: customIMaskProps = {},\n      unmask = false,\n      onValueChange,\n      onUnexpectedInput,\n      onChange,\n      element,\n      className,\n      ...inputProps\n    } = props;\n\n    const inputRef = useRef<Input>(null);\n\n    const [focused, setFocused] = useState(false);\n    const prevValue = useRef<string>(props.value || String(props.defaultValue) || '');\n    const prevSelectionStart = useRef<number | null>(null);\n\n    useImperativeHandle(\n      ref,\n      () =>\n        inputRef.current &&\n        Object.assign(inputRef.current, {\n          selectAll: () => {\n            inputRef.current?.focus();\n            inputRef.current?.delaySelectAll();\n          },\n        }),\n      [],\n    );\n\n    useEffect(() => {\n      // Для корректной работы onUnexpectedInput надо знать предыдущий value,\n      // но imask при монтировании не вызывает onAccept, если value невалиден или laze=false.\n      // Поэтому актуальный value при монтировании надо получать вручную\n      if (inputRef.current?.input) {\n        prevValue.current = inputRef.current.input.value;\n        prevSelectionStart.current = inputRef.current.input.selectionStart;\n      }\n    }, []);\n\n    const imaskProps = getCompatibleIMaskProps();\n\n    return (\n      <Input\n        ref={inputRef}\n        {...inputProps}\n        onFocus={handleFocus}\n        onBlur={handleBlur}\n        onInput={handleInput}\n        onKeyDown={handleKeyDown}\n        className={cx(globalClasses.root, uiFontGlobalClasses.root, className)}\n        element={\n          colored ? (\n            <ColorableInputElement showOnFocus={false}>\n              <FixedIMaskInput {...imaskProps} onAccept={handleAccept} />\n            </ColorableInputElement>\n          ) : (\n            <FixedIMaskInput {...imaskProps} onAccept={handleAccept} />\n          )\n        }\n      />\n    );\n\n    function getCompatibleIMaskProps(): IMaskInputProps<HTMLInputElement> {\n      return {\n        mask: mask.replace(/0/g, '{\\\\0}') as any,\n        placeholderChar: getMaskChar(maskChar),\n        definitions: getDefinitions(formatChars),\n        // FIXME: Должно быть eager=true, но в imask ломается удаление по delete\n        eager: 'append',\n        overwrite: 'shift',\n        lazy: !alwaysShowMask && (props.disabled || !focused),\n        unmask,\n        ...customIMaskProps,\n      } as IMaskInputProps<HTMLInputElement>;\n    }\n\n    function handleAccept(...args: Parameters<Required<IMaskInputProps<HTMLInputElement>>['onAccept']>) {\n      const [value, , e] = args;\n\n      // Метод onAccept может вызываться при монтировании, если не задан проп defaultValue.\n      // Но нативный input никогда не вызывает onChange при монтировании.\n      // Наше событие onValueChange в Input вывается в тех же случаях, что и нативный onChange,\n      // поэтому чтобы сохранить консинстентность будем ориентироваться на наличие аргумента e.\n      // Он содержит нативное событие, вызвавшее изменение.\n      e && onValueChange?.(value);\n      !e && (prevValue.current = value);\n    }\n\n    /**\n     * Отслеживаем неожиданные нажатия\n     * handleAccept не вызывается когда значение с маской не меняется\n     * Сначала вызывается handleAccept, затем handleInput\n     */\n    function handleInput(e: React.ChangeEvent<HTMLInputElement>) {\n      const { value, selectionStart } = e.currentTarget;\n\n      // При вводе неожиданных символов или удалении каретка может перепрыгивать фиксированные символы.\n      // Такие случаи не расцениваем как неожиданный ввод, т.к. пользователь может намеренно их вводить.\n      if (prevValue.current === value && selectionStart === prevSelectionStart.current) {\n        handleUnexpectedInput(value);\n      }\n      prevValue.current = value;\n      prevSelectionStart.current = selectionStart;\n\n      props.onInput?.(e);\n    }\n\n    function handleFocus(e: React.FocusEvent<HTMLInputElement>) {\n      setFocused(true);\n      props.onFocus?.(e);\n\n      // Если value из пропов отличается от value, которое получит input после обработки,\n      // то imask будет ставить каретку за последним валидным символом.\n      props.selectAllOnFocus && inputRef.current?.delaySelectAll();\n    }\n\n    function handleUnexpectedInput(value: string) {\n      const blink = inputRef.current?.blink.bind(inputRef.current) || (() => undefined);\n      onUnexpectedInput ? onUnexpectedInput(value, blink) : blink();\n    }\n\n    function handleBlur(e: React.FocusEvent<HTMLInputElement>) {\n      setFocused(false);\n      props.onBlur?.(e);\n    }\n\n    function handleKeyDown(e: React.KeyboardEvent<HTMLInputElement>) {\n      const { value, selectionStart, selectionEnd } = e.currentTarget;\n\n      if (\n        (isKeyBackspace(e) && selectionStart === 0 && selectionEnd === 0) ||\n        (isKeyDelete(e) && prevSelectionStart.current === value.length)\n      ) {\n        // Случаи, когда нажатие клавиш не тригерит `onInput`\n        handleUnexpectedInput(value);\n        prevValue.current = e.currentTarget.value;\n      }\n      prevSelectionStart.current = selectionStart;\n\n      props.onKeyDown?.(e);\n    }\n  },\n);\n"],"mappings":"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","ignoreList":[]}

package/cjs/components/MaskedInput/MaskedInput.md

@@ -1,4 +1,4 @@
-#### `mask`
+### Проп `mask`
 
 Паттерн ввода. Пример с номером телефона.
 
@@ -18,7 +18,7 @@ const [value, setValue] = React.useState('');
 </>
 ```
 
-#### `alwaysShowMask`
+### Проп `alwaysShowMask`
 
 Показывает маску всегда.
 
@@ -26,7 +26,7 @@ const [value, setValue] = React.useState('');
 <MaskedInput mask="+7 (999) 999-99-99" alwaysShowMask />
 ```
 
-#### `maskChar`
+### Проп `maskChar`
 
 Символом маски может быть любой символ.
 
@@ -48,7 +48,7 @@ const [value, setValue] = React.useState('');
 </>
 ```
 
-#### `formatChars`
+### Проп `formatChars`
 
 При необходимости можно настроить собственный словарь.
 
@@ -71,7 +71,7 @@ const [value, setValue] = React.useState('');
 />
 ```
 
-#### `unmask`
+### Проп `unmask`
 
 Можно сразу получать очищенный value, содержащий только введённый пользователем символы.
 
@@ -92,6 +92,8 @@ const [value, setValue] = React.useState('');
 </>
 ```
 
+### Проп `unmask` с фигурными скобками
+
 Если обернуть фиксированные символы в фигурные скобки, то они попадут в `value` при `unmask = true`.
 
 ```jsx harmony