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

package/cjs/components/Gapped/Gapped.js.map

@@ -1 +1 @@
-{"version":3,"sources":["Gapped.tsx"],"names":["Gapped","render","props","vertical","renderVertical","renderHorizontal","subsequentItemStyle","paddingTop","gap","isFirst","children","React","Children","map","child","style","undefined","verticalAlign","wrap","itemStyle","display","marginLeft","marginTop","rootStyle","contStyle","whiteSpace","toArray","index","Component","__KONTUR_REACT_UI__","propTypes","PropTypes","number","bool","oneOf","defaultProps"],"mappings":"oUAAA;AACA;;AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;AA0BA;AACA;AACA,G;AACaA,M;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2BJC,EAAAA,M,GAAP,kBAAgB;AACd;AACE,mCAAC,4BAAD,EAAmB,KAAKC,KAAxB;AACG,WAAKA,KAAL,CAAWC,QAAX,GAAsB,KAAKC,cAAL,EAAtB,GAA8C,KAAKC,gBAAL,EADjD,CADF;;;AAKD,G;;AAEOD,EAAAA,c,GAAR,0BAAyB;AACvB,QAAME,mBAAwC,GAAG;AAC/CC,MAAAA,UAAU,EAAE,KAAKL,KAAL,CAAWM,GADwB,EAAjD;;AAGA,QAAIC,OAAO,GAAG,IAAd;AACA,QAAMC,QAAQ,GAAGC,eAAMC,QAAN,CAAeC,GAAf,CAAmB,KAAKX,KAAL,CAAWQ,QAA9B,EAAwC,UAAAI,KAAK,EAAI;AAChE,UAAI,CAACA,KAAL,EAAY;AACV,eAAOA,KAAP;AACD;AACD,UAAMC,KAAK,GAAGN,OAAO,GAAGO,SAAH,GAAeV,mBAApC;;AAEAG,MAAAA,OAAO,GAAG,KAAV;;AAEA,0BAAO,sCAAK,KAAK,EAAEM,KAAZ,IAAoBD,KAApB,CAAP;AACD,KATgB,CAAjB;;AAWA,wBAAO,0CAAMJ,QAAN,CAAP;AACD,G;;AAEOL,EAAAA,gB,GAAR,4BAA2B;AACsB,SAAKH,KAD3B,CACjBM,GADiB,eACjBA,GADiB,CACZE,QADY,eACZA,QADY,CACFO,aADE,eACFA,aADE,CACaC,IADb,eACaA,IADb;AAEzB,QAAMC,SAA8B;AAClCC,MAAAA,OAAO,EAAE,cADyB;AAElCH,MAAAA,aAAa,EAAbA,aAFkC;AAG9BC,IAAAA,IAAI,GAAG,EAAEG,UAAU,EAAEb,GAAd,EAAmBc,SAAS,EAAEd,GAA9B,EAAH,GAAyC,EAHf,CAApC;;AAKA,QAAMe,SAA8B,GAAGL,IAAI,GAAG,EAAEX,UAAU,EAAE,CAAd,EAAH,GAAuB,EAAlE;AACA,QAAMiB,SAA8B,GAAGN,IAAI,GAAG,EAAEI,SAAS,EAAE,CAACd,GAAD,GAAO,CAApB,EAAuBa,UAAU,EAAE,CAACb,GAApC,EAAH,GAA+C,EAAEiB,UAAU,EAAE,QAAd,EAA1F;;AAEA;AACE,4CAAK,KAAK,EAAEF,SAAZ;AACE,4CAAK,KAAK,EAAEC,SAAZ;AACGb,qBAAMC,QAAN,CAAec,OAAf,CAAuBhB,QAAvB,EAAiCG,GAAjC,CAAqC,UAACC,KAAD,EAAQa,KAAR,EAAkB;AACtD,YAAMN,UAAU,GAAGM,KAAK,KAAK,CAAV,GAAcX,SAAd,GAA0BR,GAA7C;AACA;AACE,iDAAM,GAAG,EAAEmB,KAAX,EAAkB,KAAK,2BAAIN,UAAU,EAAVA,UAAJ,IAAmBF,SAAnB,CAAvB;AACGL,UAAAA,KADH,CADF;;;AAKD,OAPA,CADH,CADF,CADF;;;;AAcD,G,iBA9EyBH,eAAMiB,S,0BAArB5B,M,CACG6B,mB,GAAsB,Q,CADzB7B,M,CAGG8B,S,GAAY,EACxB;AACJ;AACA,KACItB,GAAG,EAAEuB,mBAAUC,MAJS,EAMxB;AACJ;AACA,KACI7B,QAAQ,EAAE4B,mBAAUE,IATI,EAWxB;AACJ;AACA,KACIhB,aAAa,EAAEc,mBAAUG,KAAV,CAAgB,CAAC,KAAD,EAAQ,QAAR,EAAkB,UAAlB,EAA8B,QAA9B,CAAhB,CAdS,E,CAHflC,M,CAoBGmC,Y,GAAe,EAC3B3B,GAAG,EAAE,EADsB,EAE3BU,IAAI,EAAE,KAFqB,EAG3Bf,QAAQ,EAAE,KAHiB,EAI3Bc,aAAa,EAAE,UAJY,E","sourcesContent":["import React from 'react';\r\nimport PropTypes from 'prop-types';\r\n\r\nimport { CommonWrapper, CommonProps } from '../../internal/CommonWrapper';\r\n\r\nexport interface GappedProps extends CommonProps {\r\n  /**\r\n   * Расстояние между элементами в пикселях\r\n   * @default 10\r\n   */\r\n  gap: number;\r\n  /**\r\n   * Вертикальное выравнивание\r\n   * @default \"baseline\"\r\n   */\r\n  verticalAlign: 'top' | 'middle' | 'baseline' | 'bottom';\r\n  /**\r\n   * Расположение элементов по вертикали\r\n   * @default false\r\n   */\r\n  vertical: boolean;\r\n  /**\r\n   * Перенос элементов на новую строку при горизонтальном расположении\r\n   * @default false\r\n   */\r\n  wrap: boolean;\r\n  children: React.ReactNode;\r\n}\r\n\r\n/**\r\n * Контейнер, расстояние между элементами в котором равно `gap`.\r\n */\r\nexport class Gapped extends React.Component<GappedProps> {\r\n  public static __KONTUR_REACT_UI__ = 'Gapped';\r\n\r\n  public static propTypes = {\r\n    /**\r\n     * Расстояние между элементами.\r\n     */\r\n    gap: PropTypes.number,\r\n\r\n    /**\r\n     * Располагать элементы вертикально.\r\n     */\r\n    vertical: PropTypes.bool,\r\n\r\n    /**\r\n     * Вертикальное выравнивание элементов.\r\n     */\r\n    verticalAlign: PropTypes.oneOf(['top', 'middle', 'baseline', 'bottom']),\r\n  };\r\n\r\n  public static defaultProps = {\r\n    gap: 10,\r\n    wrap: false,\r\n    vertical: false,\r\n    verticalAlign: 'baseline',\r\n  };\r\n\r\n  public render() {\r\n    return (\r\n      <CommonWrapper {...this.props}>\r\n        {this.props.vertical ? this.renderVertical() : this.renderHorizontal()}\r\n      </CommonWrapper>\r\n    );\r\n  }\r\n\r\n  private renderVertical() {\r\n    const subsequentItemStyle: React.CSSProperties = {\r\n      paddingTop: this.props.gap,\r\n    };\r\n    let isFirst = true;\r\n    const children = React.Children.map(this.props.children, child => {\r\n      if (!child) {\r\n        return child;\r\n      }\r\n      const style = isFirst ? undefined : subsequentItemStyle;\r\n\r\n      isFirst = false;\r\n\r\n      return <div style={style}>{child}</div>;\r\n    });\r\n\r\n    return <div>{children}</div>;\r\n  }\r\n\r\n  private renderHorizontal() {\r\n    const { gap, children, verticalAlign, wrap } = this.props;\r\n    const itemStyle: React.CSSProperties = {\r\n      display: 'inline-block',\r\n      verticalAlign,\r\n      ...(wrap ? { marginLeft: gap, marginTop: gap } : {}),\r\n    };\r\n    const rootStyle: React.CSSProperties = wrap ? { paddingTop: 1 } : {};\r\n    const contStyle: React.CSSProperties = wrap ? { marginTop: -gap - 1, marginLeft: -gap } : { whiteSpace: 'nowrap' };\r\n\r\n    return (\r\n      <div style={rootStyle}>\r\n        <div style={contStyle}>\r\n          {React.Children.toArray(children).map((child, index) => {\r\n            const marginLeft = index === 0 ? undefined : gap;\r\n            return (\r\n              <span key={index} style={{ marginLeft, ...itemStyle }}>\r\n                {child}\r\n              </span>\r\n            );\r\n          })}\r\n        </div>\r\n      </div>\r\n    );\r\n  }\r\n}\r\n"]}
+{"version":3,"sources":["Gapped.tsx"],"names":["Gapped","rootNode","render","setRootNode","props","vertical","renderVertical","renderHorizontal","getGapValue","propsGap","gap","undefined","subsequentItemStyle","paddingTop","children","React","Children","toArray","filter","filterChildren","map","child","index","style","verticalAlign","wrap","itemStyle","display","marginLeft","marginTop","rootStyle","contStyle","whiteSpace","Boolean","Component","__KONTUR_REACT_UI__","propTypes","PropTypes","number","bool","oneOf","defaultProps"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\n\nimport { CommonWrapper, CommonProps } from '../../internal/CommonWrapper';\nimport { rootNode, TSetRootNode } from '../../lib/rootNode';\n\nexport interface GappedProps extends CommonProps {\n  /**\n   * Расстояние между элементами в пикселях\n   * @default 8\n   */\n  gap?: number;\n  /**\n   * Вертикальное выравнивание\n   * @default \"baseline\"\n   */\n  verticalAlign: 'top' | 'middle' | 'baseline' | 'bottom';\n  /**\n   * Расположение элементов по вертикали\n   * @default false\n   */\n  vertical: boolean;\n  /**\n   * Перенос элементов на новую строку при горизонтальном расположении\n   * @default false\n   */\n  wrap: boolean;\n  children: React.ReactNode;\n}\n\n/**\n * Контейнер, расстояние между элементами в котором равно `gap`.\n */\n@rootNode\nexport class Gapped extends React.Component<GappedProps> {\n  public static __KONTUR_REACT_UI__ = 'Gapped';\n\n  public static propTypes = {\n    /**\n     * Расстояние между элементами.\n     */\n    gap: PropTypes.number,\n\n    /**\n     * Располагать элементы вертикально.\n     */\n    vertical: PropTypes.bool,\n\n    /**\n     * Вертикальное выравнивание элементов.\n     */\n    verticalAlign: PropTypes.oneOf(['top', 'middle', 'baseline', 'bottom']),\n  };\n\n  private setRootNode!: TSetRootNode;\n\n  public static defaultProps = {\n    wrap: false,\n    vertical: false,\n    verticalAlign: 'baseline',\n  };\n\n  public render() {\n    return (\n      <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>\n        {this.props.vertical ? this.renderVertical() : this.renderHorizontal()}\n      </CommonWrapper>\n    );\n  }\n\n  private getGapValue() {\n    // DEPRECATED remove in 4.0\n    const { gap: propsGap } = this.props;\n    if (propsGap !== undefined && propsGap !== null) {\n      return propsGap;\n    } else {\n      return 8;\n    }\n  }\n\n  private renderVertical() {\n    const subsequentItemStyle: React.CSSProperties = {\n      paddingTop: this.getGapValue(),\n    };\n    const children = React.Children.toArray(this.props.children)\n      .filter(this.filterChildren)\n      .map((child, index) => {\n        const style = index === 0 ? undefined : subsequentItemStyle;\n        return (\n          <div style={style} key={index}>\n            {child}\n          </div>\n        );\n      });\n\n    return <div>{children}</div>;\n  }\n\n  private renderHorizontal() {\n    const { children, verticalAlign, wrap } = this.props;\n    const gap = this.getGapValue();\n    const itemStyle: React.CSSProperties = {\n      display: 'inline-block',\n      verticalAlign,\n      ...(wrap ? { marginLeft: gap, marginTop: gap } : {}),\n    };\n    const rootStyle: React.CSSProperties = wrap ? { paddingTop: 1 } : {};\n    const contStyle: React.CSSProperties = wrap ? { marginTop: -gap - 1, marginLeft: -gap } : { whiteSpace: 'nowrap' };\n\n    return (\n      <div style={rootStyle}>\n        <div style={contStyle}>\n          {React.Children.toArray(children)\n            .filter(this.filterChildren)\n            .map((child, index) => {\n              const marginLeft = index === 0 ? undefined : gap;\n              return (\n                <span key={index} style={{ marginLeft, ...itemStyle }}>\n                  {child}\n                </span>\n              );\n            })}\n        </div>\n      </div>\n    );\n  }\n\n  private filterChildren(child: React.ReactNode): boolean {\n    return Boolean(child) || typeof child === 'number';\n  }\n}\n"]}

package/cjs/components/Gapped/Gapped.md

@@ -1,43 +1,43 @@
-Вывод элементов с горизонтальным расположением
-
-```jsx harmony
-import { Button } from '@skbkontur/react-ui';
-
-<Gapped gap={20}>
-  <Button use="primary">Сохранить</Button>
-  <Button>Отмена</Button>
-</Gapped>;
-```
-
-Вертикальное расположение
-
-```jsx harmony
-import { Checkbox } from '@skbkontur/react-ui';
-
-<Gapped vertical gap={20}>
-  <Checkbox checked>Write todos</Checkbox>
-  <Checkbox initialIndeterminate>Work in progress</Checkbox>
-  <Checkbox>Make things done</Checkbox>
-</Gapped>;
-```
-
-По умолчанию `Gapped` выстраивает элементы в одну строчку, но с помощью свойства `wrap` можно включить перенос элементов на новую строку.
-При этом между строчками будет отступ равный значению свойста `gap`
-В таком случае из-за особенности верстки `Gapped` может перекрывать элементы расположенные сверху-слева.
-
-```jsx harmony
-import { Button, Checkbox, Toggle } from '@skbkontur/react-ui';
-
-<>
-  {"U Can't Touch This! => "}
-  <Toggle />
-
-  <div style={{ paddingTop: '10px', position: 'relative', width: '250px' }}>
-    <Gapped wrap gap={50}>
-      <Button use="primary">Сохранить</Button>
-      <Button>Отмена</Button>
-      <Checkbox>Я не робот</Checkbox>
-    </Gapped>
-  </div>
-</>;
-```
+Вывод элементов с горизонтальным расположением
+
+```jsx harmony
+import { Button } from '@skbkontur/react-ui';
+
+<Gapped gap={20}>
+  <Button use="primary">Сохранить</Button>
+  <Button>Отмена</Button>
+</Gapped>;
+```
+
+Вертикальное расположение
+
+```jsx harmony
+import { Checkbox } from '@skbkontur/react-ui';
+
+<Gapped vertical gap={20}>
+  <Checkbox checked>Write todos</Checkbox>
+  <Checkbox initialIndeterminate>Work in progress</Checkbox>
+  <Checkbox>Make things done</Checkbox>
+</Gapped>;
+```
+
+По умолчанию `Gapped` выстраивает элементы в одну строчку, но с помощью свойства `wrap` можно включить перенос элементов на новую строку.
+При этом между строчками будет отступ равный значению свойста `gap`
+В таком случае из-за особенности верстки `Gapped` может перекрывать элементы расположенные сверху-слева.
+
+```jsx harmony
+import { Button, Checkbox, Toggle } from '@skbkontur/react-ui';
+
+<>
+  {"U Can't Touch This! => "}
+  <Toggle />
+
+  <div style={{ paddingTop: '10px', position: 'relative', width: '250px' }}>
+    <Gapped wrap gap={50}>
+      <Button use="primary">Сохранить</Button>
+      <Button>Отмена</Button>
+      <Checkbox>Я не робот</Checkbox>
+    </Gapped>
+  </div>
+</>;
+```

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

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

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

@@ -6,6 +6,7 @@ export interface GroupProps extends CommonProps {
 }
 export declare class Group extends React.Component<GroupProps> {
     static __KONTUR_REACT_UI__: string;
+    private setRootNode;
     static propTypes: {
         width: PropTypes.Requireable<string | number>;
     };

package/cjs/components/Group/Group.js

@@ -1,14 +1,15 @@
-"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");exports.__esModule = true;exports.Group = void 0;var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));var _react = _interopRequireDefault(require("react"));
+"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");exports.__esModule = true;exports.Group = void 0;var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _classnames = _interopRequireDefault(require("classnames"));
 
 var _client = require("../../lib/client");
 var _Corners = require("../Button/Corners");
 
 var _Button = require("../Button");
 var _CommonWrapper = require("../../internal/CommonWrapper");
+var _Emotion = require("../../lib/theming/Emotion");
+var _rootNode = require("../../lib/rootNode");
 
-var _Group = require("./Group.styles");var
+var _Group = require("./Group.styles");var _class, _class2, _temp;var
 
 
 
@@ -19,7 +20,9 @@ var _Group = require("./Group.styles");var
 
 
 
-Group = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.default)(Group, _React$Component);function Group() {return _React$Component.apply(this, arguments) || this;}var _proto = Group.prototype;_proto.
+
+Group = (0, _rootNode.rootNode)(_class = (_temp = _class2 = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.default)(Group, _React$Component);function Group() {return _React$Component.apply(this, arguments) || this;}var _proto = Group.prototype;_proto.
+
 
 
 
@@ -42,17 +45,17 @@ Group = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.default)(G
     });
 
     return /*#__PURE__*/(
-      _react.default.createElement(_CommonWrapper.CommonWrapper, this.props, /*#__PURE__*/
-      _react.default.createElement("span", { className: _Group.jsStyles.root(), style: style },
-      _react.default.Children.map(this.props.children, function (child) {var _cn, _cn2;
+      _react.default.createElement(_CommonWrapper.CommonWrapper, (0, _extends2.default)({ rootNodeRef: this.setRootNode }, this.props), /*#__PURE__*/
+      _react.default.createElement("span", { className: _Group.styles.root(), style: style },
+      _react.default.Children.map(this.props.children, function (child) {var _cx, _cx2;
         if (!child || ! /*#__PURE__*/_react.default.isValidElement(child)) {
           return null;
         }
 
         var isWidthInPercent = Boolean(child.props.width && child.props.width.toString().includes('%'));
-        var itemCss = (0, _classnames.default)((_cn = {}, _cn[
-        _Group.jsStyles.item()] = true, _cn[
-        _Group.jsStyles.itemFirst()] = child === first, _cn));
+        var itemCss = (0, _Emotion.cx)((_cx = {}, _cx[
+        _Group.styles.item()] = true, _cx[
+        _Group.styles.itemFirst()] = child === first, _cx));
 
 
         var corners = 0;
@@ -69,10 +72,10 @@ Group = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.default)(G
 
         return /*#__PURE__*/(
           _react.default.createElement("div", {
-            className: (0, _classnames.default)((_cn2 = {}, _cn2[
-            _Group.jsStyles.fixed()] = !isWidthInPercent, _cn2[
-            _Group.jsStyles.stretch()] = isWidthInPercent, _cn2[
-            _Group.jsStyles.stretchFallback()] = Boolean(isWidthInPercent && _this.props.width && (_client.isIE11 || _client.isEdge)), _cn2)) }, /*#__PURE__*/
+            className: (0, _Emotion.cx)((_cx2 = {}, _cx2[
+            _Group.styles.fixed()] = !isWidthInPercent, _cx2[
+            _Group.styles.stretch()] = isWidthInPercent, _cx2[
+            _Group.styles.stretchFallback()] = Boolean(isWidthInPercent && _this.props.width && (_client.isIE11 || _client.isEdge)), _cx2)) }, /*#__PURE__*/
 
 
           _react.default.createElement("div", { className: itemCss }, child)));
@@ -82,4 +85,4 @@ Group = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.default)(G
 
 
 
-  };return Group;}(_react.default.Component);exports.Group = Group;Group.__KONTUR_REACT_UI__ = 'Group';Group.propTypes = { width: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]) };
+  };return Group;}(_react.default.Component), _class2.__KONTUR_REACT_UI__ = 'Group', _class2.propTypes = { width: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]) }, _temp)) || _class;exports.Group = Group;

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

