npm - @skbkontur/react-ui - Versions diffs - 6.4.7-9ac75.0 → 6.4.7 - Mend

@skbkontur/react-ui 6.4.7-9ac75.0 → 6.4.7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (914) hide show

package/components/GlobalLoader/GlobalLoaderView.styles.js ADDED Viewed

@@ -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 ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"GlobalLoaderView.styles.js","sourceRoot":"","sources":["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/Group/Group.d.ts CHANGED Viewed

@@ -17,6 +17,9 @@ export declare class Group extends React.Component<GroupProps> {
     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 CHANGED Viewed

@@ -32,10 +32,10 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import React from 'react';
 import { CommonWrapper } from '../../internal/CommonWrapper/index.js';
-import { cx } from '../../lib/cx.js';
+import { withRenderEnvironment } from '../../lib/renderEnvironment/index.js';
 import { rootNode } from '../../lib/rootNode/index.js';
 import { isAutocomplete, isButton, isCurrencyInput, isDropdown, isDropdownMenu, isFxInput, isHint, isInput, isPasswordInput, isSelect, isTooltip, isTimePicker, } from '../../lib/utils.js';
-import { styles } from './Group.css.js';
+import { getStyles } from './Group.styles.js';
 var getFirstChild = function (children) {
     if (!Array.isArray(children)) {
         return children;
@@ -98,13 +98,13 @@ var Group = /** @class */ (function (_super) {
         var _this = _super !== null && _super.apply(this, arguments) || this;
         _this.renderChild = function (child, isFirstChild, isLastChild, isWidthInPercent) {
             var _a, _b;
-            return (React.createElement("div", { className: cx((_a = {},
-                    _a[styles.fixed] = !isWidthInPercent,
-                    _a[styles.stretch] = isWidthInPercent,
+            return (React.createElement("div", { className: _this.cx((_a = {},
+                    _a[_this.styles.fixed()] = !isWidthInPercent,
+                    _a[_this.styles.stretch()] = isWidthInPercent,
                     _a)) },
-                React.createElement("div", { className: cx((_b = {},
-                        _b[styles.item] = true,
-                        _b[styles.itemFirst] = isFirstChild,
+                React.createElement("div", { className: _this.cx((_b = {},
+                        _b[_this.styles.item()] = true,
+                        _b[_this.styles.itemFirst()] = isFirstChild,
                         _b)) }, tryPassCorners(child, isFirstChild, isLastChild))));
         };
         return _this;
@@ -117,8 +117,9 @@ var Group = /** @class */ (function (_super) {
         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: styles.root, style: style }, React.Children.map(childrenArray, function (child) {
+            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;
                 }
@@ -146,7 +147,7 @@ var Group = /** @class */ (function (_super) {
             }
             return _this.renderChild(nestedChild, isFirstChild, isLastChild, hasWidthInPercent(nestedChild));
         });
-        var wrappedChildren = (React.createElement("div", { className: cx(styles.wrappedChildren, (_a = {}, _a[styles.stretch] = shouldStretchParent, _a)) }, modifiedChildren));
+        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,
         });
@@ -154,6 +155,7 @@ var Group = /** @class */ (function (_super) {
     Group.__KONTUR_REACT_UI__ = 'Group';
     Group.displayName = 'Group';
     Group = __decorate([
+        withRenderEnvironment,
         rootNode
     ], Group);
     return Group;

package/components/Group/Group.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Group.js","sourceRoot":"","sources":["Group.tsx"],"names":[],"mappings":"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","sourcesContent":["import React from 'react';\n\nimport type { CommonProps } from '../../internal/CommonWrapper/index.js';\nimport { CommonWrapper } from '../../internal/CommonWrapper/index.js';\nimport { cx } from '../../lib/cx.js';\nimport type { TGetRootNode, TSetRootNode } from '../../lib/rootNode/index.js';\nimport { rootNode } from '../../lib/rootNode/index.js';\nimport {\n isAutocomplete,\n isButton,\n isCurrencyInput,\n isDropdown,\n isDropdownMenu,\n isFxInput,\n isHint,\n isInput,\n isPasswordInput,\n isSelect,\n isTooltip,\n isTimePicker,\n} from '../../lib/utils.js';\nimport { styles } from './Group.css.js';\n\nexport interface GroupProps extends CommonProps {\n /** Ширина компонента. /\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 isTimePicker(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 Контейнер используется для создания логически сгруппированных элементов, выровненных по горизонтали.\n */\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\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\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 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={cx({\n [styles.fixed]: !isWidthInPercent,\n [styles.stretch]: isWidthInPercent,\n })}\n >\n <div\n className={cx({\n [styles.item]: true,\n [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={cx(styles.wrappedChildren, { [styles.stretch]: shouldStretchParent })}>{modifiedChildren}</div>\n );\n\n return React.cloneElement<GroupChildProps>(parent, {\n children: wrappedChildren,\n });\n }\n}\n"]}
1	+ {"version":3,"file":"Group.js","sourceRoot":"","sources":["Group.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { Emotion } from '@emotion/css/create-instance';\nimport React from 'react';\n\nimport type { CommonProps } from '../../internal/CommonWrapper/index.js';\nimport { CommonWrapper } from '../../internal/CommonWrapper/index.js';\nimport { withRenderEnvironment } from '../../lib/renderEnvironment/index.js';\nimport type { TGetRootNode, TSetRootNode } from '../../lib/rootNode/index.js';\nimport { rootNode } from '../../lib/rootNode/index.js';\nimport {\n isAutocomplete,\n isButton,\n isCurrencyInput,\n isDropdown,\n isDropdownMenu,\n isFxInput,\n isHint,\n isInput,\n isPasswordInput,\n isSelect,\n isTooltip,\n isTimePicker,\n} from '../../lib/utils.js';\nimport { getStyles } from './Group.styles.js';\n\nexport interface GroupProps extends CommonProps {\n /** Ширина компонента. /\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 isTimePicker(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 Контейнер используется для создания логически сгруппированных элементов, выровненных по горизонтали.\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"]}

package/components/Group/Group.styles.d.ts ADDED Viewed

@@ -0,0 +1,8 @@
+export declare const getStyles: import("../../lib/theming/Emotion.js").StylesGetter<{
+    root(): string;
+    wrappedChildren(): string;
+    fixed(): string;
+    stretch(): string;
+    item(): string;
+    itemFirst(): string;
+}>;

package/components/Group/Group.styles.js ADDED Viewed

@@ -0,0 +1,30 @@
+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 ({
+        root: function () {
+            return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      display: inline-flex;\n      line-height: normal;\n    "], ["\n      display: inline-flex;\n      line-height: normal;\n    "])));
+        },
+        wrappedChildren: function () {
+            return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n      display: flex;\n    "], ["\n      display: flex;\n    "])));
+        },
+        fixed: function () {
+            return css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n      flex-shrink: 0;\n      display: inline-block;\n    "], ["\n      flex-shrink: 0;\n      display: inline-block;\n    "])));
+        },
+        stretch: function () {
+            return css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n      flex-grow: 1;\n      flex-shrink: 1;\n    "], ["\n      flex-grow: 1;\n      flex-shrink: 1;\n    "])));
+        },
+        item: function () {
+            return css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n      margin-left: -1px;\n    "], ["\n      margin-left: -1px;\n    "])));
+        },
+        itemFirst: function () {
+            return css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n      margin-left: 0;\n    "], ["\n      margin-left: 0;\n    "])));
+        },
+    });
+});
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;
+//# sourceMappingURL=Group.styles.js.map

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

@@ -0,0 +1 @@

+ {"version":3,"file":"Group.styles.js","sourceRoot":"","sources":["Group.styles.ts"],"names":[],"mappings":";;;;AAEA,OAAO,EAAE,gBAAgB,EAAE,MAAM,8BAA8B,CAAC;AAEhE,MAAM,CAAC,IAAM,SAAS,GAAG,gBAAgB,CAAC,UAAC,EAAgB;QAAd,GAAG,SAAA;IAAgB,OAAA,CAAC;QAC/D,IAAI;YACF,OAAO,GAAG,oIAAA,iEAGT,KAAC;QACJ,CAAC;QAED,eAAe;YACb,OAAO,GAAG,iGAAA,8BAET,KAAC;QACJ,CAAC;QAED,KAAK;YACH,OAAO,GAAG,gIAAA,6DAGT,KAAC;QACJ,CAAC;QAED,OAAO;YACL,OAAO,GAAG,uHAAA,oDAGT,KAAC;QACJ,CAAC;QAED,IAAI;YACF,OAAO,GAAG,qGAAA,kCAET,KAAC;QACJ,CAAC;QAED,SAAS;YACP,OAAO,GAAG,kGAAA,+BAET,KAAC;QACJ,CAAC;KACF,CAAC;AAvC8D,CAuC9D,CAAC,CAAC","sourcesContent":["import type { Emotion } from '@emotion/css/create-instance';\n\nimport { memoizeGetStyles } from '../../lib/theming/Emotion.js';\n\nexport const getStyles = memoizeGetStyles(({ css }: Emotion) => ({\n root() {\n return css`\n display: inline-flex;\n line-height: normal;\n `;\n },\n\n wrappedChildren() {\n return css`\n display: flex;\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 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/Hint/Hint.d.ts CHANGED Viewed

@@ -53,6 +53,9 @@ export declare class Hint extends React.PureComponent<HintProps, HintState> impl
     private theme;
     getRootNode: TGetRootNode;
     private setRootNode;
+    private styles;
+    private emotion;
+    private cx;
     private globalObject;
     private disableAnimationsOnOpen;
     private popupRef;

package/components/Hint/Hint.js CHANGED Viewed

@@ -35,18 +35,13 @@ import { CommonWrapper } from '../../internal/CommonWrapper/index.js';
 import { DefaultPosition, Popup, PopupPinnablePositions } from '../../internal/Popup/index.js';
 import { createPropsGetter } from '../../lib/createPropsGetter.js';
 import { isTestEnv } from '../../lib/currentEnvironment.js';
-import { cx } from '../../lib/cx.js';
 import { withRenderEnvironment } from '../../lib/renderEnvironment/index.js';
 import { rootNode } from '../../lib/rootNode/index.js';
-import { memoizeTheme } from '../../lib/theming/memoizeTheme.js';
 import { ThemeContext } from '../../lib/theming/ThemeContext.js';
 import { ThemeFactory } from '../../lib/theming/ThemeFactory.js';
-import { styles } from './Hint.css.js';
+import { getStyles } from './Hint.styles.js';
 import { getShowDelay, HINT_DEFAULT_DELAY_BEFORE_SHOW, isShowDelaySkipped, markClosed, markDisposed, markOpened, } from './HintDelayController.js';
 var HINT_BORDER_COLOR = 'transparent';
-var getHintTheme = memoizeTheme(function (theme) {
-    return ThemeFactory.create({ popupMargin: theme.hintMargin, popupBorder: theme.hintBorder, popupBorderRadius: theme.hintBorderRadius }, theme);
-});
 var isPinnablePosition = function (position) {
     return PopupPinnablePositions.includes(position);
 };
@@ -143,9 +138,14 @@ var Hint = /** @class */ (function (_super) {
     };
     Hint.prototype.render = function () {
         var _this = this;
+        this.styles = getStyles(this.emotion);
         return (React.createElement(ThemeContext.Consumer, null, function (theme) {
             _this.theme = theme;
-            return React.createElement(ThemeContext.Provider, { value: getHintTheme(theme) }, _this.renderMain());
+            return (React.createElement(ThemeContext.Provider, { value: ThemeFactory.create({
+                    popupMargin: theme.hintMargin,
+                    popupBorder: theme.hintBorder,
+                    popupBorderRadius: theme.hintBorderRadius,
+                }, _this.theme) }, _this.renderMain()));
         }));
     };
     Hint.prototype.renderMain = function () {
@@ -165,9 +165,9 @@ var Hint = /** @class */ (function (_super) {
         }
         var maxWidth = this.getProps().maxWidth;
         var centerAlignPositions = ['top', 'top center', 'bottom', 'bottom center'];
-        var className = cx((_a = {},
-            _a[styles.content] = true,
-            _a[styles.contentCenter] = centerAlignPositions.includes(this.state.position),
+        var className = this.cx((_a = {},
+            _a[this.styles.content(this.theme)] = true,
+            _a[this.styles.contentCenter(this.theme)] = centerAlignPositions.includes(this.state.position),
             _a));
         return (React.createElement("div", { className: className, style: { maxWidth: maxWidth } }, this.props.text));
     };

package/components/Hint/Hint.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Hint.js","sourceRoot":"","sources":["Hint.tsx"],"names":[],"mappings":"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","sourcesContent":["import React from 'react';\n\nimport type { CommonProps } from '../../internal/CommonWrapper/index.js';\nimport { CommonWrapper } from '../../internal/CommonWrapper/index.js';\nimport { DefaultPosition, Popup, PopupPinnablePositions } from '../../internal/Popup/index.js';\nimport type {\n PopupPinnablePositionsType,\n PopupPositionsType,\n ShortPopupPositionsType,\n} from '../../internal/Popup/index.js';\nimport { createPropsGetter } from '../../lib/createPropsGetter.js';\nimport { isTestEnv } from '../../lib/currentEnvironment.js';\nimport { cx } from '../../lib/cx.js';\nimport type { GlobalObject, SafeTimer } from '../../lib/globalObject.js';\nimport type { InstanceWithAnchorElement } from '../../lib/InstanceWithAnchorElement.js';\nimport { withRenderEnvironment } from '../../lib/renderEnvironment/index.js';\nimport type { TGetRootNode, TSetRootNode } from '../../lib/rootNode/index.js';\nimport { rootNode } from '../../lib/rootNode/index.js';\nimport { memoizeTheme } from '../../lib/theming/memoizeTheme.js';\nimport type { Theme } from '../../lib/theming/Theme.js';\nimport { ThemeContext } from '../../lib/theming/ThemeContext.js';\nimport { ThemeFactory } from '../../lib/theming/ThemeFactory.js';\nimport type { MouseEventType } from '../../typings/event-types.js';\nimport type { Nullable } from '../../typings/utility-types.js';\nimport { styles } from './Hint.css.js';\nimport {\n getShowDelay,\n HINT_DEFAULT_DELAY_BEFORE_SHOW,\n isShowDelaySkipped,\n markClosed,\n markDisposed,\n markOpened,\n} from './HintDelayController.js';\n\nconst HINT_BORDER_COLOR = 'transparent';\n\nconst getHintTheme = memoizeTheme((theme: Theme) =>\n ThemeFactory.create(\n { popupMargin: theme.hintMargin, popupBorder: theme.hintBorder, popupBorderRadius: theme.hintBorderRadius },\n theme,\n ),\n);\n\nconst isPinnablePosition = (position: PopupPositionsType): position is PopupPinnablePositionsType => {\n return (PopupPinnablePositions as readonly PopupPositionsType[]).includes(position);\n};\n\nexport interface HintProps extends CommonProps {\n /** @ignore /\n children?: React.ReactNode;\n\n /* Текст подсказки. /\n text: React.ReactNode;\n\n /* Максимальная ширина подсказки. /\n maxWidth?: React.CSSProperties['maxWidth'];\n\n /* Приоритетное расположение подсказки относительно текста. /\n pos?: ShortPopupPositionsType \| PopupPinnablePositionsType;\n\n /* Список позиций, которые может занимать подсказка. В списке обязательно должна быть позиция из пропа `pos`. /\n allowedPositions?: PopupPinnablePositionsType[];\n\n /* Переводит отображение подсказки в ручной режим, где состояние контролируется значением пропа `opened`. /\n manual?: boolean;\n\n /* Открывает подсказку. Работает только при `manual=true`. /\n opened?: boolean;\n\n /* Отключает анимацию. /\n disableAnimations?: boolean;\n\n /* Задержка в миллисекундах до появления подсказки по наведению.\n * После показа одной подсказки следующие в серии открываются без задержки и анимации\n * в течение примерно 500 мс после ухода курсора.\n * @default 400 /\n delayBeforeShow?: number;\n\n /* Оборачивает вложенные элементы в `<span />`.\n \n _Примечание_: при двух и более вложенных элементах обёртка будет добавлена автоматически. /\n useWrapper?: boolean;\n\n /* Вызывается при наведении курсора (событие `onmouseenter`). /\n onMouseEnter?: (event: MouseEventType) => void;\n\n /* Вызывается при уходе курсора с объекта (событие `onmouseleave`). /\n onMouseLeave?: (event: MouseEventType) => void;\n}\n\nexport interface HintState {\n opened: boolean;\n position: PopupPinnablePositionsType;\n}\n\ntype DefaultProps = Required<\n Pick<HintProps, 'manual' \| 'opened' \| 'maxWidth' \| 'disableAnimations' \| 'useWrapper' \| 'delayBeforeShow'>\n>;\n\n/* Краткая подсказка, которая объясняет контрол, иконку и добавляет контекста.\n * Всплывает при наведении на элемент. */\n@withRenderEnvironment\n@rootNode\nexport class Hint extends React.PureComponent<HintProps, HintState> implements InstanceWithAnchorElement {\n public static __KONTUR_REACT_UI__ = 'Hint';\n public static displayName = 'Hint';\n\n public static defaultProps: DefaultProps = {\n manual: false,\n opened: false,\n maxWidth: 200,\n disableAnimations: isTestEnv,\n useWrapper: false,\n delayBeforeShow: HINT_DEFAULT_DELAY_BEFORE_SHOW,\n };\n\n private getProps = createPropsGetter(Hint.defaultProps);\n\n public state: HintState = {\n opened: this.getProps().manual ? !!this.getProps().opened : false,\n position: DefaultPosition,\n };\n\n private timer: SafeTimer;\n private theme!: Theme;\n public getRootNode!: TGetRootNode;\n private setRootNode!: TSetRootNode;\n private globalObject!: GlobalObject;\n private disableAnimationsOnOpen = false;\n\n private popupRef = React.createRef<Popup>();\n\n public getAllowedPositions(): string[] \| undefined {\n return this.props.allowedPositions;\n }\n\n public componentDidUpdate(prevProps: HintProps) {\n const { opened, manual } = this.getProps();\n if (!manual) {\n return;\n }\n this.clearTimer();\n if (opened !== prevProps.opened) {\n this.setState({ opened: !!opened });\n }\n }\n\n public componentWillUnmount() {\n this.closeByHover(true);\n }\n\n public render(): React.JSX.Element {\n return (\n <ThemeContext.Consumer>\n {(theme) => {\n this.theme = theme;\n return <ThemeContext.Provider value={getHintTheme(theme)}>{this.renderMain()}</ThemeContext.Provider>;\n }}\n </ThemeContext.Consumer>\n );\n }\n\n public renderMain(): React.JSX.Element {\n const { disableAnimations, useWrapper } = this.getProps();\n\n return (\n <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>\n <Popup\n hasPin={false}\n opened={this.state.opened}\n anchorElement={this.props.children}\n positions={this.getPositions()}\n pos={this.props.pos}\n backgroundColor={this.theme.hintBgColor}\n borderColor={HINT_BORDER_COLOR}\n onPositionChange={(position) => {\n if (isPinnablePosition(position)) {\n this.setState({ position });\n }\n }}\n disableAnimations={disableAnimations \|\| this.disableAnimationsOnOpen}\n onMouseEnter={this.handleMouseEnter}\n onMouseLeave={this.handleMouseLeave}\n useWrapper={useWrapper}\n ref={this.popupRef}\n withoutMobile\n >\n {this.renderContent()}\n </Popup>\n </CommonWrapper>\n );\n }\n\n public getAnchorElement = (): Nullable<Element> => {\n return this.popupRef.current?.anchorElement;\n };\n\n private renderContent() {\n if (!this.props.text) {\n return null;\n }\n\n const { maxWidth } = this.getProps();\n const centerAlignPositions = ['top', 'top center', 'bottom', 'bottom center'];\n const className = cx({\n [styles.content]: true,\n [styles.contentCenter]: centerAlignPositions.includes(this.state.position),\n });\n return (\n <div className={className} style={{ maxWidth }}>\n {this.props.text}\n </div>\n );\n }\n\n private getPositions = (): PopupPinnablePositionsType[] \| undefined => {\n return this.props.allowedPositions;\n };\n\n private handleMouseEnter = (e: MouseEventType) => {\n if (!this.getProps().manual && !this.timer && !this.state.opened) {\n const delay = getShowDelay(this.globalObject, this.getProps().delayBeforeShow);\n if (delay > 0) {\n this.timer = this.globalObject.setTimeout?.(this.open, delay) ?? null;\n } else {\n this.open();\n }\n }\n\n if (this.props.onMouseEnter) {\n this.props.onMouseEnter(e);\n }\n };\n\n private handleMouseLeave = (e: MouseEventType) => {\n this.closeByHover();\n\n if (this.props.onMouseLeave) {\n this.props.onMouseLeave(e);\n }\n };\n\n private open = () => {\n this.clearTimer();\n this.disableAnimationsOnOpen = isShowDelaySkipped(this.globalObject);\n this.setState({ opened: true });\n markOpened(this.globalObject);\n };\n\n private closeByHover = (isUnmount = false) => {\n if (this.getProps().manual) {\n this.clearTimer();\n return;\n }\n\n const wasOpened = this.state.opened;\n\n this.clearTimer();\n\n if (!wasOpened) {\n return;\n }\n\n if (isUnmount) {\n markDisposed(this.globalObject);\n return;\n }\n\n this.setState({ opened: false });\n markClosed(this.globalObject);\n };\n\n private clearTimer = () => {\n if (this.timer) {\n this.globalObject.clearTimeout?.(this.timer);\n this.timer = null;\n }\n };\n}\n"]}
1	+ {"version":3,"file":"Hint.js","sourceRoot":"","sources":["Hint.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { Emotion } from '@emotion/css/create-instance';\nimport React from 'react';\n\nimport type { CommonProps } from '../../internal/CommonWrapper/index.js';\nimport { CommonWrapper } from '../../internal/CommonWrapper/index.js';\nimport { DefaultPosition, Popup, PopupPinnablePositions } from '../../internal/Popup/index.js';\nimport type {\n PopupPinnablePositionsType,\n PopupPositionsType,\n ShortPopupPositionsType,\n} from '../../internal/Popup/index.js';\nimport { createPropsGetter } from '../../lib/createPropsGetter.js';\nimport { isTestEnv } from '../../lib/currentEnvironment.js';\nimport type { GlobalObject, SafeTimer } from '../../lib/globalObject.js';\nimport type { InstanceWithAnchorElement } from '../../lib/InstanceWithAnchorElement.js';\nimport { withRenderEnvironment } from '../../lib/renderEnvironment/index.js';\nimport type { TGetRootNode, TSetRootNode } from '../../lib/rootNode/index.js';\nimport { rootNode } from '../../lib/rootNode/index.js';\nimport type { Theme } from '../../lib/theming/Theme.js';\nimport { ThemeContext } from '../../lib/theming/ThemeContext.js';\nimport { ThemeFactory } from '../../lib/theming/ThemeFactory.js';\nimport type { MouseEventType } from '../../typings/event-types.js';\nimport type { Nullable } from '../../typings/utility-types.js';\nimport { getStyles } from './Hint.styles.js';\nimport {\n getShowDelay,\n HINT_DEFAULT_DELAY_BEFORE_SHOW,\n isShowDelaySkipped,\n markClosed,\n markDisposed,\n markOpened,\n} from './HintDelayController.js';\n\nconst HINT_BORDER_COLOR = 'transparent';\n\nconst isPinnablePosition = (position: PopupPositionsType): position is PopupPinnablePositionsType => {\n return (PopupPinnablePositions as readonly PopupPositionsType[]).includes(position);\n};\n\nexport interface HintProps extends CommonProps {\n /** @ignore /\n children?: React.ReactNode;\n\n /* Текст подсказки. /\n text: React.ReactNode;\n\n /* Максимальная ширина подсказки. /\n maxWidth?: React.CSSProperties['maxWidth'];\n\n /* Приоритетное расположение подсказки относительно текста. /\n pos?: ShortPopupPositionsType \| PopupPinnablePositionsType;\n\n /* Список позиций, которые может занимать подсказка. В списке обязательно должна быть позиция из пропа `pos`. /\n allowedPositions?: PopupPinnablePositionsType[];\n\n /* Переводит отображение подсказки в ручной режим, где состояние контролируется значением пропа `opened`. /\n manual?: boolean;\n\n /* Открывает подсказку. Работает только при `manual=true`. /\n opened?: boolean;\n\n /* Отключает анимацию. /\n disableAnimations?: boolean;\n\n /* Задержка в миллисекундах до появления подсказки по наведению.\n * После показа одной подсказки следующие в серии открываются без задержки и анимации\n * в течение примерно 500 мс после ухода курсора.\n * @default 400 /\n delayBeforeShow?: number;\n\n /* Оборачивает вложенные элементы в `<span />`.\n \n _Примечание_: при двух и более вложенных элементах обёртка будет добавлена автоматически. /\n useWrapper?: boolean;\n\n /* Вызывается при наведении курсора (событие `onmouseenter`). /\n onMouseEnter?: (event: MouseEventType) => void;\n\n /* Вызывается при уходе курсора с объекта (событие `onmouseleave`). /\n onMouseLeave?: (event: MouseEventType) => void;\n}\n\nexport interface HintState {\n opened: boolean;\n position: PopupPinnablePositionsType;\n}\n\ntype DefaultProps = Required<\n Pick<HintProps, 'manual' \| 'opened' \| 'maxWidth' \| 'disableAnimations' \| 'useWrapper' \| 'delayBeforeShow'>\n>;\n\n/* Краткая подсказка, которая объясняет контрол, иконку и добавляет контекста.\n * Всплывает при наведении на элемент. */\n@withRenderEnvironment\n@rootNode\nexport class Hint extends React.PureComponent<HintProps, HintState> implements InstanceWithAnchorElement {\n public static __KONTUR_REACT_UI__ = 'Hint';\n public static displayName = 'Hint';\n\n public static defaultProps: DefaultProps = {\n manual: false,\n opened: false,\n maxWidth: 200,\n disableAnimations: isTestEnv,\n useWrapper: false,\n delayBeforeShow: HINT_DEFAULT_DELAY_BEFORE_SHOW,\n };\n\n private getProps = createPropsGetter(Hint.defaultProps);\n\n public state: HintState = {\n opened: this.getProps().manual ? !!this.getProps().opened : false,\n position: DefaultPosition,\n };\n\n private timer: SafeTimer;\n private theme!: Theme;\n public getRootNode!: TGetRootNode;\n private setRootNode!: TSetRootNode;\n private styles!: ReturnType<typeof getStyles>;\n private emotion!: Emotion;\n private cx!: Emotion['cx'];\n private globalObject!: GlobalObject;\n private disableAnimationsOnOpen = false;\n\n private popupRef = React.createRef<Popup>();\n\n public getAllowedPositions(): string[] \| undefined {\n return this.props.allowedPositions;\n }\n\n public componentDidUpdate(prevProps: HintProps) {\n const { opened, manual } = this.getProps();\n if (!manual) {\n return;\n }\n this.clearTimer();\n if (opened !== prevProps.opened) {\n this.setState({ opened: !!opened });\n }\n }\n\n public componentWillUnmount() {\n this.closeByHover(true);\n }\n\n public render(): React.JSX.Element {\n this.styles = getStyles(this.emotion);\n\n return (\n <ThemeContext.Consumer>\n {(theme) => {\n this.theme = theme;\n return (\n <ThemeContext.Provider\n value={ThemeFactory.create(\n {\n popupMargin: theme.hintMargin,\n popupBorder: theme.hintBorder,\n popupBorderRadius: theme.hintBorderRadius,\n },\n this.theme,\n )}\n >\n {this.renderMain()}\n </ThemeContext.Provider>\n );\n }}\n </ThemeContext.Consumer>\n );\n }\n\n public renderMain(): React.JSX.Element {\n const { disableAnimations, useWrapper } = this.getProps();\n\n return (\n <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>\n <Popup\n hasPin={false}\n opened={this.state.opened}\n anchorElement={this.props.children}\n positions={this.getPositions()}\n pos={this.props.pos}\n backgroundColor={this.theme.hintBgColor}\n borderColor={HINT_BORDER_COLOR}\n onPositionChange={(position) => {\n if (isPinnablePosition(position)) {\n this.setState({ position });\n }\n }}\n disableAnimations={disableAnimations \|\| this.disableAnimationsOnOpen}\n onMouseEnter={this.handleMouseEnter}\n onMouseLeave={this.handleMouseLeave}\n useWrapper={useWrapper}\n ref={this.popupRef}\n withoutMobile\n >\n {this.renderContent()}\n </Popup>\n </CommonWrapper>\n );\n }\n\n public getAnchorElement = (): Nullable<Element> => {\n return this.popupRef.current?.anchorElement;\n };\n\n private renderContent() {\n if (!this.props.text) {\n return null;\n }\n\n const { maxWidth } = this.getProps();\n const centerAlignPositions = ['top', 'top center', 'bottom', 'bottom center'];\n const className = this.cx({\n [this.styles.content(this.theme)]: true,\n [this.styles.contentCenter(this.theme)]: centerAlignPositions.includes(this.state.position),\n });\n return (\n <div className={className} style={{ maxWidth }}>\n {this.props.text}\n </div>\n );\n }\n\n private getPositions = (): PopupPinnablePositionsType[] \| undefined => {\n return this.props.allowedPositions;\n };\n\n private handleMouseEnter = (e: MouseEventType) => {\n if (!this.getProps().manual && !this.timer && !this.state.opened) {\n const delay = getShowDelay(this.globalObject, this.getProps().delayBeforeShow);\n if (delay > 0) {\n this.timer = this.globalObject.setTimeout?.(this.open, delay) ?? null;\n } else {\n this.open();\n }\n }\n\n if (this.props.onMouseEnter) {\n this.props.onMouseEnter(e);\n }\n };\n\n private handleMouseLeave = (e: MouseEventType) => {\n this.closeByHover();\n\n if (this.props.onMouseLeave) {\n this.props.onMouseLeave(e);\n }\n };\n\n private open = () => {\n this.clearTimer();\n this.disableAnimationsOnOpen = isShowDelaySkipped(this.globalObject);\n this.setState({ opened: true });\n markOpened(this.globalObject);\n };\n\n private closeByHover = (isUnmount = false) => {\n if (this.getProps().manual) {\n this.clearTimer();\n return;\n }\n\n const wasOpened = this.state.opened;\n\n this.clearTimer();\n\n if (!wasOpened) {\n return;\n }\n\n if (isUnmount) {\n markDisposed(this.globalObject);\n return;\n }\n\n this.setState({ opened: false });\n markClosed(this.globalObject);\n };\n\n private clearTimer = () => {\n if (this.timer) {\n this.globalObject.clearTimeout?.(this.timer);\n this.timer = null;\n }\n };\n}\n"]}

package/components/Hint/Hint.styles.d.ts ADDED Viewed

@@ -0,0 +1,5 @@
+import type { Theme } from '../../lib/theming/Theme.js';
+export declare const getStyles: import("../../lib/theming/Emotion.js").StylesGetter<{
+    content(t: Theme): string;
+    contentCenter(t: Theme): string;
+}>;

package/components/Hint/Hint.styles.js ADDED Viewed

@@ -0,0 +1,18 @@
+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 ({
+        content: function (t) {
+            return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      box-sizing: border-box;\n      color: ", ";\n      font-size: ", ";\n      line-height: ", ";\n      max-width: ", ";\n      overflow-wrap: break-word;\n      padding: ", " ", ";\n      word-break: break-word;\n      word-wrap: break-word;\n    "], ["\n      box-sizing: border-box;\n      color: ", ";\n      font-size: ", ";\n      line-height: ", ";\n      max-width: ", ";\n      overflow-wrap: break-word;\n      padding: ", " ", ";\n      word-break: break-word;\n      word-wrap: break-word;\n    "])), t.hintColor, t.hintFontSize, t.hintLineHeight, t.hintMaxWidth, t.hintPaddingY, t.hintPaddingX);
+        },
+        contentCenter: function (t) {
+            return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n      text-align: ", ";\n    "], ["\n      text-align: ", ";\n    "])), t.hintTextAlign);
+        },
+    });
+});
+var templateObject_1, templateObject_2;
+//# sourceMappingURL=Hint.styles.js.map

package/components/Hint/Hint.styles.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"Hint.styles.js","sourceRoot":"","sources":["Hint.styles.ts"],"names":[],"mappings":";;;;AAEA,OAAO,EAAE,gBAAgB,EAAE,MAAM,8BAA8B,CAAC;AAGhE,MAAM,CAAC,IAAM,SAAS,GAAG,gBAAgB,CAAC,UAAC,EAAgB;QAAd,GAAG,SAAA;IAAgB,OAAA,CAAC;QAC/D,OAAO,YAAC,CAAQ;YACd,OAAO,GAAG,kUAAA,gDAEC,EAAW,sBACP,EAAc,wBACZ,EAAgB,sBAClB,EAAc,sDAEhB,EAAc,GAAI,EAAc,sEAG5C,KARU,CAAC,CAAC,SAAS,EACP,CAAC,CAAC,YAAY,EACZ,CAAC,CAAC,cAAc,EAClB,CAAC,CAAC,YAAY,EAEhB,CAAC,CAAC,YAAY,EAAI,CAAC,CAAC,YAAY,EAG3C;QACJ,CAAC;QAED,aAAa,YAAC,CAAQ;YACpB,OAAO,GAAG,oGAAA,sBACM,EAAe,SAC9B,KADe,CAAC,CAAC,aAAa,EAC7B;QACJ,CAAC;KACF,CAAC;AApB8D,CAoB9D,CAAC,CAAC","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 content(t: Theme) {\n return css`\n box-sizing: border-box;\n color: ${t.hintColor};\n font-size: ${t.hintFontSize};\n line-height: ${t.hintLineHeight};\n max-width: ${t.hintMaxWidth};\n overflow-wrap: break-word;\n padding: ${t.hintPaddingY} ${t.hintPaddingX};\n word-break: break-word;\n word-wrap: break-word;\n `;\n },\n\n contentCenter(t: Theme) {\n return css`\n text-align: ${t.hintTextAlign};\n `;\n },\n}));\n"]}

package/components/Input/Input.d.ts CHANGED Viewed

@@ -109,6 +109,9 @@ export declare class Input extends React.Component<InputProps, InputState> {
     private getProps;
     private selectAllId;
     private globalObject;
+    private emotion;
+    private cx;
+    private styles;
     private theme;
     input: HTMLInputElement | null;
     labelRef: React.RefObject<HTMLLabelElement | null>;
@@ -116,6 +119,7 @@ export declare class Input extends React.Component<InputProps, InputState> {
     private setRootNode;
     private getClearCrossShowed;
     state: InputState;
+    componentDidUpdate(prevProps: InputProps): void;
     componentWillUnmount(): void;
     /** Программно устанавливает фокус на поле.
      * Появляется фокусная рамка, элемент получает клавиатурные события и воспринимается как текущий элемент для чтения скринридерами.

package/components/Input/Input.js CHANGED Viewed

@@ -50,14 +50,13 @@ import { FocusControlWrapper } from '../../internal/FocusControlWrapper/index.js
 import { RenderLayer } from '../../internal/RenderLayer/index.js';
 import { blink } from '../../lib/blink.js';
 import { createPropsGetter } from '../../lib/createPropsGetter.js';
-import { cx } from '../../lib/cx.js';
 import { isKeyBackspace, isKeyDelete, someKeys } from '../../lib/events/keyboard/identifiers.js';
 import { withRenderEnvironment } from '../../lib/renderEnvironment/index.js';
 import { getRootNode, rootNode } from '../../lib/rootNode/index.js';
 import { withSize } from '../../lib/size/SizeDecorator.js';
 import { ThemeContext } from '../../lib/theming/ThemeContext.js';
 import { catchUnreachableWarning } from '../../lib/typeGuards.js';
-import { styles } from './Input.css.js';
+import { getStyles } from './Input.styles.js';
 import { InputLayout } from './InputLayout/InputLayout.js';
 export var inputTypes = ['password', 'text', 'number', 'tel', 'search', 'time', 'date', 'url', 'email'];
 export var selectionAllowedTypes = ['text', 'password', 'tel', 'search', 'url'];
@@ -100,7 +99,7 @@ var Input = /** @class */ (function (_super) {
         _this.getClearCrossShowed = function (_a) {
             var _b;
             var focused = _a.focused, hovered = _a.hovered, hasInitialValue = _a.hasInitialValue;
-            if (_this.props.disabled) {
+            if (_this.props.disabled || _this.props.readOnly) {
                 return false;
             }
             return calculateClearCrossShowedState({
@@ -152,13 +151,13 @@ var Input = /** @class */ (function (_super) {
             var onMouseEnter = props.onMouseEnter, onMouseLeave = props.onMouseLeave, onMouseOver = props.onMouseOver, onKeyDown = props.onKeyDown, onKeyPress = props.onKeyPress, onValueChange = props.onValueChange, width = props.width, error = props.error, role = props.role, warning = props.warning, leftIcon = props.leftIcon, rightIcon = props.rightIcon, borderless = props.borderless, value = props.value, align = props.align, type = props.type, size = props.size, placeholder = props.placeholder, selectAllOnFocus = props.selectAllOnFocus, showLengthCounter = props.showLengthCounter, lengthCounter = props.lengthCounter, counterHelp = props.counterHelp, disabled = props.disabled, onUnexpectedInput = props.onUnexpectedInput, prefix = props.prefix, suffix = props.suffix, corners = props.corners, ariaDescribedby = props["aria-describedby"], ariaControls = props["aria-controls"], ariaLabel = props["aria-label"], element = props.element, showClearIcon = props.showClearIcon, rest = __rest(props, ["onMouseEnter", "onMouseLeave", "onMouseOver", "onKeyDown", "onKeyPress", "onValueChange", "width", "error", "role", "warning", "leftIcon", "rightIcon", "borderless", "value", "align", "type", "size", "placeholder", "selectAllOnFocus", "showLengthCounter", "lengthCounter", "counterHelp", "disabled", "onUnexpectedInput", "prefix", "suffix", "corners", 'aria-describedby', 'aria-controls', 'aria-label', "element", "showClearIcon"]);
             var _c = _this.state, focused = _c.focused, isCounterVisible = _c.isCounterVisible;
             var labelProps = {
-                className: cx(styles.root, _this.getSizeClassName(), (_a = {},
-                    _a[styles.focus] = focused && !warning && !error,
-                    _a[styles.hovering] = !focused && !disabled && !warning && !error && !borderless,
-                    _a[styles.borderless] = borderless && !focused,
-                    _a[styles.disabled] = disabled,
-                    _a[styles.warning] = warning,
-                    _a[styles.error] = error,
+                className: _this.cx(_this.styles.root(_this.theme), _this.getSizeClassName(), (_a = {},
+                    _a[_this.styles.focus(_this.theme)] = focused && !warning && !error,
+                    _a[_this.styles.hovering(_this.theme)] = !focused && !disabled && !warning && !error && !borderless,
+                    _a[_this.styles.borderless()] = borderless && !focused,
+                    _a[_this.styles.disabled(_this.theme)] = disabled,
+                    _a[_this.styles.warning(_this.theme)] = warning,
+                    _a[_this.styles.error(_this.theme)] = error,
                     _a)),
                 'aria-controls': ariaControls,
                 style: __assign({ width: width }, corners),
@@ -167,9 +166,9 @@ var Input = /** @class */ (function (_super) {
                 onMouseOver: onMouseOver,
                 ref: _this.labelRef,
             };
-            var inputProps = __assign(__assign({}, rest), { className: cx(styles.input, (_b = {},
-                    _b[styles.inputFocus] = focused,
-                    _b[styles.inputDisabled] = disabled,
+            var inputProps = __assign(__assign({}, rest), { className: _this.cx(_this.styles.input(_this.theme), (_b = {},
+                    _b[_this.styles.inputFocus(_this.theme)] = focused,
+                    _b[_this.styles.inputDisabled(_this.theme)] = disabled,
                     _b)), value: value, role: role, onChange: _this.handleChange, onFocus: _this.handleFocus, onKeyDown: _this.handleKeyDown, onKeyPress: _this.handleKeyPress, onBlur: _this.handleBlur, style: { textAlign: align }, ref: _this.refInput, type: type, placeholder: placeholder, disabled: disabled, 'aria-describedby': ariaDescribedby, 'aria-label': ariaLabel });
             var input = (React.createElement(FocusControlWrapper, { onBlurWhenDisabled: _this.resetFocus }, _this.getInput(inputProps)));
             var getRightIcon = function () {
@@ -188,6 +187,9 @@ var Input = /** @class */ (function (_super) {
             }
         };
         _this.handleClearInput = function () {
+            if (_this.props.readOnly || _this.props.disabled) {
+                return;
+            }
             if (_this.input) {
                 _this.input.value = '';
             }
@@ -246,7 +248,7 @@ var Input = /** @class */ (function (_super) {
                 _this.props.onKeyDown(e);
             }
             var isDeleteKey = someKeys(isKeyBackspace, isKeyDelete)(e);
-            if (!e.currentTarget.value && isDeleteKey && !e.repeat) {
+            if (!_this.props.readOnly && !e.currentTarget.value && isDeleteKey && !e.repeat) {
                 _this.blink();
             }
         };
@@ -289,6 +291,11 @@ var Input = /** @class */ (function (_super) {
         return _this;
     }
     Input_1 = Input;
+    Input.prototype.componentDidUpdate = function (prevProps) {
+        if (prevProps.readOnly !== this.props.readOnly || prevProps.disabled !== this.props.disabled) {
+            this.setState({ clearCrossShowed: this.getClearCrossShowed(this.state) });
+        }
+    };
     Input.prototype.componentWillUnmount = function () {
         this.cancelDelayedSelectAll();
     };
@@ -344,6 +351,7 @@ var Input = /** @class */ (function (_super) {
     };
     Input.prototype.render = function () {
         var _this = this;
+        this.styles = getStyles(this.emotion);
         return (React.createElement(ThemeContext.Consumer, null, function (theme) {
             _this.theme = theme;
             return (React.createElement(CommonWrapper, __assign({ rootNodeRef: _this.setRootNode }, _this.getProps()), _this.renderMain));
@@ -353,17 +361,17 @@ var Input = /** @class */ (function (_super) {
         var _a, _b, _c;
         switch (this.size) {
             case 'large':
-                return cx((_a = {},
-                    _a[styles.sizeLarge] = true,
+                return this.cx((_a = {},
+                    _a[this.styles.sizeLarge(this.theme)] = true,
                     _a));
             case 'medium':
-                return cx((_b = {},
-                    _b[styles.sizeMedium] = true,
+                return this.cx((_b = {},
+                    _b[this.styles.sizeMedium(this.theme)] = true,
                     _b));
             case 'small':
             default:
-                return cx((_c = {},
-                    _c[styles.sizeSmall] = true,
+                return this.cx((_c = {},
+                    _c[this.styles.sizeSmall(this.theme)] = true,
                     _c));
         }
     };