@skbkontur/react-ui 0.0.0-c91b3db3f4 → 0.0.0-cb270e7a13

package/cjs/components/Group/Group.js

@@ -1,12 +1,12 @@
 "use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");exports.__esModule = true;exports.Group = void 0;var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _classnames = _interopRequireDefault(require("classnames"));
 
 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 _Group = require("./Group.styles");var
 
@@ -43,16 +43,16 @@ Group = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.default)(G
 
     return /*#__PURE__*/(
       _react.default.createElement(_CommonWrapper.CommonWrapper, this.props, /*#__PURE__*/
-      _react.default.createElement("span", { className: _Group.jsStyles.root(), style: style },
-      _react.default.Children.map(this.props.children, function (child) {var _cn, _cn2;
+      _react.default.createElement("span", { className: _Group.styles.root(), style: style },
+      _react.default.Children.map(this.props.children, 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, _classnames.default)((_cn = {}, _cn[
-        _Group.jsStyles.item()] = true, _cn[
-        _Group.jsStyles.itemFirst()] = child === first, _cn));
+        var itemCss = (0, _Emotion.cx)((_cx = {}, _cx[
+        _Group.styles.item()] = true, _cx[
+        _Group.styles.itemFirst()] = child === first, _cx));
 
 
         var corners = 0;
@@ -69,10 +69,10 @@ Group = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.default)(G
 
         return /*#__PURE__*/(
           _react.default.createElement("div", {
-            className: (0, _classnames.default)((_cn2 = {}, _cn2[
-            _Group.jsStyles.fixed()] = !isWidthInPercent, _cn2[
-            _Group.jsStyles.stretch()] = isWidthInPercent, _cn2[
-            _Group.jsStyles.stretchFallback()] = Boolean(isWidthInPercent && _this.props.width && (_client.isIE11 || _client.isEdge)), _cn2)) }, /*#__PURE__*/
+            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__*/
 
 
           _react.default.createElement("div", { className: itemCss }, child)));

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

@@ -1 +1 @@
-{"version":3,"sources":["Group.tsx"],"names":["Group","render","style","width","props","first","last","React","Children","forEach","children","child","isValidElement","jsStyles","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":"iPAAA;AACA;AACA;;AAEA;AACA;;AAEA;AACA;;AAEA,uC;;;;;;;;;;;AAWaA,K;;;;;;;AAOJC,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,UAAAC,KAAK,EAAI;AACnD,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,EAAmB,KAAKP,KAAxB;AACE,6CAAM,SAAS,EAAES,gBAASC,IAAT,EAAjB,EAAkC,KAAK,EAAEZ,KAAzC;AACGK,qBAAMC,QAAN,CAAeO,GAAf,CAAmB,KAAKX,KAAL,CAAWM,QAA9B,EAAwC,UAAAC,KAAK,EAAI;AAChD,YAAI,CAACA,KAAD,IAAU,eAACJ,eAAMK,cAAN,CAAsCD,KAAtC,CAAf,EAA6D;AAC3D,iBAAO,IAAP;AACD;;AAED,YAAMK,gBAAgB,GAAGC,OAAO,CAACN,KAAK,CAACP,KAAN,CAAYD,KAAZ,IAAqBQ,KAAK,CAACP,KAAN,CAAYD,KAAZ,CAAkBe,QAAlB,GAA6BC,QAA7B,CAAsC,GAAtC,CAAtB,CAAhC;AACA,YAAMC,OAAO,GAAG;AACbP,wBAASQ,IAAT,EADa,IACK,IADL;AAEbR,wBAASS,SAAT,EAFa,IAEUX,KAAK,KAAKN,KAFpB,OAAhB;;;AAKA,YAAIkB,OAAO,GAAG,CAAd;AACA,YAAIZ,KAAK,KAAKN,KAAd,EAAqB;AACnBkB,UAAAA,OAAO,IAAIC,iBAAQC,QAAR,GAAmBD,iBAAQE,WAAtC;AACD;AACD,YAAIf,KAAK,KAAKL,IAAd,EAAoB;AAClBiB,UAAAA,OAAO,IAAIC,iBAAQG,SAAR,GAAoBH,iBAAQI,YAAvC;AACD;;AAED,YAAI,sBAASjB,KAAT,CAAJ,EAAqB;AACnBA,UAAAA,KAAK,gBAAGJ,eAAMsB,YAAN,CAAmBlB,KAAnB,EAA0B,EAAEY,OAAO,EAAPA,OAAF,EAA1B,CAAR;AACD;;AAED;AACE;AACE,YAAA,SAAS,EAAE;AACRV,4BAASiB,KAAT,EADQ,IACW,CAACd,gBADZ;AAERH,4BAASkB,OAAT,EAFQ,IAEaf,gBAFb;AAGRH,4BAASmB,eAAT,EAHQ,IAGqBf,OAAO,CAACD,gBAAgB,IAAI,KAAI,CAACZ,KAAL,CAAWD,KAA/B,KAAyC8B,kBAAUC,cAAnD,CAAD,CAH5B,QADb;;;AAOE,gDAAK,SAAS,EAAEd,OAAhB,IAA0BT,KAA1B,CAPF,CADF;;;AAWD,OAlCA,CADH,CADF,CADF;;;;AAyCD,G,gBA/DwBJ,eAAM4B,S,wBAApBnC,K,CACGoC,mB,GAAsB,O,CADzBpC,K,CAGGqC,S,GAAY,EACxBlC,KAAK,EAAEmC,mBAAUC,SAAV,CAAoB,CAACD,mBAAUE,MAAX,EAAmBF,mBAAUG,MAA7B,CAApB,CADiB,E","sourcesContent":["import React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport cn from 'classnames';\r\n\r\nimport { isIE11, isEdge } from '../../lib/client';\r\nimport { Corners } from '../Button/Corners';\r\nimport { Nullable } from '../../typings/utility-types';\r\nimport { isButton } from '../Button';\r\nimport { CommonWrapper, CommonProps } from '../../internal/CommonWrapper';\r\n\r\nimport { jsStyles } from './Group.styles';\r\n\r\nexport interface GroupProps extends CommonProps {\r\n  width?: React.CSSProperties['width'];\r\n}\r\n\r\ninterface GroupChildProps {\r\n  width?: React.CSSProperties['width'];\r\n  corners?: number;\r\n}\r\n\r\nexport class Group extends React.Component<GroupProps> {\r\n  public static __KONTUR_REACT_UI__ = 'Group';\r\n\r\n  public static propTypes = {\r\n    width: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),\r\n  };\r\n\r\n  public render() {\r\n    const style: React.CSSProperties = {\r\n      width: this.props.width,\r\n    };\r\n\r\n    let first: Nullable<React.ReactElement<any>> = null;\r\n    let last: Nullable<React.ReactElement<any>> = null;\r\n\r\n    React.Children.forEach(this.props.children, child => {\r\n      if (child && React.isValidElement(child)) {\r\n        first = first || child;\r\n        last = child;\r\n      }\r\n    });\r\n\r\n    return (\r\n      <CommonWrapper {...this.props}>\r\n        <span className={jsStyles.root()} style={style}>\r\n          {React.Children.map(this.props.children, child => {\r\n            if (!child || !React.isValidElement<GroupChildProps>(child)) {\r\n              return null;\r\n            }\r\n\r\n            const isWidthInPercent = Boolean(child.props.width && child.props.width.toString().includes('%'));\r\n            const itemCss = cn({\r\n              [jsStyles.item()]: true,\r\n              [jsStyles.itemFirst()]: child === first,\r\n            });\r\n\r\n            let corners = 0;\r\n            if (child !== first) {\r\n              corners |= Corners.TOP_LEFT | Corners.BOTTOM_LEFT;\r\n            }\r\n            if (child !== last) {\r\n              corners |= Corners.TOP_RIGHT | Corners.BOTTOM_RIGHT;\r\n            }\r\n\r\n            if (isButton(child)) {\r\n              child = React.cloneElement(child, { corners });\r\n            }\r\n\r\n            return (\r\n              <div\r\n                className={cn({\r\n                  [jsStyles.fixed()]: !isWidthInPercent,\r\n                  [jsStyles.stretch()]: isWidthInPercent,\r\n                  [jsStyles.stretchFallback()]: Boolean(isWidthInPercent && this.props.width && (isIE11 || isEdge)),\r\n                })}\r\n              >\r\n                <div className={itemCss}>{child}</div>\r\n              </div>\r\n            );\r\n          })}\r\n        </span>\r\n      </CommonWrapper>\r\n    );\r\n  }\r\n}\r\n"]}
+{"version":3,"sources":["Group.tsx"],"names":["Group","render","style","width","props","first","last","React","Children","forEach","children","child","isValidElement","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":"iPAAA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;;AAEA,uC;;;;;;;;;;;AAWaA,K;;;;;;;AAOJC,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,EAAmB,KAAKP,KAAxB;AACE,6CAAM,SAAS,EAAES,cAAOC,IAAP,EAAjB,EAAgC,KAAK,EAAEZ,KAAvC;AACGK,qBAAMC,QAAN,CAAeO,GAAf,CAAmB,KAAKX,KAAL,CAAWM,QAA9B,EAAwC,UAACC,KAAD,EAAW;AAClD,YAAI,CAACA,KAAD,IAAU,eAACJ,eAAMK,cAAN,CAAsCD,KAAtC,CAAf,EAA6D;AAC3D,iBAAO,IAAP;AACD;;AAED,YAAMK,gBAAgB,GAAGC,OAAO,CAACN,KAAK,CAACP,KAAN,CAAYD,KAAZ,IAAqBQ,KAAK,CAACP,KAAN,CAAYD,KAAZ,CAAkBe,QAAlB,GAA6BC,QAA7B,CAAsC,GAAtC,CAAtB,CAAhC;AACA,YAAMC,OAAO,GAAG;AACbP,sBAAOQ,IAAP,EADa,IACG,IADH;AAEbR,sBAAOS,SAAP,EAFa,IAEQX,KAAK,KAAKN,KAFlB,OAAhB;;;AAKA,YAAIkB,OAAO,GAAG,CAAd;AACA,YAAIZ,KAAK,KAAKN,KAAd,EAAqB;AACnBkB,UAAAA,OAAO,IAAIC,iBAAQC,QAAR,GAAmBD,iBAAQE,WAAtC;AACD;AACD,YAAIf,KAAK,KAAKL,IAAd,EAAoB;AAClBiB,UAAAA,OAAO,IAAIC,iBAAQG,SAAR,GAAoBH,iBAAQI,YAAvC;AACD;;AAED,YAAI,sBAASjB,KAAT,CAAJ,EAAqB;AACnBA,UAAAA,KAAK,gBAAGJ,eAAMsB,YAAN,CAAmBlB,KAAnB,EAA0B,EAAEY,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,CAACZ,KAAL,CAAWD,KAA/B,KAAyC8B,kBAAUC,cAAnD,CAAD,CAH1B,QADb;;;AAOE,gDAAK,SAAS,EAAEd,OAAhB,IAA0BT,KAA1B,CAPF,CADF;;;AAWD,OAlCA,CADH,CADF,CADF;;;;AAyCD,G,gBA/DwBJ,eAAM4B,S,wBAApBnC,K,CACGoC,mB,GAAsB,O,CADzBpC,K,CAGGqC,S,GAAY,EACxBlC,KAAK,EAAEmC,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';\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\nexport class Group extends React.Component<GroupProps> {\n  public static __KONTUR_REACT_UI__ = 'Group';\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 {...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"]}

package/cjs/components/Group/Group.md

@@ -1,18 +1,18 @@
-```jsx harmony
-import FunctionIcon from '@skbkontur/react-icons/Function';
-import SearchIcon from '@skbkontur/react-icons/Search';
-import { Button, Input } from '@skbkontur/react-ui';
-
-const [value, setValue] = React.useState('Foo');
-
-<Group width={300}>
-  <Button>
-    <FunctionIcon />
-  </Button>
-  <Input value={value} width="100%" onValueChange={setValue} />
-  <Button>
-    <SearchIcon />
-  </Button>
-  <Button>Bar</Button>
-</Group>;
-```
+```jsx harmony
+import FunctionIcon from '@skbkontur/react-icons/Function';
+import SearchIcon from '@skbkontur/react-icons/Search';
+import { Button, Input } from '@skbkontur/react-ui';
+
+const [value, setValue] = React.useState('Foo');
+
+<Group width={300}>
+  <Button>
+    <FunctionIcon />
+  </Button>
+  <Input value={value} width="100%" onValueChange={setValue} />
+  <Button>
+    <SearchIcon />
+  </Button>
+  <Button>Bar</Button>
+</Group>;
+```

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

@@ -1,4 +1,4 @@
-export declare const jsStyles: {
+export declare const styles: {
     root(): string;
     fixed(): string;
     stretch(): string;

package/cjs/components/Group/Group.styles.js

@@ -1,8 +1,9 @@
-"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");exports.__esModule = true;exports.jsStyles = void 0;var _taggedTemplateLiteralLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteralLoose"));var _Emotion = require("../../lib/theming/Emotion");var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
+"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");exports.__esModule = true;exports.styles = void 0;var _taggedTemplateLiteralLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteralLoose"));var _Emotion = require("../../lib/theming/Emotion");var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
 
-var styles = {
+var styles = (0, _Emotion.memoizeStyle)({
   root: function root() {
-    return (0, _Emotion.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2.default)(["\n      display: inline-flex;\n    "])));
+    return (0, _Emotion.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2.default)(["\n      display: inline-flex;\n      line-height: normal;\n    "])));
+
 
 
   },
@@ -37,7 +38,4 @@ var styles = {
     return (0, _Emotion.css)(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteralLoose2.default)(["\n      margin-left: 0;\n    "])));
 
 
-  } };
-
-
-var jsStyles = (0, _Emotion.memoizeStyle)(styles);exports.jsStyles = jsStyles;
+  } });exports.styles = styles;

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

@@ -1 +1 @@
-{"version":3,"sources":["Group.styles.ts"],"names":["styles","root","css","fixed","stretch","stretchFallback","item","itemFirst","jsStyles"],"mappings":"8QAAA,oD;;AAEA,IAAMA,MAAM,GAAG;AACbC,EAAAA,IADa,kBACN;AACL,eAAOC,YAAP;;;AAGD,GALY;;AAObC,EAAAA,KAPa,mBAOL;AACN,eAAOD,YAAP;;;;AAID,GAZY;;AAcbE,EAAAA,OAda,qBAcH;AACR,eAAOF,YAAP;;;;AAID,GAnBY;;AAqBbG,EAAAA,eArBa,6BAqBK;AAChB,eAAOH,YAAP;;;AAGD,GAzBY;;AA2BbI,EAAAA,IA3Ba,kBA2BN;AACL,eAAOJ,YAAP;;;AAGD,GA/BY;;AAiCbK,EAAAA,SAjCa,uBAiCD;AACV,eAAOL,YAAP;;;AAGD,GArCY,EAAf;;;AAwCO,IAAMM,QAAQ,GAAG,2BAAaR,MAAb,CAAjB,C","sourcesContent":["import { css, memoizeStyle } from '../../lib/theming/Emotion';\r\n\r\nconst styles = {\r\n  root() {\r\n    return css`\r\n      display: inline-flex;\r\n    `;\r\n  },\r\n\r\n  fixed() {\r\n    return css`\r\n      flex-shrink: 0;\r\n      display: inline-block;\r\n    `;\r\n  },\r\n\r\n  stretch() {\r\n    return css`\r\n      flex-grow: 1;\r\n      flex-shrink: 1;\r\n    `;\r\n  },\r\n\r\n  stretchFallback() {\r\n    return css`\r\n      flex-basis: 100%;\r\n    `;\r\n  },\r\n\r\n  item() {\r\n    return css`\r\n      margin-left: -1px;\r\n    `;\r\n  },\r\n\r\n  itemFirst() {\r\n    return css`\r\n      margin-left: 0;\r\n    `;\r\n  },\r\n};\r\n\r\nexport const jsStyles = memoizeStyle(styles);\r\n"]}
+{"version":3,"sources":["Group.styles.ts"],"names":["styles","root","css","fixed","stretch","stretchFallback","item","itemFirst"],"mappings":"4QAAA,oD;;AAEO,IAAMA,MAAM,GAAG,2BAAa;AACjCC,EAAAA,IADiC,kBAC1B;AACL,eAAOC,YAAP;;;;AAID,GANgC;;AAQjCC,EAAAA,KARiC,mBAQzB;AACN,eAAOD,YAAP;;;;AAID,GAbgC;;AAejCE,EAAAA,OAfiC,qBAevB;AACR,eAAOF,YAAP;;;;AAID,GApBgC;;AAsBjCG,EAAAA,eAtBiC,6BAsBf;AAChB,eAAOH,YAAP;;;AAGD,GA1BgC;;AA4BjCI,EAAAA,IA5BiC,kBA4B1B;AACL,eAAOJ,YAAP;;;AAGD,GAhCgC;;AAkCjCK,EAAAA,SAlCiC,uBAkCrB;AACV,eAAOL,YAAP;;;AAGD,GAtCgC,EAAb,CAAf,C","sourcesContent":["import { css, memoizeStyle } from '../../lib/theming/Emotion';\n\nexport const styles = memoizeStyle({\n  root() {\n    return css`\n      display: inline-flex;\n      line-height: normal;\n    `;\n  },\n\n  fixed() {\n    return css`\n      flex-shrink: 0;\n      display: inline-block;\n    `;\n  },\n\n  stretch() {\n    return css`\n      flex-grow: 1;\n      flex-shrink: 1;\n    `;\n  },\n\n  stretchFallback() {\n    return css`\n      flex-basis: 100%;\n    `;\n  },\n\n  item() {\n    return css`\n      margin-left: -1px;\n    `;\n  },\n\n  itemFirst() {\n    return css`\n      margin-left: 0;\n    `;\n  },\n});\n"]}

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

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

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

@@ -3,21 +3,60 @@ import { MouseEventType } from '../../typings/event-types';
 import { CommonProps } from '../../internal/CommonWrapper';
 export interface HintProps extends CommonProps {
     children?: React.ReactNode;
+    /**
+     * Переводит отображение подсказки в _"ручной режим"_.
+     *
+     * В _"ручном режиме"_ подcказку можно активировать только задав значение пропу `opened`.
+     */
     manual?: boolean;
+    /**
+     * Задаёт максимальную ширину подсказки.
+     */
     maxWidth?: React.CSSProperties['maxWidth'];
+    /**
+     * HTML-событие `mouseenter`.
+     */
     onMouseEnter?: (event: MouseEventType) => void;
+    /**
+     * HTML-событие `mouseleave`.
+     */
     onMouseLeave?: (event: MouseEventType) => void;
+    /**
+     * Если `true` - подсказка будет открыта.
+     *
+     * _Примечание_: работает только при `manual=true`.
+     */
     opened?: boolean;
+    /**
+     * Расположение подсказки относительно текста.
+     *
+     * **Допустимые значения**: `"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"`.
+     */
     pos: 'top' | 'right' | 'bottom' | 'left' | 'top left' | 'top center' | 'top right' | 'bottom left' | 'bottom center' | 'bottom right' | 'left top' | 'left middle' | 'left bottom' | 'right top' | 'right middle' | 'right bottom';
+    /**
+     * Текст подсказки.
+     */
     text: React.ReactNode;
+    /**
+     * Отключает анимацию.
+     */
     disableAnimations: boolean;
+    /**
+     * Явно указывает, что вложенные элементы должны быть обёрнуты в `<span/>`. <br/> Используется для корректного позиционирования тултипа при двух и более вложенных элементах.
+     *
+     * _Примечание_: при **двух и более** вложенных элементах обёртка будет добавлена автоматически.
+     */
     useWrapper: boolean;
 }
 export interface HintState {
     opened: boolean;
 }
+/**
+ * Всплывающая подсказка, которая по умолчанию отображается при наведении на элемент. <br/> Можно задать другие условия отображения.
+ */
 export declare class Hint extends React.Component<HintProps, HintState> {
     static __KONTUR_REACT_UI__: string;
+    private isMobileLayout;
     static defaultProps: {
         pos: string;
         manual: boolean;
@@ -32,10 +71,12 @@ export declare class Hint extends React.Component<HintProps, HintState> {
     UNSAFE_componentWillReceiveProps(nextProps: HintProps): void;
     componentWillUnmount(): void;
     render(): JSX.Element;
+    renderMobile(): JSX.Element;
     renderMain(): JSX.Element;
     private renderContent;
     private getPositions;
     private handleMouseEnter;
     private handleMouseLeave;
+    private close;
     private open;
 }

package/cjs/components/Hint/Hint.js

@@ -1,5 +1,4 @@
 "use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");exports.__esModule = true;exports.Hint = void 0;var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));var _react = _interopRequireDefault(require("react"));
