@skbkontur/react-ui 1.12.2 → 2.0.0-beta.4

package/components/PasswordInput/ClosedIcon.js

@@ -0,0 +1,11 @@
+import React from 'react';
+import { iconSizer } from '../../internal/icons2022/iconSizer.js';
+import { EyeClosedIcon16Light } from '../../internal/icons2022/EyeClosedIcon/EyeClosedIcon16Light.js';
+import { EyeClosedIcon20Light } from '../../internal/icons2022/EyeClosedIcon/EyeClosedIcon20Light.js';
+import { EyeClosedIcon24Regular } from '../../internal/icons2022/EyeClosedIcon/EyeClosedIcon24Regular.js';
+export var ClosedIcon = iconSizer({
+    small: function () { return React.createElement(EyeClosedIcon16Light, null); },
+    medium: function () { return React.createElement(EyeClosedIcon20Light, null); },
+    large: function () { return React.createElement(EyeClosedIcon24Regular, null); },
+}, 'ClosedIcon');
+//# sourceMappingURL=ClosedIcon.js.map

package/components/PasswordInput/ClosedIcon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ClosedIcon.js","sourceRoot":"","sources":["../../../components/PasswordInput/ClosedIcon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,SAAS,EAAE,MAAM,uCAAuC,CAAC;AAClE,OAAO,EAAE,oBAAoB,EAAE,MAAM,gEAAgE,CAAC;AACtG,OAAO,EAAE,oBAAoB,EAAE,MAAM,gEAAgE,CAAC;AACtG,OAAO,EAAE,sBAAsB,EAAE,MAAM,kEAAkE,CAAC;AAE1G,MAAM,CAAC,IAAM,UAAU,GAAG,SAAS,CACjC;IACE,KAAK,EAAE,cAAM,OAAA,oBAAC,oBAAoB,OAAG,EAAxB,CAAwB;IACrC,MAAM,EAAE,cAAM,OAAA,oBAAC,oBAAoB,OAAG,EAAxB,CAAwB;IACtC,KAAK,EAAE,cAAM,OAAA,oBAAC,sBAAsB,OAAG,EAA1B,CAA0B;CACxC,EACD,YAAY,CACb,CAAC","sourcesContent":["import React from 'react';\n\nimport { iconSizer } from '../../internal/icons2022/iconSizer.js';\nimport { EyeClosedIcon16Light } from '../../internal/icons2022/EyeClosedIcon/EyeClosedIcon16Light.js';\nimport { EyeClosedIcon20Light } from '../../internal/icons2022/EyeClosedIcon/EyeClosedIcon20Light.js';\nimport { EyeClosedIcon24Regular } from '../../internal/icons2022/EyeClosedIcon/EyeClosedIcon24Regular.js';\n\nexport const ClosedIcon = iconSizer(\n  {\n    small: () => <EyeClosedIcon16Light />,\n    medium: () => <EyeClosedIcon20Light />,\n    large: () => <EyeClosedIcon24Regular />,\n  },\n  'ClosedIcon',\n);\n"]}

package/components/PasswordInput/OpenedIcon.d.ts

@@ -0,0 +1,3 @@
+export declare const OpenedIcon: import("../../lib/forwardRefAndName.js").ReactUIIconWithRef<SVGSVGElement, Omit<import("../../internal/icons2022/BaseIcon.js").IconProps, "size"> & {
+    size?: import("../../internal/icons2022/BaseIcon.js").IconProps["size"] | import("../../internal/icons2022/iconConstants.js").IconSizeAliases;
+}>;

package/components/PasswordInput/OpenedIcon.js

@@ -0,0 +1,11 @@
+import React from 'react';
+import { iconSizer } from '../../internal/icons2022/iconSizer.js';
+import { EyeOpenIcon16Light } from '../../internal/icons2022/EyeOpenIcon/EyeOpenIcon16Light.js';
+import { EyeOpenIcon20Light } from '../../internal/icons2022/EyeOpenIcon/EyeOpenIcon20Light.js';
+import { EyeOpenIcon24Regular } from '../../internal/icons2022/EyeOpenIcon/EyeOpenIcon24Regular.js';
+export var OpenedIcon = iconSizer({
+    small: function () { return React.createElement(EyeOpenIcon16Light, null); },
+    medium: function () { return React.createElement(EyeOpenIcon20Light, null); },
+    large: function () { return React.createElement(EyeOpenIcon24Regular, null); },
+}, 'OpenedIcon');
+//# sourceMappingURL=OpenedIcon.js.map

