npm - @skbkontur/react-ui - Versions diffs - 6.4.7-b33c6.0 → 6.5.0 - Mend

@skbkontur/react-ui 6.4.7-b33c6.0 → 6.5.0

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 (937) hide show

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

@@ -0,0 +1,36 @@
+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 ({
+        closeButton: function (t) {
+            return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      position: absolute;\n      box-sizing: content-box;\n      right: 0;\n      top: 0;\n      width: ", ";\n      height: ", ";\n      color: ", ";\n      cursor: pointer;\n      line-height: 0;\n\n      &:hover {\n        color: ", ";\n      }\n    "], ["\n      position: absolute;\n      box-sizing: content-box;\n      right: 0;\n      top: 0;\n      width: ", ";\n      height: ", ";\n      color: ", ";\n      cursor: pointer;\n      line-height: 0;\n\n      &:hover {\n        color: ", ";\n      }\n    "])), t.tooltipCloseBtnSide, t.tooltipCloseBtnSide, t.tooltipCloseBtnColor, t.tooltipCloseBtnHoverColor);
+        },
+        closeButtonSmall: function (t) {
+            return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n      padding: ", ";\n    "], ["\n      padding: ", ";\n    "])), t.tooltipCloseBtnPaddingSmall);
+        },
+        closeButtonMedium: function (t) {
+            return css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n      padding: ", ";\n    "], ["\n      padding: ", ";\n    "])), t.tooltipCloseBtnPaddingMedium);
+        },
+        closeButtonLarge: function (t) {
+            return css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n      padding: ", ";\n    "], ["\n      padding: ", ";\n    "])), t.tooltipCloseBtnPaddingLarge);
+        },
+        tooltipContent: function (t) {
+            return css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n      position: relative;\n      color: ", ";\n    "], ["\n      position: relative;\n      color: ", ";\n    "])), t.tooltipTextColor);
+        },
+        tooltipContentSmall: function (t) {
+            return css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n      padding: ", " ", ";\n      font-size: ", ";\n      line-height: ", ";\n    "], ["\n      padding: ", " ", ";\n      font-size: ", ";\n      line-height: ", ";\n    "])), t.tooltipPaddingYSmall, t.tooltipPaddingXSmall, t.tooltipFontSizeSmall, t.tooltipLineHeightSmall);
+        },
+        tooltipContentMedium: function (t) {
+            return css(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n      padding: ", " ", ";\n      font-size: ", ";\n      line-height: ", ";\n    "], ["\n      padding: ", " ", ";\n      font-size: ", ";\n      line-height: ", ";\n    "])), t.tooltipPaddingYMedium, t.tooltipPaddingXMedium, t.tooltipFontSizeMedium, t.tooltipLineHeightMedium);
+        },
+        tooltipContentLarge: function (t) {
+            return css(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n      padding: ", " ", ";\n      font-size: ", ";\n      line-height: ", ";\n    "], ["\n      padding: ", " ", ";\n      font-size: ", ";\n      line-height: ", ";\n    "])), t.tooltipPaddingYLarge, t.tooltipPaddingXLarge, t.tooltipFontSizeLarge, t.tooltipLineHeightLarge);
+        },
+    });
+});
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8;
+//# sourceMappingURL=Tooltip.styles.js.map

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

@@ -0,0 +1 @@

+ {"version":3,"file":"Tooltip.styles.js","sourceRoot":"","sources":["Tooltip.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,WAAW,YAAC,CAAQ;YAClB,OAAO,GAAG,oUAAA,4GAKC,EAAqB,mBACpB,EAAqB,kBACtB,EAAsB,sFAKpB,EAA2B,kBAEvC,KATU,CAAC,CAAC,mBAAmB,EACpB,CAAC,CAAC,mBAAmB,EACtB,CAAC,CAAC,oBAAoB,EAKpB,CAAC,CAAC,yBAAyB,EAEtC;QACJ,CAAC;QAED,gBAAgB,YAAC,CAAQ;YACvB,OAAO,GAAG,iGAAA,mBACG,EAA6B,SACzC,KADY,CAAC,CAAC,2BAA2B,EACxC;QACJ,CAAC;QAED,iBAAiB,YAAC,CAAQ;YACxB,OAAO,GAAG,iGAAA,mBACG,EAA8B,SAC1C,KADY,CAAC,CAAC,4BAA4B,EACzC;QACJ,CAAC;QAED,gBAAgB,YAAC,CAAQ;YACvB,OAAO,GAAG,iGAAA,mBACG,EAA6B,SACzC,KADY,CAAC,CAAC,2BAA2B,EACxC;QACJ,CAAC;QAED,cAAc,YAAC,CAAQ;YACrB,OAAO,GAAG,0HAAA,4CAEC,EAAkB,SAC5B,KADU,CAAC,CAAC,gBAAgB,EAC3B;QACJ,CAAC;QAED,mBAAmB,YAAC,CAAQ;YAC1B,OAAO,GAAG,wJAAA,mBACG,EAAsB,GAAI,EAAsB,sBAC9C,EAAsB,wBACpB,EAAwB,SACxC,KAHY,CAAC,CAAC,oBAAoB,EAAI,CAAC,CAAC,oBAAoB,EAC9C,CAAC,CAAC,oBAAoB,EACpB,CAAC,CAAC,sBAAsB,EACvC;QACJ,CAAC;QAED,oBAAoB,YAAC,CAAQ;YAC3B,OAAO,GAAG,wJAAA,mBACG,EAAuB,GAAI,EAAuB,sBAChD,EAAuB,wBACrB,EAAyB,SACzC,KAHY,CAAC,CAAC,qBAAqB,EAAI,CAAC,CAAC,qBAAqB,EAChD,CAAC,CAAC,qBAAqB,EACrB,CAAC,CAAC,uBAAuB,EACxC;QACJ,CAAC;QAED,mBAAmB,YAAC,CAAQ;YAC1B,OAAO,GAAG,wJAAA,mBACG,EAAsB,GAAI,EAAsB,sBAC9C,EAAsB,wBACpB,EAAwB,SACxC,KAHY,CAAC,CAAC,oBAAoB,EAAI,CAAC,CAAC,oBAAoB,EAC9C,CAAC,CAAC,oBAAoB,EACpB,CAAC,CAAC,sBAAsB,EACvC;QACJ,CAAC;KACF,CAAC;AAnE8D,CAmE9D,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 closeButton(t: Theme) {\n return css`\n position: absolute;\n box-sizing: content-box;\n right: 0;\n top: 0;\n width: ${t.tooltipCloseBtnSide};\n height: ${t.tooltipCloseBtnSide};\n color: ${t.tooltipCloseBtnColor};\n cursor: pointer;\n line-height: 0;\n\n &:hover {\n color: ${t.tooltipCloseBtnHoverColor};\n }\n `;\n },\n\n closeButtonSmall(t: Theme) {\n return css`\n padding: ${t.tooltipCloseBtnPaddingSmall};\n `;\n },\n\n closeButtonMedium(t: Theme) {\n return css`\n padding: ${t.tooltipCloseBtnPaddingMedium};\n `;\n },\n\n closeButtonLarge(t: Theme) {\n return css`\n padding: ${t.tooltipCloseBtnPaddingLarge};\n `;\n },\n\n tooltipContent(t: Theme) {\n return css`\n position: relative;\n color: ${t.tooltipTextColor};\n `;\n },\n\n tooltipContentSmall(t: Theme) {\n return css`\n padding: ${t.tooltipPaddingYSmall} ${t.tooltipPaddingXSmall};\n font-size: ${t.tooltipFontSizeSmall};\n line-height: ${t.tooltipLineHeightSmall};\n `;\n },\n\n tooltipContentMedium(t: Theme) {\n return css`\n padding: ${t.tooltipPaddingYMedium} ${t.tooltipPaddingXMedium};\n font-size: ${t.tooltipFontSizeMedium};\n line-height: ${t.tooltipLineHeightMedium};\n `;\n },\n\n tooltipContentLarge(t: Theme) {\n return css`\n padding: ${t.tooltipPaddingYLarge} ${t.tooltipPaddingXLarge};\n font-size: ${t.tooltipFontSizeLarge};\n line-height: ${t.tooltipLineHeightLarge};\n `;\n },\n}));\n"]}

package/components/TooltipMenu/TooltipMenu.js CHANGED Viewed

@@ -37,17 +37,8 @@ import { PopupMenu } from '../../internal/PopupMenu/index.js';
 import { createPropsGetter } from '../../lib/createPropsGetter.js';
 import { isTestEnv } from '../../lib/currentEnvironment.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';
-var getTooltipMenuTheme = memoizeTheme(function (theme) {
-    return ThemeFactory.create({
-        popupPinOffsetX: theme.tooltipMenuPinOffsetX,
-        popupPinOffsetY: theme.tooltipMenuPinOffsetY,
-        popupMargin: theme.tooltipMenuMargin,
-        popupPinSize: theme.tooltipMenuPinSize,
-    }, theme);
-});
 export var TooltipMenuDataTids = {
     root: 'TooltipMenu__root',
 };
