@skbkontur/react-ui 0.0.0-50f666af0e → 0.0.0-52df310f7c

package/cjs/components/PasswordInput/PasswordInput.d.ts

@@ -1,17 +1,24 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { InputProps } from '../Input';
-export declare type PasswordInputProps = {
+import { CommonProps } from '../../internal/CommonWrapper';
+export interface PasswordInputProps extends CommonProps, InputProps {
     detectCapsLock?: boolean;
-} & InputProps;
+}
 export interface PasswordInputState {
     visible: boolean;
     capsLockEnabled?: boolean | null;
 }
+export declare const PasswordInputDataTids: {
+    readonly root: "PasswordInput";
+    readonly capsLockDetector: "PasswordInputCapsLockDetector";
+    readonly eyeIcon: "PasswordInputEyeIcon";
+};
+declare type DefaultProps = Required<Pick<PasswordInputProps, 'size'>>;
 /**
  * Компонент для ввода пароля
  */
-export declare class PasswordInput extends React.Component<PasswordInputProps, PasswordInputState> {
+export declare class PasswordInput extends React.PureComponent<PasswordInputProps, PasswordInputState> {
     static __KONTUR_REACT_UI__: string;
     static propTypes: {
         /**
@@ -19,12 +26,14 @@ export declare class PasswordInput extends React.Component<PasswordInputProps, P
          */
         detectCapsLock: PropTypes.Requireable<boolean>;
     };
-    static defaultProps: {
-        size: string;
-    };
+    static defaultProps: DefaultProps;
+    private getProps;
     state: PasswordInputState;
+    private theme;
     private input;
-    UNSAFE_componentWillMount(): void;
+    private setRootNode;
+    componentDidMount(): void;
+    static getDerivedStateFromProps(props: PasswordInputProps, state: PasswordInputState): PasswordInputState;
     render(): JSX.Element;
     /**
      * @public
@@ -39,7 +48,10 @@ export declare class PasswordInput extends React.Component<PasswordInputProps, P
     private handleToggleVisibility;
     private handleFocus;
     private handleBlur;
+    private getEyeWrapperClassname;
     private renderEye;
     private refInput;
-    private renderInput;
+    private hideSymbols;
+    private renderMain;
 }
+export {};

package/cjs/components/PasswordInput/PasswordInput.js

@@ -1,29 +1,47 @@
-"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");exports.__esModule = true;exports.PasswordInput = void 0;var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));var _react = _interopRequireDefault(require("react"));
+"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");exports.__esModule = true;exports.PasswordInputDataTids = exports.PasswordInput = void 0;var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));
+
+var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
+var _RenderLayer = require("../../internal/RenderLayer");
+var _utils = require("../../lib/utils");
 var _identifiers = require("../../lib/events/keyboard/identifiers");
 var _KeyboardEventCodes = require("../../lib/events/keyboard/KeyboardEventCodes");
 var _Input = require("../Input");
 
-var _px = require("../../internal/icons/16px");
-var _utils = require("../../lib/utils");
+var _client = require("../../lib/client");
+var _CommonWrapper = require("../../internal/CommonWrapper");
+
+var _ThemeContext = require("../../lib/theming/ThemeContext");
+var _Emotion = require("../../lib/theming/Emotion");
+var _rootNode = require("../../lib/rootNode");
+var _createPropsGetter = require("../../lib/createPropsGetter");
 
 var _PasswordInput = require("./PasswordInput.styles");
+var _PasswordInputIcon = require("./PasswordInputIcon");var _excluded = ["detectCapsLock"];var _class, _class2, _temp;
+
+
+
+
 
 
 
 
 
 
+var PasswordInputDataTids = {
+  root: 'PasswordInput',
+  capsLockDetector: 'PasswordInputCapsLockDetector',
+  eyeIcon: 'PasswordInputEyeIcon' };exports.PasswordInputDataTids = PasswordInputDataTids;
 
 
 
 
-/**
-                                                         * Компонент для ввода пароля
-                                                         */var
-PasswordInput = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.default)(PasswordInput, _React$Component);function PasswordInput() {var _this;for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {args[_key] = arguments[_key];}_this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;_this.
+/**
+ * Компонент для ввода пароля
+ */var
 
+PasswordInput = (0, _rootNode.rootNode)(_class = (_temp = _class2 = /*#__PURE__*/function (_React$PureComponent) {(0, _inheritsLoose2.default)(PasswordInput, _React$PureComponent);function PasswordInput() {var _this;for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {args[_key] = arguments[_key];}_this = _React$PureComponent.call.apply(_React$PureComponent, [this].concat(args)) || this;_this.
 
 
 
@@ -36,12 +54,37 @@ PasswordInput = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.de
 
 
 
+
+    getProps = (0, _createPropsGetter.createPropsGetter)(PasswordInput.defaultProps);_this.
+
     state = {
       visible: false,
       capsLockEnabled: false };_this.
 
 
-    input = void 0;_this.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
 
 
 
@@ -76,8 +119,8 @@ PasswordInput = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.de
       _this.handleBlur();
     };_this.
 
-    handleKeyPress = function (e) {var _this$props =
-      _this.props,onKeyPress = _this$props.onKeyPress,detectCapsLock = _this$props.detectCapsLock;
+    handleKeyPress = function (e) {
+      var _this$props = _this.props,onKeyPress = _this$props.onKeyPress,detectCapsLock = _this$props.detectCapsLock;
 
       if (onKeyPress) {
         onKeyPress(e);
@@ -92,8 +135,8 @@ PasswordInput = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.de
       _this.setState({ capsLockEnabled: capsLockEnabled });
     };_this.
 
-    handleKeydown = function (e) {var _assertThisInitialize = (0, _assertThisInitialized2.default)(_this),_assertThisInitialize2 = _assertThisInitialize.
-
+    handleKeydown = function (e) {
+      var _assertThisInitialize = (0, _assertThisInitialized2.default)(_this),_assertThisInitialize2 = _assertThisInitialize.
       props,detectCapsLock = _assertThisInitialize2.detectCapsLock,onKeyDown = _assertThisInitialize2.onKeyDown,
       capsLockEnabled = _assertThisInitialize.state.capsLockEnabled;
 
@@ -106,7 +149,7 @@ PasswordInput = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.de
         return;
       }
 
-      if ((0, _identifiers.isKeyCapsLock)(e) && capsLockEnabled != null) {
+      if ((0, _identifiers.isKeyCapsLock)(e) && (0, _utils.isNonNullable)(capsLockEnabled)) {
         _this.setState({ capsLockEnabled: !capsLockEnabled });
       }
     };_this.
@@ -127,14 +170,32 @@ PasswordInput = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.de
       }
     };_this.
 
-    renderEye = function () {var
-      capsLockEnabled = _this.state.capsLockEnabled;
 
-      return (
-        _react.default.createElement("span", { className: _PasswordInput.jsStyles.iconWrapper() },
-        capsLockEnabled && _react.default.createElement("span", { className: _PasswordInput.jsStyles.capsLockDetector() }),
-        _react.default.createElement("span", { "data-tid": "PasswordInputEyeIcon", className: _PasswordInput.jsStyles.toggleVisibility(), onClick: _this.handleToggleVisibility },
-        _this.state.visible ? _react.default.createElement(_px.EyeOpenedIcon, { size: 14 }) : _react.default.createElement(_px.EyeClosedIcon, { size: 14 }))));
+
+
+
+
+
+
+
+
+
+
+
+    renderEye = function () {
+      var capsLockEnabled = _this.state.capsLockEnabled;
+
+      return /*#__PURE__*/(
+        _react.default.createElement("span", { className: _PasswordInput.styles.iconWrapper() },
+        capsLockEnabled && /*#__PURE__*/
+        _react.default.createElement("span", { className: _PasswordInput.styles.capsLockDetector(), "data-tid": PasswordInputDataTids.capsLockDetector }), /*#__PURE__*/
+
+        _react.default.createElement("span", {
+          "data-tid": PasswordInputDataTids.eyeIcon,
+          className: (0, _Emotion.cx)(_PasswordInput.styles.toggleVisibility(_this.theme), _this.getEyeWrapperClassname()),
+          onClick: _this.handleToggleVisibility },
+
+        !_this.props.disabled && /*#__PURE__*/_react.default.createElement(_PasswordInputIcon.PasswordInputIcon, { visible: _this.state.visible }))));
 
 
 
@@ -142,17 +203,33 @@ PasswordInput = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.de
 
     refInput = function (element) {
       _this.input = element;
-    };return _this;}var _proto = PasswordInput.prototype;_proto.UNSAFE_componentWillMount = function UNSAFE_componentWillMount() {if (this.props.detectCapsLock) {this.setState({ capsLockEnabled: null });} // @ts-ignore
-    if (_utils.isIE11 && !window.document.msCapsLockWarningOff) {// turns off default ie capslock warning
-      // @ts-ignore
-      window.document.msCapsLockWarningOff = true;}};_proto.render = function render() {return _react.default.createElement("div", { className: _PasswordInput.jsStyles.root() }, this.renderInput());} /**
-                                                                                                                                                                                                         * @public
-                                                                                                                                                                                                         */;_proto.renderInput = function renderInput() {var _this$props2 = this.props,detectCapsLock = _this$props2.detectCapsLock,props = (0, _objectWithoutPropertiesLoose2.default)(_this$props2, ["detectCapsLock"]);var inputProps = (0, _extends2.default)({}, props, {
-      onKeyDown: this.handleKeydown,
-      onKeyPress: this.handleKeyPress,
-      rightIcon: this.renderEye() });
-
-    return _react.default.createElement(_Input.Input, (0, _extends2.default)({ ref: this.refInput, type: this.state.visible ? 'text' : 'password' }, inputProps));
-  };return PasswordInput;}(_react.default.Component);exports.PasswordInput = PasswordInput;PasswordInput.__KONTUR_REACT_UI__ = 'PasswordInput';PasswordInput.propTypes = { /**
-                                                                                                                                                                            * Включает CapsLock детектор
-                                                                                                                                                                            */detectCapsLock: _propTypes.default.bool };PasswordInput.defaultProps = { size: 'small' };
+    };_this.
+
+    hideSymbols = function () {
+      _this.setState({ visible: false });
+    };_this.
+
+    renderMain = function (props) {
+      var detectCapsLock = props.detectCapsLock,rest = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
+      var inputProps = (0, _extends2.default)({},
+      rest, {
+        onKeyDown: _this.handleKeydown,
+        onKeyPress: _this.handleKeyPress,
+        rightIcon: _this.renderEye() });
+
+
+      return /*#__PURE__*/(
+        _react.default.createElement(_RenderLayer.RenderLayer, { onFocusOutside: _this.hideSymbols, onClickOutside: _this.hideSymbols }, /*#__PURE__*/
+        _react.default.createElement("div", { "data-tid": PasswordInputDataTids.root, className: _PasswordInput.styles.root() }, /*#__PURE__*/
+        _react.default.createElement(_Input.Input, (0, _extends2.default)({ ref: _this.refInput, type: _this.state.visible ? 'text' : 'password' }, inputProps)))));
+
+
+
+    };return _this;}var _proto = PasswordInput.prototype;_proto.componentDidMount = function componentDidMount() {if (this.props.detectCapsLock) {this.setState({ capsLockEnabled: null });} // @ts-expect-error: IE-specific API.
+    if (_client.isIE11 && !window.document.msCapsLockWarningOff) {// @ts-expect-error: Read the comment above.
+      // turns off default ie capslock warning
+      window.document.msCapsLockWarningOff = true;}};PasswordInput.getDerivedStateFromProps = function getDerivedStateFromProps(props, state) {if (props.disabled) {return { visible: false };}return state;};_proto.render = function render() {var _this2 = this;return /*#__PURE__*/_react.default.createElement(_ThemeContext.ThemeContext.Consumer, null, function (theme) {_this2.theme = theme;return /*#__PURE__*/_react.default.createElement(_CommonWrapper.CommonWrapper, (0, _extends2.default)({ rootNodeRef: _this2.setRootNode }, _this2.props), _this2.renderMain);});} /**
+   * @public
+   */;_proto.getEyeWrapperClassname = function getEyeWrapperClassname() {switch (this.getProps().size) {case 'large':return _PasswordInput.styles.eyeWrapperLarge(this.theme);case 'medium':return _PasswordInput.styles.eyeWrapperMedium(this.theme);case 'small':default:return _PasswordInput.styles.eyeWrapperSmall(this.theme);}};return PasswordInput;}(_react.default.PureComponent), _class2.__KONTUR_REACT_UI__ = 'PasswordInput', _class2.propTypes = { /**
+   * Включает CapsLock детектор
+   */detectCapsLock: _propTypes.default.bool }, _class2.defaultProps = { size: 'small' }, _temp)) || _class;exports.PasswordInput = PasswordInput;

package/cjs/components/PasswordInput/PasswordInput.js.map

@@ -1 +1 @@
-{"version":3,"sources":["PasswordInput.tsx"],"names":["PasswordInput","state","visible","capsLockEnabled","input","focus","blur","handleBlur","handleKeyPress","e","props","onKeyPress","detectCapsLock","getModifierState","Codes","CapsLock","setState","handleKeydown","onKeyDown","handleToggleVisibility","prevState","handleFocus","renderEye","jsStyles","iconWrapper","capsLockDetector","toggleVisibility","refInput","element","UNSAFE_componentWillMount","isIE11","window","document","msCapsLockWarningOff","render","root","renderInput","inputProps","rightIcon","React","Component","__KONTUR_REACT_UI__","propTypes","PropTypes","bool","defaultProps","size"],"mappings":"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","sourcesContent":["import React from 'react';\r\nimport PropTypes from 'prop-types';\r\n\r\nimport { isKeyCapsLock } from '../../lib/events/keyboard/identifiers';\r\nimport { KeyboardEventCodes as Codes } from '../../lib/events/keyboard/KeyboardEventCodes';\r\nimport { Input, InputProps } from '../Input';\r\nimport { Nullable } from '../../typings/utility-types';\r\nimport { EyeClosedIcon, EyeOpenedIcon } from '../../internal/icons/16px';\r\nimport { isIE11 } from '../../lib/utils';\r\n\r\nimport { jsStyles } from './PasswordInput.styles';\r\n\r\nexport type PasswordInputProps = {\r\n  detectCapsLock?: boolean;\r\n} & InputProps;\r\n\r\nexport interface PasswordInputState {\r\n  visible: boolean;\r\n  capsLockEnabled?: boolean | null;\r\n}\r\n\r\n/**\r\n * Компонент для ввода пароля\r\n */\r\nexport class PasswordInput extends React.Component<PasswordInputProps, PasswordInputState> {\r\n  public static __KONTUR_REACT_UI__ = 'PasswordInput';\r\n\r\n  public static propTypes = {\r\n    /**\r\n     * Включает CapsLock детектор\r\n     */\r\n    detectCapsLock: PropTypes.bool,\r\n  };\r\n\r\n  public static defaultProps = {\r\n    size: 'small',\r\n  };\r\n\r\n  public state: PasswordInputState = {\r\n    visible: false,\r\n    capsLockEnabled: false,\r\n  };\r\n\r\n  private input: Nullable<Input>;\r\n\r\n  public UNSAFE_componentWillMount() {\r\n    if (this.props.detectCapsLock) {\r\n      this.setState({ capsLockEnabled: null });\r\n    }\r\n\r\n    // @ts-ignore\r\n    if (isIE11 && !window.document.msCapsLockWarningOff) {\r\n      // turns off default ie capslock warning\r\n      // @ts-ignore\r\n      window.document.msCapsLockWarningOff = true;\r\n    }\r\n  }\r\n\r\n  public render() {\r\n    return <div className={jsStyles.root()}>{this.renderInput()}</div>;\r\n  }\r\n\r\n  /**\r\n   * @public\r\n   */\r\n  public focus = () => {\r\n    if (this.input) {\r\n      this.input.focus();\r\n    }\r\n  };\r\n\r\n  /**\r\n   * @public\r\n   */\r\n  public blur = () => {\r\n    this.handleBlur();\r\n  };\r\n\r\n  private handleKeyPress = (e: React.KeyboardEvent<HTMLInputElement>) => {\r\n    const { onKeyPress, detectCapsLock } = this.props;\r\n\r\n    if (onKeyPress) {\r\n      onKeyPress(e);\r\n    }\r\n\r\n    if (!detectCapsLock) {\r\n      return;\r\n    }\r\n\r\n    const capsLockEnabled = e.getModifierState(Codes.CapsLock);\r\n\r\n    this.setState({ capsLockEnabled });\r\n  };\r\n\r\n  private handleKeydown = (e: React.KeyboardEvent<HTMLInputElement>) => {\r\n    const {\r\n      props: { detectCapsLock, onKeyDown },\r\n      state: { capsLockEnabled },\r\n    } = this;\r\n\r\n    if (onKeyDown) {\r\n      onKeyDown(e);\r\n    }\r\n\r\n    if (!detectCapsLock) {\r\n      return;\r\n    }\r\n\r\n    if (isKeyCapsLock(e) && capsLockEnabled != null) {\r\n      this.setState({ capsLockEnabled: !capsLockEnabled });\r\n    }\r\n  };\r\n\r\n  private handleToggleVisibility = () => {\r\n    this.setState(prevState => ({ visible: !prevState.visible }), this.handleFocus);\r\n  };\r\n\r\n  private handleFocus = () => {\r\n    if (this.input) {\r\n      this.input.focus();\r\n    }\r\n  };\r\n\r\n  private handleBlur = () => {\r\n    if (this.input) {\r\n      this.input.blur();\r\n    }\r\n  };\r\n\r\n  private renderEye = () => {\r\n    const { capsLockEnabled } = this.state;\r\n\r\n    return (\r\n      <span className={jsStyles.iconWrapper()}>\r\n        {capsLockEnabled && <span className={jsStyles.capsLockDetector()} />}\r\n        <span data-tid=\"PasswordInputEyeIcon\" className={jsStyles.toggleVisibility()} onClick={this.handleToggleVisibility}>\r\n          {this.state.visible ? <EyeOpenedIcon size={14} /> : <EyeClosedIcon size={14} />}\r\n        </span>\r\n      </span>\r\n    );\r\n  };\r\n\r\n  private refInput = (element: Input) => {\r\n    this.input = element;\r\n  };\r\n\r\n  private renderInput() {\r\n    const { detectCapsLock, ...props } = this.props;\r\n    const inputProps = {\r\n      ...props,\r\n      onKeyDown: this.handleKeydown,\r\n      onKeyPress: this.handleKeyPress,\r\n      rightIcon: this.renderEye(),\r\n    };\r\n    return <Input ref={this.refInput} type={this.state.visible ? 'text' : 'password'} {...inputProps} />;\r\n  }\r\n}\r\n"]}
+{"version":3,"sources":["PasswordInput.tsx"],"names":["PasswordInputDataTids","root","capsLockDetector","eyeIcon","PasswordInput","rootNode","getProps","defaultProps","state","visible","capsLockEnabled","focus","input","blur","handleBlur","handleKeyPress","e","props","onKeyPress","detectCapsLock","getModifierState","Codes","CapsLock","setState","handleKeydown","onKeyDown","handleToggleVisibility","prevState","handleFocus","renderEye","styles","iconWrapper","toggleVisibility","theme","getEyeWrapperClassname","disabled","refInput","element","hideSymbols","renderMain","rest","inputProps","rightIcon","componentDidMount","isIE11","window","document","msCapsLockWarningOff","getDerivedStateFromProps","render","setRootNode","size","eyeWrapperLarge","eyeWrapperMedium","eyeWrapperSmall","React","PureComponent","__KONTUR_REACT_UI__","propTypes","PropTypes","bool"],"mappings":"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","sourcesContent":["// TODO: Enable this rule in functional components.\n/* eslint-disable @typescript-eslint/no-unused-vars */\nimport React from 'react';\nimport PropTypes from 'prop-types';\n\nimport { RenderLayer } from '../../internal/RenderLayer';\nimport { isNonNullable } from '../../lib/utils';\nimport { isKeyCapsLock } from '../../lib/events/keyboard/identifiers';\nimport { KeyboardEventCodes as Codes } from '../../lib/events/keyboard/KeyboardEventCodes';\nimport { Input, InputProps } from '../Input';\nimport { Nullable } from '../../typings/utility-types';\nimport { isIE11 } from '../../lib/client';\nimport { CommonWrapper, CommonProps, CommonWrapperRestProps } from '../../internal/CommonWrapper';\nimport { Theme } from '../../lib/theming/Theme';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { cx } from '../../lib/theming/Emotion';\nimport { rootNode, TSetRootNode } from '../../lib/rootNode';\nimport { createPropsGetter } from '../../lib/createPropsGetter';\n\nimport { styles } from './PasswordInput.styles';\nimport { PasswordInputIcon } from './PasswordInputIcon';\n\nexport interface PasswordInputProps extends CommonProps, InputProps {\n  detectCapsLock?: boolean;\n}\n\nexport interface PasswordInputState {\n  visible: boolean;\n  capsLockEnabled?: boolean | null;\n}\n\nexport const PasswordInputDataTids = {\n  root: 'PasswordInput',\n  capsLockDetector: 'PasswordInputCapsLockDetector',\n  eyeIcon: 'PasswordInputEyeIcon',\n} as const;\n\ntype DefaultProps = Required<Pick<PasswordInputProps, 'size'>>;\n\n/**\n * Компонент для ввода пароля\n */\n@rootNode\nexport class PasswordInput extends React.PureComponent<PasswordInputProps, PasswordInputState> {\n  public static __KONTUR_REACT_UI__ = 'PasswordInput';\n\n  public static propTypes = {\n    /**\n     * Включает CapsLock детектор\n     */\n    detectCapsLock: PropTypes.bool,\n  };\n\n  public static defaultProps: DefaultProps = {\n    size: 'small',\n  };\n\n  private getProps = createPropsGetter(PasswordInput.defaultProps);\n\n  public state: PasswordInputState = {\n    visible: false,\n    capsLockEnabled: false,\n  };\n\n  private theme!: Theme;\n\n  private input: Nullable<Input>;\n  private setRootNode!: TSetRootNode;\n\n  public componentDidMount() {\n    if (this.props.detectCapsLock) {\n      this.setState({ capsLockEnabled: null });\n    }\n\n    // @ts-expect-error: IE-specific API.\n    if (isIE11 && !window.document.msCapsLockWarningOff) {\n      // @ts-expect-error: Read the comment above.\n      // turns off default ie capslock warning\n      window.document.msCapsLockWarningOff = true;\n    }\n  }\n\n  public static getDerivedStateFromProps(props: PasswordInputProps, state: PasswordInputState) {\n    if (props.disabled) {\n      return { visible: false };\n    }\n\n    return state;\n  }\n\n  public render() {\n    return (\n      <ThemeContext.Consumer>\n        {(theme) => {\n          this.theme = theme;\n          return (\n            <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>\n              {this.renderMain}\n            </CommonWrapper>\n          );\n        }}\n      </ThemeContext.Consumer>\n    );\n  }\n\n  /**\n   * @public\n   */\n  public focus = () => {\n    if (this.input) {\n      this.input.focus();\n    }\n  };\n\n  /**\n   * @public\n   */\n  public blur = () => {\n    this.handleBlur();\n  };\n\n  private handleKeyPress = (e: React.KeyboardEvent<HTMLInputElement>) => {\n    const { onKeyPress, detectCapsLock } = this.props;\n\n    if (onKeyPress) {\n      onKeyPress(e);\n    }\n\n    if (!detectCapsLock) {\n      return;\n    }\n\n    const capsLockEnabled = e.getModifierState(Codes.CapsLock);\n\n    this.setState({ capsLockEnabled });\n  };\n\n  private handleKeydown = (e: React.KeyboardEvent<HTMLInputElement>) => {\n    const {\n      props: { detectCapsLock, onKeyDown },\n      state: { capsLockEnabled },\n    } = this;\n\n    if (onKeyDown) {\n      onKeyDown(e);\n    }\n\n    if (!detectCapsLock) {\n      return;\n    }\n\n    if (isKeyCapsLock(e) && isNonNullable(capsLockEnabled)) {\n      this.setState({ capsLockEnabled: !capsLockEnabled });\n    }\n  };\n\n  private handleToggleVisibility = () => {\n    this.setState((prevState) => ({ visible: !prevState.visible }), this.handleFocus);\n  };\n\n  private handleFocus = () => {\n    if (this.input) {\n      this.input.focus();\n    }\n  };\n\n  private handleBlur = () => {\n    if (this.input) {\n      this.input.blur();\n    }\n  };\n\n  private getEyeWrapperClassname() {\n    switch (this.getProps().size) {\n      case 'large':\n        return styles.eyeWrapperLarge(this.theme);\n      case 'medium':\n        return styles.eyeWrapperMedium(this.theme);\n      case 'small':\n      default:\n        return styles.eyeWrapperSmall(this.theme);\n    }\n  }\n\n  private renderEye = () => {\n    const { capsLockEnabled } = this.state;\n\n    return (\n      <span className={styles.iconWrapper()}>\n        {capsLockEnabled && (\n          <span className={styles.capsLockDetector()} data-tid={PasswordInputDataTids.capsLockDetector} />\n        )}\n        <span\n          data-tid={PasswordInputDataTids.eyeIcon}\n          className={cx(styles.toggleVisibility(this.theme), this.getEyeWrapperClassname())}\n          onClick={this.handleToggleVisibility}\n        >\n          {!this.props.disabled && <PasswordInputIcon visible={this.state.visible} />}\n        </span>\n      </span>\n    );\n  };\n\n  private refInput = (element: Input) => {\n    this.input = element;\n  };\n\n  private hideSymbols = () => {\n    this.setState({ visible: false });\n  };\n\n  private renderMain = (props: CommonWrapperRestProps<PasswordInputProps>) => {\n    const { detectCapsLock, ...rest } = props;\n    const inputProps = {\n      ...rest,\n      onKeyDown: this.handleKeydown,\n      onKeyPress: this.handleKeyPress,\n      rightIcon: this.renderEye(),\n    };\n\n    return (\n      <RenderLayer onFocusOutside={this.hideSymbols} onClickOutside={this.hideSymbols}>\n        <div data-tid={PasswordInputDataTids.root} className={styles.root()}>\n          <Input ref={this.refInput} type={this.state.visible ? 'text' : 'password'} {...inputProps} />\n        </div>\n      </RenderLayer>\n    );\n  };\n}\n"]}

package/cjs/components/PasswordInput/PasswordInput.md

@@ -1,9 +1,9 @@
-```jsx harmony
-<PasswordInput />
-```
-
-Пример с отслеживанием нажатия CapsLock:
-
-```jsx harmony
-<PasswordInput detectCapsLock />
-```
+```jsx harmony
+<PasswordInput />
+```
+
+Пример с отслеживанием нажатия CapsLock:
+
+```jsx harmony
+<PasswordInput detectCapsLock />
+```

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

@@ -1,6 +1,10 @@
-export declare const jsStyles: {
+import { Theme } from '../../lib/theming/Theme';
+export declare const styles: {
     root(): string;
-    toggleVisibility(): string;
+    toggleVisibility(t: Theme): string;
     capsLockDetector(): string;
     iconWrapper(): string;
+    eyeWrapperSmall(t: Theme): string;
+    eyeWrapperMedium(t: Theme): string;
+    eyeWrapperLarge(t: Theme): string;
 };

package/cjs/components/PasswordInput/PasswordInput.styles.js

@@ -1,8 +1,9 @@
-"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");exports.__esModule = true;exports.jsStyles = void 0;var _taggedTemplateLiteralLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteralLoose"));var _Emotion = require("../../lib/theming/Emotion");function _templateObject4() {var data = (0, _taggedTemplateLiteralLoose2.default)(["\n      display: flex;\n      align-items: center;\n    "]);_templateObject4 = function _templateObject4() {return data;};return data;}function _templateObject3() {var data = (0, _taggedTemplateLiteralLoose2.default)(["\n      display: inline-block;\n      font-size: 9px;\n      margin-right: 8px;\n      color: #fff;\n      cursor: default;\n      background: #999;\n      padding: 2px 5px;\n      border-radius: 3px;\n      z-index: 9;\n      box-sizing: border-box;\n      line-height: normal;\n\n      &::before {\n        content: 'CapsLock';\n      }\n    "]);_templateObject3 = function _templateObject3() {return data;};return data;}function _templateObject2() {var data = (0, _taggedTemplateLiteralLoose2.default)(["\n      color: #000;\n      cursor: pointer;\n      opacity: 0.6;\n      user-select: none;\n\n      &:hover {\n        opacity: 1;\n      }\n    "]);_templateObject2 = function _templateObject2() {return data;};return data;}function _templateObject() {var data = (0, _taggedTemplateLiteralLoose2.default)(["\n      position: relative;\n      display: inline-block;\n\n      input::-ms-clear,\n      input::-ms-reveal {\n        display: none;\n      }\n    "]);_templateObject = function _templateObject() {return data;};return data;}
+"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");exports.__esModule = true;exports.styles = void 0;var _taggedTemplateLiteralLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteralLoose"));
+var _Emotion = require("../../lib/theming/Emotion");var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
 
