@skbkontur/react-ui 0.0.0-bcbd5e6112 → 0.0.0-c13bb5f4ca

package/cjs/components/TokenInput/TokenInput.md

@@ -0,0 +1,277 @@
+### Базовый пример
+```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() === q,
+    ),
+  ).then(delay(500));
+
+<div style={{ width: '300px' }}>
+  <TokenInput
+    type={TokenInputType.Combined}
+    getItems={getItems}
+    selectedItems={selectedItems}
+    onValueChange={setSelectedItems}
+    renderToken={(item, tokenProps) => (
+      <Token key={item.toString()} {...tokenProps}>
+        {item}
+      </Token>
+    )}
+  />
+</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 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 } from '@skbkontur/react-ui';
+import { TokenInputType } from '@skbkontur/react-ui/components/TokenInput';
+
+
+const delay = time => args => new Promise(resolve => setTimeout(resolve, time, args));
+const { cities } = require('../ComboBox/__mocks__/cities');
+
+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
+interface TokenInputLocale {
+  addButtonComment?: string;
+  addButtonTitle?: string;
+}
+
+const ru_RU = {
+  addButtonComment: 'Нажмите запятую',
+  addButtonTitle: 'Добавить',
+};
+
+const en_GB = {
+  addButtonComment: 'Type comma',
+  addButtonTitle: 'Add',
+};
+```

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

@@ -1,3 +1,2 @@
-import type { Emotion } from '@emotion/css/types/create-instance';
-export declare const labelSizeMixin: (tokenInputPaddingY: string, tokenInputPaddingX: string, emotion: Emotion) => string;
-export declare const inputSizeMixin: (fontSize: string, lineHeight: string, emotion: Emotion) => string;
+export declare const labelSizeMixin: (tokenInputPaddingY: string, tokenInputPaddingX: string) => string;
+export declare const inputSizeMixin: (fontSize: string, lineHeight: string) => string;

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

@@ -1,13 +1,13 @@
-"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;exports.__esModule = true;exports.labelSizeMixin = exports.inputSizeMixin = void 0;var _taggedTemplateLiteralLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteralLoose"));var _templateObject, _templateObject2;
+"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;exports.__esModule = true;exports.labelSizeMixin = exports.inputSizeMixin = void 0;var _taggedTemplateLiteralLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteralLoose"));var _Emotion = require("../../lib/theming/Emotion");var _templateObject, _templateObject2;
 
-var labelSizeMixin = exports.labelSizeMixin = function labelSizeMixin(tokenInputPaddingY, tokenInputPaddingX, emotion) {
-  return emotion.css(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2.default)(["\n    padding: ", " ", ";\n  "])),
+var labelSizeMixin = exports.labelSizeMixin = function labelSizeMixin(tokenInputPaddingY, tokenInputPaddingX) {
+  return (0, _Emotion.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2.default)(["\n    padding: ", " ", ";\n  "])),
   tokenInputPaddingY, tokenInputPaddingX);
 
 };
 
-var inputSizeMixin = exports.inputSizeMixin = function inputSizeMixin(fontSize, lineHeight, emotion) {
-  return emotion.css(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteralLoose2.default)(["\n    font-size: ", ";\n    height: ", ";\n    line-height: ", ";\n  "])),
+var inputSizeMixin = exports.inputSizeMixin = function inputSizeMixin(fontSize, lineHeight) {
+  return (0, _Emotion.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteralLoose2.default)(["\n    font-size: ", ";\n    height: ", ";\n    line-height: ", ";\n  "])),
   fontSize,
   lineHeight,
   lineHeight);

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