package/components/PasswordInput/OpenedIcon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"OpenedIcon.js","sourceRoot":"","sources":["../../../components/PasswordInput/OpenedIcon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,SAAS,EAAE,MAAM,uCAAuC,CAAC;AAClE,OAAO,EAAE,kBAAkB,EAAE,MAAM,4DAA4D,CAAC;AAChG,OAAO,EAAE,kBAAkB,EAAE,MAAM,4DAA4D,CAAC;AAChG,OAAO,EAAE,oBAAoB,EAAE,MAAM,8DAA8D,CAAC;AAEpG,MAAM,CAAC,IAAM,UAAU,GAAG,SAAS,CACjC;IACE,KAAK,EAAE,cAAM,OAAA,oBAAC,kBAAkB,OAAG,EAAtB,CAAsB;IACnC,MAAM,EAAE,cAAM,OAAA,oBAAC,kBAAkB,OAAG,EAAtB,CAAsB;IACpC,KAAK,EAAE,cAAM,OAAA,oBAAC,oBAAoB,OAAG,EAAxB,CAAwB;CACtC,EACD,YAAY,CACb,CAAC","sourcesContent":["import React from 'react';\n\nimport { iconSizer } from '../../internal/icons2022/iconSizer.js';\nimport { EyeOpenIcon16Light } from '../../internal/icons2022/EyeOpenIcon/EyeOpenIcon16Light.js';\nimport { EyeOpenIcon20Light } from '../../internal/icons2022/EyeOpenIcon/EyeOpenIcon20Light.js';\nimport { EyeOpenIcon24Regular } from '../../internal/icons2022/EyeOpenIcon/EyeOpenIcon24Regular.js';\n\nexport const OpenedIcon = iconSizer(\n  {\n    small: () => <EyeOpenIcon16Light />,\n    medium: () => <EyeOpenIcon20Light />,\n    large: () => <EyeOpenIcon24Regular />,\n  },\n  'OpenedIcon',\n);\n"]}

package/components/PasswordInput/PasswordInput.d.ts

