@skbkontur/react-ui 0.0.0-2ac4c133dd → 0.0.0-2d059f9369

package/components/TokenInput/TokenInput.md

@@ -59,6 +59,233 @@ const tokenColors = {
 </div>;
 ```
 
+У TokenInput есть 3 стандартных размера.
+
+```jsx harmony
+import { Token } from '@skbkontur/react-ui';
+import { TokenInputType } from '@skbkontur/react-ui/components/TokenInput';
+
+const [selectedItems, setSelectedItems] = React.useState([]);
+
+const delay = time => args => new Promise(resolve => setTimeout(resolve, time, args));
+
+const getItems = q =>
+  Promise.resolve(
+    ['First', 'Second', 'Third', 'Fourth', 'Fifth', 'Sixth'].filter(
+      x => x.toLowerCase().includes(q.toLowerCase()) || x.toString(10) === q,
+    ),
+  ).then(delay(500));
+
+<div style={{ width: '300px' }}>
+  <TokenInput
+    size={'small'}
+    getItems={getItems}
+    selectedItems={selectedItems}
+    onValueChange={setSelectedItems}
+  />
+  <TokenInput
+    size={'medium'}
+    getItems={getItems}
+    selectedItems={selectedItems}
+    onValueChange={setSelectedItems}
+  />
+  <TokenInput
+    size={'large'}
+    getItems={getItems}
+    selectedItems={selectedItems}
+    onValueChange={setSelectedItems}
+  />
+</div>;
+```
+
+Заблокированный TokenInput с кастомными Token:
+
+```jsx harmony
+import { Token } from '@skbkontur/react-ui';
+import { TokenInputType } from '@skbkontur/react-ui/components/TokenInput';
+
+const [selectedItems, setSelectedItems] = React.useState(['aaa', 'bbb', 'ccc']);
+
+async function getItems(query) {
+  return ['aaa', 'bbb', 'ccc'].filter((s) => s.includes(query));
+};
+
+<TokenInput
+  disabled
+  type={TokenInputType.Combined}
+  getItems={getItems}
+  selectedItems={selectedItems}
+  onValueChange={setSelectedItems}
+  renderToken={(item, tokenProps) => (
+    <Token key={item.toString()} {...tokenProps} disabled={item === 'bbb' || tokenProps.disabled} >
+      {item}
+    </Token>
+  )}
+/>
+```
+
+Ограничение количества токенов в выпадающем списке
+
+```jsx harmony
+import { Token, MenuHeader } from '@skbkontur/react-ui';
+import { TokenInputType } from '@skbkontur/react-ui/components/TokenInput';
+import { Promise } from 'es6-promise';
+
+const delay = time => args => new Promise(resolve => setTimeout(resolve, time, args));
+const cities = require('../ComboBox/__mocks__/./kladr.json');
+
+const maxItems = 5;
+
+const [totalCount, setTotalCount] = React.useState(cities.length);
+const [value, setValue] = React.useState([]);
+
+const getItems = (query) => {
+  const items = cities
+    .map((x) => x.City)
+    .filter((x) => x.toLowerCase().includes(query.toLowerCase()) || x.toString() === query);
+  const result = items.slice(0, maxItems);
+  setTotalCount(items.length);
+
+  return Promise.resolve(result).then(delay(500));
+};
+
+const renderTotalCount = (foundCount, totalCount) => (
+  <span>
+    Показано {foundCount} из {totalCount} найденных городов
+  </span>
+);
+
+<div style={{ width: "300px" }}>
+  <TokenInput
+    type={TokenInputType.Combined}
+    selectedItems={value}
+    onValueChange={setValue}
+    getItems={getItems}
+    placeholder="Начните вводить название"
+    renderTotalCount={renderTotalCount}
+    totalCount={totalCount}
+  />
+</div>
+```
+
+Пример с кастомным типом элементов меню
+```jsx harmony
+import { Token } from '@skbkontur/react-ui';
+import { TokenInputType } from '@skbkontur/react-ui/components/TokenInput';
+
+const [selectedItems, setSelectedItems] = React.useState([]);
+
+const delay = time => args => new Promise(resolve => setTimeout(resolve, time, args));
+const getGenericItems = () => [
+  { id: '111', value: 'aaa' },
+  { id: '222', value: 'bbb' },
+  { id: '333', value: 'ccc' },
+  { id: '444', value: 'ddd' },
+];
+const renderItem = (item) => item.value;
+const renderValue = (value) => value.value;
+const valueToItem = (item) => ({
+  value: item,
+});
+const getModelItems = async (query) => {
+  await delay(400);
+  return getGenericItems().filter((s) => s.value.includes(query));
+}
+
+<div style={{ width: '300px' }}>
+  <TokenInput
+    selectedItems={selectedItems}
+    renderItem={renderItem}
+    renderValue={renderValue}
+    valueToItem={valueToItem}
+    valueToString={renderValue}
+    getItems={getModelItems}
+    onValueChange={setSelectedItems}
+    placeholder="placeholder"
+    type={TokenInputType.Combined}
+    renderToken={(item, tokenProps) => (
+      <Token
+        key={item.id}
+        {...tokenProps}
+      >
+        {item.value}
+      </Token>
+    )}
+  />
+</div>;
+```
+
+#### Пример с дебаунсом функции getItems
+
+Функция debounce из lodash некорректно работает с async/promise, поэтому лучше использовать кастомную функцию, как в примере ниже.
+
+```jsx harmony
+import { TokenInput } from "@skbkontur/react-ui";
+import { TokenInputType } from "@skbkontur/react-ui/components/TokenInput";
+
+const [value, setValue] = React.useState([]);
+
+function debounceAsync(callback, wait) {
+  let timeoutId = null;
+
+  return (...args) => {
+    if (timeoutId) {
+      clearTimeout(timeoutId);
+    }
+
+    return new Promise((resolve) => {
+      const timeoutPromise = new Promise((resolve) => {
+        timeoutId = setTimeout(resolve, wait);
+      });
+      timeoutPromise.then(async () => {
+        resolve(await callback(...args));
+      });
+    });
+  };
+}
+
+const items = ["kon", "kod", "kof", "kor", "kos"];
+
+const getItems = async (query) => {
+  console.log("query: ", query);
+  return items.filter((item) => item.includes(query));
+};
+
+<TokenInput
+  style={{ width: "300px" }}
+  type={TokenInputType.Combined}
+  selectedItems={value}
+  onValueChange={setValue}
+  getItems={debounceAsync(getItems, 300)}
+  placeholder="Начните вводить название"
+/>
+```
+Типизированная версия функции
+
+```typescript static
+function debounceAsync<T, Callback extends (...args: any[]) => Promise<T>>(
+  callback: Callback,
+  wait: number,
+): (...args: Parameters<Callback>) => Promise<T> {
+  let timeoutId: number | null = null;
+
+  return (...args: any[]) => {
+    if (timeoutId) {
+      clearTimeout(timeoutId);
+    }
+
+    return new Promise<T>((resolve) => {
+      const timeoutPromise = new Promise<void>((resolve) => {
+        timeoutId = setTimeout(resolve, wait);
+      });
+      timeoutPromise.then(async () => {
+        resolve(await callback(...args));
+      });
+    });
+  };
+}
+```
+
 #### Локали по умолчанию
 
 ```typescript static

package/components/TokenInput/TokenInput.mixins/TokenInput.mixins.js

@@ -0,0 +1,11 @@
+import _taggedTemplateLiteralLoose from "@babel/runtime/helpers/esm/taggedTemplateLiteralLoose";
+
+var _templateObject, _templateObject2;
+
+import { css } from "../../../lib/theming/Emotion";
+export var labelSizeMixin = function labelSizeMixin(tokenInputPaddingY, tokenInputPaddingX) {
+  return css(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n    padding: ", " ", ";\n  "])), tokenInputPaddingY, tokenInputPaddingX);
+};
+export var inputSizeMixin = function inputSizeMixin(fontSize, lineHeight) {
+  return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n    font-size: ", ";\n    height: ", ";\n    line-height: ", ";\n  "])), fontSize, lineHeight, lineHeight);
+};

package/components/TokenInput/TokenInput.mixins/TokenInput.mixins.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["TokenInput.mixins.ts"],"names":["css","labelSizeMixin","tokenInputPaddingY","tokenInputPaddingX","inputSizeMixin","fontSize","lineHeight"],"mappings":"sIAAA,SAASA,GAAT,QAAoB,2BAApB;;AAEA,OAAO,IAAMC,cAAc,GAAG,SAAjBA,cAAiB,CAACC,kBAAD,EAA6BC,kBAA7B,EAA4D;AACxF,SAAOH,GAAP;AACaE,EAAAA,kBADb,EACmCC,kBADnC;;AAGD,CAJM;;AAMP,OAAO,IAAMC,cAAc,GAAG,SAAjBA,cAAiB,CAACC,QAAD,EAAmBC,UAAnB,EAA0C;AACtE,SAAON,GAAP;AACeK,EAAAA,QADf;AAEYC,EAAAA,UAFZ;AAGiBA,EAAAA,UAHjB;;AAKD,CANM","sourcesContent":["import { css } from '../../lib/theming/Emotion';\n\nexport const labelSizeMixin = (tokenInputPaddingY: string, tokenInputPaddingX: string) => {\n  return css`\n    padding: ${tokenInputPaddingY} ${tokenInputPaddingX};\n  `;\n};\n\nexport const inputSizeMixin = (fontSize: string, lineHeight: string) => {\n  return css`\n    font-size: ${fontSize};\n    height: ${lineHeight};\n    line-height: ${lineHeight};\n  `;\n};\n"]}

package/components/TokenInput/TokenInput.mixins/package.json

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

package/components/TokenInput/TokenInput.mixins.d.ts

@@ -0,0 +1,2 @@
+export declare const labelSizeMixin: (tokenInputPaddingY: string, tokenInputPaddingX: string) => string;
+export declare const inputSizeMixin: (fontSize: string, lineHeight: string) => string;

package/components/TokenInput/TokenInput.styles/TokenInput.styles.js

@@ -1,51 +1,56 @@
 import _taggedTemplateLiteralLoose from "@babel/runtime/helpers/esm/taggedTemplateLiteralLoose";
 
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16;
 
 import { css, memoizeStyle } from "../../../lib/theming/Emotion";
-var mixins = {
-  inputAndHelperCommonStyles: function inputAndHelperCommonStyles(t) {
-    return css(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n      padding: 0 ", " 0 ", ";\n      line-height: ", ";\n      font-size: ", ";\n    "])), t.tokenInputInputPaddingRight, t.tokenInputInputPaddingLeft, t.tokenInputLineHeight, t.tokenInputFontSize);
-  },
-  inputAndHelperCommonEditingStyles: function inputAndHelperCommonEditingStyles(t) {
-    return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n      margin: ", " ", ";\n      padding: 0 ", " 0 ", ";\n      line-height: ", ";\n    "])), t.tokenMarginY, t.tokenMarginX, t.tokenInputInputPaddingRight, t.tokenPaddingX, t.tokenLineHeight);
-  }
-};
+import { labelSizeMixin, inputSizeMixin } from "../TokenInput.mixins";
 export var styles = memoizeStyle({
   label: function label(t) {
-    return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n      background-color: ", ";\n      box-shadow: ", ";\n      border: ", " solid ", ";\n      border-top-color: ", ";\n      box-sizing: border-box;\n      cursor: text;\n      padding: ", " ", ";\n      display: flex;\n      flex-wrap: wrap;\n      align-items: start;\n      outline: none;\n      position: relative;\n      border-radius: ", ";\n    "])), t.tokenInputBg, t.tokenInputShadow, t.tokenInputBorderWidth, t.tokenInputBorderColor, t.tokenInputBorderTopColor, t.tokenInputPaddingY, t.tokenInputPaddingX, t.tokenInputBorderRadius);
+    return css(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n      background-color: ", ";\n      box-shadow: ", ";\n      border: ", " solid ", ";\n      border-top-color: ", ";\n      transition: border-color ", " ", ";\n      box-sizing: border-box;\n      cursor: text;\n      display: flex;\n      flex-wrap: wrap;\n      align-items: start;\n      outline: none;\n      position: relative;\n      border-radius: ", ";\n    "])), t.tokenInputBg, t.tokenInputShadow, t.tokenInputBorderWidth, t.tokenInputBorderColor, t.tokenInputBorderTopColor, t.transitionDuration, t.transitionTimingFunction, t.tokenInputBorderRadius);
+  },
+  labelSmall: function labelSmall(t) {
+    return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n      ", "\n    "])), labelSizeMixin(t.tokenInputPaddingYSmall, t.tokenInputPaddingXSmall));
+  },
+  labelMedium: function labelMedium(t) {
+    return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n      ", "\n    "])), labelSizeMixin(t.tokenInputPaddingYMedium, t.tokenInputPaddingXMedium));
+  },
+  labelLarge: function labelLarge(t) {
+    return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n      ", "\n    "])), labelSizeMixin(t.tokenInputPaddingYLarge, t.tokenInputPaddingXLarge));
+  },
+  hovering: function hovering(t) {
+    return css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\n      &:hover {\n        border-color: ", ";\n      }\n    "])), t.tokenInputBorderColorHover);
   },
   warning: function warning(t) {
-    return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n      border: ", " solid ", ";\n      box-shadow: 0 0 0 ", " ", ";\n    "])), t.tokenInputBorderWidth, t.tokenInputBorderColorWarning, t.tokenInputOutlineWidth, t.tokenInputBorderColorWarning);
+    return css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteralLoose(["\n      border: ", " solid ", ";\n      box-shadow: 0 0 0 ", " ", ";\n    "])), t.tokenInputBorderWidth, t.tokenInputBorderColorWarning, t.tokenInputOutlineWidth, t.tokenInputBorderColorWarning);
   },
   error: function error(t) {
-    return css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\n      border: ", " solid ", ";\n      box-shadow: 0 0 0 ", " ", ";\n    "])), t.tokenInputBorderWidth, t.tokenInputBorderColorError, t.tokenInputOutlineWidth, t.tokenInputBorderColorError);
+    return css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteralLoose(["\n      border: ", " solid ", ";\n      box-shadow: 0 0 0 ", " ", ";\n    "])), t.tokenInputBorderWidth, t.tokenInputBorderColorError, t.tokenInputOutlineWidth, t.tokenInputBorderColorError);
   },
   labelFocused: function labelFocused(t) {
-    return css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteralLoose(["\n      border: ", " solid ", ";\n      box-shadow: 0 0 0 ", " ", ";\n    "])), t.tokenInputBorderWidth, t.tokenInputBorderColorFocus, t.tokenInputOutlineWidth, t.tokenInputBorderColorFocus);
+    return css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteralLoose(["\n      border: ", " solid ", ";\n      box-shadow: 0 0 0 ", " ", ";\n    "])), t.tokenInputBorderWidth, t.tokenInputBorderColorFocus, t.tokenInputOutlineWidth, t.tokenInputBorderColorFocus);
   },
   labelDisabled: function labelDisabled(t) {
-    return css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteralLoose(["\n      background: ", ";\n      border-color: ", ";\n      box-shadow: none;\n    "])), t.tokenInputDisabledBg, t.tokenInputDisabledBorderColor);
+    return css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteralLoose(["\n      background: ", ";\n      background-clip: ", ";\n      border-color: ", ";\n      box-shadow: none;\n      cursor: default;\n    "])), t.tokenInputDisabledBg, t.inputDisabledBackgroundClip, t.tokenInputDisabledBorderColor);
   },
   input: function input(t) {
-    return css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteralLoose(["\n      min-width: 0;\n      max-width: 100%;\n      width: 50px;\n      background: transparent;\n      border: none;\n      box-shadow: none;\n      outline: none;\n      font-family: inherit;\n      margin: ", " 0 ", " 0;\n      overflow: hidden;\n      resize: none;\n      height: ", ";\n      -webkit-appearance: none;\n      text-overflow: clip;\n      background-clip: padding-box;\n      transition: background-color 0.15s ease-in;\n      color: ", ";\n      box-sizing: border-box;\n      word-break: break-all;\n\n      ", ";\n\n      &::-ms-clear {\n        display: none;\n      }\n      &::placeholder {\n        color: ", ";\n        -webkit-text-fill-color: ", ";\n      }\n      &:disabled::placeholder {\n        color: ", ";\n        -webkit-text-fill-color: ", ";\n      }\n      &:focus::placeholder {\n        color: ", ";\n        -webkit-text-fill-color: ", ";\n      }\n      /* fix firefox placeholder opacity */\n      &:-moz-placeholder {\n        opacity: 1;\n      }\n      &::-moz-placeholder {\n        opacity: 1;\n      }\n    "])), t.tokenMarginY, t.tokenMarginY, t.tokenInputLineHeight, t.tokenInputTextColor, mixins.inputAndHelperCommonStyles(t), t.tokenInputPlaceholderColor, t.tokenInputPlaceholderColor, t.tokenInputPlaceholderColorDisabled, t.tokenInputPlaceholderColorDisabled, t.tokenInputPlaceholderColorLight, t.tokenInputPlaceholderColorLight);
+    return css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteralLoose(["\n      min-width: 0;\n      max-width: 100%;\n      width: 50px;\n      background: transparent;\n      border: none;\n      box-shadow: none;\n      outline: none;\n      font-family: inherit;\n      overflow: hidden;\n      resize: none;\n      -webkit-appearance: none;\n      text-overflow: clip;\n      background-clip: padding-box;\n      transition: background-color 0.15s ease-in;\n      color: ", ";\n      box-sizing: border-box;\n      word-break: break-all;\n      padding: 0;\n      margin: 0;\n      &::-ms-clear {\n        display: none;\n      }\n      &::placeholder {\n        color: ", ";\n        -webkit-text-fill-color: ", ";\n      }\n      &:disabled::placeholder {\n        color: ", ";\n        -webkit-text-fill-color: ", ";\n      }\n      &:focus::placeholder {\n        color: ", ";\n        -webkit-text-fill-color: ", ";\n      }\n      /* fix firefox placeholder opacity */\n      &:-moz-placeholder {\n        opacity: 1;\n      }\n      &::-moz-placeholder {\n        opacity: 1;\n      }\n    "])), t.tokenInputTextColor, t.tokenInputPlaceholderColor, t.tokenInputPlaceholderColor, t.tokenInputPlaceholderColorDisabled, t.tokenInputPlaceholderColorDisabled, t.tokenInputPlaceholderColorLight, t.tokenInputPlaceholderColorLight);
   },