@@ -1 +1 @@
-{"version":3,"names":["labelSizeMixin","exports","tokenInputPaddingY","tokenInputPaddingX","emotion","css","_templateObject","_taggedTemplateLiteralLoose2","default","inputSizeMixin","fontSize","lineHeight","_templateObject2"],"sources":["TokenInput.mixins.ts"],"sourcesContent":["import type { Emotion } from '@emotion/css/types/create-instance';\n\nexport const labelSizeMixin = (tokenInputPaddingY: string, tokenInputPaddingX: string, emotion: Emotion) => {\n  return emotion.css`\n    padding: ${tokenInputPaddingY} ${tokenInputPaddingX};\n  `;\n};\n\nexport const inputSizeMixin = (fontSize: string, lineHeight: string, emotion: Emotion) => {\n  return emotion.css`\n    font-size: ${fontSize};\n    height: ${lineHeight};\n    line-height: ${lineHeight};\n  `;\n};\n"],"mappings":";;AAEO,IAAMA,cAAc,GAAAC,OAAA,CAAAD,cAAA,GAAG,SAAjBA,cAAcA,CAAIE,kBAA0B,EAAEC,kBAA0B,EAAEC,OAAgB,EAAK;EAC1G,OAAOA,OAAO,CAACC,GAAG,CAAAC,eAAA,KAAAA,eAAA,OAAAC,4BAAA,CAAAC,OAAA;EACLN,kBAAkB,EAAIC,kBAAkB;;AAEvD,CAAC;;AAEM,IAAMM,cAAc,GAAAR,OAAA,CAAAQ,cAAA,GAAG,SAAjBA,cAAcA,CAAIC,QAAgB,EAAEC,UAAkB,EAAEP,OAAgB,EAAK;EACxF,OAAOA,OAAO,CAACC,GAAG,CAAAO,gBAAA,KAAAA,gBAAA,OAAAL,4BAAA,CAAAC,OAAA;EACHE,QAAQ;EACXC,UAAU;EACLA,UAAU;;AAE7B,CAAC","ignoreList":[]}
+{"version":3,"names":["_Emotion","require","_templateObject","_templateObject2","labelSizeMixin","exports","tokenInputPaddingY","tokenInputPaddingX","css","_taggedTemplateLiteralLoose2","default","inputSizeMixin","fontSize","lineHeight"],"sources":["TokenInput.mixins.ts"],"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"],"mappings":"qTAAA,IAAAA,QAAA,GAAAC,OAAA,8BAAgD,IAAAC,eAAA,EAAAC,gBAAA;;AAEzC,IAAMC,cAAc,GAAAC,OAAA,CAAAD,cAAA,GAAG,SAAjBA,cAAcA,CAAIE,kBAA0B,EAAEC,kBAA0B,EAAK;EACxF,WAAOC,YAAG,EAAAN,eAAA,KAAAA,eAAA,OAAAO,4BAAA,CAAAC,OAAA;EACGJ,kBAAkB,EAAIC,kBAAkB;;AAEvD,CAAC;;AAEM,IAAMI,cAAc,GAAAN,OAAA,CAAAM,cAAA,GAAG,SAAjBA,cAAcA,CAAIC,QAAgB,EAAEC,UAAkB,EAAK;EACtE,WAAOL,YAAG,EAAAL,gBAAA,KAAAA,gBAAA,OAAAM,4BAAA,CAAAC,OAAA;EACKE,QAAQ;EACXC,UAAU;EACLA,UAAU;;AAE7B,CAAC","ignoreList":[]}

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

@@ -1,6 +1,5 @@
-import type { Emotion } from '@emotion/css/types/create-instance';
 import type { Theme } from '../../lib/theming/Theme';
-export declare const getStyles: (emotion: Emotion) => {
+export declare const styles: {
     label(t: Theme): string;
     labelSmall(t: Theme): string;
     labelMedium(t: Theme): string;

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

@@ -1,19 +1,16 @@
-"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;exports.__esModule = true;exports.getStyles = void 0;var _taggedTemplateLiteralLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteralLoose"));
-
-var _Emotion = require("../../lib/theming/Emotion");
+"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;exports.__esModule = true;exports.styles = void 0;var _taggedTemplateLiteralLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteralLoose"));var _Emotion = require("../../lib/theming/Emotion");
 
 
 var _TokenInput = require("./TokenInput.mixins");var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16;
 
