@skbkontur/react-ui 0.0.0-38b6d1ada0 → 0.0.0-444dd4e7b3

package/components/Clickable/ClickableLink.styles/ClickableLink.styles.js

@@ -0,0 +1,52 @@
+import _taggedTemplateLiteralLoose from "@babel/runtime/helpers/esm/taggedTemplateLiteralLoose";
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11;
+
+import { css, cx, memoizeStyle } from "../../../lib/theming/Emotion";
+import { isDarkTheme } from "../../../lib/theming/ThemeHelpers";
+import { linkDisabledMixin, linkUseColorsMixin, linkUseLineHovered } from "../../Link/Link.mixins";
+import { clickableGlobalClasses } from "../Clickable.styles";
+export var linkStyles = memoizeStyle({
+  linkRoot: function linkRoot() {
+    return css(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n      border-radius: 1px;\n      outline: none;\n      text-decoration: none;\n      &:hover .", " {\n        border-bottom-color: currentColor !important;\n      }\n      border-bottom-color: currentColor;\n    "])), clickableGlobalClasses.text);
+  },
+  linkDefault: function linkDefault(t) {
+    return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n      ", ";\n      .", " {\n        :hover {\n          ", "\n        }\n      }\n    "])), linkUseColorsMixin(t.linkColor, t.linkHoverColor, t.linkActiveColor), clickableGlobalClasses.text, linkUseLineHovered(t.linkLineHoverBorderBottomStyle));
+  },
+  linkSuccess: function linkSuccess(t) {
+    return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n      ", ";\n      .", " {\n        :hover {\n          ", "\n        }\n      }\n    "])), linkUseColorsMixin(t.linkSuccessColor, t.linkSuccessHoverColor, t.linkSuccessActiveColor), clickableGlobalClasses.text, linkUseLineHovered(t.linkLineHoverBorderBottomStyle));
+  },
+  linkDanger: function linkDanger(t) {
+    return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n      ", ";\n      .", " {\n        :hover {\n          ", "\n        }\n      }\n    "])), linkUseColorsMixin(t.linkDangerColor, t.linkDangerHoverColor, t.linkDangerActiveColor), clickableGlobalClasses.text, linkUseLineHovered(t.linkLineHoverBorderBottomStyle));
+  },
+  linkGrayed: function linkGrayed(t) {
+    return css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\n      ", ";\n      .", " {\n        :hover {\n          ", "\n        }\n      }\n    "])), linkUseColorsMixin(t.linkGrayedColor, t.linkGrayedHoverColor, t.linkGrayedActiveColor), clickableGlobalClasses.text, linkUseLineHovered(t.linkLineHoverBorderBottomStyle));
+  },
+  linkDisabled: function linkDisabled(t) {
+    return css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteralLoose(["\n      ", ";\n\n      color: ", " !important; // override root color\n\n      &:hover {\n        color: ", ";\n      }\n    "])), linkDisabledMixin(), t.linkDisabledColor, t.linkDisabledColor);
+  },
+  linkDisabledDark: function linkDisabledDark(t) {
+    return css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteralLoose(["\n      .", " {\n        ", "\n      }\n    "])), clickableGlobalClasses.text, linkUseLineHovered(t.linkLineHoverBorderBottomStyle));
+  },
+  linkLineFocus: function linkLineFocus(t) {
+    return css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteralLoose(["\n      color: ", ";\n      .", " {\n        ", "\n      }\n    "])), t.linkHoverColor, clickableGlobalClasses.text, linkUseLineHovered(t.linkLineHoverBorderBottomStyle));
+  },
+  linkLineFocusSuccess: function linkLineFocusSuccess(t) {
+    return css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteralLoose(["\n      color: ", " !important;\n      .", " {\n        ", "\n      }\n    "])), t.linkSuccessHoverColor, clickableGlobalClasses.text, linkUseLineHovered(t.linkLineHoverBorderBottomStyle));
+  },
+  linkLineFocusDanger: function linkLineFocusDanger(t) {
+    return css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteralLoose(["\n      color: ", " !important;\n      .", " {\n        ", "\n      }\n    "])), t.linkDangerHoverColor, clickableGlobalClasses.text, linkUseLineHovered(t.linkLineHoverBorderBottomStyle));
+  },
+  linkLineFocusGrayed: function linkLineFocusGrayed(t) {
+    return css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteralLoose(["\n      color: ", " !important;\n      .", " {\n        ", "\n      }\n    "])), t.linkGrayedHoverColor, clickableGlobalClasses.text, linkUseLineHovered(t.linkLineHoverBorderBottomStyle));
+  }
+});
+export var getLinkStyles = function getLinkStyles(_ref) {
+  var _cx;
+
+  var use = _ref.use,
+      isFocused = _ref.isFocused,
+      isNotInteractive = _ref.isNotInteractive,
+      theme = _ref.theme;
+  return cx((_cx = {}, _cx[linkStyles.linkRoot()] = true, _cx[linkStyles.linkDefault(theme)] = use === 'default' || use === undefined, _cx[linkStyles.linkSuccess(theme)] = use === 'success', _cx[linkStyles.linkDanger(theme)] = use === 'danger', _cx[linkStyles.linkGrayed(theme)] = use === 'grayed', _cx[linkStyles.linkLineFocus(theme)] = use === 'default' && isFocused, _cx[linkStyles.linkLineFocusSuccess(theme)] = use === 'success' && isFocused, _cx[linkStyles.linkLineFocusDanger(theme)] = use === 'danger' && isFocused, _cx[linkStyles.linkLineFocusGrayed(theme)] = isFocused && use === 'grayed', _cx[linkStyles.linkDisabled(theme)] = isNotInteractive, _cx[linkStyles.linkDisabledDark(theme)] = isNotInteractive && isDarkTheme(theme), _cx));
+};

