@skbkontur/react-ui 0.0.0-ecefada396 → 0.0.0-ee57da3e1e

package/components/GlobalLoader/GlobalLoaderView.styles/GlobalLoaderView.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["GlobalLoaderView.styles.ts"],"names":["css","memoizeStyle","keyframes","styles","outer","t","globalLoaderWidth","globalLoaderHeight","globalLoaderBackgroundColor","globalLoaderPosition","globalLoaderLeft","globalLoaderTop","globalLoaderRight","globalLoaderBottom","inner","globalLoaderColor","standardWithoutAnimation","successWithoutAnimation","errorWithoutAnimation","moveToRightAnimation","spinnerAnimation","linearProgressAnimation","slowProgressAnimation","animations","successAnimation","delayBeforeHide","width","left","errorAnimation","transitionDuration","parseInt","globalLoaderTransitionToSpinnerDuration","spinnerAnimationDuration","globalLoaderSpinnerAnimationDuration","standardAnimation","expectedTime","slowProgressAnimationTime","globalLoaderSlowAnimationDuration","acceptAnimation","startWidth","transitionTime","globalLoaderTransitionFromSpinnerDuration","slowAcceptAnimation","acceptWithoutAnimation"],"mappings":"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","sourcesContent":["import { css, memoizeStyle, keyframes } from '../../lib/theming/Emotion';\nimport { Theme } from '../../lib/theming/Theme';\n\nexport const styles = memoizeStyle({\n  outer(t: Theme) {\n    return css`\n      width: ${t.globalLoaderWidth};\n      height: ${t.globalLoaderHeight};\n      background-color: ${t.globalLoaderBackgroundColor};\n      position: ${t.globalLoaderPosition};\n      left: ${t.globalLoaderLeft};\n      top: ${t.globalLoaderTop};\n      right: ${t.globalLoaderRight};\n      bottom: ${t.globalLoaderBottom};\n      overflow: hidden;\n    `;\n  },\n  inner(t: Theme) {\n    return css`\n      background-color: ${t.globalLoaderColor};\n      width: 0;\n      height: ${t.globalLoaderHeight};\n      position: absolute;\n      left: 0;\n      overflow: hidden;\n    `;\n  },\n  standardWithoutAnimation() {\n    return css`\n      left: 0;\n      width: 90%;\n    `;\n  },\n  successWithoutAnimation() {\n    return css`\n      left: 0;\n      width: 100%;\n    `;\n  },\n  errorWithoutAnimation() {\n    return css`\n      left: 40%;\n      width: 20%;\n    `;\n  },\n});\n\nconst moveToRightAnimation = keyframes`\n  0% {\n    left: 0;\n    width: 100%;\n  }\n  50% {\n    left: 50%;\n    width: 50%;\n  }\n  100% {\n    left: 99%;\n    width: 1%\n  }\n`;\nconst spinnerAnimation = keyframes`\n  0% {\n    transform: translateX(50%) scaleX(.005);\n    animation-timing-function: cubic-bezier(.895,.03,.685,.22);\n  }\n  50% {\n    transform: translateX(0) scaleX(.35);\n    animation-timing-function: cubic-bezier(.165,.84,.44,1);\n  }\n  100% {\n    transform: translateX(-50%) scaleX(.005);\n  }\n`;\nconst linearProgressAnimation = keyframes`\n  from { width: 0; }\n  to { width: 80% }\n`;\nconst slowProgressAnimation = keyframes`\n  from { width: 80%; }\n  to { width: 90% }\n`;\n\nexport const animations = {\n  successAnimation(delayBeforeHide: number, width: number, left: number) {\n    return css`\n      animation: successAnimation;\n      animation-duration: ${delayBeforeHide}ms;\n      @keyframes successAnimation {\n        0% {\n          width: ${width}px;\n          left: ${left}px;\n          opacity: 1;\n        }\n        20% {\n          width: 100%;\n          left: 0;\n          opacity: 1;\n        }\n        80% {\n          width: 100%;\n          left: 0;\n          opacity: 1;\n        }\n        100% {\n          width: 100%;\n          opacity: 0;\n        }\n      }\n    `;\n  },\n  errorAnimation(t: Theme) {\n    const transitionDuration = parseInt(t.globalLoaderTransitionToSpinnerDuration);\n    const spinnerAnimationDuration = parseInt(t.globalLoaderSpinnerAnimationDuration);\n\n    return css`\n      left: 0;\n      width: 100%;\n      animation: ${moveToRightAnimation} ${transitionDuration}ms linear,\n        ${spinnerAnimationDuration}ms ${spinnerAnimation} ${transitionDuration}ms infinite alternate;\n    `;\n  },\n  standardAnimation(t: Theme, expectedTime: number) {\n    const slowProgressAnimationTime = parseInt(t.globalLoaderSlowAnimationDuration);\n    return css`\n      width: 90%;\n      animation: ${linearProgressAnimation} ${expectedTime}ms cubic-bezier(0, 0.4, 0.4, 1),\n        ${slowProgressAnimationTime}ms ${slowProgressAnimation} ${expectedTime}ms linear;\n    `;\n  },\n  acceptAnimation(t: Theme, startWidth: number, expectedTime: number, width: number, left: number) {\n    const transitionTime = parseInt(t.globalLoaderTransitionFromSpinnerDuration);\n    const slowProgressAnimationTime = parseInt(t.globalLoaderSlowAnimationDuration);\n    return css`\n      width: 90%;\n      animation: transitionAnimation ${transitionTime}ms linear,\n        ${expectedTime}ms acceptAnimation ${transitionTime}ms cubic-bezier(0, 0.4, 0.4, 1),\n        ${slowProgressAnimationTime}ms ${slowProgressAnimation} ${expectedTime + transitionTime}ms linear;\n      @keyframes transitionAnimation {\n        from {\n          width: ${width}px;\n          left: ${left}px;\n        }\n        to {\n          width: ${startWidth}px;\n          left: 0;\n        }\n      }\n      @keyframes acceptAnimation {\n        from {\n          width: ${startWidth}px;\n        }\n        to {\n          width: 80%;\n        }\n      }\n    `;\n  },\n  slowAcceptAnimation(t: Theme, startWidth: number, width: number, left: number) {\n    const transitionTime = parseInt(t.globalLoaderTransitionFromSpinnerDuration);\n    const slowProgressAnimationTime = parseInt(t.globalLoaderSlowAnimationDuration);\n    return css`\n      width: 90%;\n      animation: transitionAnimation ${transitionTime}ms linear,\n        ${slowProgressAnimationTime}ms acceptAnimation ${transitionTime}ms linear;\n      @keyframes transitionAnimation {\n        from {\n          width: ${width}px;\n          left: ${left}px;\n        }\n        to {\n          width: ${startWidth}px;\n          left: 0;\n        }\n      }\n      @keyframes acceptAnimation {\n        from {\n          width: ${startWidth}px;\n        }\n        to {\n          width: 90%;\n        }\n      }\n    `;\n  },\n  acceptWithoutAnimation(startWidth: number) {\n    return css`\n      width: ${startWidth}px;\n    `;\n  },\n};\n"]}

