@skbkontur/react-ui 0.0.0-2dd5039746 → 0.0.0-308773c7f8

package/components/Token/Token.styles/Token.styles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["Token.styles.ts"],"names":["css","memoizeStyle","prefix","ColorFunctions","globalClasses","removeIcon","styles","token","t","tokenBorderRadius","tokenPaddingY","tokenPaddingX","tokenLineHeight","tokenFontSize","tokenMarginY","tokenMarginX","disabled","tokenPaddingYDisabled","tokenPaddingXDisabled","tokenMarginYDisabled","tokenMarginXDisabled","tokenTextColorDisabled","text","tokenLegacyTextShift","tokenRemoveIconSize","tokenRemoveIconPaddingY","tokenRemoveIconPaddingX","tokenRemoveIconBoxSizing","tokenRemoveIconGap","colorStyles","name","color","tokenDefaultIdle","tokenDefaultActive","tokenGrayIdle","tokenGrayActive","tokenBlueIdle","tokenBlueActive","tokenGreenIdle","tokenGreenActive","tokenYellowIdle","tokenYellowActive","tokenRedIdle","tokenRedActive","tokenWhite","tokenBlack","reduce","colors","v","getVStyle","tokenOutlineWidth","tokenBorderColorError","tokenBorderColorWarning","contrast","tokenBorderWidth","darken","defaultDisabled","tokenDisabledBg","tokenShadowDisabled","defaultDisabledWarning","defaultDisabledError"],"mappings":"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","sourcesContent":["import { css, memoizeStyle, prefix } from '../../lib/theming/Emotion';\nimport { Theme } from '../../lib/theming/Theme';\nimport * as ColorFunctions from '../../lib/styles/ColorFunctions';\n\nexport const globalClasses = prefix('token')({\n  removeIcon: 'remove-icon',\n});\n\nexport const styles = memoizeStyle({\n  token(t: Theme) {\n    return css`\n      display: inline-flex;\n      align-items: center;\n      border-radius: ${t.tokenBorderRadius};\n      padding: ${t.tokenPaddingY} ${t.tokenPaddingX};\n      line-height: ${t.tokenLineHeight};\n      font-size: ${t.tokenFontSize};\n      margin: ${t.tokenMarginY} ${t.tokenMarginX};\n      min-width: 0;\n      word-break: break-all;\n      user-select: none;\n\n      &:hover {\n        cursor: pointer;\n      }\n    `;\n  },\n\n  disabled(t: Theme) {\n    return css`\n      padding: ${t.tokenPaddingYDisabled} ${t.tokenPaddingXDisabled};\n      margin: ${t.tokenMarginYDisabled} ${t.tokenMarginXDisabled};\n      user-select: text;\n      cursor: text;\n      color: ${t.tokenTextColorDisabled};\n      pointer-events: none;\n\n      .${globalClasses.removeIcon} {\n        visibility: hidden;\n      }\n    `;\n  },\n\n  text(t: Theme) {\n    return css`\n      display: inline-block;\n      padding-bottom: ${t.tokenLegacyTextShift};\n    `;\n  },\n\n  removeIcon(t: Theme) {\n    return css`\n      height: ${t.tokenRemoveIconSize};\n      width: ${t.tokenRemoveIconSize};\n      flex-shrink: 0;\n      padding: ${t.tokenRemoveIconPaddingY} ${t.tokenRemoveIconPaddingX};\n      box-sizing: ${t.tokenRemoveIconBoxSizing};\n      margin-left: ${t.tokenRemoveIconGap};\n      transition: none;\n      fill: currentColor;\n      opacity: 0.5;\n      line-height: 0;\n\n      &:hover {\n        opacity: 1;\n      }\n    `;\n  },\n});\n\ninterface TokenColors {\n  defaultIdle: (t: Theme, v: 'error' | 'warning' | null) => string;\n  defaultActive: (t: Theme, v: 'error' | 'warning' | null) => string;\n  defaultDisabled: (t: Theme) => string;\n  defaultDisabledWarning: (t: Theme) => string;\n  defaultDisabledError: (t: Theme) => string;\n  grayIdle: (t: Theme, v: 'error' | 'warning' | null) => string;\n  grayActive: (t: Theme, v: 'error' | 'warning' | null) => string;\n  blueIdle: (t: Theme, v: 'error' | 'warning' | null) => string;\n  blueActive: (t: Theme, v: 'error' | 'warning' | null) => string;\n  greenIdle: (t: Theme, v: 'error' | 'warning' | null) => string;\n  greenActive: (t: Theme, v: 'error' | 'warning' | null) => string;\n  yellowIdle: (t: Theme, v: 'error' | 'warning' | null) => string;\n  yellowActive: (t: Theme, v: 'error' | 'warning' | null) => string;\n  redIdle: (t: Theme, v: 'error' | 'warning' | null) => string;\n  redActive: (t: Theme, v: 'error' | 'warning' | null) => string;\n  white: (t: Theme, v: 'error' | 'warning' | null) => string;\n  black: (t: Theme, v: 'error' | 'warning' | null) => string;\n}\n\nexport const colorStyles = [\n  { name: 'defaultIdle', color: (t: Theme) => t.tokenDefaultIdle },\n  { name: 'defaultActive', color: (t: Theme) => t.tokenDefaultActive },\n  { name: 'grayIdle', color: (t: Theme) => t.tokenGrayIdle },\n  { name: 'grayActive', color: (t: Theme) => t.tokenGrayActive },\n  { name: 'blueIdle', color: (t: Theme) => t.tokenBlueIdle },\n  { name: 'blueActive', color: (t: Theme) => t.tokenBlueActive },\n  { name: 'greenIdle', color: (t: Theme) => t.tokenGreenIdle },\n  { name: 'greenActive', color: (t: Theme) => t.tokenGreenActive },\n  { name: 'yellowIdle', color: (t: Theme) => t.tokenYellowIdle },\n  { name: 'yellowActive', color: (t: Theme) => t.tokenYellowActive },\n  { name: 'redIdle', color: (t: Theme) => t.tokenRedIdle },\n  { name: 'redActive', color: (t: Theme) => t.tokenRedActive },\n  { name: 'white', color: (t: Theme) => t.tokenWhite },\n  { name: 'black', color: (t: Theme) => t.tokenBlack },\n].reduce(\n  (colors: TokenColors, { name, color }) => ({\n    ...colors,\n    [name](t: Theme, v: 'error' | 'warning') {\n      const getVStyle = () => {\n        if (v === 'error') {\n          return css`\n            box-shadow: 0 0 0 ${t.tokenOutlineWidth} ${t.tokenBorderColorError}, inset 0 0 0 1px ${color(t)};\n          `;\n        } else if (v === 'warning') {\n          return css`\n            box-shadow: 0 0 0 ${t.tokenOutlineWidth} ${t.tokenBorderColorWarning}, inset 0 0 0 1px ${color(t)};\n          `;\n        }\n\n        return '';\n      };\n\n      return css`\n        background-color: ${color(t)};\n        color: ${ColorFunctions.contrast(color(t))};\n        box-shadow: 0 0 0 ${t.tokenBorderWidth} ${ColorFunctions.darken(color(t), '5%')}, inset 0 0 0 1px ${color(t)};\n\n        ${getVStyle()}\n\n        .${globalClasses.removeIcon}:hover {\n          color: ${ColorFunctions.contrast(color(t))};\n        }\n      `;\n    },\n  }),\n  {\n    defaultDisabled(t: Theme) {\n      return css`\n        background-color: ${t.tokenDisabledBg};\n        box-shadow: ${t.tokenShadowDisabled};\n      `;\n    },\n    defaultDisabledWarning(t: Theme) {\n      return css`\n        box-shadow: 0 0 0 ${t.tokenOutlineWidth} ${t.tokenBorderColorWarning}, inset 0 0 0 1px ${t.tokenDisabledBg};\n      `;\n    },\n    defaultDisabledError(t: Theme) {\n      return css`\n        box-shadow: 0 0 0 ${t.tokenOutlineWidth} ${t.tokenBorderColorError}, inset 0 0 0 1px ${t.tokenDisabledBg};\n      `;\n    },\n  } as TokenColors,\n);\n"]}
+{"version":3,"sources":["Token.styles.ts"],"names":["css","memoizeStyle","prefix","ColorFunctions","globalClasses","removeIcon","styles","token","t","tokenBorderRadius","tokenPaddingY","tokenPaddingX","tokenLineHeight","tokenFontSize","tokenMarginY","tokenMarginX","tokenDefaultIdle2022","tokenDefaultIdleColor","tokenDefaultIdleBg","tokenBorderWidth","tokenDefaultIdleBorderColor","tokenDefaultIdleHovering2022","tokenDefaultIdleColorHover","tokenDefaultIdleBgHover","tokenDefaultIdleBorderColorHover","tokenDefaultActive2022","tokenDefaultActiveColor","tokenDefaultActiveBg","tokenDefaultActiveBorderColor","tokenError2022","tokenBorderColorError","tokenOutlineWidth","tokenWarning2022","tokenBorderColorWarning","tokenDisabled2022","tokenPaddingYDisabled","tokenPaddingXDisabled","tokenMarginYDisabled","tokenMarginXDisabled","tokenTextColorDisabled","tokenBorderColorDisabled","disabled","text","tokenLegacyTextShift","tokenRemoveIconSize","tokenRemoveIconPaddingY","tokenRemoveIconPaddingX","tokenRemoveIconBoxSizing","tokenRemoveIconGap","colorStyles","name","color","tokenDefaultIdle","tokenDefaultActive","tokenGrayIdle","tokenGrayActive","tokenBlueIdle","tokenBlueActive","tokenGreenIdle","tokenGreenActive","tokenYellowIdle","tokenYellowActive","tokenRedIdle","tokenRedActive","tokenWhite","tokenBlack","reduce","colors","v","getVStyle","contrast","darken","defaultDisabled","tokenDisabledBg","tokenShadowDisabled","defaultDisabledWarning","defaultDisabledError"],"mappings":"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","sourcesContent":["import { css, memoizeStyle, prefix } from '../../lib/theming/Emotion';\nimport { Theme } from '../../lib/theming/Theme';\nimport * as ColorFunctions from '../../lib/styles/ColorFunctions';\n\nexport const globalClasses = prefix('token')({\n  removeIcon: 'remove-icon',\n});\n\nexport const styles = memoizeStyle({\n  token(t: Theme) {\n    return css`\n      display: inline-flex;\n      align-items: center;\n      border-radius: ${t.tokenBorderRadius};\n      padding: ${t.tokenPaddingY} ${t.tokenPaddingX};\n      line-height: ${t.tokenLineHeight};\n      font-size: ${t.tokenFontSize};\n      margin: ${t.tokenMarginY} ${t.tokenMarginX};\n      min-width: 0;\n      word-break: break-all;\n      user-select: none;\n\n      &:hover {\n        cursor: pointer;\n      }\n    `;\n  },\n\n  tokenDefaultIdle2022(t: Theme) {\n    return css`\n      color: ${t.tokenDefaultIdleColor};\n      background: ${t.tokenDefaultIdleBg};\n      border: solid ${t.tokenBorderWidth} ${t.tokenDefaultIdleBorderColor};\n      background-clip: border-box;\n    `;\n  },\n\n  tokenDefaultIdleHovering2022(t: Theme) {\n    return css`\n      &:hover {\n        color: ${t.tokenDefaultIdleColorHover};\n        background: ${t.tokenDefaultIdleBgHover};\n        border: solid ${t.tokenBorderWidth} ${t.tokenDefaultIdleBorderColorHover};\n      }\n    `;\n  },\n\n  tokenDefaultActive2022(t: Theme) {\n    return css`\n      color: ${t.tokenDefaultActiveColor};\n      background: ${t.tokenDefaultActiveBg};\n      border: solid ${t.tokenBorderWidth} ${t.tokenDefaultActiveBorderColor};\n    `;\n  },\n\n  tokenError2022(t: Theme) {\n    return css`\n      border: solid ${t.tokenBorderWidth} ${t.tokenBorderColorError};\n      box-shadow: 0 0 0 ${t.tokenOutlineWidth} ${t.tokenBorderColorError};\n    `;\n  },\n\n  tokenWarning2022(t: Theme) {\n    return css`\n      border: solid ${t.tokenBorderWidth} ${t.tokenBorderColorWarning};\n      box-shadow: 0 0 0 ${t.tokenOutlineWidth} ${t.tokenBorderColorWarning};\n    `;\n  },\n\n  tokenDisabled2022(t: Theme) {\n    return css`\n      padding: ${t.tokenPaddingYDisabled} ${t.tokenPaddingXDisabled};\n      margin: ${t.tokenMarginYDisabled} ${t.tokenMarginXDisabled};\n      user-select: text;\n      cursor: text;\n      color: ${t.tokenTextColorDisabled};\n      pointer-events: none;\n      border: solid 1px ${t.tokenBorderColorDisabled};\n\n      .${globalClasses.removeIcon} {\n        visibility: hidden;\n      }\n    `;\n  },\n\n  disabled(t: Theme) {\n    return css`\n      padding: ${t.tokenPaddingYDisabled} ${t.tokenPaddingXDisabled};\n      margin: ${t.tokenMarginYDisabled} ${t.tokenMarginXDisabled};\n      user-select: text;\n      cursor: text;\n      color: ${t.tokenTextColorDisabled};\n      pointer-events: none;\n\n      .${globalClasses.removeIcon} {\n        visibility: hidden;\n      }\n    `;\n  },\n\n  text(t: Theme) {\n    return css`\n      display: inline-block;\n      padding-bottom: ${t.tokenLegacyTextShift};\n    `;\n  },\n\n  removeIcon(t: Theme) {\n    return css`\n      height: ${t.tokenRemoveIconSize};\n      width: ${t.tokenRemoveIconSize};\n      flex-shrink: 0;\n      padding: ${t.tokenRemoveIconPaddingY} ${t.tokenRemoveIconPaddingX};\n      box-sizing: ${t.tokenRemoveIconBoxSizing};\n      margin-left: ${t.tokenRemoveIconGap};\n      transition: none;\n      fill: currentColor;\n      opacity: 0.5;\n      line-height: 0;\n\n      &:hover {\n        opacity: 1;\n      }\n    `;\n  },\n});\n\ninterface TokenColors {\n  defaultIdle: (t: Theme, v: 'error' | 'warning' | null) => string;\n  defaultActive: (t: Theme, v: 'error' | 'warning' | null) => string;\n  defaultDisabled: (t: Theme) => string;\n  defaultDisabledWarning: (t: Theme) => string;\n  defaultDisabledError: (t: Theme) => string;\n  grayIdle: (t: Theme, v: 'error' | 'warning' | null) => string;\n  grayActive: (t: Theme, v: 'error' | 'warning' | null) => string;\n  blueIdle: (t: Theme, v: 'error' | 'warning' | null) => string;\n  blueActive: (t: Theme, v: 'error' | 'warning' | null) => string;\n  greenIdle: (t: Theme, v: 'error' | 'warning' | null) => string;\n  greenActive: (t: Theme, v: 'error' | 'warning' | null) => string;\n  yellowIdle: (t: Theme, v: 'error' | 'warning' | null) => string;\n  yellowActive: (t: Theme, v: 'error' | 'warning' | null) => string;\n  redIdle: (t: Theme, v: 'error' | 'warning' | null) => string;\n  redActive: (t: Theme, v: 'error' | 'warning' | null) => string;\n  white: (t: Theme, v: 'error' | 'warning' | null) => string;\n  black: (t: Theme, v: 'error' | 'warning' | null) => string;\n}\n\nexport const colorStyles = [\n  { name: 'defaultIdle', color: (t: Theme) => t.tokenDefaultIdle },\n  { name: 'defaultActive', color: (t: Theme) => t.tokenDefaultActive },\n  { name: 'grayIdle', color: (t: Theme) => t.tokenGrayIdle },\n  { name: 'grayActive', color: (t: Theme) => t.tokenGrayActive },\n  { name: 'blueIdle', color: (t: Theme) => t.tokenBlueIdle },\n  { name: 'blueActive', color: (t: Theme) => t.tokenBlueActive },\n  { name: 'greenIdle', color: (t: Theme) => t.tokenGreenIdle },\n  { name: 'greenActive', color: (t: Theme) => t.tokenGreenActive },\n  { name: 'yellowIdle', color: (t: Theme) => t.tokenYellowIdle },\n  { name: 'yellowActive', color: (t: Theme) => t.tokenYellowActive },\n  { name: 'redIdle', color: (t: Theme) => t.tokenRedIdle },\n  { name: 'redActive', color: (t: Theme) => t.tokenRedActive },\n  { name: 'white', color: (t: Theme) => t.tokenWhite },\n  { name: 'black', color: (t: Theme) => t.tokenBlack },\n].reduce(\n  (colors: TokenColors, { name, color }) => ({\n    ...colors,\n    [name](t: Theme, v: 'error' | 'warning') {\n      const getVStyle = () => {\n        if (v === 'error') {\n          return css`\n            box-shadow: 0 0 0 ${t.tokenOutlineWidth} ${t.tokenBorderColorError}, inset 0 0 0 1px ${color(t)};\n          `;\n        } else if (v === 'warning') {\n          return css`\n            box-shadow: 0 0 0 ${t.tokenOutlineWidth} ${t.tokenBorderColorWarning}, inset 0 0 0 1px ${color(t)};\n          `;\n        }\n\n        return '';\n      };\n\n      return css`\n        background-color: ${color(t)};\n        color: ${ColorFunctions.contrast(color(t))};\n        box-shadow: 0 0 0 ${t.tokenBorderWidth} ${ColorFunctions.darken(color(t), '5%')}, inset 0 0 0 1px ${color(t)};\n\n        ${getVStyle()}\n\n        .${globalClasses.removeIcon}:hover {\n          color: ${ColorFunctions.contrast(color(t))};\n        }\n      `;\n    },\n  }),\n  {\n    defaultDisabled(t: Theme) {\n      return css`\n        background-color: ${t.tokenDisabledBg};\n        box-shadow: ${t.tokenShadowDisabled};\n      `;\n    },\n    defaultDisabledWarning(t: Theme) {\n      return css`\n        box-shadow: 0 0 0 ${t.tokenOutlineWidth} ${t.tokenBorderColorWarning}, inset 0 0 0 1px ${t.tokenDisabledBg};\n      `;\n    },\n    defaultDisabledError(t: Theme) {\n      return css`\n        box-shadow: 0 0 0 ${t.tokenOutlineWidth} ${t.tokenBorderColorError}, inset 0 0 0 1px ${t.tokenDisabledBg};\n      `;\n    },\n  } as TokenColors,\n);\n"]}

