@skbkontur/react-ui 0.0.0-aaf2aabecb → 0.0.0-bb4cbfe9c6

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

@@ -1,84 +1,25 @@
 import _taggedTemplateLiteralLoose from "@babel/runtime/helpers/esm/taggedTemplateLiteralLoose";
 
-function _templateObject6() {
-  var data = _taggedTemplateLiteralLoose(["\n      margin-left: 0;\n    "]);
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
 
-  _templateObject6 = function _templateObject6() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject5() {
-  var data = _taggedTemplateLiteralLoose(["\n      margin-left: -1px;\n    "]);
-
-  _templateObject5 = function _templateObject5() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject4() {
-  var data = _taggedTemplateLiteralLoose(["\n      flex-basis: 100%;\n    "]);
-
-  _templateObject4 = function _templateObject4() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject3() {
-  var data = _taggedTemplateLiteralLoose(["\n      flex-grow: 1;\n      flex-shrink: 1;\n    "]);
-
-  _templateObject3 = function _templateObject3() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject2() {
-  var data = _taggedTemplateLiteralLoose(["\n      flex-shrink: 0;\n      display: inline-block;\n    "]);
-
-  _templateObject2 = function _templateObject2() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject() {
-  var data = _taggedTemplateLiteralLoose(["\n      display: inline-flex;\n    "]);
-
-  _templateObject = function _templateObject() {
-    return data;
-  };
-
-  return data;
-}
-
-import { css, memoizeStyle } from "..\\..\\..\\lib\\theming\\Emotion";
-var styles = {
+import { css, memoizeStyle } from "../../../lib/theming/Emotion";
+export var styles = memoizeStyle({
   root: function root() {
-    return css(_templateObject());
+    return css(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n      display: inline-flex;\n      line-height: normal;\n    "])));
   },
   fixed: function fixed() {
-    return css(_templateObject2());
+    return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n      flex-shrink: 0;\n      display: inline-block;\n    "])));
   },
   stretch: function stretch() {
-    return css(_templateObject3());
+    return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n      flex-grow: 1;\n      flex-shrink: 1;\n    "])));
   },
   stretchFallback: function stretchFallback() {
-    return css(_templateObject4());
+    return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n      flex-basis: 100%;\n    "])));
   },
   item: function item() {
-    return css(_templateObject5());
+    return css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\n      margin-left: -1px;\n    "])));
   },
   itemFirst: function itemFirst() {
-    return css(_templateObject6());
+    return css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteralLoose(["\n      margin-left: 0;\n    "])));
   }
-};
-export var jsStyles = memoizeStyle(styles);
+});

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

@@ -1 +1 @@
-{"version":3,"sources":["Group.styles.ts"],"names":["css","memoizeStyle","styles","root","fixed","stretch","stretchFallback","item","itemFirst","jsStyles"],"mappings":"usCAAA,SAASA,GAAT,EAAcC,YAAd,QAAkC,2BAAlC;;AAEA,IAAMC,MAAM,GAAG;AACbC,EAAAA,IADa,kBACN;AACL,WAAOH,GAAP;;;AAGD,GALY;;AAObI,EAAAA,KAPa,mBAOL;AACN,WAAOJ,GAAP;;;;AAID,GAZY;;AAcbK,EAAAA,OAda,qBAcH;AACR,WAAOL,GAAP;;;;AAID,GAnBY;;AAqBbM,EAAAA,eArBa,6BAqBK;AAChB,WAAON,GAAP;;;AAGD,GAzBY;;AA2BbO,EAAAA,IA3Ba,kBA2BN;AACL,WAAOP,GAAP;;;AAGD,GA/BY;;AAiCbQ,EAAAA,SAjCa,uBAiCD;AACV,WAAOR,GAAP;;;AAGD,GArCY,EAAf;;;AAwCA,OAAO,IAAMS,QAAQ,GAAGR,YAAY,CAACC,MAAD,CAA7B","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":["css","memoizeStyle","styles","root","fixed","stretch","stretchFallback","item","itemFirst"],"mappings":"8MAAA,SAASA,GAAT,EAAcC,YAAd,QAAkC,2BAAlC;;AAEA,OAAO,IAAMC,MAAM,GAAGD,YAAY,CAAC;AACjCE,EAAAA,IADiC,kBAC1B;AACL,WAAOH,GAAP;;;;AAID,GANgC;;AAQjCI,EAAAA,KARiC,mBAQzB;AACN,WAAOJ,GAAP;;;;AAID,GAbgC;;AAejCK,EAAAA,OAfiC,qBAevB;AACR,WAAOL,GAAP;;;;AAID,GApBgC;;AAsBjCM,EAAAA,eAtBiC,6BAsBf;AAChB,WAAON,GAAP;;;AAGD,GA1BgC;;AA4BjCO,EAAAA,IA5BiC,kBA4B1B;AACL,WAAOP,GAAP;;;AAGD,GAhCgC;;AAkCjCQ,EAAAA,SAlCiC,uBAkCrB;AACV,WAAOR,GAAP;;;AAGD,GAtCgC,EAAD,CAA3B","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/components/Group/Group.styles/package.json

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

package/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/components/Group/index/index.js

@@ -1 +1 @@
-export * from "..\\Group";
+export * from "../Group";

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

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

package/components/Group/index/package.json

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

package/components/Group/package.json

@@ -1,5 +1,5 @@
 {
-  "main": "..\\..\\cjs\\components\\Group\\index.js",
+  "main": "../../cjs/components/Group/index.js",
   "module": "index",
   "types": "index.d.ts",
   "sideEffects": false

package/components/Hint/Hint/Hint.js

@@ -1,17 +1,26 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
 import _inheritsLoose from "@babel/runtime/helpers/esm/inheritsLoose";
+
+var _class, _class2, _temp;
+
 import React from 'react';
-import cn from 'classnames';
-import { Popup } from "..\\..\\..\\internal\\Popup";
-import { jsStyles } from "..\\Hint.styles";
-var HINT_BACKGROUND_COLOR = 'rgba(51, 51, 51, 0.8)';
+import { ThemeContext } from "../../../lib/theming/ThemeContext";
+import { ThemeFactory } from "../../../lib/theming/ThemeFactory";
+import { Popup } from "../../../internal/Popup";
+import { isTestEnv } from "../../../lib/currentEnvironment";
+import { CommonWrapper } from "../../../internal/CommonWrapper";
+import { cx } from "../../../lib/theming/Emotion";
+import { responsiveLayout } from "../../ResponsiveLayout/decorator";
+import { rootNode } from "../../../lib/rootNode";
+import { styles } from "../Hint.styles";
 var HINT_BORDER_COLOR = 'transparent';
-var POPUP_MARGIN = 15;
-var PIN_OFFSET = 8;
 var Positions = ['top center', 'top left', 'top right', 'bottom center', 'bottom left', 'bottom right', 'left middle', 'left top', 'left bottom', 'right middle', 'right top', 'right bottom'];
-export var Hint =
-/*#__PURE__*/
-function (_React$Component) {
-  _inheritsLoose(Hint, _React$Component);
+/**
+ * Всплывающая подсказка, которая по умолчанию отображается при наведении на элемент. <br/> Можно задать другие условия отображения.
+ */
+
+export var Hint = responsiveLayout(_class = rootNode(_class = (_temp = _class2 = /*#__PURE__*/function (_React$PureComponent) {
+  _inheritsLoose(Hint, _React$PureComponent);
 
   function Hint() {
     var _this;
@@ -20,7 +29,7 @@ function (_React$Component) {
       args[_key] = arguments[_key];
     }
 
-    _this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;
+    _this = _React$PureComponent.call.apply(_React$PureComponent, [this].concat(args)) || this;
     _this.state = {
       opened: _this.props.manual ? !!_this.props.opened : false
     };
@@ -57,6 +66,12 @@ function (_React$Component) {
       }
     };
 
+    _this.close = function () {
+      _this.setState({
+        opened: false
+      });
+    };
+
     _this.open = function () {
       _this.setState({
         opened: true
@@ -68,14 +83,19 @@ function (_React$Component) {
 
   var _proto = Hint.prototype;
 
-  _proto.UNSAFE_componentWillReceiveProps = function UNSAFE_componentWillReceiveProps(nextProps) {
-    if (!nextProps.manual) {
+  _proto.componentDidUpdate = function componentDidUpdate(prevProps) {
+    if (!this.props.manual) {
       return;
     }
 
-    if (nextProps.opened !== this.props.opened) {
+    if (this.timer) {
+      clearTimeout(this.timer);
+      this.timer = null;
+    }
+
+    if (this.props.opened !== prevProps.opened) {
       this.setState({
-        opened: !!nextProps.opened
+        opened: !!this.props.opened
       });
     }
   };
@@ -88,24 +108,50 @@ function (_React$Component) {
   };
 
   _proto.render = function render() {
-    return React.createElement(Popup, {
+    var _this2 = this;
+
+    return /*#__PURE__*/React.createElement(ThemeContext.Consumer, null, function (theme) {
+      _this2.theme = theme;
+      return /*#__PURE__*/React.createElement(ThemeContext.Provider, {
+        value: 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.createElement(CommonWrapper, this.props, /*#__PURE__*/React.createElement(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.createElement(CommonWrapper, _extends({
+      rootNodeRef: this.setRootNode
+    }, this.props), /*#__PURE__*/React.createElement(Popup, {
       hasPin: true,
-      margin: POPUP_MARGIN,
       opened: this.state.opened,
       anchorElement: this.props.children,
       positions: this.getPositions(),
-      backgroundColor: HINT_BACKGROUND_COLOR,
+      backgroundColor: this.theme.hintBgColor,
       borderColor: HINT_BORDER_COLOR,
       disableAnimations: this.props.disableAnimations,
-      pinOffset: PIN_OFFSET,
       onMouseEnter: this.handleMouseEnter,
       onMouseLeave: this.handleMouseLeave,
       useWrapper: this.props.useWrapper
-    }, this.renderContent());
+    }, this.renderContent()));
   };
 
   _proto.renderContent = function renderContent() {
-    var _cn;
+    var _cx;
 
     if (!this.props.text) {
       return null;
@@ -114,23 +160,21 @@ function (_React$Component) {
     var _this$props = this.props,
         pos = _this$props.pos,
         maxWidth = _this$props.maxWidth;
-    var className = cn((_cn = {}, _cn[jsStyles.content()] = true, _cn[jsStyles.contentCenter()] = pos === 'top' || pos === 'bottom', _cn));
-    return React.createElement("div", {
+    var className = cx((_cx = {}, _cx[styles.content(this.theme)] = true, _cx[styles.contentCenter(this.theme)] = pos === 'top' || pos === 'bottom', _cx[styles.mobileContent(this.theme)] = this.isMobileLayout, _cx));
+    return /*#__PURE__*/React.createElement("div", {
       className: className,
       style: {
-        maxWidth: maxWidth
+        maxWidth: this.isMobileLayout ? '100%' : maxWidth
       }
     }, this.props.text);
   };
 
   return Hint;
-}(React.Component);
-Hint.__KONTUR_REACT_UI__ = 'Hint';
-Hint.defaultProps = {
+}(React.PureComponent), _class2.__KONTUR_REACT_UI__ = 'Hint', _class2.defaultProps = {
   pos: 'top',
   manual: false,
   opened: false,
   maxWidth: 200,
-  disableAnimations: Boolean(process.env.enableReactTesting),
-  useWrapper: true
-};
+  disableAnimations: isTestEnv,
+  useWrapper: false
+}, _temp)) || _class) || _class;

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

@@ -1 +1 @@
-{"version":3,"sources":["Hint.tsx"],"names":["React","cn","Popup","jsStyles","HINT_BACKGROUND_COLOR","HINT_BORDER_COLOR","POPUP_MARGIN","PIN_OFFSET","Positions","Hint","state","opened","props","manual","timer","getPositions","filter","x","startsWith","pos","handleMouseEnter","e","window","setTimeout","open","onMouseEnter","handleMouseLeave","clearTimeout","setState","onMouseLeave","UNSAFE_componentWillReceiveProps","nextProps","componentWillUnmount","render","children","disableAnimations","useWrapper","renderContent","text","maxWidth","className","content","contentCenter","Component","__KONTUR_REACT_UI__","defaultProps","Boolean","process","env","enableReactTesting"],"mappings":"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","sourcesContent":["import React from 'react';\r\nimport cn from 'classnames';\r\n\r\nimport { Popup, PopupPosition } from '../../internal/Popup';\r\nimport { Nullable } from '../../typings/utility-types';\r\nimport { MouseEventType } from '../../typings/event-types';\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\nconst POPUP_MARGIN = 15;\r\nconst PIN_OFFSET = 8;\r\n\r\nexport interface HintProps {\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: Boolean(process.env.enableReactTesting),\r\n    useWrapper: true,\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\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      <Popup\r\n        hasPin\r\n        margin={POPUP_MARGIN}\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        pinOffset={PIN_OFFSET}\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    );\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()]: true,\r\n      [jsStyles.contentCenter()]: 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":["React","ThemeContext","ThemeFactory","Popup","isTestEnv","CommonWrapper","cx","responsiveLayout","rootNode","styles","HINT_BORDER_COLOR","Positions","Hint","state","opened","props","manual","timer","getPositions","filter","x","startsWith","pos","handleMouseEnter","e","window","setTimeout","open","onMouseEnter","handleMouseLeave","clearTimeout","setState","onMouseLeave","close","componentDidUpdate","prevProps","componentWillUnmount","render","theme","create","popupPinOffset","hintPinOffset","popupMargin","hintMargin","popupBorder","hintBorder","popupBorderRadius","hintBorderRadius","isMobileLayout","renderMobile","renderMain","children","undefined","renderContent","setRootNode","hintBgColor","disableAnimations","useWrapper","text","maxWidth","className","content","contentCenter","mobileContent","PureComponent","__KONTUR_REACT_UI__","defaultProps"],"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/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   * В _\"ручном режиме\"_ под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\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  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        >\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/components/Hint/Hint/package.json

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

package/components/Hint/Hint.d.ts

@@ -1,22 +1,62 @@
 import React from 'react';
 import { MouseEventType } from '../../typings/event-types';
-export interface HintProps {
+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;
 }
-export declare class Hint extends React.Component<HintProps, HintState> {
+/**
+ * Всплывающая подсказка, которая по умолчанию отображается при наведении на элемент. <br/> Можно задать другие условия отображения.
+ */
+export declare class Hint extends React.PureComponent<HintProps, HintState> {
     static __KONTUR_REACT_UI__: string;
+    private isMobileLayout;
     static defaultProps: {
         pos: string;
         manual: boolean;
@@ -27,12 +67,17 @@ export declare class Hint extends React.Component<HintProps, HintState> {
     };
     state: HintState;
     private timer;
-    UNSAFE_componentWillReceiveProps(nextProps: HintProps): void;
+    private theme;
+    private setRootNode;
+    componentDidUpdate(prevProps: 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/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/components/Hint/Hint.styles/Hint.styles.js

@@ -1,32 +1,16 @@
 import _taggedTemplateLiteralLoose from "@babel/runtime/helpers/esm/taggedTemplateLiteralLoose";
 
-function _templateObject2() {
-  var data = _taggedTemplateLiteralLoose(["\n      text-align: center;\n    "]);
+var _templateObject, _templateObject2, _templateObject3;
 
-  _templateObject2 = function _templateObject2() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject() {
-  var data = _taggedTemplateLiteralLoose(["\n      box-sizing: border-box;\n      color: #fff;\n      font-size: 14px;\n      max-width: 200px;\n      overflow-wrap: break-word;\n      padding: 6px 8px;\n      word-break: break-word;\n      word-wrap: break-word;\n    "]);
-
-  _templateObject = function _templateObject() {
-    return data;
-  };
-
-  return data;
-}
-
-import { css, memoizeStyle } from "..\\..\\..\\lib\\theming\\Emotion";
-var styles = {
-  content: function content() {
-    return css(_templateObject());
+import { css, memoizeStyle } from "../../../lib/theming/Emotion";
+export var styles = memoizeStyle({
+  content: function content(t) {
+    return css(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\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, t.hintLineHeight, t.hintMaxWidth, t.hintPaddingY, t.hintPaddingX);
+  },
+  mobileContent: function mobileContent(t) {
+    return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n      color: ", ";\n      max-width: 100%;\n      text-align: left;\n    "])), t.mobileHintColor);
   },
-  contentCenter: function contentCenter() {
-    return css(_templateObject2());
+  contentCenter: function contentCenter(t) {
+    return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n      text-align: ", ";\n    "])), t.hintTextAlign);
   }
-};
-export var jsStyles = memoizeStyle(styles);
+});

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

@@ -1 +1 @@
-{"version":3,"sources":["Hint.styles.ts"],"names":["css","memoizeStyle","styles","content","contentCenter","jsStyles"],"mappings":"0oBAAA,SAASA,GAAT,EAAcC,YAAd,QAAkC,2BAAlC;;AAEA,IAAMC,MAAM,GAAG;AACbC,EAAAA,OADa,qBACH;AACR,WAAOH,GAAP;;;;;;;;;;AAUD,GAZY;;AAcbI,EAAAA,aAda,2BAcG;AACd,WAAOJ,GAAP;;;AAGD,GAlBY,EAAf;;;AAqBA,OAAO,IAAMK,QAAQ,GAAGJ,YAAY,CAACC,MAAD,CAA7B","sourcesContent":["import { css, memoizeStyle } from '../../lib/theming/Emotion';\r\n\r\nconst styles = {\r\n  content() {\r\n    return css`\r\n      box-sizing: border-box;\r\n      color: #fff;\r\n      font-size: 14px;\r\n      max-width: 200px;\r\n      overflow-wrap: break-word;\r\n      padding: 6px 8px;\r\n      word-break: break-word;\r\n      word-wrap: break-word;\r\n    `;\r\n  },\r\n\r\n  contentCenter() {\r\n    return css`\r\n      text-align: center;\r\n    `;\r\n  },\r\n};\r\n\r\nexport const jsStyles = memoizeStyle(styles);\r\n"]}
+{"version":3,"sources":["Hint.styles.ts"],"names":["css","memoizeStyle","styles","content","t","hintColor","hintFontSize","hintLineHeight","hintMaxWidth","hintPaddingY","hintPaddingX","mobileContent","mobileHintColor","contentCenter","hintTextAlign"],"mappings":";AACA,SAASA,GAAT,EAAcC,YAAd,QAAkC,2BAAlC;;AAEA,OAAO,IAAMC,MAAM,GAAGD,YAAY,CAAC;AACjCE,EAAAA,OADiC,mBACzBC,CADyB,EACf;AAChB,WAAOJ,GAAP;;AAEWI,IAAAA,CAAC,CAACC,SAFb;AAGeD,IAAAA,CAAC,CAACE,YAHjB;AAIiBF,IAAAA,CAAC,CAACG,cAJnB;AAKeH,IAAAA,CAAC,CAACI,YALjB;;AAOaJ,IAAAA,CAAC,CAACK,YAPf,EAO+BL,CAAC,CAACM,YAPjC;;;;AAWD,GAbgC;;AAejCC,EAAAA,aAfiC,yBAenBP,CAfmB,EAeT;AACtB,WAAOJ,GAAP;AACWI,IAAAA,CAAC,CAACQ,eADb;;;;AAKD,GArBgC;;AAuBjCC,EAAAA,aAvBiC,yBAuBnBT,CAvBmB,EAuBT;AACtB,WAAOJ,GAAP;AACgBI,IAAAA,CAAC,CAACU,aADlB;;AAGD,GA3BgC,EAAD,CAA3B","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/components/Hint/Hint.styles/package.json

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

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

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

package/components/Hint/index/index.js

@@ -1 +1 @@
-export * from "..\\Hint";
+export * from "../Hint";

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

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

package/components/Hint/index/package.json

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

package/components/Hint/package.json

@@ -1,5 +1,5 @@
 {
-  "main": "..\\..\\cjs\\components\\Hint\\index.js",
+  "main": "../../cjs/components/Hint/index.js",
   "module": "index",
   "types": "index.d.ts",
   "sideEffects": false