package/components/Clickable/ClickableLink.styles/ClickableLink.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["ClickableLink.styles.ts"],"names":["css","cx","memoizeStyle","isDarkTheme","linkDisabledMixin","linkUseColorsMixin","linkUseLineHovered","clickableGlobalClasses","linkStyles","linkRoot","text","linkDefault","t","linkColor","linkHoverColor","linkActiveColor","linkLineHoverBorderBottomStyle","linkSuccess","linkSuccessColor","linkSuccessHoverColor","linkSuccessActiveColor","linkDanger","linkDangerColor","linkDangerHoverColor","linkDangerActiveColor","linkGrayed","linkGrayedColor","linkGrayedHoverColor","linkGrayedActiveColor","linkDisabled","linkDisabledColor","linkDisabledDark","linkLineFocus","linkLineFocusSuccess","linkLineFocusDanger","linkLineFocusGrayed","getLinkStyles","use","isFocused","isNotInteractive","theme","undefined"],"mappings":"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","sourcesContent":["import { Theme } from '../../lib/theming/Theme';\nimport { css, cx, memoizeStyle } from '../../lib/theming/Emotion';\nimport { isDarkTheme } from '../../lib/theming/ThemeHelpers';\nimport { linkDisabledMixin, linkUseColorsMixin, linkUseLineHovered } from '../Link/Link.mixins';\n\nimport { GetStylesBase, clickableGlobalClasses } from './Clickable.styles';\n\nexport const linkStyles = memoizeStyle({\n  linkRoot() {\n    return css`\n      border-radius: 1px;\n      outline: none;\n      text-decoration: none;\n      &:hover .${clickableGlobalClasses.text} {\n        border-bottom-color: currentColor !important;\n      }\n      border-bottom-color: currentColor;\n    `;\n  },\n\n  linkDefault(t: Theme) {\n    return css`\n      ${linkUseColorsMixin(t.linkColor, t.linkHoverColor, t.linkActiveColor)};\n      .${clickableGlobalClasses.text} {\n        :hover {\n          ${linkUseLineHovered(t.linkLineHoverBorderBottomStyle)}\n        }\n      }\n    `;\n  },\n  linkSuccess(t: Theme) {\n    return css`\n      ${linkUseColorsMixin(t.linkSuccessColor, t.linkSuccessHoverColor, t.linkSuccessActiveColor)};\n      .${clickableGlobalClasses.text} {\n        :hover {\n          ${linkUseLineHovered(t.linkLineHoverBorderBottomStyle)}\n        }\n      }\n    `;\n  },\n  linkDanger(t: Theme) {\n    return css`\n      ${linkUseColorsMixin(t.linkDangerColor, t.linkDangerHoverColor, t.linkDangerActiveColor)};\n      .${clickableGlobalClasses.text} {\n        :hover {\n          ${linkUseLineHovered(t.linkLineHoverBorderBottomStyle)}\n        }\n      }\n    `;\n  },\n  linkGrayed(t: Theme) {\n    return css`\n      ${linkUseColorsMixin(t.linkGrayedColor, t.linkGrayedHoverColor, t.linkGrayedActiveColor)};\n      .${clickableGlobalClasses.text} {\n        :hover {\n          ${linkUseLineHovered(t.linkLineHoverBorderBottomStyle)}\n        }\n      }\n    `;\n  },\n\n  linkDisabled(t: Theme) {\n    return css`\n      ${linkDisabledMixin()};\n\n      color: ${t.linkDisabledColor} !important; // override root color\n\n      &:hover {\n        color: ${t.linkDisabledColor};\n      }\n    `;\n  },\n  linkDisabledDark(t: Theme) {\n    return css`\n      .${clickableGlobalClasses.text} {\n        ${linkUseLineHovered(t.linkLineHoverBorderBottomStyle)}\n      }\n    `;\n  },\n\n  linkLineFocus(t: Theme) {\n    return css`\n      color: ${t.linkHoverColor};\n      .${clickableGlobalClasses.text} {\n        ${linkUseLineHovered(t.linkLineHoverBorderBottomStyle)}\n      }\n    `;\n  },\n  linkLineFocusSuccess(t: Theme) {\n    return css`\n      color: ${t.linkSuccessHoverColor} !important;\n      .${clickableGlobalClasses.text} {\n        ${linkUseLineHovered(t.linkLineHoverBorderBottomStyle)}\n      }\n    `;\n  },\n  linkLineFocusDanger(t: Theme) {\n    return css`\n      color: ${t.linkDangerHoverColor} !important;\n      .${clickableGlobalClasses.text} {\n        ${linkUseLineHovered(t.linkLineHoverBorderBottomStyle)}\n      }\n    `;\n  },\n  linkLineFocusGrayed(t: Theme) {\n    return css`\n      color: ${t.linkGrayedHoverColor} !important;\n      .${clickableGlobalClasses.text} {\n        ${linkUseLineHovered(t.linkLineHoverBorderBottomStyle)}\n      }\n    `;\n  },\n});\n\ninterface GetLinkStylesArgs extends GetStylesBase {\n  isFocused: boolean;\n  isNotInteractive: boolean;\n}\n\nexport const getLinkStyles = ({ use, isFocused, isNotInteractive, theme }: GetLinkStylesArgs) => {\n  return cx({\n    [linkStyles.linkRoot()]: true,\n    [linkStyles.linkDefault(theme)]: use === 'default' || use === undefined,\n    [linkStyles.linkSuccess(theme)]: use === 'success',\n    [linkStyles.linkDanger(theme)]: use === 'danger',\n    [linkStyles.linkGrayed(theme)]: use === 'grayed',\n    [linkStyles.linkLineFocus(theme)]: use === 'default' && isFocused,\n    [linkStyles.linkLineFocusSuccess(theme)]: use === 'success' && isFocused,\n    [linkStyles.linkLineFocusDanger(theme)]: use === 'danger' && isFocused,\n    [linkStyles.linkLineFocusGrayed(theme)]: isFocused && use === 'grayed',\n    [linkStyles.linkDisabled(theme)]: isNotInteractive,\n    [linkStyles.linkDisabledDark(theme)]: isNotInteractive && isDarkTheme(theme),\n  });\n};\n"]}

package/components/Clickable/ClickableLink.styles/package.json

@@ -0,0 +1,6 @@
+{
+  "main": "../../../cjs/components/Clickable/ClickableLink.styles.js",
+  "module": "ClickableLink.styles",
+  "types": "../ClickableLink.styles.d.ts",
+  "sideEffects": false
+}

package/components/Clickable/ClickableLink.styles.d.ts

@@ -0,0 +1,21 @@
+import { Theme } from '../../lib/theming/Theme';
+import { GetStylesBase } from './Clickable.styles';
+export declare const linkStyles: {
+    linkRoot(): string;
+    linkDefault(t: Theme): string;
+    linkSuccess(t: Theme): string;
+    linkDanger(t: Theme): string;
+    linkGrayed(t: Theme): string;
+    linkDisabled(t: Theme): string;
+    linkDisabledDark(t: Theme): string;
+    linkLineFocus(t: Theme): string;
+    linkLineFocusSuccess(t: Theme): string;
+    linkLineFocusDanger(t: Theme): string;
+    linkLineFocusGrayed(t: Theme): string;
+};
+interface GetLinkStylesArgs extends GetStylesBase {
+    isFocused: boolean;
+    isNotInteractive: boolean;
+}
+export declare const getLinkStyles: ({ use, isFocused, isNotInteractive, theme }: GetLinkStylesArgs) => string;
+export {};

package/components/Clickable/ClickableLinkChild/ClickableLinkChild.js

