@skbkontur/react-ui 0.0.0-627b6e869c → 0.0.0-69a6fa606f

package/cjs/components/Group/Group.js

@@ -1,23 +1,81 @@
-"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");exports.__esModule = true;exports.Group = void 0;var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));var _react = _interopRequireDefault(require("react"));
+"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");exports.__esModule = true;exports.GroupDataTids = exports.Group = void 0;var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _client = require("../../lib/client");
-var _Corners = require("../Button/Corners");
-
 var _Button = require("../Button");
 var _CommonWrapper = require("../../internal/CommonWrapper");
 var _Emotion = require("../../lib/theming/Emotion");
 var _rootNode = require("../../lib/rootNode");
 
-var _Group = require("./Group.styles");var _class, _class2, _temp;var
+var _Group = require("./Group.styles");var _class, _class2, _temp;
+
+
+
+
+
+
+
+
+
+
+var getFirstChild = function getFirstChild(children) {
+  if (!Array.isArray(children)) {
+    return children;
+  }
+
+  return children == null ? void 0 : children[0];
+};
+
+var getLastChild = function getLastChild(children) {
+  if (!Array.isArray(children)) {
+    return children;
+  }
+
+  var numberOfChildren = _react.default.Children.count(children);
 
+  return children == null ? void 0 : children[numberOfChildren - 1];
+};
 
+var getButtonCorners = function getButtonCorners(
+child,
+firstChild,
+lastChild)
+{
+  if (firstChild === lastChild) {
+    return {};
+  }
 
+  if (child === firstChild) {
+    return {
+      borderTopRightRadius: 0,
+      borderBottomRightRadius: 0 };
 
+  }
 
+  if (child === lastChild) {
+    return {
+      borderTopLeftRadius: 0,
+      borderBottomLeftRadius: 0 };
 
+  }
 
+  return {
+    borderRadius: 0 };
 
+};
+
+var passCornersIfButton = function passCornersIfButton(child, firstChild, lastChild) {
+  if ((0, _Button.isButton)(child)) {
+    var corners = getButtonCorners(child, firstChild, lastChild);
+
+    return /*#__PURE__*/_react.default.cloneElement(child, { corners: corners });
+  }
+
+  return child;
+};
+
+var GroupDataTids = {
+  root: 'Group__root' };exports.GroupDataTids = GroupDataTids;var
 
 
 
@@ -34,51 +92,40 @@ Group = (0, _rootNode.rootNode)(_class = (_temp = _class2 = /*#__PURE__*/functio
       width: this.props.width };
 
 
-    var first = null;
-    var last = null;
-
-    _react.default.Children.forEach(this.props.children, function (child) {
-      if (child && /*#__PURE__*/_react.default.isValidElement(child)) {
-        first = first || child;
-        last = child;
-      }
-    });
+    var childrenArray = _react.default.Children.toArray(this.props.children);
+    var firstChild = getFirstChild(childrenArray);
+    var lastChild = getLastChild(childrenArray);
 
     return /*#__PURE__*/(
       _react.default.createElement(_CommonWrapper.CommonWrapper, (0, _extends2.default)({ rootNodeRef: this.setRootNode }, this.props), /*#__PURE__*/
-      _react.default.createElement("span", { className: _Group.styles.root(), style: style },
-      _react.default.Children.map(this.props.children, function (child) {var _cx, _cx2;
+      _react.default.createElement("span", { "data-tid": GroupDataTids.root, className: _Group.styles.root(), style: style },
+      _react.default.Children.map(childrenArray, function (child) {var _cx, _cx2;
         if (!child || ! /*#__PURE__*/_react.default.isValidElement(child)) {
           return null;
         }
 
         var isWidthInPercent = Boolean(child.props.width && child.props.width.toString().includes('%'));
-        var itemCss = (0, _Emotion.cx)((_cx = {}, _cx[
-        _Group.styles.item()] = true, _cx[
-        _Group.styles.itemFirst()] = child === first, _cx));
 
+        var modifiedChild = passCornersIfButton(child, firstChild, lastChild);
 
-        var corners = 0;
-        if (child !== first) {
-          corners |= _Corners.Corners.TOP_LEFT | _Corners.Corners.BOTTOM_LEFT;
-        }
-        if (child !== last) {
-          corners |= _Corners.Corners.TOP_RIGHT | _Corners.Corners.BOTTOM_RIGHT;
-        }
-
-        if ((0, _Button.isButton)(child)) {
-          child = /*#__PURE__*/_react.default.cloneElement(child, { corners: corners });
-        }
+        var isFirstChild = child === firstChild;
 
         return /*#__PURE__*/(
+          _react.default.createElement("div", {
+            className: (0, _Emotion.cx)((_cx = {}, _cx[
+            _Group.styles.fixed()] = !isWidthInPercent, _cx[
+            _Group.styles.stretch()] = isWidthInPercent, _cx[
+            _Group.styles.stretchFallback()] = Boolean(isWidthInPercent && _this.props.width && (_client.isIE11 || _client.isEdge)), _cx)) }, /*#__PURE__*/
+
+
           _react.default.createElement("div", {
             className: (0, _Emotion.cx)((_cx2 = {}, _cx2[
-            _Group.styles.fixed()] = !isWidthInPercent, _cx2[
-            _Group.styles.stretch()] = isWidthInPercent, _cx2[
-            _Group.styles.stretchFallback()] = Boolean(isWidthInPercent && _this.props.width && (_client.isIE11 || _client.isEdge)), _cx2)) }, /*#__PURE__*/
+            _Group.styles.item()] = true, _cx2[
+            _Group.styles.itemFirst()] = isFirstChild, _cx2)) },
+
 
+          modifiedChild)));
 
-          _react.default.createElement("div", { className: itemCss }, child)));
 
 
       }))));

package/cjs/components/Group/Group.js.map