-var styles = {
+var styles = (0, _Emotion.memoizeStyle)({
   root: function root() {
-    return (0, _Emotion.css)(_templateObject());
+    return (0, _Emotion.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2.default)(["\n      position: relative;\n      display: inline-block;\n      line-height: normal;\n\n      input::-ms-clear,\n      input::-ms-reveal {\n        display: none;\n      }\n    "])));
 
 
 
@@ -11,21 +12,23 @@ var styles = {
 
 
 
-  },
-  toggleVisibility: function toggleVisibility() {
-    return (0, _Emotion.css)(_templateObject2());
-
-
 
+  },
+  toggleVisibility: function toggleVisibility(t) {
+    return (0, _Emotion.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteralLoose2.default)(["\n      color: ", ";\n      cursor: pointer;\n      opacity: ", ";\n      user-select: none;\n\n      &:hover {\n        color: ", ";\n        opacity: ", ";\n      }\n    "])),
+    t.passwordInputVisibilityIconColor,
 
+    t.passwordInputVisibilityIconOpacity,
 
 
 
+    t.passwordInputVisibilityIconHoverColor,
+    t.passwordInputVisibilityIconHoverOpacity);
 
 
   },
   capsLockDetector: function capsLockDetector() {
-    return (0, _Emotion.css)(_templateObject3());
+    return (0, _Emotion.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteralLoose2.default)(["\n      display: inline-block;\n      font-size: 9px;\n      margin-right: 8px;\n      color: #fff;\n      cursor: default;\n      background: #999;\n      padding: 2px 5px;\n      border-radius: 3px;\n      z-index: 9;\n      box-sizing: border-box;\n      line-height: normal;\n\n      &::before {\n        content: 'CapsLock';\n      }\n    "])));
 
 
 