@@ -0,0 +1,19 @@
+import React, { useContext } from 'react';
+import { ThemeContext } from "../../../lib/theming/ThemeContext";
+import { cx } from "../../../lib/theming/Emotion";
+import { forwardRefAndName } from "../../../lib/forwardRefAndName";
+import { clickableGlobalClasses } from "../Clickable.styles";
+import { linkChildStyles } from "../ClickableLinkChild.styles";
+export var ClickableLinkChild = forwardRefAndName('ClickableLinkChild', function (_ref, ref) {
+  var _cx, _cx2;
+
+  var isFocused = _ref.isFocused,
+      children = _ref.children;
+  var theme = useContext(ThemeContext);
+  return /*#__PURE__*/React.createElement("span", {
+    ref: ref,
+    className: cx((_cx = {}, _cx[linkChildStyles.linkLineTextWrapper(theme)] = true, _cx[linkChildStyles.linkLineTextWrapperFocused(theme)] = isFocused, _cx))
+  }, /*#__PURE__*/React.createElement("span", {
+    className: cx((_cx2 = {}, _cx2[clickableGlobalClasses.text] = true, _cx2[linkChildStyles.linkLineText(theme)] = true, _cx2))
+  }, children));
+});

package/components/Clickable/ClickableLinkChild/ClickableLinkChild.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["ClickableLinkChild.tsx"],"names":["React","useContext","ThemeContext","cx","forwardRefAndName","clickableGlobalClasses","linkChildStyles","ClickableLinkChild","ref","isFocused","children","theme","linkLineTextWrapper","linkLineTextWrapperFocused","text","linkLineText"],"mappings":"AAAA,OAAOA,KAAP,IAAgBC,UAAhB,QAAkC,OAAlC;;AAEA,SAASC,YAAT,QAA6B,gCAA7B;AACA,SAASC,EAAT,QAAmB,2BAAnB;AACA,SAASC,iBAAT,QAAkC,6BAAlC;;AAEA,SAASC,sBAAT,QAAuC,oBAAvC;AACA,SAASC,eAAT,QAAgC,6BAAhC;;;;;;;AAOA,OAAO,IAAMC,kBAAkB,GAAGH,iBAAiB;AACjD,oBADiD;AAEjD,gBAA0BI,GAA1B,EAAkC,mBAA/BC,SAA+B,QAA/BA,SAA+B,CAApBC,QAAoB,QAApBA,QAAoB;AAChC,MAAMC,KAAK,GAAGV,UAAU,CAACC,YAAD,CAAxB;;AAEA;AACE;AACE,MAAA,GAAG,EAAEM,GADP;AAEE,MAAA,SAAS,EAAEL,EAAE;AACVG,MAAAA,eAAe,CAACM,mBAAhB,CAAoCD,KAApC,CADU,IACmC,IADnC;AAEVL,MAAAA,eAAe,CAACO,0BAAhB,CAA2CF,KAA3C,CAFU,IAE0CF,SAF1C,OAFf;;;AAOE;AACE,MAAA,SAAS,EAAEN,EAAE;AACVE,MAAAA,sBAAsB,CAACS,IADb,IACoB,IADpB;AAEVR,MAAAA,eAAe,CAACS,YAAhB,CAA6BJ,KAA7B,CAFU,IAE4B,IAF5B,QADf;;;AAMGD,IAAAA,QANH,CAPF,CADF;;;;AAkBD,CAvBgD,CAA5C","sourcesContent":["import React, { useContext } from 'react';\n\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { cx } from '../../lib/theming/Emotion';\nimport { forwardRefAndName } from '../../lib/forwardRefAndName';\n\nimport { clickableGlobalClasses } from './Clickable.styles';\nimport { linkChildStyles } from './ClickableLinkChild.styles';\n\nexport interface ClickableLinkChildProps {\n  children: React.ReactNode;\n  isFocused: boolean;\n}\n\nexport const ClickableLinkChild = forwardRefAndName<HTMLSpanElement, ClickableLinkChildProps>(\n  'ClickableLinkChild',\n  ({ isFocused, children }, ref) => {\n    const theme = useContext(ThemeContext);\n\n    return (\n      <span\n        ref={ref}\n        className={cx({\n          [linkChildStyles.linkLineTextWrapper(theme)]: true,\n          [linkChildStyles.linkLineTextWrapperFocused(theme)]: isFocused,\n        })}\n      >\n        <span\n          className={cx({\n            [clickableGlobalClasses.text]: true,\n            [linkChildStyles.linkLineText(theme)]: true,\n          })}\n        >\n          {children}\n        </span>\n      </span>\n    );\n  },\n);\n"]}

package/components/Clickable/ClickableLinkChild/package.json

@@ -0,0 +1,6 @@
+{
+  "main": "../../../cjs/components/Clickable/ClickableLinkChild.js",
+  "module": "ClickableLinkChild",
+  "types": "../ClickableLinkChild.d.ts",
+  "sideEffects": false
+}

package/components/Clickable/ClickableLinkChild.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+export interface ClickableLinkChildProps {
+    children: React.ReactNode;
+    isFocused: boolean;
+}
+export declare const ClickableLinkChild: import("../../lib/forwardRefAndName").ReactUIComponentWithRef<HTMLSpanElement, ClickableLinkChildProps> & Record<never, never>;

package/components/Clickable/ClickableLinkChild.styles/ClickableLinkChild.styles.js

