@skbkontur/react-ui 0.0.0-e66a3400ba → 0.0.0-ea6161656e

package/components/PasswordInput/ClosedIcon/package.json

@@ -0,0 +1,6 @@
+{
+  "main": "../../../cjs/components/PasswordInput/ClosedIcon.js",
+  "module": "ClosedIcon",
+  "types": "../ClosedIcon.d.ts",
+  "sideEffects": false
+}

package/components/PasswordInput/ClosedIcon.d.ts

@@ -0,0 +1,3 @@
+export declare const ClosedIcon: import("../../lib/forwardRefAndName").ReactUIIconWithRef<SVGSVGElement, Omit<import("../../internal/icons2022/BaseIcon").IconProps, "size"> & {
+    size?: number | "small" | "medium" | "large" | undefined;
+}>;

package/components/PasswordInput/OpenedIcon/OpenedIcon.js

@@ -0,0 +1,17 @@
+/* eslint-disable react/display-name */
+import React from 'react';
+import { iconSizer } from "../../../internal/icons2022/iconSizer";
+import { EyeOpenIcon16Light } from "../../../internal/icons2022/EyeOpenIcon/EyeOpenIcon16Light";
+import { EyeOpenIcon20Light } from "../../../internal/icons2022/EyeOpenIcon/EyeOpenIcon20Light";
+import { EyeOpenIcon24Regular } from "../../../internal/icons2022/EyeOpenIcon/EyeOpenIcon24Regular";
+export var OpenedIcon = iconSizer({
+  small: function small() {
+    return /*#__PURE__*/React.createElement(EyeOpenIcon16Light, null);
+  },
+  medium: function medium() {
+    return /*#__PURE__*/React.createElement(EyeOpenIcon20Light, null);
+  },
+  large: function large() {
+    return /*#__PURE__*/React.createElement(EyeOpenIcon24Regular, null);
+  }
+}, 'OpenedIcon');

package/components/PasswordInput/OpenedIcon/OpenedIcon.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["OpenedIcon.tsx"],"names":["React","iconSizer","EyeOpenIcon16Light","EyeOpenIcon20Light","EyeOpenIcon24Regular","OpenedIcon","small","medium","large"],"mappings":"AAAA;AACA,OAAOA,KAAP,MAAkB,OAAlB;;AAEA,SAASC,SAAT,QAA0B,oCAA1B;AACA,SAASC,kBAAT,QAAmC,yDAAnC;AACA,SAASC,kBAAT,QAAmC,yDAAnC;AACA,SAASC,oBAAT,QAAqC,2DAArC;;AAEA,OAAO,IAAMC,UAAU,GAAGJ,SAAS;AACjC;AACEK,EAAAA,KAAK,EAAE,sCAAM,oBAAC,kBAAD,OAAN,EADT;AAEEC,EAAAA,MAAM,EAAE,uCAAM,oBAAC,kBAAD,OAAN,EAFV;AAGEC,EAAAA,KAAK,EAAE,sCAAM,oBAAC,oBAAD,OAAN,EAHT,EADiC;;AAMjC,YANiC,CAA5B","sourcesContent":["/* eslint-disable react/display-name */\nimport React from 'react';\n\nimport { iconSizer } from '../../internal/icons2022/iconSizer';\nimport { EyeOpenIcon16Light } from '../../internal/icons2022/EyeOpenIcon/EyeOpenIcon16Light';\nimport { EyeOpenIcon20Light } from '../../internal/icons2022/EyeOpenIcon/EyeOpenIcon20Light';\nimport { EyeOpenIcon24Regular } from '../../internal/icons2022/EyeOpenIcon/EyeOpenIcon24Regular';\n\nexport const OpenedIcon = iconSizer(\n  {\n    small: () => <EyeOpenIcon16Light />,\n    medium: () => <EyeOpenIcon20Light />,\n    large: () => <EyeOpenIcon24Regular />,\n  },\n  'OpenedIcon',\n);\n"]}

package/components/PasswordInput/OpenedIcon/package.json

@@ -0,0 +1,6 @@
+{
+  "main": "../../../cjs/components/PasswordInput/OpenedIcon.js",
+  "module": "OpenedIcon",
+  "types": "../OpenedIcon.d.ts",
+  "sideEffects": false
+}