-var getStyles = exports.getStyles = function getStyles(emotion) {return (
-    (0, _Emotion.memoizeStyle)({
-      label: function label(t) {
-        return emotion.css(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2.default)(["\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,
+var styles = exports.styles = (0, _Emotion.memoizeStyle)({
+  label: function label(t) {
+    return (0, _Emotion.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2.default)(["\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,
 
 
 
@@ -21,66 +18,66 @@ var getStyles = exports.getStyles = function getStyles(emotion) {return (
 
 
 
-        t.tokenInputBorderRadius);
+    t.tokenInputBorderRadius);
 
-      },
-      labelSmall: function labelSmall(t) {
-        return emotion.css(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteralLoose2.default)(["\n        ", "\n      "])),
-        (0, _TokenInput.labelSizeMixin)(t.tokenInputPaddingYSmall, t.tokenInputPaddingXSmall, emotion));
+  },
+  labelSmall: function labelSmall(t) {
+    return (0, _Emotion.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteralLoose2.default)(["\n      ", "\n    "])),
+    (0, _TokenInput.labelSizeMixin)(t.tokenInputPaddingYSmall, t.tokenInputPaddingXSmall));
 
-      },
-      labelMedium: function labelMedium(t) {
-        return emotion.css(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteralLoose2.default)(["\n        ", "\n      "])),
-        (0, _TokenInput.labelSizeMixin)(t.tokenInputPaddingYMedium, t.tokenInputPaddingXMedium, emotion));
+  },
+  labelMedium: function labelMedium(t) {
+    return (0, _Emotion.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteralLoose2.default)(["\n      ", "\n    "])),
+    (0, _TokenInput.labelSizeMixin)(t.tokenInputPaddingYMedium, t.tokenInputPaddingXMedium));
 
-      },
-      labelLarge: function labelLarge(t) {
-        return emotion.css(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteralLoose2.default)(["\n        ", "\n      "])),
-        (0, _TokenInput.labelSizeMixin)(t.tokenInputPaddingYLarge, t.tokenInputPaddingXLarge, emotion));
+  },
+  labelLarge: function labelLarge(t) {
+    return (0, _Emotion.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteralLoose2.default)(["\n      ", "\n    "])),
+    (0, _TokenInput.labelSizeMixin)(t.tokenInputPaddingYLarge, t.tokenInputPaddingXLarge));
 
-      },
+  },
 
-      hovering: function hovering(t) {
-        return emotion.css(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteralLoose2.default)(["\n        &:hover {\n          border-color: ", ";\n        }\n      "])),
+  hovering: function hovering(t) {
+    return (0, _Emotion.css)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteralLoose2.default)(["\n      &:hover {\n        border-color: ", ";\n      }\n    "])),
 
-        t.tokenInputBorderColorHover);
+    t.tokenInputBorderColorHover);
 
 
-      },
+  },
 
-      warning: function warning(t) {
-        return emotion.css(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteralLoose2.default)(["\n        border: ", " solid ", ";\n        box-shadow: 0 0 0 ", " ", ";\n      "])),
-        t.tokenInputBorderWidth, t.tokenInputBorderColorWarning,
-        t.tokenInputOutlineWidth, t.tokenInputBorderColorWarning);
+  warning: function warning(t) {
+    return (0, _Emotion.css)(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteralLoose2.default)(["\n      border: ", " solid ", ";\n      box-shadow: 0 0 0 ", " ", ";\n    "])),
+    t.tokenInputBorderWidth, t.tokenInputBorderColorWarning,
+    t.tokenInputOutlineWidth, t.tokenInputBorderColorWarning);
 
-      },
+  },
 
-      error: function error(t) {
-        return emotion.css(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteralLoose2.default)(["\n        border: ", " solid ", ";\n        box-shadow: 0 0 0 ", " ", ";\n      "])),
-        t.tokenInputBorderWidth, t.tokenInputBorderColorError,
-        t.tokenInputOutlineWidth, t.tokenInputBorderColorError);
+  error: function error(t) {
+    return (0, _Emotion.css)(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteralLoose2.default)(["\n      border: ", " solid ", ";\n      box-shadow: 0 0 0 ", " ", ";\n    "])),
+    t.tokenInputBorderWidth, t.tokenInputBorderColorError,
+    t.tokenInputOutlineWidth, t.tokenInputBorderColorError);
 
-      },
+  },
 