@@ -0,0 +1,21 @@
+import _taggedTemplateLiteralLoose from "@babel/runtime/helpers/esm/taggedTemplateLiteralLoose";
+
+var _templateObject, _templateObject2, _templateObject3;
+
+import { memoizeStyle, css } from "../../../lib/theming/Emotion";
+export var linkChildStyles = memoizeStyle({
+  linkLineTextWrapper: function linkLineTextWrapper(t) {
+    // При hover'е подчеркивание из прозрачного переходит в currentColor.
+    // За счет наложения этого цвета на подчеркивание lineText (currentColor с половинной прозрачностью)
+    // достигается эффект перехода currentColor с половинной прозрачностью до currentColor.
+    // Планировалось добавить transition и color-mix(in srgb, currentColor 50%, transparent) в lineText.
+    // Однако, в chrome и edge сочетание transition, color-mix и currentColor вызывает моргание при transition.
+    return css(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n      @supports (border-bottom-color: ", ") {\n        transition: border-bottom-color ", " ", ";\n        border-bottom-style: ", ";\n        border-bottom-width: ", ";\n        border-bottom-color: transparent;\n      }\n    "])), t.linkLineBorderBottomColor, t.transitionDuration, t.transitionTimingFunction, t.linkLineBorderBottomStyle, t.linkLineBorderBottomWidth);
+  },
+  linkLineTextWrapperFocused: function linkLineTextWrapperFocused(t) {
+    return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n      @supports (border-bottom-color: ", ") {\n        border-bottom-color: currentColor;\n      }\n    "])), t.linkLineBorderBottomColor);
+  },
+  linkLineText: function linkLineText(t) {
+    return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n      border-bottom-style: ", ";\n      border-bottom-width: ", ";\n      border-bottom-color: ", ";\n    "])), t.linkLineBorderBottomStyle, t.linkLineBorderBottomWidth, t.linkLineBorderBottomColor);
+  }
+});

package/components/Clickable/ClickableLinkChild.styles/ClickableLinkChild.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["ClickableLinkChild.styles.ts"],"names":["memoizeStyle","css","linkChildStyles","linkLineTextWrapper","t","linkLineBorderBottomColor","transitionDuration","transitionTimingFunction","linkLineBorderBottomStyle","linkLineBorderBottomWidth","linkLineTextWrapperFocused","linkLineText"],"mappings":";AACA,SAASA,YAAT,EAAuBC,GAAvB,QAAkC,2BAAlC;;AAEA,OAAO,IAAMC,eAAe,GAAGF,YAAY,CAAC;AAC1CG,EAAAA,mBAD0C,+BACtBC,CADsB,EACZ;AAC5B;AACA;AACA;;AAEA;AACA;AACA,WAAOH,GAAP;AACoCG,IAAAA,CAAC,CAACC,yBADtC;AAEsCD,IAAAA,CAAC,CAACE,kBAFxC,EAE8DF,CAAC,CAACG,wBAFhE;AAG2BH,IAAAA,CAAC,CAACI,yBAH7B;AAI2BJ,IAAAA,CAAC,CAACK,yBAJ7B;;;;AAQD,GAhByC;AAiB1CC,EAAAA,0BAjB0C,sCAiBfN,CAjBe,EAiBL;AACnC,WAAOH,GAAP;AACoCG,IAAAA,CAAC,CAACC,yBADtC;;;;AAKD,GAvByC;AAwB1CM,EAAAA,YAxB0C,wBAwB7BP,CAxB6B,EAwBnB;AACrB,WAAOH,GAAP;AACyBG,IAAAA,CAAC,CAACI,yBAD3B;AAEyBJ,IAAAA,CAAC,CAACK,yBAF3B;AAGyBL,IAAAA,CAAC,CAACC,yBAH3B;;AAKD,GA9ByC,EAAD,CAApC","sourcesContent":["import { Theme } from '../../lib/theming/Theme';\nimport { memoizeStyle, css } from '../../lib/theming/Emotion';\n\nexport const linkChildStyles = memoizeStyle({\n  linkLineTextWrapper(t: Theme) {\n    // При hover'е подчеркивание из прозрачного переходит в currentColor.\n    // За счет наложения этого цвета на подчеркивание lineText (currentColor с половинной прозрачностью)\n    // достигается эффект перехода currentColor с половинной прозрачностью до currentColor.\n\n    // Планировалось добавить transition и color-mix(in srgb, currentColor 50%, transparent) в lineText.\n    // Однако, в chrome и edge сочетание transition, color-mix и currentColor вызывает моргание при transition.\n    return css`\n      @supports (border-bottom-color: ${t.linkLineBorderBottomColor}) {\n        transition: border-bottom-color ${t.transitionDuration} ${t.transitionTimingFunction};\n        border-bottom-style: ${t.linkLineBorderBottomStyle};\n        border-bottom-width: ${t.linkLineBorderBottomWidth};\n        border-bottom-color: transparent;\n      }\n    `;\n  },\n  linkLineTextWrapperFocused(t: Theme) {\n    return css`\n      @supports (border-bottom-color: ${t.linkLineBorderBottomColor}) {\n        border-bottom-color: currentColor;\n      }\n    `;\n  },\n  linkLineText(t: Theme) {\n    return css`\n      border-bottom-style: ${t.linkLineBorderBottomStyle};\n      border-bottom-width: ${t.linkLineBorderBottomWidth};\n      border-bottom-color: ${t.linkLineBorderBottomColor};\n    `;\n  },\n});\n"]}

package/components/Clickable/ClickableLinkChild.styles/package.json

@@ -0,0 +1,6 @@
+{
+  "main": "../../../cjs/components/Clickable/ClickableLinkChild.styles.js",
+  "module": "ClickableLinkChild.styles",
+  "types": "../ClickableLinkChild.styles.d.ts",
+  "sideEffects": false
+}

package/components/Clickable/ClickableLinkChild.styles.d.ts

@@ -0,0 +1,6 @@
+import { Theme } from '../../lib/theming/Theme';
+export declare const linkChildStyles: {
+    linkLineTextWrapper(t: Theme): string;
+    linkLineTextWrapperFocused(t: Theme): string;
+    linkLineText(t: Theme): string;
+};

package/components/Clickable/ClickableLinkIcon/ClickableLinkIcon.js

@@ -0,0 +1,21 @@
+import React, { useContext } from 'react';
+import { cx } from "../../../lib/theming/Emotion";
+import { ThemeContext } from "../../../lib/theming/ThemeContext";
+import { Spinner } from "../../Spinner";
+import { linkIconStyles } from "../ClickableLinkIcon.styles";
+export var ClickableLinkIcon = function ClickableLinkIcon(_ref) {
+  var _cx;
+
+  var icon = _ref.icon,
+      isLoading = _ref.isLoading,
+      hasBothIcons = _ref.hasBothIcons,
+      position = _ref.position;
+  var theme = useContext(ThemeContext);
+  return /*#__PURE__*/React.createElement("span", {
+    className: cx((_cx = {}, _cx[linkIconStyles.linkIcon(theme)] = true, _cx[linkIconStyles.linkIconLeft(theme)] = position === 'left', _cx[linkIconStyles.linkIconRight(theme)] = position === 'right', _cx))
+  }, isLoading && !hasBothIcons ? /*#__PURE__*/React.createElement(Spinner, {
+    caption: null,
+    dimmed: true,
+    inline: true
+  }) : icon);
+};