package/components/GlobalLoader/GlobalLoaderView.styles/package.json

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

package/components/GlobalLoader/GlobalLoaderView.styles.d.ts

@@ -0,0 +1,16 @@
+import { Theme } from '../../lib/theming/Theme';
+export declare const styles: {
+    outer(t: Theme): string;
+    inner(t: Theme): string;
+    standardWithoutAnimation(): string;
+    successWithoutAnimation(): string;
+    errorWithoutAnimation(): string;
+};
+export declare const animations: {
+    successAnimation(delayBeforeHide: number, width: number, left: number): string;
+    errorAnimation(t: Theme): string;
+    standardAnimation(t: Theme, expectedTime: number): string;
+    acceptAnimation(t: Theme, startWidth: number, expectedTime: number, width: number, left: number): string;
+    slowAcceptAnimation(t: Theme, startWidth: number, width: number, left: number): string;
+    acceptWithoutAnimation(startWidth: number): string;
+};

package/components/GlobalLoader/index/index.js

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

package/components/GlobalLoader/index/index.js.map

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

package/components/GlobalLoader/index/package.json

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

package/components/GlobalLoader/index.d.ts

@@ -0,0 +1 @@
+export * from './GlobalLoader';

package/components/GlobalLoader/package.json

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

package/components/GlobalLoader/useParams/package.json

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