@@ -70,7 +61,12 @@ var TooltipMenu = /** @class */ (function (_super) {
     TooltipMenu.prototype.render = function () {
         var _this = this;
         return (React.createElement(ThemeContext.Consumer, null, function (theme) {
-            return React.createElement(ThemeContext.Provider, { value: getTooltipMenuTheme(theme) }, _this.renderMain());
+            return (React.createElement(ThemeContext.Provider, { value: ThemeFactory.create({
+                    popupPinOffsetX: theme.tooltipMenuPinOffsetX,
+                    popupPinOffsetY: theme.tooltipMenuPinOffsetY,
+                    popupMargin: theme.tooltipMenuMargin,
+                    popupPinSize: theme.tooltipMenuPinSize,
+                }, theme) }, _this.renderMain()));
         }));
     };
     TooltipMenu.prototype.renderMain = function () {

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

	@@ -1 +1 @@
1	- {"version":3,"file":"TooltipMenu.js","sourceRoot":"","sources":["TooltipMenu.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,OAAO,MAAM,SAAS,CAAC;AAE9B,OAAO,EAAE,aAAa,EAAE,MAAM,uCAAuC,CAAC;AAGtE,OAAO,EAAE,SAAS,EAAE,MAAM,mCAAmC,CAAC;AAE9D,OAAO,EAAE,iBAAiB,EAAE,MAAM,gCAAgC,CAAC;AACnE,OAAO,EAAE,SAAS,EAAE,MAAM,iCAAiC,CAAC;AAE5D,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AACvD,OAAO,EAAE,YAAY,EAAE,MAAM,mCAAmC,CAAC;~~AAEjE,OAAO,EAAE,YAAY,EAAE,MAAM,mCAAmC,CAAC;~~AACjE,OAAO,EAAE,YAAY,EAAE,MAAM,mCAAmC,CAAC;~~AAIjE~~,~~IAAM,mBAAmB,GAAG,YAAY,CAAC,UAAC,KAAY;IACpD,OAAA,YAAY,CAAC,~~MAAM,~~CACjB;QACE,eAAe,EAAE,KAAK,~~CAAC,~~qBAAqB;QAC5C,eAAe,EAAE,KAAK,CAAC,qBAAqB;QAC5C,WAAW,EAAE,KAAK,CAAC,iBAAiB;QACpC,YAAY,EAAE,KAAK,CAAC,kBAAkB;KACvC,EACD,KAAK,CACN;AARD,CAQC,CACF,CAAC;AA+BF,MAAM,CAAC,~~IAAM,mBAAmB,GAAG;IACjC,IAAI,EAAE,mBAAmB;CACjB,CAAC;AAIX;;;;GAIG;AAEH;IAAiC,+BAAiC;IAahE,qBAAY,KAAuB;QACjC,YAAA,MAAK,YAAC,KAAK,CAAC,SAAC;QAHP,cAAQ,GAAG,iBAAiB,CAAC,aAAW,CAAC,YAAY,CAAC,CAAC;QAK7D,IAAI,CAAC,KAAK,CAAC,OAAO,EAAE,CAAC;YACnB,OAAO,CAAC,KAAK,EAAE,+BAA+B,CAAC,CAAC;QAClD,CAAC;;IACH,CAAC;oBAnBU,WAAW;IAqBf,4BAAM,GAAb;QAAA,~~iBAQC~~;~~QAPC~~,OAAO,CACL,oBAAC,YAAY,CAAC,QAAQ,QACnB,UAAC,KAAK;YACL,OAAO,oBAAC,YAAY,CAAC,QAAQ,~~IAAC~~,KAAK,EAAE,~~mBAAmB~~,CAAC,KAAK,CAAC,~~IAAG~~,KAAI,CAAC,UAAU,EAAE,~~CAAyB~~,CAAC;~~QAC/G~~,CAAC,CACqB,CACzB,CAAC;IACJ,CAAC;IAEM,gCAAU,GAAjB;QACE,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,OAAO,EAAE,CAAC;YACxB,OAAO,IAAI,CAAC;QACd,CAAC;QAEO,IAAA,iBAAiB,GAAK,IAAI,CAAC,QAAQ,EAAE,kBAApB,CAAqB;QAE9C,OAAO,CACL,oBAAC,aAAa,aAAC,WAAW,EAAE,IAAI,CAAC,WAAW,IAAM,IAAI,CAAC,KAAK;YAC1D,oBAAC,SAAS,kBACI,IAAI,CAAC,KAAK,CAAC,YAAY,CAAC,cAC1B,mBAAmB,CAAC,IAAI,EAClC,aAAa,EAAE,IAAI,CAAC,KAAK,CAAC,aAAa,EACvC,SAAS,EAAE,IAAI,CAAC,KAAK,CAAC,SAAS,EAC/B,OAAO,EAAE,IAAI,CAAC,KAAK,CAAC,OAAO,EAC3B,MAAM,EAAE,IAAI,CAAC,KAAK,CAAC,MAAM,EACzB,MAAM,EAAE,IAAI,CAAC,KAAK,CAAC,MAAM,EACzB,kBAAkB,EAAE,IAAI,CAAC,KAAK,CAAC,kBAAkB,EACjD,SAAS,EAAE,IAAI,CAAC,KAAK,CAAC,SAAS,EAC/B,MAAM,EAAE,IAAI,CAAC,KAAK,CAAC,MAAM,EACzB,OAAO,EAAE,IAAI,CAAC,KAAK,CAAC,OAAO,EAC3B,WAAW,QACX,iBAAiB,EAAE,iBAAiB,IAEnC,IAAI,CAAC,KAAK,CAAC,QAAQ,CACV,CACE,CACjB,CAAC;IACJ,CAAC;;~~IA1Da~~,+BAAmB,GAAG,aAAa,AAAhB,CAAiB;IACpC,uBAAW,GAAG,aAAa,AAAhB,CAAiB;IAK5B,wBAAY,GAAiB;QACzC,iBAAiB,EAAE,SAAS;KAC7B,AAFyB,CAExB;IATS,WAAW;QADvB,QAAQ;OACI,WAAW,~~CA4DvB~~;IAAD,kBAAC;CAAA,~~AA5DD~~,CAAiC,KAAK,CAAC,SAAS,~~GA4D~~/C;~~SA5DY~~,WAAW","sourcesContent":["import type { AriaAttributes } from 'react';\nimport React from 'react';\nimport warning from 'warning';\n\nimport { CommonWrapper } from '../../internal/CommonWrapper/index.js';\nimport type { CommonProps } from '../../internal/CommonWrapper/types.js';\nimport type { PopupPositionsType } from '../../internal/Popup/index.js';\nimport { PopupMenu } from '../../internal/PopupMenu/index.js';\nimport type { PopupMenuProps } from '../../internal/PopupMenu/index.js';\nimport { createPropsGetter } from '../../lib/createPropsGetter.js';\nimport { isTestEnv } from '../../lib/currentEnvironment.js';\nimport type { TGetRootNode, TSetRootNode } from '../../lib/rootNode//rootNodeDecorator.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 { MenuHeaderProps } from '../MenuHeader/index.js';\nimport type { MenuItemProps } from '../MenuItem/index.js';\n\nconst getTooltipMenuTheme = memoizeTheme((theme: Theme) =>\n ThemeFactory.create(\n {\n popupPinOffsetX: theme.tooltipMenuPinOffsetX,\n popupPinOffsetY: theme.tooltipMenuPinOffsetY,\n popupMargin: theme.tooltipMenuMargin,\n popupPinSize: theme.tooltipMenuPinSize,\n },\n theme,\n ),\n);\n\nexport type TooltipMenuChildType = React.ReactElement<MenuItemProps \| unknown \| MenuHeaderProps>;\n\nexport interface TooltipMenuProps\n extends\n Pick<AriaAttributes, 'aria-label'>,\n CommonProps,\n Pick<PopupMenuProps, 'onOpen' \| 'onClose' \| 'preventIconsOffset'> {\n /** Элемент или функция, которая возвращает кнопку-меню.\n * Примечание: при использовании функции, нее необходимо управлять открытием и закрытием меню. /\n caption: PopupMenuProps['caption'];\n /* @ignore /\n children?: TooltipMenuChildType \| TooltipMenuChildType[];\n /* Максимальная высота меню. /\n menuMaxHeight?: number \| string;\n /* Ширина меню. /\n menuWidth?: number \| string;\n /* Элемент, который будет отрендерен в шапке меню.\n * Примечание: не поддерживается компонент MenuHeader, который ожидается только в `children` меню. /\n header?: React.ReactNode;\n /* Элемент, который будет отрендерен в подвале меню.\n * Перед элементом переданным в `footer` будет отрендерен `MenuSeparator`. /\n footer?: React.ReactNode;\n /* Список позиций для расположения выпадашки относительно caption.\n * Если во всех позициях выпадашка вылезает за пределы viewport, будет использована первая. /\n positions?: PopupPositionsType[];\n /* Отключает анимацию. /\n disableAnimations?: boolean;\n}\n\nexport const TooltipMenuDataTids = {\n root: 'TooltipMenu__root',\n} as const;\n\ntype DefaultProps = Required<Pick<TooltipMenuProps, 'disableAnimations'>>;\n\n/\n Выпадающее меню в тултипе `TooltipMenu`. Раскрывается по клику на переданный в `caption` элемент.\n \n Поддерживает настройку `header`, `footer`, позиций открытия `positions` и другие настройки внешнего вида.\n */\n@rootNode\nexport class TooltipMenu extends React.Component<TooltipMenuProps> {\n public static __KONTUR_REACT_UI__ = 'TooltipMenu';\n public static displayName = 'TooltipMenu';\n\n public getRootNode!: TGetRootNode;\n private setRootNode!: TSetRootNode;\n\n public static defaultProps: DefaultProps = {\n disableAnimations: isTestEnv,\n };\n\n private getProps = createPropsGetter(TooltipMenu.defaultProps);\n\n constructor(props: TooltipMenuProps) {\n super(props);\n\n if (!props.caption) {\n warning(false, 'Prop \"caption\" is required!!!');\n }\n }\n\n public render(): React.JSX.Element {\n return (\n <ThemeContext.Consumer>\n {(theme) => {\n return <ThemeContext.Provider value={~~getTooltipMenuTheme~~(theme)}>{this.renderMain()}</ThemeContext.Provider~~>;\~~n }}\n </ThemeContext.Consumer>\n );\n }\n\n public renderMain(): React.JSX.Element \| null {\n if (!this.props.caption) {\n return null;\n }\n\n const { disableAnimations } = this.getProps();\n\n return (\n <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>\n <PopupMenu\n aria-label={this.props['aria-label']}\n data-tid={TooltipMenuDataTids.root}\n menuMaxHeight={this.props.menuMaxHeight}\n menuWidth={this.props.menuWidth}\n caption={this.props.caption}\n header={this.props.header}\n footer={this.props.footer}\n preventIconsOffset={this.props.preventIconsOffset}\n positions={this.props.positions}\n onOpen={this.props.onOpen}\n onClose={this.props.onClose}\n popupHasPin\n disableAnimations={disableAnimations}\n >\n {this.props.children}\n </PopupMenu>\n </CommonWrapper>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"TooltipMenu.js","sourceRoot":"","sources":["TooltipMenu.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,OAAO,MAAM,SAAS,CAAC;AAE9B,OAAO,EAAE,aAAa,EAAE,MAAM,uCAAuC,CAAC;AAGtE,OAAO,EAAE,SAAS,EAAE,MAAM,mCAAmC,CAAC;AAE9D,OAAO,EAAE,iBAAiB,EAAE,MAAM,gCAAgC,CAAC;AACnE,OAAO,EAAE,SAAS,EAAE,MAAM,iCAAiC,CAAC;AAE5D,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AACvD,OAAO,EAAE,YAAY,EAAE,MAAM,mCAAmC,CAAC;AACjE,OAAO,EAAE,YAAY,EAAE,MAAM,mCAAmC,CAAC;AAiCjE,MAAM,CAAC,IAAM,mBAAmB,GAAG;IACjC,IAAI,EAAE,mBAAmB;CACjB,CAAC;AAIX;;;;GAIG;AAEH;IAAiC,+BAAiC;IAahE,qBAAY,KAAuB;QACjC,YAAA,MAAK,YAAC,KAAK,CAAC,SAAC;QAHP,cAAQ,GAAG,iBAAiB,CAAC,aAAW,CAAC,YAAY,CAAC,CAAC;QAK7D,IAAI,CAAC,KAAK,CAAC,OAAO,EAAE,CAAC;YACnB,OAAO,CAAC,KAAK,EAAE,+BAA+B,CAAC,CAAC;QAClD,CAAC;;IACH,CAAC;oBAnBU,WAAW;IAqBf,4BAAM,GAAb;QAAA,iBAsBC;QArBC,OAAO,CACL,oBAAC,YAAY,CAAC,QAAQ,QACnB,UAAC,KAAK;YACL,OAAO,CACL,oBAAC,YAAY,CAAC,QAAQ,IACpB,KAAK,EAAE,YAAY,CAAC,MAAM,CACxB;oBACE,eAAe,EAAE,KAAK,CAAC,qBAAqB;oBAC5C,eAAe,EAAE,KAAK,CAAC,qBAAqB;oBAC5C,WAAW,EAAE,KAAK,CAAC,iBAAiB;oBACpC,YAAY,EAAE,KAAK,CAAC,kBAAkB;iBACvC,EACD,KAAK,CACN,IAEA,KAAI,CAAC,UAAU,EAAE,CACI,CACzB,CAAC;QACJ,CAAC,CACqB,CACzB,CAAC;IACJ,CAAC;IAEM,gCAAU,GAAjB;QACE,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,OAAO,EAAE,CAAC;YACxB,OAAO,IAAI,CAAC;QACd,CAAC;QAEO,IAAA,iBAAiB,GAAK,IAAI,CAAC,QAAQ,EAAE,kBAApB,CAAqB;QAE9C,OAAO,CACL,oBAAC,aAAa,aAAC,WAAW,EAAE,IAAI,CAAC,WAAW,IAAM,IAAI,CAAC,KAAK;YAC1D,oBAAC,SAAS,kBACI,IAAI,CAAC,KAAK,CAAC,YAAY,CAAC,cAC1B,mBAAmB,CAAC,IAAI,EAClC,aAAa,EAAE,IAAI,CAAC,KAAK,CAAC,aAAa,EACvC,SAAS,EAAE,IAAI,CAAC,KAAK,CAAC,SAAS,EAC/B,OAAO,EAAE,IAAI,CAAC,KAAK,CAAC,OAAO,EAC3B,MAAM,EAAE,IAAI,CAAC,KAAK,CAAC,MAAM,EACzB,MAAM,EAAE,IAAI,CAAC,KAAK,CAAC,MAAM,EACzB,kBAAkB,EAAE,IAAI,CAAC,KAAK,CAAC,kBAAkB,EACjD,SAAS,EAAE,IAAI,CAAC,KAAK,CAAC,SAAS,EAC/B,MAAM,EAAE,IAAI,CAAC,KAAK,CAAC,MAAM,EACzB,OAAO,EAAE,IAAI,CAAC,KAAK,CAAC,OAAO,EAC3B,WAAW,QACX,iBAAiB,EAAE,iBAAiB,IAEnC,IAAI,CAAC,KAAK,CAAC,QAAQ,CACV,CACE,CACjB,CAAC;IACJ,CAAC;;IAxEa,+BAAmB,GAAG,aAAa,AAAhB,CAAiB;IACpC,uBAAW,GAAG,aAAa,AAAhB,CAAiB;IAK5B,wBAAY,GAAiB;QACzC,iBAAiB,EAAE,SAAS;KAC7B,AAFyB,CAExB;IATS,WAAW;QADvB,QAAQ;OACI,WAAW,CA0EvB;IAAD,kBAAC;CAAA,AA1ED,CAAiC,KAAK,CAAC,SAAS,GA0E/C;SA1EY,WAAW","sourcesContent":["import type { AriaAttributes } from 'react';\nimport React from 'react';\nimport warning from 'warning';\n\nimport { CommonWrapper } from '../../internal/CommonWrapper/index.js';\nimport type { CommonProps } from '../../internal/CommonWrapper/types.js';\nimport type { PopupPositionsType } from '../../internal/Popup/index.js';\nimport { PopupMenu } from '../../internal/PopupMenu/index.js';\nimport type { PopupMenuProps } from '../../internal/PopupMenu/index.js';\nimport { createPropsGetter } from '../../lib/createPropsGetter.js';\nimport { isTestEnv } from '../../lib/currentEnvironment.js';\nimport type { TGetRootNode, TSetRootNode } from '../../lib/rootNode//rootNodeDecorator.js';\nimport { rootNode } from '../../lib/rootNode/index.js';\nimport { ThemeContext } from '../../lib/theming/ThemeContext.js';\nimport { ThemeFactory } from '../../lib/theming/ThemeFactory.js';\nimport type { MenuHeaderProps } from '../MenuHeader/index.js';\nimport type { MenuItemProps } from '../MenuItem/index.js';\n\nexport type TooltipMenuChildType = React.ReactElement<MenuItemProps \| unknown \| MenuHeaderProps>;\n\nexport interface TooltipMenuProps\n extends\n Pick<AriaAttributes, 'aria-label'>,\n CommonProps,\n Pick<PopupMenuProps, 'onOpen' \| 'onClose' \| 'preventIconsOffset'> {\n /** Элемент или функция, которая возвращает кнопку-меню.\n * Примечание: при использовании функции, нее необходимо управлять открытием и закрытием меню. /\n caption: PopupMenuProps['caption'];\n /* @ignore /\n children?: TooltipMenuChildType \| TooltipMenuChildType[];\n /* Максимальная высота меню. /\n menuMaxHeight?: number \| string;\n /* Ширина меню. /\n menuWidth?: number \| string;\n /* Элемент, который будет отрендерен в шапке меню.\n * Примечание: не поддерживается компонент MenuHeader, который ожидается только в `children` меню. /\n header?: React.ReactNode;\n /* Элемент, который будет отрендерен в подвале меню.\n * Перед элементом переданным в `footer` будет отрендерен `MenuSeparator`. /\n footer?: React.ReactNode;\n /* Список позиций для расположения выпадашки относительно caption.\n * Если во всех позициях выпадашка вылезает за пределы viewport, будет использована первая. /\n positions?: PopupPositionsType[];\n /* Отключает анимацию. /\n disableAnimations?: boolean;\n}\n\nexport const TooltipMenuDataTids = {\n root: 'TooltipMenu__root',\n} as const;\n\ntype DefaultProps = Required<Pick<TooltipMenuProps, 'disableAnimations'>>;\n\n/\n Выпадающее меню в тултипе `TooltipMenu`. Раскрывается по клику на переданный в `caption` элемент.\n \n Поддерживает настройку `header`, `footer`, позиций открытия `positions` и другие настройки внешнего вида.\n */\n@rootNode\nexport class TooltipMenu extends React.Component<TooltipMenuProps> {\n public static __KONTUR_REACT_UI__ = 'TooltipMenu';\n public static displayName = 'TooltipMenu';\n\n public getRootNode!: TGetRootNode;\n private setRootNode!: TSetRootNode;\n\n public static defaultProps: DefaultProps = {\n disableAnimations: isTestEnv,\n };\n\n private getProps = createPropsGetter(TooltipMenu.defaultProps);\n\n constructor(props: TooltipMenuProps) {\n super(props);\n\n if (!props.caption) {\n warning(false, 'Prop \"caption\" is required!!!');\n }\n }\n\n public render(): React.JSX.Element {\n return (\n <ThemeContext.Consumer>\n {(theme) => {\n return (\n <ThemeContext.Provider\n value={ThemeFactory.create(\n {\n popupPinOffsetX: theme.tooltipMenuPinOffsetX,\n popupPinOffsetY: theme.tooltipMenuPinOffsetY,\n popupMargin: theme.tooltipMenuMargin,\n popupPinSize: theme.tooltipMenuPinSize,\n },\n theme,\n )}\n >\n {this.renderMain()}\n </ThemeContext.Provider>\n );\n }}\n </ThemeContext.Consumer>\n );\n }\n\n public renderMain(): React.JSX.Element \| null {\n if (!this.props.caption) {\n return null;\n }\n\n const { disableAnimations } = this.getProps();\n\n return (\n <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>\n <PopupMenu\n aria-label={this.props['aria-label']}\n data-tid={TooltipMenuDataTids.root}\n menuMaxHeight={this.props.menuMaxHeight}\n menuWidth={this.props.menuWidth}\n caption={this.props.caption}\n header={this.props.header}\n footer={this.props.footer}\n preventIconsOffset={this.props.preventIconsOffset}\n positions={this.props.positions}\n onOpen={this.props.onOpen}\n onClose={this.props.onClose}\n popupHasPin\n disableAnimations={disableAnimations}\n >\n {this.props.children}\n </PopupMenu>\n </CommonWrapper>\n );\n }\n}\n"]}

package/index.d.ts CHANGED Viewed

@@ -49,7 +49,6 @@ export * from './components/Tooltip/index.js';
 export * from './components/TooltipMenu/index.js';
 export * from './components/ResponsiveLayout/index.js';
 export * from './components/MaskedInput/index.js';
-export * from './components/ThemeContainer/index.js';
 export * from './lib/featureFlagsContext/index.js';
 export * from './lib/locale/index.js';
 export * from './lib/size/index.js';

package/index.js CHANGED Viewed

@@ -49,7 +49,6 @@ export * from './components/Tooltip/index.js';
 export * from './components/TooltipMenu/index.js';
 export * from './components/ResponsiveLayout/index.js';
 export * from './components/MaskedInput/index.js';
-export * from './components/ThemeContainer/index.js';
 export * from './lib/featureFlagsContext/index.js';
 export * from './lib/locale/index.js';
 export * from './lib/size/index.js';

package/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","sourceRoot":"","sources":["index.ts"],"names":[],"mappings":"AAAA,cAAc,oCAAoC,CAAC;AACnD,cAAc,8BAA8B,CAAC;AAC7C,cAAc,gCAAgC,CAAC;AAC/C,cAAc,8BAA8B,CAAC;AAC7C,cAAc,gCAAgC,CAAC;AAC/C,cAAc,gCAAgC,CAAC;AAC/C,cAAc,qCAAqC,CAAC;AACpD,cAAc,qCAAqC,CAAC;AACpD,cAAc,iCAAiC,CAAC;AAChD,cAAc,kCAAkC,CAAC;AACjD,cAAc,uCAAuC,CAAC;AACtD,cAAc,gCAAgC,CAAC;AAC/C,cAAc,oCAAoC,CAAC;AACnD,cAAc,oCAAoC,CAAC;AACnD,cAAc,+BAA+B,CAAC;AAC9C,cAAc,8BAA8B,CAAC;AAC7C,cAAc,oCAAoC,CAAC;AACnD,cAAc,6BAA6B,CAAC;AAC5C,cAAc,4BAA4B,CAAC;AAC3C,cAAc,6BAA6B,CAAC;AAC5C,cAAc,6BAA6B,CAAC;AAC5C,cAAc,4BAA4B,CAAC;AAC3C,cAAc,8BAA8B,CAAC;AAC7C,cAAc,kCAAkC,CAAC;AACjD,cAAc,kCAAkC,CAAC;AACjD,cAAc,gCAAgC,CAAC;AAC/C,cAAc,qCAAqC,CAAC;AACpD,cAAc,iCAAiC,CAAC;AAChD,cAAc,6BAA6B,CAAC;AAC5C,cAAc,8BAA8B,CAAC;AAC7C,cAAc,qCAAqC,CAAC;AACpD,cAAc,6BAA6B,CAAC;AAC5C,cAAc,kCAAkC,CAAC;AACjD,cAAc,uCAAuC,CAAC;AACtD,cAAc,8BAA8B,CAAC;AAC7C,cAAc,gCAAgC,CAAC;AAC/C,cAAc,+BAA+B,CAAC;AAC9C,cAAc,8BAA8B,CAAC;AAC7C,cAAc,gCAAgC,CAAC;AAC/C,cAAc,4BAA4B,CAAC;AAC3C,cAAc,gCAAgC,CAAC;AAC/C,cAAc,kCAAkC,CAAC;AACjD,cAAc,6BAA6B,CAAC;AAC5C,cAAc,mCAAmC,CAAC;AAClD,cAAc,8BAA8B,CAAC;AAC7C,cAAc,6BAA6B,CAAC;AAC5C,cAAc,kCAAkC,CAAC;AACjD,cAAc,+BAA+B,CAAC;AAC9C,cAAc,mCAAmC,CAAC;AAClD,cAAc,wCAAwC,CAAC;AACvD,cAAc,mCAAmC,CAAC;AAClD,cAAc,~~sCAAsC,CAAC;AACrD,cAAc,~~oCAAoC,CAAC;AACnD,cAAc,uBAAuB,CAAC;AACtC,cAAc,qBAAqB,CAAC;AACpC,cAAc,+BAA+B,CAAC;AAC9C,cAAc,+BAA+B,CAAC;AAC9C,cAAc,oCAAoC,CAAC;AACnD,cAAc,mCAAmC,CAAC;AAClD,cAAc,sBAAsB,CAAC;AACrC,cAAc,2BAA2B,CAAC;AAE1C,OAAO,KAAK,cAAc,MAAM,gCAAgC,CAAC;AACjE,OAAO,KAAK,kBAAkB,MAAM,oCAAoC,CAAC","sourcesContent":["export * from './components/Autocomplete/index.js';\nexport * from './components/Button/index.js';\nexport * from './components/Calendar/index.js';\nexport * from './components/Center/index.js';\nexport * from './components/Checkbox/index.js';\nexport * from './components/ComboBox/index.js';\nexport * from './components/CurrencyInput/index.js';\nexport * from './components/CurrencyLabel/index.js';\nexport * from './components/DateInput/index.js';\nexport * from './components/DatePicker/index.js';\nexport * from './components/DateRangePicker/index.js';\nexport * from './components/Dropdown/index.js';\nexport * from './components/DropdownMenu/index.js';\nexport * from './components/FileUploader/index.js';\nexport * from './components/FxInput/index.js';\nexport * from './components/Gapped/index.js';\nexport * from './components/GlobalLoader/index.js';\nexport * from './components/Group/index.js';\nexport * from './components/Hint/index.js';\nexport * from './components/Input/index.js';\nexport * from './components/Kebab/index.js';\nexport * from './components/Link/index.js';\nexport * from './components/Loader/index.js';\nexport * from './components/MenuFooter/index.js';\nexport * from './components/MenuHeader/index.js';\nexport * from './components/MenuItem/index.js';\nexport * from './components/MenuSeparator/index.js';\nexport * from './components/MiniModal/index.js';\nexport * from './components/Modal/index.js';\nexport * from './components/Paging/index.js';\nexport * from './components/PasswordInput/index.js';\nexport * from './components/Radio/index.js';\nexport * from './components/RadioGroup/index.js';\nexport * from './components/ScrollContainer/index.js';\nexport * from './components/Select/index.js';\nexport * from './components/SidePage/index.js';\nexport * from './components/Spinner/index.js';\nexport * from './components/Sticky/index.js';\nexport * from './components/Switcher/index.js';\nexport * from './components/Tabs/index.js';\nexport * from './components/Textarea/index.js';\nexport * from './components/TimePicker/index.js';\nexport * from './components/Toast/index.js';\nexport * from './components/SingleToast/index.js';\nexport * from './components/Toggle/index.js';\nexport * from './components/Token/index.js';\nexport * from './components/TokenInput/index.js';\nexport * from './components/Tooltip/index.js';\nexport * from './components/TooltipMenu/index.js';\nexport * from './components/ResponsiveLayout/index.js';\nexport * from './components/MaskedInput/index.js';\nexport * from './~~components/ThemeContainer/index.js';\nexport * from './~~lib/featureFlagsContext/index.js';\nexport * from './lib/locale/index.js';\nexport * from './lib/size/index.js';\nexport * from './lib/theming/ThemeContext.js';\nexport * from './lib/theming/ThemeFactory.js';\nexport * from './lib/theming/themes/LightTheme.js';\nexport * from './lib/theming/themes/DarkTheme.js';\nexport * from './lib/types/props.js';\nexport * from './internal/Popup/types.js';\nexport type { PopupMenuCaptionProps } from './internal/PopupMenu/index.js';\nexport * as ColorFunctions from './lib/styles/ColorFunctions.js';\nexport * as DimensionFunctions from './lib/styles/DimensionFunctions.js';\n"]}
1	+ {"version":3,"file":"index.js","sourceRoot":"","sources":["index.ts"],"names":[],"mappings":"AAAA,cAAc,oCAAoC,CAAC;AACnD,cAAc,8BAA8B,CAAC;AAC7C,cAAc,gCAAgC,CAAC;AAC/C,cAAc,8BAA8B,CAAC;AAC7C,cAAc,gCAAgC,CAAC;AAC/C,cAAc,gCAAgC,CAAC;AAC/C,cAAc,qCAAqC,CAAC;AACpD,cAAc,qCAAqC,CAAC;AACpD,cAAc,iCAAiC,CAAC;AAChD,cAAc,kCAAkC,CAAC;AACjD,cAAc,uCAAuC,CAAC;AACtD,cAAc,gCAAgC,CAAC;AAC/C,cAAc,oCAAoC,CAAC;AACnD,cAAc,oCAAoC,CAAC;AACnD,cAAc,+BAA+B,CAAC;AAC9C,cAAc,8BAA8B,CAAC;AAC7C,cAAc,oCAAoC,CAAC;AACnD,cAAc,6BAA6B,CAAC;AAC5C,cAAc,4BAA4B,CAAC;AAC3C,cAAc,6BAA6B,CAAC;AAC5C,cAAc,6BAA6B,CAAC;AAC5C,cAAc,4BAA4B,CAAC;AAC3C,cAAc,8BAA8B,CAAC;AAC7C,cAAc,kCAAkC,CAAC;AACjD,cAAc,kCAAkC,CAAC;AACjD,cAAc,gCAAgC,CAAC;AAC/C,cAAc,qCAAqC,CAAC;AACpD,cAAc,iCAAiC,CAAC;AAChD,cAAc,6BAA6B,CAAC;AAC5C,cAAc,8BAA8B,CAAC;AAC7C,cAAc,qCAAqC,CAAC;AACpD,cAAc,6BAA6B,CAAC;AAC5C,cAAc,kCAAkC,CAAC;AACjD,cAAc,uCAAuC,CAAC;AACtD,cAAc,8BAA8B,CAAC;AAC7C,cAAc,gCAAgC,CAAC;AAC/C,cAAc,+BAA+B,CAAC;AAC9C,cAAc,8BAA8B,CAAC;AAC7C,cAAc,gCAAgC,CAAC;AAC/C,cAAc,4BAA4B,CAAC;AAC3C,cAAc,gCAAgC,CAAC;AAC/C,cAAc,kCAAkC,CAAC;AACjD,cAAc,6BAA6B,CAAC;AAC5C,cAAc,mCAAmC,CAAC;AAClD,cAAc,8BAA8B,CAAC;AAC7C,cAAc,6BAA6B,CAAC;AAC5C,cAAc,kCAAkC,CAAC;AACjD,cAAc,+BAA+B,CAAC;AAC9C,cAAc,mCAAmC,CAAC;AAClD,cAAc,wCAAwC,CAAC;AACvD,cAAc,mCAAmC,CAAC;AAClD,cAAc,oCAAoC,CAAC;AACnD,cAAc,uBAAuB,CAAC;AACtC,cAAc,qBAAqB,CAAC;AACpC,cAAc,+BAA+B,CAAC;AAC9C,cAAc,+BAA+B,CAAC;AAC9C,cAAc,oCAAoC,CAAC;AACnD,cAAc,mCAAmC,CAAC;AAClD,cAAc,sBAAsB,CAAC;AACrC,cAAc,2BAA2B,CAAC;AAE1C,OAAO,KAAK,cAAc,MAAM,gCAAgC,CAAC;AACjE,OAAO,KAAK,kBAAkB,MAAM,oCAAoC,CAAC","sourcesContent":["export * from './components/Autocomplete/index.js';\nexport * from './components/Button/index.js';\nexport * from './components/Calendar/index.js';\nexport * from './components/Center/index.js';\nexport * from './components/Checkbox/index.js';\nexport * from './components/ComboBox/index.js';\nexport * from './components/CurrencyInput/index.js';\nexport * from './components/CurrencyLabel/index.js';\nexport * from './components/DateInput/index.js';\nexport * from './components/DatePicker/index.js';\nexport * from './components/DateRangePicker/index.js';\nexport * from './components/Dropdown/index.js';\nexport * from './components/DropdownMenu/index.js';\nexport * from './components/FileUploader/index.js';\nexport * from './components/FxInput/index.js';\nexport * from './components/Gapped/index.js';\nexport * from './components/GlobalLoader/index.js';\nexport * from './components/Group/index.js';\nexport * from './components/Hint/index.js';\nexport * from './components/Input/index.js';\nexport * from './components/Kebab/index.js';\nexport * from './components/Link/index.js';\nexport * from './components/Loader/index.js';\nexport * from './components/MenuFooter/index.js';\nexport * from './components/MenuHeader/index.js';\nexport * from './components/MenuItem/index.js';\nexport * from './components/MenuSeparator/index.js';\nexport * from './components/MiniModal/index.js';\nexport * from './components/Modal/index.js';\nexport * from './components/Paging/index.js';\nexport * from './components/PasswordInput/index.js';\nexport * from './components/Radio/index.js';\nexport * from './components/RadioGroup/index.js';\nexport * from './components/ScrollContainer/index.js';\nexport * from './components/Select/index.js';\nexport * from './components/SidePage/index.js';\nexport * from './components/Spinner/index.js';\nexport * from './components/Sticky/index.js';\nexport * from './components/Switcher/index.js';\nexport * from './components/Tabs/index.js';\nexport * from './components/Textarea/index.js';\nexport * from './components/TimePicker/index.js';\nexport * from './components/Toast/index.js';\nexport * from './components/SingleToast/index.js';\nexport * from './components/Toggle/index.js';\nexport * from './components/Token/index.js';\nexport * from './components/TokenInput/index.js';\nexport * from './components/Tooltip/index.js';\nexport * from './components/TooltipMenu/index.js';\nexport * from './components/ResponsiveLayout/index.js';\nexport * from './components/MaskedInput/index.js';\nexport * from './lib/featureFlagsContext/index.js';\nexport * from './lib/locale/index.js';\nexport * from './lib/size/index.js';\nexport * from './lib/theming/ThemeContext.js';\nexport * from './lib/theming/ThemeFactory.js';\nexport * from './lib/theming/themes/LightTheme.js';\nexport * from './lib/theming/themes/DarkTheme.js';\nexport * from './lib/types/props.js';\nexport * from './internal/Popup/types.js';\nexport type { PopupMenuCaptionProps } from './internal/PopupMenu/index.js';\nexport * as ColorFunctions from './lib/styles/ColorFunctions.js';\nexport * as DimensionFunctions from './lib/styles/DimensionFunctions.js';\n"]}

package/internal/ClearCrossIcon/ClearCrossIcon.js CHANGED Viewed

@@ -21,25 +21,28 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import React from 'react';
-import { cx } from '../../lib/cx.js';
 import { useKeyListener } from '../../lib/events/keyListener.js';
-import { useGlobal } from '../../lib/renderEnvironment/index.js';
+import { useEmotion, useGlobal, useStyles } from '../../lib/renderEnvironment/index.js';
+import { ThemeContext } from '../../lib/theming/ThemeContext.js';
 import { CommonWrapper } from '../CommonWrapper/index.js';
-import { styles } from './ClearCrossIcon.css.js';
+import { getStyles } from './ClearCrossIcon.styles.js';
 import { CrossIcon } from './CrossIcon.js';
 export var ClearCrossIcon = function (_a) {
     var _b = _a.size, size = _b === void 0 ? 'small' : _b, style = _a.style, dataTid = _a["data-tid"], rest = __rest(_a, ["size", "style", 'data-tid']);
     var globalObject = useGlobal();
+    var cx = useEmotion().cx;
+    var styles = useStyles(getStyles);
+    var theme = React.useContext(ThemeContext);
     var keyListener = useKeyListener();
     var getSizeClassNames = function (size) {
         switch (size) {
             case 'large':
-                return { button: styles.clearCrossLarge, span: styles.relativeWidthLarge };
+                return { button: styles.clearCrossLarge(theme), span: styles.relativeWidthLarge(theme) };
             case 'medium':
-                return { button: styles.clearCrossMedium, span: styles.relativeWidthMedium };
+                return { button: styles.clearCrossMedium(theme), span: styles.relativeWidthMedium(theme) };
             case 'small':
             default:
-                return { button: styles.clearCrossSmall, span: styles.relativeWidthSmall };
+                return { button: styles.clearCrossSmall(theme), span: styles.relativeWidthSmall(theme) };
         }
     };
     var _c = React.useState(false), focusedByTab = _c[0], setFocusedByTab = _c[1];
@@ -55,9 +58,9 @@ export var ClearCrossIcon = function (_a) {
     var handleBlur = function () { return setFocusedByTab(false); };
     return (React.createElement(CommonWrapper, __assign({}, rest),
         React.createElement("span", { className: getSizeClassNames(size).span },
-            React.createElement("button", __assign({ "data-tid": dataTid, type: "button", tabIndex: -1, className: cx(styles.root,
+            React.createElement("button", __assign({ "data-tid": dataTid, type: "button", tabIndex: -1, className: cx(styles.root(theme),
                 // Todo: use &:focus-visible on root instead styles.focus. It supported on Chrome >= 86, Firefox >= 4, Safari >= 15.4
-                focusedByTab && styles.focus, getSizeClassNames(size).button), style: style, onFocus: handleFocus, onBlur: handleBlur }, rest),
+                focusedByTab && styles.focus(theme), getSizeClassNames(size).button), style: style, onFocus: handleFocus, onBlur: handleBlur }, rest),
                 React.createElement(CrossIcon, { size: size, focusable: true })))));
 };
 ClearCrossIcon.__KONTUR_REACT_UI__ = 'ClearCrossIcon';

package/internal/ClearCrossIcon/ClearCrossIcon.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ClearCrossIcon.js","sourceRoot":"","sources":["ClearCrossIcon.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAAE,~~EAAE~~,EAAE,MAAM,~~iBAAiB~~,CAAC;~~AACrC~~,OAAO,EAAE,~~cAAc~~,EAAE,MAAM,~~iCAAiC~~,CAAC;~~AACjE~~,OAAO,EAAE,~~SAAS~~,EAAE,MAAM,~~sCAAsC~~,CAAC;AAGjE,OAAO,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAC;AAC1D,OAAO,EAAE,~~MAAM~~,EAAE,MAAM,~~yBAAyB~~,CAAC;~~AACjD~~,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAU3C,MAAM,CAAC,IAAM,cAAc,GAAiD,UAAC,EAK5E;IAJC,IAAA,YAAc,EAAd,IAAI,mBAAG,OAAO,KAAA,EACd,KAAK,WAAA,EACO,OAAO,iBAAA,EAChB,IAAI,cAJoE,6BAK5E,CADQ;IAEP,IAAM,YAAY,GAAG,SAAS,EAAE,CAAC;~~IACjC~~,IAAM,WAAW,GAAG,cAAc,EAAE,CAAC;IACrC,IAAM,iBAAiB,GAAG,UAAC,IAAe;QACxC,QAAQ,IAAI,EAAE,CAAC;YACb,KAAK,OAAO;gBACV,OAAO,EAAE,MAAM,EAAE,MAAM,CAAC,eAAe,EAAE,IAAI,EAAE,MAAM,CAAC,kBAAkB,EAAE,CAAC;~~YAC7E~~,KAAK,QAAQ;gBACX,OAAO,EAAE,MAAM,EAAE,MAAM,CAAC,gBAAgB,EAAE,IAAI,EAAE,MAAM,CAAC,mBAAmB,EAAE,CAAC;~~YAC/E~~,KAAK,OAAO,CAAC;YACb;gBACE,OAAO,EAAE,MAAM,EAAE,MAAM,CAAC,eAAe,EAAE,IAAI,EAAE,MAAM,CAAC,kBAAkB,EAAE,CAAC;~~QAC/E~~,CAAC;IACH,CAAC,CAAC;IAEI,IAAA,KAAkC,KAAK,CAAC,QAAQ,CAAU,KAAK,CAAC,EAA/D,YAAY,QAAA,EAAE,eAAe,QAAkC,CAAC;IAEvE,IAAM,WAAW,GAAG;;QAClB,4FAA4F;QAC5F,MAAA,YAAY,CAAC,qBAAqB,6DAAG;YACnC,IAAI,WAAW,CAAC,YAAY,EAAE,CAAC;gBAC7B,eAAe,CAAC,IAAI,CAAC,CAAC;YACxB,CAAC;QACH,CAAC,CAAC,CAAC;IACL,CAAC,CAAC;IACF,IAAM,UAAU,GAAG,cAAM,OAAA,eAAe,CAAC,KAAK,CAAC,EAAtB,CAAsB,CAAC;IAEhD,OAAO,CACL,oBAAC,aAAa,eAAK,IAAI;QACrB,8BAAM,SAAS,EAAE,iBAAiB,CAAC,IAAI,CAAC,CAAC,IAAI;YAC3C,qDACY,OAAO,EACjB,IAAI,EAAC,QAAQ,EACb,QAAQ,EAAE,CAAC,CAAC,EACZ,SAAS,EAAE,EAAE,CACX,MAAM,CAAC,IAAI;~~gBACX~~,qHAAqH;gBACrH,YAAY,IAAI,MAAM,CAAC,KAAK,~~EAC5B~~,iBAAiB,CAAC,IAAI,CAAC,CAAC,MAAM,CAC/B,EACD,KAAK,EAAE,KAAK,EACZ,OAAO,EAAE,WAAW,EACpB,MAAM,EAAE,UAAU,IACd,IAAI;gBAER,oBAAC,SAAS,IAAC,IAAI,EAAE,IAAI,EAAE,SAAS,SAAG,CAC5B,CACJ,CACO,CACjB,CAAC;AACJ,CAAC,CAAC;AAEF,cAAc,CAAC,mBAAmB,GAAG,gBAAgB,CAAC;AACtD,cAAc,CAAC,WAAW,GAAG,gBAAgB,CAAC","sourcesContent":["import type { AriaAttributes } from 'react';\nimport React from 'react';\n\nimport type { TokenSize } from '../../components/Token/index.js';\nimport { cx } from '../../lib/cx.js';\nimport { ~~useKeyListener~~ } from '../../lib/~~events~~/~~keyListener~~.js';\nimport { ~~useGlobal~~ } from '../../lib/~~renderEnvironment~~/~~index~~.js';\nimport type { SizeProp } from '../../lib/types/props.js';\nimport type { CommonProps } from '../CommonWrapper/index.js';\nimport { CommonWrapper } from '../CommonWrapper/index.js';\nimport { ~~styles~~ } from './ClearCrossIcon.~~css~~.js';\nimport { CrossIcon } from './CrossIcon.js';\n\nexport interface ClearCrossIconProps\n extends Pick<AriaAttributes, 'aria-label'>, React.ButtonHTMLAttributes<HTMLButtonElement>, CommonProps {\n /** Ширина и высота иконки крестика\n * @default small */\n size?: SizeProp;\n 'data-tid'?: string;\n}\n\nexport const ClearCrossIcon: React.FunctionComponent<ClearCrossIconProps> = ({\n size = 'small',\n style,\n 'data-tid': dataTid,\n ...rest\n}) => {\n const globalObject = useGlobal();\n const keyListener = useKeyListener();\n const getSizeClassNames = (size: TokenSize) => {\n switch (size) {\n case 'large':\n return { button: styles.clearCrossLarge, span: styles.relativeWidthLarge };\n case 'medium':\n return { button: styles.clearCrossMedium, span: styles.relativeWidthMedium };\n case 'small':\n default:\n return { button: styles.clearCrossSmall, span: styles.relativeWidthSmall };\n }\n };\n\n const [focusedByTab, setFocusedByTab] = React.useState<boolean>(false);\n\n const handleFocus = () => {\n // focus event fires before keyDown eventlistener so we should check tabPressed in async way\n globalObject.requestAnimationFrame?.(() => {\n if (keyListener.isTabPressed) {\n setFocusedByTab(true);\n }\n });\n };\n const handleBlur = () => setFocusedByTab(false);\n\n return (\n <CommonWrapper {...rest}>\n <span className={getSizeClassNames(size).span}>\n <button\n data-tid={dataTid}\n type=\"button\"\n tabIndex={-1}\n className={cx(\n styles.root,\n // Todo: use &:focus-visible on root instead styles.focus. It supported on Chrome >= 86, Firefox >= 4, Safari >= 15.4\n focusedByTab && styles.focus,\n getSizeClassNames(size).button,\n )}\n style={style}\n onFocus={handleFocus}\n onBlur={handleBlur}\n {...rest}\n >\n <CrossIcon size={size} focusable />\n </button>\n </span>\n </CommonWrapper>\n );\n};\n\nClearCrossIcon.__KONTUR_REACT_UI__ = 'ClearCrossIcon';\nClearCrossIcon.displayName = 'ClearCrossIcon';\n"]}
1	+ {"version":3,"file":"ClearCrossIcon.js","sourceRoot":"","sources":["ClearCrossIcon.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { AriaAttributes } from 'react';\nimport React from 'react';\n\nimport type { TokenSize } from '../../components/Token/index.js';\nimport { useKeyListener } from '../../lib/events/keyListener.js';\nimport { useEmotion, useGlobal, useStyles } from '../../lib/renderEnvironment/index.js';\nimport { ThemeContext } from '../../lib/theming/ThemeContext.js';\nimport type { SizeProp } from '../../lib/types/props.js';\nimport type { CommonProps } from '../CommonWrapper/index.js';\nimport { CommonWrapper } from '../CommonWrapper/index.js';\nimport { getStyles } from './ClearCrossIcon.styles.js';\nimport { CrossIcon } from './CrossIcon.js';\n\nexport interface ClearCrossIconProps\n extends Pick<AriaAttributes, 'aria-label'>, React.ButtonHTMLAttributes<HTMLButtonElement>, CommonProps {\n /** Ширина и высота иконки крестика\n * @default small */\n size?: SizeProp;\n 'data-tid'?: string;\n}\n\nexport const ClearCrossIcon: React.FunctionComponent<ClearCrossIconProps> = ({\n size = 'small',\n style,\n 'data-tid': dataTid,\n ...rest\n}) => {\n const globalObject = useGlobal();\n const { cx } = useEmotion();\n const styles = useStyles(getStyles);\n const theme = React.useContext(ThemeContext);\n const keyListener = useKeyListener();\n const getSizeClassNames = (size: TokenSize) => {\n switch (size) {\n case 'large':\n return { button: styles.clearCrossLarge(theme), span: styles.relativeWidthLarge(theme) };\n case 'medium':\n return { button: styles.clearCrossMedium(theme), span: styles.relativeWidthMedium(theme) };\n case 'small':\n default:\n return { button: styles.clearCrossSmall(theme), span: styles.relativeWidthSmall(theme) };\n }\n };\n\n const [focusedByTab, setFocusedByTab] = React.useState<boolean>(false);\n\n const handleFocus = () => {\n // focus event fires before keyDown eventlistener so we should check tabPressed in async way\n globalObject.requestAnimationFrame?.(() => {\n if (keyListener.isTabPressed) {\n setFocusedByTab(true);\n }\n });\n };\n const handleBlur = () => setFocusedByTab(false);\n\n return (\n <CommonWrapper {...rest}>\n <span className={getSizeClassNames(size).span}>\n <button\n data-tid={dataTid}\n type=\"button\"\n tabIndex={-1}\n className={cx(\n styles.root(theme),\n // Todo: use &:focus-visible on root instead styles.focus. It supported on Chrome >= 86, Firefox >= 4, Safari >= 15.4\n focusedByTab && styles.focus(theme),\n getSizeClassNames(size).button,\n )}\n style={style}\n onFocus={handleFocus}\n onBlur={handleBlur}\n {...rest}\n >\n <CrossIcon size={size} focusable />\n </button>\n </span>\n </CommonWrapper>\n );\n};\n\nClearCrossIcon.__KONTUR_REACT_UI__ = 'ClearCrossIcon';\nClearCrossIcon.displayName = 'ClearCrossIcon';\n"]}

package/internal/ClearCrossIcon/ClearCrossIcon.styles.d.ts ADDED Viewed

@@ -0,0 +1,12 @@
+import type { Emotion } from '@emotion/css/create-instance';
+import type { Theme } from '../../lib/theming/Theme.js';
+export declare const getStyles: (emotion: Emotion) => {
+    root(t: Theme): string;
+    focus(t: Theme): string;
+    clearCrossSmall(t: Theme): string;
+    clearCrossMedium(t: Theme): string;
+    clearCrossLarge(t: Theme): string;
+    relativeWidthSmall(t: Theme): string;
+    relativeWidthMedium(t: Theme): string;
+    relativeWidthLarge(t: Theme): string;
+};

package/internal/ClearCrossIcon/ClearCrossIcon.styles.js ADDED Viewed

@@ -0,0 +1,36 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import { resetButton } from '../../lib/styles/Mixins.js';
+import { memoizeStyle } from '../../lib/theming/Emotion.js';
+export var getStyles = function (emotion) {
+    return memoizeStyle({
+        root: function (t) {
+            return emotion.css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      ", "\n      color: ", ";\n      cursor: pointer;\n      transition: color ", " ", ";\n      &:hover {\n        color: ", ";\n      }\n      display: flex;\n      justify-content: ", ";\n      align-items: center;\n      position: absolute;\n      right: -", ";\n      top: -", ";\n    "], ["\n      ", "\n      color: ", ";\n      cursor: pointer;\n      transition: color ", " ", ";\n      &:hover {\n        color: ", ";\n      }\n      display: flex;\n      justify-content: ", ";\n      align-items: center;\n      position: absolute;\n      right: -", ";\n      top: -", ";\n    "])), resetButton(), t.clearCrossIconColor, t.transitionDuration, t.transitionTimingFunction, t.clearCrossIconHoverColor, t.clearCrossIconAlign, t.inputBorderWidth, t.inputBorderWidth);
+        },
+        focus: function (t) {
+            return emotion.css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n        color: ", ";\n      "], ["\n        color: ", ";\n      "])), t.clearCrossIconHoverColor);
+        },
+        clearCrossSmall: function (t) {
+            return emotion.css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n      width: ", ";\n      height: ", ";\n      border-radius: ", ";\n    "], ["\n      width: ", ";\n      height: ", ";\n      border-radius: ", ";\n    "])), t.clearCrossIconWidthSmall, t.clearCrossIconHeightSmall, t.clearCrossIconBorderRadiusSmall);
+        },
+        clearCrossMedium: function (t) {
+            return emotion.css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n      width: ", ";\n      height: ", ";\n      border-radius: ", ";\n    "], ["\n      width: ", ";\n      height: ", ";\n      border-radius: ", ";\n    "])), t.clearCrossIconWidthMedium, t.clearCrossIconHeightMedium, t.clearCrossIconBorderRadiusMedium);
+        },
+        clearCrossLarge: function (t) {
+            return emotion.css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n      width: ", ";\n      height: ", ";\n      border-radius: ", ";\n    "], ["\n      width: ", ";\n      height: ", ";\n      border-radius: ", ";\n    "])), t.clearCrossIconWidthLarge, t.clearCrossIconHeightLarge, t.clearCrossIconBorderRadiusLarge);
+        },
+        relativeWidthSmall: function (t) {
+            return emotion.css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n      display: inline-block;\n      width: ", ";\n    "], ["\n      display: inline-block;\n      width: ", ";\n    "])), t.inputIconSizeSmall);
+        },
+        relativeWidthMedium: function (t) {
+            return emotion.css(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n      display: inline-block;\n      width: ", ";\n    "], ["\n      display: inline-block;\n      width: ", ";\n    "])), t.inputIconSizeMedium);
+        },
+        relativeWidthLarge: function (t) {
+            return emotion.css(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n      display: inline-block;\n      width: ", ";\n    "], ["\n      display: inline-block;\n      width: ", ";\n    "])), t.inputIconSizeLarge);
+        },
+    });
+};
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8;
+//# sourceMappingURL=ClearCrossIcon.styles.js.map

package/internal/ClearCrossIcon/ClearCrossIcon.styles.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"ClearCrossIcon.styles.js","sourceRoot":"","sources":["ClearCrossIcon.styles.tsx"],"names":[],"mappings":";;;;AAEA,OAAO,EAAE,WAAW,EAAE,MAAM,4BAA4B,CAAC;AACzD,OAAO,EAAE,YAAY,EAAE,MAAM,8BAA8B,CAAC;AAG5D,MAAM,CAAC,IAAM,SAAS,GAAG,UAAC,OAAgB;IACxC,OAAA,YAAY,CAAC;QACX,IAAI,YAAC,CAAQ;YACX,OAAO,OAAO,CAAC,GAAG,0WAAA,UAChB,EAAa,iBACN,EAAqB,qDAEV,EAAoB,GAAI,EAA0B,qCAE3D,EAA0B,2DAGlB,EAAqB,0EAG9B,EAAkB,iBACpB,EAAkB,SAC3B,KAbG,WAAW,EAAE,EACN,CAAC,CAAC,mBAAmB,EAEV,CAAC,CAAC,kBAAkB,EAAI,CAAC,CAAC,wBAAwB,EAE3D,CAAC,CAAC,wBAAwB,EAGlB,CAAC,CAAC,mBAAmB,EAG9B,CAAC,CAAC,gBAAgB,EACpB,CAAC,CAAC,gBAAgB,EAC1B;QACF,CAAC;QAED,KAAK,YAAC,CAAQ;YACZ,OAAO,OAAO,CAAC,GAAG,mGAAA,mBACP,EAA0B,WACpC,KADU,CAAC,CAAC,wBAAwB,EACnC;QACJ,CAAC;QAED,eAAe,YAAC,CAAQ;YACtB,OAAO,OAAO,CAAC,GAAG,gJAAA,iBACT,EAA0B,mBACzB,EAA2B,0BACpB,EAAiC,SACnD,KAHU,CAAC,CAAC,wBAAwB,EACzB,CAAC,CAAC,yBAAyB,EACpB,CAAC,CAAC,+BAA+B,EAClD;QACF,CAAC;QACD,gBAAgB,YAAC,CAAQ;YACvB,OAAO,OAAO,CAAC,GAAG,gJAAA,iBACT,EAA2B,mBAC1B,EAA4B,0BACrB,EAAkC,SACpD,KAHU,CAAC,CAAC,yBAAyB,EAC1B,CAAC,CAAC,0BAA0B,EACrB,CAAC,CAAC,gCAAgC,EACnD;QACF,CAAC;QACD,eAAe,YAAC,CAAQ;YACtB,OAAO,OAAO,CAAC,GAAG,gJAAA,iBACT,EAA0B,mBACzB,EAA2B,0BACpB,EAAiC,SACnD,KAHU,CAAC,CAAC,wBAAwB,EACzB,CAAC,CAAC,yBAAyB,EACpB,CAAC,CAAC,+BAA+B,EAClD;QACF,CAAC;QACD,kBAAkB,YAAC,CAAQ;YACzB,OAAO,OAAO,CAAC,GAAG,6HAAA,+CAET,EAAoB,SAC9B,KADU,CAAC,CAAC,kBAAkB,EAC7B;QACF,CAAC;QACD,mBAAmB,YAAC,CAAQ;YAC1B,OAAO,OAAO,CAAC,GAAG,6HAAA,+CAET,EAAqB,SAC/B,KADU,CAAC,CAAC,mBAAmB,EAC9B;QACF,CAAC;QACD,kBAAkB,YAAC,CAAQ;YACzB,OAAO,OAAO,CAAC,GAAG,6HAAA,+CAET,EAAoB,SAC9B,KADU,CAAC,CAAC,kBAAkB,EAC7B;QACF,CAAC;KACF,CAAC;AAhEF,CAgEE,CAAC","sourcesContent":["import type { Emotion } from '@emotion/css/create-instance';\n\nimport { resetButton } from '../../lib/styles/Mixins.js';\nimport { memoizeStyle } from '../../lib/theming/Emotion.js';\nimport type { Theme } from '../../lib/theming/Theme.js';\n\nexport const getStyles = (emotion: Emotion) =>\n memoizeStyle({\n root(t: Theme) {\n return emotion.css`\n ${resetButton()}\n color: ${t.clearCrossIconColor};\n cursor: pointer;\n transition: color ${t.transitionDuration} ${t.transitionTimingFunction};\n &:hover {\n color: ${t.clearCrossIconHoverColor};\n }\n display: flex;\n justify-content: ${t.clearCrossIconAlign};\n align-items: center;\n position: absolute;\n right: -${t.inputBorderWidth};\n top: -${t.inputBorderWidth};\n `;\n },\n\n focus(t: Theme) {\n return emotion.css`\n color: ${t.clearCrossIconHoverColor};\n `;\n },\n\n clearCrossSmall(t: Theme) {\n return emotion.css`\n width: ${t.clearCrossIconWidthSmall};\n height: ${t.clearCrossIconHeightSmall};\n border-radius: ${t.clearCrossIconBorderRadiusSmall};\n `;\n },\n clearCrossMedium(t: Theme) {\n return emotion.css`\n width: ${t.clearCrossIconWidthMedium};\n height: ${t.clearCrossIconHeightMedium};\n border-radius: ${t.clearCrossIconBorderRadiusMedium};\n `;\n },\n clearCrossLarge(t: Theme) {\n return emotion.css`\n width: ${t.clearCrossIconWidthLarge};\n height: ${t.clearCrossIconHeightLarge};\n border-radius: ${t.clearCrossIconBorderRadiusLarge};\n `;\n },\n relativeWidthSmall(t: Theme) {\n return emotion.css`\n display: inline-block;\n width: ${t.inputIconSizeSmall};\n `;\n },\n relativeWidthMedium(t: Theme) {\n return emotion.css`\n display: inline-block;\n width: ${t.inputIconSizeMedium};\n `;\n },\n relativeWidthLarge(t: Theme) {\n return emotion.css`\n display: inline-block;\n width: ${t.inputIconSizeLarge};\n `;\n },\n });\n"]}

package/internal/CloseButtonIcon/CloseButtonIcon.js CHANGED Viewed

@@ -21,26 +21,24 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import React from 'react';
-import { cx } from '../../lib/cx.js';
 import { useKeyListener } from '../../lib/events/keyListener.js';
-import { useGlobal } from '../../lib/renderEnvironment/index.js';
-import { themeVarName } from '../../lib/theming/themeVars.js';
+import { useEmotion, useGlobal, useStyles } from '../../lib/renderEnvironment/index.js';
+import { ThemeContext } from '../../lib/theming/ThemeContext.js';
+import { ThemeFactory } from '../../lib/theming/ThemeFactory.js';
 import { CommonWrapper } from '../CommonWrapper/index.js';
 import { DEFAULT_ICON_SIZE } from '../icons2022/iconConstants.js';
-import { styles } from './CloseButtonIcon.css.js';
+import { getStyles } from './CloseButtonIcon.styles.js';
 import { CrossIcon } from './CrossIcon.js';
 export var CloseButtonIcon = function (_a) {
     var _b = _a.side, side = _b === void 0 ? DEFAULT_ICON_SIZE : _b, _c = _a.size, size = _c === void 0 ? DEFAULT_ICON_SIZE : _c, color = _a.color, colorHover = _a.colorHover, _d = _a.tabbable, tabbable = _d === void 0 ? true : _d, style = _a.style, rest = __rest(_a, ["side", "size", "color", "colorHover", "tabbable", "style"]);
     var globalObject = useGlobal();
-    // значения темы зашиты в CSS как var(--k-*), поэтому переопределение цвета передаём переменными
-    // (`inherit` внутри var() не работает, для него есть отдельные классы)
-    var colorVars = {};
-    if (color && color !== 'inherit') {
-        colorVars[themeVarName('closeBtnIconColor')] = color;
-    }
-    if (colorHover && colorHover !== 'inherit') {
-        colorVars[themeVarName('closeBtnIconHoverColor')] = colorHover;
-    }
+    var cx = useEmotion().cx;
+    var styles = useStyles(getStyles);
+    var _theme = React.useContext(ThemeContext);
+    var theme = ThemeFactory.create({
+        closeBtnIconColor: color !== null && color !== void 0 ? color : _theme.closeBtnIconColor,
+        closeBtnIconHoverColor: colorHover !== null && colorHover !== void 0 ? colorHover : _theme.closeBtnIconHoverColor,
+    }, _theme);
     var keyListener = useKeyListener();
     var _e = React.useState(false), focusedByTab = _e[0], setFocusedByTab = _e[1];
     var handleFocus = function () {
@@ -56,8 +54,8 @@ export var CloseButtonIcon = function (_a) {
     var handleBlur = function () { return setFocusedByTab(false); };
     var tabIndex = !tabbable || rest.disabled ? -1 : 0;
     return (React.createElement(CommonWrapper, __assign({}, rest),
-        React.createElement("button", __assign({ tabIndex: tabIndex, className: cx(styles.root, color === 'inherit' && styles.inheritColor, colorHover === 'inherit' && styles.inheritHoverColor, !rest.disabled && focusedByTab && styles.focus, rest.disabled && styles.rootDisabled), style: __assign(__assign({ width: side, height: side }, colorVars), style), onFocus: handleFocus, onBlur: handleBlur }, rest),
-            React.createElement("span", { className: styles.wrapper },
+        React.createElement("button", __assign({ tabIndex: tabIndex, className: cx(styles.root(theme), !rest.disabled && focusedByTab && styles.focus(theme), rest.disabled && styles.rootDisabled(theme)), style: __assign({ width: side, height: side }, style), onFocus: handleFocus, onBlur: handleBlur }, rest),
+            React.createElement("span", { className: styles.wrapper() },
                 React.createElement(CrossIcon, { size: side < size ? side : size, focusable: tabIndex >= 0 })))));
 };
 CloseButtonIcon.__KONTUR_REACT_UI__ = 'CloseButtonIcon';

package/internal/CloseButtonIcon/CloseButtonIcon.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"CloseButtonIcon.js","sourceRoot":"","sources":["CloseButtonIcon.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,~~EAAE~~,EAAE,MAAM,~~iBAAiB~~,CAAC;~~AACrC~~,OAAO,EAAE,~~cAAc~~,EAAE,MAAM,~~iCAAiC~~,CAAC;~~AACjE~~,OAAO,EAAE,~~SAAS~~,EAAE,MAAM,~~sCAAsC~~,CAAC;AACjE,OAAO,EAAE,YAAY,EAAE,MAAM,~~gCAAgC~~,CAAC;~~AAE9D~~,OAAO,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAC;AAC1D,OAAO,EAAE,iBAAiB,EAAE,MAAM,+BAA+B,CAAC;AAClE,OAAO,EAAE,~~MAAM~~,EAAE,MAAM,~~0BAA0B~~,CAAC;~~AAClD~~,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAoC3C,MAAM,CAAC,IAAM,eAAe,GAAkD,UAAC,EAQ9E;IAPC,IAAA,YAAwB,EAAxB,IAAI,mBAAG,iBAAiB,KAAA,EACxB,YAAwB,EAAxB,IAAI,mBAAG,iBAAiB,KAAA,EACxB,KAAK,WAAA,EACL,UAAU,gBAAA,EACV,gBAAe,EAAf,QAAQ,mBAAG,IAAI,KAAA,EACf,KAAK,WAAA,EACF,IAAI,cAPsE,4DAQ9E,CADQ;IAEP,IAAM,YAAY,GAAG,SAAS,EAAE,CAAC;~~IACjC~~,~~gGAAgG;IAChG~~,~~uEAAuE;IACvE~~,~~IAAM~~,~~SAAS~~,~~GAA2B,~~EAAE,~~CAAC~~;~~IAC7C~~,~~IAAI~~,~~KAAK~~,~~IAAI~~,~~KAAK~~,~~KAAK~~,SAAS,~~EAAE~~,CAAC;~~QACjC~~,~~SAAS~~,CAAC,~~YAAY~~,CAAC,~~mBAAmB~~,CAAC,CAAC,~~GAAG~~,KAAK,CAAC~~;IACvD~~,~~CAAC~~;~~IACD~~,~~IAAI~~,~~UAAU~~,~~IAAI~~,~~UAAU~~,KAAK,~~SAAS~~,~~EAAE~~,~~CAAC;QAC3C~~,~~SAAS~~,CAAC,~~YAAY~~,~~CAAC~~,~~wBAAwB~~,~~CAAC~~,~~CAAC~~,~~GAAG~~,UAAU,CAAC;~~IACjE~~,CAAC;~~IACD~~,IAAM,WAAW,GAAG,cAAc,EAAE,CAAC;IAC/B,IAAA,KAAkC,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,EAAtD,YAAY,QAAA,EAAE,eAAe,QAAyB,CAAC;IAE9D,IAAM,WAAW,GAAG;;QAClB,iDAAiD;QACjD,6CAA6C;QAC7C,MAAA,YAAY,CAAC,qBAAqB,6DAAG;YACnC,IAAI,WAAW,CAAC,YAAY,EAAE,CAAC;gBAC7B,eAAe,CAAC,IAAI,CAAC,CAAC;YACxB,CAAC;QACH,CAAC,CAAC,CAAC;IACL,CAAC,CAAC;IACF,IAAM,UAAU,GAAG,cAAM,OAAA,eAAe,CAAC,KAAK,CAAC,EAAtB,CAAsB,CAAC;IAEhD,IAAM,QAAQ,GAAG,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;IAErD,OAAO,CACL,oBAAC,aAAa,eAAK,IAAI;QACrB,yCACE,QAAQ,EAAE,QAAQ,EAClB,SAAS,EAAE,EAAE,CACX,MAAM,CAAC,IAAI,~~EACX,KAAK,KAAK,SAAS,IAAI,MAAM,~~CAAC,~~YAAY,EAC1C,UAAU,~~KAAK,~~SAAS,IAAI,MAAM,~~CAAC,~~iBAAiB~~,~~EACpD,~~CAAC,IAAI,CAAC,QAAQ,IAAI,YAAY,IAAI,MAAM,CAAC,KAAK,~~EAC9C~~,IAAI,CAAC,QAAQ,IAAI,MAAM,CAAC,YAAY,~~CACrC~~,EACD,KAAK,~~sBAAI~~,KAAK,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,IAAK,~~SAAS,GAAK,~~KAAK,~~GAC1D~~,OAAO,EAAE,WAAW,EACpB,MAAM,EAAE,UAAU,IACd,IAAI;YAER,8BAAM,SAAS,EAAE,MAAM,CAAC,OAAO;~~gBAC7B~~,oBAAC,SAAS,IAAC,IAAI,EAAE,IAAI,GAAG,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,EAAE,SAAS,EAAE,QAAQ,IAAI,CAAC,GAAI,CACnE,CACA,CACK,CACjB,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,CAAC,mBAAmB,GAAG,iBAAiB,CAAC;AACxD,eAAe,CAAC,WAAW,GAAG,iBAAiB,CAAC","sourcesContent":["import type { AriaAttributes, CSSProperties } from 'react';\nimport React from 'react';\n\nimport { cx } from '../../lib/cx.js';\nimport { ~~useKeyListener~~ } from '../../lib/~~events~~/~~keyListener~~.js';\nimport { ~~useGlobal~~ } from '../../lib/~~renderEnvironment~~/~~index~~.js';\nimport { ~~themeVarName~~ } from '../../lib/theming/~~themeVars~~.js';\nimport type { CommonProps } from '../CommonWrapper/index.js';\nimport { CommonWrapper } from '../CommonWrapper/index.js';\nimport { DEFAULT_ICON_SIZE } from '../icons2022/iconConstants.js';\nimport { ~~styles~~ } from './CloseButtonIcon.~~css~~.js';\nimport { CrossIcon } from './CrossIcon.js';\n\nexport interface CloseButtonIconProps\n extends Pick<AriaAttributes, 'aria-label'>, React.ButtonHTMLAttributes<HTMLButtonElement>, CommonProps {\n /*\n Ширина и высота иконки крестика\n \n @default 16\n /\n size?: number;\n /\n Ширина и высота всей кнопки\n \n @default 16\n /\n side?: number;\n /\n Цвет иконки\n \n Переменная темы: `closeBtnIconColor`\n /\n color?: CSSProperties['color'];\n /\n Цвет иконки при наведении мышью и при фокусе\n \n Переменная темы: `closeBtnIconHoverColor`\n /\n colorHover?: CSSProperties['color'];\n /\n Возможность сфокусироваться на кнопке клавишей TAB\n \n @default true\n * /\n tabbable?: boolean;\n}\n\nexport const CloseButtonIcon: React.FunctionComponent<CloseButtonIconProps> = ({\n side = DEFAULT_ICON_SIZE,\n size = DEFAULT_ICON_SIZE,\n color,\n colorHover,\n tabbable = true,\n style,\n ...rest\n}) => {\n const globalObject = useGlobal();\n // ~~значения~~ ~~темы~~ ~~зашиты~~ в ~~CSS как var~~(--k-)~~, поэтому переопределение цвета передаём переменными\~~n // ~~(`inherit`~~ ~~внутри~~ ~~var~~() ~~не работает, для него есть отдельные классы)\~~n const ~~colorVars:~~ ~~Record<string, string>~~ = {};\n if ~~(color~~ && ~~color !== 'inherit')~~ {\n ~~colorVars[themeVarName('~~closeBtnIconColor~~')]~~ = color~~;\n }\n if~~ ~~(colorHover~~ && colorHover ~~!==~~ ~~'inherit') {\~~n ~~colorVars[themeVarName('closeBtnIconHoverColor'~~)~~] = colorHover~~;\n ~~}\n~~ const keyListener = useKeyListener();\n const [focusedByTab, setFocusedByTab] = React.useState(false);\n\n const handleFocus = () => {\n // focus event fires before keyDown eventlistener\n // so we should check tabPressed in async way\n globalObject.requestAnimationFrame?.(() => {\n if (keyListener.isTabPressed) {\n setFocusedByTab(true);\n }\n });\n };\n const handleBlur = () => setFocusedByTab(false);\n\n const tabIndex = !tabbable \|\| rest.disabled ? -1 : 0;\n\n return (\n <CommonWrapper {...rest}>\n <button\n tabIndex={tabIndex}\n className={cx(\n styles.root,\n ~~color === 'inherit' && styles.inheritColor,\n colorHover === 'inherit' && styles.inheritHoverColor,\n~~ !rest.disabled && focusedByTab && styles.focus,\n rest.disabled && styles.rootDisabled,\n )}\n style={{ width: side, height: side, ...~~colorVars, ...~~style }}\n onFocus={handleFocus}\n onBlur={handleBlur}\n {...rest}\n >\n <span className={styles.wrapper}>\n <CrossIcon size={side < size ? side : size} focusable={tabIndex >= 0} />\n </span>\n </button>\n </CommonWrapper>\n );\n};\n\nCloseButtonIcon.__KONTUR_REACT_UI__ = 'CloseButtonIcon';\nCloseButtonIcon.displayName = 'CloseButtonIcon';\n"]}
1	+ {"version":3,"file":"CloseButtonIcon.js","sourceRoot":"","sources":["CloseButtonIcon.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { AriaAttributes, CSSProperties } from 'react';\nimport React from 'react';\n\nimport { useKeyListener } from '../../lib/events/keyListener.js';\nimport { useEmotion, useGlobal, useStyles } from '../../lib/renderEnvironment/index.js';\nimport { ThemeContext } from '../../lib/theming/ThemeContext.js';\nimport { ThemeFactory } from '../../lib/theming/ThemeFactory.js';\nimport type { CommonProps } from '../CommonWrapper/index.js';\nimport { CommonWrapper } from '../CommonWrapper/index.js';\nimport { DEFAULT_ICON_SIZE } from '../icons2022/iconConstants.js';\nimport { getStyles } from './CloseButtonIcon.styles.js';\nimport { CrossIcon } from './CrossIcon.js';\n\nexport interface CloseButtonIconProps\n extends Pick<AriaAttributes, 'aria-label'>, React.ButtonHTMLAttributes<HTMLButtonElement>, CommonProps {\n /*\n Ширина и высота иконки крестика\n \n @default 16\n /\n size?: number;\n /\n Ширина и высота всей кнопки\n \n @default 16\n /\n side?: number;\n /\n Цвет иконки\n \n Переменная темы: `closeBtnIconColor`\n /\n color?: CSSProperties['color'];\n /\n Цвет иконки при наведении мышью и при фокусе\n \n Переменная темы: `closeBtnIconHoverColor`\n /\n colorHover?: CSSProperties['color'];\n /\n Возможность сфокусироваться на кнопке клавишей TAB\n \n @default true\n * */\n tabbable?: boolean;\n}\n\nexport const CloseButtonIcon: React.FunctionComponent<CloseButtonIconProps> = ({\n side = DEFAULT_ICON_SIZE,\n size = DEFAULT_ICON_SIZE,\n color,\n colorHover,\n tabbable = true,\n style,\n ...rest\n}) => {\n const globalObject = useGlobal();\n const { cx } = useEmotion();\n const styles = useStyles(getStyles);\n const _theme = React.useContext(ThemeContext);\n const theme = ThemeFactory.create(\n {\n closeBtnIconColor: color ?? _theme.closeBtnIconColor,\n closeBtnIconHoverColor: colorHover ?? _theme.closeBtnIconHoverColor,\n },\n _theme,\n );\n const keyListener = useKeyListener();\n const [focusedByTab, setFocusedByTab] = React.useState(false);\n\n const handleFocus = () => {\n // focus event fires before keyDown eventlistener\n // so we should check tabPressed in async way\n globalObject.requestAnimationFrame?.(() => {\n if (keyListener.isTabPressed) {\n setFocusedByTab(true);\n }\n });\n };\n const handleBlur = () => setFocusedByTab(false);\n\n const tabIndex = !tabbable \|\| rest.disabled ? -1 : 0;\n\n return (\n <CommonWrapper {...rest}>\n <button\n tabIndex={tabIndex}\n className={cx(\n styles.root(theme),\n !rest.disabled && focusedByTab && styles.focus(theme),\n rest.disabled && styles.rootDisabled(theme),\n )}\n style={{ width: side, height: side, ...style }}\n onFocus={handleFocus}\n onBlur={handleBlur}\n {...rest}\n >\n <span className={styles.wrapper()}>\n <CrossIcon size={side < size ? side : size} focusable={tabIndex >= 0} />\n </span>\n </button>\n </CommonWrapper>\n );\n};\n\nCloseButtonIcon.__KONTUR_REACT_UI__ = 'CloseButtonIcon';\nCloseButtonIcon.displayName = 'CloseButtonIcon';\n"]}

package/internal/CloseButtonIcon/CloseButtonIcon.styles.d.ts ADDED Viewed

@@ -0,0 +1,8 @@
+import type { Emotion } from '@emotion/css/create-instance';
+import type { Theme } from '../../lib/theming/Theme.js';
+export declare const getStyles: (emotion: Emotion) => {
+    root(t: Theme): string;
+    rootDisabled(t: Theme): string;
+    focus(t: Theme): string;
+    wrapper(): string;
+};

package/internal/CloseButtonIcon/CloseButtonIcon.styles.js ADDED Viewed

@@ -0,0 +1,24 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import { resetButton } from '../../lib/styles/Mixins.js';
+import { memoizeStyle } from '../../lib/theming/Emotion.js';
+export var getStyles = function (emotion) {
+    return memoizeStyle({
+        root: function (t) {
+            return emotion.css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n        ", "\n        display: inline-block;\n        position: relative;\n        border-radius: ", ";\n        color: ", ";\n        cursor: pointer;\n        transition: color ", " ", ";\n\n        &:enabled:focus,\n        &:enabled:hover {\n          color: ", ";\n        }\n      "], ["\n        ", "\n        display: inline-block;\n        position: relative;\n        border-radius: ", ";\n        color: ", ";\n        cursor: pointer;\n        transition: color ", " ", ";\n\n        &:enabled:focus,\n        &:enabled:hover {\n          color: ", ";\n        }\n      "])), resetButton(), t.closeBtnIconBorderRadius, t.closeBtnIconColor, t.transitionDuration, t.transitionTimingFunction, t.closeBtnIconHoverColor);
+        },
+        rootDisabled: function (t) {
+            return emotion.css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n        color: ", ";\n      "], ["\n        color: ", ";\n      "])), t.closeBtnIconDisabledColor);
+        },
+        focus: function (t) {
+            return emotion.css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n        box-shadow: ", ";\n      "], ["\n        box-shadow: ", ";\n      "])), t.closeBtnIconFocusShadow);
+        },
+        wrapper: function () {
+            return emotion.css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n        box-sizing: content-box;\n        display: flex;\n        width: 100%;\n        height: 100%;\n        align-items: center;\n        justify-content: center;\n        pointer-events: none;\n      "], ["\n        box-sizing: content-box;\n        display: flex;\n        width: 100%;\n        height: 100%;\n        align-items: center;\n        justify-content: center;\n        pointer-events: none;\n      "])));
+        },
+    });
+};
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
+//# sourceMappingURL=CloseButtonIcon.styles.js.map

package/internal/CloseButtonIcon/CloseButtonIcon.styles.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"CloseButtonIcon.styles.js","sourceRoot":"","sources":["CloseButtonIcon.styles.tsx"],"names":[],"mappings":";;;;AAEA,OAAO,EAAE,WAAW,EAAE,MAAM,4BAA4B,CAAC;AACzD,OAAO,EAAE,YAAY,EAAE,MAAM,8BAA8B,CAAC;AAG5D,MAAM,CAAC,IAAM,SAAS,GAAG,UAAC,OAAgB;IACxC,OAAA,YAAY,CAAC;QACX,IAAI,YAAC,CAAQ;YACX,OAAO,OAAO,CAAC,GAAG,sWAAA,YACd,EAAa,wFAGE,EAA0B,oBAClC,EAAmB,yDAER,EAAoB,GAAI,EAA0B,6EAI3D,EAAwB,sBAEpC,KAZG,WAAW,EAAE,EAGE,CAAC,CAAC,wBAAwB,EAClC,CAAC,CAAC,iBAAiB,EAER,CAAC,CAAC,kBAAkB,EAAI,CAAC,CAAC,wBAAwB,EAI3D,CAAC,CAAC,sBAAsB,EAEnC;QACJ,CAAC;QACD,YAAY,YAAC,CAAQ;YACnB,OAAO,OAAO,CAAC,GAAG,mGAAA,mBACP,EAA2B,WACrC,KADU,CAAC,CAAC,yBAAyB,EACpC;QACJ,CAAC;QACD,KAAK,YAAC,CAAQ;YACZ,OAAO,OAAO,CAAC,GAAG,wGAAA,wBACF,EAAyB,WACxC,KADe,CAAC,CAAC,uBAAuB,EACvC;QACJ,CAAC;QACD,OAAO;YACL,OAAO,OAAO,CAAC,GAAG,mRAAA,gNAQjB,KAAC;QACJ,CAAC;KACF,CAAC;AAtCF,CAsCE,CAAC","sourcesContent":["import type { Emotion } from '@emotion/css/create-instance';\n\nimport { resetButton } from '../../lib/styles/Mixins.js';\nimport { memoizeStyle } from '../../lib/theming/Emotion.js';\nimport type { Theme } from '../../lib/theming/Theme.js';\n\nexport const getStyles = (emotion: Emotion) =>\n memoizeStyle({\n root(t: Theme) {\n return emotion.css`\n ${resetButton()}\n display: inline-block;\n position: relative;\n border-radius: ${t.closeBtnIconBorderRadius};\n color: ${t.closeBtnIconColor};\n cursor: pointer;\n transition: color ${t.transitionDuration} ${t.transitionTimingFunction};\n\n &:enabled:focus,\n &:enabled:hover {\n color: ${t.closeBtnIconHoverColor};\n }\n `;\n },\n rootDisabled(t: Theme) {\n return emotion.css`\n color: ${t.closeBtnIconDisabledColor};\n `;\n },\n focus(t: Theme) {\n return emotion.css`\n box-shadow: ${t.closeBtnIconFocusShadow};\n `;\n },\n wrapper() {\n return emotion.css`\n box-sizing: content-box;\n display: flex;\n width: 100%;\n height: 100%;\n align-items: center;\n justify-content: center;\n pointer-events: none;\n `;\n },\n });\n"]}

package/internal/CommonWrapper/CommonWrapper.d.ts CHANGED Viewed

@@ -1,19 +1,15 @@
 import React from 'react';
 import type { TGetRootNode } from '../../lib/rootNode/index.js';
-import type { Theme } from '../../lib/theming/Theme.js';
 import type { CommonProps, CommonPropsRootNodeRef, CommonWrapperProps } from './types.js';
 export type CommonPropsWithRootNodeRef = CommonProps & CommonPropsRootNodeRef;
 export declare class CommonWrapper<P extends CommonPropsWithRootNodeRef> extends React.Component<CommonWrapperProps<P> & CommonPropsRootNodeRef> {
     static __KONTUR_REACT_UI__: string;
     static displayName: string;
-    static contextType: React.Context<Readonly<typeof import("../themes/BasicTheme.js").BasicThemeClass>>;
-    context: Theme;
-    private carrierTheme;
+    private cx;
     private child;
     getRootNode: TGetRootNode;
     private setRootNode;
     private rootNodeSubscription;
-    render(): React.JSX.Element;
-    private isHostChild;
+    render(): React.ReactNode;
     private ref;
 }

package/internal/CommonWrapper/CommonWrapper.js CHANGED Viewed

@@ -44,11 +44,9 @@ var __rest = (this && this.__rest) || function (s, e) {
 import React from 'react';
 import warning from 'warning';
 import { callChildRef } from '../../lib/callChildRef/callChildRef.js';
-import { cx } from '../../lib/cx.js';
 import { getElementRef } from '../../lib/getElementRef.js';
+import { withRenderEnvironment } from '../../lib/renderEnvironment/index.js';
 import { getRootNode, isInstanceWithRootNode, rootNode } from '../../lib/rootNode/index.js';
-import { ThemeContext } from '../../lib/theming/ThemeContext.js';
-import { getServerThemeVarsAttr, getThemeSetTokens, getThemeVars, omitThemeVars, ThemeCarrierContext, } from '../../lib/theming/themeVars.js';
 import { isFunction, isRefableElement } from '../../lib/utils.js';
 import { extractCommonProps } from './utils/extractCommonProps.js';
 import { getCommonVisualStateDataAttributes } from './utils/getCommonVisualStateDataAttributes.js';
@@ -56,7 +54,6 @@ var CommonWrapper = /** @class */ (function (_super) {
     __extends(CommonWrapper, _super);
     function CommonWrapper() {
         var _this = _super !== null && _super.apply(this, arguments) || this;
-        _this.carrierTheme = null;
         _this.rootNodeSubscription = null;
         _this.ref = function (instance) {
             var _a, _b, _c, _d;
@@ -91,39 +88,20 @@ var CommonWrapper = /** @class */ (function (_super) {
         var getChildProps = function (child) {
             var childProps = __assign(__assign({}, getCommonVisualStateDataAttributes(rest)), dataProps);
             isRefableElement(child) && (childProps.ref = _this.ref);
-            var classNames = cx(child.props.className, className);
+            var classNames = _this.cx(child.props.className, className);
             classNames && (childProps.className = classNames);
-            var isUnderSameCarrier = _this.carrierTheme !== null && _this.carrierTheme === _this.context;
-            var setTokens = isUnderSameCarrier ? '' : getThemeSetTokens(_this.context);
-            var vars = isUnderSameCarrier ? {} : getThemeVars(_this.context, _this.carrierTheme);
-            // носитель без пустых токенов всё равно с атрибутом: на нём обрывается @scope внешней темы (whenThemeSets)
-            (setTokens || Object.keys(vars).length) && (childProps['data-k-set'] = setTokens);
-            // без своих стилей отдаём объект из кеша как есть: та же ссылка — React не сверяет сотни переменных.
-            // переменные темы из props.style выбрасываем: их поставил внешний носитель, а vars уже содержат
-            // и свои значения, и сброс чужих (иначе вложенная тема не вернула бы токен к значению по умолчанию)
-            var own = omitThemeVars(style);
-            var styles = child.props.style || style ? __assign(__assign(__assign({}, vars), child.props.style), own) : vars;
+            var styles = __assign(__assign({}, child.props.style), style);
             Object.keys(styles).length && (childProps.style = styles);
-            var varsAttr = getServerThemeVarsAttr(vars);
-            varsAttr && (childProps['data-k-vars'] = varsAttr);
             return childProps;
         };
-        return (React.createElement(ThemeCarrierContext.Consumer, null, function (carrierTheme) {
-            _this.carrierTheme = carrierTheme;
-            return (
-            // носителем считаемся, только если переменные легли на DOM-узел: компонент может не донести style
-            React.createElement(ThemeCarrierContext.Provider, { value: _this.isHostChild() ? _this.context : carrierTheme }, React.isValidElement(_this.child)
-                ? React.cloneElement(_this.child, getChildProps(_this.child))
-                : _this.child));
-        }));
-    };
-    CommonWrapper.prototype.isHostChild = function () {
-        return React.isValidElement(this.child) && typeof this.child.type === 'string';
+        return React.isValidElement(this.child)
+            ? React.cloneElement(this.child, getChildProps(this.child))
+            : this.child;
     };
     CommonWrapper.__KONTUR_REACT_UI__ = 'CommonWrapper';
     CommonWrapper.displayName = 'CommonWrapper';
-    CommonWrapper.contextType = ThemeContext;
     CommonWrapper = __decorate([
+        withRenderEnvironment,
         rootNode
     ], CommonWrapper);
     return CommonWrapper;

package/internal/CommonWrapper/CommonWrapper.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"CommonWrapper.js","sourceRoot":"","sources":["CommonWrapper.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~AAAA~~,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,OAAO,MAAM,SAAS,CAAC;AAE9B,OAAO,EAAE,YAAY,EAAE,MAAM,wCAAwC,CAAC;AACtE,OAAO,EAAE,~~EAAE~~,EAAE,MAAM,~~iBAAiB~~,CAAC;~~AACrC~~,OAAO,EAAE,~~aAAa~~,EAAE,MAAM,~~4BAA4B~~,CAAC;~~AAE3D~~,OAAO,EAAE,WAAW,EAAE,sBAAsB,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;~~AAE5F~~,OAAO,EAAE,~~YAAY,EAAE,MAAM,mCAAmC,CAAC;AACjE,OAAO,EACL,sBAAsB,EACtB,iBAAiB,EACjB,YAAY,EACZ,aAAa,EACb,mBAAmB,GACpB,MAAM,gCAAgC,CAAC;AACxC,OAAO,EAAE,~~UAAU,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AAGlE,OAAO,EAAE,kBAAkB,EAAE,MAAM,+BAA+B,CAAC;AACnE,OAAO,EAAE,kCAAkC,EAAE,MAAM,+CAA+C,CAAC;~~AAKnG~~;IAAyE,iCAExE;IAFD;;~~QAOU~~,~~kBAAY,GAAiB,IAAI,CAAC;QAKlC,~~0BAAoB,GAAoC,IAAI,CAAC;~~QA6D7D~~,SAAG,GAAG,UAAC,QAAuC;;YACpD,KAAI,CAAC,WAAW,CAAC,QAAQ,CAAC,CAAC;YAC3B,MAAA,MAAA,KAAI,CAAC,KAAK,EAAC,WAAW,mDAAG,WAAW,CAAC,QAAQ,CAAC,CAAC,CAAC;YAEhD,yCAAyC;YACzC,iDAAiD;YACjD,MAAA,KAAI,CAAC,oBAAoB,0CAAE,MAAM,EAAE,CAAC;YACpC,KAAI,CAAC,oBAAoB,GAAG,IAAI,CAAC;YAEjC,IAAI,QAAQ,IAAI,sBAAsB,CAAC,QAAQ,CAAC,EAAE,CAAC;gBACjD,KAAI,CAAC,oBAAoB,GAAG,MAAA,QAAQ,CAAC,yBAAyB,yDAAG,UAAC,IAAI;;oBACpE,KAAI,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC;oBACvB,MAAA,MAAA,KAAI,CAAC,KAAK,EAAC,WAAW,mDAAG,IAAI,CAAC,CAAC;gBACjC,CAAC,CAAC,CAAC;YACL,CAAC;YAED,IAAM,WAAW,GAAG,aAAa,CAAC,KAAI,CAAC,KAA2B,CAAC,CAAC;YACpE,IAAI,OAAO,WAAW,KAAK,UAAU,IAAI,CAAC,WAAW,IAAI,OAAO,WAAW,KAAK,QAAQ,CAAC,EAAE,CAAC;gBAC1F,WAAW,IAAI,YAAY,CAAC,WAAW,EAAE,QAAQ,CAAC,CAAC;YACrD,CAAC;QACH,CAAC,CAAC;;IACJ,CAAC;~~IAhFC~~,8BAAM,GAAN;QAAA,~~iBAqDC~~;~~QApDO~~,IAAA,KAA2E,kBAAkB,CAAC,IAAI,CAAC,KAAK,CAAC,0BAAtG,SAAS,eAAA,EAAE,KAAK,WAAA,EAAE,QAAQ,cAAA,EAAE,WAAW,iBAAA,EAAK,SAAS,cAAvD,iDAAyD,CAAF,EAAS,IAAI,cAAT,EAAW,CAAkC,CAAC;QAChH,IAAI,CAAC,KAAK,GAAG,UAAU,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC;QAE9D,uCAAuC;QACvC,IAAI,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,EAAE,CAAC;YACzC,OAAO,CAAC,KAAK,EAAE,sCAAsC,CAAC,CAAC;QACzD,CAAC;QAED,IAAM,aAAa,GAAG,UAAC,KAAiE;YACtF,IAAM,UAAU,yBACX,kCAAkC,CAAC,IAAI,CAAC,GACxC,SAAS,CACb,CAAC;YAEF,gBAAgB,CAAC,KAAK,CAAC,IAAI,CAAC,UAAU,CAAC,GAAG,GAAG,KAAI,CAAC,GAAG,CAAC,CAAC;YAEvD,IAAM,UAAU,GAAW,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,SAAS,EAAE,SAAS,CAAC,CAAC;~~YAChE~~,UAAU,IAAI,CAAC,UAAU,CAAC,SAAS,GAAG,UAAU,CAAC,CAAC;YAElD,IAAM,kBAAkB,GAAG,KAAI,CAAC,YAAY,KAAK,IAAI,IAAI,KAAI,CAAC,YAAY,KAAK,KAAI,CAAC,OAAO,CAAC;YAC5F,IAAM,SAAS,GAAG,kBAAkB,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,iBAAiB,CAAC,KAAI,CAAC,OAAO,CAAC,CAAC;YAC5E,IAAM,IAAI,GAAG,kBAAkB,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,YAAY,CAAC,KAAI,CAAC,OAAO,EAAE,KAAI,CAAC,YAAY,CAAC,CAAC;YACrF,2GAA2G;YAC3G,CAAC,SAAS,IAAI,MAAM,~~CAAC~~,~~IAAI,CAAC,IAAI,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,UAAU,CAAC,YAAY,CAAC,GAAG,SAAS,CAAC,CAAC;YAElF,qGAAqG;YACrG,gGAAgG;YAChG,oGAAoG;YACpG,IAAM,GAAG,GAAG,aAAa,CAAC,~~KAAK,CAAC,~~CAAC;YACjC,IAAM,MAAM,GAAwB,~~KAAK,CAAC,KAAK,~~CAAC,KAAK,IAAI,KAAK,CAAC,CAAC,gCAAM,IAAI,~~GAAK,KAAK,~~CAAC~~,~~KAAK,~~CAAC~~,KAAK,GAAK,GAAG,EAAG,CAAC,CAAC,IAAI,CAAC~~;~~YAClH~~,MAAM,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,MAAM,IAAI,CAAC,UAAU,CAAC,KAAK,GAAG,MAAM,CAAC,CAAC;~~YAC1D~~,~~IAAM,QAAQ,GAAG,sBAAsB,CAAC,IAAI,CAAC,CAAC;YAC9C,QAAQ,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,GAAG,QAAQ,CAAC,CAAC;YAEnD,~~OAAO,UAAU,CAAC;QACpB,CAAC,CAAC;QAEF,OAAO,~~CACL,oBAAC,mBAAmB,CAAC,QAAQ,QAC1B,UAAC,YAAY;YACZ,KAAI,CAAC,YAAY,GAAG,YAAY,CAAC;YACjC,OAAO;YACL,kGAAkG;YAClG,oBAAC,mBAAmB,CAAC,QAAQ,IAAC,~~KAAK,~~EAAE,KAAI,~~CAAC,~~WAAW,EAAE,CAAC,CAAC,CAAC,KAAI,CAAC,OAAO,CAAC,CAAC,CAAC,YAAY,IAClF,KAAK,CAAC,~~cAAc,CAAyC,~~KAAI~~,CAAC,KAAK,CAAC;~~gBACvE~~,CAAC,CAAC,KAAK,CAAC,YAAY,CAAC,~~KAAI~~,CAAC,KAAK,EAAE,aAAa,CAAC,~~KAAI~~,CAAC,KAAK,CAAC,CAAC;~~gBAC3D~~,CAAC,CAAC,~~KAAI,CAAC,KAAK,CACe,CAChC,CAAC;QACJ,CAAC,CAC4B,CAChC,CAAC;IACJ,CAAC;IAEO,mCAAW,GAAnB;QACE,OAAO,KAAK,CAAC,cAAc,CAAC,~~IAAI,CAAC,KAAK,CAAC~~,IAAI,OAAO,IAAI,CAAC,KAAK,CAAC,IAAI,KAAK,QAAQ,CAAC~~;~~IACjF~~,CAAC;~~IApEa~~,iCAAmB,GAAG,eAAe,AAAlB,CAAmB;IACtC,yBAAW,GAAG,eAAe,AAAlB,CAAmB;~~IAC9B~~,~~yBAAW,GAAG,YAAY,AAAf,CAAgB~~;~~IAL9B~~,~~aAAa~~;~~QADzB~~,QAAQ;OACI,aAAa,~~CA8FzB~~;IAAD,oBAAC;CAAA,~~AA9FD~~,CAAyE,KAAK,CAAC,SAAS,~~GA8FvF~~;~~SA9FY~~,aAAa","sourcesContent":["import React from 'react';\nimport warning from 'warning';\n\nimport { callChildRef } from '../../lib/callChildRef/callChildRef.js';\nimport { cx } from '../../lib/cx.js';\nimport { ~~getElementRef~~ } from '../../lib/~~getElementRef~~.js';\nimport type { TGetRootNode, TRootNodeSubscription, TSetRootNode } from '../../lib/rootNode/index.js';\nimport { getRootNode, isInstanceWithRootNode, rootNode } from '../../lib/rootNode/index.js';\nimport ~~type~~ { Theme } from '../../lib/theming/Theme.js';\nimport { ThemeContext } from '../../lib/theming/ThemeContext.js';\nimport {\n getServerThemeVarsAttr,\n getThemeSetTokens,\n getThemeVars,\n omitThemeVars,\n ThemeCarrierContext,\n} from '../../lib/theming/themeVars.js';\nimport { isFunction, isRefableElement } from '../../lib/utils.js';\nimport type { Nullable } from '../../typings/utility-types.js';\nimport type { CommonProps, CommonPropsRootNodeRef, CommonWrapperProps } from './types.js';\nimport { extractCommonProps } from './utils/extractCommonProps.js';\nimport { getCommonVisualStateDataAttributes } from './utils/getCommonVisualStateDataAttributes.js';\n\nexport type CommonPropsWithRootNodeRef = CommonProps & CommonPropsRootNodeRef;\n\n@rootNode\nexport class CommonWrapper<P extends CommonPropsWithRootNodeRef> extends React.Component<\n CommonWrapperProps<P> & CommonPropsRootNodeRef\n> {\n public static __KONTUR_REACT_UI__ = 'CommonWrapper';\n public static displayName = 'CommonWrapper';\n ~~public static contextType = ThemeContext;\~~n ~~public~~ ~~context~~!: ~~Theme~~;\n private ~~carrierTheme: Theme \| null = null;\n\n private~~ child: React.ReactNode;\n public getRootNode!: TGetRootNode;\n private setRootNode!: TSetRootNode;\n private rootNodeSubscription: Nullable<TRootNodeSubscription> = null;\n\n render() {\n const [{ className, style, children, rootNodeRef, ...dataProps }, { ...rest }] = extractCommonProps(this.props);\n this.child = isFunction(children) ? children(rest) : children;\n\n // TODO: replace count with only in 7.0\n if (React.Children.count(this.child) > 1) {\n warning(false, 'CommonWrapper expects a single child');\n }\n\n const getChildProps = (child: React.ReactElement<CommonProps & React.RefAttributes<any>>) => {\n const childProps: Record<string, unknown> = {\n ...getCommonVisualStateDataAttributes(rest),\n ...dataProps,\n };\n\n isRefableElement(child) && (childProps.ref = this.ref);\n\n const classNames: string = cx(child.props.className, className);\n classNames && (childProps.className = classNames);\n\n const isUnderSameCarrier = this.carrierTheme !== null && this.carrierTheme === this.context;\n const setTokens = isUnderSameCarrier ? '' : getThemeSetTokens(this.context);\n const vars = isUnderSameCarrier ? {} : getThemeVars(this.context, this.carrierTheme);\n // носитель без пустых токенов всё равно с атрибутом: на нём обрывается @scope внешней темы (whenThemeSets)\n (setTokens \|\| Object.keys(vars).length) && (childProps['data-k-set'] = setTokens);\n\n // без своих стилей отдаём объект из кеша как есть: та же ссылка — React не сверяет сотни переменных.\n // переменные темы из props.style выбрасываем: их поставил внешний носитель, а vars уже содержат\n // и свои значения, и сброс чужих (иначе вложенная тема не вернула бы токен к значению по умолчанию)\n const own = omitThemeVars(style);\n const styles: React.CSSProperties = ~~child.props.style \|\| style ?~~ { ...~~vars, ...~~child.props.style, ...~~own~~ } ~~: vars~~;\n Object.keys(styles).length && (childProps.style = styles);\n ~~const varsAttr = getServerThemeVarsAttr(vars);\n varsAttr && (childProps['data-k-vars'] = varsAttr);\n~~\n return childProps;\n };\n\n return (\n <ThemeCarrierContext.Consumer>\n {(carrierTheme) => {\n this.carrierTheme = carrierTheme;\n return (\n // носителем считаемся, только если переменные легли на DOM-узел: компонент может не донести style\n <ThemeCarrierContext.Provider value={this.isHostChild() ? this.context : carrierTheme}>\n {React.isValidElement<CommonProps & React.RefAttributes<any>>(this.child)\n ? React.cloneElement(this.child, getChildProps(this.child))\n : this.child~~}\n </ThemeCarrierContext.Provider>\n )~~;\n ~~}}\n </ThemeCarrierContext.Consumer>\n );\n~~ }\n\n private ~~isHostChild() {\n return React.isValidElement(this.child) && typeof this.child.type === 'string';\n }\n\n private~~ ref = (instance: Nullable<React.ReactInstance>) => {\n this.setRootNode(instance);\n this.props.rootNodeRef?.(getRootNode(instance));\n\n // refs are called when instances change,\n // so we have to renew or remove old subscription\n this.rootNodeSubscription?.remove();\n this.rootNodeSubscription = null;\n\n if (instance && isInstanceWithRootNode(instance)) {\n this.rootNodeSubscription = instance.addRootNodeChangeListener?.((node) => {\n this.setRootNode(node);\n this.props.rootNodeRef?.(node);\n });\n }\n\n const originalRef = getElementRef(this.child as React.ReactElement);\n if (typeof originalRef === 'function' \|\| (originalRef && typeof originalRef === 'object')) {\n originalRef && callChildRef(originalRef, instance);\n }\n };\n}\n"]}
1	+ {"version":3,"file":"CommonWrapper.js","sourceRoot":"","sources":["CommonWrapper.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { Emotion } from '@emotion/css/create-instance';\nimport React from 'react';\nimport warning from 'warning';\n\nimport { callChildRef } from '../../lib/callChildRef/callChildRef.js';\nimport { getElementRef } from '../../lib/getElementRef.js';\nimport { withRenderEnvironment } from '../../lib/renderEnvironment/index.js';\nimport type { TGetRootNode, TRootNodeSubscription, TSetRootNode } from '../../lib/rootNode/index.js';\nimport { getRootNode, isInstanceWithRootNode, rootNode } from '../../lib/rootNode/index.js';\nimport { isFunction, isRefableElement } from '../../lib/utils.js';\nimport type { Nullable } from '../../typings/utility-types.js';\nimport type { CommonProps, CommonPropsRootNodeRef, CommonWrapperProps } from './types.js';\nimport { extractCommonProps } from './utils/extractCommonProps.js';\nimport { getCommonVisualStateDataAttributes } from './utils/getCommonVisualStateDataAttributes.js';\n\nexport type CommonPropsWithRootNodeRef = CommonProps & CommonPropsRootNodeRef;\n\n@withRenderEnvironment\n@rootNode\nexport class CommonWrapper<P extends CommonPropsWithRootNodeRef> extends React.Component<\n CommonWrapperProps<P> & CommonPropsRootNodeRef\n> {\n public static __KONTUR_REACT_UI__ = 'CommonWrapper';\n public static displayName = 'CommonWrapper';\n\n private cx!: Emotion['cx'];\n private child: React.ReactNode;\n public getRootNode!: TGetRootNode;\n private setRootNode!: TSetRootNode;\n private rootNodeSubscription: Nullable<TRootNodeSubscription> = null;\n\n render() {\n const [{ className, style, children, rootNodeRef, ...dataProps }, { ...rest }] = extractCommonProps(this.props);\n this.child = isFunction(children) ? children(rest) : children;\n\n // TODO: replace count with only in 7.0\n if (React.Children.count(this.child) > 1) {\n warning(false, 'CommonWrapper expects a single child');\n }\n\n const getChildProps = (child: React.ReactElement<CommonProps & React.RefAttributes<any>>) => {\n const childProps: Record<string, unknown> = {\n ...getCommonVisualStateDataAttributes(rest),\n ...dataProps,\n };\n\n isRefableElement(child) && (childProps.ref = this.ref);\n\n const classNames: string = this.cx(child.props.className, className);\n classNames && (childProps.className = classNames);\n\n const styles: React.CSSProperties = { ...child.props.style, ...style };\n Object.keys(styles).length && (childProps.style = styles);\n\n return childProps;\n };\n\n return React.isValidElement<CommonProps & React.RefAttributes<any>>(this.child)\n ? React.cloneElement(this.child, getChildProps(this.child))\n : this.child;\n }\n\n private ref = (instance: Nullable<React.ReactInstance>) => {\n this.setRootNode(instance);\n this.props.rootNodeRef?.(getRootNode(instance));\n\n // refs are called when instances change,\n // so we have to renew or remove old subscription\n this.rootNodeSubscription?.remove();\n this.rootNodeSubscription = null;\n\n if (instance && isInstanceWithRootNode(instance)) {\n this.rootNodeSubscription = instance.addRootNodeChangeListener?.((node) => {\n this.setRootNode(node);\n this.props.rootNodeRef?.(node);\n });\n }\n\n const originalRef = getElementRef(this.child as React.ReactElement);\n if (typeof originalRef === 'function' \|\| (originalRef && typeof originalRef === 'object')) {\n originalRef && callChildRef(originalRef, instance);\n }\n };\n}\n"]}