package/components/Clickable/ClickableLinkIcon/ClickableLinkIcon.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["ClickableLinkIcon.tsx"],"names":["React","useContext","cx","ThemeContext","Spinner","linkIconStyles","ClickableLinkIcon","icon","isLoading","hasBothIcons","position","theme","linkIcon","linkIconLeft","linkIconRight"],"mappings":"AAAA,OAAOA,KAAP,IAAgBC,UAAhB,QAAkC,OAAlC;;AAEA,SAASC,EAAT,QAAmB,2BAAnB;AACA,SAASC,YAAT,QAA6B,gCAA7B;AACA,SAASC,OAAT,QAAwB,YAAxB;;;AAGA,SAASC,cAAT,QAA+B,4BAA/B;;;;;;;;AAQA,OAAO,IAAMC,iBAAiB,GAAG,SAApBA,iBAAoB,OAAyE,aAAtEC,IAAsE,QAAtEA,IAAsE,CAAhEC,SAAgE,QAAhEA,SAAgE,CAArDC,YAAqD,QAArDA,YAAqD,CAAvCC,QAAuC,QAAvCA,QAAuC;AACxG,MAAMC,KAAK,GAAGV,UAAU,CAACE,YAAD,CAAxB;;AAEA;AACE;AACE,MAAA,SAAS,EAAED,EAAE;AACVG,MAAAA,cAAc,CAACO,QAAf,CAAwBD,KAAxB,CADU,IACuB,IADvB;AAEVN,MAAAA,cAAc,CAACQ,YAAf,CAA4BF,KAA5B,CAFU,IAE2BD,QAAQ,KAAK,MAFxC;AAGVL,MAAAA,cAAc,CAACS,aAAf,CAA6BH,KAA7B,CAHU,IAG4BD,QAAQ,KAAK,OAHzC,OADf;;;AAOGF,IAAAA,SAAS,IAAI,CAACC,YAAd,gBAA6B,oBAAC,OAAD,IAAS,OAAO,EAAE,IAAlB,EAAwB,MAAM,MAA9B,EAA+B,MAAM,MAArC,GAA7B,GAAwEF,IAP3E,CADF;;;AAWD,CAdM","sourcesContent":["import React, { useContext } from 'react';\n\nimport { cx } from '../../lib/theming/Emotion';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { Spinner } from '../Spinner';\n\nimport { ClickableProps } from './Clickable';\nimport { linkIconStyles } from './ClickableLinkIcon.styles';\n\nexport interface ClickableLinkIconProps extends Pick<ClickableProps, 'isLoading'> {\n  icon: ClickableProps['leftIcon'];\n  position?: 'left' | 'right';\n  hasBothIcons?: boolean;\n}\n\nexport const ClickableLinkIcon = ({ icon, isLoading, hasBothIcons, position }: ClickableLinkIconProps) => {\n  const theme = useContext(ThemeContext);\n\n  return (\n    <span\n      className={cx({\n        [linkIconStyles.linkIcon(theme)]: true,\n        [linkIconStyles.linkIconLeft(theme)]: position === 'left',\n        [linkIconStyles.linkIconRight(theme)]: position === 'right',\n      })}\n    >\n      {isLoading && !hasBothIcons ? <Spinner caption={null} dimmed inline /> : icon}\n    </span>\n  );\n};\n"]}

package/components/Clickable/ClickableLinkIcon/package.json

@@ -0,0 +1,6 @@
+{
+  "main": "../../../cjs/components/Clickable/ClickableLinkIcon.js",
+  "module": "ClickableLinkIcon",
+  "types": "../ClickableLinkIcon.d.ts",
+  "sideEffects": false
+}

package/components/Clickable/ClickableLinkIcon.d.ts

@@ -0,0 +1,7 @@
+import { ClickableProps } from './Clickable';
+export interface ClickableLinkIconProps extends Pick<ClickableProps, 'isLoading'> {
+    icon: ClickableProps['leftIcon'];
+    position?: 'left' | 'right';
+    hasBothIcons?: boolean;
+}
+export declare const ClickableLinkIcon: ({ icon, isLoading, hasBothIcons, position }: ClickableLinkIconProps) => JSX.Element;

package/components/Clickable/ClickableLinkIcon.styles/ClickableLinkIcon.styles.js

@@ -0,0 +1,16 @@
+import _taggedTemplateLiteralLoose from "@babel/runtime/helpers/esm/taggedTemplateLiteralLoose";
+
+var _templateObject, _templateObject2, _templateObject3;
+
+import { memoizeStyle, css } from "../../../lib/theming/Emotion";
+export var linkIconStyles = memoizeStyle({
+  linkIcon: function linkIcon(t) {
+    return css(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n      display: inline-block;\n      margin-right: ", ";\n    "])), t.linkIconMarginRight);
+  },
+  linkIconLeft: function linkIconLeft(t) {
+    return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n      margin-right: ", ";\n    "])), t.linkIconMarginRight);
+  },
+  linkIconRight: function linkIconRight(t) {
+    return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n      margin-left: ", ";\n    "])), t.linkIconMarginLeft);
+  }
+});

package/components/Clickable/ClickableLinkIcon.styles/ClickableLinkIcon.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["ClickableLinkIcon.styles.ts"],"names":["memoizeStyle","css","linkIconStyles","linkIcon","t","linkIconMarginRight","linkIconLeft","linkIconRight","linkIconMarginLeft"],"mappings":";AACA,SAASA,YAAT,EAAuBC,GAAvB,QAAkC,2BAAlC;;AAEA,OAAO,IAAMC,cAAc,GAAGF,YAAY,CAAC;AACzCG,EAAAA,QADyC,oBAChCC,CADgC,EACtB;AACjB,WAAOH,GAAP;;AAEkBG,IAAAA,CAAC,CAACC,mBAFpB;;AAID,GANwC;AAOzCC,EAAAA,YAPyC,wBAO5BF,CAP4B,EAOlB;AACrB,WAAOH,GAAP;AACkBG,IAAAA,CAAC,CAACC,mBADpB;;AAGD,GAXwC;AAYzCE,EAAAA,aAZyC,yBAY3BH,CAZ2B,EAYjB;AACtB,WAAOH,GAAP;AACiBG,IAAAA,CAAC,CAACI,kBADnB;;AAGD,GAhBwC,EAAD,CAAnC","sourcesContent":["import { Theme } from '../../lib/theming/Theme';\nimport { memoizeStyle, css } from '../../lib/theming/Emotion';\n\nexport const linkIconStyles = memoizeStyle({\n  linkIcon(t: Theme) {\n    return css`\n      display: inline-block;\n      margin-right: ${t.linkIconMarginRight};\n    `;\n  },\n  linkIconLeft(t: Theme) {\n    return css`\n      margin-right: ${t.linkIconMarginRight};\n    `;\n  },\n  linkIconRight(t: Theme) {\n    return css`\n      margin-left: ${t.linkIconMarginLeft};\n    `;\n  },\n});\n"]}

package/components/Clickable/ClickableLinkIcon.styles/package.json

@@ -0,0 +1,6 @@
+{
+  "main": "../../../cjs/components/Clickable/ClickableLinkIcon.styles.js",
+  "module": "ClickableLinkIcon.styles",
+  "types": "../ClickableLinkIcon.styles.d.ts",
+  "sideEffects": false
+}

package/components/Clickable/ClickableLinkIcon.styles.d.ts

@@ -0,0 +1,6 @@
+import { Theme } from '../../lib/theming/Theme';
+export declare const linkIconStyles: {
+    linkIcon(t: Theme): string;
+    linkIconLeft(t: Theme): string;
+    linkIconRight(t: Theme): string;
+};

package/components/Clickable/index/index.js

