@skbkontur/react-ui 0.0.0-0b8a8f7a39 → 0.0.0-0fe669bb2d

package/components/TokenInput/TokenInput.md

@@ -1,79 +1,105 @@
-```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));
-
-const tokenColors = {
-  First: {
-    idle: 'grayIdle',
-    active: 'grayActive',
-  },
-  Second: {
-    idle: 'blueIdle',
-    active: 'blueActive',
-  },
-  Third: {
-    idle: 'greenIdle',
-    active: 'greenActive',
-  },
-  Fourth: {
-    idle: 'yellowIdle',
-    active: 'yellowActive',
-  },
-  Fifth: {
-    idle: 'redIdle',
-    active: 'redActive',
-  },
-  Sixth: {
-    idle: 'white',
-    active: 'black',
-  },
-  default: {
-    idle: 'defaultIdle',
-    active: 'defaultActive',
-  },
-};
-
-<div style={{ width: '300px' }}>
-  <TokenInput
-    type={TokenInputType.Combined}
-    getItems={getItems}
-    selectedItems={selectedItems}
-    onValueChange={setSelectedItems}
-    renderToken={(item, tokenProps) => (
-      <Token key={item.toString()} colors={tokenColors[item] || tokenColors.default} {...tokenProps}>
-        {item}
-      </Token>
-    )}
-  />
-</div>;
-```
-
-#### Локали по умолчанию
-
-```typescript static
-interface TokenInputLocale {
-  addButtonComment?: string;
-  addButtonTitle?: string;
-}
-
-const ru_RU = {
-  addButtonComment: 'Нажмите запятую или пробел',
-  addButtonTitle: 'Добавить',
-};
-
-const en_GB = {
-  addButtonComment: 'Type comma or space',
-  addButtonTitle: 'Add',
-};
-```
+```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));
+
+const tokenColors = {
+  First: {
+    idle: 'grayIdle',
+    active: 'grayActive',
+  },
+  Second: {
+    idle: 'blueIdle',
+    active: 'blueActive',
+  },
+  Third: {
+    idle: 'greenIdle',
+    active: 'greenActive',
+  },
+  Fourth: {
+    idle: 'yellowIdle',
+    active: 'yellowActive',
+  },
+  Fifth: {
+    idle: 'redIdle',
+    active: 'redActive',
+  },
+  Sixth: {
+    idle: 'white',
+    active: 'black',
+  },
+  default: {
+    idle: 'defaultIdle',
+    active: 'defaultActive',
+  },
+};
+
+<div style={{ width: '300px' }}>
+  <TokenInput
+    type={TokenInputType.Combined}
+    getItems={getItems}
+    selectedItems={selectedItems}
+    onValueChange={setSelectedItems}
+    renderToken={(item, tokenProps) => (
+      <Token key={item.toString()} colors={tokenColors[item] || tokenColors.default} {...tokenProps}>
+        {item}
+      </Token>
+    )}
+  />
+</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>
+  )}
+/>
+```
+
+#### Локали по умолчанию
+
+```typescript static
+interface TokenInputLocale {
+  addButtonComment?: string;
+  addButtonTitle?: string;
+}
+
+const ru_RU = {
+  addButtonComment: 'Нажмите запятую или пробел',
+  addButtonTitle: 'Добавить',
+};
+
+const en_GB = {
+  addButtonComment: 'Type comma or space',
+  addButtonTitle: 'Add',
+};
+```

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

@@ -2,49 +2,50 @@ import _taggedTemplateLiteralLoose from "@babel/runtime/helpers/esm/taggedTempla
 
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14;
 