@@ -1 +1 @@
-{"version":3,"sources":["Group.tsx"],"names":["Group","render","style","width","props","first","last","React","Children","forEach","children","child","isValidElement","jsStyles","root","map","isWidthInPercent","Boolean","toString","includes","itemCss","item","itemFirst","corners","Corners","TOP_LEFT","BOTTOM_LEFT","TOP_RIGHT","BOTTOM_RIGHT","cloneElement","fixed","stretch","stretchFallback","isIE11","isEdge","Component","__KONTUR_REACT_UI__","propTypes","PropTypes","oneOfType","number","string"],"mappings":"iPAAA;AACA;AACA;;AAEA;AACA;;AAEA;AACA;;AAEA,uC;;;;;;;;;;;AAWaA,K;;;;;;;AAOJC,EAAAA,M,GAAP,kBAAgB;AACd,QAAMC,KAA0B,GAAG;AACjCC,MAAAA,KAAK,EAAE,KAAKC,KAAL,CAAWD,KADe,EAAnC;;;AAIA,QAAIE,KAAwC,GAAG,IAA/C;AACA,QAAIC,IAAuC,GAAG,IAA9C;;AAEAC,mBAAMC,QAAN,CAAeC,OAAf,CAAuB,KAAKL,KAAL,CAAWM,QAAlC,EAA4C,UAAAC,KAAK,EAAI;AACnD,UAAIA,KAAK,iBAAIJ,eAAMK,cAAN,CAAqBD,KAArB,CAAb,EAA0C;AACxCN,QAAAA,KAAK,GAAGA,KAAK,IAAIM,KAAjB;AACAL,QAAAA,IAAI,GAAGK,KAAP;AACD;AACF,KALD;;AAOA;AACE,mCAAC,4BAAD,EAAmB,KAAKP,KAAxB;AACE,6CAAM,SAAS,EAAES,gBAASC,IAAT,EAAjB,EAAkC,KAAK,EAAEZ,KAAzC;AACGK,qBAAMC,QAAN,CAAeO,GAAf,CAAmB,KAAKX,KAAL,CAAWM,QAA9B,EAAwC,UAAAC,KAAK,EAAI;AAChD,YAAI,CAACA,KAAD,IAAU,eAACJ,eAAMK,cAAN,CAAsCD,KAAtC,CAAf,EAA6D;AAC3D,iBAAO,IAAP;AACD;;AAED,YAAMK,gBAAgB,GAAGC,OAAO,CAACN,KAAK,CAACP,KAAN,CAAYD,KAAZ,IAAqBQ,KAAK,CAACP,KAAN,CAAYD,KAAZ,CAAkBe,QAAlB,GAA6BC,QAA7B,CAAsC,GAAtC,CAAtB,CAAhC;AACA,YAAMC,OAAO,GAAG;AACbP,wBAASQ,IAAT,EADa,IACK,IADL;AAEbR,wBAASS,SAAT,EAFa,IAEUX,KAAK,KAAKN,KAFpB,OAAhB;;;AAKA,YAAIkB,OAAO,GAAG,CAAd;AACA,YAAIZ,KAAK,KAAKN,KAAd,EAAqB;AACnBkB,UAAAA,OAAO,IAAIC,iBAAQC,QAAR,GAAmBD,iBAAQE,WAAtC;AACD;AACD,YAAIf,KAAK,KAAKL,IAAd,EAAoB;AAClBiB,UAAAA,OAAO,IAAIC,iBAAQG,SAAR,GAAoBH,iBAAQI,YAAvC;AACD;;AAED,YAAI,sBAASjB,KAAT,CAAJ,EAAqB;AACnBA,UAAAA,KAAK,gBAAGJ,eAAMsB,YAAN,CAAmBlB,KAAnB,EAA0B,EAAEY,OAAO,EAAPA,OAAF,EAA1B,CAAR;AACD;;AAED;AACE;AACE,YAAA,SAAS,EAAE;AACRV,4BAASiB,KAAT,EADQ,IACW,CAACd,gBADZ;AAERH,4BAASkB,OAAT,EAFQ,IAEaf,gBAFb;AAGRH,4BAASmB,eAAT,EAHQ,IAGqBf,OAAO,CAACD,gBAAgB,IAAI,KAAI,CAACZ,KAAL,CAAWD,KAA/B,KAAyC8B,kBAAUC,cAAnD,CAAD,CAH5B,QADb;;;AAOE,gDAAK,SAAS,EAAEd,OAAhB,IAA0BT,KAA1B,CAPF,CADF;;;AAWD,OAlCA,CADH,CADF,CADF;;;;AAyCD,G,gBA/DwBJ,eAAM4B,S,wBAApBnC,K,CACGoC,mB,GAAsB,O,CADzBpC,K,CAGGqC,S,GAAY,EACxBlC,KAAK,EAAEmC,mBAAUC,SAAV,CAAoB,CAACD,mBAAUE,MAAX,EAAmBF,mBAAUG,MAA7B,CAApB,CADiB,E","sourcesContent":["import React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport cn from 'classnames';\r\n\r\nimport { isIE11, isEdge } from '../../lib/client';\r\nimport { Corners } from '../Button/Corners';\r\nimport { Nullable } from '../../typings/utility-types';\r\nimport { isButton } from '../Button';\r\nimport { CommonWrapper, CommonProps } from '../../internal/CommonWrapper';\r\n\r\nimport { jsStyles } from './Group.styles';\r\n\r\nexport interface GroupProps extends CommonProps {\r\n  width?: React.CSSProperties['width'];\r\n}\r\n\r\ninterface GroupChildProps {\r\n  width?: React.CSSProperties['width'];\r\n  corners?: number;\r\n}\r\n\r\nexport class Group extends React.Component<GroupProps> {\r\n  public static __KONTUR_REACT_UI__ = 'Group';\r\n\r\n  public static propTypes = {\r\n    width: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),\r\n  };\r\n\r\n  public render() {\r\n    const style: React.CSSProperties = {\r\n      width: this.props.width,\r\n    };\r\n\r\n    let first: Nullable<React.ReactElement<any>> = null;\r\n    let last: Nullable<React.ReactElement<any>> = null;\r\n\r\n    React.Children.forEach(this.props.children, child => {\r\n      if (child && React.isValidElement(child)) {\r\n        first = first || child;\r\n        last = child;\r\n      }\r\n    });\r\n\r\n    return (\r\n      <CommonWrapper {...this.props}>\r\n        <span className={jsStyles.root()} style={style}>\r\n          {React.Children.map(this.props.children, child => {\r\n            if (!child || !React.isValidElement<GroupChildProps>(child)) {\r\n              return null;\r\n            }\r\n\r\n            const isWidthInPercent = Boolean(child.props.width && child.props.width.toString().includes('%'));\r\n            const itemCss = cn({\r\n              [jsStyles.item()]: true,\r\n              [jsStyles.itemFirst()]: child === first,\r\n            });\r\n\r\n            let corners = 0;\r\n            if (child !== first) {\r\n              corners |= Corners.TOP_LEFT | Corners.BOTTOM_LEFT;\r\n            }\r\n            if (child !== last) {\r\n              corners |= Corners.TOP_RIGHT | Corners.BOTTOM_RIGHT;\r\n            }\r\n\r\n            if (isButton(child)) {\r\n              child = React.cloneElement(child, { corners });\r\n            }\r\n\r\n            return (\r\n              <div\r\n                className={cn({\r\n                  [jsStyles.fixed()]: !isWidthInPercent,\r\n                  [jsStyles.stretch()]: isWidthInPercent,\r\n                  [jsStyles.stretchFallback()]: Boolean(isWidthInPercent && this.props.width && (isIE11 || isEdge)),\r\n                })}\r\n              >\r\n                <div className={itemCss}>{child}</div>\r\n              </div>\r\n            );\r\n          })}\r\n        </span>\r\n      </CommonWrapper>\r\n    );\r\n  }\r\n}\r\n"]}
+{"version":3,"sources":["Group.tsx"],"names":["Group","rootNode","render","style","width","props","first","last","React","Children","forEach","children","child","isValidElement","setRootNode","styles","root","map","isWidthInPercent","Boolean","toString","includes","itemCss","item","itemFirst","corners","Corners","TOP_LEFT","BOTTOM_LEFT","TOP_RIGHT","BOTTOM_RIGHT","cloneElement","fixed","stretch","stretchFallback","isIE11","isEdge","Component","__KONTUR_REACT_UI__","propTypes","PropTypes","oneOfType","number","string"],"mappings":"mUAAA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;AACA;;AAEA,uC;;;;;;;;;;;;AAYaA,K,OADZC,kB;;;;;;;;AASQC,EAAAA,M,GAAP,kBAAgB;AACd,QAAMC,KAA0B,GAAG;AACjCC,MAAAA,KAAK,EAAE,KAAKC,KAAL,CAAWD,KADe,EAAnC;;;AAIA,QAAIE,KAAwC,GAAG,IAA/C;AACA,QAAIC,IAAuC,GAAG,IAA9C;;AAEAC,mBAAMC,QAAN,CAAeC,OAAf,CAAuB,KAAKL,KAAL,CAAWM,QAAlC,EAA4C,UAACC,KAAD,EAAW;AACrD,UAAIA,KAAK,iBAAIJ,eAAMK,cAAN,CAAqBD,KAArB,CAAb,EAA0C;AACxCN,QAAAA,KAAK,GAAGA,KAAK,IAAIM,KAAjB;AACAL,QAAAA,IAAI,GAAGK,KAAP;AACD;AACF,KALD;;AAOA;AACE,mCAAC,4BAAD,2BAAe,WAAW,EAAE,KAAKE,WAAjC,IAAkD,KAAKT,KAAvD;AACE,6CAAM,SAAS,EAAEU,cAAOC,IAAP,EAAjB,EAAgC,KAAK,EAAEb,KAAvC;AACGK,qBAAMC,QAAN,CAAeQ,GAAf,CAAmB,KAAKZ,KAAL,CAAWM,QAA9B,EAAwC,UAACC,KAAD,EAAW;AAClD,YAAI,CAACA,KAAD,IAAU,eAACJ,eAAMK,cAAN,CAAsCD,KAAtC,CAAf,EAA6D;AAC3D,iBAAO,IAAP;AACD;;AAED,YAAMM,gBAAgB,GAAGC,OAAO,CAACP,KAAK,CAACP,KAAN,CAAYD,KAAZ,IAAqBQ,KAAK,CAACP,KAAN,CAAYD,KAAZ,CAAkBgB,QAAlB,GAA6BC,QAA7B,CAAsC,GAAtC,CAAtB,CAAhC;AACA,YAAMC,OAAO,GAAG;AACbP,sBAAOQ,IAAP,EADa,IACG,IADH;AAEbR,sBAAOS,SAAP,EAFa,IAEQZ,KAAK,KAAKN,KAFlB,OAAhB;;;AAKA,YAAImB,OAAO,GAAG,CAAd;AACA,YAAIb,KAAK,KAAKN,KAAd,EAAqB;AACnBmB,UAAAA,OAAO,IAAIC,iBAAQC,QAAR,GAAmBD,iBAAQE,WAAtC;AACD;AACD,YAAIhB,KAAK,KAAKL,IAAd,EAAoB;AAClBkB,UAAAA,OAAO,IAAIC,iBAAQG,SAAR,GAAoBH,iBAAQI,YAAvC;AACD;;AAED,YAAI,sBAASlB,KAAT,CAAJ,EAAqB;AACnBA,UAAAA,KAAK,gBAAGJ,eAAMuB,YAAN,CAAmBnB,KAAnB,EAA0B,EAAEa,OAAO,EAAPA,OAAF,EAA1B,CAAR;AACD;;AAED;AACE;AACE,YAAA,SAAS,EAAE;AACRV,0BAAOiB,KAAP,EADQ,IACS,CAACd,gBADV;AAERH,0BAAOkB,OAAP,EAFQ,IAEWf,gBAFX;AAGRH,0BAAOmB,eAAP,EAHQ,IAGmBf,OAAO,CAACD,gBAAgB,IAAI,KAAI,CAACb,KAAL,CAAWD,KAA/B,KAAyC+B,kBAAUC,cAAnD,CAAD,CAH1B,QADb;;;AAOE,gDAAK,SAAS,EAAEd,OAAhB,IAA0BV,KAA1B,CAPF,CADF;;;AAWD,OAlCA,CADH,CADF,CADF;;;;AAyCD,G,gBAhEwBJ,eAAM6B,S,WACjBC,mB,GAAsB,O,UAGtBC,S,GAAY,EACxBnC,KAAK,EAAEoC,mBAAUC,SAAV,CAAoB,CAACD,mBAAUE,MAAX,EAAmBF,mBAAUG,MAA7B,CAApB,CADiB,E","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\n\nimport { isIE11, isEdge } from '../../lib/client';\nimport { Corners } from '../Button/Corners';\nimport { Nullable } from '../../typings/utility-types';\nimport { isButton } from '../Button';\nimport { CommonWrapper, CommonProps } from '../../internal/CommonWrapper';\nimport { cx } from '../../lib/theming/Emotion';\nimport { rootNode, TSetRootNode } from '../../lib/rootNode';\n\nimport { styles } from './Group.styles';\n\nexport interface GroupProps extends CommonProps {\n  width?: React.CSSProperties['width'];\n}\n\ninterface GroupChildProps {\n  width?: React.CSSProperties['width'];\n  corners?: number;\n}\n\n@rootNode\nexport class Group extends React.Component<GroupProps> {\n  public static __KONTUR_REACT_UI__ = 'Group';\n  private setRootNode!: TSetRootNode;\n\n  public static propTypes = {\n    width: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),\n  };\n\n  public render() {\n    const style: React.CSSProperties = {\n      width: this.props.width,\n    };\n\n    let first: Nullable<React.ReactElement<any>> = null;\n    let last: Nullable<React.ReactElement<any>> = null;\n\n    React.Children.forEach(this.props.children, (child) => {\n      if (child && React.isValidElement(child)) {\n        first = first || child;\n        last = child;\n      }\n    });\n\n    return (\n      <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>\n        <span className={styles.root()} style={style}>\n          {React.Children.map(this.props.children, (child) => {\n            if (!child || !React.isValidElement<GroupChildProps>(child)) {\n              return null;\n            }\n\n            const isWidthInPercent = Boolean(child.props.width && child.props.width.toString().includes('%'));\n            const itemCss = cx({\n              [styles.item()]: true,\n              [styles.itemFirst()]: child === first,\n            });\n\n            let corners = 0;\n            if (child !== first) {\n              corners |= Corners.TOP_LEFT | Corners.BOTTOM_LEFT;\n            }\n            if (child !== last) {\n              corners |= Corners.TOP_RIGHT | Corners.BOTTOM_RIGHT;\n            }\n\n            if (isButton(child)) {\n              child = React.cloneElement(child, { corners });\n            }\n\n            return (\n              <div\n                className={cx({\n                  [styles.fixed()]: !isWidthInPercent,\n                  [styles.stretch()]: isWidthInPercent,\n                  [styles.stretchFallback()]: Boolean(isWidthInPercent && this.props.width && (isIE11 || isEdge)),\n                })}\n              >\n                <div className={itemCss}>{child}</div>\n              </div>\n            );\n          })}\n        </span>\n      </CommonWrapper>\n    );\n  }\n}\n"]}

