@skbkontur/react-ui 0.0.0-2ac4c133dd → 0.0.0-2d059f9369

package/components/Hint/Hint/Hint.js

@@ -4,22 +4,26 @@ import _inheritsLoose from "@babel/runtime/helpers/esm/inheritsLoose";
 var _class, _class2, _temp;
 
 import React from 'react';
+import { globalObject } from '@skbkontur/global-object';
+import isEqual from 'lodash.isequal';
+import { ReactUIFeatureFlagsContext, getFullReactUIFlagsContext } from "../../../lib/featureFlagsContext";
 import { ThemeContext } from "../../../lib/theming/ThemeContext";
 import { ThemeFactory } from "../../../lib/theming/ThemeFactory";
-import { Popup } from "../../../internal/Popup";
+import { DUMMY_LOCATION, 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 { createPropsGetter } from "../../../lib/createPropsGetter";
+import { isTheme2022 } from "../../../lib/theming/ThemeHelpers";
 import { styles } from "../Hint.styles";
 var HINT_BORDER_COLOR = 'transparent';
 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
 /**
- * Всплывающая подсказка, которая по умолчанию отображается при наведении на элемент. <br/> Можно задать другие условия отображения.
- */
-
-export var Hint = responsiveLayout(_class = rootNode(_class = (_temp = _class2 = /*#__PURE__*/function (_React$PureComponent) {
+* Всплывающая подсказка, которая по умолчанию отображается при наведении на элемент. <br/> Можно задать другие условия отображения.
+*/
+var Hint = rootNode(_class = (_temp = _class2 = /*#__PURE__*/function (_React$PureComponent) {
   _inheritsLoose(Hint, _React$PureComponent);
 
   function Hint() {
@@ -30,10 +34,12 @@ export var Hint = responsiveLayout(_class = rootNode(_class = (_temp = _class2 =
     }
 
     _this = _React$PureComponent.call.apply(_React$PureComponent, [this].concat(args)) || this;
+    _this.getProps = createPropsGetter(Hint.defaultProps);
     _this.state = {
-      opened: _this.props.manual ? !!_this.props.opened : false
+      opened: _this.getProps().manual ? !!_this.getProps().opened : false,
+      position: DUMMY_LOCATION.position
     };
-    _this.timer = null;
+    _this.positions = null;
     _this.popupRef = /*#__PURE__*/React.createRef();
 
     _this.getAnchorElement = function () {
@@ -43,14 +49,55 @@ export var Hint = responsiveLayout(_class = rootNode(_class = (_temp = _class2 =
     };
 
     _this.getPositions = function () {
+      if (_this.featureFlags.hintAddDynamicPositioning) {
+        if (!_this.positions) {
+          var _this$getProps = _this.getProps(),
+              allowedPositions = _this$getProps.allowedPositions,
+              pos = _this$getProps.pos;
+
+          var priorityPosition;
+
+          switch (pos) {
+            case 'top':
+              priorityPosition = 'top center';
+              break;
+
+            case 'bottom':
+              priorityPosition = 'bottom center';
+              break;
+
+            case 'left':
+              priorityPosition = 'left middle';
+              break;
+
+            case 'right':
+              priorityPosition = 'right middle';
+              break;
+
+            default:
+              priorityPosition = pos;
+          }
+
+          var index = allowedPositions.indexOf(priorityPosition);
+
+          if (index === -1) {
+            throw new Error('Unexpected position passed to Hint. Expected one of: ' + allowedPositions.join(', '));
+          }
+
+          _this.positions = [].concat(allowedPositions.slice(index), allowedPositions.slice(0, index));
+        }
+
+        return _this.positions;
+      }
+
       return Positions.filter(function (x) {
-        return x.startsWith(_this.props.pos);
+        return x.startsWith(_this.getProps().pos);
       });
     };
 
     _this.handleMouseEnter = function (e) {
-      if (!_this.props.manual && !_this.timer) {
-        _this.timer = window.setTimeout(_this.open, 400);
+      if (!_this.getProps().manual && !_this.timer) {
+        _this.timer = globalObject.setTimeout(_this.open, 400);
       }
 
       if (_this.props.onMouseEnter) {
@@ -59,8 +106,8 @@ export var Hint = responsiveLayout(_class = rootNode(_class = (_temp = _class2 =
     };
 
     _this.handleMouseLeave = function (e) {
-      if (!_this.props.manual && _this.timer) {
-        clearTimeout(_this.timer);
+      if (!_this.getProps().manual && _this.timer) {
+        globalObject.clearTimeout(_this.timer);
         _this.timer = null;
 
         _this.setState({
@@ -73,12 +120,6 @@ export var Hint = responsiveLayout(_class = rootNode(_class = (_temp = _class2 =
       }
     };
 
-    _this.close = function () {
-      _this.setState({
-        opened: false
-      });
-    };
-
     _this.open = function () {
       _this.setState({
         opened: true
@@ -91,25 +132,40 @@ export var Hint = responsiveLayout(_class = rootNode(_class = (_temp = _class2 =
   var _proto = Hint.prototype;
 
   _proto.componentDidUpdate = function componentDidUpdate(prevProps) {
-    if (!this.props.manual) {
+    var _this$getProps2 = this.getProps(),
+        opened = _this$getProps2.opened,
+        manual = _this$getProps2.manual,
+        pos = _this$getProps2.pos,
+        allowedPositions = _this$getProps2.allowedPositions;
+
+    if (!manual) {
       return;
     }
 
     if (this.timer) {
-      clearTimeout(this.timer);
+      globalObject.clearTimeout(this.timer);
       this.timer = null;
     }
 
-    if (this.props.opened !== prevProps.opened) {
+    if (opened !== prevProps.opened) {
       this.setState({
-        opened: !!this.props.opened
+        opened: !!opened
       });
     }
+
+    if (this.featureFlags.hintAddDynamicPositioning) {
+      var posChanged = prevProps.pos !== pos;
+      var allowedChanged = !isEqual(prevProps.allowedPositions, allowedPositions);
+
+      if (posChanged || allowedChanged) {
+        this.positions = null;
+      }
+    }
   };
 
   _proto.componentWillUnmount = function componentWillUnmount() {
     if (this.timer) {
-      clearTimeout(this.timer);
+      globalObject.clearTimeout(this.timer);
       this.timer = null;
     }
   };
@@ -117,45 +173,53 @@ export var Hint = responsiveLayout(_class = rootNode(_class = (_temp = _class2 =
   _proto.render = function render() {
     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());
+    return /*#__PURE__*/React.createElement(ReactUIFeatureFlagsContext.Consumer, null, function (flags) {
+      _this2.featureFlags = getFullReactUIFlagsContext(flags);
+      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.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,
-      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,
-      ref: this.popupRef
-    }, this.renderContent()));
+    var _this3 = this;
+
+    var _this$getProps3 = this.getProps(),
+        disableAnimations = _this$getProps3.disableAnimations,
+        useWrapper = _this$getProps3.useWrapper;
+
+    return /*#__PURE__*/React.createElement(ReactUIFeatureFlagsContext.Consumer, null, function (flags) {
+      var hasPin = !getFullReactUIFlagsContext(flags).kebabHintRemovePin || !isTheme2022(_this3.theme);
+      return /*#__PURE__*/React.createElement(CommonWrapper, _extends({
+        rootNodeRef: _this3.setRootNode
+      }, _this3.props), /*#__PURE__*/React.createElement(Popup, {
+        hasPin: hasPin,
+        opened: _this3.state.opened,
+        anchorElement: _this3.props.children,
+        positions: _this3.getPositions(),
+        backgroundColor: _this3.theme.hintBgColor,
+        borderColor: HINT_BORDER_COLOR,
+        onPositionChange: function onPositionChange(position) {
+          return _this3.setState({
+            position: position
+          });
+        },
+        disableAnimations: disableAnimations,
+        onMouseEnter: _this3.handleMouseEnter,
+        onMouseLeave: _this3.handleMouseLeave,
+        useWrapper: useWrapper,
+        ref: _this3.popupRef,
+        withoutMobile: true
+      }, _this3.renderContent()));
+    });
   };
 
   _proto.renderContent = function renderContent() {
@@ -165,14 +229,15 @@ export var Hint = responsiveLayout(_class = rootNode(_class = (_temp = _class2 =
       return null;
     }
 
-    var _this$props = this.props,
-        pos = _this$props.pos,
-        maxWidth = _this$props.maxWidth;
-    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));
+    var _this$getProps4 = this.getProps(),
+        maxWidth = _this$getProps4.maxWidth;
+
+    var centerAlignPositions = ['top', 'top center', 'bottom', 'bottom center'];
+    var className = cx((_cx = {}, _cx[styles.content(this.theme)] = true, _cx[styles.contentCenter(this.theme)] = centerAlignPositions.includes(this.state.position), _cx));
     return /*#__PURE__*/React.createElement("div", {
       className: className,
       style: {
-        maxWidth: this.isMobileLayout ? '100%' : maxWidth
+        maxWidth: maxWidth
       }
     }, this.props.text);
   };
@@ -183,6 +248,7 @@ export var Hint = responsiveLayout(_class = rootNode(_class = (_temp = _class2 =
   manual: false,
   opened: false,
   maxWidth: 200,
+  allowedPositions: Positions,
   disableAnimations: isTestEnv,
   useWrapper: false
-}, _temp)) || _class) || _class;
+}, _temp)) || _class;

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

@@ -1 +1 @@
-{"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","popupRef","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","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, 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"]}
+{"version":3,"sources":["Hint.tsx"],"names":["React","globalObject","isEqual","ReactUIFeatureFlagsContext","getFullReactUIFlagsContext","ThemeContext","ThemeFactory","DUMMY_LOCATION","Popup","isTestEnv","CommonWrapper","cx","rootNode","createPropsGetter","isTheme2022","styles","HINT_BORDER_COLOR","Positions","Hint","getProps","defaultProps","state","opened","manual","position","positions","popupRef","createRef","getAnchorElement","current","anchorElement","getPositions","featureFlags","hintAddDynamicPositioning","allowedPositions","pos","priorityPosition","index","indexOf","Error","join","slice","filter","x","startsWith","handleMouseEnter","e","timer","setTimeout","open","props","onMouseEnter","handleMouseLeave","clearTimeout","setState","onMouseLeave","componentDidUpdate","prevProps","posChanged","allowedChanged","componentWillUnmount","render","flags","theme","create","popupPinOffset","hintPinOffset","popupMargin","hintMargin","popupBorder","hintBorder","popupBorderRadius","hintBorderRadius","renderMain","disableAnimations","useWrapper","hasPin","kebabHintRemovePin","setRootNode","children","hintBgColor","renderContent","text","maxWidth","centerAlignPositions","className","content","contentCenter","includes","PureComponent","__KONTUR_REACT_UI__"],"mappings":"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","sourcesContent":["import React from 'react';\nimport { globalObject, SafeTimer } from '@skbkontur/global-object';\nimport isEqual from 'lodash.isequal';\n\nimport {\n  ReactUIFeatureFlags,\n  ReactUIFeatureFlagsContext,\n  getFullReactUIFlagsContext,\n} from '../../lib/featureFlagsContext';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { ThemeFactory } from '../../lib/theming/ThemeFactory';\nimport { Theme } from '../../lib/theming/Theme';\nimport { DUMMY_LOCATION, 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 { rootNode, TSetRootNode } from '../../lib/rootNode';\nimport { InstanceWithAnchorElement } from '../../lib/InstanceWithAnchorElement';\nimport { createPropsGetter } from '../../lib/createPropsGetter';\nimport { isTheme2022 } from '../../lib/theming/ThemeHelpers';\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   * за край экрана, то будет выбрана следующая позиция. Обязательно должен включать позицию указанную в `pos`.\n   * Для применения этого пропа необходимо включить фиче-флаг hintAddDynamicPositioning.\n   */\n  allowedPositions?: PopupPositionsType[];\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  position: PopupPositionsType;\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\ntype DefaultProps = Required<\n  Pick<HintProps, 'pos' | 'allowedPositions' | 'manual' | 'opened' | 'maxWidth' | 'disableAnimations' | 'useWrapper'>\n>;\n\n/**\n * Всплывающая подсказка, которая по умолчанию отображается при наведении на элемент. <br/> Можно задать другие условия отображения.\n */\n@rootNode\nexport class Hint extends React.PureComponent<HintProps, HintState> implements InstanceWithAnchorElement {\n  public static __KONTUR_REACT_UI__ = 'Hint';\n\n  public static defaultProps: DefaultProps = {\n    pos: 'top',\n    manual: false,\n    opened: false,\n    maxWidth: 200,\n    allowedPositions: Positions,\n    disableAnimations: isTestEnv,\n    useWrapper: false,\n  };\n\n  private getProps = createPropsGetter(Hint.defaultProps);\n\n  public state: HintState = {\n    opened: this.getProps().manual ? !!this.getProps().opened : false,\n    position: DUMMY_LOCATION.position,\n  };\n\n  private timer: SafeTimer;\n  private theme!: Theme;\n  private featureFlags!: ReactUIFeatureFlags;\n  private setRootNode!: TSetRootNode;\n  private positions: Nullable<PopupPositionsType[]> = null;\n\n  private popupRef = React.createRef<Popup>();\n\n  public componentDidUpdate(prevProps: HintProps) {\n    const { opened, manual, pos, allowedPositions } = this.getProps();\n    if (!manual) {\n      return;\n    }\n    if (this.timer) {\n      globalObject.clearTimeout(this.timer);\n      this.timer = null;\n    }\n    if (opened !== prevProps.opened) {\n      this.setState({ opened: !!opened });\n    }\n\n    if (this.featureFlags.hintAddDynamicPositioning) {\n      const posChanged = prevProps.pos !== pos;\n      const allowedChanged = !isEqual(prevProps.allowedPositions, allowedPositions);\n\n      if (posChanged || allowedChanged) {\n        this.positions = null;\n      }\n    }\n  }\n\n  public componentWillUnmount() {\n    if (this.timer) {\n      globalObject.clearTimeout(this.timer);\n      this.timer = null;\n    }\n  }\n\n  public render() {\n    return (\n      <ReactUIFeatureFlagsContext.Consumer>\n        {(flags) => {\n          this.featureFlags = getFullReactUIFlagsContext(flags);\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.renderMain()}\n                  </ThemeContext.Provider>\n                );\n              }}\n            </ThemeContext.Consumer>\n          );\n        }}\n      </ReactUIFeatureFlagsContext.Consumer>\n    );\n  }\n\n  public renderMain() {\n    const { disableAnimations, useWrapper } = this.getProps();\n\n    return (\n      <ReactUIFeatureFlagsContext.Consumer>\n        {(flags) => {\n          const hasPin = !getFullReactUIFlagsContext(flags).kebabHintRemovePin || !isTheme2022(this.theme);\n          return (\n            <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>\n              <Popup\n                hasPin={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                onPositionChange={(position) => this.setState({ position })}\n                disableAnimations={disableAnimations}\n                onMouseEnter={this.handleMouseEnter}\n                onMouseLeave={this.handleMouseLeave}\n                useWrapper={useWrapper}\n                ref={this.popupRef}\n                withoutMobile\n              >\n                {this.renderContent()}\n              </Popup>\n            </CommonWrapper>\n          );\n        }}\n      </ReactUIFeatureFlagsContext.Consumer>\n    );\n  }\n\n  public getAnchorElement = (): Nullable<Element> => {\n    return this.popupRef.current?.anchorElement;\n  };\n\n  private renderContent() {\n    if (!this.props.text) {\n      return null;\n    }\n\n    const { maxWidth } = this.getProps();\n    const centerAlignPositions = ['top', 'top center', 'bottom', 'bottom center'];\n    const className = cx({\n      [styles.content(this.theme)]: true,\n      [styles.contentCenter(this.theme)]: centerAlignPositions.includes(this.state.position),\n    });\n    return (\n      <div className={className} style={{ maxWidth }}>\n        {this.props.text}\n      </div>\n    );\n  }\n\n  private getPositions = (): PopupPositionsType[] => {\n    if (this.featureFlags.hintAddDynamicPositioning) {\n      if (!this.positions) {\n        const { allowedPositions, pos } = this.getProps();\n        let priorityPosition: PopupPositionsType;\n        switch (pos) {\n          case 'top':\n            priorityPosition = 'top center';\n            break;\n          case 'bottom':\n            priorityPosition = 'bottom center';\n            break;\n          case 'left':\n            priorityPosition = 'left middle';\n            break;\n          case 'right':\n            priorityPosition = 'right middle';\n            break;\n          default:\n            priorityPosition = pos;\n        }\n        const index = allowedPositions.indexOf(priorityPosition);\n        if (index === -1) {\n          throw new Error('Unexpected position passed to Hint. Expected one of: ' + allowedPositions.join(', '));\n        }\n        this.positions = [...allowedPositions.slice(index), ...allowedPositions.slice(0, index)];\n      }\n      return this.positions;\n    }\n    return Positions.filter((x) => x.startsWith(this.getProps().pos));\n  };\n\n  private handleMouseEnter = (e: MouseEventType) => {\n    if (!this.getProps().manual && !this.timer) {\n      this.timer = globalObject.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.getProps().manual && this.timer) {\n      globalObject.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 open = () => {\n    this.setState({ opened: true });\n  };\n}\n"]}

package/components/Hint/Hint.d.ts

@@ -35,54 +35,56 @@ export interface HintProps extends CommonProps {
      *
      * **Допустимые значения**: `"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' | PopupPositionsType;
+    pos?: 'top' | 'right' | 'bottom' | 'left' | PopupPositionsType;
     /**
      * Текст подсказки.
      */
     text: React.ReactNode;
+    /**
+     * Список позиций, которые хинт будет занимать. Если положение хинт в определенной позиции будет выходить
+     * за край экрана, то будет выбрана следующая позиция. Обязательно должен включать позицию указанную в `pos`.
+     * Для применения этого пропа необходимо включить фиче-флаг hintAddDynamicPositioning.
+     */
+    allowedPositions?: PopupPositionsType[];
     /**
      * Отключает анимацию.
      */
-    disableAnimations: boolean;
+    disableAnimations?: boolean;
     /**
-     * Явно указывает, что вложенные элементы должны быть обёрнуты в `<span/>`. <br/> Используется для корректного позиционирования тултипа при двух и более вложенных элементах.
+     * Явно указывает, что вложенные элементы должны быть обёрнуты в `<span/>`. <br/> Используется для корректного позиционирования хинта при двух и более вложенных элементах.
      *
      * _Примечание_: при **двух и более** вложенных элементах обёртка будет добавлена автоматически.
      */
-    useWrapper: boolean;
+    useWrapper?: boolean;
 }
 export interface HintState {
     opened: boolean;
+    position: PopupPositionsType;
 }
+declare type DefaultProps = Required<Pick<HintProps, 'pos' | 'allowedPositions' | 'manual' | 'opened' | 'maxWidth' | 'disableAnimations' | 'useWrapper'>>;
 /**
  * Всплывающая подсказка, которая по умолчанию отображается при наведении на элемент. <br/> Можно задать другие условия отображения.
  */
 export declare class Hint extends React.PureComponent<HintProps, HintState> implements InstanceWithAnchorElement {
     static __KONTUR_REACT_UI__: string;
-    private isMobileLayout;
-    static defaultProps: {
-        pos: string;
-        manual: boolean;
-        opened: boolean;
-        maxWidth: number;
-        disableAnimations: boolean;
-        useWrapper: boolean;
-    };
+    static defaultProps: DefaultProps;
+    private getProps;
     state: HintState;
     private timer;
     private theme;
+    private featureFlags;
     private setRootNode;
+    private positions;
     private popupRef;
     componentDidUpdate(prevProps: HintProps): void;
     componentWillUnmount(): void;
     render(): JSX.Element;
-    renderMobile(): JSX.Element;
     renderMain(): JSX.Element;
-    getAnchorElement: () => Nullable<HTMLElement>;
+    getAnchorElement: () => Nullable<Element>;
     private renderContent;
     private getPositions;
     private handleMouseEnter;
     private handleMouseLeave;
-    private close;
     private open;
 }
+export {};

package/components/Hint/Hint.md

@@ -4,6 +4,20 @@
 <Hint text="Подсказка">Базовая</Hint>
 ```
 
+Пример подсказки с иконкой.
+
+```jsx harmony
+<Hint text="Редактирование">
+  <svg width="16" height="16" viewBox="0 0 16 16">
+    <path
+      fillRule="evenodd"
+      d="M13 12V12.998H8V12H13ZM3 13V11L9 4.99999L11 6.99999L5 13H3ZM13 5L11.5 6.5L9.5 4.5L11 3L13 5Z"
+      clipRule="evenodd"
+    />
+  </svg>
+</Hint>
+```
+
 Пример подсказки, всегда всплывающей слева.
 
 ```jsx harmony
@@ -40,3 +54,32 @@ const [isOpen, setIsOpen] = React.useState(false);
 ```jsx harmony
 <Hint disableAnimations text={"Нет анимации :("}>Есть анимация?</Hint>
 ```
+
+### Использование встроеной и кастомной обёртки
+
+Подсказка должна отображаться даже на отключённых компонентах. Из коробки это работает только с контролами `react-ui`. 
+
+Нативные элементы, поддерживающие атрибут `disabled`, отключают необходимые события мыши.
+В подобных случаях следуют использовать проп `useWrapper`:
+
+```jsx harmony
+<Hint useWrapper text="Подсказа всё равно отображается">
+  <button disabled>native button</button>
+</Hint>
+```
+
+Т.к. встроённая обёртка это `<span>` без стилей, то она может работать некорректно в определённых ситуациях.
+В таких случаях стоит использовать собственную обётку:
+
+```jsx harmony
+<>
+  <Hint useWrapper text="Подсказа">
+    <button disabled style={{ height: 40 }}>useWrapper prop</button>
+  </Hint>
+  <Hint text="Подсказа">
+    <span style={{ display: 'inline-block' }}>
+      <button disabled style={{ height: 40 }}>custom wrapper</button>
+    </span>
+  </Hint>
+</>
+```

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

@@ -1,16 +1,13 @@
 import _taggedTemplateLiteralLoose from "@babel/runtime/helpers/esm/taggedTemplateLiteralLoose";
 
-var _templateObject, _templateObject2, _templateObject3;
+var _templateObject, _templateObject2;
 
 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(t) {
-    return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n      text-align: ", ";\n    "])), t.hintTextAlign);
+    return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n      text-align: ", ";\n    "])), t.hintTextAlign);
   }
 });

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

@@ -1 +1 @@
-{"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"]}
+{"version":3,"sources":["Hint.styles.ts"],"names":["css","memoizeStyle","styles","content","t","hintColor","hintFontSize","hintLineHeight","hintMaxWidth","hintPaddingY","hintPaddingX","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;AACgBI,IAAAA,CAAC,CAACQ,aADlB;;AAGD,GAnBgC,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  contentCenter(t: Theme) {\n    return css`\n      text-align: ${t.hintTextAlign};\n    `;\n  },\n});\n"]}

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

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