-  helperContainer: function helperContainer(t) {
-    return css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteralLoose(["\n      display: flex;\n      position: absolute;\n      top: 0;\n      left: 0;\n      right: 0;\n      padding: ", " ", ";\n      visibility: hidden;\n    "])), t.tokenInputPaddingY, t.tokenInputPaddingX);
+  inputSmall: function inputSmall(t) {
+    return css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteralLoose(["\n      ", ";\n    "])), inputSizeMixin(t.tokenFontSizeSmall, t.tokenInputLineHeightSmall));
   },
-  helperText: function helperText(t) {
-    return css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteralLoose(["\n      max-width: 100%;\n      word-break: break-all;\n\n      // don't collapse spaces\n      // so they get counted in width\n      white-space: pre-wrap;\n\n      ", "\n    "])), mixins.inputAndHelperCommonStyles(t));
+  inputMedium: function inputMedium(t) {
+    return css(_templateObject12 || (_templateObject12 = _taggedTemplateLiteralLoose(["\n      ", ";\n    "])), inputSizeMixin(t.tokenFontSizeMedium, t.tokenInputLineHeightMedium));
+  },
+  inputLarge: function inputLarge(t) {
+    return css(_templateObject13 || (_templateObject13 = _taggedTemplateLiteralLoose(["\n      ", ";\n    "])), inputSizeMixin(t.tokenFontSizeLarge, t.tokenInputLineHeightLarge));
   },
   helperTextEditing: function helperTextEditing(t) {
-    return css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteralLoose(["\n      ", ";\n\n      font-size: ", ";\n      padding-bottom: ", ";\n    "])), mixins.inputAndHelperCommonEditingStyles(t), t.tokenFontSize, t.tokenLegacyTextShift);
+    return css(_templateObject14 || (_templateObject14 = _taggedTemplateLiteralLoose(["\n      padding-bottom: ", ";\n    "])), t.tokenLegacyTextShift);
   },
   inputDisabled: function inputDisabled(t) {
-    return css(_templateObject12 || (_templateObject12 = _taggedTemplateLiteralLoose(["\n      pointer-events: none;\n      /* fix text color in safari */\n      -webkit-text-fill-color: currentcolor;\n      color: ", ";\n    "])), t.tokenInputTextColorDisabled);
-  },
-  inputEditing: function inputEditing(t) {
-    return css(_templateObject13 || (_templateObject13 = _taggedTemplateLiteralLoose(["\n      ", ";\n    "])), mixins.inputAndHelperCommonEditingStyles(t));
+    return css(_templateObject15 || (_templateObject15 = _taggedTemplateLiteralLoose(["\n      pointer-events: none;\n      /* fix text color in safari */\n      -webkit-text-fill-color: currentcolor;\n      color: ", ";\n    "])), t.tokenInputTextColorDisabled);
   },
   reservedInput: function reservedInput(t) {
-    return css(_templateObject14 || (_templateObject14 = _taggedTemplateLiteralLoose(["\n      min-width: 2px;\n      min-height: ", ";\n      line-height: ", ";\n      font-size: ", ";\n      margin: ", " 0 ", " 0;\n      padding: 0 ", " 0 ", ";\n      color: ", ";\n      word-break: break-all;\n    "])), t.tokenInputLineHeight, t.tokenInputLineHeight, t.tokenInputFontSize, t.tokenMarginY, t.tokenMarginY, t.tokenInputInputPaddingRight, t.tokenInputInputPaddingLeft, t.tokenInputTextColorDisabled);
+    return css(_templateObject16 || (_templateObject16 = _taggedTemplateLiteralLoose(["\n      min-width: 2px;\n      color: ", ";\n      word-break: break-all;\n    "])), t.tokenInputTextColorDisabled);
   }
 });