package/cjs/components/Group/Group.md

@@ -1,26 +1,18 @@
-```jsx harmony
-import UndoIcon from '@skbkontur/react-icons/Undo';
-import FunctionIcon from '@skbkontur/react-icons/Function';
-import { Button, Input } from '@skbkontur/react-ui';
-
-let initialState = { auto: false };
-
-let auto = null;
-let icon = null;
-if (!state.auto) {
-  auto = (
-    <Button onClick={e => setState({ auto: true })}>
-      <UndoIcon />
-    </Button>
-  );
-} else {
-  icon = <FunctionIcon />;
-}
-
-<Group width={300}>
-  {auto}
-  <Input width="100%" leftIcon={icon} onChange={e => setState({ auto: false })} />
-  <Button>Hey</Button>
-  <Button>Ma</Button>
-</Group>;
-```
+```jsx harmony
+import FunctionIcon from '@skbkontur/react-icons/Function';
+import SearchIcon from '@skbkontur/react-icons/Search';
+import { Button, Input } from '@skbkontur/react-ui';
+
+const [value, setValue] = React.useState('Foo');
+
+<Group width={300}>
+  <Button>
+    <FunctionIcon />
+  </Button>
+  <Input value={value} width="100%" onValueChange={setValue} />
+  <Button>
+    <SearchIcon />
+  </Button>
+  <Button>Bar</Button>
+</Group>;
+```

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

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

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

