@skbkontur/react-ui 6.4.1 → 6.4.2-static-css.0

package/components/Input/InputLayout/InputLayout.styles.js

@@ -1,59 +1,29 @@
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
-import { ZERO_WIDTH_SPACE_CSS } from '../../../lib/chars.js';
-import { memoizeGetStyles } from '../../../lib/theming/Emotion.js';
-import { getStyles } from '../Input.styles.js';
-export var getStylesLayout = memoizeGetStyles(function (emotion) {
-    var styles = getStyles(emotion);
-    return {
-        root: function (t) {
-            return styles.root(t);
-        },
-        input: function () {
-            return emotion.css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n        min-width: 0;\n        overflow: hidden;\n        position: relative;\n        width: 100%;\n        display: flex;\n      "], ["\n        min-width: 0;\n        overflow: hidden;\n        position: relative;\n        width: 100%;\n        display: flex;\n      "])));
-        },
-        aside: function () {
-            return emotion.css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n        display: inline-flex;\n        align-items: center;\n        flex-shrink: 0;\n\n        &::before {\n          content: '", "';\n        }\n      "], ["\n        display: inline-flex;\n        align-items: center;\n        flex-shrink: 0;\n\n        &::before {\n          content: '", "';\n        }\n      "])), ZERO_WIDTH_SPACE_CSS);
-        },
-        icon: function (t) {
-            return emotion.css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n        color: ", ";\n      "], ["\n        color: ", ";\n      "])), t.inputIconColor);
-        },
-        iconFocus: function (t) {
-            return emotion.css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n        color: ", ";\n      "], ["\n        color: ", ";\n      "])), t.inputFocusedIconColor);
-        },
-        iconDisabled: function (t) {
-            return emotion.css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n        cursor: default;\n        color: ", ";\n      "], ["\n        cursor: default;\n        color: ", ";\n      "])), t.inputIconColorDisabled);
-        },
-        text: function (t) {
-            return emotion.css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n        color: ", ";\n      "], ["\n        color: ", ";\n      "])), t.inputPlaceholderColor);
-        },
-        text6_4: function (t) {
-            return emotion.css(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n        color: ", ";\n      "], ["\n        color: ", ";\n      "])), t.inputAffixColor);
-        },
-        textDisabled: function (t) {
-            return emotion.css(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n        color: ", ";\n      "], ["\n        color: ", ";\n      "])), t.inputPlaceholderColorDisabled);
-        },
-        counter: function (t) {
-            return emotion.css(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n        font-variant-numeric: tabular-nums;\n        color: ", ";\n      "], ["\n        font-variant-numeric: tabular-nums;\n        color: ", ";\n      "])), t.inputCounterColor);
-        },
-        counterSmall: function (t) {
-            return emotion.css(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n        margin-left: ", ";\n      "], ["\n        margin-left: ", ";\n      "])), t.inputCounterMarginLeftSmall);
-        },
-        counterMedium: function (t) {
-            return emotion.css(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n        margin-left: ", ";\n      "], ["\n        margin-left: ", ";\n      "])), t.inputCounterMarginLeftMedium);
-        },
-        counterLarge: function (t) {
-            return emotion.css(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n        margin-left: ", ";\n      "], ["\n        margin-left: ", ";\n      "])), t.inputCounterMarginLeftLarge);
-        },
-        counterError: function (t) {
-            return emotion.css(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n        color: ", ";\n      "], ["\n        color: ", ";\n      "])), t.inputCounterColorError);
-        },
-        counterHelp: function (t) {
-            return emotion.css(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n        margin-left: ", ";\n      "], ["\n        margin-left: ", ";\n      "])), t.inputCounterHelpMarginLeft);
-        },
-    };
+import { staticStyles } from '../../../lib/theming/staticStyles.js';
+/** Правила — в `InputLayout.css`; здесь только имена классов. */
+export var getStylesLayout = staticStyles({
+    root: 'react-ui-InputLayout-StylesLayout-root',
+    input: 'react-ui-InputLayout-StylesLayout-input',
+    aside: 'react-ui-InputLayout-StylesLayout-aside',
+    icon: 'react-ui-InputLayout-StylesLayout-icon',
+    iconSizeSmall: 'react-ui-InputLayout-StylesLayout-iconSizeSmall',
+    iconSizeMedium: 'react-ui-InputLayout-StylesLayout-iconSizeMedium',
+    iconSizeLarge: 'react-ui-InputLayout-StylesLayout-iconSizeLarge',
+    iconGapLeftSmall: 'react-ui-InputLayout-StylesLayout-iconGapLeftSmall',
+    iconGapLeftMedium: 'react-ui-InputLayout-StylesLayout-iconGapLeftMedium',
+    iconGapLeftLarge: 'react-ui-InputLayout-StylesLayout-iconGapLeftLarge',
+    iconGapRightSmall: 'react-ui-InputLayout-StylesLayout-iconGapRightSmall',
+    iconGapRightMedium: 'react-ui-InputLayout-StylesLayout-iconGapRightMedium',
+    iconGapRightLarge: 'react-ui-InputLayout-StylesLayout-iconGapRightLarge',
+    iconFocus: 'react-ui-InputLayout-StylesLayout-iconFocus',
+    iconDisabled: 'react-ui-InputLayout-StylesLayout-iconDisabled',
+    text: 'react-ui-InputLayout-StylesLayout-text',
+    text6_4: 'react-ui-InputLayout-StylesLayout-text6_4',
+    textDisabled: 'react-ui-InputLayout-StylesLayout-textDisabled',
+    counter: 'react-ui-InputLayout-StylesLayout-counter',
+    counterSmall: 'react-ui-InputLayout-StylesLayout-counterSmall',
+    counterMedium: 'react-ui-InputLayout-StylesLayout-counterMedium',
+    counterLarge: 'react-ui-InputLayout-StylesLayout-counterLarge',
+    counterError: 'react-ui-InputLayout-StylesLayout-counterError',
+    counterHelp: 'react-ui-InputLayout-StylesLayout-counterHelp',
 });
-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;
 //# sourceMappingURL=InputLayout.styles.js.map

package/components/Input/InputLayout/InputLayout.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"InputLayout.styles.js","sourceRoot":"","sources":["InputLayout.styles.ts"],"names":[],"mappings":";;;;AAEA,OAAO,EAAE,oBAAoB,EAAE,MAAM,uBAAuB,CAAC;AAC7D,OAAO,EAAE,gBAAgB,EAAE,MAAM,iCAAiC,CAAC;AAEnE,OAAO,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAE/C,MAAM,CAAC,IAAM,eAAe,GAAG,gBAAgB,CAAC,UAAC,OAAgB;IAC/D,IAAM,MAAM,GAAG,SAAS,CAAC,OAAO,CAAC,CAAC;IAElC,OAAO;QACL,IAAI,YAAC,CAAQ;YACX,OAAO,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;QACxB,CAAC;QACD,KAAK;YACH,OAAO,OAAO,CAAC,GAAG,0MAAA,uIAMjB,KAAC;QACJ,CAAC;QACD,KAAK;YACH,OAAO,OAAO,CAAC,GAAG,iOAAA,qIAMF,EAAoB,uBAEnC,KAFe,oBAAoB,EAElC;QACJ,CAAC;QACD,IAAI,YAAC,CAAQ;YACX,OAAO,OAAO,CAAC,GAAG,mGAAA,mBACP,EAAgB,WAC1B,KADU,CAAC,CAAC,cAAc,EACzB;QACJ,CAAC;QACD,SAAS,YAAC,CAAQ;YAChB,OAAO,OAAO,CAAC,GAAG,mGAAA,mBACP,EAAuB,WACjC,KADU,CAAC,CAAC,qBAAqB,EAChC;QACJ,CAAC;QACD,YAAY,YAAC,CAAQ;YACnB,OAAO,OAAO,CAAC,GAAG,6HAAA,6CAEP,EAAwB,WAClC,KADU,CAAC,CAAC,sBAAsB,EACjC;QACJ,CAAC;QACD,IAAI,YAAC,CAAQ;YACX,OAAO,OAAO,CAAC,GAAG,mGAAA,mBACP,EAAuB,WACjC,KADU,CAAC,CAAC,qBAAqB,EAChC;QACJ,CAAC;QAED,OAAO,YAAC,CAAQ;YACd,OAAO,OAAO,CAAC,GAAG,mGAAA,mBACP,EAAiB,WAC3B,KADU,CAAC,CAAC,eAAe,EAC1B;QACJ,CAAC;QAED,YAAY,YAAC,CAAQ;YACnB,OAAO,OAAO,CAAC,GAAG,mGAAA,mBACP,EAA+B,WACzC,KADU,CAAC,CAAC,6BAA6B,EACxC;QACJ,CAAC;QACD,OAAO,YAAC,CAAQ;YACd,OAAO,OAAO,CAAC,GAAG,gJAAA,gEAEP,EAAmB,WAC7B,KADU,CAAC,CAAC,iBAAiB,EAC5B;QACJ,CAAC;QACD,YAAY,YAAC,CAAQ;YACnB,OAAO,OAAO,CAAC,GAAG,2GAAA,yBACD,EAA6B,WAC7C,KADgB,CAAC,CAAC,2BAA2B,EAC5C;QACJ,CAAC;QACD,aAAa,YAAC,CAAQ;YACpB,OAAO,OAAO,CAAC,GAAG,2GAAA,yBACD,EAA8B,WAC9C,KADgB,CAAC,CAAC,4BAA4B,EAC7C;QACJ,CAAC;QACD,YAAY,YAAC,CAAQ;YACnB,OAAO,OAAO,CAAC,GAAG,2GAAA,yBACD,EAA6B,WAC7C,KADgB,CAAC,CAAC,2BAA2B,EAC5C;QACJ,CAAC;QACD,YAAY,YAAC,CAAQ;YACnB,OAAO,OAAO,CAAC,GAAG,qGAAA,mBACP,EAAwB,WAClC,KADU,CAAC,CAAC,sBAAsB,EACjC;QACJ,CAAC;QACD,WAAW,YAAC,CAAQ;YAClB,OAAO,OAAO,CAAC,GAAG,2GAAA,yBACD,EAA4B,WAC5C,KADgB,CAAC,CAAC,0BAA0B,EAC3C;QACJ,CAAC;KACF,CAAC;AACJ,CAAC,CAAC,CAAC","sourcesContent":["import type { Emotion } from '@emotion/css/create-instance';\n\nimport { ZERO_WIDTH_SPACE_CSS } from '../../../lib/chars.js';\nimport { memoizeGetStyles } from '../../../lib/theming/Emotion.js';\nimport type { Theme } from '../../../lib/theming/Theme.js';\nimport { getStyles } from '../Input.styles.js';\n\nexport const getStylesLayout = memoizeGetStyles((emotion: Emotion) => {\n  const styles = getStyles(emotion);\n\n  return {\n    root(t: Theme) {\n      return styles.root(t);\n    },\n    input() {\n      return emotion.css`\n        min-width: 0;\n        overflow: hidden;\n        position: relative;\n        width: 100%;\n        display: flex;\n      `;\n    },\n    aside() {\n      return emotion.css`\n        display: inline-flex;\n        align-items: center;\n        flex-shrink: 0;\n\n        &::before {\n          content: '${ZERO_WIDTH_SPACE_CSS}';\n        }\n      `;\n    },\n    icon(t: Theme) {\n      return emotion.css`\n        color: ${t.inputIconColor};\n      `;\n    },\n    iconFocus(t: Theme) {\n      return emotion.css`\n        color: ${t.inputFocusedIconColor};\n      `;\n    },\n    iconDisabled(t: Theme) {\n      return emotion.css`\n        cursor: default;\n        color: ${t.inputIconColorDisabled};\n      `;\n    },\n    text(t: Theme) {\n      return emotion.css`\n        color: ${t.inputPlaceholderColor};\n      `;\n    },\n\n    text6_4(t: Theme) {\n      return emotion.css`\n        color: ${t.inputAffixColor};\n      `;\n    },\n\n    textDisabled(t: Theme) {\n      return emotion.css`\n        color: ${t.inputPlaceholderColorDisabled};\n      `;\n    },\n    counter(t: Theme) {\n      return emotion.css`\n        font-variant-numeric: tabular-nums;\n        color: ${t.inputCounterColor};\n      `;\n    },\n    counterSmall(t: Theme) {\n      return emotion.css`\n        margin-left: ${t.inputCounterMarginLeftSmall};\n      `;\n    },\n    counterMedium(t: Theme) {\n      return emotion.css`\n        margin-left: ${t.inputCounterMarginLeftMedium};\n      `;\n    },\n    counterLarge(t: Theme) {\n      return emotion.css`\n        margin-left: ${t.inputCounterMarginLeftLarge};\n      `;\n    },\n    counterError(t: Theme) {\n      return emotion.css`\n        color: ${t.inputCounterColorError};\n      `;\n    },\n    counterHelp(t: Theme) {\n      return emotion.css`\n        margin-left: ${t.inputCounterHelpMarginLeft};\n      `;\n    },\n  };\n});\n"]}
+{"version":3,"file":"InputLayout.styles.js","sourceRoot":"","sources":["InputLayout.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,sCAAsC,CAAC;AAEpE,iEAAiE;AACjE,MAAM,CAAC,IAAM,eAAe,GAAG,YAAY,CAAC;IAC1C,IAAI,EAAE,wCAAwC;IAC9C,KAAK,EAAE,yCAAyC;IAChD,KAAK,EAAE,yCAAyC;IAChD,IAAI,EAAE,wCAAwC;IAC9C,aAAa,EAAE,iDAAiD;IAChE,cAAc,EAAE,kDAAkD;IAClE,aAAa,EAAE,iDAAiD;IAChE,gBAAgB,EAAE,oDAAoD;IACtE,iBAAiB,EAAE,qDAAqD;IACxE,gBAAgB,EAAE,oDAAoD;IACtE,iBAAiB,EAAE,qDAAqD;IACxE,kBAAkB,EAAE,sDAAsD;IAC1E,iBAAiB,EAAE,qDAAqD;IACxE,SAAS,EAAE,6CAA6C;IACxD,YAAY,EAAE,gDAAgD;IAC9D,IAAI,EAAE,wCAAwC;IAC9C,OAAO,EAAE,2CAA2C;IACpD,YAAY,EAAE,gDAAgD;IAC9D,OAAO,EAAE,2CAA2C;IACpD,YAAY,EAAE,gDAAgD;IAC9D,aAAa,EAAE,iDAAiD;IAChE,YAAY,EAAE,gDAAgD;IAC9D,YAAY,EAAE,gDAAgD;IAC9D,WAAW,EAAE,+CAA+C;CAC7D,CAAC,CAAC","sourcesContent":["import { staticStyles } from '../../../lib/theming/staticStyles.js';\n\n/** Правила — в `InputLayout.css`; здесь только имена классов. */\nexport const getStylesLayout = staticStyles({\n  root: 'react-ui-InputLayout-StylesLayout-root',\n  input: 'react-ui-InputLayout-StylesLayout-input',\n  aside: 'react-ui-InputLayout-StylesLayout-aside',\n  icon: 'react-ui-InputLayout-StylesLayout-icon',\n  iconSizeSmall: 'react-ui-InputLayout-StylesLayout-iconSizeSmall',\n  iconSizeMedium: 'react-ui-InputLayout-StylesLayout-iconSizeMedium',\n  iconSizeLarge: 'react-ui-InputLayout-StylesLayout-iconSizeLarge',\n  iconGapLeftSmall: 'react-ui-InputLayout-StylesLayout-iconGapLeftSmall',\n  iconGapLeftMedium: 'react-ui-InputLayout-StylesLayout-iconGapLeftMedium',\n  iconGapLeftLarge: 'react-ui-InputLayout-StylesLayout-iconGapLeftLarge',\n  iconGapRightSmall: 'react-ui-InputLayout-StylesLayout-iconGapRightSmall',\n  iconGapRightMedium: 'react-ui-InputLayout-StylesLayout-iconGapRightMedium',\n  iconGapRightLarge: 'react-ui-InputLayout-StylesLayout-iconGapRightLarge',\n  iconFocus: 'react-ui-InputLayout-StylesLayout-iconFocus',\n  iconDisabled: 'react-ui-InputLayout-StylesLayout-iconDisabled',\n  text: 'react-ui-InputLayout-StylesLayout-text',\n  text6_4: 'react-ui-InputLayout-StylesLayout-text6_4',\n  textDisabled: 'react-ui-InputLayout-StylesLayout-textDisabled',\n  counter: 'react-ui-InputLayout-StylesLayout-counter',\n  counterSmall: 'react-ui-InputLayout-StylesLayout-counterSmall',\n  counterMedium: 'react-ui-InputLayout-StylesLayout-counterMedium',\n  counterLarge: 'react-ui-InputLayout-StylesLayout-counterLarge',\n  counterError: 'react-ui-InputLayout-StylesLayout-counterError',\n  counterHelp: 'react-ui-InputLayout-StylesLayout-counterHelp',\n});\n"]}

package/components/Input/InputLayout/InputLayoutAsideCounter.js

@@ -15,7 +15,8 @@ import { Tooltip } from '../../../components/Tooltip/Tooltip.js';
 import { QuestionCircleIcon16Light } from '../../../internal/icons2022/QuestionCircleIcon/QuestionCircleIcon16Light.js';
 import { QuestionCircleIcon20Regular } from '../../../internal/icons2022/QuestionCircleIcon/QuestionCircleIcon20Regular.js';
 import { QuestionCircleIcon24Regular } from '../../../internal/icons2022/QuestionCircleIcon/QuestionCircleIcon24Regular.js';
-import { useEmotion, useStyles } from '../../../lib/renderEnvironment/index.js';
+import { useStyles } from '../../../lib/renderEnvironment/index.js';
+import { concatClassNames as cx } from '../../../lib/theming/Emotion.js';
 import { ThemeContext } from '../../../lib/theming/ThemeContext.js';
 import { isFunction } from '../../../lib/utils.js';
 import { InputDataTids } from '../Input.js';
@@ -25,7 +26,6 @@ export var InputLayoutAsideCounter = function (_a) {
     var _b;
     var length = _a.length, inputValue = _a.inputValue, help = _a.help, onCloseHelp = _a.onCloseHelp, size = _a.size;
     var theme = React.useContext(ThemeContext);
-    var cx = useEmotion().cx;
     var stylesLayout = useStyles(getStylesLayout);
     var renderTooltipContent = useCallback(function () {
         if (typeof help === 'function') {
@@ -55,21 +55,21 @@ export var InputLayoutAsideCounter = function (_a) {
     var getCounterSizeClassName = function () {
         switch (size) {
             case 'large':
-                return stylesLayout.counterLarge(theme);
+                return stylesLayout.counterLarge();
             case 'medium':
-                return stylesLayout.counterMedium(theme);
+                return stylesLayout.counterMedium();
             case 'small':
             default:
-                return stylesLayout.counterSmall(theme);
+                return stylesLayout.counterSmall();
         }
     };
     var inputValueLength = inputValue ? inputValue.length : 0;
     var counterValue = length - inputValueLength;
     var isNegativeValue = counterValue < 0;
-    return (React.createElement("span", { "data-tid": InputDataTids.counter, className: cx(asideClassName, getCounterSizeClassName(), stylesLayout.counter(theme), (_b = {},
-            _b[stylesLayout.counterError(theme)] = isNegativeValue,
+    return (React.createElement("span", { "data-tid": InputDataTids.counter, className: cx(asideClassName, getCounterSizeClassName(), stylesLayout.counter(), (_b = {},
+            _b[stylesLayout.counterError()] = isNegativeValue,
             _b)) },
         isNegativeValue ? "".concat(MINUS_SIGN).concat(-counterValue) : counterValue,
-        help && React.createElement("span", { className: stylesLayout.counterHelp(theme) }, counterHelp)));
+        help && React.createElement("span", { className: stylesLayout.counterHelp() }, counterHelp)));
 };
 //# sourceMappingURL=InputLayoutAsideCounter.js.map

package/components/Input/InputLayout/InputLayoutAsideCounter.js.map

@@ -1 +1 @@
-{"version":3,"file":"InputLayoutAsideCounter.js","sourceRoot":"","sources":["InputLayoutAsideCounter.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { SyntheticEvent } from 'react';\nimport React, { useCallback } from 'react';\n\nimport { MINUS_SIGN } from '../../../components/CurrencyInput/constants.js';\nimport { Tooltip } from '../../../components/Tooltip/Tooltip.js';\nimport { QuestionCircleIcon16Light } from '../../../internal/icons2022/QuestionCircleIcon/QuestionCircleIcon16Light.js';\nimport { QuestionCircleIcon20Regular } from '../../../internal/icons2022/QuestionCircleIcon/QuestionCircleIcon20Regular.js';\nimport { QuestionCircleIcon24Regular } from '../../../internal/icons2022/QuestionCircleIcon/QuestionCircleIcon24Regular.js';\nimport { useEmotion, useStyles } from '../../../lib/renderEnvironment/index.js';\nimport { ThemeContext } from '../../../lib/theming/ThemeContext.js';\nimport type { SizeProp } from '../../../lib/types/props.js';\nimport { isFunction } from '../../../lib/utils.js';\nimport { InputDataTids, type InputProps } from '../Input.js';\nimport { getStylesLayout } from './InputLayout.styles.js';\n\nexport interface InputLayoutAsideCounterProps {\n  length: number;\n  inputValue: InputProps['value'];\n  help: InputProps['counterHelp'];\n  onCloseHelp?: () => void;\n  size?: SizeProp;\n}\n\nconst handleHelpMouseDown = (e: SyntheticEvent) => e.preventDefault();\n\nexport const InputLayoutAsideCounter: React.FunctionComponent<InputLayoutAsideCounterProps> = ({\n  length,\n  inputValue,\n  help,\n  onCloseHelp,\n  size,\n}) => {\n  const theme = React.useContext(ThemeContext);\n  const { cx } = useEmotion();\n  const stylesLayout = useStyles(getStylesLayout);\n\n  const renderTooltipContent = useCallback(() => {\n    if (typeof help === 'function') {\n      return help();\n    }\n    return help;\n  }, [help]);\n\n  const getHelpIcon = () => {\n    switch (size) {\n      case 'large':\n        return <QuestionCircleIcon24Regular {...helpIconProps} />;\n      case 'medium':\n        return <QuestionCircleIcon20Regular {...helpIconProps} />;\n      case 'small':\n      default:\n        return <QuestionCircleIcon16Light {...helpIconProps} />;\n    }\n  };\n  const helpIconProps = {\n    onMouseDown: handleHelpMouseDown,\n    color: theme.inputCounterHelpIconColor,\n    'data-tid': InputDataTids.counterHelpIcon,\n    style: { cursor: 'pointer' },\n  };\n  const counterHelp = isFunction(help) ? (\n    help()\n  ) : (\n    <Tooltip\n      pos={'right bottom'}\n      trigger={'click'}\n      render={renderTooltipContent}\n      onCloseClick={onCloseHelp}\n      size={size}\n    >\n      {getHelpIcon()}\n    </Tooltip>\n  );\n\n  const asideClassName = stylesLayout.aside();\n  const getCounterSizeClassName = () => {\n    switch (size) {\n      case 'large':\n        return stylesLayout.counterLarge(theme);\n      case 'medium':\n        return stylesLayout.counterMedium(theme);\n      case 'small':\n      default:\n        return stylesLayout.counterSmall(theme);\n    }\n  };\n\n  const inputValueLength = inputValue ? inputValue.length : 0;\n  const counterValue = length - inputValueLength;\n  const isNegativeValue = counterValue < 0;\n\n  return (\n    <span\n      data-tid={InputDataTids.counter}\n      className={cx(asideClassName, getCounterSizeClassName(), stylesLayout.counter(theme), {\n        [stylesLayout.counterError(theme)]: isNegativeValue,\n      })}\n    >\n      {isNegativeValue ? `${MINUS_SIGN}${-counterValue}` : counterValue}\n      {help && <span className={stylesLayout.counterHelp(theme)}>{counterHelp}</span>}\n    </span>\n  );\n};\n"]}
+{"version":3,"file":"InputLayoutAsideCounter.js","sourceRoot":"","sources":["InputLayoutAsideCounter.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { SyntheticEvent } from 'react';\nimport React, { useCallback } from 'react';\n\nimport { MINUS_SIGN } from '../../../components/CurrencyInput/constants.js';\nimport { Tooltip } from '../../../components/Tooltip/Tooltip.js';\nimport { QuestionCircleIcon16Light } from '../../../internal/icons2022/QuestionCircleIcon/QuestionCircleIcon16Light.js';\nimport { QuestionCircleIcon20Regular } from '../../../internal/icons2022/QuestionCircleIcon/QuestionCircleIcon20Regular.js';\nimport { QuestionCircleIcon24Regular } from '../../../internal/icons2022/QuestionCircleIcon/QuestionCircleIcon24Regular.js';\nimport { useStyles } from '../../../lib/renderEnvironment/index.js';\nimport { concatClassNames as cx } from '../../../lib/theming/Emotion.js';\nimport { ThemeContext } from '../../../lib/theming/ThemeContext.js';\nimport type { SizeProp } from '../../../lib/types/props.js';\nimport { isFunction } from '../../../lib/utils.js';\nimport { InputDataTids, type InputProps } from '../Input.js';\nimport { getStylesLayout } from './InputLayout.styles.js';\n\nexport interface InputLayoutAsideCounterProps {\n  length: number;\n  inputValue: InputProps['value'];\n  help: InputProps['counterHelp'];\n  onCloseHelp?: () => void;\n  size?: SizeProp;\n}\n\nconst handleHelpMouseDown = (e: SyntheticEvent) => e.preventDefault();\n\nexport const InputLayoutAsideCounter: React.FunctionComponent<InputLayoutAsideCounterProps> = ({\n  length,\n  inputValue,\n  help,\n  onCloseHelp,\n  size,\n}) => {\n  const theme = React.useContext(ThemeContext);\n  const stylesLayout = useStyles(getStylesLayout);\n\n  const renderTooltipContent = useCallback(() => {\n    if (typeof help === 'function') {\n      return help();\n    }\n    return help;\n  }, [help]);\n\n  const getHelpIcon = () => {\n    switch (size) {\n      case 'large':\n        return <QuestionCircleIcon24Regular {...helpIconProps} />;\n      case 'medium':\n        return <QuestionCircleIcon20Regular {...helpIconProps} />;\n      case 'small':\n      default:\n        return <QuestionCircleIcon16Light {...helpIconProps} />;\n    }\n  };\n  const helpIconProps = {\n    onMouseDown: handleHelpMouseDown,\n    color: theme.inputCounterHelpIconColor,\n    'data-tid': InputDataTids.counterHelpIcon,\n    style: { cursor: 'pointer' },\n  };\n  const counterHelp = isFunction(help) ? (\n    help()\n  ) : (\n    <Tooltip\n      pos={'right bottom'}\n      trigger={'click'}\n      render={renderTooltipContent}\n      onCloseClick={onCloseHelp}\n      size={size}\n    >\n      {getHelpIcon()}\n    </Tooltip>\n  );\n\n  const asideClassName = stylesLayout.aside();\n  const getCounterSizeClassName = () => {\n    switch (size) {\n      case 'large':\n        return stylesLayout.counterLarge();\n      case 'medium':\n        return stylesLayout.counterMedium();\n      case 'small':\n      default:\n        return stylesLayout.counterSmall();\n    }\n  };\n\n  const inputValueLength = inputValue ? inputValue.length : 0;\n  const counterValue = length - inputValueLength;\n  const isNegativeValue = counterValue < 0;\n\n  return (\n    <span\n      data-tid={InputDataTids.counter}\n      className={cx(asideClassName, getCounterSizeClassName(), stylesLayout.counter(), {\n        [stylesLayout.counterError()]: isNegativeValue,\n      })}\n    >\n      {isNegativeValue ? `${MINUS_SIGN}${-counterValue}` : counterValue}\n      {help && <span className={stylesLayout.counterHelp()}>{counterHelp}</span>}\n    </span>\n  );\n};\n"]}

package/components/Input/InputLayout/InputLayoutAsideIcon.js

@@ -1,43 +1,37 @@
 import React from 'react';
+import { ALIASES_TO_SIZES } from '../../../internal/icons2022/iconConstants.js';
 import { isElement } from '../../../lib/react-is.js';
-import { useEmotion, useStyles } from '../../../lib/renderEnvironment/index.js';
-import { ThemeContext } from '../../../lib/theming/ThemeContext.js';
+import { useStyles } from '../../../lib/renderEnvironment/index.js';
+import { concatClassNames as cx } from '../../../lib/theming/Emotion.js';
 import { isKonturIcon } from '../../../lib/utils.js';
 import { getStylesLayout } from './InputLayout.styles.js';
 import { InputLayoutContext } from './InputLayoutContext.js';
+/** Классы размера иконки и отступа от поля — по размеру контрола и стороне. */
+var SIZE_CLASS = {
+    small: 'iconSizeSmall',
+    medium: 'iconSizeMedium',
+    large: 'iconSizeLarge',
+};
+var GAP_CLASS = {
+    left: { small: 'iconGapLeftSmall', medium: 'iconGapLeftMedium', large: 'iconGapLeftLarge' },
+    right: { small: 'iconGapRightSmall', medium: 'iconGapRightMedium', large: 'iconGapRightLarge' },
+};
 export var InputLayoutAsideIcon = function (_a) {
     var _b;
     var _c = _a.icon, icon = _c === void 0 ? null : _c, side = _a.side;
-    var theme = React.useContext(ThemeContext);
-    var cx = useEmotion().cx;
     var stylesLayout = useStyles(getStylesLayout);
     var _d = React.useContext(InputLayoutContext), focused = _d.focused, disabled = _d.disabled, size = _d.size;
-    var sizes = {
-        small: parseInt(theme.inputIconSizeSmall),
-        medium: parseInt(theme.inputIconSizeMedium),
-        large: parseInt(theme.inputIconSizeLarge),
-    };
-    var gaps = {
-        small: parseInt(theme.inputIconGapSmall),
-        medium: parseInt(theme.inputIconGapMedium),
-        large: parseInt(theme.inputIconGapLarge),
-    };
     var _icon = icon instanceof Function ? icon() : icon;
     if (isElement(icon) && isKonturIcon(icon)) {
         var iconProps = icon.props;
+        // Число по алиасу, а не значение темы: иконке нужен именно размер в
+        // пикселях — по нему она выбирает отрисовку, а иконки из общего пакета
+        // алиас в атрибут `width` кладут как есть и остаются вовсе без размера.
+        // Точный размер поверх этого задаёт класс со ссылкой на переменную темы.
         _icon = React.cloneElement(icon, {
-            size: (_b = iconProps.size) !== null && _b !== void 0 ? _b : sizes[size],
+            size: (_b = iconProps.size) !== null && _b !== void 0 ? _b : ALIASES_TO_SIZES[size],
         });
     }
-    var style = {};
-    if (side) {
-        if (side === 'right') {
-            style.marginLeft = gaps[size];
-        }
-        else {
-            style.marginRight = gaps[size];
-        }
-    }
-    return _icon ? (React.createElement("span", { style: style, className: cx(stylesLayout.aside(), stylesLayout.icon(theme), focused && stylesLayout.iconFocus(theme), disabled && stylesLayout.iconDisabled(theme)) }, _icon)) : null;
+    return _icon ? (React.createElement("span", { className: cx(stylesLayout.aside(), stylesLayout.icon(), stylesLayout[SIZE_CLASS[size]](), stylesLayout[GAP_CLASS[side][size]](), focused && stylesLayout.iconFocus(), disabled && stylesLayout.iconDisabled()) }, _icon)) : null;
 };
 //# sourceMappingURL=InputLayoutAsideIcon.js.map

package/components/Input/InputLayout/InputLayoutAsideIcon.js.map

@@ -1 +1 @@
-{"version":3,"file":"InputLayoutAsideIcon.js","sourceRoot":"","sources":["InputLayoutAsideIcon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAAE,SAAS,EAAE,MAAM,0BAA0B,CAAC;AACrD,OAAO,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,yCAAyC,CAAC;AAChF,OAAO,EAAE,YAAY,EAAE,MAAM,sCAAsC,CAAC;AAEpE,OAAO,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAErD,OAAO,EAAE,eAAe,EAAE,MAAM,yBAAyB,CAAC;AAC1D,OAAO,EAAE,kBAAkB,EAAE,MAAM,yBAAyB,CAAC;AAO7D,MAAM,CAAC,IAAM,oBAAoB,GAAuD,UAAC,EAAqB;;QAAnB,YAAW,EAAX,IAAI,mBAAG,IAAI,KAAA,EAAE,IAAI,UAAA;IAC1G,IAAM,KAAK,GAAG,KAAK,CAAC,UAAU,CAAC,YAAY,CAAC,CAAC;IACrC,IAAA,EAAE,GAAK,UAAU,EAAE,GAAjB,CAAkB;IAC5B,IAAM,YAAY,GAAG,SAAS,CAAC,eAAe,CAAC,CAAC;IAC1C,IAAA,KAA8B,KAAK,CAAC,UAAU,CAAC,kBAAkB,CAAC,EAAhE,OAAO,aAAA,EAAE,QAAQ,cAAA,EAAE,IAAI,UAAyC,CAAC;IAEzE,IAAM,KAAK,GAA6B;QACtC,KAAK,EAAE,QAAQ,CAAC,KAAK,CAAC,kBAAkB,CAAC;QACzC,MAAM,EAAE,QAAQ,CAAC,KAAK,CAAC,mBAAmB,CAAC;QAC3C,KAAK,EAAE,QAAQ,CAAC,KAAK,CAAC,kBAAkB,CAAC;KAC1C,CAAC;IACF,IAAM,IAAI,GAA6B;QACrC,KAAK,EAAE,QAAQ,CAAC,KAAK,CAAC,iBAAiB,CAAC;QACxC,MAAM,EAAE,QAAQ,CAAC,KAAK,CAAC,kBAAkB,CAAC;QAC1C,KAAK,EAAE,QAAQ,CAAC,KAAK,CAAC,iBAAiB,CAAC;KACzC,CAAC;IAEF,IAAI,KAAK,GAAG,IAAI,YAAY,QAAQ,CAAC,CAAC,CAAC,IAAI,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC;IACrD,IAAI,SAAS,CAAC,IAAI,CAAC,IAAI,YAAY,CAAC,IAAI,CAAC,EAAE,CAAC;QAC1C,IAAM,SAAS,GAAG,IAAI,CAAC,KAAkB,CAAC;QAC1C,KAAK,GAAG,KAAK,CAAC,YAAY,CAAC,IAAI,EAAE;YAC/B,IAAI,EAAE,MAAA,SAAS,CAAC,IAAI,mCAAI,KAAK,CAAC,IAAI,CAAC;SACvB,CAAC,CAAC;IAClB,CAAC;IAED,IAAM,KAAK,GAAwB,EAAE,CAAC;IACtC,IAAI,IAAI,EAAE,CAAC;QACT,IAAI,IAAI,KAAK,OAAO,EAAE,CAAC;YACrB,KAAK,CAAC,UAAU,GAAG,IAAI,CAAC,IAAI,CAAC,CAAC;QAChC,CAAC;aAAM,CAAC;YACN,KAAK,CAAC,WAAW,GAAG,IAAI,CAAC,IAAI,CAAC,CAAC;QACjC,CAAC;IACH,CAAC;IAED,OAAO,KAAK,CAAC,CAAC,CAAC,CACb,8BACE,KAAK,EAAE,KAAK,EACZ,SAAS,EAAE,EAAE,CACX,YAAY,CAAC,KAAK,EAAE,EACpB,YAAY,CAAC,IAAI,CAAC,KAAK,CAAC,EACxB,OAAO,IAAI,YAAY,CAAC,SAAS,CAAC,KAAK,CAAC,EACxC,QAAQ,IAAI,YAAY,CAAC,YAAY,CAAC,KAAK,CAAC,CAC7C,IAEA,KAAK,CACD,CACR,CAAC,CAAC,CAAC,IAAI,CAAC;AACX,CAAC,CAAC","sourcesContent":["import React from 'react';\n\nimport type { IconProps } from '../../../internal/icons2022/BaseIcon.js';\nimport { isElement } from '../../../lib/react-is.js';\nimport { useEmotion, useStyles } from '../../../lib/renderEnvironment/index.js';\nimport { ThemeContext } from '../../../lib/theming/ThemeContext.js';\nimport type { SizeProp } from '../../../lib/types/props.js';\nimport { isKonturIcon } from '../../../lib/utils.js';\nimport type { InputProps } from '../Input.js';\nimport { getStylesLayout } from './InputLayout.styles.js';\nimport { InputLayoutContext } from './InputLayoutContext.js';\n\nexport interface InputLayoutAsideIconProps {\n  icon: InputProps['leftIcon'] | InputProps['rightIcon'];\n  side: 'left' | 'right';\n}\n\nexport const InputLayoutAsideIcon: React.FunctionComponent<InputLayoutAsideIconProps> = ({ icon = null, side }) => {\n  const theme = React.useContext(ThemeContext);\n  const { cx } = useEmotion();\n  const stylesLayout = useStyles(getStylesLayout);\n  const { focused, disabled, size } = React.useContext(InputLayoutContext);\n\n  const sizes: Record<SizeProp, number> = {\n    small: parseInt(theme.inputIconSizeSmall),\n    medium: parseInt(theme.inputIconSizeMedium),\n    large: parseInt(theme.inputIconSizeLarge),\n  };\n  const gaps: Record<SizeProp, number> = {\n    small: parseInt(theme.inputIconGapSmall),\n    medium: parseInt(theme.inputIconGapMedium),\n    large: parseInt(theme.inputIconGapLarge),\n  };\n\n  let _icon = icon instanceof Function ? icon() : icon;\n  if (isElement(icon) && isKonturIcon(icon)) {\n    const iconProps = icon.props as IconProps;\n    _icon = React.cloneElement(icon, {\n      size: iconProps.size ?? sizes[size],\n    } as IconProps);\n  }\n\n  const style: React.CSSProperties = {};\n  if (side) {\n    if (side === 'right') {\n      style.marginLeft = gaps[size];\n    } else {\n      style.marginRight = gaps[size];\n    }\n  }\n\n  return _icon ? (\n    <span\n      style={style}\n      className={cx(\n        stylesLayout.aside(),\n        stylesLayout.icon(theme),\n        focused && stylesLayout.iconFocus(theme),\n        disabled && stylesLayout.iconDisabled(theme),\n      )}\n    >\n      {_icon}\n    </span>\n  ) : null;\n};\n"]}
+{"version":3,"file":"InputLayoutAsideIcon.js","sourceRoot":"","sources":["InputLayoutAsideIcon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAAE,gBAAgB,EAAE,MAAM,8CAA8C,CAAC;AAChF,OAAO,EAAE,SAAS,EAAE,MAAM,0BAA0B,CAAC;AACrD,OAAO,EAAE,SAAS,EAAE,MAAM,yCAAyC,CAAC;AACpE,OAAO,EAAE,gBAAgB,IAAI,EAAE,EAAE,MAAM,iCAAiC,CAAC;AAEzE,OAAO,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAErD,OAAO,EAAE,eAAe,EAAE,MAAM,yBAAyB,CAAC;AAC1D,OAAO,EAAE,kBAAkB,EAAE,MAAM,yBAAyB,CAAC;AAO7D,+EAA+E;AAC/E,IAAM,UAAU,GAA2E;IACzF,KAAK,EAAE,eAAe;IACtB,MAAM,EAAE,gBAAgB;IACxB,KAAK,EAAE,eAAe;CACvB,CAAC;AAEF,IAAM,SAAS,GAAyF;IACtG,IAAI,EAAE,EAAE,KAAK,EAAE,kBAAkB,EAAE,MAAM,EAAE,mBAAmB,EAAE,KAAK,EAAE,kBAAkB,EAAE;IAC3F,KAAK,EAAE,EAAE,KAAK,EAAE,mBAAmB,EAAE,MAAM,EAAE,oBAAoB,EAAE,KAAK,EAAE,mBAAmB,EAAE;CAChG,CAAC;AAEF,MAAM,CAAC,IAAM,oBAAoB,GAAuD,UAAC,EAAqB;;QAAnB,YAAW,EAAX,IAAI,mBAAG,IAAI,KAAA,EAAE,IAAI,UAAA;IAC1G,IAAM,YAAY,GAAG,SAAS,CAAC,eAAe,CAAC,CAAC;IAC1C,IAAA,KAA8B,KAAK,CAAC,UAAU,CAAC,kBAAkB,CAAC,EAAhE,OAAO,aAAA,EAAE,QAAQ,cAAA,EAAE,IAAI,UAAyC,CAAC;IAEzE,IAAI,KAAK,GAAG,IAAI,YAAY,QAAQ,CAAC,CAAC,CAAC,IAAI,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC;IACrD,IAAI,SAAS,CAAC,IAAI,CAAC,IAAI,YAAY,CAAC,IAAI,CAAC,EAAE,CAAC;QAC1C,IAAM,SAAS,GAAG,IAAI,CAAC,KAAkB,CAAC;QAC1C,oEAAoE;QACpE,uEAAuE;QACvE,wEAAwE;QACxE,yEAAyE;QACzE,KAAK,GAAG,KAAK,CAAC,YAAY,CAAC,IAAI,EAAE;YAC/B,IAAI,EAAE,MAAA,SAAS,CAAC,IAAI,mCAAI,gBAAgB,CAAC,IAAI,CAAC;SAClC,CAAC,CAAC;IAClB,CAAC;IAED,OAAO,KAAK,CAAC,CAAC,CAAC,CACb,8BACE,SAAS,EAAE,EAAE,CACX,YAAY,CAAC,KAAK,EAAE,EACpB,YAAY,CAAC,IAAI,EAAE,EACnB,YAAY,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC,EAAE,EAChC,YAAY,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,CAAC,EAAE,EACrC,OAAO,IAAI,YAAY,CAAC,SAAS,EAAE,EACnC,QAAQ,IAAI,YAAY,CAAC,YAAY,EAAE,CACxC,IAEA,KAAK,CACD,CACR,CAAC,CAAC,CAAC,IAAI,CAAC;AACX,CAAC,CAAC","sourcesContent":["import React from 'react';\n\nimport type { IconProps } from '../../../internal/icons2022/BaseIcon.js';\nimport { ALIASES_TO_SIZES } from '../../../internal/icons2022/iconConstants.js';\nimport { isElement } from '../../../lib/react-is.js';\nimport { useStyles } from '../../../lib/renderEnvironment/index.js';\nimport { concatClassNames as cx } from '../../../lib/theming/Emotion.js';\nimport type { SizeProp } from '../../../lib/types/props.js';\nimport { isKonturIcon } from '../../../lib/utils.js';\nimport type { InputProps } from '../Input.js';\nimport { getStylesLayout } from './InputLayout.styles.js';\nimport { InputLayoutContext } from './InputLayoutContext.js';\n\nexport interface InputLayoutAsideIconProps {\n  icon: InputProps['leftIcon'] | InputProps['rightIcon'];\n  side: 'left' | 'right';\n}\n\n/** Классы размера иконки и отступа от поля — по размеру контрола и стороне. */\nconst SIZE_CLASS: Record<SizeProp, 'iconSizeSmall' | 'iconSizeMedium' | 'iconSizeLarge'> = {\n  small: 'iconSizeSmall',\n  medium: 'iconSizeMedium',\n  large: 'iconSizeLarge',\n};\n\nconst GAP_CLASS: Record<'left' | 'right', Record<SizeProp, keyof ReturnType<typeof getStylesLayout>>> = {\n  left: { small: 'iconGapLeftSmall', medium: 'iconGapLeftMedium', large: 'iconGapLeftLarge' },\n  right: { small: 'iconGapRightSmall', medium: 'iconGapRightMedium', large: 'iconGapRightLarge' },\n};\n\nexport const InputLayoutAsideIcon: React.FunctionComponent<InputLayoutAsideIconProps> = ({ icon = null, side }) => {\n  const stylesLayout = useStyles(getStylesLayout);\n  const { focused, disabled, size } = React.useContext(InputLayoutContext);\n\n  let _icon = icon instanceof Function ? icon() : icon;\n  if (isElement(icon) && isKonturIcon(icon)) {\n    const iconProps = icon.props as IconProps;\n    // Число по алиасу, а не значение темы: иконке нужен именно размер в\n    // пикселях — по нему она выбирает отрисовку, а иконки из общего пакета\n    // алиас в атрибут `width` кладут как есть и остаются вовсе без размера.\n    // Точный размер поверх этого задаёт класс со ссылкой на переменную темы.\n    _icon = React.cloneElement(icon, {\n      size: iconProps.size ?? ALIASES_TO_SIZES[size],\n    } as IconProps);\n  }\n\n  return _icon ? (\n    <span\n      className={cx(\n        stylesLayout.aside(),\n        stylesLayout.icon(),\n        stylesLayout[SIZE_CLASS[size]](),\n        stylesLayout[GAP_CLASS[side][size]](),\n        focused && stylesLayout.iconFocus(),\n        disabled && stylesLayout.iconDisabled(),\n      )}\n    >\n      {_icon}\n    </span>\n  ) : null;\n};\n"]}

package/components/Input/InputLayout/InputLayoutAsideText.js

@@ -1,17 +1,17 @@
 import React from 'react';
-import { useEmotion, useStyles } from '../../../lib/renderEnvironment/index.js';
+import { useStyles } from '../../../lib/renderEnvironment/index.js';
+import { concatClassNames as cx } from '../../../lib/theming/Emotion.js';
 import { ThemeContext } from '../../../lib/theming/ThemeContext.js';
 import { isThemeGTE } from '../../../lib/theming/ThemeHelpers.js';
 import { getStylesLayout } from './InputLayout.styles.js';
 import { InputLayoutContext } from './InputLayoutContext.js';
 export var InputLayoutAsideText = function (_a) {
     var _b = _a.text, text = _b === void 0 ? null : _b;
-    var theme = React.useContext(ThemeContext);
-    var cx = useEmotion().cx;
     var stylesLayout = useStyles(getStylesLayout);
     var disabled = React.useContext(InputLayoutContext).disabled;
+    var theme = React.useContext(ThemeContext);
     var themeGTE6_4 = isThemeGTE(theme, '6.4');
     var asideClassName = stylesLayout.aside();
-    return text ? (React.createElement("span", { className: cx(asideClassName, stylesLayout.text(theme), themeGTE6_4 && stylesLayout.text6_4(theme), disabled && stylesLayout.textDisabled(theme)) }, text)) : null;
+    return text ? (React.createElement("span", { className: cx(asideClassName, stylesLayout.text(), themeGTE6_4 && stylesLayout.text6_4(), disabled && stylesLayout.textDisabled()) }, text)) : null;
 };
 //# sourceMappingURL=InputLayoutAsideText.js.map

package/components/Input/InputLayout/InputLayoutAsideText.js.map

@@ -1 +1 @@
-{"version":3,"file":"InputLayoutAsideText.js","sourceRoot":"","sources":["InputLayoutAsideText.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,yCAAyC,CAAC;AAChF,OAAO,EAAE,YAAY,EAAE,MAAM,sCAAsC,CAAC;AACpE,OAAO,EAAE,UAAU,EAAE,MAAM,sCAAsC,CAAC;AAElE,OAAO,EAAE,eAAe,EAAE,MAAM,yBAAyB,CAAC;AAC1D,OAAO,EAAE,kBAAkB,EAAE,MAAM,yBAAyB,CAAC;AAM7D,MAAM,CAAC,IAAM,oBAAoB,GAAuD,UAAC,EAAe;QAAb,YAAW,EAAX,IAAI,mBAAG,IAAI,KAAA;IACpG,IAAM,KAAK,GAAG,KAAK,CAAC,UAAU,CAAC,YAAY,CAAC,CAAC;IACrC,IAAA,EAAE,GAAK,UAAU,EAAE,GAAjB,CAAkB;IAC5B,IAAM,YAAY,GAAG,SAAS,CAAC,eAAe,CAAC,CAAC;IACxC,IAAA,QAAQ,GAAK,KAAK,CAAC,UAAU,CAAC,kBAAkB,CAAC,SAAzC,CAA0C;IAC1D,IAAM,WAAW,GAAG,UAAU,CAAC,KAAK,EAAE,KAAK,CAAC,CAAC;IAC7C,IAAM,cAAc,GAAG,YAAY,CAAC,KAAK,EAAE,CAAC;IAE5C,OAAO,IAAI,CAAC,CAAC,CAAC,CACZ,8BACE,SAAS,EAAE,EAAE,CACX,cAAc,EACd,YAAY,CAAC,IAAI,CAAC,KAAK,CAAC,EACxB,WAAW,IAAI,YAAY,CAAC,OAAO,CAAC,KAAK,CAAC,EAC1C,QAAQ,IAAI,YAAY,CAAC,YAAY,CAAC,KAAK,CAAC,CAC7C,IAEA,IAAI,CACA,CACR,CAAC,CAAC,CAAC,IAAI,CAAC;AACX,CAAC,CAAC","sourcesContent":["import React from 'react';\n\nimport { useEmotion, useStyles } from '../../../lib/renderEnvironment/index.js';\nimport { ThemeContext } from '../../../lib/theming/ThemeContext.js';\nimport { isThemeGTE } from '../../../lib/theming/ThemeHelpers.js';\nimport type { InputProps } from '../Input.js';\nimport { getStylesLayout } from './InputLayout.styles.js';\nimport { InputLayoutContext } from './InputLayoutContext.js';\n\nexport interface InputLayoutAsideTextProps {\n  text: InputProps['prefix'] | InputProps['suffix'];\n}\n\nexport const InputLayoutAsideText: React.FunctionComponent<InputLayoutAsideTextProps> = ({ text = null }) => {\n  const theme = React.useContext(ThemeContext);\n  const { cx } = useEmotion();\n  const stylesLayout = useStyles(getStylesLayout);\n  const { disabled } = React.useContext(InputLayoutContext);\n  const themeGTE6_4 = isThemeGTE(theme, '6.4');\n  const asideClassName = stylesLayout.aside();\n\n  return text ? (\n    <span\n      className={cx(\n        asideClassName,\n        stylesLayout.text(theme),\n        themeGTE6_4 && stylesLayout.text6_4(theme),\n        disabled && stylesLayout.textDisabled(theme),\n      )}\n    >\n      {text}\n    </span>\n  ) : null;\n};\n"]}
+{"version":3,"file":"InputLayoutAsideText.js","sourceRoot":"","sources":["InputLayoutAsideText.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,SAAS,EAAE,MAAM,yCAAyC,CAAC;AACpE,OAAO,EAAE,gBAAgB,IAAI,EAAE,EAAE,MAAM,iCAAiC,CAAC;AACzE,OAAO,EAAE,YAAY,EAAE,MAAM,sCAAsC,CAAC;AACpE,OAAO,EAAE,UAAU,EAAE,MAAM,sCAAsC,CAAC;AAElE,OAAO,EAAE,eAAe,EAAE,MAAM,yBAAyB,CAAC;AAC1D,OAAO,EAAE,kBAAkB,EAAE,MAAM,yBAAyB,CAAC;AAM7D,MAAM,CAAC,IAAM,oBAAoB,GAAuD,UAAC,EAAe;QAAb,YAAW,EAAX,IAAI,mBAAG,IAAI,KAAA;IACpG,IAAM,YAAY,GAAG,SAAS,CAAC,eAAe,CAAC,CAAC;IACxC,IAAA,QAAQ,GAAK,KAAK,CAAC,UAAU,CAAC,kBAAkB,CAAC,SAAzC,CAA0C;IAC1D,IAAM,KAAK,GAAG,KAAK,CAAC,UAAU,CAAC,YAAY,CAAC,CAAC;IAC7C,IAAM,WAAW,GAAG,UAAU,CAAC,KAAK,EAAE,KAAK,CAAC,CAAC;IAC7C,IAAM,cAAc,GAAG,YAAY,CAAC,KAAK,EAAE,CAAC;IAE5C,OAAO,IAAI,CAAC,CAAC,CAAC,CACZ,8BACE,SAAS,EAAE,EAAE,CACX,cAAc,EACd,YAAY,CAAC,IAAI,EAAE,EACnB,WAAW,IAAI,YAAY,CAAC,OAAO,EAAE,EACrC,QAAQ,IAAI,YAAY,CAAC,YAAY,EAAE,CACxC,IAEA,IAAI,CACA,CACR,CAAC,CAAC,CAAC,IAAI,CAAC;AACX,CAAC,CAAC","sourcesContent":["import React from 'react';\n\nimport { useStyles } from '../../../lib/renderEnvironment/index.js';\nimport { concatClassNames as cx } from '../../../lib/theming/Emotion.js';\nimport { ThemeContext } from '../../../lib/theming/ThemeContext.js';\nimport { isThemeGTE } from '../../../lib/theming/ThemeHelpers.js';\nimport type { InputProps } from '../Input.js';\nimport { getStylesLayout } from './InputLayout.styles.js';\nimport { InputLayoutContext } from './InputLayoutContext.js';\n\nexport interface InputLayoutAsideTextProps {\n  text: InputProps['prefix'] | InputProps['suffix'];\n}\n\nexport const InputLayoutAsideText: React.FunctionComponent<InputLayoutAsideTextProps> = ({ text = null }) => {\n  const stylesLayout = useStyles(getStylesLayout);\n  const { disabled } = React.useContext(InputLayoutContext);\n  const theme = React.useContext(ThemeContext);\n  const themeGTE6_4 = isThemeGTE(theme, '6.4');\n  const asideClassName = stylesLayout.aside();\n\n  return text ? (\n    <span\n      className={cx(\n        asideClassName,\n        stylesLayout.text(),\n        themeGTE6_4 && stylesLayout.text6_4(),\n        disabled && stylesLayout.textDisabled(),\n      )}\n    >\n      {text}\n    </span>\n  ) : null;\n};\n"]}

package/components/Kebab/Kebab.d.ts

@@ -42,7 +42,6 @@ export declare class Kebab extends React.Component<KebabProps, KebabState> {
     private getProps;
     state: KebabState;
     private globalObject;
-    private emotion;
     private cx;
     private styles;
     private theme;

package/components/Kebab/Kebab.js

@@ -79,7 +79,7 @@ var Kebab = /** @class */ (function (_super) {
                     captionProps.toggleMenu();
                 }
             };
-            return (React.createElement("span", { role: "button", "data-tid": KebabDataTids.caption, tabIndex: disabled ? -1 : 0, onClick: handleCaptionClick, onKeyDown: handleCaptionKeyDown, onFocus: _this.handleFocus, onBlur: _this.handleBlur, className: _this.cx(_this.styles.kebab(_this.theme), size === 'small' && _this.styles.kebabSmall(_this.theme), size === 'medium' && _this.styles.kebabMedium(_this.theme), size === 'large' && _this.styles.kebabLarge(_this.theme), captionProps.opened && _this.styles.opened(_this.theme), disabled && _this.styles.disabled(), _this.state.focusedByTab && _this.styles.focused(_this.theme)), "aria-describedby": _this.props['aria-describedby'] }, _this.renderIcon()));
+            return (React.createElement("span", { role: "button", "data-tid": KebabDataTids.caption, tabIndex: disabled ? -1 : 0, onClick: handleCaptionClick, onKeyDown: handleCaptionKeyDown, onFocus: _this.handleFocus, onBlur: _this.handleBlur, className: _this.cx(_this.styles.kebab(), size === 'small' && _this.styles.kebabSmall(), size === 'medium' && _this.styles.kebabMedium(), size === 'large' && _this.styles.kebabLarge(), captionProps.opened && _this.styles.opened(), disabled && _this.styles.disabled(), _this.state.focusedByTab && _this.styles.focused()), "aria-describedby": _this.props['aria-describedby'] }, _this.renderIcon()));
         };
         _this.handleCaptionKeyDown = function (e, openMenu) {
             if (someKeys(isKeyEnter, isKeySpace, isKeyArrowVertical)(e)) {
@@ -122,7 +122,7 @@ var Kebab = /** @class */ (function (_super) {
     };
     Kebab.prototype.render = function () {
         var _this = this;
-        this.styles = getStyles(this.emotion);
+        this.styles = getStyles();
         return (React.createElement(ThemeContext.Consumer, null, function (theme) {
             _this.theme = theme;
             return (React.createElement(ThemeContext.Provider, { value: ThemeFactory.create({

package/components/Kebab/Kebab.js.map

@@ -1 +1 @@
-{"version":3,"file":"Kebab.js","sourceRoot":"","sources":["Kebab.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { Emotion } from '@emotion/css/create-instance';\nimport type { AriaAttributes, HTMLAttributes, JSX } from 'react';\nimport React from 'react';\n\nimport type { CommonProps } from '../../internal/CommonWrapper/index.js';\nimport { CommonWrapper } from '../../internal/CommonWrapper/index.js';\nimport { getVisualStateDataAttributes } from '../../internal/CommonWrapper/utils/getVisualStateDataAttributes.js';\nimport type { IconProps } from '../../internal/icons2022/BaseIcon.js';\nimport type { PopupPositionsType } from '../../internal/Popup/index.js';\nimport type { PopupMenuCaptionProps, PopupMenuProps } from '../../internal/PopupMenu/index.js';\nimport { PopupMenu } from '../../internal/PopupMenu/index.js';\nimport { createPropsGetter } from '../../lib/createPropsGetter.js';\nimport { isTestEnv } from '../../lib/currentEnvironment.js';\nimport { isKeyArrowVertical, isKeyEnter, isKeySpace, someKeys } from '../../lib/events/keyboard/identifiers.js';\nimport { KeyListener } from '../../lib/events/keyListener.js';\nimport type { GlobalObject } from '../../lib/globalObject.js';\nimport * as LayoutEvents from '../../lib/LayoutEvents.js';\nimport { isElement } from '../../lib/react-is.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 { withSize } from '../../lib/size/SizeDecorator.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 { SizeProp } from '../../lib/types/props.js';\nimport { isKonturIcon } from '../../lib/utils.js';\nimport type { Nullable } from '../../typings/utility-types.js';\nimport { getStyles } from './Kebab.styles.js';\nimport { KebabIcon } from './KebabIcon.js';\n\nexport interface KebabProps\n  extends\n    Pick<AriaAttributes, 'aria-label'>,\n    Pick<HTMLAttributes<HTMLElement>, 'id'>,\n    Pick<PopupMenuProps, 'onOpen' | 'onClose' | 'popupMenuId' | 'preventIconsOffset'>,\n    CommonProps {\n  /** Размер кнопки. */\n  size?: SizeProp;\n\n  /** Список доступных позиций выпадающего меню относительно кнопки.\n   * @default ['bottom left', 'bottom right', 'top left', 'top right'].\n   */\n  positions?: PopupPositionsType[];\n\n  /** Максимальная высота меню. */\n  menuMaxHeight?: number | string;\n\n  /** Блокирует кнопку. */\n  disabled?: boolean;\n\n  /** Отключает анимацию выпадающего меню. */\n  disableAnimations?: boolean;\n\n  /** Заменяет иконку кебаба у кнопки. */\n  icon?: React.ReactNode;\n\n  /** @ignore */\n  'aria-describedby'?: AriaAttributes['aria-describedby'];\n}\n\nexport const KebabDataTids = {\n  caption: 'Kebab__caption',\n} as const;\n\nexport interface KebabState {\n  anchor: Nullable<HTMLElement>;\n  focusedByTab: boolean;\n}\n\ntype DefaultProps = Required<Pick<KebabProps, 'onOpen' | 'onClose' | 'positions' | 'disableAnimations'>>;\n\n/**\n * Кебаб-меню содержит действия с объектом.\n */\n@withRenderEnvironment\n@rootNode\n@withSize\nexport class Kebab extends React.Component<KebabProps, KebabState> {\n  public static __KONTUR_REACT_UI__ = 'Kebab';\n  public static displayName = 'Kebab';\n\n  public static defaultProps: DefaultProps = {\n    onOpen: () => undefined,\n    onClose: () => undefined,\n    positions: ['bottom left', 'bottom right', 'top left', 'top right'],\n    disableAnimations: isTestEnv,\n  };\n\n  private getProps = createPropsGetter(Kebab.defaultProps);\n\n  public state: KebabState = {\n    focusedByTab: false,\n    anchor: null,\n  };\n\n  private globalObject!: GlobalObject;\n  private emotion!: Emotion;\n  private cx!: Emotion['cx'];\n  private styles!: ReturnType<typeof getStyles>;\n  private theme!: Theme;\n  private size!: SizeProp;\n  public getRootNode!: TGetRootNode;\n  private setRootNode!: TSetRootNode;\n  private keyListener!: KeyListener;\n\n  private listener: {\n    remove: () => void;\n  } = {\n    remove: () => undefined,\n  };\n\n  public componentDidMount() {\n    this.keyListener = new KeyListener(this.globalObject);\n    /** addListener'у нужен колбэк в аргумент */\n    this.listener = LayoutEvents.addListener(() => undefined, this.globalObject);\n  }\n\n  public componentWillUnmount() {\n    this.listener.remove();\n  }\n\n  public render(): JSX.Element {\n    this.styles = getStyles(this.emotion);\n\n    return (\n      <ThemeContext.Consumer>\n        {(theme) => {\n          this.theme = theme;\n          return (\n            <ThemeContext.Provider\n              value={ThemeFactory.create(\n                {\n                  popupMargin: theme.kebabMargin,\n                },\n                theme,\n              )}\n            >\n              {this.renderMain()}\n            </ThemeContext.Provider>\n          );\n        }}\n      </ThemeContext.Consumer>\n    );\n  }\n\n  private renderMain() {\n    const { disabled } = this.props;\n    const { positions, disableAnimations, onOpen, onClose } = this.getProps();\n    return (\n      <CommonWrapper rootNodeRef={this.setRootNode} {...this.props} {...getVisualStateDataAttributes({ disabled })}>\n        <PopupMenu\n          id={this.props.id}\n          popupHasPin={false}\n          preventIconsOffset={this.props.preventIconsOffset}\n          positions={positions}\n          onChangeMenuState={this.handleChangeMenuState}\n          caption={this.renderCaption}\n          disableAnimations={disableAnimations}\n          menuMaxHeight={this.props.menuMaxHeight}\n          onOpen={onOpen}\n          onClose={onClose}\n          popupMenuId={this.props.popupMenuId}\n          aria-label={this.props['aria-label']}\n        >\n          {!disabled && this.props.children}\n        </PopupMenu>\n      </CommonWrapper>\n    );\n  }\n\n  private renderCaption = (captionProps: PopupMenuCaptionProps) => {\n    const { disabled } = this.getProps();\n    const size = this.size;\n    const handleCaptionKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {\n      if (!disabled) {\n        this.handleCaptionKeyDown(event, captionProps.openMenu);\n      }\n    };\n\n    const handleCaptionClick = () => {\n      if (!disabled) {\n        captionProps.toggleMenu();\n      }\n    };\n\n    return (\n      <span\n        role=\"button\"\n        data-tid={KebabDataTids.caption}\n        tabIndex={disabled ? -1 : 0}\n        onClick={handleCaptionClick}\n        onKeyDown={handleCaptionKeyDown}\n        onFocus={this.handleFocus}\n        onBlur={this.handleBlur}\n        className={this.cx(\n          this.styles.kebab(this.theme),\n          size === 'small' && this.styles.kebabSmall(this.theme),\n          size === 'medium' && this.styles.kebabMedium(this.theme),\n          size === 'large' && this.styles.kebabLarge(this.theme),\n          captionProps.opened && this.styles.opened(this.theme),\n          disabled && this.styles.disabled(),\n          this.state.focusedByTab && this.styles.focused(this.theme),\n        )}\n        aria-describedby={this.props['aria-describedby']}\n      >\n        {this.renderIcon()}\n      </span>\n    );\n  };\n\n  private handleCaptionKeyDown = (\n    e: React.KeyboardEvent<HTMLDivElement>,\n    openMenu: PopupMenuCaptionProps['openMenu'],\n  ) => {\n    if (someKeys(isKeyEnter, isKeySpace, isKeyArrowVertical)(e)) {\n      e.preventDefault();\n      openMenu(true);\n    }\n  };\n\n  private handleChangeMenuState = (isOpened: boolean, restoreFocus: boolean): void => {\n    this.setState({\n      focusedByTab: !isOpened && restoreFocus,\n    });\n  };\n\n  private handleFocus = () => {\n    if (!this.props.disabled) {\n      // focus event fires before keyDown eventlistener\n      // so we should check tabPressed in async way\n      this.globalObject.requestAnimationFrame?.(() => {\n        if (this.keyListener.isTabPressed) {\n          this.setState({ focusedByTab: true });\n        }\n      });\n    }\n  };\n\n  private handleBlur = () => {\n    this.setState({\n      focusedByTab: false,\n    });\n  };\n\n  private renderIcon() {\n    const { icon = <KebabIcon /> } = this.getProps();\n\n    if (isElement(icon) && isKonturIcon(icon)) {\n      const iconProps = icon.props as IconProps;\n      const sizes: Record<SizeProp, number> = {\n        small: parseInt(this.theme.kebabIconSizeSmall),\n        medium: parseInt(this.theme.kebabIconSizeMedium),\n        large: parseInt(this.theme.kebabIconSizeLarge),\n      };\n\n      return React.cloneElement(icon, {\n        size: iconProps.size ?? sizes[this.size],\n        color: iconProps.color ?? this.theme.kebabIconColor,\n      } as IconProps);\n    }\n\n    return icon;\n  }\n}\n"]}
+{"version":3,"file":"Kebab.js","sourceRoot":"","sources":["Kebab.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { AriaAttributes, HTMLAttributes, JSX } from 'react';\nimport React from 'react';\n\nimport type { CommonProps } from '../../internal/CommonWrapper/index.js';\nimport { CommonWrapper } from '../../internal/CommonWrapper/index.js';\nimport { getVisualStateDataAttributes } from '../../internal/CommonWrapper/utils/getVisualStateDataAttributes.js';\nimport type { IconProps } from '../../internal/icons2022/BaseIcon.js';\nimport type { PopupPositionsType } from '../../internal/Popup/index.js';\nimport type { PopupMenuCaptionProps, PopupMenuProps } from '../../internal/PopupMenu/index.js';\nimport { PopupMenu } from '../../internal/PopupMenu/index.js';\nimport { createPropsGetter } from '../../lib/createPropsGetter.js';\nimport { isTestEnv } from '../../lib/currentEnvironment.js';\nimport { isKeyArrowVertical, isKeyEnter, isKeySpace, someKeys } from '../../lib/events/keyboard/identifiers.js';\nimport { KeyListener } from '../../lib/events/keyListener.js';\nimport type { GlobalObject } from '../../lib/globalObject.js';\nimport * as LayoutEvents from '../../lib/LayoutEvents.js';\nimport { isElement } from '../../lib/react-is.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 { withSize } from '../../lib/size/SizeDecorator.js';\nimport type { ClassNames } from '../../lib/theming/Emotion.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 { SizeProp } from '../../lib/types/props.js';\nimport { isKonturIcon } from '../../lib/utils.js';\nimport type { Nullable } from '../../typings/utility-types.js';\nimport { getStyles } from './Kebab.styles.js';\nimport { KebabIcon } from './KebabIcon.js';\n\nexport interface KebabProps\n  extends\n    Pick<AriaAttributes, 'aria-label'>,\n    Pick<HTMLAttributes<HTMLElement>, 'id'>,\n    Pick<PopupMenuProps, 'onOpen' | 'onClose' | 'popupMenuId' | 'preventIconsOffset'>,\n    CommonProps {\n  /** Размер кнопки. */\n  size?: SizeProp;\n\n  /** Список доступных позиций выпадающего меню относительно кнопки.\n   * @default ['bottom left', 'bottom right', 'top left', 'top right'].\n   */\n  positions?: PopupPositionsType[];\n\n  /** Максимальная высота меню. */\n  menuMaxHeight?: number | string;\n\n  /** Блокирует кнопку. */\n  disabled?: boolean;\n\n  /** Отключает анимацию выпадающего меню. */\n  disableAnimations?: boolean;\n\n  /** Заменяет иконку кебаба у кнопки. */\n  icon?: React.ReactNode;\n\n  /** @ignore */\n  'aria-describedby'?: AriaAttributes['aria-describedby'];\n}\n\nexport const KebabDataTids = {\n  caption: 'Kebab__caption',\n} as const;\n\nexport interface KebabState {\n  anchor: Nullable<HTMLElement>;\n  focusedByTab: boolean;\n}\n\ntype DefaultProps = Required<Pick<KebabProps, 'onOpen' | 'onClose' | 'positions' | 'disableAnimations'>>;\n\n/**\n * Кебаб-меню содержит действия с объектом.\n */\n@withRenderEnvironment\n@rootNode\n@withSize\nexport class Kebab extends React.Component<KebabProps, KebabState> {\n  public static __KONTUR_REACT_UI__ = 'Kebab';\n  public static displayName = 'Kebab';\n\n  public static defaultProps: DefaultProps = {\n    onOpen: () => undefined,\n    onClose: () => undefined,\n    positions: ['bottom left', 'bottom right', 'top left', 'top right'],\n    disableAnimations: isTestEnv,\n  };\n\n  private getProps = createPropsGetter(Kebab.defaultProps);\n\n  public state: KebabState = {\n    focusedByTab: false,\n    anchor: null,\n  };\n\n  private globalObject!: GlobalObject;\n  private cx!: ClassNames;\n  private styles!: ReturnType<typeof getStyles>;\n  private theme!: Theme;\n  private size!: SizeProp;\n  public getRootNode!: TGetRootNode;\n  private setRootNode!: TSetRootNode;\n  private keyListener!: KeyListener;\n\n  private listener: {\n    remove: () => void;\n  } = {\n    remove: () => undefined,\n  };\n\n  public componentDidMount() {\n    this.keyListener = new KeyListener(this.globalObject);\n    /** addListener'у нужен колбэк в аргумент */\n    this.listener = LayoutEvents.addListener(() => undefined, this.globalObject);\n  }\n\n  public componentWillUnmount() {\n    this.listener.remove();\n  }\n\n  public render(): JSX.Element {\n    this.styles = getStyles();\n\n    return (\n      <ThemeContext.Consumer>\n        {(theme) => {\n          this.theme = theme;\n          return (\n            <ThemeContext.Provider\n              value={ThemeFactory.create(\n                {\n                  popupMargin: theme.kebabMargin,\n                },\n                theme,\n              )}\n            >\n              {this.renderMain()}\n            </ThemeContext.Provider>\n          );\n        }}\n      </ThemeContext.Consumer>\n    );\n  }\n\n  private renderMain() {\n    const { disabled } = this.props;\n    const { positions, disableAnimations, onOpen, onClose } = this.getProps();\n    return (\n      <CommonWrapper rootNodeRef={this.setRootNode} {...this.props} {...getVisualStateDataAttributes({ disabled })}>\n        <PopupMenu\n          id={this.props.id}\n          popupHasPin={false}\n          preventIconsOffset={this.props.preventIconsOffset}\n          positions={positions}\n          onChangeMenuState={this.handleChangeMenuState}\n          caption={this.renderCaption}\n          disableAnimations={disableAnimations}\n          menuMaxHeight={this.props.menuMaxHeight}\n          onOpen={onOpen}\n          onClose={onClose}\n          popupMenuId={this.props.popupMenuId}\n          aria-label={this.props['aria-label']}\n        >\n          {!disabled && this.props.children}\n        </PopupMenu>\n      </CommonWrapper>\n    );\n  }\n\n  private renderCaption = (captionProps: PopupMenuCaptionProps) => {\n    const { disabled } = this.getProps();\n    const size = this.size;\n    const handleCaptionKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {\n      if (!disabled) {\n        this.handleCaptionKeyDown(event, captionProps.openMenu);\n      }\n    };\n\n    const handleCaptionClick = () => {\n      if (!disabled) {\n        captionProps.toggleMenu();\n      }\n    };\n\n    return (\n      <span\n        role=\"button\"\n        data-tid={KebabDataTids.caption}\n        tabIndex={disabled ? -1 : 0}\n        onClick={handleCaptionClick}\n        onKeyDown={handleCaptionKeyDown}\n        onFocus={this.handleFocus}\n        onBlur={this.handleBlur}\n        className={this.cx(\n          this.styles.kebab(),\n          size === 'small' && this.styles.kebabSmall(),\n          size === 'medium' && this.styles.kebabMedium(),\n          size === 'large' && this.styles.kebabLarge(),\n          captionProps.opened && this.styles.opened(),\n          disabled && this.styles.disabled(),\n          this.state.focusedByTab && this.styles.focused(),\n        )}\n        aria-describedby={this.props['aria-describedby']}\n      >\n        {this.renderIcon()}\n      </span>\n    );\n  };\n\n  private handleCaptionKeyDown = (\n    e: React.KeyboardEvent<HTMLDivElement>,\n    openMenu: PopupMenuCaptionProps['openMenu'],\n  ) => {\n    if (someKeys(isKeyEnter, isKeySpace, isKeyArrowVertical)(e)) {\n      e.preventDefault();\n      openMenu(true);\n    }\n  };\n\n  private handleChangeMenuState = (isOpened: boolean, restoreFocus: boolean): void => {\n    this.setState({\n      focusedByTab: !isOpened && restoreFocus,\n    });\n  };\n\n  private handleFocus = () => {\n    if (!this.props.disabled) {\n      // focus event fires before keyDown eventlistener\n      // so we should check tabPressed in async way\n      this.globalObject.requestAnimationFrame?.(() => {\n        if (this.keyListener.isTabPressed) {\n          this.setState({ focusedByTab: true });\n        }\n      });\n    }\n  };\n\n  private handleBlur = () => {\n    this.setState({\n      focusedByTab: false,\n    });\n  };\n\n  private renderIcon() {\n    const { icon = <KebabIcon /> } = this.getProps();\n\n    if (isElement(icon) && isKonturIcon(icon)) {\n      const iconProps = icon.props as IconProps;\n      const sizes: Record<SizeProp, number> = {\n        small: parseInt(this.theme.kebabIconSizeSmall),\n        medium: parseInt(this.theme.kebabIconSizeMedium),\n        large: parseInt(this.theme.kebabIconSizeLarge),\n      };\n\n      return React.cloneElement(icon, {\n        size: iconProps.size ?? sizes[this.size],\n        color: iconProps.color ?? this.theme.kebabIconColor,\n      } as IconProps);\n    }\n\n    return icon;\n  }\n}\n"]}

package/components/Kebab/Kebab.styles.d.ts

@@ -1,11 +1,11 @@
-import type { Theme } from '../../lib/theming/Theme.js';
-export declare const getStyles: import("../../lib/theming/Emotion.js").StylesGetter<{
-    kebab(t: Theme): string;
-    kebabSmall(t: Theme): string;
-    kebabMedium(t: Theme): string;
-    kebabLarge(t: Theme): string;
-    focused(t: Theme): string;
-    opened(t: Theme): string;
-    disabled(): string;
-    menu(t: Theme): string;
+/** Правила — в `Kebab.css`; здесь только имена классов. */
+export declare const getStyles: (ignored?: unknown) => import("../../lib/theming/staticStyles.js").StaticStyles<{
+    kebab: string;
+    kebabSmall: string;
+    kebabMedium: string;
+    kebabLarge: string;
+    focused: string;
+    opened: string;
+    disabled: string;
+    menu: string;
 }>;

package/components/Kebab/Kebab.styles.js

@@ -1,36 +1,13 @@
-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 ({
-        kebab: function (t) {
-            return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      display: inline-flex;\n      align-items: center;\n      justify-content: center;\n      text-align: center;\n      border: ", ";\n      box-sizing: border-box;\n      border-radius: ", ";\n      user-select: none;\n      cursor: pointer;\n      outline: 0;\n      transition: background 0.12s ease-out;\n      background: ", ";\n\n      &:hover {\n        background: ", ";\n      }\n\n      &:active {\n        background: ", ";\n      }\n    "], ["\n      display: inline-flex;\n      align-items: center;\n      justify-content: center;\n      text-align: center;\n      border: ", ";\n      box-sizing: border-box;\n      border-radius: ", ";\n      user-select: none;\n      cursor: pointer;\n      outline: 0;\n      transition: background 0.12s ease-out;\n      background: ", ";\n\n      &:hover {\n        background: ", ";\n      }\n\n      &:active {\n        background: ", ";\n      }\n    "])), t.kebabBorder, t.kebabBorderRadius, t.kebabBackground, t.kebabBackgroundHover, t.kebabBackgroundActive);
-        },
-        kebabSmall: function (t) {
-            return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n      width: ", ";\n      height: ", ";\n    "], ["\n      width: ", ";\n      height: ", ";\n    "])), t.kebabSizeSmall, t.kebabSizeSmall);
-        },
-        kebabMedium: function (t) {
-            return css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n      width: ", ";\n      height: ", ";\n    "], ["\n      width: ", ";\n      height: ", ";\n    "])), t.kebabSizeMedium, t.kebabSizeMedium);
-        },
-        kebabLarge: function (t) {
-            return css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n      width: ", ";\n      height: ", ";\n    "], ["\n      width: ", ";\n      height: ", ";\n    "])), t.kebabSizeLarge, t.kebabSizeLarge);
-        },
-        focused: function (t) {
-            return css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n      background: ", ";\n      border-color: ", ";\n    "], ["\n      background: ", ";\n      border-color: ", ";\n    "])), t.kebabBackgroundHover, t.borderColorFocus);
-        },
-        opened: function (t) {
-            return css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n      background: ", " !important; // override kebab:hover style\n      cursor: default;\n    "], ["\n      background: ", " !important; // override kebab:hover style\n      cursor: default;\n    "])), t.kebabBackgroundActive);
-        },
-        disabled: function () {
-            return css(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n      cursor: default;\n\n      &:hover {\n        background: none;\n      }\n    "], ["\n      cursor: default;\n\n      &:hover {\n        background: none;\n      }\n    "])));
-        },
-        menu: function (t) {
-            return css(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n      overflow: hidden;\n      border-radius: ", ";\n    "], ["\n      overflow: hidden;\n      border-radius: ", ";\n    "])), t.popupBorderRadius);
-        },
-    });
+import { staticStyles } from '../../lib/theming/staticStyles.js';
+/** Правила — в `Kebab.css`; здесь только имена классов. */
+export var getStyles = staticStyles({
+    kebab: 'react-ui-Kebab-kebab',
+    kebabSmall: 'react-ui-Kebab-kebabSmall',
+    kebabMedium: 'react-ui-Kebab-kebabMedium',
+    kebabLarge: 'react-ui-Kebab-kebabLarge',
+    focused: 'react-ui-Kebab-focused',
+    opened: 'react-ui-Kebab-opened',
+    disabled: 'react-ui-Kebab-disabled',
+    menu: 'react-ui-Kebab-menu',
 });
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8;
 //# sourceMappingURL=Kebab.styles.js.map

package/components/Kebab/Kebab.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"Kebab.styles.js","sourceRoot":"","sources":["Kebab.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,KAAK,YAAC,CAAQ;YACZ,OAAO,GAAG,0gBAAA,sIAKE,EAAa,yDAEN,EAAmB,0IAKtB,EAAiB,4CAGf,EAAsB,sDAItB,EAAuB,kBAExC,KAhBW,CAAC,CAAC,WAAW,EAEN,CAAC,CAAC,iBAAiB,EAKtB,CAAC,CAAC,eAAe,EAGf,CAAC,CAAC,oBAAoB,EAItB,CAAC,CAAC,qBAAqB,EAEvC;QACJ,CAAC;QAED,UAAU,YAAC,CAAQ;YACjB,OAAO,GAAG,oHAAA,iBACC,EAAgB,mBACf,EAAgB,SAC3B,KAFU,CAAC,CAAC,cAAc,EACf,CAAC,CAAC,cAAc,EAC1B;QACJ,CAAC;QAED,WAAW,YAAC,CAAQ;YAClB,OAAO,GAAG,oHAAA,iBACC,EAAiB,mBAChB,EAAiB,SAC5B,KAFU,CAAC,CAAC,eAAe,EAChB,CAAC,CAAC,eAAe,EAC3B;QACJ,CAAC;QAED,UAAU,YAAC,CAAQ;YACjB,OAAO,GAAG,oHAAA,iBACC,EAAgB,mBACf,EAAgB,SAC3B,KAFU,CAAC,CAAC,cAAc,EACf,CAAC,CAAC,cAAc,EAC1B;QACJ,CAAC;QAED,OAAO,YAAC,CAAQ;YACd,OAAO,GAAG,+HAAA,sBACM,EAAsB,yBACpB,EAAkB,SACnC,KAFe,CAAC,CAAC,oBAAoB,EACpB,CAAC,CAAC,gBAAgB,EAClC;QACJ,CAAC;QAED,MAAM,YAAC,CAAQ;YACb,OAAO,GAAG,qKAAA,sBACM,EAAuB,0EAEtC,KAFe,CAAC,CAAC,qBAAqB,EAErC;QACJ,CAAC;QAED,QAAQ;YACN,OAAO,GAAG,0JAAA,uFAMT,KAAC;QACJ,CAAC;QAED,IAAI,YAAC,CAAQ;YACX,OAAO,GAAG,gIAAA,kDAES,EAAmB,SACrC,KADkB,CAAC,CAAC,iBAAiB,EACpC;QACJ,CAAC;KACF,CAAC;AA7E8D,CA6E9D,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  kebab(t: Theme) {\n    return css`\n      display: inline-flex;\n      align-items: center;\n      justify-content: center;\n      text-align: center;\n      border: ${t.kebabBorder};\n      box-sizing: border-box;\n      border-radius: ${t.kebabBorderRadius};\n      user-select: none;\n      cursor: pointer;\n      outline: 0;\n      transition: background 0.12s ease-out;\n      background: ${t.kebabBackground};\n\n      &:hover {\n        background: ${t.kebabBackgroundHover};\n      }\n\n      &:active {\n        background: ${t.kebabBackgroundActive};\n      }\n    `;\n  },\n\n  kebabSmall(t: Theme) {\n    return css`\n      width: ${t.kebabSizeSmall};\n      height: ${t.kebabSizeSmall};\n    `;\n  },\n\n  kebabMedium(t: Theme) {\n    return css`\n      width: ${t.kebabSizeMedium};\n      height: ${t.kebabSizeMedium};\n    `;\n  },\n\n  kebabLarge(t: Theme) {\n    return css`\n      width: ${t.kebabSizeLarge};\n      height: ${t.kebabSizeLarge};\n    `;\n  },\n\n  focused(t: Theme) {\n    return css`\n      background: ${t.kebabBackgroundHover};\n      border-color: ${t.borderColorFocus};\n    `;\n  },\n\n  opened(t: Theme) {\n    return css`\n      background: ${t.kebabBackgroundActive} !important; // override kebab:hover style\n      cursor: default;\n    `;\n  },\n\n  disabled() {\n    return css`\n      cursor: default;\n\n      &:hover {\n        background: none;\n      }\n    `;\n  },\n\n  menu(t: Theme) {\n    return css`\n      overflow: hidden;\n      border-radius: ${t.popupBorderRadius};\n    `;\n  },\n}));\n"]}
+{"version":3,"file":"Kebab.styles.js","sourceRoot":"","sources":["Kebab.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,mCAAmC,CAAC;AAEjE,2DAA2D;AAC3D,MAAM,CAAC,IAAM,SAAS,GAAG,YAAY,CAAC;IACpC,KAAK,EAAE,sBAAsB;IAC7B,UAAU,EAAE,2BAA2B;IACvC,WAAW,EAAE,4BAA4B;IACzC,UAAU,EAAE,2BAA2B;IACvC,OAAO,EAAE,wBAAwB;IACjC,MAAM,EAAE,uBAAuB;IAC/B,QAAQ,EAAE,yBAAyB;IACnC,IAAI,EAAE,qBAAqB;CAC5B,CAAC,CAAC","sourcesContent":["import { staticStyles } from '../../lib/theming/staticStyles.js';\n\n/** Правила — в `Kebab.css`; здесь только имена классов. */\nexport const getStyles = staticStyles({\n  kebab: 'react-ui-Kebab-kebab',\n  kebabSmall: 'react-ui-Kebab-kebabSmall',\n  kebabMedium: 'react-ui-Kebab-kebabMedium',\n  kebabLarge: 'react-ui-Kebab-kebabLarge',\n  focused: 'react-ui-Kebab-focused',\n  opened: 'react-ui-Kebab-opened',\n  disabled: 'react-ui-Kebab-disabled',\n  menu: 'react-ui-Kebab-menu',\n});\n"]}

package/components/Link/Link.d.ts

@@ -50,7 +50,6 @@ export declare class Link<C extends ButtonLinkAllowedValues = typeof LINK_DEFAUL
     private getProps;
     state: LinkState;
     private globalObject;
-    private emotion;
     private cx;
     private styles;
     private theme;