package/components/TokenInput/TokenInput.styles/TokenInput.styles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["TokenInput.styles.ts"],"names":["css","memoizeStyle","mixins","inputAndHelperCommonStyles","t","tokenInputInputPaddingRight","tokenInputInputPaddingLeft","tokenInputLineHeight","tokenInputFontSize","inputAndHelperCommonEditingStyles","tokenMarginY","tokenMarginX","tokenPaddingX","tokenLineHeight","styles","label","tokenInputBg","tokenInputShadow","tokenInputBorderWidth","tokenInputBorderColor","tokenInputBorderTopColor","tokenInputPaddingY","tokenInputPaddingX","tokenInputBorderRadius","warning","tokenInputBorderColorWarning","tokenInputOutlineWidth","error","tokenInputBorderColorError","labelFocused","tokenInputBorderColorFocus","labelDisabled","tokenInputDisabledBg","tokenInputDisabledBorderColor","input","tokenInputTextColor","tokenInputPlaceholderColor","tokenInputPlaceholderColorDisabled","tokenInputPlaceholderColorLight","helperContainer","helperText","helperTextEditing","tokenFontSize","tokenLegacyTextShift","inputDisabled","tokenInputTextColorDisabled","inputEditing","reservedInput"],"mappings":"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","sourcesContent":["import { css, memoizeStyle } from '../../lib/theming/Emotion';\nimport { Theme } from '../../lib/theming/Theme';\n\nconst mixins = {\n  inputAndHelperCommonStyles(t: Theme) {\n    return css`\n      padding: 0 ${t.tokenInputInputPaddingRight} 0 ${t.tokenInputInputPaddingLeft};\n      line-height: ${t.tokenInputLineHeight};\n      font-size: ${t.tokenInputFontSize};\n    `;\n  },\n  inputAndHelperCommonEditingStyles(t: Theme) {\n    return css`\n      margin: ${t.tokenMarginY} ${t.tokenMarginX};\n      padding: 0 ${t.tokenInputInputPaddingRight} 0 ${t.tokenPaddingX};\n      line-height: ${t.tokenLineHeight};\n    `;\n  },\n};\n\nexport const styles = memoizeStyle({\n  label(t: Theme) {\n    return css`\n      background-color: ${t.tokenInputBg};\n      box-shadow: ${t.tokenInputShadow};\n      border: ${t.tokenInputBorderWidth} solid ${t.tokenInputBorderColor};\n      border-top-color: ${t.tokenInputBorderTopColor};\n      box-sizing: border-box;\n      cursor: text;\n      padding: ${t.tokenInputPaddingY} ${t.tokenInputPaddingX};\n      display: flex;\n      flex-wrap: wrap;\n      align-items: start;\n      outline: none;\n      position: relative;\n      border-radius: ${t.tokenInputBorderRadius};\n    `;\n  },\n\n  warning(t: Theme) {\n    return css`\n      border: ${t.tokenInputBorderWidth} solid ${t.tokenInputBorderColorWarning};\n      box-shadow: 0 0 0 ${t.tokenInputOutlineWidth} ${t.tokenInputBorderColorWarning};\n    `;\n  },\n\n  error(t: Theme) {\n    return css`\n      border: ${t.tokenInputBorderWidth} solid ${t.tokenInputBorderColorError};\n      box-shadow: 0 0 0 ${t.tokenInputOutlineWidth} ${t.tokenInputBorderColorError};\n    `;\n  },\n\n  labelFocused(t: Theme) {\n    return css`\n      border: ${t.tokenInputBorderWidth} solid ${t.tokenInputBorderColorFocus};\n      box-shadow: 0 0 0 ${t.tokenInputOutlineWidth} ${t.tokenInputBorderColorFocus};\n    `;\n  },\n\n  labelDisabled(t: Theme) {\n    return css`\n      background: ${t.tokenInputDisabledBg};\n      border-color: ${t.tokenInputDisabledBorderColor};\n      box-shadow: none;\n    `;\n  },\n\n  input(t: Theme) {\n    return css`\n      min-width: 0;\n      max-width: 100%;\n      width: 50px;\n      background: transparent;\n      border: none;\n      box-shadow: none;\n      outline: none;\n      font-family: inherit;\n      margin: ${t.tokenMarginY} 0 ${t.tokenMarginY} 0;\n      overflow: hidden;\n      resize: none;\n      height: ${t.tokenInputLineHeight};\n      -webkit-appearance: none;\n      text-overflow: clip;\n      background-clip: padding-box;\n      transition: background-color 0.15s ease-in;\n      color: ${t.tokenInputTextColor};\n      box-sizing: border-box;\n      word-break: break-all;\n\n      ${mixins.inputAndHelperCommonStyles(t)};\n\n      &::-ms-clear {\n        display: none;\n      }\n      &::placeholder {\n        color: ${t.tokenInputPlaceholderColor};\n        -webkit-text-fill-color: ${t.tokenInputPlaceholderColor};\n      }\n      &:disabled::placeholder {\n        color: ${t.tokenInputPlaceholderColorDisabled};\n        -webkit-text-fill-color: ${t.tokenInputPlaceholderColorDisabled};\n      }\n      &:focus::placeholder {\n        color: ${t.tokenInputPlaceholderColorLight};\n        -webkit-text-fill-color: ${t.tokenInputPlaceholderColorLight};\n      }\n      /* fix firefox placeholder opacity */\n      &:-moz-placeholder {\n        opacity: 1;\n      }\n      &::-moz-placeholder {\n        opacity: 1;\n      }\n    `;\n  },\n\n  helperContainer(t: Theme) {\n    return css`\n      display: flex;\n      position: absolute;\n      top: 0;\n      left: 0;\n      right: 0;\n      padding: ${t.tokenInputPaddingY} ${t.tokenInputPaddingX};\n      visibility: hidden;\n    `;\n  },\n\n  helperText(t: Theme) {\n    return css`\n      max-width: 100%;\n      word-break: break-all;\n\n      // don't collapse spaces\n      // so they get counted in width\n      white-space: pre-wrap;\n\n      ${mixins.inputAndHelperCommonStyles(t)}\n    `;\n  },\n\n  helperTextEditing(t: Theme) {\n    return css`\n      ${mixins.inputAndHelperCommonEditingStyles(t)};\n\n      font-size: ${t.tokenFontSize};\n      padding-bottom: ${t.tokenLegacyTextShift};\n    `;\n  },\n\n  inputDisabled(t: Theme) {\n    return css`\n      pointer-events: none;\n      /* fix text color in safari */\n      -webkit-text-fill-color: currentcolor;\n      color: ${t.tokenInputTextColorDisabled};\n    `;\n  },\n\n  inputEditing(t: Theme) {\n    return css`\n      ${mixins.inputAndHelperCommonEditingStyles(t)};\n    `;\n  },\n\n  reservedInput(t: Theme) {\n    return css`\n      min-width: 2px;\n      min-height: ${t.tokenInputLineHeight};\n      line-height: ${t.tokenInputLineHeight};\n      font-size: ${t.tokenInputFontSize};\n      margin: ${t.tokenMarginY} 0 ${t.tokenMarginY} 0;\n      padding: 0 ${t.tokenInputInputPaddingRight} 0 ${t.tokenInputInputPaddingLeft};\n      color: ${t.tokenInputTextColorDisabled};\n      word-break: break-all;\n    `;\n  },\n});\n"]}
+{"version":3,"sources":["TokenInput.styles.ts"],"names":["css","memoizeStyle","labelSizeMixin","inputSizeMixin","styles","label","t","tokenInputBg","tokenInputShadow","tokenInputBorderWidth","tokenInputBorderColor","tokenInputBorderTopColor","transitionDuration","transitionTimingFunction","tokenInputBorderRadius","labelSmall","tokenInputPaddingYSmall","tokenInputPaddingXSmall","labelMedium","tokenInputPaddingYMedium","tokenInputPaddingXMedium","labelLarge","tokenInputPaddingYLarge","tokenInputPaddingXLarge","hovering","tokenInputBorderColorHover","warning","tokenInputBorderColorWarning","tokenInputOutlineWidth","error","tokenInputBorderColorError","labelFocused","tokenInputBorderColorFocus","labelDisabled","tokenInputDisabledBg","inputDisabledBackgroundClip","tokenInputDisabledBorderColor","input","tokenInputTextColor","tokenInputPlaceholderColor","tokenInputPlaceholderColorDisabled","tokenInputPlaceholderColorLight","inputSmall","tokenFontSizeSmall","tokenInputLineHeightSmall","inputMedium","tokenFontSizeMedium","tokenInputLineHeightMedium","inputLarge","tokenFontSizeLarge","tokenInputLineHeightLarge","helperTextEditing","tokenLegacyTextShift","inputDisabled","tokenInputTextColorDisabled","reservedInput"],"mappings":"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","sourcesContent":["import { css, memoizeStyle } from '../../lib/theming/Emotion';\nimport { Theme } from '../../lib/theming/Theme';\n\nimport { labelSizeMixin, inputSizeMixin } from './TokenInput.mixins';\n\nexport const styles = memoizeStyle({\n  label(t: Theme) {\n    return css`\n      background-color: ${t.tokenInputBg};\n      box-shadow: ${t.tokenInputShadow};\n      border: ${t.tokenInputBorderWidth} solid ${t.tokenInputBorderColor};\n      border-top-color: ${t.tokenInputBorderTopColor};\n      transition: border-color ${t.transitionDuration} ${t.transitionTimingFunction};\n      box-sizing: border-box;\n      cursor: text;\n      display: flex;\n      flex-wrap: wrap;\n      align-items: start;\n      outline: none;\n      position: relative;\n      border-radius: ${t.tokenInputBorderRadius};\n    `;\n  },\n  labelSmall(t: Theme) {\n    return css`\n      ${labelSizeMixin(t.tokenInputPaddingYSmall, t.tokenInputPaddingXSmall)}\n    `;\n  },\n  labelMedium(t: Theme) {\n    return css`\n      ${labelSizeMixin(t.tokenInputPaddingYMedium, t.tokenInputPaddingXMedium)}\n    `;\n  },\n  labelLarge(t: Theme) {\n    return css`\n      ${labelSizeMixin(t.tokenInputPaddingYLarge, t.tokenInputPaddingXLarge)}\n    `;\n  },\n\n  hovering(t: Theme) {\n    return css`\n      &:hover {\n        border-color: ${t.tokenInputBorderColorHover};\n      }\n    `;\n  },\n\n  warning(t: Theme) {\n    return css`\n      border: ${t.tokenInputBorderWidth} solid ${t.tokenInputBorderColorWarning};\n      box-shadow: 0 0 0 ${t.tokenInputOutlineWidth} ${t.tokenInputBorderColorWarning};\n    `;\n  },\n\n  error(t: Theme) {\n    return css`\n      border: ${t.tokenInputBorderWidth} solid ${t.tokenInputBorderColorError};\n      box-shadow: 0 0 0 ${t.tokenInputOutlineWidth} ${t.tokenInputBorderColorError};\n    `;\n  },\n\n  labelFocused(t: Theme) {\n    return css`\n      border: ${t.tokenInputBorderWidth} solid ${t.tokenInputBorderColorFocus};\n      box-shadow: 0 0 0 ${t.tokenInputOutlineWidth} ${t.tokenInputBorderColorFocus};\n    `;\n  },\n\n  labelDisabled(t: Theme) {\n    return css`\n      background: ${t.tokenInputDisabledBg};\n      background-clip: ${t.inputDisabledBackgroundClip};\n      border-color: ${t.tokenInputDisabledBorderColor};\n      box-shadow: none;\n      cursor: default;\n    `;\n  },\n\n  input(t: Theme) {\n    return css`\n      min-width: 0;\n      max-width: 100%;\n      width: 50px;\n      background: transparent;\n      border: none;\n      box-shadow: none;\n      outline: none;\n      font-family: inherit;\n      overflow: hidden;\n      resize: none;\n      -webkit-appearance: none;\n      text-overflow: clip;\n      background-clip: padding-box;\n      transition: background-color 0.15s ease-in;\n      color: ${t.tokenInputTextColor};\n      box-sizing: border-box;\n      word-break: break-all;\n      padding: 0;\n      margin: 0;\n      &::-ms-clear {\n        display: none;\n      }\n      &::placeholder {\n        color: ${t.tokenInputPlaceholderColor};\n        -webkit-text-fill-color: ${t.tokenInputPlaceholderColor};\n      }\n      &:disabled::placeholder {\n        color: ${t.tokenInputPlaceholderColorDisabled};\n        -webkit-text-fill-color: ${t.tokenInputPlaceholderColorDisabled};\n      }\n      &:focus::placeholder {\n        color: ${t.tokenInputPlaceholderColorLight};\n        -webkit-text-fill-color: ${t.tokenInputPlaceholderColorLight};\n      }\n      /* fix firefox placeholder opacity */\n      &:-moz-placeholder {\n        opacity: 1;\n      }\n      &::-moz-placeholder {\n        opacity: 1;\n      }\n    `;\n  },\n  inputSmall(t: Theme) {\n    return css`\n      ${inputSizeMixin(t.tokenFontSizeSmall, t.tokenInputLineHeightSmall)};\n    `;\n  },\n  inputMedium(t: Theme) {\n    return css`\n      ${inputSizeMixin(t.tokenFontSizeMedium, t.tokenInputLineHeightMedium)};\n    `;\n  },\n  inputLarge(t: Theme) {\n    return css`\n      ${inputSizeMixin(t.tokenFontSizeLarge, t.tokenInputLineHeightLarge)};\n    `;\n  },\n\n  helperTextEditing(t: Theme) {\n    return css`\n      padding-bottom: ${t.tokenLegacyTextShift};\n    `;\n  },\n\n  inputDisabled(t: Theme) {\n    return css`\n      pointer-events: none;\n      /* fix text color in safari */\n      -webkit-text-fill-color: currentcolor;\n      color: ${t.tokenInputTextColorDisabled};\n    `;\n  },\n\n  reservedInput(t: Theme) {\n    return css`\n      min-width: 2px;\n      color: ${t.tokenInputTextColorDisabled};\n      word-break: break-all;\n    `;\n  },\n});\n"]}

