@skbkontur/react-ui 5.0.11-ZIndex-several-roots.2 → 5.0.12

package/CHANGELOG.md

@@ -3,6 +3,18 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [5.0.12](https://github.com/skbkontur/retail-ui/compare/@skbkontur/react-ui@5.0.11...@skbkontur/react-ui@5.0.12) (2025-03-11)
+
+
+### Bug Fixes
+
+* **Loader,ZIndex:** fix overlap of dropdowns in widgets ([#3612](https://github.com/skbkontur/retail-ui/issues/3612)) ([7990c6d](https://github.com/skbkontur/retail-ui/commit/7990c6d4b661e49e5fec8707f4f06a9655bce25e))
+* **MaskedInput:** rerender after theme change ([#3614](https://github.com/skbkontur/retail-ui/issues/3614)) ([840443f](https://github.com/skbkontur/retail-ui/commit/840443fff46bc6037b92e3da6151312075c25fc7))
+
+
+
+
+
 ## [5.0.11](https://github.com/skbkontur/retail-ui/compare/@skbkontur/react-ui@5.0.10...@skbkontur/react-ui@5.0.11) (2025-03-03)
 
 

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,8 +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 */
 
 
 
@@ -28,7 +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 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);
@@ -44,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, theme);
+      activation();
       updateActive();
-    }, [active, showOnFocus, props.value, props.defaultValue, props.disabled, focused.current, theme]);
+    }, [props.value, props.defaultValue, theme, activation]);
 
     (0, _react.useEffect)(function () {
       if (inputRef.current) {
@@ -69,11 +136,11 @@ var ColorableInputElement = exports.ColorableInputElement = (0, _forwardRefAndNa
       ));
 
 
-    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, theme);
+      activation();
 
       onInput == null || onInput(e);
     }