-      labelFocused: function labelFocused(t) {
-        return emotion.css(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteralLoose2.default)(["\n        border: ", " solid ", ";\n        box-shadow: 0 0 0 ", " ", ";\n      "])),
-        t.tokenInputBorderWidth, t.tokenInputBorderColorFocus,
-        t.tokenInputOutlineWidth, t.tokenInputBorderColorFocus);
+  labelFocused: function labelFocused(t) {
+    return (0, _Emotion.css)(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteralLoose2.default)(["\n      border: ", " solid ", ";\n      box-shadow: 0 0 0 ", " ", ";\n    "])),
+    t.tokenInputBorderWidth, t.tokenInputBorderColorFocus,
+    t.tokenInputOutlineWidth, t.tokenInputBorderColorFocus);
 
-      },
+  },
 
-      labelDisabled: function labelDisabled(t) {
-        return emotion.css(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteralLoose2.default)(["\n        background: ", ";\n        background-clip: ", ";\n        border-color: ", ";\n        box-shadow: none;\n        cursor: default;\n      "])),
-        t.tokenInputDisabledBg,
-        t.inputDisabledBackgroundClip,
-        t.tokenInputDisabledBorderColor);
+  labelDisabled: function labelDisabled(t) {
+    return (0, _Emotion.css)(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteralLoose2.default)(["\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 emotion.css(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteralLoose2.default)(["\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        flex: 1 1 100%;\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      "])),
+  input: function input(t) {
+    return (0, _Emotion.css)(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteralLoose2.default)(["\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      flex: 1 1 100%;\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    "])),
 
 
 
@@ -92,7 +89,7 @@ var getStyles = exports.getStyles = function getStyles(emotion) {return (
 
 
 
-        t.tokenInputTextColor,
+    t.tokenInputTextColor,
 
 
 
@@ -103,16 +100,16 @@ var getStyles = exports.getStyles = function getStyles(emotion) {return (
 
 
 
-        t.tokenInputPlaceholderColor,
-        t.tokenInputPlaceholderColor,
+    t.tokenInputPlaceholderColor,
+    t.tokenInputPlaceholderColor,
 
 
-        t.tokenInputPlaceholderColorDisabled,
-        t.tokenInputPlaceholderColorDisabled,
+    t.tokenInputPlaceholderColorDisabled,
+    t.tokenInputPlaceholderColorDisabled,
 
 
-        t.tokenInputPlaceholderColorLight,
-        t.tokenInputPlaceholderColorLight);
+    t.tokenInputPlaceholderColorLight,
+    t.tokenInputPlaceholderColorLight);
 
 
 
@@ -122,43 +119,43 @@ var getStyles = exports.getStyles = function getStyles(emotion) {return (
 
 
 
-      },
-      inputSmall: function inputSmall(t) {
-        return emotion.css(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteralLoose2.default)(["\n        ", ";\n      "])),
-        (0, _TokenInput.inputSizeMixin)(t.tokenFontSizeSmall, t.tokenInputLineHeightSmall, emotion));
+  },
+  inputSmall: function inputSmall(t) {
+    return (0, _Emotion.css)(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteralLoose2.default)(["\n      ", ";\n    "])),
+    (0, _TokenInput.inputSizeMixin)(t.tokenFontSizeSmall, t.tokenInputLineHeightSmall));
 
-      },
-      inputMedium: function inputMedium(t) {
-        return emotion.css(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteralLoose2.default)(["\n        ", ";\n      "])),
-        (0, _TokenInput.inputSizeMixin)(t.tokenFontSizeMedium, t.tokenInputLineHeightMedium, emotion));
+  },
+  inputMedium: function inputMedium(t) {
+    return (0, _Emotion.css)(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteralLoose2.default)(["\n      ", ";\n    "])),
+    (0, _TokenInput.inputSizeMixin)(t.tokenFontSizeMedium, t.tokenInputLineHeightMedium));
 
