@skbkontur/react-ui 1.12.2 → 2.0.0-beta.4

package/components/GlobalLoader/GlobalLoaderView.js

@@ -0,0 +1,72 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React, { forwardRef, useContext, useRef } from 'react';
+import { useEmotion, useStyles } from '../../lib/renderEnvironment/index.js';
+import { ZIndex } from '../../internal/ZIndex/index.js';
+import { ThemeContext } from '../../lib/theming/ThemeContext.js';
+import { CommonWrapper } from '../../internal/CommonWrapper/index.js';
+import { getAnimations, getStyles } from './GlobalLoaderView.styles.js';
+import { useGlobalLoaderPosition, useGlobalLoaderWidth } from './useParams.js';
+export var GlobalLoaderView = forwardRef(function (_a, externalRef) {
+    var expectedResponseTime = _a.expectedResponseTime, delayBeforeHide = _a.delayBeforeHide, status = _a.status, disableAnimations = _a.disableAnimations, rest = __rest(_a, ["expectedResponseTime", "delayBeforeHide", "status", "disableAnimations"]);
+    var ref = useRef(null);
+    var theme = useContext(ThemeContext);
+    var cx = useEmotion().cx;
+    var styles = useStyles(getStyles);
+    var animations = useStyles(getAnimations);
+    var _b = useGlobalLoaderWidth(status, ref), width = _b.width, startWidth = _b.startWidth, fullWidth = _b.fullWidth;
+    var left = useGlobalLoaderPosition(ref).left;
+    var getAnimationClass = function (status) {
+        if (!disableAnimations) {
+            switch (status) {
+                case 'success':
+                    return animations.successAnimation(delayBeforeHide, width, left);
+                case 'accept':
+                    if (startWidth < fullWidth * 0.8) {
+                        return animations.acceptAnimation(theme, startWidth, expectedResponseTime, width, left);
+                    }
+                    return animations.slowAcceptAnimation(theme, startWidth, width, left);
+                case 'error':
+                    return animations.errorAnimation(theme);
+                case 'standard':
+                    return animations.standardAnimation(theme, expectedResponseTime);
+            }
+        }
+        if (disableAnimations) {
+            switch (status) {
+                case 'success':
+                    return styles.successWithoutAnimation();
+                case 'accept':
+                    return animations.acceptWithoutAnimation(startWidth);
+                case 'error':
+                    return styles.errorWithoutAnimation();
+                case 'standard':
+                    return styles.standardWithoutAnimation();
+            }
+        }
+    };
+    return (React.createElement(CommonWrapper, __assign({}, rest, { "data-status": status, ref: externalRef }),
+        React.createElement(ZIndex, { priority: "GlobalLoader", className: styles.outer(theme) },
+            React.createElement("div", { ref: ref, className: cx(styles.inner(theme), getAnimationClass(status)) }))));
+});
+//# sourceMappingURL=GlobalLoaderView.js.map

package/components/GlobalLoader/GlobalLoaderView.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"GlobalLoaderView.js","sourceRoot":"","sources":["../../../components/GlobalLoader/GlobalLoaderView.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { forwardRef, useContext, useRef } from 'react';\n\nimport { useEmotion, useStyles } from '../../lib/renderEnvironment/index.js';\nimport { ZIndex } from '../../internal/ZIndex/index.js';\nimport { ThemeContext } from '../../lib/theming/ThemeContext.js';\nimport type { CommonProps } from '../../internal/CommonWrapper/index.js';\nimport { CommonWrapper } from '../../internal/CommonWrapper/index.js';\n\nimport { getAnimations, getStyles } from './GlobalLoaderView.styles.js';\nimport { useGlobalLoaderPosition, useGlobalLoaderWidth } from './useParams.js';\n\nexport interface GlobalLoaderViewProps extends Pick<CommonProps, 'data-tid'> {\n  /** Устанавливает ожидаемое время(ms) ответа сервера. */\n  expectedResponseTime: number;\n\n  /** Устанавливает задержку в миллисекундах до исчезновения лоадера. */\n  delayBeforeHide: number;\n\n  /** Устанавливает статус операции. */\n  status?: 'success' | 'error' | 'standard' | 'accept';\n\n  /** Отключает анимацию. */\n  disableAnimations: boolean;\n}\n\nexport interface GlobalLoaderViewRef {\n  element: HTMLDivElement;\n  refObject: React.RefObject<GlobalLoaderViewRef['element'] | null>;\n}\n\nexport const GlobalLoaderView = forwardRef(\n  (\n    { expectedResponseTime, delayBeforeHide, status, disableAnimations, ...rest }: GlobalLoaderViewProps,\n    externalRef: React.Ref<CommonWrapper<CommonProps>>,\n  ) => {\n    const ref = useRef<GlobalLoaderViewRef['element']>(null);\n    const theme = useContext(ThemeContext);\n    const { cx } = useEmotion();\n    const styles = useStyles(getStyles);\n    const animations = useStyles(getAnimations);\n    const { width, startWidth, fullWidth } = useGlobalLoaderWidth(status, ref);\n    const { left } = useGlobalLoaderPosition(ref);\n\n    const getAnimationClass = (status: GlobalLoaderViewProps['status']) => {\n      if (!disableAnimations) {\n        switch (status) {\n          case 'success':\n            return animations.successAnimation(delayBeforeHide, width, left);\n          case 'accept':\n            if (startWidth < fullWidth * 0.8) {\n              return animations.acceptAnimation(theme, startWidth, expectedResponseTime, width, left);\n            }\n            return animations.slowAcceptAnimation(theme, startWidth, width, left);\n          case 'error':\n            return animations.errorAnimation(theme);\n          case 'standard':\n            return animations.standardAnimation(theme, expectedResponseTime);\n        }\n      }\n\n      if (disableAnimations) {\n        switch (status) {\n          case 'success':\n            return styles.successWithoutAnimation();\n          case 'accept':\n            return animations.acceptWithoutAnimation(startWidth);\n          case 'error':\n            return styles.errorWithoutAnimation();\n          case 'standard':\n            return styles.standardWithoutAnimation();\n        }\n      }\n    };\n\n    return (\n      <CommonWrapper {...rest} data-status={status} ref={externalRef}>\n        <ZIndex priority=\"GlobalLoader\" className={styles.outer(theme)}>\n          <div ref={ref} className={cx(styles.inner(theme), getAnimationClass(status))} />\n        </ZIndex>\n      </CommonWrapper>\n    );\n  },\n);\n"]}

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