@@ -44,11 +47,27 @@ var styles = {
 
   },
   iconWrapper: function iconWrapper() {
-    return (0, _Emotion.css)(_templateObject4());
+    return (0, _Emotion.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteralLoose2.default)(["\n      display: flex;\n      align-items: center;\n      justify-content: flex-end;\n    "])));
+
+
 
 
+  },
+
+  eyeWrapperSmall: function eyeWrapperSmall(t) {
+    return (0, _Emotion.css)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteralLoose2.default)(["\n      min-width: ", ";\n    "])),
+    t.inputIconSizeSmall);
+
+  },
+
+  eyeWrapperMedium: function eyeWrapperMedium(t) {
+    return (0, _Emotion.css)(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteralLoose2.default)(["\n      min-width: ", ";\n    "])),
+    t.inputIconSizeMedium);
 
-  } };
+  },
 
+  eyeWrapperLarge: function eyeWrapperLarge(t) {
+    return (0, _Emotion.css)(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteralLoose2.default)(["\n      min-width: ", ";\n    "])),
+    t.inputIconSizeLarge);
 
-var jsStyles = (0, _Emotion.memoizeStyle)(styles);exports.jsStyles = jsStyles;
+  } });exports.styles = styles;

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

@@ -1 +1 @@
-{"version":3,"sources":["PasswordInput.styles.ts"],"names":["styles","root","css","toggleVisibility","capsLockDetector","iconWrapper","jsStyles"],"mappings":"8QAAA,oD;;AAEA,IAAMA,MAAM,GAAG;AACbC,EAAAA,IADa,kBACN;AACL,eAAOC,YAAP;;;;;;;;;AASD,GAXY;AAYbC,EAAAA,gBAZa,8BAYM;AACjB,eAAOD,YAAP;;;;;;;;;;AAUD,GAvBY;AAwBbE,EAAAA,gBAxBa,8BAwBM;AACjB,eAAOF,YAAP;;;;;;;;;;;;;;;;;AAiBD,GA1CY;AA2CbG,EAAAA,WA3Ca,yBA2CC;AACZ,eAAOH,YAAP;;;;AAID,GAhDY,EAAf;;;AAmDO,IAAMI,QAAQ,GAAG,2BAAaN,MAAb,CAAjB,C","sourcesContent":["import { css, memoizeStyle } from '../../lib/theming/Emotion';\r\n\r\nconst styles = {\r\n  root() {\r\n    return css`\r\n      position: relative;\r\n      display: inline-block;\r\n\r\n      input::-ms-clear,\r\n      input::-ms-reveal {\r\n        display: none;\r\n      }\r\n    `;\r\n  },\r\n  toggleVisibility() {\r\n    return css`\r\n      color: #000;\r\n      cursor: pointer;\r\n      opacity: 0.6;\r\n      user-select: none;\r\n\r\n      &:hover {\r\n        opacity: 1;\r\n      }\r\n    `;\r\n  },\r\n  capsLockDetector() {\r\n    return css`\r\n      display: inline-block;\r\n      font-size: 9px;\r\n      margin-right: 8px;\r\n      color: #fff;\r\n      cursor: default;\r\n      background: #999;\r\n      padding: 2px 5px;\r\n      border-radius: 3px;\r\n      z-index: 9;\r\n      box-sizing: border-box;\r\n      line-height: normal;\r\n\r\n      &::before {\r\n        content: 'CapsLock';\r\n      }\r\n    `;\r\n  },\r\n  iconWrapper() {\r\n    return css`\r\n      display: flex;\r\n      align-items: center;\r\n    `;\r\n  },\r\n};\r\n\r\nexport const jsStyles = memoizeStyle(styles);\r\n"]}
+{"version":3,"sources":["PasswordInput.styles.ts"],"names":["styles","root","css","toggleVisibility","t","passwordInputVisibilityIconColor","passwordInputVisibilityIconOpacity","passwordInputVisibilityIconHoverColor","passwordInputVisibilityIconHoverOpacity","capsLockDetector","iconWrapper","eyeWrapperSmall","inputIconSizeSmall","eyeWrapperMedium","inputIconSizeMedium","eyeWrapperLarge","inputIconSizeLarge"],"mappings":";AACA,oD;;AAEO,IAAMA,MAAM,GAAG,2BAAa;AACjCC,EAAAA,IADiC,kBAC1B;AACL,eAAOC,YAAP;;;;;;;;;;AAUD,GAZgC;AAajCC,EAAAA,gBAbiC,4BAahBC,CAbgB,EAaN;AACzB,eAAOF,YAAP;AACWE,IAAAA,CAAC,CAACC,gCADb;;AAGaD,IAAAA,CAAC,CAACE,kCAHf;;;;AAOaF,IAAAA,CAAC,CAACG,qCAPf;AAQeH,IAAAA,CAAC,CAACI,uCARjB;;;AAWD,GAzBgC;AA0BjCC,EAAAA,gBA1BiC,8BA0Bd;AACjB,eAAOP,YAAP;;;;;;;;;;;;;;;;;AAiBD,GA5CgC;AA6CjCQ,EAAAA,WA7CiC,yBA6CnB;AACZ,eAAOR,YAAP;;;;;AAKD,GAnDgC;;AAqDjCS,EAAAA,eArDiC,2BAqDjBP,CArDiB,EAqDP;AACxB,eAAOF,YAAP;AACeE,IAAAA,CAAC,CAACQ,kBADjB;;AAGD,GAzDgC;;AA2DjCC,EAAAA,gBA3DiC,4BA2DhBT,CA3DgB,EA2DN;AACzB,eAAOF,YAAP;AACeE,IAAAA,CAAC,CAACU,mBADjB;;AAGD,GA/DgC;;AAiEjCC,EAAAA,eAjEiC,2BAiEjBX,CAjEiB,EAiEP;AACxB,eAAOF,YAAP;AACeE,IAAAA,CAAC,CAACY,kBADjB;;AAGD,GArEgC,EAAb,CAAf,C","sourcesContent":["import { Theme } from '../../lib/theming/Theme';\nimport { css, memoizeStyle } from '../../lib/theming/Emotion';\n\nexport const styles = memoizeStyle({\n  root() {\n    return css`\n      position: relative;\n      display: inline-block;\n      line-height: normal;\n\n      input::-ms-clear,\n      input::-ms-reveal {\n        display: none;\n      }\n    `;\n  },\n  toggleVisibility(t: Theme) {\n    return css`\n      color: ${t.passwordInputVisibilityIconColor};\n      cursor: pointer;\n      opacity: ${t.passwordInputVisibilityIconOpacity};\n      user-select: none;\n\n      &:hover {\n        color: ${t.passwordInputVisibilityIconHoverColor};\n        opacity: ${t.passwordInputVisibilityIconHoverOpacity};\n      }\n    `;\n  },\n  capsLockDetector() {\n    return css`\n      display: inline-block;\n      font-size: 9px;\n      margin-right: 8px;\n      color: #fff;\n      cursor: default;\n      background: #999;\n      padding: 2px 5px;\n      border-radius: 3px;\n      z-index: 9;\n      box-sizing: border-box;\n      line-height: normal;\n\n      &::before {\n        content: 'CapsLock';\n      }\n    `;\n  },\n  iconWrapper() {\n    return css`\n      display: flex;\n      align-items: center;\n      justify-content: flex-end;\n    `;\n  },\n\n  eyeWrapperSmall(t: Theme) {\n    return css`\n      min-width: ${t.inputIconSizeSmall};\n    `;\n  },\n\n  eyeWrapperMedium(t: Theme) {\n    return css`\n      min-width: ${t.inputIconSizeMedium};\n    `;\n  },\n\n  eyeWrapperLarge(t: Theme) {\n    return css`\n      min-width: ${t.inputIconSizeLarge};\n    `;\n  },\n});\n"]}

