@skbkontur/react-ui 0.0.0-aaf2aabecb → 0.0.0-b08da15166

package/components/Group/Group/Group.js

@@ -1,14 +1,70 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
 import _inheritsLoose from "@babel/runtime/helpers/esm/inheritsLoose";
+
+var _class, _class2, _temp;
+
 import React from 'react';
 import PropTypes from 'prop-types';
-import cn from 'classnames';
-import { isIE11, isEdge } from "..\\..\\..\\lib\\utils";
-import { Corners } from "..\\..\\Button\\Corners";
-import { isButton } from "..\\..\\Button";
-import { jsStyles } from "..\\Group.styles";
-export var Group =
-/*#__PURE__*/
-function (_React$Component) {
+import { isIE11, isEdge } from "../../../lib/client";
+import { isButton } from "../../Button";
+import { CommonWrapper } from "../../../internal/CommonWrapper";
+import { cx } from "../../../lib/theming/Emotion";
+import { rootNode } from "../../../lib/rootNode";
+import { styles } from "../Group.styles";
+
+var getFirstChild = function getFirstChild(children) {
+  if (!Array.isArray(children)) {
+    return children;
+  }
+
+  return children == null ? void 0 : children[0];
+};
+
+var getLastChild = function getLastChild(children) {
+  if (!Array.isArray(children)) {
+    return children;
+  }
+
+  var numberOfChildren = React.Children.count(children);
+  return children == null ? void 0 : children[numberOfChildren - 1];
+};
+
+var getButtonCorners = function getButtonCorners(child, firstChild, lastChild) {
+  if (firstChild === lastChild) {
+    return {};
+  }
+
+  if (child === firstChild) {
+    return {
+      borderTopRightRadius: 0,
+      borderBottomRightRadius: 0
+    };
+  }
+
+  if (child === lastChild) {
+    return {
+      borderTopLeftRadius: 0,
+      borderBottomLeftRadius: 0
+    };
+  }
+
+  return {
+    borderRadius: 0
+  };
+};
+
+var passCornersIfButton = function passCornersIfButton(child, firstChild, lastChild) {
+  if (isButton(child)) {
+    var corners = getButtonCorners(child, firstChild, lastChild);
+    return /*#__PURE__*/React.cloneElement(child, {
+      corners: corners
+    });
+  }
+
+  return child;
+};
+
+export var Group = rootNode(_class = (_temp = _class2 = /*#__PURE__*/function (_React$Component) {
   _inheritsLoose(Group, _React$Component);
 
   function Group() {
@@ -23,53 +79,33 @@ function (_React$Component) {
     var style = {
       width: this.props.width
     };
-    var first = null;
-    var last = null;
-    React.Children.forEach(this.props.children, function (child) {
-      if (child && React.isValidElement(child)) {
-        first = first || child;
-        last = child;
-      }
-    });
-    return React.createElement("span", {
-      className: jsStyles.root(),
+    var childrenArray = React.Children.toArray(this.props.children);
+    var firstChild = getFirstChild(childrenArray);
+    var lastChild = getLastChild(childrenArray);
+    return /*#__PURE__*/React.createElement(CommonWrapper, _extends({
+      rootNodeRef: this.setRootNode
+    }, this.props), /*#__PURE__*/React.createElement("span", {
+      className: styles.root(),
       style: style
-    }, React.Children.map(this.props.children, function (child) {
-      var _cn, _cn2;
+    }, React.Children.map(childrenArray, function (child) {
+      var _cx, _cx2;
 
-      if (!child || !React.isValidElement(child)) {
+      if (!child || ! /*#__PURE__*/React.isValidElement(child)) {
         return null;
       }
 
       var isWidthInPercent = Boolean(child.props.width && child.props.width.toString().includes('%'));
-      var itemCss = cn((_cn = {}, _cn[jsStyles.item()] = true, _cn[jsStyles.itemFirst()] = child === first, _cn));
-      var corners = 0;
-
-      if (child !== first) {
-        corners |= Corners.TOP_LEFT | Corners.BOTTOM_LEFT;
-      }
-
-      if (child !== last) {
-        corners |= Corners.TOP_RIGHT | Corners.BOTTOM_RIGHT;
-      }
-
-      if (isButton(child)) {
-        child = React.cloneElement(child, {
-          corners: corners
-        });
-      }
-
-      return React.createElement("div", {
-        className: cn((_cn2 = {}, _cn2[jsStyles.fixed()] = !isWidthInPercent, _cn2[jsStyles.stretch()] = isWidthInPercent, _cn2[jsStyles.stretchFallback()] = Boolean(isWidthInPercent && _this.props.width && (isIE11 || isEdge)), _cn2))
-      }, React.createElement("div", {
-        className: itemCss
-      }, child));
-    }));
+      var modifiedChild = passCornersIfButton(child, firstChild, lastChild);
+      var isFirstChild = child === firstChild;
+      return /*#__PURE__*/React.createElement("div", {
+        className: cx((_cx = {}, _cx[styles.fixed()] = !isWidthInPercent, _cx[styles.stretch()] = isWidthInPercent, _cx[styles.stretchFallback()] = Boolean(isWidthInPercent && _this.props.width && (isIE11 || isEdge)), _cx))
+      }, /*#__PURE__*/React.createElement("div", {
+        className: cx((_cx2 = {}, _cx2[styles.item()] = true, _cx2[styles.itemFirst()] = isFirstChild, _cx2))
+      }, modifiedChild));
+    })));
   };
 
   return Group;
-}(React.Component);
-Group.__KONTUR_REACT_UI__ = 'Group';
-Group.propTypes = {
+}(React.Component), _class2.__KONTUR_REACT_UI__ = 'Group', _class2.propTypes = {
   width: PropTypes.oneOfType([PropTypes.number, PropTypes.string])
-};
+}, _temp)) || _class;

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

@@ -1 +1 @@
-{"version":3,"sources":["Group.tsx"],"names":["React","PropTypes","cn","isIE11","isEdge","Corners","isButton","jsStyles","Group","render","style","width","props","first","last","Children","forEach","children","child","isValidElement","root","map","isWidthInPercent","Boolean","toString","includes","itemCss","item","itemFirst","corners","TOP_LEFT","BOTTOM_LEFT","TOP_RIGHT","BOTTOM_RIGHT","cloneElement","fixed","stretch","stretchFallback","Component","__KONTUR_REACT_UI__","propTypes","oneOfType","number","string"],"mappings":"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","sourcesContent":["import React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport cn from 'classnames';\r\n\r\nimport { isIE11, isEdge } from '../../lib/utils';\r\nimport { Corners } from '../Button/Corners';\r\nimport { Nullable } from '../../typings/utility-types';\r\nimport { isButton } from '../Button';\r\n\r\nimport { jsStyles } from './Group.styles';\r\n\r\nexport interface GroupProps {\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      <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    );\r\n  }\r\n}\r\n"]}
+{"version":3,"sources":["Group.tsx"],"names":["React","PropTypes","isIE11","isEdge","isButton","CommonWrapper","cx","rootNode","styles","getFirstChild","children","Array","isArray","getLastChild","numberOfChildren","Children","count","getButtonCorners","child","firstChild","lastChild","borderTopRightRadius","borderBottomRightRadius","borderTopLeftRadius","borderBottomLeftRadius","borderRadius","passCornersIfButton","corners","cloneElement","Group","render","style","width","props","childrenArray","toArray","setRootNode","root","map","isValidElement","isWidthInPercent","Boolean","toString","includes","modifiedChild","isFirstChild","fixed","stretch","stretchFallback","item","itemFirst","Component","__KONTUR_REACT_UI__","propTypes","oneOfType","number","string"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\n\nimport { isIE11, isEdge } from '../../lib/client';\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\nconst getFirstChild = (children: React.ReactNode) => {\n  if (!Array.isArray(children)) {\n    return children;\n  }\n\n  return children?.[0] as React.ReactNode;\n};\n\nconst getLastChild = (children: React.ReactNode) => {\n  if (!Array.isArray(children)) {\n    return children;\n  }\n\n  const numberOfChildren = React.Children.count(children);\n\n  return children?.[numberOfChildren - 1] as React.ReactNode;\n};\n\nconst getButtonCorners = (\n  child: React.ReactNode,\n  firstChild: React.ReactNode,\n  lastChild: React.ReactNode,\n): React.CSSProperties => {\n  if (firstChild === lastChild) {\n    return {};\n  }\n\n  if (child === firstChild) {\n    return {\n      borderTopRightRadius: 0,\n      borderBottomRightRadius: 0,\n    };\n  }\n\n  if (child === lastChild) {\n    return {\n      borderTopLeftRadius: 0,\n      borderBottomLeftRadius: 0,\n    };\n  }\n\n  return {\n    borderRadius: 0,\n  };\n};\n\nconst passCornersIfButton = (child: React.ReactNode, firstChild: React.ReactNode, lastChild: React.ReactNode) => {\n  if (isButton(child)) {\n    const corners = getButtonCorners(child, firstChild, lastChild);\n\n    return React.cloneElement(child, { corners });\n  }\n\n  return child;\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    const childrenArray = React.Children.toArray(this.props.children);\n    const firstChild = getFirstChild(childrenArray);\n    const lastChild = getLastChild(childrenArray);\n\n    return (\n      <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>\n        <span className={styles.root()} style={style}>\n          {React.Children.map(childrenArray, (child) => {\n            if (!child || !React.isValidElement<GroupChildProps>(child)) {\n              return null;\n            }\n\n            const isWidthInPercent = Boolean(child.props.width && child.props.width.toString().includes('%'));\n\n            const modifiedChild = passCornersIfButton(child, firstChild, lastChild);\n\n            const isFirstChild = child === firstChild;\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\n                  className={cx({\n                    [styles.item()]: true,\n                    [styles.itemFirst()]: isFirstChild,\n                  })}\n                >\n                  {modifiedChild}\n                </div>\n              </div>\n            );\n          })}\n        </span>\n      </CommonWrapper>\n    );\n  }\n}\n"]}

package/components/Group/Group/package.json

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

package/components/Group/Group.d.ts

@@ -1,10 +1,12 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-export interface GroupProps {
+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>;
     };

package/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/components/Group/Group.styles/Group.styles.js

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

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

@@ -1 +1 @@
-{"version":3,"sources":["Group.styles.ts"],"names":["css","memoizeStyle","styles","root","fixed","stretch","stretchFallback","item","itemFirst","jsStyles"],"mappings":"usCAAA,SAASA,GAAT,EAAcC,YAAd,QAAkC,2BAAlC;;AAEA,IAAMC,MAAM,GAAG;AACbC,EAAAA,IADa,kBACN;AACL,WAAOH,GAAP;;;AAGD,GALY;;AAObI,EAAAA,KAPa,mBAOL;AACN,WAAOJ,GAAP;;;;AAID,GAZY;;AAcbK,EAAAA,OAda,qBAcH;AACR,WAAOL,GAAP;;;;AAID,GAnBY;;AAqBbM,EAAAA,eArBa,6BAqBK;AAChB,WAAON,GAAP;;;AAGD,GAzBY;;AA2BbO,EAAAA,IA3Ba,kBA2BN;AACL,WAAOP,GAAP;;;AAGD,GA/BY;;AAiCbQ,EAAAA,SAjCa,uBAiCD;AACV,WAAOR,GAAP;;;AAGD,GArCY,EAAf;;;AAwCA,OAAO,IAAMS,QAAQ,GAAGR,YAAY,CAACC,MAAD,CAA7B","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":["css","memoizeStyle","styles","root","fixed","stretch","stretchFallback","item","itemFirst"],"mappings":"8MAAA,SAASA,GAAT,EAAcC,YAAd,QAAkC,2BAAlC;;AAEA,OAAO,IAAMC,MAAM,GAAGD,YAAY,CAAC;AACjCE,EAAAA,IADiC,kBAC1B;AACL,WAAOH,GAAP;;;;AAID,GANgC;;AAQjCI,EAAAA,KARiC,mBAQzB;AACN,WAAOJ,GAAP;;;;AAID,GAbgC;;AAejCK,EAAAA,OAfiC,qBAevB;AACR,WAAOL,GAAP;;;;AAID,GApBgC;;AAsBjCM,EAAAA,eAtBiC,6BAsBf;AAChB,WAAON,GAAP;;;AAGD,GA1BgC;;AA4BjCO,EAAAA,IA5BiC,kBA4B1B;AACL,WAAOP,GAAP;;;AAGD,GAhCgC;;AAkCjCQ,EAAAA,SAlCiC,uBAkCrB;AACV,WAAOR,GAAP;;;AAGD,GAtCgC,EAAD,CAA3B","sourcesContent":["import { css, memoizeStyle } from '../../lib/theming/Emotion';\n\nexport const styles = memoizeStyle({\n  root() {\n    return css`\n      display: inline-flex;\n      line-height: normal;\n    `;\n  },\n\n  fixed() {\n    return css`\n      flex-shrink: 0;\n      display: inline-block;\n    `;\n  },\n\n  stretch() {\n    return css`\n      flex-grow: 1;\n      flex-shrink: 1;\n    `;\n  },\n\n  stretchFallback() {\n    return css`\n      flex-basis: 100%;\n    `;\n  },\n\n  item() {\n    return css`\n      margin-left: -1px;\n    `;\n  },\n\n  itemFirst() {\n    return css`\n      margin-left: 0;\n    `;\n  },\n});\n"]}

package/components/Group/Group.styles/package.json

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

package/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/components/Group/index/index.js

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

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

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

package/components/Group/index/package.json

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

package/components/Group/package.json

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

package/components/Hint/Hint/Hint.js

@@ -1,17 +1,26 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
 import _inheritsLoose from "@babel/runtime/helpers/esm/inheritsLoose";
+
+var _class, _class2, _temp;
+
 import React from 'react';
-import cn from 'classnames';
-import { Popup } from "..\\..\\..\\internal\\Popup";
-import { jsStyles } from "..\\Hint.styles";
-var HINT_BACKGROUND_COLOR = 'rgba(51, 51, 51, 0.8)';
+import { ThemeContext } from "../../../lib/theming/ThemeContext";
+import { ThemeFactory } from "../../../lib/theming/ThemeFactory";
+import { Popup } from "../../../internal/Popup";
+import { isTestEnv } from "../../../lib/currentEnvironment";
+import { CommonWrapper } from "../../../internal/CommonWrapper";
+import { cx } from "../../../lib/theming/Emotion";
+import { responsiveLayout } from "../../ResponsiveLayout/decorator";
+import { rootNode } from "../../../lib/rootNode";
+import { styles } from "../Hint.styles";
 var HINT_BORDER_COLOR = 'transparent';
-var POPUP_MARGIN = 15;
-var PIN_OFFSET = 8;
 var Positions = ['top center', 'top left', 'top right', 'bottom center', 'bottom left', 'bottom right', 'left middle', 'left top', 'left bottom', 'right middle', 'right top', 'right bottom'];
-export var Hint =
-/*#__PURE__*/
-function (_React$Component) {
-  _inheritsLoose(Hint, _React$Component);
+/**
+ * Всплывающая подсказка, которая по умолчанию отображается при наведении на элемент. <br/> Можно задать другие условия отображения.
+ */
+
+export var Hint = responsiveLayout(_class = rootNode(_class = (_temp = _class2 = /*#__PURE__*/function (_React$PureComponent) {
+  _inheritsLoose(Hint, _React$PureComponent);
 
   function Hint() {
     var _this;
@@ -20,11 +29,18 @@ function (_React$Component) {
       args[_key] = arguments[_key];
     }
 
-    _this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;
+    _this = _React$PureComponent.call.apply(_React$PureComponent, [this].concat(args)) || this;
     _this.state = {
       opened: _this.props.manual ? !!_this.props.opened : false
     };
     _this.timer = null;
+    _this.popupRef = /*#__PURE__*/React.createRef();
+
+    _this.getAnchorElement = function () {
+      var _this$popupRef$curren;
+
+      return (_this$popupRef$curren = _this.popupRef.current) == null ? void 0 : _this$popupRef$curren.anchorElement;
+    };
 
     _this.getPositions = function () {
       return Positions.filter(function (x) {
@@ -57,6 +73,12 @@ function (_React$Component) {
       }
     };
 
+    _this.close = function () {
+      _this.setState({
+        opened: false
+      });
+    };
+
     _this.open = function () {
       _this.setState({
         opened: true
@@ -68,14 +90,19 @@ function (_React$Component) {
 
   var _proto = Hint.prototype;
 
-  _proto.UNSAFE_componentWillReceiveProps = function UNSAFE_componentWillReceiveProps(nextProps) {
-    if (!nextProps.manual) {
+  _proto.componentDidUpdate = function componentDidUpdate(prevProps) {
+    if (!this.props.manual) {
       return;
     }
 
-    if (nextProps.opened !== this.props.opened) {
+    if (this.timer) {
+      clearTimeout(this.timer);
+      this.timer = null;
+    }
+
+    if (this.props.opened !== prevProps.opened) {
       this.setState({
-        opened: !!nextProps.opened
+        opened: !!this.props.opened
       });
     }
   };
@@ -88,24 +115,51 @@ function (_React$Component) {
   };
 
   _proto.render = function render() {
-    return React.createElement(Popup, {
+    var _this2 = this;
+
+    return /*#__PURE__*/React.createElement(ThemeContext.Consumer, null, function (theme) {
+      _this2.theme = theme;
+      return /*#__PURE__*/React.createElement(ThemeContext.Provider, {
+        value: ThemeFactory.create({
+          popupPinOffset: theme.hintPinOffset,
+          popupMargin: theme.hintMargin,
+          popupBorder: theme.hintBorder,
+          popupBorderRadius: theme.hintBorderRadius
+        }, _this2.theme)
+      }, _this2.isMobileLayout ? _this2.renderMobile() : _this2.renderMain());
+    });
+  };
+
+  _proto.renderMobile = function renderMobile() {
+    return /*#__PURE__*/React.createElement(CommonWrapper, this.props, /*#__PURE__*/React.createElement(Popup, {
+      opened: this.state.opened,
+      anchorElement: this.props.children,
+      positions: [],
+      onClick: !this.props.manual ? this.open : undefined,
+      mobileOnCloseRequest: !this.props.manual ? this.close : undefined
+    }, this.renderContent()));
+  };
+
+  _proto.renderMain = function renderMain() {
+    return /*#__PURE__*/React.createElement(CommonWrapper, _extends({
+      rootNodeRef: this.setRootNode
+    }, this.props), /*#__PURE__*/React.createElement(Popup, {
       hasPin: true,
-      margin: POPUP_MARGIN,
       opened: this.state.opened,
       anchorElement: this.props.children,
       positions: this.getPositions(),
-      backgroundColor: HINT_BACKGROUND_COLOR,
+      backgroundColor: this.theme.hintBgColor,
       borderColor: HINT_BORDER_COLOR,
       disableAnimations: this.props.disableAnimations,
-      pinOffset: PIN_OFFSET,
       onMouseEnter: this.handleMouseEnter,
       onMouseLeave: this.handleMouseLeave,
-      useWrapper: this.props.useWrapper
-    }, this.renderContent());
+      useWrapper: this.props.useWrapper,
+      ref: this.popupRef
+    }, this.renderContent()));
   };
 
   _proto.renderContent = function renderContent() {
-    var _cn;
+    var _cx;
 
     if (!this.props.text) {
       return null;
@@ -114,23 +168,21 @@ function (_React$Component) {
     var _this$props = this.props,
         pos = _this$props.pos,
         maxWidth = _this$props.maxWidth;
-    var className = cn((_cn = {}, _cn[jsStyles.content()] = true, _cn[jsStyles.contentCenter()] = pos === 'top' || pos === 'bottom', _cn));
-    return React.createElement("div", {
+    var className = cx((_cx = {}, _cx[styles.content(this.theme)] = true, _cx[styles.contentCenter(this.theme)] = pos === 'top' || pos === 'bottom', _cx[styles.mobileContent(this.theme)] = this.isMobileLayout, _cx));
+    return /*#__PURE__*/React.createElement("div", {
       className: className,
       style: {
-        maxWidth: maxWidth
+        maxWidth: this.isMobileLayout ? '100%' : maxWidth
       }
     }, this.props.text);
   };
 
   return Hint;
-}(React.Component);
-Hint.__KONTUR_REACT_UI__ = 'Hint';
-Hint.defaultProps = {
+}(React.PureComponent), _class2.__KONTUR_REACT_UI__ = 'Hint', _class2.defaultProps = {
   pos: 'top',
   manual: false,
   opened: false,
   maxWidth: 200,
-  disableAnimations: Boolean(process.env.enableReactTesting),
-  useWrapper: true
-};
+  disableAnimations: isTestEnv,
+  useWrapper: false
+}, _temp)) || _class) || _class;