@skbkontur/react-ui 0.0.0-444dd4e7b3 → 0.0.0-48840c3b9c

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

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

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"],"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"]}
+{"version":3,"sources":["Group.styles.ts"],"names":["memoizeStyle","getStyles","emotion","root","css","fixed","stretch","stretchFallback","item","itemFirst"],"mappings":";;AAEA,SAASA,YAAT,QAA6B,2BAA7B;;AAEA,OAAO,IAAMC,SAAS,GAAG,SAAZA,SAAY,CAACC,OAAD;AACvBF,IAAAA,YAAY,CAAC;AACXG,MAAAA,IADW,kBACJ;AACL,eAAOD,OAAO,CAACE,GAAf;;;;AAID,OANU;;AAQXC,MAAAA,KARW,mBAQH;AACN,eAAOH,OAAO,CAACE,GAAf;;;;AAID,OAbU;;AAeXE,MAAAA,OAfW,qBAeD;AACR,eAAOJ,OAAO,CAACE,GAAf;;;;AAID,OApBU;;AAsBXG,MAAAA,eAtBW,6BAsBO;AAChB,eAAOL,OAAO,CAACE,GAAf;;;AAGD,OA1BU;;AA4BXI,MAAAA,IA5BW,kBA4BJ;AACL,eAAON,OAAO,CAACE,GAAf;;;AAGD,OAhCU;;AAkCXK,MAAAA,SAlCW,uBAkCC;AACV,eAAOP,OAAO,CAACE,GAAf;;;AAGD,OAtCU,EAAD,CADW,GAAlB","sourcesContent":["import type { Emotion } from '@emotion/css/create-instance';\n\nimport { memoizeStyle } from '../../lib/theming/Emotion';\n\nexport const getStyles = (emotion: Emotion) =>\n  memoizeStyle({\n    root() {\n      return emotion.css`\n        display: inline-flex;\n        line-height: normal;\n      `;\n    },\n\n    fixed() {\n      return emotion.css`\n        flex-shrink: 0;\n        display: inline-block;\n      `;\n    },\n\n    stretch() {\n      return emotion.css`\n        flex-grow: 1;\n        flex-shrink: 1;\n      `;\n    },\n\n    stretchFallback() {\n      return emotion.css`\n        flex-basis: 100%;\n      `;\n    },\n\n    item() {\n      return emotion.css`\n        margin-left: -1px;\n      `;\n    },\n\n    itemFirst() {\n      return emotion.css`\n        margin-left: 0;\n      `;\n    },\n  });\n"]}

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

