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/Toggle/Toggle.styles.js ADDED Viewed

@@ -0,0 +1,147 @@
+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';
+import { globalClasses } from './Toggle.classes.js';
+import { buttonSizeMixin, captionSizeMixin, containerSizeMixin, disabledTextColorMixin, handleMixin, inputSizeMixin, subcaptionMixin, toggleSizeMixin, } from './Toggle.mixins.js';
+export { globalClasses };
+export var getStyles = memoizeGetStyles(function (_a) {
+    var css = _a.css;
+    return ({
+        root: function (t) {
+            return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      display: inline-flex;\n      cursor: pointer;\n      align-items: baseline;\n      position: relative;\n\n      &::before {\n        // non-breaking space.\n        // makes a correct space for absolutely positioned button,\n        // and also height and baseline for toggle without caption.\n        content: '\\00A0';\n        display: inline-block;\n        flex: 0 0 auto;\n      }\n\n      &:hover .", " {\n        background: ", ";\n      }\n    "], ["\n      display: inline-flex;\n      cursor: pointer;\n      align-items: baseline;\n      position: relative;\n\n      &::before {\n        // non-breaking space.\n        // makes a correct space for absolutely positioned button,\n        // and also height and baseline for toggle without caption.\n        content: '\\\\00A0';\n        display: inline-block;\n        flex: 0 0 auto;\n      }\n\n      &:hover .", " {\n        background: ", ";\n      }\n    "])), globalClasses.handle, t.toggleBgHover);
+        },
+        rootSmall: function (t) {
+            return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n      ", ";\n    "], ["\n      ", ";\n    "])), toggleSizeMixin(t.toggleFontSizeSmall, t.toggleHeightSmall, t.toggleWidthSmall));
+        },
+        rootMedium: function (t) {
+            return css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n      ", ";\n    "], ["\n      ", ";\n    "])), toggleSizeMixin(t.toggleFontSizeMedium, t.toggleHeightMedium, t.toggleWidthMedium));
+        },
+        rootLarge: function (t) {
+            return css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n      ", ";\n    "], ["\n      ", ";\n    "])), toggleSizeMixin(t.toggleFontSizeLarge, t.toggleHeightLarge, t.toggleWidthLarge));
+        },
+        disableAnimation: function () {
+            return css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n      &,\n      * {\n        transition: none !important;\n      }\n    "], ["\n      &,\n      * {\n        transition: none !important;\n      }\n    "])));
+        },
+        handle: function (t) {
+            return css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n      bottom: ", ";\n      left: ", ";\n      position: absolute;\n      top: ", ";\n    "], ["\n      bottom: ", ";\n      left: ", ";\n      position: absolute;\n      top: ", ";\n    "])), t.toggleBorderWidth, t.toggleHandleLeft, t.toggleHandleTop);
+        },
+        handleSmall: function (t) {
+            return css(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n      ", ";\n    "], ["\n      ", ";\n    "])), handleMixin(t.toggleHandleSizeSmall, t.toggleHandleBorderRadiusSmall));
+        },
+        handleMedium: function (t) {
+            return css(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n      ", ";\n    "], ["\n      ", ";\n    "])), handleMixin(t.toggleHandleSizeMedium, t.toggleHandleBorderRadiusMedium));
+        },
+        handleLarge: function (t) {
+            return css(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n      ", ";\n    "], ["\n      ", ";\n    "])), handleMixin(t.toggleHandleSizeLarge, t.toggleHandleBorderRadiusLarge));
+        },
+        handleDisabled: function (t) {
+            return css(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n      background: ", " !important; // override root hover/active styles\n    "], ["\n      background: ", " !important; // override root hover/active styles\n    "])), t.toggleDisabledHandleBg);
+        },
+        input: function (t) {
+            return css(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n      position: absolute;\n      opacity: 0;\n\n      &:enabled {\n        ~ .", ", ~ .", " {\n          transition: 0.2s ease-in;\n        }\n        :not(:checked) {\n          ~ .", " {\n            background: ", ";\n            box-shadow: ", ";\n          }\n          ~ .", " {\n            background: ", ";\n            box-shadow: ", ";\n          }\n        }\n        :checked {\n          ~ .", " {\n            background: ", ";\n            box-shadow: ", ";\n          }\n          ~ .", " {\n            background: ", ";\n            box-shadow: ", ";\n          }\n        }\n      }\n      &:enabled:hover {\n        :not(:checked) {\n          ~ .", " {\n            background: ", ";\n            box-shadow: ", ";\n          }\n          ~ .", " {\n            background: ", ";\n            box-shadow: ", ";\n          }\n        }\n        :checked {\n          ~ .", " {\n            background: ", ";\n            box-shadow: ", ";\n          }\n          ~ .", " {\n            background: ", ";\n            box-shadow: ", ";\n          }\n        }\n      }\n      &:disabled {\n        :not(:checked) {\n          ~ .", " {\n            background: ", ";\n            box-shadow: ", ";\n          }\n          ~ .", " {\n            background: ", " !important;\n            box-shadow: ", ";\n          }\n        }\n        :checked {\n          ~ .", " {\n            background: ", ";\n            box-shadow: ", ";\n          }\n          ~ .", " {\n            background: ", " !important;\n            box-shadow: ", ";\n          }\n        }\n      }\n    "], ["\n      position: absolute;\n      opacity: 0;\n\n      &:enabled {\n        ~ .", ", ~ .", " {\n          transition: 0.2s ease-in;\n        }\n        :not(:checked) {\n          ~ .", " {\n            background: ", ";\n            box-shadow: ", ";\n          }\n          ~ .", " {\n            background: ", ";\n            box-shadow: ", ";\n          }\n        }\n        :checked {\n          ~ .", " {\n            background: ", ";\n            box-shadow: ", ";\n          }\n          ~ .", " {\n            background: ", ";\n            box-shadow: ", ";\n          }\n        }\n      }\n      &:enabled:hover {\n        :not(:checked) {\n          ~ .", " {\n            background: ", ";\n            box-shadow: ", ";\n          }\n          ~ .", " {\n            background: ", ";\n            box-shadow: ", ";\n          }\n        }\n        :checked {\n          ~ .", " {\n            background: ", ";\n            box-shadow: ", ";\n          }\n          ~ .", " {\n            background: ", ";\n            box-shadow: ", ";\n          }\n        }\n      }\n      &:disabled {\n        :not(:checked) {\n          ~ .", " {\n            background: ", ";\n            box-shadow: ", ";\n          }\n          ~ .", " {\n            background: ", " !important;\n            box-shadow: ", ";\n          }\n        }\n        :checked {\n          ~ .", " {\n            background: ", ";\n            box-shadow: ", ";\n          }\n          ~ .", " {\n            background: ", " !important;\n            box-shadow: ", ";\n          }\n        }\n      }\n    "])), globalClasses.container, globalClasses.handle, globalClasses.container, t.toggleContainerBg, t.toggleContainerBoxShadow, globalClasses.handle, t.toggleHandleBg, t.toggleHandleBoxShadow, globalClasses.container, t.toggleContainerBgChecked, t.toggleContainerBoxShadowChecked, globalClasses.handle, t.toggleHandleBgChecked, t.toggleHandleBoxShadowChecked, globalClasses.container, t.toggleContainerBgHover, t.toggleContainerBoxShadowHover, globalClasses.handle, t.toggleHandleBgHover, t.toggleHandleBoxShadowHover, globalClasses.container, t.toggleContainerBgCheckedHover, t.toggleContainerBoxShadowCheckedHover, globalClasses.handle, t.toggleHandleBgCheckedHover, t.toggleHandleBoxShadowCheckedHover, globalClasses.container, t.toggleContainerBgDisabled, t.toggleContainerBoxShadowDisabled, globalClasses.handle, t.toggleHandleBgDisabled, t.toggleHandleBoxShadowDisabled, globalClasses.container, t.toggleContainerBgDisabledChecked, t.toggleContainerBoxShadowDisabledChecked, globalClasses.handle, t.toggleHandleBgDisabledChecked, t.toggleHandleBoxShadowDisabledChecked);
+        },
+        inputSmall: function (t) {
+            return css(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n      ", ";\n    "], ["\n      ", ";\n    "])), inputSizeMixin(t.toggleHeightSmall, t.toggleWidthSmall));
+        },
+        inputMedium: function (t) {
+            return css(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n      ", ";\n    "], ["\n      ", ";\n    "])), inputSizeMixin(t.toggleHeightMedium, t.toggleWidthMedium));
+        },
+        inputLarge: function (t) {
+            return css(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n      ", ";\n    "], ["\n      ", ";\n    "])), inputSizeMixin(t.toggleHeightLarge, t.toggleWidthLarge));
+        },
+        container: function (t) {
+            return css(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n      box-shadow: inset 0 0 0 ", " ", ";\n      height: 100%;\n      overflow: hidden;\n      position: absolute;\n      width: 100%;\n      /* fixes overflow issue in Safari: https://bugs.webkit.org/show_bug.cgi?id=98538 */\n      z-index: 0;\n    "], ["\n      box-shadow: inset 0 0 0 ", " ", ";\n      height: 100%;\n      overflow: hidden;\n      position: absolute;\n      width: 100%;\n      /* fixes overflow issue in Safari: https://bugs.webkit.org/show_bug.cgi?id=98538 */\n      z-index: 0;\n    "])), t.toggleBorderWidth, t.toggleBorderColor);
+        },
+        containerSmall: function (t) {
+            return css(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n      ", ";\n    "], ["\n      ", ";\n    "])), containerSizeMixin(t.toggleBorderRadiusSmall));
+        },
+        containerMedium: function (t) {
+            return css(templateObject_17 || (templateObject_17 = __makeTemplateObject(["\n      ", ";\n    "], ["\n      ", ";\n    "])), containerSizeMixin(t.toggleBorderRadiusMedium));
+        },
+        containerLarge: function (t) {
+            return css(templateObject_18 || (templateObject_18 = __makeTemplateObject(["\n      ", ";\n    "], ["\n      ", ";\n    "])), containerSizeMixin(t.toggleBorderRadiusLarge));
+        },
+        containerDisabled: function (t) {
+            return css(templateObject_19 || (templateObject_19 = __makeTemplateObject(["\n      background: ", ";\n      box-shadow: inset 0 0 0 1px ", ";\n    "], ["\n      background: ", ";\n      box-shadow: inset 0 0 0 1px ", ";\n    "])), t.toggleBgDisabled, t.toggleBorderColorDisabled);
+        },
+        focused: function (t) {
+            return css(templateObject_20 || (templateObject_20 = __makeTemplateObject(["\n      box-shadow:\n        0 0 0 1px ", ",\n        0 0 0 ", " ", ";\n    "], ["\n      box-shadow:\n        0 0 0 1px ", ",\n        0 0 0 ", " ", ";\n    "])), t.toggleOutlineColorFocus, t.toggleOutlineWidth, t.toggleFocusShadowColor);
+        },
+        isWarning: function (t) {
+            return css(templateObject_21 || (templateObject_21 = __makeTemplateObject(["\n      box-shadow:\n        0 0 0 1px ", ",\n        0 0 0 ", " ", ";\n    "], ["\n      box-shadow:\n        0 0 0 1px ", ",\n        0 0 0 ", " ", ";\n    "])), t.toggleOutlineColorFocus, t.toggleOutlineWidth, t.toggleShadowColorWarning);
+        },
+        isError: function (t) {
+            return css(templateObject_22 || (templateObject_22 = __makeTemplateObject(["\n      box-shadow:\n        0 0 0 1px ", ",\n        0 0 0 ", " ", ";\n    "], ["\n      box-shadow:\n        0 0 0 1px ", ",\n        0 0 0 ", " ", ";\n    "])), t.toggleOutlineColorFocus, t.toggleOutlineWidth, t.toggleShadowColorError);
+        },
+        button: function (t) {
+            return css(templateObject_23 || (templateObject_23 = __makeTemplateObject(["\n      position: absolute;\n      left: 0;\n      top: 0;\n      background: ", ";\n      line-height: ", ";\n    "], ["\n      position: absolute;\n      left: 0;\n      top: 0;\n      background: ", ";\n      line-height: ", ";\n    "])), t.toggleBaseBg, t.toggleHeightSmall);
+        },
+        buttonSmall: function (t) {
+            return css(templateObject_24 || (templateObject_24 = __makeTemplateObject(["\n      ", ";\n    "], ["\n      ", ";\n    "])), buttonSizeMixin(t.labGrotesqueBaselineCompensation, t.toggleFontSizeSmall, t.toggleHeightSmall, t.toggleWidthSmall, t.toggleBorderRadiusSmall, t.toggleButtonOffsetY));
+        },
+        buttonMedium: function (t) {
+            return css(templateObject_25 || (templateObject_25 = __makeTemplateObject(["\n      ", ";\n    "], ["\n      ", ";\n    "])), buttonSizeMixin(t.labGrotesqueBaselineCompensation, t.toggleFontSizeMedium, t.toggleHeightMedium, t.toggleWidthMedium, t.toggleBorderRadiusMedium, t.toggleButtonOffsetY));
+        },
+        buttonLarge: function (t) {
+            return css(templateObject_26 || (templateObject_26 = __makeTemplateObject(["\n      ", ";\n    "], ["\n      ", ";\n    "])), buttonSizeMixin(t.labGrotesqueBaselineCompensation, t.toggleFontSizeLarge, t.toggleHeightLarge, t.toggleWidthLarge, t.toggleBorderRadiusLarge, t.toggleButtonOffsetY));
+        },
+        buttonRight: function () {
+            return css(templateObject_27 || (templateObject_27 = __makeTemplateObject(["\n      right: 0;\n      left: auto;\n    "], ["\n      right: 0;\n      left: auto;\n    "])));
+        },
+        disabled: function () {
+            return css(templateObject_28 || (templateObject_28 = __makeTemplateObject(["\n      cursor: default;\n    "], ["\n      cursor: default;\n    "])));
+        },
+        rootLeft: function () {
+            return css(templateObject_29 || (templateObject_29 = __makeTemplateObject(["\n      flex-direction: row-reverse;\n    "], ["\n      flex-direction: row-reverse;\n    "])));
+        },
+        caption: function (t) {
+            return css(templateObject_30 || (templateObject_30 = __makeTemplateObject(["\n      color: ", ";\n      padding: 0 0 0 ", ";\n    "], ["\n      color: ", ";\n      padding: 0 0 0 ", ";\n    "])), t.toggleTextColor, t.toggleCaptionGap);
+        },
+        captionSmall: function (t) {
+            return css(templateObject_31 || (templateObject_31 = __makeTemplateObject(["\n      ", ";\n    "], ["\n      ", ";\n    "])), captionSizeMixin(t.toggleFontSizeSmall, t.toggleHeightSmall));
+        },
+        captionMedium: function (t) {
+            return css(templateObject_32 || (templateObject_32 = __makeTemplateObject(["\n      ", ";\n    "], ["\n      ", ";\n    "])), captionSizeMixin(t.toggleFontSizeMedium, t.toggleHeightMedium));
+        },
+        captionLarge: function (t) {
+            return css(templateObject_33 || (templateObject_33 = __makeTemplateObject(["\n      ", ";\n    "], ["\n      ", ";\n    "])), captionSizeMixin(t.toggleFontSizeLarge, t.toggleHeightLarge));
+        },
+        disabledCaption: function (t) {
+            return css(templateObject_34 || (templateObject_34 = __makeTemplateObject(["\n      color: ", ";\n    "], ["\n      color: ", ";\n    "])), t.textColorDisabled);
+        },
+        captionLeft: function (t) {
+            return css(templateObject_35 || (templateObject_35 = __makeTemplateObject(["\n      color: ", ";\n      padding: 0 ", " 0 0;\n    "], ["\n      color: ", ";\n      padding: 0 ", " 0 0;\n    "])), t.toggleTextColor, t.toggleCaptionGap);
+        },
+        captionWrapper: function () {
+            return css(templateObject_36 || (templateObject_36 = __makeTemplateObject(["\n      display: inline-block;\n    "], ["\n      display: inline-block;\n    "])));
+        },
+        captionWrapperGap: function (t) {
+            return css(templateObject_37 || (templateObject_37 = __makeTemplateObject(["\n      padding: 0 0 0 ", ";\n    "], ["\n      padding: 0 0 0 ", ";\n    "])), t.toggleCaptionGap);
+        },
+        captionWrapperGapLeft: function (t) {
+            return css(templateObject_38 || (templateObject_38 = __makeTemplateObject(["\n      padding: 0 ", " 0 0;\n    "], ["\n      padding: 0 ", " 0 0;\n    "])), t.toggleCaptionGap);
+        },
+        captionNoGap: function () {
+            return css(templateObject_39 || (templateObject_39 = __makeTemplateObject(["\n      padding: 0;\n    "], ["\n      padding: 0;\n    "])));
+        },
+        subcaption: function (t) {
+            return css(templateObject_40 || (templateObject_40 = __makeTemplateObject(["\n      margin-top: 2px;\n      color: ", ";\n    "], ["\n      margin-top: 2px;\n      color: ", ";\n    "])), t.toggleCommentTextColor);
+        },
+        subcaptionDisabled: function (t) {
+            return css(templateObject_41 || (templateObject_41 = __makeTemplateObject(["\n      ", ";\n    "], ["\n      ", ";\n    "])), disabledTextColorMixin(t.textColorDisabled));
+        },
+        subcaptionSmall: function (t) {
+            return css(templateObject_42 || (templateObject_42 = __makeTemplateObject(["\n      ", ";\n    "], ["\n      ", ";\n    "])), subcaptionMixin(t.toggleCommentFontSizeSmall, t.toggleCommentLineHeightSmall));
+        },
+        subcaptionMedium: function (t) {
+            return css(templateObject_43 || (templateObject_43 = __makeTemplateObject(["\n      ", ";\n    "], ["\n      ", ";\n    "])), subcaptionMixin(t.toggleCommentFontSizeMedium, t.toggleCommentLineHeightMedium));
+        },
+        subcaptionLarge: function (t) {
+            return css(templateObject_44 || (templateObject_44 = __makeTemplateObject(["\n      ", ";\n    "], ["\n      ", ";\n    "])), subcaptionMixin(t.toggleCommentFontSizeLarge, t.toggleCommentLineHeightLarge));
+        },
+    });
+});
+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, templateObject_16, templateObject_17, templateObject_18, templateObject_19, templateObject_20, templateObject_21, templateObject_22, templateObject_23, templateObject_24, templateObject_25, templateObject_26, templateObject_27, templateObject_28, templateObject_29, templateObject_30, templateObject_31, templateObject_32, templateObject_33, templateObject_34, templateObject_35, templateObject_36, templateObject_37, templateObject_38, templateObject_39, templateObject_40, templateObject_41, templateObject_42, templateObject_43, templateObject_44;
+//# sourceMappingURL=Toggle.styles.js.map

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

@@ -0,0 +1 @@

+ {"version":3,"file":"Toggle.styles.js","sourceRoot":"","sources":["Toggle.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';\nimport { globalClasses } from './Toggle.classes.js';\nimport {\n buttonSizeMixin,\n captionSizeMixin,\n containerSizeMixin,\n disabledTextColorMixin,\n handleMixin,\n inputSizeMixin,\n subcaptionMixin,\n toggleSizeMixin,\n} from './Toggle.mixins.js';\n\nexport { globalClasses };\n\nexport const getStyles = memoizeGetStyles(({ css }: Emotion) => ({\n root(t: Theme) {\n return css`\n display: inline-flex;\n cursor: pointer;\n align-items: baseline;\n position: relative;\n\n &::before {\n // non-breaking space.\n // makes a correct space for absolutely positioned button,\n // and also height and baseline for toggle without caption.\n content: '\\\\00A0';\n display: inline-block;\n flex: 0 0 auto;\n }\n\n &:hover .${globalClasses.handle} {\n background: ${t.toggleBgHover};\n }\n `;\n },\n rootSmall(t: Theme) {\n return css`\n ${toggleSizeMixin(t.toggleFontSizeSmall, t.toggleHeightSmall, t.toggleWidthSmall)};\n `;\n },\n rootMedium(t: Theme) {\n return css`\n ${toggleSizeMixin(t.toggleFontSizeMedium, t.toggleHeightMedium, t.toggleWidthMedium)};\n `;\n },\n rootLarge(t: Theme) {\n return css`\n ${toggleSizeMixin(t.toggleFontSizeLarge, t.toggleHeightLarge, t.toggleWidthLarge)};\n `;\n },\n\n disableAnimation() {\n return css`\n &,\n * {\n transition: none !important;\n }\n `;\n },\n\n handle(t: Theme) {\n return css`\n bottom: ${t.toggleBorderWidth};\n left: ${t.toggleHandleLeft};\n position: absolute;\n top: ${t.toggleHandleTop};\n `;\n },\n handleSmall(t: Theme) {\n return css`\n ${handleMixin(t.toggleHandleSizeSmall, t.toggleHandleBorderRadiusSmall)};\n `;\n },\n handleMedium(t: Theme) {\n return css`\n ${handleMixin(t.toggleHandleSizeMedium, t.toggleHandleBorderRadiusMedium)};\n `;\n },\n handleLarge(t: Theme) {\n return css`\n ${handleMixin(t.toggleHandleSizeLarge, t.toggleHandleBorderRadiusLarge)};\n `;\n },\n\n handleDisabled(t: Theme) {\n return css`\n background: ${t.toggleDisabledHandleBg} !important; // override root hover/active styles\n `;\n },\n\n input(t: Theme) {\n return css`\n position: absolute;\n opacity: 0;\n\n &:enabled {\n ~ .${globalClasses.container}, ~ .${globalClasses.handle} {\n transition: 0.2s ease-in;\n }\n :not(:checked) {\n ~ .${globalClasses.container} {\n background: ${t.toggleContainerBg};\n box-shadow: ${t.toggleContainerBoxShadow};\n }\n ~ .${globalClasses.handle} {\n background: ${t.toggleHandleBg};\n box-shadow: ${t.toggleHandleBoxShadow};\n }\n }\n :checked {\n ~ .${globalClasses.container} {\n background: ${t.toggleContainerBgChecked};\n box-shadow: ${t.toggleContainerBoxShadowChecked};\n }\n ~ .${globalClasses.handle} {\n background: ${t.toggleHandleBgChecked};\n box-shadow: ${t.toggleHandleBoxShadowChecked};\n }\n }\n }\n &:enabled:hover {\n :not(:checked) {\n ~ .${globalClasses.container} {\n background: ${t.toggleContainerBgHover};\n box-shadow: ${t.toggleContainerBoxShadowHover};\n }\n ~ .${globalClasses.handle} {\n background: ${t.toggleHandleBgHover};\n box-shadow: ${t.toggleHandleBoxShadowHover};\n }\n }\n :checked {\n ~ .${globalClasses.container} {\n background: ${t.toggleContainerBgCheckedHover};\n box-shadow: ${t.toggleContainerBoxShadowCheckedHover};\n }\n ~ .${globalClasses.handle} {\n background: ${t.toggleHandleBgCheckedHover};\n box-shadow: ${t.toggleHandleBoxShadowCheckedHover};\n }\n }\n }\n &:disabled {\n :not(:checked) {\n ~ .${globalClasses.container} {\n background: ${t.toggleContainerBgDisabled};\n box-shadow: ${t.toggleContainerBoxShadowDisabled};\n }\n ~ .${globalClasses.handle} {\n background: ${t.toggleHandleBgDisabled} !important;\n box-shadow: ${t.toggleHandleBoxShadowDisabled};\n }\n }\n :checked {\n ~ .${globalClasses.container} {\n background: ${t.toggleContainerBgDisabledChecked};\n box-shadow: ${t.toggleContainerBoxShadowDisabledChecked};\n }\n ~ .${globalClasses.handle} {\n background: ${t.toggleHandleBgDisabledChecked} !important;\n box-shadow: ${t.toggleHandleBoxShadowDisabledChecked};\n }\n }\n }\n `;\n },\n inputSmall(t: Theme) {\n return css`\n ${inputSizeMixin(t.toggleHeightSmall, t.toggleWidthSmall)};\n `;\n },\n inputMedium(t: Theme) {\n return css`\n ${inputSizeMixin(t.toggleHeightMedium, t.toggleWidthMedium)};\n `;\n },\n inputLarge(t: Theme) {\n return css`\n ${inputSizeMixin(t.toggleHeightLarge, t.toggleWidthLarge)};\n `;\n },\n\n container(t: Theme) {\n return css`\n box-shadow: inset 0 0 0 ${t.toggleBorderWidth} ${t.toggleBorderColor};\n height: 100%;\n overflow: hidden;\n position: absolute;\n width: 100%;\n /* fixes overflow issue in Safari: https://bugs.webkit.org/show_bug.cgi?id=98538 */\n z-index: 0;\n `;\n },\n containerSmall(t: Theme) {\n return css`\n ${containerSizeMixin(t.toggleBorderRadiusSmall)};\n `;\n },\n containerMedium(t: Theme) {\n return css`\n ${containerSizeMixin(t.toggleBorderRadiusMedium)};\n `;\n },\n containerLarge(t: Theme) {\n return css`\n ${containerSizeMixin(t.toggleBorderRadiusLarge)};\n `;\n },\n\n containerDisabled(t: Theme) {\n return css`\n background: ${t.toggleBgDisabled};\n box-shadow: inset 0 0 0 1px ${t.toggleBorderColorDisabled};\n `;\n },\n\n focused(t: Theme) {\n return css`\n box-shadow:\n 0 0 0 1px ${t.toggleOutlineColorFocus},\n 0 0 0 ${t.toggleOutlineWidth} ${t.toggleFocusShadowColor};\n `;\n },\n\n isWarning(t: Theme) {\n return css`\n box-shadow:\n 0 0 0 1px ${t.toggleOutlineColorFocus},\n 0 0 0 ${t.toggleOutlineWidth} ${t.toggleShadowColorWarning};\n `;\n },\n\n isError(t: Theme) {\n return css`\n box-shadow:\n 0 0 0 1px ${t.toggleOutlineColorFocus},\n 0 0 0 ${t.toggleOutlineWidth} ${t.toggleShadowColorError};\n `;\n },\n\n button(t: Theme) {\n return css`\n position: absolute;\n left: 0;\n top: 0;\n background: ${t.toggleBaseBg};\n line-height: ${t.toggleHeightSmall};\n `;\n },\n buttonSmall(t: Theme) {\n return css`\n ${buttonSizeMixin(\n t.labGrotesqueBaselineCompensation,\n t.toggleFontSizeSmall,\n t.toggleHeightSmall,\n t.toggleWidthSmall,\n t.toggleBorderRadiusSmall,\n t.toggleButtonOffsetY,\n )};\n `;\n },\n buttonMedium(t: Theme) {\n return css`\n ${buttonSizeMixin(\n t.labGrotesqueBaselineCompensation,\n t.toggleFontSizeMedium,\n t.toggleHeightMedium,\n t.toggleWidthMedium,\n t.toggleBorderRadiusMedium,\n t.toggleButtonOffsetY,\n )};\n `;\n },\n buttonLarge(t: Theme) {\n return css`\n ${buttonSizeMixin(\n t.labGrotesqueBaselineCompensation,\n t.toggleFontSizeLarge,\n t.toggleHeightLarge,\n t.toggleWidthLarge,\n t.toggleBorderRadiusLarge,\n t.toggleButtonOffsetY,\n )};\n `;\n },\n\n buttonRight() {\n return css`\n right: 0;\n left: auto;\n `;\n },\n\n disabled() {\n return css`\n cursor: default;\n `;\n },\n\n rootLeft() {\n return css`\n flex-direction: row-reverse;\n `;\n },\n\n caption(t: Theme) {\n return css`\n color: ${t.toggleTextColor};\n padding: 0 0 0 ${t.toggleCaptionGap};\n `;\n },\n captionSmall(t: Theme) {\n return css`\n ${captionSizeMixin(t.toggleFontSizeSmall, t.toggleHeightSmall)};\n `;\n },\n captionMedium(t: Theme) {\n return css`\n ${captionSizeMixin(t.toggleFontSizeMedium, t.toggleHeightMedium)};\n `;\n },\n captionLarge(t: Theme) {\n return css`\n ${captionSizeMixin(t.toggleFontSizeLarge, t.toggleHeightLarge)};\n `;\n },\n\n disabledCaption(t: Theme) {\n return css`\n color: ${t.textColorDisabled};\n `;\n },\n\n captionLeft(t: Theme) {\n return css`\n color: ${t.toggleTextColor};\n padding: 0 ${t.toggleCaptionGap} 0 0;\n `;\n },\n\n captionWrapper() {\n return css`\n display: inline-block;\n `;\n },\n\n captionWrapperGap(t: Theme) {\n return css`\n padding: 0 0 0 ${t.toggleCaptionGap};\n `;\n },\n\n captionWrapperGapLeft(t: Theme) {\n return css`\n padding: 0 ${t.toggleCaptionGap} 0 0;\n `;\n },\n\n captionNoGap() {\n return css`\n padding: 0;\n `;\n },\n\n subcaption(t: Theme) {\n return css`\n margin-top: 2px;\n color: ${t.toggleCommentTextColor};\n `;\n },\n\n subcaptionDisabled(t: Theme) {\n return css`\n ${disabledTextColorMixin(t.textColorDisabled)};\n `;\n },\n\n subcaptionSmall(t: Theme) {\n return css`\n ${subcaptionMixin(t.toggleCommentFontSizeSmall, t.toggleCommentLineHeightSmall)};\n `;\n },\n subcaptionMedium(t: Theme) {\n return css`\n ${subcaptionMixin(t.toggleCommentFontSizeMedium, t.toggleCommentLineHeightMedium)};\n `;\n },\n subcaptionLarge(t: Theme) {\n return css`\n ${subcaptionMixin(t.toggleCommentFontSizeLarge, t.toggleCommentLineHeightLarge)};\n `;\n },\n}));\n"]}

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

@@ -41,9 +41,14 @@ export declare const TokenDataTids: {
 export declare class Token extends React.Component<TokenProps> {
     static __KONTUR_REACT_UI__: string;
     static displayName: string;
+    private emotion;
+    private cx;
+    private styles;
+    private theme;
     getRootNode: TGetRootNode;
     private setRootNode;
     private readonly locale;
     render(): React.JSX.Element;
+    private renderMain;
     private onRemoveClick;
 }

package/components/Token/Token.js CHANGED Viewed

@@ -34,13 +34,14 @@ import React from 'react';
 import { CloseButtonIcon } from '../../internal/CloseButtonIcon/CloseButtonIcon.js';
 import { CommonWrapper } from '../../internal/CommonWrapper/index.js';
 import { getVisualStateDataAttributes } from '../../internal/CommonWrapper/utils/getVisualStateDataAttributes.js';
-import { cx } from '../../lib/cx.js';
 import { locale } from '../../lib/locale/decorators.js';
 import { reactGetTextContent } from '../../lib/reactGetTextContent.js';
+import { withRenderEnvironment } from '../../lib/renderEnvironment/index.js';
 import { rootNode } from '../../lib/rootNode/index.js';
+import { ThemeContext } from '../../lib/theming/ThemeContext.js';
 import { emptyHandler } from '../../lib/utils.js';
 import { TokenLocaleHelper } from './locale/index.js';
-import { styles } from './Token.css.js';
+import { getStyles } from './Token.styles.js';
 import { TokenView } from './TokenView.js';
 export var TokenDataTids = {
     root: 'Token__root',
@@ -65,11 +66,20 @@ var Token = /** @class */ (function (_super) {
         return _this;
     }
     Token.prototype.render = function () {
+        var _this = this;
+        this.styles = getStyles(this.emotion);
+        return (React.createElement(ThemeContext.Consumer, null, function (theme) {
+            _this.theme = theme;
+            return _this.renderMain();
+        }));
+    };
+    Token.prototype.renderMain = function () {
         var _a = this.props, size = _a.size, children = _a.children, isActive = _a.isActive, error = _a.error, warning = _a.warning, disabled = _a.disabled, ariaDescribedby = _a["aria-describedby"], _b = _a.onClick, onClick = _b === void 0 ? emptyHandler : _b, _c = _a.onDoubleClick, onDoubleClick = _c === void 0 ? emptyHandler : _c, _d = _a.onMouseEnter, onMouseEnter = _d === void 0 ? emptyHandler : _d, _e = _a.onMouseLeave, onMouseLeave = _e === void 0 ? emptyHandler : _e, _f = _a.onFocus, onFocus = _f === void 0 ? emptyHandler : _f, _g = _a.onBlur, onBlur = _g === void 0 ? emptyHandler : _g;
+        var theme = this.theme;
         var removeButtonAriaLabel = this.locale.removeButtonAriaLabel + ' ' + reactGetTextContent(children);
         var icon = (React.createElement(CloseButtonIcon, { side: 16, color: "inherit", colorHover: "inherit", "aria-label": removeButtonAriaLabel, tabbable: false }));
-        var classNames = cx(styles.tokenIdle, !isActive && !warning && !error && !disabled && styles.tokenHover, isActive && styles.tokenActive, warning && styles.tokenWarning, error && styles.tokenError, disabled && styles.tokenDisabled);
-        var textholder = React.createElement("span", { className: styles.text }, children);
+        var classNames = this.cx(this.styles.tokenIdle(theme), !isActive && !warning && !error && !disabled && this.styles.tokenHover(theme), isActive && this.styles.tokenActive(theme), warning && this.styles.tokenWarning(theme), error && this.styles.tokenError(theme), disabled && this.styles.tokenDisabled(theme));
+        var textholder = React.createElement("span", { className: this.styles.text() }, children);
         var closeButton = (React.createElement("span", { onClick: this.onRemoveClick, "data-tid": TokenDataTids.removeIcon }, icon));
         return (React.createElement(CommonWrapper, __assign({ rootNodeRef: this.setRootNode }, this.props, getVisualStateDataAttributes({ disabled: disabled })),
             React.createElement(TokenView, { className: classNames, size: size, closeButton: closeButton, "data-tid": TokenDataTids.root, "aria-describedby": ariaDescribedby, onClick: onClick, onDoubleClick: onDoubleClick, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, onFocus: onFocus, onBlur: onBlur }, textholder)));
@@ -77,6 +87,7 @@ var Token = /** @class */ (function (_super) {
     Token.__KONTUR_REACT_UI__ = 'Token';
     Token.displayName = 'Token';
     Token = __decorate([
+        withRenderEnvironment,
         rootNode,
         locale('Token', TokenLocaleHelper)
     ], Token);

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Token.js","sourceRoot":"","sources":["Token.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~AACA~~,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,eAAe,EAAE,MAAM,mDAAmD,CAAC;AAEpF,OAAO,EAAE,aAAa,EAAE,MAAM,uCAAuC,CAAC;AACtE,OAAO,EAAE,4BAA4B,EAAE,MAAM,oEAAoE,CAAC;AAClH,OAAO,EAAE,~~EAAE~~,EAAE,MAAM,~~iBAAiB~~,CAAC;~~AACrC~~,OAAO,EAAE,~~MAAM~~,EAAE,MAAM,~~gCAAgC~~,CAAC;~~AACxD~~,OAAO,EAAE,~~mBAAmB~~,EAAE,MAAM,~~kCAAkC~~,CAAC;~~AAEvE~~,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AAEvD,OAAO,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAElD,OAAO,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AACtD,OAAO,EAAE,~~MAAM~~,EAAE,MAAM,~~gBAAgB~~,CAAC;~~AACxC~~,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AA+B3C,MAAM,CAAC,IAAM,aAAa,GAAG;IAC3B,IAAI,EAAE,aAAa;IACnB,UAAU,EAAE,mBAAmB;CACvB,CAAC;AAEX;;;GAGG;~~AAGH~~;IAA2B,yBAA2B;IAAtD;;~~QA2EU~~,mBAAa,GAAG,UAAC,KAAgD;YACjE,IAAA,KAAwC,KAAI,CAAC,KAAK,EAAhD,QAAQ,cAAA,EAAE,gBAAuB,EAAvB,QAAQ,mBAAG,YAAY,KAAe,CAAC;YAEzD,IAAI,QAAQ,EAAE,CAAC;gBACb,KAAK,CAAC,cAAc,EAAE,CAAC;gBACvB,OAAO;YACT,CAAC;YAED,QAAQ,CAAC,KAAK,CAAC,CAAC;QAClB,CAAC,CAAC;;IACJ,CAAC;~~IA7EQ~~,sBAAM,GAAb;QACQ,IAAA,KAcF,IAAI,CAAC,KAAK,EAbZ,IAAI,UAAA,EACJ,QAAQ,cAAA,EACR,QAAQ,cAAA,EACR,KAAK,WAAA,EACL,OAAO,aAAA,EACP,QAAQ,cAAA,EACY,eAAe,yBAAA,EACnC,eAAsB,EAAtB,OAAO,mBAAG,YAAY,KAAA,EACtB,qBAA4B,EAA5B,aAAa,mBAAG,YAAY,KAAA,EAC5B,oBAA2B,EAA3B,YAAY,mBAAG,YAAY,KAAA,EAC3B,oBAA2B,EAA3B,YAAY,mBAAG,YAAY,KAAA,EAC3B,eAAsB,EAAtB,OAAO,mBAAG,YAAY,KAAA,EACtB,cAAqB,EAArB,MAAM,mBAAG,YAAY,KACT,CAAC;QAEf,IAAM,qBAAqB,GAAG,IAAI,CAAC,MAAM,CAAC,qBAAqB,GAAG,GAAG,GAAG,mBAAmB,CAAC,QAAQ,CAAC,CAAC;QAEtG,IAAM,IAAI,GAAG,CACX,oBAAC,eAAe,IACd,IAAI,EAAE,EAAE,EACR,KAAK,EAAC,SAAS,EACf,UAAU,EAAC,SAAS,gBACR,qBAAqB,EACjC,QAAQ,EAAE,KAAK,GACf,CACH,CAAC;QAEF,IAAM,UAAU,GAAG,EAAE,~~CACnB~~,MAAM,CAAC,SAAS,~~EAChB~~,CAAC,QAAQ,IAAI,CAAC,OAAO,IAAI,CAAC,KAAK,IAAI,CAAC,QAAQ,IAAI,MAAM,CAAC,UAAU,~~EACjE~~,QAAQ,IAAI,MAAM,CAAC,WAAW,~~EAC9B~~,OAAO,IAAI,MAAM,CAAC,YAAY,~~EAC9B~~,KAAK,IAAI,MAAM,CAAC,UAAU,~~EAC1B~~,QAAQ,IAAI,MAAM,CAAC,aAAa,~~CACjC~~,CAAC;QAEF,IAAM,UAAU,GAAG,8BAAM,SAAS,EAAE,MAAM,CAAC,IAAI,IAAG,QAAQ,CAAQ,CAAC;~~QAEnE~~,IAAM,WAAW,GAAG,CAClB,8BAAM,OAAO,EAAE,IAAI,CAAC,aAAa,cAAY,aAAa,CAAC,UAAU,IAClE,IAAI,CACA,CACR,CAAC;QAEF,OAAO,CACL,oBAAC,aAAa,aAAC,WAAW,EAAE,IAAI,CAAC,WAAW,IAAM,IAAI,CAAC,KAAK,EAAM,4BAA4B,CAAC,EAAE,QAAQ,UAAA,EAAE,CAAC;YAC1G,oBAAC,SAAS,IACR,SAAS,EAAE,UAAU,EACrB,IAAI,EAAE,IAAI,EACV,WAAW,EAAE,WAAW,cACd,aAAa,CAAC,IAAI,sBACV,eAAe,EACjC,OAAO,EAAE,OAAO,EAChB,aAAa,EAAE,aAAa,EAC5B,YAAY,EAAE,YAAY,EAC1B,YAAY,EAAE,YAAY,EAC1B,OAAO,EAAE,OAAO,EAChB,MAAM,EAAE,MAAM,IAEb,UAAU,CACD,CACE,CACjB,CAAC;IACJ,CAAC;~~IAxEa~~,yBAAmB,GAAG,OAAO,AAAV,CAAW;IAC9B,iBAAW,GAAG,OAAO,AAAV,CAAW;IAFzB,KAAK;~~QAFjB~~,QAAQ;QACR,MAAM,CAAC,OAAO,EAAE,iBAAiB,CAAC;OACtB,KAAK,~~CAqFjB~~;IAAD,YAAC;CAAA,~~AArFD~~,CAA2B,KAAK,CAAC,SAAS,~~GAqFzC~~;~~SArFY~~,KAAK","sourcesContent":["import type { AriaAttributes } from 'react';\nimport React from 'react';\n\nimport { CloseButtonIcon } from '../../internal/CloseButtonIcon/CloseButtonIcon.js';\nimport type { CommonProps } from '../../internal/CommonWrapper/index.js';\nimport { CommonWrapper } from '../../internal/CommonWrapper/index.js';\nimport { getVisualStateDataAttributes } from '../../internal/CommonWrapper/utils/getVisualStateDataAttributes.js';\nimport { cx } from '../../lib/cx.js';\nimport { ~~locale~~ } from '../../lib/~~locale/decorators~~.js';\nimport { ~~reactGetTextContent~~ } from '../../lib/~~reactGetTextContent~~.js';\nimport type { TGetRootNode, TSetRootNode } from '../../lib/rootNode/index.js';\nimport { rootNode } from '../../lib/rootNode/index.js';\nimport type { SizeProp } from '../../lib/types/props.js';\nimport { emptyHandler } from '../../lib/utils.js';\nimport type { TokenLocale } from './locale/index.js';\nimport { TokenLocaleHelper } from './locale/index.js';\nimport { ~~styles~~ } from './Token.~~css~~.js';\nimport { TokenView } from './TokenView.js';\n\nexport type TokenSize = SizeProp;\n\nexport interface TokenProps extends Pick<AriaAttributes, 'aria-describedby'>, CommonProps {\n /** Делает токен активным. /\n isActive?: boolean;\n /* Меняет визуальное отображение токена на состояние «ошибка». Может быть полезен при разработке собственной валидации, если вы не используете пакет [React UI Validations](https://tech.skbkontur.ru/kontur-ui/?path=/docs/react-ui-validations_displaying-getting-started--docs). /\n error?: boolean;\n /* Меняет визуальное отображение токена на состояние «предупреждение». Может быть полезен при разработке собственной валидации, если вы не используете пакет [React UI Validations](https://tech.skbkontur.ru/kontur-ui/?path=/docs/react-ui-validations_displaying-getting-started--docs). /\n warning?: boolean;\n /* Блокирует токен. /\n disabled?: boolean;\n /* Размер токена. /\n size?: TokenSize;\n /* Задаёт функцию, которая вызывается при клике на токен. /\n onClick?: React.MouseEventHandler<HTMLDivElement>;\n /* Задаёт функцию, которая вызывается при двойном клике на токен. /\n onDoubleClick?: React.MouseEventHandler<HTMLDivElement>;\n /* Задаёт функцию, которая вызывается, когда токен удаляется. /\n onRemove?: React.MouseEventHandler<HTMLElement>;\n /* Задаёт функцию, которая вызывается при наведении мышкой (событие `onmouseenter`). /\n onMouseEnter?: React.MouseEventHandler<HTMLDivElement>;\n /* Задаёт функцию, которая вызывается при уходе мышки с объекта (событие `onmouseleave`). /\n onMouseLeave?: React.MouseEventHandler<HTMLDivElement>;\n /* Задаёт функцию, которая вызывается, когда токен получает фокус. /\n onFocus?: React.FocusEventHandler<HTMLDivElement>;\n /* Задаёт функцию, которая вызывается, когда токен теряет фокус. /\n onBlur?: React.FocusEventHandler<HTMLDivElement>;\n}\n\nexport const TokenDataTids = {\n root: 'Token__root',\n removeIcon: 'Token__removeIcon',\n} as const;\n\n/* Токены — это значение заданного формата внутри поля ввода. Например, номера телефонов, почты, ИНН, СНИЛС, статусы, группы и другие.\n \n Используется как значение внутри `TokenInput`.\n */\n@rootNode\n@locale('Token', TokenLocaleHelper)\nexport class Token extends React.Component<TokenProps> {\n public static __KONTUR_REACT_UI__ = 'Token';\n public static displayName = 'Token';\n\n public getRootNode!: TGetRootNode;\n private setRootNode!: TSetRootNode;\n private readonly locale!: TokenLocale;\n\n public render(): React.JSX.Element {\n const {\n size,\n children,\n isActive,\n error,\n warning,\n disabled,\n 'aria-describedby': ariaDescribedby,\n onClick = emptyHandler,\n onDoubleClick = emptyHandler,\n onMouseEnter = emptyHandler,\n onMouseLeave = emptyHandler,\n onFocus = emptyHandler,\n onBlur = emptyHandler,\n } = this.props;\n\n const removeButtonAriaLabel = this.locale.removeButtonAriaLabel + ' ' + reactGetTextContent(children);\n\n const icon = (\n <CloseButtonIcon\n side={16}\n color=\"inherit\"\n colorHover=\"inherit\"\n aria-label={removeButtonAriaLabel}\n tabbable={false}\n />\n );\n\n const classNames = cx(\n styles.tokenIdle,\n !isActive && !warning && !error && !disabled && styles.tokenHover,\n isActive && styles.tokenActive,\n warning && styles.tokenWarning,\n error && styles.tokenError,\n disabled && styles.tokenDisabled,\n );\n\n const textholder = <span className={styles.text}>{children}</span>;\n\n const closeButton = (\n <span onClick={this.onRemoveClick} data-tid={TokenDataTids.removeIcon}>\n {icon}\n </span>\n );\n\n return (\n <CommonWrapper rootNodeRef={this.setRootNode} {...this.props} {...getVisualStateDataAttributes({ disabled })}>\n <TokenView\n className={classNames}\n size={size}\n closeButton={closeButton}\n data-tid={TokenDataTids.root}\n aria-describedby={ariaDescribedby}\n onClick={onClick}\n onDoubleClick={onDoubleClick}\n onMouseEnter={onMouseEnter}\n onMouseLeave={onMouseLeave}\n onFocus={onFocus}\n onBlur={onBlur}\n >\n {textholder}\n </TokenView>\n </CommonWrapper>\n );\n }\n\n private onRemoveClick = (event: React.MouseEvent<HTMLElement, MouseEvent>) => {\n const { disabled, onRemove = emptyHandler } = this.props;\n\n if (disabled) {\n event.preventDefault();\n return;\n }\n\n onRemove(event);\n };\n}\n"]}
1	+ {"version":3,"file":"Token.js","sourceRoot":"","sources":["Token.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { Emotion } from '@emotion/css/create-instance';\nimport type { AriaAttributes } from 'react';\nimport React from 'react';\n\nimport { CloseButtonIcon } from '../../internal/CloseButtonIcon/CloseButtonIcon.js';\nimport type { CommonProps } from '../../internal/CommonWrapper/index.js';\nimport { CommonWrapper } from '../../internal/CommonWrapper/index.js';\nimport { getVisualStateDataAttributes } from '../../internal/CommonWrapper/utils/getVisualStateDataAttributes.js';\nimport { locale } from '../../lib/locale/decorators.js';\nimport { reactGetTextContent } from '../../lib/reactGetTextContent.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 type { SizeProp } from '../../lib/types/props.js';\nimport { emptyHandler } from '../../lib/utils.js';\nimport type { TokenLocale } from './locale/index.js';\nimport { TokenLocaleHelper } from './locale/index.js';\nimport { getStyles } from './Token.styles.js';\nimport { TokenView } from './TokenView.js';\n\nexport type TokenSize = SizeProp;\n\nexport interface TokenProps extends Pick<AriaAttributes, 'aria-describedby'>, CommonProps {\n /** Делает токен активным. /\n isActive?: boolean;\n /* Меняет визуальное отображение токена на состояние «ошибка». Может быть полезен при разработке собственной валидации, если вы не используете пакет [React UI Validations](https://tech.skbkontur.ru/kontur-ui/?path=/docs/react-ui-validations_displaying-getting-started--docs). /\n error?: boolean;\n /* Меняет визуальное отображение токена на состояние «предупреждение». Может быть полезен при разработке собственной валидации, если вы не используете пакет [React UI Validations](https://tech.skbkontur.ru/kontur-ui/?path=/docs/react-ui-validations_displaying-getting-started--docs). /\n warning?: boolean;\n /* Блокирует токен. /\n disabled?: boolean;\n /* Размер токена. /\n size?: TokenSize;\n /* Задаёт функцию, которая вызывается при клике на токен. /\n onClick?: React.MouseEventHandler<HTMLDivElement>;\n /* Задаёт функцию, которая вызывается при двойном клике на токен. /\n onDoubleClick?: React.MouseEventHandler<HTMLDivElement>;\n /* Задаёт функцию, которая вызывается, когда токен удаляется. /\n onRemove?: React.MouseEventHandler<HTMLElement>;\n /* Задаёт функцию, которая вызывается при наведении мышкой (событие `onmouseenter`). /\n onMouseEnter?: React.MouseEventHandler<HTMLDivElement>;\n /* Задаёт функцию, которая вызывается при уходе мышки с объекта (событие `onmouseleave`). /\n onMouseLeave?: React.MouseEventHandler<HTMLDivElement>;\n /* Задаёт функцию, которая вызывается, когда токен получает фокус. /\n onFocus?: React.FocusEventHandler<HTMLDivElement>;\n /* Задаёт функцию, которая вызывается, когда токен теряет фокус. /\n onBlur?: React.FocusEventHandler<HTMLDivElement>;\n}\n\nexport const TokenDataTids = {\n root: 'Token__root',\n removeIcon: 'Token__removeIcon',\n} as const;\n\n/* Токены — это значение заданного формата внутри поля ввода. Например, номера телефонов, почты, ИНН, СНИЛС, статусы, группы и другие.\n \n Используется как значение внутри `TokenInput`.\n */\n@withRenderEnvironment\n@rootNode\n@locale('Token', TokenLocaleHelper)\nexport class Token extends React.Component<TokenProps> {\n public static __KONTUR_REACT_UI__ = 'Token';\n public static displayName = 'Token';\n\n private emotion!: Emotion;\n private cx!: Emotion['cx'];\n private styles!: ReturnType<typeof getStyles>;\n private theme!: Theme;\n public getRootNode!: TGetRootNode;\n private setRootNode!: TSetRootNode;\n private readonly locale!: TokenLocale;\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 this.renderMain();\n }}\n </ThemeContext.Consumer>\n );\n }\n\n private renderMain() {\n const {\n size,\n children,\n isActive,\n error,\n warning,\n disabled,\n 'aria-describedby': ariaDescribedby,\n onClick = emptyHandler,\n onDoubleClick = emptyHandler,\n onMouseEnter = emptyHandler,\n onMouseLeave = emptyHandler,\n onFocus = emptyHandler,\n onBlur = emptyHandler,\n } = this.props;\n\n const theme = this.theme;\n\n const removeButtonAriaLabel = this.locale.removeButtonAriaLabel + ' ' + reactGetTextContent(children);\n\n const icon = (\n <CloseButtonIcon\n side={16}\n color=\"inherit\"\n colorHover=\"inherit\"\n aria-label={removeButtonAriaLabel}\n tabbable={false}\n />\n );\n\n const classNames = this.cx(\n this.styles.tokenIdle(theme),\n !isActive && !warning && !error && !disabled && this.styles.tokenHover(theme),\n isActive && this.styles.tokenActive(theme),\n warning && this.styles.tokenWarning(theme),\n error && this.styles.tokenError(theme),\n disabled && this.styles.tokenDisabled(theme),\n );\n\n const textholder = <span className={this.styles.text()}>{children}</span>;\n\n const closeButton = (\n <span onClick={this.onRemoveClick} data-tid={TokenDataTids.removeIcon}>\n {icon}\n </span>\n );\n\n return (\n <CommonWrapper rootNodeRef={this.setRootNode} {...this.props} {...getVisualStateDataAttributes({ disabled })}>\n <TokenView\n className={classNames}\n size={size}\n closeButton={closeButton}\n data-tid={TokenDataTids.root}\n aria-describedby={ariaDescribedby}\n onClick={onClick}\n onDoubleClick={onDoubleClick}\n onMouseEnter={onMouseEnter}\n onMouseLeave={onMouseLeave}\n onFocus={onFocus}\n onBlur={onBlur}\n >\n {textholder}\n </TokenView>\n </CommonWrapper>\n );\n }\n\n private onRemoveClick = (event: React.MouseEvent<HTMLElement, MouseEvent>) => {\n const { disabled, onRemove = emptyHandler } = this.props;\n\n if (disabled) {\n event.preventDefault();\n return;\n }\n\n onRemove(event);\n };\n}\n"]}

package/components/Token/Token.mixins.d.ts CHANGED Viewed

@@ -1,6 +1 @@
-export declare const tokenSizeMixin: (tokenPaddingY: string, tokenPaddingX: string, lineHeight: string, fontSize: string, tokenMarginY: string, tokenMarginX: string) => {
-    padding: string;
-    margin: string;
-    lineHeight: string;
-    fontSize: string;
-};
+export declare const tokenSizeMixin: (tokenPaddingY: string, tokenPaddingX: string, lineHeight: string, fontSize: string, tokenMarginY: string, tokenMarginX: string) => string;

package/components/Token/Token.mixins.js CHANGED Viewed

@@ -1,7 +1,4 @@
-export var tokenSizeMixin = function (tokenPaddingY, tokenPaddingX, lineHeight, fontSize, tokenMarginY, tokenMarginX) { return ({
-    padding: "".concat(tokenPaddingY, " ").concat(tokenPaddingX),
-    margin: "".concat(tokenMarginY, " ").concat(tokenMarginX),
-    lineHeight: lineHeight,
-    fontSize: fontSize,
-}); };
+export var tokenSizeMixin = function (tokenPaddingY, tokenPaddingX, lineHeight, fontSize, tokenMarginY, tokenMarginX) {
+    return "\n    padding: ".concat(tokenPaddingY, " ").concat(tokenPaddingX, ";\n    margin: ").concat(tokenMarginY, " ").concat(tokenMarginX, ";\n    line-height: ").concat(lineHeight, ";\n    font-size: ").concat(fontSize, ";\n  ");
+};
 //# sourceMappingURL=Token.mixins.js.map

package/components/Token/Token.mixins.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Token.mixins.js","sourceRoot":"","sources":["Token.mixins.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,IAAM,cAAc,GAAG,UAC5B,aAAqB,EACrB,aAAqB,EACrB,UAAkB,EAClB,QAAgB,EAChB,YAAoB,EACpB,YAAoB~~,IACjB,OAAA,CAAC~~;~~IACJ~~,OAAO,~~EAAE~~,~~UAAG,~~aAAa,cAAI,aAAa,~~CAAE;IAC5C~~,~~MAAM,EAAE,UAAG,~~YAAY,cAAI,YAAY,~~CAAE;IACzC~~,UAAU,~~YAAA;IACV,~~QAAQ,~~UAAA~~;~~CACT~~,CAAC,~~EALG,CAKH,~~CAAC","sourcesContent":["export const tokenSizeMixin = (\n tokenPaddingY: string,\n tokenPaddingX: string,\n lineHeight: string,\n fontSize: string,\n tokenMarginY: string,\n tokenMarginX: string,\n) => ({\n padding: `${tokenPaddingY} ${tokenPaddingX}~~`,\~~n margin: `${tokenMarginY} ${tokenMarginX}~~`,\~~n lineHeight,\n fontSize,\n});\n"]}
1	+ {"version":3,"file":"Token.mixins.js","sourceRoot":"","sources":["Token.mixins.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,IAAM,cAAc,GAAG,UAC5B,aAAqB,EACrB,aAAqB,EACrB,UAAkB,EAClB,QAAgB,EAChB,YAAoB,EACpB,YAAoB;IAEpB,OAAO,yBACM,aAAa,cAAI,aAAa,4BAC/B,YAAY,cAAI,YAAY,iCACvB,UAAU,+BACZ,QAAQ,UACtB,CAAC;AACJ,CAAC,CAAC","sourcesContent":["export const tokenSizeMixin = (\n tokenPaddingY: string,\n tokenPaddingX: string,\n lineHeight: string,\n fontSize: string,\n tokenMarginY: string,\n tokenMarginX: string,\n): string => {\n return `\n padding: ${tokenPaddingY} ${tokenPaddingX};\n margin: ${tokenMarginY} ${tokenMarginX};\n line-height: ${lineHeight};\n font-size: ${fontSize};\n `;\n};\n"]}

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

@@ -0,0 +1,23 @@
+import type { Theme } from '../../lib/theming/Theme.js';
+export declare const globalClasses: {
+    removeIcon: string;
+};
+export declare const getStyles: import("../../lib/theming/Emotion.js").StylesGetter<{
+    token(t: Theme): string;
+    tokenSmall(t: Theme): string;
+    tokenMedium(t: Theme): string;
+    tokenLarge(t: Theme): string;
+    tokenIdle(t: Theme): string;
+    tokenHover(t: Theme): string;
+    tokenActive(t: Theme): string;
+    tokenError(t: Theme): string;
+    tokenWarning(t: Theme): string;
+    tokenDisabled(t: Theme): string;
+    text(): string;
+    removeIcon(t: Theme): string;
+    helperText(): string;
+    helperContainer(): string;
+    helperContainerSmall(t: Theme): string;
+    helperContainerMedium(t: Theme): string;
+    helperContainerLarge(t: Theme): string;
+}>;

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

@@ -0,0 +1,67 @@
+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, prefix } from '../../lib/theming/Emotion.js';
+import { tokenSizeMixin } from './Token.mixins.js';
+export var globalClasses = prefix('token')({
+    removeIcon: 'remove-icon',
+});
+export var getStyles = memoizeGetStyles(function (_a) {
+    var css = _a.css;
+    return ({
+        token: function (t) {
+            return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      display: inline-flex;\n      align-items: center;\n      border-radius: ", ";\n      border: solid ", " transparent;\n      min-width: 0;\n      word-break: break-all;\n      user-select: none;\n\n      &:hover {\n        cursor: pointer;\n      }\n    "], ["\n      display: inline-flex;\n      align-items: center;\n      border-radius: ", ";\n      border: solid ", " transparent;\n      min-width: 0;\n      word-break: break-all;\n      user-select: none;\n\n      &:hover {\n        cursor: pointer;\n      }\n    "])), t.tokenBorderRadius, t.tokenBorderWidth);
+        },
+        tokenSmall: function (t) {
+            return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n      ", ";\n    "], ["\n      ", ";\n    "])), tokenSizeMixin(t.tokenPaddingYSmall, t.tokenPaddingXSmall, t.tokenLineHeightSmall, t.tokenFontSizeSmall, t.tokenMarginYSmall, t.tokenMarginXSmall));
+        },
+        tokenMedium: function (t) {
+            return css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n      ", ";\n    "], ["\n      ", ";\n    "])), tokenSizeMixin(t.tokenPaddingYMedium, t.tokenPaddingXMedium, t.tokenLineHeightMedium, t.tokenFontSizeMedium, t.tokenMarginYMedium, t.tokenMarginXMedium));
+        },
+        tokenLarge: function (t) {
+            return css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n      ", ";\n    "], ["\n      ", ";\n    "])), tokenSizeMixin(t.tokenPaddingYLarge, t.tokenPaddingXLarge, t.tokenLineHeightLarge, t.tokenFontSizeLarge, t.tokenMarginYLarge, t.tokenMarginXLarge));
+        },
+        tokenIdle: function (t) {
+            return css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n      color: ", ";\n      background: ", ";\n      border-color: ", ";\n      background-clip: border-box;\n    "], ["\n      color: ", ";\n      background: ", ";\n      border-color: ", ";\n      background-clip: border-box;\n    "])), t.tokenColor, t.tokenBg, t.tokenBorderColor);
+        },
+        tokenHover: function (t) {
+            return css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n      &:hover {\n        color: ", ";\n        background: ", ";\n        border: solid ", " ", ";\n      }\n    "], ["\n      &:hover {\n        color: ", ";\n        background: ", ";\n        border: solid ", " ", ";\n      }\n    "])), t.tokenColorHover, t.tokenBgHover, t.tokenBorderWidth, t.tokenBorderColorHover);
+        },
+        tokenActive: function (t) {
+            return css(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n      color: ", ";\n      background: ", ";\n      border: solid ", " ", ";\n    "], ["\n      color: ", ";\n      background: ", ";\n      border: solid ", " ", ";\n    "])), t.tokenColorActive, t.tokenBgActive, t.tokenBorderWidth, t.tokenBorderColorActive);
+        },
+        tokenError: function (t) {
+            return css(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n      border: solid ", " ", ";\n      box-shadow: 0 0 0 ", " ", ";\n    "], ["\n      border: solid ", " ", ";\n      box-shadow: 0 0 0 ", " ", ";\n    "])), t.tokenBorderWidth, t.tokenBorderColorError, t.tokenOutlineWidth, t.tokenBorderColorError);
+        },
+        tokenWarning: function (t) {
+            return css(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n      border: solid ", " ", ";\n      box-shadow: 0 0 0 ", " ", ";\n    "], ["\n      border: solid ", " ", ";\n      box-shadow: 0 0 0 ", " ", ";\n    "])), t.tokenBorderWidth, t.tokenBorderColorWarning, t.tokenOutlineWidth, t.tokenBorderColorWarning);
+        },
+        tokenDisabled: function (t) {
+            return css(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n      user-select: text;\n      cursor: text;\n      color: ", ";\n      pointer-events: none;\n      border: solid 1px ", ";\n\n      .", " {\n        visibility: hidden;\n      }\n    "], ["\n      user-select: text;\n      cursor: text;\n      color: ", ";\n      pointer-events: none;\n      border: solid 1px ", ";\n\n      .", " {\n        visibility: hidden;\n      }\n    "])), t.tokenTextColorDisabled, t.tokenBorderColorDisabled, globalClasses.removeIcon);
+        },
+        text: function () {
+            return css(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n      display: inline-block;\n    "], ["\n      display: inline-block;\n    "])));
+        },
+        removeIcon: function (t) {
+            return css(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n      height: ", ";\n      width: ", ";\n      flex-shrink: 0;\n      padding: ", " ", ";\n      box-sizing: ", ";\n      margin-left: ", ";\n      transition: none;\n      fill: currentColor;\n      opacity: 0.5;\n      line-height: 0;\n      display: inline-block;\n\n      &:hover {\n        opacity: 1;\n      }\n    "], ["\n      height: ", ";\n      width: ", ";\n      flex-shrink: 0;\n      padding: ", " ", ";\n      box-sizing: ", ";\n      margin-left: ", ";\n      transition: none;\n      fill: currentColor;\n      opacity: 0.5;\n      line-height: 0;\n      display: inline-block;\n\n      &:hover {\n        opacity: 1;\n      }\n    "])), t.tokenRemoveIconSize, t.tokenRemoveIconSize, t.tokenRemoveIconPaddingY, t.tokenRemoveIconPaddingX, t.tokenRemoveIconBoxSizing, t.tokenRemoveIconGap);
+        },
+        helperText: function () {
+            return css(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n      max-width: 100%;\n      word-break: break-all;\n\n      // don't collapse spaces\n      // so they get counted in width\n      white-space: pre-wrap;\n    "], ["\n      max-width: 100%;\n      word-break: break-all;\n\n      // don't collapse spaces\n      // so they get counted in width\n      white-space: pre-wrap;\n    "])));
+        },
+        helperContainer: function () {
+            return css(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n      display: flex;\n      position: absolute;\n      visibility: hidden;\n    "], ["\n      display: flex;\n      position: absolute;\n      visibility: hidden;\n    "])));
+        },
+        helperContainerSmall: function (t) {
+            return css(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n      left: ", ";\n      right: ", ";\n    "], ["\n      left: ", ";\n      right: ", ";\n    "])), t.tokenInputPaddingXSmall, t.tokenInputPaddingXSmall);
+        },
+        helperContainerMedium: function (t) {
+            return css(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n      left: ", ";\n      right: ", ";\n    "], ["\n      left: ", ";\n      right: ", ";\n    "])), t.tokenInputPaddingXMedium, t.tokenInputPaddingXMedium);
+        },
+        helperContainerLarge: function (t) {
+            return css(templateObject_17 || (templateObject_17 = __makeTemplateObject(["\n      left: ", ";\n      right: ", ";\n    "], ["\n      left: ", ";\n      right: ", ";\n    "])), t.tokenInputPaddingXLarge, t.tokenInputPaddingXLarge);
+        },
+    });
+});
+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, templateObject_16, templateObject_17;
+//# sourceMappingURL=Token.styles.js.map

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

@@ -0,0 +1 @@

+ {"version":3,"file":"Token.styles.js","sourceRoot":"","sources":["Token.styles.ts"],"names":[],"mappings":"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","sourcesContent":["import type { Emotion } from '@emotion/css/create-instance';\n\nimport { memoizeGetStyles, prefix } from '../../lib/theming/Emotion.js';\nimport type { Theme } from '../../lib/theming/Theme.js';\nimport { tokenSizeMixin } from './Token.mixins.js';\n\nexport const globalClasses = prefix('token')({\n removeIcon: 'remove-icon',\n});\n\nexport const getStyles = memoizeGetStyles(({ css }: Emotion) => ({\n token(t: Theme) {\n return css`\n display: inline-flex;\n align-items: center;\n border-radius: ${t.tokenBorderRadius};\n border: solid ${t.tokenBorderWidth} transparent;\n min-width: 0;\n word-break: break-all;\n user-select: none;\n\n &:hover {\n cursor: pointer;\n }\n `;\n },\n\n tokenSmall(t: Theme) {\n return css`\n ${tokenSizeMixin(\n t.tokenPaddingYSmall,\n t.tokenPaddingXSmall,\n t.tokenLineHeightSmall,\n t.tokenFontSizeSmall,\n t.tokenMarginYSmall,\n t.tokenMarginXSmall,\n )};\n `;\n },\n\n tokenMedium(t: Theme) {\n return css`\n ${tokenSizeMixin(\n t.tokenPaddingYMedium,\n t.tokenPaddingXMedium,\n t.tokenLineHeightMedium,\n t.tokenFontSizeMedium,\n t.tokenMarginYMedium,\n t.tokenMarginXMedium,\n )};\n `;\n },\n\n tokenLarge(t: Theme) {\n return css`\n ${tokenSizeMixin(\n t.tokenPaddingYLarge,\n t.tokenPaddingXLarge,\n t.tokenLineHeightLarge,\n t.tokenFontSizeLarge,\n t.tokenMarginYLarge,\n t.tokenMarginXLarge,\n )};\n `;\n },\n\n tokenIdle(t: Theme) {\n return css`\n color: ${t.tokenColor};\n background: ${t.tokenBg};\n border-color: ${t.tokenBorderColor};\n background-clip: border-box;\n `;\n },\n\n tokenHover(t: Theme) {\n return css`\n &:hover {\n color: ${t.tokenColorHover};\n background: ${t.tokenBgHover};\n border: solid ${t.tokenBorderWidth} ${t.tokenBorderColorHover};\n }\n `;\n },\n\n tokenActive(t: Theme) {\n return css`\n color: ${t.tokenColorActive};\n background: ${t.tokenBgActive};\n border: solid ${t.tokenBorderWidth} ${t.tokenBorderColorActive};\n `;\n },\n\n tokenError(t: Theme) {\n return css`\n border: solid ${t.tokenBorderWidth} ${t.tokenBorderColorError};\n box-shadow: 0 0 0 ${t.tokenOutlineWidth} ${t.tokenBorderColorError};\n `;\n },\n\n tokenWarning(t: Theme) {\n return css`\n border: solid ${t.tokenBorderWidth} ${t.tokenBorderColorWarning};\n box-shadow: 0 0 0 ${t.tokenOutlineWidth} ${t.tokenBorderColorWarning};\n `;\n },\n\n tokenDisabled(t: Theme) {\n return css`\n user-select: text;\n cursor: text;\n color: ${t.tokenTextColorDisabled};\n pointer-events: none;\n border: solid 1px ${t.tokenBorderColorDisabled};\n\n .${globalClasses.removeIcon} {\n visibility: hidden;\n }\n `;\n },\n\n text() {\n return css`\n display: inline-block;\n `;\n },\n\n removeIcon(t: Theme) {\n return css`\n height: ${t.tokenRemoveIconSize};\n width: ${t.tokenRemoveIconSize};\n flex-shrink: 0;\n padding: ${t.tokenRemoveIconPaddingY} ${t.tokenRemoveIconPaddingX};\n box-sizing: ${t.tokenRemoveIconBoxSizing};\n margin-left: ${t.tokenRemoveIconGap};\n transition: none;\n fill: currentColor;\n opacity: 0.5;\n line-height: 0;\n display: inline-block;\n\n &:hover {\n opacity: 1;\n }\n `;\n },\n\n helperText() {\n return css`\n max-width: 100%;\n word-break: break-all;\n\n // don't collapse spaces\n // so they get counted in width\n white-space: pre-wrap;\n `;\n },\n helperContainer() {\n return css`\n display: flex;\n position: absolute;\n visibility: hidden;\n `;\n },\n helperContainerSmall(t: Theme) {\n return css`\n left: ${t.tokenInputPaddingXSmall};\n right: ${t.tokenInputPaddingXSmall};\n `;\n },\n helperContainerMedium(t: Theme) {\n return css`\n left: ${t.tokenInputPaddingXMedium};\n right: ${t.tokenInputPaddingXMedium};\n `;\n },\n helperContainerLarge(t: Theme) {\n return css`\n left: ${t.tokenInputPaddingXLarge};\n right: ${t.tokenInputPaddingXLarge};\n `;\n },\n}));\n"]}

package/components/Token/TokenView.js CHANGED Viewed

@@ -20,28 +20,32 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import React, { forwardRef } from 'react';
+import React, { forwardRef, useContext } from 'react';
 import { CommonWrapper } from '../../internal/CommonWrapper/index.js';
-import { cx } from '../../lib/cx.js';
-import { styles, globalClasses } from './Token.css.js';
+import { useEmotion, useStyles } from '../../lib/renderEnvironment/index.js';
+import { ThemeContext } from '../../lib/theming/ThemeContext.js';
+import { getStyles, globalClasses } from './Token.styles.js';
 export var TokenView = forwardRef(function (props, ref) {
     var _a;
     var _b = props.size, size = _b === void 0 ? 'small' : _b, children = props.children, closeButton = props.closeButton, hideCloseButton = props.hideCloseButton, className = props.className, rest = __rest(props, ["size", "children", "closeButton", "hideCloseButton", "className"]);
+    var cx = useEmotion().cx;
+    var styles = useStyles(getStyles);
+    var theme = useContext(ThemeContext);
     var getSizeClassName = function (size) {
         switch (size) {
             case 'large':
-                return styles.tokenLarge;
+                return styles.tokenLarge(theme);
             case 'medium':
-                return styles.tokenMedium;
+                return styles.tokenMedium(theme);
             case 'small':
             default:
-                return styles.tokenSmall;
+                return styles.tokenSmall(theme);
         }
     };
-    var closeButtonNode = hideCloseButton ? null : (React.createElement("span", { className: cx(styles.removeIcon, globalClasses.removeIcon) }, closeButton));
+    var closeButtonNode = hideCloseButton ? null : (React.createElement("span", { className: cx(styles.removeIcon(theme), globalClasses.removeIcon) }, closeButton));
     return (React.createElement(CommonWrapper, __assign({}, props, { ref: ref }),
         React.createElement("div", __assign({}, rest, { className: cx(getSizeClassName(size), (_a = {},
-                _a[styles.token] = true,
+                _a[styles.token(theme)] = true,
                 _a)) }),
             children,
             closeButtonNode)));

package/components/Token/TokenView.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"TokenView.js","sourceRoot":"","sources":["TokenView.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;~~AAG1C~~,OAAO,EAAoB,aAAa,EAAE,MAAM,uCAAuC,CAAC;AACxF,OAAO,EAAE,EAAE,EAAE,MAAM,~~iBAAiB~~,CAAC;~~AACrC~~,OAAO,EAAE,MAAM,EAAE,aAAa,EAAE,MAAM,~~gBAAgB~~,CAAC;~~AAYvD~~,MAAM,CAAC,IAAM,SAAS,GAAG,UAAU,CAAC,UAAC,KAAqB,EAAE,GAA0C;;IAC5F,IAAA,KAA+E,KAAK,KAAtE,EAAd,IAAI,mBAAG,OAAO,KAAA,EAAE,QAAQ,GAAuD,KAAK,SAA5D,EAAE,WAAW,GAA0C,KAAK,YAA/C,EAAE,eAAe,GAAyB,KAAK,gBAA9B,EAAE,SAAS,GAAc,KAAK,UAAnB,EAAK,IAAI,UAAK,KAAK,EAAtF,mEAA8E,CAAF,CAAW;~~IAC7F~~,IAAM,gBAAgB,GAAG,UAAC,IAAe;QACvC,QAAQ,IAAI,EAAE,CAAC;YACb,KAAK,OAAO;gBACV,OAAO,MAAM,CAAC,UAAU,CAAC;~~YAC3B~~,KAAK,QAAQ;gBACX,OAAO,MAAM,CAAC,WAAW,CAAC;~~YAC5B~~,KAAK,OAAO,CAAC;YACb;gBACE,OAAO,MAAM,CAAC,UAAU,CAAC;~~QAC7B~~,CAAC;IACH,CAAC,CAAC;IACF,IAAM,eAAe,GAAG,eAAe,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAC/C,8BAAM,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,UAAU,CAAC,IAAG,WAAW,CAAQ,~~CACvF~~,CAAC;IAEF,OAAO,CACL,oBAAC,aAAa,eAAK,KAAK,IAAE,GAAG,EAAE,GAAG;QAChC,wCACM,IAAI,IACR,SAAS,EAAE,EAAE,CAAC,gBAAgB,CAAC,IAAI,CAAC;gBAClC,GAAC,MAAM,CAAC,KAAK,IAAG,IAAI;~~oBACpB~~;YAED,QAAQ;YACR,eAAe,CACZ,CACQ,CACjB,CAAC;AACJ,CAAC,CAAC,CAAC","sourcesContent":["import React, { forwardRef } from 'react';\nimport type { ReactNode } from 'react';\n\nimport { type CommonProps, CommonWrapper } from '../../internal/CommonWrapper/index.js';\nimport { cx } from '../../lib/cx.js';\nimport { ~~styles,~~ ~~globalClasses~~ } from '~~./Token~~.~~css.~~js';\nimport type { TokenSize } from './Token.js';\n\nexport interface TokenViewProps extends React.HTMLAttributes<HTMLDivElement> {\n /** Задает размер контрола. /\n size?: TokenSize;\n /* Задает компонент крестика для удаления токена. /\n closeButton?: ReactNode;\n /* Определяет, скрывать ли крестик для удаления токена. */\n hideCloseButton?: boolean;\n}\n\nexport const TokenView = forwardRef((props: TokenViewProps, ref: React.Ref<CommonWrapper<CommonProps>>) => {\n const { size = 'small', children, closeButton, hideCloseButton, className, ...rest } = props;\n const getSizeClassName = (size: TokenSize) => {\n switch (size) {\n case 'large':\n return styles.tokenLarge;\n case 'medium':\n return styles.tokenMedium;\n case 'small':\n default:\n return styles.tokenSmall;\n }\n };\n const closeButtonNode = hideCloseButton ? null : (\n <span className={cx(styles.removeIcon, globalClasses.removeIcon)}>{closeButton}</span>\n );\n\n return (\n <CommonWrapper {...props} ref={ref}>\n <div\n {...rest}\n className={cx(getSizeClassName(size), {\n [styles.token]: true,\n })}\n >\n {children}\n {closeButtonNode}\n </div>\n </CommonWrapper>\n );\n});\n"]}
1	+ {"version":3,"file":"TokenView.js","sourceRoot":"","sources":["TokenView.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAGtD,OAAO,EAAoB,aAAa,EAAE,MAAM,uCAAuC,CAAC;AACxF,OAAO,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,sCAAsC,CAAC;AAC7E,OAAO,EAAE,YAAY,EAAE,MAAM,mCAAmC,CAAC;AAEjE,OAAO,EAAE,SAAS,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAW7D,MAAM,CAAC,IAAM,SAAS,GAAG,UAAU,CAAC,UAAC,KAAqB,EAAE,GAA0C;;IAC5F,IAAA,KAA+E,KAAK,KAAtE,EAAd,IAAI,mBAAG,OAAO,KAAA,EAAE,QAAQ,GAAuD,KAAK,SAA5D,EAAE,WAAW,GAA0C,KAAK,YAA/C,EAAE,eAAe,GAAyB,KAAK,gBAA9B,EAAE,SAAS,GAAc,KAAK,UAAnB,EAAK,IAAI,UAAK,KAAK,EAAtF,mEAA8E,CAAF,CAAW;IACrF,IAAA,EAAE,GAAK,UAAU,EAAE,GAAjB,CAAkB;IAC5B,IAAM,MAAM,GAAG,SAAS,CAAC,SAAS,CAAC,CAAC;IACpC,IAAM,KAAK,GAAG,UAAU,CAAC,YAAY,CAAC,CAAC;IACvC,IAAM,gBAAgB,GAAG,UAAC,IAAe;QACvC,QAAQ,IAAI,EAAE,CAAC;YACb,KAAK,OAAO;gBACV,OAAO,MAAM,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC;YAClC,KAAK,QAAQ;gBACX,OAAO,MAAM,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;YACnC,KAAK,OAAO,CAAC;YACb;gBACE,OAAO,MAAM,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC;QACpC,CAAC;IACH,CAAC,CAAC;IACF,IAAM,eAAe,GAAG,eAAe,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAC/C,8BAAM,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,UAAU,CAAC,KAAK,CAAC,EAAE,aAAa,CAAC,UAAU,CAAC,IAAG,WAAW,CAAQ,CAC9F,CAAC;IAEF,OAAO,CACL,oBAAC,aAAa,eAAK,KAAK,IAAE,GAAG,EAAE,GAAG;QAChC,wCACM,IAAI,IACR,SAAS,EAAE,EAAE,CAAC,gBAAgB,CAAC,IAAI,CAAC;gBAClC,GAAC,MAAM,CAAC,KAAK,CAAC,KAAK,CAAC,IAAG,IAAI;oBAC3B;YAED,QAAQ;YACR,eAAe,CACZ,CACQ,CACjB,CAAC;AACJ,CAAC,CAAC,CAAC","sourcesContent":["import React, { forwardRef, useContext } from 'react';\nimport type { ReactNode } from 'react';\n\nimport { type CommonProps, CommonWrapper } from '../../internal/CommonWrapper/index.js';\nimport { useEmotion, useStyles } from '../../lib/renderEnvironment/index.js';\nimport { ThemeContext } from '../../lib/theming/ThemeContext.js';\nimport type { TokenSize } from './Token.js';\nimport { getStyles, globalClasses } from './Token.styles.js';\n\nexport interface TokenViewProps extends React.HTMLAttributes<HTMLDivElement> {\n /** Задает размер контрола. /\n size?: TokenSize;\n /* Задает компонент крестика для удаления токена. /\n closeButton?: ReactNode;\n /* Определяет, скрывать ли крестик для удаления токена. */\n hideCloseButton?: boolean;\n}\n\nexport const TokenView = forwardRef((props: TokenViewProps, ref: React.Ref<CommonWrapper<CommonProps>>) => {\n const { size = 'small', children, closeButton, hideCloseButton, className, ...rest } = props;\n const { cx } = useEmotion();\n const styles = useStyles(getStyles);\n const theme = useContext(ThemeContext);\n const getSizeClassName = (size: TokenSize) => {\n switch (size) {\n case 'large':\n return styles.tokenLarge(theme);\n case 'medium':\n return styles.tokenMedium(theme);\n case 'small':\n default:\n return styles.tokenSmall(theme);\n }\n };\n const closeButtonNode = hideCloseButton ? null : (\n <span className={cx(styles.removeIcon(theme), globalClasses.removeIcon)}>{closeButton}</span>\n );\n\n return (\n <CommonWrapper {...props} ref={ref}>\n <div\n {...rest}\n className={cx(getSizeClassName(size), {\n [styles.token(theme)]: true,\n })}\n >\n {children}\n {closeButtonNode}\n </div>\n </CommonWrapper>\n );\n});\n"]}

package/components/TokenInput/TextWidthHelper.d.ts CHANGED Viewed

@@ -15,6 +15,9 @@ export interface TextWidthHelperProps {
  */
 export declare class TextWidthHelper extends React.Component<TextWidthHelperProps> {
     private element;
+    private emotion;
+    private cx;
+    private styles;
     private getSizeClassName;
     render(): React.JSX.Element;
     getTextWidth(): number;

package/components/TokenInput/TextWidthHelper.js CHANGED Viewed

@@ -13,10 +13,16 @@ var __extends = (this && this.__extends) || (function () {
         d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
     };
 })();
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
 import React from 'react';
-import { cx } from '../../lib/cx.js';
 import { getDOMRect } from '../../lib/dom/getDOMRect.js';
-import { styles } from '../Token/Token.css.js';
+import { withRenderEnvironment } from '../../lib/renderEnvironment/index.js';
+import { getStyles } from '../Token/Token.styles.js';
 import { TokenView } from '../Token/TokenView.js';
 // a thin character to preserve some space
 // for the caret visibillity in the input
@@ -38,17 +44,18 @@ var TextWidthHelper = /** @class */ (function (_super) {
     TextWidthHelper.prototype.getSizeClassName = function (size) {
         switch (size) {
             case 'large':
-                return styles.helperContainerLarge;
+                return this.styles.helperContainerLarge(this.props.theme);
             case 'medium':
-                return styles.helperContainerMedium;
+                return this.styles.helperContainerMedium(this.props.theme);
             case 'small':
             default:
-                return styles.helperContainerSmall;
+                return this.styles.helperContainerSmall(this.props.theme);
         }
     };
     TextWidthHelper.prototype.render = function () {
-        return (React.createElement(TokenView, { size: this.props.size, className: cx(styles.helperContainer, this.getSizeClassName(this.props.size)) },
-            React.createElement("div", { className: styles.helperText, ref: this.elementRef }, this.props.text || THIN_SPACE)));
+        this.styles = getStyles(this.emotion);
+        return (React.createElement(TokenView, { size: this.props.size, className: this.cx(this.styles.helperContainer(), this.getSizeClassName(this.props.size)) },
+            React.createElement("div", { className: this.styles.helperText(), ref: this.elementRef }, this.props.text || THIN_SPACE)));
     };
     TextWidthHelper.prototype.getTextWidth = function () {
         return getDOMRect(this.element).width;
@@ -56,6 +63,9 @@ var TextWidthHelper = /** @class */ (function (_super) {
     TextWidthHelper.prototype.getTextHeight = function () {
         return getDOMRect(this.element).height;
     };
+    TextWidthHelper = __decorate([
+        withRenderEnvironment
+    ], TextWidthHelper);
     return TextWidthHelper;
 }(React.Component));
 export { TextWidthHelper };