package/components/Token/Token.styles.d.ts

@@ -4,6 +4,12 @@ export declare const globalClasses: {
 };
 export declare const styles: {
     token(t: Theme): string;
+    tokenDefaultIdle2022(t: Theme): string;
+    tokenDefaultIdleHovering2022(t: Theme): string;
+    tokenDefaultActive2022(t: Theme): string;
+    tokenError2022(t: Theme): string;
+    tokenWarning2022(t: Theme): string;
+    tokenDisabled2022(t: Theme): string;
     disabled(t: Theme): string;
     text(t: Theme): string;
     removeIcon(t: Theme): string;

package/components/Token/locale/index/index.js

@@ -0,0 +1,8 @@
+import { LocaleHelper } from "../../../../lib/locale/LocaleHelper";
+import { componentsLocales as en_GB } from "../locales/en";
+import { componentsLocales as ru_RU } from "../locales/ru";
+export * from "../types";
+export var TokenLocaleHelper = new LocaleHelper({
+  ru_RU: ru_RU,
+  en_GB: en_GB
+});

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

@@ -0,0 +1 @@
+{"version":3,"sources":["index.ts"],"names":["LocaleHelper","componentsLocales","en_GB","ru_RU","TokenLocaleHelper"],"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,iBAAiB,GAAG,IAAIJ,YAAJ,CAA8B;AAC7DG,EAAAA,KAAK,EAALA,KAD6D;AAE7DD,EAAAA,KAAK,EAALA,KAF6D,EAA9B,CAA1B","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 { TokenLocale } from './types';\n\nexport * from './types';\n\nexport const TokenLocaleHelper = new LocaleHelper<TokenLocale>({\n  ru_RU,\n  en_GB,\n});\n"]}

