@skbkontur/react-ui 0.0.0-30619a873c → 0.0.0-32550fb571

package/components/Modal/ModalHeader/ModalHeader.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","useContext","useLayoutEffect","Sticky","ThemeContext","CommonWrapper","cx","useResponsiveLayout","styles","ModalClose","ModalContext","ModalSeparator","ModalHeaderDataTids","root","ModalHeader","props","theme","modal","layout","_props$sticky","sticky","isMobile","children","setHasHeader","renderContent","fixed","createElement","className","header","mobileHeader","Boolean","additionalPadding","headerAddPadding","fixedHeader","mobileFixedHeader","close","headerWithClose","mobileHeaderWithClose","requestClose","disableClose","side","__KONTUR_REACT_UI__","displayName","__MODAL_HEADER__"],"sources":["ModalHeader.tsx"],"sourcesContent":["import React, { ReactNode, useContext, useLayoutEffect } from 'react';\n\nimport { Sticky } from '../Sticky';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { CommonWrapper, CommonProps } from '../../internal/CommonWrapper';\nimport { cx } from '../../lib/theming/Emotion';\nimport { useResponsiveLayout } from '../ResponsiveLayout';\n\nimport { styles } from './Modal.styles';\nimport { ModalClose } from './ModalClose';\nimport { ModalContext } from './ModalContext';\nimport { ModalSeparator } from './ModalSeparator';\n\nexport interface ModalHeaderProps extends CommonProps {\n  /** Закрепляет хедер сверху модального окна. */\n  sticky?: boolean;\n\n  /** @ignore */\n  children?: ReactNode;\n}\n\nexport const ModalHeaderDataTids = {\n  root: 'ModalHeader__root',\n} as const;\n\n/**\n * Шапка модального окна.\n *\n * @visibleName Modal.Header\n */\nfunction ModalHeader(props: ModalHeaderProps) {\n  const theme = useContext(ThemeContext);\n  const modal = useContext(ModalContext);\n  const layout = useResponsiveLayout();\n\n  const { sticky = !layout.isMobile, children } = props;\n\n  useLayoutEffect(() => {\n    modal.setHasHeader?.();\n\n    return () => modal.setHasHeader?.(false);\n  }, []);\n\n  const renderContent = (fixed = false) => {\n    return (\n      <div>\n        <div\n          data-tid={ModalHeaderDataTids.root}\n          className={cx(\n            styles.header(theme),\n            layout.isMobile && styles.mobileHeader(theme),\n            Boolean(modal.additionalPadding) && styles.headerAddPadding(theme),\n            fixed && styles.fixedHeader(theme),\n            fixed && layout.isMobile && styles.mobileFixedHeader(theme),\n            Boolean(modal.close) && styles.headerWithClose(theme),\n            Boolean(modal.close) && layout.isMobile && styles.mobileHeaderWithClose(theme),\n          )}\n        >\n          {modal.close && (\n            <ModalClose requestClose={modal.close.requestClose} disableClose={modal.close.disableClose} />\n          )}\n          {children}\n        </div>\n        {fixed && <ModalSeparator fixed={fixed} />}\n      </div>\n    );\n  };\n\n  return (\n    <CommonWrapper {...props}>{sticky ? <Sticky side=\"top\">{renderContent}</Sticky> : renderContent()}</CommonWrapper>\n  );\n}\n\nModalHeader.__KONTUR_REACT_UI__ = 'ModalHeader';\nModalHeader.displayName = 'ModalHeader';\nModalHeader.__MODAL_HEADER__ = true;\n\nexport { ModalHeader };\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["React","useContext","useLayoutEffect","Sticky","ThemeContext","CommonWrapper","cx","useResponsiveLayout","styles","ModalClose","ModalContext","ModalSeparator","ModalHeaderDataTids","root","ModalHeader","props","theme","modal","layout","_props$sticky","sticky","isMobile","children","setHasHeader","renderContent","fixed","createElement","className","header","mobileHeader","Boolean","additionalPadding","headerAddPadding","fixedHeader","mobileFixedHeader","close","headerWithClose","mobileHeaderWithClose","requestClose","disableClose","side","__KONTUR_REACT_UI__","displayName","__MODAL_HEADER__"],"sources":["ModalHeader.tsx"],"sourcesContent":["import React, { ReactNode, useContext, useLayoutEffect } from 'react';\n\nimport { Sticky } from '../Sticky';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { CommonWrapper, CommonProps } from '../../internal/CommonWrapper';\nimport { cx } from '../../lib/theming/Emotion';\nimport { useResponsiveLayout } from '../ResponsiveLayout';\n\nimport { styles } from './Modal.styles';\nimport { ModalClose } from './ModalClose';\nimport { ModalContext } from './ModalContext';\nimport { ModalSeparator } from './ModalSeparator';\n\nexport interface ModalHeaderProps extends CommonProps {\n  /** Закрепляет хедер сверху модального окна. */\n  sticky?: boolean;\n\n  /** @ignore */\n  children?: ReactNode;\n}\n\nexport const ModalHeaderDataTids = {\n  root: 'ModalHeader__root',\n} as const;\n\n/**\n * Шапка модального окна.\n *\n * @visibleName Modal.Header\n */\nfunction ModalHeader(props: ModalHeaderProps) {\n  const theme = useContext(ThemeContext);\n  const modal = useContext(ModalContext);\n  const layout = useResponsiveLayout();\n\n  const { sticky = !layout.isMobile, children } = props;\n\n  useLayoutEffect(() => {\n    modal.setHasHeader?.(true);\n\n    return () => modal.setHasHeader?.(false);\n  }, []);\n\n  const renderContent = (fixed = false) => {\n    return (\n      <div>\n        <div\n          data-tid={ModalHeaderDataTids.root}\n          className={cx(\n            styles.header(theme),\n            layout.isMobile && styles.mobileHeader(theme),\n            Boolean(modal.additionalPadding) && styles.headerAddPadding(theme),\n            fixed && styles.fixedHeader(theme),\n            fixed && layout.isMobile && styles.mobileFixedHeader(theme),\n            Boolean(modal.close) && styles.headerWithClose(theme),\n            Boolean(modal.close) && layout.isMobile && styles.mobileHeaderWithClose(theme),\n          )}\n        >\n          {modal.close && (\n            <ModalClose requestClose={modal.close.requestClose} disableClose={modal.close.disableClose} />\n          )}\n          {children}\n        </div>\n        {fixed && <ModalSeparator fixed={fixed} />}\n      </div>\n    );\n  };\n\n  return (\n    <CommonWrapper {...props}>{sticky ? <Sticky side=\"top\">{renderContent}</Sticky> : renderContent()}</CommonWrapper>\n  );\n}\n\nModalHeader.__KONTUR_REACT_UI__ = 'ModalHeader';\nModalHeader.displayName = 'ModalHeader';\nModalHeader.__MODAL_HEADER__ = true;\n\nexport { ModalHeader };\n"],"mappings":"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","ignoreList":[]}

package/components/Modal/__creevey__/Modal.creevey.mts

@@ -0,0 +1,295 @@
+import { story, kind, test } from 'creevey';
+import { Key } from 'selenium-webdriver';
+
+import { delay } from '../../../lib/delay';
+
+const topMiddleBottomModalTests = () => {
+  test('top', async (context) => {
+    await context.matchImage(await context.webdriver.takeScreenshot(), 'top');
+  });
+
+  test('middle', async (context) => {
+    await context.webdriver.executeScript(function () {
+      const modalContainer = window.document.querySelector('[data-tid="modal-container"]') as HTMLElement;
+      const modalContent = window.document.querySelector('[data-tid="modal-content"]') as HTMLElement;
+
+      modalContainer.scrollTop = modalContent.offsetHeight / 2;
+    });
+    await delay(100);
+    await context.matchImage(await context.webdriver.takeScreenshot(), 'middle');
+  });
+
+  test('bottom', async (context) => {
+    await context.webdriver.executeScript(function () {
+      const modalContainer = window.document.querySelector('[data-tid="modal-container"]') as HTMLElement;
+      const modalContent = window.document.querySelector('[data-tid="modal-content"]') as HTMLElement;
+
+      modalContainer.scrollTop = modalContent.offsetHeight;
+    });
+    await delay(100);
+    await context.matchImage(await context.webdriver.takeScreenshot(), 'bottom');
+  });
+};
+
+kind('Modal', () => {
+  story('ModalWithFooterPanelStory', () => {
+    test('open modal', async (context) => {
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .click(context.webdriver.findElement({ css: '[data-comp-name~="Button"]:nth-of-type(1)' }))
+        .perform();
+      await delay(100);
+      await context.matchImage(await context.webdriver.takeScreenshot(), 'open modal');
+    });
+  });
+
+  story('WithIconInput', () => {
+    test('open modal', async (context) => {
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .click(context.webdriver.findElement({ css: '[data-tid~="open-modal"]' }))
+        .perform();
+      await delay(1000);
+      await context.matchImage(await context.webdriver.takeScreenshot(), 'open modal');
+    });
+  });
+
+  story('ModalOverAnotherModalStory', () => {
+    test('open first modal', async (context) => {
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .click(context.webdriver.findElement({ css: '[data-tid~="open-first-modal"]' }))
+        .perform();
+      await delay(200);
+      await context.matchImage(await context.webdriver.takeScreenshot(), 'open first modal');
+    });
+
+    test('open second modal', async (context) => {
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .click(context.webdriver.findElement({ css: '[data-tid~="open-first-modal"]' }))
+        .perform();
+      await context.webdriver
+        .actions({ bridge: true })
+        .click(context.webdriver.findElement({ css: '[data-tid~="open-second-modal"]' }))
+        .perform();
+      await delay(100);
+      await context.matchImage(await context.webdriver.takeScreenshot(), 'open second modal');
+    });
+  });
+
+  story('ModalWithoutFooterPanelStory', () => {
+    test('open modal', async (context) => {
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .click(context.webdriver.findElement({ css: '[data-tid~="open-modal"]' }))
+        .perform();
+      await delay(200);
+      await context.matchImage(await context.webdriver.takeScreenshot(), 'open modal');
+    });
+  });
+
+  story('ModalWithoutFooterStory', () => {
+    test('open modal', async (context) => {
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .click(context.webdriver.findElement({ css: '[data-tid~="open-modal"]' }))
+        .perform();
+      await context.matchImage(await context.webdriver.takeScreenshot(), 'open modal');
+    });
+  });
+
+  story('ModalMobileView', () => {
+    test('idle', async (context) => {
+      await context.matchImage(await context.webdriver.takeScreenshot(), 'idle');
+    });
+  });
+
+  story('ModalWithVariableHeightOfContent', () => {
+    test('open modal', async (context) => {
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .click(context.webdriver.findElement({ css: '[data-tid~="open-modal"]' }))
+        .perform();
+      await delay(100);
+      await context.matchImage(await context.webdriver.takeScreenshot(), 'open modal');
+    });
+
+    test('toggle content height', async (context) => {
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .click(context.webdriver.findElement({ css: '[data-tid~="open-modal"]' }))
+        .perform();
+      await context.webdriver
+        .actions({ bridge: true })
+        .click(context.webdriver.findElement({ css: '#modal-inner [data-comp-name~="Toggle"]' }))
+        .pause(500)
+        .perform();
+      await context.matchImage(await context.webdriver.takeScreenshot(), 'toggle content height');
+    });
+  });
+
+  story('ModalWithoutStickyElements', () => {
+    topMiddleBottomModalTests();
+  });
+
+  story('SmallModalOnTheTop', () => {
+    test('open modal', async (context) => {
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .click(context.webdriver.findElement({ css: '[data-tid~="open-modal"]' }))
+        .perform();
+      await delay(100);
+      await context.matchImage(await context.webdriver.takeScreenshot(), 'open modal');
+    });
+
+    test('close by click on the cross', async (context) => {
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .click(context.webdriver.findElement({ css: '[data-tid~="open-modal"]' }))
+        .perform();
+      await context.webdriver
+        .actions({ bridge: true })
+        .click(context.webdriver.findElement({ css: '[data-tid="modal-close"]' }))
+        .perform();
+      await context.matchImage(await context.webdriver.takeScreenshot(), 'close by click on the cross');
+    });
+
+    test("doesn't close by click on the content", async (context) => {
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .click(context.webdriver.findElement({ css: '[data-tid~="open-modal"]' }))
+        .perform();
+      await context.webdriver
+        .actions({ bridge: true })
+        .click(context.webdriver.findElement({ css: '[data-tid="modal-content-button"]' }))
+        .perform();
+      await context.matchImage(await context.webdriver.takeScreenshot(), "doesn't close by click on the content");
+    });
+
+    test('closes by click on the background', async (context) => {
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .click(context.webdriver.findElement({ css: '[data-tid~="open-modal"]' }))
+        .perform();
+      await context.webdriver
+        .actions({ bridge: true })
+        .click(context.webdriver.findElement({ css: '[data-tid="modal-container"]' }))
+        .perform();
+      await context.matchImage(await context.webdriver.takeScreenshot(), 'closes by click on the background');
+    });
+  });
+
+  story('ModalWithChildrenFromOtherComponent', () => {
+    topMiddleBottomModalTests();
+  });
+
+  story('MobileModal', () => {
+    test('top', async (context) => {
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .click(context.webdriver.findElement({ css: '[data-tid~="open-modal"]' }))
+        .perform();
+      await delay(200);
+      await context.matchImage(await context.webdriver.takeScreenshot(), 'top');
+    });
+
+    test('middle', async (context) => {
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .click(context.webdriver.findElement({ css: '[data-tid~="open-modal"]' }))
+        .perform();
+      await delay(200);
+      await context.webdriver.executeScript(function () {
+        const modalContent = window.document.querySelector('.focus-lock-container') as HTMLElement;
+        const modalBody = window.document.querySelector('[data-comp-name~="Modal.Body"] ') as HTMLElement;
+
+        modalContent.scrollTop = modalBody.offsetHeight / 2;
+      });
+      await delay(100);
+      await context.matchImage(await context.webdriver.takeScreenshot(), 'middle');
+    });
+
+    test('bottom', async (context) => {
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .click(context.webdriver.findElement({ css: '[data-tid~="open-modal"]' }))
+        .perform();
+      await delay(200);
+      await context.webdriver.executeScript(function () {
+        const modalContent = window.document.querySelector('.focus-lock-container') as HTMLElement;
+        const modalBody = window.document.querySelector('[data-comp-name~="Modal.Body"] ') as HTMLElement;
+
+        modalContent.scrollTop = modalBody.offsetHeight;
+      });
+      await delay(100);
+      await context.matchImage(await context.webdriver.takeScreenshot(), 'bottom');
+    });
+  });
+
+  story('ChangeAllModalContent', ({ setStoryParameters }) => {
+    setStoryParameters({
+      skip: { 'themes dont affect logic': { in: /^(?!\bchrome2022\b)/ } },
+    });
+    test('idle', async (context) => {
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .click(context.webdriver.findElement({ css: '[data-tid~="open-first-modal"]' }))
+        .perform();
+      await delay(500);
+      const firstModal = await context.webdriver.takeScreenshot();
+      await context.webdriver
+        .actions({ bridge: true })
+        .click(context.webdriver.findElement({ css: `[data-tid~="open-second-modal"] button` }))
+        .perform();
+      await delay(500);
+      const secondModal = await context.webdriver.takeScreenshot();
+      await context.matchImages({ firstModal, secondModal });
+    });
+  });
+
+  story('CrossFocusedByTab', () => {
+    test('idle', async (context) => {
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .sendKeys(Key.TAB)
+        .perform();
+      await delay(200);
+      await context.matchImage(await context.webdriver.takeScreenshot());
+    });
+  });
+});

package/components/Paging/__creevey__/Paging.creevey.mts

@@ -0,0 +1,97 @@
+import { story, kind, test } from 'creevey';
+import { Key } from 'selenium-webdriver';
+
+import { delay } from '../../../lib/delay';
+
+kind('Paging', () => {
+  story('GoToAbsensePageStory', ({ setStoryParameters }) => {
+    setStoryParameters({
+      skip: {
+        'hover does not work in chrome': {
+          in: ['chrome2022', 'chrome2022Dark'],
+          tests: ['hover', 'Move to page by Ender'],
+        },
+        flaky: {
+          in: ['firefox2022', 'firefox2022Dark'],
+          tests: ['Move focus right', 'Move to page by Ender'],
+        },
+      },
+    });
+
+    test('plain', async (context) => {
+      await context.matchImage(await context.takeScreenshot(), 'plain');
+    });
+
+    test('hover', async (context) => {
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .move({
+          origin: context.webdriver.findElement({ css: `[data-tid='Paging__pageLinkWrapper']` }),
+        })
+        .perform();
+      await context.matchImage(await context.takeScreenshot(), 'hover');
+    });
+
+    test('change page by number', async (context) => {
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .click(context.webdriver.findElement({ css: `[data-tid='Paging__pageLinkWrapper']` }))
+        .perform();
+      await context.matchImage(await context.takeScreenshot(), 'change page by number');
+    });
+
+    test('change page by forwardLink', async (context) => {
+      // NOTE Firefox bug if click send right after click from previous test it results as double click
+      await delay(500);
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .click(context.webdriver.findElement({ css: `[data-tid='Paging__forwardLink']` }))
+        .perform();
+      await context.matchImage(await context.takeScreenshot(), 'change page by forwardLink');
+    });
+
+    test('focused', async (context) => {
+      // NOTE Firefox bug if click send right after click from previous test it results as double click
+      await delay(500);
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .click(context.webdriver.findElement({ css: `[data-tid='Paging__pageLinkWrapper']` }))
+        .perform();
+      await context.matchImage(await context.takeScreenshot(), 'focused');
+    });
+
+    test('Move focus right', async (context) => {
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .click(context.webdriver.findElement({ css: `[data-tid='Paging__pageLinkWrapper']` }))
+        .pause(100)
+        .sendKeys(Key.ARROW_RIGHT)
+        .perform();
+      await context.matchImage(await context.takeScreenshot(), 'Move focus right');
+    });
+
+    test('Move to page by Ender', async (context) => {
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .click(context.webdriver.findElement({ css: `[data-tid='Paging__pageLinkWrapper']` }))
+        .pause(100)
+        .sendKeys(Key.ARROW_RIGHT)
+        .pause(100)
+        .sendKeys(Key.ENTER)
+        .perform();
+      await context.matchImage(await context.takeScreenshot(), 'Move to page by Ender');
+    });
+  });
+});

package/components/PasswordInput/PasswordInput/PasswordInput.js

@@ -42,6 +42,7 @@ export var PasswordInput = (_dec = locale('PasswordInput', PasswordInputLocaleHe
     _this.getProps = createPropsGetter(PasswordInput.defaultProps);
     _this.state = {
       visible: false,
+      focused: false,
       capsLockEnabled: false
     };
 
@@ -58,7 +59,9 @@ export var PasswordInput = (_dec = locale('PasswordInput', PasswordInputLocaleHe
      * @public
      */
     _this.blur = function () {
-      _this.handleBlur();
+      if (_this.input) {
+        _this.input.blur();
+      }
     };
     _this.handleKeyPress = function (e) {
       var _this$props = _this.props,
@@ -98,16 +101,30 @@ export var PasswordInput = (_dec = locale('PasswordInput', PasswordInputLocaleHe
         return {
           visible: !prevState.visible
         };
-      }, _this.handleFocus);
+      }, _this.focusOnInput);
     };
-    _this.handleFocus = function () {
+    _this.focusOnInput = function () {
       if (_this.input) {
         _this.input.focus();
       }
     };
-    _this.handleBlur = function () {
-      if (_this.input) {
-        _this.input.blur();
+    _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 () {
@@ -152,13 +169,16 @@ export var PasswordInput = (_dec = locale('PasswordInput', PasswordInputLocaleHe
       var inputProps = _extends({}, rest, {
         onKeyDown: _this.handleKeydown,
         onKeyPress: _this.handleKeyPress,
-        rightIcon: _this.renderEye()
+        rightIcon: _this.renderEye(),
+        onFocus: _this.handleFocus
       });
       return /*#__PURE__*/(
         React.createElement(RenderLayer, {
-          onFocusOutside: _this.hideSymbols,
-          onClickOutside: _this.hideSymbols
+          active: _this.state.focused,
+          onFocusOutside: _this.handleFocusOutside,
+          onClickOutside: _this.handleFocusOutside
         }, /*#__PURE__*/
+
         React.createElement("div", {
           "data-tid": PasswordInputDataTids.root,
           className: styles.root()
@@ -199,7 +219,7 @@ export var PasswordInput = (_dec = locale('PasswordInput', PasswordInputLocaleHe
       _this3.theme = theme;
       return /*#__PURE__*/React.createElement(CommonWrapper, _extends({
         rootNodeRef: _this3.setRootNode
-      }, _this3.props), _this3.renderMain(_this3.props));
+      }, _this3.getProps()), _this3.renderMain);
     });
   };
   _proto.getEyeWrapperClassname = function getEyeWrapperClassname() {

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

@@ -1 +1 @@
-{"version":3,"names":["React","PropTypes","globalObject","isBrowser","locale","RenderLayer","isNonNullable","isKeyCapsLock","KeyboardEventCodes","Codes","Input","isIE11","CommonWrapper","ThemeContext","cx","rootNode","createPropsGetter","styles","PasswordInputIcon","PasswordInputLocaleHelper","PasswordInputDataTids","root","capsLockDetector","eyeIcon","PasswordInput","_dec","_class","_PasswordInput","_React$PureComponent","_this","_len","arguments","length","args","Array","_key","call","apply","concat","getProps","defaultProps","state","visible","capsLockEnabled","focus","input","blur","handleBlur","handleKeyPress","e","_this$props","props","onKeyPress","detectCapsLock","getModifierState","CapsLock","setState","handleKeydown","_this2","_this2$props","onKeyDown","handleToggleVisibility","prevState","handleFocus","renderEye","createElement","className","iconWrapper","toggleVisibility","theme","getEyeWrapperClassname","disabled","type","eyeClosedAriaLabel","eyeOpenedAriaLabel","onClick","icon","size","refInput","element","hideSymbols","renderMain","rest","_objectWithoutPropertiesLoose","_excluded","inputProps","_extends","rightIcon","onFocusOutside","onClickOutside","ref","_inheritsLoose","_proto","prototype","componentDidMount","document","msCapsLockWarningOff","getDerivedStateFromProps","render","_this3","Consumer","rootNodeRef","setRootNode","eyeWrapperLarge","eyeWrapperMedium","eyeWrapperSmall","PureComponent","__KONTUR_REACT_UI__","displayName","propTypes","bool"],"sources":["PasswordInput.tsx"],"sourcesContent":["import React, { AriaAttributes } from 'react';\nimport PropTypes from 'prop-types';\nimport { globalObject, isBrowser } from '@skbkontur/global-object';\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 { 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';\nimport { PasswordInputLocale, PasswordInputLocaleHelper } from './locale';\n\nexport interface PasswordInputProps extends Pick<AriaAttributes, 'aria-label'>, CommonProps, InputProps {\n  /** Включает CapsLock детектор. */\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 * `PasswordInput` — однострочное поле для ввода пароля, в котором символы заменяются на точки.\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\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      <ThemeContext.Consumer>\n        {(theme) => {\n          this.theme = theme;\n          return (\n            <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>\n              {this.renderMain(this.props)}\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 className={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 size={this.props.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    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"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["React","PropTypes","globalObject","isBrowser","locale","RenderLayer","isNonNullable","isKeyCapsLock","KeyboardEventCodes","Codes","Input","isIE11","CommonWrapper","ThemeContext","cx","rootNode","createPropsGetter","styles","PasswordInputIcon","PasswordInputLocaleHelper","PasswordInputDataTids","root","capsLockDetector","eyeIcon","PasswordInput","_dec","_class","_PasswordInput","_React$PureComponent","_this","_len","arguments","length","args","Array","_key","call","apply","concat","getProps","defaultProps","state","visible","focused","capsLockEnabled","focus","input","blur","handleKeyPress","e","_this$props","props","onKeyPress","detectCapsLock","getModifierState","CapsLock","setState","handleKeydown","_this2","_this2$props","onKeyDown","handleToggleVisibility","prevState","focusOnInput","handleFocus","event","onFocus","handleFocusOutside","hideSymbols","renderEye","createElement","className","iconWrapper","toggleVisibility","theme","getEyeWrapperClassname","disabled","type","eyeClosedAriaLabel","eyeOpenedAriaLabel","onClick","icon","size","refInput","element","renderMain","rest","_objectWithoutPropertiesLoose","_excluded","inputProps","_extends","rightIcon","active","onFocusOutside","onClickOutside","ref","_inheritsLoose","_proto","prototype","componentDidMount","document","msCapsLockWarningOff","getDerivedStateFromProps","render","_this3","Consumer","rootNodeRef","setRootNode","eyeWrapperLarge","eyeWrapperMedium","eyeWrapperSmall","PureComponent","__KONTUR_REACT_UI__","displayName","propTypes","bool"],"sources":["PasswordInput.tsx"],"sourcesContent":["import React, { AriaAttributes } from 'react';\nimport PropTypes from 'prop-types';\nimport { globalObject, isBrowser } from '@skbkontur/global-object';\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 { 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';\nimport { PasswordInputLocale, PasswordInputLocaleHelper } from './locale';\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\ntype DefaultProps = Required<Pick<PasswordInputProps, 'size'>>;\n\n/**\n * `PasswordInput` — однострочное поле для ввода пароля, в котором символы заменяются на точки.\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    focused: false,\n    capsLockEnabled: false,\n  };\n\n  private theme!: Theme;\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      <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   * @public\n   */\n  public focus = () => {\n    if (this.input) {\n      this.input.focus();\n    }\n  };\n\n  /**\n   * @public\n   */\n  public blur = () => {\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.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 className={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 size={this.props.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    const { detectCapsLock, ...rest } = props;\n    const inputProps = {\n      ...rest,\n      onKeyDown: this.handleKeydown,\n      onKeyPress: this.handleKeyPress,\n      rightIcon: this.renderEye(),\n      onFocus: this.handleFocus,\n    };\n\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={styles.root()}>\n          <Input ref={this.refInput} type={this.state.visible ? 'text' : 'password'} {...inputProps} />\n        </div>\n      </RenderLayer>\n    );\n  };\n}\n"],"mappings":"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","ignoreList":[]}

package/components/PasswordInput/PasswordInput.d.ts

@@ -2,12 +2,13 @@ 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 {
+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: {
@@ -38,7 +39,9 @@ export declare class PasswordInput extends React.PureComponent<PasswordInputProp
     private setRootNode;
     private readonly locale;
     componentDidMount(): void;
-    static getDerivedStateFromProps(props: PasswordInputProps, state: PasswordInputState): PasswordInputState;
+    static getDerivedStateFromProps(props: PasswordInputProps, state: PasswordInputState): PasswordInputState | {
+        visible: boolean;
+    };
     render(): React.JSX.Element;
     /**
      * @public
@@ -51,8 +54,9 @@ export declare class PasswordInput extends React.PureComponent<PasswordInputProp
     private handleKeyPress;
     private handleKeydown;
     private handleToggleVisibility;
+    private focusOnInput;
     private handleFocus;
-    private handleBlur;
+    private handleFocusOutside;
     private getEyeWrapperClassname;
     private renderEye;
     private refInput;

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

@@ -3,7 +3,7 @@ var _templateObject, _templateObject2, _templateObject3, _templateObject4, _temp
 import { css, memoizeStyle } from "../../../lib/theming/Emotion";
 export var styles = memoizeStyle({
   root: function root() {
-    return 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    "])));
+    return css(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\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 toggleVisibility(t) {
     return 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);

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

@@ -1 +1 @@
-{"version":3,"names":["css","memoizeStyle","styles","root","_templateObject","_taggedTemplateLiteralLoose","toggleVisibility","t","_templateObject2","passwordInputVisibilityIconColor","passwordInputVisibilityIconOpacity","passwordInputVisibilityIconHoverColor","passwordInputVisibilityIconHoverOpacity","capsLockDetector","_templateObject3","iconWrapper","_templateObject4","eyeWrapperSmall","_templateObject5","inputIconSizeSmall","eyeWrapperMedium","_templateObject6","inputIconSizeMedium","eyeWrapperLarge","_templateObject7","inputIconSizeLarge","icon","_templateObject8"],"sources":["PasswordInput.styles.ts"],"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  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"],"mappings":";AACA,SAASA,GAAG,EAAEC,YAAY,QAAQ,2BAA2B;;AAE7D,OAAO,IAAMC,MAAM,GAAGD,YAAY,CAAC;EACjCE,IAAI,WAAAA,KAAA,EAAG;IACL,OAAOH,GAAG,CAAAI,eAAA,KAAAA,eAAA,GAAAC,2BAAA;;;;;;;;;;EAUZ,CAAC;EACDC,gBAAgB,WAAAA,iBAACC,CAAQ,EAAE;IACzB,OAAOP,GAAG,CAAAQ,gBAAA,KAAAA,gBAAA,GAAAH,2BAAA;IACCE,CAAC,CAACE,gCAAgC;;IAEhCF,CAAC,CAACG,kCAAkC;;;;IAIpCH,CAAC,CAACI,qCAAqC;IACrCJ,CAAC,CAACK,uCAAuC;;;EAG1D,CAAC;EACDC,gBAAgB,WAAAA,iBAAA,EAAG;IACjB,OAAOb,GAAG,CAAAc,gBAAA,KAAAA,gBAAA,GAAAT,2BAAA;;;;;;;;;;;;;;;;;EAiBZ,CAAC;EACDU,WAAW,WAAAA,YAAA,EAAG;IACZ,OAAOf,GAAG,CAAAgB,gBAAA,KAAAA,gBAAA,GAAAX,2BAAA;;;;;EAKZ,CAAC;;EAEDY,eAAe,WAAAA,gBAACV,CAAQ,EAAE;IACxB,OAAOP,GAAG,CAAAkB,gBAAA,KAAAA,gBAAA,GAAAb,2BAAA;IACKE,CAAC,CAACY,kBAAkB;;EAErC,CAAC;;EAEDC,gBAAgB,WAAAA,iBAACb,CAAQ,EAAE;IACzB,OAAOP,GAAG,CAAAqB,gBAAA,KAAAA,gBAAA,GAAAhB,2BAAA;IACKE,CAAC,CAACe,mBAAmB;;EAEtC,CAAC;;EAEDC,eAAe,WAAAA,gBAAChB,CAAQ,EAAE;IACxB,OAAOP,GAAG,CAAAwB,gBAAA,KAAAA,gBAAA,GAAAnB,2BAAA;IACKE,CAAC,CAACkB,kBAAkB;;EAErC,CAAC;EACDC,IAAI,WAAAA,KAAA,EAAG;IACL,OAAO1B,GAAG,CAAA2B,gBAAA,KAAAA,gBAAA,GAAAtB,2BAAA;;;;;;;;EAQZ;AACF,CAAC,CAAC","ignoreList":[]}
+{"version":3,"names":["css","memoizeStyle","styles","root","_templateObject","_taggedTemplateLiteralLoose","toggleVisibility","t","_templateObject2","passwordInputVisibilityIconColor","passwordInputVisibilityIconOpacity","passwordInputVisibilityIconHoverColor","passwordInputVisibilityIconHoverOpacity","capsLockDetector","_templateObject3","iconWrapper","_templateObject4","eyeWrapperSmall","_templateObject5","inputIconSizeSmall","eyeWrapperMedium","_templateObject6","inputIconSizeMedium","eyeWrapperLarge","_templateObject7","inputIconSizeLarge","icon","_templateObject8"],"sources":["PasswordInput.styles.ts"],"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      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"],"mappings":";AACA,SAASA,GAAG,EAAEC,YAAY,QAAQ,2BAA2B;;AAE7D,OAAO,IAAMC,MAAM,GAAGD,YAAY,CAAC;EACjCE,IAAI,WAAAA,KAAA,EAAG;IACL,OAAOH,GAAG,CAAAI,eAAA,KAAAA,eAAA,GAAAC,2BAAA;;;;;;;;;;;EAWZ,CAAC;EACDC,gBAAgB,WAAAA,iBAACC,CAAQ,EAAE;IACzB,OAAOP,GAAG,CAAAQ,gBAAA,KAAAA,gBAAA,GAAAH,2BAAA;IACCE,CAAC,CAACE,gCAAgC;;IAEhCF,CAAC,CAACG,kCAAkC;;;;IAIpCH,CAAC,CAACI,qCAAqC;IACrCJ,CAAC,CAACK,uCAAuC;;;EAG1D,CAAC;EACDC,gBAAgB,WAAAA,iBAAA,EAAG;IACjB,OAAOb,GAAG,CAAAc,gBAAA,KAAAA,gBAAA,GAAAT,2BAAA;;;;;;;;;;;;;;;;;EAiBZ,CAAC;EACDU,WAAW,WAAAA,YAAA,EAAG;IACZ,OAAOf,GAAG,CAAAgB,gBAAA,KAAAA,gBAAA,GAAAX,2BAAA;;;;;EAKZ,CAAC;;EAEDY,eAAe,WAAAA,gBAACV,CAAQ,EAAE;IACxB,OAAOP,GAAG,CAAAkB,gBAAA,KAAAA,gBAAA,GAAAb,2BAAA;IACKE,CAAC,CAACY,kBAAkB;;EAErC,CAAC;;EAEDC,gBAAgB,WAAAA,iBAACb,CAAQ,EAAE;IACzB,OAAOP,GAAG,CAAAqB,gBAAA,KAAAA,gBAAA,GAAAhB,2BAAA;IACKE,CAAC,CAACe,mBAAmB;;EAEtC,CAAC;;EAEDC,eAAe,WAAAA,gBAAChB,CAAQ,EAAE;IACxB,OAAOP,GAAG,CAAAwB,gBAAA,KAAAA,gBAAA,GAAAnB,2BAAA;IACKE,CAAC,CAACkB,kBAAkB;;EAErC,CAAC;EACDC,IAAI,WAAAA,KAAA,EAAG;IACL,OAAO1B,GAAG,CAAA2B,gBAAA,KAAAA,gBAAA,GAAAtB,2BAAA;;;;;;;;EAQZ;AACF,CAAC,CAAC","ignoreList":[]}