@skbkontur/react-ui 3.9.2 → 3.10.0-beta.1

package/cjs/components/Gapped/Gapped.js

@@ -5,6 +5,7 @@ var _CommonWrapper = require("../../internal/CommonWrapper");
 var _ThemeHelpers = require("../../lib/theming/ThemeHelpers");
 
 var _ThemeContext = require("../../lib/theming/ThemeContext");
+var _rootNode = require("../../lib/rootNode");var _class, _class2, _temp;
 
 
 
@@ -33,8 +34,8 @@ var _ThemeContext = require("../../lib/theming/ThemeContext");
 /**
  * Контейнер, расстояние между элементами в котором равно `gap`.
  */var
-Gapped = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.default)(Gapped, _React$Component);function Gapped() {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.
 
+Gapped = (0, _rootNode.rootNode)(_class = (_temp = _class2 = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.default)(Gapped, _React$Component);function Gapped() {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.
 
 
 
@@ -53,7 +54,9 @@ Gapped = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.default)(
 
 
 
-    theme = void 0;return _this;}var _proto = Gapped.prototype;_proto.
+
+    theme = void 0;_this.
+    setRootNode = void 0;return _this;}var _proto = Gapped.prototype;_proto.
 
 
 
@@ -67,7 +70,7 @@ Gapped = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.default)(
       function (theme) {
         _this2.theme = theme;
         return /*#__PURE__*/(
-          _react.default.createElement(_CommonWrapper.CommonWrapper, _this2.props,
+          _react.default.createElement(_CommonWrapper.CommonWrapper, (0, _extends2.default)({ rootNodeRef: _this2.setRootNode }, _this2.props),
           _this2.props.vertical ? _this2.renderVertical() : _this2.renderHorizontal()));
 
 
@@ -91,16 +94,15 @@ Gapped = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.default)(
     var subsequentItemStyle = {
       paddingTop: this.getGapValue() };
 
-    var isFirst = true;
-    var children = _react.default.Children.map(this.props.children, function (child) {
-      if (!child) {
-        return child;
-      }
-      var style = isFirst ? undefined : subsequentItemStyle;
+    var children = _react.default.Children.toArray(this.props.children).
+    filter(this.filterChildren).
+    map(function (child, index) {
+      var style = index === 0 ? undefined : subsequentItemStyle;
+      return /*#__PURE__*/(
+        _react.default.createElement("div", { style: style, key: index },
+        child));
 
-      isFirst = false;
 
-      return /*#__PURE__*/_react.default.createElement("div", { style: style }, child);
     });
 
     return /*#__PURE__*/_react.default.createElement("div", null, children);
@@ -120,7 +122,9 @@ Gapped = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.default)(
     return /*#__PURE__*/(
       _react.default.createElement("div", { style: rootStyle }, /*#__PURE__*/
       _react.default.createElement("div", { style: contStyle },
-      _react.default.Children.toArray(children).map(function (child, index) {
+      _react.default.Children.toArray(children).
+      filter(this.filterChildren).
+      map(function (child, index) {
         var marginLeft = index === 0 ? undefined : gap;
         return /*#__PURE__*/(
           _react.default.createElement("span", { key: index, style: (0, _extends2.default)({ marginLeft: marginLeft }, itemStyle) },
@@ -131,10 +135,14 @@ Gapped = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.default)(
 
 
 
-  };return Gapped;}(_react.default.Component);exports.Gapped = Gapped;Gapped.__KONTUR_REACT_UI__ = 'Gapped';Gapped.propTypes = { /**
+  };_proto.
+
+  filterChildren = function filterChildren(child) {
+    return Boolean(child) || typeof child === 'number';
+  };return Gapped;}(_react.default.Component), _class2.__KONTUR_REACT_UI__ = 'Gapped', _class2.propTypes = { /**
    * Расстояние между элементами.
    */gap: _propTypes.default.number, /**
    * Располагать элементы вертикально.
    */vertical: _propTypes.default.bool, /**
    * Вертикальное выравнивание элементов.
-   */verticalAlign: _propTypes.default.oneOf(['top', 'middle', 'baseline', 'bottom']) };Gapped.defaultProps = { wrap: false, vertical: false, verticalAlign: 'baseline' };
+   */verticalAlign: _propTypes.default.oneOf(['top', 'middle', 'baseline', 'bottom']) }, _class2.defaultProps = { wrap: false, vertical: false, verticalAlign: 'baseline' }, _temp)) || _class;exports.Gapped = Gapped;

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

@@ -1 +1 @@
-{"version":3,"sources":["Gapped.tsx"],"names":["Gapped","theme","render","props","vertical","renderVertical","renderHorizontal","getGapValue","propsGap","gap","undefined","subsequentItemStyle","paddingTop","isFirst","children","React","Children","map","child","style","verticalAlign","wrap","itemStyle","display","marginLeft","marginTop","rootStyle","contStyle","whiteSpace","toArray","index","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 { is8pxTheme } from '../../lib/theming/ThemeHelpers';\nimport { Theme } from '../../lib/theming/Theme';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\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 */\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 theme!: Theme;\n\n  public static defaultProps = {\n    wrap: false,\n    vertical: false,\n    verticalAlign: 'baseline',\n  };\n\n  public render() {\n    return (\n      <ThemeContext.Consumer>\n        {(theme) => {\n          this.theme = theme;\n          return (\n            <CommonWrapper {...this.props}>\n              {this.props.vertical ? this.renderVertical() : this.renderHorizontal()}\n            </CommonWrapper>\n          );\n        }}\n      </ThemeContext.Consumer>\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      const gap = is8pxTheme(this.theme) ? 8 : 10;\n      return gap;\n    }\n  }\n\n  private renderVertical() {\n    const subsequentItemStyle: React.CSSProperties = {\n      paddingTop: this.getGapValue(),\n    };\n    let isFirst = true;\n    const children = React.Children.map(this.props.children, (child) => {\n      if (!child) {\n        return child;\n      }\n      const style = isFirst ? undefined : subsequentItemStyle;\n\n      isFirst = false;\n\n      return <div style={style}>{child}</div>;\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).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"]}
+{"version":3,"sources":["Gapped.tsx"],"names":["Gapped","rootNode","theme","setRootNode","render","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 { is8pxTheme } from '../../lib/theming/ThemeHelpers';\nimport { Theme } from '../../lib/theming/Theme';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\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 theme!: Theme;\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      <ThemeContext.Consumer>\n        {(theme) => {\n          this.theme = theme;\n          return (\n            <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>\n              {this.props.vertical ? this.renderVertical() : this.renderHorizontal()}\n            </CommonWrapper>\n          );\n        }}\n      </ThemeContext.Consumer>\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      const gap = is8pxTheme(this.theme) ? 8 : 10;\n      return gap;\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/index.d.ts

@@ -1 +1 @@
-export * from './Gapped';
+export * from './Gapped';

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

@@ -1,13 +1,14 @@
-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 class Group extends React.Component<GroupProps> {
-    static __KONTUR_REACT_UI__: string;
-    static propTypes: {
-        width: PropTypes.Requireable<string | number>;
-    };
-    render(): JSX.Element;
-}
+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 class Group extends React.Component<GroupProps> {
+    static __KONTUR_REACT_UI__: string;
+    private setRootNode;
+    static propTypes: {
+        width: PropTypes.Requireable<string | number>;
+    };
+    render(): JSX.Element;
+}

package/cjs/components/Group/Group.js

@@ -1,4 +1,4 @@
-"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 _client = require("../../lib/client");
@@ -7,8 +7,9 @@ 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,14 +20,16 @@ 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() {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.
 
+    setRootNode = void 0;return _this;}var _proto = Group.prototype;_proto.
 
 
 
 
-  render = function render() {var _this = this;
+
+  render = function render() {var _this2 = this;
     var style = {
       width: this.props.width };
 
@@ -42,7 +45,7 @@ Group = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.default)(G
     });
 
     return /*#__PURE__*/(
-      _react.default.createElement(_CommonWrapper.CommonWrapper, this.props, /*#__PURE__*/
+      _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)) {
@@ -72,7 +75,7 @@ Group = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.default)(G
             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__*/
+            _Group.styles.stretchFallback()] = Boolean(isWidthInPercent && _this2.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","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":"iPAAA;AACA;;AAEA;AACA;;AAEA;AACA;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,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,EAAmB,KAAKP,KAAxB;AACE,6CAAM,SAAS,EAAES,cAAOC,IAAP,EAAjB,EAAgC,KAAK,EAAEZ,KAAvC;AACGK,qBAAMC,QAAN,CAAeO,GAAf,CAAmB,KAAKX,KAAL,CAAWM,QAA9B,EAAwC,UAACC,KAAD,EAAW;AAClD,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,sBAAOQ,IAAP,EADa,IACG,IADH;AAEbR,sBAAOS,SAAP,EAFa,IAEQX,KAAK,KAAKN,KAFlB,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,0BAAOiB,KAAP,EADQ,IACS,CAACd,gBADV;AAERH,0BAAOkB,OAAP,EAFQ,IAEWf,gBAFX;AAGRH,0BAAOmB,eAAP,EAHQ,IAGmBf,OAAO,CAACD,gBAAgB,IAAI,KAAI,CAACZ,KAAL,CAAWD,KAA/B,KAAyC8B,kBAAUC,cAAnD,CAAD,CAH1B,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';\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';\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\nexport class Group extends React.Component<GroupProps> {\n  public static __KONTUR_REACT_UI__ = 'Group';\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 {...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"]}
+{"version":3,"sources":["Group.tsx"],"names":["Group","rootNode","setRootNode","render","style","width","props","first","last","React","Children","forEach","children","child","isValidElement","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;;AAGSC,IAAAA,W;;;;;;AAMDC,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,KAAKX,WAAjC,IAAkD,KAAKI,KAAvD;AACE,6CAAM,SAAS,EAAES,cAAOC,IAAP,EAAjB,EAAgC,KAAK,EAAEZ,KAAvC;AACGK,qBAAMC,QAAN,CAAeO,GAAf,CAAmB,KAAKX,KAAL,CAAWM,QAA9B,EAAwC,UAACC,KAAD,EAAW;AAClD,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,sBAAOQ,IAAP,EADa,IACG,IADH;AAEbR,sBAAOS,SAAP,EAFa,IAEQX,KAAK,KAAKN,KAFlB,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,0BAAOiB,KAAP,EADQ,IACS,CAACd,gBADV;AAERH,0BAAOkB,OAAP,EAFQ,IAEWf,gBAFX;AAGRH,0BAAOmB,eAAP,EAHQ,IAGmBf,OAAO,CAACD,gBAAgB,IAAI,MAAI,CAACZ,KAAL,CAAWD,KAA/B,KAAyC8B,kBAAUC,cAAnD,CAAD,CAH1B,QADb;;;AAOE,gDAAK,SAAS,EAAEd,OAAhB,IAA0BT,KAA1B,CAPF,CADF;;;AAWD,OAlCA,CADH,CADF,CADF;;;;AAyCD,G,gBAhEwBJ,eAAM4B,S,WACjBC,mB,GAAsB,O,UAGtBC,S,GAAY,EACxBlC,KAAK,EAAEmC,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.styles.d.ts

@@ -1,8 +1,8 @@
-export declare const styles: {
-    root(): string;
-    fixed(): string;
-    stretch(): string;
-    stretchFallback(): string;
-    item(): string;
-    itemFirst(): string;
-};
+export declare const styles: {
+    root(): string;
+    fixed(): string;
+    stretch(): string;
+    stretchFallback(): string;
+    item(): string;
+    itemFirst(): string;
+};

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

@@ -1 +1 @@
-export * from './Group';
+export * from './Group';

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

@@ -1,79 +1,80 @@
-import React from 'react';
-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;
-}
-/**
- * Всплывающая подсказка, которая по умолчанию отображается при наведении на элемент. <br/> Можно задать другие условия отображения.
- */
-export declare class Hint extends React.Component<HintProps, HintState> {
-    static __KONTUR_REACT_UI__: string;
-    static defaultProps: {
-        pos: string;
-        manual: boolean;
-        opened: boolean;
-        maxWidth: number;
-        disableAnimations: boolean;
-        useWrapper: boolean;
-    };
-    state: HintState;
-    private timer;
-    private theme;
-    UNSAFE_componentWillReceiveProps(nextProps: HintProps): void;
-    componentWillUnmount(): void;
-    render(): JSX.Element;
-    renderMain(): JSX.Element;
-    private renderContent;
-    private getPositions;
-    private handleMouseEnter;
-    private handleMouseLeave;
-    private open;
-}
+import React from 'react';
+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;
+}
+/**
+ * Всплывающая подсказка, которая по умолчанию отображается при наведении на элемент. <br/> Можно задать другие условия отображения.
+ */
+export declare class Hint extends React.PureComponent<HintProps, HintState> {
+    static __KONTUR_REACT_UI__: string;
+    static defaultProps: {
+        pos: string;
+        manual: boolean;
+        opened: boolean;
+        maxWidth: number;
+        disableAnimations: boolean;
+        useWrapper: boolean;
+    };
+    state: HintState;
+    private timer;
+    private theme;
+    private setRootNode;
+    componentDidUpdate(prevProps: HintProps): void;
+    componentWillUnmount(): void;
+    render(): JSX.Element;
+    renderMain(): JSX.Element;
+    private renderContent;
+    private getPositions;
+    private handleMouseEnter;
+    private handleMouseLeave;
+    private open;
+}

package/cjs/components/Hint/Hint.js

@@ -1,4 +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"));
+"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,8 +9,9 @@ var _Popup = require("../../internal/Popup");
 var _currentEnvironment = require("../../lib/currentEnvironment");
 var _CommonWrapper = require("../../internal/CommonWrapper");
 var _Emotion = require("../../lib/theming/Emotion");
+var _rootNode = require("../../lib/rootNode");
 
-var _Hint = require("./Hint.styles");
+var _Hint = require("./Hint.styles");var _class, _class2, _temp;
 
 var HINT_BORDER_COLOR = 'transparent';
 
@@ -100,7 +101,8 @@ var Positions = [
 /**
  * Всплывающая подсказка, которая по умолчанию отображается при наведении на элемент. <br/> Можно задать другие условия отображения.
  */var
-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.
+
+Hint = (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.
 
 
 
@@ -118,6 +120,7 @@ Hint = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.default)(Hi
 
     timer = null;_this.
     theme = void 0;_this.
+    setRootNode = void 0;_this.
 
 
 
@@ -230,4 +233,4 @@ Hint = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.default)(Hi
 
     open = function () {
       _this.setState({ opened: true });
-    };return _this;}var _proto = Hint.prototype;_proto.UNSAFE_componentWillReceiveProps = function UNSAFE_componentWillReceiveProps(nextProps) {if (!nextProps.manual) {return;}if (this.timer) {clearTimeout(this.timer);this.timer = null;}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: theme.hintPinOffset, popupMargin: theme.hintMargin, popupBorder: theme.hintBorder, popupBorderRadius: theme.hintBorderRadius }, _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: 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));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: false };
+    };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.renderMain());});};_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));return /*#__PURE__*/_react.default.createElement("div", { className: className, style: { maxWidth: 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;exports.Hint = Hint;

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

@@ -1 +1 @@
-{"version":3,"sources":["Hint.tsx"],"names":["HINT_BORDER_COLOR","Positions","Hint","state","opened","props","manual","timer","theme","getPositions","filter","x","startsWith","pos","handleMouseEnter","e","window","setTimeout","open","onMouseEnter","handleMouseLeave","clearTimeout","setState","onMouseLeave","UNSAFE_componentWillReceiveProps","nextProps","componentWillUnmount","render","ThemeFactory","create","popupPinOffset","hintPinOffset","popupMargin","hintMargin","popupBorder","hintBorder","popupBorderRadius","hintBorderRadius","renderMain","children","hintBgColor","disableAnimations","useWrapper","renderContent","text","maxWidth","className","styles","content","contentCenter","React","Component","__KONTUR_REACT_UI__","defaultProps","isTestEnv"],"mappings":"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","sourcesContent":["import React from 'react';\n\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { ThemeFactory } from '../../lib/theming/ThemeFactory';\nimport { Theme } from '../../lib/theming/Theme';\nimport { Popup, PopupPosition } from '../../internal/Popup';\nimport { Nullable } from '../../typings/utility-types';\nimport { MouseEventType } from '../../typings/event-types';\nimport { isTestEnv } from '../../lib/currentEnvironment';\nimport { CommonWrapper, CommonProps } from '../../internal/CommonWrapper';\nimport { cx } from '../../lib/theming/Emotion';\n\nimport { styles } from './Hint.styles';\n\nconst HINT_BORDER_COLOR = 'transparent';\n\nexport interface HintProps extends CommonProps {\n  children?: React.ReactNode;\n  /**\n   * Переводит отображение подсказки в _\"ручной режим\"_.\n   *\n   * В _\"ручном режиме\"_ подcказку можно активировать только задав значение пропу `opened`.\n   */\n  manual?: boolean;\n  /**\n   * Задаёт максимальную ширину подсказки.\n   */\n  maxWidth?: React.CSSProperties['maxWidth'];\n  /**\n   * HTML-событие `mouseenter`.\n   */\n  onMouseEnter?: (event: MouseEventType) => void;\n  /**\n   * HTML-событие `mouseleave`.\n   */\n  onMouseLeave?: (event: MouseEventType) => void;\n  /**\n   * Если `true` - подсказка будет открыта.\n   *\n   * _Примечание_: работает только при `manual=true`.\n   */\n  opened?: boolean;\n  /**\n   * Расположение подсказки относительно текста.\n   *\n   * **Допустимые значения**: `\"top\"`, `\"right\"`, `\"bottom\"`, `\"left\"`, `\"top left\"`, `\"top center\"`, `\"top right\"`, `\"right top\"`, `\"right middle\"`, `\"right bottom\"`, `\"bottom left\"`, `\"bottom center\"`, `\"bottom right\"`, `\"left top\"`, `\"left middle\"`, `\"left bottom\"`.\n   */\n  pos:\n    | 'top'\n    | 'right'\n    | 'bottom'\n    | 'left'\n    | 'top left'\n    | 'top center'\n    | 'top right'\n    | 'bottom left'\n    | 'bottom center'\n    | 'bottom right'\n    | 'left top'\n    | 'left middle'\n    | 'left bottom'\n    | 'right top'\n    | 'right middle'\n    | 'right bottom';\n  /**\n   * Текст подсказки.\n   */\n  text: React.ReactNode;\n  /**\n   * Отключает анимацию.\n   */\n  disableAnimations: boolean;\n  /**\n   * Явно указывает, что вложенные элементы должны быть обёрнуты в `<span/>`. <br/> Используется для корректного позиционирования тултипа при двух и более вложенных элементах.\n   *\n   * _Примечание_: при **двух и более** вложенных элементах обёртка будет добавлена автоматически.\n   */\n  useWrapper: boolean;\n}\n\nexport interface HintState {\n  opened: boolean;\n}\n\nconst Positions: PopupPosition[] = [\n  'top center',\n  'top left',\n  'top right',\n  'bottom center',\n  'bottom left',\n  'bottom right',\n  'left middle',\n  'left top',\n  'left bottom',\n  'right middle',\n  'right top',\n  'right bottom',\n];\n\n/**\n * Всплывающая подсказка, которая по умолчанию отображается при наведении на элемент. <br/> Можно задать другие условия отображения.\n */\nexport class Hint extends React.Component<HintProps, HintState> {\n  public static __KONTUR_REACT_UI__ = 'Hint';\n\n  public static defaultProps = {\n    pos: 'top',\n    manual: false,\n    opened: false,\n    maxWidth: 200,\n    disableAnimations: isTestEnv,\n    useWrapper: false,\n  };\n\n  public state: HintState = {\n    opened: this.props.manual ? !!this.props.opened : false,\n  };\n\n  private timer: Nullable<number> = null;\n  private theme!: Theme;\n\n  public UNSAFE_componentWillReceiveProps(nextProps: HintProps) {\n    if (!nextProps.manual) {\n      return;\n    }\n    if (this.timer) {\n      clearTimeout(this.timer);\n      this.timer = null;\n    }\n    if (nextProps.opened !== this.props.opened) {\n      this.setState({ opened: !!nextProps.opened });\n    }\n  }\n\n  public componentWillUnmount() {\n    if (this.timer) {\n      clearTimeout(this.timer);\n      this.timer = null;\n    }\n  }\n\n  public render() {\n    return (\n      <ThemeContext.Consumer>\n        {(theme) => {\n          this.theme = theme;\n          return (\n            <ThemeContext.Provider\n              value={ThemeFactory.create(\n                {\n                  popupPinOffset: theme.hintPinOffset,\n                  popupMargin: theme.hintMargin,\n                  popupBorder: theme.hintBorder,\n                  popupBorderRadius: theme.hintBorderRadius,\n                },\n                this.theme,\n              )}\n            >\n              {this.renderMain()}\n            </ThemeContext.Provider>\n          );\n        }}\n      </ThemeContext.Consumer>\n    );\n  }\n\n  public renderMain() {\n    return (\n      <CommonWrapper {...this.props}>\n        <Popup\n          hasPin\n          opened={this.state.opened}\n          anchorElement={this.props.children}\n          positions={this.getPositions()}\n          backgroundColor={this.theme.hintBgColor}\n          borderColor={HINT_BORDER_COLOR}\n          disableAnimations={this.props.disableAnimations}\n          onMouseEnter={this.handleMouseEnter}\n          onMouseLeave={this.handleMouseLeave}\n          useWrapper={this.props.useWrapper}\n        >\n          {this.renderContent()}\n        </Popup>\n      </CommonWrapper>\n    );\n  }\n\n  private renderContent() {\n    if (!this.props.text) {\n      return null;\n    }\n\n    const { pos, maxWidth } = this.props;\n    const className = cx({\n      [styles.content(this.theme)]: true,\n      [styles.contentCenter(this.theme)]: pos === 'top' || pos === 'bottom',\n    });\n    return (\n      <div className={className} style={{ maxWidth }}>\n        {this.props.text}\n      </div>\n    );\n  }\n\n  private getPositions = (): PopupPosition[] => {\n    return Positions.filter((x) => x.startsWith(this.props.pos));\n  };\n\n  private handleMouseEnter = (e: MouseEventType) => {\n    if (!this.props.manual && !this.timer) {\n      this.timer = window.setTimeout(this.open, 400);\n    }\n\n    if (this.props.onMouseEnter) {\n      this.props.onMouseEnter(e);\n    }\n  };\n\n  private handleMouseLeave = (e: MouseEventType) => {\n    if (!this.props.manual && this.timer) {\n      clearTimeout(this.timer);\n      this.timer = null;\n      this.setState({ opened: false });\n    }\n\n    if (this.props.onMouseLeave) {\n      this.props.onMouseLeave(e);\n    }\n  };\n\n  private open = () => {\n    this.setState({ opened: true });\n  };\n}\n"]}
+{"version":3,"sources":["Hint.tsx"],"names":["HINT_BORDER_COLOR","Positions","Hint","rootNode","state","opened","props","manual","timer","theme","setRootNode","getPositions","filter","x","startsWith","pos","handleMouseEnter","e","window","setTimeout","open","onMouseEnter","handleMouseLeave","clearTimeout","setState","onMouseLeave","componentDidUpdate","prevProps","componentWillUnmount","render","ThemeFactory","create","popupPinOffset","hintPinOffset","popupMargin","hintMargin","popupBorder","hintBorder","popupBorderRadius","hintBorderRadius","renderMain","children","hintBgColor","disableAnimations","useWrapper","renderContent","text","maxWidth","className","styles","content","contentCenter","React","PureComponent","__KONTUR_REACT_UI__","defaultProps","isTestEnv"],"mappings":"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","sourcesContent":["import React from 'react';\n\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { ThemeFactory } from '../../lib/theming/ThemeFactory';\nimport { Theme } from '../../lib/theming/Theme';\nimport { Popup, PopupPosition } from '../../internal/Popup';\nimport { Nullable } from '../../typings/utility-types';\nimport { MouseEventType } from '../../typings/event-types';\nimport { isTestEnv } from '../../lib/currentEnvironment';\nimport { CommonWrapper, CommonProps } from '../../internal/CommonWrapper';\nimport { cx } from '../../lib/theming/Emotion';\nimport { rootNode, TSetRootNode } from '../../lib/rootNode';\n\nimport { styles } from './Hint.styles';\n\nconst HINT_BORDER_COLOR = 'transparent';\n\nexport interface HintProps extends CommonProps {\n  children?: React.ReactNode;\n  /**\n   * Переводит отображение подсказки в _\"ручной режим\"_.\n   *\n   * В _\"ручном режиме\"_ подcказку можно активировать только задав значение пропу `opened`.\n   */\n  manual?: boolean;\n  /**\n   * Задаёт максимальную ширину подсказки.\n   */\n  maxWidth?: React.CSSProperties['maxWidth'];\n  /**\n   * HTML-событие `mouseenter`.\n   */\n  onMouseEnter?: (event: MouseEventType) => void;\n  /**\n   * HTML-событие `mouseleave`.\n   */\n  onMouseLeave?: (event: MouseEventType) => void;\n  /**\n   * Если `true` - подсказка будет открыта.\n   *\n   * _Примечание_: работает только при `manual=true`.\n   */\n  opened?: boolean;\n  /**\n   * Расположение подсказки относительно текста.\n   *\n   * **Допустимые значения**: `\"top\"`, `\"right\"`, `\"bottom\"`, `\"left\"`, `\"top left\"`, `\"top center\"`, `\"top right\"`, `\"right top\"`, `\"right middle\"`, `\"right bottom\"`, `\"bottom left\"`, `\"bottom center\"`, `\"bottom right\"`, `\"left top\"`, `\"left middle\"`, `\"left bottom\"`.\n   */\n  pos:\n    | 'top'\n    | 'right'\n    | 'bottom'\n    | 'left'\n    | 'top left'\n    | 'top center'\n    | 'top right'\n    | 'bottom left'\n    | 'bottom center'\n    | 'bottom right'\n    | 'left top'\n    | 'left middle'\n    | 'left bottom'\n    | 'right top'\n    | 'right middle'\n    | 'right bottom';\n  /**\n   * Текст подсказки.\n   */\n  text: React.ReactNode;\n  /**\n   * Отключает анимацию.\n   */\n  disableAnimations: boolean;\n  /**\n   * Явно указывает, что вложенные элементы должны быть обёрнуты в `<span/>`. <br/> Используется для корректного позиционирования тултипа при двух и более вложенных элементах.\n   *\n   * _Примечание_: при **двух и более** вложенных элементах обёртка будет добавлена автоматически.\n   */\n  useWrapper: boolean;\n}\n\nexport interface HintState {\n  opened: boolean;\n}\n\nconst Positions: PopupPosition[] = [\n  'top center',\n  'top left',\n  'top right',\n  'bottom center',\n  'bottom left',\n  'bottom right',\n  'left middle',\n  'left top',\n  'left bottom',\n  'right middle',\n  'right top',\n  'right bottom',\n];\n\n/**\n * Всплывающая подсказка, которая по умолчанию отображается при наведении на элемент. <br/> Можно задать другие условия отображения.\n */\n@rootNode\nexport class Hint extends React.PureComponent<HintProps, HintState> {\n  public static __KONTUR_REACT_UI__ = 'Hint';\n\n  public static defaultProps = {\n    pos: 'top',\n    manual: false,\n    opened: false,\n    maxWidth: 200,\n    disableAnimations: isTestEnv,\n    useWrapper: false,\n  };\n\n  public state: HintState = {\n    opened: this.props.manual ? !!this.props.opened : false,\n  };\n\n  private timer: Nullable<number> = null;\n  private theme!: Theme;\n  private setRootNode!: TSetRootNode;\n\n  public componentDidUpdate(prevProps: HintProps) {\n    if (!this.props.manual) {\n      return;\n    }\n    if (this.timer) {\n      clearTimeout(this.timer);\n      this.timer = null;\n    }\n    if (this.props.opened !== prevProps.opened) {\n      this.setState({ opened: !!this.props.opened });\n    }\n  }\n\n  public componentWillUnmount() {\n    if (this.timer) {\n      clearTimeout(this.timer);\n      this.timer = null;\n    }\n  }\n\n  public render() {\n    return (\n      <ThemeContext.Consumer>\n        {(theme) => {\n          this.theme = theme;\n          return (\n            <ThemeContext.Provider\n              value={ThemeFactory.create(\n                {\n                  popupPinOffset: theme.hintPinOffset,\n                  popupMargin: theme.hintMargin,\n                  popupBorder: theme.hintBorder,\n                  popupBorderRadius: theme.hintBorderRadius,\n                },\n                this.theme,\n              )}\n            >\n              {this.renderMain()}\n            </ThemeContext.Provider>\n          );\n        }}\n      </ThemeContext.Consumer>\n    );\n  }\n\n  public renderMain() {\n    return (\n      <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>\n        <Popup\n          hasPin\n          opened={this.state.opened}\n          anchorElement={this.props.children}\n          positions={this.getPositions()}\n          backgroundColor={this.theme.hintBgColor}\n          borderColor={HINT_BORDER_COLOR}\n          disableAnimations={this.props.disableAnimations}\n          onMouseEnter={this.handleMouseEnter}\n          onMouseLeave={this.handleMouseLeave}\n          useWrapper={this.props.useWrapper}\n        >\n          {this.renderContent()}\n        </Popup>\n      </CommonWrapper>\n    );\n  }\n\n  private renderContent() {\n    if (!this.props.text) {\n      return null;\n    }\n\n    const { pos, maxWidth } = this.props;\n    const className = cx({\n      [styles.content(this.theme)]: true,\n      [styles.contentCenter(this.theme)]: pos === 'top' || pos === 'bottom',\n    });\n    return (\n      <div className={className} style={{ maxWidth }}>\n        {this.props.text}\n      </div>\n    );\n  }\n\n  private getPositions = (): PopupPosition[] => {\n    return Positions.filter((x) => x.startsWith(this.props.pos));\n  };\n\n  private handleMouseEnter = (e: MouseEventType) => {\n    if (!this.props.manual && !this.timer) {\n      this.timer = window.setTimeout(this.open, 400);\n    }\n\n    if (this.props.onMouseEnter) {\n      this.props.onMouseEnter(e);\n    }\n  };\n\n  private handleMouseLeave = (e: MouseEventType) => {\n    if (!this.props.manual && this.timer) {\n      clearTimeout(this.timer);\n      this.timer = null;\n      this.setState({ opened: false });\n    }\n\n    if (this.props.onMouseLeave) {\n      this.props.onMouseLeave(e);\n    }\n  };\n\n  private open = () => {\n    this.setState({ opened: true });\n  };\n}\n"]}

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

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

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

@@ -1 +1 @@
-export * from './Hint';
+export * from './Hint';