@@ -1,43 +1,41 @@
-"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");exports.__esModule = true;exports.jsStyles = void 0;var _taggedTemplateLiteralLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteralLoose"));var _Emotion = require("../../lib/theming/Emotion");function _templateObject6() {var data = (0, _taggedTemplateLiteralLoose2.default)(["\n      margin-left: 0;\n    "]);_templateObject6 = function _templateObject6() {return data;};return data;}function _templateObject5() {var data = (0, _taggedTemplateLiteralLoose2.default)(["\n      margin-left: -1px;\n    "]);_templateObject5 = function _templateObject5() {return data;};return data;}function _templateObject4() {var data = (0, _taggedTemplateLiteralLoose2.default)(["\n      flex-basis: 100%;\n    "]);_templateObject4 = function _templateObject4() {return data;};return data;}function _templateObject3() {var data = (0, _taggedTemplateLiteralLoose2.default)(["\n      flex-grow: 1;\n      flex-shrink: 1;\n    "]);_templateObject3 = function _templateObject3() {return data;};return data;}function _templateObject2() {var data = (0, _taggedTemplateLiteralLoose2.default)(["\n      flex-shrink: 0;\n      display: inline-block;\n    "]);_templateObject2 = function _templateObject2() {return data;};return data;}function _templateObject() {var data = (0, _taggedTemplateLiteralLoose2.default)(["\n      display: inline-flex;\n    "]);_templateObject = function _templateObject() {return data;};return data;}
+"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");exports.__esModule = true;exports.styles = void 0;var _taggedTemplateLiteralLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteralLoose"));var _Emotion = require("../../lib/theming/Emotion");var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
 