-var _classnames = _interopRequireDefault(require("classnames"));
 
 var _ThemeContext = require("../../lib/theming/ThemeContext");
 var _ThemeFactory = require("../../lib/theming/ThemeFactory");
@@ -9,10 +8,11 @@ var _Popup = require("../../internal/Popup");
 
 var _currentEnvironment = require("../../lib/currentEnvironment");
 var _CommonWrapper = require("../../internal/CommonWrapper");
+var _Emotion = require("../../lib/theming/Emotion");
+var _ResponsiveLayout = require("../ResponsiveLayout");
 
-var _Hint = require("./Hint.styles");
+var _Hint = require("./Hint.styles");var _class, _class2, _temp;
 
-var HINT_BACKGROUND_COLOR = 'rgba(51, 51, 51, 0.8)';
 var HINT_BORDER_COLOR = 'transparent';
 
 
@@ -34,6 +34,41 @@ var HINT_BORDER_COLOR = 'transparent';
 
 
 
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
 
 
 
@@ -60,12 +95,18 @@ var Positions = [
 'left bottom',
 'right middle',
 'right top',
-'right bottom'];var
+'right bottom'];
+
 
+/**
+ * Всплывающая подсказка, которая по умолчанию отображается при наведении на элемент. <br/> Можно задать другие условия отображения.
+ */var
 