-      },
-      inputLarge: function inputLarge(t) {
-        return emotion.css(_templateObject13 || (_templateObject13 = (0, _taggedTemplateLiteralLoose2.default)(["\n        ", ";\n      "])),
-        (0, _TokenInput.inputSizeMixin)(t.tokenFontSizeLarge, t.tokenInputLineHeightLarge, emotion));
+  },
+  inputLarge: function inputLarge(t) {
+    return (0, _Emotion.css)(_templateObject13 || (_templateObject13 = (0, _taggedTemplateLiteralLoose2.default)(["\n      ", ";\n    "])),
+    (0, _TokenInput.inputSizeMixin)(t.tokenFontSizeLarge, t.tokenInputLineHeightLarge));
 
-      },
+  },
 
-      inputDisabled: function inputDisabled(t) {
-        return emotion.css(_templateObject14 || (_templateObject14 = (0, _taggedTemplateLiteralLoose2.default)(["\n        pointer-events: none;\n        /* fix text color in safari */\n        -webkit-text-fill-color: currentcolor;\n        color: ", ";\n      "])),
+  inputDisabled: function inputDisabled(t) {
+    return (0, _Emotion.css)(_templateObject14 || (_templateObject14 = (0, _taggedTemplateLiteralLoose2.default)(["\n      pointer-events: none;\n      /* fix text color in safari */\n      -webkit-text-fill-color: currentcolor;\n      color: ", ";\n    "])),
 
 
 
-        t.tokenInputTextColorDisabled);
+    t.tokenInputTextColorDisabled);
 
-      },
+  },
 
-      inputPlaceholderWrapper: function inputPlaceholderWrapper() {
-        return emotion.css(_templateObject15 || (_templateObject15 = (0, _taggedTemplateLiteralLoose2.default)(["\n        flex: 1 1 100%;\n      "])));
+  inputPlaceholderWrapper: function inputPlaceholderWrapper() {
+    return (0, _Emotion.css)(_templateObject15 || (_templateObject15 = (0, _taggedTemplateLiteralLoose2.default)(["\n      flex: 1 1 100%;\n    "])));
 
 
-      },
+  },
 
-      reservedInput: function reservedInput(t) {
-        return emotion.css(_templateObject16 || (_templateObject16 = (0, _taggedTemplateLiteralLoose2.default)(["\n        min-width: 2px;\n        color: ", ";\n        word-break: break-all;\n      "])),
+  reservedInput: function reservedInput(t) {
+    return (0, _Emotion.css)(_templateObject16 || (_templateObject16 = (0, _taggedTemplateLiteralLoose2.default)(["\n      min-width: 2px;\n      color: ", ";\n      word-break: break-all;\n    "])),
 
-        t.tokenInputTextColorDisabled);
+    t.tokenInputTextColorDisabled);
 
 
-      }
-    }));};
+  }
+});

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

