@skbkontur/react-ui 6.0.8 → 6.1.0

package/components/Toast/ToastView.js.map

@@ -1 +1 @@
-{"version":3,"file":"ToastView.js","sourceRoot":"","sources":["../../../components/Toast/ToastView.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { Emotion } from '@emotion/css/create-instance';\nimport type { AriaAttributes } from 'react';\nimport React from 'react';\n\nimport { CloseButtonIcon } from '../../internal/CloseButtonIcon/CloseButtonIcon.js';\nimport type { CommonProps } from '../../internal/CommonWrapper/index.js';\nimport { CommonWrapper } from '../../internal/CommonWrapper/index.js';\nimport { ZIndex } from '../../internal/ZIndex/index.js';\nimport { locale } from '../../lib/locale/decorators.js';\nimport { withRenderEnvironment } from '../../lib/renderEnvironment/index.js';\nimport type { TGetRootNode, TSetRootNode } from '../../lib/rootNode/index.js';\nimport { rootNode } from '../../lib/rootNode/index.js';\nimport type { Theme } from '../../lib/theming/Theme.js';\nimport { ThemeContext } from '../../lib/theming/ThemeContext.js';\nimport type { Nullable } from '../../typings/utility-types.js';\nimport type { ToastLocale } from './locale/index.js';\nimport { ToastLocaleHelper } from './locale/index.js';\nimport type { Action, ToastUse } from './Toast.js';\nimport { ToastDataTids } from './Toast.js';\nimport { getStyles } from './ToastView.styles.js';\n\nexport interface ToastViewProps extends Pick<AriaAttributes, 'aria-label'>, CommonProps {\n  /** Задает контент тоста. */\n  children?: React.ReactNode;\n  /** Добавляет возможность действия и кнопку закрытия у тоста. */\n  action?: Nullable<Action>;\n  showCloseIcon?: boolean;\n  onClose?: () => void;\n  onMouseEnter?: () => void;\n  onMouseLeave?: () => void;\n  /**\n   * Задаёт стили для отображения тоста в зависимости от назначения.\n   **/\n  use?: ToastUse;\n}\n\n@withRenderEnvironment\n@rootNode\n@locale('Toast', ToastLocaleHelper)\nexport class ToastView extends React.Component<ToastViewProps> {\n  private styles!: ReturnType<typeof getStyles>;\n  private emotion!: Emotion;\n  private cx!: Emotion['cx'];\n  private theme!: Theme;\n  public getRootNode!: TGetRootNode;\n  private setRootNode!: TSetRootNode;\n  private readonly locale!: ToastLocale;\n\n  public render(): React.JSX.Element {\n    this.styles = getStyles(this.emotion);\n\n    return (\n      <ThemeContext.Consumer>\n        {(theme) => {\n          this.theme = theme;\n          return this.renderMain();\n        }}\n      </ThemeContext.Consumer>\n    );\n  }\n\n  private renderMain = () => {\n    const { action, showCloseIcon, onClose, onMouseEnter, onMouseLeave, use } = this.props;\n\n    const toastCloseColors =\n      use === 'error'\n        ? { hover: this.theme.toastCloseHoverColorError, default: this.theme.toastCloseColorError }\n        : { hover: this.theme.toastCloseHoverColor, default: this.theme.toastCloseColor };\n\n    const toastActionColorsClassName =\n      use === 'error' ? this.styles.toastActionErrorColor(this.theme) : this.styles.toastActionDefaultColor(this.theme);\n    const toastActionClassNames = this.cx(this.styles.link(this.theme), toastActionColorsClassName);\n\n    const link = action ? (\n      <button\n        aria-label={action['aria-label']}\n        data-tid={ToastDataTids.action}\n        className={toastActionClassNames}\n        onClick={action.handler}\n      >\n        {action.label}\n      </button>\n    ) : null;\n\n    const close =\n      action || showCloseIcon ? (\n        <span className={this.styles.closeWrapper(this.theme)}>\n          <CloseButtonIcon\n            aria-label={this.locale.closeButtonAriaLabel}\n            data-tid={ToastDataTids.close}\n            onClick={onClose}\n            size={parseInt(this.theme.toastCloseSize)}\n            side={40}\n            color={toastCloseColors.default}\n            colorHover={toastCloseColors.hover}\n            tabbable={false}\n          />\n        </span>\n      ) : null;\n\n    const rootClassName = this.cx(this.styles.root(this.theme), this.styles[use ?? 'default'](this.theme));\n\n    return (\n      <CommonWrapper {...this.props}>\n        <ZIndex priority=\"Toast\" className={this.styles.wrapper(this.theme)}>\n          <div\n            data-tid={ToastDataTids.toastView}\n            className={rootClassName}\n            ref={this.setRootNode}\n            onMouseEnter={onMouseEnter}\n            onMouseLeave={onMouseLeave}\n          >\n            <span>{this.props.children}</span>\n            {link}\n            {close}\n          </div>\n        </ZIndex>\n      </CommonWrapper>\n    );\n  };\n}\n"]}
+{"version":3,"file":"ToastView.js","sourceRoot":"","sources":["../../../components/Toast/ToastView.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { Emotion } from '@emotion/css/create-instance';\nimport type { AriaAttributes } from 'react';\nimport React from 'react';\n\nimport { CloseButtonIcon } from '../../internal/CloseButtonIcon/CloseButtonIcon.js';\nimport type { CommonProps } from '../../internal/CommonWrapper/index.js';\nimport { CommonWrapper } from '../../internal/CommonWrapper/index.js';\nimport { ZIndex } from '../../internal/ZIndex/index.js';\nimport { locale } from '../../lib/locale/decorators.js';\nimport { withRenderEnvironment } from '../../lib/renderEnvironment/index.js';\nimport type { TGetRootNode, TSetRootNode } from '../../lib/rootNode/index.js';\nimport { rootNode } from '../../lib/rootNode/index.js';\nimport type { Theme } from '../../lib/theming/Theme.js';\nimport { ThemeContext } from '../../lib/theming/ThemeContext.js';\nimport { isThemeGTE } from '../../lib/theming/ThemeHelpers.js';\nimport type { Nullable } from '../../typings/utility-types.js';\nimport { responsiveLayout } from '../ResponsiveLayout/decorator.js';\nimport type { ToastLocale } from './locale/index.js';\nimport { ToastLocaleHelper } from './locale/index.js';\nimport type { Action, ToastUse } from './Toast.js';\nimport { ToastDataTids } from './Toast.js';\nimport { getStyles } from './ToastView.styles.js';\n\nexport interface ToastViewProps extends Pick<AriaAttributes, 'aria-label'>, CommonProps {\n  /** Отображает контент уведомления. */\n  children?: React.ReactNode;\n  /** Добавляет кнопку действия в тост. */\n  action?: Nullable<Action>;\n  /** Показывает кнопку закрытия рядом с текстом. */\n  showCloseIcon?: boolean;\n  /** Вызывается при закрытии тоста из разметки. */\n  onClose?: () => void;\n  /** Вызывается при наведении курсора на тост. */\n  onMouseEnter?: () => void;\n  /** Вызывается при уходе курсора с тоста. */\n  onMouseLeave?: () => void;\n  /** Выбирает стиль оформления: обычный или ошибка (`error`). */\n  use?: ToastUse;\n}\n\n@responsiveLayout\n@withRenderEnvironment\n@rootNode\n@locale('Toast', ToastLocaleHelper)\nexport class ToastView extends React.Component<ToastViewProps> {\n  private styles!: ReturnType<typeof getStyles>;\n  private emotion!: Emotion;\n  private cx!: Emotion['cx'];\n  private theme!: Theme;\n  public getRootNode!: TGetRootNode;\n  private setRootNode!: TSetRootNode;\n  private readonly locale!: ToastLocale;\n  private isMobileLayout!: boolean;\n\n  public render(): React.JSX.Element {\n    this.styles = getStyles(this.emotion);\n\n    return (\n      <ThemeContext.Consumer>\n        {(theme) => {\n          this.theme = theme;\n          return this.renderMain();\n        }}\n      </ThemeContext.Consumer>\n    );\n  }\n\n  private renderMain = () => {\n    const { action, showCloseIcon, onClose, onMouseEnter, onMouseLeave, use } = this.props;\n\n    const isTheme6_1 = isThemeGTE(this.theme, '6.1');\n\n    const toastCloseColors =\n      use === 'error'\n        ? {\n            hover: this.theme.toastCloseHoverColorError,\n            default: this.theme.toastCloseColorError,\n          }\n        : {\n            hover: this.theme.toastCloseHoverColor,\n            default: this.theme.toastCloseColor,\n          };\n\n    const toastActionColorsClassName =\n      use === 'error' ? this.styles.toastActionErrorColor(this.theme) : this.styles.toastActionDefaultColor(this.theme);\n    const toastActionClassNames = this.cx(\n      this.styles.link(this.theme),\n      isTheme6_1 && this.styles.link6_1(this.theme),\n\n      toastActionColorsClassName,\n    );\n\n    const link = action ? (\n      <button\n        aria-label={action['aria-label']}\n        data-tid={ToastDataTids.action}\n        className={toastActionClassNames}\n        onClick={action.handler}\n      >\n        {action.label}\n      </button>\n    ) : null;\n\n    const themeDependantProps = isTheme6_1\n      ? {\n          style: {\n            height: '100%',\n          },\n          side: parseInt(this.theme.toastCloseBtnSide),\n        }\n      : { side: 40, size: parseInt(this.theme.toastCloseSize) };\n\n    const close =\n      action || showCloseIcon ? (\n        <span className={this.cx(this.styles.closeWrapper(this.theme), isTheme6_1 && this.styles.closeWrapper6_1())}>\n          <CloseButtonIcon\n            aria-label={this.locale.closeButtonAriaLabel}\n            data-tid={ToastDataTids.close}\n            onClick={onClose}\n            {...themeDependantProps}\n            color={toastCloseColors.default}\n            colorHover={toastCloseColors.hover}\n            tabbable={false}\n          />\n        </span>\n      ) : null;\n\n    const rootClassName = this.cx(\n      this.styles.root(this.theme),\n      isTheme6_1 && this.styles.root6_1(),\n      isTheme6_1 && this.isMobileLayout && this.styles.rootMobile(this.theme),\n      this.styles[use ?? 'default'](this.theme),\n    );\n\n    const wrapperClassName = this.cx(this.styles.wrapper(this.theme), isTheme6_1 && this.styles.wrapper6_1(this.theme));\n\n    return (\n      <CommonWrapper {...this.props}>\n        <ZIndex priority=\"Toast\" className={wrapperClassName}>\n          <div\n            data-tid={ToastDataTids.toastView}\n            className={rootClassName}\n            ref={this.setRootNode}\n            onMouseEnter={onMouseEnter}\n            onMouseLeave={onMouseLeave}\n          >\n            {isTheme6_1 ? (\n              <span className={this.styles.content(this.theme)}>\n                <span className={this.cx(this.isMobileLayout && this.styles.ellipsisContent())}>\n                  {this.props.children}\n                </span>\n              </span>\n            ) : (\n              <span>{this.props.children}</span>\n            )}\n            {link}\n            {close}\n          </div>\n        </ZIndex>\n      </CommonWrapper>\n    );\n  };\n}\n"]}

