@skbkontur/react-ui 0.0.0-e66a3400ba → 0.0.0-ea6161656e

package/components/Group/Group/Group.js

@@ -0,0 +1,142 @@
+import _inheritsLoose from "@babel/runtime/helpers/esm/inheritsLoose";
+import _extends from "@babel/runtime/helpers/esm/extends";
+
+var _class, _class2, _temp;
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import { isEdge, isIE11 } from "../../../lib/client";
+import { isButton } from "../../Button";
+import { CommonWrapper } from "../../../internal/CommonWrapper";
+import { EmotionConsumer } from "../../../lib/theming/Emotion";
+import { rootNode } from "../../../lib/rootNode";
+import { isInputLike } from "../../../lib/utils";
+import { isTheme2022 } from "../../../lib/theming/ThemeHelpers";
+import { ThemeContext } from "../../../lib/theming/ThemeContext";
+import { getStyles } from "../Group.styles";
+
+var getFirstChild = function getFirstChild(children) {
+  if (!Array.isArray(children)) {
+    return children;
+  }
+
+  return children == null ? void 0 : children[0];
+};
+
+var getLastChild = function getLastChild(children) {
+  if (!Array.isArray(children)) {
+    return children;
+  }
+
+  var numberOfChildren = React.Children.count(children);
+  return children == null ? void 0 : children[numberOfChildren - 1];
+};
+
+export var getButtonCorners = function getButtonCorners(isFirstChild, isLastChild) {
+  if (isFirstChild && isLastChild) {
+    return {};
+  }
+
+  if (isFirstChild) {
+    return {
+      borderTopRightRadius: 0,
+      borderBottomRightRadius: 0
+    };
+  }
+
+  if (isLastChild) {
+    return {
+      borderTopLeftRadius: 0,
+      borderBottomLeftRadius: 0
+    };
+  }
+
+  return {
+    borderRadius: 0
+  };
+};
+
+var passCornersIfButton = function passCornersIfButton(child, firstChild, lastChild, isInputLikeToo) {
+  if (isInputLikeToo === void 0) {
+    isInputLikeToo = false;
+  }
+
+  var corners = getButtonCorners(child === firstChild, child === lastChild);
+
+  if (isButton(child)) {
+    return /*#__PURE__*/React.cloneElement(child, {
+      corners: _extends({}, corners, child.props.corners)
+    });
+  }
+
+  if (isInputLikeToo && isInputLike(child)) {
+    return /*#__PURE__*/React.cloneElement(child, {
+      corners: _extends({}, corners, child.props.corners)
+    });
+  }
+
+  return child;
+};
+
+export var GroupDataTids = {
+  root: 'Group__root'
+};
+export var Group = rootNode(_class = (_temp = _class2 = /*#__PURE__*/function (_React$Component) {
+  _inheritsLoose(Group, _React$Component);
+
+  function Group() {
+    return _React$Component.apply(this, arguments) || this;
+  }
+
+  var _proto = Group.prototype;
+
+  _proto.render = function render() {
+    var _this = this;
+
+    return /*#__PURE__*/React.createElement(EmotionConsumer, null, function (emotion) {
+      _this.emotion = emotion;
+      return /*#__PURE__*/React.createElement(ThemeContext.Consumer, null, function (theme) {
+        _this.theme = theme;
+        return _this.renderMain();
+      });
+    });
+  };
+
+  _proto.renderMain = function renderMain() {
+    var _this2 = this;
+
+    var style = {
+      width: this.props.width
+    };
+    var childrenArray = React.Children.toArray(this.props.children);
+    var firstChild = getFirstChild(childrenArray);
+    var lastChild = getLastChild(childrenArray);
+    var styles = getStyles(this.emotion);
+    return /*#__PURE__*/React.createElement(CommonWrapper, _extends({
+      rootNodeRef: this.setRootNode
+    }, this.props), /*#__PURE__*/React.createElement("span", {
+      "data-tid": GroupDataTids.root,
+      className: styles.root(),
+      style: style
+    }, React.Children.map(childrenArray, function (child) {
+      var _this2$emotion$cx, _this2$emotion$cx2;
+
+      if (!child || ! /*#__PURE__*/React.isValidElement(child)) {
+        return null;
+      }
+
+      var isWidthInPercent = Boolean(child.props.width && child.props.width.toString().includes('%'));
+      var modifiedChild = passCornersIfButton(child, firstChild, lastChild, isTheme2022(_this2.theme));
+      var isFirstChild = child === firstChild;
+      return /*#__PURE__*/React.createElement("div", {
+        className: _this2.emotion.cx((_this2$emotion$cx = {}, _this2$emotion$cx[styles.fixed()] = !isWidthInPercent, _this2$emotion$cx[styles.stretch()] = isWidthInPercent, _this2$emotion$cx[styles.stretchFallback()] = Boolean(isWidthInPercent && _this2.props.width && (isIE11 || isEdge)), _this2$emotion$cx))
+      }, /*#__PURE__*/React.createElement("div", {
+        className: _this2.emotion.cx((_this2$emotion$cx2 = {}, _this2$emotion$cx2[styles.item()] = true, _this2$emotion$cx2[styles.itemFirst()] = isFirstChild, _this2$emotion$cx2))
+      }, modifiedChild));
+    })));
+  };
+
+  return Group;
+}(React.Component), _class2.__KONTUR_REACT_UI__ = 'Group', _class2.displayName = 'Group', _class2.propTypes = {
+  width: PropTypes.oneOfType([PropTypes.number, PropTypes.string])
+}, _temp)) || _class;

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