@@ -0,0 +1 @@
+export * from "../Clickable";

package/components/Clickable/index/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAd","sourcesContent":["export * from './Clickable';\n"]}

package/components/Clickable/index/package.json

@@ -0,0 +1,6 @@
+{
+  "main": "../../../cjs/components/Clickable/index.js",
+  "module": "index",
+  "types": "../index.d.ts",
+  "sideEffects": false
+}

package/components/Clickable/index.d.ts

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

package/components/Clickable/package.json

@@ -0,0 +1,6 @@
+{
+  "main": "../../cjs/components/Clickable/index.js",
+  "module": "index",
+  "types": "index.d.ts",
+  "sideEffects": false
+}

package/components/Clickable/utils/package.json

@@ -0,0 +1,6 @@
+{
+  "main": "../../../cjs/components/Clickable/utils.js",
+  "module": "utils",
+  "types": "../utils.d.ts",
+  "sideEffects": false
+}

package/components/Clickable/utils/utils.js

@@ -0,0 +1,44 @@
+import { isExternalLink } from "../../../lib/utils";
+import { CLICKABLE_DEFAULT_ELEMENT } from "../Clickable";
+export var getTabIndex = function getTabIndex(isInteractive, tabIndex, disabled) {
+  if (disabled) {
+    return -1;
+  }
+
+  if (!isInteractive) {
+    return tabIndex != null ? tabIndex : 0;
+  }
+
+  return tabIndex;
+};
+export var getRole = function getRole(isInteractive, role) {
+  if (!isInteractive) {
+    return role != null ? role : 'button';
+  }
+
+  return role;
+};
+export var getCurrentView = function getCurrentView(view, as) {
+  if (as === void 0) {
+    as = CLICKABLE_DEFAULT_ELEMENT;
+  }
+
+  if (view) {
+    return view;
+  }
+
+  if (as === 'button') {
+    return 'button';
+  }
+
+  if (as === 'a') {
+    return 'link';
+  }
+};
+export var getRel = function getRel(rel, href) {
+  if (!rel && href) {
+    return "noopener" + (isExternalLink(href) ? ' noreferrer' : '');
+  }
+
+  return rel;
+};

package/components/Clickable/utils/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["utils.ts"],"names":["isExternalLink","CLICKABLE_DEFAULT_ELEMENT","getTabIndex","isInteractive","tabIndex","disabled","getRole","role","getCurrentView","view","as","getRel","rel","href"],"mappings":";;AAEA,SAASA,cAAT,QAA+B,iBAA/B;;AAEA,SAASC,yBAAT,QAA0D,aAA1D;;AAEA,OAAO,IAAMC,WAAW,GAAG,SAAdA,WAAc,CAACC,aAAD,EAAyBC,QAAzB,EAA2CC,QAA3C,EAAkE;AAC3F,MAAIA,QAAJ,EAAc;AACZ,WAAO,CAAC,CAAR;AACD;;AAED,MAAI,CAACF,aAAL,EAAoB;AAClB,WAAOC,QAAP,WAAOA,QAAP,GAAmB,CAAnB;AACD;;AAED,SAAOA,QAAP;AACD,CAVM;;AAYP,OAAO,IAAME,OAAO,GAAG,SAAVA,OAAU,CAACH,aAAD,EAAyBI,IAAzB,EAAmE;AACxF,MAAI,CAACJ,aAAL,EAAoB;AAClB,WAAOI,IAAP,WAAOA,IAAP,GAAe,QAAf;AACD;;AAED,SAAOA,IAAP;AACD,CANM;;AAQP,OAAO,IAAMC,cAAc,GAAG,SAAjBA,cAAiB,CAACC,IAAD,EAA+BC,EAA/B,EAA+E,KAAhDA,EAAgD,cAAhDA,EAAgD,GAA9BT,yBAA8B;AAC3G,MAAIQ,IAAJ,EAAU;AACR,WAAOA,IAAP;AACD;;AAED,MAAIC,EAAE,KAAK,QAAX,EAAqB;AACnB,WAAO,QAAP;AACD;;AAED,MAAIA,EAAE,KAAK,GAAX,EAAgB;AACd,WAAO,MAAP;AACD;AACF,CAZM;;AAcP,OAAO,IAAMC,MAAM,GAAG,SAATA,MAAS,CAACC,GAAD,EAA6BC,IAA7B,EAA0D;AAC9E,MAAI,CAACD,GAAD,IAAQC,IAAZ,EAAkB;AAChB,yBAAkBb,cAAc,CAACa,IAAD,CAAd,GAAuB,aAAvB,GAAuC,EAAzD;AACD;;AAED,SAAOD,GAAP;AACD,CANM","sourcesContent":["import { ElementType, HTMLAttributes } from 'react';\n\nimport { isExternalLink } from '../../lib/utils';\n\nimport { CLICKABLE_DEFAULT_ELEMENT, ClickableProps } from './Clickable';\n\nexport const getTabIndex = (isInteractive: boolean, tabIndex: number, disabled?: boolean) => {\n  if (disabled) {\n    return -1;\n  }\n\n  if (!isInteractive) {\n    return tabIndex ?? 0;\n  }\n\n  return tabIndex;\n};\n\nexport const getRole = (isInteractive: boolean, role: HTMLAttributes<unknown>['role']) => {\n  if (!isInteractive) {\n    return role ?? 'button';\n  }\n\n  return role;\n};\n\nexport const getCurrentView = (view: ClickableProps['view'], as: ElementType = CLICKABLE_DEFAULT_ELEMENT) => {\n  if (view) {\n    return view;\n  }\n\n  if (as === 'button') {\n    return 'button';\n  }\n\n  if (as === 'a') {\n    return 'link';\n  }\n};\n\nexport const getRel = (rel: ClickableProps['rel'], href: string | undefined) => {\n  if (!rel && href) {\n    return `noopener${isExternalLink(href) ? ' noreferrer' : ''}`;\n  }\n\n  return rel;\n};\n"]}

package/components/Clickable/utils.d.ts

@@ -0,0 +1,6 @@
+import { ElementType, HTMLAttributes } from 'react';
+import { ClickableProps } from './Clickable';
+export declare const getTabIndex: (isInteractive: boolean, tabIndex: number, disabled?: boolean | undefined) => number;
+export declare const getRole: (isInteractive: boolean, role: HTMLAttributes<unknown>['role']) => import("react").AriaRole | undefined;
+export declare const getCurrentView: (view: ClickableProps['view'], as?: ElementType) => "link" | "button" | undefined;
+export declare const getRel: (rel: ClickableProps['rel'], href: string | undefined) => string | undefined;

package/components/ComboBox/ComboBox/ComboBox.js

