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

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

@@ -1,13 +1,13 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-var _excluded = ["children", "onInput", "onFocus", "onBlur", "showOnFocus"];
+var _excluded = ["children", "onInput", "onFocus", "onBlur", "showOnFocus"]; /* eslint react-hooks/exhaustive-deps: 2 */
 import React, { useContext, useEffect, useImperativeHandle, useRef, useCallback, useState } from 'react';
 import { globalObject, isBrowser } from '@skbkontur/global-object';
 import debounce from 'lodash.debounce';
 import { ThemeContext } from "../../../../lib/theming/ThemeContext";
 import { forwardRefAndName } from "../../../../lib/forwardRefAndName";
-import { EmotionContext } from "../../../../lib/theming/Emotion";
-import { getStyles, globalClasses } from "../ColorableInputElement.styles";
+import { cx } from "../../../../lib/theming/Emotion";
+import { globalClasses } from "../ColorableInputElement.styles";
 
 // Возможно придётся включить.
 // Иногда, на тяжёлых страницах, текст рендерится итеративно.
@@ -20,9 +20,6 @@ export var ColorableInputElement = forwardRefAndName('ColorableInputElement', fu
   var focused = useRef(false);
   var inputStyle = React.useRef();
   var theme = useContext(ThemeContext);
-  var emotion = useContext(EmotionContext);
-  var styles = getStyles(emotion);
-  var debouncedPaintText = useCallback(debounce(paintText), []);
   var _useState = useState(true),
     active = _useState[0],
     setActive = _useState[1];
@@ -41,10 +38,56 @@ export var ColorableInputElement = forwardRefAndName('ColorableInputElement', fu
     };
   }, []);
   useEffect(updateActive, []);