package/components/Token/locale/index/package.json

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

package/components/Token/locale/index.d.ts

@@ -0,0 +1,4 @@
+import { LocaleHelper } from '../../../lib/locale/LocaleHelper';
+import { TokenLocale } from './types';
+export * from './types';
+export declare const TokenLocaleHelper: LocaleHelper<TokenLocale>;

package/components/Token/locale/locales/en/en.js

@@ -0,0 +1,3 @@
+export var componentsLocales = {
+  removeButtonAriaLabel: 'Remove token'
+};

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

@@ -0,0 +1 @@
+{"version":3,"sources":["en.ts"],"names":["componentsLocales","removeButtonAriaLabel"],"mappings":";;AAEA,OAAO,IAAMA,iBAA8B,GAAG;AAC5CC,EAAAA,qBAAqB,EAAE,cADqB,EAAvC","sourcesContent":["import { TokenLocale } from '../types';\n\nexport const componentsLocales: TokenLocale = {\n  removeButtonAriaLabel: 'Remove token',\n};\n"]}

package/components/Token/locale/locales/en/package.json

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

package/components/Token/locale/locales/en.d.ts

@@ -0,0 +1,2 @@
+import { TokenLocale } from '../types';
+export declare const componentsLocales: TokenLocale;

package/components/Token/locale/locales/ru/package.json

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