-Hint = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.default)(Hint, _React$Component);function Hint() {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.
+Hint = (0, _ResponsiveLayout.responsiveLayout)(_class = (_temp = _class2 = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.default)(Hint, _React$Component);function Hint() {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.
 
 
+    isMobileLayout = void 0;_this.
+
 
 
 
@@ -141,6 +182,26 @@ Hint = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.default)(Hi
 
 
 
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
 
 
 
@@ -188,6 +249,10 @@ Hint = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.default)(Hi
       }
     };_this.
 
+    close = function () {
+      _this.setState({ opened: false });
+    };_this.
+
     open = function () {
       _this.setState({ opened: true });
-    };return _this;}var _proto = Hint.prototype;_proto.UNSAFE_componentWillReceiveProps = function UNSAFE_componentWillReceiveProps(nextProps) {if (!nextProps.manual) {return;}if (nextProps.opened !== this.props.opened) {this.setState({ opened: !!nextProps.opened });}};_proto.componentWillUnmount = function componentWillUnmount() {if (this.timer) {clearTimeout(this.timer);this.timer = null;}};_proto.render = function render() {var _this2 = this;return /*#__PURE__*/_react.default.createElement(_ThemeContext.ThemeContext.Consumer, null, function (theme) {_this2.theme = theme;return /*#__PURE__*/_react.default.createElement(_ThemeContext.ThemeContext.Provider, { value: _ThemeFactory.ThemeFactory.create({ popupPinOffset: theme.hintPinOffset, popupMargin: theme.hintMargin, popupBorder: theme.hintBorder, popupBorderRadius: theme.hintBorderRadius }, _this2.theme) }, _this2.renderMain());});};_proto.renderMain = function renderMain() {return /*#__PURE__*/_react.default.createElement(_CommonWrapper.CommonWrapper, this.props, /*#__PURE__*/_react.default.createElement(_Popup.Popup, { hasPin: true, opened: this.state.opened, anchorElement: this.props.children, positions: this.getPositions(), backgroundColor: HINT_BACKGROUND_COLOR, borderColor: HINT_BORDER_COLOR, disableAnimations: this.props.disableAnimations, onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave, useWrapper: this.props.useWrapper }, this.renderContent()));};_proto.renderContent = function renderContent() {var _cn;if (!this.props.text) {return null;}var _this$props = this.props,pos = _this$props.pos,maxWidth = _this$props.maxWidth;var className = (0, _classnames.default)((_cn = {}, _cn[_Hint.jsStyles.content(this.theme)] = true, _cn[_Hint.jsStyles.contentCenter(this.theme)] = pos === 'top' || pos === 'bottom', _cn));return /*#__PURE__*/_react.default.createElement("div", { className: className, style: { maxWidth: maxWidth } }, this.props.text);};return Hint;}(_react.default.Component);exports.Hint = Hint;Hint.__KONTUR_REACT_UI__ = 'Hint';Hint.defaultProps = { pos: 'top', manual: false, opened: false, maxWidth: 200, disableAnimations: _currentEnvironment.isTestEnv, useWrapper: false };
+    };return _this;}var _proto = Hint.prototype;_proto.UNSAFE_componentWillReceiveProps = function UNSAFE_componentWillReceiveProps(nextProps) {if (!nextProps.manual) {return;}if (this.timer) {clearTimeout(this.timer);this.timer = null;}if (nextProps.opened !== this.props.opened) {this.setState({ opened: !!nextProps.opened });}};_proto.componentWillUnmount = function componentWillUnmount() {if (this.timer) {clearTimeout(this.timer);this.timer = null;}};_proto.render = function render() {var _this2 = this;return /*#__PURE__*/_react.default.createElement(_ThemeContext.ThemeContext.Consumer, null, function (theme) {_this2.theme = theme;return /*#__PURE__*/_react.default.createElement(_ThemeContext.ThemeContext.Provider, { value: _ThemeFactory.ThemeFactory.create({ popupPinOffset: theme.hintPinOffset, popupMargin: theme.hintMargin, popupBorder: theme.hintBorder, popupBorderRadius: theme.hintBorderRadius }, _this2.theme) }, _this2.isMobileLayout ? _this2.renderMobile() : _this2.renderMain());});};_proto.renderMobile = function renderMobile() {return /*#__PURE__*/_react.default.createElement(_CommonWrapper.CommonWrapper, this.props, /*#__PURE__*/_react.default.createElement(_Popup.Popup, { opened: this.state.opened, anchorElement: this.props.children, positions: [], onClick: !this.props.manual ? this.open : undefined, mobileOnCloseRequest: !this.props.manual ? this.close : undefined }, this.renderContent()));};_proto.renderMain = function renderMain() {return /*#__PURE__*/_react.default.createElement(_CommonWrapper.CommonWrapper, this.props, /*#__PURE__*/_react.default.createElement(_Popup.Popup, { hasPin: true, opened: this.state.opened, anchorElement: this.props.children, positions: this.getPositions(), backgroundColor: this.theme.hintBgColor, borderColor: HINT_BORDER_COLOR, disableAnimations: this.props.disableAnimations, onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave, useWrapper: this.props.useWrapper }, this.renderContent()));};_proto.renderContent = function renderContent() {var _cx;if (!this.props.text) {return null;}var _this$props = this.props,pos = _this$props.pos,maxWidth = _this$props.maxWidth;var className = (0, _Emotion.cx)((_cx = {}, _cx[_Hint.styles.content(this.theme)] = true, _cx[_Hint.styles.contentCenter(this.theme)] = pos === 'top' || pos === 'bottom', _cx[_Hint.styles.mobileContent(this.theme)] = this.isMobileLayout, _cx));return /*#__PURE__*/_react.default.createElement("div", { className: className, style: { maxWidth: this.isMobileLayout ? '100%' : maxWidth } }, this.props.text);};return Hint;}(_react.default.Component), _class2.__KONTUR_REACT_UI__ = 'Hint', _class2.defaultProps = { pos: 'top', manual: false, opened: false, maxWidth: 200, disableAnimations: _currentEnvironment.isTestEnv, useWrapper: false }, _temp)) || _class;exports.Hint = Hint;

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