package/cjs/components/PasswordInput/PasswordInputIcon.d.ts

@@ -0,0 +1,3 @@
+import { PasswordInputState } from './PasswordInput';
+export declare type PasswordInputIconProps = Pick<PasswordInputState, 'visible'>;
+export declare const PasswordInputIcon: ({ visible }: PasswordInputIconProps) => JSX.Element;

package/cjs/components/PasswordInput/PasswordInputIcon.js

@@ -0,0 +1,15 @@
+"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");exports.__esModule = true;exports.PasswordInputIcon = void 0;var _react = _interopRequireDefault(require("react"));
+
+var _px = require("../../internal/icons/16px");
+
+
+
+
+
+var PasswordInputIcon = function PasswordInputIcon(_ref) {var visible = _ref.visible;
+  if (visible) {
+    return /*#__PURE__*/_react.default.createElement(_px.EyeClosedIcon, { size: 14 });
+  }
+
+  return /*#__PURE__*/_react.default.createElement(_px.EyeOpenedIcon, { size: 14 });
+};exports.PasswordInputIcon = PasswordInputIcon;

package/cjs/components/PasswordInput/PasswordInputIcon.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["PasswordInputIcon.tsx"],"names":["PasswordInputIcon","visible"],"mappings":"+JAAA;;AAEA;;;;;;AAMO,IAAMA,iBAAiB,GAAG,SAApBA,iBAAoB,OAAyC,KAAtCC,OAAsC,QAAtCA,OAAsC;AACxE,MAAIA,OAAJ,EAAa;AACX,wBAAO,6BAAC,iBAAD,IAAe,IAAI,EAAE,EAArB,GAAP;AACD;;AAED,sBAAO,6BAAC,iBAAD,IAAe,IAAI,EAAE,EAArB,GAAP;AACD,CANM,C","sourcesContent":["import React from 'react';\n\nimport { EyeClosedIcon, EyeOpenedIcon } from '../../internal/icons/16px';\n\nimport { PasswordInputState } from './PasswordInput';\n\nexport type PasswordInputIconProps = Pick<PasswordInputState, 'visible'>;\n\nexport const PasswordInputIcon = ({ visible }: PasswordInputIconProps) => {\n  if (visible) {\n    return <EyeClosedIcon size={14} />;\n  }\n\n  return <EyeOpenedIcon size={14} />;\n};\n"]}