package/components/Token/locale/locales/ru/ru.js

@@ -0,0 +1,3 @@
+export var componentsLocales = {
+  removeButtonAriaLabel: 'Удалить токен'
+};

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

@@ -0,0 +1 @@
+{"version":3,"sources":["ru.ts"],"names":["componentsLocales","removeButtonAriaLabel"],"mappings":";;AAEA,OAAO,IAAMA,iBAA8B,GAAG;AAC5CC,EAAAA,qBAAqB,EAAE,eADqB,EAAvC","sourcesContent":["import { TokenLocale } from '../types';\n\nexport const componentsLocales: TokenLocale = {\n  removeButtonAriaLabel: 'Удалить токен',\n};\n"]}

package/components/Token/locale/locales/ru.d.ts

@@ -0,0 +1,2 @@
+import { TokenLocale } from '../types';
+export declare const componentsLocales: TokenLocale;

package/components/Token/locale/package.json

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

package/components/Token/locale/types/package.json

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

package/components/Token/locale/types/types.js

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

package/components/Token/locale/types/types.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","sourcesContent":[]}

package/components/Token/locale/types.d.ts

@@ -0,0 +1,3 @@
+export interface TokenLocale {
+    removeButtonAriaLabel: string;
+}

package/components/TokenInput/TokenInput/TokenInput.js