@@ -1 +1 @@
-{"version":3,"sources":["Hint.tsx"],"names":["HINT_BACKGROUND_COLOR","HINT_BORDER_COLOR","Positions","Hint","state","opened","props","manual","timer","theme","getPositions","filter","x","startsWith","pos","handleMouseEnter","e","window","setTimeout","open","onMouseEnter","handleMouseLeave","clearTimeout","setState","onMouseLeave","UNSAFE_componentWillReceiveProps","nextProps","componentWillUnmount","render","ThemeFactory","create","popupPinOffset","hintPinOffset","popupMargin","hintMargin","popupBorder","hintBorder","popupBorderRadius","hintBorderRadius","renderMain","children","disableAnimations","useWrapper","renderContent","text","maxWidth","className","jsStyles","content","contentCenter","React","Component","__KONTUR_REACT_UI__","defaultProps","isTestEnv"],"mappings":"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","sourcesContent":["import React from 'react';\r\nimport cn from 'classnames';\r\n\r\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\r\nimport { ThemeFactory } from '../../lib/theming/ThemeFactory';\r\nimport { Theme } from '../../lib/theming/Theme';\r\nimport { Popup, PopupPosition } from '../../internal/Popup';\r\nimport { Nullable } from '../../typings/utility-types';\r\nimport { MouseEventType } from '../../typings/event-types';\r\nimport { isTestEnv } from '../../lib/currentEnvironment';\r\nimport { CommonWrapper, CommonProps } from '../../internal/CommonWrapper';\r\n\r\nimport { jsStyles } from './Hint.styles';\r\n\r\nconst HINT_BACKGROUND_COLOR = 'rgba(51, 51, 51, 0.8)';\r\nconst HINT_BORDER_COLOR = 'transparent';\r\n\r\nexport interface HintProps extends CommonProps {\r\n  children?: React.ReactNode;\r\n  manual?: boolean;\r\n  maxWidth?: React.CSSProperties['maxWidth'];\r\n  onMouseEnter?: (event: MouseEventType) => void;\r\n  onMouseLeave?: (event: MouseEventType) => void;\r\n  opened?: boolean;\r\n  pos:\r\n    | 'top'\r\n    | 'right'\r\n    | 'bottom'\r\n    | 'left'\r\n    | 'top left'\r\n    | 'top center'\r\n    | 'top right'\r\n    | 'bottom left'\r\n    | 'bottom center'\r\n    | 'bottom right'\r\n    | 'left top'\r\n    | 'left middle'\r\n    | 'left bottom'\r\n    | 'right top'\r\n    | 'right middle'\r\n    | 'right bottom';\r\n  text: React.ReactNode;\r\n  disableAnimations: boolean;\r\n  useWrapper: boolean;\r\n}\r\n\r\nexport interface HintState {\r\n  opened: boolean;\r\n}\r\n\r\nconst Positions: PopupPosition[] = [\r\n  'top center',\r\n  'top left',\r\n  'top right',\r\n  'bottom center',\r\n  'bottom left',\r\n  'bottom right',\r\n  'left middle',\r\n  'left top',\r\n  'left bottom',\r\n  'right middle',\r\n  'right top',\r\n  'right bottom',\r\n];\r\n\r\nexport class Hint extends React.Component<HintProps, HintState> {\r\n  public static __KONTUR_REACT_UI__ = 'Hint';\r\n\r\n  public static defaultProps = {\r\n    pos: 'top',\r\n    manual: false,\r\n    opened: false,\r\n    maxWidth: 200,\r\n    disableAnimations: isTestEnv,\r\n    useWrapper: false,\r\n  };\r\n\r\n  public state: HintState = {\r\n    opened: this.props.manual ? !!this.props.opened : false,\r\n  };\r\n\r\n  private timer: Nullable<number> = null;\r\n  private theme!: Theme;\r\n\r\n  public UNSAFE_componentWillReceiveProps(nextProps: HintProps) {\r\n    if (!nextProps.manual) {\r\n      return;\r\n    }\r\n\r\n    if (nextProps.opened !== this.props.opened) {\r\n      this.setState({ opened: !!nextProps.opened });\r\n    }\r\n  }\r\n\r\n  public componentWillUnmount() {\r\n    if (this.timer) {\r\n      clearTimeout(this.timer);\r\n      this.timer = null;\r\n    }\r\n  }\r\n\r\n  public render() {\r\n    return (\r\n      <ThemeContext.Consumer>\r\n        {theme => {\r\n          this.theme = theme;\r\n          return (\r\n            <ThemeContext.Provider\r\n              value={ThemeFactory.create(\r\n                {\r\n                  popupPinOffset: theme.hintPinOffset,\r\n                  popupMargin: theme.hintMargin,\r\n                  popupBorder: theme.hintBorder,\r\n                  popupBorderRadius: theme.hintBorderRadius,\r\n                },\r\n                this.theme,\r\n              )}\r\n            >\r\n              {this.renderMain()}\r\n            </ThemeContext.Provider>\r\n          );\r\n        }}\r\n      </ThemeContext.Consumer>\r\n    );\r\n  }\r\n\r\n  public renderMain() {\r\n    return (\r\n      <CommonWrapper {...this.props}>\r\n        <Popup\r\n          hasPin\r\n          opened={this.state.opened}\r\n          anchorElement={this.props.children}\r\n          positions={this.getPositions()}\r\n          backgroundColor={HINT_BACKGROUND_COLOR}\r\n          borderColor={HINT_BORDER_COLOR}\r\n          disableAnimations={this.props.disableAnimations}\r\n          onMouseEnter={this.handleMouseEnter}\r\n          onMouseLeave={this.handleMouseLeave}\r\n          useWrapper={this.props.useWrapper}\r\n        >\r\n          {this.renderContent()}\r\n        </Popup>\r\n      </CommonWrapper>\r\n    );\r\n  }\r\n\r\n  private renderContent() {\r\n    if (!this.props.text) {\r\n      return null;\r\n    }\r\n\r\n    const { pos, maxWidth } = this.props;\r\n    const className = cn({\r\n      [jsStyles.content(this.theme)]: true,\r\n      [jsStyles.contentCenter(this.theme)]: pos === 'top' || pos === 'bottom',\r\n    });\r\n    return (\r\n      <div className={className} style={{ maxWidth }}>\r\n        {this.props.text}\r\n      </div>\r\n    );\r\n  }\r\n\r\n  private getPositions = (): PopupPosition[] => {\r\n    return Positions.filter(x => x.startsWith(this.props.pos));\r\n  };\r\n\r\n  private handleMouseEnter = (e: MouseEventType) => {\r\n    if (!this.props.manual && !this.timer) {\r\n      this.timer = window.setTimeout(this.open, 400);\r\n    }\r\n\r\n    if (this.props.onMouseEnter) {\r\n      this.props.onMouseEnter(e);\r\n    }\r\n  };\r\n\r\n  private handleMouseLeave = (e: MouseEventType) => {\r\n    if (!this.props.manual && this.timer) {\r\n      clearTimeout(this.timer);\r\n      this.timer = null;\r\n      this.setState({ opened: false });\r\n    }\r\n\r\n    if (this.props.onMouseLeave) {\r\n      this.props.onMouseLeave(e);\r\n    }\r\n  };\r\n\r\n  private open = () => {\r\n    this.setState({ opened: true });\r\n  };\r\n}\r\n"]}
+{"version":3,"sources":["Hint.tsx"],"names":["HINT_BORDER_COLOR","Positions","Hint","responsiveLayout","isMobileLayout","state","opened","props","manual","timer","theme","getPositions","filter","x","startsWith","pos","handleMouseEnter","e","window","setTimeout","open","onMouseEnter","handleMouseLeave","clearTimeout","setState","onMouseLeave","close","UNSAFE_componentWillReceiveProps","nextProps","componentWillUnmount","render","ThemeFactory","create","popupPinOffset","hintPinOffset","popupMargin","hintMargin","popupBorder","hintBorder","popupBorderRadius","hintBorderRadius","renderMobile","renderMain","children","undefined","renderContent","hintBgColor","disableAnimations","useWrapper","text","maxWidth","className","styles","content","contentCenter","mobileContent","React","Component","__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, PopupPosition } 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';\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   * В _\"ручном режиме\"_ подcказку можно активировать только задав значение пропу `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:\n    | 'top'\n    | 'right'\n    | 'bottom'\n    | 'left'\n    | 'top left'\n    | 'top center'\n    | 'top right'\n    | 'bottom left'\n    | 'bottom center'\n    | 'bottom right'\n    | 'left top'\n    | 'left middle'\n    | 'left bottom'\n    | 'right top'\n    | 'right middle'\n    | 'right bottom';\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: PopupPosition[] = [\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\nexport class Hint extends React.Component<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\n  public UNSAFE_componentWillReceiveProps(nextProps: HintProps) {\n    if (!nextProps.manual) {\n      return;\n    }\n    if (this.timer) {\n      clearTimeout(this.timer);\n      this.timer = null;\n    }\n    if (nextProps.opened !== this.props.opened) {\n      this.setState({ opened: !!nextProps.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 {...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        >\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 = (): PopupPosition[] => {\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/Hint/Hint.md

@@ -1,3 +1,42 @@
-```jsx harmony
-<Hint text="World">Hello</Hint>
-```
+Базовый пример всплывающей подсказки.
+
+```jsx harmony
+<Hint text="Подсказка">Базовая</Hint>
+```
+
+Пример подсказки, всегда всплывающей слева.
+
+```jsx harmony
+<Hint pos={"left"} text="Подсказка слева">Всегда всплывает слева</Hint>
+```
+
+Пример всплывающей подсказки с ограниченной шириной.
+```jsx harmony
+<Hint
+  maxWidth="150px"
+  text="Очень много текста, рассказывающего про этот очень непонятный элемент"
+  >
+  Очень непонятный элемент
+</Hint>
+```
+
+Пример всплывающей подсказки, открытие которой контролируется кнопкой.
+
+```jsx harmony
+import { Button, Gapped } from '@skbkontur/react-ui';
+
+const [isOpen, setIsOpen] = React.useState(false);
+
+<Gapped>
+  <Hint opened={isOpen} manual text="Подсказка">Управляемая удалённо</Hint>
+  <Button onClick={() => setIsOpen(!isOpen)}>
+    {isOpen ? "Закрыть подсказку" : "Открыть подсказку"}
+  </Button>
+</Gapped>
+```
+
+Пример подсказки, всплывающей без анимации.
+
+```jsx harmony
+<Hint disableAnimations text={"Нет анимации :("}>Есть анимация?</Hint>
+```

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

@@ -1,5 +1,6 @@
 import { Theme } from '../../lib/theming/Theme';
-export declare const jsStyles: {
+export declare const styles: {
     content(t: Theme): string;
+    mobileContent(t: Theme): string;
     contentCenter(t: Theme): string;
 };

package/cjs/components/Hint/Hint.styles.js

@@ -1,9 +1,9 @@
-"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");exports.__esModule = true;exports.jsStyles = void 0;var _taggedTemplateLiteralLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteralLoose"));
-var _Emotion = require("../../lib/theming/Emotion");var _templateObject, _templateObject2;
+"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");exports.__esModule = true;exports.styles = void 0;var _taggedTemplateLiteralLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteralLoose"));
+var _Emotion = require("../../lib/theming/Emotion");var _templateObject, _templateObject2, _templateObject3;
 
-var styles = {
+var styles = (0, _Emotion.memoizeStyle)({
   content: function content(t) {
-    return (0, _Emotion.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2.default)(["\n      box-sizing: border-box;\n      color: ", ";\n      font-size: ", ";\n      line-height: ", "\n      max-width: ", ";\n      overflow-wrap: break-word;\n      padding: ", " ", ";\n      word-break: break-word;\n      word-wrap: break-word;\n    "])),
+    return (0, _Emotion.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2.default)(["\n      box-sizing: border-box;\n      color: ", ";\n      font-size: ", ";\n      line-height: ", ";\n      max-width: ", ";\n      overflow-wrap: break-word;\n      padding: ", " ", ";\n      word-break: break-word;\n      word-wrap: break-word;\n    "])),
 
     t.hintColor,
     t.hintFontSize,
@@ -16,11 +16,16 @@ var styles = {
 
   },
 
-  contentCenter: function contentCenter(t) {
-    return (0, _Emotion.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteralLoose2.default)(["\n      text-align: ", ";\n    "])),
-    t.hintTextAlign);
+  mobileContent: function mobileContent(t) {
+    return (0, _Emotion.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteralLoose2.default)(["\n      color: ", ";\n      max-width: 100%;\n      text-align: left;\n    "])),
+    t.mobileHintColor);
 
-  } };
 
 
-var jsStyles = (0, _Emotion.memoizeStyle)(styles);exports.jsStyles = jsStyles;
+  },
+
+  contentCenter: function contentCenter(t) {
+    return (0, _Emotion.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteralLoose2.default)(["\n      text-align: ", ";\n    "])),
+    t.hintTextAlign);
+
+  } });exports.styles = styles;

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