-var styles = {
+var styles = (0, _Emotion.memoizeStyle)({
   root: function root() {
-    return (0, _Emotion.css)(_templateObject());
+    return (0, _Emotion.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2.default)(["\n      display: inline-flex;\n      line-height: normal;\n    "])));
+
 
 
   },
 
   fixed: function fixed() {
-    return (0, _Emotion.css)(_templateObject2());
+    return (0, _Emotion.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteralLoose2.default)(["\n      flex-shrink: 0;\n      display: inline-block;\n    "])));
 
 
 
   },
 
   stretch: function stretch() {
-    return (0, _Emotion.css)(_templateObject3());
+    return (0, _Emotion.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteralLoose2.default)(["\n      flex-grow: 1;\n      flex-shrink: 1;\n    "])));
 
 
 
   },
 
   stretchFallback: function stretchFallback() {
-    return (0, _Emotion.css)(_templateObject4());
+    return (0, _Emotion.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteralLoose2.default)(["\n      flex-basis: 100%;\n    "])));
 
 
   },
 
   item: function item() {
-    return (0, _Emotion.css)(_templateObject5());
+    return (0, _Emotion.css)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteralLoose2.default)(["\n      margin-left: -1px;\n    "])));
 
 
   },
 
   itemFirst: function itemFirst() {
-    return (0, _Emotion.css)(_templateObject6());
-
-
-  } };
+    return (0, _Emotion.css)(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteralLoose2.default)(["\n      margin-left: 0;\n    "])));
 
 
-var jsStyles = (0, _Emotion.memoizeStyle)(styles);exports.jsStyles = jsStyles;
+  } });exports.styles = styles;

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

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

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

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

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

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

package/cjs/components/Hint/Hint.js

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