@@ -1,45 +1,62 @@
-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;
-}
-/**
- * **DRAFT**
- */
-export default class PasswordInput extends React.Component<PasswordInputProps, PasswordInputState> {
-    static __KONTUR_REACT_UI__: string;
-    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 type { AriaAttributes, JSX } from 'react';
+import React from 'react';
+import type { InputProps } from '../Input/index.js';
+import type { CommonProps } from '../../internal/CommonWrapper/index.js';
+import type { TGetRootNode } from '../../lib/rootNode/index.js';
+export interface PasswordInputProps extends Pick<AriaAttributes, 'aria-label'>, CommonProps, Omit<InputProps, 'showClearIcon'> {
+    /** Визуально показывает, что активен CapsLock. */
+    detectCapsLock?: boolean;
+}
+export interface PasswordInputState {
+    visible: boolean;
+    focused: boolean;
+    capsLockEnabled?: boolean | null;
+}
+export declare const PasswordInputDataTids: {
+    readonly root: "PasswordInput";
+    readonly capsLockDetector: "PasswordInputCapsLockDetector";
+    readonly eyeIcon: "PasswordInputEyeIcon";
+};
+/**
+ * Однострочное поле для ввода пароля, в котором символы заменяются на точки.
+ */
+export declare class PasswordInput extends React.PureComponent<PasswordInputProps, PasswordInputState> {
+    static __KONTUR_REACT_UI__: string;
+    static displayName: string;
+    state: PasswordInputState;
+    private size;
+    private emotion;
+    private cx;
+    private styles;
+    private theme;
+    private input;
+    getRootNode: TGetRootNode;
+    private setRootNode;
+    private readonly locale;
+    private getProps;
+    componentDidMount(): void;
+    static getDerivedStateFromProps(props: PasswordInputProps, state: PasswordInputState): PasswordInputState | {
+        visible: boolean;
+    };
+    render(): JSX.Element;
+    /** Программно устанавливает фокус на поле.
+     * Появляется фокусная рамка, элемент получает клавиатурные события и воспринимается как текущий элемент для чтения скринридерами.
+     * @public
+     */
+    focus: () => void;
+    /** Программно снимает фокус с кнопки.
+     * @public
+     */
+    blur: () => void;
+    private handleKeyPress;
+    private handleKeydown;
+    private handleToggleVisibility;
+    private focusOnInput;
+    private handleFocus;
+    private handleFocusOutside;
+    private getEyeWrapperClassname;
+    private renderEye;
+    private refInput;
+    private hideSymbols;
+    private renderMain;
+}

package/components/PasswordInput/PasswordInput.js

@@ -1,120 +1,191 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-var tslib_1 = require("tslib");
-var React = tslib_1.__importStar(require("react"));
-var PropTypes = tslib_1.__importStar(require("prop-types"));
-var EyeOpened_1 = tslib_1.__importDefault(require("@skbkontur/react-icons/EyeOpened"));
-var EyeClosed_1 = tslib_1.__importDefault(require("@skbkontur/react-icons/EyeClosed"));
-var identifiers_1 = require("../../lib/events/keyboard/identifiers");
-var KeyboardEventCodes_1 = tslib_1.__importDefault(require("../../lib/events/keyboard/KeyboardEventCodes"));
-var Input_1 = tslib_1.__importDefault(require("../Input"));
-var PasswordInputFallback_1 = tslib_1.__importDefault(require("./PasswordInputFallback"));
-var ensureOldIEClassName_1 = require("../ensureOldIEClassName");
-var PasswordInput_module_less_1 = tslib_1.__importDefault(require("./PasswordInput.module.css"));
-/**
- * **DRAFT**
- */
-var PasswordInput = /** @class */function (_super) {
-  tslib_1.__extends(PasswordInput, _super);
-  function PasswordInput() {
-    var _this = _super !== null && _super.apply(this, arguments) || this;
-    _this.state = {
-      visible: false,
-      capsLockEnabled: false };
-
-    /**
-     * @public
-     */
-    _this.focus = function () {
-      if (_this.input) {
-        _this.input.focus();
-      }
-    };
-    /**
-     * @public
-     */
-    _this.blur = function () {
-      _this.handleBlur();
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+        return extendStatics(d, b);
     };
-    _this.handleKeyPress = function (e) {
-      var _a = _this.props,onKeyPress = _a.onKeyPress,detectCapsLock = _a.detectCapsLock;
-      if (onKeyPress) {
-        onKeyPress(e);
-      }
-      if (!detectCapsLock) {
-        return;
-      }
-      var capsLockEnabled = e.getModifierState(KeyboardEventCodes_1["default"].CapsLock);
-      _this.setState({ capsLockEnabled: capsLockEnabled });
+    return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
     };
-    _this.handleKeydown = function (e) {
-      var _a = _this,_b = _a.props,detectCapsLock = _b.detectCapsLock,onKeyDown = _b.onKeyDown,capsLockEnabled = _a.state.capsLockEnabled;
-      if (onKeyDown) {
-        onKeyDown(e);
-      }
-      if (!detectCapsLock) {
-        return;
-      }
-      if (identifiers_1.isKeyCapsLock(e) && capsLockEnabled != null) {
-        _this.setState({ capsLockEnabled: !capsLockEnabled });
-      }
+})();
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
     };
-    _this.handleToggleVisibility = function () {
-      _this.setState(function (prevState) {return { visible: !prevState.visible };}, _this.handleFocus);
-    };
-    _this.handleFocus = function () {
-      if (_this.input) {
-        _this.input.focus();
-      }
+    return __assign.apply(this, arguments);
+};
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import React from 'react';
+import { locale } from '../../lib/locale/decorators.js';
+import { RenderLayer } from '../../internal/RenderLayer/index.js';
+import { isNonNullable } from '../../lib/utils.js';
+import { isKeyCapsLock } from '../../lib/events/keyboard/identifiers.js';
+import { KeyboardEventCodes as Codes } from '../../lib/events/keyboard/KeyboardEventCodes.js';
+import { Input } from '../Input/index.js';
+import { CommonWrapper } from '../../internal/CommonWrapper/index.js';
+import { ThemeContext } from '../../lib/theming/ThemeContext.js';
+import { rootNode } from '../../lib/rootNode/index.js';
+import { withSize } from '../../lib/size/SizeDecorator.js';
+import { createPropsGetter } from '../../lib/createPropsGetter.js';
+import { withRenderEnvironment } from '../../lib/renderEnvironment/RenderEnvironmentDecorator.js';
+import { getStyles } from './PasswordInput.styles.js';
+import { PasswordInputIcon } from './PasswordInputIcon.js';
+import { PasswordInputLocaleHelper } from './locale/index.js';
+export var PasswordInputDataTids = {
+    root: 'PasswordInput',
+    capsLockDetector: 'PasswordInputCapsLockDetector',
+    eyeIcon: 'PasswordInputEyeIcon',
+};
+/**
+ * Однострочное поле для ввода пароля, в котором символы заменяются на точки.
+ */
+var PasswordInput = /** @class */ (function (_super) {
+    __extends(PasswordInput, _super);
+    function PasswordInput() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this.state = {
+            visible: false,
+            focused: false,
+            capsLockEnabled: false,
+        };
+        _this.getProps = createPropsGetter({});
+        /** Программно устанавливает фокус на поле.
+         * Появляется фокусная рамка, элемент получает клавиатурные события и воспринимается как текущий элемент для чтения скринридерами.
+         * @public
+         */
+        _this.focus = function () {
+            if (_this.input) {
+                _this.input.focus();
+            }
+        };
+        /** Программно снимает фокус с кнопки.
+         * @public
+         */
+        _this.blur = function () {
+            if (_this.input) {
+                _this.input.blur();
+            }
+        };
+        _this.handleKeyPress = function (e) {
+            var _a = _this.props, onKeyPress = _a.onKeyPress, detectCapsLock = _a.detectCapsLock;
+            if (onKeyPress) {
+                onKeyPress(e);
+            }
+            if (!detectCapsLock) {
+                return;
+            }
+            var capsLockEnabled = e.getModifierState(Codes.CapsLock);
+            _this.setState({ capsLockEnabled: capsLockEnabled });
+        };
+        _this.handleKeydown = function (e) {
+            var _a = _this, _b = _a.props, detectCapsLock = _b.detectCapsLock, onKeyDown = _b.onKeyDown, capsLockEnabled = _a.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.focusOnInput);
+        };
+        _this.focusOnInput = function () {
+            if (_this.input) {
+                _this.input.focus();
+            }
+        };
+        _this.handleFocus = function (event) {
+            if (_this.state.focused) {
+                return;
+            }
+            _this.setState({ focused: true });
+            if (_this.props.onFocus) {
+                _this.props.onFocus(event);
+            }
+        };
+        _this.handleFocusOutside = function () {
+            _this.hideSymbols();
+            if (_this.state.focused) {
+                _this.setState({ focused: false });
+            }
+        };
+        _this.renderEye = function () {
+            var capsLockEnabled = _this.state.capsLockEnabled;
+            return (React.createElement("span", { className: _this.styles.iconWrapper() },
+                capsLockEnabled && (React.createElement("span", { className: _this.styles.capsLockDetector(), "data-tid": PasswordInputDataTids.capsLockDetector })),
+                React.createElement("span", { className: _this.cx(_this.styles.toggleVisibility(_this.theme), _this.getEyeWrapperClassname()) }, !_this.props.disabled && (React.createElement("button", { type: "button", "aria-label": _this.state.visible ? _this.locale.eyeClosedAriaLabel : _this.locale.eyeOpenedAriaLabel, onClick: _this.handleToggleVisibility, className: _this.styles.icon(), "data-tid": PasswordInputDataTids.eyeIcon },
+                    React.createElement(PasswordInputIcon, { size: _this.size, visible: _this.state.visible }))))));
+        };
+        _this.refInput = function (element) {
+            _this.input = element;
+        };
+        _this.hideSymbols = function () {
+            _this.setState({ visible: false });
+        };
+        _this.renderMain = function (props) {
+            return (React.createElement(RenderLayer, { active: _this.state.focused, onFocusOutside: _this.handleFocusOutside, onClickOutside: _this.handleFocusOutside },
+                React.createElement("div", { "data-tid": PasswordInputDataTids.root, className: _this.styles.root() },
+                    React.createElement(Input, __assign({ ref: _this.refInput, type: _this.state.visible ? 'text' : 'password', onKeyDown: _this.handleKeydown, onKeyPress: _this.handleKeyPress, rightIcon: _this.renderEye(), onFocus: _this.handleFocus }, props)))));
+        };
+        return _this;
+    }
+    PasswordInput.prototype.componentDidMount = function () {
+        if (this.props.detectCapsLock) {
+            this.setState({ capsLockEnabled: null });
+        }
     };
-    _this.handleBlur = function () {
-      if (_this.input) {
-        _this.input.blur();
-      }
+    PasswordInput.getDerivedStateFromProps = function (props, state) {
+        if (props.disabled) {
+            return { visible: false };
+        }
+        return state;
     };
-    _this.renderEye = function () {
-      var capsLockEnabled = _this.state.capsLockEnabled;
-      return React.createElement("span", { className: PasswordInput_module_less_1["default"].iconWrapper },
-      capsLockEnabled && React.createElement("span", { className: PasswordInput_module_less_1["default"].capsLockDetector }),
-      React.createElement("span", { "data-tid": "PasswordInputEyeIcon", className: PasswordInput_module_less_1["default"].toggleVisibility, onClick: _this.handleToggleVisibility }, _this.state.visible ? React.createElement(EyeOpened_1["default"], { size: 14 }) : React.createElement(EyeClosed_1["default"], { size: 14 })));
+    PasswordInput.prototype.render = function () {
+        var _this = this;
+        this.styles = getStyles(this.emotion);
+        return (React.createElement(ThemeContext.Consumer, null, function (theme) {
+            _this.theme = theme;
+            return (React.createElement(CommonWrapper, __assign({ rootNodeRef: _this.setRootNode }, _this.getProps()), _this.renderMain));
+        }));
     };
-    _this.refInput = function (element) {
-      _this.input = element;
+    PasswordInput.prototype.getEyeWrapperClassname = function () {
+        switch (this.size) {
+            case 'large':
+                return this.styles.eyeWrapperLarge(this.theme);
+            case 'medium':
+                return this.styles.eyeWrapperMedium(this.theme);
+            case 'small':
+            default:
+                return this.styles.eyeWrapperSmall(this.theme);
+        }
     };
-    return _this;
-  }
-  PasswordInput.prototype.componentWillMount = function () {
-    if (this.props.detectCapsLock) {
-      this.setState({ capsLockEnabled: null });
-    }
-    // @ts-ignore
-    if (ensureOldIEClassName_1.isIE && !window.document.msCapsLockWarningOff) {
-      // turns off default ie capslock warning
-      // @ts-ignore
-      window.document.msCapsLockWarningOff = true;
-    }
-  };
-  PasswordInput.prototype.render = function () {
-    return React.createElement("div", { className: PasswordInput_module_less_1["default"].root }, this.renderInput());
-  };
-  PasswordInput.prototype.renderInput = function () {
-    var _a = this.props,detectCapsLock = _a.detectCapsLock,props = tslib_1.__rest(_a, ["detectCapsLock"]);
-    var inputProps = tslib_1.__assign({}, props, { onKeyDown: this.handleKeydown, onKeyPress: this.handleKeyPress, rightIcon: this.renderEye() });
-    if (ensureOldIEClassName_1.isIE && ensureOldIEClassName_1.ieVerison === 8) {
-      return React.createElement(PasswordInputFallback_1["default"], tslib_1.__assign({ refInput: this.refInput, visible: this.state.visible }, inputProps));
-    }
-    return React.createElement(Input_1["default"], tslib_1.__assign({ ref: this.refInput, type: this.state.visible ? 'text' : 'password' }, inputProps));
-  };
-  PasswordInput.__KONTUR_REACT_UI__ = 'PasswordInput';
-  PasswordInput.propTypes = {
-    /**
-     * Включает CapsLock детектор
-     */
-    detectCapsLock: PropTypes.bool };
-
-  PasswordInput.defaultProps = {
-    size: 'small' };
-
-  return PasswordInput;
-}(React.Component);
-exports["default"] = PasswordInput;
+    PasswordInput.__KONTUR_REACT_UI__ = 'PasswordInput';
+    PasswordInput.displayName = 'PasswordInput';
+    PasswordInput = __decorate([
+        withRenderEnvironment,
+        rootNode,
+        locale('PasswordInput', PasswordInputLocaleHelper),
+        withSize
+    ], PasswordInput);
+    return PasswordInput;
+}(React.PureComponent));
+export { PasswordInput };
+//# sourceMappingURL=PasswordInput.js.map