package/components/TokenInput/TokenInput.styles.d.ts

@@ -1,15 +1,19 @@
 import { Theme } from '../../lib/theming/Theme';
 export declare const styles: {
     label(t: Theme): string;
+    labelSmall(t: Theme): string;
+    labelMedium(t: Theme): string;
+    labelLarge(t: Theme): string;
+    hovering(t: Theme): string;
     warning(t: Theme): string;
     error(t: Theme): string;
     labelFocused(t: Theme): string;
     labelDisabled(t: Theme): string;
     input(t: Theme): string;
-    helperContainer(t: Theme): string;
-    helperText(t: Theme): string;
+    inputSmall(t: Theme): string;
+    inputMedium(t: Theme): string;
+    inputLarge(t: Theme): string;
     helperTextEditing(t: Theme): string;
     inputDisabled(t: Theme): string;
-    inputEditing(t: Theme): string;
     reservedInput(t: Theme): string;
 };

package/components/TokenInput/TokenInputMenu/TokenInputMenu.js

@@ -45,12 +45,27 @@ export var TokenInputMenu = /*#__PURE__*/function (_React$Component) {
       _this2.theme = theme;
       return /*#__PURE__*/React.createElement(ThemeContext.Provider, {
         value: ThemeFactory.create({
-          popupMargin: _this2.getPopupMargin() + 'px'
+          popupMargin: _this2.getPopupMargin() + 'px',
+          popupBackground: _this2.theme.tokenInputMenuPopupBg
         }, theme)
       }, _this2.renderMain());
     });
   };
 