@@ -1 +1 @@
-{"version":3,"sources":["Hint.styles.ts"],"names":["styles","content","t","css","hintColor","hintFontSize","hintLineHeight","hintMaxWidth","hintPaddingY","hintPaddingX","contentCenter","hintTextAlign","jsStyles"],"mappings":";AACA,oD;;AAEA,IAAMA,MAAM,GAAG;AACbC,EAAAA,OADa,mBACLC,CADK,EACK;AAChB,eAAOC,YAAP;;AAEWD,IAAAA,CAAC,CAACE,SAFb;AAGeF,IAAAA,CAAC,CAACG,YAHjB;AAIiBH,IAAAA,CAAC,CAACI,cAJnB;AAKeJ,IAAAA,CAAC,CAACK,YALjB;;AAOaL,IAAAA,CAAC,CAACM,YAPf,EAO+BN,CAAC,CAACO,YAPjC;;;;AAWD,GAbY;;AAebC,EAAAA,aAfa,yBAeCR,CAfD,EAeW;AACtB,eAAOC,YAAP;AACgBD,IAAAA,CAAC,CAACS,aADlB;;AAGD,GAnBY,EAAf;;;AAsBO,IAAMC,QAAQ,GAAG,2BAAaZ,MAAb,CAAjB,C","sourcesContent":["import { Theme } from '../../lib/theming/Theme';\r\nimport { css, memoizeStyle } from '../../lib/theming/Emotion';\r\n\r\nconst styles = {\r\n  content(t: Theme) {\r\n    return css`\r\n      box-sizing: border-box;\r\n      color: ${t.hintColor};\r\n      font-size: ${t.hintFontSize};\r\n      line-height: ${t.hintLineHeight}\r\n      max-width: ${t.hintMaxWidth};\r\n      overflow-wrap: break-word;\r\n      padding: ${t.hintPaddingY} ${t.hintPaddingX};\r\n      word-break: break-word;\r\n      word-wrap: break-word;\r\n    `;\r\n  },\r\n\r\n  contentCenter(t: Theme) {\r\n    return css`\r\n      text-align: ${t.hintTextAlign};\r\n    `;\r\n  },\r\n};\r\n\r\nexport const jsStyles = memoizeStyle(styles);\r\n"]}
+{"version":3,"sources":["Hint.styles.ts"],"names":["styles","content","t","css","hintColor","hintFontSize","hintLineHeight","hintMaxWidth","hintPaddingY","hintPaddingX","mobileContent","mobileHintColor","contentCenter","hintTextAlign"],"mappings":";AACA,oD;;AAEO,IAAMA,MAAM,GAAG,2BAAa;AACjCC,EAAAA,OADiC,mBACzBC,CADyB,EACf;AAChB,eAAOC,YAAP;;AAEWD,IAAAA,CAAC,CAACE,SAFb;AAGeF,IAAAA,CAAC,CAACG,YAHjB;AAIiBH,IAAAA,CAAC,CAACI,cAJnB;AAKeJ,IAAAA,CAAC,CAACK,YALjB;;AAOaL,IAAAA,CAAC,CAACM,YAPf,EAO+BN,CAAC,CAACO,YAPjC;;;;AAWD,GAbgC;;AAejCC,EAAAA,aAfiC,yBAenBR,CAfmB,EAeT;AACtB,eAAOC,YAAP;AACWD,IAAAA,CAAC,CAACS,eADb;;;;AAKD,GArBgC;;AAuBjCC,EAAAA,aAvBiC,yBAuBnBV,CAvBmB,EAuBT;AACtB,eAAOC,YAAP;AACgBD,IAAAA,CAAC,CAACW,aADlB;;AAGD,GA3BgC,EAAb,CAAf,C","sourcesContent":["import { Theme } from '../../lib/theming/Theme';\nimport { css, memoizeStyle } from '../../lib/theming/Emotion';\n\nexport const styles = memoizeStyle({\n  content(t: Theme) {\n    return css`\n      box-sizing: border-box;\n      color: ${t.hintColor};\n      font-size: ${t.hintFontSize};\n      line-height: ${t.hintLineHeight};\n      max-width: ${t.hintMaxWidth};\n      overflow-wrap: break-word;\n      padding: ${t.hintPaddingY} ${t.hintPaddingX};\n      word-break: break-word;\n      word-wrap: break-word;\n    `;\n  },\n\n  mobileContent(t: Theme) {\n    return css`\n      color: ${t.mobileHintColor};\n      max-width: 100%;\n      text-align: left;\n    `;\n  },\n\n  contentCenter(t: Theme) {\n    return css`\n      text-align: ${t.hintTextAlign};\n    `;\n  },\n});\n"]}

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

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

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

@@ -18,9 +18,13 @@ export interface InputProps extends CommonProps, Override<React.InputHTMLAttribu
      * Если `() => ReactNode` применяются только стили для позиционирование
      */
     rightIcon?: InputIconType;
-    /** Состояние ошибки */
+    /**
+     * Cостояние валидации при ошибке.
+     */
     error?: boolean;
-    /** Состояние предупреждения */
+    /**
+     * Cостояние валидации при предупреждении.
+     */
     warning?: boolean;
     /** Режим прозрачной рамки */
     borderless?: boolean;
@@ -106,6 +110,10 @@ export declare class Input extends React.Component<InputProps, InputState> {
      * @public
      */
     blur(): void;
+    /**
+     * @public
+     */
+    getNode(): HTMLInputElement | null;
     /**
      * @public
      */