package/components/GlobalLoader/useParams/useParams.js

@@ -0,0 +1,51 @@
+import { useEffect, useState } from 'react';
+import { getDOMRect } from "../../../lib/dom/getDOMRect";
+/**
+ * Вычисляет положение `GlobalLoader`
+ *
+ * @param ref - ref `GlobalLoader`
+ * @returns - возвращает положение полоски `GlobalLoader`
+ */
+
+export var useGlobalLoaderPosition = function useGlobalLoaderPosition(ref) {
+  var _getDOMRect = getDOMRect(ref),
+      left = _getDOMRect.left;
+
+  return {
+    left: left
+  };
+};
+/**
+ * Вычисляет ширину `GlobalLoader`
+ *
+ * @param status - статус `GlobalLoader`
+ * @param ref - ref `GlobalLoader`
+ * @returns - возвращает ширину полоски `GlobalLoader`
+ */
+
+export var useGlobalLoaderWidth = function useGlobalLoaderWidth(status, ref) {
+  var _ref$current, _ref$current$parentEl;
+
+  var _getDOMRect2 = getDOMRect(ref),
+      width = _getDOMRect2.width;
+
+  var _useState = useState(0),
+      startWidth = _useState[0],
+      setStartWidth = _useState[1];
+
+  var fullWidth = ((_ref$current = ref.current) == null ? void 0 : (_ref$current$parentEl = _ref$current.parentElement) == null ? void 0 : _ref$current$parentEl.offsetWidth) || 0;
+  useEffect(function () {
+    if (status === 'error') {
+      setStartWidth(width);
+    } else if (status === 'accept') {
+      setStartWidth(startWidth);
+    } else {
+      setStartWidth(0);
+    }
+  }, [status]);
+  return {
+    width: width,
+    startWidth: startWidth,
+    fullWidth: fullWidth
+  };
+};