@@ -8,10 +8,11 @@ var _dec, _class, _class2, _temp;
 import _regeneratorRuntime from "@babel/runtime/regenerator";
 import React from 'react';
 import isEqual from 'lodash.isequal';
+import { PopupIds } from "../../../internal/Popup";
 import { isKeyArrowHorizontal, isKeyArrowLeft, isKeyArrowRight, isKeyArrowUp, isKeyArrowVertical, isKeyBackspace, isKeyComma, isKeyDelete, isKeyEnter, isKeyEscape, isShortcutSelectAll } from "../../../lib/events/keyboard/identifiers";
 import * as LayoutEvents from "../../../lib/LayoutEvents";
 import { Token } from "../../Token";
-import { emptyHandler } from "../../../lib/utils";
+import { emptyHandler, getRandomID } from "../../../lib/utils";
 import { ThemeContext } from "../../../lib/theming/ThemeContext";
 import { locale } from "../../../lib/locale/decorators";
 import { MenuItem } from "../../MenuItem/MenuItem";
@@ -19,6 +20,7 @@ import { CommonWrapper } from "../../../internal/CommonWrapper";
 import { cx } from "../../../lib/theming/Emotion";
 import { getRootNode, rootNode } from "../../../lib/rootNode";
 import { createPropsGetter } from "../../../lib/createPropsGetter";
