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

package/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/components/TokenInput/TokenInput.mixins/TokenInput.mixins.js

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

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

@@ -1 +1 @@
-{"version":3,"names":["labelSizeMixin","tokenInputPaddingY","tokenInputPaddingX","emotion","css","_templateObject","_taggedTemplateLiteralLoose","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":";;AAEA,OAAO,IAAMA,cAAc,GAAG,SAAjBA,cAAcA,CAAIC,kBAA0B,EAAEC,kBAA0B,EAAEC,OAAgB,EAAK;EAC1G,OAAOA,OAAO,CAACC,GAAG,CAAAC,eAAA,KAAAA,eAAA,GAAAC,2BAAA;EACLL,kBAAkB,EAAIC,kBAAkB;;AAEvD,CAAC;;AAED,OAAO,IAAMK,cAAc,GAAG,SAAjBA,cAAcA,CAAIC,QAAgB,EAAEC,UAAkB,EAAEN,OAAgB,EAAK;EACxF,OAAOA,OAAO,CAACC,GAAG,CAAAM,gBAAA,KAAAA,gBAAA,GAAAJ,2BAAA;EACHE,QAAQ;EACXC,UAAU;EACLA,UAAU;;AAE7B,CAAC","ignoreList":[]}
+{"version":3,"names":["css","labelSizeMixin","tokenInputPaddingY","tokenInputPaddingX","_templateObject","_taggedTemplateLiteralLoose","inputSizeMixin","fontSize","lineHeight","_templateObject2"],"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":"sIAAA,SAASA,GAAG,QAAQ,2BAA2B;;AAE/C,OAAO,IAAMC,cAAc,GAAG,SAAjBA,cAAcA,CAAIC,kBAA0B,EAAEC,kBAA0B,EAAK;EACxF,OAAOH,GAAG,CAAAI,eAAA,KAAAA,eAAA,GAAAC,2BAAA;EACGH,kBAAkB,EAAIC,kBAAkB;;AAEvD,CAAC;;AAED,OAAO,IAAMG,cAAc,GAAG,SAAjBA,cAAcA,CAAIC,QAAgB,EAAEC,UAAkB,EAAK;EACtE,OAAOR,GAAG,CAAAS,gBAAA,KAAAA,gBAAA,GAAAJ,2BAAA;EACKE,QAAQ;EACXC,UAAU;EACLA,UAAU;;AAE7B,CAAC","ignoreList":[]}

package/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/components/TokenInput/TokenInput.styles/TokenInput.styles.js

@@ -1,56 +1,54 @@
 import _taggedTemplateLiteralLoose from "@babel/runtime/helpers/esm/taggedTemplateLiteralLoose";
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16;
-import { memoizeStyle } from "../../../lib/theming/Emotion";
+import { css, memoizeStyle } from "../../../lib/theming/Emotion";
 import { labelSizeMixin, inputSizeMixin } from "../TokenInput.mixins";
-export var getStyles = function getStyles(emotion) {
-  return memoizeStyle({
-    label: function label(t) {
-      return emotion.css(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n        background-color: ", ";\n        box-shadow: ", ";\n        border: ", " solid ", ";\n        border-top-color: ", ";\n        transition: border-color ", " ", ";\n        box-sizing: border-box;\n        cursor: text;\n        display: flex;\n        flex-wrap: wrap;\n        align-items: start;\n        outline: none;\n        position: relative;\n        border-radius: ", ";\n      "])), t.tokenInputBg, t.tokenInputShadow, t.tokenInputBorderWidth, t.tokenInputBorderColor, t.tokenInputBorderTopColor, t.transitionDuration, t.transitionTimingFunction, t.tokenInputBorderRadius);
-    },
-    labelSmall: function labelSmall(t) {
-      return emotion.css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n        ", "\n      "])), labelSizeMixin(t.tokenInputPaddingYSmall, t.tokenInputPaddingXSmall, emotion));
-    },
-    labelMedium: function labelMedium(t) {
-      return emotion.css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n        ", "\n      "])), labelSizeMixin(t.tokenInputPaddingYMedium, t.tokenInputPaddingXMedium, emotion));
-    },
-    labelLarge: function labelLarge(t) {
-      return emotion.css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n        ", "\n      "])), labelSizeMixin(t.tokenInputPaddingYLarge, t.tokenInputPaddingXLarge, emotion));
-    },
-    hovering: function hovering(t) {
-      return emotion.css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\n        &:hover {\n          border-color: ", ";\n        }\n      "])), t.tokenInputBorderColorHover);
-    },
-    warning: function warning(t) {
-      return emotion.css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteralLoose(["\n        border: ", " solid ", ";\n        box-shadow: 0 0 0 ", " ", ";\n      "])), t.tokenInputBorderWidth, t.tokenInputBorderColorWarning, t.tokenInputOutlineWidth, t.tokenInputBorderColorWarning);
-    },
-    error: function error(t) {
-      return emotion.css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteralLoose(["\n        border: ", " solid ", ";\n        box-shadow: 0 0 0 ", " ", ";\n      "])), t.tokenInputBorderWidth, t.tokenInputBorderColorError, t.tokenInputOutlineWidth, t.tokenInputBorderColorError);
-    },
-    labelFocused: function labelFocused(t) {
-      return emotion.css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteralLoose(["\n        border: ", " solid ", ";\n        box-shadow: 0 0 0 ", " ", ";\n      "])), t.tokenInputBorderWidth, t.tokenInputBorderColorFocus, t.tokenInputOutlineWidth, t.tokenInputBorderColorFocus);
-    },
-    labelDisabled: function labelDisabled(t) {
-      return emotion.css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteralLoose(["\n        background: ", ";\n        background-clip: ", ";\n        border-color: ", ";\n        box-shadow: none;\n        cursor: default;\n      "])), t.tokenInputDisabledBg, t.inputDisabledBackgroundClip, t.tokenInputDisabledBorderColor);
-    },
-    input: function input(t) {
-      return emotion.css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteralLoose(["\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      "])), t.tokenInputTextColor, t.tokenInputPlaceholderColor, t.tokenInputPlaceholderColor, t.tokenInputPlaceholderColorDisabled, t.tokenInputPlaceholderColorDisabled, t.tokenInputPlaceholderColorLight, t.tokenInputPlaceholderColorLight);
-    },
-    inputSmall: function inputSmall(t) {
-      return emotion.css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteralLoose(["\n        ", ";\n      "])), inputSizeMixin(t.tokenFontSizeSmall, t.tokenInputLineHeightSmall, emotion));
-    },
-    inputMedium: function inputMedium(t) {
-      return emotion.css(_templateObject12 || (_templateObject12 = _taggedTemplateLiteralLoose(["\n        ", ";\n      "])), inputSizeMixin(t.tokenFontSizeMedium, t.tokenInputLineHeightMedium, emotion));
-    },
-    inputLarge: function inputLarge(t) {
-      return emotion.css(_templateObject13 || (_templateObject13 = _taggedTemplateLiteralLoose(["\n        ", ";\n      "])), inputSizeMixin(t.tokenFontSizeLarge, t.tokenInputLineHeightLarge, emotion));
-    },
-    inputDisabled: function inputDisabled(t) {
-      return emotion.css(_templateObject14 || (_templateObject14 = _taggedTemplateLiteralLoose(["\n        pointer-events: none;\n        /* fix text color in safari */\n        -webkit-text-fill-color: currentcolor;\n        color: ", ";\n      "])), t.tokenInputTextColorDisabled);
-    },
-    inputPlaceholderWrapper: function inputPlaceholderWrapper() {
-      return emotion.css(_templateObject15 || (_templateObject15 = _taggedTemplateLiteralLoose(["\n        flex: 1 1 100%;\n      "])));
-    },
-    reservedInput: function reservedInput(t) {
-      return emotion.css(_templateObject16 || (_templateObject16 = _taggedTemplateLiteralLoose(["\n        min-width: 2px;\n        color: ", ";\n        word-break: break-all;\n      "])), t.tokenInputTextColorDisabled);
-    }
-  });
-};
+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      transition: border-color ", " ", ";\n      box-sizing: border-box;\n      cursor: text;\n      display: flex;\n      flex-wrap: wrap;\n      align-items: start;\n      outline: none;\n      position: relative;\n      border-radius: ", ";\n    "])), t.tokenInputBg, t.tokenInputShadow, t.tokenInputBorderWidth, t.tokenInputBorderColor, t.tokenInputBorderTopColor, t.transitionDuration, t.transitionTimingFunction, t.tokenInputBorderRadius);
+  },
+  labelSmall: function labelSmall(t) {
+    return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n      ", "\n    "])), labelSizeMixin(t.tokenInputPaddingYSmall, t.tokenInputPaddingXSmall));
+  },
+  labelMedium: function labelMedium(t) {
+    return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n      ", "\n    "])), labelSizeMixin(t.tokenInputPaddingYMedium, t.tokenInputPaddingXMedium));
+  },
+  labelLarge: function labelLarge(t) {
+    return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n      ", "\n    "])), labelSizeMixin(t.tokenInputPaddingYLarge, t.tokenInputPaddingXLarge));
+  },
+  hovering: function hovering(t) {
+    return css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\n      &:hover {\n        border-color: ", ";\n      }\n    "])), t.tokenInputBorderColorHover);
+  },
+  warning: function warning(t) {
+    return css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteralLoose(["\n      border: ", " solid ", ";\n      box-shadow: 0 0 0 ", " ", ";\n    "])), t.tokenInputBorderWidth, t.tokenInputBorderColorWarning, t.tokenInputOutlineWidth, t.tokenInputBorderColorWarning);
+  },
+  error: function error(t) {
+    return css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteralLoose(["\n      border: ", " solid ", ";\n      box-shadow: 0 0 0 ", " ", ";\n    "])), t.tokenInputBorderWidth, t.tokenInputBorderColorError, t.tokenInputOutlineWidth, t.tokenInputBorderColorError);
+  },
+  labelFocused: function labelFocused(t) {
+    return css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteralLoose(["\n      border: ", " solid ", ";\n      box-shadow: 0 0 0 ", " ", ";\n    "])), t.tokenInputBorderWidth, t.tokenInputBorderColorFocus, t.tokenInputOutlineWidth, t.tokenInputBorderColorFocus);
+  },
+  labelDisabled: function labelDisabled(t) {
+    return css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteralLoose(["\n      background: ", ";\n      background-clip: ", ";\n      border-color: ", ";\n      box-shadow: none;\n      cursor: default;\n    "])), t.tokenInputDisabledBg, t.inputDisabledBackgroundClip, t.tokenInputDisabledBorderColor);
+  },
+  input: function input(t) {
+    return css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteralLoose(["\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    "])), t.tokenInputTextColor, t.tokenInputPlaceholderColor, t.tokenInputPlaceholderColor, t.tokenInputPlaceholderColorDisabled, t.tokenInputPlaceholderColorDisabled, t.tokenInputPlaceholderColorLight, t.tokenInputPlaceholderColorLight);
+  },
+  inputSmall: function inputSmall(t) {
+    return css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteralLoose(["\n      ", ";\n    "])), inputSizeMixin(t.tokenFontSizeSmall, t.tokenInputLineHeightSmall));
+  },
+  inputMedium: function inputMedium(t) {
+    return css(_templateObject12 || (_templateObject12 = _taggedTemplateLiteralLoose(["\n      ", ";\n    "])), inputSizeMixin(t.tokenFontSizeMedium, t.tokenInputLineHeightMedium));
+  },
+  inputLarge: function inputLarge(t) {
+    return css(_templateObject13 || (_templateObject13 = _taggedTemplateLiteralLoose(["\n      ", ";\n    "])), inputSizeMixin(t.tokenFontSizeLarge, t.tokenInputLineHeightLarge));
+  },
+  inputDisabled: function inputDisabled(t) {
+    return css(_templateObject14 || (_templateObject14 = _taggedTemplateLiteralLoose(["\n      pointer-events: none;\n      /* fix text color in safari */\n      -webkit-text-fill-color: currentcolor;\n      color: ", ";\n    "])), t.tokenInputTextColorDisabled);
+  },
+  inputPlaceholderWrapper: function inputPlaceholderWrapper() {
+    return css(_templateObject15 || (_templateObject15 = _taggedTemplateLiteralLoose(["\n      flex: 1 1 100%;\n    "])));
+  },
+  reservedInput: function reservedInput(t) {
+    return css(_templateObject16 || (_templateObject16 = _taggedTemplateLiteralLoose(["\n      min-width: 2px;\n      color: ", ";\n      word-break: break-all;\n    "])), t.tokenInputTextColorDisabled);
+  }
+});

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