@@ -0,0 +1 @@
+{"version":3,"sources":["Group.tsx"],"names":["React","PropTypes","isEdge","isIE11","isButton","CommonWrapper","EmotionConsumer","rootNode","isInputLike","isTheme2022","ThemeContext","getStyles","getFirstChild","children","Array","isArray","getLastChild","numberOfChildren","Children","count","getButtonCorners","isFirstChild","isLastChild","borderTopRightRadius","borderBottomRightRadius","borderTopLeftRadius","borderBottomLeftRadius","borderRadius","passCornersIfButton","child","firstChild","lastChild","isInputLikeToo","corners","cloneElement","props","GroupDataTids","root","Group","render","emotion","theme","renderMain","style","width","childrenArray","toArray","styles","setRootNode","map","isValidElement","isWidthInPercent","Boolean","toString","includes","modifiedChild","cx","fixed","stretch","stretchFallback","item","itemFirst","Component","__KONTUR_REACT_UI__","displayName","propTypes","oneOfType","number","string"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport type { Emotion } from '@emotion/css/create-instance';\n\nimport { isEdge, isIE11 } from '../../lib/client';\nimport { isButton } from '../Button';\nimport { CommonProps, CommonWrapper } from '../../internal/CommonWrapper';\nimport { EmotionConsumer } from '../../lib/theming/Emotion';\nimport { rootNode, TSetRootNode } from '../../lib/rootNode';\nimport { isInputLike } from '../../lib/utils';\nimport { Theme } from '../../lib/theming/Theme';\nimport { isTheme2022 } from '../../lib/theming/ThemeHelpers';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\n\nimport { getStyles } from './Group.styles';\n\nexport interface GroupProps extends CommonProps {\n  width?: React.CSSProperties['width'];\n}\n\ninterface GroupChildProps {\n  width?: React.CSSProperties['width'];\n  corners?: number;\n}\n\nconst getFirstChild = (children: React.ReactNode) => {\n  if (!Array.isArray(children)) {\n    return children;\n  }\n\n  return children?.[0] as React.ReactNode;\n};\n\nconst getLastChild = (children: React.ReactNode) => {\n  if (!Array.isArray(children)) {\n    return children;\n  }\n\n  const numberOfChildren = React.Children.count(children);\n\n  return children?.[numberOfChildren - 1] as React.ReactNode;\n};\n\nexport const getButtonCorners = (isFirstChild: boolean, isLastChild: boolean): React.CSSProperties => {\n  if (isFirstChild && isLastChild) {\n    return {};\n  }\n\n  if (isFirstChild) {\n    return {\n      borderTopRightRadius: 0,\n      borderBottomRightRadius: 0,\n    };\n  }\n\n  if (isLastChild) {\n    return {\n      borderTopLeftRadius: 0,\n      borderBottomLeftRadius: 0,\n    };\n  }\n\n  return {\n    borderRadius: 0,\n  };\n};\n\nconst passCornersIfButton = (\n  child: React.ReactNode,\n  firstChild: React.ReactNode,\n  lastChild: React.ReactNode,\n  isInputLikeToo = false,\n) => {\n  const corners = getButtonCorners(child === firstChild, child === lastChild);\n  if (isButton(child)) {\n    return React.cloneElement(child, { corners: { ...corners, ...child.props.corners } });\n  }\n  if (isInputLikeToo && isInputLike(child)) {\n    return React.cloneElement(child, { corners: { ...corners, ...child.props.corners } });\n  }\n\n  return child;\n};\n\nexport const GroupDataTids = {\n  root: 'Group__root',\n} as const;\n\n@rootNode\nexport class Group extends React.Component<GroupProps> {\n  public static __KONTUR_REACT_UI__ = 'Group';\n  public static displayName = 'Group';\n\n  private setRootNode!: TSetRootNode;\n  private theme!: Theme;\n  private emotion!: Emotion;\n\n  public static propTypes = {\n    width: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),\n  };\n\n  public render() {\n    return (\n      <EmotionConsumer>\n        {(emotion) => {\n          this.emotion = emotion;\n          return (\n            <ThemeContext.Consumer>\n              {(theme) => {\n                this.theme = theme;\n                return this.renderMain();\n              }}\n            </ThemeContext.Consumer>\n          );\n        }}\n      </EmotionConsumer>\n    );\n  }\n\n  public renderMain() {\n    const style: React.CSSProperties = {\n      width: this.props.width,\n    };\n\n    const childrenArray = React.Children.toArray(this.props.children);\n    const firstChild = getFirstChild(childrenArray);\n    const lastChild = getLastChild(childrenArray);\n    const styles = getStyles(this.emotion);\n\n    return (\n      <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>\n        <span data-tid={GroupDataTids.root} className={styles.root()} style={style}>\n          {React.Children.map(childrenArray, (child) => {\n            if (!child || !React.isValidElement<GroupChildProps>(child)) {\n              return null;\n            }\n\n            const isWidthInPercent = Boolean(child.props.width && child.props.width.toString().includes('%'));\n\n            const modifiedChild = passCornersIfButton(child, firstChild, lastChild, isTheme2022(this.theme));\n\n            const isFirstChild = child === firstChild;\n\n            return (\n              <div\n                className={this.emotion.cx({\n                  [styles.fixed()]: !isWidthInPercent,\n                  [styles.stretch()]: isWidthInPercent,\n                  [styles.stretchFallback()]: Boolean(isWidthInPercent && this.props.width && (isIE11 || isEdge)),\n                })}\n              >\n                <div\n                  className={this.emotion.cx({\n                    [styles.item()]: true,\n                    [styles.itemFirst()]: isFirstChild,\n                  })}\n                >\n                  {modifiedChild}\n                </div>\n              </div>\n            );\n          })}\n        </span>\n      </CommonWrapper>\n    );\n  }\n}\n"]}

package/components/Group/Group/package.json

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

package/components/Group/Group.d.ts

@@ -1,23 +1,22 @@
-import * as React from 'react';
-import * as PropTypes from 'prop-types';
-import '../ensureOldIEClassName';
-export interface GroupProps {
-    width?: React.CSSProperties['width'];
-}
-export interface GroupChildProps {
-    /** @deprecated */
-    mainInGroup?: boolean;
-    width?: React.CSSProperties['width'];
-    corners?: number;
-}
-/**
- * Главному *Input*, который должен занимать всю доступную ширину, нужно
- * передать свойство `mainInGroup`;
- */
-declare class Group extends React.Component<GroupProps> {
-    static propTypes: {
-        width: PropTypes.Requireable<React.ReactText>;
-    };
-    render(): JSX.Element;
-}
-export default Group;
+import React from 'react';
+import PropTypes from 'prop-types';
+import { CommonProps } from '../../internal/CommonWrapper';
+export interface GroupProps extends CommonProps {
+    width?: React.CSSProperties['width'];
+}
+export declare const getButtonCorners: (isFirstChild: boolean, isLastChild: boolean) => React.CSSProperties;
+export declare const GroupDataTids: {
+    readonly root: "Group__root";
+};
+export declare class Group extends React.Component<GroupProps> {
+    static __KONTUR_REACT_UI__: string;
+    static displayName: string;
+    private setRootNode;
+    private theme;
+    private emotion;
+    static propTypes: {
+        width: PropTypes.Requireable<string | number>;
+    };
+    render(): JSX.Element;
+    renderMain(): JSX.Element;
+}

package/components/Group/Group.md

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

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

@@ -0,0 +1,27 @@
+import _taggedTemplateLiteralLoose from "@babel/runtime/helpers/esm/taggedTemplateLiteralLoose";
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
+
+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

@@ -0,0 +1 @@
+{"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/package.json

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

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

@@ -0,0 +1,9 @@
+import type { Emotion } from '@emotion/css/create-instance';
+export declare const getStyles: (emotion: Emotion) => {
+    root(): string;
+    fixed(): string;
+    stretch(): string;
+    stretchFallback(): string;
+    item(): string;
+    itemFirst(): string;
+};

package/components/Group/index/index.js

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

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

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

package/components/Group/index/package.json

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

package/components/Group/index.d.ts

@@ -1 +1 @@
-export { default, GroupProps, GroupChildProps } from './Group';
+export * from './Group';

package/components/Group/package.json

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

package/components/Hint/Hint/Hint.js

@@ -0,0 +1,258 @@
+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 { globalObject } from '@skbkontur/global-object';
+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 { EmotionConsumer } from "../../../lib/theming/Emotion";
+import { rootNode } from "../../../lib/rootNode";
+import { createPropsGetter } from "../../../lib/createPropsGetter";
+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
+/**
+* Всплывающая подсказка, которая по умолчанию отображается при наведении на элемент. <br/> Можно задать другие условия отображения.
+*/
+var Hint = rootNode(_class = (_temp = _class2 = /*#__PURE__*/function (_React$PureComponent) {
+  _inheritsLoose(Hint, _React$PureComponent);
+
+  function Hint() {
+    var _this;
+
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    _this = _React$PureComponent.call.apply(_React$PureComponent, [this].concat(args)) || this;
+    _this.getProps = createPropsGetter(Hint.defaultProps);
+    _this.state = {
+      opened: _this.getProps().manual ? !!_this.getProps().opened : false,
+      position: DUMMY_LOCATION.position
+    };
+    _this.positions = null;
+    _this.popupRef = /*#__PURE__*/React.createRef();
+
+    _this.getAnchorElement = function () {
+      var _this$popupRef$curren;
+
+      return (_this$popupRef$curren = _this.popupRef.current) == null ? void 0 : _this$popupRef$curren.anchorElement;
+    };
+
+    _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);
+      });
+    };
+
+    _this.handleMouseEnter = function (e) {
+      if (!_this.getProps().manual && !_this.timer) {
+        _this.timer = globalObject.setTimeout(_this.open, 400);
+      }
+
+      if (_this.props.onMouseEnter) {
+        _this.props.onMouseEnter(e);
+      }
+    };
+
+    _this.handleMouseLeave = function (e) {
+      if (!_this.getProps().manual && _this.timer) {
+        globalObject.clearTimeout(_this.timer);
+        _this.timer = null;
+
+        _this.setState({
+          opened: false
+        });
+      }
+
+      if (_this.props.onMouseLeave) {
+        _this.props.onMouseLeave(e);
+      }
+    };
+
+    _this.open = function () {
+      _this.setState({
+        opened: true
+      });
+    };
+
+    return _this;
+  }
+
+  var _proto = Hint.prototype;
+
+  _proto.componentDidUpdate = function componentDidUpdate(prevProps) {
+    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) {
+      globalObject.clearTimeout(this.timer);
+      this.timer = null;
+    }
+
+    if (opened !== prevProps.opened) {
+      this.setState({
+        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) {
+      globalObject.clearTimeout(this.timer);
+      this.timer = null;
+    }
+  };
+
+  _proto.render = function render() {
+    var _this2 = this;
+
+    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$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 _this$emotion$cx;
+
+    if (!this.props.text) {
+      return null;
+    }
+
+    var _this$getProps4 = this.getProps(),
+        maxWidth = _this$getProps4.maxWidth;
+
+    var centerAlignPositions = ['top', 'top center', 'bottom', 'bottom center'];
+    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: {
+        maxWidth: maxWidth
+      }
+    }, this.props.text);
+  };
+
+  return Hint;
+}(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

@@ -0,0 +1 @@
+{"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":"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","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/package.json

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