@@ -1 +1 @@
-{"version":3,"sources":["Group.tsx"],"names":["Group","rootNode","render","style","width","props","first","last","React","Children","forEach","children","child","isValidElement","setRootNode","styles","root","map","isWidthInPercent","Boolean","toString","includes","itemCss","item","itemFirst","corners","Corners","TOP_LEFT","BOTTOM_LEFT","TOP_RIGHT","BOTTOM_RIGHT","cloneElement","fixed","stretch","stretchFallback","isIE11","isEdge","Component","__KONTUR_REACT_UI__","propTypes","PropTypes","oneOfType","number","string"],"mappings":"mUAAA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;AACA;;AAEA,uC;;;;;;;;;;;;AAYaA,K,OADZC,kB;;;;;;;;AASQC,EAAAA,M,GAAP,kBAAgB;AACd,QAAMC,KAA0B,GAAG;AACjCC,MAAAA,KAAK,EAAE,KAAKC,KAAL,CAAWD,KADe,EAAnC;;;AAIA,QAAIE,KAAwC,GAAG,IAA/C;AACA,QAAIC,IAAuC,GAAG,IAA9C;;AAEAC,mBAAMC,QAAN,CAAeC,OAAf,CAAuB,KAAKL,KAAL,CAAWM,QAAlC,EAA4C,UAACC,KAAD,EAAW;AACrD,UAAIA,KAAK,iBAAIJ,eAAMK,cAAN,CAAqBD,KAArB,CAAb,EAA0C;AACxCN,QAAAA,KAAK,GAAGA,KAAK,IAAIM,KAAjB;AACAL,QAAAA,IAAI,GAAGK,KAAP;AACD;AACF,KALD;;AAOA;AACE,mCAAC,4BAAD,2BAAe,WAAW,EAAE,KAAKE,WAAjC,IAAkD,KAAKT,KAAvD;AACE,6CAAM,SAAS,EAAEU,cAAOC,IAAP,EAAjB,EAAgC,KAAK,EAAEb,KAAvC;AACGK,qBAAMC,QAAN,CAAeQ,GAAf,CAAmB,KAAKZ,KAAL,CAAWM,QAA9B,EAAwC,UAACC,KAAD,EAAW;AAClD,YAAI,CAACA,KAAD,IAAU,eAACJ,eAAMK,cAAN,CAAsCD,KAAtC,CAAf,EAA6D;AAC3D,iBAAO,IAAP;AACD;;AAED,YAAMM,gBAAgB,GAAGC,OAAO,CAACP,KAAK,CAACP,KAAN,CAAYD,KAAZ,IAAqBQ,KAAK,CAACP,KAAN,CAAYD,KAAZ,CAAkBgB,QAAlB,GAA6BC,QAA7B,CAAsC,GAAtC,CAAtB,CAAhC;AACA,YAAMC,OAAO,GAAG;AACbP,sBAAOQ,IAAP,EADa,IACG,IADH;AAEbR,sBAAOS,SAAP,EAFa,IAEQZ,KAAK,KAAKN,KAFlB,OAAhB;;;AAKA,YAAImB,OAAO,GAAG,CAAd;AACA,YAAIb,KAAK,KAAKN,KAAd,EAAqB;AACnBmB,UAAAA,OAAO,IAAIC,iBAAQC,QAAR,GAAmBD,iBAAQE,WAAtC;AACD;AACD,YAAIhB,KAAK,KAAKL,IAAd,EAAoB;AAClBkB,UAAAA,OAAO,IAAIC,iBAAQG,SAAR,GAAoBH,iBAAQI,YAAvC;AACD;;AAED,YAAI,sBAASlB,KAAT,CAAJ,EAAqB;AACnBA,UAAAA,KAAK,gBAAGJ,eAAMuB,YAAN,CAAmBnB,KAAnB,EAA0B,EAAEa,OAAO,EAAPA,OAAF,EAA1B,CAAR;AACD;;AAED;AACE;AACE,YAAA,SAAS,EAAE;AACRV,0BAAOiB,KAAP,EADQ,IACS,CAACd,gBADV;AAERH,0BAAOkB,OAAP,EAFQ,IAEWf,gBAFX;AAGRH,0BAAOmB,eAAP,EAHQ,IAGmBf,OAAO,CAACD,gBAAgB,IAAI,KAAI,CAACb,KAAL,CAAWD,KAA/B,KAAyC+B,kBAAUC,cAAnD,CAAD,CAH1B,QADb;;;AAOE,gDAAK,SAAS,EAAEd,OAAhB,IAA0BV,KAA1B,CAPF,CADF;;;AAWD,OAlCA,CADH,CADF,CADF;;;;AAyCD,G,gBAhEwBJ,eAAM6B,S,WACjBC,mB,GAAsB,O,UAGtBC,S,GAAY,EACxBnC,KAAK,EAAEoC,mBAAUC,SAAV,CAAoB,CAACD,mBAAUE,MAAX,EAAmBF,mBAAUG,MAA7B,CAApB,CADiB,E","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\n\nimport { isIE11, isEdge } from '../../lib/client';\nimport { Corners } from '../Button/Corners';\nimport { Nullable } from '../../typings/utility-types';\nimport { isButton } from '../Button';\nimport { CommonWrapper, CommonProps } from '../../internal/CommonWrapper';\nimport { cx } from '../../lib/theming/Emotion';\nimport { rootNode, TSetRootNode } from '../../lib/rootNode';\n\nimport { styles } from './Group.styles';\n\nexport interface GroupProps extends CommonProps {\n  width?: React.CSSProperties['width'];\n}\n\ninterface GroupChildProps {\n  width?: React.CSSProperties['width'];\n  corners?: number;\n}\n\n@rootNode\nexport class Group extends React.Component<GroupProps> {\n  public static __KONTUR_REACT_UI__ = 'Group';\n  private setRootNode!: TSetRootNode;\n\n  public static propTypes = {\n    width: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),\n  };\n\n  public render() {\n    const style: React.CSSProperties = {\n      width: this.props.width,\n    };\n\n    let first: Nullable<React.ReactElement<any>> = null;\n    let last: Nullable<React.ReactElement<any>> = null;\n\n    React.Children.forEach(this.props.children, (child) => {\n      if (child && React.isValidElement(child)) {\n        first = first || child;\n        last = child;\n      }\n    });\n\n    return (\n      <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>\n        <span className={styles.root()} style={style}>\n          {React.Children.map(this.props.children, (child) => {\n            if (!child || !React.isValidElement<GroupChildProps>(child)) {\n              return null;\n            }\n\n            const isWidthInPercent = Boolean(child.props.width && child.props.width.toString().includes('%'));\n            const itemCss = cx({\n              [styles.item()]: true,\n              [styles.itemFirst()]: child === first,\n            });\n\n            let corners = 0;\n            if (child !== first) {\n              corners |= Corners.TOP_LEFT | Corners.BOTTOM_LEFT;\n            }\n            if (child !== last) {\n              corners |= Corners.TOP_RIGHT | Corners.BOTTOM_RIGHT;\n            }\n\n            if (isButton(child)) {\n              child = React.cloneElement(child, { corners });\n            }\n\n            return (\n              <div\n                className={cx({\n                  [styles.fixed()]: !isWidthInPercent,\n                  [styles.stretch()]: isWidthInPercent,\n                  [styles.stretchFallback()]: Boolean(isWidthInPercent && this.props.width && (isIE11 || isEdge)),\n                })}\n              >\n                <div className={itemCss}>{child}</div>\n              </div>\n            );\n          })}\n        </span>\n      </CommonWrapper>\n    );\n  }\n}\n"]}
+{"version":3,"sources":["Group.tsx"],"names":["getFirstChild","children","Array","isArray","getLastChild","numberOfChildren","React","Children","count","getButtonCorners","child","firstChild","lastChild","borderTopRightRadius","borderBottomRightRadius","borderTopLeftRadius","borderBottomLeftRadius","borderRadius","passCornersIfButton","corners","cloneElement","GroupDataTids","root","Group","rootNode","render","style","width","props","childrenArray","toArray","setRootNode","styles","map","isValidElement","isWidthInPercent","Boolean","toString","includes","modifiedChild","isFirstChild","fixed","stretch","stretchFallback","isIE11","isEdge","item","itemFirst","Component","__KONTUR_REACT_UI__","propTypes","PropTypes","oneOfType","number","string"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\n\nimport { isIE11, isEdge } from '../../lib/client';\nimport { isButton } from '../Button';\nimport { CommonWrapper, CommonProps } from '../../internal/CommonWrapper';\nimport { cx } from '../../lib/theming/Emotion';\nimport { rootNode, TSetRootNode } from '../../lib/rootNode';\n\nimport { styles } from './Group.styles';\n\nexport interface GroupProps extends CommonProps {\n  width?: React.CSSProperties['width'];\n}\n\ninterface GroupChildProps {\n  width?: React.CSSProperties['width'];\n  corners?: number;\n}\n\nconst getFirstChild = (children: React.ReactNode) => {\n  if (!Array.isArray(children)) {\n    return children;\n  }\n\n  return children?.[0] as React.ReactNode;\n};\n\nconst getLastChild = (children: React.ReactNode) => {\n  if (!Array.isArray(children)) {\n    return children;\n  }\n\n  const numberOfChildren = React.Children.count(children);\n\n  return children?.[numberOfChildren - 1] as React.ReactNode;\n};\n\nconst getButtonCorners = (\n  child: React.ReactNode,\n  firstChild: React.ReactNode,\n  lastChild: React.ReactNode,\n): React.CSSProperties => {\n  if (firstChild === lastChild) {\n    return {};\n  }\n\n  if (child === firstChild) {\n    return {\n      borderTopRightRadius: 0,\n      borderBottomRightRadius: 0,\n    };\n  }\n\n  if (child === lastChild) {\n    return {\n      borderTopLeftRadius: 0,\n      borderBottomLeftRadius: 0,\n    };\n  }\n\n  return {\n    borderRadius: 0,\n  };\n};\n\nconst passCornersIfButton = (child: React.ReactNode, firstChild: React.ReactNode, lastChild: React.ReactNode) => {\n  if (isButton(child)) {\n    const corners = getButtonCorners(child, firstChild, lastChild);\n\n    return React.cloneElement(child, { corners });\n  }\n\n  return child;\n};\n\nexport const GroupDataTids = {\n  root: 'Group__root',\n} as const;\n\n@rootNode\nexport class Group extends React.Component<GroupProps> {\n  public static __KONTUR_REACT_UI__ = 'Group';\n  private setRootNode!: TSetRootNode;\n\n  public static propTypes = {\n    width: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),\n  };\n\n  public render() {\n    const style: React.CSSProperties = {\n      width: this.props.width,\n    };\n\n    const childrenArray = React.Children.toArray(this.props.children);\n    const firstChild = getFirstChild(childrenArray);\n    const lastChild = getLastChild(childrenArray);\n\n    return (\n      <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>\n        <span data-tid={GroupDataTids.root} className={styles.root()} style={style}>\n          {React.Children.map(childrenArray, (child) => {\n            if (!child || !React.isValidElement<GroupChildProps>(child)) {\n              return null;\n            }\n\n            const isWidthInPercent = Boolean(child.props.width && child.props.width.toString().includes('%'));\n\n            const modifiedChild = passCornersIfButton(child, firstChild, lastChild);\n\n            const isFirstChild = child === firstChild;\n\n            return (\n              <div\n                className={cx({\n                  [styles.fixed()]: !isWidthInPercent,\n                  [styles.stretch()]: isWidthInPercent,\n                  [styles.stretchFallback()]: Boolean(isWidthInPercent && this.props.width && (isIE11 || isEdge)),\n                })}\n              >\n                <div\n                  className={cx({\n                    [styles.item()]: true,\n                    [styles.itemFirst()]: isFirstChild,\n                  })}\n                >\n                  {modifiedChild}\n                </div>\n              </div>\n            );\n          })}\n        </span>\n      </CommonWrapper>\n    );\n  }\n}\n"]}

package/cjs/components/Hint/Hint.d.ts

@@ -1,7 +1,9 @@
 import React from 'react';
 import { PopupPositionsType } from '../../internal/Popup';
+import { Nullable } from '../../typings/utility-types';
 import { MouseEventType } from '../../typings/event-types';
 import { CommonProps } from '../../internal/CommonWrapper';
+import { InstanceWithAnchorElement } from '../../lib/InstanceWithAnchorElement';
 export interface HintProps extends CommonProps {
     children?: React.ReactNode;
     /**
@@ -55,7 +57,7 @@ export interface HintState {
 /**
  * Всплывающая подсказка, которая по умолчанию отображается при наведении на элемент. <br/> Можно задать другие условия отображения.
  */
-export declare class Hint extends React.PureComponent<HintProps, HintState> {
+export declare class Hint extends React.PureComponent<HintProps, HintState> implements InstanceWithAnchorElement {
     static __KONTUR_REACT_UI__: string;
     private isMobileLayout;
     static defaultProps: {
@@ -76,6 +78,7 @@ export declare class Hint extends React.PureComponent<HintProps, HintState> {
     render(): JSX.Element;
     renderMobile(): JSX.Element;
     renderMain(): JSX.Element;
+    getAnchorElement: () => Nullable<HTMLElement>;
     private renderContent;
     private getPositions;
     private handleMouseEnter;

package/cjs/components/Hint/Hint.js

@@ -12,6 +12,7 @@ var _Emotion = require("../../lib/theming/Emotion");
 var _decorator = require("../ResponsiveLayout/decorator");
 var _rootNode = require("../../lib/rootNode");
 
+
 var _Hint = require("./Hint.styles");var _class, _class2, _temp;
 
 var HINT_BORDER_COLOR = 'transparent';
@@ -194,6 +195,10 @@ Hint = (0, _decorator.responsiveLayout)(_class = (0, _rootNode.rootNode)(_class
 
 
 
+
+    getAnchorElement = function () {var _this$popupRef$curren;
+      return (_this$popupRef$curren = _this.popupRef.current) == null ? void 0 : _this$popupRef$curren.anchorElement;
+    };_this.
 
 
 

package/cjs/components/Hint/Hint.js.map

@@ -1 +1 @@
-{"version":3,"sources":["Hint.tsx"],"names":["HINT_BORDER_COLOR","Positions","Hint","responsiveLayout","rootNode","state","opened","props","manual","timer","popupRef","React","createRef","getPositions","filter","x","startsWith","pos","handleMouseEnter","e","window","setTimeout","open","onMouseEnter","handleMouseLeave","clearTimeout","setState","onMouseLeave","close","componentDidUpdate","prevProps","componentWillUnmount","render","theme","ThemeFactory","create","popupPinOffset","hintPinOffset","popupMargin","hintMargin","popupBorder","hintBorder","popupBorderRadius","hintBorderRadius","isMobileLayout","renderMobile","renderMain","children","undefined","renderContent","setRootNode","hintBgColor","disableAnimations","useWrapper","text","maxWidth","className","styles","content","contentCenter","mobileContent","PureComponent","__KONTUR_REACT_UI__","defaultProps","isTestEnv"],"mappings":"kUAAA;;AAEA;AACA;;AAEA;;;AAGA;AACA;AACA;AACA;AACA;;AAEA,qC;;AAEA,IAAMA,iBAAiB,GAAG,aAA1B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAsDA,IAAMC,SAA+B,GAAG;AACtC,YADsC;AAEtC,UAFsC;AAGtC,WAHsC;AAItC,eAJsC;AAKtC,aALsC;AAMtC,cANsC;AAOtC,aAPsC;AAQtC,UARsC;AAStC,aATsC;AAUtC,cAVsC;AAWtC,WAXsC;AAYtC,cAZsC,CAAxC;;;AAeA;AACA;AACA,G;;;AAGaC,I,OAFZC,2B,eACAC,kB;;;;;;;;;;;;;;AAeQC,IAAAA,K,GAAmB;AACxBC,MAAAA,MAAM,EAAE,MAAKC,KAAL,CAAWC,MAAX,GAAoB,CAAC,CAAC,MAAKD,KAAL,CAAWD,MAAjC,GAA0C,KAD1B,E;;;AAIlBG,IAAAA,K,GAA0B,I;;;;AAI1BC,IAAAA,Q,gBAAWC,eAAMC,SAAN,E;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAuGXC,IAAAA,Y,GAAe,YAA4B;AACjD,aAAOZ,SAAS,CAACa,MAAV,CAAiB,UAACC,CAAD,UAAOA,CAAC,CAACC,UAAF,CAAa,MAAKT,KAAL,CAAWU,GAAxB,CAAP,EAAjB,CAAP;AACD,K;;AAEOC,IAAAA,gB,GAAmB,UAACC,CAAD,EAAuB;AAChD,UAAI,CAAC,MAAKZ,KAAL,CAAWC,MAAZ,IAAsB,CAAC,MAAKC,KAAhC,EAAuC;AACrC,cAAKA,KAAL,GAAaW,MAAM,CAACC,UAAP,CAAkB,MAAKC,IAAvB,EAA6B,GAA7B,CAAb;AACD;;AAED,UAAI,MAAKf,KAAL,CAAWgB,YAAf,EAA6B;AAC3B,cAAKhB,KAAL,CAAWgB,YAAX,CAAwBJ,CAAxB;AACD;AACF,K;;AAEOK,IAAAA,gB,GAAmB,UAACL,CAAD,EAAuB;AAChD,UAAI,CAAC,MAAKZ,KAAL,CAAWC,MAAZ,IAAsB,MAAKC,KAA/B,EAAsC;AACpCgB,QAAAA,YAAY,CAAC,MAAKhB,KAAN,CAAZ;AACA,cAAKA,KAAL,GAAa,IAAb;AACA,cAAKiB,QAAL,CAAc,EAAEpB,MAAM,EAAE,KAAV,EAAd;AACD;;AAED,UAAI,MAAKC,KAAL,CAAWoB,YAAf,EAA6B;AAC3B,cAAKpB,KAAL,CAAWoB,YAAX,CAAwBR,CAAxB;AACD;AACF,K;;AAEOS,IAAAA,K,GAAQ,YAAM;AACpB,YAAKF,QAAL,CAAc,EAAEpB,MAAM,EAAE,KAAV,EAAd;AACD,K;;AAEOgB,IAAAA,I,GAAO,YAAM;AACnB,YAAKI,QAAL,CAAc,EAAEpB,MAAM,EAAE,IAAV,EAAd;AACD,K,kDArIMuB,kB,GAAP,4BAA0BC,SAA1B,EAAgD,CAC9C,IAAI,CAAC,KAAKvB,KAAL,CAAWC,MAAhB,EAAwB,CACtB,OACD,CACD,IAAI,KAAKC,KAAT,EAAgB,CACdgB,YAAY,CAAC,KAAKhB,KAAN,CAAZ,CACA,KAAKA,KAAL,GAAa,IAAb,CACD,CACD,IAAI,KAAKF,KAAL,CAAWD,MAAX,KAAsBwB,SAAS,CAACxB,MAApC,EAA4C,CAC1C,KAAKoB,QAAL,CAAc,EAAEpB,MAAM,EAAE,CAAC,CAAC,KAAKC,KAAL,CAAWD,MAAvB,EAAd,EACD,CACF,C,QAEMyB,oB,GAAP,gCAA8B,CAC5B,IAAI,KAAKtB,KAAT,EAAgB,CACdgB,YAAY,CAAC,KAAKhB,KAAN,CAAZ,CACA,KAAKA,KAAL,GAAa,IAAb,CACD,CACF,C,QAEMuB,M,GAAP,kBAAgB,mBACd,oBACE,6BAAC,0BAAD,CAAc,QAAd,QACG,UAACC,KAAD,EAAW,CACV,MAAI,CAACA,KAAL,GAAaA,KAAb,CACA,oBACE,6BAAC,0BAAD,CAAc,QAAd,IACE,KAAK,EAAEC,2BAAaC,MAAb,CACL,EACEC,cAAc,EAAEH,KAAK,CAACI,aADxB,EAEEC,WAAW,EAAEL,KAAK,CAACM,UAFrB,EAGEC,WAAW,EAAEP,KAAK,CAACQ,UAHrB,EAIEC,iBAAiB,EAAET,KAAK,CAACU,gBAJ3B,EADK,EAOL,MAAI,CAACV,KAPA,CADT,IAWG,MAAI,CAACW,cAAL,GAAsB,MAAI,CAACC,YAAL,EAAtB,GAA4C,MAAI,CAACC,UAAL,EAX/C,CADF,CAeD,CAlBH,CADF,CAsBD,C,QAEMD,Y,GAAP,wBAAsB,CACpB,oBACE,6BAAC,4BAAD,EAAmB,KAAKtC,KAAxB,eACE,6BAAC,YAAD,IACE,MAAM,EAAE,KAAKF,KAAL,CAAWC,MADrB,EAEE,aAAa,EAAE,KAAKC,KAAL,CAAWwC,QAF5B,EAGE,SAAS,EAAE,EAHb,EAIE,OAAO,EAAE,CAAC,KAAKxC,KAAL,CAAWC,MAAZ,GAAqB,KAAKc,IAA1B,GAAiC0B,SAJ5C,EAKE,oBAAoB,EAAE,CAAC,KAAKzC,KAAL,CAAWC,MAAZ,GAAqB,KAAKoB,KAA1B,GAAkCoB,SAL1D,IAOG,KAAKC,aAAL,EAPH,CADF,CADF,CAaD,C,QAEMH,U,GAAP,sBAAoB,CAClB,oBACE,6BAAC,4BAAD,2BAAe,WAAW,EAAE,KAAKI,WAAjC,IAAkD,KAAK3C,KAAvD,gBACE,6BAAC,YAAD,IACE,MAAM,MADR,EAEE,MAAM,EAAE,KAAKF,KAAL,CAAWC,MAFrB,EAGE,aAAa,EAAE,KAAKC,KAAL,CAAWwC,QAH5B,EAIE,SAAS,EAAE,KAAKlC,YAAL,EAJb,EAKE,eAAe,EAAE,KAAKoB,KAAL,CAAWkB,WAL9B,EAME,WAAW,EAAEnD,iBANf,EAOE,iBAAiB,EAAE,KAAKO,KAAL,CAAW6C,iBAPhC,EAQE,YAAY,EAAE,KAAKlC,gBARrB,EASE,YAAY,EAAE,KAAKM,gBATrB,EAUE,UAAU,EAAE,KAAKjB,KAAL,CAAW8C,UAVzB,EAWE,GAAG,EAAE,KAAK3C,QAXZ,IAaG,KAAKuC,aAAL,EAbH,CADF,CADF,CAmBD,C,QAEOA,a,GAAR,yBAAwB,SACtB,IAAI,CAAC,KAAK1C,KAAL,CAAW+C,IAAhB,EAAsB,CACpB,OAAO,IAAP,CACD,CAED,kBAA0B,KAAK/C,KAA/B,CAAQU,GAAR,eAAQA,GAAR,CAAasC,QAAb,eAAaA,QAAb,CACA,IAAMC,SAAS,GAAG,gCACfC,aAAOC,OAAP,CAAe,KAAKzB,KAApB,CADe,IACc,IADd,MAEfwB,aAAOE,aAAP,CAAqB,KAAK1B,KAA1B,CAFe,IAEoBhB,GAAG,KAAK,KAAR,IAAiBA,GAAG,KAAK,QAF7C,MAGfwC,aAAOG,aAAP,CAAqB,KAAK3B,KAA1B,CAHe,IAGoB,KAAKW,cAHzB,OAAlB,CAKA,oBACE,sCAAK,SAAS,EAAEY,SAAhB,EAA2B,KAAK,EAAE,EAAED,QAAQ,EAAE,KAAKX,cAAL,GAAsB,MAAtB,GAA+BW,QAA3C,EAAlC,IACG,KAAKhD,KAAL,CAAW+C,IADd,CADF,CAKD,C,eA3HuB3C,eAAMkD,a,WAChBC,mB,GAAsB,M,UAItBC,Y,GAAe,EAC3B9C,GAAG,EAAE,KADsB,EAE3BT,MAAM,EAAE,KAFmB,EAG3BF,MAAM,EAAE,KAHmB,EAI3BiD,QAAQ,EAAE,GAJiB,EAK3BH,iBAAiB,EAAEY,6BALQ,EAM3BX,UAAU,EAAE,KANe,E","sourcesContent":["import React from 'react';\n\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { ThemeFactory } from '../../lib/theming/ThemeFactory';\nimport { Theme } from '../../lib/theming/Theme';\nimport { Popup, PopupPositionsType } from '../../internal/Popup';\nimport { Nullable } from '../../typings/utility-types';\nimport { MouseEventType } from '../../typings/event-types';\nimport { isTestEnv } from '../../lib/currentEnvironment';\nimport { CommonWrapper, CommonProps } from '../../internal/CommonWrapper';\nimport { cx } from '../../lib/theming/Emotion';\nimport { responsiveLayout } from '../ResponsiveLayout/decorator';\nimport { rootNode, TSetRootNode } from '../../lib/rootNode';\n\nimport { styles } from './Hint.styles';\n\nconst HINT_BORDER_COLOR = 'transparent';\n\nexport interface HintProps extends CommonProps {\n  children?: React.ReactNode;\n  /**\n   * Переводит отображение подсказки в _\"ручной режим\"_.\n   *\n   * В _\"ручном режиме\"_ подсказку можно активировать только задав значение пропу `opened`.\n   */\n  manual?: boolean;\n  /**\n   * Задаёт максимальную ширину подсказки.\n   */\n  maxWidth?: React.CSSProperties['maxWidth'];\n  /**\n   * HTML-событие `mouseenter`.\n   */\n  onMouseEnter?: (event: MouseEventType) => void;\n  /**\n   * HTML-событие `mouseleave`.\n   */\n  onMouseLeave?: (event: MouseEventType) => void;\n  /**\n   * Если `true` - подсказка будет открыта.\n   *\n   * _Примечание_: работает только при `manual=true`.\n   */\n  opened?: boolean;\n  /**\n   * Расположение подсказки относительно текста.\n   *\n   * **Допустимые значения**: `\"top\"`, `\"right\"`, `\"bottom\"`, `\"left\"`, `\"top left\"`, `\"top center\"`, `\"top right\"`, `\"right top\"`, `\"right middle\"`, `\"right bottom\"`, `\"bottom left\"`, `\"bottom center\"`, `\"bottom right\"`, `\"left top\"`, `\"left middle\"`, `\"left bottom\"`.\n   */\n  pos: 'top' | 'right' | 'bottom' | 'left' | PopupPositionsType;\n  /**\n   * Текст подсказки.\n   */\n  text: React.ReactNode;\n  /**\n   * Отключает анимацию.\n   */\n  disableAnimations: boolean;\n  /**\n   * Явно указывает, что вложенные элементы должны быть обёрнуты в `<span/>`. <br/> Используется для корректного позиционирования тултипа при двух и более вложенных элементах.\n   *\n   * _Примечание_: при **двух и более** вложенных элементах обёртка будет добавлена автоматически.\n   */\n  useWrapper: boolean;\n}\n\nexport interface HintState {\n  opened: boolean;\n}\n\nconst Positions: PopupPositionsType[] = [\n  'top center',\n  'top left',\n  'top right',\n  'bottom center',\n  'bottom left',\n  'bottom right',\n  'left middle',\n  'left top',\n  'left bottom',\n  'right middle',\n  'right top',\n  'right bottom',\n];\n\n/**\n * Всплывающая подсказка, которая по умолчанию отображается при наведении на элемент. <br/> Можно задать другие условия отображения.\n */\n@responsiveLayout\n@rootNode\nexport class Hint extends React.PureComponent<HintProps, HintState> {\n  public static __KONTUR_REACT_UI__ = 'Hint';\n\n  private isMobileLayout!: boolean;\n\n  public static defaultProps = {\n    pos: 'top',\n    manual: false,\n    opened: false,\n    maxWidth: 200,\n    disableAnimations: isTestEnv,\n    useWrapper: false,\n  };\n\n  public state: HintState = {\n    opened: this.props.manual ? !!this.props.opened : false,\n  };\n\n  private timer: Nullable<number> = null;\n  private theme!: Theme;\n  private setRootNode!: TSetRootNode;\n\n  private popupRef = React.createRef<Popup>();\n\n  public componentDidUpdate(prevProps: HintProps) {\n    if (!this.props.manual) {\n      return;\n    }\n    if (this.timer) {\n      clearTimeout(this.timer);\n      this.timer = null;\n    }\n    if (this.props.opened !== prevProps.opened) {\n      this.setState({ opened: !!this.props.opened });\n    }\n  }\n\n  public componentWillUnmount() {\n    if (this.timer) {\n      clearTimeout(this.timer);\n      this.timer = null;\n    }\n  }\n\n  public render() {\n    return (\n      <ThemeContext.Consumer>\n        {(theme) => {\n          this.theme = theme;\n          return (\n            <ThemeContext.Provider\n              value={ThemeFactory.create(\n                {\n                  popupPinOffset: theme.hintPinOffset,\n                  popupMargin: theme.hintMargin,\n                  popupBorder: theme.hintBorder,\n                  popupBorderRadius: theme.hintBorderRadius,\n                },\n                this.theme,\n              )}\n            >\n              {this.isMobileLayout ? this.renderMobile() : this.renderMain()}\n            </ThemeContext.Provider>\n          );\n        }}\n      </ThemeContext.Consumer>\n    );\n  }\n\n  public renderMobile() {\n    return (\n      <CommonWrapper {...this.props}>\n        <Popup\n          opened={this.state.opened}\n          anchorElement={this.props.children}\n          positions={[]}\n          onClick={!this.props.manual ? this.open : undefined}\n          mobileOnCloseRequest={!this.props.manual ? this.close : undefined}\n        >\n          {this.renderContent()}\n        </Popup>\n      </CommonWrapper>\n    );\n  }\n\n  public renderMain() {\n    return (\n      <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>\n        <Popup\n          hasPin\n          opened={this.state.opened}\n          anchorElement={this.props.children}\n          positions={this.getPositions()}\n          backgroundColor={this.theme.hintBgColor}\n          borderColor={HINT_BORDER_COLOR}\n          disableAnimations={this.props.disableAnimations}\n          onMouseEnter={this.handleMouseEnter}\n          onMouseLeave={this.handleMouseLeave}\n          useWrapper={this.props.useWrapper}\n          ref={this.popupRef}\n        >\n          {this.renderContent()}\n        </Popup>\n      </CommonWrapper>\n    );\n  }\n\n  private renderContent() {\n    if (!this.props.text) {\n      return null;\n    }\n\n    const { pos, maxWidth } = this.props;\n    const className = cx({\n      [styles.content(this.theme)]: true,\n      [styles.contentCenter(this.theme)]: pos === 'top' || pos === 'bottom',\n      [styles.mobileContent(this.theme)]: this.isMobileLayout,\n    });\n    return (\n      <div className={className} style={{ maxWidth: this.isMobileLayout ? '100%' : maxWidth }}>\n        {this.props.text}\n      </div>\n    );\n  }\n\n  private getPositions = (): PopupPositionsType[] => {\n    return Positions.filter((x) => x.startsWith(this.props.pos));\n  };\n\n  private handleMouseEnter = (e: MouseEventType) => {\n    if (!this.props.manual && !this.timer) {\n      this.timer = window.setTimeout(this.open, 400);\n    }\n\n    if (this.props.onMouseEnter) {\n      this.props.onMouseEnter(e);\n    }\n  };\n\n  private handleMouseLeave = (e: MouseEventType) => {\n    if (!this.props.manual && this.timer) {\n      clearTimeout(this.timer);\n      this.timer = null;\n      this.setState({ opened: false });\n    }\n\n    if (this.props.onMouseLeave) {\n      this.props.onMouseLeave(e);\n    }\n  };\n\n  private close = () => {\n    this.setState({ opened: false });\n  };\n\n  private open = () => {\n    this.setState({ opened: true });\n  };\n}\n"]}
+{"version":3,"sources":["Hint.tsx"],"names":["HINT_BORDER_COLOR","Positions","Hint","responsiveLayout","rootNode","state","opened","props","manual","timer","popupRef","React","createRef","getAnchorElement","current","anchorElement","getPositions","filter","x","startsWith","pos","handleMouseEnter","e","window","setTimeout","open","onMouseEnter","handleMouseLeave","clearTimeout","setState","onMouseLeave","close","componentDidUpdate","prevProps","componentWillUnmount","render","theme","ThemeFactory","create","popupPinOffset","hintPinOffset","popupMargin","hintMargin","popupBorder","hintBorder","popupBorderRadius","hintBorderRadius","isMobileLayout","renderMobile","renderMain","children","undefined","renderContent","setRootNode","hintBgColor","disableAnimations","useWrapper","text","maxWidth","className","styles","content","contentCenter","mobileContent","PureComponent","__KONTUR_REACT_UI__","defaultProps","isTestEnv"],"mappings":"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","sourcesContent":["import React from 'react';\n\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { ThemeFactory } from '../../lib/theming/ThemeFactory';\nimport { Theme } from '../../lib/theming/Theme';\nimport { Popup, PopupPositionsType } from '../../internal/Popup';\nimport { Nullable } from '../../typings/utility-types';\nimport { MouseEventType } from '../../typings/event-types';\nimport { isTestEnv } from '../../lib/currentEnvironment';\nimport { CommonWrapper, CommonProps } from '../../internal/CommonWrapper';\nimport { cx } from '../../lib/theming/Emotion';\nimport { responsiveLayout } from '../ResponsiveLayout/decorator';\nimport { rootNode, TSetRootNode } from '../../lib/rootNode';\nimport { InstanceWithAnchorElement } from '../../lib/InstanceWithAnchorElement';\n\nimport { styles } from './Hint.styles';\n\nconst HINT_BORDER_COLOR = 'transparent';\n\nexport interface HintProps extends CommonProps {\n  children?: React.ReactNode;\n  /**\n   * Переводит отображение подсказки в _\"ручной режим\"_.\n   *\n   * В _\"ручном режиме\"_ подсказку можно активировать только задав значение пропу `opened`.\n   */\n  manual?: boolean;\n  /**\n   * Задаёт максимальную ширину подсказки.\n   */\n  maxWidth?: React.CSSProperties['maxWidth'];\n  /**\n   * HTML-событие `mouseenter`.\n   */\n  onMouseEnter?: (event: MouseEventType) => void;\n  /**\n   * HTML-событие `mouseleave`.\n   */\n  onMouseLeave?: (event: MouseEventType) => void;\n  /**\n   * Если `true` - подсказка будет открыта.\n   *\n   * _Примечание_: работает только при `manual=true`.\n   */\n  opened?: boolean;\n  /**\n   * Расположение подсказки относительно текста.\n   *\n   * **Допустимые значения**: `\"top\"`, `\"right\"`, `\"bottom\"`, `\"left\"`, `\"top left\"`, `\"top center\"`, `\"top right\"`, `\"right top\"`, `\"right middle\"`, `\"right bottom\"`, `\"bottom left\"`, `\"bottom center\"`, `\"bottom right\"`, `\"left top\"`, `\"left middle\"`, `\"left bottom\"`.\n   */\n  pos: 'top' | 'right' | 'bottom' | 'left' | PopupPositionsType;\n  /**\n   * Текст подсказки.\n   */\n  text: React.ReactNode;\n  /**\n   * Отключает анимацию.\n   */\n  disableAnimations: boolean;\n  /**\n   * Явно указывает, что вложенные элементы должны быть обёрнуты в `<span/>`. <br/> Используется для корректного позиционирования тултипа при двух и более вложенных элементах.\n   *\n   * _Примечание_: при **двух и более** вложенных элементах обёртка будет добавлена автоматически.\n   */\n  useWrapper: boolean;\n}\n\nexport interface HintState {\n  opened: boolean;\n}\n\nconst Positions: PopupPositionsType[] = [\n  'top center',\n  'top left',\n  'top right',\n  'bottom center',\n  'bottom left',\n  'bottom right',\n  'left middle',\n  'left top',\n  'left bottom',\n  'right middle',\n  'right top',\n  'right bottom',\n];\n\n/**\n * Всплывающая подсказка, которая по умолчанию отображается при наведении на элемент. <br/> Можно задать другие условия отображения.\n */\n@responsiveLayout\n@rootNode\nexport class Hint extends React.PureComponent<HintProps, HintState> implements InstanceWithAnchorElement {\n  public static __KONTUR_REACT_UI__ = 'Hint';\n\n  private isMobileLayout!: boolean;\n\n  public static defaultProps = {\n    pos: 'top',\n    manual: false,\n    opened: false,\n    maxWidth: 200,\n    disableAnimations: isTestEnv,\n    useWrapper: false,\n  };\n\n  public state: HintState = {\n    opened: this.props.manual ? !!this.props.opened : false,\n  };\n\n  private timer: Nullable<number> = null;\n  private theme!: Theme;\n  private setRootNode!: TSetRootNode;\n\n  private popupRef = React.createRef<Popup>();\n\n  public componentDidUpdate(prevProps: HintProps) {\n    if (!this.props.manual) {\n      return;\n    }\n    if (this.timer) {\n      clearTimeout(this.timer);\n      this.timer = null;\n    }\n    if (this.props.opened !== prevProps.opened) {\n      this.setState({ opened: !!this.props.opened });\n    }\n  }\n\n  public componentWillUnmount() {\n    if (this.timer) {\n      clearTimeout(this.timer);\n      this.timer = null;\n    }\n  }\n\n  public render() {\n    return (\n      <ThemeContext.Consumer>\n        {(theme) => {\n          this.theme = theme;\n          return (\n            <ThemeContext.Provider\n              value={ThemeFactory.create(\n                {\n                  popupPinOffset: theme.hintPinOffset,\n                  popupMargin: theme.hintMargin,\n                  popupBorder: theme.hintBorder,\n                  popupBorderRadius: theme.hintBorderRadius,\n                },\n                this.theme,\n              )}\n            >\n              {this.isMobileLayout ? this.renderMobile() : this.renderMain()}\n            </ThemeContext.Provider>\n          );\n        }}\n      </ThemeContext.Consumer>\n    );\n  }\n\n  public renderMobile() {\n    return (\n      <CommonWrapper {...this.props}>\n        <Popup\n          opened={this.state.opened}\n          anchorElement={this.props.children}\n          positions={[]}\n          onClick={!this.props.manual ? this.open : undefined}\n          mobileOnCloseRequest={!this.props.manual ? this.close : undefined}\n        >\n          {this.renderContent()}\n        </Popup>\n      </CommonWrapper>\n    );\n  }\n\n  public renderMain() {\n    return (\n      <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>\n        <Popup\n          hasPin\n          opened={this.state.opened}\n          anchorElement={this.props.children}\n          positions={this.getPositions()}\n          backgroundColor={this.theme.hintBgColor}\n          borderColor={HINT_BORDER_COLOR}\n          disableAnimations={this.props.disableAnimations}\n          onMouseEnter={this.handleMouseEnter}\n          onMouseLeave={this.handleMouseLeave}\n          useWrapper={this.props.useWrapper}\n          ref={this.popupRef}\n        >\n          {this.renderContent()}\n        </Popup>\n      </CommonWrapper>\n    );\n  }\n\n  public getAnchorElement = (): Nullable<HTMLElement> => {\n    return this.popupRef.current?.anchorElement;\n  };\n\n  private renderContent() {\n    if (!this.props.text) {\n      return null;\n    }\n\n    const { pos, maxWidth } = this.props;\n    const className = cx({\n      [styles.content(this.theme)]: true,\n      [styles.contentCenter(this.theme)]: pos === 'top' || pos === 'bottom',\n      [styles.mobileContent(this.theme)]: this.isMobileLayout,\n    });\n    return (\n      <div className={className} style={{ maxWidth: this.isMobileLayout ? '100%' : maxWidth }}>\n        {this.props.text}\n      </div>\n    );\n  }\n\n  private getPositions = (): PopupPositionsType[] => {\n    return Positions.filter((x) => x.startsWith(this.props.pos));\n  };\n\n  private handleMouseEnter = (e: MouseEventType) => {\n    if (!this.props.manual && !this.timer) {\n      this.timer = window.setTimeout(this.open, 400);\n    }\n\n    if (this.props.onMouseEnter) {\n      this.props.onMouseEnter(e);\n    }\n  };\n\n  private handleMouseLeave = (e: MouseEventType) => {\n    if (!this.props.manual && this.timer) {\n      clearTimeout(this.timer);\n      this.timer = null;\n      this.setState({ opened: false });\n    }\n\n    if (this.props.onMouseLeave) {\n      this.props.onMouseLeave(e);\n    }\n  };\n\n  private close = () => {\n    this.setState({ opened: false });\n  };\n\n  private open = () => {\n    this.setState({ opened: true });\n  };\n}\n"]}

package/cjs/components/Input/Input.d.ts

@@ -83,8 +83,11 @@ export interface InputProps extends CommonProps, Override<React.InputHTMLAttribu
 export interface InputState {
     blinking: boolean;
     focused: boolean;
-    polyfillPlaceholder: boolean;
+    needsPolyfillPlaceholder: boolean;
 }
+export declare const InputDataTids: {
+    readonly root: "Input__root";
+};
 /**
  * Интерфейс пропсов наследуется от `React.InputHTMLAttributes<HTMLInputElement>`.
  *  Все пропсы кроме перечисленных, `className` и `style` передаются в `<input>`
@@ -100,11 +103,7 @@ export declare class Input extends React.Component<InputProps, InputState> {
     private blinkTimeout;
     private input;
     private setRootNode;
-    componentDidMount(): void;
     componentWillUnmount(): void;
-    static getDerivedStateFromProps(props: InputProps, state: InputState): InputState | {
-        polyfillPlaceholder: boolean;
-    };
     /**
      * @public
      */

package/cjs/components/Input/Input.js

@@ -1,10 +1,10 @@
-"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");exports.__esModule = true;exports.Input = void 0;var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));var _invariant = _interopRequireDefault(require("invariant"));
+"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");exports.__esModule = true;exports.InputDataTids = exports.Input = void 0;var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));var _invariant = _interopRequireDefault(require("invariant"));
 var _react = _interopRequireDefault(require("react"));
 var _raf = _interopRequireDefault(require("raf"));
 
 var _client = require("../../lib/client");
 var _identifiers = require("../../lib/events/keyboard/identifiers");
-var _polyfillPlaceholder = require("../../lib/polyfillPlaceholder");
+var _needsPolyfillPlaceholder = require("../../lib/needsPolyfillPlaceholder");
 
 var _MaskedInput = require("../../internal/MaskedInput");
 var _ThemeContext = require("../../lib/theming/ThemeContext");
@@ -105,12 +105,16 @@ var _Input = require("./Input.styles");var _excluded = ["onMouseEnter", "onMouse
 
 
 
+
+
+var InputDataTids = {
+  root: 'Input__root' };
 
 
 /**
  * Интерфейс пропсов наследуется от `React.InputHTMLAttributes<HTMLInputElement>`.
  *  Все пропсы кроме перечисленных, `className` и `style` передаются в `<input>`
- */var
+ */exports.InputDataTids = InputDataTids;var
 
 Input = (0, _rootNode.rootNode)(_class = (_temp = _class2 = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.default)(Input, _React$Component);function Input() {var _this;for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {args[_key] = arguments[_key];}_this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;_this.
 
@@ -122,7 +126,7 @@ Input = (0, _rootNode.rootNode)(_class = (_temp = _class2 = /*#__PURE__*/functio
 
 
     state = {
-      polyfillPlaceholder: false,
+      needsPolyfillPlaceholder: _needsPolyfillPlaceholder.needsPolyfillPlaceholder,
       blinking: false,
       focused: false };_this.
 
@@ -208,19 +212,6 @@ Input = (0, _rootNode.rootNode)(_class = (_temp = _class2 = /*#__PURE__*/functio
 
 
 
-
-
-
-
-
-
-
-
-
-
-
-
-
 
 
 
@@ -330,7 +321,7 @@ Input = (0, _rootNode.rootNode)(_class = (_temp = _class2 = /*#__PURE__*/functio
         style: { textAlign: align },
         ref: _this.refInput,
         type: 'text',
-        placeholder: !_this.isMaskVisible && !_polyfillPlaceholder.polyfillPlaceholder ? placeholder : undefined,
+        placeholder: !_this.isMaskVisible && !_needsPolyfillPlaceholder.needsPolyfillPlaceholder ? placeholder : undefined,
         disabled: disabled });
 
 
@@ -341,7 +332,7 @@ Input = (0, _rootNode.rootNode)(_class = (_temp = _class2 = /*#__PURE__*/functio
       var input = mask ? _this.renderMaskedInput(inputProps, mask) : /*#__PURE__*/_react.default.createElement('input', inputProps);
 
       return /*#__PURE__*/(
-        _react.default.createElement("label", labelProps, /*#__PURE__*/
+        _react.default.createElement("label", (0, _extends2.default)({ "data-tid": InputDataTids.root }, labelProps), /*#__PURE__*/
         _react.default.createElement("span", { className: _Input.styles.sideContainer() },
         _this.renderLeftIcon(),
         _this.renderPrefix()), /*#__PURE__*/
@@ -452,6 +443,12 @@ Input = (0, _rootNode.rootNode)(_class = (_temp = _class2 = /*#__PURE__*/functio
 
 
 
+
+
+
+
+
+
 
 
 
@@ -468,10 +465,10 @@ Input = (0, _rootNode.rootNode)(_class = (_temp = _class2 = /*#__PURE__*/functio
     };_this.
 
     handleChange = function (event) {
-      if (_polyfillPlaceholder.polyfillPlaceholder) {
+      if (_needsPolyfillPlaceholder.needsPolyfillPlaceholder) {
         var fieldIsEmpty = event.target.value === '';
-        if (_this.state.polyfillPlaceholder !== fieldIsEmpty) {
-          _this.setState({ polyfillPlaceholder: fieldIsEmpty });
+        if (_this.state.needsPolyfillPlaceholder !== fieldIsEmpty) {
+          _this.setState({ needsPolyfillPlaceholder: fieldIsEmpty });
         }
       }
 
@@ -565,7 +562,7 @@ Input = (0, _rootNode.rootNode)(_class = (_temp = _class2 = /*#__PURE__*/functio
       return /*#__PURE__*/(
         _react.default.createElement("span", { className: (0, _Emotion.cx)(_Input.styles.suffix(_this.theme), (_cx4 = {}, _cx4[_Input.styles.suffixDisabled(_this.theme)] = disabled, _cx4)) }, suffix));
 
-    };return _this;}var _proto = Input.prototype;_proto.componentDidMount = function componentDidMount() {if (_polyfillPlaceholder.polyfillPlaceholder) {this.setState({ polyfillPlaceholder: true });}};_proto.componentWillUnmount = function componentWillUnmount() {if (this.blinkTimeout) {clearTimeout(this.blinkTimeout);}this.cancelDelayedSelectAll();};Input.getDerivedStateFromProps = function getDerivedStateFromProps(props, state) {if (_polyfillPlaceholder.polyfillPlaceholder && !props.value) {return { polyfillPlaceholder: true };}return state;} /**
+    };return _this;}var _proto = Input.prototype;_proto.componentWillUnmount = function componentWillUnmount() {if (this.blinkTimeout) {clearTimeout(this.blinkTimeout);}this.cancelDelayedSelectAll();} /**
    * @public
    */;_proto.focus = function focus() {(0, _invariant.default)(this.input, 'Cannot call "focus" because Input is not mounted');this.input.focus();} /**
    * @public
@@ -581,4 +578,4 @@ Input = (0, _rootNode.rootNode)(_class = (_temp = _class2 = /*#__PURE__*/functio
    * @param {number} end
    */;_proto.setSelectionRange = function setSelectionRange(start, end) {if (!this.input) {throw new Error('Cannot call "setSelectionRange" on unmounted Input');}if (document.activeElement !== this.input) {this.focus();}this.input.setSelectionRange(start, end);};_proto.render = function render() {var _this3 = this;return /*#__PURE__*/_react.default.createElement(_ThemeContext.ThemeContext.Consumer, null, function (theme) {_this3.theme = theme;return /*#__PURE__*/_react.default.createElement(_CommonWrapper.CommonWrapper, (0, _extends2.default)({ rootNodeRef: _this3.setRootNode }, _this3.props), _this3.renderMain);});} /**
    * @public
-   */;_proto.renderMaskedInput = function renderMaskedInput(inputProps, mask) {return /*#__PURE__*/_react.default.createElement(_MaskedInput.MaskedInput, (0, _extends2.default)({}, inputProps, { mask: mask, maskChar: this.props.maskChar, alwaysShowMask: this.props.alwaysShowMask, formatChars: this.props.formatChars, onChange: this.props.onChange, onValueChange: this.handleMaskedValueChange, onUnexpectedInput: this.handleUnexpectedInput }));};_proto.getIconSizeClassname = function getIconSizeClassname(right) {if (right === void 0) {right = false;}switch (this.props.size) {case 'large':return right ? _Input.styles.rightIconLarge(this.theme) : _Input.styles.leftIconLarge(this.theme);case 'medium':return right ? _Input.styles.rightIconMedium(this.theme) : _Input.styles.leftIconMedium(this.theme);case 'small':default:return right ? _Input.styles.rightIconSmall(this.theme) : _Input.styles.leftIconSmall(this.theme);}};_proto.renderLeftIcon = function renderLeftIcon() {return this.renderIcon(this.props.leftIcon, this.getIconSizeClassname());};_proto.renderRightIcon = function renderRightIcon() {return this.renderIcon(this.props.rightIcon, this.getIconSizeClassname(true));};_proto.renderIcon = function renderIcon(icon, sizeClassName) {var _cx5;if (!icon) {return null;}var disabled = this.props.disabled;var iconNode = icon instanceof Function ? icon() : icon;return /*#__PURE__*/_react.default.createElement("span", { className: (0, _Emotion.cx)(_Input.styles.icon(), sizeClassName, _Input.styles.useDefaultColor(this.theme), (_cx5 = {}, _cx5[_Input.styles.iconDisabled()] = disabled, _cx5)) }, iconNode);};_proto.renderPlaceholder = function renderPlaceholder() {var disabled = this.props.disabled;var focused = this.state.focused;var placeholder = null;if (this.state.polyfillPlaceholder && this.props.placeholder && !this.isMaskVisible && !this.props.value) {var _cx6;placeholder = /*#__PURE__*/_react.default.createElement("div", { className: (0, _Emotion.cx)(_Input.styles.placeholder(this.theme), (_cx6 = {}, _cx6[_Input.styles.placeholderDisabled(this.theme)] = disabled, _cx6[_Input.styles.placeholderFocus(this.theme)] = focused, _cx6)), style: { textAlign: this.props.align || 'inherit' } }, this.props.placeholder);}return placeholder;};_proto.getSizeClassName = function getSizeClassName() {var _cx7, _cx8, _cx9;switch (this.props.size) {case 'large':return (0, _Emotion.cx)((_cx7 = {}, _cx7[_Input.styles.sizeLarge(this.theme)] = true, _cx7[_Input.styles.sizeLargeFallback(this.theme)] = _client.isIE11 || _client.isEdge, _cx7));case 'medium':return (0, _Emotion.cx)((_cx8 = {}, _cx8[_Input.styles.sizeMedium(this.theme)] = true, _cx8[_Input.styles.sizeMediumFallback(this.theme)] = _client.isIE11 || _client.isEdge, _cx8));case 'small':default:return (0, _Emotion.cx)((_cx9 = {}, _cx9[_Input.styles.sizeSmall(this.theme)] = true, _cx9[_Input.styles.sizeSmallFallback(this.theme)] = _client.isIE11 || _client.isEdge, _cx9));}};(0, _createClass2.default)(Input, [{ key: "isMaskVisible", get: function get() {var _this$props3 = this.props,mask = _this$props3.mask,alwaysShowMask = _this$props3.alwaysShowMask;var focused = this.state.focused;return Boolean(mask && (focused || alwaysShowMask));} }]);return Input;}(_react.default.Component), _class2.__KONTUR_REACT_UI__ = 'Input', _class2.defaultProps = { size: 'small' }, _temp)) || _class;exports.Input = Input;
+   */;_proto.renderMaskedInput = function renderMaskedInput(inputProps, mask) {return /*#__PURE__*/_react.default.createElement(_MaskedInput.MaskedInput, (0, _extends2.default)({}, inputProps, { mask: mask, maskChar: this.props.maskChar, alwaysShowMask: this.props.alwaysShowMask, formatChars: this.props.formatChars, onChange: this.props.onChange, onValueChange: this.handleMaskedValueChange, onUnexpectedInput: this.handleUnexpectedInput }));};_proto.getIconSizeClassname = function getIconSizeClassname(right) {if (right === void 0) {right = false;}switch (this.props.size) {case 'large':return right ? _Input.styles.rightIconLarge(this.theme) : _Input.styles.leftIconLarge(this.theme);case 'medium':return right ? _Input.styles.rightIconMedium(this.theme) : _Input.styles.leftIconMedium(this.theme);case 'small':default:return right ? _Input.styles.rightIconSmall(this.theme) : _Input.styles.leftIconSmall(this.theme);}};_proto.renderLeftIcon = function renderLeftIcon() {return this.renderIcon(this.props.leftIcon, this.getIconSizeClassname());};_proto.renderRightIcon = function renderRightIcon() {return this.renderIcon(this.props.rightIcon, this.getIconSizeClassname(true));};_proto.renderIcon = function renderIcon(icon, sizeClassName) {var _cx5;if (!icon) {return null;}var disabled = this.props.disabled;var iconNode = icon instanceof Function ? icon() : icon;return /*#__PURE__*/_react.default.createElement("span", { className: (0, _Emotion.cx)(_Input.styles.icon(), sizeClassName, _Input.styles.useDefaultColor(this.theme), (_cx5 = {}, _cx5[_Input.styles.iconDisabled()] = disabled, _cx5)) }, iconNode);};_proto.renderPlaceholder = function renderPlaceholder() {var disabled = this.props.disabled;var focused = this.state.focused;var placeholder = null;if (this.state.needsPolyfillPlaceholder && this.props.placeholder && !this.isMaskVisible && !this.props.value && !this.props.defaultValue) {var _cx6;placeholder = /*#__PURE__*/_react.default.createElement("div", { className: (0, _Emotion.cx)(_Input.styles.placeholder(this.theme), (_cx6 = {}, _cx6[_Input.styles.placeholderDisabled(this.theme)] = disabled, _cx6[_Input.styles.placeholderFocus(this.theme)] = focused, _cx6)), style: { textAlign: this.props.align || 'inherit' } }, this.props.placeholder);}return placeholder;};_proto.getSizeClassName = function getSizeClassName() {var _cx7, _cx8, _cx9;switch (this.props.size) {case 'large':return (0, _Emotion.cx)((_cx7 = {}, _cx7[_Input.styles.sizeLarge(this.theme)] = true, _cx7[_Input.styles.sizeLargeFallback(this.theme)] = _client.isIE11 || _client.isEdge, _cx7));case 'medium':return (0, _Emotion.cx)((_cx8 = {}, _cx8[_Input.styles.sizeMedium(this.theme)] = true, _cx8[_Input.styles.sizeMediumFallback(this.theme)] = _client.isIE11 || _client.isEdge, _cx8));case 'small':default:return (0, _Emotion.cx)((_cx9 = {}, _cx9[_Input.styles.sizeSmall(this.theme)] = true, _cx9[_Input.styles.sizeSmallFallback(this.theme)] = _client.isIE11 || _client.isEdge, _cx9));}};(0, _createClass2.default)(Input, [{ key: "isMaskVisible", get: function get() {var _this$props3 = this.props,mask = _this$props3.mask,alwaysShowMask = _this$props3.alwaysShowMask;var focused = this.state.focused;return Boolean(mask && (focused || alwaysShowMask));} }]);return Input;}(_react.default.Component), _class2.__KONTUR_REACT_UI__ = 'Input', _class2.defaultProps = { size: 'small' }, _temp)) || _class;exports.Input = Input;