@@ -0,0 +1,144 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _inheritsLoose from "@babel/runtime/helpers/esm/inheritsLoose";
+
+var _class, _class2, _temp;
+
+import React from 'react';
+import { CustomComboBox } from "../../../internal/CustomComboBox";
+import { rootNode } from "../../../lib/rootNode";
+import { createPropsGetter } from "../../../lib/createPropsGetter";
+export var ComboBox = rootNode(_class = (_temp = _class2 = /*#__PURE__*/function (_React$Component) {
+  _inheritsLoose(ComboBox, _React$Component);
+
+  function ComboBox() {
+    var _this;
+
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    _this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;
+    _this.getProps = createPropsGetter(ComboBox.defaultProps);
+    _this.comboboxElement = null;
+
+    _this.customComboBoxRef = function (element) {
+      _this.setRootNode(element);
+
+      _this.comboboxElement = element;
+    };
+
+    return _this;
+  }
+
+  var _proto = ComboBox.prototype;
+  /**
+  * @public
+  */
+
+  _proto.focus = function focus() {
+    if (this.comboboxElement) {
+      this.comboboxElement.focus();
+    }
+  }
+  /**
+  * @public
+  */
+  ;
+
+  _proto.blur = function blur() {
+    if (this.comboboxElement) {
+      this.comboboxElement.blur();
+    }
+  }
+  /**
+  * Открывает выпадающий список и запускает поиск элементов
+  *
+  * @public
+  * @param {string} [query] Текст поиска. По умолчанию берется
+  * текст из инпута или результат `valueToString(value)`
+  */
+  ;
+
+  _proto.search = function search(query) {
+    if (this.comboboxElement) {
+      this.comboboxElement.search(query);
+    }
+  }
+  /**
+  * @public
+  */
+  ;
+
+  _proto.cancelSearch = function cancelSearch() {
+    if (this.comboboxElement) {
+      this.comboboxElement.cancelSearch();
+    }
+  }
+  /**
+  * @public Открывает выпадающий список
+  */
+  ;
+
+  _proto.open = function open() {
+    if (this.comboboxElement) {
+      this.comboboxElement.open();
+    }
+  }
+  /**
+  * @public Закрывает выпадающий список
+  */
+  ;
+
+  _proto.close = function close() {
+    if (this.comboboxElement) {
+      this.comboboxElement.close();
+    }
+  }
+  /**
+  * Выделяет текст внутри input
+  * @public
+  */
+  ;
+
+  _proto.selectInputText = function selectInputText() {
+    if (this.comboboxElement) {
+      this.comboboxElement.selectInputText();
+    }
+  }
+  /**
+  * Сбрасывает введенное пользователем значение
+  * @public
+  */
+  ;
+
+  _proto.reset = function reset() {
+    if (this.comboboxElement) {
+      this.comboboxElement.reset();
+    }
+  };
+
+  _proto.render = function render() {
+    return /*#__PURE__*/React.createElement(CustomComboBox, _extends({}, this.getProps(), {
+      size: this.props.size,
+      ref: this.customComboBoxRef
+    }));
+  };
+
+  return ComboBox;
+}(React.Component), _class2.__KONTUR_REACT_UI__ = 'ComboBox', _class2.defaultProps = {
+  itemToValue: function itemToValue(item) {
+    return item.value;
+  },
+  valueToString: function valueToString(item) {
+    return item.label;
+  },
+  renderValue: function renderValue(item) {
+    return item.label;
+  },
+  renderItem: function renderItem(item) {
+    return item.label;
+  },
+  menuAlign: 'left',
+  searchOnFocus: true,
+  drawArrow: true
+}, _temp)) || _class;