package/components/GlobalLoader/useParams/useParams.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["useParams.ts"],"names":["useEffect","useState","getDOMRect","useGlobalLoaderPosition","ref","left","useGlobalLoaderWidth","status","width","startWidth","setStartWidth","fullWidth","current","parentElement","offsetWidth"],"mappings":"AAAA,SAASA,SAAT,EAAoBC,QAApB,QAAoC,OAApC;;AAEA,SAASC,UAAT,QAA2B,0BAA3B;;;;AAIA;AACA;AACA;AACA;AACA;AACA;;AAEA,OAAO,IAAMC,uBAAuB,GAAG,SAA1BA,uBAA0B,CAACC,GAAD,EAA2C;AAChF,oBAAiBF,UAAU,CAACE,GAAD,CAA3B,CAAQC,IAAR,eAAQA,IAAR;AACA,SAAO,EAAEA,IAAI,EAAJA,IAAF,EAAP;AACD,CAHM;;AAKP;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,OAAO,IAAMC,oBAAoB,GAAG,SAAvBA,oBAAuB;AAClCC,MADkC;AAElCH,GAFkC;AAG/B;AACH,qBAAkBF,UAAU,CAACE,GAAD,CAA5B,CAAQI,KAAR,gBAAQA,KAAR;AACA,kBAAoCP,QAAQ,CAAC,CAAD,CAA5C,CAAOQ,UAAP,gBAAmBC,aAAnB;AACA,MAAMC,SAAS,GAAG,iBAAAP,GAAG,CAACQ,OAAJ,2DAAaC,aAAb,2CAA4BC,WAA5B,KAA2C,CAA7D;AACAd,EAAAA,SAAS,CAAC,YAAM;AACd,QAAIO,MAAM,KAAK,OAAf,EAAwB;AACtBG,MAAAA,aAAa,CAACF,KAAD,CAAb;AACD,KAFD,MAEO,IAAID,MAAM,KAAK,QAAf,EAAyB;AAC9BG,MAAAA,aAAa,CAACD,UAAD,CAAb;AACD,KAFM,MAEA;AACLC,MAAAA,aAAa,CAAC,CAAD,CAAb;AACD;AACF,GARQ,EAQN,CAACH,MAAD,CARM,CAAT;;AAUA,SAAO,EAAEC,KAAK,EAALA,KAAF,EAASC,UAAU,EAAVA,UAAT,EAAqBE,SAAS,EAATA,SAArB,EAAP;AACD,CAlBM","sourcesContent":["import { useEffect, useState } from 'react';\n\nimport { getDOMRect } from '../../lib/dom/getDOMRect';\n\nimport { GlobalLoaderViewProps, GlobalLoaderViewRef } from './GlobalLoaderView';\n\n/**\n * Вычисляет положение `GlobalLoader`\n *\n * @param ref - ref `GlobalLoader`\n * @returns - возвращает положение полоски `GlobalLoader`\n */\n\nexport const useGlobalLoaderPosition = (ref: GlobalLoaderViewRef['refObject']) => {\n  const { left } = getDOMRect(ref);\n  return { left };\n};\n\n/**\n * Вычисляет ширину `GlobalLoader`\n *\n * @param status - статус `GlobalLoader`\n * @param ref - ref `GlobalLoader`\n * @returns - возвращает ширину полоски `GlobalLoader`\n */\n\nexport const useGlobalLoaderWidth = (\n  status: GlobalLoaderViewProps['status'],\n  ref: GlobalLoaderViewRef['refObject'],\n) => {\n  const { width } = getDOMRect(ref);\n  const [startWidth, setStartWidth] = useState(0);\n  const fullWidth = ref.current?.parentElement?.offsetWidth || 0;\n  useEffect(() => {\n    if (status === 'error') {\n      setStartWidth(width);\n    } else if (status === 'accept') {\n      setStartWidth(startWidth);\n    } else {\n      setStartWidth(0);\n    }\n  }, [status]);\n\n  return { width, startWidth, fullWidth };\n};\n"]}

package/components/GlobalLoader/useParams.d.ts

@@ -0,0 +1,22 @@
+import { GlobalLoaderViewProps, GlobalLoaderViewRef } from './GlobalLoaderView';
+/**
+ * Вычисляет положение `GlobalLoader`
+ *
+ * @param ref - ref `GlobalLoader`
+ * @returns - возвращает положение полоски `GlobalLoader`
+ */
+export declare const useGlobalLoaderPosition: (ref: GlobalLoaderViewRef['refObject']) => {
+    left: number;
+};
+/**
+ * Вычисляет ширину `GlobalLoader`
+ *
+ * @param status - статус `GlobalLoader`
+ * @param ref - ref `GlobalLoader`
+ * @returns - возвращает ширину полоски `GlobalLoader`
+ */
+export declare const useGlobalLoaderWidth: (status: GlobalLoaderViewProps['status'], ref: GlobalLoaderViewRef['refObject']) => {
+    width: number;
+    startWidth: number;
+    fullWidth: number;
+};

package/components/Group/Group/Group.js

@@ -1,13 +1,87 @@
 import _inheritsLoose from "@babel/runtime/helpers/esm/inheritsLoose";
+import _extends from "@babel/runtime/helpers/esm/extends";
+
+var _class, _class2, _temp;
+
 import React from 'react';
 import PropTypes from 'prop-types';
 import { isIE11, isEdge } from "../../../lib/client";
-import { Corners } from "../../Button/Corners";
 import { isButton } from "../../Button";
 import { CommonWrapper } from "../../../internal/CommonWrapper";
 import { cx } from "../../../lib/theming/Emotion";
+import { rootNode } from "../../../lib/rootNode";
+import { isInputLike } from "../../../lib/utils";
+import { ThemeContext } from "../../../lib/theming/ThemeContext";
+import { isTheme2022 } from "../../../lib/theming/ThemeHelpers";
 import { styles } from "../Group.styles";