@@ -95,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, theme) {
-      if (active) {
-        debouncedPaintText(props, theme);
-      } 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, _theme) {var _inputRef$current4, _shadow;if (_props === void 0) {_props = props;}if (_theme === void 0) {_theme = theme;}
-      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","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","globalClasses","style","visibility","position","whiteSpace","e","_inputRef$current","isActive","parentElement","querySelector","setTimeout","_inputRef$current2","_inputRef$current3","cancel","backgroundImage","classList","remove","_props","_theme","_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 { cx } from '../../../lib/theming/Emotion';\nimport { Theme } from '../../../lib/theming/Theme';\n\nimport { globalClasses } from './ColorableInputElement.styles';\n\nexport type ColorableInputElementProps = InputElementProps & {\n  showOnFocus?: boolean;\n  children: React.ReactElement;\n};\n\n// Возможно придётся включить.\n// Иногда, на тяжёлых страницах, текст рендерится итеративно.\n// Из-за этого могут оставаться артефакты при покраске компонента, которые пропадут только после фокуса.\n// setInterval(() => window.requestAnimationFrame(() => dictionary.forEach((paint) => paint())), 1000);\n\nexport const ColorableInputElement = forwardRefAndName(\n  'ColorableInputElement',\n  function ColorableInputElement(props: ColorableInputElementProps, ref: ForwardedRef<InputElement>) {\n    const inputRef = useRef<HTMLInputElement | null>(null);\n    const spanRef = useRef<HTMLSpanElement | null>(null);\n    const focused = useRef(false);\n    const inputStyle = React.useRef<CSSStyleDeclaration>();\n    const theme = useContext(ThemeContext);\n    const debouncedPaintText = useCallback(debounce(paintText), []);\n    const [active, setActive] = useState(true);\n\n    const { children, onInput, onFocus, onBlur, showOnFocus, ...inputProps } = props;\n\n    useImperativeHandle(\n      ref,\n      () => ({\n        input: inputRef.current,\n        getRootNode: () => inputRef.current,\n      }),\n      [],\n    );\n\n    useEffect(updateActive, []);\n\n    useEffect(() => {\n      activation(props, theme);\n      updateActive();\n    }, [active, showOnFocus, props.value, props.defaultValue, props.disabled, focused.current, theme]);\n\n    useEffect(() => {\n      if (inputRef.current) {\n        inputStyle.current = getComputedStyle(inputRef.current);\n      }\n    });\n\n    return (\n      <>\n        {React.cloneElement(children, {\n          ...inputProps,\n          onInput: handleInput,\n          onFocus: handleFocus,\n          onBlur: handleBlur,\n          inputRef,\n          className: cx(props.className, active && globalClasses.input),\n        })}\n        {active && <span style={{ visibility: 'hidden', position: 'absolute', whiteSpace: 'pre' }} ref={spanRef} />}\n      </>\n    );\n\n    function handleInput(e: React.ChangeEvent<HTMLInputElement>) {\n      const isActive = !inputRef.current?.parentElement?.querySelector(':placeholder-shown');\n      setActive(isActive);\n\n      activation(props, theme);\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, theme: Theme) {\n      if (active) {\n        debouncedPaintText(props, theme);\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, _theme: Theme = theme) {\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","_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/components/MaskedInput/ColorableInputElement/ColorableInputElement/ColorableInputElement.js

@@ -1,6 +1,6 @@
 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';
@@ -20,7 +20,6 @@ export var ColorableInputElement = forwardRefAndName('ColorableInputElement', fu
   var focused = useRef(false);
   var inputStyle = React.useRef();
   var theme = useContext(ThemeContext);
-  var debouncedPaintText = useCallback(debounce(paintText), []);
   var _useState = useState(true),
     active = _useState[0],
     setActive = _useState[1];
@@ -39,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, theme);
+    activation();
     updateActive();
-  }, [active, showOnFocus, props.value, props.defaultValue, props.disabled, focused.current, theme]);
+  }, [props.value, props.defaultValue, theme, activation]);
   useEffect(function () {
     if (inputRef.current) {
       inputStyle.current = getComputedStyle(inputRef.current);
@@ -66,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, theme);
+    activation();
     onInput == null || onInput(e);
   }
   function handleFocus(e) {
@@ -84,57 +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, theme) {
-    if (active) {
-      debouncedPaintText(props, theme);
-    } 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, _theme) {
-    var _inputRef$current4, _shadow;
-    if (_props === void 0) {
-      _props = props;
-    }
-    if (_theme === void 0) {
-      _theme = theme;
-    }
-    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","cx","globalClasses","ColorableInputElement","props","ref","inputRef","spanRef","focused","inputStyle","theme","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","style","visibility","position","whiteSpace","e","_inputRef$current","isActive","parentElement","querySelector","setTimeout","_inputRef$current2","_inputRef$current3","cancel","backgroundImage","classList","remove","_props","_theme","_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 { cx } from '../../../lib/theming/Emotion';\nimport { Theme } from '../../../lib/theming/Theme';\n\nimport { globalClasses } from './ColorableInputElement.styles';\n\nexport type ColorableInputElementProps = InputElementProps & {\n  showOnFocus?: boolean;\n  children: React.ReactElement;\n};\n\n// Возможно придётся включить.\n// Иногда, на тяжёлых страницах, текст рендерится итеративно.\n// Из-за этого могут оставаться артефакты при покраске компонента, которые пропадут только после фокуса.\n// setInterval(() => window.requestAnimationFrame(() => dictionary.forEach((paint) => paint())), 1000);\n\nexport const ColorableInputElement = forwardRefAndName(\n  'ColorableInputElement',\n  function ColorableInputElement(props: ColorableInputElementProps, ref: ForwardedRef<InputElement>) {\n    const inputRef = useRef<HTMLInputElement | null>(null);\n    const spanRef = useRef<HTMLSpanElement | null>(null);\n    const focused = useRef(false);\n    const inputStyle = React.useRef<CSSStyleDeclaration>();\n    const theme = useContext(ThemeContext);\n    const debouncedPaintText = useCallback(debounce(paintText), []);\n    const [active, setActive] = useState(true);\n\n    const { children, onInput, onFocus, onBlur, showOnFocus, ...inputProps } = props;\n\n    useImperativeHandle(\n      ref,\n      () => ({\n        input: inputRef.current,\n        getRootNode: () => inputRef.current,\n      }),\n      [],\n    );\n\n    useEffect(updateActive, []);\n\n    useEffect(() => {\n      activation(props, theme);\n      updateActive();\n    }, [active, showOnFocus, props.value, props.defaultValue, props.disabled, focused.current, theme]);\n\n    useEffect(() => {\n      if (inputRef.current) {\n        inputStyle.current = getComputedStyle(inputRef.current);\n      }\n    });\n\n    return (\n      <>\n        {React.cloneElement(children, {\n          ...inputProps,\n          onInput: handleInput,\n          onFocus: handleFocus,\n          onBlur: handleBlur,\n          inputRef,\n          className: cx(props.className, active && globalClasses.input),\n        })}\n        {active && <span style={{ visibility: 'hidden', position: 'absolute', whiteSpace: 'pre' }} ref={spanRef} />}\n      </>\n    );\n\n    function handleInput(e: React.ChangeEvent<HTMLInputElement>) {\n      const isActive = !inputRef.current?.parentElement?.querySelector(':placeholder-shown');\n      setActive(isActive);\n\n      activation(props, theme);\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, theme: Theme) {\n      if (active) {\n        debouncedPaintText(props, theme);\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, _theme: Theme = theme) {\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/package.json

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