package/components/ComboBox/ComboBox/ComboBox.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["ComboBox.tsx"],"names":["React","CustomComboBox","rootNode","createPropsGetter","ComboBox","getProps","defaultProps","comboboxElement","customComboBoxRef","element","setRootNode","focus","blur","search","query","cancelSearch","open","close","selectInputText","reset","render","props","size","Component","__KONTUR_REACT_UI__","itemToValue","item","value","valueToString","label","renderValue","renderItem","menuAlign","searchOnFocus","drawArrow"],"mappings":"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","sourcesContent":["import React, { AriaAttributes } from 'react';\n\nimport { DropdownContainerProps } from '../../internal/DropdownContainer';\nimport { CustomComboBox } from '../../internal/CustomComboBox';\nimport { Nullable } from '../../typings/utility-types';\nimport { MenuItemState } from '../MenuItem';\nimport { InputIconType } from '../Input';\nimport { CommonProps } from '../../internal/CommonWrapper';\nimport { rootNode, TSetRootNode } from '../../lib/rootNode';\nimport { createPropsGetter } from '../../lib/createPropsGetter';\nimport { SizeProp } from '../../lib/types/props';\n\nexport interface ComboBoxProps<T>\n  extends Pick<DropdownContainerProps, 'menuPos'>,\n    Pick<AriaAttributes, 'aria-describedby' | 'aria-label'>,\n    CommonProps {\n  align?: 'left' | 'center' | 'right';\n  /**\n   * Вызывает функцию поиска `getItems` при фокусе и очистке поля ввода\n   * @default true\n   */\n  searchOnFocus?: boolean;\n  /**\n   * Рисует справа иконку в виде стрелки\n   * @default true\n   */\n  drawArrow?: boolean;\n\n  autoFocus?: boolean;\n\n  borderless?: boolean;\n\n  /**\n   * Не использовать Portal для рендеринга меню.\n   * См. https://github.com/skbkontur/retail-ui/issues/15\n   * @default false\n   */\n  disablePortal?: boolean;\n\n  disabled?: boolean;\n  /**\n   * Состояние валидации при ошибке.\n   */\n  error?: boolean;\n\n  leftIcon?: InputIconType;\n\n  rightIcon?: InputIconType;\n\n  /**\n   * Функция поиска элементов, должна возвращать Promise с массивом элементов.\n   * По умолчанию ожидаются объекты с типом `{ value: string, label: string }`.\n   *\n   * Элементы могут быть любого типа. В этом случае необходимо определить\n   * свойства `itemToValue`, `renderValue`, `renderItem`, `valueToString`\n   */\n  getItems: (query: string) => Promise<Array<ComboBoxExtendedItem<T>>>;\n\n  /**\n   * Необходим для сравнения полученных результатов с `value`\n   * @default item => item.label\n   */\n  itemToValue?: (item: T) => string | number;\n\n  maxLength?: number;\n\n  menuAlign?: 'left' | 'right';\n\n  onBlur?: () => void;\n\n  /** Вызывается при изменении `value` */\n  onValueChange?: (value: T) => void;\n\n  onFocus?: () => void;\n\n  /**\n   * Вызывается при изменении текста в поле ввода,\n   * если результатом функции будет строка,\n   * то она станет следующим состоянием полем ввода\n   */\n  onInputValueChange?: (value: string) => Nullable<string> | void;\n\n  /**\n   * Функция для обработки ситуации, когда была введена\n   * строка в инпут и был потерян фокус с элемента.\n   *\n   * Если при потере фокуса в выпадающем списке будет только один\n   * элемент и  результат `renderValue` с этим элементом будет\n   * совпадать со значение в текстовом поле, то\n   * сработает onValueChange со значением данного элемента\n   *\n   * Сама функция также может вернуть значение,\n   * неравное `undefined`,\n   * с которым будет вызван onValueChange.\n   */\n  onUnexpectedInput?: (value: string) => void | null | T;\n\n  placeholder?: string;\n\n  /**\n   * Функция отрисовки элементов результата поиска.\n   * Не применяется если элемент является функцией или React-элементом\n   * @default item => item.label\n   */\n  renderItem?: (item: T, state?: MenuItemState) => React.ReactNode;\n\n  /**\n   * Компонент, заменяющий собой обёртку элементов результата поиска.\n   *\n   * По умолчанию все элементы результата поиска оборачиваются в тег `<button />`.\n   *\n   * @example\n   * itemWrapper={(item) => {\n   *    if (item.value === 3) {\n   *      return (props) => {\n   *        return <a {...props} />\n   *      }\n   *    }\n   * }}\n   */\n  itemWrapper?: (item: T) => React.ComponentType<unknown>;\n\n  /**\n   * Функция для отрисовки сообщения о пустом результате поиска\n   * Если есть renderAddButton - не работает\n   */\n  renderNotFound?: () => React.ReactNode;\n\n  /**\n   * Функция отображающая сообщение об общем количестве элементов.\n   * `found` учитывает только компонент `MenuItem`. Им \"оборачиваются\" элементы, возвращаемые `getItems()`.\n   */\n  renderTotalCount?: (found: number, total: number) => React.ReactNode;\n\n  /**\n   * Функция отрисовки выбранного значения\n   * @default item => item.label\n   */\n  renderValue?: (item: T) => React.ReactNode;\n\n  /**\n   * Функция отрисовки кнопки добавления в выпадающем списке\n   */\n  renderAddButton?: (query?: string) => React.ReactNode;\n\n  /**\n   * Общее количество элементов.\n   * Необходим для работы `renderTotalCount`\n   */\n  totalCount?: number;\n\n  /**\n   * Выбранное значение\n   * Ожидается, что `value` того же типа что и элементы в массиве,\n   * возвращаемом в `getItems`\n   */\n  value?: Nullable<T>;\n\n  /**\n   * Необходим для преобразования `value` в строку при фокусировке\n   * @default item => item.label\n   */\n  valueToString?: (item: T) => string;\n\n  size?: SizeProp;\n  /**\n   * Состояние валидации при предупреждении.\n   */\n  warning?: boolean;\n\n  width?: string | number;\n\n  maxMenuHeight?: number | string;\n\n  onMouseEnter?: (e: React.MouseEvent) => void;\n\n  onMouseOver?: (e: React.MouseEvent) => void;\n\n  onMouseLeave?: (e: React.MouseEvent) => void;\n\n  onInputKeyDown?: (e: React.KeyboardEvent<HTMLElement>) => void;\n\n  inputMode?: React.HTMLAttributes<HTMLInputElement>['inputMode'];\n}\n\nexport interface ComboBoxItem {\n  value: string;\n  label: string;\n}\n\nexport type ComboBoxExtendedItem<T> = T | (() => React.ReactElement<T>) | React.ReactElement<T>;\n\ntype DefaultProps<T> = Required<\n  Pick<\n    ComboBoxProps<T>,\n    'itemToValue' | 'valueToString' | 'renderValue' | 'renderItem' | 'menuAlign' | 'searchOnFocus' | 'drawArrow'\n  >\n>;\n\n@rootNode\nexport class ComboBox<T = ComboBoxItem> extends React.Component<ComboBoxProps<T>> {\n  public static __KONTUR_REACT_UI__ = 'ComboBox';\n\n  public static defaultProps: DefaultProps<any> = {\n    itemToValue: (item: ComboBoxItem) => item.value,\n    valueToString: (item: ComboBoxItem) => item.label,\n    renderValue: (item: ComboBoxItem) => item.label,\n    renderItem: (item: ComboBoxItem) => item.label,\n    menuAlign: 'left',\n    searchOnFocus: true,\n    drawArrow: true,\n  };\n\n  private getProps = createPropsGetter(ComboBox.defaultProps);\n\n  private comboboxElement: Nullable<CustomComboBox<T>> = null;\n  private setRootNode!: TSetRootNode;\n\n  /**\n   * @public\n   */\n  public focus() {\n    if (this.comboboxElement) {\n      this.comboboxElement.focus();\n    }\n  }\n\n  /**\n   * @public\n   */\n  public blur() {\n    if (this.comboboxElement) {\n      this.comboboxElement.blur();\n    }\n  }\n\n  /**\n   * Открывает выпадающий список и запускает поиск элементов\n   *\n   * @public\n   * @param {string} [query] Текст поиска. По умолчанию берется\n   * текст из инпута или результат `valueToString(value)`\n   */\n  public search(query?: string) {\n    if (this.comboboxElement) {\n      this.comboboxElement.search(query);\n    }\n  }\n\n  /**\n   * @public\n   */\n  public cancelSearch() {\n    if (this.comboboxElement) {\n      this.comboboxElement.cancelSearch();\n    }\n  }\n\n  /**\n   * @public Открывает выпадающий список\n   */\n  public open() {\n    if (this.comboboxElement) {\n      this.comboboxElement.open();\n    }\n  }\n\n  /**\n   * @public Закрывает выпадающий список\n   */\n  public close() {\n    if (this.comboboxElement) {\n      this.comboboxElement.close();\n    }\n  }\n\n  /**\n   * Выделяет текст внутри input\n   * @public\n   */\n  public selectInputText() {\n    if (this.comboboxElement) {\n      this.comboboxElement.selectInputText();\n    }\n  }\n\n  /**\n   * Сбрасывает введенное пользователем значение\n   * @public\n   */\n  public reset() {\n    if (this.comboboxElement) {\n      this.comboboxElement.reset();\n    }\n  }\n\n  public render() {\n    return <CustomComboBox {...this.getProps()} size={this.props.size} ref={this.customComboBoxRef} />;\n  }\n\n  private customComboBoxRef = (element: Nullable<CustomComboBox<T>>) => {\n    this.setRootNode(element);\n    this.comboboxElement = element;\n  };\n}\n"]}

package/components/ComboBox/ComboBox/package.json

@@ -0,0 +1,6 @@
+{
+  "main": "../../../cjs/components/ComboBox/ComboBox.js",
+  "module": "ComboBox",
+  "types": "../ComboBox.d.ts",
+  "sideEffects": false
+}