@@ -1 +1 @@
-{"version":3,"names":["memoizeStyle","labelSizeMixin","inputSizeMixin","getStyles","emotion","label","t","css","_templateObject","_taggedTemplateLiteralLoose","tokenInputBg","tokenInputShadow","tokenInputBorderWidth","tokenInputBorderColor","tokenInputBorderTopColor","transitionDuration","transitionTimingFunction","tokenInputBorderRadius","labelSmall","_templateObject2","tokenInputPaddingYSmall","tokenInputPaddingXSmall","labelMedium","_templateObject3","tokenInputPaddingYMedium","tokenInputPaddingXMedium","labelLarge","_templateObject4","tokenInputPaddingYLarge","tokenInputPaddingXLarge","hovering","_templateObject5","tokenInputBorderColorHover","warning","_templateObject6","tokenInputBorderColorWarning","tokenInputOutlineWidth","error","_templateObject7","tokenInputBorderColorError","labelFocused","_templateObject8","tokenInputBorderColorFocus","labelDisabled","_templateObject9","tokenInputDisabledBg","inputDisabledBackgroundClip","tokenInputDisabledBorderColor","input","_templateObject10","tokenInputTextColor","tokenInputPlaceholderColor","tokenInputPlaceholderColorDisabled","tokenInputPlaceholderColorLight","inputSmall","_templateObject11","tokenFontSizeSmall","tokenInputLineHeightSmall","inputMedium","_templateObject12","tokenFontSizeMedium","tokenInputLineHeightMedium","inputLarge","_templateObject13","tokenFontSizeLarge","tokenInputLineHeightLarge","inputDisabled","_templateObject14","tokenInputTextColorDisabled","inputPlaceholderWrapper","_templateObject15","reservedInput","_templateObject16"],"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":["css","memoizeStyle","labelSizeMixin","inputSizeMixin","styles","label","t","_templateObject","_taggedTemplateLiteralLoose","tokenInputBg","tokenInputShadow","tokenInputBorderWidth","tokenInputBorderColor","tokenInputBorderTopColor","transitionDuration","transitionTimingFunction","tokenInputBorderRadius","labelSmall","_templateObject2","tokenInputPaddingYSmall","tokenInputPaddingXSmall","labelMedium","_templateObject3","tokenInputPaddingYMedium","tokenInputPaddingXMedium","labelLarge","_templateObject4","tokenInputPaddingYLarge","tokenInputPaddingXLarge","hovering","_templateObject5","tokenInputBorderColorHover","warning","_templateObject6","tokenInputBorderColorWarning","tokenInputOutlineWidth","error","_templateObject7","tokenInputBorderColorError","labelFocused","_templateObject8","tokenInputBorderColorFocus","labelDisabled","_templateObject9","tokenInputDisabledBg","inputDisabledBackgroundClip","tokenInputDisabledBorderColor","input","_templateObject10","tokenInputTextColor","tokenInputPlaceholderColor","tokenInputPlaceholderColorDisabled","tokenInputPlaceholderColorLight","inputSmall","_templateObject11","tokenFontSizeSmall","tokenInputLineHeightSmall","inputMedium","_templateObject12","tokenFontSizeMedium","tokenInputLineHeightMedium","inputLarge","_templateObject13","tokenFontSizeLarge","tokenInputLineHeightLarge","inputDisabled","_templateObject14","tokenInputTextColorDisabled","inputPlaceholderWrapper","_templateObject15","reservedInput","_templateObject16"],"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/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;