+  _proto.getPopupMarginSize = function getPopupMarginSize(t) {
+    switch (this.props.size) {
+      case 'large':
+        return t.tokenInputPopupMarginLarge;
+
+      case 'medium':
+        return t.tokenInputPopupMarginMedium;
+
+      case 'small':
+      default:
+        return t.tokenInputPopupMarginSmall;
+    }
+  };
+
   _proto.renderMain = function renderMain() {
     var _this$props = this.props,
         loading = _this$props.loading,
@@ -67,12 +82,13 @@ export var TokenInputMenu = /*#__PURE__*/function (_React$Component) {
         menuWidth = _this$props.menuWidth,
         menuAlign = _this$props.menuAlign;
     return /*#__PURE__*/React.createElement(Popup, {
+      id: this.props.popupMenuId,
       "data-tid": TokenInputDataTids.tokenInputMenu,
-      opened: opened,
+      opened: !!opened,
       positions: ['bottom left', 'top left'],
       anchorElement: anchorElement,
-      popupOffset: menuAlign === 'left' ? 0 : 5,
-      margin: menuAlign === 'left' ? 1 : undefined,
+      popupOffset: menuAlign === 'left' ? parseInt(this.theme.tokenInputPopupOffset) : 8 + parseInt(this.theme.tokenInputPopupOffset),
+      margin: menuAlign === 'left' ? 1 : parseInt(this.getPopupMarginSize(this.theme)),
       hasShadow: true,
       width: menuAlign === 'cursor' ? 'auto' : menuWidth,
       withoutMobile: true

package/components/TokenInput/TokenInputMenu/TokenInputMenu.js.map

@@ -1 +1 @@
-{"version":3,"sources":["TokenInputMenu.tsx"],"names":["React","ThemeFactory","Popup","ComboBoxMenu","ThemeContext","TokenInputDataTids","TokenInputMenu","menu","getMenuRef","getPopupMargin","paddingY","parseInt","theme","tokenInputPaddingY","outlineWidth","controlOutlineWidth","marginY","tokenMarginY","menuRef","node","render","create","popupMargin","renderMain","props","loading","maxMenuHeight","renderTotalCount","totalCount","opened","items","renderNotFound","renderItem","onValueChange","renderAddButton","anchorElement","menuWidth","menuAlign","tokenInputMenu","undefined","Component","__KONTUR_REACT_UI__"],"mappings":"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","sourcesContent":["import React from 'react';\n\nimport { ThemeFactory } from '../../lib/theming/ThemeFactory';\nimport { Popup } from '../../internal/Popup';\nimport { ComboBoxMenu, ComboBoxMenuProps } from '../../internal/CustomComboBox';\nimport { Menu } from '../../internal/Menu';\nimport { Theme } from '../../lib/theming/Theme';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\n\nimport { TokenInputDataTids, TokenInputMenuAlign, TokenInputProps } from './TokenInput';\n\nexport interface TokenInputMenuProps<T> extends ComboBoxMenuProps<T> {\n  anchorElement: HTMLElement;\n  menuWidth: TokenInputProps<string>['menuWidth'];\n  menuAlign: TokenInputMenuAlign;\n}\n\nexport class TokenInputMenu<T = string> extends React.Component<TokenInputMenuProps<T>> {\n  public static __KONTUR_REACT_UI__ = 'TokenInputMenu';\n\n  private theme!: Theme;\n\n  private menu: Menu | null = null;\n\n  public render() {\n    return (\n      <ThemeContext.Consumer>\n        {(theme) => {\n          this.theme = theme;\n          return (\n            <ThemeContext.Provider\n              value={ThemeFactory.create(\n                {\n                  popupMargin: this.getPopupMargin() + 'px',\n                },\n                theme,\n              )}\n            >\n              {this.renderMain()}\n            </ThemeContext.Provider>\n          );\n        }}\n      </ThemeContext.Consumer>\n    );\n  }\n\n  public getMenuRef = (): any | null => this.menu;\n\n  private renderMain() {\n    const {\n      loading,\n      maxMenuHeight,\n      renderTotalCount,\n      totalCount,\n      opened,\n      items,\n      renderNotFound,\n      renderItem,\n      onValueChange,\n      renderAddButton,\n      anchorElement,\n      menuWidth,\n      menuAlign,\n    } = this.props;\n\n    return (\n      <Popup\n        data-tid={TokenInputDataTids.tokenInputMenu}\n        opened={opened!}\n        positions={['bottom left', 'top left']}\n        anchorElement={anchorElement}\n        popupOffset={menuAlign === 'left' ? 0 : 5}\n        margin={menuAlign === 'left' ? 1 : undefined}\n        hasShadow\n        width={menuAlign === 'cursor' ? 'auto' : menuWidth}\n        withoutMobile\n      >\n        <ComboBoxMenu\n          items={items}\n          loading={loading}\n          maxMenuHeight={maxMenuHeight}\n          onValueChange={onValueChange}\n          opened={opened}\n          refMenu={this.menuRef}\n          renderTotalCount={renderTotalCount}\n          renderItem={renderItem}\n          renderNotFound={renderNotFound}\n          totalCount={totalCount}\n          renderAddButton={renderAddButton}\n        />\n      </Popup>\n    );\n  }\n\n  private getPopupMargin = (): number => {\n    const paddingY = parseInt(this.theme.tokenInputPaddingY, 10) || 0;\n    const outlineWidth = parseInt(this.theme.controlOutlineWidth, 10) || 0;\n    const marginY = parseInt(this.theme.tokenMarginY, 10) || 0;\n    return paddingY + outlineWidth + marginY;\n  };\n\n  private menuRef = (node: any) => (this.menu = node);\n}\n"]}
+{"version":3,"sources":["TokenInputMenu.tsx"],"names":["React","ThemeFactory","Popup","ComboBoxMenu","ThemeContext","TokenInputDataTids","TokenInputMenu","menu","getMenuRef","getPopupMargin","paddingY","parseInt","theme","tokenInputPaddingY","outlineWidth","controlOutlineWidth","marginY","tokenMarginY","menuRef","node","render","create","popupMargin","popupBackground","tokenInputMenuPopupBg","renderMain","getPopupMarginSize","t","props","size","tokenInputPopupMarginLarge","tokenInputPopupMarginMedium","tokenInputPopupMarginSmall","loading","maxMenuHeight","renderTotalCount","totalCount","opened","items","renderNotFound","renderItem","onValueChange","renderAddButton","anchorElement","menuWidth","menuAlign","popupMenuId","tokenInputMenu","tokenInputPopupOffset","Component","__KONTUR_REACT_UI__"],"mappings":"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","sourcesContent":["import React from 'react';\n\nimport { HTMLProps } from '../../typings/html';\nimport { ThemeFactory } from '../../lib/theming/ThemeFactory';\nimport { Popup, PopupProps } from '../../internal/Popup';\nimport { ComboBoxMenu, ComboBoxMenuProps } from '../../internal/CustomComboBox';\nimport { Menu } from '../../internal/Menu';\nimport { Theme } from '../../lib/theming/Theme';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { TokenSize } from '../Token';\n\nimport { TokenInputDataTids, TokenInputMenuAlign, TokenInputProps } from './TokenInput';\n\nexport interface TokenInputMenuProps<T> extends ComboBoxMenuProps<T> {\n  anchorElement: PopupProps['anchorElement'];\n  menuWidth: TokenInputProps<string>['menuWidth'];\n  menuAlign: TokenInputMenuAlign;\n  /**\n   * Позволяет задать `id` выпадающему меню.\n   *\n   * Это может пригодиться при реализации a11y. Например, для того, чтобы связать `aria-controls` с выпадающим меню.\n   */\n  popupMenuId?: HTMLProps['id'];\n  size?: TokenSize;\n}\n\nexport class TokenInputMenu<T = string> extends React.Component<TokenInputMenuProps<T>> {\n  public static __KONTUR_REACT_UI__ = 'TokenInputMenu';\n\n  private theme!: Theme;\n\n  private menu: Menu | null = null;\n\n  public render() {\n    return (\n      <ThemeContext.Consumer>\n        {(theme) => {\n          this.theme = theme;\n          return (\n            <ThemeContext.Provider\n              value={ThemeFactory.create(\n                {\n                  popupMargin: this.getPopupMargin() + 'px',\n                  popupBackground: this.theme.tokenInputMenuPopupBg,\n                },\n                theme,\n              )}\n            >\n              {this.renderMain()}\n            </ThemeContext.Provider>\n          );\n        }}\n      </ThemeContext.Consumer>\n    );\n  }\n\n  public getMenuRef = (): any | null => this.menu;\n\n  private getPopupMarginSize(t: Theme) {\n    switch (this.props.size) {\n      case 'large':\n        return t.tokenInputPopupMarginLarge;\n      case 'medium':\n        return t.tokenInputPopupMarginMedium;\n      case 'small':\n      default:\n        return t.tokenInputPopupMarginSmall;\n    }\n  }\n\n  private renderMain() {\n    const {\n      loading,\n      maxMenuHeight,\n      renderTotalCount,\n      totalCount,\n      opened,\n      items,\n      renderNotFound,\n      renderItem,\n      onValueChange,\n      renderAddButton,\n      anchorElement,\n      menuWidth,\n      menuAlign,\n    } = this.props;\n\n    return (\n      <Popup\n        id={this.props.popupMenuId}\n        data-tid={TokenInputDataTids.tokenInputMenu}\n        opened={!!opened}\n        positions={['bottom left', 'top left']}\n        anchorElement={anchorElement}\n        popupOffset={\n          menuAlign === 'left'\n            ? parseInt(this.theme.tokenInputPopupOffset)\n            : 8 + parseInt(this.theme.tokenInputPopupOffset)\n        }\n        margin={menuAlign === 'left' ? 1 : parseInt(this.getPopupMarginSize(this.theme))}\n        hasShadow\n        width={menuAlign === 'cursor' ? 'auto' : menuWidth}\n        withoutMobile\n      >\n        <ComboBoxMenu\n          items={items}\n          loading={loading}\n          maxMenuHeight={maxMenuHeight}\n          onValueChange={onValueChange}\n          opened={opened}\n          refMenu={this.menuRef}\n          renderTotalCount={renderTotalCount}\n          renderItem={renderItem}\n          renderNotFound={renderNotFound}\n          totalCount={totalCount}\n          renderAddButton={renderAddButton}\n        />\n      </Popup>\n    );\n  }\n\n  private getPopupMargin = (): number => {\n    const paddingY = parseInt(this.theme.tokenInputPaddingY, 10) || 0;\n    const outlineWidth = parseInt(this.theme.controlOutlineWidth, 10) || 0;\n    const marginY = parseInt(this.theme.tokenMarginY, 10) || 0;\n\n    return paddingY + outlineWidth + marginY;\n  };\n\n  private menuRef = (node: any) => (this.menu = node);\n}\n"]}

package/components/TokenInput/TokenInputMenu.d.ts

@@ -1,10 +1,20 @@
 import React from 'react';
+import { HTMLProps } from '../../typings/html';
+import { PopupProps } from '../../internal/Popup';
 import { ComboBoxMenuProps } from '../../internal/CustomComboBox';
+import { TokenSize } from '../Token';
 import { TokenInputMenuAlign, TokenInputProps } from './TokenInput';
 export interface TokenInputMenuProps<T> extends ComboBoxMenuProps<T> {
-    anchorElement: HTMLElement;
+    anchorElement: PopupProps['anchorElement'];
     menuWidth: TokenInputProps<string>['menuWidth'];
     menuAlign: TokenInputMenuAlign;
+    /**
+     * Позволяет задать `id` выпадающему меню.
+     *
+     * Это может пригодиться при реализации a11y. Например, для того, чтобы связать `aria-controls` с выпадающим меню.
+     */
+    popupMenuId?: HTMLProps['id'];
+    size?: TokenSize;
 }
 export declare class TokenInputMenu<T = string> extends React.Component<TokenInputMenuProps<T>> {
     static __KONTUR_REACT_UI__: string;
@@ -12,6 +22,7 @@ export declare class TokenInputMenu<T = string> extends React.Component<TokenInp
     private menu;
     render(): JSX.Element;
     getMenuRef: () => any | null;
+    private getPopupMarginSize;
     private renderMain;
     private getPopupMargin;
     private menuRef;