@@ -0,0 +1,17 @@
+import type { Emotion } from '@emotion/css/create-instance';
+import type { Theme } from '../../lib/theming/Theme.js';
+export declare const getStyles: import("../../lib/theming/Emotion.js").StylesGetter<{
+    outer(t: Theme): string;
+    inner(t: Theme): string;
+    standardWithoutAnimation(): string;
+    successWithoutAnimation(): string;
+    errorWithoutAnimation(): string;
+}>;
+export declare const getAnimations: (emotion: Emotion) => {
+    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/GlobalLoaderView.styles.js

@@ -0,0 +1,70 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import { memoizeGetStyles } from '../../lib/theming/Emotion.js';
+export var getStyles = memoizeGetStyles(function (_a) {
+    var css = _a.css;
+    return ({
+        outer: function (t) {
+            return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      width: ", ";\n      height: ", ";\n      background-color: ", ";\n      position: ", ";\n      left: ", ";\n      top: ", ";\n      right: ", ";\n      bottom: ", ";\n      overflow: hidden;\n    "], ["\n      width: ", ";\n      height: ", ";\n      background-color: ", ";\n      position: ", ";\n      left: ", ";\n      top: ", ";\n      right: ", ";\n      bottom: ", ";\n      overflow: hidden;\n    "])), t.globalLoaderWidth, t.globalLoaderHeight, t.globalLoaderBackgroundColor, t.globalLoaderPosition, t.globalLoaderLeft, t.globalLoaderTop, t.globalLoaderRight, t.globalLoaderBottom);
+        },
+        inner: function (t) {
+            return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n      background-color: ", ";\n      width: 0;\n      height: ", ";\n      position: absolute;\n      left: 0;\n      overflow: hidden;\n    "], ["\n      background-color: ", ";\n      width: 0;\n      height: ", ";\n      position: absolute;\n      left: 0;\n      overflow: hidden;\n    "])), t.globalLoaderColor, t.globalLoaderHeight);
+        },
+        standardWithoutAnimation: function () {
+            return css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n      left: 0;\n      width: 90%;\n    "], ["\n      left: 0;\n      width: 90%;\n    "])));
+        },
+        successWithoutAnimation: function () {
+            return css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n      left: 0;\n      width: 100%;\n    "], ["\n      left: 0;\n      width: 100%;\n    "])));
+        },
+        errorWithoutAnimation: function () {
+            return css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n      left: 40%;\n      width: 20%;\n    "], ["\n      left: 40%;\n      width: 20%;\n    "])));
+        },
+    });
+});
+var moveToRightAnimation = function (_a) {
+    var keyframes = _a.keyframes;
+    return keyframes(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\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"], ["\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"])));
+};
+var spinnerAnimation = function (_a) {
+    var keyframes = _a.keyframes;
+    return keyframes(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\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"], ["\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"])));
+};
+var linearProgressAnimation = function (_a) {
+    var keyframes = _a.keyframes;
+    return keyframes(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  from { width: 0; }\n  to { width: 80% }\n"], ["\n  from { width: 0; }\n  to { width: 80% }\n"])));
+};
+var slowProgressAnimation = function (_a) {
+    var keyframes = _a.keyframes;
+    return keyframes(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  from { width: 80%; }\n  to { width: 90% }\n"], ["\n  from { width: 80%; }\n  to { width: 90% }\n"])));
+};
+export var getAnimations = function (emotion) { return ({
+    successAnimation: function (delayBeforeHide, width, left) {
+        return emotion.css(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n      animation: successAnimation;\n      animation-duration: ", "ms;\n      @keyframes successAnimation {\n        0% {\n          width: ", "px;\n          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      animation: successAnimation;\n      animation-duration: ", "ms;\n      @keyframes successAnimation {\n        0% {\n          width: ", "px;\n          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    "])), delayBeforeHide, width, left);
+    },
+    errorAnimation: function (t) {
+        var transitionDuration = parseInt(t.globalLoaderTransitionToSpinnerDuration);
+        var spinnerAnimationDuration = parseInt(t.globalLoaderSpinnerAnimationDuration);
+        return emotion.css(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n      left: 0;\n      width: 100%;\n      animation:\n        ", " ", "ms linear,\n        ", "ms ", " ", "ms infinite alternate;\n    "], ["\n      left: 0;\n      width: 100%;\n      animation:\n        ", " ", "ms linear,\n        ", "ms ", " ", "ms infinite alternate;\n    "])), moveToRightAnimation(emotion), transitionDuration, spinnerAnimationDuration, spinnerAnimation(emotion), transitionDuration);
+    },
+    standardAnimation: function (t, expectedTime) {
+        var slowProgressAnimationTime = parseInt(t.globalLoaderSlowAnimationDuration);
+        return emotion.css(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n      width: 90%;\n      animation:\n        ", " ", "ms cubic-bezier(0, 0.4, 0.4, 1),\n        ", "ms ", " ", "ms linear;\n    "], ["\n      width: 90%;\n      animation:\n        ", " ", "ms cubic-bezier(0, 0.4, 0.4, 1),\n        ", "ms ", " ", "ms linear;\n    "])), linearProgressAnimation(emotion), expectedTime, slowProgressAnimationTime, slowProgressAnimation(emotion), expectedTime);
+    },
+    acceptAnimation: function (t, startWidth, expectedTime, width, left) {
+        var transitionTime = parseInt(t.globalLoaderTransitionFromSpinnerDuration);
+        var slowProgressAnimationTime = parseInt(t.globalLoaderSlowAnimationDuration);
+        return emotion.css(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n      width: 90%;\n      animation:\n        transitionAnimation ", "ms linear,\n        ", "ms acceptAnimation ", "ms cubic-bezier(0, 0.4, 0.4, 1),\n        ", "ms ", " ", "ms linear;\n      @keyframes transitionAnimation {\n        from {\n          width: ", "px;\n          left: ", "px;\n        }\n        to {\n          width: ", "px;\n          left: 0;\n        }\n      }\n      @keyframes acceptAnimation {\n        from {\n          width: ", "px;\n        }\n        to {\n          width: 80%;\n        }\n      }\n    "], ["\n      width: 90%;\n      animation:\n        transitionAnimation ", "ms linear,\n        ", "ms acceptAnimation ", "ms cubic-bezier(0, 0.4, 0.4, 1),\n        ", "ms ", " ", "ms linear;\n      @keyframes transitionAnimation {\n        from {\n          width: ", "px;\n          left: ", "px;\n        }\n        to {\n          width: ", "px;\n          left: 0;\n        }\n      }\n      @keyframes acceptAnimation {\n        from {\n          width: ", "px;\n        }\n        to {\n          width: 80%;\n        }\n      }\n    "])), transitionTime, expectedTime, transitionTime, slowProgressAnimationTime, slowProgressAnimation(emotion), expectedTime + transitionTime, width, left, startWidth, startWidth);
+    },
+    slowAcceptAnimation: function (t, startWidth, width, left) {
+        var transitionTime = parseInt(t.globalLoaderTransitionFromSpinnerDuration);
+        var slowProgressAnimationTime = parseInt(t.globalLoaderSlowAnimationDuration);
+        return emotion.css(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n      width: 90%;\n      animation:\n        transitionAnimation ", "ms linear,\n        ", "ms acceptAnimation ", "ms linear;\n      @keyframes transitionAnimation {\n        from {\n          width: ", "px;\n          left: ", "px;\n        }\n        to {\n          width: ", "px;\n          left: 0;\n        }\n      }\n      @keyframes acceptAnimation {\n        from {\n          width: ", "px;\n        }\n        to {\n          width: 90%;\n        }\n      }\n    "], ["\n      width: 90%;\n      animation:\n        transitionAnimation ", "ms linear,\n        ", "ms acceptAnimation ", "ms linear;\n      @keyframes transitionAnimation {\n        from {\n          width: ", "px;\n          left: ", "px;\n        }\n        to {\n          width: ", "px;\n          left: 0;\n        }\n      }\n      @keyframes acceptAnimation {\n        from {\n          width: ", "px;\n        }\n        to {\n          width: 90%;\n        }\n      }\n    "])), transitionTime, slowProgressAnimationTime, transitionTime, width, left, startWidth, startWidth);
+    },
+    acceptWithoutAnimation: function (startWidth) {
+        return emotion.css(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n      width: ", "px;\n    "], ["\n      width: ", "px;\n    "])), startWidth);
+    },
+}); };
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15;
+//# sourceMappingURL=GlobalLoaderView.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"GlobalLoaderView.styles.js","sourceRoot":"","sources":["../../../components/GlobalLoader/GlobalLoaderView.styles.ts"],"names":[],"mappings":"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","sourcesContent":["import type { Emotion } from '@emotion/css/create-instance';\n\nimport { memoizeGetStyles } from '../../lib/theming/Emotion.js';\nimport type { Theme } from '../../lib/theming/Theme.js';\n\nexport const getStyles = memoizeGetStyles(({ css }: Emotion) => ({\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 }: Emotion) => 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 }: Emotion) => 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 }: Emotion) => keyframes`\n  from { width: 0; }\n  to { width: 80% }\n`;\nconst slowProgressAnimation = ({ keyframes }: Emotion) => keyframes`\n  from { width: 80%; }\n  to { width: 90% }\n`;\n\nexport const getAnimations = (\n  emotion: Emotion,\n): {\n  successAnimation(delayBeforeHide: number, width: number, left: number): string;\n  errorAnimation(t: Theme): string;\n  standardAnimation(t: Theme, expectedTime: number): string;\n  acceptAnimation(t: Theme, startWidth: number, expectedTime: number, width: number, left: number): string;\n  slowAcceptAnimation(t: Theme, startWidth: number, width: number, left: number): string;\n  acceptWithoutAnimation(startWidth: number): string;\n} => ({\n  successAnimation(delayBeforeHide: number, width: number, left: number) {\n    return emotion.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 emotion.css`\n      left: 0;\n      width: 100%;\n      animation:\n        ${moveToRightAnimation(emotion)} ${transitionDuration}ms linear,\n        ${spinnerAnimationDuration}ms ${spinnerAnimation(emotion)} ${transitionDuration}ms infinite alternate;\n    `;\n  },\n  standardAnimation(t: Theme, expectedTime: number) {\n    const slowProgressAnimationTime = parseInt(t.globalLoaderSlowAnimationDuration);\n    return emotion.css`\n      width: 90%;\n      animation:\n        ${linearProgressAnimation(emotion)} ${expectedTime}ms cubic-bezier(0, 0.4, 0.4, 1),\n        ${slowProgressAnimationTime}ms ${slowProgressAnimation(emotion)} ${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 emotion.css`\n      width: 90%;\n      animation:\n        transitionAnimation ${transitionTime}ms linear,\n        ${expectedTime}ms acceptAnimation ${transitionTime}ms cubic-bezier(0, 0.4, 0.4, 1),\n        ${slowProgressAnimationTime}ms ${slowProgressAnimation(emotion)} ${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 emotion.css`\n      width: 90%;\n      animation:\n        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 emotion.css`\n      width: ${startWidth}px;\n    `;\n  },\n});\n"]}

package/components/GlobalLoader/index.d.ts

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

package/components/GlobalLoader/index.js

@@ -0,0 +1,2 @@
+export * from './GlobalLoader.js';
+//# sourceMappingURL=index.js.map

package/components/GlobalLoader/index.js.map

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

package/components/GlobalLoader/useParams.d.ts

@@ -0,0 +1,22 @@
+import type { GlobalLoaderViewProps, GlobalLoaderViewRef } from './GlobalLoaderView.js';
+/**
+ * Вычисляет положение `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/GlobalLoader/useParams.js

@@ -0,0 +1,38 @@
+import { useEffect, useState } from 'react';
+import { getDOMRect } from '../../lib/dom/getDOMRect.js';
+/**
+ * Вычисляет положение `GlobalLoader`
+ *
+ * @param ref - ref `GlobalLoader`
+ * @returns - возвращает положение полоски `GlobalLoader`
+ */
+export var useGlobalLoaderPosition = function (ref) {
+    var left = getDOMRect(ref).left;
+    return { left: left };
+};
+/**
+ * Вычисляет ширину `GlobalLoader`
+ *
+ * @param status - статус `GlobalLoader`
+ * @param ref - ref `GlobalLoader`
+ * @returns - возвращает ширину полоски `GlobalLoader`
+ */
+export var useGlobalLoaderWidth = function (status, ref) {
+    var _a, _b;
+    var width = getDOMRect(ref).width;
+    var _c = useState(0), startWidth = _c[0], setStartWidth = _c[1];
+    var fullWidth = ((_b = (_a = ref.current) === null || _a === void 0 ? void 0 : _a.parentElement) === null || _b === void 0 ? void 0 : _b.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 };
+};
+//# sourceMappingURL=useParams.js.map

package/components/GlobalLoader/useParams.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useParams.js","sourceRoot":"","sources":["../../../components/GlobalLoader/useParams.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAE5C,OAAO,EAAE,UAAU,EAAE,MAAM,6BAA6B,CAAC;AAIzD;;;;;GAKG;AAEH,MAAM,CAAC,IAAM,uBAAuB,GAAG,UAAC,GAAqC;IACnE,IAAA,IAAI,GAAK,UAAU,CAAC,GAAG,CAAC,KAApB,CAAqB;IACjC,OAAO,EAAE,IAAI,MAAA,EAAE,CAAC;AAClB,CAAC,CAAC;AAEF;;;;;;GAMG;AAEH,MAAM,CAAC,IAAM,oBAAoB,GAAG,UAClC,MAAuC,EACvC,GAAqC;;IAE7B,IAAA,KAAK,GAAK,UAAU,CAAC,GAAG,CAAC,MAApB,CAAqB;IAC5B,IAAA,KAA8B,QAAQ,CAAC,CAAC,CAAC,EAAxC,UAAU,QAAA,EAAE,aAAa,QAAe,CAAC;IAChD,IAAM,SAAS,GAAG,CAAA,MAAA,MAAA,GAAG,CAAC,OAAO,0CAAE,aAAa,0CAAE,WAAW,KAAI,CAAC,CAAC;IAC/D,SAAS,CAAC;QACR,IAAI,MAAM,KAAK,OAAO,EAAE,CAAC;YACvB,aAAa,CAAC,KAAK,CAAC,CAAC;QACvB,CAAC;aAAM,IAAI,MAAM,KAAK,QAAQ,EAAE,CAAC;YAC/B,aAAa,CAAC,UAAU,CAAC,CAAC;QAC5B,CAAC;aAAM,CAAC;YACN,aAAa,CAAC,CAAC,CAAC,CAAC;QACnB,CAAC;IACH,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC;IAEb,OAAO,EAAE,KAAK,OAAA,EAAE,UAAU,YAAA,EAAE,SAAS,WAAA,EAAE,CAAC;AAC1C,CAAC,CAAC","sourcesContent":["import { useEffect, useState } from 'react';\n\nimport { getDOMRect } from '../../lib/dom/getDOMRect.js';\n\nimport type { GlobalLoaderViewProps, GlobalLoaderViewRef } from './GlobalLoaderView.js';\n\n/**\n * Вычисляет положение `GlobalLoader`\n *\n * @param ref - ref `GlobalLoader`\n * @returns - возвращает положение полоски `GlobalLoader`\n */\n\nexport const useGlobalLoaderPosition = (ref: GlobalLoaderViewRef['refObject']): { left: number } => {\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): { width: number; startWidth: number; fullWidth: number } => {\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/Group/Group.d.ts

@@ -1,24 +1,28 @@
-import * as React from 'react';
-import * as PropTypes from 'prop-types';
-import '../ensureOldIEClassName';
-export interface GroupProps {
-    width?: React.CSSProperties['width'];
-}
-export interface GroupChildProps {
-    /** @deprecated */
-    mainInGroup?: boolean;
-    width?: React.CSSProperties['width'];
-    corners?: number;
-}
-/**
- * Главному *Input*, который должен занимать всю доступную ширину, нужно
- * передать свойство `mainInGroup`;
- */
-declare class Group extends React.Component<GroupProps> {
-    static __KONTUR_REACT_UI__: string;
-    static propTypes: {
-        width: PropTypes.Requireable<string | number>;
-    };
-    render(): JSX.Element;
-}
-export default Group;
+import React from 'react';
+import type { CommonProps } from '../../internal/CommonWrapper/index.js';
+import type { TGetRootNode } from '../../lib/rootNode/index.js';
+export interface GroupProps extends CommonProps {
+    /** Задает длину компонента Group. */
+    width?: React.CSSProperties['width'];
+}
+export declare const getButtonCorners: (isFirstChild: boolean, isLastChild: boolean) => React.CSSProperties;
+export declare const GroupDataTids: {
+    readonly root: "Group__root";
+};
+/**
+ *  Компонент `Group` используется для создания логически сгруппированных элементов, выровненных по горизонтали.
+ *
+ *  Длина контейнера настраивается с помощью пропа `width`.
+ */
+export declare class Group extends React.Component<GroupProps> {
+    static __KONTUR_REACT_UI__: string;
+    static displayName: string;
+    getRootNode: TGetRootNode;
+    private setRootNode;
+    private emotion;
+    private cx;
+    private styles;
+    render(): React.JSX.Element;
+    private renderChild;
+    private renderWrappedChildren;
+}

package/components/Group/Group.js

@@ -1,78 +1,165 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-var tslib_1 = require("tslib");
-var React = tslib_1.__importStar(require("react"));
-var PropTypes = tslib_1.__importStar(require("prop-types"));
-var Corners_1 = tslib_1.__importDefault(require("../Button/Corners"));
-require("../ensureOldIEClassName");
-var Group_module_less_1 = tslib_1.__importDefault(require("./Group.module.css"));
-var Button_1 = require("../Button");
-var Emotion_1 = require("../../lib/theming/Emotion");
-/**
- * Главному *Input*, который должен занимать всю доступную ширину, нужно
- * передать свойство `mainInGroup`;
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import React from 'react';
+import { CommonWrapper } from '../../internal/CommonWrapper/index.js';
+import { rootNode } from '../../lib/rootNode/index.js';
+import { isButton, isAutocomplete, isCurrencyInput, isDropdown, isDropdownMenu, isFxInput, isInput, isPasswordInput, isSelect, isTooltip, isHint, } from '../../lib/utils.js';
+import { withRenderEnvironment } from '../../lib/renderEnvironment/index.js';
+import { getStyles } from './Group.styles.js';
+var getFirstChild = function (children) {
+    if (!Array.isArray(children)) {
+        return children;
+    }
+    return children === null || children === void 0 ? void 0 : children[0];
+};
+var getLastChild = function (children) {
+    if (!Array.isArray(children)) {
+        return children;
+    }
+    var numberOfChildren = React.Children.count(children);
+    return children === null || children === void 0 ? void 0 : children[numberOfChildren - 1];
+};
+export var getButtonCorners = function (isFirstChild, isLastChild) {
+    if (isFirstChild && isLastChild) {
+        return {};
+    }
+    if (isFirstChild) {
+        return {
+            borderTopRightRadius: 0,
+            borderBottomRightRadius: 0,
+        };
+    }
+    if (isLastChild) {
+        return {
+            borderTopLeftRadius: 0,
+            borderBottomLeftRadius: 0,
+        };
+    }
+    return {
+        borderRadius: 0,
+    };
+};
+var tryPassCorners = function (child, isFirstChild, isLastChild) {
+    var corners = getButtonCorners(isFirstChild, isLastChild);
+    if (isButton(child) ||
+        isInput(child) ||
+        isFxInput(child) ||
+        isAutocomplete(child) ||
+        isPasswordInput(child) ||
+        isCurrencyInput(child) ||
+        isSelect(child) ||
+        isDropdown(child) ||
+        isDropdownMenu(child)) {
+        return React.cloneElement(child, { corners: __assign(__assign({}, corners), child.props.corners) });
+    }
+    return child;
+};
+var hasWidthInPercent = function (child) { return String(child.props.width).includes('%'); };
+export var GroupDataTids = {
+    root: 'Group__root',
+};
+/**
+ *  Компонент `Group` используется для создания логически сгруппированных элементов, выровненных по горизонтали.
+ *
+ *  Длина контейнера настраивается с помощью пропа `width`.
  */
-var Group = /** @class */function (_super) {
-  tslib_1.__extends(Group, _super);
-  function Group() {
-    return _super !== null && _super.apply(this, arguments) || this;
-  }
-  Group.prototype.render = function () {
-    var _a;
-    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;
-      }
-    });
-    var rootCss = Emotion_1.cx(Group_module_less_1["default"].root, (_a = {}, _a[Group_module_less_1["default"].hasWidth] = this.props.width !== undefined, _a));
-    return React.createElement("span", { className: rootCss, style: style }, React.Children.map(this.props.children, function (child) {
-      var _a, _b;
-      if (!child || !React.isValidElement(child)) {
-        return null;
-      }
-      var childProps = child.props;
-      var wrapCss = Emotion_1.cx((_a = {},
-      _a[Group_module_less_1["default"].wrap] = true,
-      _a[Group_module_less_1["default"].fixed] = !childProps.mainInGroup,
-      _a[Group_module_less_1["default"].stretch] = !!childProps.mainInGroup,
-      _a));
-      var itemCss = Emotion_1.cx((_b = {},
-      _b[Group_module_less_1["default"].item] = true,
-      _b[Group_module_less_1["default"].itemFirst] = child === first,
-      _b));
-      var corners = 0;
-      if (child !== first) {
-        corners |= Corners_1["default"].TOP_LEFT | Corners_1["default"].BOTTOM_LEFT;
-      }
-      if (child !== last) {
-        corners |= Corners_1["default"].TOP_RIGHT | Corners_1["default"].BOTTOM_RIGHT;
-      }
-      var width = childProps.width;
-      if (childProps.mainInGroup) {
-        width = '100%';
-      }
-      var cloneProps = {
-        width: width,
-        corners: corners };
-
-      if (!Button_1.isButton(child)) {
-        delete cloneProps.corners;
-      }
-      child = React.cloneElement(child, cloneProps);
-      return React.createElement("div", { className: wrapCss },
-      React.createElement("div", { className: itemCss }, child));
-    }));
-  };
-  Group.__KONTUR_REACT_UI__ = 'Group';
-  Group.propTypes = {
-    width: PropTypes.oneOfType([PropTypes.number, PropTypes.string]) };
-
-  return Group;
-}(React.Component);
-exports["default"] = Group;
+var Group = /** @class */ (function (_super) {
+    __extends(Group, _super);
+    function Group() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this.renderChild = function (child, isFirstChild, isLastChild, isWidthInPercent) {
+            var _a, _b;
+            return (React.createElement("div", { className: _this.cx((_a = {},
+                    _a[_this.styles.fixed()] = !isWidthInPercent,
+                    _a[_this.styles.stretch()] = isWidthInPercent,
+                    _a)) },
+                React.createElement("div", { className: _this.cx((_b = {},
+                        _b[_this.styles.item()] = true,
+                        _b[_this.styles.itemFirst()] = isFirstChild,
+                        _b)) }, tryPassCorners(child, isFirstChild, isLastChild))));
+        };
+        return _this;
+    }
+    Group.prototype.render = function () {
+        var _this = this;
+        var style = {
+            width: this.props.width,
+        };
+        var childrenArray = React.Children.toArray(this.props.children);
+        var firstChild = getFirstChild(childrenArray);
+        var lastChild = getLastChild(childrenArray);
+        this.styles = getStyles(this.emotion);
+        return (React.createElement(CommonWrapper, __assign({ rootNodeRef: this.setRootNode }, this.props),
+            React.createElement("span", { "data-tid": GroupDataTids.root, className: this.styles.root(), style: style }, React.Children.map(childrenArray, function (child) {
+                if (!child || !React.isValidElement(child)) {
+                    return null;
+                }
+                var isFirstChild = child === firstChild;
+                var isLastChild = child === lastChild;
+                if (isHint(child) || isTooltip(child)) {
+                    return _this.renderWrappedChildren(child, isFirstChild, isLastChild);
+                }
+                return _this.renderChild(child, isFirstChild, isLastChild, hasWidthInPercent(child));
+            }))));
+    };
+    Group.prototype.renderWrappedChildren = function (parent, isParentFirst, isParentLast) {
+        var _a;
+        var _this = this;
+        var shouldStretchParent = false;
+        var nestedChildren = React.Children.toArray(parent.props.children);
+        var modifiedChildren = nestedChildren.map(function (nestedChild, index) {
+            if (!nestedChild || !React.isValidElement(nestedChild)) {
+                return null;
+            }
+            var isFirstChild = isParentFirst && index === 0;
+            var isLastChild = isParentLast && index === nestedChildren.length - 1;
+            if (hasWidthInPercent(nestedChild)) {
+                shouldStretchParent = true;
+            }
+            return _this.renderChild(nestedChild, isFirstChild, isLastChild, hasWidthInPercent(nestedChild));
+        });
+        var wrappedChildren = (React.createElement("div", { className: this.cx(this.styles.wrappedChildren(), (_a = {}, _a[this.styles.stretch()] = shouldStretchParent, _a)) }, modifiedChildren));
+        return React.cloneElement(parent, {
+            children: wrappedChildren,
+        });
+    };
+    Group.__KONTUR_REACT_UI__ = 'Group';
+    Group.displayName = 'Group';
+    Group = __decorate([
+        withRenderEnvironment,
+        rootNode
+    ], Group);
+    return Group;
+}(React.Component));
+export { Group };
+//# sourceMappingURL=Group.js.map

package/components/Group/Group.js.map

@@ -1 +1 @@
-{"version":3,"file":"Group.js","sourceRoot":"","sources":["Group.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"Group.js","sourceRoot":"","sources":["../../../components/Group/Group.tsx"],"names":[],"mappings":"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","sourcesContent":["import React from 'react';\nimport type { Emotion } from '@emotion/css/create-instance';\n\nimport type { CommonProps } from '../../internal/CommonWrapper/index.js';\nimport { CommonWrapper } from '../../internal/CommonWrapper/index.js';\nimport type { TGetRootNode, TSetRootNode } from '../../lib/rootNode/index.js';\nimport { rootNode } from '../../lib/rootNode/index.js';\nimport {\n  isButton,\n  isAutocomplete,\n  isCurrencyInput,\n  isDropdown,\n  isDropdownMenu,\n  isFxInput,\n  isInput,\n  isPasswordInput,\n  isSelect,\n  isTooltip,\n  isHint,\n} from '../../lib/utils.js';\nimport { withRenderEnvironment } from '../../lib/renderEnvironment/index.js';\n\nimport { getStyles } from './Group.styles.js';\n\nexport interface GroupProps extends CommonProps {\n  /** Задает длину компонента Group. */\n  width?: React.CSSProperties['width'];\n}\n\ninterface GroupChildProps extends CommonProps {\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 tryPassCorners = (child: React.ReactNode, isFirstChild: boolean, isLastChild: boolean) => {\n  const corners = getButtonCorners(isFirstChild, isLastChild);\n\n  if (\n    isButton(child) ||\n    isInput(child) ||\n    isFxInput(child) ||\n    isAutocomplete(child) ||\n    isPasswordInput(child) ||\n    isCurrencyInput(child) ||\n    isSelect(child) ||\n    isDropdown(child) ||\n    isDropdownMenu(child)\n  ) {\n    return React.cloneElement<(typeof child)['props']>(child, { corners: { ...corners, ...child.props.corners } });\n  }\n\n  return child;\n};\n\nconst hasWidthInPercent = (child: React.ReactElement<GroupChildProps>) => String(child.props.width).includes('%');\n\nexport const GroupDataTids = {\n  root: 'Group__root',\n} as const;\n\n/**\n *  Компонент `Group` используется для создания логически сгруппированных элементов, выровненных по горизонтали.\n *\n *  Длина контейнера настраивается с помощью пропа `width`.\n */\n@withRenderEnvironment\n@rootNode\nexport class Group extends React.Component<GroupProps> {\n  public static __KONTUR_REACT_UI__ = 'Group';\n  public static displayName = 'Group';\n\n  public getRootNode!: TGetRootNode;\n  private setRootNode!: TSetRootNode;\n  private emotion!: Emotion;\n  private cx!: Emotion['cx'];\n  private styles!: ReturnType<typeof getStyles>;\n\n  public render(): React.JSX.Element {\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    this.styles = getStyles(this.emotion);\n\n    return (\n      <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>\n        <span data-tid={GroupDataTids.root} className={this.styles.root()} style={style}>\n          {React.Children.map(childrenArray, (child) => {\n            if (!child || !React.isValidElement<GroupChildProps>(child)) {\n              return null;\n            }\n\n            const isFirstChild = child === firstChild;\n            const isLastChild = child === lastChild;\n\n            if (isHint(child) || isTooltip(child)) {\n              return this.renderWrappedChildren(child, isFirstChild, isLastChild);\n            }\n\n            return this.renderChild(child, isFirstChild, isLastChild, hasWidthInPercent(child));\n          })}\n        </span>\n      </CommonWrapper>\n    );\n  }\n\n  private renderChild = (\n    child: React.ReactNode,\n    isFirstChild: boolean,\n    isLastChild: boolean,\n    isWidthInPercent: boolean,\n  ) => (\n    <div\n      className={this.cx({\n        [this.styles.fixed()]: !isWidthInPercent,\n        [this.styles.stretch()]: isWidthInPercent,\n      })}\n    >\n      <div\n        className={this.cx({\n          [this.styles.item()]: true,\n          [this.styles.itemFirst()]: isFirstChild,\n        })}\n      >\n        {tryPassCorners(child, isFirstChild, isLastChild)}\n      </div>\n    </div>\n  );\n\n  private renderWrappedChildren(\n    parent: React.ReactElement<GroupChildProps>,\n    isParentFirst: boolean,\n    isParentLast: boolean,\n  ): React.ReactNode {\n    let shouldStretchParent = false;\n    const nestedChildren = React.Children.toArray(parent.props.children);\n\n    const modifiedChildren = nestedChildren.map((nestedChild, index) => {\n      if (!nestedChild || !React.isValidElement<GroupChildProps>(nestedChild)) {\n        return null;\n      }\n\n      const isFirstChild = isParentFirst && index === 0;\n      const isLastChild = isParentLast && index === nestedChildren.length - 1;\n      if (hasWidthInPercent(nestedChild)) {\n        shouldStretchParent = true;\n      }\n\n      return this.renderChild(nestedChild, isFirstChild, isLastChild, hasWidthInPercent(nestedChild));\n    });\n\n    const wrappedChildren = (\n      <div className={this.cx(this.styles.wrappedChildren(), { [this.styles.stretch()]: shouldStretchParent })}>\n        {modifiedChildren}\n      </div>\n    );\n\n    return React.cloneElement<GroupChildProps>(parent, {\n      children: wrappedChildren,\n    });\n  }\n}\n"]}