-export var Group = /*#__PURE__*/function (_React$Component) {
+
+var getFirstChild = function getFirstChild(children) {
+  if (!Array.isArray(children)) {
+    return children;
+  }
+
+  return children == null ? void 0 : children[0];
+};
+
+var getLastChild = function getLastChild(children) {
+  if (!Array.isArray(children)) {
+    return children;
+  }
+
+  var numberOfChildren = React.Children.count(children);
+  return children == null ? void 0 : children[numberOfChildren - 1];
+};
+
+export var getButtonCorners = function getButtonCorners(isFirstChild, isLastChild) {
+  if (isFirstChild && isLastChild) {
+    return {};
+  }
+
+  if (isFirstChild) {
+    return {
+      borderTopRightRadius: 0,
+      borderBottomRightRadius: 0
+    };
+  }
+
+  if (isLastChild) {
+    return {
+      borderTopLeftRadius: 0,
+      borderBottomLeftRadius: 0
+    };
+  }
+
+  return {
+    borderRadius: 0
+  };
+};
+
+var passCornersIfButton = function passCornersIfButton(child, firstChild, lastChild, isInputLikeToo) {
+  if (isInputLikeToo === void 0) {
+    isInputLikeToo = false;
+  }
+
+  var corners = getButtonCorners(child === firstChild, child === lastChild);
+
+  if (isButton(child)) {
+    return /*#__PURE__*/React.cloneElement(child, {
+      corners: _extends({}, corners, child.props.corners)
+    });
+  }
+
+  if (isInputLikeToo && isInputLike(child)) {
+    return /*#__PURE__*/React.cloneElement(child, {
+      corners: _extends({}, corners, child.props.corners)
+    });
+  }
+
+  return child;
+};
+
+export var GroupDataTids = {
+  root: 'Group__root'
+};
+export var Group = rootNode(_class = (_temp = _class2 = /*#__PURE__*/function (_React$Component) {
   _inheritsLoose(Group, _React$Component);
 
   function Group() {
@@ -19,21 +93,28 @@ export var Group = /*#__PURE__*/function (_React$Component) {
   _proto.render = function render() {
     var _this = this;
 
+    return /*#__PURE__*/React.createElement(ThemeContext.Consumer, null, function (theme) {
+      _this.theme = theme;
+      return _this.renderMain();
+    });
+  };
+
+  _proto.renderMain = function renderMain() {
+    var _this2 = this;
+
     var style = {
       width: this.props.width
     };
-    var first = null;
-    var last = null;
-    React.Children.forEach(this.props.children, function (child) {
-      if (child && /*#__PURE__*/React.isValidElement(child)) {
-        first = first || child;
-        last = child;
-      }
-    });
-    return /*#__PURE__*/React.createElement(CommonWrapper, this.props, /*#__PURE__*/React.createElement("span", {
+    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", {
+      "data-tid": GroupDataTids.root,
       className: styles.root(),
       style: style
-    }, React.Children.map(this.props.children, function (child) {
+    }, React.Children.map(childrenArray, function (child) {
       var _cx, _cx2;
 
       if (!child || ! /*#__PURE__*/React.isValidElement(child)) {
@@ -41,34 +122,17 @@ export var Group = /*#__PURE__*/function (_React$Component) {
       }
 
       var isWidthInPercent = Boolean(child.props.width && child.props.width.toString().includes('%'));
-      var itemCss = cx((_cx = {}, _cx[styles.item()] = true, _cx[styles.itemFirst()] = child === first, _cx));
-      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 = /*#__PURE__*/React.cloneElement(child, {
-          corners: corners
-        });
-      }
-
+      var modifiedChild = passCornersIfButton(child, firstChild, lastChild, isTheme2022(_this2.theme));
+      var isFirstChild = child === firstChild;
       return /*#__PURE__*/React.createElement("div", {
-        className: cx((_cx2 = {}, _cx2[styles.fixed()] = !isWidthInPercent, _cx2[styles.stretch()] = isWidthInPercent, _cx2[styles.stretchFallback()] = Boolean(isWidthInPercent && _this.props.width && (isIE11 || isEdge)), _cx2))
+        className: cx((_cx = {}, _cx[styles.fixed()] = !isWidthInPercent, _cx[styles.stretch()] = isWidthInPercent, _cx[styles.stretchFallback()] = Boolean(isWidthInPercent && _this2.props.width && (isIE11 || isEdge)), _cx))
       }, /*#__PURE__*/React.createElement("div", {
-        className: itemCss
-      }, child));
+        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","isIE11","isEdge","Corners","isButton","CommonWrapper","cx","styles","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';\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":["React","PropTypes","isIE11","isEdge","isButton","CommonWrapper","cx","rootNode","isInputLike","ThemeContext","isTheme2022","styles","getFirstChild","children","Array","isArray","getLastChild","numberOfChildren","Children","count","getButtonCorners","isFirstChild","isLastChild","borderTopRightRadius","borderBottomRightRadius","borderTopLeftRadius","borderBottomLeftRadius","borderRadius","passCornersIfButton","child","firstChild","lastChild","isInputLikeToo","corners","cloneElement","props","GroupDataTids","root","Group","render","theme","renderMain","style","width","childrenArray","toArray","setRootNode","map","isValidElement","isWidthInPercent","Boolean","toString","includes","modifiedChild","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';\nimport { isInputLike } from '../../lib/utils';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { Theme } from '../../lib/theming/Theme';\nimport { isTheme2022 } from '../../lib/theming/ThemeHelpers';\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\nexport const getButtonCorners = (isFirstChild: boolean, isLastChild: boolean): React.CSSProperties => {\n  if (isFirstChild && isLastChild) {\n    return {};\n  }\n\n  if (isFirstChild) {\n    return {\n      borderTopRightRadius: 0,\n      borderBottomRightRadius: 0,\n    };\n  }\n\n  if (isLastChild) {\n    return {\n      borderTopLeftRadius: 0,\n      borderBottomLeftRadius: 0,\n    };\n  }\n\n  return {\n    borderRadius: 0,\n  };\n};\n\nconst passCornersIfButton = (\n  child: React.ReactNode,\n  firstChild: React.ReactNode,\n  lastChild: React.ReactNode,\n  isInputLikeToo = false,\n) => {\n  const corners = getButtonCorners(child === firstChild, child === lastChild);\n  if (isButton(child)) {\n    return React.cloneElement(child, { corners: { ...corners, ...child.props.corners } });\n  }\n  if (isInputLikeToo && isInputLike(child)) {\n    return React.cloneElement(child, { corners: { ...corners, ...child.props.corners } });\n  }\n\n  return child;\n};\n\nexport const GroupDataTids = {\n  root: 'Group__root',\n} as const;\n\n@rootNode\nexport class Group extends React.Component<GroupProps> {\n  public static __KONTUR_REACT_UI__ = 'Group';\n  private setRootNode!: TSetRootNode;\n  private theme!: Theme;\n\n  public static propTypes = {\n    width: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),\n  };\n\n  public render() {\n    return (\n      <ThemeContext.Consumer>\n        {(theme) => {\n          this.theme = theme;\n          return this.renderMain();\n        }}\n      </ThemeContext.Consumer>\n    );\n  }\n\n  public renderMain() {\n    const style: React.CSSProperties = {\n      width: this.props.width,\n    };\n\n    const childrenArray = React.Children.toArray(this.props.children);\n    const firstChild = getFirstChild(childrenArray);\n    const lastChild = getLastChild(childrenArray);\n\n    return (\n      <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>\n        <span data-tid={GroupDataTids.root} className={styles.root()} style={style}>\n          {React.Children.map(childrenArray, (child) => {\n            if (!child || !React.isValidElement<GroupChildProps>(child)) {\n              return null;\n            }\n\n            const isWidthInPercent = Boolean(child.props.width && child.props.width.toString().includes('%'));\n\n            const modifiedChild = passCornersIfButton(child, firstChild, lastChild, isTheme2022(this.theme));\n\n            const isFirstChild = child === firstChild;\n\n            return (\n              <div\n                className={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.d.ts

@@ -4,10 +4,17 @@ import { CommonProps } from '../../internal/CommonWrapper';
 export interface GroupProps extends CommonProps {
     width?: React.CSSProperties['width'];
 }
+export declare const getButtonCorners: (isFirstChild: boolean, isLastChild: boolean) => React.CSSProperties;
+export declare const GroupDataTids: {
+    readonly root: "Group__root";
+};
 export declare class Group extends React.Component<GroupProps> {
     static __KONTUR_REACT_UI__: string;
+    private setRootNode;
+    private theme;
     static propTypes: {
         width: PropTypes.Requireable<string | number>;
     };
     render(): JSX.Element;
+    renderMain(): JSX.Element;
 }

package/components/Hint/Hint/Hint.js

@@ -1,3 +1,4 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
 import _inheritsLoose from "@babel/runtime/helpers/esm/inheritsLoose";
 
 var _class, _class2, _temp;
@@ -5,20 +6,21 @@ var _class, _class2, _temp;
 import React from 'react';
 import { ThemeContext } from "../../../lib/theming/ThemeContext";
 import { ThemeFactory } from "../../../lib/theming/ThemeFactory";
-import { Popup } from "../../../internal/Popup";
+import { DUMMY_LOCATION, Popup } from "../../../internal/Popup";
 import { isTestEnv } from "../../../lib/currentEnvironment";
 import { CommonWrapper } from "../../../internal/CommonWrapper";
 import { cx } from "../../../lib/theming/Emotion";
-import { responsiveLayout } from "../../ResponsiveLayout";
+import { rootNode } from "../../../lib/rootNode";
+import { createPropsGetter } from "../../../lib/createPropsGetter";
 import { styles } from "../Hint.styles";
 var HINT_BORDER_COLOR = 'transparent';
 var Positions = ['top center', 'top left', 'top right', 'bottom center', 'bottom left', 'bottom right', 'left middle', 'left top', 'left bottom', 'right middle', 'right top', 'right bottom'];
+export
 /**
- * Всплывающая подсказка, которая по умолчанию отображается при наведении на элемент. <br/> Можно задать другие условия отображения.
- */
-
-export var Hint = responsiveLayout(_class = (_temp = _class2 = /*#__PURE__*/function (_React$Component) {
-  _inheritsLoose(Hint, _React$Component);
+* Всплывающая подсказка, которая по умолчанию отображается при наведении на элемент. <br/> Можно задать другие условия отображения.
+*/
+var Hint = rootNode(_class = (_temp = _class2 = /*#__PURE__*/function (_React$PureComponent) {
+  _inheritsLoose(Hint, _React$PureComponent);
 
   function Hint() {
     var _this;
@@ -27,22 +29,29 @@ export var Hint = responsiveLayout(_class = (_temp = _class2 = /*#__PURE__*/func
       args[_key] = arguments[_key];
     }
 
-    _this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;
-    _this.isMobileLayout = void 0;
+    _this = _React$PureComponent.call.apply(_React$PureComponent, [this].concat(args)) || this;
+    _this.getProps = createPropsGetter(Hint.defaultProps);
     _this.state = {
-      opened: _this.props.manual ? !!_this.props.opened : false
+      opened: _this.getProps().manual ? !!_this.getProps().opened : false,
+      position: DUMMY_LOCATION.position
     };
     _this.timer = null;
-    _this.theme = void 0;
+    _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) {
-        return x.startsWith(_this.props.pos);
+        return x.startsWith(_this.getProps().pos);
       });
     };
 
     _this.handleMouseEnter = function (e) {
-      if (!_this.props.manual && !_this.timer) {
+      if (!_this.getProps().manual && !_this.timer) {
         _this.timer = window.setTimeout(_this.open, 400);
       }
 
@@ -52,7 +61,7 @@ export var Hint = responsiveLayout(_class = (_temp = _class2 = /*#__PURE__*/func
     };
 
     _this.handleMouseLeave = function (e) {
-      if (!_this.props.manual && _this.timer) {
+      if (!_this.getProps().manual && _this.timer) {
         clearTimeout(_this.timer);
         _this.timer = null;
 
@@ -66,12 +75,6 @@ export var Hint = responsiveLayout(_class = (_temp = _class2 = /*#__PURE__*/func
       }
     };
 
-    _this.close = function () {
-      _this.setState({
-        opened: false
-      });
-    };
-
     _this.open = function () {
       _this.setState({
         opened: true
@@ -83,8 +86,12 @@ export var Hint = responsiveLayout(_class = (_temp = _class2 = /*#__PURE__*/func
 
   var _proto = Hint.prototype;
 
-  _proto.UNSAFE_componentWillReceiveProps = function UNSAFE_componentWillReceiveProps(nextProps) {
-    if (!nextProps.manual) {
+  _proto.componentDidUpdate = function componentDidUpdate(prevProps) {
+    var _this$getProps = this.getProps(),
+        opened = _this$getProps.opened,
+        manual = _this$getProps.manual;
+
+    if (!manual) {
       return;
     }
 
@@ -93,9 +100,9 @@ export var Hint = responsiveLayout(_class = (_temp = _class2 = /*#__PURE__*/func
       this.timer = null;
     }
 
-    if (nextProps.opened !== this.props.opened) {
+    if (opened !== prevProps.opened) {
       this.setState({
-        opened: !!nextProps.opened
+        opened: !!opened
       });
     }
   };
@@ -119,32 +126,37 @@ export var Hint = responsiveLayout(_class = (_temp = _class2 = /*#__PURE__*/func
           popupBorder: theme.hintBorder,
           popupBorderRadius: theme.hintBorderRadius
         }, _this2.theme)
-      }, _this2.isMobileLayout ? _this2.renderMobile() : _this2.renderMain());
+      }, _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, this.props, /*#__PURE__*/React.createElement(Popup, {
+    var _this3 = this;
+
+    var _this$getProps2 = this.getProps(),
+        disableAnimations = _this$getProps2.disableAnimations,
+        useWrapper = _this$getProps2.useWrapper;
+
+    return /*#__PURE__*/React.createElement(CommonWrapper, _extends({
+      rootNodeRef: this.setRootNode
+    }, this.props), /*#__PURE__*/React.createElement(Popup, {
       hasPin: true,
       opened: this.state.opened,
       anchorElement: this.props.children,
       positions: this.getPositions(),
       backgroundColor: this.theme.hintBgColor,
       borderColor: HINT_BORDER_COLOR,
-      disableAnimations: this.props.disableAnimations,
+      onPositionChange: function onPositionChange(position) {
+        return _this3.setState({
+          position: position
+        });
+      },
+      disableAnimations: disableAnimations,
       onMouseEnter: this.handleMouseEnter,
       onMouseLeave: this.handleMouseLeave,
-      useWrapper: this.props.useWrapper
+      useWrapper: useWrapper,
+      ref: this.popupRef,
+      withoutMobile: true
     }, this.renderContent()));
   };
 
@@ -155,20 +167,21 @@ export var Hint = responsiveLayout(_class = (_temp = _class2 = /*#__PURE__*/func
       return null;
     }
 
-    var _this$props = this.props,
-        pos = _this$props.pos,
-        maxWidth = _this$props.maxWidth;
-    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));
+    var _this$getProps3 = this.getProps(),
+        maxWidth = _this$getProps3.maxWidth;
+
+    var centerAlignPositions = ['top', 'top center', 'bottom', 'bottom center'];
+    var className = cx((_cx = {}, _cx[styles.content(this.theme)] = true, _cx[styles.contentCenter(this.theme)] = centerAlignPositions.includes(this.state.position), _cx));
     return /*#__PURE__*/React.createElement("div", {
       className: className,
       style: {
-        maxWidth: this.isMobileLayout ? '100%' : maxWidth
+        maxWidth: maxWidth
       }
     }, this.props.text);
   };
 
   return Hint;
-}(React.Component), _class2.__KONTUR_REACT_UI__ = 'Hint', _class2.defaultProps = {
+}(React.PureComponent), _class2.__KONTUR_REACT_UI__ = 'Hint', _class2.defaultProps = {
   pos: 'top',
   manual: false,
   opened: false,