-import { css, cssName, memoizeStyle } from "../../../lib/theming/Emotion";
-var styles = {
+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);
+  }
+};
+export var styles = memoizeStyle({
   label: function label(t) {
-    return css(_templateObject || (_templateObject = _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    "])), t.tokenInputBg, t.tokenInputShadow, t.tokenInputBorderWidth, t.tokenInputBorderColor, t.tokenInputBorderTopColor, t.tokenInputPaddingY, t.tokenInputPaddingX);
+    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);
   },
   warning: function warning(t) {
-    return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n      border: ", " solid ", " !important;\n      box-shadow: 0 0 0 ", " ", " !important;\n    "])), t.tokenInputBorderWidth, t.tokenInputBorderColorWarning, t.tokenInputOutlineWidth, t.tokenInputBorderColorWarning);
+    return css(_templateObject4 || (_templateObject4 = _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(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n      border: ", " solid ", " !important;\n      box-shadow: 0 0 0 ", " ", " !important;\n    "])), t.tokenInputBorderWidth, t.tokenInputBorderColorError, t.tokenInputOutlineWidth, t.tokenInputBorderColorError);
+    return css(_templateObject5 || (_templateObject5 = _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(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n      border: ", " solid ", " !important;\n      box-shadow: 0 0 0 ", " ", " !important;\n    "])), t.tokenInputBorderWidth, t.tokenInputBorderColorFocus, t.tokenInputOutlineWidth, t.tokenInputBorderColorFocus);
+    return css(_templateObject6 || (_templateObject6 = _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(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\n      background: ", " !important;\n      border-color: ", " !important;\n      box-shadow: none !important;\n    "])), t.tokenInputDisabledBg, t.tokenInputDisabledBorderColor);
+    return css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteralLoose(["\n      background: ", ";\n      border-color: ", ";\n      box-shadow: none;\n      cursor: default;\n    "])), t.tokenInputDisabledBg, t.tokenInputDisabledBorderColor);
   },
   input: function input(t) {
-    return css(_templateObject6 || (_templateObject6 = _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, styles.inputAndHelperCommonStyles(t), t.tokenInputPlaceholderColor, t.tokenInputPlaceholderColor, t.tokenInputPlaceholderColorDisabled, t.tokenInputPlaceholderColorDisabled, t.tokenInputPlaceholderColorLight, t.tokenInputPlaceholderColorLight);
+    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);
   },
   helperContainer: function helperContainer(t) {
-    return css(_templateObject7 || (_templateObject7 = _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);
+    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);
   },
   helperText: function helperText(t) {
-    return css(_templateObject8 || (_templateObject8 = _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    "])), styles.inputAndHelperCommonStyles(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));
   },
   helperTextEditing: function helperTextEditing(t) {
-    return css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteralLoose(["\n      ", ";\n\n      font-size: ", ";\n      padding-bottom: ", ";\n    "])), styles.inputAndHelperCommonEditingStyles(t), t.tokenFontSize, t.tokenLegacyTextShift);
+    return css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteralLoose(["\n      ", ";\n\n      font-size: ", ";\n      padding-bottom: ", ";\n    "])), mixins.inputAndHelperCommonEditingStyles(t), t.tokenFontSize, t.tokenLegacyTextShift);
   },
   inputDisabled: function inputDisabled(t) {
-    return css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteralLoose(["\n      pointer-events: none;\n      /* fix text color in safari */\n      -webkit-text-fill-color: currentcolor;\n      color: ", ";\n    "])), t.tokenInputTextColorDisabled);
-  },
-  inputAndHelperCommonStyles: function inputAndHelperCommonStyles(t) {
-    return css(_templateObject11 || (_templateObject11 = _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(_templateObject12 || (_templateObject12 = _taggedTemplateLiteralLoose(["\n      margin: ", " ", ";\n      padding: 0 ", " 0 ", ";\n      line-height: ", ";\n    "])), t.tokenMarginY, t.tokenMarginX, t.tokenInputInputPaddingRight, t.tokenPaddingX, t.tokenLineHeight);
+    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        ", ";\n      }\n    "])), cssName(styles.input(t)), styles.inputAndHelperCommonEditingStyles(t));
+    return css(_templateObject13 || (_templateObject13 = _taggedTemplateLiteralLoose(["\n      ", ";\n    "])), mixins.inputAndHelperCommonEditingStyles(t));
   },
   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);
   }
-};
-export var jsStyles = memoizeStyle(styles);
+});

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

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

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

@@ -1,5 +1,5 @@
 import { Theme } from '../../lib/theming/Theme';
-export declare const jsStyles: {
+export declare const styles: {
     label(t: Theme): string;
     warning(t: Theme): string;
     error(t: Theme): string;
@@ -10,8 +10,6 @@ export declare const jsStyles: {
     helperText(t: Theme): string;
     helperTextEditing(t: Theme): string;
     inputDisabled(t: Theme): string;
-    inputAndHelperCommonStyles(t: Theme): string;
-    inputAndHelperCommonEditingStyles(t: Theme): string;
     inputEditing(t: Theme): string;
     reservedInput(t: Theme): string;
 };

package/components/TokenInput/TokenInputMenu/TokenInputMenu.js

@@ -4,7 +4,7 @@ import { ThemeFactory } from "../../../lib/theming/ThemeFactory";
 import { Popup } from "../../../internal/Popup";
 import { ComboBoxMenu } from "../../../internal/CustomComboBox";
 import { ThemeContext } from "../../../lib/theming/ThemeContext";
-import { is8pxTheme } from "../../../lib/theming/ThemeHelpers";
+import { TokenInputDataTids } from "../TokenInput";
 export var TokenInputMenu = /*#__PURE__*/function (_React$Component) {
   _inheritsLoose(TokenInputMenu, _React$Component);
 
@@ -16,7 +16,6 @@ export var TokenInputMenu = /*#__PURE__*/function (_React$Component) {
     }
 
     _this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;
-    _this.theme = void 0;
     _this.menu = null;
 
     _this.getMenuRef = function () {
@@ -63,13 +62,20 @@ export var TokenInputMenu = /*#__PURE__*/function (_React$Component) {
         renderNotFound = _this$props.renderNotFound,
         renderItem = _this$props.renderItem,
         onValueChange = _this$props.onValueChange,
-        renderAddButton = _this$props.renderAddButton;
+        renderAddButton = _this$props.renderAddButton,
+        anchorElement = _this$props.anchorElement,
+        menuWidth = _this$props.menuWidth,
+        menuAlign = _this$props.menuAlign;
     return /*#__PURE__*/React.createElement(Popup, {
-      opened: opened,
-      positions: ['bottom left'],
-      anchorElement: this.props.anchorElement,
-      popupOffset: 5,
-      hasShadow: is8pxTheme(this.theme)
+      "data-tid": TokenInputDataTids.tokenInputMenu,
+      opened: !!opened,
+      positions: ['bottom left', 'top left'],
+      anchorElement: anchorElement,
+      popupOffset: menuAlign === 'left' ? 0 : 5,
+      margin: menuAlign === 'left' ? 1 : undefined,
+      hasShadow: true,
+      width: menuAlign === 'cursor' ? 'auto' : menuWidth,
+      withoutMobile: true
     }, /*#__PURE__*/React.createElement(ComboBoxMenu, {
       items: items,
       loading: loading,

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

@@ -1 +1 @@
-{"version":3,"sources":["TokenInputMenu.tsx"],"names":["React","ThemeFactory","Popup","ComboBoxMenu","ThemeContext","is8pxTheme","TokenInputMenu","theme","menu","getMenuRef","getPopupMargin","paddingY","parseInt","tokenInputPaddingY","outlineWidth","controlOutlineWidth","marginY","tokenMarginY","menuRef","node","render","create","popupMargin","renderMain","props","loading","maxMenuHeight","renderTotalCount","totalCount","opened","items","renderNotFound","renderItem","onValueChange","renderAddButton","anchorElement","Component","__KONTUR_REACT_UI__"],"mappings":"sEAAA,OAAOA,KAAP,MAAkB,OAAlB;;AAEA,SAASC,YAAT,QAA6B,gCAA7B;AACA,SAASC,KAAT,QAAsB,sBAAtB;AACA,SAASC,YAAT,QAAgD,+BAAhD;;;AAGA,SAASC,YAAT,QAA6B,gCAA7B;AACA,SAASC,UAAT,QAA2B,gCAA3B;;;;;;AAMA,WAAaC,cAAb;;;AAGUC,IAAAA,KAHV;;AAKUC,IAAAA,IALV,GAK8B,IAL9B;;;;;;;;;;;;;;;;;;;;;;;;AA6BSC,IAAAA,UA7BT,GA6BsB,oBAAkB,MAAKD,IAAvB,EA7BtB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAsEUE,IAAAA,cAtEV,GAsE2B,YAAc;AACrC,UAAMC,QAAQ,GAAGC,QAAQ,CAAC,MAAKL,KAAL,CAAWM,kBAAZ,EAAgC,EAAhC,CAAR,IAA+C,CAAhE;AACA,UAAMC,YAAY,GAAGF,QAAQ,CAAC,MAAKL,KAAL,CAAWQ,mBAAZ,EAAiC,EAAjC,CAAR,IAAgD,CAArE;AACA,UAAMC,OAAO,GAAGJ,QAAQ,CAAC,MAAKL,KAAL,CAAWU,YAAZ,EAA0B,EAA1B,CAAR,IAAyC,CAAzD;AACA,aAAON,QAAQ,GAAGG,YAAX,GAA0BE,OAAjC;AACD,KA3EH;;AA6EUE,IAAAA,OA7EV,GA6EoB,UAACC,IAAD,UAAgB,MAAKX,IAAL,GAAYW,IAA5B,EA7EpB,4DAOSC,MAPT,GAOE,kBAAgB,mBACd,oBACE,oBAAC,YAAD,CAAc,QAAd,QACG,UAAAb,KAAK,EAAI,CACR,MAAI,CAACA,KAAL,GAAaA,KAAb,CACA,oBACE,oBAAC,YAAD,CAAc,QAAd,IACE,KAAK,EAAEN,YAAY,CAACoB,MAAb,CACL,EACEC,WAAW,EAAE,MAAI,CAACZ,cAAL,KAAwB,IADvC,EADK,EAILH,KAJK,CADT,IAQG,MAAI,CAACgB,UAAL,EARH,CADF,CAYD,CAfH,CADF,CAmBD,CA3BH,QA+BUA,UA/BV,GA+BE,sBAAqB,mBAYf,KAAKC,KAZU,CAEjBC,OAFiB,eAEjBA,OAFiB,CAGjBC,aAHiB,eAGjBA,aAHiB,CAIjBC,gBAJiB,eAIjBA,gBAJiB,CAKjBC,UALiB,eAKjBA,UALiB,CAMjBC,MANiB,eAMjBA,MANiB,CAOjBC,KAPiB,eAOjBA,KAPiB,CAQjBC,cARiB,eAQjBA,cARiB,CASjBC,UATiB,eASjBA,UATiB,CAUjBC,aAViB,eAUjBA,aAViB,CAWjBC,eAXiB,eAWjBA,eAXiB,CAcnB,oBACE,oBAAC,KAAD,IACE,MAAM,EAAEL,MADV,EAEE,SAAS,EAAE,CAAC,aAAD,CAFb,EAGE,aAAa,EAAE,KAAKL,KAAL,CAAWW,aAH5B,EAIE,WAAW,EAAE,CAJf,EAKE,SAAS,EAAE9B,UAAU,CAAC,KAAKE,KAAN,CALvB,iBAOE,oBAAC,YAAD,IACE,KAAK,EAAEuB,KADT,EAEE,OAAO,EAAEL,OAFX,EAGE,aAAa,EAAEC,aAHjB,EAIE,aAAa,EAAEO,aAJjB,EAKE,MAAM,EAAEJ,MALV,EAME,OAAO,EAAE,KAAKX,OANhB,EAOE,gBAAgB,EAAES,gBAPpB,EAQE,UAAU,EAAEK,UARd,EASE,cAAc,EAAED,cATlB,EAUE,UAAU,EAAEH,UAVd,EAWE,eAAe,EAAEM,eAXnB,GAPF,CADF,CAuBD,CApEH,yBAAgDlC,KAAK,CAACoC,SAAtD,EAAa9B,c,CACG+B,mB,GAAsB,gB","sourcesContent":["import React from 'react';\r\n\r\nimport { ThemeFactory } from '../../lib/theming/ThemeFactory';\r\nimport { Popup } from '../../internal/Popup';\r\nimport { ComboBoxMenu, ComboBoxMenuProps } from '../../internal/CustomComboBox';\r\nimport { Menu } from '../../internal/Menu';\r\nimport { Theme } from '../../lib/theming/Theme';\r\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\r\nimport { is8pxTheme } from '../../lib/theming/ThemeHelpers';\r\n\r\nexport interface TokenInputMenuProps<T> extends ComboBoxMenuProps<T> {\r\n  anchorElement: HTMLElement;\r\n}\r\n\r\nexport class TokenInputMenu<T = string> extends React.Component<TokenInputMenuProps<T>> {\r\n  public static __KONTUR_REACT_UI__ = 'TokenInputMenu';\r\n\r\n  private theme!: Theme;\r\n\r\n  private menu: Menu | null = null;\r\n\r\n  public render() {\r\n    return (\r\n      <ThemeContext.Consumer>\r\n        {theme => {\r\n          this.theme = theme;\r\n          return (\r\n            <ThemeContext.Provider\r\n              value={ThemeFactory.create(\r\n                {\r\n                  popupMargin: this.getPopupMargin() + 'px',\r\n                },\r\n                theme,\r\n              )}\r\n            >\r\n              {this.renderMain()}\r\n            </ThemeContext.Provider>\r\n          );\r\n        }}\r\n      </ThemeContext.Consumer>\r\n    );\r\n  }\r\n\r\n  public getMenuRef = (): any | null => this.menu;\r\n\r\n  private renderMain() {\r\n    const {\r\n      loading,\r\n      maxMenuHeight,\r\n      renderTotalCount,\r\n      totalCount,\r\n      opened,\r\n      items,\r\n      renderNotFound,\r\n      renderItem,\r\n      onValueChange,\r\n      renderAddButton,\r\n    } = this.props;\r\n\r\n    return (\r\n      <Popup\r\n        opened={opened!}\r\n        positions={['bottom left']}\r\n        anchorElement={this.props.anchorElement}\r\n        popupOffset={5}\r\n        hasShadow={is8pxTheme(this.theme)}\r\n      >\r\n        <ComboBoxMenu\r\n          items={items}\r\n          loading={loading}\r\n          maxMenuHeight={maxMenuHeight}\r\n          onValueChange={onValueChange}\r\n          opened={opened}\r\n          refMenu={this.menuRef}\r\n          renderTotalCount={renderTotalCount}\r\n          renderItem={renderItem}\r\n          renderNotFound={renderNotFound}\r\n          totalCount={totalCount}\r\n          renderAddButton={renderAddButton}\r\n        />\r\n      </Popup>\r\n    );\r\n  }\r\n\r\n  private getPopupMargin = (): number => {\r\n    const paddingY = parseInt(this.theme.tokenInputPaddingY, 10) || 0;\r\n    const outlineWidth = parseInt(this.theme.controlOutlineWidth, 10) || 0;\r\n    const marginY = parseInt(this.theme.tokenMarginY, 10) || 0;\r\n    return paddingY + outlineWidth + marginY;\r\n  };\r\n\r\n  private menuRef = (node: any) => (this.menu = node);\r\n}\r\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","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, 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';\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\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"]}

package/components/TokenInput/TokenInputMenu.d.ts

@@ -1,7 +1,11 @@
 import React from 'react';
+import { PopupProps } from '../../internal/Popup';
 import { ComboBoxMenuProps } from '../../internal/CustomComboBox';
+import { TokenInputMenuAlign, TokenInputProps } from './TokenInput';
 export interface TokenInputMenuProps<T> extends ComboBoxMenuProps<T> {
-    anchorElement: HTMLElement;
+    anchorElement: PopupProps['anchorElement'];
+    menuWidth: TokenInputProps<string>['menuWidth'];
+    menuAlign: TokenInputMenuAlign;
 }
 export declare class TokenInputMenu<T = string> extends React.Component<TokenInputMenuProps<T>> {
     static __KONTUR_REACT_UI__: string;

package/components/TokenInput/TokenInputReducer/TokenInputReducer.js.map

@@ -1 +1 @@
-{"version":3,"sources":["TokenInputReducer.ts"],"names":["DefaultState","TokenActions","SET_INPUT_VALUE_WIDTH","SET_INPUT_VALUE_HEIGHT","UPDATE_QUERY","SET_FOCUS_IN","SET_PREVENT_BLUR","BLUR","SET_AUTOCOMPLETE_ITEMS","SET_ACTIVE_TOKENS","REMOVE_ALL_ACTIVE_TOKENS","SET_LOADING","CLEAR_INPUT","RESET","SET_EDITING_TOKEN_INDEX","REMOVE_EDITING_TOKEN_INDEX","SET_TEMPORARY_QUERY","REMOVE_TEMPORARY_QUERY","tokenInputReducer","state","action","payload","type","inputValueWidth","inputValueHeight","inputValue","inFocus","preventBlur","autocompleteItems","activeTokens","undefined","loading","editingTokenIndex","reservedInputValue"],"mappings":"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","sourcesContent":["import { TokenInputState, DefaultState } from './TokenInput';\r\n\r\nexport interface TokenInputAction {\r\n  type: TokenInputActionType;\r\n  payload?: any;\r\n}\r\n\r\nexport const TokenActions = {\r\n  SET_INPUT_VALUE_WIDTH: 'SET_INPUT_VALUE_WIDTH',\r\n  SET_INPUT_VALUE_HEIGHT: 'SET_INPUT_VALUE_HEIGHT',\r\n  UPDATE_QUERY: 'UPDATE_QUERY',\r\n  SET_FOCUS_IN: 'SET_FOCUS_IN',\r\n  SET_PREVENT_BLUR: 'SET_PREVENT_BLUR',\r\n  BLUR: 'BLUR',\r\n  SET_AUTOCOMPLETE_ITEMS: 'SET_AUTOCOMPLETE_ITEMS',\r\n  SET_ACTIVE_TOKENS: 'SET_ACTIVE_TOKENS',\r\n  REMOVE_ALL_ACTIVE_TOKENS: 'REMOVE_ALL_ACTIVE_TOKENS',\r\n  SET_LOADING: 'SET_LOADING',\r\n  CLEAR_INPUT: 'CLEAR_INPUT',\r\n  RESET: 'RESET',\r\n  SET_EDITING_TOKEN_INDEX: 'SET_EDITING_TOKEN_INDEX',\r\n  REMOVE_EDITING_TOKEN_INDEX: 'REMOVE_EDITING_TOKEN_INDEX',\r\n  SET_TEMPORARY_QUERY: 'SET_TEMPORARY_QUERY',\r\n  REMOVE_TEMPORARY_QUERY: 'REMOVE_TEMPORARY_QUERY',\r\n};\r\n\r\nexport type TokenInputActionType = keyof typeof TokenActions;\r\n\r\nexport function tokenInputReducer<T = string>(\r\n  state: TokenInputState<T>,\r\n  action: TokenInputAction,\r\n): Pick<TokenInputState<T>, never> {\r\n  const payload = action.payload;\r\n  switch (action.type) {\r\n    case TokenActions.SET_INPUT_VALUE_WIDTH: {\r\n      return { inputValueWidth: payload };\r\n    }\r\n    case TokenActions.SET_INPUT_VALUE_HEIGHT: {\r\n      return { inputValueHeight: payload };\r\n    }\r\n    case TokenActions.UPDATE_QUERY: {\r\n      return { inputValue: payload };\r\n    }\r\n    case TokenActions.SET_FOCUS_IN: {\r\n      return { inFocus: true };\r\n    }\r\n    case TokenActions.SET_PREVENT_BLUR: {\r\n      return { preventBlur: payload };\r\n    }\r\n    case TokenActions.SET_AUTOCOMPLETE_ITEMS: {\r\n      return { autocompleteItems: payload };\r\n    }\r\n    case TokenActions.SET_ACTIVE_TOKENS: {\r\n      return { activeTokens: payload };\r\n    }\r\n    case TokenActions.BLUR: {\r\n      return {\r\n        inFocus: false,\r\n        preventBlur: false,\r\n        autocompleteItems: undefined,\r\n        activeTokens: [],\r\n      };\r\n    }\r\n    case TokenActions.REMOVE_ALL_ACTIVE_TOKENS: {\r\n      return { activeTokens: [] };\r\n    }\r\n    case TokenActions.CLEAR_INPUT: {\r\n      return { inputValue: '', autocompleteItems: undefined };\r\n    }\r\n    case TokenActions.SET_LOADING: {\r\n      return {\r\n        loading: payload,\r\n      };\r\n    }\r\n    case TokenActions.RESET: {\r\n      return DefaultState;\r\n    }\r\n    case TokenActions.SET_EDITING_TOKEN_INDEX: {\r\n      return { editingTokenIndex: payload };\r\n    }\r\n    case TokenActions.REMOVE_EDITING_TOKEN_INDEX: {\r\n      return { editingTokenIndex: -1 };\r\n    }\r\n    case TokenActions.SET_TEMPORARY_QUERY: {\r\n      return { reservedInputValue: payload };\r\n    }\r\n    case TokenActions.REMOVE_TEMPORARY_QUERY: {\r\n      return { reservedInputValue: undefined };\r\n    }\r\n    default:\r\n      return state;\r\n  }\r\n}\r\n"]}
+{"version":3,"sources":["TokenInputReducer.ts"],"names":["DefaultState","TokenActions","SET_INPUT_VALUE_WIDTH","SET_INPUT_VALUE_HEIGHT","UPDATE_QUERY","SET_FOCUS_IN","SET_PREVENT_BLUR","BLUR","SET_AUTOCOMPLETE_ITEMS","SET_ACTIVE_TOKENS","REMOVE_ALL_ACTIVE_TOKENS","SET_LOADING","CLEAR_INPUT","RESET","SET_EDITING_TOKEN_INDEX","REMOVE_EDITING_TOKEN_INDEX","SET_TEMPORARY_QUERY","REMOVE_TEMPORARY_QUERY","tokenInputReducer","state","action","payload","type","inputValueWidth","inputValueHeight","inputValue","inFocus","preventBlur","autocompleteItems","activeTokens","undefined","loading","editingTokenIndex","reservedInputValue"],"mappings":"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","sourcesContent":["import { TokenInputState, DefaultState } from './TokenInput';\n\nexport interface TokenInputAction {\n  type: TokenInputActionType;\n  payload?: any;\n}\n\nexport const TokenActions = {\n  SET_INPUT_VALUE_WIDTH: 'SET_INPUT_VALUE_WIDTH',\n  SET_INPUT_VALUE_HEIGHT: 'SET_INPUT_VALUE_HEIGHT',\n  UPDATE_QUERY: 'UPDATE_QUERY',\n  SET_FOCUS_IN: 'SET_FOCUS_IN',\n  SET_PREVENT_BLUR: 'SET_PREVENT_BLUR',\n  BLUR: 'BLUR',\n  SET_AUTOCOMPLETE_ITEMS: 'SET_AUTOCOMPLETE_ITEMS',\n  SET_ACTIVE_TOKENS: 'SET_ACTIVE_TOKENS',\n  REMOVE_ALL_ACTIVE_TOKENS: 'REMOVE_ALL_ACTIVE_TOKENS',\n  SET_LOADING: 'SET_LOADING',\n  CLEAR_INPUT: 'CLEAR_INPUT',\n  RESET: 'RESET',\n  SET_EDITING_TOKEN_INDEX: 'SET_EDITING_TOKEN_INDEX',\n  REMOVE_EDITING_TOKEN_INDEX: 'REMOVE_EDITING_TOKEN_INDEX',\n  SET_TEMPORARY_QUERY: 'SET_TEMPORARY_QUERY',\n  REMOVE_TEMPORARY_QUERY: 'REMOVE_TEMPORARY_QUERY',\n};\n\nexport type TokenInputActionType = keyof typeof TokenActions;\n\nexport function tokenInputReducer<T = string>(\n  state: TokenInputState<T>,\n  action: TokenInputAction,\n): Pick<TokenInputState<T>, never> {\n  const payload = action.payload;\n  switch (action.type) {\n    case TokenActions.SET_INPUT_VALUE_WIDTH: {\n      return { inputValueWidth: payload };\n    }\n    case TokenActions.SET_INPUT_VALUE_HEIGHT: {\n      return { inputValueHeight: payload };\n    }\n    case TokenActions.UPDATE_QUERY: {\n      return { inputValue: payload };\n    }\n    case TokenActions.SET_FOCUS_IN: {\n      return { inFocus: true };\n    }\n    case TokenActions.SET_PREVENT_BLUR: {\n      return { preventBlur: payload };\n    }\n    case TokenActions.SET_AUTOCOMPLETE_ITEMS: {\n      return { autocompleteItems: payload };\n    }\n    case TokenActions.SET_ACTIVE_TOKENS: {\n      return { activeTokens: payload };\n    }\n    case TokenActions.BLUR: {\n      return {\n        inFocus: false,\n        preventBlur: false,\n        autocompleteItems: undefined,\n        activeTokens: [],\n      };\n    }\n    case TokenActions.REMOVE_ALL_ACTIVE_TOKENS: {\n      return { activeTokens: [] };\n    }\n    case TokenActions.CLEAR_INPUT: {\n      return { inputValue: '', autocompleteItems: undefined };\n    }\n    case TokenActions.SET_LOADING: {\n      return {\n        loading: payload,\n      };\n    }\n    case TokenActions.RESET: {\n      return DefaultState;\n    }\n    case TokenActions.SET_EDITING_TOKEN_INDEX: {\n      return { editingTokenIndex: payload };\n    }\n    case TokenActions.REMOVE_EDITING_TOKEN_INDEX: {\n      return { editingTokenIndex: -1 };\n    }\n    case TokenActions.SET_TEMPORARY_QUERY: {\n      return { reservedInputValue: payload };\n    }\n    case TokenActions.REMOVE_TEMPORARY_QUERY: {\n      return { reservedInputValue: undefined };\n    }\n    default:\n      return state;\n  }\n}\n"]}

package/components/TokenInput/index/index.js.map

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

package/components/TokenInput/locale/index/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["index.ts"],"names":["LocaleHelper","componentsLocales","en_GB","ru_RU","TokenInputLocaleHelper"],"mappings":"AAAA,SAASA,YAAT,QAA6B,kCAA7B;;AAEA,SAAUC,iBAAiB,IAAIC,KAA/B,QAA4C,cAA5C;AACA,SAAUD,iBAAiB,IAAIE,KAA/B,QAA4C,cAA5C;;;AAGA,cAAc,SAAd;;AAEA,OAAO,IAAMC,sBAAsB,GAAG,IAAIJ,YAAJ,CAAmC;AACvEG,EAAAA,KAAK,EAALA,KADuE;AAEvED,EAAAA,KAAK,EAALA,KAFuE,EAAnC,CAA/B","sourcesContent":["import { LocaleHelper } from '../../../lib/locale/LocaleHelper';\r\n\r\nimport  { componentsLocales as en_GB } from './locales/en';\r\nimport  { componentsLocales as ru_RU } from './locales/ru';\r\nimport { TokenInputLocale } from './types';\r\n\r\nexport * from './types';\r\n\r\nexport const TokenInputLocaleHelper = new LocaleHelper<TokenInputLocale>({\r\n  ru_RU,\r\n  en_GB,\r\n});\r\n"]}
+{"version":3,"sources":["index.ts"],"names":["LocaleHelper","componentsLocales","en_GB","ru_RU","TokenInputLocaleHelper"],"mappings":"AAAA,SAASA,YAAT,QAA6B,kCAA7B;;AAEA,SAASC,iBAAiB,IAAIC,KAA9B,QAA2C,cAA3C;AACA,SAASD,iBAAiB,IAAIE,KAA9B,QAA2C,cAA3C;;;AAGA,cAAc,SAAd;;AAEA,OAAO,IAAMC,sBAAsB,GAAG,IAAIJ,YAAJ,CAAmC;AACvEG,EAAAA,KAAK,EAALA,KADuE;AAEvED,EAAAA,KAAK,EAALA,KAFuE,EAAnC,CAA/B","sourcesContent":["import { LocaleHelper } from '../../../lib/locale/LocaleHelper';\n\nimport { componentsLocales as en_GB } from './locales/en';\nimport { componentsLocales as ru_RU } from './locales/ru';\nimport { TokenInputLocale } from './types';\n\nexport * from './types';\n\nexport const TokenInputLocaleHelper = new LocaleHelper<TokenInputLocale>({\n  ru_RU,\n  en_GB,\n});\n"]}

package/components/TokenInput/locale/locales/en/en.js.map

@@ -1 +1 @@
-{"version":3,"sources":["en.ts"],"names":["componentsLocales","addButtonComment","addButtonTitle"],"mappings":";;AAEA,OAAO,IAAMA,iBAAmC,GAAG;AACjDC,EAAAA,gBAAgB,EAAE,qBAD+B;AAEjDC,EAAAA,cAAc,EAAE,KAFiC,EAA5C","sourcesContent":["import { TokenInputLocale } from '../types';\r\n\r\nexport const componentsLocales: TokenInputLocale = {\r\n  addButtonComment: 'Type comma or space',\r\n  addButtonTitle: 'Add',\r\n};\r\n"]}
+{"version":3,"sources":["en.ts"],"names":["componentsLocales","addButtonComment","addButtonTitle"],"mappings":";;AAEA,OAAO,IAAMA,iBAAmC,GAAG;AACjDC,EAAAA,gBAAgB,EAAE,qBAD+B;AAEjDC,EAAAA,cAAc,EAAE,KAFiC,EAA5C","sourcesContent":["import { TokenInputLocale } from '../types';\n\nexport const componentsLocales: TokenInputLocale = {\n  addButtonComment: 'Type comma or space',\n  addButtonTitle: 'Add',\n};\n"]}

package/components/TokenInput/locale/locales/ru/ru.js.map

@@ -1 +1 @@
-{"version":3,"sources":["ru.ts"],"names":["componentsLocales","addButtonComment","addButtonTitle"],"mappings":";;AAEA,OAAO,IAAMA,iBAAmC,GAAG;AACjDC,EAAAA,gBAAgB,EAAE,4BAD+B;AAEjDC,EAAAA,cAAc,EAAE,UAFiC,EAA5C","sourcesContent":["import { TokenInputLocale } from '../types';\r\n\r\nexport const componentsLocales: TokenInputLocale = {\r\n  addButtonComment: 'Нажмите запятую или пробел',\r\n  addButtonTitle: 'Добавить',\r\n};\r\n"]}
+{"version":3,"sources":["ru.ts"],"names":["componentsLocales","addButtonComment","addButtonTitle"],"mappings":";;AAEA,OAAO,IAAMA,iBAAmC,GAAG;AACjDC,EAAAA,gBAAgB,EAAE,4BAD+B;AAEjDC,EAAAA,cAAc,EAAE,UAFiC,EAA5C","sourcesContent":["import { TokenInputLocale } from '../types';\n\nexport const componentsLocales: TokenInputLocale = {\n  addButtonComment: 'Нажмите запятую или пробел',\n  addButtonTitle: 'Добавить',\n};\n"]}

package/components/TokenInput/locale/types/types.js

@@ -0,0 +1 @@
+export {};