package/components/PasswordInput/OpenedIcon.d.ts

@@ -0,0 +1,3 @@
+export declare const OpenedIcon: import("../../lib/forwardRefAndName").ReactUIIconWithRef<SVGSVGElement, Omit<import("../../internal/icons2022/BaseIcon").IconProps, "size"> & {
+    size?: number | "small" | "medium" | "large" | undefined;
+}>;

package/components/PasswordInput/PasswordInput/PasswordInput.js

@@ -0,0 +1,257 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+import _assertThisInitialized from "@babel/runtime/helpers/esm/assertThisInitialized";
+import _inheritsLoose from "@babel/runtime/helpers/esm/inheritsLoose";
+var _excluded = ["detectCapsLock"];
+
+var _dec, _class, _class2, _temp; // TODO: Enable this rule in functional components.
+
+/* eslint-disable @typescript-eslint/no-unused-vars */
+
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import { globalObject, isBrowser } from '@skbkontur/global-object';
+import { locale } from "../../../lib/locale/decorators";
+import { RenderLayer } from "../../../internal/RenderLayer";
+import { isNonNullable } from "../../../lib/utils";
+import { isKeyCapsLock } from "../../../lib/events/keyboard/identifiers";
+import { KeyboardEventCodes as Codes } from "../../../lib/events/keyboard/KeyboardEventCodes";
+import { Input } from "../../Input";
+import { isIE11 } from "../../../lib/client";
+import { CommonWrapper } from "../../../internal/CommonWrapper";
+import { ThemeContext } from "../../../lib/theming/ThemeContext";
+import { EmotionConsumer } from "../../../lib/theming/Emotion";
+import { rootNode } from "../../../lib/rootNode";
+import { createPropsGetter } from "../../../lib/createPropsGetter";
+import { isTheme2022 } from "../../../lib/theming/ThemeHelpers";
+import { getStyles } from "../PasswordInput.styles";
+import { PasswordInputIcon } from "../PasswordInputIcon";
+import { PasswordInputLocaleHelper } from "../locale";
+export var PasswordInputDataTids = {
+  root: 'PasswordInput',
+  capsLockDetector: 'PasswordInputCapsLockDetector',
+  eyeIcon: 'PasswordInputEyeIcon'
+};
+export
+/**
+* Компонент для ввода пароля
+*/
+var PasswordInput = (_dec = locale('PasswordInput', PasswordInputLocaleHelper), rootNode(_class = _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_React$PureComponent) {
+  _inheritsLoose(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.getProps = createPropsGetter(PasswordInput.defaultProps);
+    _this.state = {
+      visible: false,
+      capsLockEnabled: false
+    };
+
+    _this.focus = function () {
+      if (_this.input) {
+        _this.input.focus();
+      }
+    };
+
+    _this.blur = function () {
+      _this.handleBlur();
+    };
+
+    _this.handleKeyPress = function (e) {
+      var _this$props = _this.props,
+          onKeyPress = _this$props.onKeyPress,
+          detectCapsLock = _this$props.detectCapsLock;
+
+      if (onKeyPress) {
+        onKeyPress(e);
+      }
+
+      if (!detectCapsLock) {
+        return;
+      }
+
+      var capsLockEnabled = e.getModifierState(Codes.CapsLock);
+
+      _this.setState({
+        capsLockEnabled: capsLockEnabled
+      });
+    };
+
+    _this.handleKeydown = function (e) {
+      var _assertThisInitialize = _assertThisInitialized(_this),
+          _assertThisInitialize2 = _assertThisInitialize.props,
+          detectCapsLock = _assertThisInitialize2.detectCapsLock,
+          onKeyDown = _assertThisInitialize2.onKeyDown,
+          capsLockEnabled = _assertThisInitialize.state.capsLockEnabled;
+
+      if (onKeyDown) {
+        onKeyDown(e);
+      }
+
+      if (!detectCapsLock) {
+        return;
+      }
+
+      if (isKeyCapsLock(e) && isNonNullable(capsLockEnabled)) {
+        _this.setState({
+          capsLockEnabled: !capsLockEnabled
+        });
+      }
+    };
+
+    _this.handleToggleVisibility = function () {
+      _this.setState(function (prevState) {
+        return {
+          visible: !prevState.visible
+        };
+      }, _this.handleFocus);
+    };
+
+    _this.handleFocus = function () {
+      if (_this.input) {
+        _this.input.focus();
+      }
+    };
+
+    _this.handleBlur = function () {
+      if (_this.input) {
+        _this.input.blur();
+      }
+    };
+
+    _this.renderEye = function () {
+      var capsLockEnabled = _this.state.capsLockEnabled;
+      var styles = getStyles(_this.emotion);
+      return /*#__PURE__*/React.createElement("span", {
+        className: styles.iconWrapper()
+      }, capsLockEnabled && /*#__PURE__*/React.createElement("span", {
+        className: styles.capsLockDetector(),
+        "data-tid": PasswordInputDataTids.capsLockDetector
+      }), /*#__PURE__*/React.createElement("span", {
+        className: _this.emotion.cx(styles.toggleVisibility(_this.theme), _this.getEyeWrapperClassname())
+      }, !_this.props.disabled && /*#__PURE__*/React.createElement("button", {
+        type: "button",
+        "aria-label": _this.state.visible ? _this.locale.eyeClosedAriaLabel : _this.locale.eyeOpenedAriaLabel,
+        onClick: _this.handleToggleVisibility,
+        className: styles.icon(),
+        "data-tid": PasswordInputDataTids.eyeIcon
+      }, /*#__PURE__*/React.createElement(PasswordInputIcon, {
+        size: _this.props.size,
+        visible: _this.state.visible,
+        isTheme2022: isTheme2022(_this.theme)
+      }))));
+    };
+
+    _this.refInput = function (element) {
+      _this.input = element;
+    };
+
+    _this.hideSymbols = function () {
+      _this.setState({
+        visible: false
+      });
+    };
+
+    _this.renderMain = function (props) {
+      var detectCapsLock = props.detectCapsLock,
+          rest = _objectWithoutPropertiesLoose(props, _excluded);
+
+      var inputProps = _extends({}, rest, {
+        onKeyDown: _this.handleKeydown,
+        onKeyPress: _this.handleKeyPress,
+        rightIcon: _this.renderEye()
+      });
+
+      var styles = getStyles(_this.emotion);
+      return /*#__PURE__*/React.createElement(RenderLayer, {
+        onFocusOutside: _this.hideSymbols,
+        onClickOutside: _this.hideSymbols
+      }, /*#__PURE__*/React.createElement("div", {
+        "data-tid": PasswordInputDataTids.root,
+        className: styles.root()
+      }, /*#__PURE__*/React.createElement(Input, _extends({
+        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 (isIE11 && isBrowser(globalObject) && !globalObject.document.msCapsLockWarningOff) {
+      // @ts-expect-error: Read the comment above.
+      // turns off default ie capslock warning
+      globalObject.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.createElement(EmotionConsumer, null, function (emotion) {
+      _this2.emotion = emotion;
+      return /*#__PURE__*/React.createElement(ThemeContext.Consumer, null, function (theme) {
+        _this2.theme = theme;
+        return /*#__PURE__*/React.createElement(CommonWrapper, _extends({
+          rootNodeRef: _this2.setRootNode
+        }, _this2.props), _this2.renderMain);
+      });
+    });
+  }
+  /**
+  * @public
+  */
+  ;
+
+  _proto.getEyeWrapperClassname = function getEyeWrapperClassname() {
+    var styles = getStyles(this.emotion);
+
+    switch (this.getProps().size) {
+      case 'large':
+        return styles.eyeWrapperLarge(this.theme);
+
+      case 'medium':
+        return styles.eyeWrapperMedium(this.theme);
+
+      case 'small':
+      default:
+        return styles.eyeWrapperSmall(this.theme);
+    }
+  };
+
+  return PasswordInput;
+}(React.PureComponent), _class2.__KONTUR_REACT_UI__ = 'PasswordInput', _class2.displayName = 'PasswordInput', _class2.propTypes = {
+  /**
+  * Включает CapsLock детектор
+  */
+  detectCapsLock: PropTypes.bool
+}, _class2.defaultProps = {
+  size: 'small'
+}, _temp)) || _class) || _class);

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

@@ -0,0 +1 @@
+{"version":3,"sources":["PasswordInput.tsx"],"names":["React","PropTypes","globalObject","isBrowser","locale","RenderLayer","isNonNullable","isKeyCapsLock","KeyboardEventCodes","Codes","Input","isIE11","CommonWrapper","ThemeContext","EmotionConsumer","rootNode","createPropsGetter","isTheme2022","getStyles","PasswordInputIcon","PasswordInputLocaleHelper","PasswordInputDataTids","root","capsLockDetector","eyeIcon","PasswordInput","getProps","defaultProps","state","visible","capsLockEnabled","focus","input","blur","handleBlur","handleKeyPress","e","props","onKeyPress","detectCapsLock","getModifierState","CapsLock","setState","handleKeydown","onKeyDown","handleToggleVisibility","prevState","handleFocus","renderEye","styles","emotion","iconWrapper","cx","toggleVisibility","theme","getEyeWrapperClassname","disabled","eyeClosedAriaLabel","eyeOpenedAriaLabel","icon","size","refInput","element","hideSymbols","renderMain","rest","inputProps","rightIcon","componentDidMount","document","msCapsLockWarningOff","getDerivedStateFromProps","render","setRootNode","eyeWrapperLarge","eyeWrapperMedium","eyeWrapperSmall","PureComponent","__KONTUR_REACT_UI__","displayName","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, { AriaAttributes } from 'react';\nimport PropTypes from 'prop-types';\nimport { globalObject, isBrowser } from '@skbkontur/global-object';\nimport type { Emotion } from '@emotion/css/create-instance';\n\nimport { locale } from '../../lib/locale/decorators';\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 { CommonProps, CommonWrapper, CommonWrapperRestProps } from '../../internal/CommonWrapper';\nimport { Theme } from '../../lib/theming/Theme';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { EmotionConsumer } from '../../lib/theming/Emotion';\nimport { rootNode, TSetRootNode } from '../../lib/rootNode';\nimport { createPropsGetter } from '../../lib/createPropsGetter';\nimport { isTheme2022 } from '../../lib/theming/ThemeHelpers';\n\nimport { getStyles } from './PasswordInput.styles';\nimport { PasswordInputIcon } from './PasswordInputIcon';\nimport { PasswordInputLocale, PasswordInputLocaleHelper } from './locale';\n\nexport interface PasswordInputProps extends Pick<AriaAttributes, 'aria-label'>, 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\n@locale('PasswordInput', PasswordInputLocaleHelper)\nexport class PasswordInput extends React.PureComponent<PasswordInputProps, PasswordInputState> {\n  public static __KONTUR_REACT_UI__ = 'PasswordInput';\n  public static displayName = '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  private emotion!: Emotion;\n\n  private input: Nullable<Input>;\n  private setRootNode!: TSetRootNode;\n  private readonly locale!: PasswordInputLocale;\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 && isBrowser(globalObject) && !globalObject.document.msCapsLockWarningOff) {\n      // @ts-expect-error: Read the comment above.\n      // turns off default ie capslock warning\n      globalObject.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      <EmotionConsumer>\n        {(emotion) => {\n          this.emotion = emotion;\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      </EmotionConsumer>\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    const styles = getStyles(this.emotion);\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    const styles = getStyles(this.emotion);\n    return (\n      <span className={styles.iconWrapper()}>\n        {capsLockEnabled && (\n          <span className={styles.capsLockDetector()} data-tid={PasswordInputDataTids.capsLockDetector} />\n        )}\n        <span className={this.emotion.cx(styles.toggleVisibility(this.theme), this.getEyeWrapperClassname())}>\n          {!this.props.disabled && (\n            <button\n              type=\"button\"\n              aria-label={this.state.visible ? this.locale.eyeClosedAriaLabel : this.locale.eyeOpenedAriaLabel}\n              onClick={this.handleToggleVisibility}\n              className={styles.icon()}\n              data-tid={PasswordInputDataTids.eyeIcon}\n            >\n              <PasswordInputIcon\n                size={this.props.size}\n                visible={this.state.visible}\n                isTheme2022={isTheme2022(this.theme)}\n              />\n            </button>\n          )}\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    const styles = getStyles(this.emotion);\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/components/PasswordInput/PasswordInput/package.json

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

package/components/PasswordInput/PasswordInput.d.ts

@@ -1,49 +1,60 @@
-import * as React from 'react';
-import * as PropTypes from 'prop-types';
-import { InputProps } from '../Input/Input';
-export declare type PasswordInputProps = {
-    detectCapsLock?: boolean;
-} & InputProps;
-export interface PasswordInputState {
-    visible: boolean;
-    capsLockEnabled?: boolean | null;
-}
-export declare type InputProps = {
-    onKeyDown: (event: React.KeyboardEvent<HTMLInputElement>) => void;
-    onKeyPress: (event: React.KeyboardEvent<HTMLInputElement>) => void;
-    rightIcon: () => React.ReactNode;
-} & PasswordInputProps;
-/**
- * **DRAFT**
- */
-export default class PasswordInput extends React.Component<PasswordInputProps, PasswordInputState> {
-    static propTypes: {
-        /**
-         * Включает CapsLock детектор
-         */
-        detectCapsLock: PropTypes.Requireable<boolean>;
-    };
-    static defaultProps: {
-        size: string;
-    };
-    state: PasswordInputState;
-    private input;
-    componentWillMount(): void;
-    render(): JSX.Element;
-    /**
-     * @public
-     */
-    focus: () => void;
-    /**
-     * @public
-     */
-    blur: () => void;
-    private handleKeyPress;
-    private handleKeydown;
-    private handleToggleVisibility;
-    private handleFocus;
-    private handleBlur;
-    private renderEye;
-    private refInput;
-    private renderInput;
-}
+import React, { AriaAttributes } from 'react';
+import PropTypes from 'prop-types';
+import { InputProps } from '../Input';
+import { CommonProps } from '../../internal/CommonWrapper';
+export interface PasswordInputProps extends Pick<AriaAttributes, 'aria-label'>, CommonProps, InputProps {
+    detectCapsLock?: boolean;
+}
+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.PureComponent<PasswordInputProps, PasswordInputState> {
+    static __KONTUR_REACT_UI__: string;
+    static displayName: string;
+    static propTypes: {
+        /**
+         * Включает CapsLock детектор
+         */
+        detectCapsLock: PropTypes.Requireable<boolean>;
+    };
+    static defaultProps: DefaultProps;
+    private getProps;
+    state: PasswordInputState;
+    private theme;
+    private emotion;
+    private input;
+    private setRootNode;
+    private readonly locale;
+    componentDidMount(): void;
+    static getDerivedStateFromProps(props: PasswordInputProps, state: PasswordInputState): PasswordInputState;
+    render(): JSX.Element;
+    /**
+     * @public
+     */
+    focus: () => void;
+    /**
+     * @public
+     */
+    blur: () => void;
+    private handleKeyPress;
+    private handleKeydown;
+    private handleToggleVisibility;
+    private handleFocus;
+    private handleBlur;
+    private getEyeWrapperClassname;
+    private renderEye;
+    private refInput;
+    private hideSymbols;
+    private renderMain;
+}
+export {};

package/components/PasswordInput/PasswordInput.md

@@ -0,0 +1,28 @@
+```jsx harmony
+<PasswordInput />
+```
+
+Пример с отслеживанием нажатия CapsLock:
+
+```jsx harmony
+<PasswordInput detectCapsLock />
+```
+
+#### Локали по умолчанию
+
+```typescript static
+interface PasswordInputLocale {
+  eyeOpenedAriaLabel?: string;
+  eyeClosedAriaLabel?: string;
+}
+
+const ru_RU = {
+  eyeOpenedAriaLabel: 'Скрыть символы пароля',
+  eyeClosedAriaLabel: 'Отобразить символы пароля',
+}
+
+const en_GB = {
+  eyeOpenedAriaLabel: 'Hide password symbols',
+  eyeClosedAriaLabel: 'Show password symbols',
+}
+```

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

@@ -0,0 +1,33 @@
+import _taggedTemplateLiteralLoose from "@babel/runtime/helpers/esm/taggedTemplateLiteralLoose";
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8;
+
+import { memoizeStyle } from "../../../lib/theming/Emotion";
+export var getStyles = function getStyles(emotion) {
+  return memoizeStyle({
+    root: function root() {
+      return emotion.css(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\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      "])));
+    },
+    toggleVisibility: function toggleVisibility(t) {
+      return emotion.css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\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 emotion.css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\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      "])));
+    },
+    iconWrapper: function iconWrapper() {
+      return emotion.css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n        display: flex;\n        align-items: center;\n        justify-content: flex-end;\n      "])));
+    },
+    eyeWrapperSmall: function eyeWrapperSmall(t) {
+      return emotion.css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\n        min-width: ", ";\n      "])), t.inputIconSizeSmall);
+    },
+    eyeWrapperMedium: function eyeWrapperMedium(t) {
+      return emotion.css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteralLoose(["\n        min-width: ", ";\n      "])), t.inputIconSizeMedium);
+    },
+    eyeWrapperLarge: function eyeWrapperLarge(t) {
+      return emotion.css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteralLoose(["\n        min-width: ", ";\n      "])), t.inputIconSizeLarge);
+    },
+    icon: function icon() {
+      return emotion.css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteralLoose(["\n        padding: 0;\n        border: none;\n        font: inherit;\n        color: inherit;\n        background-color: transparent;\n        cursor: pointer;\n      "])));
+    }
+  });
+};

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

@@ -0,0 +1 @@
+{"version":3,"sources":["PasswordInput.styles.ts"],"names":["memoizeStyle","getStyles","emotion","root","css","toggleVisibility","t","passwordInputVisibilityIconColor","passwordInputVisibilityIconOpacity","passwordInputVisibilityIconHoverColor","passwordInputVisibilityIconHoverOpacity","capsLockDetector","iconWrapper","eyeWrapperSmall","inputIconSizeSmall","eyeWrapperMedium","inputIconSizeMedium","eyeWrapperLarge","inputIconSizeLarge","icon"],"mappings":";;;AAGA,SAASA,YAAT,QAA6B,2BAA7B;;AAEA,OAAO,IAAMC,SAAS,GAAG,SAAZA,SAAY,CAACC,OAAD;AACvBF,IAAAA,YAAY,CAAC;AACXG,MAAAA,IADW,kBACJ;AACL,eAAOD,OAAO,CAACE,GAAf;;;;;;;;;;AAUD,OAZU;AAaXC,MAAAA,gBAbW,4BAaMC,CAbN,EAagB;AACzB,eAAOJ,OAAO,CAACE,GAAf;AACWE,QAAAA,CAAC,CAACC,gCADb;;AAGaD,QAAAA,CAAC,CAACE,kCAHf;;;;AAOaF,QAAAA,CAAC,CAACG,qCAPf;AAQeH,QAAAA,CAAC,CAACI,uCARjB;;;AAWD,OAzBU;AA0BXC,MAAAA,gBA1BW,8BA0BQ;AACjB,eAAOT,OAAO,CAACE,GAAf;;;;;;;;;;;;;;;;;AAiBD,OA5CU;AA6CXQ,MAAAA,WA7CW,yBA6CG;AACZ,eAAOV,OAAO,CAACE,GAAf;;;;;AAKD,OAnDU;;AAqDXS,MAAAA,eArDW,2BAqDKP,CArDL,EAqDe;AACxB,eAAOJ,OAAO,CAACE,GAAf;AACeE,QAAAA,CAAC,CAACQ,kBADjB;;AAGD,OAzDU;;AA2DXC,MAAAA,gBA3DW,4BA2DMT,CA3DN,EA2DgB;AACzB,eAAOJ,OAAO,CAACE,GAAf;AACeE,QAAAA,CAAC,CAACU,mBADjB;;AAGD,OA/DU;;AAiEXC,MAAAA,eAjEW,2BAiEKX,CAjEL,EAiEe;AACxB,eAAOJ,OAAO,CAACE,GAAf;AACeE,QAAAA,CAAC,CAACY,kBADjB;;AAGD,OArEU;AAsEXC,MAAAA,IAtEW,kBAsEJ;AACL,eAAOjB,OAAO,CAACE,GAAf;;;;;;;;AAQD,OA/EU,EAAD,CADW,GAAlB","sourcesContent":["import type { Emotion } from '@emotion/css/create-instance';\n\nimport { Theme } from '../../lib/theming/Theme';\nimport { memoizeStyle } from '../../lib/theming/Emotion';\n\nexport const getStyles = (emotion: Emotion) =>\n  memoizeStyle({\n    root() {\n      return emotion.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 emotion.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 emotion.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 emotion.css`\n        display: flex;\n        align-items: center;\n        justify-content: flex-end;\n      `;\n    },\n\n    eyeWrapperSmall(t: Theme) {\n      return emotion.css`\n        min-width: ${t.inputIconSizeSmall};\n      `;\n    },\n\n    eyeWrapperMedium(t: Theme) {\n      return emotion.css`\n        min-width: ${t.inputIconSizeMedium};\n      `;\n    },\n\n    eyeWrapperLarge(t: Theme) {\n      return emotion.css`\n        min-width: ${t.inputIconSizeLarge};\n      `;\n    },\n    icon() {\n      return emotion.css`\n        padding: 0;\n        border: none;\n        font: inherit;\n        color: inherit;\n        background-color: transparent;\n        cursor: pointer;\n      `;\n    },\n  });\n"]}

package/components/PasswordInput/PasswordInput.styles/package.json

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

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

@@ -0,0 +1,12 @@
+import type { Emotion } from '@emotion/css/create-instance';
+import { Theme } from '../../lib/theming/Theme';
+export declare const getStyles: (emotion: Emotion) => {
+    root(): string;
+    toggleVisibility(t: Theme): string;
+    capsLockDetector(): string;
+    iconWrapper(): string;
+    eyeWrapperSmall(t: Theme): string;
+    eyeWrapperMedium(t: Theme): string;
+    eyeWrapperLarge(t: Theme): string;
+    icon(): string;
+};

package/components/PasswordInput/PasswordInputIcon/PasswordInputIcon.js

@@ -0,0 +1,24 @@
+import React from 'react';
+import { EyeClosedIcon, EyeOpenedIcon } from "../../../internal/icons/16px";
+import { ClosedIcon } from "../ClosedIcon";
+import { OpenedIcon } from "../OpenedIcon";
+export var PasswordInputIcon = function PasswordInputIcon(_ref) {
+  var visible = _ref.visible,
+      size = _ref.size,
+      _ref$isTheme = _ref.isTheme2022,
+      isTheme2022 = _ref$isTheme === void 0 ? false : _ref$isTheme;
+
+  if (visible) {
+    return isTheme2022 ? /*#__PURE__*/React.createElement(ClosedIcon, {
+      size: size
+    }) : /*#__PURE__*/React.createElement(EyeClosedIcon, {
+      size: 14
+    });
+  }
+
+  return isTheme2022 ? /*#__PURE__*/React.createElement(OpenedIcon, {
+    size: size
+  }) : /*#__PURE__*/React.createElement(EyeOpenedIcon, {
+    size: 14
+  });
+};

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

@@ -0,0 +1 @@
+{"version":3,"sources":["PasswordInputIcon.tsx"],"names":["React","EyeClosedIcon","EyeOpenedIcon","ClosedIcon","OpenedIcon","PasswordInputIcon","visible","size","isTheme2022"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;;AAEA,SAASC,aAAT,EAAwBC,aAAxB,QAA6C,2BAA7C;;;AAGA,SAASC,UAAT,QAA2B,cAA3B;AACA,SAASC,UAAT,QAA2B,cAA3B;;;;;;;AAOA,OAAO,IAAMC,iBAAiB,GAAG,SAApBA,iBAAoB,OAAoE,KAAjEC,OAAiE,QAAjEA,OAAiE,CAAxDC,IAAwD,QAAxDA,IAAwD,qBAAlDC,WAAkD,CAAlDA,WAAkD,6BAApC,KAAoC;AACnG,MAAIF,OAAJ,EAAa;AACX,WAAOE,WAAW,gBAAG,oBAAC,UAAD,IAAY,IAAI,EAAED,IAAlB,GAAH,gBAAgC,oBAAC,aAAD,IAAe,IAAI,EAAE,EAArB,GAAlD;AACD;;AAED,SAAOC,WAAW,gBAAG,oBAAC,UAAD,IAAY,IAAI,EAAED,IAAlB,GAAH,gBAAgC,oBAAC,aAAD,IAAe,IAAI,EAAE,EAArB,GAAlD;AACD,CANM","sourcesContent":["import React from 'react';\n\nimport { EyeClosedIcon, EyeOpenedIcon } from '../../internal/icons/16px';\n\nimport { PasswordInputProps, PasswordInputState } from './PasswordInput';\nimport { ClosedIcon } from './ClosedIcon';\nimport { OpenedIcon } from './OpenedIcon';\n\nexport type PasswordInputIconProps = Pick<PasswordInputState, 'visible'> &\n  Pick<PasswordInputProps, 'size'> & {\n    isTheme2022: boolean;\n  };\n\nexport const PasswordInputIcon = ({ visible, size, isTheme2022 = false }: PasswordInputIconProps) => {\n  if (visible) {\n    return isTheme2022 ? <ClosedIcon size={size} /> : <EyeClosedIcon size={14} />;\n  }\n\n  return isTheme2022 ? <OpenedIcon size={size} /> : <EyeOpenedIcon size={14} />;\n};\n"]}

package/components/PasswordInput/PasswordInputIcon/package.json

@@ -0,0 +1,6 @@
+{
+  "main": "../../../cjs/components/PasswordInput/PasswordInputIcon.js",
+  "module": "PasswordInputIcon",
+  "types": "../PasswordInputIcon.d.ts",
+  "sideEffects": false
+}

package/components/PasswordInput/PasswordInputIcon.d.ts

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

package/components/PasswordInput/index/index.js

@@ -0,0 +1 @@
+export * from "../PasswordInput";

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

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

package/components/PasswordInput/index/package.json

@@ -0,0 +1,6 @@
+{
+  "main": "../../../cjs/components/PasswordInput/index.js",
+  "module": "index",
+  "types": "../index.d.ts",
+  "sideEffects": false
+}

package/components/PasswordInput/index.d.ts

@@ -1 +1 @@
-export { default, PasswordInputProps, PasswordInputState } from './PasswordInput';
+export * from './PasswordInput';

package/components/PasswordInput/locale/index/index.js

@@ -0,0 +1,8 @@
+import { LocaleHelper } from "../../../../lib/locale/LocaleHelper";
+import { componentsLocales as en_GB } from "../locales/en";
+import { componentsLocales as ru_RU } from "../locales/ru";
+export * from "../types";
+export var PasswordInputLocaleHelper = new LocaleHelper({
+  ru_RU: ru_RU,
+  en_GB: en_GB
+});

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

@@ -0,0 +1 @@
+{"version":3,"sources":["index.ts"],"names":["LocaleHelper","componentsLocales","en_GB","ru_RU","PasswordInputLocaleHelper"],"mappings":"AAAA,SAASA,YAAT,QAA6B,kCAA7B;;AAEA,SAASC,iBAAiB,IAAIC,KAA9B,QAA2C,cAA3C;AACA,SAASD,iBAAiB,IAAIE,KAA9B,QAA2C,cAA3C;;;AAGA,cAAc,SAAd;;AAEA,OAAO,IAAMC,yBAAyB,GAAG,IAAIJ,YAAJ,CAAsC;AAC7EG,EAAAA,KAAK,EAALA,KAD6E;AAE7ED,EAAAA,KAAK,EAALA,KAF6E,EAAtC,CAAlC","sourcesContent":["import { LocaleHelper } from '../../../lib/locale/LocaleHelper';\n\nimport { componentsLocales as en_GB } from './locales/en';\nimport { componentsLocales as ru_RU } from './locales/ru';\nimport { PasswordInputLocale } from './types';\n\nexport * from './types';\n\nexport const PasswordInputLocaleHelper = new LocaleHelper<PasswordInputLocale>({\n  ru_RU,\n  en_GB,\n});\n"]}

package/components/PasswordInput/locale/index/package.json

@@ -0,0 +1,6 @@
+{
+  "main": "../../../../cjs/components/PasswordInput/locale/index.js",
+  "module": "index",
+  "types": "../index.d.ts",
+  "sideEffects": false
+}