+  var paintText = useCallback(function () {
+    var _inputRef$current, _shadow;
+    if (!spanRef.current || !inputRef.current || !inputStyle.current || !isBrowser(globalObject)) {
+      return;
+    }
+    (_inputRef$current = inputRef.current) == null || _inputRef$current.classList.add(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.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 = useCallback(function () {
+    return debounce(paintText);
+  }, [paintText])();
+  var activation = 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(globalClasses.input);
+    }
+  }, [debouncedPaintText, active]);
   useEffect(function () {
-    activation(props);
+    activation();
     updateActive();
-  }, [active, showOnFocus, props.value, props.defaultValue, props.disabled, focused.current]);
+  }, [props.value, props.defaultValue, theme, activation]);
   useEffect(function () {
     if (inputRef.current) {
       inputStyle.current = getComputedStyle(inputRef.current);
@@ -57,11 +100,7 @@ export var ColorableInputElement = forwardRefAndName('ColorableInputElement', fu
       onFocus: handleFocus,
       onBlur: handleBlur,
       inputRef: inputRef,
-      className: emotion.cx(props.className, active && styles.input()),
-      style: _extends({}, inputProps.style, {
-        WebkitBackgroundClip: 'text',
-        backgroundClip: 'text'
-      })
+      className: cx(props.className, active && globalClasses.input)
     })), active && /*#__PURE__*/React.createElement("span", {
       style: {
         visibility: 'hidden',
@@ -72,10 +111,10 @@ export var ColorableInputElement = forwardRefAndName('ColorableInputElement', fu
     }))
   );
   function handleInput(e) {
-    var _inputRef$current;
-    var isActive = !((_inputRef$current = inputRef.current) != null && (_inputRef$current = _inputRef$current.parentElement) != null && _inputRef$current.querySelector(':placeholder-shown'));
+    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);
   }
   function handleFocus(e) {
@@ -90,54 +129,8 @@ export var ColorableInputElement = forwardRefAndName('ColorableInputElement', fu
   }
   function updateActive() {
     setTimeout(function () {
-      var _inputRef$current2;
-      setActive(!((_inputRef$current2 = inputRef.current) != null && (_inputRef$current2 = _inputRef$current2.parentElement) != null && _inputRef$current2.querySelector(':placeholder-shown')));
+      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(globalClasses.input);
-    }
-  }
-  function paintText(_props) {
-    var _inputRef$current4, _shadow;
-    if (_props === void 0) {
-      _props = props;
-    }
-    if (!spanRef.current || !inputRef.current || !inputStyle.current || !isBrowser(globalObject)) {
-      return;
-    }
-    (_inputRef$current4 = inputRef.current) == null || _inputRef$current4.classList.add(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.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/components/MaskedInput/ColorableInputElement/ColorableInputElement/ColorableInputElement.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","useContext","useEffect","useImperativeHandle","useRef","useCallback","useState","globalObject","isBrowser","debounce","ThemeContext","forwardRefAndName","EmotionContext","getStyles","globalClasses","ColorableInputElement","props","ref","inputRef","spanRef","focused","inputStyle","theme","emotion","styles","debouncedPaintText","paintText","_useState","active","setActive","children","onInput","onFocus","onBlur","showOnFocus","inputProps","_objectWithoutPropertiesLoose","_excluded","input","current","getRootNode","updateActive","activation","value","defaultValue","disabled","getComputedStyle","createElement","Fragment","cloneElement","_extends","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","_props","_inputRef$current4","_shadow","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":"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","ignoreList":[]}
+{"version":3,"names":["React","useContext","useEffect","useImperativeHandle","useRef","useCallback","useState","globalObject","isBrowser","debounce","ThemeContext","forwardRefAndName","cx","globalClasses","ColorableInputElement","props","ref","inputRef","spanRef","focused","inputStyle","theme","_useState","active","setActive","children","onInput","onFocus","onBlur","showOnFocus","inputProps","_objectWithoutPropertiesLoose","_excluded","input","current","getRootNode","updateActive","paintText","_inputRef$current","_shadow","classList","add","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","activation","_inputRef$current2","cancel","remove","value","defaultValue","getComputedStyle","Fragment","cloneElement","_extends","handleInput","handleFocus","handleBlur","className","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/components/MaskedInput/ColorableInputElement/ColorableInputElement.styles/ColorableInputElement.styles.js

@@ -1,13 +1,7 @@
 import _taggedTemplateLiteralLoose from "@babel/runtime/helpers/esm/taggedTemplateLiteralLoose";
 var _templateObject;
-import { memoizeStyle, prefix } from "../../../../lib/theming/Emotion";
+import { injectGlobal, prefix } from "../../../../lib/theming/Emotion";
 export var globalClasses = prefix('colorable')({
   input: 'input'
 });
-export var getStyles = function getStyles(emotion) {
-  return memoizeStyle({
-    input: function input() {
-      return emotion.css(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\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);
-    }
-  });
-};
+injectGlobal(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n  input.", " {\n    display: inline-block;\n    background-color: transparent;\n    background-size: 100%;\n    background-repeat: repeat;\n    background-clip: text;\n    -webkit-text-fill-color: transparent;\n  }\n"])), globalClasses.input);

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

@@ -1 +1 @@
-{"version":3,"names":["memoizeStyle","prefix","globalClasses","input","getStyles","emotion","css","_templateObject","_taggedTemplateLiteralLoose"],"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,SAASA,YAAY,EAAEC,MAAM,QAAQ,8BAA8B;;AAEnE,OAAO,IAAMC,aAAa,GAAGD,MAAM,CAAC,WAAW,CAAC,CAAC;EAC/CE,KAAK,EAAE;AACT,CAAC,CAAC;;AAEF,OAAO,IAAMC,SAAS,GAAG,SAAZA,SAASA,CAAIC,OAAgB;IACxCL,YAAY,CAAC;MACXG,KAAK,WAAAA,MAAA,EAAG;QACN,OAAOE,OAAO,CAACC,GAAG,CAAAC,eAAA,KAAAA,eAAA,GAAAC,2BAAA;QACZN,aAAa,CAACC,KAAK;;;;;;;;;MAS3B;IACF,CAAC,CAAC","ignoreList":[]}
+{"version":3,"names":["injectGlobal","prefix","globalClasses","input","_templateObject","_taggedTemplateLiteralLoose"],"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":"oHAAA,SAASA,YAAY,EAAEC,MAAM,QAAQ,8BAA8B;;AAEnE,OAAO,IAAMC,aAAa,GAAGD,MAAM,CAAC,WAAW,CAAC,CAAC;EAC/CE,KAAK,EAAE;AACT,CAAC,CAAC;;AAEFH,YAAY,CAAAI,eAAA,KAAAA,eAAA,GAAAC,2BAAA;AACFH,aAAa,CAACC,KAAK","ignoreList":[]}

package/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/components/MaskedInput/MaskedInput/MaskedInput.js

@@ -1,12 +1,12 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 var _excluded = ["mask", "maskChar", "formatChars", "alwaysShowMask", "colored", "imaskProps", "unmask", "onValueChange", "onUnexpectedInput", "onChange", "element", "className"];
-import React, { useImperativeHandle, useRef, useState, useEffect, useContext } from 'react';
+import React, { useImperativeHandle, useRef, useState, useEffect } from 'react';
 import { forwardRefAndName } from "../../../lib/forwardRefAndName";
+import { cx } from "../../../lib/theming/Emotion";
 import { uiFontGlobalClasses } from "../../../lib/styles/UiFont";
 import { Input } from "../../Input";
 import { isKeyBackspace, isKeyDelete } from "../../../lib/events/keyboard/identifiers";
-import { EmotionContext } from "../../../lib/theming/Emotion";
 import { globalClasses } from "../MaskedInput.styles";
 import { getDefinitions, getMaskChar } from "../MaskedInput.helpers";
 import { ColorableInputElement } from "../ColorableInputElement";
@@ -34,7 +34,6 @@ export var MaskedInput = forwardRefAndName('MaskedInput', function MaskedInput(p
     element = props.element,
     className = props.className,
     inputProps = _objectWithoutPropertiesLoose(props, _excluded);
-  var emotion = useContext(EmotionContext);
   var inputRef = useRef(null);
   var _useState = useState(false),
     focused = _useState[0],
@@ -69,7 +68,7 @@ export var MaskedInput = forwardRefAndName('MaskedInput', function MaskedInput(p
       onBlur: handleBlur,
       onInput: handleInput,
       onKeyDown: handleKeyDown,
-      className: emotion.cx(globalClasses.root, uiFontGlobalClasses.root, className),
+      className: cx(globalClasses.root, uiFontGlobalClasses.root, className),
       element: colored ? /*#__PURE__*/
       React.createElement(ColorableInputElement, {
         showOnFocus: false

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

@@ -1 +1 @@
-{"version":3,"names":["React","useImperativeHandle","useRef","useState","useEffect","useContext","forwardRefAndName","uiFontGlobalClasses","Input","isKeyBackspace","isKeyDelete","EmotionContext","globalClasses","getDefinitions","getMaskChar","ColorableInputElement","FixedIMaskInput","MaskedInput","props","ref","mask","maskChar","formatChars","_props$alwaysShowMask","alwaysShowMask","_props$colored","colored","_props$imaskProps","imaskProps","customIMaskProps","_props$unmask","unmask","onValueChange","onUnexpectedInput","onChange","element","className","inputProps","_objectWithoutPropertiesLoose","_excluded","emotion","inputRef","_useState","focused","setFocused","prevValue","value","String","defaultValue","prevSelectionStart","current","Object","assign","selectAll","_inputRef$current","_inputRef$current2","focus","delaySelectAll","_inputRef$current3","input","selectionStart","getCompatibleIMaskProps","createElement","_extends","onFocus","handleFocus","onBlur","handleBlur","onInput","handleInput","onKeyDown","handleKeyDown","cx","root","showOnFocus","onAccept","handleAccept","replace","placeholderChar","definitions","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"],"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","useImperativeHandle","useRef","useState","useEffect","forwardRefAndName","cx","uiFontGlobalClasses","Input","isKeyBackspace","isKeyDelete","globalClasses","getDefinitions","getMaskChar","ColorableInputElement","FixedIMaskInput","MaskedInput","props","ref","mask","maskChar","formatChars","_props$alwaysShowMask","alwaysShowMask","_props$colored","colored","_props$imaskProps","imaskProps","customIMaskProps","_props$unmask","unmask","onValueChange","onUnexpectedInput","onChange","element","className","inputProps","_objectWithoutPropertiesLoose","_excluded","inputRef","_useState","focused","setFocused","prevValue","value","String","defaultValue","prevSelectionStart","current","Object","assign","selectAll","_inputRef$current","_inputRef$current2","focus","delaySelectAll","_inputRef$current3","input","selectionStart","getCompatibleIMaskProps","createElement","_extends","onFocus","handleFocus","onBlur","handleBlur","onInput","handleInput","onKeyDown","handleKeyDown","root","showOnFocus","onAccept","handleAccept","replace","placeholderChar","definitions","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"],"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/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/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