package/components/Toast/ToastView.styles.d.ts

@@ -1,11 +1,18 @@
 import type { Theme } from '../../lib/theming/Theme.js';
 export declare const getStyles: import("../../lib/theming/Emotion.js").StylesGetter<{
     root(t: Theme): string;
+    root6_1(): string;
+    rootMobile(t: Theme): string;
     default(t: Theme): string;
     error(t: Theme): string;
     wrapper(t: Theme): string;
+    wrapper6_1(t: Theme): string;
+    content(t: Theme): string;
+    ellipsisContent(): string;
     closeWrapper(t: Theme): string;
+    closeWrapper6_1(): string;
     link(t: Theme): string;
+    link6_1(t: Theme): string;
     toastActionErrorColor(t: Theme): string;
     toastActionDefaultColor(t: Theme): string;
 }>;

package/components/Toast/ToastView.styles.js

@@ -15,31 +15,53 @@ export var getStyles = memoizeGetStyles(function (_a) {
             var _a = getVerticalPaddings(t), paddingTop = _a[0], paddingBottom = _a[1];
             return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      border-radius: ", ";\n      border: ", ";\n      display: inline-flex;\n      font-size: ", ";\n      line-height: ", ";\n      opacity: 1;\n      padding: ", " ", " ", ";\n      position: relative;\n      top: ", ";\n    "], ["\n      border-radius: ", ";\n      border: ", ";\n      display: inline-flex;\n      font-size: ", ";\n      line-height: ", ";\n      opacity: 1;\n      padding: ", " ", " ", ";\n      position: relative;\n      top: ", ";\n    "])), t.toastBorderRadius, t.toastBorder, t.toastFontSize, t.toastLineHeight, paddingTop, t.toastPaddingX, paddingBottom, t.toastTop);
         },
+        root6_1: function () {
+            return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n      padding: 0;\n    "], ["\n      padding: 0;\n    "])));
+        },
+        rootMobile: function (t) {
+            return css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n      top: ", ";\n      font-size: ", ";\n    "], ["\n      top: ", ";\n      font-size: ", ";\n    "])), t.mobileToastTop, t.mobileToastFontSize);
+        },
         default: function (t) {
-            return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n      background: ", ";\n      color: ", ";\n    "], ["\n      background: ", ";\n      color: ", ";\n    "])), t.toastBg, t.toastColor);
+            return css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n      background: ", ";\n      color: ", ";\n    "], ["\n      background: ", ";\n      color: ", ";\n    "])), t.toastBg, t.toastColor);
         },
         error: function (t) {
-            return css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n      background: ", ";\n      color: ", ";\n    "], ["\n      background: ", ";\n      color: ", ";\n    "])), t.toastErrorBg, t.toastColorError);
+            return css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n      background: ", ";\n      color: ", ";\n    "], ["\n      background: ", ";\n      color: ", ";\n    "])), t.toastErrorBg, t.toastColorError);
         },
         wrapper: function (t) {
-            return css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n      position: fixed;\n      top: 0;\n      left: 0;\n      right: 0;\n      height: 0;\n      text-align: center;\n      border-radius: ", ";\n    "], ["\n      position: fixed;\n      top: 0;\n      left: 0;\n      right: 0;\n      height: 0;\n      text-align: center;\n      border-radius: ", ";\n    "])), t.toastBorderRadius);
+            return css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n      position: fixed;\n      top: 0;\n      left: 0;\n      right: 0;\n      height: 0;\n      text-align: center;\n      border-radius: ", ";\n    "], ["\n      position: fixed;\n      top: 0;\n      left: 0;\n      right: 0;\n      height: 0;\n      text-align: center;\n      border-radius: ", ";\n    "])), t.toastBorderRadius);
+        },
+        wrapper6_1: function (t) {
+            return css(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n      padding: 0 ", ";\n    "], ["\n      padding: 0 ", ";\n    "])), t.toastPaddingX);
+        },
+        content: function (t) {
+            var _a = getVerticalPaddings(t), paddingTop = _a[0], paddingBottom = _a[1];
+            return css(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n      padding: ", " ", " ", ";\n    "], ["\n      padding: ", " ", " ", ";\n    "])), paddingTop, t.toastPaddingX, paddingBottom);
+        },
+        ellipsisContent: function () {
+            return css(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n      display: -webkit-box;\n      -webkit-line-clamp: 2;\n      -webkit-box-orient: vertical;\n      overflow: hidden;\n      text-overflow: ellipsis;\n      text-align: start;\n    "], ["\n      display: -webkit-box;\n      -webkit-line-clamp: 2;\n      -webkit-box-orient: vertical;\n      overflow: hidden;\n      text-overflow: ellipsis;\n      text-align: start;\n    "])));
         },
         closeWrapper: function (t) {
             var _a = getVerticalPaddings(t), paddingTop = _a[0], paddingBottom = _a[1];
-            return css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n      display: flex;\n      margin: -", " -", " -", " 0;\n    "], ["\n      display: flex;\n      margin: -", " -", " -", " 0;\n    "])), paddingTop, t.toastPaddingX, paddingBottom);
+            return css(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n      display: flex;\n      margin: -", " -", " -", " 0;\n    "], ["\n      display: flex;\n      margin: -", " -", " -", " 0;\n    "])), paddingTop, t.toastPaddingX, paddingBottom);
+        },
+        closeWrapper6_1: function () {
+            return css(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n      margin: 0;\n    "], ["\n      margin: 0;\n    "])));
         },
         link: function (t) {
             var _a = getVerticalPaddings(t), paddingTop = _a[0], paddingBottom = _a[1];
             var padding = "".concat(paddingTop, " ").concat(t.toastLinkPadding);
-            return css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n      border: none;\n      font: inherit;\n      color: ", ";\n      cursor: pointer;\n      display: inline-block;\n      font-weight: 600;\n      background-color: transparent;\n\n      margin: -", " 0 -", " ", ";\n\n      padding: ", ";\n      transition: background ", " ", ";\n      &:hover {\n        background: ", ";\n        text-decoration: ", ";\n      }\n      padding: ", ";\n      transition: background ", " ", ";\n    "], ["\n      border: none;\n      font: inherit;\n      color: ", ";\n      cursor: pointer;\n      display: inline-block;\n      font-weight: 600;\n      background-color: transparent;\n\n      margin: -", " 0 -", " ", ";\n\n      padding: ", ";\n      transition: background ", " ", ";\n      &:hover {\n        background: ", ";\n        text-decoration: ", ";\n      }\n      padding: ", ";\n      transition: background ", " ", ";\n    "])), t.toastLinkColor, paddingTop, paddingBottom, t.toastPaddingX, padding, t.transitionDuration, t.transitionTimingFunction, t.toastLinkBgHover, t.toastLinkTextDecorationHover, padding, t.transitionDuration, t.transitionTimingFunction);
+            return css(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n      border: none;\n      font: inherit;\n      color: ", ";\n      cursor: pointer;\n      display: inline-block;\n      font-weight: 600;\n      background-color: transparent;\n\n      margin: -", " 0 -", " ", ";\n\n      padding: ", ";\n      transition: background ", " ", ";\n      &:hover {\n        background: ", ";\n        text-decoration: ", ";\n      }\n      padding: ", ";\n      transition: background ", " ", ";\n    "], ["\n      border: none;\n      font: inherit;\n      color: ", ";\n      cursor: pointer;\n      display: inline-block;\n      font-weight: 600;\n      background-color: transparent;\n\n      margin: -", " 0 -", " ", ";\n\n      padding: ", ";\n      transition: background ", " ", ";\n      &:hover {\n        background: ", ";\n        text-decoration: ", ";\n      }\n      padding: ", ";\n      transition: background ", " ", ";\n    "])), t.toastLinkColor, paddingTop, paddingBottom, t.toastPaddingX, padding, t.transitionDuration, t.transitionTimingFunction, t.toastLinkBgHover, t.toastLinkTextDecorationHover, padding, t.transitionDuration, t.transitionTimingFunction);
+        },
+        link6_1: function (t) {
+            return css(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n      margin: 0;\n      padding: 0 ", ";\n    "], ["\n      margin: 0;\n      padding: 0 ", ";\n    "])), t.toastLinkPadding);
         },
         toastActionErrorColor: function (t) {
-            return css(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n      color: ", ";\n\n      &:hover {\n        background: ", ";\n        text-decoration: ", ";\n      }\n\n      &:active {\n        background: ", ";\n        color: ", ";\n      }\n    "], ["\n      color: ", ";\n\n      &:hover {\n        background: ", ";\n        text-decoration: ", ";\n      }\n\n      &:active {\n        background: ", ";\n        color: ", ";\n      }\n    "])), t.toastLinkColorError, t.toastLinkBgHoverError, t.toastLinkTextDecorationHover, t.toastLinkBgActiveError, t.toastLinkColorActiveError);
+            return css(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n      color: ", ";\n\n      &:hover {\n        background: ", ";\n        text-decoration: ", ";\n      }\n\n      &:active {\n        background: ", ";\n        color: ", ";\n      }\n    "], ["\n      color: ", ";\n\n      &:hover {\n        background: ", ";\n        text-decoration: ", ";\n      }\n\n      &:active {\n        background: ", ";\n        color: ", ";\n      }\n    "])), t.toastLinkColorError, t.toastLinkBgHoverError, t.toastLinkTextDecorationHover, t.toastLinkBgActiveError, t.toastLinkColorActiveError);
         },
         toastActionDefaultColor: function (t) {
-            return css(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n      color: ", ";\n\n      &:hover {\n        background: ", ";\n        text-decoration: ", ";\n      }\n\n      &:active {\n        background: ", ";\n      }\n    "], ["\n      color: ", ";\n\n      &:hover {\n        background: ", ";\n        text-decoration: ", ";\n      }\n\n      &:active {\n        background: ", ";\n      }\n    "])), t.toastLinkColor, t.toastLinkBgHover, t.toastLinkTextDecorationHover, t.toastLinkBgActive);
+            return css(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n      color: ", ";\n\n      &:hover {\n        background: ", ";\n        text-decoration: ", ";\n      }\n\n      &:active {\n        background: ", ";\n      }\n    "], ["\n      color: ", ";\n\n      &:hover {\n        background: ", ";\n        text-decoration: ", ";\n      }\n\n      &:active {\n        background: ", ";\n      }\n    "])), t.toastLinkColor, t.toastLinkBgHover, t.toastLinkTextDecorationHover, t.toastLinkBgActive);
         },
     });
 });
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15;
 //# sourceMappingURL=ToastView.styles.js.map

package/components/Toast/ToastView.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"ToastView.styles.js","sourceRoot":"","sources":["../../../components/Toast/ToastView.styles.ts"],"names":[],"mappings":";;;;AAEA,OAAO,EAAE,gBAAgB,EAAE,MAAM,8BAA8B,CAAC;AAGhE,IAAM,mBAAmB,GAAG,UAAC,KAAY;IAC/B,IAAA,aAAa,GAAK,KAAK,cAAV,CAAW;IAChC,IAAM,QAAQ,GAAG,QAAQ,CAAC,aAAa,CAAC,CAAC;IAEzC,OAAO,CAAC,UAAG,QAAQ,OAAI,EAAE,UAAG,QAAQ,OAAI,CAAC,CAAC;AAC5C,CAAC,CAAC;AAEF,MAAM,CAAC,IAAM,SAAS,GAAG,gBAAgB,CAAC,UAAC,EAAgB;QAAd,GAAG,SAAA;IAAgB,OAAA,CAAC;QAC/D,IAAI,YAAC,CAAQ;YACL,IAAA,KAA8B,mBAAmB,CAAC,CAAC,CAAC,EAAnD,UAAU,QAAA,EAAE,aAAa,QAA0B,CAAC;YAC3D,OAAO,GAAG,2SAAA,yBACS,EAAmB,mBAC1B,EAAa,mDAEV,EAAe,wBACb,EAAiB,uCAErB,EAAU,GAAI,EAAe,GAAI,EAAa,2CAElD,EAAU,SAClB,KATkB,CAAC,CAAC,iBAAiB,EAC1B,CAAC,CAAC,WAAW,EAEV,CAAC,CAAC,aAAa,EACb,CAAC,CAAC,eAAe,EAErB,UAAU,EAAI,CAAC,CAAC,aAAa,EAAI,aAAa,EAElD,CAAC,CAAC,QAAQ,EACjB;QACJ,CAAC;QAED,OAAO,YAAC,CAAQ;YACd,OAAO,GAAG,wHAAA,sBACM,EAAS,kBACd,EAAY,SACtB,KAFe,CAAC,CAAC,OAAO,EACd,CAAC,CAAC,UAAU,EACrB;QACJ,CAAC;QAED,KAAK,YAAC,CAAQ;YACZ,OAAO,GAAG,wHAAA,sBACM,EAAc,kBACnB,EAAiB,SAC3B,KAFe,CAAC,CAAC,YAAY,EACnB,CAAC,CAAC,eAAe,EAC1B;QACJ,CAAC;QAED,OAAO,YAAC,CAAQ;YACd,OAAO,GAAG,4NAAA,8IAOS,EAAmB,SACrC,KADkB,CAAC,CAAC,iBAAiB,EACpC;QACJ,CAAC;QAED,YAAY,YAAC,CAAQ;YACb,IAAA,KAA8B,mBAAmB,CAAC,CAAC,CAAC,EAAnD,UAAU,QAAA,EAAE,aAAa,QAA0B,CAAC;YAC3D,OAAO,GAAG,qIAAA,yCAEG,EAAU,IAAK,EAAe,IAAK,EAAa,WAC5D,KADY,UAAU,EAAK,CAAC,CAAC,aAAa,EAAK,aAAa,EAC3D;QACJ,CAAC;QAED,IAAI,YAAC,CAAQ;YACL,IAAA,KAA8B,mBAAmB,CAAC,CAAC,CAAC,EAAnD,UAAU,QAAA,EAAE,aAAa,QAA0B,CAAC;YAC3D,IAAM,OAAO,GAAG,UAAG,UAAU,cAAI,CAAC,CAAC,gBAAgB,CAAE,CAAC;YAEtD,OAAO,GAAG,yfAAA,4DAGC,EAAgB,2IAMd,EAAU,MAAO,EAAa,GAAI,EAAe,sBAEjD,EAAO,kCACO,EAAoB,GAAI,EAA0B,0CAE3D,EAAkB,8BACb,EAA8B,6BAExC,EAAO,kCACO,EAAoB,GAAI,EAA0B,SAC5E,KAhBU,CAAC,CAAC,cAAc,EAMd,UAAU,EAAO,aAAa,EAAI,CAAC,CAAC,aAAa,EAEjD,OAAO,EACO,CAAC,CAAC,kBAAkB,EAAI,CAAC,CAAC,wBAAwB,EAE3D,CAAC,CAAC,gBAAgB,EACb,CAAC,CAAC,4BAA4B,EAExC,OAAO,EACO,CAAC,CAAC,kBAAkB,EAAI,CAAC,CAAC,wBAAwB,EAC3E;QACJ,CAAC;QAED,qBAAqB,YAAC,CAAQ;YAC5B,OAAO,GAAG,oQAAA,iBACC,EAAqB,4CAGd,EAAuB,8BAClB,EAA8B,sDAInC,EAAwB,oBAC7B,EAA2B,kBAEvC,KAXU,CAAC,CAAC,mBAAmB,EAGd,CAAC,CAAC,qBAAqB,EAClB,CAAC,CAAC,4BAA4B,EAInC,CAAC,CAAC,sBAAsB,EAC7B,CAAC,CAAC,yBAAyB,EAEtC;QACJ,CAAC;QAED,uBAAuB,YAAC,CAAQ;YAC9B,OAAO,GAAG,8OAAA,iBACC,EAAgB,4CAGT,EAAkB,8BACb,EAA8B,sDAInC,EAAmB,kBAEpC,KAVU,CAAC,CAAC,cAAc,EAGT,CAAC,CAAC,gBAAgB,EACb,CAAC,CAAC,4BAA4B,EAInC,CAAC,CAAC,iBAAiB,EAEnC;QACJ,CAAC;KACF,CAAC;AA1G8D,CA0G9D,CAAC,CAAC","sourcesContent":["import type { Emotion } from '@emotion/css/create-instance';\n\nimport { memoizeGetStyles } from '../../lib/theming/Emotion.js';\nimport type { Theme } from '../../lib/theming/Theme.js';\n\nconst getVerticalPaddings = (theme: Theme) => {\n  const { toastPaddingY } = theme;\n  const paddingY = parseInt(toastPaddingY);\n\n  return [`${paddingY}px`, `${paddingY}px`];\n};\n\nexport const getStyles = memoizeGetStyles(({ css }: Emotion) => ({\n  root(t: Theme) {\n    const [paddingTop, paddingBottom] = getVerticalPaddings(t);\n    return css`\n      border-radius: ${t.toastBorderRadius};\n      border: ${t.toastBorder};\n      display: inline-flex;\n      font-size: ${t.toastFontSize};\n      line-height: ${t.toastLineHeight};\n      opacity: 1;\n      padding: ${paddingTop} ${t.toastPaddingX} ${paddingBottom};\n      position: relative;\n      top: ${t.toastTop};\n    `;\n  },\n\n  default(t: Theme) {\n    return css`\n      background: ${t.toastBg};\n      color: ${t.toastColor};\n    `;\n  },\n\n  error(t: Theme) {\n    return css`\n      background: ${t.toastErrorBg};\n      color: ${t.toastColorError};\n    `;\n  },\n\n  wrapper(t: Theme) {\n    return css`\n      position: fixed;\n      top: 0;\n      left: 0;\n      right: 0;\n      height: 0;\n      text-align: center;\n      border-radius: ${t.toastBorderRadius};\n    `;\n  },\n\n  closeWrapper(t: Theme) {\n    const [paddingTop, paddingBottom] = getVerticalPaddings(t);\n    return css`\n      display: flex;\n      margin: -${paddingTop} -${t.toastPaddingX} -${paddingBottom} 0;\n    `;\n  },\n\n  link(t: Theme) {\n    const [paddingTop, paddingBottom] = getVerticalPaddings(t);\n    const padding = `${paddingTop} ${t.toastLinkPadding}`;\n\n    return css`\n      border: none;\n      font: inherit;\n      color: ${t.toastLinkColor};\n      cursor: pointer;\n      display: inline-block;\n      font-weight: 600;\n      background-color: transparent;\n\n      margin: -${paddingTop} 0 -${paddingBottom} ${t.toastPaddingX};\n\n      padding: ${padding};\n      transition: background ${t.transitionDuration} ${t.transitionTimingFunction};\n      &:hover {\n        background: ${t.toastLinkBgHover};\n        text-decoration: ${t.toastLinkTextDecorationHover};\n      }\n      padding: ${padding};\n      transition: background ${t.transitionDuration} ${t.transitionTimingFunction};\n    `;\n  },\n\n  toastActionErrorColor(t: Theme) {\n    return css`\n      color: ${t.toastLinkColorError};\n\n      &:hover {\n        background: ${t.toastLinkBgHoverError};\n        text-decoration: ${t.toastLinkTextDecorationHover};\n      }\n\n      &:active {\n        background: ${t.toastLinkBgActiveError};\n        color: ${t.toastLinkColorActiveError};\n      }\n    `;\n  },\n\n  toastActionDefaultColor(t: Theme) {\n    return css`\n      color: ${t.toastLinkColor};\n\n      &:hover {\n        background: ${t.toastLinkBgHover};\n        text-decoration: ${t.toastLinkTextDecorationHover};\n      }\n\n      &:active {\n        background: ${t.toastLinkBgActive};\n      }\n    `;\n  },\n}));\n"]}
+{"version":3,"file":"ToastView.styles.js","sourceRoot":"","sources":["../../../components/Toast/ToastView.styles.ts"],"names":[],"mappings":"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","sourcesContent":["import type { Emotion } from '@emotion/css/create-instance';\n\nimport { memoizeGetStyles } from '../../lib/theming/Emotion.js';\nimport type { Theme } from '../../lib/theming/Theme.js';\n\nconst getVerticalPaddings = (theme: Theme) => {\n  const { toastPaddingY } = theme;\n  const paddingY = parseInt(toastPaddingY);\n\n  return [`${paddingY}px`, `${paddingY}px`];\n};\n\nexport const getStyles = memoizeGetStyles(({ css }: Emotion) => ({\n  root(t: Theme) {\n    const [paddingTop, paddingBottom] = getVerticalPaddings(t);\n    return css`\n      border-radius: ${t.toastBorderRadius};\n      border: ${t.toastBorder};\n      display: inline-flex;\n      font-size: ${t.toastFontSize};\n      line-height: ${t.toastLineHeight};\n      opacity: 1;\n      padding: ${paddingTop} ${t.toastPaddingX} ${paddingBottom};\n      position: relative;\n      top: ${t.toastTop};\n    `;\n  },\n\n  root6_1() {\n    return css`\n      padding: 0;\n    `;\n  },\n\n  rootMobile(t: Theme) {\n    return css`\n      top: ${t.mobileToastTop};\n      font-size: ${t.mobileToastFontSize};\n    `;\n  },\n\n  default(t: Theme) {\n    return css`\n      background: ${t.toastBg};\n      color: ${t.toastColor};\n    `;\n  },\n\n  error(t: Theme) {\n    return css`\n      background: ${t.toastErrorBg};\n      color: ${t.toastColorError};\n    `;\n  },\n\n  wrapper(t: Theme) {\n    return css`\n      position: fixed;\n      top: 0;\n      left: 0;\n      right: 0;\n      height: 0;\n      text-align: center;\n      border-radius: ${t.toastBorderRadius};\n    `;\n  },\n\n  wrapper6_1(t: Theme) {\n    return css`\n      padding: 0 ${t.toastPaddingX};\n    `;\n  },\n\n  content(t: Theme) {\n    const [paddingTop, paddingBottom] = getVerticalPaddings(t);\n    return css`\n      padding: ${paddingTop} ${t.toastPaddingX} ${paddingBottom};\n    `;\n  },\n\n  ellipsisContent() {\n    return css`\n      display: -webkit-box;\n      -webkit-line-clamp: 2;\n      -webkit-box-orient: vertical;\n      overflow: hidden;\n      text-overflow: ellipsis;\n      text-align: start;\n    `;\n  },\n\n  closeWrapper(t: Theme) {\n    const [paddingTop, paddingBottom] = getVerticalPaddings(t);\n    return css`\n      display: flex;\n      margin: -${paddingTop} -${t.toastPaddingX} -${paddingBottom} 0;\n    `;\n  },\n\n  closeWrapper6_1() {\n    return css`\n      margin: 0;\n    `;\n  },\n\n  link(t: Theme) {\n    const [paddingTop, paddingBottom] = getVerticalPaddings(t);\n    const padding = `${paddingTop} ${t.toastLinkPadding}`;\n\n    return css`\n      border: none;\n      font: inherit;\n      color: ${t.toastLinkColor};\n      cursor: pointer;\n      display: inline-block;\n      font-weight: 600;\n      background-color: transparent;\n\n      margin: -${paddingTop} 0 -${paddingBottom} ${t.toastPaddingX};\n\n      padding: ${padding};\n      transition: background ${t.transitionDuration} ${t.transitionTimingFunction};\n      &:hover {\n        background: ${t.toastLinkBgHover};\n        text-decoration: ${t.toastLinkTextDecorationHover};\n      }\n      padding: ${padding};\n      transition: background ${t.transitionDuration} ${t.transitionTimingFunction};\n    `;\n  },\n\n  link6_1(t: Theme) {\n    return css`\n      margin: 0;\n      padding: 0 ${t.toastLinkPadding};\n    `;\n  },\n\n  toastActionErrorColor(t: Theme) {\n    return css`\n      color: ${t.toastLinkColorError};\n\n      &:hover {\n        background: ${t.toastLinkBgHoverError};\n        text-decoration: ${t.toastLinkTextDecorationHover};\n      }\n\n      &:active {\n        background: ${t.toastLinkBgActiveError};\n        color: ${t.toastLinkColorActiveError};\n      }\n    `;\n  },\n\n  toastActionDefaultColor(t: Theme) {\n    return css`\n      color: ${t.toastLinkColor};\n\n      &:hover {\n        background: ${t.toastLinkBgHover};\n        text-decoration: ${t.toastLinkTextDecorationHover};\n      }\n\n      &:active {\n        background: ${t.toastLinkBgActive};\n      }\n    `;\n  },\n}));\n"]}

package/components/TokenInput/TokenInput.d.ts

@@ -112,6 +112,7 @@ export interface TokenInputState<T> {
     inputValueHeight: number;
     preventBlur?: boolean;
     loading?: boolean;
+    showMobilePopup?: boolean;
 }
 export type TokenInputExtendedItem<T> = T | (() => React.ReactElement<T>) | React.ReactElement<T>;
 export declare const DefaultState: {
@@ -125,6 +126,7 @@ export declare const DefaultState: {
     preventBlur: boolean;
     inputValueWidth: number;
     inputValueHeight: number;
+    showMobilePopup: boolean;
 };
 export declare const TokenInputDataTids: {
     readonly root: "TokenInput__root";
@@ -151,6 +153,7 @@ export declare class TokenInput<T = string> extends React.PureComponent<TokenInp
     private styles;
     private theme;
     private size;
+    private isMobileLayout;
     private input;
     private tokensInputMenu;
     private textHelper;
@@ -161,6 +164,8 @@ export declare class TokenInput<T = string> extends React.PureComponent<TokenInp
     private memoizedTokens;
     componentDidMount(): void;
     componentDidUpdate(prevProps: TokenInputProps<T> & DefaultProps<T>, prevState: TokenInputState<T>): void;
+    private get usesMobilePopup();
+    private isInlineInteractive;
     componentWillUnmount(): void;
     /** Программно устанавливает фокус на поле.
      * Появляется фокусная рамка, элемент получает клавиатурные события и воспринимается как текущий элемент для чтения скринридерами.
@@ -179,6 +184,10 @@ export declare class TokenInput<T = string> extends React.PureComponent<TokenInp
     private getLabelSizeClassName;
     private getInputSizeClassName;
     private renderMain;
+    private renderInlineField;
+    private renderMobilePopupFooter;
+    private renderTokenInputField;
+    private renderMobileMenu;
     /**
      * Сбрасывает введённое пользователем значение.
      * @public
@@ -192,10 +201,12 @@ export declare class TokenInput<T = string> extends React.PureComponent<TokenInp
     private get isCursorVisible();
     private get isEditingMode();
     private isCursorVisibleForState;
-    private inputRef;
+    private inlineInputRef;
+    private mobileInputRef;
     private tokensInputMenuRef;
     private textHelperRef;
-    private wrapperRef;
+    private inlineWrapperRef;
+    private mobileWrapperRef;
     private dispatch;
     private updateInputTextWidth;
     private handleInputFocus;
@@ -208,6 +219,11 @@ export declare class TokenInput<T = string> extends React.PureComponent<TokenInp
     private handleWrapperMouseDown;
     private handleWrapperMouseUp;
     private handleCopy;
+    private get isDelimiterInputEnabled();
+    private inputValueEndsWithDelimiter;
+    private splitValueByDelimiters;
+    private isDelimiterKeyEvent;
+    private tryApplyDelimiterFromInputValue;
     private handleInputPaste;
     private tryGetItems;
     private handleKeyDown;