@@ -1 +1 @@
-{"version":3,"names":["_Emotion","require","_TokenInput","_templateObject","_templateObject2","_templateObject3","_templateObject4","_templateObject5","_templateObject6","_templateObject7","_templateObject8","_templateObject9","_templateObject10","_templateObject11","_templateObject12","_templateObject13","_templateObject14","_templateObject15","_templateObject16","getStyles","exports","emotion","memoizeStyle","label","t","css","_taggedTemplateLiteralLoose2","default","tokenInputBg","tokenInputShadow","tokenInputBorderWidth","tokenInputBorderColor","tokenInputBorderTopColor","transitionDuration","transitionTimingFunction","tokenInputBorderRadius","labelSmall","labelSizeMixin","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","inputSizeMixin","tokenFontSizeSmall","tokenInputLineHeightSmall","inputMedium","tokenFontSizeMedium","tokenInputLineHeightMedium","inputLarge","tokenFontSizeLarge","tokenInputLineHeightLarge","inputDisabled","tokenInputTextColorDisabled","inputPlaceholderWrapper","reservedInput"],"sources":["TokenInput.styles.ts"],"sourcesContent":["import type { Emotion } from '@emotion/css/types/create-instance';\n\nimport { memoizeStyle } from '../../lib/theming/Emotion';\nimport type { Theme } from '../../lib/theming/Theme';\n\nimport { labelSizeMixin, inputSizeMixin } from './TokenInput.mixins';\n\nexport const getStyles = (emotion: Emotion) =>\n  memoizeStyle({\n    label(t: Theme) {\n      return emotion.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 emotion.css`\n        ${labelSizeMixin(t.tokenInputPaddingYSmall, t.tokenInputPaddingXSmall, emotion)}\n      `;\n    },\n    labelMedium(t: Theme) {\n      return emotion.css`\n        ${labelSizeMixin(t.tokenInputPaddingYMedium, t.tokenInputPaddingXMedium, emotion)}\n      `;\n    },\n    labelLarge(t: Theme) {\n      return emotion.css`\n        ${labelSizeMixin(t.tokenInputPaddingYLarge, t.tokenInputPaddingXLarge, emotion)}\n      `;\n    },\n\n    hovering(t: Theme) {\n      return emotion.css`\n        &:hover {\n          border-color: ${t.tokenInputBorderColorHover};\n        }\n      `;\n    },\n\n    warning(t: Theme) {\n      return emotion.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 emotion.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 emotion.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 emotion.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 emotion.css`\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        flex: 1 1 100%;\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    inputSmall(t: Theme) {\n      return emotion.css`\n        ${inputSizeMixin(t.tokenFontSizeSmall, t.tokenInputLineHeightSmall, emotion)};\n      `;\n    },\n    inputMedium(t: Theme) {\n      return emotion.css`\n        ${inputSizeMixin(t.tokenFontSizeMedium, t.tokenInputLineHeightMedium, emotion)};\n      `;\n    },\n    inputLarge(t: Theme) {\n      return emotion.css`\n        ${inputSizeMixin(t.tokenFontSizeLarge, t.tokenInputLineHeightLarge, emotion)};\n      `;\n    },\n\n    inputDisabled(t: Theme) {\n      return emotion.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    inputPlaceholderWrapper() {\n      return emotion.css`\n        flex: 1 1 100%;\n      `;\n    },\n\n    reservedInput(t: Theme) {\n      return emotion.css`\n        min-width: 2px;\n        color: ${t.tokenInputTextColorDisabled};\n        word-break: break-all;\n      `;\n    },\n  });\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["_Emotion","require","_TokenInput","_templateObject","_templateObject2","_templateObject3","_templateObject4","_templateObject5","_templateObject6","_templateObject7","_templateObject8","_templateObject9","_templateObject10","_templateObject11","_templateObject12","_templateObject13","_templateObject14","_templateObject15","_templateObject16","styles","exports","memoizeStyle","label","t","css","_taggedTemplateLiteralLoose2","default","tokenInputBg","tokenInputShadow","tokenInputBorderWidth","tokenInputBorderColor","tokenInputBorderTopColor","transitionDuration","transitionTimingFunction","tokenInputBorderRadius","labelSmall","labelSizeMixin","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","inputSizeMixin","tokenFontSizeSmall","tokenInputLineHeightSmall","inputMedium","tokenFontSizeMedium","tokenInputLineHeightMedium","inputLarge","tokenFontSizeLarge","tokenInputLineHeightLarge","inputDisabled","tokenInputTextColorDisabled","inputPlaceholderWrapper","reservedInput"],"sources":["TokenInput.styles.ts"],"sourcesContent":["import { css, memoizeStyle } from '../../lib/theming/Emotion';\nimport type { 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      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      flex: 1 1 100%;\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  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  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  inputPlaceholderWrapper() {\n    return css`\n      flex: 1 1 100%;\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"],"mappings":"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","ignoreList":[]}

package/cjs/components/Tooltip/Tooltip.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import type { SizeProp } from '../../lib/types/props';
+import type { SizeProp } from 'react-ui/lib/types/props';
 import type { PopupPositionsType, ShortPopupPositionsType } from '../../internal/Popup';
 import type { Nullable } from '../../typings/utility-types';
 import type { CommonProps } from '../../internal/CommonWrapper';
@@ -88,9 +88,6 @@ export declare class Tooltip extends React.PureComponent<TooltipProps, TooltipSt
     static delay: number;
     private static triggersWithoutCloseButton;
     state: TooltipState;
-    private globalObject;
-    private cx;
-    private styles;
     private theme;
     private sizeVariables;
     featureFlags: ReactUIFeatureFlags;