+import { getUid } from "../../../lib/uidUtils";
 import { TokenInputLocaleHelper } from "../locale";
 import { styles } from "../TokenInput.styles";
 import { tokenInputReducer } from "../TokenInputReducer";
@@ -46,7 +48,8 @@ export var DefaultState = {
 };
 export var TokenInputDataTids = {
   root: 'TokenInput__root',
-  tokenInputMenu: 'TokenInputMenu__root'
+  tokenInputMenu: 'TokenInputMenu__root',
+  label: 'TokenInput__label'
 };
 
 var defaultToKey = function defaultToKey(item) {
@@ -86,6 +89,8 @@ export var TokenInput = (_dec = locale('TokenInput', TokenInputLocaleHelper), ro
     _this = _React$PureComponent.call.apply(_React$PureComponent, [this].concat(args)) || this;
     _this.getProps = createPropsGetter(TokenInput.defaultProps);
     _this.state = DefaultState;
+    _this.textareaId = getUid();
+    _this.rootId = PopupIds.root + getRandomID();
     _this.input = null;
     _this.tokensInputMenu = null;
     _this.textHelper = null;
@@ -1039,7 +1044,8 @@ export var TokenInput = (_dec = locale('TokenInput', TokenInputLocaleHelper), ro
         inputMode = _this$props2.inputMode,
         renderTotalCount = _this$props2.renderTotalCount,
         totalCount = _this$props2.totalCount,
-        ariaDescribedby = _this$props2['aria-describedby'];
+        ariaDescribedby = _this$props2['aria-describedby'],
+        ariaLabel = _this$props2['aria-label'];
 
     var _this$getProps8 = this.getProps(),
         selectedItems = _this$getProps8.selectedItems,
@@ -1071,7 +1077,7 @@ export var TokenInput = (_dec = locale('TokenInput', TokenInputLocaleHelper), ro
       // в ie не работает, но альтернативный способ --- дать tabindex для label --- предположительно ещё сложнее
       caretColor: this.isCursorVisible ? undefined : 'transparent'
     };
-    var labelClassName = cx(styles.label(theme), (_cx = {}, _cx[styles.labelDisabled(theme)] = !!disabled, _cx[styles.labelFocused(theme)] = !!inFocus, _cx[styles.error(theme)] = !!error, _cx[styles.warning(theme)] = !!warning, _cx));
+    var labelClassName = cx(styles.label(theme), (_cx = {}, _cx[styles.hovering(this.theme)] = !inFocus && !disabled && !warning && !error, _cx[styles.labelDisabled(theme)] = !!disabled, _cx[styles.labelFocused(theme)] = !!inFocus, _cx[styles.error(theme)] = !!error, _cx[styles.warning(theme)] = !!warning, _cx));
     var inputClassName = cx(styles.input(theme), (_cx2 = {}, _cx2[styles.inputDisabled(theme)] = !!disabled, _cx2[styles.inputEditing(theme)] = this.isEditingMode, _cx2));
     return /*#__PURE__*/React.createElement(CommonWrapper, _extends({
       rootNodeRef: this.setRootNode
@@ -1086,13 +1092,17 @@ export var TokenInput = (_dec = locale('TokenInput', TokenInputLocaleHelper), ro
       },
       className: labelClassName,
       onMouseDown: this.handleWrapperMouseDown,
-      onMouseUp: this.handleWrapperMouseUp
+      onMouseUp: this.handleWrapperMouseUp,
+      htmlFor: this.textareaId,
+      "aria-controls": this.rootId,
+      "data-tid": TokenInputDataTids.label
     }, /*#__PURE__*/React.createElement(TextWidthHelper, {
       ref: this.textHelperRef,
       classHelp: cx(styles.helperText(theme), (_cx3 = {}, _cx3[styles.helperTextEditing(theme)] = this.isEditingMode, _cx3)),
       text: inputValue,
       theme: this.theme
     }), this.renderTokensStart(), /*#__PURE__*/React.createElement("textarea", {
+      id: this.textareaId,
       ref: this.inputRef,
       value: inputValue,
       style: inputInlineStyles,
@@ -1106,8 +1116,10 @@ export var TokenInput = (_dec = locale('TokenInput', TokenInputLocaleHelper), ro
       onKeyDown: this.handleKeyDown,
       onPaste: this.handleInputPaste,
       inputMode: inputMode,
+      "aria-label": ariaLabel,
       "aria-describedby": ariaDescribedby
     }), showMenu && /*#__PURE__*/React.createElement(TokenInputMenu, {
+      popupMenuId: this.rootId,
       ref: this.tokensInputMenuRef,
       items: autocompleteItems,
       loading: loading,