@@ -1,4 +1,5 @@
-export declare const styles: {
+import type { Emotion } from '@emotion/css/create-instance';
+export declare const getStyles: (emotion: Emotion) => {
     root(): string;
     fixed(): string;
     stretch(): string;

package/components/Hint/Hint/Hint.js

@@ -5,15 +5,18 @@ var _class, _class2, _temp;
 
 import React from 'react';
 import { globalObject } from '@skbkontur/global-object';
-import { ThemeContext } from "../../../lib/theming/ThemeContext";
+import isEqual from 'lodash.isequal';
+import { getFullReactUIFlagsContext, ReactUIFeatureFlagsContext } from "../../../lib/featureFlagsContext";
 import { ThemeFactory } from "../../../lib/theming/ThemeFactory";
 import { DUMMY_LOCATION, Popup } from "../../../internal/Popup";
 import { isTestEnv } from "../../../lib/currentEnvironment";
 import { CommonWrapper } from "../../../internal/CommonWrapper";
-import { cx } from "../../../lib/theming/Emotion";
+import { EmotionConsumer } from "../../../lib/theming/Emotion";
 import { rootNode } from "../../../lib/rootNode";
 import { createPropsGetter } from "../../../lib/createPropsGetter";
-import { styles } from "../Hint.styles";
+import { isTheme2022 } from "../../../lib/theming/ThemeHelpers";
+import { ThemeContext } from "../../../lib/theming/ThemeContext";
+import { getStyles } 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
@@ -36,6 +39,7 @@ var Hint = rootNode(_class = (_temp = _class2 = /*#__PURE__*/function (_React$Pu
       opened: _this.getProps().manual ? !!_this.getProps().opened : false,
       position: DUMMY_LOCATION.position
     };
+    _this.positions = null;
     _this.popupRef = /*#__PURE__*/React.createRef();
 
     _this.getAnchorElement = function () {
@@ -45,6 +49,47 @@ var Hint = rootNode(_class = (_temp = _class2 = /*#__PURE__*/function (_React$Pu
     };
 
     _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.getProps().pos);
       });
@@ -87,9 +132,11 @@ var Hint = rootNode(_class = (_temp = _class2 = /*#__PURE__*/function (_React$Pu
   var _proto = Hint.prototype;
 
   _proto.componentDidUpdate = function componentDidUpdate(prevProps) {
-    var _this$getProps = this.getProps(),
-        opened = _this$getProps.opened,
-        manual = _this$getProps.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;
@@ -105,6 +152,15 @@ var Hint = rootNode(_class = (_temp = _class2 = /*#__PURE__*/function (_React$Pu
         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() {
@@ -117,61 +173,71 @@ var Hint = rootNode(_class = (_temp = _class2 = /*#__PURE__*/function (_React$Pu
   _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.renderMain());
+    return /*#__PURE__*/React.createElement(ReactUIFeatureFlagsContext.Consumer, null, function (flags) {
+      _this2.featureFlags = getFullReactUIFlagsContext(flags);
+      return /*#__PURE__*/React.createElement(EmotionConsumer, null, function (emotion) {
+        _this2.emotion = emotion;
+        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.renderMain = function renderMain() {
     var _this3 = this;
 
-    var _this$getProps2 = this.getProps(),
-        disableAnimations = _this$getProps2.disableAnimations,
-        useWrapper = _this$getProps2.useWrapper;
-
-    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,
-      onPositionChange: function onPositionChange(position) {
-        return _this3.setState({
-          position: position
-        });
-      },
-      disableAnimations: disableAnimations,
-      onMouseEnter: this.handleMouseEnter,
-      onMouseLeave: this.handleMouseLeave,
-      useWrapper: useWrapper,
-      ref: this.popupRef,
-      withoutMobile: true
-    }, this.renderContent()));
+    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() {
-    var _cx;
+    var _this$emotion$cx;
 
     if (!this.props.text) {
       return null;
     }
 
-    var _this$getProps3 = this.getProps(),
-        maxWidth = _this$getProps3.maxWidth;
+    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));
+    var styles = getStyles(this.emotion);
+    var className = this.emotion.cx((_this$emotion$cx = {}, _this$emotion$cx[styles.content(this.theme)] = true, _this$emotion$cx[styles.contentCenter(this.theme)] = centerAlignPositions.includes(this.state.position), _this$emotion$cx));
     return /*#__PURE__*/React.createElement("div", {
       className: className,
       style: {
@@ -181,11 +247,12 @@ var Hint = rootNode(_class = (_temp = _class2 = /*#__PURE__*/function (_React$Pu
   };
 
   return Hint;
-}(React.PureComponent), _class2.__KONTUR_REACT_UI__ = 'Hint', _class2.defaultProps = {
+}(React.PureComponent), _class2.__KONTUR_REACT_UI__ = 'Hint', _class2.displayName = 'Hint', _class2.defaultProps = {
   pos: 'top',
   manual: false,
   opened: false,
   maxWidth: 200,
+  allowedPositions: Positions,
   disableAnimations: isTestEnv,
   useWrapper: false
 }, _temp)) || _class;

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

@@ -1 +1 @@
-{"version":3,"sources":["Hint.tsx"],"names":["React","globalObject","ThemeContext","ThemeFactory","DUMMY_LOCATION","Popup","isTestEnv","CommonWrapper","cx","rootNode","createPropsGetter","styles","HINT_BORDER_COLOR","Positions","Hint","getProps","defaultProps","state","opened","manual","position","popupRef","createRef","getAnchorElement","current","anchorElement","getPositions","filter","x","startsWith","pos","handleMouseEnter","e","timer","setTimeout","open","props","onMouseEnter","handleMouseLeave","clearTimeout","setState","onMouseLeave","componentDidUpdate","prevProps","componentWillUnmount","render","theme","create","popupPinOffset","hintPinOffset","popupMargin","hintMargin","popupBorder","hintBorder","popupBorderRadius","hintBorderRadius","renderMain","disableAnimations","useWrapper","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';\n\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';\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  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' | '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    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 setRootNode!: TSetRootNode;\n\n  private popupRef = React.createRef<Popup>();\n\n  public componentDidUpdate(prevProps: HintProps) {\n    const { opened, manual } = 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\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      <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\n  public renderMain() {\n    const { disableAnimations, useWrapper } = this.getProps();\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          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\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    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"]}
+{"version":3,"sources":["Hint.tsx"],"names":["React","globalObject","isEqual","getFullReactUIFlagsContext","ReactUIFeatureFlagsContext","ThemeFactory","DUMMY_LOCATION","Popup","isTestEnv","CommonWrapper","EmotionConsumer","rootNode","createPropsGetter","isTheme2022","ThemeContext","getStyles","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","emotion","theme","create","popupPinOffset","hintPinOffset","popupMargin","hintMargin","popupBorder","hintBorder","popupBorderRadius","hintBorderRadius","renderMain","disableAnimations","useWrapper","hasPin","kebabHintRemovePin","setRootNode","children","hintBgColor","renderContent","text","maxWidth","centerAlignPositions","styles","className","cx","content","contentCenter","includes","PureComponent","__KONTUR_REACT_UI__","displayName"],"mappings":"2JAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAASC,YAAT,QAAwC,0BAAxC;AACA,OAAOC,OAAP,MAAoB,gBAApB;;;AAGA;AACEC,0BADF;;AAGEC,0BAHF;AAIO,+BAJP;AAKA,SAASC,YAAT,QAA6B,gCAA7B;;AAEA,SAASC,cAAT,EAAyBC,KAAzB,QAA0D,sBAA1D;;;AAGA,SAASC,SAAT,QAA0B,8BAA1B;AACA,SAAsBC,aAAtB,QAA2C,8BAA3C;AACA,SAASC,eAAT,QAAgC,2BAAhC;AACA,SAASC,QAAT,QAAuC,oBAAvC;;AAEA,SAASC,iBAAT,QAAkC,6BAAlC;AACA,SAASC,WAAT,QAA4B,gCAA5B;AACA,SAASC,YAAT,QAA6B,gCAA7B;;AAEA,SAASC,SAAT,QAA0B,eAA1B;;AAEA,IAAMC,iBAAiB,GAAG,aAA1B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA6DA,IAAMC,SAA+B,GAAG;AACtC,YADsC;AAEtC,UAFsC;AAGtC,WAHsC;AAItC,eAJsC;AAKtC,aALsC;AAMtC,cANsC;AAOtC,aAPsC;AAQtC,UARsC;AAStC,aATsC;AAUtC,cAVsC;AAWtC,WAXsC;AAYtC,cAZsC,CAAxC;;;;;;;;;;;AAuBA,OAJA;AACA;AACA,GAEA,IAAaC,IAAb,GADCP,QACD;;;;;;;;;;;;AAcUQ,IAAAA,QAdV,GAcqBP,iBAAiB,CAACM,IAAI,CAACE,YAAN,CAdtC;;AAgBSC,IAAAA,KAhBT,GAgB4B;AACxBC,MAAAA,MAAM,EAAE,MAAKH,QAAL,GAAgBI,MAAhB,GAAyB,CAAC,CAAC,MAAKJ,QAAL,GAAgBG,MAA3C,GAAoD,KADpC;AAExBE,MAAAA,QAAQ,EAAElB,cAAc,CAACkB,QAFD,EAhB5B;;;;;;;;AA0BUC,IAAAA,SA1BV,GA0BsD,IA1BtD;;AA4BUC,IAAAA,QA5BV,gBA4BqB1B,KAAK,CAAC2B,SAAN,EA5BrB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAoISC,IAAAA,gBApIT,GAoI4B,YAAyB;AACjD,sCAAO,MAAKF,QAAL,CAAcG,OAArB,qBAAO,sBAAuBC,aAA9B;AACD,KAtIH;;;;;;;;;;;;;;;;;;;;;AA2JUC,IAAAA,YA3JV,GA2JyB,YAA4B;AACjD,UAAI,MAAKC,YAAL,CAAkBC,yBAAtB,EAAiD;AAC/C,YAAI,CAAC,MAAKR,SAAV,EAAqB;AACnB,+BAAkC,MAAKN,QAAL,EAAlC,CAAQe,gBAAR,kBAAQA,gBAAR,CAA0BC,GAA1B,kBAA0BA,GAA1B;AACA,cAAIC,gBAAJ;AACA,kBAAQD,GAAR;AACE,iBAAK,KAAL;AACEC,cAAAA,gBAAgB,GAAG,YAAnB;AACA;AACF,iBAAK,QAAL;AACEA,cAAAA,gBAAgB,GAAG,eAAnB;AACA;AACF,iBAAK,MAAL;AACEA,cAAAA,gBAAgB,GAAG,aAAnB;AACA;AACF,iBAAK,OAAL;AACEA,cAAAA,gBAAgB,GAAG,cAAnB;AACA;AACF;AACEA,cAAAA,gBAAgB,GAAGD,GAAnB,CAdJ;;AAgBA,cAAME,KAAK,GAAGH,gBAAgB,CAACI,OAAjB,CAAyBF,gBAAzB,CAAd;AACA,cAAIC,KAAK,KAAK,CAAC,CAAf,EAAkB;AAChB,kBAAM,IAAIE,KAAJ,CAAU,0DAA0DL,gBAAgB,CAACM,IAAjB,CAAsB,IAAtB,CAApE,CAAN;AACD;AACD,gBAAKf,SAAL,aAAqBS,gBAAgB,CAACO,KAAjB,CAAuBJ,KAAvB,CAArB,EAAuDH,gBAAgB,CAACO,KAAjB,CAAuB,CAAvB,EAA0BJ,KAA1B,CAAvD;AACD;AACD,eAAO,MAAKZ,SAAZ;AACD;AACD,aAAOR,SAAS,CAACyB,MAAV,CAAiB,UAACC,CAAD,UAAOA,CAAC,CAACC,UAAF,CAAa,MAAKzB,QAAL,GAAgBgB,GAA7B,CAAP,EAAjB,CAAP;AACD,KAzLH;;AA2LUU,IAAAA,gBA3LV,GA2L6B,UAACC,CAAD,EAAuB;AAChD,UAAI,CAAC,MAAK3B,QAAL,GAAgBI,MAAjB,IAA2B,CAAC,MAAKwB,KAArC,EAA4C;AAC1C,cAAKA,KAAL,GAAa9C,YAAY,CAAC+C,UAAb,CAAwB,MAAKC,IAA7B,EAAmC,GAAnC,CAAb;AACD;;AAED,UAAI,MAAKC,KAAL,CAAWC,YAAf,EAA6B;AAC3B,cAAKD,KAAL,CAAWC,YAAX,CAAwBL,CAAxB;AACD;AACF,KAnMH;;AAqMUM,IAAAA,gBArMV,GAqM6B,UAACN,CAAD,EAAuB;AAChD,UAAI,CAAC,MAAK3B,QAAL,GAAgBI,MAAjB,IAA2B,MAAKwB,KAApC,EAA2C;AACzC9C,QAAAA,YAAY,CAACoD,YAAb,CAA0B,MAAKN,KAA/B;AACA,cAAKA,KAAL,GAAa,IAAb;AACA,cAAKO,QAAL,CAAc,EAAEhC,MAAM,EAAE,KAAV,EAAd;AACD;;AAED,UAAI,MAAK4B,KAAL,CAAWK,YAAf,EAA6B;AAC3B,cAAKL,KAAL,CAAWK,YAAX,CAAwBT,CAAxB;AACD;AACF,KA/MH;;AAiNUG,IAAAA,IAjNV,GAiNiB,YAAM;AACnB,YAAKK,QAAL,CAAc,EAAEhC,MAAM,EAAE,IAAV,EAAd;AACD,KAnNH,kDA8BSkC,kBA9BT,GA8BE,4BAA0BC,SAA1B,EAAgD,CAC9C,sBAAkD,KAAKtC,QAAL,EAAlD,CAAQG,MAAR,mBAAQA,MAAR,CAAgBC,MAAhB,mBAAgBA,MAAhB,CAAwBY,GAAxB,mBAAwBA,GAAxB,CAA6BD,gBAA7B,mBAA6BA,gBAA7B,CACA,IAAI,CAACX,MAAL,EAAa,CACX,OACD,CACD,IAAI,KAAKwB,KAAT,EAAgB,CACd9C,YAAY,CAACoD,YAAb,CAA0B,KAAKN,KAA/B,EACA,KAAKA,KAAL,GAAa,IAAb,CACD,CACD,IAAIzB,MAAM,KAAKmC,SAAS,CAACnC,MAAzB,EAAiC,CAC/B,KAAKgC,QAAL,CAAc,EAAEhC,MAAM,EAAE,CAAC,CAACA,MAAZ,EAAd,EACD,CAED,IAAI,KAAKU,YAAL,CAAkBC,yBAAtB,EAAiD,CAC/C,IAAMyB,UAAU,GAAGD,SAAS,CAACtB,GAAV,KAAkBA,GAArC,CACA,IAAMwB,cAAc,GAAG,CAACzD,OAAO,CAACuD,SAAS,CAACvB,gBAAX,EAA6BA,gBAA7B,CAA/B,CAEA,IAAIwB,UAAU,IAAIC,cAAlB,EAAkC,CAChC,KAAKlC,SAAL,GAAiB,IAAjB,CACD,CACF,CACF,CAnDH,QAqDSmC,oBArDT,GAqDE,gCAA8B,CAC5B,IAAI,KAAKb,KAAT,EAAgB,CACd9C,YAAY,CAACoD,YAAb,CAA0B,KAAKN,KAA/B,EACA,KAAKA,KAAL,GAAa,IAAb,CACD,CACF,CA1DH,QA4DSc,MA5DT,GA4DE,kBAAgB,mBACd,oBACE,oBAAC,0BAAD,CAA4B,QAA5B,QACG,UAACC,KAAD,EAAW,CACV,MAAI,CAAC9B,YAAL,GAAoB7B,0BAA0B,CAAC2D,KAAD,CAA9C,CACA,oBACE,oBAAC,eAAD,QACG,UAACC,OAAD,EAAa,CACZ,MAAI,CAACA,OAAL,GAAeA,OAAf,CACA,oBACE,oBAAC,YAAD,CAAc,QAAd,QACG,UAACC,KAAD,EAAW,CACV,MAAI,CAACA,KAAL,GAAaA,KAAb,CACA,oBACE,oBAAC,YAAD,CAAc,QAAd,IACE,KAAK,EAAE3D,YAAY,CAAC4D,MAAb,CACL,EACEC,cAAc,EAAEF,KAAK,CAACG,aADxB,EAEEC,WAAW,EAAEJ,KAAK,CAACK,UAFrB,EAGEC,WAAW,EAAEN,KAAK,CAACO,UAHrB,EAIEC,iBAAiB,EAAER,KAAK,CAACS,gBAJ3B,EADK,EAOL,MAAI,CAACT,KAPA,CADT,IAWG,MAAI,CAACU,UAAL,EAXH,CADF,CAeD,CAlBH,CADF,CAsBD,CAzBH,CADF,CA6BD,CAhCH,CADF,CAoCD,CAjGH,QAmGSA,UAnGT,GAmGE,sBAAoB,mBAClB,sBAA0C,KAAKvD,QAAL,EAA1C,CAAQwD,iBAAR,mBAAQA,iBAAR,CAA2BC,UAA3B,mBAA2BA,UAA3B,CAEA,oBACE,oBAAC,0BAAD,CAA4B,QAA5B,QACG,UAACd,KAAD,EAAW,CACV,IAAMe,MAAM,GAAG,CAAC1E,0BAA0B,CAAC2D,KAAD,CAA1B,CAAkCgB,kBAAnC,IAAyD,CAACjE,WAAW,CAAC,MAAI,CAACmD,KAAN,CAApF,CACA,oBACE,oBAAC,aAAD,aAAe,WAAW,EAAE,MAAI,CAACe,WAAjC,IAAkD,MAAI,CAAC7B,KAAvD,gBACE,oBAAC,KAAD,IACE,MAAM,EAAE2B,MADV,EAEE,MAAM,EAAE,MAAI,CAACxD,KAAL,CAAWC,MAFrB,EAGE,aAAa,EAAE,MAAI,CAAC4B,KAAL,CAAW8B,QAH5B,EAIE,SAAS,EAAE,MAAI,CAACjD,YAAL,EAJb,EAKE,eAAe,EAAE,MAAI,CAACiC,KAAL,CAAWiB,WAL9B,EAME,WAAW,EAAEjE,iBANf,EAOE,gBAAgB,EAAE,0BAACQ,QAAD,UAAc,MAAI,CAAC8B,QAAL,CAAc,EAAE9B,QAAQ,EAARA,QAAF,EAAd,CAAd,EAPpB,EAQE,iBAAiB,EAAEmD,iBARrB,EASE,YAAY,EAAE,MAAI,CAAC9B,gBATrB,EAUE,YAAY,EAAE,MAAI,CAACO,gBAVrB,EAWE,UAAU,EAAEwB,UAXd,EAYE,GAAG,EAAE,MAAI,CAAClD,QAZZ,EAaE,aAAa,MAbf,IAeG,MAAI,CAACwD,aAAL,EAfH,CADF,CADF,CAqBD,CAxBH,CADF,CA4BD,CAlIH,QAwIUA,aAxIV,GAwIE,yBAAwB,sBACtB,IAAI,CAAC,KAAKhC,KAAL,CAAWiC,IAAhB,EAAsB,CACpB,OAAO,IAAP,CACD,CAED,sBAAqB,KAAKhE,QAAL,EAArB,CAAQiE,QAAR,mBAAQA,QAAR,CACA,IAAMC,oBAAoB,GAAG,CAAC,KAAD,EAAQ,YAAR,EAAsB,QAAtB,EAAgC,eAAhC,CAA7B,CACA,IAAMC,MAAM,GAAGvE,SAAS,CAAC,KAAKgD,OAAN,CAAxB,CACA,IAAMwB,SAAS,GAAG,KAAKxB,OAAL,CAAayB,EAAb,0CACfF,MAAM,CAACG,OAAP,CAAe,KAAKzB,KAApB,CADe,IACc,IADd,mBAEfsB,MAAM,CAACI,aAAP,CAAqB,KAAK1B,KAA1B,CAFe,IAEoBqB,oBAAoB,CAACM,QAArB,CAA8B,KAAKtE,KAAL,CAAWG,QAAzC,CAFpB,oBAAlB,CAIA,oBACE,6BAAK,SAAS,EAAE+D,SAAhB,EAA2B,KAAK,EAAE,EAAEH,QAAQ,EAARA,QAAF,EAAlC,IACG,KAAKlC,KAAL,CAAWiC,IADd,CADF,CAKD,CAzJH,eAA0BnF,KAAK,CAAC4F,aAAhC,WACgBC,mBADhB,GACsC,MADtC,UAEgBC,WAFhB,GAE8B,MAF9B,UAIgB1E,YAJhB,GAI6C,EACzCe,GAAG,EAAE,KADoC,EAEzCZ,MAAM,EAAE,KAFiC,EAGzCD,MAAM,EAAE,KAHiC,EAIzC8D,QAAQ,EAAE,GAJ+B,EAKzClD,gBAAgB,EAAEjB,SALuB,EAMzC0D,iBAAiB,EAAEnE,SANsB,EAOzCoE,UAAU,EAAE,KAP6B,EAJ7C","sourcesContent":["import React from 'react';\nimport { globalObject, SafeTimer } from '@skbkontur/global-object';\nimport isEqual from 'lodash.isequal';\nimport type { Emotion } from '@emotion/css/create-instance';\n\nimport {\n  getFullReactUIFlagsContext,\n  ReactUIFeatureFlags,\n  ReactUIFeatureFlagsContext,\n} from '../../lib/featureFlagsContext';\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 { CommonProps, CommonWrapper } from '../../internal/CommonWrapper';\nimport { EmotionConsumer } 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';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\n\nimport { getStyles } 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  public static displayName = '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 emotion!: Emotion;\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            <EmotionConsumer>\n              {(emotion) => {\n                this.emotion = emotion;\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            </EmotionConsumer>\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 styles = getStyles(this.emotion);\n    const className = this.emotion.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

@@ -40,12 +40,18 @@ export interface HintProps extends CommonProps {
      * Текст подсказки.
      */
     text: React.ReactNode;
+    /**
+     * Список позиций, которые хинт будет занимать. Если положение хинт в определенной позиции будет выходить
+     * за край экрана, то будет выбрана следующая позиция. Обязательно должен включать позицию указанную в `pos`.
+     * Для применения этого пропа необходимо включить фиче-флаг hintAddDynamicPositioning.
+     */
+    allowedPositions?: PopupPositionsType[];
     /**
      * Отключает анимацию.
      */
     disableAnimations?: boolean;
     /**
-     * Явно указывает, что вложенные элементы должны быть обёрнуты в `<span/>`. <br/> Используется для корректного позиционирования тултипа при двух и более вложенных элементах.
+     * Явно указывает, что вложенные элементы должны быть обёрнуты в `<span/>`. <br/> Используется для корректного позиционирования хинта при двух и более вложенных элементах.
      *
      * _Примечание_: при **двух и более** вложенных элементах обёртка будет добавлена автоматически.
      */
@@ -55,18 +61,22 @@ export interface HintState {
     opened: boolean;
     position: PopupPositionsType;
 }
-declare type DefaultProps = Required<Pick<HintProps, 'pos' | 'manual' | 'opened' | 'maxWidth' | 'disableAnimations' | 'useWrapper'>>;
+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;
+    static displayName: string;
     static defaultProps: DefaultProps;
     private getProps;
     state: HintState;
     private timer;
     private theme;
+    private emotion;
+    private featureFlags;
     private setRootNode;
+    private positions;
     private popupRef;
     componentDidUpdate(prevProps: HintProps): void;
     componentWillUnmount(): void;

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

@@ -2,12 +2,14 @@ import _taggedTemplateLiteralLoose from "@babel/runtime/helpers/esm/taggedTempla
 
 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);
-  },
-  contentCenter: function contentCenter(t) {
-    return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n      text-align: ", ";\n    "])), t.hintTextAlign);
-  }
-});
+import { memoizeStyle } from "../../../lib/theming/Emotion";
+export var getStyles = function getStyles(emotion) {
+  return memoizeStyle({
+    content: function content(t) {
+      return emotion.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);
+    },
+    contentCenter: function contentCenter(t) {
+      return emotion.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","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"]}
+{"version":3,"sources":["Hint.styles.ts"],"names":["memoizeStyle","getStyles","emotion","content","t","css","hintColor","hintFontSize","hintLineHeight","hintMaxWidth","hintPaddingY","hintPaddingX","contentCenter","hintTextAlign"],"mappings":";;;AAGA,SAASA,YAAT,QAA6B,2BAA7B;;AAEA,OAAO,IAAMC,SAAS,GAAG,SAAZA,SAAY,CAACC,OAAD;AACvBF,IAAAA,YAAY,CAAC;AACXG,MAAAA,OADW,mBACHC,CADG,EACO;AAChB,eAAOF,OAAO,CAACG,GAAf;;AAEWD,QAAAA,CAAC,CAACE,SAFb;AAGeF,QAAAA,CAAC,CAACG,YAHjB;AAIiBH,QAAAA,CAAC,CAACI,cAJnB;AAKeJ,QAAAA,CAAC,CAACK,YALjB;;AAOaL,QAAAA,CAAC,CAACM,YAPf,EAO+BN,CAAC,CAACO,YAPjC;;;;AAWD,OAbU;;AAeXC,MAAAA,aAfW,yBAeGR,CAfH,EAea;AACtB,eAAOF,OAAO,CAACG,GAAf;AACgBD,QAAAA,CAAC,CAACS,aADlB;;AAGD,OAnBU,EAAD,CADW,GAAlB","sourcesContent":["import type { Emotion } from '@emotion/css/create-instance';\n\nimport { Theme } from '../../lib/theming/Theme';\nimport { memoizeStyle } from '../../lib/theming/Emotion';\n\nexport const getStyles = (emotion: Emotion) =>\n  memoizeStyle({\n    content(t: Theme) {\n      return emotion.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 emotion.css`\n        text-align: ${t.hintTextAlign};\n      `;\n    },\n  });\n"]}

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

@@ -1,5 +1,6 @@
+import type { Emotion } from '@emotion/css/create-instance';
 import { Theme } from '../../lib/theming/Theme';
-export declare const styles: {
+export declare const getStyles: (emotion: Emotion) => {
     content(t: Theme): string;
     contentCenter(t: Theme): string;
 };