package/components/PasswordInput/PasswordInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"PasswordInput.js","sourceRoot":"","sources":["PasswordInput.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"PasswordInput.js","sourceRoot":"","sources":["../../../components/PasswordInput/PasswordInput.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { AriaAttributes, JSX } from 'react';\nimport React from 'react';\nimport type { Emotion } from '@emotion/css/create-instance';\n\nimport { locale } from '../../lib/locale/decorators.js';\nimport { RenderLayer } from '../../internal/RenderLayer/index.js';\nimport { isNonNullable } from '../../lib/utils.js';\nimport { isKeyCapsLock } from '../../lib/events/keyboard/identifiers.js';\nimport { KeyboardEventCodes as Codes } from '../../lib/events/keyboard/KeyboardEventCodes.js';\nimport type { InputProps } from '../Input/index.js';\nimport { Input } from '../Input/index.js';\nimport type { Nullable } from '../../typings/utility-types.js';\nimport type { CommonProps, CommonWrapperRestProps } from '../../internal/CommonWrapper/index.js';\nimport { CommonWrapper } from '../../internal/CommonWrapper/index.js';\nimport type { Theme } from '../../lib/theming/Theme.js';\nimport { ThemeContext } from '../../lib/theming/ThemeContext.js';\nimport type { TGetRootNode, TSetRootNode } from '../../lib/rootNode/index.js';\nimport { rootNode } from '../../lib/rootNode/index.js';\nimport { withSize } from '../../lib/size/SizeDecorator.js';\nimport type { SizeProp } from '../../lib/types/props.js';\nimport { createPropsGetter } from '../../lib/createPropsGetter.js';\nimport { withRenderEnvironment } from '../../lib/renderEnvironment/RenderEnvironmentDecorator.js';\n\nimport { getStyles } from './PasswordInput.styles.js';\nimport { PasswordInputIcon } from './PasswordInputIcon.js';\nimport type { PasswordInputLocale } from './locale/index.js';\nimport { PasswordInputLocaleHelper } from './locale/index.js';\n\nexport interface PasswordInputProps\n  extends Pick<AriaAttributes, 'aria-label'>,\n    CommonProps,\n    Omit<InputProps, 'showClearIcon'> {\n  /** Визуально показывает, что активен CapsLock. */\n  detectCapsLock?: boolean;\n}\n\nexport interface PasswordInputState {\n  visible: boolean;\n  focused: boolean;\n  capsLockEnabled?: boolean | null;\n}\n\nexport const PasswordInputDataTids = {\n  root: 'PasswordInput',\n  capsLockDetector: 'PasswordInputCapsLockDetector',\n  eyeIcon: 'PasswordInputEyeIcon',\n} as const;\n\n/**\n * Однострочное поле для ввода пароля, в котором символы заменяются на точки.\n */\n@withRenderEnvironment\n@rootNode\n@locale('PasswordInput', PasswordInputLocaleHelper)\n@withSize\nexport class PasswordInput extends React.PureComponent<PasswordInputProps, PasswordInputState> {\n  public static __KONTUR_REACT_UI__ = 'PasswordInput';\n  public static displayName = 'PasswordInput';\n\n  public state: PasswordInputState = {\n    visible: false,\n    focused: false,\n    capsLockEnabled: false,\n  };\n  private size!: SizeProp;\n\n  private emotion!: Emotion;\n  private cx!: Emotion['cx'];\n  private styles!: ReturnType<typeof getStyles>;\n  private theme!: Theme;\n\n  private input: Nullable<Input>;\n  public getRootNode!: TGetRootNode;\n  private setRootNode!: TSetRootNode;\n  private readonly locale!: PasswordInputLocale;\n\n  private getProps = createPropsGetter({});\n\n  public componentDidMount() {\n    if (this.props.detectCapsLock) {\n      this.setState({ capsLockEnabled: null });\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(): JSX.Element {\n    this.styles = getStyles(this.emotion);\n\n    return (\n      <ThemeContext.Consumer>\n        {(theme) => {\n          this.theme = theme;\n          return (\n            <CommonWrapper rootNodeRef={this.setRootNode} {...this.getProps()}>\n              {this.renderMain}\n            </CommonWrapper>\n          );\n        }}\n      </ThemeContext.Consumer>\n    );\n  }\n\n  /** Программно устанавливает фокус на поле.\n   * Появляется фокусная рамка, элемент получает клавиатурные события и воспринимается как текущий элемент для чтения скринридерами.\n   * @public\n   */\n  public focus = (): void => {\n    if (this.input) {\n      this.input.focus();\n    }\n  };\n\n  /** Программно снимает фокус с кнопки.\n   * @public\n   */\n  public blur = (): void => {\n    if (this.input) {\n      this.input.blur();\n    }\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.focusOnInput);\n  };\n\n  private focusOnInput = () => {\n    if (this.input) {\n      this.input.focus();\n    }\n  };\n\n  private handleFocus = (event: React.FocusEvent<HTMLInputElement>) => {\n    if (this.state.focused) {\n      return;\n    }\n\n    this.setState({ focused: true });\n\n    if (this.props.onFocus) {\n      this.props.onFocus(event);\n    }\n  };\n\n  private handleFocusOutside = () => {\n    this.hideSymbols();\n\n    if (this.state.focused) {\n      this.setState({ focused: false });\n    }\n  };\n\n  private getEyeWrapperClassname() {\n    switch (this.size) {\n      case 'large':\n        return this.styles.eyeWrapperLarge(this.theme);\n      case 'medium':\n        return this.styles.eyeWrapperMedium(this.theme);\n      case 'small':\n      default:\n        return this.styles.eyeWrapperSmall(this.theme);\n    }\n  }\n\n  private renderEye = () => {\n    const { capsLockEnabled } = this.state;\n\n    return (\n      <span className={this.styles.iconWrapper()}>\n        {capsLockEnabled && (\n          <span className={this.styles.capsLockDetector()} data-tid={PasswordInputDataTids.capsLockDetector} />\n        )}\n        <span className={this.cx(this.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={this.styles.icon()}\n              data-tid={PasswordInputDataTids.eyeIcon}\n            >\n              <PasswordInputIcon size={this.size} visible={this.state.visible} />\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    return (\n      <RenderLayer\n        active={this.state.focused}\n        onFocusOutside={this.handleFocusOutside}\n        onClickOutside={this.handleFocusOutside}\n      >\n        <div data-tid={PasswordInputDataTids.root} className={this.styles.root()}>\n          <Input\n            ref={this.refInput}\n            type={this.state.visible ? 'text' : 'password'}\n            onKeyDown={this.handleKeydown}\n            onKeyPress={this.handleKeyPress}\n            rightIcon={this.renderEye()}\n            onFocus={this.handleFocus}\n            {...props}\n          />\n        </div>\n      </RenderLayer>\n    );\n  };\n}\n"]}

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

@@ -0,0 +1,11 @@
+import type { Theme } from '../../lib/theming/Theme.js';
+export declare const getStyles: import("../../lib/theming/Emotion.js").StylesGetter<{
+    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/PasswordInput.styles.js

@@ -0,0 +1,36 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import { memoizeGetStyles } from '../../lib/theming/Emotion.js';
+export var getStyles = memoizeGetStyles(function (_a) {
+    var css = _a.css;
+    return ({
+        root: function () {
+            return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      position: relative;\n      display: inline-block;\n      line-height: normal;\n      width: 100%;\n\n      input::-ms-clear,\n      input::-ms-reveal {\n        display: none;\n      }\n    "], ["\n      position: relative;\n      display: inline-block;\n      line-height: normal;\n      width: 100%;\n\n      input::-ms-clear,\n      input::-ms-reveal {\n        display: none;\n      }\n    "])));
+        },
+        toggleVisibility: function (t) {
+            return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n      color: ", ";\n      cursor: pointer;\n      opacity: ", ";\n      user-select: none;\n\n      &:hover {\n        color: ", ";\n        opacity: ", ";\n      }\n    "], ["\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 () {
+            return css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\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      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 () {
+            return css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n      display: flex;\n      align-items: center;\n      justify-content: flex-end;\n    "], ["\n      display: flex;\n      align-items: center;\n      justify-content: flex-end;\n    "])));
+        },
+        eyeWrapperSmall: function (t) {
+            return css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n      min-width: ", ";\n    "], ["\n      min-width: ", ";\n    "])), t.inputIconSizeSmall);
+        },
+        eyeWrapperMedium: function (t) {
+            return css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n      min-width: ", ";\n    "], ["\n      min-width: ", ";\n    "])), t.inputIconSizeMedium);
+        },
+        eyeWrapperLarge: function (t) {
+            return css(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n      min-width: ", ";\n    "], ["\n      min-width: ", ";\n    "])), t.inputIconSizeLarge);
+        },
+        icon: function () {
+            return css(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n      padding: 0;\n      border: none;\n      font: inherit;\n      color: inherit;\n      background-color: transparent;\n      cursor: pointer;\n    "], ["\n      padding: 0;\n      border: none;\n      font: inherit;\n      color: inherit;\n      background-color: transparent;\n      cursor: pointer;\n    "])));
+        },
+    });
+});
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8;
+//# sourceMappingURL=PasswordInput.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"PasswordInput.styles.js","sourceRoot":"","sources":["../../../components/PasswordInput/PasswordInput.styles.ts"],"names":[],"mappings":";;;;AAGA,OAAO,EAAE,gBAAgB,EAAE,MAAM,8BAA8B,CAAC;AAEhE,MAAM,CAAC,IAAM,SAAS,GAAG,gBAAgB,CAAC,UAAC,EAAgB;QAAd,GAAG,SAAA;IAAgB,OAAA,CAAC;QAC/D,IAAI;YACF,OAAO,GAAG,2QAAA,wMAUT,KAAC;QACJ,CAAC;QACD,gBAAgB,YAAC,CAAQ;YACvB,OAAO,GAAG,iPAAA,iBACC,EAAkC,4CAEhC,EAAoC,iEAIpC,EAAuC,sBACrC,EAAyC,kBAEvD,KATU,CAAC,CAAC,gCAAgC,EAEhC,CAAC,CAAC,kCAAkC,EAIpC,CAAC,CAAC,qCAAqC,EACrC,CAAC,CAAC,uCAAuC,EAEtD;QACJ,CAAC;QACD,gBAAgB;YACd,OAAO,GAAG,6ZAAA,0VAgBT,KAAC;QACJ,CAAC;QACD,WAAW;YACT,OAAO,GAAG,+JAAA,4FAIT,KAAC;QACJ,CAAC;QAED,eAAe,YAAC,CAAQ;YACtB,OAAO,GAAG,mGAAA,qBACK,EAAoB,SAClC,KADc,CAAC,CAAC,kBAAkB,EACjC;QACJ,CAAC;QAED,gBAAgB,YAAC,CAAQ;YACvB,OAAO,GAAG,mGAAA,qBACK,EAAqB,SACnC,KADc,CAAC,CAAC,mBAAmB,EAClC;QACJ,CAAC;QAED,eAAe,YAAC,CAAQ;YACtB,OAAO,GAAG,mGAAA,qBACK,EAAoB,SAClC,KADc,CAAC,CAAC,kBAAkB,EACjC;QACJ,CAAC;QACD,IAAI;YACF,OAAO,GAAG,8NAAA,2JAOT,KAAC;QACJ,CAAC;KACF,CAAC;AAjF8D,CAiF9D,CAAC,CAAC","sourcesContent":["import type { Emotion } from '@emotion/css/create-instance';\n\nimport type { Theme } from '../../lib/theming/Theme.js';\nimport { memoizeGetStyles } from '../../lib/theming/Emotion.js';\n\nexport const getStyles = memoizeGetStyles(({ css }: Emotion) => ({\n  root() {\n    return css`\n      position: relative;\n      display: inline-block;\n      line-height: normal;\n      width: 100%;\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  icon() {\n    return 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/PasswordInputIcon.d.ts

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

package/components/PasswordInput/PasswordInputIcon.js

@@ -0,0 +1,11 @@
+import React from 'react';
+import { ClosedIcon } from './ClosedIcon.js';
+import { OpenedIcon } from './OpenedIcon.js';
+export var PasswordInputIcon = function (_a) {
+    var visible = _a.visible, size = _a.size;
+    if (visible) {
+        return React.createElement(ClosedIcon, { size: size });
+    }
+    return React.createElement(OpenedIcon, { size: size });
+};
+//# sourceMappingURL=PasswordInputIcon.js.map

package/components/PasswordInput/PasswordInputIcon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PasswordInputIcon.js","sourceRoot":"","sources":["../../../components/PasswordInput/PasswordInputIcon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAC7C,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAI7C,MAAM,CAAC,IAAM,iBAAiB,GAAG,UAAC,EAAyC;QAAvC,OAAO,aAAA,EAAE,IAAI,UAAA;IAC/C,IAAI,OAAO,EAAE,CAAC;QACZ,OAAO,oBAAC,UAAU,IAAC,IAAI,EAAE,IAAI,GAAI,CAAC;IACpC,CAAC;IAED,OAAO,oBAAC,UAAU,IAAC,IAAI,EAAE,IAAI,GAAI,CAAC;AACpC,CAAC,CAAC","sourcesContent":["import React from 'react';\n\nimport type { PasswordInputProps, PasswordInputState } from './PasswordInput.js';\nimport { ClosedIcon } from './ClosedIcon.js';\nimport { OpenedIcon } from './OpenedIcon.js';\n\nexport type PasswordInputIconProps = Pick<PasswordInputState, 'visible'> & Pick<PasswordInputProps, 'size'>;\n\nexport const PasswordInputIcon = ({ visible, size }: PasswordInputIconProps): React.JSX.Element => {\n  if (visible) {\n    return <ClosedIcon size={size} />;\n  }\n\n  return <OpenedIcon size={size} />;\n};\n"]}

package/components/PasswordInput/index.d.ts

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

package/components/PasswordInput/index.js

@@ -1,4 +1,2 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-var PasswordInput_1 = require("./PasswordInput");
-exports["default"] = PasswordInput_1["default"];
+export * from './PasswordInput.js';
+//# sourceMappingURL=index.js.map

package/components/PasswordInput/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["index.tsx"],"names":[],"mappings":";;AAAA,iDAAkF;AAAzE,kCAAA,OAAO,CAAA"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../components/PasswordInput/index.tsx"],"names":[],"mappings":"AAAA,cAAc,oBAAoB,CAAC","sourcesContent":["export * from './PasswordInput.js';\n"]}

package/components/PasswordInput/locale/index.d.ts

@@ -0,0 +1,4 @@
+import { LocaleHelper } from '../../../lib/locale/LocaleHelper.js';
+import type { PasswordInputLocale } from './types.js';
+export * from './types.js';
+export declare const PasswordInputLocaleHelper: LocaleHelper<PasswordInputLocale>;

package/components/PasswordInput/locale/index.js

@@ -0,0 +1,9 @@
+import { LocaleHelper } from '../../../lib/locale/LocaleHelper.js';
+import { componentsLocales as en_GB } from './locales/en.js';
+import { componentsLocales as ru_RU } from './locales/ru.js';
+export * from './types.js';
+export var PasswordInputLocaleHelper = new LocaleHelper({
+    ru_RU: ru_RU,
+    en_GB: en_GB,
+});
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../components/PasswordInput/locale/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,qCAAqC,CAAC;AAEnE,OAAO,EAAE,iBAAiB,IAAI,KAAK,EAAE,MAAM,iBAAiB,CAAC;AAC7D,OAAO,EAAE,iBAAiB,IAAI,KAAK,EAAE,MAAM,iBAAiB,CAAC;AAG7D,cAAc,YAAY,CAAC;AAE3B,MAAM,CAAC,IAAM,yBAAyB,GAAG,IAAI,YAAY,CAAsB;IAC7E,KAAK,OAAA;IACL,KAAK,OAAA;CACN,CAAC,CAAC","sourcesContent":["import { LocaleHelper } from '../../../lib/locale/LocaleHelper.js';\n\nimport { componentsLocales as en_GB } from './locales/en.js';\nimport { componentsLocales as ru_RU } from './locales/ru.js';\nimport type { PasswordInputLocale } from './types.js';\n\nexport * from './types.js';\n\nexport const PasswordInputLocaleHelper = new LocaleHelper<PasswordInputLocale>({\n  ru_RU,\n  en_GB,\n});\n"]}