package/cjs/components/PasswordInput/index.js

@@ -1 +1 @@
-"use strict";exports.__esModule = true;var _PasswordInput = require("./PasswordInput");Object.keys(_PasswordInput).forEach(function (key) {if (key === "default" || key === "__esModule") return;exports[key] = _PasswordInput[key];});
+"use strict";exports.__esModule = true;var _PasswordInput = require("./PasswordInput");Object.keys(_PasswordInput).forEach(function (key) {if (key === "default" || key === "__esModule") return;if (key in exports && exports[key] === _PasswordInput[key]) return;exports[key] = _PasswordInput[key];});

package/cjs/components/PasswordInput/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["index.tsx"],"names":[],"mappings":"uCAAA","sourcesContent":["export * from './PasswordInput';\r\n"]}
+{"version":3,"sources":["index.tsx"],"names":[],"mappings":"uCAAA","sourcesContent":["export * from './PasswordInput';\n"]}

package/cjs/components/Radio/Radio.d.ts

@@ -1,42 +1,64 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import { Override } from '../../typings/utility-types';
-export declare type RadioProps<T> = Override<React.InputHTMLAttributes<HTMLInputElement>, {
-    /** Состояние ошибки */
+import { CommonProps, CommonWrapperRestProps } from '../../internal/CommonWrapper';
+import { RadioGroupContextType } from '../RadioGroup/RadioGroupContext';
+export interface RadioProps<T> extends CommonProps, Override<React.InputHTMLAttributes<HTMLInputElement>, {
+    /**
+     *  Состояние валидации при ошибке.
+     */
     error?: boolean;
-    /** Состояние Предупреждения */
+    /**
+     * Состояние валидации при предупреждении.
+     */
     warning?: boolean;
-    /** Состояние фокуса */
+    /**
+     * Состояние фокуса.
+     */
     focused?: boolean;
-    /** Состояние нажатия */
-    pressed?: boolean;
-    /** Состояние hover */
-    hovered?: boolean;
-    /** Состояние active */
-    active?: boolean;
-    /** Вызывается при изменении `value` */
+    /**
+     * Функция, вызываемая при изменении `value`.
+     */
     onValueChange?: (value: T) => void;
+    /**
+     * HTML-событие `onmouseenter`
+     */
     onMouseEnter?: React.MouseEventHandler<HTMLLabelElement>;
+    /**
+     * HTML-событие `mouseleave`
+     */
     onMouseLeave?: React.MouseEventHandler<HTMLLabelElement>;
+    /**
+     * HTML-событие `onmouseover`
+     */
     onMouseOver?: React.MouseEventHandler<HTMLLabelElement>;
-    /** Значение */
+    /**
+     * HTML-атрибут `value`.
+     */
     value: T;
-}>;
-export declare class Radio<T> extends React.Component<RadioProps<T>> {
+}> {
+}
+export interface RadioState {
+    focusedByKeyboard: boolean;
+}
+export declare const RadioDataTids: {
+    readonly root: "Radio__root";
+};
+declare type DefaultProps = Required<Pick<RadioProps<any>, 'focused'>>;
+/**
+ * Радио-кнопки используются, когда может быть выбран только один вариант из нескольких.
+ */
+export declare class Radio<T> extends React.Component<RadioProps<T>, RadioState> {
     static __KONTUR_REACT_UI__: string;
-    static contextTypes: {
-        activeItem: PropTypes.Requireable<any>;
-        onSelect: PropTypes.Requireable<(...args: any[]) => any>;
-        name: PropTypes.Requireable<string>;
-        disabled: PropTypes.Requireable<boolean>;
-        error: PropTypes.Requireable<boolean>;
-        warning: PropTypes.Requireable<boolean>;
-    };
-    static defaultProps: {
-        focused: boolean;
+    state: {
+        focusedByKeyboard: boolean;
     };
-    private theme;
+    static defaultProps: DefaultProps;
+    private getProps;
+    static contextType: React.Context<RadioGroupContextType<any>>;
+    context: RadioGroupContextType<T>;
     private inputEl;
+    private setRootNode;
+    private theme;
     render(): JSX.Element;
     /**
      * @public
@@ -46,11 +68,14 @@ export declare class Radio<T> extends React.Component<RadioProps<T>> {
      * @public
      */
     blur(): void;
-    renderMain(): JSX.Element;
+    renderMain: (props: CommonWrapperRestProps<RadioProps<T>>) => JSX.Element;
     private _isInRadioGroup;
-    private renderLabel;
+    private renderCaption;
     private handleChange;
     private handleMouseOver;
     private handleMouseEnter;
     private handleMouseLeave;
+    private handleFocus;
+    private handleBlur;
 }
+export {};